/*
Theme Name: GoDinIA
Theme URI: https://godinia.de
Author: Weser AI
Author URI: https://godinia.de
Description: Theme für GoDinIA – KI-Terminbuchung für Restaurants. Modernes Landingpage-Design basierend auf dem GoFonIA-Designsystem.
Version: 1.0.0
License: GPL v2 or later
Text Domain: godinia
*/

/* ═══════════════════════════════════════════
GO-DINIA.DE — ScaleTalk-inspired Design
═══════════════════════════════════════════ */

:root {
/* Brand Gradient: Pink → Rot-Orange → Orange */
--brand-pink:   335 100% 50%;
--brand-red:    12 100% 56%;
--brand-orange: 27 100% 50%;

/* Dark Mode (default) */
--background:        220 20% 6%;
--foreground:        0 0% 98%;
--card:              220 20% 8%;
--card-foreground:   0 0% 98%;
--primary:           27 100% 50%;
--primary-foreground: 0 0% 100%;
--secondary:         220 14% 12%;
--secondary-foreground: 0 0% 98%;
--muted:             220 14% 14%;
--muted-foreground:  220 10% 60%;
--accent:            220 14% 14%;
--accent-foreground: 220 20% 10%;
--destructive:       0 62% 30%;
--destructive-foreground: 0 0% 100%;
--border:            220 14% 18%;
--input:             220 14% 18%;
--ring:              27 100% 50%;
--radius:            0.75rem;

/* Special */
--gradient-brand: linear-gradient(135deg, hsl(335,100%,50%) 0%, hsl(12,100%,56%) 50%, hsl(27,100%,50%) 100%);
--gradient-brand-hover: linear-gradient(135deg, hsl(335,100%,45%) 0%, hsl(12,100%,50%) 50%, hsl(27,100%,45%) 100%);
--shadow-glow: 0 0 30px hsl(27 100% 50% / 0.2);
--shadow-card: 0 1px 3px rgba(0,0,0,0.2);
--shadow-elevated: 0 10px 40px -10px rgba(0,0,0,0.4);
--nav-blur: 12px;
}

/* ═══════════ BASE ═══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: hsl(var(--background));
color: hsl(var(--foreground));
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
transition: background 0.3s, color 0.3s;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }

/* ═══════════ NAV ═══════════ */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0 48px; height: 80px;
background: rgba(232, 0, 74, 0.85);
backdrop-filter: blur(var(--nav-blur));
-webkit-backdrop-filter: blur(var(--nav-blur));
border-bottom: 1px solid hsl(var(--border) / 0.8);
transition: box-shadow 0.3s;
}
nav.scrolled { box-shadow: var(--shadow-elevated); }
.nav-brand {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700; font-size: 28px;
background: none; color: #fff;
letter-spacing: -1px;
display:flex; flex-direction:column; line-height:1.1;
}
.nav-slogan{font-size:12px;font-weight:400;color:rgba(255,255,255,0.75);letter-spacing:2px;text-transform:uppercase;margin-top:4px}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-link { font-size: 14px; color: rgba(255,255,255,0.85); transition: color 0.2s; font-weight: 500; }
.nav-link:hover { color: #fff; }
.nav-cta {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 20px; border-radius: 8px;
background: var(--gradient-brand);
color: hsl(var(--foreground)); font-size: 14px; font-weight: 600;
transition: all 0.2s; box-shadow: 0 2px 16px hsl(27 100% 50% / 0.25);
}
.nav-cta:hover { background: rgba(255,255,255,0.15); border-color: #fff; transform: translateY(-1px); }

/* Theme toggle */
.theme-toggle {
width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.1); cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: 18px; color: #fff; transition: all 0.2s;
}
.theme-toggle:hover { background: rgba(255,255,255,0.2); border-color: #fff; color: #fff; }

/* ═══════════ HERO ═══════════ */
.hero {
min-height: 100vh; display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 120px 32px 80px; text-align: center; position: relative; z-index: 1;
background: 
radial-gradient(ellipse 80% 60% at 20% 50%, hsl(335 100% 50% / 0.06) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 80% 20%, hsl(27 100% 50% / 0.05) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 50% 100%, hsl(12 100% 56% / 0.04) 0%, transparent 70%);
}
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 16px; border-radius: 999px;
background: hsl(var(--secondary)); border: 1px solid rgba(255,255,255,0.2);
font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
text-transform: uppercase; color: hsl(var(--muted-foreground));
margin-bottom: 32px; animation: fadeUp 0.7s ease both;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--primary)); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.3} }

