/* Scanvero — gemeinsames Stylesheet
   Seitenfarben: Weiß, kühles Grau, Signalblau. Die KARTENFARBEN weiter unten
   sind bewusst unabhängig davon und wurden nicht mit umgestellt: das sind die
   Produkte. Eine kühle, zurückgenommene Seite ist die Galeriewand, vor der
   die warmen Karten überhaupt erst wirken. */

:root{
  /* ---- Weiß und Grau ---- */
  --weiss:    #FFFFFF;   /* Seitengrund. Echtes Weiß, kein „fast weiß". */
  --dunst:    #EFF3F7;   /* helle Bänder */
  --kiesel:   #DAE2EA;   /* Fuß, kräftigeres Grau */

  /* ---- Blau ----
     --tiefsee ersetzt das frühere #0E1620. Das war getöntes Fast-Schwarz —
     eine Farbe, die man wählt, wenn man sich nicht entscheiden will, und die
     auf jeder generierten Seite steht. Das hier ist erkennbar Marineblau:
     Werfthafen, Nordsee, die Stadt, in der das Ding verkauft wird.
     14,4:1 auf Weiß. */
  --tiefsee:  #0A2B4C;
  --schiefer: #4F6070;   /* Fließtext — 6,5:1 auf Weiß, 5,8:1 auf Dunst */

  /* Drei Signalblau mit fester Rollenteilung. Ein einziges Blau reicht nicht:
     dieselbe Farbe, die als Fläche gut aussieht, fällt als kleine Schrift
     durch die AA-Prüfung (4,5:1 unter 18,66 px). */
  --signal:      #0E5CD6;   /* Flächen und Buttons — Weiß darauf = 6,0:1 */
  --signal-tief: #0A3F96;   /* gedrückt */
  --signal-text: #0B4AAE;   /* kleine Schrift auf hell — 8,1:1 auf Weiß */
  --signal-hell: #7FB3FF;   /* Schrift auf Tiefsee — 6,7:1 */
  --signal-hauch: rgba(14,92,214,.07);

  /* Einziger Nicht-Blauton der Seite, nur für Fehlermeldungen am Formular.
     6,5:1 auf Weiß, also auch als kleine Schrift AA-fest. */
  --fehler: #B3261E;
  --signal-rand:  rgba(14,92,214,.24);

  --linie:      rgba(10,43,76,.12);
  --linie-stark:rgba(10,43,76,.22);

  /* Nur zwei Schatten, und beide sind sparsam. Eine dreistufige Schattenleiter
     unter jeder Kachel war Teil des Kachel-Baukastens, den diese Fassung
     loswird — Tiefe kommt jetzt aus der Grundlinie, nicht aus Weichzeichnung. */
  --schatten-1: 0 1px 2px rgba(10,43,76,.06);
  --schatten-2: 0 10px 28px -18px rgba(10,43,76,.4);

  /* ease-out-quint: schnell los, weich aus. Liest sich als „reagiert sofort". */
  --kurve: cubic-bezier(.16,1,.3,1);

  --breit: 1080px;
  --schmal: 660px;
  /* Bilder dürfen eine weiche Ecke haben, Flächen nicht. Ein einheitlicher
     Radius auf allem war genau der Baukasten-Effekt. */
  --radius: 4px;

  /* ---- Die Form des Produkts ----
     Ein Aufsteller ist ein Hochformat, das auf einem schweren Fuß steht.
     Diese Silhouette ist das Formprinzip der Seite: Flächen bekommen keine
     Rundum-Kontur mit Schlagschatten, sondern eine tragende Grundlinie. */
  --sockel: 3px solid var(--signal);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

/* EINE Schriftfamilie für die ganze Seite. Vorher liefen Archivo für
   Überschriften und Jost für Text nebeneinander — beides neutrale Grotesken,
   zu ähnlich, um als Kontrast zu wirken, und zusammen doppelte Ladelast.
   Der Kontrast kommt jetzt aus der BREITEN-Achse von Archivo (62–125 %):
   Überschriften breit wie eine Ladenschild-Beschriftung, Text normal.
   Jost bleibt ausschließlich den Musterkarten vorbehalten. */
body{
  margin:0;
  background:var(--weiss);
  color:var(--tiefsee);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.6;
  text-wrap:pretty;
  overflow-wrap:break-word;      /* deutsche Komposita sprengen sonst schmale Displays */
  -webkit-font-smoothing:antialiased;
}
p,li{                            /* nur Fließtext trennen, keine Überschriften */
  hyphens:auto;
  hyphenate-limit-chars:7 4 3;   /* keine „ei-nes"-Reste am Zeilenende */
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  text-wrap:balance;
  /* body erbt overflow-wrap:break-word — das ist für Fließtext auf schmalen
     Displays richtig, für Überschriften aber falsch: „Datenschutzerklärung"
     brach dadurch als „Datenschutzerklärun / g" um. Hier stattdessen echte
     Silbentrennung (funktioniert, weil <html lang="de"> gesetzt ist). */
  overflow-wrap:normal;
  hyphens:auto;
  hyphenate-limit-chars:10 5 4;   /* nur wirklich lange Wörter trennen */
}
/* Breit gesetzt. Bei 112 % braucht die Zeile weniger negatives Tracking als
   bei Normalbreite — sonst laufen die breiten Formen ineinander. */
h1,h2{ font-stretch:112%; letter-spacing:-.008em; }
h1{ font-size:clamp(2.2rem,5.4vw,3.5rem); }
h2{ font-size:clamp(1.65rem,3.5vw,2.35rem); }
/* h3 bleibt normalbreit: Unterüberschriften sollen den Hauptzeilen nicht
   die Aufmerksamkeit streitig machen. */
h3{ font-size:1.14rem; font-weight:600; font-stretch:100%; letter-spacing:-.004em; }

p{ margin:0 0 1.05em; }
a{ color:var(--tiefsee); text-underline-offset:.22em; text-decoration-thickness:1px; }
a:hover{ color:var(--signal-text); }

.wrap{ max-width:var(--breit); margin:0 auto; padding:0 26px; }
.schmal{ max-width:var(--schmal); }

/* Vorher war das ein gesperrtes Versalien-Etikett über jeder Überschrift —
   die häufigste Signatur einer generierten Seite. Jetzt: normale Schreibung,
   kein Tracking, ein kurzer Strich davor. Liest sich als Randnotiz statt als
   Rubrik. Inline-block statt flex, weil flex in den zentrierten Abschnitten
   linksbündig umbrechen würde. */
.vorspann{
  font-size:.92rem; font-weight:500;
  color:var(--signal-text);
  margin:0 0 .85em;
}
.vorspann::before{
  content:''; display:inline-block; width:22px; height:2px;
  background:var(--signal); margin-right:12px;
  vertical-align:middle; position:relative; top:-2px;
}
.lead{ font-size:1.15rem; color:var(--schiefer); max-width:62ch; }
.klein{ font-size:.87rem; color:var(--schiefer); }

/* =========================================================
   BEWEGUNG
   Grundregel: ohne JavaScript ist alles sichtbar. Die Klasse .js setzt
   ein Inline-Script im <head> — erst dann darf überhaupt etwas versteckt
   werden. Sonst sähen Besucher mit blockiertem JS eine leere Seite.
   ========================================================= */
.js .auftritt{
  opacity:0; transform:translateY(20px);
  transition:opacity .66s var(--kurve), transform .66s var(--kurve);
  transition-delay:var(--verzug,0ms);
  will-change:opacity,transform;
}
.js .auftritt.da{ opacity:1; transform:none; }

/* Wer im Betriebssystem „Bewegung reduzieren" gesetzt hat, bekommt keine.
   Das ist kein Nice-to-have: Animationen lösen bei manchen Menschen
   Schwindel aus. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .auftritt{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Der Blauschimmer, der hier stand, ist ersatzlos weg. Er war Farbwolke ohne
   Aussage — Dekoration, die auf jeder zweiten generierten Seite steht und
   nebenbei den Textkontrast auf 4,50:1 drückte. Der Aufmacher trägt sich
   über Typografie und Produktbild. */

/* ---------- Der eine bewegte Moment: das Antippen ----------
   Statt Einblend-Effekten auf allem läuft genau eine Animation, und die zeigt
   die Geste, um die es bei diesem Produkt geht: ein Handy wird an das NFC-Feld
   gehalten, Wellen laufen nach außen. Sie läuft dreimal und hört dann auf —
   ein Dauerpuls würde beim Lesen stören.
   Sitzt über dem Aufsteller-Foto, Position kommt aus dem HTML. */
.tap{
  position:absolute; width:74px; height:74px; pointer-events:none;
  transform:translate(-50%,-50%);
}
.tap span{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--signal);
  opacity:0;
  animation:tap-welle 2.4s var(--kurve) 3;
}
.tap span:nth-child(2){ animation-delay:.35s; }
.tap span:nth-child(3){ animation-delay:.7s; }
@keyframes tap-welle{
  0%   { transform:scale(.28); opacity:0; }
  14%  { opacity:.85; }
  70%  { transform:scale(1);   opacity:0; }
  100% { transform:scale(1);   opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .tap{ display:none; }
}

/* ---------- Kopf / Navigation ---------- */
.kopf{
  border-bottom:1px solid var(--linie);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  position:sticky; top:0; z-index:50;
  transition:box-shadow .3s var(--kurve), background .3s var(--kurve);
}
.kopf.gescrollt{
  background:rgba(255,255,255,.96);
  box-shadow:var(--schatten-2);
}
.kopf-innen{
  display:flex; align-items:center; gap:26px;
  max-width:var(--breit); margin:0 auto; padding:15px 26px;
}
/* Die Wortmarke steht am weitesten außen auf der Breiten-Achse — sie ist das
   einzige Wort, das sich das leisten kann, weil es kurz ist und jeder es
   nur wiedererkennen, nicht lesen muss. */
.marke{
  font-size:1.4rem; font-weight:700; font-stretch:118%;
  letter-spacing:-.01em; text-decoration:none; color:var(--tiefsee);
  margin-right:auto; white-space:nowrap;
  /* Abstand über margin am Bild, NICHT über gap: gap träfe auch die Lücke
     zwischen „Scan" und dem farbigen <span>vero</span> und würde die
     Wortmarke auseinanderreißen. */
  display:inline-flex; align-items:center;
}
/* Dieselbe Datei, die schon als Favicon geladen wird — kommt also aus dem
   Zwischenspeicher und kostet keinen zusätzlichen Abruf.
   alt="" ist Absicht: das Wort daneben sagt bereits „Scanvero", ein
   Alternativtext würde den Namen für Screenreader verdoppeln. */
.marke-zeichen{
  width:30px; height:30px; flex:none; margin-right:10px;
  border-radius:6px;   /* fängt Kantenflimmern beim Skalieren ab */
}
@media (max-width:760px){
  .marke{ font-size:1.28rem; }
  .marke-zeichen{ width:26px; height:26px; margin-right:8px; }
}
.marke span{ color:var(--signal); }
.nav{ display:flex; gap:23px; align-items:center; }
.nav a{
  font-size:.94rem; text-decoration:none; color:var(--schiefer);
  padding-bottom:3px; position:relative;
  transition:color .2s var(--kurve);
}
/* Der Unterstrich wächst aus der Mitte, statt hart zu erscheinen.
   :not(.knopf) ist Pflicht — sonst bekäme der CTA-Button einen Strich
   quer über seine Fläche. */
.nav a:not(.knopf)::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--signal); border-radius:2px;
  transform:scaleX(0); transition:transform .3s var(--kurve);
}
.nav a:not(.knopf):hover{ color:var(--tiefsee); }
.nav a:not(.knopf):hover::after,
.nav a[aria-current="page"]:not(.knopf)::after{ transform:scaleX(1); }
.nav a[aria-current="page"]:not(.knopf){ color:var(--tiefsee); }

