/* Visitenkarte A11 (30.10.2026): nur die Aenderungen gegenueber a9.css + a10.css. Davids Worte zu A10: Kopf nach oben,
   keine One-Page (drei eigene Seiten), mehr Animationen, mehr iOS-Stil. Vorlagen und Lizenzen: quellen-a11.md.
   Federkurven als CSS linear(): aus derselben Feder wie A9 gerechnet (Steifigkeit 420, Daempfung 38; Pille 300/24). */

:root {
    --feder-seite: linear(0, 0.0252, 0.0854, 0.1654, 0.2545, 0.3455, 0.4336, 0.5158, 0.5905, 0.6544, 0.713, 0.7637, 0.807, 0.8435,
        0.8741, 0.8994, 0.9203, 0.9366, 0.9505, 0.9617, 0.9706, 0.9777, 0.9832, 0.9875, 0.9909, 0.9934, 0.9953, 0.9968, 0.9979, 0.9987,
        0.9993, 0.9997, 1);
    --feder-pille: linear(0, 0.039, 0.1331, 0.2532, 0.3881, 0.5173, 0.6399, 0.7439, 0.8333, 0.9045, 0.9571, 0.9963, 1.022, 1.038,
        1.0459, 1.048, 1.0462, 1.0416, 1.0357, 1.0294, 1.023, 1.0173, 1.0122, 1.008, 1.0046, 1.002, 1.0002, 0.9989, 0.9982, 0.9978,
        0.9977, 0.9978, 1);
}

/* ---------- Kopf: kompakt wie eine iOS-Navigationsleiste ----------
   A10: Leiste mit 8 px + Sicherheitsabstand oben UND 8 px unten, Person 16 px darunter, Foto 110 px hoch.
   A11: oben nur der groessere Wert von 6 px und dem Sicherheitsabstand (Statusleiste), unten 6 px, Person 8 px darunter, Foto 80 px. */
.segment-leiste { padding: max(6px, var(--safe-oben)) var(--rand) 6px; view-transition-name: leiste; }
/* Mit kurzem Titel: Leiste und Titelstreifen gleich dicht (sonst scheint Text durch den Streifen, gesehen im Pruefbild) */
.segment-leiste { transition: box-shadow 200ms linear, background-color 200ms linear; }
.segment-leiste.ist-kurz { box-shadow: none; background-color: rgba(5, 6, 7, 0.97); }
.segment-pille { display: block; view-transition-name: pille; }
html[data-seite="karriere"] .segment-pille { transform: translateX(100%); }
html[data-seite="empfehlen"] .segment-pille { transform: translateX(200%); }
.segment a { transition: color 200ms linear, transform 320ms var(--kc-feder); }
.segment a:active { opacity: 1; transform: scale(0.94); transition-duration: 80ms; }

/* Kurzer Titel: erscheint unter der Leiste, sobald der grosse Name darunter verschwunden ist (iOS Large Title -> Inline Title) */
.kurz-titel { position: absolute; left: 0; right: 0; top: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 var(--rand); background: rgba(5, 6, 7, 0.97); box-shadow: 0 1px 0 var(--linie);
    font-size: 15px; line-height: 20px; white-space: nowrap; overflow: hidden;
    opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 180ms linear, transform 420ms var(--feder-seite); }
.kurz-titel [data-t]::after { content: attr(data-t); }
.kurz-titel b { font-weight: 600; }
.kurz-titel > span:last-child { color: var(--text-2); }
.kurz-foto { width: 24px; height: 24px; margin-right: 2px; border-radius: 50%; flex: none;
    background: #141617 url("david23-296.webp") center 14% / cover no-repeat; box-shadow: 0 0 0 1px var(--linie); }
.segment-leiste.ist-kurz .kurz-titel { opacity: 1; transform: none; }

.person { grid-template-columns: 64px 1fr; margin-top: var(--s1); view-transition-name: person; transform-origin: 0 0; }
.foto { width: 64px; height: 80px; border-radius: 18px; }
.name { font-size: 32px; line-height: 38px; letter-spacing: -0.03em; }   /* iOS Large Title (34/41), eine Stufe kleiner fuer 360 px */
.person .kc-schwung { width: 120px; height: 10px; margin: 0 0 4px; }
.rolle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s1); }
.logo { height: 22px; margin-top: 0; padding: 0 6px; }
.logo img { height: 13px; }