.hero h1 {
font-family: 'Space Grotesk', sans-serif; font-weight: 700;
font-size: clamp(38px, 7vw, 80px); line-height: 1.05;
letter-spacing: -2px; max-width: 800px; margin-bottom: 24px;
animation: fadeUp 0.7s 0.1s ease both;
}
.hero h1 em {
font-style: normal;
background: var(--gradient-brand);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-sub {
font-size: 18px; font-weight: 400; color: hsl(var(--muted-foreground));
max-width: 560px; margin-bottom: 40px; line-height: 1.7;
animation: fadeUp 0.7s 0.2s ease both;
}
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; animation: fadeUp 0.7s 0.3s ease both; }
.btn-primary {
display: inline-flex; align-items: center; gap: 8px;
padding: 15px 34px; border-radius: 10px;
background: var(--gradient-brand);
color: hsl(var(--foreground)); font-size: 15px; font-weight: 600;
box-shadow: 0 4px 24px hsl(27 100% 50% / 0.25);
transition: all 0.2s;
}
.btn-primary:hover { background: var(--gradient-brand-hover); box-shadow: 0 6px 32px hsl(27 100% 50% / 0.35); transform: translateY(-2px); }
.btn-outline {
display: inline-flex; align-items: center; gap: 8px;
padding: 15px 28px; border-radius: 10px;
background: hsl(var(--card)); color: hsl(var(--foreground));
border: 1px solid rgba(255,255,255,0.2); font-size: 15px; font-weight: 500;
transition: all 0.2s;
}
.btn-outline:hover { border-color: hsl(var(--primary) / 0.5); color: hsl(var(--primary)); }

/* Stats */
.stats-bar {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
margin: 56px auto 0; max-width: 800px; width: 100%;
background: hsl(var(--card)); border: 1px solid rgba(255,255,255,0.2);
border-radius: 16px; overflow: hidden;
box-shadow: var(--shadow-card);
animation: fadeUp 0.7s 0.4s ease both;
}
.stat { padding: 24px 28px; border-right: 1px solid hsl(var(--border)); text-align: center; }
.stat:last-child { border-right: none; }
.stat-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 28px; color: hsl(var(--foreground)); background: none; -webkit-text-fill-color: hsl(var(--foreground)); letter-spacing: -1px; line-height: 1; margin-bottom: 4px; }
.stat-label { font-size: 12px; color: hsl(var(--muted-foreground)); }

.gof-img{width:100%;border-radius:16px;margin:32px 0;box-shadow:var(--shadow-elevated);object-fit:cover;display:block}.gof-img-hero{max-width:960px;margin:48px auto 0;display:block;border-radius:20px}
.banner-section{position:relative;width:100%;max-width:100%;margin:90px 0 0 0;border-radius:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:420px;text-align:center;z-index:1}
.banner-bg{position:absolute;inset:0;background:url('images/banner.jpeg') center 40%/cover no-repeat;opacity:1.0;z-index:0}
.banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg,hsl(var(--background)/0.05) 0%,hsl(var(--background)/0.10) 40%,hsl(var(--background)/0.25) 100%);z-index:1}
.banner-content{position:relative;z-index:2;padding:56px 40px}
.banner-content .hero-badge{margin-bottom:20px;background:hsl(var(--background)/0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid hsl(var(--border)/0.5)}
.banner-content h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,5.5vw,64px);line-height:1.08;letter-spacing:-2px;margin-bottom:0;text-shadow:0 2px 40px hsl(var(--background)/0.95),0 0 80px hsl(var(--background)/0.85)}
.banner-content h1 em{font-style:normal;background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@media(max-width:900px){.banner-section{margin-top:100px;min-height:320px;border-radius:0;max-width:100%}.banner-content{padding:36px 24px}}
@media(max-width:600px){.banner-section{min-height:260px;border-radius:0;margin-top:100px;max-width:100%}.banner-content{padding:28px 16px}.banner-content h1{letter-spacing:-1px;line-height:1.12}}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════ SECTIONS ═══════════ */
section { position: relative; z-index: 1; }
.container { max-width: 1100px; margin: 0 auto; padding: 100px 32px; }
.section-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: 16px;
}
.section-eyebrow::before { content: ''; width: 20px; height: 2px; background: hsl(var(--primary)); }
.section-title {
font-family: 'Space Grotesk', sans-serif; font-weight: 700;
font-size: clamp(26px, 3.5vw, 42px); letter-spacing: -1px;
color: hsl(var(--foreground)); max-width: 520px; line-height: 1.15; margin-bottom: 56px;
}

