/* ============================================================
   Kaufkortex · Startseite
   Eigenes Stylesheet, nur fuer index.php. Baut auf kaufkortex.css auf
   und uebernimmt dessen Farben und Schriften.

   Umgesetzt ist hier das Aufbauschema einer hochwertigen Marketingseite:
   Pillen-Navigation, ganzseitiger Hero, drei Karten mit lebenden
   Demonstrationen, zaehlende Kennzahlen, gestapelte Ablaufkarten,
   dunkles Kachelraster, Vertrauenszeichen, Kaufblock, breiter Fuss.

   Bewusst OHNE React, ohne Tailwind, ohne GSAP und ohne fremdes CDN.
   Alles was hier bewegt wird, macht CSS oder die eigene politur.js.
   ============================================================ */

/* ------------------------------------------------------------
   1 · NAVIGATION als Pille
   ------------------------------------------------------------ */
.pille{
  position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:900;
  width:calc(100% - 2rem);max-width:1000px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem .6rem .55rem 1.1rem;border-radius:999px;
  border:1px solid transparent;background:transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
}
/* Erst beim Scrollen wird die Pille zu Glas. Ganz oben soll sie
   moeglichst wenig vom ersten Bildschirm wegnehmen. */
.pille.geglast{
  background:rgba(20,20,23,.72);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-color:rgba(60,224,196,.16);
  box-shadow:0 10px 34px rgba(0,0,0,.42);
}
.pille .marke{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none;}
.pille .zeichen{
  width:34px;height:34px;border-radius:9px;background:var(--neural);color:#141417;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.05rem;flex:none;
}
.pille .name{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em;}
.pille .name .os{color:var(--neural);}
.pille nav{display:flex;gap:1.5rem;}
.pille nav a{
  color:var(--ink-dim);text-decoration:none;font-size:.9rem;
  font-family:var(--display);font-weight:500;transition:color .2s ease,transform .2s ease;
}
.pille nav a:hover{color:var(--ink);transform:translateY(-1px);}
.pille .btn-cta{padding:.6rem 1.4rem;font-size:.92rem;border-radius:999px;white-space:nowrap;}
.pille .schalter{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--ink);}
.pille .schalter span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;margin:4px 0;transition:transform .3s ease,opacity .2s ease;}
.pille.offen .schalter span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.pille.offen .schalter span:nth-child(2){opacity:0;}
.pille.offen .schalter span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.klappe{
  position:fixed;inset:0;z-index:890;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:1.6rem;
  background:rgba(20,20,23,.94);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
}
.klappe.offen{display:flex;}
.klappe a{
  color:var(--ink);text-decoration:none;font-family:var(--display);
  font-weight:700;font-size:1.5rem;letter-spacing:-.01em;
}
.klappe a.klein{font-size:1rem;font-family:var(--mono);color:var(--ink-dim);font-weight:400;}

/* ------------------------------------------------------------
   2 · HERO, ganzer Bildschirm
   ------------------------------------------------------------ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:6.5rem 0 4.5rem;}
.hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;}
/* Zwei uebereinanderliegende Verlaeufe. Der erste nimmt dem Bild die
   Kraft, damit der Text traegt, der zweite blendet nach unten aus. */
.hero-schleier{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(20,20,23,.94) 0%,rgba(20,20,23,.72) 44%,rgba(20,20,23,.86) 100%);}
.hero-schleier2{position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(to top,var(--bg),transparent);}
.hero-linie{position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(60,224,196,.34),transparent);}
.hero-linie.oben{top:0;} .hero-linie.unten{bottom:0;}
.hero-inhalt{position:relative;z-index:5;width:100%;}

.hero h1{
  font-size:clamp(2rem,4.1vw,3.5rem);line-height:1.04;letter-spacing:-.035em;margin-bottom:1.2rem;
}
.hero h1 .zier{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.01em;color:var(--neural);
  font-size:1.12em;line-height:1.02;margin-top:.06em;
}
.hero .unterzeile{font-size:1rem;color:var(--ink-soft);max-width:52ch;}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:1.7rem;}
.btn-glas{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:700;
  font-size:1rem;padding:.9rem 1.7rem;border-radius:.55rem;
  transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
.btn-glas:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.26);transform:translateY(-1px);color:var(--ink);}

