/* ═══════════════════════════════════════════════════════════════
   johannaweiermann — Karten-Website
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Farben */
  --orange:       #ff5e30;  /* Seitenhintergrund */
  --orange-deep:  #e8512a;  /* Kartenfläche */
  --paper:        #f3ece4;
  --ink:          #253e29;
  --blue-deep:    #2e596c;
  --blue-mid:     #007dda;
  --blue-light:   #c3dbef;
  --lime:         #dbff85;
  --sand:         #eadfd2;
  --bordeaux:     #5f273a;

  /* Maße */
  --pad:       clamp(1rem, 2.2vw, 2rem);
  --gap:       clamp(1rem, 1.6vw, 1.5rem);
  --radius:    clamp(1.25rem, 1.8vw, 1.5rem);
  --body-pad:  clamp(20px, 2.4vw, 32px);

  /* Wortmarke füllt die Zeile aus – gedeckelt auf die Schriftgröße des
     Vorbilds (~134px). 8.29 ist die Breite von „johannaweiermann“ in
     Newsreader, gemessen in em bei der eingestellten Laufweite. */
  --wordmark: min(calc((100vw - var(--pad) * 2) / 8.29), 8.4rem, 18vh);

  /* Luft zwischen Wortmarke und Kartenoberkante */
  --gap-head: clamp(1.5rem, 4vh, 3rem);

  /* Fußzeile: Höhe und die Luft darüber */
  --foot-h:   3.6rem;
  --gap-foot: clamp(.7rem, 1.6vh, 1.1rem);

  /* Höhe, die den Karten maximal bleibt. Was Wortmarke und Fußzeile
     brauchen, ist hier schon abgezogen. */
  --avail: calc(100svh - (var(--pad) * 2) - (var(--wordmark) * 1.22)
                - var(--gap-head) - var(--foot-h) - var(--gap-foot));

  /* Karten immer im Verhältnis 5:7, egal wie viel Platz das Gerät hätte */
  --card-w-max: min(88vw, 32rem);
  --card-h: min(var(--avail), calc(var(--card-w-max) * 1.4));
  --card-w: calc(var(--card-h) / 1.4);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

@supports not (height: 100svh) {
  :root { --avail: calc(100vh - (var(--pad) * 2) - (var(--wordmark) * 1.22)
                        - var(--gap-head) - var(--foot-h) - var(--gap-foot)); }
}

/* ── Reset ─────────────────────────────────────────────────── */

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--orange);
  color: var(--paper);
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1rem, .35vw + .92rem, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Seitengerüst ──────────────────────────────────────────── */

.page {
  display: flex;
  flex-direction: column;
  height: 100svh;
  padding: var(--pad) 0;
}

@supports not (height: 100svh) { .page { height: 100vh; } }

.masthead { padding-inline: var(--pad); }

.wordmark {
  display: block;
  color: var(--paper);
  font-family: "Newsreader", Georgia, serif;
  font-optical-sizing: auto;
  font-size: var(--wordmark);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
}

/* ── Karten-Schiene ────────────────────────────────────────── */

.rail {
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
  height: var(--card-h);
  margin-top: auto;          /* Karten sitzen am unteren Rand */
  padding-inline: var(--pad);
  overflow-x: auto;
  overflow-y: hidden;
  /* „mandatory" heißt: Loslassen landet immer auf einer Karte, nie
     dazwischen. Ein kräftiger Wisch darf dabei mehrere Karten weit
     fliegen und rastet erst am Ende ein – deshalb mandatory und nicht
     zusätzlich scroll-snap-stop: always, das würde jeden Wisch auf
     genau eine Karte begrenzen.

     Zusammen mit scroll-padding unten sitzt die eingerastete Karte
     bündig hinter dem Seitenrand, nicht am nackten Bildschirmrand. */
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--pad);
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.rail::-webkit-scrollbar { display: none; }

/* Die Schiene lässt sich mit der Maus ziehen – das soll man auch sehen.
   Während gezogen wird, ist Markieren ausgeschaltet: sonst zöge man beim
   Schieben eine blaue Textmarkierung quer über die Karten. */
.rail { cursor: grab; }
.rail.is-dragging { cursor: grabbing; user-select: none; }
.rail [data-scroll] { cursor: auto; }   /* Rechtstext: lesen und markieren */
.rail a, .rail button { cursor: pointer; }

