/* =========================================================
   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) --- */
/* Die Grundfarbe ist beim Stil Samt wählbar (Bordeaux, Tiefgrün, Nachtblau, Anthrazit). */
.k-samt{ --samt-grund:#6B1F2A; background:var(--samt-grund); color:#F4EBDF; font-family:'Jost',sans-serif; }
.k-samt.v-anthrazit{ --samt-grund:#222427; }
.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 var(--samt-grund); border-radius:50%; }
.k-samt .nfc-box svg{ fill:var(--samt-grund); }
.k-samt .marke-feld{ color:var(--samt-grund); opacity:.9; }
.k-samt .dank{
  position:relative; z-index:2; color:var(--samt-grund); 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; }