/* Schwebende Signalpunkte oben rechts */
.punkte{position:absolute;top:14%;right:5%;width:min(360px,42vw);height:52%;z-index:2;pointer-events:none;}
.punkte i{
  position:absolute;display:block;border-radius:50%;
  background:var(--neural);box-shadow:0 0 14px rgba(60,224,196,.75);
  animation:schweben 6s ease-in-out infinite;
}
@keyframes schweben{0%,100%{transform:translateY(-8px);opacity:.35;}50%{transform:translateY(8px);opacity:.95;}}

.scroll-hinweis{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;color:var(--ink-dim);text-transform:uppercase;
}
.scroll-hinweis .strich{width:1px;height:40px;background:linear-gradient(to bottom,transparent,var(--neural-dim));
  animation:rutschen 2.4s ease-in-out infinite;transform-origin:top;}
@keyframes rutschen{0%,100%{transform:scaleY(.35);opacity:.4;}50%{transform:scaleY(1);opacity:1;}}

/* Auftritt der Hero-Elemente. Bewusst reines CSS: laeuft auch ohne
   JavaScript und kann deshalb nichts dauerhaft verstecken. */
@keyframes auftritt{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.auf{animation:auftritt .75s cubic-bezier(.16,.84,.44,1) both;}
.a1{animation-delay:.05s;} .a2{animation-delay:.14s;}
.a3{animation-delay:.26s;} .a4{animation-delay:.40s;}

/* Das Buchcover im Hero */
.book{
  width:250px;height:373px;margin:0 auto;position:relative;background:#141417;
  border:1px solid #333;border-radius:4px 10px 10px 4px;
  box-shadow:14px 18px 40px rgba(0,0,0,.55), inset 6px 0 12px rgba(255,255,255,.04);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1.6rem 1.3rem;transform:rotate(-2deg);
}
.book::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.10),transparent);}
.book .b-logo{font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--ink);margin-bottom:1.4rem;}
.book .b-logo .os{color:var(--neural);}
.book .b-kicker{font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;color:var(--neural);margin-bottom:.8rem;}
.book .b-title{font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1.04;color:#fff;margin-bottom:.9rem;}
.book .b-sub{font-size:.6rem;line-height:1.5;color:var(--ink-soft);margin-bottom:1rem;}
.book .b-wave{width:120px;height:16px;color:var(--neural);opacity:.6;}
.book .b-foot{font-family:var(--mono);font-size:.42rem;letter-spacing:.12em;color:var(--ink-dim);text-transform:uppercase;margin-top:1.2rem;}
.book-badge{
  position:absolute;top:-14px;right:-14px;background:var(--action);color:#141417;
  font-family:var(--display);font-weight:700;font-size:.9rem;width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transform:rotate(8deg);
  box-shadow:0 6px 18px rgba(255,92,31,.4);
}

/* Sprungziele muessen unter der Pille anfangen, sonst verdeckt sie
   genau die Ueberschrift, zu der jemand gerade gesprungen ist. */
[id]{scroll-margin-top:6.5rem;}

/* ------------------------------------------------------------
   Bausteine, die mehrfach vorkommen
   ------------------------------------------------------------ */
.augenbraue{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--neural);display:inline-block;margin-bottom:1rem;
}
.gross{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.06;letter-spacing:-.03em;}
.gross .zier{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--neural);font-size:1.08em;}
.verlauf-text{
  background:linear-gradient(135deg,var(--neural) 0%,var(--neural-dim) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}

/* ------------------------------------------------------------
   3 · DREI KARTEN MIT LEBENDEN DEMONSTRATIONEN
   ------------------------------------------------------------ */
.dreier{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.merkmal{background:var(--card);border:1px solid var(--line);border-radius:1.1rem;padding:1.6rem;display:flex;flex-direction:column;}
.merkmal h3{font-size:1.24rem;margin:.3rem 0 1.1rem;}
.merkmal p{font-size:.96rem;margin:1.1rem 0 .8rem;max-width:none;}
.merkmal ul{list-style:none;padding:0;margin:auto 0 0;}
.merkmal li{font-size:.86rem;color:var(--ink-dim);padding:.28rem 0;display:flex;gap:.55rem;}
.merkmal li::before{content:"→";color:var(--neural);font-family:var(--mono);flex:none;}

/* Die Buehne, in der jede Demonstration laeuft */
.buehne{
  position:relative;height:176px;border-radius:.85rem;overflow:hidden;
  background:linear-gradient(160deg,#191b1f 0%,#141417 60%,#12181a 100%);
  border:1px solid var(--line);
}
.buehne .kopf,.buehne .fuss{
  position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .75rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);z-index:6;
}
.buehne .kopf{top:0;} .buehne .fuss{bottom:0;}
.buehne .fuss .lage{display:flex;align-items:center;gap:.42rem;color:var(--neural);}
.buehne .punkt{width:6px;height:6px;border-radius:50%;background:var(--neural);animation:pochen 2s infinite;}
@keyframes pochen{0%{box-shadow:0 0 0 0 rgba(60,224,196,.6);}70%{box-shadow:0 0 0 9px rgba(60,224,196,0);}100%{box-shadow:0 0 0 0 rgba(60,224,196,0);}}
.buehne .dunst{position:absolute;border-radius:50%;filter:blur(26px);opacity:.22;}

/* 3a · Kartenstapel, der sich alle drei Sekunden dreht */
.stapel{position:absolute;inset:34px 16px 30px;}
.stapel .bl{
  position:absolute;inset:0;border-radius:.6rem;padding:.85rem 1rem;
  background:#212227;border:1px solid #303036;
  display:flex;flex-direction:column;justify-content:center;
  animation:stapeln 9s infinite;
}
.stapel .bl b{font-family:var(--display);font-size:.92rem;color:var(--ink);display:block;margin-bottom:.2rem;}
.stapel .bl span{font-size:.76rem;color:var(--ink-dim);line-height:1.45;}
.stapel .bl:nth-child(2){animation-delay:-3s;} .stapel .bl:nth-child(3){animation-delay:-6s;}
@keyframes stapeln{
  0%     {opacity:0;transform:translateY(14px) scale(.9);filter:blur(3px);z-index:1;}
  6%,30% {opacity:1;transform:translateY(0)    scale(1); filter:blur(0);  z-index:3;}
  36%    {opacity:.45;transform:translateY(-8px) scale(.94);filter:blur(2px);z-index:2;}
  44%,100%{opacity:0;transform:translateY(-16px) scale(.88);filter:blur(4px);z-index:1;}
}

/* 3b · Das Erkennungsmotiv: ein Reiz laeuft an und wird zum Urteil.
   Gleiche Bauteile wie das Wassertropfen-Motiv der Vorlage, nur auf
   das Thema dieser Seite umgezeichnet: Reizquelle oben, fallende
   Signale, Schwelle unten, Ringe beim Auftreffen. */
.reiz{position:absolute;inset:26px 0 24px;}
.reiz .quelle{position:absolute;top:6px;left:12%;right:12%;height:6px;border-radius:3px;
  background:linear-gradient(90deg,rgba(60,224,196,.18),rgba(60,224,196,.62),rgba(60,224,196,.18));}
.reiz .sig{position:absolute;top:10px;width:5px;height:5px;border-radius:50%;
  background:var(--neural);box-shadow:0 0 10px rgba(60,224,196,.9);
  animation:fallen 2.6s linear infinite;}
@keyframes fallen{
  0%  {transform:translate(-50%,0);opacity:0;}
  12% {opacity:1;} 82%{opacity:1;}
  100%{transform:translate(-50%,86px);opacity:0;}
}
.reiz .schwelle{position:absolute;bottom:22px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(60,224,196,.5),transparent);}
.reiz .ring{position:absolute;bottom:19px;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--neural);animation:ringen 2.6s ease-out infinite;}
@keyframes ringen{
  0%  {transform:translateX(-50%) scale(.4);opacity:.9;}
  80% {transform:translateX(-50%) scale(3.6);opacity:0;}
  100%{transform:translateX(-50%) scale(3.6);opacity:0;}
}
.reiz .urteil{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.6rem;color:var(--action);letter-spacing:.1em;
  animation:aufblenden .6s ease both;animation-delay:1.1s;}

