/* Visitenkarte A12 (30.10.2026): nur die Aenderungen gegenueber a9.css + a10.css + a11.css. Davids Worte zu A11:
   (1) der allererste Entwurf ("Nachtsignal") hat ihm am besten gefallen -> Kopf mittig wie dort, minimalistisch;
   (2) echte Logos fuer WhatsApp, Instagram, Facebook (Simple Icons, CC0; Marken-Regeln von Meta) in Kacheln und Dock;
   (3) Empfehlen-Seite war "nicht gut formatiert" -> ruhiger. Vorlagen und Lizenzen: quellen-a12.md.
   Bewegung reduzieren: ganz unten, alles aus. */

@property --a12-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- Kopf wie Nachtsignal: Foto mittig, gruener Schein, Finova-Zeichen + Geschaeftsstelle, grosser Name ---------- */
.person { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center;
    margin-top: 14px; transform-origin: 50% 0; }
/* Schein hinter dem Foto (Nachtsignal: radialer Verlauf in Akzentgruen) */
.person::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -64px; width: min(440px, calc(100% + 2 * var(--rand))); height: 280px;
    transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(closest-side, rgba(62, 224, 143, 0.17), rgba(62, 224, 143, 0.05) 58%, rgba(62, 224, 143, 0)); }
.foto { position: relative; width: 96px; height: 96px; border-radius: 28px; overflow: visible; background: none; box-shadow: none; }
.foto picture { display: block; width: 100%; height: 100%; }
.foto img { border-radius: 28px; object-position: 50% 16%; background: var(--flaeche);
    box-shadow: 0 0 0 1px rgba(62, 224, 143, 0.28), 0 14px 32px rgba(0, 0, 0, 0.45); }