/* .nav a (0,1,1) schlägt .knopf (0,1,0) — der Button braucht die Farbe
   deshalb hier nochmal explizit, sonst steht tinte-hell auf tinte. */
.nav a.knopf{ color:var(--weiss); }
.nav a.knopf:hover{ color:var(--weiss); }

/* min-height 44px ist keine Kosmetik: das ist das Mindestmaß für ein
   Berührziel (Apple HIG), und auf dem Handy ist dieser Knopf der EINZIGE
   Weg in die Navigation. Vorher waren es 32 px. */
.nav-schalter{
  display:none; background:none; border:1px solid var(--linie-stark);
  border-radius:2px; padding:0 14px; min-height:44px; cursor:pointer;
  font-family:inherit; font-size:.95rem; font-weight:500; color:var(--tiefsee);
  transition:border-color .2s, background .2s;
}
.nav-schalter:hover{ border-color:var(--signal); background:var(--signal-hauch); }

/* ---------- Buttons ---------- */
/* Auch der Button steht auf seinem Sockel: die schwere Unterkante ist das
   sichtbare Volumen. Beim Drücken sinkt er darauf ab — Bewegung, die zeigt,
   was gerade passiert, statt Bewegung als Verzierung. */
.knopf{
  display:inline-block; padding:14px 28px;
  background:var(--signal); color:var(--weiss);
  font-size:.97rem; font-weight:600; font-stretch:104%;
  text-decoration:none; border:0; border-bottom:3px solid var(--signal-tief);
  border-radius:2px; cursor:pointer;
  transition:background .18s var(--kurve);
}
.knopf:hover{ background:var(--signal-tief); color:var(--weiss); }
.knopf:active{
  transform:translateY(2px); border-bottom-width:1px; margin-bottom:2px;
}
.knopf:focus-visible{ outline:2px solid var(--tiefsee); outline-offset:3px; }

