/* Page: ki-bildgenerierung */
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-card: #1c2333;
--bg-table-header: #1a2332;
--bg-table-row1: #1c2333;
--bg-table-row2: #222b3a;
--text-primary: #e6edf3;
--text-secondary: #b0b8c4;
--text-muted: #8b949e;
--accent-blue: #58a6ff;
--accent-green: #3fb950;
--accent-orange: #d2991d;
--accent-red: #f85149;
--accent-purple: #a371f7;
--accent-cyan: #39c5cf;
--accent-pink: #d269b7;
--accent-teal: #00adef;
--border-color: #30363d;
--border-light: #21262d;
--highlight: #1f6feb22;
--shadow: 0 4px 24px rgba(0,0,0,0.4);
}


/* ---- NAVIGATION ---- */
.navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
padding: 1rem 2rem;
background: rgba(10, 10, 15, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
text-decoration: none;
}
.logo span { color: var(--accent-teal); }
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: var(--text-muted);
text-decoration: none;
font-weight: 500;
transition: 0.3s ease;
}
.nav-links a:hover { color: var(--text-primary); }
.hamburger { display: none; }

/* ---- BREADCRUMB ---- */
.breadcrumb-nav {
padding: 0.75rem 2rem;
font-size: 0.875rem;
color: var(--text-muted);
max-width: 1400px;
margin: 70px auto 0;
}
.breadcrumb-nav a {
color: var(--accent-teal);
text-decoration: none;
}
.breadcrumb-nav a:hover { text-decoration: underline; }
.breadcrumb-nav span { margin: 0 6px; color: var(--text-muted); }

/* ---- HERO ---- */
.hero {
background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #1c2333 100%);
border-bottom: 1px solid var(--border-color);
padding: 80px 24px 64px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: radial-gradient(ellipse at 30% 50%, rgba(0,173,239,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 70% 50%, rgba(163,113,247,0.06) 0%, transparent 60%);
animation: heroGlow 12s ease-in-out infinite alternate;
}
@keyframes heroGlow {
0% { transform: translate(0,0); }
100% { transform: translate(2%,1%); }
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--accent-teal) 0%, var(--accent-purple) 50%, var(--accent-cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
margin-bottom: 16px;
}
.hero .subtitle {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 720px;
margin: 0 auto;
position: relative;
}
.hero .meta {
margin-top: 24px;
font-size: 0.9rem;
color: var(--text-muted);
position: relative;
}
.hero .meta span { margin: 0 12px; }

/* ---- CONTAINER ---- */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 60px 24px;
}

/* ---- HEADINGS ---- */
h2 {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-primary);
margin: 56px 0 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border-color);
letter-spacing: -0.02em;
}
h3 {
font-size: 1.35rem;
font-weight: 600;
color: var(--accent-teal);
margin: 32px 0 12px;
}
h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 8px;
}

p {
margin: 14px 0;
color: var(--text-secondary);
}