/* Rahmenlicht (Vorlage: Magic UI border-beam, MIT): ein Lichtpunkt laeuft zweimal um das Foto, dann ist Ruhe */
.foto::after { content: ""; position: absolute; inset: -4px; border-radius: 32px; padding: 2px; pointer-events: none; opacity: 0;
    background: conic-gradient(from var(--a12-winkel), rgba(62, 224, 143, 0) 0deg 240deg, rgba(62, 224, 143, 0.95) 330deg, rgba(62, 224, 143, 0) 360deg);
    -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 exclude, linear-gradient(#000 0 0); }
html.js:not([data-richtung]) .foto::after { animation: a12-strahl 2600ms cubic-bezier(0.45, 0, 0.25, 1) 700ms 2 both; }
@keyframes a12-strahl { 0% { --a12-winkel: 0deg; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { --a12-winkel: 360deg; opacity: 0; } }

.marke { display: inline-flex; align-items: center; gap: var(--s1); margin-top: 14px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.marke .logo { height: 24px; margin: 0; padding: 0 8px; border-radius: 7px; }
.marke .logo img { height: 14px; }
.name { margin-top: 6px; font-size: clamp(34px, 10vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.035em; }
.rolle { display: block; margin-top: 2px; font-size: 17px; line-height: 22px; font-weight: 600; color: var(--text); }

/* Auftritt beim ersten Oeffnen (wie Nachtsignal: nacheinander aus der Unschaerfe). Beim Seitenwechsel steht der Kopf schon. */
html.js:not([data-richtung]) .person > * { animation: a12-auf 760ms var(--feder-seite) both; }
.person > :nth-child(2) { animation-delay: 70ms; }
.person > :nth-child(3) { animation-delay: 140ms; }
.person > :nth-child(4) { animation-delay: 210ms; }
@keyframes a12-auf { from { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(8px); } }
.vt-rein .person > *, .vt-rein .foto::after { animation: none !important; }

/* Erster Satz jeder Seite mittig unter dem Kopf (Nachtsignal: ruhiger Satz unter der Rolle) */
.einstieg { margin-top: 20px; text-align: center; }
.einstieg .nutzen { margin: 0 auto; max-width: 30ch; font-size: 19px; line-height: 25px; }
.einstieg .text { margin: 12px auto 0; max-width: 34ch; font-size: 16px; line-height: 23px; }
.einstieg .fakten { justify-content: center; column-gap: 12px; font-size: 14px; }   /* beide Haken in einer Zeile (390 px) */
#empfehlen .liste.haken li { text-wrap: balance; }
.einstieg + .block { margin-top: 20px; }

/* ---------- Logos als App-Symbole (Form wie am iPhone; Marken-Logos unveraendert, weiss auf Markenfarbe) ---------- */
.app { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; color: #fff;
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
.app svg.m { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.app svg.i { width: 22px; height: 22px; color: #fff; stroke-width: 2; }
.app-tel { background: linear-gradient(180deg, #5cf07c, #1fbe46); }
.app-mail { background: linear-gradient(180deg, #3ea4ff, #0b6cf2); }
.app-wa { background: #25D366; }
.app-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.app-fb { background: none; box-shadow: none; }
.app-fb svg.m { width: 100%; height: 100%; }   /* Facebook: das runde Logo selbst, blau mit weissem f (Meta: "primary expression") */
.app-web { background: var(--accent); }
.app-web img { display: block; width: 32px; height: auto; }

/* Kontakt-Kacheln 2 x 3 (Nachtsignal: 2 x 2 mit Unterzeile) */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: none; border-radius: 0; overflow: visible; }
.kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; min-height: 112px; padding: 14px;
    border-radius: var(--radius); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
.kachel b { display: block; font-size: 16px; line-height: 21px; font-weight: 600; }
.kachel small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--text-2); overflow-wrap: anywhere; }
.kacheln > :nth-child(6) { --i: 5; }
.kachel .app { transition: transform 360ms var(--kc-feder); }
.js .a9-auf.ist-da .kacheln > .kachel:active { transform: scale(0.97); background-color: var(--flaeche-druck); transition-delay: 0ms; transition-duration: 80ms; }
.kachel:active .app { transform: scale(0.92); transition-duration: 80ms; }

/* Dock: Logos statt Strichsymbole; Beschriftung als CSS-Inhalt (data-t), Vorleser lesen das aria-label */
.dock a { gap: 5px; padding-top: 6px; }
.dock a::after { content: attr(data-t); }
.dock .app { width: 28px; height: 28px; border-radius: 8px; transition: transform 420ms var(--kc-feder); }
.dock .app svg.m { width: 17px; height: 17px; }
.dock .app svg.i { width: 16px; height: 16px; stroke-width: 2.2; }
.kc-dock a:active .app { transform: translateY(-3px) scale(1.08); transition-duration: 90ms; }

/* WhatsApp-Logo im Ticket und in den Knoepfen */
.ticket-abriss .app { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); }
.ticket-abriss .app svg.m { width: 19px; height: 19px; }
.knopf .app { width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); }
.knopf .app svg.m { width: 16px; height: 16px; }

/* ---------- Empfehlen ruhiger ---------- */
/* Gutschein ohne Schlitz (der schwarze Balken oben wirkte wie ein Fehler): kippt weich aus der Tiefe nach vorne, dann Stempel */
.gutschein-halter { perspective: 900px; }
.gutschein { min-height: 124px; background-color: #151a19;
    background-image: radial-gradient(120% 160% at 0% 0%, rgba(62, 224, 143, 0.20), rgba(62, 224, 143, 0) 55%), linear-gradient(140deg, #222927, #141817 60%, #101312);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.35); }
.gutschein .kc-stempel { --kc-stempel-verz: 650ms; }
.js .a9-auf .gutschein-halter { opacity: 0; transform: translateY(18px) rotateX(18deg) scale(0.96); transform-origin: 50% 100%; }
.js .a9-auf.ist-da .gutschein-halter { opacity: 1; transform: none; transition: transform 900ms var(--feder-pille) 120ms, opacity 400ms ease-out 120ms; }
.vt-rein .a9-auf.ist-da .gutschein-halter { transition: none !important; }

/* Zwei Wege: kurze Titel, Betrag als eigene gruene Zeile (A11 brach "300 €, wenn ..." mitten im Satz) */
#empfehlen .wege .zeile-text > span em { display: block; margin: 0 0 2px; font-size: 13px; line-height: 18px; font-weight: 600; }
.wege .zeile-text > span { text-wrap: balance; }
.wege .zeile { min-height: 80px; }

/* ---------- Kleine Handys (iPhone SE 375 x 667): Kopf etwas dichter, damit Ticket UND "Kontakt speichern" im ersten Bild stehen ---------- */
@media (max-height: 700px) and (orientation: portrait) {
    .person { margin-top: 10px; }
    .foto, .foto img { width: 76px; height: 76px; border-radius: 22px; }
    .foto::after { border-radius: 26px; }
    .marke { margin-top: 10px; }
    .name { margin-top: 4px; font-size: 34px; }
    .einstieg { margin-top: 14px; }
    .einstieg + .block { margin-top: 14px; }
    .einstieg .fakten { column-gap: 10px; font-size: 13px; margin-top: 8px; }
}

/* ---------- Quer (844 x 390): Kopf links (wie A11), Einstieg linksbuendig neben dem Kopf ---------- */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 640px) {
    .foto { width: 88px; height: 88px; border-radius: 26px; }
    .foto img { border-radius: 26px; }
    .person { margin-top: var(--s2); }
    .person::before { width: 300px; }
    .einstieg { text-align: left; }
    .einstieg .nutzen, .einstieg .text { margin-left: 0; margin-right: 0; max-width: none; }
    .einstieg .fakten { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .person > *, .foto::after { animation: none !important; }
    .foto::after { display: none; }
    .js .a9-auf .gutschein-halter { opacity: 1 !important; transform: none !important; transition: none !important; }
    .kachel, .kachel .app, .dock .app { transition: none !important; }
}