/* Alias — auf mehreren Seiten steht knopf-akzent für den Haupt-CTA.
   Seit der Grundknopf blau ist, sind beide identisch; die Klasse bleibt,
   damit das HTML nicht überall angefasst werden muss. */
.knopf-akzent{ background:var(--signal); }

.knopf-hell{
  background:var(--weiss); color:var(--tiefsee);
  border:1px solid var(--linie-stark); border-bottom:3px solid var(--linie-stark);
}
.knopf-hell:hover{
  background:var(--weiss); color:var(--signal-text); border-color:var(--signal);
}

/* ---------- Abschnitte ---------- */
.band{ padding:84px 0; }
.band-stein{ background:var(--dunst); }
.band-dunkel{ background:var(--tiefsee); color:var(--kiesel); position:relative; overflow:hidden; }
.band-dunkel h2,.band-dunkel h3{ color:var(--weiss); }
.band-dunkel .vorspann{ color:var(--signal-hell); }
.band-dunkel .vorspann::before{ background:var(--signal-hell); }
.band-dunkel a:not(.knopf){ color:var(--signal-hell); }
/* Derselbe Schimmer wie im Seitenkopf, nur andersherum: auf Tinte muss er
   heller sein als der Grund, sonst sieht man ihn gar nicht. */
.band-dunkel::before{
  content:''; position:absolute; inset:auto -10% -60% -10%; height:140%;
  background:radial-gradient(44% 50% at 50% 100%, rgba(27,95,217,.28), transparent 70%);
  pointer-events:none;
}
.band-dunkel > *{ position:relative; }
.band-eng{ padding:58px 0; }

.regel{ border:0; border-top:1px solid var(--linie); margin:0; }

/* ---------- Raster ---------- */
.raster{ display:grid; gap:34px; }
.raster-2{ grid-template-columns:repeat(2,1fr); }
.raster-3{ grid-template-columns:repeat(3,1fr); }
.raster-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Schritte ---------- */
/* Eine Textspalte, kein Gegenstand — deshalb Kopflinie statt Sockel.
   Die Unterscheidung ist die Regel: was ein Ding abbildet, steht auf einem
   Sockel; was eine Spalte gliedert, bekommt einen Strich obendrüber. */
.schritt{ border-top:2px solid var(--signal); padding-top:18px; }
.schritt .nr{
  font-size:.88rem; font-weight:600; color:var(--signal-text);
  display:block; margin-bottom:7px;
}
.schritt h3{ margin-bottom:.35em; }
.schritt p{ margin:0; font-size:.95rem; color:var(--schiefer); }
.band-dunkel .schritt p{ color:var(--kiesel); opacity:.82; }