/* Seitentitel nur fuer Vorleser (der Segmentschalter zeigt die Seite) */
.seiten-titel { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inhalt { position: relative; touch-action: pan-y; }
.inhalt.ist-gezogen { transition: none; }
.inhalt.zurueck { transition: transform 450ms var(--feder-seite), opacity 300ms linear; }

/* ---------- Seitenwechsel zwischen den drei Dateien (Cross-Document View Transitions) ----------
   Quelle: MDN @view-transition (navigation: auto, nur gleiche Herkunft); Safari ab 18.2 (WebKit-Blog), Chrome ab 126,
   Firefox noch nicht: dort wechselt die Seite ohne Animation. Kopf, Pille und Dock bleiben stehen, die Pille gleitet mit Feder,
   der Inhalt schiebt sich wie in iOS (neue Seite von rechts, alte weicht 30 % nach links und wird dunkler; zurueck umgekehrt). */
@media not (prefers-reduced-motion: reduce) {
    @view-transition { navigation: auto; }
}
.kc-dock { view-transition-name: dock; }
.kc-dock-unten { view-transition-name: dock-unten; }
.rand-unten { view-transition-name: rand-unten; }
/* Beschriftungen eigene Namen: sie liegen im Bild nach der Pille, also ueber ihr (sonst deckt die gleitende Pille das Wort zu) */
.segment a:nth-of-type(1) { view-transition-name: seg-1; }
.segment a:nth-of-type(2) { view-transition-name: seg-2; }
.segment a:nth-of-type(3) { view-transition-name: seg-3; }
::view-transition-group(pille) { animation-duration: 540ms; animation-timing-function: var(--feder-pille); }
::view-transition-group(seg-1), ::view-transition-group(seg-2), ::view-transition-group(seg-3) { animation-duration: 300ms; }
/* Ankunft per Animation: sichtbare Bloecke ohne eigenen Auftritt, Schwung-Linie steht schon (a11.js, Kopfskript vt-rein) */
.vt-rein .a9-auf.ist-da { transition: none !important; }
.vt-rein .kc-schwung path { stroke-dashoffset: 0 !important; transition: none !important; }
::view-transition-group(person), ::view-transition-group(leiste) { animation-duration: 450ms; animation-timing-function: var(--feder-seite); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 450ms; animation-timing-function: var(--feder-seite); }
html[data-richtung]::view-transition-old(root), html[data-richtung]::view-transition-new(root) { mix-blend-mode: normal; }
html[data-richtung="vor"]::view-transition-old(root) { animation-name: a11-weicht-links; }
html[data-richtung="vor"]::view-transition-new(root) { animation-name: a11-kommt-rechts; box-shadow: -16px 0 32px rgba(0, 0, 0, 0.55); }
html[data-richtung="zurueck"]::view-transition-old(root) { animation-name: a11-geht-rechts; z-index: 1; box-shadow: -16px 0 32px rgba(0, 0, 0, 0.55); }
html[data-richtung="zurueck"]::view-transition-new(root) { animation-name: a11-kommt-links; }
@keyframes a11-kommt-rechts { from { transform: translateX(100%); } }
@keyframes a11-weicht-links { to { transform: translateX(-30%); filter: brightness(0.55); } }
@keyframes a11-geht-rechts { to { transform: translateX(100%); } }
@keyframes a11-kommt-links { from { transform: translateX(-30%); filter: brightness(0.55); } }

/* ---------- Mehr Bewegung im Inhalt ---------- */
/* Listenzeilen kommen einzeln nach (Staffel 55 ms), wenn ihr Block ins Bild kommt (a9-auf -> ist-da) */
.liste > :nth-child(1), .fakten > :nth-child(1) { --i: 0; }
.liste > :nth-child(2), .fakten > :nth-child(2) { --i: 1; }
.liste > :nth-child(3) { --i: 2; }
.liste > :nth-child(4) { --i: 3; }
.liste > :nth-child(5) { --i: 4; }
.js .a9-auf .liste > * { opacity: 0; transform: translateY(12px); }
.js .a9-auf.ist-da .liste > * { opacity: 1; transform: none;
    transition: opacity 360ms ease-out, transform 560ms var(--feder-seite), background-color 150ms var(--aus);
    transition-delay: calc(120ms + var(--i, 0) * 55ms), calc(120ms + var(--i, 0) * 55ms), 0ms; }
.js .a9-auf.ist-da .liste > a.zeile:active { transition-delay: 0ms; transition-duration: 60ms; }

/* Haken zeichnen sich selbst (Technik wie die Schwung-Linie, Kitchen 7: pathLength 1, Strich von 1 auf 0) */
.js .liste.haken .i, .js .fakten .i { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .a9-auf.ist-da .liste.haken .i, .js .a9-auf.ist-da .fakten .i { stroke-dashoffset: 0;
    transition: stroke-dashoffset 480ms cubic-bezier(0.65, 0, 0.35, 1) calc(320ms + var(--i, 0) * 110ms); }

/* Druck-Zustaende wie iOS: Zeile hellt auf, Symbol drueckt sich ein, Pfeil ruckt nach rechts */
.zeile .symbol, .zeile .pfeil { transition: transform 360ms var(--kc-feder); }
a.zeile:active .symbol { transform: scale(0.9); transition-duration: 80ms; }
a.zeile:active .pfeil { transform: translateX(3px); transition-duration: 80ms; }
.beleg a { transition: opacity 150ms linear; }
.beleg a:active { opacity: 0.6; }

/* ---------- Quer (844 x 390): Person links, Inhalt rechts (wie A9) ---------- */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 640px) {
    .rahmen { grid-template-areas: "person leiste" "person inhalt" "person fuss"; }
    .inhalt { grid-area: inhalt; }
    .kurz-titel { display: none; }
    .person { grid-template-columns: 88px 1fr; }
    .foto { width: 88px; height: 110px; border-radius: 22px; }
    .seite > .seiten-titel + .block { margin-top: var(--s2); }
}

@media (prefers-reduced-motion: reduce) {
    .js .a9-auf .liste > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .js .liste.haken .i, .js .fakten .i { stroke-dasharray: none; stroke-dashoffset: 0; transition: none !important; }
    .segment-leiste, .kurz-titel, .segment a, .zeile .symbol, .zeile .pfeil, .inhalt.zurueck { transition: none !important; }
}