/* Comilo — Website. Werte aus dem Design System, dieselben wie in der App
   (app/src/app/globals.css). Wer hier eine Farbe aendert, aendert sie dort
   mit, sonst laufen Seite und Anwendung auseinander.

   Systemschriften mit Georgia als Serifen-Anker: keine Schrift von einem
   fremden Server, das waere eine Verbindung zu Google bei jedem Aufruf, ohne
   dass jemand zugestimmt hat. Die Hausschriften Newsreader und Hanken Grotesk
   kommen mit, sobald die Seite mehr ist als Ankuendigung und Rechtstexte --
   dann aber als eigene Dateien.

   Aufbau: zuerst die Grundlagen, dann die Startseite in Baendern, danach die
   kleinen Seiten (danke, bestaetigt) und die Textseiten. Die Startseite ist
   fuer das Telefon geschrieben und waechst ueber zwei Haltepunkte (640 px und
   900 px) in die Breite -- bis zum 01.11.2026 stand sie auf jedem Bildschirm
   als 32-rem-Spalte in der Mitte und sah deshalb am Rechner aus wie eine
   Telefonseite, die man vergroessert hat. */

:root {
  /* Die Namen rechts sind die des Design Systems. Am 01.11.2026 abgeglichen:
     papier war hier #fffdf8 und linie #dcd6c6 -- beide Werte sind im System
     in andere aufgegangen, und zwei Bestaende mit knapp verschiedenen Toenen
     sind genau das, was die Zusammenlegung beenden sollte. */
  --leinen: #f7f4ec;          /* leinen */
  --papier: #ffffff;          /* papier, die Karte ueber der Grundflaeche */
  --wald: #4f6f52;            /* waldgruen */
  --wald-dunkel: #3f5343;     /* gruen-800 */
  --terrakotta: #b2542f;      /* terrakotta-flaeche, der Ton fuer Text */
  --graugruen: #333b32;       /* graugruen */
  --leise: #5c6a5a;           /* gruen-600 */
  --rand: #c8d3c6;            /* gruen-200, Rand jeder Karte */
  --linie: #d8d2c2;           /* sand, Trennlinien zwischen Baendern */
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--leinen);
  color: var(--graugruen);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
}

a { color: var(--wald-dunkel); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--wald);
  outline-offset: 2px;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.25; }

.wortmarke {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--wald);
  margin: 0;
}
.wortmarke a { color: inherit; text-decoration: none; }

.augenbraue {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wald);
  margin: 0 0 0.9rem;
}

.ruhig, .beiwerk { color: var(--leise); }
.beiwerk { font-size: 0.85rem; }
.gross { font-size: 1.1rem; }

/* Die Bahn haelt die Zeilenlaenge im Griff. Ohne sie laufen Saetze auf einem
   breiten Schirm ueber 20 Woerter, und das liest niemand mehr zu Ende. */