/* ---------- Preistafeln ---------- */
/* Preistafel = ein Ding, das auf dem Tresen steht. Deshalb Sockel unten
   statt Rundum-Radius mit Schlagschatten. Kein Hover-Anheben: das Ding steht,
   es schwebt nicht, und ein Anheben auf jeder Kachel war Teil dessen, was
   diese Seite wie jede andere aussehen ließ. */
.tafel{
  border:1px solid var(--linie); border-bottom:var(--sockel);
  border-radius:0; padding:30px 26px 26px; background:var(--weiss);
  display:flex; flex-direction:column;
}
.tafel-hervor{ position:relative; border-bottom-width:7px; }
.tafel-hervor::before{
  content:'Am häufigsten gekauft'; display:block;
  color:var(--signal-text); font-size:.86rem; font-weight:600;
  margin-bottom:.5em;
}
.tafel h3{ font-size:1.4rem; font-weight:600; font-stretch:108%; margin-bottom:.15em; }
.preis{
  font-size:2.6rem; font-weight:700; font-stretch:112%;
  letter-spacing:-.02em; line-height:1; margin:16px 0 4px;
}
.preis small{ font-size:.86rem; font-weight:500; font-stretch:100%; color:var(--schiefer); }
.tafel ul{ list-style:none; padding:0; margin:19px 0 24px; font-size:.94rem; }
.tafel li{ padding:7px 0 7px 21px; position:relative; border-bottom:1px solid var(--linie); }
.tafel li:last-child{ border-bottom:0; }
.tafel li::before{
  content:''; position:absolute; left:2px; top:15px;
  width:7px; height:7px; border-bottom:1.5px solid var(--signal); border-left:1.5px solid var(--signal);
  transform:rotate(-45deg);
}
.tafel .knopf{ margin-top:auto; text-align:center; }

/* ---------- Hinweis-/Merkkasten ---------- */
.kasten{
  border-left:3px solid var(--signal); border-radius:0 var(--radius) var(--radius) 0;
  background:var(--signal-hauch);
  padding:16px 20px; margin:26px 0;
  color:var(--schiefer); font-size:.95rem;
}
.kasten strong{ color:var(--tiefsee); }
.kasten-warn{ border-left-color:#B4341F; background:rgba(180,52,31,.06); }

/* ---------- Fragen ---------- */
details{ border-bottom:1px solid var(--linie); padding:15px 0; }
/* min-height 44px: eine Aufklappzeile ist ein Berührziel wie jedes andere,
   und mit reiner Zeilenhöhe kam sie auf 26 px. */
details summary{
  cursor:pointer; font-weight:500; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
  min-height:44px;
  transition:color .2s;
}
details summary:hover{ color:var(--signal-text); }
details summary::-webkit-details-marker{ display:none; }
details summary::after{
  content:'+'; color:var(--signal); font-size:1.4rem; line-height:1;
  transition:transform .28s var(--kurve); transform-origin:center;
}
details[open] summary::after{ transform:rotate(45deg); }
details p{ margin:11px 0 0; color:var(--schiefer); font-size:.95rem; }

/* ---------- Formular ---------- */
.feld{ margin-bottom:24px; }
.feld > label,.feld > .frage{
  display:block; font-weight:500; font-size:.97rem; margin-bottom:8px;
}
.feld .hilfe{ font-size:.85rem; color:var(--schiefer); margin:-4px 0 9px; }
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],textarea,select{
  width:100%; padding:12px 14px; font-family:inherit; font-size:1rem;
  color:var(--tiefsee); background:var(--weiss);
  border:1px solid var(--linie-stark); border-radius:var(--radius);
  transition:border-color .2s, box-shadow .2s;
}
input:hover,textarea:hover,select:hover{ border-color:var(--signal-rand); }
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--signal);
  box-shadow:0 0 0 3px var(--signal-hauch);
}
textarea{ min-height:104px; resize:vertical; }
input[type=file]{ font-family:inherit; font-size:.92rem; }
#logo-fehler{ color:var(--fehler); font-weight:500; margin-top:8px; }

.wahl{ display:grid; gap:11px; }
.wahl-2{ grid-template-columns:repeat(2,1fr); }
.wahl label{
  display:block; border:1px solid var(--linie-stark); border-radius:var(--radius);
  padding:14px 16px; cursor:pointer; background:var(--weiss); font-size:.95rem;
  transition:border-color .2s var(--kurve), background .2s var(--kurve),
             box-shadow .2s var(--kurve), transform .2s var(--kurve);
}
.wahl label:hover{ border-color:var(--signal); }
.wahl input{ margin-right:9px; accent-color:var(--signal); }
/* Der Rahmen wird dicker, also muss das Padding um dieselbe Zahl kleiner
   werden — sonst springt die Kachel beim Anklicken. */
.wahl label:has(input:checked){
  border-color:var(--signal); border-width:2px; padding:13px 15px;
  background:var(--signal-hauch);
}
.wahl .sub{ display:block; font-size:.83rem; color:var(--schiefer); margin-top:3px; padding-left:24px; }

/* Auswahl mit Vorschaubild — bei Standfuß und Stil sagt ein Bild mehr als der Name */
.wahl-bild label{ padding:0; overflow:hidden; }
.wahl-bild label:has(input:checked){ padding:0; }
.wahl-bild img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 62%;
  transition:transform .4s var(--kurve);
}
.wahl-bild label:hover img{ transform:scale(1.03); }
.wahl-bild .titel{ display:block; padding:12px 15px 0; font-weight:500; }
.wahl-bild .sub{ padding:0 15px 14px; margin-top:5px; }

