/* ---------------------------------------------------------------------------
   confacAI Werbeseite (oeffentlich, ohne Anmeldung)
   Wer nicht angemeldet ist, wird von portal-auth.js hierher geleitet.
   Bewusst eine eigenstaendige Datei ohne Portal-Skripte: sie muss auch dann
   laden, wenn Backend oder Sitzung nicht verfuegbar sind.
   --------------------------------------------------------------------------- */
:root{
  color-scheme:dark;
  --bg:#07090e; --panel:#11151e; --panel-2:#0d1118; --line:#232c39; --line-soft:#1a212c;
  --muted:#8d99aa; --muted-2:#7d8a9c; --text:#f5f7fb; --red:#ff3154; --red-soft:#ff5470;
  --green:#4fdca0;
  --maxw:1180px;
  font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);
  background:
    radial-gradient(900px 520px at 78% 6%,rgba(255,49,84,.16),transparent 62%),
    radial-gradient(820px 520px at 10% 26%,rgba(64,122,255,.09),transparent 62%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;letter-spacing:-.03em}
p{margin:0}

/* Kopfzeile ---------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(7,9,14,.86);backdrop-filter:blur(18px)}
.nav{display:flex;align-items:center;gap:30px;max-width:var(--maxw);margin:auto;padding:20px 24px}
.brand img{display:block;width:190px}
.nav-links{display:flex;gap:26px;margin-left:auto;color:#aab5c7;font-size:15px}
.nav-links a{padding:6px 0;border-bottom:1px solid transparent;transition:.2s}
.nav-links a:hover{color:#fff;border-bottom-color:var(--red)}
.nav-actions{display:flex;align-items:center;gap:9px;margin-left:16px}
.locale-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #2b3644;border-radius:9px;background:#101620}
.locale-switch button{padding:6px 9px;border:0;border-radius:6px;background:transparent;color:#8d99aa;font-size:12px;font-weight:750;cursor:pointer;transition:.15s}
.locale-switch button:hover{color:#e9edf5}
.locale-switch button[aria-pressed="true"]{background:#243040;color:#fff}
.locale-sep{width:1px;height:16px;margin:0 4px;background:#2b3644}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 19px;border:1px solid #344050;border-radius:10px;background:#151b25;color:#e9edf5;font-size:14px;font-weight:750;cursor:pointer;transition:.2s;white-space:nowrap}
.btn:hover{border-color:#7a8ca4;transform:translateY(-1px)}
.btn.primary{border-color:var(--red);background:linear-gradient(135deg,#ff3154,#e51e43);color:#fff;box-shadow:0 10px 28px rgba(255,49,84,.22)}
.btn.primary:hover{box-shadow:0 14px 34px rgba(255,49,84,.3)}
.btn.big{padding:15px 24px;font-size:15px}

/* Sprunglink: erste Tabulatorstation, sonst unsichtbar. */
.skip{position:absolute;left:12px;top:-60px;z-index:60;padding:11px 16px;border-radius:9px;background:var(--red);color:#fff;font-size:14px;font-weight:750;transition:top .16s ease}
.skip:focus{top:12px}

/* Sichtbarer Tastaturfokus auf allen bedienbaren Elementen. */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--red-soft);outline-offset:3px;border-radius:6px}

