/* ================================================================
   Gemeinsame Grundlage aller Seiten (Übersicht und Tools)

   Schriften, Farb- und Bewegungs-Token, Grundstil, Anmeldung, die
   schwebende Leiste oben samt Menüs und die Neuigkeiten. Jede Seite lädt
   zuerst diese Datei und dann ihre eigene (start.css, angebot.css).
   ================================================================ */

/* Schriften liegen selbst im Ordner fonts/ – kein Abruf bei Google, also geht
   beim Öffnen des Tools keine IP-Adresse an Dritte. Variable Fonts: eine
   Datei deckt alle Stärken ab. Quelle und Lizenz: fonts/LIZENZ.md */
@font-face {
  font-family: "Baloo 2";
  src: url("fonts/baloo-2-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --blue: #2a63f5;           /* weiße Schrift darauf 5,0 : 1 – #2f6bff lag mit 4,49 knapp darunter */
  --blue-dark: #1e4fd6;
  --blue-soft: #eef3ff;
  --ink: #1f2937;
  --ink-soft: #374151;
  --gray: #6b7280;
  /* Hinweistexte: hellstes Grau, das auf allen Hintergründen des Tools
     (#fff, #f7f8fa, #f4f5f7, #fffdf7) mindestens 4,5 : 1 Kontrast erreicht. */
  --gray-light: #69717f;
  /* Gesperrte Knöpfe dürfen blass sein – dafür gilt keine Kontrastvorgabe */
  --gray-disabled: #9ca3af;
  /* Gedämpfter Text auf getönten Flächen (#f4f5f7, Hover, Hellblau): ≥ 5,4 : 1 */
  --gray-auf-flaeche: #5b6270;
  --border: #d8dde6;
  --border-soft: #e9ecf1;
  --bg-active: #eef1f6;
  --bg-hint: #f4f5f7;
  --orange: #f5a300;         /* Marke, Flächen und Rahmen */
  --orange-text: #8a6100;    /* orangefarbener Text: 5,5 : 1 statt 2,1 : 1 */
  --red: #e02424;
  --red-soft: #fdf1f1;
  --green: #16a34a;          /* Flächen und Symbole (3 : 1 genügt) */
  --green-text: #15803d;     /* grüner Text: mindestens 4,6 : 1 auf allen Hintergründen */
  --green-soft: #eefaf2;
  --amber-soft: #fff8e8;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 10px 30px rgba(31, 41, 55, .10);
  --shadow-soft: 0 4px 14px rgba(31, 41, 55, .07);
  --shadow-card: 0 1px 2px rgba(31, 41, 55, .06), 0 6px 18px rgba(31, 41, 55, .06);
  --shadow-hoch: 0 2px 4px rgba(31, 41, 55, .06), 0 18px 40px rgba(23, 63, 176, .16);
  --blue-tief: #173fb0;
  /* Eine Dauer, eine Kurve für jede Bewegung: Seitenwechsel, Bereichswechsel,
     Menüs, Schublade. Wer „reduzierte Bewegung“ eingestellt hat, sieht keine. */
  --dauer: 280ms;
  --dauer-kurz: 160ms;
  --dauer-lang: 420ms;     /* Inhalt, der neu auf der Seite erscheint */
  --kurve: cubic-bezier(.2, .7, .2, 1);
  /* Zum Erscheinen: fängt sanft an, statt gleich halb da zu sein */
  --kurve-sanft: cubic-bezier(.4, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Nur für Screenreader: unsichtbar, aber vorgelesen */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: #f7f8fa;
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}

h1, h2, h3 { font-family: "Baloo 2", "Poppins", "Inter", sans-serif; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--blue); }
.hidden { display: none !important; }

/* Fokus für die Tastatur überall deutlich sichtbar: Felder mit blauem Rahmen
   und Schein, alles andere mit einem blauen Ring. Felder schalten den Ring
   selbst ab (outline: none) und bekommen dafür den Schein. */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 107, 255, .28);   /* --blue-soft wäre auf Weiss kaum zu sehen */
}

/* ============ Auth-Gate ============ */
html:not(.eb-authed) .app,
html:not(.eb-authed) .nav-huelle { display: none !important; }
html.eb-authed #login-screen { display: none !important; }

#login-screen {
  position: fixed; inset: 0; background: #f7f8fa;
  display: flex; align-items: center; justify-content: center; z-index: 999;
}
.login-card {
  background: #fff; border-radius: 18px; box-shadow: var(--shadow);
  padding: 46px 52px 40px; width: 420px; max-width: calc(100vw - 40px); text-align: center;
}
.login-card .logo-svg { width: 168px; height: auto; }