/* ---------- Fuß ---------- */
.fuss{
  border-top:1px solid var(--linie); padding:48px 0 36px;
  font-size:.9rem; color:var(--schiefer); background:var(--kiesel);
}
.fuss-innen{ display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; }
.fuss a{ color:var(--schiefer); }
.fuss a:hover{ color:var(--signal-text); }
.fuss nav{ display:flex; gap:19px; flex-wrap:wrap; }

/* =========================================================
   MUSTERKARTEN — Aufsteller-Vorschau (98 × 146 mm)
   Alles in em, gesteuert über font-size auf .karte.
   NICHT auf Blau umgestellt: das sind die Produkte, nicht die Website.
   ========================================================= */
.karte{
  font-size:10px;                 /* Maßstab: 1em = 10px */
  width:30em; height:44.7em;      /* = 98:146 */
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
  border-radius:.2em;
  box-shadow:0 1px 2px rgba(20,30,45,.10),0 14px 34px -14px rgba(20,30,45,.34);
  user-select:none;
}
.karte .inhalt{
  flex:1; display:flex; flex-direction:column; align-items:center;
  width:100%; padding:2.6em 2.2em 2.2em; text-align:center;
}
.karte .wortmarke{
  font-weight:600; letter-spacing:.26em; line-height:1.15;
  text-transform:uppercase;
}
.karte .sterne{ display:flex; gap:.42em; margin:.85em 0 0; flex:none; }
.karte .sterne svg{ width:1.05em; height:1.05em; display:block; }
.karte .kopfzeile{ font-size:1.02em; letter-spacing:.13em; text-transform:uppercase; opacity:.62; }
.karte .headline{ line-height:1.06; margin:0; }
.karte .subline{ line-height:1.42; margin:.7em 0 0; }
/* Die Karte wird auch in fremde Seiten eingesetzt (Mockup-Szene, künftige Druckvorlagen).
   Deren globale .headline/.subline-Regeln würden sonst durchschlagen — Vererbung
   verliert immer gegen eine passende Regel, egal wie schwach die ist. */