.bahn {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.bahn.schmal { max-width: 40rem; }

/* Mehr Luft zwischen den Baendern: Mit zwoelf Abschnitten wirkte die
   Seite sonst wie eine Liste, in der alles gleich wichtig ist. */
.band { padding: clamp(3.25rem, 8vw, 6rem) 0; }
.band-hell { background: var(--papier); border-block: 1px solid var(--linie); }
.band h2 { font-size: clamp(1.45rem, 3.2vw, 2rem); margin: 0 0 1rem; }
.band p { margin: 0 0 1rem; }

/* ---- Auftritt beim Scrollen ------------------------------------------
   Die Regeln greifen nur, wenn bewegung.js die Klasse `bewegt` gesetzt
   hat. Ohne JavaScript, und fuer jeden, der Bewegung abbestellt hat, ist
   die Seite von Anfang an vollstaendig sichtbar -- deshalb steht hier
   nichts, was ohne diese Klasse etwas verbirgt.

   Kinder treten nacheinander auf, 60 ms Abstand. Mehr wirkt wie Warten,
   weniger sieht man nicht. */

.bewegt [data-auftritt] {
  /* Die Perspektive gehoert an den Container, nicht an das Kind: Sonst
     bekommt jedes Kind seinen eigenen Fluchtpunkt und die Reihe faechert
     auseinander, statt sich gemeinsam aufzurichten. */
  perspective: 900px;
}
/* Auftritt ueber `translate` und `rotate`, NICHT ueber `transform`.

   Der Grund ist eine Kollision, die beim Entwickeln zweimal stillschweigend
   das Falsche tut: Die Karten sind Kinder von [data-auftritt] UND tragen
   selbst [data-neigt]. Setzt der Auftritt `transform: none`, loescht er die
   Neigung -- und zwar unsichtbar, weil die CSS-Variablen weiter korrekt
   gesetzt werden und nur die Wirkung ausbleibt. Gemessen am 01.11.2026:
   --neig-x stand bei 6,37deg, die Karte zeigte `transform: none`.

   `translate` und `rotate` sind eigenstaendige Eigenschaften und werden mit
   `transform` kombiniert statt von ihm ueberschrieben. Damit hat jede
   Bewegung ihre eigene Spur. */
.bewegt [data-auftritt] > * {
  opacity: 0;
  translate: 0 32px;
  rotate: x 9deg;
  scale: 0.97;
  transform-origin: 50% 100%;
}
.bewegt [data-auftritt].da > * {
  opacity: 1;
  translate: none;
  rotate: none;
  scale: none;
  transition:
    opacity 420ms ease,
    translate 620ms cubic-bezier(0.16, 1, 0.3, 1),
    rotate 620ms cubic-bezier(0.16, 1, 0.3, 1),
    scale 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Die Staffelung gilt NUR, wo die Elemente nebeneinander stehen. Auf dem
   Telefon stehen sie untereinander, und dann ist die Verzoegerung der
   sechsten Karte eine leere Flaeche genau dort, wo man gerade hinschaut.
   Gemessen am 01.11.2026 bei 375 px: fuenf von sechs Artenkarten waren
   unsichtbar, waehrend die Ueberschrift schon oben stand. */
@media (min-width: 56.25em) {
  .bewegt [data-auftritt].da > *:nth-child(2) { transition-delay: 45ms; }
  .bewegt [data-auftritt].da > *:nth-child(3) { transition-delay: 90ms; }
  .bewegt [data-auftritt].da > *:nth-child(4) { transition-delay: 135ms; }
  .bewegt [data-auftritt].da > *:nth-child(5) { transition-delay: 180ms; }
  .bewegt [data-auftritt].da > *:nth-child(6) { transition-delay: 225ms; }
  .bewegt [data-auftritt].da > *:nth-child(7) { transition-delay: 270ms; }
  .bewegt [data-auftritt].da > *:nth-child(8) { transition-delay: 315ms; }
}

/* Beim Drucken ist alles da. Sonst fehlt auf dem Papier jeder Abschnitt,
   den der Leser nie auf den Schirm gescrollt hat -- und das merkt man erst,
   wenn das Blatt aus dem Drucker kommt. */
@media print {
  .bewegt [data-auftritt] > * {
    opacity: 1 !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
  }
  /* Alles, was der Scroll-Motor verschiebt, steht auf dem Papier still.
     Auch der Kopf: Ein klebender Kopf wiederholt sich sonst auf jeder
     Seite oder landet quer im Satzspiegel. */
  .bewegt [data-f],
  .bewegt [data-f] img,
  .bewegt [data-f] * {
    scale: none !important;
    translate: none !important;
    rotate: none !important;
  }
  .bewegt .band-dunkel[data-f] { background-image: none !important; }
  .kopf { position: static !important; }
  .fortschritt { display: none !important; }
  .bewegt [data-neigt] { transform: none !important; }
  .bewegt [data-tiefe] { translate: none !important; }
}

/* Guertel und Hosentraeger: Wer Bewegung abbestellt, bekommt auch dann
   keine, wenn das Skript die Klasse schon gesetzt hatte. */
@media (prefers-reduced-motion: reduce) {
  .bewegt [data-auftritt] > *,
  .bewegt [data-auftritt].da > * {
    opacity: 1;
    translate: none;
    rotate: none;
    scale: none;
    transition: none;
  }
  .bewegt [data-f], .bewegt [data-f] img {
    scale: none;
    translate: none;
    rotate: none;
  }
  .bewegt [data-auftritt].da .artzeichen { animation: none; }
  .fortschritt { display: none; }
  .bewegt [data-neigt] { transform: none; }
  .bewegt [data-tiefe] { translate: none; }
}

/* ---- Neigung unter dem Zeiger ----------------------------------------
   --neig-x und --neig-y setzt bewegung.js, je Element, in Grad. Ohne
   Skript bleiben sie 0 und nichts passiert. Die Perspektive sitzt am
   Element selbst, damit jede Karte ihren eigenen Fluchtpunkt hat -- hier
   ist das gewollt, anders als bei den Auftritten.

   will-change nur auf transform und nur dort, wo wirklich gekippt wird:
   Die Eigenschaft kostet Speicher je Element, und auf einer Seite mit
   zwanzig Karten summiert sich das. */
.bewegt [data-neigt] {
  --neig-x: 0deg;
  --neig-y: 0deg;
  transform: perspective(700px) rotateX(var(--neig-x)) rotateY(var(--neig-y));
  transform-style: preserve-3d;
  will-change: transform;
}

/* Beim Schweben hebt sich die Karte zusaetzlich aus der Flaeche. Der
   Schatten waechst mit, sonst sieht die Neigung aus wie ein Fehler im
   Layout statt wie Tiefe. */
.bewegt .art[data-neigt]:hover,
.bewegt .block[data-neigt]:hover,
.bewegt .karte[data-neigt]:hover {
  box-shadow: 0 26px 50px -30px rgba(51, 59, 50, 0.55);
}
.bewegt [data-neigt] > * { transform: translateZ(18px); }
.bewegt .artzeichen { transform: translateZ(34px); }
.bewegt .art:hover .artzeichen { transform: translateZ(46px) scale(1.1); }

/* ---- Parallax ---------------------------------------------------------
   --tiefe-y kommt aus dem Skript und ist der Versatz in Pixeln. */
.bewegt [data-tiefe] { --tiefe-y: 0px; translate: 0 var(--tiefe-y); }

/* ---- Kopfzeile ------------------------------------------------------ */

.kopf {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linie);
  background: var(--leinen);
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Der Knopf oben ist auf dem Telefon Doppelung: Die Buehne nennt denselben
   Weg zwei Fingerbreit darunter. */
.kopf .knopf-klein { display: none; }

/* ---- Knoepfe -------------------------------------------------------- */

.knopf {
  display: inline-block;
  /* 48 px Mindesthoehe -- darunter wird es am Telefon zum Zielen. */
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  background: var(--wald);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1rem;
}
.knopf:hover { background: var(--wald-dunkel); }
.knopf-klein { min-height: 0; padding: 0.5rem 1.1rem; font-size: 0.9rem; }

/* Der zweite Weg steht neben dem ersten, nicht unter ihm: Umriss statt
   Flaeche. wald-dunkel statt wald, weil der Text sonst auf leinen unter
   4,5:1 faellt -- dieselbe Falle wie bei terrakotta. */
.knopf-zweit {
  background: transparent;
  color: var(--wald-dunkel);
  box-shadow: inset 0 0 0 1.5px var(--wald);
}
.knopf-zweit:hover { background: var(--papier); }

.knopf-fussnote { margin: 0.75rem 0 0; }

/* Auf dem dunklen Band traegt wald auf graugruen zu wenig: dort hell. */
.band-dunkel .knopf { background: var(--leinen); color: var(--graugruen); }
.band-dunkel .knopf:hover { background: #fff; }

.knopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.1rem;
  margin: 1.75rem 0 0;
}

/* ---- Buehne --------------------------------------------------------- */

.buehne { padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.buehne h1 {
  font-size: clamp(1.9rem, 5.2vw, 3.1rem);
  margin: 0 0 1.1rem;
  max-width: 14ch;
}
.buehne .gross { margin: 0; max-width: 46ch; }
.buehne-raster { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
/* Die Buehne ist die einzige Stelle mit einer gemeinsamen Perspektive
   ueber zwei Spalten: Die Vorschau steht dadurch sichtbar IM Raum und
   nicht daneben. */
.buehne { perspective: 1400px; perspective-origin: 70% 40%; }

/* ---- Vorschau der App ------------------------------------------------
   Nachgebaut statt abfotografiert: bleibt in jeder Groesse scharf, laedt
   nichts nach und waechst mit, wenn jemand die Schrift vergroessert. */

.vorschau { display: flex; justify-content: center; }
.vorschau-rahmen {
  width: 100%;
  max-width: 21rem;
  padding: 1.4rem 1.3rem 1.2rem;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 18px;
  box-shadow: 0 18px 40px -28px rgba(51, 59, 50, 0.45);
}
.vorschau-reiter { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; }
.reiter {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--leise);
}
.reiter.aktiv { background: var(--wald); border-color: var(--wald); color: #fff; }
.reiter.plus { padding: 0.35rem 0.7rem; }

.vorschau-titel { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 0.15rem; }
.vorschau-zeile { font-size: 0.88rem; color: var(--leise); margin: 0 0 1.1rem; }

/* Die Linienstaerke links ist die Dringlichkeit (Design-Entscheidung 5).
   Vier Stufen als 10, 6, 3 und 1 Punkt -- erkennbar in Graustufen und im
   Ausdruck, nicht nur an der Farbe. */
.posten { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.7rem; }
.posten li { padding-left: 0.8rem; border-left: 1px solid var(--linie); }
.posten .stufe-4 { border-left-width: 10px; border-left-color: var(--terrakotta); }
.posten .stufe-3 { border-left-width: 6px; border-left-color: var(--wald); }
.posten .stufe-2 { border-left-width: 3px; border-left-color: var(--wald); }
.posten .stufe-1 { border-left-width: 1px; }
.posten-name { display: block; font-size: 0.95rem; }
.posten-wann { display: block; font-size: 0.82rem; color: var(--leise); }

.vorschau-reise {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
  font-size: 0.85rem;
  color: var(--leise);
}
.vorschau-reise strong { font-weight: 600; color: var(--graugruen); }

/* ---- Raster --------------------------------------------------------- */

.raster-drei { display: grid; gap: 1rem; margin-top: 2rem; }
.karte {
  padding: 1.5rem 1.4rem;
  background: var(--leinen);
  border: 1px solid var(--rand);
  border-radius: 14px;
}
.band-hell .karte { background: var(--leinen); }
.karte h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.karte p { margin: 0; color: var(--leise); }

.raster-zwei { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }

/* ---- Die sechs Arten -------------------------------------------------
   Eigenes Raster statt .raster-drei: Sechs kurze Karten vertragen auf dem
   Rechner drei Spalten, auf dem Tablet zwei, und auf dem Telefon soll keine
   davon zur Wand werden. */

.raster-arten {
  display: grid;
  gap: 0.9rem;
  margin: 1.75rem 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Ab hier passen drei nebeneinander: 3+3 statt 4+2, sonst steht die
   zweite Reihe halb leer und es sieht nach fuenf Arten und einem Rest
   aus. */
@media (min-width: 56.25em) {
  .raster-arten { grid-template-columns: repeat(3, 1fr); }
}
.art {
  padding: 1.4rem 1.25rem 1.25rem;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 14px;
  min-width: 0;
  /* Die Karte hebt sich beim Zeigen leicht an. 160 ms, weil alles darueber
     sich auf dem Telefon wie Verzoegerung anfuehlt. */
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.band-hell .art { background: var(--leinen); }
.art:hover {
  transform: translateY(-3px);
  border-color: var(--wald);
  box-shadow: 0 14px 28px -22px rgba(51, 59, 50, 0.6);
}
.art h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.art p { margin: 0; font-size: 0.92rem; color: var(--leise); }

/* ---- Bilder -----------------------------------------------------------
   Alle mit width und height im Markup, damit der Platz schon steht, bevor
   das Bild da ist. Ohne das springt der Text beim Laden, und auf einer
   Seite mit drei Bildern springt er dreimal. */

img { max-width: 100%; height: auto; display: block; }

/* Coco im Reiter der Vorschau. Rund, damit es neben der Pille sitzt und
   nicht als zweites Rechteck auftritt. */
.reiter picture { display: inline-block; vertical-align: middle; margin-right: 0.4rem; }
.reiter img {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
  /* Der Rand traegt hier Arbeit: Auf der gruenen Pille waere das Fell
     sonst Flaeche an Flaeche. */
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.reiter.aktiv { display: inline-flex; align-items: center; padding-left: 0.4rem; }

/* Das Hochformat neben dem Problemabsatz. */
.bild-hoch { margin: 0; }
.bild-hoch img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 24px 48px -32px rgba(51, 59, 50, 0.6);
}

/* Der Kopf des Betreuungsabschnitts: Text und Bild nebeneinander, die
   acht Kacheln darunter ueber die ganze Breite. */
.betreuung-kopf { margin-bottom: 0.5rem; }

/* Das Band in voller Breite. Die Hoehe ist begrenzt, sonst nimmt ein
   16:9-Bild auf einem breiten Schirm den halben Bildschirm ein und der
   Leser scrollt an einem Foto vorbei statt durch eine Seite. */
.bildband {
  margin: 0;
  overflow: hidden;
  background: var(--leinen);
}
.bildband img {
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
  /* 28 statt 50: Bei 22 rem Hoehe schneidet die Mitte dem Hund den Kopf ab. */
  object-position: center 28%;
}

/* ---- Die Artenzeichen ------------------------------------------------
   Design-Entscheidung 8: ein Zeichen je Art, Pfote fuer Hund und Katze.
   Strich statt Flaeche -- dieselbe Zeichnung wie im Menue der App, und
   bei 1,5 von 28 auch bei 20 px noch lesbar.

   currentColor, damit das Zeichen der Textfarbe folgt: Es wird beim
   Zeigen gruen, ohne dass eine zweite Regel die Farbe doppelt pflegt. */
.artzeichen {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 0.7rem;
  color: var(--wald-dunkel);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: color 160ms ease, transform 220ms ease;
}
.art:hover .artzeichen { color: var(--wald); transform: scale(1.08); }

/* ---- Die Akte als Tagebuch -------------------------------------------
   Drei Eintraege als Beispiel. Das Datum traegt die Zeile, die Art steht
   als kleine Marke daneben -- dieselbe Logik wie in der App, wo ein
   Eintrag immer eine von vier Arten hat. */

.tagebuch { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.tagebuch li {
  padding: 1rem 1.1rem;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 14px;
}
.band-hell .tagebuch li { background: var(--leinen); }
.tagebuch-datum { font-weight: 600; font-size: 0.9rem; }
.tagebuch-art {
  margin-left: 0.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--leinen);
  border: 1px solid var(--rand);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--leise);
  white-space: nowrap;
}
.band .tagebuch-art { background: var(--leinen); }
.tagebuch p { margin: 0.45rem 0 0; font-size: 0.92rem; color: var(--leise); }

/* ---- Die Bloecke der Betreuung ---------------------------------------
   Acht kurze Karten. auto-fit statt fester Spaltenzahl: Bei acht Stueck
   soll die letzte Reihe nicht halb leer stehen, egal wie breit der
   Bildschirm ist. */

.raster-bloecke {
  display: grid;
  gap: 0.9rem;
  margin: 1.75rem 0;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}
.block {
  padding: 1.1rem 1.2rem;
  background: var(--leinen);
  border: 1px solid var(--rand);
  border-radius: 14px;
  min-width: 0;
}
.block h3 { font-size: 1rem; margin: 0 0 0.3rem; }
.block p { margin: 0; font-size: 0.9rem; color: var(--leise); }

/* ---- Preis -----------------------------------------------------------
   Zwei Karten nebeneinander, die bezahlte deutlicher umrandet. Kein
   dritter Tarif als Lockvogel: Es gibt genau zwei Antworten auf die Frage,
   und eine erfundene dritte macht die Entscheidung nicht leichter. */

.preis-raster { align-items: stretch; margin-top: 1.75rem; }
.preis {
  padding: 1.5rem 1.4rem;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 18px;
  min-width: 0;
}
.preis-plus { border-color: var(--wald); border-width: 2px; }
.preis-name {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wald);
  margin: 0 0 0.5rem;
}
.preis-zahl {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  line-height: 1.1;
  margin: 0;
}
.preis-zahl span { font-family: var(--sans); font-size: 0.95rem; color: var(--leise); }
.preis-wann { font-size: 0.88rem; color: var(--leise); margin: 0.3rem 0 1.1rem; }
.preis ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.preis li {
  padding-left: 1.4rem;
  position: relative;
  font-size: 0.93rem;
  color: var(--leise);
}
/* Der Haken ist ein Zeichen, kein Bild: skaliert mit der Schrift und
   braucht keine Datei. aria-hidden waere hier falsch -- er traegt keine
   Bedeutung, die verlorengehen koennte, weil die Liste schon eine ist. */
.preis li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid var(--wald);
  border-bottom: 2px solid var(--wald);
  transform: rotate(-45deg);
}

/* ---- Was die Praxis bekommt ------------------------------------------ */

.praxisliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.praxisliste li {
  padding-left: 1rem;
  border-left: 3px solid var(--rand);
  font-size: 0.95rem;
  color: var(--leise);
}
.praxisliste strong { display: block; color: var(--graugruen); font-weight: 600; }

/* ---- Der Reisefall --------------------------------------------------- */

.rechnung {
  padding: 1.5rem 1.4rem;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 14px;
}
.rechnung-kopf {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terrakotta);
  margin: 0 0 0.4rem;
}
.rechnung-satz { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 1.2rem; }
.rechnung-zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--linie);
  font-size: 0.9rem;
  color: var(--leise);
}
.rechnung-zeile strong { font-weight: 600; color: var(--graugruen); }