/* Ladeeffekt: legt sich beim Anmelden über die Karte, nur das drehende
   Sternchen bleibt stehen. Die viewBox 0 0 29 32 schneidet genau den Stern aus. */
#login-spin {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: #f7f8fa;
  animation: eb-auf .18s ease-out;
}
/* Gedreht wird der DIV, nicht das SVG: eine Transform-Animation direkt auf einem
   SVG-Element wird nicht von jeder Engine zuverlaessig neu gezeichnet – das Bild
   bleibt dann auf einem Einzelbild stehen. Ein normales Block-Element ist ueberall
   sicher, das SVG darin faehrt einfach mit. */
#login-spin .ls-dreh {
  line-height: 0;
  animation: eb-dreh .8s linear infinite;
}
#login-spin svg { width: 52px; height: auto; display: block; }
#login-spin.ende { animation: eb-zu .26s ease-in forwards; }
@keyframes eb-dreh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes eb-auf  { from { opacity: 0; } to { opacity: 1; } }
@keyframes eb-zu   { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #login-spin .ls-dreh { animation-duration: 1.8s; }
  #login-spin { animation: none; }
}
.login-card .logo-sub {
  font-family: "Baloo 2", "Poppins", sans-serif; font-weight: 600; font-size: 16px;
  color: var(--orange); display: block; margin: 2px 0 26px;
}
.login-card h1 { font-size: 22px; margin-bottom: 20px; }
.login-card input {
  width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid var(--border);
  border-radius: var(--radius); outline: none; text-align: center; transition: border-color .15s;
}
.login-card input:focus { border-color: var(--blue); }
.login-card .login-btn {
  width: 100%; margin-top: 14px; padding: 12px; font-size: 15px; font-weight: 600;
  color: #fff; background: var(--blue); border: none; border-radius: var(--radius);
  cursor: pointer; transition: background .15s;
}
.login-card .login-btn:hover { background: var(--blue-dark); }
.login-card .login-err { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 18px; }



/* ============ Schwebende Leiste ============
   Liegt über dem Inhalt und bleibt beim Scrollen stehen. Alle Tools stehen
   als Reiter darin (aus data/tools.json) – von überall ein Klick. Gezeichnet
   wird sie von rahmen.js, damit es sie nur einmal gibt. */
.nav-huelle { position: fixed; top: 12px; left: 0; right: 0; z-index: 45; padding: 0 16px; pointer-events: none; }
.nav {
  position: relative; pointer-events: auto; max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 7px 8px 7px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 14px 34px rgba(23, 63, 176, .16);
}
.ansicht-neu .nav { max-width: 1320px; }
.brand { display: flex; align-items: baseline; gap: 7px; margin-right: 14px; text-decoration: none; }
.brand .logo-svg { width: 104px; height: auto; }
.logo-sub { font-family: "Baloo 2", "Poppins", sans-serif; font-weight: 600; font-size: 15px; color: var(--orange); }
.nav .spacer { flex: 1; }

.nav-reiter { display: flex; align-items: center; gap: 2px; }
.reiter {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 12px;
  font-size: 14px; font-weight: 500; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  transition: background var(--dauer-kurz), color var(--dauer-kurz);
}
.reiter:hover { background: var(--bg-hint); color: var(--ink); }
.reiter[aria-current="page"] { background: var(--blue-soft); color: var(--blue-dark); font-weight: 600; }
.reiter-punkt { width: 8px; height: 8px; border-radius: 3px; flex: none; background: var(--akzent, var(--blue)); }