/* 3c · Zeiger, der den Fuenf-Sekunden-Test vorfuehrt */
.test{position:absolute;inset:32px 18px 28px;}
.test .mini{position:absolute;inset:0;border-radius:.5rem;background:#202127;border:1px solid #303036;padding:.7rem;overflow:hidden;}
.test .balken{height:6px;border-radius:3px;background:#34343c;margin-bottom:.42rem;}
.test .balken.t{width:72%;background:#4a4a54;height:9px;}
.test .balken.k{width:44%;}
.test .knopf{position:absolute;right:.7rem;bottom:.7rem;width:64px;height:20px;border-radius:.3rem;background:var(--action);
  animation:knopfpuls 4.2s ease-in-out infinite;}
@keyframes knopfpuls{0%,72%,100%{transform:scale(1);}78%{transform:scale(.93);}84%{transform:scale(1);}}
.test .zeiger{position:absolute;width:15px;height:22px;left:22%;top:34%;z-index:4;
  animation:zeigen 4.2s ease-in-out infinite;}
@keyframes zeigen{
  0%   {left:16%;top:26%;} 34%{left:16%;top:26%;}
  62%  {left:74%;top:70%;} 76%{left:74%;top:70%;}
  100% {left:16%;top:26%;}
}
.test .zaehler{position:absolute;top:.55rem;right:.6rem;z-index:5;
  font-family:var(--mono);font-size:.6rem;color:var(--neural);letter-spacing:.1em;}

@keyframes aufblenden{from{opacity:0;transform:translate(-50%,3px);}to{opacity:1;transform:translate(-50%,0);}}

/* ------------------------------------------------------------
   4 · KENNZAHLEN
   ------------------------------------------------------------ */
.saeulen{display:grid;grid-template-columns:repeat(3,1fr);position:relative;}
.saeule{padding:2.2rem 1.6rem;text-align:center;position:relative;}
.saeule + .saeule{border-left:1px solid var(--line);}
.saeule .kennzahl{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,6vw,4rem);line-height:1;letter-spacing:-.04em;}
.saeule p{font-size:.94rem;color:var(--ink-dim);margin:.7rem auto 0;max-width:30ch;}
.saeule .sweep{position:relative;height:1px;margin:1.1rem auto 0;max-width:150px;overflow:hidden;}
.saeule .sweep::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--neural),transparent);
  animation:wischen 3.2s ease-in-out infinite;}
