/* ============================================================
   Kaufkortex · gemeinsames Stylesheet
   Wird von JEDER Seite eingebunden. Farben, Schriften und alle
   Bausteine, die auf mehr als einer Seite vorkommen, stehen
   ausschließlich hier.
   ============================================================ */

/* ============================================================
   Schriften, lokal ausgeliefert.
   KEINE Google Fonts, KEIN Fontshare, KEIN externes CDN.
   Grund: Beim Einbinden vom fremden CDN wird die IP-Adresse des
   Besuchers ohne Einwilligung an Dritte uebertragen. Das LG Muenchen I
   hat dafuer 2022 Schadensersatz zugesprochen (Az. 3 O 17493/20).
   Diese Seite laedt NICHTS von fremden Servern.
   ============================================================ */

@font-face{
  font-family:'Satoshi';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/satoshi-400.woff2') format('woff2');
}
@font-face{
  font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/satoshi-500.woff2') format('woff2');
}
@font-face{
  font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/satoshi-700.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2');
}
/* Die kursive Serife ist die Zierschrift. Sie kommt NUR in der zweiten
   Zeile grosser Ueberschriften vor, nie im Fliesstext. Ebenfalls lokal. */
@font-face{
  font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/fonts/cormorant-400-italic.woff2') format('woff2');
}

:root{
  /* Flaechen */
  --bg:#141417;
  --card:#1d1d1f;
  --card-soft:#26262a;
  --line:#2c2c31;

  /* Schrift */
  --ink:#f4f4f5;
  --ink-soft:#c9c9ce;
  --ink-dim:#8e8e96;

  /* Akzente. Orange ist ausschließlich fuer Handlungen reserviert. */
  --action:#ff5c1f;
  --action-deep:#e04a12;
  --neural:#3ce0c4;
  --neural-dim:#2aa896;

  /* Schriftfamilien */
  --display:"Space Grotesk","Segoe UI",sans-serif;
  --sans:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",monospace;
  --serif:"Cormorant",Georgia,"Times New Roman",serif;

  /* Raster */
  --wrap:1020px;
  --narrow:720px;
  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box;}
html{color-scheme:dark;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink-soft);
  font-size:18px;
  line-height:1.62;
  letter-spacing:.008em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;color:var(--ink);letter-spacing:-.02em;margin:0 0 .6em;}
h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.07;}
h2{font-size:clamp(1.55rem,3.2vw,2.2rem);line-height:1.14;}
h3{font-size:1.12rem;line-height:1.3;}
p{margin:0 0 1rem;max-width:var(--measure);}
a{color:var(--neural);}
strong{color:var(--ink);}
img{max-width:100%;height:auto;}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0;}
:focus-visible{outline:2px solid var(--neural);outline-offset:3px;border-radius:2px;}

/* ---------- Layout ---------- */
.section{padding:4.5rem 0;}
.section-tight{padding:2.5rem 0;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem;}
.narrow{max-width:var(--narrow);margin-left:auto;margin-right:auto;}
.center{text-align:center;}
.center p{margin-left:auto;margin-right:auto;}

/* ---------- Kopf ---------- */
.site-head{padding:1.6rem 0;}
.head-inner{display:flex;justify-content:space-between;align-items:center;gap:2rem;}
.logo{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em;}
.logo .os{color:var(--neural);}
.site-head nav{display:flex;gap:1.6rem;}
.site-head nav a{color:var(--ink-dim);text-decoration:none;font-size:.95rem;font-family:var(--display);font-weight:500;}
.site-head nav a:hover{color:var(--ink);}

/* ---------- Handlung ---------- */
.btn-cta{
  display:inline-block;background:var(--action);color:#141417;
  font-family:var(--display);font-weight:700;font-size:1.06rem;
  padding:.95rem 2.6rem;border-radius:.55rem;border:none;text-decoration:none;
  box-shadow:0 6px 24px rgba(255,92,31,.28);
  transition:transform .12s ease,background .12s ease;
}
.btn-cta:hover{background:var(--action-deep);color:#141417;transform:translateY(-1px);}
.cta-sub{font-family:var(--mono);font-size:.75rem;color:var(--ink-dim);margin-top:.9rem;letter-spacing:.02em;}
.decline{display:inline-block;margin-top:1.6rem;color:var(--ink-dim);font-size:.9rem;text-decoration:underline;}
.decline:hover{color:var(--ink-soft);}

/* ---------- Bausteine ---------- */
.kicker{font-family:var(--mono);font-size:.76rem;color:var(--neural);letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem;display:inline-block;}
.sec-head{text-align:center;margin-bottom:2.6rem;}
.sec-head p{max-width:62ch;margin:.9rem auto 0;}
.card{background:var(--card);border:1px solid var(--line);border-radius:.7rem;padding:1.7rem 1.9rem;}
.card-accent{background:var(--card);border-left:3px solid var(--neural);border-radius:0 .5rem .5rem 0;padding:2.2rem 2.4rem;}
.card-dashed{background:var(--card);border:1px dashed var(--neural-dim);border-radius:.7rem;padding:2.2rem 2.4rem;}
.mono-note{font-family:var(--mono);font-size:.75rem;color:var(--ink-dim);letter-spacing:.02em;}

/* ---------- Aufklappbare Fragen ---------- */
.faq{background:var(--card);border:1px solid var(--line);border-radius:.6rem;margin-bottom:.7rem;}
.faq summary{cursor:pointer;padding:1.15rem 1.6rem;font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--neural);font-family:var(--mono);}
.faq[open] summary::after{content:"\2212";}
.faq .a{padding:0 1.6rem 1.35rem;font-size:1rem;}
.faq .a p{margin:0 0 .7rem;}
.faq .a p:last-child{margin:0;}