.nav-knopf {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  border: none; border-radius: 12px; background: none; cursor: pointer; white-space: nowrap; text-decoration: none;
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  transition: background var(--dauer-kurz), color var(--dauer-kurz);
}
.nav-knopf:hover, .nav-knopf[aria-expanded="true"] { background: var(--bg-hint); color: var(--ink); }
.nav-trenner { width: 1px; height: 22px; margin: 0 4px; background: var(--border-soft); }
.nav-mobil-knopf { display: none; }
/* Punkt am Hilfe-Knopf: es gibt etwas Neues */
.nav-punkt { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #fff; }

/* Farbe je Tool – dieselbe in Reiter, Menü und Karte */
.f-blau   { --akzent: var(--blue-dark); --flaeche: #e6edff; }
.f-orange { --akzent: var(--orange);    --flaeche: #fff1cf; }
.f-gruen  { --akzent: var(--green);     --flaeche: #e6f5eb; }
.f-lila   { --akzent: #6d3fd8;          --flaeche: #efe9fc; }   /* weiße Schrift darauf 6,1 : 1 */

/* ---- Ladebalken beim Seitenwechsel ----
   Schmal, unten in der Leiste, in der Farbe des Ziels. Er erscheint erst,
   wenn das Laden länger als einen Moment dauert (rahmen.js), und täuscht
   keinen Fortschritt vor: er läuft, bis die neue Seite da ist. */
.ladebalken { position: absolute; left: 18px; right: 18px; bottom: 2px; height: 3px; overflow: hidden; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity var(--dauer-kurz); }
.ladebalken::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: inherit; background: var(--lade-farbe, var(--blue)); animation: laden 1.1s var(--kurve) infinite; }
@keyframes laden { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
.laedt .ladebalken { opacity: 1; }

/* ---- Menüs der Leiste (Hilfe, auf dem Handy auch die Tools) ---- */
.menue-wrap { position: relative; }
.menue {
  position: absolute; right: 0; top: calc(100% + 12px); width: 300px; padding: 8px;
  background: #fff; border: 1px solid var(--border-soft); border-radius: 16px; box-shadow: var(--shadow-hoch);
  transform-origin: top right; animation: var(--dauer-kurz) var(--kurve) both auftauchen;
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.m-eintrag {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: none; border-radius: 10px;
  background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.m-eintrag:hover { background: var(--bg-hint); }
.m-eintrag[aria-current="page"] { background: var(--blue-soft); }
.m-symbol { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--bg-hint); color: var(--ink-soft); }
.m-symbol.farbig { color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--akzent) 78%, #fff), var(--akzent)); }
.f-orange .m-symbol.farbig { color: var(--ink); }
.m-name { display: block; font-size: 14px; font-weight: 600; }
.m-sub { display: block; font-size: 12px; color: var(--gray-auf-flaeche); }
.m-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.m-lbl { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-auf-flaeche); }
.m-trenner { height: 1px; margin: 6px 4px; background: var(--border-soft); }
.m-fuss { padding: 9px 10px 5px; margin-top: 4px; border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--gray-auf-flaeche); }

@media (max-width: 1000px) {
  .nav-knopf .tb-text { display: none; }
}
@media (max-width: 820px) {
  .nav-reiter, .nav-trenner, .nav-abmelden { display: none; }
  .nav-mobil-knopf { display: inline-flex; }
}
@media (max-width: 480px) {
  .nav-huelle { top: 8px; padding: 0 10px; }
  .brand .logo-svg { width: 92px; }
}

/* ---- Was ist neu: Schublade von rechts, nur auf Klick ---- */
.schublade-hg {
  position: fixed; inset: 0; z-index: 60; background: rgba(17, 24, 39, .32);
  opacity: 0; visibility: hidden; transition: opacity var(--dauer) var(--kurve), visibility 0s var(--dauer);
}
.schublade {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(400px, 100%);
  display: flex; flex-direction: column; background: #fff; box-shadow: -18px 0 40px rgba(17, 24, 39, .16);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dauer) var(--kurve), visibility 0s var(--dauer);
}
.neu-offen .schublade-hg { opacity: 1; visibility: visible; transition-delay: 0s; }
.neu-offen .schublade { transform: none; visibility: visible; transition-delay: 0s; }
.sb-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 14px; border-bottom: 1px solid var(--border-soft); }
.sb-kopf h2 { font-size: 22px; }
.sb-kopf p { font-size: 13px; color: var(--gray-auf-flaeche); }
.schliessen {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--ink-soft);
}
.schliessen:hover { border-color: var(--blue); color: var(--blue-dark); }
.sb-rumpf { flex: 1; overflow: auto; padding: 16px 22px 24px; }
.zeitleiste { list-style: none; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--border-soft); }
.zl-monat { padding: 6px 0 8px 26px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-auf-flaeche); }
.zl-eintrag { position: relative; padding: 0 0 16px 26px; }
.zl-eintrag::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--akzent, var(--blue)); }
.zl-eintrag.neu::before { background: var(--akzent, var(--blue)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent, var(--blue)) 22%, transparent); }
.zl-tool { font-size: 12px; font-weight: 600; color: var(--blue-dark); }
.f-orange .zl-tool { color: var(--orange-text); }
.f-gruen .zl-tool { color: var(--green-text); }
.f-lila .zl-tool { color: var(--akzent); }
.zl-titel { display: block; margin-top: 1px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.zl-text { margin-top: 2px; font-size: 13px; color: var(--gray-auf-flaeche); }
.pill-neu { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 10.5px; font-weight: 700; vertical-align: 1px; }

/* ============ Rückfrage (rahmen.js: Rahmen.frage) ============
   Statt des grauen Browser-Dialogs. Gefährliche Aktionen bekommen ein
   Warnsymbol und einen roten Knopf – Abbrechen hat immer den Fokus. */
dialog.frage {
  width: min(420px, calc(100% - 32px)); margin: auto; padding: 24px 24px 18px;
  border: none; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: var(--shadow-hoch);
}
dialog.frage[open] { animation: var(--dauer-kurz) var(--kurve) both auftauchen; }
dialog.frage::backdrop { background: rgba(17, 24, 39, .38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.frage-symbol { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-dark); }
.frage.gefahr .frage-symbol { background: var(--amber-soft); color: var(--orange-text); }
.frage h2 { font-size: 21px; line-height: 1.2; }
.frage p { margin-top: 6px; font-size: 14px; color: var(--gray-auf-flaeche); }
.frage p:empty { display: none; }
.frage-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.frage-knoepfe button { padding: 10px 16px; border-radius: 11px; font-size: 14px; font-weight: 600; cursor: pointer; }
.frage .nein { border: 1px solid var(--border); background: #fff; color: var(--ink-soft); }
.frage .nein:hover { border-color: var(--blue); color: var(--blue-dark); }
.frage .ja { border: 1px solid var(--blue); background: var(--blue); color: #fff; }
.frage .ja:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
.frage.gefahr .ja { border-color: #c81e1e; background: #c81e1e; }          /* weiße Schrift 5,6 : 1 */
.frage.gefahr .ja:hover { border-color: #a51818; background: #a51818; }

/* ============ Band und Inhalt eines Tools ============
   Oben das blaue Band mit Titel und Knöpfen (.kopfbereich), darunter der
   Inhalt (.app-wrap). Den Inhalt zeigt die Seite erst, wenn ihre Daten da
   sind (rahmen.js setzt html.bereit) – sonst tauchte er Stück für Stück auf. */
.kopfbereich {
  padding: 96px 26px 30px;     /* oben Platz für die schwebende Leiste */
  color: #fff;
  background:
    radial-gradient(520px 320px at 88% 0%, rgba(120, 160, 255, .4), transparent 70%),
    linear-gradient(120deg, var(--blue-tief) 0%, var(--blue-dark) 55%, #2559e4 100%);
}
.kopfbereich .page-head { max-width: 1188px; margin: 0 auto; }
.kopfbereich .page-head h1 { color: #fff; }
.kopfbereich .page-head .lead { color: #eef3ff; }
@media (max-width: 480px) {
  .kopfbereich { padding: 84px 16px 24px; }
}
html:not(.bereit) .app-wrap { visibility: hidden; }

/* ---- Teile, die mehrere Tools gleich brauchen ----
   Ein Umschalter im Band (Intern/Für Kunden, Sie/Du), das Suchfeld im Band
   und die weißen Blätter darunter. */
.umschalter { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .16); }
.umschalter button { padding: 7px 14px; border: 0; border-radius: 9px; background: none; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background var(--dauer-kurz), color var(--dauer-kurz); }
.umschalter button[aria-pressed="true"] { background: #fff; color: var(--blue-dark); }

.such-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.suche { flex: 1 1 420px; max-width: 660px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(10, 30, 90, .25); }
.suche:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 10px 30px rgba(10, 30, 90, .25); }
.suche svg { flex: none; color: var(--gray); }
.suche input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ink); }
.suche input:focus-visible { box-shadow: none; }                    /* Felder haben sonst einen Ring – hier leuchtet die ganze Pille */
.suche input::-webkit-search-cancel-button { display: none; }      /* eigener Knopf „Leeren“ */
.such-leeren { padding: 6px 10px; border: 0; border-radius: 9px; background: var(--bg-hint); color: var(--ink-soft); font-size: 13px; font-weight: 500; cursor: pointer; }

.blatt { padding: 22px 24px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-card); }
.blatt h2 { font-size: 21px; }
.blatt h3 { font-size: 16.5px; }
.unter { font-size: 13px; color: var(--gray-auf-flaeche); }
@media (max-width: 560px) {
  .blatt { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .umschalter button { transition: none; }
}

/* Kurze Rückmeldung unten in der Mitte */
#toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 500;
  padding: 11px 20px; border-radius: 999px; z-index: 400;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ Übergänge ============
   Beim Wechsel zwischen Übersicht und Tool bleibt die Leiste stehen, der
   Inhalt blendet weich über (View Transitions des Browsers, ohne
   Bibliothek). Im Angebotstool wechseln die Bereiche mit derselben
   Bewegung. Wo der Browser das nicht kann (Firefox), wechselt die Seite wie
   bisher; bei „reduzierter Bewegung“ gibt es keine. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.nav-huelle { view-transition-name: leiste; }
::view-transition-group(leiste) { z-index: 1; }     /* bleibt über allem, was sich bewegt */

/* Was keinen eigenen Namen hat, blendet nur über. Bewusst nur Dauer und
   Kurve: Die Überblendung selbst bleibt die des Browsers, und die addiert
   alt und neu zu voller Deckkraft. Eigene Keyframes verlieren das, dann
   scheint zur Hälfte der Grund durch. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--dauer); animation-timing-function: var(--kurve); }

/* Für Bewegungen innerhalb einer Seite (angebot.css: Bereiche) und für die
   Texte im Band */
@keyframes seite-raus { to { opacity: 0; transform: translateY(-6px); } }
@keyframes seite-rein { from { opacity: 0; transform: translateY(14px); } }

/* ---- Übersicht ↔ Tool, Tool ↔ Tool ----
   Alle Seiten tragen oben dasselbe blaue Band (.band), in das von unten
   weiße Karten ragen. Das Band bleibt beim Wechsel stehen und ändert nur
   seine Höhe – es wird nie blass und neu gemalt. Darin tauschen die Texte
   (Begrüßung, Titel der Tools) ihren Platz, ohne mitzuwachsen.

   Darunter eine Bewegung in die Tiefe: Auf dem Hinweg treten die Karten
   leicht nach vorn und verschwinden, die angeklickte am deutlichsten – man
   geht in sie hinein. Dann gleitet das Tool herein. Zurück spiegelverkehrt:
   Das Tool weicht nach hinten, die Karten kommen aus dem Vordergrund an
   ihren Platz, die des Tools zuletzt (start.js).

   Texte im Band und Inhalt eines Tools benennt jede Seite selbst
   (kopftext-start, kopftext-angebot, inhalt-angebot …), damit zwei
   verschiedene Seiten nicht ineinander zerfließen. Gestaltet werden sie
   gemeinsam über ihre Klasse (view-transition-class: kopftext, inhalt).

   „:only-child“ heißt: nur was kommt oder geht. Bleibt etwas auf beiden
   Seiten (Neues Angebot, Bereichswechsel), blendet es nur über. */
.band { view-transition-name: band; }
::view-transition-group(band) { overflow: clip; animation-duration: var(--dauer); animation-timing-function: var(--kurve); }
::view-transition-old(band),
::view-transition-new(band) { animation-duration: var(--dauer); animation-timing-function: var(--kurve); }

::view-transition-old(*.kopftext):only-child { animation: var(--dauer-kurz) var(--kurve) both seite-raus; }
::view-transition-new(*.kopftext):only-child { animation: var(--dauer-kurz) var(--kurve) 120ms both seite-rein; }

::view-transition-old(uebersicht):only-child { animation: var(--dauer-kurz) var(--kurve) both nach-vorn-weg; }
::view-transition-old(karte):only-child      { animation: var(--dauer) var(--kurve) both karte-nach-vorn-weg; }
::view-transition-new(uebersicht):only-child { animation: var(--dauer) var(--kurve) both von-vorn; }
::view-transition-new(karte):only-child      { animation: var(--dauer) var(--kurve) 60ms both karte-von-vorn; }
::view-transition-old(*.inhalt):only-child   { animation: var(--dauer-kurz) var(--kurve) both nach-hinten-weg; }
/* Kommt ein Tool, zeigt der Browser seinen Inhalt so, wie er gerade ist –
   das Hereinkommen machen die Tools selbst, sobald ihre Daten da sind. */
::view-transition-new(*.inhalt):only-child   { animation: none; }
@keyframes nach-vorn-weg       { to   { opacity: 0; transform: scale(1.02); } }
@keyframes karte-nach-vorn-weg { to   { opacity: 0; transform: scale(1.08); } }
@keyframes von-vorn            { from { opacity: 0; transform: scale(1.02); } }
@keyframes karte-von-vorn      { from { opacity: 0; transform: scale(1.08); } }
@keyframes nach-hinten-weg     { to   { opacity: 0; transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .menue, .schublade, .schublade-hg, .reiter, .nav-knopf, dialog.frage[open] { animation: none; transition: none; }
  .ladebalken::before { animation: none; width: 100%; opacity: .6; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}