.slot {
  position: relative;
  flex: none;
  width: var(--card-w);
  height: 100%;
  scroll-snap-align: start;
  /* Schrift skaliert mit der Kartenbreite, nicht mit dem Viewport. */
  container-type: inline-size;
}

/* Fluchtpunkt nur dort, wo tatsächlich gedreht wird. Ein 3D-Kontext
   hebelt in Chrome das Runden der Ecken per overflow: hidden aus –
   die Fotokarte hatte dadurch eckige Ecken. */
.slot:has([data-flip]) { perspective: 2200px; }

/* ── Wende-Mechanik ────────────────────────────────────────── */

/* Werte wie im Vorbild: 400 ms, CSS-„ease“. Die Drehung selbst setzt
   script.js als inline-transform – sie läuft immer vorwärts weiter. */
.flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.25, .1, .25, 1);
}

/* Beide Seiten liegen 1px vor der Drehachse – jede auf ihrer eigenen Seite.
   Lägen sie exakt aufeinander, streiten sie sich beim Drehen um dieselbe
   Ebene, und die Vorderseite schimmert durch die Rückseite.

   backface-visibility steht zusätzlich auf der Karte und ihrem Inhalt:
   Chrome verliert die Kaschierung sonst an Kindern, die einen eigenen
   Stapelkontext aufmachen – und .card-body tut genau das. */
.face {
  position: absolute;
  inset: 0;
  transform: translateZ(1px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.face--back { transform: rotateY(180deg) translateZ(1px); }

.face .card-body {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Während der Drehung bleiben beide Seiten stehen – welche man sieht,
   entscheidet backface-visibility, und zwar in jedem Winkel richtig.
   Erst wenn die Drehung fertig ist, legt script.js die abgewandte Seite
   still: nicht anklickbar, nicht in der Tab-Reihenfolge.
   Grundzustand ohne JavaScript: Vorderseite sichtbar, Rückseite weg. */
.face--back { visibility: hidden; }
.flip .face.is-showing,
.flip.is-turning .face { visibility: visible; }
.flip:not(.is-turning) .face.is-covered { visibility: hidden; }

/* ── Karte ─────────────────────────────────────────────────── */

/* Kein Schlagschatten – wie im Vorbild. Auf dem satten Orange wird jeder
   dunkle Schatten grau, und in den schmalen Lücken überlagern sich die
   Schatten benachbarter Karten zu einem Schmier. */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}

.card--orange   { background: var(--orange-deep); color: var(--paper); }
.card--paper    { background: var(--paper);       color: var(--ink); }
.card--photo    { background: var(--sand); }
.card--midblue  { background: var(--blue-mid);    color: var(--paper); }
.card--darkblue { background: var(--blue-deep);   color: var(--paper); }
.card--bordeaux { background: var(--bordeaux);    color: var(--paper); }

/* Trägt selbst keine Fläche: die Reiterkarte ist durchsichtig, damit
   zwischen den Laschen das Orange der Seite durchblitzt. */
.card--bare { background: none; box-shadow: none; }

.card--grid {
  background: var(--blue-light);
  color: var(--ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .55) 1px, transparent 1px);
  background-size: 2.25rem 2.25rem;
}

.card-body {
  position: relative;   /* sonst deckt das Foto der Karte 2 die Bedienung zu */
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--body-pad);
  padding: var(--body-pad);
  min-height: 0;
}

/* ── Typografie ────────────────────────────────────────────── */