/* ---- Ablauf ---------------------------------------------------------- */

.schritte { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.75rem; }
.schritte li { padding-left: 3.2rem; position: relative; }
.ziffer {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--wald);
  border-radius: 999px;
  font-family: var(--serif);
  color: var(--wald);
}
.schritte h3 { font-size: 1.1rem; margin: 0.2rem 0 0.35rem; }
.schritte p { margin: 0; color: var(--leise); }

/* ---- Fuer wen nicht --------------------------------------------------- */

.grenzen { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.grenzen li {
  padding-left: 1rem;
  border-left: 3px solid var(--linie);
  color: var(--leise);
}
.grenzen strong { color: var(--graugruen); font-weight: 600; }

/* ---- Warteliste-Band -------------------------------------------------- */

/* Zweimal dunkel auf der Seite: der Reisefall und die Warteliste. Beides
   Stellen, an denen es um eine Frist geht -- einmal um die des Tieres,
   einmal um die eigene. Ein drittes dunkles Band waere Dekoration. */
.band-dunkel {
  background: var(--wald-dunkel);
  color: var(--leinen);
}
.band-dunkel h2, .band-dunkel h3 { color: #fff; }
.band-dunkel p, .band-dunkel .gross { color: var(--leinen); }
.band-dunkel .beiwerk { color: #cdd6cb; }
.band-dunkel .augenbraue { color: #c8d3c6; }
/* Die Rechnung bleibt hell: Sie ist das Blatt, auf dem gerechnet wird,
   und soll sich vom Band abheben wie Papier vom Tisch. */
.band-dunkel .rechnung { background: var(--papier); color: var(--graugruen); border-color: transparent; }
.band-dunkel .rechnung p { color: var(--graugruen); }
.band-dunkel .rechnung .rechnung-kopf { color: var(--terrakotta); }
.band-dunkel .rechnung-zeile { color: var(--leise); }
.raster-zwei-eng { align-items: start; }

.warteliste {
  padding: 1.75rem 1.5rem;
  background: var(--papier);
  border-radius: 14px;
  color: var(--graugruen);
}
.warteliste h2, .warteliste h3 { font-size: 1.15rem; margin: 0 0 1.1rem; color: var(--graugruen); }
.warteliste .ruhig { font-size: 0.9rem; margin: 0 0 1.25rem; }

.feld { margin-bottom: 1rem; }
.feld label { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; }
.feld input[type="text"],
.feld input[type="email"] {
  width: 100%;
  /* 16px, damit iOS beim Antippen nicht hineinzoomt. */
  font: inherit;
  font-size: 16px;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: #fff;
  color: inherit;
}

.einwilligung {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--leise);
  margin: 1rem 0 1.25rem;
}
/* 20px und ein Rand aus Abstand: Trefferflaeche am Telefon. */
.einwilligung input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--wald); }

button[type="submit"] {
  width: 100%;
  /* 48px Mindesthoehe -- darunter wird es am Telefon zum Zielen. */
  min-height: 48px;
  font: inherit;
  font-size: 1rem;
  color: #fff;
  background: var(--wald);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
button[type="submit"]:hover { background: var(--wald-dunkel); }

/* Honigtopf: fuer Menschen unsichtbar, fuer einfache Skripte ein Feld, das
   sie ausfuellen. Nicht display:none -- manche Skripte ueberspringen das. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Fragen ----------------------------------------------------------- */

details {
  border-top: 1px solid var(--linie);
  padding: 1rem 0;
}
details:last-of-type { border-bottom: 1px solid var(--linie); }
summary {
  cursor: pointer;
  font-size: 1.02rem;
  /* Die Trefferflaeche ist die ganze Zeile, nicht nur das Dreieck, und sie ist
     44 px hoch (R027). Mit dem Daumen getroffen wird die Flaeche, nicht die
     Schrift. */
  display: flex;
  align-items: center;
  min-height: 44px;
  list-style-position: outside;
}
details p { margin: 0.6rem 0 0; color: var(--leise); }

/* ---- Fuss -------------------------------------------------------------- */

footer {
  font-size: 0.8rem;
  color: var(--leise);
  text-align: center;
}
footer a { color: inherit; }

/* 44 px fuer alles, was navigiert, auch wenn die Schrift klein ist (R027):
   gezaehlt wird die Flaeche, die der Finger trifft. Links mitten im
   Fliesstext bleiben ausgenommen -- sie auf 44 px zu ziehen, risse den Satz
   auseinander. Gemessen am 01.11.2026: Fusszeilenlinks der Rechtstexte und
   Dankeseiten waren 15 bis 21 px hoch. */
footer nav a,
body.start footer a,
body.textseite .zurueck a,
.wortmarke a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
body.textseite .zurueck { line-height: 1.2; }
/* Firmenzeile und Rechtslinks untereinander statt in einer Zeile mit
   Trennpunkten: Sobald die Links 44 px hoch sind, bricht eine solche Zeile am
   Telefon mitten im Trenner um. */
body.start footer { display: grid; justify-items: center; line-height: 1.2; }
body.start footer p { margin: 0; }
body.start footer nav { display: flex; gap: 1.4rem; }

.fuss {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--linie);
  text-align: left;
}
.fuss-innen { display: grid; gap: 0.9rem; }
/* 44 px hoch, auch wenn die Schrift 13 px misst: gezaehlt wird die Flaeche,
   die der Finger trifft (R027). Der negative Rand haelt den Abstand zur
   Wortmarke so, wie er ohne die Polsterung waere. */
.fuss nav { display: flex; flex-wrap: wrap; gap: 0 1.2rem; margin: -0.7rem 0; }
.fuss nav a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss p { margin: 0; }

/* ---- Haltepunkt 640 px -------------------------------------------------- */

@media (min-width: 40em) {
  .raster-drei { grid-template-columns: repeat(3, 1fr); }
  .schritte { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
  .bahn { padding: 0 2rem; }
  .fuss-innen {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
  }
  .fuss nav { justify-content: center; }
}

/* ---- Haltepunkt 900 px: der Rechner ------------------------------------- */

@media (min-width: 56.25em) {
  .kopf .knopf-klein { display: inline-block; }
  .buehne-raster { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
  .raster-zwei { grid-template-columns: 1fr 1fr; }
  .vorschau-rahmen { max-width: 23rem; }
  /* Der Fliesstext bleibt schmal, auch wenn die Bahn breit ist: ueber 75
     Zeichen je Zeile springt das Auge beim Zeilenwechsel in die falsche
     Zeile. */
  .band p:not(.beiwerk):not(.rechnung-satz) { max-width: 65ch; }
}

/* ---- Kleine Seiten: danke, bestaetigt ----------------------------------- */

body.start {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  padding: 3rem 1.5rem;
}
body.start main { max-width: 32rem; text-align: center; }
body.start h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); margin: 0 0 1.25rem; }
body.start p { margin: 0 0 1rem; }
body.start .wortmarke { margin-bottom: 1.75rem; }

.bald {
  /* 44 px, sonst fehlt genau ein Pixel an der Trefferflaeche (R027). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.75rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--terrakotta);
}

/* ---- Textseiten --------------------------------------------------------- */

body.textseite { padding: 3rem 1.5rem 4rem; }
body.textseite main { max-width: 42rem; margin: 0 auto; }
body.textseite .wortmarke { margin-bottom: 1.75rem; }
body.textseite h1 { font-size: clamp(1.6rem, 5vw, 2.1rem); margin: 0 0 1.5rem; }
body.textseite h2 { font-size: 1.2rem; margin: 2.25rem 0 0.6rem; }
body.textseite dl { margin: 0.75rem 0; }
body.textseite dt { font-weight: 600; margin-top: 0.85rem; font-size: 0.9rem; }
body.textseite dd { margin: 0.15rem 0 0; }
body.textseite ul { padding-left: 1.2rem; }
body.textseite li { margin-bottom: 0.35rem; }

.zurueck {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
  font-size: 0.9rem;
}

/* ---- Der Scroll-Motor ------------------------------------------------
   bewegung.js schreibt je markiertem Element `--f`: 0, wenn die Oberkante
   unten in den Bildschirm kommt, 1, wenn die Unterkante oben verschwindet.
   Alles in diesem Abschnitt rechnet nur mit diesem einen Wert.

   Warum nicht `animation-timeline: view()`: Das waere kuerzer und liefe
   ohne Hauptfaden, aber Firefox kann es bis heute nur hinter einem
   Schalter. Ein Effekt, den ein Drittel der Besucher nicht sieht, ist
   keiner. Sobald Firefox nachzieht, ersetzt es den Motor hier.

   Jede Regel setzt ihren eigenen Ausgangswert fuer --f, damit ein
   Element, das der Motor noch nicht erfasst hat, nicht mit 0 startet und
   sichtbar springt, sobald der erste Lauf kommt. */

.bewegt [data-f] { --f: 0.5; }

/* Der Fortschrittsbalken. Das Skript baut ihn, das Markup kennt ihn
   nicht -- ohne Bewegung gibt es keinen leeren Streifen. */
.fortschritt {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 20;
  pointer-events: none;
}
.fortschritt i {
  display: block;
  height: 100%;
  background: var(--terrakotta);
  transform-origin: 0 50%;
  /* `scale` statt `transform`, damit nichts mit anderen Spuren kollidiert. */
  scale: var(--seite, 0) 1;
}

/* Der Kopf bleibt stehen und schrumpft, sobald man ihn verlaesst. Zwei
   Gruende: Der Knopf *Jetzt testen* bleibt in Reichweite, und die Seite
   zeigt ueberhaupt, dass sie auf das Scrollen reagiert.

   `scroll-margin-top` an jedem Abschnitt mit Namen, sonst verschwindet
   das Sprungziel unter dem Kopf. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  transition: padding 260ms ease, box-shadow 260ms ease;
}
.kopf.geschrumpft {
  padding: 0.55rem 0;
  box-shadow: 0 12px 28px -24px rgba(51, 59, 50, 0.9);
}
section[id] { scroll-margin-top: 4.5rem; }

/* KEIN `scroll-behavior: smooth`. Gemessen am 02.11.2026: Mit der Regel
   bleibt https://comilo.eu/#warteliste beim Laden auf Null stehen -- der
   Browser beginnt den weichen Lauf, waehrend die Seite noch waechst, und
   bricht ihn ab. Ohne sie springt er auf 7.336 px, und
   `scroll-margin-top` legt das Ziel 72 px unter den Kopf.
   Weiches Scrollen ist nett, ein Link, der nicht ankommt, ist ein Fehler. */

/* Die Buehne zieht beim Scrollen davon: Der Text wandert langsamer nach
   oben als die Seite, die Vorschau kippt sich dabei weg. */
/* Gerechnet wird ab 0,5, nicht ab 0. Die Buehne steht beim Laden schon
   zur Haelfte im Bild -- gegen 0 gerechnet waere sie von Anfang an
   verschoben und gekippt, und die Bewegung beim Scrollen bliebe der
   kleinere Teil davon. Ab der Mitte gerechnet steht sie beim Laden
   gerade und zieht erst davon, wenn man sie verlaesst. */
.bewegt .buehne-text[data-f] {
  translate: 0 calc((var(--f) - 0.5) * -68px);
}
.bewegt .vorschau[data-f] { perspective: 1100px; }
.bewegt .vorschau[data-f] .vorschau-rahmen {
  rotate: x calc((0.5 - var(--f)) * 16deg);
  will-change: rotate;
}

/* Bilder zoomen langsam heraus, waehrend sie durchs Bild wandern, und
   laufen dabei ein Stueck gegen die Scrollrichtung. Zusammen ergibt das
   die Tiefe, die ein unbewegtes Foto auf einer langen Seite nicht hat.

   Der Rahmen muss schneiden, sonst waechst das Bild ueber seine Kante
   hinaus -- beim Band steht `overflow: hidden` schon, beim Hochformat
   kommt es hier dazu. */
.bewegt .bildband[data-f] img,
.bewegt .bild-hoch[data-f] img {
  /* 1,18 bis 1,04, nie darunter: Der Ueberstand muss den Versatz decken.
     Bei 22 rem Bandhoehe sind 4 % rund 7 px je Seite, der Versatz geht bis
     6 px. Faellt der Zoom auf 1,0, klafft unten ein Spalt. */
  scale: calc(1.18 - var(--f) * 0.14);
  translate: 0 calc((var(--f) - 0.5) * -12px);
  will-change: scale, translate;
}
.bewegt .bild-hoch[data-f] {
  overflow: hidden;
  border-radius: 18px;
}

/* Das dunkle Reiseband bekommt einen Schein, der mit dem Scrollen
   hochwandert. Der Ton liegt bei 0,22 -- genug, um es zu merken, zu wenig,
   um den Kontrast der weissen Schrift anzutasten. Nachgemessen. */
.bewegt .band-dunkel[data-f] {
  background-image: radial-gradient(
    55rem 26rem at 50% calc(125% - var(--f) * 95%),
    rgba(178, 84, 47, 0.22),
    transparent 68%
  );
}

/* Die Preiskarte hebt beim Vorbeiscrollen ab. */
.bewegt .preis-plus[data-f] {
  box-shadow: 0 calc(14px + var(--f) * 26px) calc(30px + var(--f) * 34px)
    calc(-26px + var(--f) * -4px) rgba(51, 59, 50, 0.55);
}

/* Die Artenzeichen springen herein, sobald ihre Reihe auftritt: kurz
   ueber die Zielgroesse hinaus und zurueck. Das ist der Moment, in dem
   sechs Striche zu sechs Tieren werden.

   `scale` und `rotate` als eigene Spuren -- `transform` traegt an diesem
   Element bereits das translateZ aus der Neigung. */
@keyframes zeichen-herein {
  0% { opacity: 0; scale: 0.4; rotate: -14deg; }
  60% { opacity: 1; scale: 1.14; rotate: 5deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
.bewegt [data-auftritt] .artzeichen { opacity: 0; }
.bewegt [data-auftritt].da .artzeichen {
  animation: zeichen-herein 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Gestaffelt nur dort, wo die Karten nebeneinander stehen -- dieselbe
   Begruendung wie bei den Auftritten weiter oben. */
@media (min-width: 56.25em) {
  .bewegt [data-auftritt].da > *:nth-child(2) .artzeichen { animation-delay: 45ms; }
  .bewegt [data-auftritt].da > *:nth-child(3) .artzeichen { animation-delay: 90ms; }
  .bewegt [data-auftritt].da > *:nth-child(4) .artzeichen { animation-delay: 135ms; }
  .bewegt [data-auftritt].da > *:nth-child(5) .artzeichen { animation-delay: 180ms; }
  .bewegt [data-auftritt].da > *:nth-child(6) .artzeichen { animation-delay: 225ms; }
}

/* Auf dem Telefon faellt die Bewegung kleiner aus: Der Bildschirm ist
   kurz, alles steht untereinander, und iOS liefert waehrend des
   Nachschwingens ohnehin nur jedes zweite Scroll-Ereignis. */
@media (max-width: 56.25em) {
  .bewegt .buehne-text[data-f] { translate: 0 calc((var(--f) - 0.5) * -28px); }
  .bewegt .vorschau[data-f] .vorschau-rahmen { rotate: x calc((0.5 - var(--f)) * 8deg); }
  .bewegt .bildband[data-f] img,
  .bewegt .bild-hoch[data-f] img {
    scale: calc(1.12 - var(--f) * 0.08);
    translate: 0 calc((var(--f) - 0.5) * -8px);
  }
}