@keyframes wischen{0%{transform:translateX(-100%);}50%,100%{transform:translateX(100%);}}
.kennzahl-feld{position:relative;background:var(--card);border:1px solid var(--line);border-radius:1.1rem;overflow:hidden;}
.kennzahl-feld .dunst{position:absolute;border-radius:50%;filter:blur(60px);opacity:.16;pointer-events:none;}

/* ------------------------------------------------------------
   5 · GESTAPELTE ABLAUFKARTEN
   ------------------------------------------------------------ */
.ablauf{position:relative;}
.schritt{
  position:sticky;top:6.5rem;
  background:var(--card);border:1px solid var(--line);border-radius:1.1rem;
  padding:2.2rem;margin-bottom:2.2rem;
  display:grid;grid-template-columns:3fr 2fr;gap:2rem;align-items:center;
  transition:transform .18s linear,filter .18s linear,opacity .18s linear;
  will-change:transform,filter,opacity;
}
.schritt .nr{font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:1;color:var(--neural);opacity:.32;}
.schritt h3{font-size:1.45rem;margin:.5rem 0 .7rem;}
.schritt p{font-size:1rem;max-width:none;}
.schritt ul{list-style:none;padding:0;margin:1rem 0 0;}
.schritt li{font-size:.9rem;color:var(--ink-dim);padding:.24rem 0;display:flex;gap:.55rem;}
.schritt li::before{content:"·";color:var(--neural);font-weight:700;flex:none;}
.schritt img{border-radius:.7rem;border:1px solid var(--line);display:block;width:100%;}