.karte .wortmarke,.karte .kopfzeile,.karte .headline,
.karte .subline,.karte .dank,.karte .team,.karte .marke-feld{ color:inherit; }
.karte .felder{
  display:flex; gap:1.5em; justify-content:center; align-items:flex-start;
  margin-top:auto; flex:none;
}
.karte .feldblock{ display:flex; flex-direction:column; align-items:center; flex:none; }
.karte .qr-box{
  width:10.2em; height:10.2em; padding:.8em; background:#fff;
  border-radius:.8em; flex:none;
}
.karte .qr-box svg{ width:100%; height:100%; display:block; }
.karte .nfc-box{
  width:10.2em; height:10.2em; background:#fff; border-radius:.8em; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.karte .nfc-box svg{ width:3.9em; height:3.9em; }
.karte .marke-feld{
  font-size:.82em; letter-spacing:.19em; text-transform:uppercase;
  margin-top:.85em; opacity:.72;
}
.karte .dank{ margin-top:1.7em; line-height:1.35; flex:none; }
.karte .team{
  font-size:.82em; letter-spacing:.19em; text-transform:uppercase;
  margin-top:.5em; opacity:.72; flex:none;
}

/* --- Stil 1: Samt (Oxblood + Gold) --- */
.k-samt{ background:#6B1F2A; color:#F4EBDF; font-family:'Jost',sans-serif; }
.k-samt .rahmen{
  position:absolute; inset:1.2em; border:.12em solid #C9A15E; pointer-events:none;
}
.k-samt .rahmen::after{
  content:''; position:absolute; inset:.42em; border:.055em solid rgba(201,161,94,.55);
}
.k-samt .inhalt{ padding:3.4em 3em 3em; }
.k-samt .wortmarke{ font-size:1.34em; color:#C9A15E; }
.k-samt .sterne svg{ fill:#C9A15E; }
.k-samt .headline{
  font-family:'Archivo Black',Impact,sans-serif; font-size:2.42em;
  letter-spacing:-.02em; margin-top:.5em; line-height:1.02;
}
.k-samt .kopfzeile{ color:#C9A15E; margin-top:.5em; font-size:.92em; letter-spacing:.28em; }
.k-samt .subline{ font-size:1.02em; color:#C9A15E; font-style:italic; }
.k-samt .bogen{
  position:absolute; left:1.9em; right:1.9em; bottom:1.9em; height:17.6em;
  background:#F4EBDF; border-radius:5.2em 5.2em .5em .5em;
}
.k-samt .inhalt{ padding-bottom:3.6em; }
.k-samt .felder{ position:relative; z-index:2; }
.k-samt .qr-box,.k-samt .nfc-box{ background:transparent; }
.k-samt .nfc-box{ border:.11em solid #6B1F2A; border-radius:50%; }
.k-samt .nfc-box svg{ fill:#6B1F2A; }
.k-samt .marke-feld{ color:#6B1F2A; opacity:.9; }
.k-samt .dank{
  position:relative; z-index:2; color:#6B1F2A; font-size:.95em;
  letter-spacing:.02em; margin-top:1.1em;
}
.k-samt .team{ display:none; }

/* --- Stil 2: Perlmutt (Blush → Champagner) --- */
.k-perlmutt{
  background:linear-gradient(168deg,#FBEEE9 0%,#F8E9DE 46%,#F1DFC9 100%);
  color:#4A3630; font-family:'Jost',sans-serif;
}
.k-perlmutt .halo{
  position:absolute; left:50%; top:3.4em; width:26em; height:26em;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.k-perlmutt .inhalt{ position:relative; z-index:2; padding:3.2em 2.4em 4.4em; }
.k-perlmutt .wortmarke{
  font-family:'Fraunces',serif; font-size:1.75em; font-weight:500;
  letter-spacing:.2em; color:#B18A55; text-transform:uppercase;
}
.k-perlmutt .kopfzeile{ margin-top:.5em; color:#9A7C58; }
.k-perlmutt .sterne svg{ fill:#B18A55; }
.k-perlmutt .headline{ font-size:2.55em; font-weight:300; margin-top:.75em; letter-spacing:-.01em; }
.k-perlmutt .subline{ font-size:.98em; color:#7C665C; }
.k-perlmutt .qr-box,.k-perlmutt .nfc-box{
  background:rgba(255,255,255,.92); box-shadow:0 .18em .6em rgba(120,90,70,.1);
}
.k-perlmutt .nfc-box svg{ fill:#B18A55; }
.k-perlmutt .marke-feld{ color:#9A7C58; }
.k-perlmutt .dank{ font-size:1.08em; }
.k-perlmutt .team{ color:#B18A55; opacity:1; }

/* --- Stil 3: Onyx (Schwarz als Passepartout) --- */
.k-onyx{ background:#14110F; color:#F6F1E9; font-family:'Jost',sans-serif; padding:1.5em; }
.k-onyx .innen{
  flex:1; width:100%; background:#F6F1E9; color:#2A231D; border-radius:.3em;
  display:flex; flex-direction:column; align-items:center; overflow:hidden;
  position:relative;
}
.k-onyx .innen::before{
  content:''; position:absolute; left:2.6em; right:2.6em; top:0; height:.16em; background:#B18A55;
}
.k-onyx .inhalt{ padding:2.7em 2.2em 2.9em; }
.k-onyx .wortmarke{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.6em; letter-spacing:.13em;
}
.k-onyx .kopfzeile{ margin-top:.45em; color:#8C7A63; letter-spacing:.22em; font-size:.86em; }
.k-onyx .sterne{ margin-top:1em; }
.k-onyx .sterne svg{ fill:#B18A55; }
.k-onyx .headline{ font-family:'Fraunces',serif; font-size:2.7em; font-weight:500; margin-top:.55em; }
.k-onyx .subline{ font-size:.98em; color:#6E6053; }
.k-onyx .qr-box,.k-onyx .nfc-box{ background:#fff; border:.09em solid rgba(42,35,29,.14); }
.k-onyx .nfc-box svg{ fill:#2A231D; }
.k-onyx .dank{ font-family:'Fraunces',serif; font-style:italic; font-size:1.16em; }
.k-onyx .team{ color:#8C7A63; }

/* --- Stil 4: Klar (hell, Petrol, ohne Zierrat) --- */
.k-klar{ background:#FCFCFB; color:#1F2933; font-family:'Jost',sans-serif; }
.k-klar .balken{ position:absolute; inset:0 0 auto; height:1.1em; background:#1C3A63; }
.k-klar .inhalt{ padding:4.2em 2.4em 4.4em; }
.k-klar .wortmarke{ font-size:1.42em; font-weight:600; letter-spacing:.17em; color:#1C3A63; }
.k-klar .kopfzeile{ margin-top:.45em; color:#5B6B7C; }
.k-klar .sterne svg{ fill:#1C3A63; }
.k-klar .headline{ font-size:2.65em; font-weight:500; margin-top:.7em; letter-spacing:-.015em; }
.k-klar .subline{ font-size:.98em; color:#5B6B7C; }
.k-klar .qr-box,.k-klar .nfc-box{ background:#fff; border:.11em solid #DCE3EA; }
.k-klar .nfc-box svg{ fill:#1C3A63; }
.k-klar .marke-feld{ color:#5B6B7C; }
.k-klar .dank{ font-weight:500; }
.k-klar .team{ color:#1C3A63; }

/* =========================================================
   FÜNF EINZELSTÜCKE — Seite „Eigenes Design"
   Nicht Varianten der vier Stile oben, sondern fünf eigene Handschriften.
   Das ist der ganze Beweis dieser Seite: dieselbe Technik, fünf Läden.

   Zwei Regeln gelten für alle fünf:
   1. .inhalt bekommt position:relative + z-index — sonst legt sich das
      absolut positionierte Dekor-Div ÜBER den Text, obwohl es im HTML
      davor steht.
   2. padding-bottom mindestens 4.6em (= 15 mm). Der Sockel verdeckt die
      unteren ~2,2em der Karte; alles darunter wäre im Aufsteller weg.
   ========================================================= */

/* --- Kombüse 14: Bistro. Nachtblau, Sand, maritim ohne Anker und Tau --- */
.k-kombuese{ background:#0F2A3D; color:#F2E7D5; font-family:'Jost',sans-serif; }
/* Höhe ist NICHT frei wählbar: der QR-Block beginnt rechnerisch 345 px über
   der Kartenunterkante (82 padding + 44 Dank + 219 Felder), die Karte ist
   799 px hoch. Bei 17,2em (307 px) lag die obere QR-Kante auf dem dunklen
   Blau — ein QR auf dunklem Grund wird von vielen Kameras nicht mehr erkannt.
   21em = 375 px, damit liegt der Code auch an der abfallenden Flanke sicher. */
.k-kombuese .welle{
  position:absolute; left:0; right:0; bottom:0; height:21em;
  background:#F2E7D5; border-radius:100% 100% 0 0 / 4.4em 4.4em 0 0;
}
.k-kombuese .inhalt{ position:relative; z-index:2; padding:3.4em 2.6em 4.6em; }
.k-kombuese .wortmarke{
  font-family:'Fraunces',serif; font-size:1.68em; font-weight:600;
  letter-spacing:.14em; color:#D9A441;
}
.k-kombuese .kopfzeile{ margin-top:.5em; color:#8FB4C9; letter-spacing:.24em; font-size:.84em; }
.k-kombuese .sterne svg{ fill:#D9A441; }
.k-kombuese .headline{ font-family:'Fraunces',serif; font-size:2.68em; font-weight:500; margin-top:.6em; }
.k-kombuese .subline{ font-size:.95em; color:#A9C6D6; }
.k-kombuese .qr-box,.k-kombuese .nfc-box{ background:transparent; }
.k-kombuese .nfc-box{ border:.11em solid #0F2A3D; border-radius:50%; }
.k-kombuese .nfc-box svg{ fill:#0F2A3D; }
.k-kombuese .marke-feld{ color:#0F2A3D; opacity:.8; }
.k-kombuese .dank{ color:#0F2A3D; font-weight:500; font-size:.94em; margin-top:1.2em; }
.k-kombuese .team{ display:none; }

/* --- Eisenwerk: Fitness. Schwarz und Signalgelb, harte Kante --- */
.k-eisen{ background:#141414; color:#F5F5F0; font-family:'Jost',sans-serif; }
.k-eisen .keil{
  position:absolute; left:0; right:0; top:0; height:10.2em; background:#E8C21A;
  clip-path:polygon(0 0, 100% 0, 100% 64%, 0 100%);
}
.k-eisen .inhalt{ position:relative; z-index:2; padding:3.2em 2.4em 4.6em; }
.k-eisen .wortmarke{
  font-family:'Archivo Black',Impact,sans-serif; font-size:1.5em;
  letter-spacing:.09em; color:#141414;
}
.k-eisen .kopfzeile{ margin-top:.4em; color:#141414; opacity:.7; letter-spacing:.26em; font-size:.8em; }
.k-eisen .sterne{ margin-top:2.6em; }
.k-eisen .sterne svg{ fill:#E8C21A; }
.k-eisen .headline{
  font-family:'Archivo Black',Impact,sans-serif; font-size:3.4em;
  letter-spacing:-.03em; margin-top:.32em; line-height:.94;
}
.k-eisen .subline{ font-size:.94em; color:#9A9A92; }
.k-eisen .qr-box,.k-eisen .nfc-box{ background:#F5F5F0; }
.k-eisen .nfc-box svg{ fill:#141414; }
.k-eisen .marke-feld{ color:#E8C21A; opacity:1; }
.k-eisen .dank{ font-size:.88em; color:#9A9A92; margin-top:1.3em; }
.k-eisen .team{ display:none; }

/* --- Nadelwerk: Tattoo. Fast schwarz, eine einzige Linie als Zierrat.
       Bewusst das Gegenteil von Samt: dort Opulenz, hier Zurückhaltung. --- */
.k-nadelwerk{ background:#0B0B0C; color:#EDEBE6; font-family:'Jost',sans-serif; }
.k-nadelwerk .linien{
  position:absolute; inset:1.7em; border:1px solid rgba(237,235,230,.2); pointer-events:none;
}
.k-nadelwerk .linien::before{
  content:''; position:absolute; left:50%; top:-1.7em; width:1px; height:1.7em;
  background:rgba(237,235,230,.2);
}
.k-nadelwerk .inhalt{ position:relative; z-index:2; padding:4.2em 2.8em 4.6em; }
.k-nadelwerk .wortmarke{ font-size:1.15em; font-weight:400; letter-spacing:.42em; }
.k-nadelwerk .kopfzeile{ margin-top:.75em; color:#807E77; letter-spacing:.28em; font-size:.78em; }
.k-nadelwerk .sterne{ margin-top:1.7em; }
.k-nadelwerk .sterne svg{ fill:#EDEBE6; }
.k-nadelwerk .headline{
  font-family:'Fraunces',serif; font-size:2.9em; font-weight:400;
  font-style:italic; margin-top:.6em;
}
.k-nadelwerk .subline{ font-size:.91em; color:#8D8B83; }
.k-nadelwerk .qr-box,.k-nadelwerk .nfc-box{ background:#EDEBE6; }
.k-nadelwerk .nfc-box svg{ fill:#0B0B0C; }
.k-nadelwerk .marke-feld{ color:#807E77; }
.k-nadelwerk .dank{ font-size:.85em; color:#807E77; margin-top:1.4em; }
.k-nadelwerk .team{ display:none; }

/* --- Hautnah: Kosmetik. Fast weiß mit Salbei. Bewusst nicht Perlmutt:
       dort Blush und Gold, hier grün und kühl. --- */
/* Erste Fassung war #FAFAF7 mit sehr blassem Kreis — im Acrylständer, der
   selbst fast weiß ist, verschwand die Karte einfach. Zurückhaltend darf sie
   bleiben, unsichtbar nicht. */
.k-hautnah{ background:#F4F7F1; color:#2A362D; font-family:'Jost',sans-serif; }
.k-hautnah .blatt{
  position:absolute; right:-7em; top:-7em; width:26em; height:26em; border-radius:50%;
  background:radial-gradient(circle at 34% 34%, #C6DBC6 0%, #DCEADA 58%, rgba(220,234,218,0) 100%);
}
.k-hautnah .inhalt{ position:relative; z-index:2; padding:4.4em 2.6em 4.6em; }
.k-hautnah .wortmarke{
  font-family:'Fraunces',serif; font-size:2em; font-weight:400;
  letter-spacing:.1em; color:#4F6B56;
}
.k-hautnah .kopfzeile{ margin-top:.6em; color:#7C8C7E; letter-spacing:.24em; font-size:.8em; }
.k-hautnah .sterne svg{ fill:#8FAF96; }
.k-hautnah .headline{ font-family:'Fraunces',serif; font-size:3em; font-weight:300; margin-top:.7em; }
.k-hautnah .subline{ font-size:.94em; color:#63705F; }
.k-hautnah .qr-box,.k-hautnah .nfc-box{
  background:#fff; box-shadow:0 .2em .7em rgba(46,58,50,.09);
}
.k-hautnah .nfc-box svg{ fill:#4F6B56; }
.k-hautnah .marke-feld{ color:#7C8C7E; }
.k-hautnah .dank{ font-family:'Fraunces',serif; font-style:italic; font-size:1.05em; margin-top:1.4em; }
.k-hautnah .team{ display:none; }

/* --- Schnittstelle: Friseur. Terrakotta, ein einziges Wort als Headline --- */
.k-schnitt{ background:#B4553A; color:#FCF3E8; font-family:'Jost',sans-serif; }
/* Gleiche Rechnung wie bei Kombüse: mit 16,6em stand der QR 9 px über der
   Bogenkante auf dem Terrakotta. 18,4em gibt ihm sicheren hellen Grund. */
.k-schnitt .bogen{
  position:absolute; left:2.2em; right:2.2em; bottom:2.6em; height:18.4em;
  background:#FCF3E8; border-radius:.9em;
}
.k-schnitt .inhalt{ position:relative; z-index:2; padding:3.8em 2.6em 5em; }
.k-schnitt .wortmarke{
  font-family:'Archivo',system-ui,sans-serif; font-weight:700;
  font-size:1.3em; letter-spacing:.2em;
}
.k-schnitt .kopfzeile{ margin-top:.5em; letter-spacing:.26em; font-size:.8em; opacity:.76; }
.k-schnitt .sterne svg{ fill:#F3C98B; }
.k-schnitt .headline{
  font-family:'Archivo Black',Impact,sans-serif; font-size:4.6em;
  letter-spacing:-.04em; margin-top:.3em;
}
.k-schnitt .subline{ font-size:.93em; color:#F6D9C6; }
.k-schnitt .qr-box,.k-schnitt .nfc-box{ background:transparent; }
.k-schnitt .nfc-box{ border:.11em solid #B4553A; border-radius:50%; }
.k-schnitt .nfc-box svg{ fill:#B4553A; }
.k-schnitt .marke-feld{ color:#B4553A; opacity:.85; }
.k-schnitt .dank{ color:#B4553A; font-weight:500; font-size:.92em; margin-top:1.2em; }
.k-schnitt .team{ display:none; }

/* Kartenbühne in der Galerie */
/* Die Bühne ist die Fläche, auf der eine Musterkarte steht — also bekommt
   auch sie den Sockel und kein Anheben beim Überfahren. */
.buehne{
  background:var(--dunst); border:1px solid var(--linie);
  border-bottom:var(--sockel); border-radius:0; padding:40px 20px;
  display:flex; justify-content:center; align-items:center;
}
.buehne .karte{ font-size:9px; }

/* ---------- Klein ---------- */
@media (max-width:900px){
  .raster-4{ grid-template-columns:repeat(2,1fr); }
  .raster-3{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .band{ padding:58px 0; }
  .raster-2,.raster-4{ grid-template-columns:1fr; }
  .wahl-2{ grid-template-columns:1fr; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--weiss); border-bottom:1px solid var(--linie);
    padding:8px 26px 18px; box-shadow:var(--schatten-2);
  }
  .nav.offen{ display:flex; }
  .nav a{ padding:12px 0; border-bottom:1px solid var(--linie); }
  /* Im Klappmenü liegen die Links untereinander; der wachsende Unterstrich
     würde dort mit der Trennlinie kollidieren. */
  .nav a:not(.knopf)::after{ display:none; }
  .nav a.knopf{ text-align:center; margin-top:12px; border-bottom:0; }
  .nav-schalter{ display:block; }
  .kopf-innen{ position:relative; }
  /* Hover-Anhebungen gehören auf Geräte mit Mauszeiger. Auf dem Handy
     bleibt der Zustand nach dem Antippen hängen. */
  .tafel:hover,.buehne:hover,.schritt:hover,.wahl label:hover{
    transform:none; box-shadow:var(--schatten-1);
  }
}

@media print{
  .kopf,.fuss,.knopf{ display:none; }
  /* Beim Drucken scrollt nichts, also feuert der IntersectionObserver nie —
     ohne diese Zeile käme alles unterhalb des Falzes als leere Fläche aus
     dem Drucker. Gilt genauso für Ganzseiten-Screenshots. */
  .js .auftritt{ opacity:1 !important; transform:none !important; }
}