/* Digitale Visitenkarte /karte (Auftrag 07.10.2026, Gold-Fassung)
   Mobil zuerst. Die Karte bleibt DUNKEL wie in der ersten Fassung (Korrektur
   Roland 07.10.) mit Gold-Akzenten; der Grund rundherum ist heller, damit
   die Karte sich abhebt und «schwebt». Dunkelmodus: der Seitengrund ist ein
   mittleres Waldgrün mit Goldschein hinter der Karte und der Goldrand ist
   kräftiger — sonst verschwände die fast schwarze Karte im dunklen Grund.
   Kontrast AA: jede Schrift ist gegen die hellste Stelle ihres Grundes
   gerechnet (tests/test_visitenkarte_seite.py liest die Variablen hier).
   Leistung: pro Bild ändert das Skript nur CSS-Variablen; bewegt wird mit
   transform/opacity, die Schatten sind vorgezeichnete Verläufe (kein
   filter: blur pro Bild).
   CSP: nur eigene Dateien, kein Inline-Stil. */

:root {
  /* Karte (gleich in hell und dunkel) */
  --karte-grund: #21452e; --karte-grund-2: #12281c; --karte-grund-3: #0a1811;   /* erste = hellste Stelle */
  --goldrand: 1.5px;
  --karte-text: #fdf9ee; --karte-leise: #e2efe4; --gold-text: #ffe39a;
  --gold-1: #fff1c4; --gold-2: #ffd36b; --gold-3: #ffe39a;
  /* Seite hell */
  --grund: #f6f8f1; --grund-2: #e3eddb; --text: #10301b; --leise: #3f5647;
  --knopf: rgba(255, 255, 255, 0.62); --knopf-unter: #edf3e6; --knopf-text: #10301b; --knopf-leise: #3f5647;
  --knopf-ic: #8a6410; --fokus: #8a6410;
  --haupt-text: #0f3a1d;
  --schatten-farbe: 8, 40, 18; --schein-farbe: 255, 219, 127;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #24503a; --grund-2: #173826; --text: #f1f5ec; --leise: #cfdccf;
    --goldrand: 2.5px; --schein-farbe: 255, 227, 154;
    --knopf: rgba(255, 255, 255, 0.07); --knopf-unter: #0c2213; --knopf-text: #f7f3e6; --knopf-leise: #c2d3c5;
    --knopf-ic: #ffdb7f; --fokus: #ffdb7f;
    --schatten-farbe: 0, 0, 0;
  }
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Schatten und gekippte Karte dürfen seitlich überstehen, ohne die Seite
   breiter zu machen (sonst zoomt das Handy heraus) */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body {
  margin: 0; min-height: 100vh; font-family: var(--sans); color: var(--text);
  background-color: var(--grund);
  background-image:
    radial-gradient(90% 55% at 50% 18%, rgba(255, 219, 127, 0.20), transparent 70%),
    linear-gradient(180deg, var(--grund) 0%, var(--grund-2) 100%);
  background-attachment: fixed;
  line-height: 1.5;
}