/* ------------------------------------------------------------
   6 · DUNKLES KACHELRASTER
   ------------------------------------------------------------ */
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);border-radius:1rem;overflow:hidden;}
.kachel{background:#131316;padding:2rem 1.8rem;transition:background .25s ease;}
.kachel:hover{background:#191a1e;}
.kachel .zeichen{
  width:42px;height:42px;border-radius:.6rem;background:rgba(60,224,196,.1);
  border:1px solid rgba(60,224,196,.22);display:grid;place-items:center;margin-bottom:1rem;
  font-family:var(--mono);font-weight:700;font-size:.8rem;color:var(--neural);
  transition:transform .25s ease;
}
.kachel:hover .zeichen{transform:scale(1.1);}
.kachel h3{font-size:1.1rem;margin-bottom:.45rem;}
.kachel p{font-size:.92rem;color:var(--ink-dim);margin:0;max-width:none;}

/* ------------------------------------------------------------
   7 · VERTRAUENSZEICHEN
   ------------------------------------------------------------ */
.zeichen-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;max-width:940px;margin:0 auto;}
.vertrauen-karte{
  background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.7rem;text-align:center;
}
.vertrauen-karte .bild{width:46px;height:46px;border-radius:.7rem;margin:0 auto .9rem;display:grid;place-items:center;
  background:rgba(60,224,196,.1);border:1px solid rgba(60,224,196,.22);color:var(--neural);}
.vertrauen-karte h3{font-size:1.05rem;margin-bottom:.35rem;}
.vertrauen-karte p{font-size:.9rem;color:var(--ink-dim);margin:0;max-width:none;}

/* ------------------------------------------------------------
   8 · BLICK INS BUCH, BONI, KAUFBLOCK
   ------------------------------------------------------------ */
.blaettern{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;max-width:820px;margin:0 auto;}
.blaettern figure{margin:0;}
.blaettern img{width:100%;border-radius:.4rem;border:1px solid #33333a;box-shadow:0 18px 40px rgba(0,0,0,.55);display:block;}
.blaettern figcaption{font-family:var(--mono);font-size:.64rem;color:var(--ink-dim);text-align:center;margin-top:.9rem;line-height:1.55;}

.bonus-karte{background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:1.5rem 1.8rem;margin-bottom:.9rem;position:relative;}
.bonus-karte .marke-nr{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.12em;color:var(--neural);
  border:1px solid var(--neural-dim);border-radius:.3rem;padding:.1rem .5rem;display:inline-block;margin-bottom:.6rem;}
.bonus-karte .wert{position:absolute;top:1.4rem;right:1.8rem;font-family:var(--mono);font-size:.82rem;color:var(--ink-dim);}
.bonus-karte h3{font-size:1.12rem;margin-bottom:.35rem;}
.bonus-karte p{font-size:.96rem;margin:0;max-width:64ch;}
.bonus-karte p.bedingung{margin-top:.75rem;padding-top:.75rem;border-top:1px dotted var(--line);font-size:.88rem;color:var(--ink-dim);}
.bonus-karte p.bedingung strong{color:var(--ink-soft);}
.bonus-summe{text-align:right;font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);padding:.5rem .4rem 0;}
.bonus-summe strong{color:var(--ink);}

.kaufkarte{
  background:linear-gradient(180deg,#1f2024 0%,var(--card) 55%);
  border:1px solid var(--line);border-radius:1.1rem;max-width:420px;margin:0 auto;
  padding:1rem 1rem 2.1rem;position:relative;overflow:hidden;
}
.kaufkarte .band{background:var(--card-soft);border-radius:.5rem;text-align:center;padding:.62rem;
  font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);letter-spacing:.05em;}
.kaufkarte .anker{font-family:var(--mono);font-size:.76rem;color:var(--ink-dim);text-align:center;margin:1.4rem 0 .1rem;}
.kaufkarte .anker s{color:#b3665a;}
.kaufkarte .betrag{font-family:var(--display);font-weight:700;font-size:3.8rem;color:var(--ink);text-align:center;line-height:1;margin:.2rem 0 .1rem;letter-spacing:-.04em;}
.kaufkarte .einheit{text-align:center;font-size:.84rem;color:var(--ink-dim);margin-bottom:1.5rem;}
.kaufkarte .btn-cta{display:block;text-align:center;width:100%;}
.kaufkarte ul{list-style:none;padding:0;margin:1.5rem 0 0;}
.kaufkarte li{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;padding:.36rem .2rem;line-height:1.5;}
.kaufkarte li .ja{font-family:var(--mono);color:var(--neural);font-weight:700;flex:none;}

.offen-karte{background:var(--card);border:1px dashed var(--neural-dim);border-radius:.9rem;max-width:700px;margin:0 auto;padding:2rem 2.2rem;text-align:center;}
.offen-karte h3{font-size:1.3rem;margin-bottom:.7rem;}
.offen-karte p{margin:0 auto;font-size:1rem;}

.frage{background:var(--card);border:1px solid var(--line);border-radius:.6rem;margin-bottom:.7rem;padding:1rem 1.4rem;}
.frage summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  color:var(--ink);font-family:var(--display);font-weight:700;font-size:1rem;gap:1rem;}
.frage summary::-webkit-details-marker{display:none;}
.frage summary::after{content:"+";font-family:var(--mono);color:var(--neural);font-size:1.2rem;line-height:1;}
.frage[open] summary::after{content:"\2212";}   /* echtes Minuszeichen, kein Gedankenstrich */
.frage p{margin:.85rem 0 0;font-size:.96rem;}

.ps{background:var(--card);border-left:3px solid var(--action);border-radius:0 .5rem .5rem 0;
  padding:1.5rem 1.8rem;max-width:640px;margin:2.5rem auto 0;font-size:.95rem;}
.ps b{color:var(--ink);}

/* ------------------------------------------------------------
   9 · BREITER FUSS
   ------------------------------------------------------------ */
.markenfuss{border-top:1px solid var(--line);padding:3.2rem 0 2.4rem;}
.markenfuss .raster3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.4rem;}
.markenfuss .logo-block .name{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--ink);}
.markenfuss .logo-block .name .os{color:var(--neural);}
.markenfuss .logo-block p{font-size:.92rem;color:var(--ink-dim);margin:.7rem 0 1.1rem;max-width:38ch;}
.markenfuss .lage{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--neural);}
.markenfuss .lage i{width:7px;height:7px;border-radius:50%;background:var(--neural);animation:pochen 2s infinite;}
.markenfuss h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 .9rem;font-weight:400;}
.markenfuss ul{list-style:none;padding:0;margin:0;}
.markenfuss li{padding:.24rem 0;}
.markenfuss li a{color:var(--ink-soft);text-decoration:none;font-size:.92rem;}
.markenfuss li a:hover{color:var(--ink);}