/* ═══════════ FEATURES ═══════════ */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card {
background: hsl(var(--card)); border: 1px solid rgba(255,255,255,0.2);
border-radius: 14px; padding: 32px 28px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; overflow: hidden;
}
.feature-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--gradient-brand);
transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.feature-card:hover {
border-color: hsl(var(--primary) / 0.3);
box-shadow: var(--shadow-glow);
transform: translateY(-2px);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon {
width: 44px; height: 44px; border-radius: 10px;
background: hsl(var(--primary) / 0.08);
display: flex; align-items: center; justify-content: center;
font-size: 22px; margin-bottom: 20px;
}
.feature-title {
font-family: 'Space Grotesk', sans-serif; font-weight: 700;
font-size: 17px; color: hsl(var(--foreground));
margin-bottom: 10px; letter-spacing: -0.3px;
}
.feature-desc {
font-size: 14px; color: hsl(var(--muted-foreground)); line-height: 1.7;
}
.feature-tag {
display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 600;
letter-spacing: 0.5px; text-transform: uppercase;
color: hsl(var(--primary)); background: hsl(var(--primary) / 0.08);
border-radius: 999px; padding: 4px 10px;
}

/* ═══════════ WARM TRANSFER HIGHLIGHT ═══════════ */
.glass-panel {
background: hsl(var(--card) / 0.6);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid hsl(var(--border) / 0.6);
border-radius: 20px; padding: 56px;
position: relative; overflow: hidden;
box-shadow: 0 4px 6px -1px hsl(var(--foreground) / 0.03), 0 2px 4px -2px hsl(var(--foreground) / 0.02), inset 0 1px 0 0 hsl(var(--foreground) / 0.03);
}
.glass-panel::after {
content: ''; position: absolute; top: -100px; right: -100px;
width: 350px; height: 350px; border-radius: 50%;
background: radial-gradient(circle, hsl(var(--primary) / 0.15) 0%, transparent 70%);
pointer-events: none;
}
.glass-panel .section-eyebrow { color: hsl(var(--primary)); }
.glass-panel .section-eyebrow::before { background: hsl(var(--primary)); }
.glass-panel h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(22px, 3vw, 36px); letter-spacing: -1px; color: hsl(var(--foreground)); margin-bottom: 16px; }
.glass-panel p { color: hsl(var(--muted-foreground)); font-size: 15px; max-width: 560px; line-height: 1.8; margin-bottom: 36px; }

.transfer-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; z-index: 1; }
.transfer-mode {
background: hsl(var(--card)); border: 1px solid rgba(255,255,255,0.2);
border-radius: 12px; padding: 24px;
}
.transfer-mode:hover { border-color: hsl(var(--primary) / 0.3); box-shadow: var(--shadow-glow); }
.transfer-mode-title { font-weight: 700; font-size: 15px; color: hsl(var(--foreground)); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.transfer-mode-desc { font-size: 13px; color: hsl(var(--muted-foreground)); line-height: 1.7; }
.transfer-killer {
margin-top: 24px; background: hsl(var(--primary) / 0.08);
border: 1px solid hsl(var(--primary) / 0.12); border-radius: 12px;
padding: 20px 24px; font-size: 13px; color: hsl(var(--muted-foreground)); line-height: 1.7;
position: relative; z-index: 1;
}
.transfer-killer strong { color: hsl(var(--foreground)); }

/* ═══════════ PROVIDER SECTION ═══════════ */
.provider-section { text-align: center; padding: 80px 32px; }
.provider-section h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(22px, 3vw, 36px); letter-spacing: -1px; margin-bottom: 12px; }
.provider-section p { color: hsl(var(--muted-foreground)); font-size: 15px; margin-bottom: 40px; }
.provider-groups { display: flex; flex-direction: column; gap: 20px; max-width: 820px; margin: 0 auto; }
.provider-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.provider-group-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: hsl(var(--muted-foreground)); min-width: 100px; text-align: right; }
.provider-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.provider-pill {
padding: 6px 16px; border-radius: 999px;
border: 1px solid rgba(255,255,255,0.2); background: hsl(var(--card));
font-size: 13px; color: hsl(var(--muted-foreground)); font-weight: 500;
}
.provider-pill.active { border-color: hsl(var(--primary) / 0.3); color: hsl(var(--primary)); background: hsl(var(--primary) / 0.06); }