.lede {
  font-size: clamp(1.2rem, 7.4cqw, 1.75rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.012em;
  text-wrap: pretty;
}

.body {
  font-size: clamp(1rem, 4.8cqw, 1.15rem);
  text-wrap: pretty;
}

.body em { font-style: normal; font-weight: 700; }

.eyebrow {
  font-size: clamp(.9rem, 4.2cqw, 1rem);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(37, 62, 41, .62);
  margin-bottom: .9em;
  text-wrap: pretty;
}

.eyebrow--tight { margin-bottom: .75em; }

.display {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.6rem, 11.6cqw, 3rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.mark {
  background: var(--lime);
  color: var(--ink);   /* auch auf dunklen Karten lesbar */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 .12em .04em;
}

/* ── Fußzeile der Karte ────────────────────────────────────── */

.foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.foot--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.links { display: flex; flex-wrap: wrap; gap: clamp(.6rem, 1.4vw, 1rem); }

.link {
  color: inherit;
  font-size: clamp(.9rem, 4.2cqw, 1.0625rem);
  font-weight: 600;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}

.link:hover { opacity: .5; }


/* ── Runde Schaltfläche ────────────────────────────────────── */

.circle {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(2.6rem, 11cqw, 3.25rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  transition: background-color .2s;
}

.circle svg {
  width: clamp(19px, 4.5cqw, 22px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.circle--onOrange { background: rgba(243, 236, 228, .1); }
.circle--onOrange:hover { background: rgba(243, 236, 228, .2); }
.circle--onPaper  { background: rgba(46, 89, 108, .2); }
.circle--onPaper:hover  { background: rgba(46, 89, 108, .3); }

/* Massiver Knopf auf dem Foto – wie im Vorbild */
.circle--solid { background: var(--blue-deep); color: #fff; }
.circle--solid:hover { background: #24485a; }

.circle svg.icon-solid { fill: currentColor; stroke: none; }

/* ── Fotokarte (Karte 2) ───────────────────────────────────────
   Foto randlos über die ganze Karte, Bedienung liegt darüber.

   Diese Karte dreht sich nicht: Wie im Vorbild liegen beide Bilder
   übereinander, das obere blendet weg (100 ms, outSine) und gibt das
   darunter frei. Das spart die Drehung – und damit alles, was daran
   schiefgehen kann. */

.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Eigene Rundung, damit die Ecken auch dann stimmen, wenn das
     Zuschneiden über overflow: hidden der Karte einmal nicht greift. */
  border-radius: inherit;
}

.photo--top { transition: opacity .1s cubic-bezier(.39, .575, .565, 1); }
.photo--top.is-faded { opacity: 0; }

/* Aus ⏭ wird ⏮ – wie im Vorbild 300 ms, outSine. */
.circle .icon-solid { transition: transform .3s cubic-bezier(.39, .575, .565, 1); }
.circle.is-rewound .icon-solid { transform: rotateY(-180deg); }

.card-body--photo { align-items: flex-start; }

.year {
  padding: .3rem 1rem;
  border-radius: 1000px;
  /* Dunkel, weil beide Fotos oben links hell sind */
  background: var(--blue-deep);
  color: var(--paper);
  font-size: clamp(.85rem, 4cqw, 1rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
}

/* ── Button ────────────────────────────────────────────────── */

.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7em 1.3em;
  border: 1px solid transparent;
  border-radius: 4rem;
  background: var(--orange);
  color: #fff;
  font-size: clamp(.95rem, 4.4cqw, 1.125rem);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: box-shadow .3s var(--ease), background-color .2s;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
}

.btn:hover { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .15); }

.btn--ghost {
  background: transparent;
  border-color: rgba(37, 62, 41, .3);
  color: var(--ink);
}

.btn--ghost:hover { box-shadow: inset 0 0 0 100px rgba(37, 62, 41, .08); }

/* Weiße Pille für die Telefonnummer. Dieselbe Form wie ein Button, damit
   die drei in einer Reihe gleich hoch stehen – aber ohne Hover und ohne
   Zeigefinger, denn die Nummer ist kein Link, sondern eine Angabe zum
   Mitlesen und Abtippen. */
.btn--white {
  background: #fff;
  border-color: transparent;
  color: var(--ink);
  cursor: default;
}

.btn--white:hover { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); }

/* ── Etikett ───────────────────────────────────────────────────
   Dieselbe Pille wie der Jahres-Chip auf dem Foto, nur mit einem
   Wort statt einer Jahreszahl drin. */

.pill {
  align-self: flex-start;
  padding: .3rem 1rem;
  border-radius: 1000px;
  background: var(--blue-deep);
  color: var(--paper);
  font-size: clamp(.78rem, 3.6cqw, .85rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
}

/* Stichwörter unten links auf der Leistungskarte – kein Link,
   sondern die Formate, in denen es die Leistung gibt. */
.meta-list {
  display: flex;
  flex-direction: column;
  gap: .15em;
  color: var(--orange);
  font-size: clamp(.85rem, 4cqw, .95rem);
  font-weight: 700;
  line-height: 1.25;
}

/* Harte Angaben unten links auf den Reiterflächen. Auch kein Link:
   es gibt dort nichts anzuklicken, nur etwas zu wissen. */
.facts {
  font-size: clamp(.8rem, 3.8cqw, .88rem);
  font-weight: 600;
  line-height: 1.35;
  opacity: .68;
  text-wrap: pretty;
}

.eyebrow--onDark { color: rgba(243, 236, 228, .62); }

/* ── Reiter-Karte ──────────────────────────────────────────────
   Die Karte selbst ist durchsichtig. Farbig ist nur die Fläche links;
   rechts steht eine 32px-Spalte mit den Laschen. Weil deren rechte
   Ecken gerundet sind, blitzt in den Kerben dazwischen das Orange der
   Seite durch – daraus entsteht der Aktenmappen-Eindruck.

   Bewusst ohne Schlagschatten: im Vorbild wirft jede Lasche einen nach
   rechts unten, und der landet in der Kerbe der Lasche darunter. Das
   gibt dort einen dunkleren Keil, der wie ein Fehler aussieht. */

.tabs { display: flex; height: 100%; }

.tabs__panes {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  overflow: hidden;
}

.tabs__pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease);
}

.tabs__pane.is-active { opacity: 1; visibility: visible; }

.tabs__rail { display: flex; flex-direction: column; width: 32px; flex: none; }

.tab {
  flex: 1;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  writing-mode: vertical-rl;
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ── Bänder-Karte ──────────────────────────────────────────────
   Oben die Ansage auf einfarbigem Grund, in der Mitte laufen die
   Stichwörter bis an beide Kartenkanten, unten rechts ein Link.
   Die Ränder sind weich ausgeblendet, damit nichts abgeschnitten
   wirkt. Jede Zeile steht doppelt im HTML: die Bewegung schiebt um
   die halbe Zeilenbreite, dann sitzt die Kopie nahtlos an der Stelle
   des Originals. Kurze Zeilen brauchen deshalb mehr Wiederholungen –
   eine Zeilenhälfte muss mindestens so breit sein wie die Karte. */

.strip__head { flex: 1; justify-content: flex-start; gap: 0; padding-bottom: 0; }

.strip { position: relative; flex: 0 0 28%; }

.strip__foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--body-pad);
}

.marquee {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marquee__row {
  display: flex;
  gap: .5rem;
  width: max-content;
  animation: slide 26s linear infinite;
}

/* Die Dauer gehört zur Zeilenlänge: doppelt so lange Zeile bei gleicher
   Dauer läuft doppelt so schnell. Diese Werte passen zu den Zeilen in
   index.html – wird dort etwas ergänzt, müssen sie mitwachsen. */
.marquee__row--rev  { animation-direction: reverse; animation-duration: 66s; }
.marquee__row--slow { animation-duration: 80s; }

@keyframes slide { to { transform: translateX(-50%); } }

.tagpill {
  flex: none;
  padding: .44em .95em;
  border: 1px solid rgba(243, 236, 228, .3);
  border-radius: 4rem;
  font-size: clamp(.76rem, 3.7cqw, .84rem);
  font-weight: 600;
  white-space: nowrap;
}

.tagpill--fill { background: var(--paper); color: var(--ink); border-color: transparent; }
.tagpill--lime { background: var(--lime);  color: var(--ink); border-color: transparent; }

/* ── Abschlusskachel (Karte 7) ─────────────────────────────────
   Impressum und Datenschutz. Liegt niedrig am Ende der Schiene, hat
   keinen eigenen Grund – es steht das Orange der Seite – und nur eine
   Haarlinie. Beim Antippen wächst sie nach oben auf volle Höhe.

   Nach oben und nicht zur Seite: Breite und Unterkante bleiben dabei
   stehen. Eine breiter werdende Karte würde alles rechts daneben
   verschieben, und die Schiene ruckt. */

/* Der Slot ist sonst ein gewöhnlicher Block – dort verpufft margin: auto.
   Nur für diese eine Karte wird er zur Spalte, damit sie unten andockt. */
.slot:has(.endcard) { display: flex; flex-direction: column; }

.endcard {
  margin-top: auto;      /* sitzt unten im Slot – von dort wächst sie */
  height: 28%;
  min-height: 8.5rem;    /* auf niedrigen Karten sonst zu eng für zwei Zeilen */

  background: none;
  box-shadow: none;
  border: 1px solid rgba(243, 236, 228, .32);
  color: var(--paper);

  transition:
    height           .5s var(--ease),
    background-color .3s var(--ease),
    border-color     .3s var(--ease),
    color            .3s var(--ease),
    box-shadow       .5s var(--ease);
}

.endcard.is-open {
  height: 100%;
  background: var(--paper);
  border-color: transparent;
  color: var(--ink);
  box-shadow: 0 18px 50px -20px rgba(73, 25, 12, .45);
}

.endcard .card-body { justify-content: flex-end; gap: .9rem; }

/* Zugeklappt liegt der Text zwar da, ist aber weder anklickbar noch
   per Tabulator erreichbar. visibility nimmt ihn zusätzlich aus dem
   Vorlesemodus – opacity allein täte das nicht. */
.endcard__doc {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility 0s .3s;
}

/* Erst wachsen lassen, dann den Text bringen. Ohne den Versatz von
   180 ms poppt er auf, während die Karte noch unterwegs ist. */
.endcard.is-open .endcard__doc {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease) .18s, visibility 0s;
}

.doc__title {
  font-family: "Newsreader", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.4rem, 8cqw, 2rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.doc {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* am Ende nicht auf die Seite überspringen */
  padding-right: .7rem;
  font-size: clamp(.85rem, 3.9cqw, .95rem);
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: rgba(37, 62, 41, .28) transparent;
  /* Weicher Auslauf, solange noch etwas kommt – siehe .is-end. */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 30px), transparent);
}

/* Unten angekommen: Auslauf weg, sonst bliebe die letzte Zeile
   dauerhaft angeknabbert. Die Klasse setzt script.js. */
.doc.is-end { -webkit-mask-image: none; mask-image: none; }

.doc::-webkit-scrollbar { width: 5px; }
.doc::-webkit-scrollbar-thumb { background: rgba(37, 62, 41, .28); border-radius: 3px; }

.doc h3 {
  margin: 1.4em 0 .35em;
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(37, 62, 41, .55);
}

.doc h3:first-child { margin-top: 0; }
.doc p { margin-bottom: .75em; }
.doc a { color: inherit; }

/* Noch nicht ausgefüllt – fällt beim Korrekturlesen sofort auf. */
.doc .todo { opacity: .5; }

.endcard__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

/* Keine Knöpfe, keine Pillen: zwei unterstrichene Wörter, sonst nichts. */
.legallinks { display: flex; flex-wrap: wrap; gap: clamp(.7rem, 2.6cqw, 1.1rem); }

.legallinks a {
  color: inherit;
  font-size: clamp(.9rem, 4.2cqw, 1.0625rem);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: opacity .2s;
}

.legallinks a:hover { opacity: .55; }

/* Offen steht das gerade Gelesene schon als Überschrift oben. Unten
   bleibt nur der Weg zum anderen Dokument. */
.endcard.is-open .legallinks a.is-current { display: none; }

.cr {
  margin-top: .35rem;
  font-size: clamp(.78rem, 3.5cqw, .875rem);
  line-height: 1.5;
  opacity: .55;
}

.endcard.is-open .cr { display: none; }

/* Zugeklappt kein Knopf – nur die zwei Wörter. */
.endcard__close {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), visibility 0s .2s;
}