/* Mobile Navigation ohne Skript: eine Checkbox steuert das Aufklappen. */
.nav-toggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav-burger{display:none;margin-left:auto;padding:9px 11px;border:1px solid #344050;border-radius:10px;background:#151b25;color:#e9edf5;cursor:pointer;font-size:20px;line-height:1}
.nav-toggle:focus-visible+.nav-burger{outline:2px solid var(--red-soft);outline-offset:3px}

/* Bausteine ---------------------------------------------------------------- */
.section{max-width:var(--maxw);margin:auto;padding:88px 24px}
.section.tight{padding-top:24px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid #3a3341;border-radius:999px;background:#1c121b;color:#ff8597;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.section-heading{max-width:680px;margin:0 auto 42px;text-align:center}
.section-heading h2{margin:14px 0 10px;font-size:clamp(30px,4vw,46px)}
.section-heading p{color:var(--muted);font-size:15px;line-height:1.6}

/* Hero --------------------------------------------------------------------- */
.hero{max-width:var(--maxw);margin:auto;padding:92px 24px 66px;text-align:center}
.hero h1{max-width:880px;margin:24px auto 18px;font-size:clamp(42px,6.4vw,76px);line-height:1;letter-spacing:-.055em}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#fff 12%,var(--red-soft) 78%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero>p{max-width:640px;margin:0 auto;color:#a8b3c4;font-size:18px;line-height:1.55}
.hero-actions{display:flex;justify-content:center;gap:12px;margin:30px 0 14px}
.hero-note{color:var(--muted-2);font-size:12px}
.hero-preview{position:relative;max-width:960px;margin:38px auto 0;padding:9px;border:1px solid #333d4b;border-radius:20px;background:linear-gradient(145deg,#161c27,#0d1118);box-shadow:0 30px 90px rgba(0,0,0,.5)}
.hero-preview img{display:block;width:100%;border-radius:13px}
.hero-preview-tag{position:absolute;right:22px;bottom:22px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(7,9,14,.78);backdrop-filter:blur(8px);color:#c3cddb;font-size:11px;font-weight:700;letter-spacing:.04em}
.hero-preview-tag i{font-size:14px;color:var(--red-soft)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:860px;margin:34px auto 0}
.stat{padding:6px 14px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat strong{display:block;font-size:27px}
.stat span{display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.4}

/* Creator-Band ------------------------------------------------------------- */
.creator-band{display:grid;grid-template-columns:.95fr 1.05fr;gap:34px;align-items:center;max-width:var(--maxw);margin:auto;padding:24px 24px 70px}
.creator-band-media{position:relative;padding:8px;border:1px solid #303b4d;border-radius:19px;background:linear-gradient(145deg,#151b27,#0c1018);box-shadow:0 26px 70px rgba(0,0,0,.4)}
.creator-band-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:13px}
.creator-band h2{margin:14px 0 12px;font-size:clamp(28px,3.6vw,42px)}
.creator-band p{max-width:520px;color:var(--muted);font-size:15px;line-height:1.65}
.creator-points{display:grid;gap:12px;margin-top:24px}
.creator-points div{display:flex;gap:11px;color:#c8d2e0;font-size:14px;line-height:1.5}
.creator-points i{flex:0 0 auto;color:var(--green);font-size:19px}

/* Tools -------------------------------------------------------------------- */
.tool-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:-18px 0 40px}
.tool-nav a{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#10151e;color:#b7c1d1;font-size:12px;font-weight:700;transition:.2s}
.tool-nav a:hover{border-color:var(--red);color:#fff}
.tool-area{margin-bottom:52px;scroll-margin-top:90px}
.tool-area-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--line-soft)}
.tool-area-head h3{display:flex;align-items:center;gap:10px;font-size:21px}
.tool-area-head h3 b{padding:3px 9px;border-radius:999px;background:#251520;color:var(--red-soft);font-size:11px;font-weight:800}
.tool-area-head p{color:var(--muted-2);font-size:13px}
/* Tools als ruhige, durchgehende Liste. Ein zweispaltiges Raster hat die
   Trennlinien gegeneinander versetzt und Luecken gelassen, sobald eine Spalte
   frueher endete. Volle Breite mit fester Namensspalte laeuft dagegen sauber
   auf einer Kante. */
.tool-list{border-top:1px solid var(--line-soft)}
.tool{
  display:grid;grid-template-columns:30px 210px minmax(0,1fr);gap:0 22px;
  padding:17px 10px;border-bottom:1px solid var(--line-soft);
  transition:background .18s ease;
}
.tool:hover{background:rgba(255,255,255,.022)}
.tool i{grid-column:1;grid-row:1/span 2;margin-top:1px;color:#ff526e;font-size:21px}
.tool h4{grid-column:2;grid-row:1/span 2;font-size:15px;line-height:1.35}
.tool p{grid-column:3;grid-row:1;color:#9ba6b6;font-size:13.5px;line-height:1.6}
.tool span{grid-column:3;grid-row:2;margin-top:5px;color:#71c7a2;font-size:12.5px;line-height:1.5}
@media(max-width:860px){
  .tool{grid-template-columns:30px minmax(0,1fr);gap:0 16px;padding:16px 6px}
  .tool h4{grid-column:2;grid-row:1}
  .tool p{grid-column:2;grid-row:2;margin-top:4px}
  .tool span{grid-column:2;grid-row:3}
  .tool i{grid-row:1/span 3}
}

/* Ablauf ------------------------------------------------------------------- */
.flow-grid{display:grid;grid-template-columns:1fr .92fr;gap:30px;align-items:center}
.steps{position:relative;display:grid;gap:30px;padding-left:8px}
.steps::before{content:"";position:absolute;left:26px;top:12px;bottom:12px;width:1px;background:linear-gradient(180deg,var(--red),rgba(255,49,84,.08))}
.step{position:relative;display:grid;grid-template-columns:38px 1fr;gap:16px;align-items:start}
.step b{position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#1b1119;border:1px solid rgba(255,49,84,.5);color:var(--red-soft);font-size:12px;font-weight:800}
.step h3{font-size:17px}
.step p{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.6}
.flow-media{padding:8px;border:1px solid #303b4d;border-radius:18px;background:linear-gradient(145deg,#151b27,#0c1018)}
.flow-media img{display:block;width:100%;border-radius:12px}

/* Bildschirmaufnahmen -------------------------------------------------------
   Bewusst ohne Kartenrahmen: nur das Bild plus eine schlichte Bildunterschrift.
   Sonst entsteht wieder der Eindruck lauter gleicher Kaesten. */
.shot{margin:0}
.shot img{display:block;width:100%;border:1px solid #2b3543;border-radius:13px;background:#0c1018}
.shot figcaption{margin-top:13px}
.shot figcaption b{display:block;color:#e7ecf4;font-size:14px;font-weight:750;letter-spacing:-.01em}
.shot figcaption span{display:block;margin-top:5px;color:var(--muted-2);font-size:13px;line-height:1.6}
.shot-wide{max-width:1000px;margin:0 auto}
.shot-wide img{border-radius:16px;box-shadow:0 34px 90px rgba(0,0,0,.55)}
.shot-wide figcaption{max-width:720px;margin:16px auto 0;text-align:center}
.shot-stack{display:grid;gap:62px;margin-top:70px}
.shot-pair{display:grid;grid-template-columns:1.5fr .78fr;gap:40px;align-items:center}
.shot-pair figcaption{margin-top:0}
.shot-pair figcaption b{font-size:19px;letter-spacing:-.02em}
.shot-pair figcaption span{margin-top:9px;font-size:13.5px}
/* Jede zweite Zeile spiegelt sich - dann muss auch die breite Spalte wechseln,
   sonst schrumpft dort das Bild. */
.shot-pair.flip{grid-template-columns:.78fr 1.5fr}
.shot-pair.flip img{grid-column:2;grid-row:1}
.shot-pair.flip figcaption{grid-column:1;grid-row:1}
.shot-note{display:flex;gap:11px;justify-content:center;max-width:760px;margin:52px auto 0;color:#78838f;font-size:12.5px;line-height:1.6;text-align:left}
.shot-note i{flex:0 0 auto;color:#5f6b7a;font-size:16px}

/* Belege statt Bewertungen -------------------------------------------------- */
.trust{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}
.trust-lead h2{margin:14px 0 12px;font-size:clamp(27px,3.3vw,38px)}
.trust-lead p{color:var(--muted);font-size:15px;line-height:1.65}
.trust-lead .btn{margin-top:22px}
.trust-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 30px;margin:0;padding:0;list-style:none}
.trust-list li{display:grid;grid-template-columns:22px 1fr;gap:13px;padding:15px 0;border-top:1px solid var(--line-soft)}
.trust-list li:nth-child(-n+2){border-top:0}
.trust-list i{color:#4fdca0;font-size:18px;line-height:1.35}
.trust-list b{display:block;color:#e7ecf4;font-size:14px;font-weight:750}
.trust-list span{display:block;margin-top:4px;color:var(--muted-2);font-size:13px;line-height:1.55}
.trust-voices{display:flex;gap:13px;max-width:820px;margin:44px 0 0;padding:18px 20px;border-left:2px solid rgba(255,49,84,.55);color:#9aa5b5;font-size:13.5px;line-height:1.7}
.trust-voices i{flex:0 0 auto;color:var(--red-soft);font-size:19px}
.trust-voices strong{color:#dbe2ec}
.trust-voices a{color:var(--red-soft);border-bottom:1px solid rgba(255,84,112,.4)}

/* Credits ------------------------------------------------------------------ */
.credit-explainer{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.credit-card{padding:24px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg,#121821,#0d1118)}
.credit-card.is-subscription{border-color:rgba(255,49,84,.36)}
.credit-card.is-purchased{border-color:rgba(79,220,160,.32)}
.credit-card-top{display:flex;align-items:center;gap:11px}
.credit-card-top i{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;font-size:21px}
.is-subscription .credit-card-top i{background:#281421;color:#ff526e}
.is-purchased .credit-card-top i{background:#11291f;color:var(--green)}
.credit-card-top h3{font-size:18px}
.credit-card>p{margin-top:14px;color:#a4aebd;font-size:14px;line-height:1.6}
.credit-facts{display:grid;gap:9px;margin-top:16px}
.credit-facts div{display:flex;gap:10px;color:#c3cddb;font-size:13px;line-height:1.5}
.credit-facts i{flex:0 0 auto;font-size:17px}
.is-subscription .credit-facts i{color:#ff7a90}
.is-purchased .credit-facts i{color:var(--green)}
.credit-order{display:flex;gap:12px;max-width:820px;margin:26px auto 0;color:#9aa5b5;font-size:13px;line-height:1.65}
.credit-order i{flex:0 0 auto;color:#ffb03d;font-size:19px}
.credit-order strong{color:#dbe2ec}

/* Preise ------------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.plan{display:flex;flex-direction:column;padding:26px;border:1px solid var(--line);border-radius:16px;background:#11161f}
.plan.featured{border-color:var(--red);background:linear-gradient(160deg,#1d1420,#11161f 62%);box-shadow:0 16px 46px rgba(255,49,84,.14)}
.plan-tag{align-self:flex-start;padding:5px 10px;border-radius:999px;background:#251520;color:var(--red-soft);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.plan h3{margin:14px 0 6px;font-size:20px}
.plan .price{display:flex;align-items:baseline;gap:6px;margin:10px 0 4px}
.plan .price strong{font-size:34px;letter-spacing:-.04em}
.plan .price span{color:var(--muted);font-size:13px}
.plan .credits{color:#c8d2e0;font-size:13px;font-weight:700}
.plan ul{margin:18px 0 22px;padding:0;list-style:none;display:grid;gap:9px}
.plan li{display:flex;gap:9px;color:#aeb8c6;font-size:13px;line-height:1.5}
.plan li i{flex:0 0 auto;color:var(--green);font-size:16px}
.plan .btn{margin-top:auto}
.credit-reach{margin-top:34px;padding:26px 0 0;border-top:1px solid var(--line)}
.credit-reach-intro{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:18px}
.credit-reach-intro .eyebrow{display:none}
.credit-reach-intro h3{margin:0;font-size:22px;letter-spacing:-.025em}
.credit-reach-intro p{max-width:440px;margin:0;color:var(--muted);font-size:13px;line-height:1.6;text-align:right}
.credit-reach-grid{border-top:1px solid var(--line-soft)}
.credit-reach-head,.credit-reach-row{display:grid;grid-template-columns:minmax(260px,1.7fr) repeat(3,minmax(110px,1fr));align-items:center}
.credit-reach-head{min-height:40px;color:var(--muted-2);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.credit-reach-head span:not(:first-child){text-align:center}
.credit-reach-row{min-height:68px;border-top:1px solid var(--line-soft)}
.credit-reach-label{display:grid;gap:3px;padding-right:20px}
.credit-reach-label strong{font-size:14px}
.credit-reach-label small{color:var(--muted-2);font-size:11px}
.credit-reach-values{display:contents}
.credit-reach-values>span{display:grid;place-items:center;align-self:stretch;border-left:1px solid var(--line-soft)}
.credit-reach-values small{display:none}
.credit-reach-values strong{color:#edf3fb;font-size:15px}
.credit-reach-row:last-child{border-bottom:1px solid var(--line-soft)}
.credit-reach-note{max-width:850px;margin:13px 0 0;color:var(--muted-2);font-size:11px;line-height:1.6}
.topup-intro{display:grid;gap:6px;margin-top:36px}
.topup-intro .eyebrow{font-size:9px}
.topup-intro h3{margin:0;font-size:19px}
.topup-intro p{max-width:720px;margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.topups{margin-top:22px;border-top:1px solid var(--line-soft)}
.topup{display:flex;align-items:baseline;gap:14px;padding:15px 4px;border-bottom:1px solid var(--line-soft)}
.topup strong{min-width:130px;font-size:15px}
.topup small{flex:1;color:var(--muted-2);font-size:12px}
.topup b{font-size:16px;white-space:nowrap}
@media(max-width:640px){.topup{display:grid;grid-template-columns:1fr auto;gap:3px 14px}.topup small{grid-column:1/-1}}
.price-note{margin-top:14px;color:var(--muted-2);font-size:12px;line-height:1.6;text-align:center}

/* FAQ ---------------------------------------------------------------------- */
.faq{max-width:820px;margin:auto;border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:19px 4px;cursor:pointer;font-size:15px;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#fff}
.faq summary::after{content:"+";color:var(--red-soft);font-size:20px;font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 4px 22px;max-width:700px;color:#a7b1c0;font-size:14px;line-height:1.7}

/* Abschluss und Fuss -------------------------------------------------------- */
.cta{position:relative;max-width:960px;margin:0 auto;padding:52px 28px;text-align:center;border:1px solid #4b2735;border-radius:20px;background:radial-gradient(circle at 50% 0,rgba(255,49,84,.2),transparent 62%),#12151d;overflow:hidden}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.14}
.cta>*{position:relative}
.cta h2{margin:0 0 10px;font-size:clamp(28px,3.6vw,38px)}
.cta p{max-width:520px;margin:0 auto 24px;color:#b3bdcb;line-height:1.6}
footer{border-top:1px solid rgba(255,255,255,.08);padding:34px 24px;color:#7d8797;font-size:12px}
.footer-inner{display:flex;justify-content:space-between;gap:24px;max-width:var(--maxw);margin:auto}
.footer-inner img{width:130px;margin-bottom:10px}
.footer-links{display:grid;gap:7px}
.footer-links a:hover{color:#fff}

/* Wer Bewegung reduziert hat, bekommt keine Verschiebungen. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .btn:hover,.tool:hover{transform:none}
}

/* Schmale Ansichten --------------------------------------------------------- */
@media(max-width:980px){
  .creator-band,.flow-grid{grid-template-columns:1fr}
  .credit-explainer,.plans{grid-template-columns:1fr}
  .topups{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr;gap:30px}
  .shot-stack{gap:44px;margin-top:48px}
  .shot-pair,.shot-pair.flip{grid-template-columns:1fr;gap:0}
  .shot-pair.flip img,.shot-pair.flip figcaption{grid-column:1;grid-row:auto}
  .shot-pair figcaption{margin-top:13px}
}
@media(max-width:720px){
  .credit-reach{margin-top:28px;padding-top:24px}
  .credit-reach-intro{display:grid;gap:8px}
  .credit-reach-intro .eyebrow{display:block}
  .credit-reach-intro p{text-align:left}
  .credit-reach-head{display:none}
  .credit-reach-row{display:grid;gap:14px;padding:17px 0}
  .credit-reach-values{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .credit-reach-values>span{display:grid;gap:3px;place-items:start;padding:9px 10px;border:1px solid var(--line-soft);border-radius:8px;background:rgba(255,255,255,.018)}
  .credit-reach-values small{display:block;color:var(--muted-2);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
  .credit-reach-values strong{font-size:13px}
}
@media(max-width:800px){
  .nav{flex-wrap:wrap;gap:0 14px;padding:14px 17px}
  .nav-burger{display:block}
  .nav-links,.nav-actions{display:none;width:100%}
  .nav-toggle:checked~.nav-links{display:grid;gap:2px;margin:14px 0 0;font-size:16px}
  .nav-toggle:checked~.nav-links a{padding:11px 2px;border-bottom:1px solid var(--line-soft)}
  .nav-toggle:checked~.nav-actions{display:grid;gap:9px;margin:14px 0 4px}
  .nav-toggle:checked~.nav-actions .btn{width:100%}
  .hero{padding:66px 18px 44px}
  .hero>p{font-size:15px}
  .hero-actions{flex-direction:column;align-items:stretch;max-width:290px;margin:26px auto 12px}
  .stats{grid-template-columns:repeat(2,1fr);gap:18px 0}
  .stat:nth-child(odd){border-left:0}
  .section{padding:58px 18px}
  .tool-area-head{display:block}
  .tool-area-head p{margin-top:6px}
  .trust-list{grid-template-columns:1fr}
  .trust-list li:nth-child(2){border-top:1px solid var(--line-soft)}
  .footer-inner{display:grid}
}

/* Auf schmalen Ansichten sitzt der Sprach- und Waehrungsumschalter im
   aufgeklappten Menue und soll dort nicht ueber die volle Breite gezogen
   werden. */
@media(max-width:800px){
  .nav-toggle:checked~.nav-actions .locale-switch{justify-self:start}
}

/* ---------------------------------------------------------------------------
   Nachtraege fuer Tablet- und Mobilansicht (nur additive @media-Bloecke).
   Desktop (>1024px) bleibt unveraendert.
   --------------------------------------------------------------------------- */

/* Tablet: etwas ruhigere Abstaende und kompaktere Preiskarten. Bewusst auf
   981-1024px begrenzt, damit die bestehenden Regeln fuer schmalere Ansichten
   nicht ueberschrieben werden. */
@media(min-width:981px) and (max-width:1024px){
  .section{padding:72px 22px}
  .hero{padding:80px 22px 56px}
  .shot-pair{gap:26px}
  .shot-pair.flip{gap:26px}
  .plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .plan{padding:22px 18px}
  .plan .price strong{font-size:30px}
  .trust{gap:32px}
}

/* Mobil: Lesbarkeit und Abstaende. */
@media(max-width:768px){
  .section{padding:52px 16px}
  .section.tight{padding-top:20px}
  .section-heading{margin-bottom:32px}
  .hero{padding:56px 16px 40px}
  .hero h1{margin-top:20px}
  .hero-preview{margin-top:30px;padding:7px;border-radius:16px}
  .hero-preview img{border-radius:10px}
  .hero-preview-tag{right:14px;bottom:14px}
  .creator-band{padding:20px 16px 56px;gap:24px}
  .creator-band p{max-width:none}
  .tool-nav a{padding:10px 13px}
  .flow-grid{gap:22px}
  .credit-card{padding:20px 16px}
  .credit-order{margin-top:22px}
  .plans{grid-template-columns:1fr;gap:12px}
  .plan{padding:24px 20px}
  .plan .price strong{font-size:32px}
  .topup-intro{margin-top:30px}
  .cta{padding:40px 20px}
  .faq summary{padding:17px 2px}
  .faq p{padding:0 2px 20px}
  .footer-inner{gap:18px}
}

/* Kleine Telefone: kompakte Karten, gestapelte Kennzahlen, volle Knopfbreite. */
@media(max-width:480px){
  .section{padding:44px 14px}
  .hero{padding:46px 14px 34px}
  .hero h1{font-size:clamp(34px,10.5vw,42px)}
  .hero>p{font-size:14.5px}
  .hero-actions{max-width:none;margin-left:0;margin-right:0}
  .stats{grid-template-columns:repeat(2,1fr);gap:16px 0;margin-top:26px}
  .stat{padding:4px 10px}
  .stat strong{font-size:22px}
  .creator-band{padding:16px 14px 48px}
  .creator-band-media{padding:6px;border-radius:15px}
  .creator-band-media img{border-radius:10px}
  .section-heading h2{font-size:clamp(26px,7.5vw,32px)}
  .tool{padding:14px 2px}
  .tool-area{margin-bottom:40px}
  .step{grid-template-columns:34px 1fr;gap:12px}
  .step b{width:34px;height:34px}
  .steps::before{left:24px}
  .credit-card{padding:18px 14px}
  .credit-card-top i{width:36px;height:36px;font-size:19px}
  .credit-reach-values{grid-template-columns:1fr;gap:8px}
  .credit-reach-values>span{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .credit-reach-values small{font-size:10px}
  .plan{padding:20px 16px}
  .plan .btn{width:100%}
  .topup{padding:14px 2px}
  .topup strong{min-width:0}
  .trust-voices{padding:14px 14px;margin-top:34px}
  .shot-stack{gap:36px;margin-top:38px}
  .shot-note{margin-top:38px}
  .cta{padding:34px 16px;border-radius:16px}
  .cta .btn{width:100%}
  .footer-inner{gap:16px}
  footer{padding:28px 16px}
}