/* Mitlaufende Leiste am unteren Rand, nur auf dem Handy */
.leiste{
  position:fixed;bottom:0;left:0;right:0;z-index:880;display:none;
  align-items:center;justify-content:space-between;gap:.8rem;
  background:rgba(20,20,23,.93);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);padding:.55rem .9rem;
}
.leiste .text{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.leiste .text b{font-family:var(--display);font-weight:700;color:var(--ink);font-size:.9rem;white-space:nowrap;}
.leiste .text em{font-family:var(--mono);font-style:normal;font-size:.68rem;color:var(--ink-dim);white-space:nowrap;}
.leiste .text s{color:#b3665a;}
.leiste .btn-cta{padding:.55rem 1.1rem;font-size:.92rem;white-space:nowrap;}

/* ------------------------------------------------------------
   SCHMALE BILDSCHIRME
   ------------------------------------------------------------ */
@media (max-width:980px){
  .dreier,.saeulen,.kacheln,.zeichen-reihe{grid-template-columns:1fr;}
  .saeule + .saeule{border-left:0;border-top:1px solid var(--line);}
  .schritt{grid-template-columns:1fr;}
  .schritt .bild-spalte{order:-1;max-width:260px;}
  .markenfuss .raster3{grid-template-columns:1fr;gap:1.8rem;}
}
@media (max-width:820px){
  .pille nav,.pille > .btn-cta{display:none;}
  .pille .schalter{display:block;}
  .hero{min-height:auto;padding:7rem 0 3.5rem;}
  .punkte{display:none;}
  .scroll-hinweis{display:none;}
  .leiste{display:flex;}
  body{padding-bottom:4.2rem;}
  .blaettern{grid-template-columns:1fr;max-width:280px;}
  .schritt{position:static;padding:1.5rem;}
  .merkmal,.kachel,.bonus-karte{padding:1.3rem;}
  .kaufkarte{padding:.9rem .9rem 1.8rem;}
  .bonus-karte .wert{position:static;display:block;margin-bottom:.4rem;}
}

/* ------------------------------------------------------------
   WER BEWEGUNG ABGESCHALTET HAT
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .punkte,.scroll-hinweis .strich{display:none;}
  .stapel .bl,.reiz .sig,.reiz .ring,.test .zeiger,.test .knopf,
  .saeule .sweep::after,.markenfuss .lage i,.buehne .punkt{animation:none;}
  .stapel .bl:nth-child(1){opacity:1;transform:none;filter:none;}
  .stapel .bl:nth-child(2),.stapel .bl:nth-child(3){display:none;}
  .schritt{transform:none !important;filter:none !important;opacity:1 !important;}
}