.endcard.is-open .endcard__close {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s var(--ease) .2s, visibility 0s;
}

/* ── Fußzeile der Seite ────────────────────────────────────────
   Eine Haarlinie unter der Schiene, links die Kontaktdaten, rechts
   der Knopf. Die Linie ist dieselbe wie an der zugeklappten
   Abschlusskachel – die Seite bekommt also keine neue Form dazu,
   nur eine neue Zeile.

   Die Seite ist genau einen Bildschirm hoch und scrollt nicht. Die
   Fußzeile steht damit auf jedem Gerät im Bild, ohne dass es dafür
   „sticky“ oder eine fixe Position bräuchte. Was sie an Höhe braucht,
   ist oben in --avail schon von den Karten abgezogen.

   Sie schrumpft nie: Wird es eng, gibt die Schiene nach, nicht sie. */

.footbar {
  flex: none;
  margin-top: var(--gap-foot);
  padding-inline: var(--pad);
}

.footbar__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--foot-h);
  padding-top: .6rem;
  border-top: 1px solid rgba(243, 236, 228, .32);
}

/* ── Was sich ausgeht ──────────────────────────────────────────
   Der Knopf steht immer da – auf jedem Gerät, in jeder Breite. Die
   Kontaktdaten kommen dazu, sobald Platz ist, und fallen in dieser
   Reihenfolge weg: erst die Nummer, dann die Adresse.

   · unter 30em (≈480px): nur der Knopf
   · ab 30em:  Knopf und Adresse
   · ab 42em (≈672px): Knopf, Adresse und Nummer

   Absichtlich feste Breiten und keine gemessenen Textlängen: Adresse
   und Nummer sind bekannt und ändern sich nicht. Wird eine davon
   länger, gehören die beiden Werte nach oben geschoben. */