/* ═══════════ DSGVO STRIP ═══════════ */
.dsgvo-strip {
background: hsl(var(--card)); border-top: 1px solid hsl(var(--border));
border-bottom: 1px solid hsl(var(--border)); padding: 28px 32px;
display: flex; align-items: center; justify-content: center; gap: 40px;
flex-wrap: wrap; position: relative; z-index: 1;
}
.dsgvo-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: hsl(var(--muted-foreground)); }
.dsgvo-item strong { color: hsl(var(--foreground)); font-weight: 500; }
.dsgvo-icon {
width: 32px; height: 32px; border-radius: 8px;
background: hsl(var(--primary) / 0.08); display: flex; align-items: center;
justify-content: center; font-size: 16px; flex-shrink: 0;
}

/* ═══════════ PRICING ═══════════ */
.pricing-wrap { text-align: center; }
.pricing-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
margin-top: 56px; text-align: left; max-width: 960px; margin-left: auto; margin-right: auto;
}
.pricing-card {
background: hsl(var(--card)); border: 1px solid rgba(255,255,255,0.2);
border-radius: 16px; padding: 40px 32px; position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover { border-color: hsl(var(--primary) / 0.3); box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.pricing-card.featured {
border-color: hsl(var(--primary) / 0.5);
box-shadow: var(--shadow-glow);
}
.featured-badge {
position: absolute; top: -12px; left: 32px;
background: var(--gradient-brand); color: hsl(var(--foreground));
font-size: 11px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; padding: 4px 14px; border-radius: 999px;
}
.plan-name { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 16px; }
.plan-price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 48px; letter-spacing: -2px; color: hsl(var(--foreground)); line-height: 1; margin-bottom: 4px; }
.plan-price sup { font-size: 22px; font-weight: 500; vertical-align: super; }
.plan-price span { font-size: 16px; font-weight: 400; color: hsl(var(--muted-foreground)); letter-spacing: 0; }
.plan-mins { font-size: 13px; color: hsl(var(--muted-foreground)); margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid hsl(var(--border)); }
.plan-features { list-style: none; margin-bottom: 32px; }
.plan-features li {
font-size: 14px; color: hsl(var(--muted-foreground));
padding: 7px 0; display: flex; align-items: center; gap: 10px;
}
.plan-features li::before {
content: ''; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
background: hsl(var(--primary) / 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6b00'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5 5-5 1 1z'/%3E%3C/svg%3E") no-repeat center;
}
.plan-cta {
display: block; text-align: center; padding: 13px;
border-radius: 10px; font-size: 14px; font-weight: 600;
transition: all 0.2s; border: 1px solid rgba(255,255,255,0.2);
color: hsl(var(--foreground)); background: hsl(var(--secondary));
}
.plan-cta:hover { border-color: hsl(var(--primary) / 0.5); background: hsl(var(--card)); }
.pricing-card.featured .plan-cta {
background: var(--gradient-brand); color: hsl(var(--foreground));
border-color: transparent; box-shadow: 0 4px 20px hsl(27 100% 50% / 0.25);
}
.pricing-card.featured .plan-cta:hover {
background: var(--gradient-brand-hover); box-shadow: 0 6px 28px hsl(27 100% 50% / 0.35);
}

/* ═══════════ HOW IT WORKS ═══════════ */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-card { text-align: center; padding: 32px 20px; }
.step-number {
width: 48px; height: 48px; border-radius: 50%;
background: var(--gradient-brand); color: hsl(var(--foreground));
display: flex; align-items: center; justify-content: center;
font-family: 'Space Grotesk', sans-serif; font-weight: 700;
font-size: 20px; margin: 0 auto 16px;
}
.step-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.step-desc { font-size: 14px; color: hsl(var(--muted-foreground)); line-height: 1.7; }

/* ═══════════ FAQ ═══════════ */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
border-bottom: 1px solid hsl(var(--border)); padding: 24px 0; cursor: pointer;
}
.faq-q { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; align-items: center; }
.faq-q::after { content: '+'; font-size: 24px; font-weight: 300; color: hsl(var(--muted-foreground)); transition: transform 0.2s; }
.faq-item.open .faq-q::after { content: '−'; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; color: hsl(var(--muted-foreground)); font-size: 15px; line-height: 1.8; }
.faq-item.open .faq-a { max-height: 200px; margin-top: 12px; }

/* ═══════════ FOOTER ═══════════ */
footer {
background: hsl(var(--card)); border-top: 1px solid hsl(var(--border));
position: relative; z-index: 1;
}
.footer-inner {
max-width: 1100px; margin: 0 auto; padding: 60px 32px 40px;
display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
.footer-brand-name {
font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 28px;
background: var(--gradient-brand); -webkit-background-clip: text;
-webkit-text-fill-color: transparent; background-clip: text;
display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
letter-spacing: -1px;
}
.footer-desc { font-size: 13px; color: hsl(var(--muted-foreground)); max-width: 300px; line-height: 1.8; }
.footer-contact h3 { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 16px; }
.contact-block { font-size: 13px; color: hsl(var(--muted-foreground)); line-height: 2; }
.contact-block a { color: hsl(var(--primary)); text-decoration: none; }
.contact-block a:hover { text-decoration: underline; }
.footer-bottom {
border-top: 1px solid hsl(var(--border)); padding: 20px 32px;
display: flex; justify-content: space-between; align-items: center;
max-width: 1100px; margin: 0 auto;
}
.footer-bottom p { font-size: 12px; color: hsl(var(--muted-foreground)); }
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-size: 12px; color: hsl(var(--muted-foreground)); text-decoration: none; }
.footer-links a:hover { color: hsl(var(--foreground)); }

/* ═══════════ ANIMATIONS ═══════════ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 900px) {
nav { padding: 0 24px; height: 70px; }
.nav-links a.nav-link:nth-child(2),
.nav-links a.nav-link:nth-child(3) { display: none; }
.hero { padding: 100px 24px 60px; }
.container { padding: 72px 24px; }
.features-grid { grid-template-columns: 1fr 1fr; }
.pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
.steps-grid { grid-template-columns: 1fr; }
.stats-bar { grid-template-columns: 1fr 1fr; }
.stat { border-right: 1px solid hsl(var(--border)); }
.stat:nth-child(2) { border-right: none; }
.stat:nth-child(3) { border-top: 1px solid hsl(var(--border)); }
.stat:nth-child(4) { border-top: 1px solid hsl(var(--border)); border-right: none; }
.dsgvo-strip { padding: 24px; gap: 24px; }
.footer-inner { grid-template-columns: 1fr; padding: 40px 24px; }
.footer-bottom { flex-direction: column; gap: 10px; padding: 16px 24px; text-align: center; }
.glass-panel { padding: 40px 28px; }
.transfer-modes { grid-template-columns: 1fr; }
.provider-group-label { min-width: 60px; font-size: 10px; }
.provider-section { padding: 60px 24px; }
}
@media (max-width: 600px) {
.hero h1 { letter-spacing: -1px; }
.features-grid { grid-template-columns: 1fr; }
.stats-bar { grid-template-columns: 1fr 1fr; }
}

/* ═══════════ COOKIE SLIDER ═══════════ */
.cookie-overlay {
position: fixed; inset: 0; z-index: 9998;
background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.cookie-overlay.active { opacity: 1; pointer-events: auto; }

.cookie-slider {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 9999;
width: 28%; min-width: 380px; max-width: 520px;
background: hsl(var(--card)/0.95);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border-left: 1px solid hsl(var(--border)/0.6);
box-shadow: -8px 0 40px rgba(0,0,0,0.4), 0 0 80px hsl(var(--primary)/0.08);
transform: translateX(105%); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
display: flex; flex-direction: column;
}
.cookie-slider.active { transform: translateX(0); }

.cookie-slider-inner {
padding: 40px 32px 32px; overflow-y: auto; flex:1;
display: flex; flex-direction: column;
}
.cookie-slider-inner::-webkit-scrollbar { width: 3px; }
.cookie-slider-inner::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 2px; }

.cookie-close {
position: absolute; top: 16px; right: 20px;
background: none; border: none; font-size: 28px; color: hsl(var(--muted-foreground));
cursor: pointer; line-height: 1; transition: color 0.2s;
}
.cookie-close:hover { color: hsl(var(--foreground)); }

.cookie-back {
background: none; border: none; color: hsl(var(--muted-foreground));
font-size: 14px; cursor: pointer; padding: 0; margin-bottom: 16px;
text-align: left; transition: color 0.2s;
}
.cookie-back:hover { color: hsl(var(--foreground)); }

.cookie-icon { font-size: 40px; margin-bottom: 8px; }

.cookie-title {
font-family: 'Space Grotesk', sans-serif; font-weight: 700;
font-size: 22px; color: hsl(var(--foreground)); margin-bottom: 16px;
letter-spacing: -0.5px;
}

.cookie-text {
font-size: 13px; color: hsl(var(--muted-foreground)); line-height: 1.7; margin-bottom: 12px;
}

.cookie-note {
font-size: 12px; color: hsl(var(--muted-foreground)/0.7); line-height: 1.6; margin-bottom: 24px;
}

.cookie-buttons {
display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;
}

.cookie-btn {
width: 100%; padding: 13px 20px; border-radius: 10px; border: none;
font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;
font-family: 'Inter', sans-serif; text-align: center;
}
.cookie-btn.accept {
background: var(--gradient-brand); color: hsl(var(--foreground));
box-shadow: 0 2px 16px hsl(var(--primary)/0.25);
}
.cookie-btn.accept:hover { transform: translateY(-1px); box-shadow: 0 4px 24px hsl(var(--primary)/0.35); }
.cookie-btn.essential {
background: transparent; color: hsl(var(--foreground));
border: 1px solid rgba(255,255,255,0.2);
}
.cookie-btn.essential:hover { border-color: hsl(var(--foreground)/0.5); }
.cookie-btn.settings {
background: transparent; color: hsl(var(--muted-foreground));
border: none; font-size: 13px; font-weight: 500;
}
.cookie-btn.settings:hover { color: hsl(var(--foreground)); }

.cookie-links {
display: flex; gap: 8px; justify-content: center; font-size: 12px;
color: hsl(var(--muted-foreground)); margin-top: auto; padding-top: 16px;
}
.cookie-links a { color: hsl(var(--muted-foreground)); text-decoration: underline; }
.cookie-links a:hover { color: hsl(var(--foreground)); }

/* Cookie categories (Layer 2) */
.cookie-categories { margin-bottom: 24px; }
.cookie-cat {
background: hsl(var(--secondary)/0.5); border: 1px solid hsl(var(--border)/0.5);
border-radius: 12px; padding: 16px; margin-bottom: 10px;
transition: all 0.2s;
}
.cookie-cat:hover { border-color: hsl(var(--border)); }
.cookie-cat-header {
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.cookie-cat-header strong {
font-size: 14px; color: hsl(var(--foreground)); font-weight: 600; display: block; margin-bottom: 4px;
}
.cookie-cat-header p {
font-size: 12px; color: hsl(var(--muted-foreground)); line-height: 1.5; margin: 0;
}
.cookie-detail {
margin-top: 10px; padding-top: 10px; border-top: 1px solid hsl(var(--border)/0.5);
font-size: 11px; color: hsl(var(--muted-foreground)); line-height: 1.8;
}
.cookie-detail span { display: block; }

/* Toggle switch */
.cookie-toggle {
position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0;
}
.cookie-toggle input { opacity: 0; width: 0; height: 0; }
.cookie-slider-track {
position: absolute; cursor: pointer; inset: 0;
background: hsl(var(--border)); border-radius: 24px; transition: 0.3s;
}
.cookie-slider-track::before {
content: ''; position: absolute; height: 18px; width: 18px;
left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s;
}
.cookie-toggle input:checked + .cookie-slider-track {
background: var(--gradient-brand);
}
.cookie-toggle input:checked + .cookie-slider-track::before {
transform: translateX(20px);
}
.cookie-toggle.disabled { opacity: 0.5; cursor: not-allowed; }
.cookie-toggle.disabled .cookie-slider-track { cursor: not-allowed; }

/* Consent ID */
.cookie-consent-id {
margin-top: 16px; padding-top: 12px; border-top: 1px solid hsl(var(--border)/0.5);
font-size: 10px; color: hsl(var(--muted-foreground)/0.5);
font-family: monospace; word-break: break-all;
}

/* Footer cookie link */
.cookie-footer-link {
position: fixed; bottom: 20px; left: 20px; z-index: 1000;
}
.cookie-footer-link button {
padding: 10px 18px; border-radius: 999px;
background: hsl(var(--card)/0.9); backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.2); color: hsl(var(--muted-foreground));
font-size: 13px; cursor: pointer; transition: all 0.2s;
box-shadow: var(--shadow-card);
}
.cookie-footer-link button:hover {
border-color: hsl(var(--primary)/0.4); color: hsl(var(--foreground));
box-shadow: var(--shadow-glow);
}

@media (max-width: 600px) {
.cookie-slider { width: 100%; min-width: unset; max-width: unset; }
.cookie-slider-inner { padding: 32px 20px 24px; }
}

/* Language Switcher */
.lang-switcher{display:flex;align-items:center;gap:3px;margin-left:12px;padding-left:12px;border-left:1px solid hsl(var(--border))}
.lang-pill{padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:0.5px;color:rgba(255,255,255,0.7);border:1px solid transparent;transition:all 0.2s;text-decoration:none;line-height:1.6}
.lang-pill:hover{color:#fff;border-color:rgba(255,255,255,0.3);background:hsl(var(--secondary));text-decoration:none}
.lang-pill.active{background:rgba(255,255,255,0.2);color:#fff;border-color:rgba(255,255,255,0.3);pointer-events:none}

/* Logo Carousel */
.logo-bar{overflow:hidden;padding:32px 0;background:hsl(var(--card)/0.2);border-top:1px solid hsl(var(--border)/0.3);border-bottom:1px solid hsl(var(--border)/0.3);position:relative}
.logo-bar::before,.logo-bar::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.logo-bar::before{left:0;background:linear-gradient(to right,hsl(var(--background)),transparent)}
.logo-bar::after{right:0;background:linear-gradient(to left,hsl(var(--background)),transparent)}
.logo-track{display:flex;gap:56px;animation:logoslide 30s linear infinite;width:max-content}
.logo-track span{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;color:hsl(var(--muted-foreground)/0.45);white-space:nowrap;letter-spacing:-0.5px;user-select:none}
@keyframes logoslide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Testimonials */
.testimonials{padding:80px 0 40px;text-align:center}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:40px auto 0;padding:0 32px}
.testimonial-card{background:hsl(var(--card)/0.4);border:1px solid hsl(var(--border)/0.5);border-radius:16px;padding:28px;text-align:left;transition:all 0.3s;position:relative}
.testimonial-card:hover{border-color:hsl(var(--primary)/0.3);box-shadow:var(--shadow-glow);transform:translateY(-2px)}
.testimonial-card .stars{color:hsl(27 100% 50%);font-size:14px;margin-bottom:12px;letter-spacing:2px}
.testimonial-card .quote{font-size:14px;color:hsl(var(--foreground));line-height:1.7;margin-bottom:16px;font-style:italic}
.testimonial-card .quote::before{content:'„';color:hsl(var(--primary));font-size:24px;font-weight:700}
.testimonial-card .author{font-weight:600;font-size:13px;color:hsl(var(--foreground))}
.testimonial-card .role{font-size:11px;color:hsl(var(--muted-foreground));margin-top:2px}

@media(max-width:768px){.testimonial-grid{grid-template-columns:1fr}.logo-track{gap:32px}.logo-track span{font-size:15px}}