/* ---------- Fuss ---------- */
.site-foot{background:#18181b;border-top:1px solid var(--line);text-align:center;padding:2rem 0;margin-top:3rem;color:var(--ink-dim);font-size:.86rem;}
.site-foot a{color:inherit;}
.site-foot a:hover{color:var(--ink-soft);}
.site-foot .zeile{margin:0 auto .8rem;max-width:none;}
.site-foot .disclaimer{font-size:.78rem;color:#6b6b73;max-width:62ch;margin:0 auto;line-height:1.55;}

/* ============================================================
   POLITUR
   Alles hier ist reines CSS und ein paar Zeilen eigenes JavaScript.
   Kein Framework, kein Buildschritt, keine fremde Verbindung.

   GRUNDREGEL: Die Seite muss ohne JavaScript vollstaendig lesbar sein.
   Deshalb versteckt das Einblenden unten NUR dann etwas, wenn die
   Klasse "hat-js" am html-Element haengt. Die setzt das Skript als
   Allererstes. Ohne Skript bleibt also alles sichtbar.
   ============================================================ */

/* ---------- Einblenden beim Scrollen ---------- */
.hat-js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change:opacity,transform;
}
.hat-js [data-reveal].sichtbar{opacity:1;transform:none;}
/* Gestaffelt, damit Listen nacheinander erscheinen statt als Block */
.hat-js [data-reveal="1"]{transition-delay:.07s;}
.hat-js [data-reveal="2"]{transition-delay:.14s;}
.hat-js [data-reveal="3"]{transition-delay:.21s;}
.hat-js [data-reveal="4"]{transition-delay:.28s;}
.hat-js [data-reveal="5"]{transition-delay:.35s;}

/* ---------- Karten bekommen Tiefe ---------- */
.card, .bonus-card, .ch-card, .layer, .faq, .dl-card, .price-card, .stack{
  transition:border-color .25s ease, transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s ease;
}
.bonus-card:hover, .ch-card:hover, .layer:hover, .dl-card:hover{
  border-color:#3a3a41;
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,.34);
}
/* Ein feiner Lichtsaum oben, wie bei gutem Papier im Streiflicht */
.bonus-card, .ch-card, .price-card, .card{position:relative;}
.bonus-card::before, .ch-card::before, .price-card::before, .card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 22%,rgba(255,255,255,.10) 78%,transparent);
  pointer-events:none;
}

/* ---------- Handlungsknopf mit Glanzstrich ---------- */
.btn-cta{position:relative;overflow:hidden;isolation:isolate;}
.btn-cta::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-120%);
}
.btn-cta:hover::after{transform:translateX(120%);transition:transform .62s ease;}
.btn-cta:active{transform:translateY(1px) scale(.995);}

/* ---------- Zaehlende Zahlen ---------- */
/* Die Breite wird beim Start eingefroren, sonst zappelt das Layout,
   waehrend die Ziffern hochlaufen. */
[data-zahl]{font-variant-numeric:tabular-nums;}

/* ---------- Feines Raster als Untergrund ---------- */
.raster{position:relative;}
.raster::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 35%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 35%,transparent 78%);
}
.raster > *{position:relative;z-index:1;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  /* Wer Bewegung abgeschaltet hat, bekommt den Inhalt sofort und ganz. */
  .hat-js [data-reveal]{opacity:1 !important;transform:none !important;}
  .bonus-card:hover, .ch-card:hover, .layer:hover, .dl-card:hover{transform:none;}
  .btn-cta::after{display:none;}
}

/* ============================================================
   Kleiner Ersatz fuer die wenigen Bootstrap-Klassen, die auf
   den Seiten vorkommen. Damit faellt das 230-KB-CDN weg.
   ============================================================ */
.row{display:flex;flex-wrap:wrap;gap:var(--gap,1.5rem);}
.row > [class*="col-"]{width:100%;}
.g-4{--gap:1.5rem;}
.g-5{--gap:3rem;}
.align-items-center{align-items:center;}
.justify-content-center{justify-content:center;}
.flex-column-reverse{flex-direction:column-reverse;}

@media (min-width: 768px){
  .row > .col-md-5{width:calc(41.666% - var(--gap,1.5rem) / 2);}
  .row > .col-md-7{width:calc(58.333% - var(--gap,1.5rem) / 2);}
  .row.flex-md-row{flex-direction:row;}
}
@media (min-width: 992px){
  .row > .col-lg-5{width:calc(41.666% - var(--gap,1.5rem) / 2);}
  .row > .col-lg-7{width:calc(58.333% - var(--gap,1.5rem) / 2);}
}

.text-center{text-align:center;}
.text-start{text-align:left;}
.text-end{text-align:right;}
.mx-auto{margin-left:auto;margin-right:auto;}
.mt-3{margin-top:1rem;}
.mt-4{margin-top:1.5rem;}
.mt-5{margin-top:3rem;}
.mb-4{margin-bottom:1.5rem;}