.seite {
  max-width: 560px; margin: 0 auto;
  padding: calc(26px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------ Bühne: die Karte schwebt */
.buehne {
  position: relative; width: 100%; max-width: 520px; margin: 4px auto 0; padding-bottom: 7%;
  perspective: 1100px; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* vom Skript gesetzt: Neigung (−1…1), Lichtreflex, Hub (px), Abheben (0…1) */
  --px: 0; --py: 0; --go: 0.3; --hub: 0; --lift: 0.3;
}
.js .buehne { cursor: grab; }
.js .buehne:active { cursor: grabbing; }
.schwebe { position: relative; z-index: 2; transform: translate3d(0, calc(var(--hub) * 1px), 0); }
/* mehrlagiger Schatten: nah und satt, fern und weich — wandert beim Kippen
   mit; Abstand und «Unschärfe» (Grösse, Deckkraft) wachsen mit --lift */
.schatten, .schein { position: absolute; z-index: 1; pointer-events: none; border-radius: 50%; }
.schatten.nah {
  left: 10%; right: 10%; bottom: 2%; height: 12%;
  background: radial-gradient(closest-side, rgba(var(--schatten-farbe), 0.42), rgba(var(--schatten-farbe), 0));
  transform: translate3d(calc(var(--px) * -12px), calc(var(--lift) * 8px), 0) scale(calc(1 + var(--lift) * 0.12));
  opacity: calc(0.95 - var(--lift) * 0.35);
}
.schatten.fern {
  left: 0; right: 0; bottom: -6%; height: 26%;
  background: radial-gradient(closest-side, rgba(var(--schatten-farbe), 0.26), rgba(var(--schatten-farbe), 0));
  transform: translate3d(calc(var(--px) * -30px), calc(var(--lift) * 18px), 0) scale(calc(1 + var(--lift) * 0.28));
  opacity: calc(0.7 + var(--lift) * 0.3);
}
.schein {
  left: 14%; right: 14%; bottom: -3%; height: 18%;
  background: radial-gradient(closest-side, rgba(var(--schein-farbe), 0.38), rgba(var(--schein-farbe), 0));
  opacity: calc(0.55 + var(--lift) * 0.3);
  transform: translate3d(calc(var(--px) * 10px), 0, 0);
}
.karte {
  position: relative; width: 100%; aspect-ratio: 85 / 55;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  container-type: inline-size;
}
.js .karte { will-change: transform; }
.flaeche {
  position: absolute; inset: 0; border-radius: 3.6cqw; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background:
    /* Lichtecke oben rechts (erreicht keine Schrift; im Test nachgerechnet) */
    radial-gradient(50% 60% at 96% 0%, rgba(79, 178, 108, 0.30), rgba(79, 178, 108, 0) 70%),
    /* dunkel wie die erste Fassung (fb51e48) */
    radial-gradient(125% 125% at 20% 0%, var(--karte-grund) 0%, var(--karte-grund-2) 55%, var(--karte-grund-3) 100%);
  color: var(--karte-text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Goldrand als Verlauf (Maske: nur der Rahmen bleibt sichtbar) */
.flaeche::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--goldrand); z-index: 3;
  pointer-events: none;
  background: linear-gradient(135deg, var(--gold-1), rgba(255, 211, 107, 0.35) 45%, var(--gold-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.hinten { transform: rotateY(180deg); }

/* Ebenen der Vorderseite: verschieben sich verschieden stark (Tiefe) */
.ebene { position: absolute; inset: 0; }
.muster { transform: translate3d(calc(var(--px) * -16px), calc(var(--py) * 12px), 0) scale(1.08); }
.muster svg { width: 100%; height: 100%; display: block; }
.inhalt {
  padding: 5.8% 6.1%; display: flex; flex-direction: column;
  transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * -6px), 0);
}
.marke { display: flex; align-items: center; gap: 2.4cqw; }
.zeichen { display: block; width: 10cqw; height: 10cqw; flex: none;
           transform: translate3d(calc(var(--px) * 6px), calc(var(--py) * -5px), 0); }
.zeichen svg { width: 100%; height: 100%; display: block; }
/* Porträt (Einwilligung Roland 09.10.2026, nur Visitenkarte): rund mit
   Goldring rechts oben — gleiche Lage wie in den Karten-Bildern
   (visitenkarte.PORTRAIT_MITTE/_R); Name und Funktion bleiben links frei.
   Höchstens ~125 px gross: die Vorlage (512 px aus einem Screenshot) ist
   bis rund 200 px scharf. */
.portrait-ebene {
  inset: auto; left: 68.6cqw; top: 8.8cqw; width: 23.2cqw; height: 23.2cqw; z-index: 1;
  border-radius: 50%; padding: 0.7cqw;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2) 50%, var(--gold-3));
  box-shadow: 0 1.2cqw 2.6cqw rgba(0, 0, 0, 0.45);
  transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * -7px), 0);
}
.portrait-ebene picture, .portrait { display: block; width: 100%; height: 100%; }
.portrait { border-radius: 50%; object-fit: cover; background: #f4f1ea; }
.marke-text { display: flex; flex-direction: column; line-height: 1.1; }
.firma { font-weight: 800; font-size: 3.85cqw; letter-spacing: 0.01em; color: var(--karte-text); }
/* Kleinschrift nie unter 10 px (Handy) */
.web { font-size: max(1.95cqw, 10px); font-weight: 600; letter-spacing: 0.28em; color: var(--gold-text); margin-top: 0.5cqw; }
.name {
  font-family: var(--serif); font-weight: normal; font-size: 8.4cqw; line-height: 1.08;
  margin: auto 0 0; letter-spacing: -0.005em; color: var(--gold-text);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .name {
    background: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 48%, var(--gold-3) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.funktion {
  margin: 1.6cqw 0 0; font-size: max(2.5cqw, 10px); font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold-text);
}
.claim { margin: 5cqw 0 1.2cqw; font-family: var(--serif); font-size: 3.15cqw; color: var(--karte-text); }
.claim em { color: var(--gold-text); }

/* Lichtreflex: weich, folgt dem Winkel. Fest gezeichneter Verlauf auf
   einer doppelt so grossen Ebene, bewegt nur per transform, Stärke nur
   per opacity (--go max. 0.5) — kein Neuzeichnen pro Bild (Fable P2-2).
   Zentrum 0.24, Goldstreifen 0.10: auch unter dem stärksten Reflex bleibt
   jede Schrift AA (Test rechnet soft-light nach). */
.glanz {
  position: absolute; inset: -50%; pointer-events: none; z-index: 2;
  opacity: var(--go); mix-blend-mode: soft-light;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.1) 12%, rgba(255, 255, 255, 0.03) 24%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(115deg, rgba(255, 219, 127, 0) 41%, rgba(255, 219, 127, 0.1) 48%,
      rgba(255, 241, 196, 0.08) 52%, rgba(255, 219, 127, 0) 59%);
  transform: translate3d(calc(var(--px) * -24%), calc(var(--py) * 24%), 0);
}
.hinten .glanz { transform: translate3d(calc(var(--px) * 24%), calc(var(--py) * 24%), 0); }
html:not(.js) .glanz { opacity: 0.3; }

/* Rückseite: Punktwolke (Canvas) */
.wolke { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hinten-text {
  position: absolute; left: 6%; right: 6%; bottom: 5.5%;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 3cqw;
  font-size: max(2.6cqw, 10px); color: var(--karte-leise);
}
.legende { max-width: 58%; line-height: 1.25; }
.hinten-web { font-weight: 700; letter-spacing: 0.22em; color: var(--gold-text); white-space: nowrap; }
/* Namenszug in Schnürlischrift (31.10.2026), über der Webadresse */
.hinten-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 1.2cqw; }
.namenszug { display: block; width: 38cqw; height: auto; }

/* ------------------------------------------------------------ Steuerung */
.steuerung { display: flex; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.tipp { text-align: center; color: var(--leise); font-size: 0.86rem; margin: 10px 0 0; }
.meldung { text-align: center; color: var(--text); font-size: 0.9rem; margin: 8px 0 0; }
/* «Handy kippen» nur, wo es ein Handy zum Kippen gibt (Fable P3) */
.nur-finger { display: none; }
@media (pointer: coarse) {
  .nur-finger { display: inline; }
  .nur-maus { display: none; }
}

/* ------------------------------------------------------------ Knöpfe: Glas und Gold */
.knoepfe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 24px; }
html:not(.js) .knoepfe { margin-top: 34px; }
.knopf, .klein-knopf {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--knopf-text); text-decoration: none; font: inherit;
  /* Glasfläche + Goldrand (zwei Hintergründe: Füllung bis zum Rand, Verlauf darunter) */
  border: 1.5px solid transparent;
  /* Glas = Tönung über einem festen Grund (sonst schiene der Goldverlauf
     des Rands durch die ganze Fläche) */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%) padding-box,
    linear-gradient(var(--knopf), var(--knopf)) padding-box,
    linear-gradient(var(--knopf-unter), var(--knopf-unter)) padding-box,
    linear-gradient(135deg, var(--gold-1), rgba(255, 211, 107, 0.45) 50%, var(--gold-3)) border-box;
  /* kein backdrop-filter: auf festem Grund wirkungslos, kostet nur Ebenen (Fable P2-2) */
  box-shadow: 0 10px 26px -18px rgba(var(--schatten-farbe), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.18s cubic-bezier(.2, .8, .3, 1.2), box-shadow 0.18s ease;
  cursor: pointer;
}
.knopf {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 16px;
}
.klein-knopf {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 16px; font-size: 0.92rem;
}
/* Schimmer: ein Goldlicht zieht beim Zeigen bzw. Antippen über den Knopf */
.knopf::after, .klein-knopf::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, rgba(255, 241, 196, 0) 30%, rgba(255, 241, 196, 0.55) 48%,
    rgba(255, 219, 127, 0.35) 54%, rgba(255, 241, 196, 0) 70%);
  transform: translateX(-130%);
  transition: transform 0.75s cubic-bezier(.2, .7, .2, 1);
}
.knopf:hover::after, .knopf:focus-visible::after, .knopf.gedrueckt::after,
.klein-knopf:hover::after, .klein-knopf:focus-visible::after, .klein-knopf.gedrueckt::after {
  transform: translateX(130%);
}
.knopf:hover, .klein-knopf:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(var(--schatten-farbe), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.knopf:active, .klein-knopf:active, .knopf.gedrueckt, .klein-knopf.gedrueckt { transform: translateY(0) scale(0.97); }
.knopf:focus-visible, .klein-knopf:focus-visible, .fuss a:focus-visible {
  outline: 3px solid var(--fokus); outline-offset: 3px;
}
.ic { width: 22px; height: 22px; flex: none; color: var(--knopf-ic); transition: transform 0.25s cubic-bezier(.2, .8, .3, 1.4); }
.klein-knopf .ic { width: 18px; height: 18px; }
.knopf:hover .ic, .knopf.gedrueckt .ic { transform: scale(1.12) rotate(-4deg); }
.knopf-text { display: flex; flex-direction: column; font-weight: 700; font-size: 1rem; min-width: 0; }
.knopf small { font-weight: 400; font-size: 0.8rem; color: var(--knopf-leise); overflow-wrap: anywhere; }
/* Hauptknopf: massives Gold mit dunkelgrüner Schrift */
.knopf.haupt {
  grid-column: 1 / -1; min-height: 72px; font-size: 1.05rem; color: var(--haupt-text);
  background:
    linear-gradient(120deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 75%, var(--gold-2) 100%) padding-box,
    linear-gradient(135deg, #fff8e1, #c99a2e) border-box;
  box-shadow: 0 16px 32px -18px rgba(170, 120, 20, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.knopf.haupt .ic { color: var(--haupt-text); width: 28px; height: 28px; }
.knopf.haupt small { color: var(--haupt-text); }
/* Glanz des Hauptknopfs: ohne Skript endlich (5 Läufe ≈ 30 s), mit Skript
   aus, sobald die Seite 30 s ohne Eingabe «ruht» (WCAG 2.2.2, Batterie) */
.knopf.haupt::after { animation: glanzlauf 6s ease-in-out 1.5s 5; }
.ruht .knopf.haupt::after { animation: none; }
@keyframes glanzlauf { 0%, 70% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
/* schmale Handys: eine Spalte, damit Nummer und Adresse nicht umbrechen */
@media (max-width: 400px) {
  .knoepfe { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .knopf { min-height: 58px; }
}

.unterzeile { text-align: center; color: var(--leise); margin: 26px auto 0; max-width: 34em; font-size: 0.95rem; }
.fuss { text-align: center; font-size: 0.82rem; color: var(--leise); margin-top: 18px; }
.fuss a { color: inherit; }

/* Browser ohne Container-Einheiten (cqw): dieselben Grössen über die
   Fensterbreite (Karte ≈ 91.5 vw) mit Obergrenze in px (Karte max. 520 px).
   Faustregel: n cqw ≈ min(n × 0.915 vw, n × 5.2 px). Steht bewusst NACH
   den Grundregeln, damit es sie überschreibt. Fable P3. */
@supports not (width: 1cqw) {
  .portrait-ebene { left: min(62.8vw, 356.7px); top: min(8.05vw, 45.8px);
                    width: min(21.2vw, 120.6px); height: min(21.2vw, 120.6px); padding: 3px; }
  .flaeche { border-radius: min(3.3vw, 18.7px); }
  .marke { gap: min(2.2vw, 12.5px); }
  .zeichen { width: min(9.15vw, 52px); height: min(9.15vw, 52px); }
  .firma { font-size: min(3.5vw, 20px); }
  .web { font-size: max(min(1.8vw, 10.1px), 10px); margin-top: 2px; }
  .name { font-size: min(7.7vw, 43.7px); }
  .funktion { font-size: max(min(2.3vw, 13px), 10px); margin-top: min(1.5vw, 8.3px); }
  .claim { font-size: min(2.9vw, 16.4px); margin: min(4.6vw, 26px) 0 min(1.1vw, 6.2px); }
  .hinten-text { font-size: max(min(2.4vw, 13.5px), 10px); gap: min(2.75vw, 15.6px); }
}

/* Bewegung reduziert: gedämpft statt aus (das Skript begrenzt Ausschlag
   und Parallax auf 30 %, ohne Atmen und ohne Nachschwingen). Hier: keine
   Übergangs-Animation, Schimmer steht still, Schatten statisch. */
@media (prefers-reduced-motion: reduce) {
  .karte, .ebene, .zeichen, .knopf, .klein-knopf, .ic { transition: none !important; animation: none !important; }
  .knopf::after, .klein-knopf::after { transition: none !important; animation: none !important;
    transform: none !important; opacity: 0.18; }
  .knopf:hover, .klein-knopf:hover { transform: none; }
  .schatten.nah, .schatten.fern, .schein { transform: none !important; }
}