a {
color: var(--accent-teal);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
a:hover { border-bottom-color: var(--accent-teal); }

/* ---- COMPARISON TABLE ---- */
.table-wrapper {
overflow-x: auto;
margin: 32px 0;
border-radius: 12px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow);
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
min-width: 900px;
}
thead th {
background: var(--bg-table-header);
color: var(--text-primary);
font-weight: 700;
padding: 16px 14px;
text-align: left;
border-bottom: 2px solid var(--border-color);
position: sticky;
top: 0;
z-index: 2;
white-space: nowrap;
}
thead th:first-child { border-radius: 12px 0 0 0; }
thead th:last-child { border-radius: 0 12px 0 0; }
tbody td {
padding: 14px;
border-bottom: 1px solid var(--border-light);
vertical-align: top;
}
tbody tr:nth-child(odd) td { background: var(--bg-table-row1); }
tbody tr:nth-child(even) td { background: var(--bg-table-row2); }
tbody tr:hover td { background: #243044; }
tbody tr:last-child td:first-child { border-radius: 0 0 0 12px; }
tbody tr:last-child td:last-child { border-radius: 0 0 12px 0; }
.criteria-col {
font-weight: 600;
color: var(--accent-cyan);
white-space: nowrap;
}

/* ---- BADGES ---- */
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
margin: 2px 0;
}
.badge-free    { background: #3fb95022; color: var(--accent-green); border: 1px solid #3fb95044; }
.badge-paid    { background: #d2991d22; color: var(--accent-orange); border: 1px solid #d2991d44; }
.badge-premium { background: #a371f722; color: var(--accent-purple); border: 1px solid #a371f744; }
.badge-good    { background: #3fb95022; color: var(--accent-green); border: 1px solid #3fb95044; }
.badge-ok      { background: #d2991d22; color: var(--accent-orange); border: 1px solid #d2991d44; }
.badge-limited { background: #f8514922; color: var(--accent-red); border: 1px solid #f8514944; }
.badge-great   { background: #39c5cf22; color: var(--accent-cyan); border: 1px solid #39c5cf44; }

/* ---- STARS ---- */
.stars { color: var(--accent-orange); letter-spacing: 2px; }
.stars-dim { color: var(--text-muted); letter-spacing: 2px; }

/* ---- PROVIDER CARDS ---- */
.provider-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 28px 32px;
margin: 28px 0;
box-shadow: var(--shadow);
transition: transform 0.2s, border-color 0.2s;
}
.provider-card:hover {
transform: translateY(-2px);
border-color: var(--accent-teal);
}
.provider-card .provider-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.provider-card .provider-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
font-weight: 800;
flex-shrink: 0;
}
.provider-card .provider-name {
font-size: 1.4rem;
font-weight: 700;
}
.provider-card .provider-company {
font-size: 0.85rem;
color: var(--text-muted);
}

.icon-midjourney   { background: linear-gradient(135deg, #2C1B4D, #6B3FA0); }
.icon-dalle        { background: linear-gradient(135deg, #10A37F, #1A7F64); }
.icon-sd           { background: linear-gradient(135deg, #1E1E2E, #6366F1); }
.icon-firefly      { background: linear-gradient(135deg, #FF1A1A, #FF6B35); }
.icon-ideogram     { background: linear-gradient(135deg, #0F172A, #3B82F6); }

/* ---- PROS / CONS ---- */
.pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 12px 0;
}
@media (max-width: 640px) {
.pros-cons { grid-template-columns: 1fr; }
}
.pros, .cons {
padding: 16px 20px;
border-radius: 10px;
}
.pros { background: #3fb9500d; border: 1px solid #3fb95022; }
.cons { background: #f851490d; border: 1px solid #f8514922; }
.pros h4 { color: var(--accent-green); margin-bottom: 8px; }
.cons h4 { color: var(--accent-red); margin-bottom: 8px; }
.pros ul, .cons ul { padding-left: 20px; }
.pros li, .cons li { margin: 4px 0; color: var(--text-secondary); font-size: 0.95rem; }

/* ---- SPEC GRID ---- */
.spec-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin: 16px 0;
}
.spec-item {
background: var(--bg-secondary);
border-radius: 8px;
padding: 14px 16px;
border: 1px solid var(--border-light);
}
.spec-item .spec-label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 4px;
}
.spec-item .spec-value {
font-weight: 600;
font-size: 1rem;
color: var(--text-primary);
}

/* ---- INFO BOX ---- */
.info-box {
background: linear-gradient(135deg, #1c2333 0%, #161b22 100%);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 28px 32px;
margin: 28px 0;
}
.info-box h3 { margin-top: 0; }

/* ---- TIP CARDS ---- */
.tip-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 28px 0;
}
.tip-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px 28px;
transition: transform 0.2s, border-color 0.2s;
}
.tip-card:hover {
transform: translateY(-2px);
border-color: var(--accent-teal);
}
.tip-card .tip-number {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--accent-teal);
color: #fff;
text-align: center;
line-height: 32px;
font-weight: 700;
font-size: 0.9rem;
margin-bottom: 12px;
}
.tip-card h4 {
color: var(--accent-teal);
margin-bottom: 8px;
}
.tip-card p {
font-size: 0.95rem;
color: var(--text-secondary);
}

/* ---- FOOTER ---- */
footer {
background: var(--bg-secondary);
padding: 3rem 2rem;
text-align: center;
border-top: 1px solid var(--border-color);
}
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.footer-links a {
color: var(--text-muted);
text-decoration: none;
transition: 0.3s ease;
border-bottom: none;
}
.footer-links a:hover { color: var(--text-primary); }
footer p { color: var(--text-muted); font-size: 0.9rem; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
.nav-links {
display: none;
position: fixed;
top: 60px; left: 0; right: 0;
background: rgba(10,10,15,0.98);
flex-direction: column;
padding: 1.5rem 2rem;
gap: 1.25rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
z-index: 999;
}
.nav-links.open { display: flex; }
.hamburger {
display: flex; flex-direction: column; gap: 5px;
cursor: pointer; padding: 4px;
}
.hamburger span {
width: 24px; height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: 150ms ease;
}
.hero { padding: 60px 20px 48px; }
.container { padding: 32px 20px; }
.spec-grid { grid-template-columns: 1fr 1fr; }
.tip-grid { grid-template-columns: 1fr; }
}