.footdata {
  display: flex;
  align-items: center;
  gap: .4rem 1.3rem;
  min-width: 0;
  margin-inline-end: auto;   /* hält den Knopf rechts, auch wenn hier nichts steht */
}

.footdata > * { display: none; }

@media (min-width: 30em) { .footdata .fd-mail { display: inline-flex; } }
@media (min-width: 42em) { .footdata .fd-tel  { display: inline-flex; } }

.footdata a {
  color: inherit;
  font-size: clamp(.85rem, .25vw + .8rem, 1rem);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  transition: opacity .2s;
}

.footdata a:hover { opacity: .55; }

/* Die Nummer ohne Unterstreichung: Sie steht ohnehin nur dort, wo mit
   der Maus gearbeitet wird, und wird dort abgeschrieben und nicht
   angeklickt. Der tel:-Verweis bleibt trotzdem dran – auf Geräten, die
   telefonieren können, kostet er nichts und hilft. */
.footdata .fd-tel { text-decoration: none; }

/* ── Der Knopf ─────────────────────────────────────────────────
   Dieselbe Pille wie .btn auf den Karten, nur mit fester Mindesthöhe:
   44px sind die kleinste Fläche, die man am Handy sicher trifft.

   Limette statt des Orange von .btn: Das Orange steht auf den Karten,
   weil dort Papier oder Raster hinterliegt. Hier liegt der Knopf
   direkt auf dem Seitengrund und würde darin verschwinden. */

.footbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 2.75rem;
  padding: 0 1.3em;
  border-radius: 4rem;
  background: var(--lime);
  color: var(--ink);
  font-size: clamp(.95rem, .25vw + .9rem, 1.0625rem);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow .3s var(--ease), background-color .2s;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
}

.footbtn:hover { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .13); }

/* ── Auftritt beim Laden ───────────────────────────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}

.masthead, .slot, .footbar {
  animation: rise .8s var(--ease) backwards;
}

.masthead { animation-delay: .05s; }
.slot:nth-of-type(1) { animation-delay: .15s; }
.slot:nth-of-type(2) { animation-delay: .25s; }
.slot:nth-of-type(3) { animation-delay: .35s; }
.slot:nth-of-type(4) { animation-delay: .45s; }
.slot:nth-of-type(5) { animation-delay: .55s; }
.slot:nth-of-type(6) { animation-delay: .65s; }
.slot:nth-of-type(7) { animation-delay: .75s; }

/* Zuletzt, wenn die Karten stehen. */
.footbar { animation-delay: .85s; }

/* ── Schmale Karte ─────────────────────────────────────────────
   Greift, sobald die Karte selbst schmal wird – nicht der Bildschirm.
   Muss am Dateiende stehen, damit es die Grundwerte überschreibt. */

@container (max-width: 400px) {
  .card-body { padding: 18px; gap: 14px; }

  /* Adresse und Handle sind lange Zeilen – Pillen werden schlanker,
     damit sie nicht über den Kartenrand hinauslaufen. */
  .btn { font-size: .9rem; padding: .6em 1em; }
  .btn-row { gap: .4rem; }

  /* Die Angabe auf den Reiterflächen hat seit dem Wegfall des Knopfes
     die ganze Zeile für sich – sie darf hier also stehen bleiben, wie
     sie ist, und wird nur nicht größer als der schmale Rand hergibt. */
  .strip__foot { padding: 18px; }
}

/* Kleine Handys: die Kontaktkarte hat sonst zu wenig Höhe für alles. */
@container (max-width: 340px) {
  .display { font-size: 1.75rem; }
  .btn { font-size: .85rem; }
}

/* ── Bewegung reduzieren ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}