/* Uhrenatlas – Gestaltung «Nachtblau & Gold» (Muster A, entschieden 25.10.2026) */

@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond-latin-normal.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond-latin-italic.woff2") format("woff2"); font-weight: 500 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --grund: #0B1A33;
  --flaeche: #102140;
  --flaeche-hell: #15284A;
  --tief: #081327;
  --gold: #C8A45A;
  --gold-hell: #E3C98E;
  --text: #E9E4D6;
  --text-ged: #C3CAD8;
  --text-klein: #9AA5B8;
  --linie: rgba(200, 164, 90, 0.28);
  --linie-stark: rgba(200, 164, 90, 0.45);
  --richtig: #7FC8A0;
  --falsch: #E89A8A;
  --titel: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --breite: 1160px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--schrift); font-size: 16px; line-height: 1.65; -webkit-text-size-adjust: 100%; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }
a { color: var(--gold); }
a:hover { color: var(--gold-hell); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titel); font-weight: 500; line-height: 1.1; margin: 0; hyphens: auto; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.kicker { margin: 0 0 12px; color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.lead { font-size: 18px; color: var(--text-ged); max-width: 620px; }
.leise { color: var(--text-ged); }
.klein { font-size: 13px; color: var(--text-klein); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: -9999px; top: 8px; background: var(--gold); color: var(--grund); padding: 8px 14px; z-index: 10; }
.springen:focus { left: 8px; }

/* Kopfzeile */
.kopf { border-bottom: 1px solid var(--linie); background: var(--grund); }
@media (min-width: 760px) { .kopf { position: sticky; top: 0; z-index: 20; background: rgba(11, 26, 51, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.kopf .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 18px; padding-bottom: 18px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.marke:hover { color: var(--text); }
.marke span { font-family: var(--titel); font-size: 30px; font-weight: 600; letter-spacing: 0.04em; }
.marke svg { flex: none; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 15px; }
.nav a { color: var(--text); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
/* Handy: Menü in einer Zeile zum Wischen statt mehrerer Zeilen; der Verlauf rechts zeigt, dass es weitergeht */
@media (max-width: 759px) {
  .kopf .wrap { padding-top: 14px; padding-bottom: 6px; gap: 6px; }
  .marke span { font-size: 26px; }
  .nav { flex-wrap: nowrap; width: calc(100% + 24px); margin-right: -24px; padding-right: 32px; gap: 22px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; white-space: nowrap; padding: 8px 0; }
}

/* Brotkrumen */
.krumen { font-size: 13px; color: var(--text-klein); padding-top: 22px; }
.krumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.krumen li + li::before { content: "›"; margin-right: 6px; color: var(--text-klein); }
.krumen a { color: var(--text-ged); text-decoration: none; }
.krumen a:hover { color: var(--gold); }

/* Knöpfe */
.knopf { display: inline-block; padding: 13px 24px; background: var(--gold); color: var(--grund); text-decoration: none; font-weight: 600; border: 1px solid var(--gold); border-radius: 2px; font: inherit; font-weight: 600; cursor: pointer; }
.knopf:hover { background: var(--gold-hell); border-color: var(--gold-hell); color: var(--grund); }
.knopf.rand { background: transparent; color: var(--gold); }
.knopf.rand:hover { background: rgba(200, 164, 90, 0.1); color: var(--gold-hell); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; }

/* Abschnitte */
.abschnitt { padding: 64px 0; }
.abschnitt + .abschnitt { padding-top: 24px; }
.abschnitt h2 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 22px; }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.abschnitt-kopf h2 { margin: 0; }
.zentriert { text-align: center; }
.seitentitel { font-size: clamp(34px, 5vw, 60px); margin-bottom: 18px; }
.zentriert .lead { margin-left: auto; margin-right: auto; }
.kasten .namen { margin: 0; }
.trenner { border-top: 1px solid var(--linie); }

/* Startbereich */
.held { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding: 64px 0 56px; }
.held-text { flex: 1 1 440px; min-width: 0; }
.held h1 { font-size: clamp(36px, 6vw, 72px); line-height: 1.04; margin-bottom: 22px; }
.held-bild { flex: 1 1 380px; min-width: 0; margin: 0; }
.held-bild img { display: block; width: 100%; height: clamp(320px, 42vw, 540px); object-fit: cover; border: 1px solid var(--linie-stark); }
.bildzeile { margin-top: 10px; font-size: 12px; color: var(--text-klein); }
.held-bild.ohne-foto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 360px; padding: 32px; background: var(--tief); border: 1px solid var(--linie-stark); text-align: center; color: var(--text-ged); }
.held-bild.ohne-foto p { max-width: 320px; margin: 0; }
img.fokus-oben { object-position: 50% 30%; }
img.fokus-unten { object-position: 50% 68%; }
.bildzeile a { color: var(--text-ged); }

/* Zahlen */
.zahlen { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.zahlen .wrap { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 26px; padding-bottom: 26px; }
.zahl { flex: 1 1 130px; }
.zahl b { display: block; font-family: var(--titel); font-weight: 500; font-size: 44px; line-height: 1; color: var(--gold); }
.zahl span { font-size: 14px; color: var(--text-ged); }

/* Marken-Pyramide */
.pyramide { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stufe { width: 100%; min-width: 0; padding: 20px 24px; background: var(--tief); border: 1px solid var(--linie); text-align: center; }
.stufe.s1 { width: 60%; background: var(--gold); color: var(--grund); border-color: var(--gold); }
.stufe.s2 { width: 80%; background: var(--flaeche-hell); border-color: var(--linie-stark); }
.stufe h3 { font-family: var(--schrift); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.stufe.s1 h3 { color: var(--grund); }
.stufe p { margin: 0 0 10px; font-size: 14px; }
.stufe .namen { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; font-size: 15px; }
.stufe .namen a { color: inherit; font-weight: 600; }
.stufe .namen .folgt { opacity: 0.72; }
.stufe.s1 .namen .folgt { opacity: 0.8; }
@media (max-width: 640px) { .stufe.s1, .stufe.s2 { width: 100%; } }

/* Karten */
.karten { display: flex; flex-wrap: wrap; gap: 24px; }
.karte { flex: 1 1 300px; min-width: 0; max-width: 100%; background: var(--flaeche); border: 1px solid var(--linie); display: flex; flex-direction: column; }
.karte > img, .karte .ohne-bild { display: block; width: 100%; height: 280px; object-fit: cover; }
.karte .ohne-bild { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--tief); border-bottom: 1px solid var(--linie); color: var(--text-klein); font-size: 14px; }
.karte-text { padding: 20px 22px 24px; }
.karte-text .kicker { font-size: 12px; margin-bottom: 6px; }
.karte h3 { font-size: 30px; font-weight: 600; margin-bottom: 8px; }
.karte h3 a { color: var(--text); text-decoration: none; }
.karte h3 a:hover { color: var(--gold); }
.karte p { color: var(--text-ged); font-size: 15px; margin: 0; }
.karte.folgt { opacity: 0.78; }
.marke-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.marke-liste li { list-style: none; }

/* Zwei Spalten mit Bild */
.zweispaltig { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.zweispaltig > * { flex: 1 1 380px; min-width: 0; }
.zweispaltig figure { margin: 0; }
.zweispaltig figure img { display: block; width: 100%; height: 440px; object-fit: cover; object-position: top; border: 1px solid var(--linie-stark); }

/* Inhaltsseiten (Marke, Ikone) */
.steckbrief { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 26px 0 28px; padding: 20px 22px; background: var(--flaeche); border: 1px solid var(--linie); font-size: 15px; }
.steckbrief dt { color: var(--text-klein); }
.steckbrief dd { margin: 0; }
@media (max-width: 480px) { .steckbrief { grid-template-columns: 1fr; gap: 2px; } .steckbrief dd { margin-bottom: 10px; } }
.text { max-width: 760px; }
.text h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 44px 0 14px; }
.text h2:first-child { margin-top: 0; }
.text p { font-size: 17px; color: var(--text); }
.inhalt-bild { margin: 32px 0; }
.inhalt-bild img { display: block; width: 100%; max-height: 520px; object-fit: cover; border: 1px solid var(--linie-stark); }
.kasten { margin: 36px 0; padding: 24px 26px; background: var(--flaeche); border: 1px solid var(--linie-stark); }
.kasten h2, .kasten h3 { font-size: 26px; margin: 0 0 12px; }
.kasten ul { margin: 0; padding-left: 20px; }
.kasten li { margin-bottom: 6px; }
.zeitachse { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linie-stark); }
.zeitachse li { position: relative; padding: 0 0 18px 24px; }
.zeitachse li::before { content: ""; position: absolute; left: -5px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.zeitachse b { font-family: var(--titel); font-size: 22px; color: var(--gold); margin-right: 10px; }
.quellen { font-size: 14px; color: var(--text-ged); padding-left: 20px; }
.quellen li { margin-bottom: 6px; }
.stand { margin-top: 28px; font-size: 13px; color: var(--text-klein); }

/* Quiz */
.quiz { border: 1px solid var(--gold); padding: clamp(22px, 4vw, 40px); background: var(--flaeche); }
.quiz h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin: 0 0 22px; }
.quiz-antworten { display: flex; flex-wrap: wrap; gap: 12px; }
.quiz-antworten button { flex: 1 1 220px; min-height: 52px; padding: 12px 18px; background: transparent; border: 1px solid rgba(233, 228, 214, 0.4); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.quiz-antworten button:hover:not(:disabled) { border-color: var(--gold); }
.quiz-antworten button.richtig { border-color: var(--richtig); background: rgba(127, 200, 160, 0.12); }
.quiz-antworten button.falsch { border-color: var(--falsch); background: rgba(232, 154, 138, 0.12); }
.quiz-antworten button:disabled { cursor: default; }
.quiz-erklaerung { margin: 18px 0 0; padding: 14px 16px; background: var(--tief); border-left: 3px solid var(--gold); color: var(--text-ged); }
.quiz-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.quiz-stufen { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.quiz-stufen button { flex: 1 1 220px; padding: 16px 18px; background: var(--flaeche); border: 1px solid var(--linie-stark); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.quiz-stufen button[aria-pressed="true"] { border-color: var(--gold); background: var(--flaeche-hell); }
.quiz-stufen b { display: block; font-family: var(--titel); font-size: 24px; font-weight: 600; color: var(--gold); }
.quiz-stufen span { font-size: 14px; color: var(--text-ged); }

/* Modell-Listen und Technik-Übersicht */
.modell-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.modell { padding: 18px 20px; background: var(--flaeche); border: 1px solid var(--linie); }
.modell h3 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.modell h3 a { color: var(--text); text-decoration: none; }
.modell h3 a:hover { color: var(--gold); }
.modell .kicker { font-size: 12px; margin: 0 0 8px; }
.modell p { margin: 0; color: var(--text-ged); font-size: 15px; }
.blaettern { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 8px; }
.blaettern a { text-decoration: none; font-weight: 600; }

/* Lexikon und Lernkarten */
.buchstaben { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 28px 0 8px; font-weight: 600; }
.buchstaben a { text-decoration: none; }
.lexikon dt { font-family: var(--titel); font-size: 22px; font-weight: 600; margin-top: 18px; }
.lexikon dd { margin: 4px 0 0; color: var(--text-ged); }
.lexikon dd a { font-size: 13px; white-space: nowrap; }
.lernkarten { margin: 24px 0; }
.lernkarte { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; background: var(--flaeche); border: 1px solid var(--gold); text-align: center; }
.lernkarte .begriff { font-family: var(--titel); font-size: clamp(28px, 4vw, 40px); font-weight: 600; }
.lernkarte .erklaerung { color: var(--text-ged); max-width: 560px; margin: 0; }
.lernkarten-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }

/* Bewegte Schemagrafiken (tools/grafiken.py) – Farben und Bewegung nur hier, die SVGs selbst enthalten keine Styles */
.animation { margin: 32px 0; }
.schema-box { background: var(--tief); border: 1px solid var(--linie-stark); padding: clamp(8px, 2vw, 20px); }
.schema { display: block; width: 100%; height: auto; }
.animation figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 10px; font-size: 13px; color: var(--text-klein); }
.anim-knopf { padding: 8px 14px; background: transparent; border: 1px solid var(--linie-stark); color: var(--gold); font: inherit; font-size: 13px; cursor: pointer; }
.anim-knopf:hover { border-color: var(--gold); }
.schema .platine { fill: #0E2042; stroke: rgba(200, 164, 90, 0.18); }
.schema .grund { fill: #0E2042; }
.schema .zr { fill: #C8A45A; stroke: #8E7036; stroke-width: 1; }
.schema .zr-arm { stroke: #C8A45A; stroke-linecap: round; }
.schema .trieb { fill: #D8DEE8; stroke: #6E7B8E; stroke-width: 1; }
.schema .stahl { fill: #B8C2D0; stroke: #6E7B8E; stroke-width: 1; }
.schema .stahl-arm { stroke: #B8C2D0; stroke-linecap: round; }
.schema .stahl-rand { fill: none; stroke: #B8C2D0; stroke-linecap: round; }
.schema .fest { fill: #5D6B80; stroke: #3E4A5C; stroke-width: 1; }
.schema .fest-arm { stroke: #5D6B80; stroke-linecap: round; }
.schema .rubin { fill: #C8384B; }
.schema .gold { fill: #E3C98E; }
.schema .gold-arm { stroke: #E3C98E; stroke-linecap: round; }
.schema .reif { fill: none; stroke: #E3C98E; }
.schema .feder { fill: none; stroke: #9FB3D1; stroke-width: 1.2; }
.schema .zugfeder { fill: none; stroke: #5D6B80; stroke-width: 3; }
.schema .kaefig-ring { fill: none; stroke: #B8C2D0; stroke-width: 6; }
.schema .kaefig-arm { stroke: #B8C2D0; stroke-width: 9; stroke-linecap: round; }
.schema .rotor { fill: #C8A45A; stroke: #8E7036; stroke-width: 1.5; }
.schema .rotor-flaeche { fill: #A88A48; }
.schema .fluss { fill: none; stroke: rgba(233, 228, 214, 0.6); stroke-width: 3; stroke-dasharray: 6 12; stroke-linecap: round; animation: fluss 1.2s linear infinite; }
.schema .beschr { fill: #E9E4D6; font: 600 17px var(--schrift); }
.schema .beschr.klein { fill: #C3CAD8; font-weight: 400; font-size: 14px; }
.schema .hinweis { stroke: rgba(233, 228, 214, 0.45); stroke-width: 1; stroke-dasharray: 3 4; }
.schema .rot { transform-origin: 0 0; }
.schema .dreh-federhaus { animation: drehen 3600s linear infinite; }
.schema .dreh-minuten { animation: drehen-gegen 900s linear infinite; }
.schema .dreh-klein { animation: drehen 300s linear infinite; }
.schema .dreh-sekunden { animation: drehen-gegen 120s linear infinite; }
.schema .schritt-ankerrad { animation: drehen 30s steps(30, end) -0.5s infinite; }
.schema .kipp-anker, .schema .kipp-anker-klein { animation: kippen 2s ease-in-out infinite; }
.schema .schwing-unruh { animation: schwingen 2s ease-in-out infinite; }
.schema .dreh-kaefig { animation: drehen 12s linear infinite; }
.schema .dreh-sperrrad { animation: drehen 40s linear infinite; }
.schema .schwing-rotor { animation: rotor 4s ease-in-out infinite; }
.schema .dreh-wechsler { animation: wechsler 4s ease-in-out infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes drehen-gegen { to { transform: rotate(-360deg); } }
@keyframes kippen { 0%, 20% { transform: rotate(7deg); } 30%, 70% { transform: rotate(-7deg); } 80%, 100% { transform: rotate(7deg); } }
@keyframes schwingen { 0% { transform: rotate(-200deg); } 50% { transform: rotate(200deg); } 100% { transform: rotate(-200deg); } }
@keyframes rotor { 0% { transform: rotate(-100deg); } 50% { transform: rotate(100deg); } 100% { transform: rotate(-100deg); } }
@keyframes wechsler { 0% { transform: rotate(60deg); } 50% { transform: rotate(-60deg); } 100% { transform: rotate(60deg); } }
@keyframes fluss { to { stroke-dashoffset: -36; } }
/* Zifferblätter (Chronograph, GMT, Mondphase) */
.schema .gehaeuse { fill: #B8C2D0; stroke: #6E7B8E; stroke-width: 2; }
.schema .blatt { fill: #F2EDE1; }
.schema .blatt-flach { fill: #F2EDE1; stroke: #B8C2D0; stroke-width: 4; }
.schema .hilfsblatt { fill: #E4DCC8; stroke: #B9AE95; }
.schema .index { stroke: #1C2731; stroke-width: 2; stroke-linecap: round; }
.schema .index-punkt { fill: #E9E4D6; }
.schema .ziffer { fill: #1C2731; font: 600 16px var(--schrift); }
.schema .zeiger { fill: #1C2731; }
.schema .zeiger-klein { fill: #1C2731; }
.schema .zeiger-chrono { fill: #B0283A; }
.schema .zeiger-gmt, .schema .zeiger-gmt-pfeil { fill: #B0283A; }
.schema .druecker, .schema .krone { fill: #B8C2D0; stroke: #6E7B8E; stroke-width: 1.5; }
.schema .luenette-tag { fill: #2F5D9A; }
.schema .luenette-nacht { fill: #13213D; }
.schema .ziffer-luenette { fill: #E9E4D6; font: 600 13px var(--schrift); }
.schema .mond-scheibe { fill: #1A3A7A; }
.schema .mond { fill: #E3C98E; }
.schema .mond-krater { fill: #C8A45A; }
.schema .stern { fill: #E9E4D6; }
.schema .fensterrand { fill: none; stroke: #C8A45A; stroke-width: 3; }
.schema .dreh-sekunden-klein { animation: drehen 12s steps(60, end) infinite; }
.schema .chrono-sekunde { animation: chrono 14s ease-in-out infinite; }
.schema .zaehler-minuten { animation: zaehler 14s steps(1, end) infinite; }
.schema .druecker-a { animation: druecken-a 14s linear infinite; }
.schema .druecker-b { animation: druecken-b 14s linear infinite; }
.schema .zeiger-stunde { transform: rotate(305deg); }
.schema .zeiger-minute { transform: rotate(60deg); }
.schema .dreh-mond { animation: drehen 24s linear infinite; }
.schema .gmt-stunde { animation: drehen 24s linear infinite; }
.schema .gmt-zeiger { animation: drehen 48s linear infinite; }
.schema .gmt-minute { animation: drehen 2s linear infinite; }
@keyframes chrono {
  0%, 8% { transform: rotate(0deg); animation-timing-function: linear; }
  70%, 80% { transform: rotate(540deg); animation-timing-function: ease-in; }
  84%, 100% { transform: rotate(720deg); }
}
@keyframes zaehler { 0%, 48% { transform: rotate(0deg); } 49%, 83% { transform: rotate(30deg); } 84%, 100% { transform: rotate(0deg); } }
@keyframes druecken-a { 0%, 4% { transform: translate(0, 0); } 5%, 7% { transform: translate(-7px, 4px); } 8%, 69% { transform: translate(0, 0); } 70%, 72% { transform: translate(-7px, 4px); } 73%, 100% { transform: translate(0, 0); } }
@keyframes druecken-b { 0%, 79% { transform: translate(0, 0); } 80%, 82% { transform: translate(-7px, -4px); } 83%, 100% { transform: translate(0, 0); } }
/* Veredelungen: Sonnenschliff, Guilloché, Genfer Streifen, Perlage */
.schema .sonne-grund { fill: #1F3F8F; }
.schema .rille { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.schema .rille.hell { stroke: rgba(255, 255, 255, 0.15); }
.schema .lichtkeil { fill: rgba(255, 255, 255, 0.16); }
.schema .index-gold { fill: #E3C98E; }
.schema .zeiger-hell { fill: #E9E4D6; }
.schema .dreh-licht { animation: drehen 10s linear infinite; }
.schema .gl-grund { fill: #DADFE6; }
.schema .gl-linie { fill: none; stroke: #6C7A8E; stroke-width: 1; }
.schema .gl-rand { fill: none; stroke: #B8C2D0; stroke-width: 6; }
.schema .gl-feld { fill: #BEC6D2; }
.schema .gl-mini { fill: #E8ECF1; }
.schema .zug { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ziehen 14s linear infinite; }
.schema .werk-platte { fill: #C9D1DC; }
.schema .zug-streifen, .schema .perle { animation: auftauchen 14s ease-out infinite; opacity: 0; }
.schema .schraube { fill: #2A55B8; stroke: #1A3577; stroke-width: 1.5; }
.schema .schlitz { fill: #10224F; }
@keyframes ziehen { 0% { stroke-dashoffset: 1; opacity: 1; } 8% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes auftauchen { 0% { opacity: 0; } 5% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .animation:not(.laeuft) .schema .zug { stroke-dashoffset: 0; } .animation:not(.laeuft) .schema .zug-streifen, .animation:not(.laeuft) .schema .perle { opacity: 1; } }
/* Schlagwerk, Quarz, Taucheruhr */
.schema .tonfeder { fill: none; stroke: #C8A45A; stroke-width: 4; }
.schema .schallwelle { fill: none; stroke: rgba(227, 201, 142, 0.5); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.schema .hammer-tief { animation: hammer-tief 8s ease-in infinite; }
.schema .hammer-hoch { animation: hammer-hoch 8s ease-in infinite; }
.schema .welle-1 { animation: welle 8s ease-out infinite; }
.schema .welle-2 { animation: welle 8s ease-out 0.15s infinite; }
.schema .welle-3 { animation: welle 8s ease-out 0.3s infinite; }
@keyframes hammer-tief { 0%, 4% { transform: rotate(0); } 6% { transform: rotate(14deg); } 8%, 14% { transform: rotate(0); } 16% { transform: rotate(14deg); } 18%, 31% { transform: rotate(0); } 33% { transform: rotate(14deg); } 35%, 100% { transform: rotate(0); } }
@keyframes hammer-hoch { 0%, 28% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 32%, 52% { transform: rotate(0); } 54% { transform: rotate(-14deg); } 56%, 62% { transform: rotate(0); } 64% { transform: rotate(-14deg); } 66%, 72% { transform: rotate(0); } 74% { transform: rotate(-14deg); } 76%, 100% { transform: rotate(0); } }
@keyframes welle { 0%, 5% { opacity: 0; transform: scale(0.9); } 7% { opacity: 1; } 12% { opacity: 0; transform: scale(1.08); } 15%, 100% { opacity: 0; } }
.schema .platine-eckig { fill: #0E2042; stroke: rgba(200, 164, 90, 0.18); }
.schema .quarz { fill: #CFE3F2; stroke: #8FB3CF; stroke-width: 1.5; }
.schema .quarz-sockel { fill: #5D6B80; }
.schema .schwing-quarz { animation: zittern 0.12s linear infinite; }
@keyframes zittern { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.92); } }
.schema .chip { fill: #1C2731; stroke: #C8A45A; stroke-width: 2; }
.schema .leiter { stroke: #C8A45A; stroke-width: 3; }
.schema .puls { fill: #E3C98E; opacity: 0; }
.schema .puls-1 { animation: puls 1s linear infinite; }
@keyframes puls { 0% { opacity: 1; transform: translateX(-10px); } 70% { opacity: 1; transform: translateX(80px); } 71%, 100% { opacity: 0; transform: translateX(80px); } }
.schema .spule { fill: #8E7036; stroke: #C8A45A; stroke-width: 6; }
.schema .schritt-motor { animation: drehen 2s steps(2, end) infinite; }
.schema .sekunde-springt { animation: drehen 60s steps(60, end) infinite; }
.schema .luenette-schwarz { fill: #111827; stroke: #B8C2D0; stroke-width: 3; }
.schema .luenette-markierung { fill: #2F5D9A; }
.schema .luenette-strich { stroke: #E9E4D6; stroke-width: 2; }
.schema .luenette-dreieck { fill: #E9E4D6; }
.schema .blatt-dunkel { fill: #1C2731; }
.schema .leucht { fill: #DDE8C8; }
.schema .zeiger-leucht { fill: #DDE8C8; stroke: #1C2731; stroke-width: 1; }
.schema .luenette-klick { animation: luenette 12s steps(1, end) infinite; }
.schema .taucher-minute { transform: rotate(72deg); }
@keyframes luenette { 0% { transform: rotate(0deg); } 8% { transform: rotate(-6deg); } 16% { transform: rotate(-12deg); } 24% { transform: rotate(-18deg); } 32% { transform: rotate(-24deg); } 40% { transform: rotate(-30deg); } 48% { transform: rotate(-36deg); } 56% { transform: rotate(-42deg); } 64% { transform: rotate(-48deg); } 72% { transform: rotate(-54deg); } 80% { transform: rotate(-60deg); } 88%, 100% { transform: rotate(-288deg); } }
/* Lebendige Uhr (Startseite) */
.hero-uhr .rille { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.hero-uhr .rille.hell { stroke: rgba(255, 255, 255, 0.12); }
.hero-uhr .lichtkeil { fill: rgba(255, 255, 255, 0.13); }
.hero-uhr .dreh-licht-langsam { transform-origin: 0 0; animation: drehen 24s linear infinite; }
.hero-uhr .hero-schatten { fill: rgba(0, 0, 0, 0.35); filter: blur(8px); }
.hero-uhr .luenette-kante { fill: none; stroke: #7E6128; stroke-width: 2; }
.hero-uhr .minutenpunkt { fill: #E3C98E; }
.hero-uhr .index-applik { fill: #E3C98E; stroke: #9C7B3A; stroke-width: 1; }
.hero-uhr .index-hell { stroke: #E9E4D6; stroke-width: 1.5; }
.hero-uhr .azurage { fill: #0B1D45; stroke: #C8A45A; stroke-width: 1.5; }
.hero-uhr .azurage-ring { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.hero-uhr .zeiger-gold { fill: #E3C98E; }
.hero-uhr .zeiger-grat { fill: #B08B42; }
.hero-uhr .zeiger-sekunde { fill: #E9E4D6; }
.hero-uhr .rubin { fill: #C8384B; }
.hero-uhr .hero-name { fill: #E9E4D6; font: 600 21px var(--titel); letter-spacing: 0.22em; }
.hero-uhr .hero-unter { fill: #C8A45A; font: 600 9px var(--schrift); letter-spacing: 0.3em; }
@media (prefers-reduced-motion: reduce) { .hero-uhr .dreh-licht-langsam { animation: none; } }

/* Bühne der Startseite: Text + lebendige Uhr */
.buehne { position: relative; overflow: hidden; border-bottom: 1px solid var(--linie);
  background: radial-gradient(ellipse 60% 70% at 78% 45%, rgba(37, 78, 160, 0.38), transparent 70%),
              radial-gradient(ellipse 40% 50% at 10% 0%, rgba(200, 164, 90, 0.12), transparent 70%), var(--grund); }
.buehne-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; padding-top: 56px; padding-bottom: 64px; }
.buehne-text { flex: 1 1 440px; min-width: 0; }
.buehne-text h1 { font-size: clamp(38px, 6.2vw, 76px); line-height: 1.02; margin-bottom: 22px; }
.buehne-text .kicker { animation: hochkommen 0.9s ease-out both; }
.buehne-text h1 { animation: hochkommen 0.9s 0.12s ease-out both; }
.buehne-text .lead { animation: hochkommen 0.9s 0.24s ease-out both; }
.buehne-text .knopfreihe { animation: hochkommen 0.9s 0.36s ease-out both; }
.buehne-uhr { flex: 1 1 340px; min-width: 0; max-width: 500px; margin: 0 auto; text-align: center; animation: uhr-erscheinen 1.4s ease-out both; }
.buehne-uhr .hero-uhr { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45)); }
.buehne-uhr figcaption { margin-top: 10px; font-size: 12px; color: var(--text-klein); letter-spacing: 0.06em; }
@keyframes hochkommen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes uhr-erscheinen { from { opacity: 0; transform: scale(0.92) rotate(-6deg); } to { opacity: 1; transform: none; } }

/* Laufendes Bildband */
.bildband { overflow: hidden; padding: 22px 0; border-bottom: 1px solid var(--linie); background: var(--tief); }
.band-spur { display: flex; width: max-content; gap: 16px; animation: band 90s linear infinite; }
.band-spur:hover, .band-spur:focus-within { animation-play-state: paused; }
.band-doppel { display: flex; gap: 16px; }
.band-kachel { position: relative; flex: none; display: block; width: 220px; height: 280px; overflow: hidden; border: 1px solid var(--linie); text-decoration: none; }
.band-kachel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.band-kachel span { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; font-size: 13px; font-weight: 600; color: var(--text); background: linear-gradient(transparent, rgba(8, 19, 39, 0.92)); }
.band-kachel:hover img, .band-kachel:focus img { transform: scale(1.07); }
@keyframes band { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
@media (max-width: 640px) { .band-kachel { width: 160px; height: 210px; } }

/* Kacheln (Spitzenhäuser, Marken) */
.kachel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.kachel { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--linie); background: var(--tief); text-decoration: none; }
.kachel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease, filter 0.7s ease; filter: saturate(0.9); }
.kachel span { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 16px; font-family: var(--titel); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--text); background: linear-gradient(transparent, rgba(8, 19, 39, 0.94)); }
.kachel small { display: block; margin-top: 4px; font-family: var(--schrift); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.kachel:hover img, .kachel:focus img { transform: scale(1.06); filter: saturate(1.05); }
.kachel:hover span { color: var(--gold-hell); }
.kachel.ohne-foto { display: flex; align-items: center; justify-content: center; }
.kachel.ohne-foto svg { margin-bottom: 70px; }
.kachel-raster.klein-raster { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.kachel-raster.klein-raster .kachel span { font-size: 21px; padding: 40px 14px 12px; }

/* Technik in Bewegung */
.technik-gross { max-width: 940px; margin: 0 auto 32px; }
.technik-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.technik-raster .animation, .technik-gross .animation { margin: 0; }
.technik-raster p, .technik-gross p { margin: 10px 0 0; font-size: 15px; }
.technik-raster .animation figcaption { flex-direction: column; align-items: flex-start; }
@media (max-width: 900px) { .technik-raster { grid-template-columns: 1fr; } }

/* Zweier-Reihe (Lernkarten + Quiz) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

/* Karten: sanftes Anheben */
.karte { transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.karte:hover { transform: translateY(-4px); border-color: var(--linie-stark); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.karte { overflow: hidden; }
.karte > img { transition: transform 0.7s ease; }
.karte:hover > img { transform: scale(1.04); }

/* Bildergalerie auf Marken- und Ikonenseiten */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.galerie-bild { margin: 0; min-width: 0; }
.galerie-bild img { display: block; width: 100%; height: 320px; object-fit: cover; border: 1px solid var(--linie); }

/* Referenzbücher: gezeichneter Umschlag statt Cover-Foto */
.buecher { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.buch { display: flex; gap: 18px; min-width: 0; padding: 18px; background: var(--flaeche); border: 1px solid var(--linie); }
.buch-umschlag { flex: none; position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 120px; height: 164px; padding: 14px 10px 10px 14px;
  background: linear-gradient(135deg, #1A3A78, #0B1A33); border: 1px solid var(--linie-stark); border-left: 6px solid #0A1530;
  box-shadow: 6px 8px 18px rgba(0, 0, 0, 0.45); transform: perspective(600px) rotateY(-8deg); transition: transform 0.4s ease; overflow: hidden; }
.buch:hover .buch-umschlag { transform: perspective(600px) rotateY(0deg); }
.buch-umschlag.f1 { background: linear-gradient(135deg, #5A1F2B, #2A0D14); }
.buch-umschlag.f2 { background: linear-gradient(135deg, #1F4A3C, #0B2219); }
.buch-umschlag.f3 { background: linear-gradient(135deg, #2B2B33, #111116); }
.buch-umschlag.f4 { background: linear-gradient(135deg, #6B5326, #2E2210); }
.buch-umschlag > span { flex: none; }
.buch-umschlag { gap: 6px; }
.buch-umschlag .buch-titel { flex: 0 1 auto; min-height: 0; }
.buch-titel { font-family: var(--titel); font-size: 14px; font-weight: 600; line-height: 1.15; color: var(--gold-hell); hyphens: auto; overflow-wrap: normal; word-break: normal; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.buch-autor { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-ged); }
.buch-zeichen { opacity: 0.8; }
.buch-text { min-width: 0; }
.buch-text .kicker { font-size: 11px; margin-bottom: 4px; }
.buch-text h3 { font-size: 23px; font-weight: 600; margin-bottom: 4px; }
.buch-unter { margin: 0 0 6px; font-size: 14px; color: var(--text-ged); font-style: italic; }
.buch-text .klein { margin-bottom: 8px; }
.buch-text p { font-size: 15px; color: var(--text-ged); }
.buch-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.buch-link .knopf { padding: 8px 14px; font-size: 14px; }
.werbelink { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-klein); border: 1px solid var(--linie); padding: 2px 6px; }
.buch.kompakt .buch-umschlag { width: 92px; height: 126px; padding: 10px 6px 8px 10px; }
.buch.kompakt .buch-titel { font-size: 11px; -webkit-line-clamp: 6; }
.buch.kompakt .buch-autor { display: none; }
.buch.kompakt .buch-text h3 { font-size: 20px; }
.sprungmarken { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 18px; }
.sprungmarken a { padding: 6px 12px; border: 1px solid var(--linie); text-decoration: none; font-size: 14px; color: var(--text-ged); }
.sprungmarken a:hover { border-color: var(--gold); color: var(--gold); }
.buch-gruppe { font-family: var(--schrift); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 40px 0 16px; scroll-margin-top: 90px; }
.abschnitt h2 + .buch-gruppe, .abschnitt .leise + .buch-gruppe { margin-top: 20px; }
#deutsch, #englisch { scroll-margin-top: 60px; }
.kasten .buecher .buch { background: var(--grund); }
@media (max-width: 420px) { .buecher { grid-template-columns: 1fr; } .buch { flex-direction: column; } .buch-umschlag { transform: none; } }

/* Einblenden beim Scrollen (nur mit JavaScript; app.js setzt «warten» bei Elementen unterhalb des Bildschirms) */
.einblenden.warten { opacity: 0; transform: translateY(28px); }
.einblenden { transition: opacity 0.8s ease, transform 0.8s ease; }

@media (prefers-reduced-motion: reduce) {
  .buehne-text .kicker, .buehne-text h1, .buehne-text .lead, .buehne-text .knopfreihe, .buehne-uhr { animation: none; }
  .band-spur { animation: none; overflow-x: auto; width: auto; }
  .band-doppel { display: none; }
  .bildband { overflow-x: auto; }
  .einblenden.warten { transform: none; }
  .karte, .karte:hover, .karte > img, .kachel img, .band-kachel img { transition: none; transform: none; }
}
.animation.angehalten .schema * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .animation:not(.laeuft) .schema * { animation-play-state: paused !important; } }

/* Tabellen (Bildnachweise) */
.tabelle-box { overflow-x: auto; border: 1px solid var(--linie); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { color: var(--gold); font-weight: 600; background: var(--tief); }

/* Fusszeile */
.fuss { border-top: 1px solid var(--linie); background: var(--tief); margin-top: 40px; }
.fuss .wrap { padding-top: 40px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--text-klein); }
.fuss-name { font-family: var(--titel); font-size: 22px; color: var(--text); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fuss a { color: var(--text-ged); }

/* Geschichte: Zeitstrahl nach Epochen */
.epoche + .epoche { border-top: 1px solid var(--linie); padding-top: 48px; }
.zeitachse.gross { margin-top: 26px; }
.zeitachse.gross li { padding: 0 0 28px 28px; }
.zeitachse.gross li::before { top: 11px; width: 11px; height: 11px; left: -6px; box-shadow: 0 0 0 4px rgba(200, 164, 90, 0.15); }
.zeitachse.gross b { display: block; font-size: 30px; line-height: 1; margin: 0 0 6px; }
.zeitachse.gross h3 { font-size: 25px; font-weight: 600; margin: 0 0 6px; }
.zeitachse.gross p { margin: 0; font-size: 16px; color: var(--text-ged); }

/* Karte der Uhrenregionen (eigene Karte, Grundlage Natural Earth) */
.landkarte { margin: 28px 0; }
.karte-box { overflow-x: auto; background: var(--tief); border: 1px solid var(--linie-stark); }
.karte-schweiz { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .karte-schweiz { min-width: 560px; } }
.karte-nachbar { fill: #0D1D3A; stroke: rgba(200, 164, 90, 0.14); stroke-width: 1; stroke-linejoin: round; }
.karte-land { fill: #15284A; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; }
.karte-see { fill: #2A5A9A; opacity: 0.6; }
.karte-punkt { fill: var(--gold); stroke: var(--tief); stroke-width: 2; transition: fill 0.2s ease; }
.karte-ring { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: karte-puls 3.2s ease-out infinite; }
@keyframes karte-puls { 0% { opacity: 0.8; transform: scale(0.5); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
.karte-name { fill: var(--text); font: 600 17px var(--schrift); paint-order: stroke; stroke: var(--tief); stroke-width: 4px; stroke-linejoin: round; }
.landkarte a:hover .karte-name, .landkarte a:focus .karte-name { fill: var(--gold-hell); }
.landkarte a:hover .karte-punkt, .landkarte a:focus .karte-punkt { fill: var(--gold-hell); }
.landkarte a:focus { outline: none; }
.landkarte a:focus-visible .karte-punkt { stroke: var(--text); stroke-width: 3; }
.karte-museum { fill: #E9E4D6; stroke: var(--tief); stroke-width: 1.5; }
.landkarte figcaption { margin-top: 10px; font-size: 13px; color: var(--text-klein); }
.landkarte figcaption a { color: var(--text-ged); }
.zeichen-punkt, .zeichen-raute { display: inline-block; vertical-align: -1px; margin: 0 6px 0 2px; }
.zeichen-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.zeichen-raute { width: 8px; height: 8px; margin-left: 8px; background: #E9E4D6; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .karte-ring { animation: none; } }

/* Regionen, Personen, Museen */
.region, .person { padding: 8px 0 36px; scroll-margin-top: 90px; }
.region + .region, .person + .person { border-top: 1px solid var(--linie); padding-top: 36px; }
.region h2, .person h2 { font-size: clamp(30px, 3.6vw, 40px); margin: 0 0 12px; }
.person::after { content: ""; display: block; clear: both; }
.portraet { float: right; width: min(230px, 42%); margin: 6px 0 16px 26px; }
.portraet img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border: 1px solid var(--linie-stark); }
.portraet .bildzeile { font-size: 11px; line-height: 1.4; }
.fokus-rechts { object-position: 78% 30%; }
@media (max-width: 560px) { .portraet { width: 46%; margin-left: 16px; } }
.region h3 { font-family: var(--schrift); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 24px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a, .chips span { padding: 5px 12px; border: 1px solid var(--linie-stark); font-size: 14px; text-decoration: none; color: var(--text); }
.chips a:hover { border-color: var(--gold); color: var(--gold); }
.museen { margin: 0; padding-left: 20px; }
.museen li { margin-bottom: 12px; color: var(--text-ged); }
.museen a { font-weight: 600; }

/* Uhrmacherkurse */
.modell-liste.kurse { margin: 28px 0 8px; }
.kurs { display: flex; flex-direction: column; }
.kurs .kurs-angebot { color: var(--gold-hell); font-weight: 600; margin-bottom: 8px; }
.kurs .kicker a { color: inherit; text-decoration: none; }
.kurs-fakten { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0; font-size: 14px; }
.kurs-fakten dt { color: var(--text-klein); }
.kurs-fakten dd { margin: 0; color: var(--text); }
.kurs > p:last-child { margin-top: auto; padding-top: 6px; }

/* Abschlussprüfung und Urkunde */
.pruefung-start { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.urkunde-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--linie); }
.urkunde-form label { flex: 1 1 100%; font-weight: 600; }
.urkunde-form input { flex: 1 1 240px; min-height: 48px; padding: 10px 14px; background: var(--grund); border: 1px solid var(--linie-stark); color: var(--text); font: inherit; }
.urkunde-form input:focus { border-color: var(--gold); outline: none; }
.urkunde-bereich { margin-top: 28px; }
.urkunde { max-width: 760px; margin: 0 auto 18px; padding: 14px; background: #F6F1E4; color: #1C2731; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.urkunde-rahmen { padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 40px); border: 3px double #B08B42; text-align: center; }
.urkunde-zeichen svg { display: inline-block; }
.urkunde .urkunde-seite { margin: 6px 0 0; font-family: var(--titel); font-size: 22px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #8E7036; }
.urkunde .urkunde-titel { font-family: var(--titel); font-size: clamp(44px, 8vw, 72px); font-weight: 600; color: #1C2731; margin: 10px 0 14px; }
.urkunde .urkunde-text { margin: 0 0 8px; font-size: 16px; color: #3A4656; }
.urkunde .urkunde-person { margin: 6px 0 12px; font-family: var(--titel); font-size: clamp(30px, 6vw, 46px); font-style: italic; font-weight: 600; color: #1C2731; border-bottom: 1px solid #B08B42; display: inline-block; padding: 0 18px 4px; }
.urkunde .urkunde-grad { margin: 10px 0 0; font-weight: 700; color: #8E7036; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; }
.urkunde .urkunde-grad:empty { display: none; }
.urkunde .urkunde-datum { margin: 18px 0 0; font-size: 15px; color: #3A4656; }
.urkunde .urkunde-fuss { margin: 22px 0 0; font-size: 11px; color: #6B7586; letter-spacing: 0.04em; }
.urkunde-druck { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body.mit-urkunde { background: #fff; }
  body.mit-urkunde > * { display: none !important; }
  body.mit-urkunde > .urkunde-druck { display: block !important; }
  .urkunde-druck .urkunde { max-width: none; margin: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .urkunde-druck .urkunde-rahmen { padding: 18mm 20mm; }
}

/* Zubehör: Feld mit Zeichen statt Produktfoto (Rechte) */
.zubehoer-feld { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 120px; height: 120px; padding: 10px;
  background: radial-gradient(circle at 50% 35%, #1A3A78, #0B1A33); border: 1px solid var(--linie-stark); text-align: center; }
.zubehoer-feld span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-hell); }
.buch.kompakt .zubehoer-feld { width: 92px; height: 92px; }

/* automatisch erzeugt von tools/grafiken.py */
.schema .zuege .zug:nth-child(1) { animation-delay: 0.25s; }
.schema .zuege .zug:nth-child(2) { animation-delay: 0.50s; }
.schema .zuege .zug:nth-child(3) { animation-delay: 0.75s; }
.schema .zuege .zug:nth-child(4) { animation-delay: 1.00s; }
.schema .zuege .zug:nth-child(5) { animation-delay: 1.25s; }
.schema .zuege .zug:nth-child(6) { animation-delay: 1.50s; }
.schema .zuege .zug:nth-child(7) { animation-delay: 1.75s; }
.schema .zuege .zug:nth-child(8) { animation-delay: 2.00s; }
.schema .zuege .zug:nth-child(9) { animation-delay: 2.25s; }
.schema .zuege .zug:nth-child(10) { animation-delay: 2.50s; }
.schema .zuege .zug:nth-child(11) { animation-delay: 2.75s; }
.schema .zuege .zug:nth-child(12) { animation-delay: 3.00s; }
.schema .zuege .zug:nth-child(13) { animation-delay: 3.25s; }
.schema .zuege .zug:nth-child(14) { animation-delay: 3.50s; }
.schema .zuege .zug:nth-child(15) { animation-delay: 3.75s; }
.schema .zuege .zug:nth-child(16) { animation-delay: 4.00s; }
.schema .zuege .zug:nth-child(17) { animation-delay: 4.25s; }
.schema .zuege .zug:nth-child(18) { animation-delay: 4.50s; }
.schema .zuege .zug:nth-child(19) { animation-delay: 4.75s; }
.schema .zuege .zug:nth-child(20) { animation-delay: 5.00s; }
.schema .zuege .zug:nth-child(21) { animation-delay: 5.25s; }
.schema .zuege .zug:nth-child(22) { animation-delay: 5.50s; }
.schema .zuege .zug:nth-child(23) { animation-delay: 5.75s; }
.schema .zuege .zug:nth-child(24) { animation-delay: 6.00s; }
.schema .zuege .zug:nth-child(25) { animation-delay: 6.25s; }
.schema .zuege .zug:nth-child(26) { animation-delay: 6.50s; }
.schema .zuege .zug:nth-child(27) { animation-delay: 6.75s; }
.schema .zuege .zug:nth-child(28) { animation-delay: 7.00s; }
.schema .zuege .zug:nth-child(29) { animation-delay: 7.25s; }
.schema .zuege .zug:nth-child(30) { animation-delay: 7.50s; }
.schema .zuege .zug:nth-child(31) { animation-delay: 7.75s; }
.schema .zuege .zug:nth-child(32) { animation-delay: 8.00s; }
.schema .zuege .zug:nth-child(33) { animation-delay: 8.25s; }
.schema .zuege .zug:nth-child(34) { animation-delay: 8.50s; }
.schema .zuege .zug:nth-child(35) { animation-delay: 8.75s; }
.schema .zuege .zug:nth-child(36) { animation-delay: 9.00s; }
.schema .streifen-gruppe .zug-streifen:nth-child(1) { animation-delay: 0.6s; }
.schema .streifen-gruppe .zug-streifen:nth-child(2) { animation-delay: 1.2s; }
.schema .streifen-gruppe .zug-streifen:nth-child(3) { animation-delay: 1.8s; }
.schema .streifen-gruppe .zug-streifen:nth-child(4) { animation-delay: 2.4s; }
.schema .streifen-gruppe .zug-streifen:nth-child(5) { animation-delay: 3.0s; }
.schema .streifen-gruppe .zug-streifen:nth-child(6) { animation-delay: 3.6s; }
.schema .streifen-gruppe .zug-streifen:nth-child(7) { animation-delay: 4.2s; }
.schema .streifen-gruppe .zug-streifen:nth-child(8) { animation-delay: 4.8s; }
.schema .streifen-gruppe .zug-streifen:nth-child(9) { animation-delay: 5.4s; }
.schema .streifen-gruppe .zug-streifen:nth-child(10) { animation-delay: 6.0s; }
.schema .perlen-gruppe .perle:nth-child(1) { animation-delay: 0.12s; }
.schema .perlen-gruppe .perle:nth-child(2) { animation-delay: 0.24s; }
.schema .perlen-gruppe .perle:nth-child(3) { animation-delay: 0.36s; }
.schema .perlen-gruppe .perle:nth-child(4) { animation-delay: 0.48s; }
.schema .perlen-gruppe .perle:nth-child(5) { animation-delay: 0.60s; }
.schema .perlen-gruppe .perle:nth-child(6) { animation-delay: 0.72s; }
.schema .perlen-gruppe .perle:nth-child(7) { animation-delay: 0.84s; }
.schema .perlen-gruppe .perle:nth-child(8) { animation-delay: 0.96s; }
.schema .perlen-gruppe .perle:nth-child(9) { animation-delay: 1.08s; }
.schema .perlen-gruppe .perle:nth-child(10) { animation-delay: 1.20s; }
.schema .perlen-gruppe .perle:nth-child(11) { animation-delay: 1.32s; }
.schema .perlen-gruppe .perle:nth-child(12) { animation-delay: 1.44s; }
.schema .perlen-gruppe .perle:nth-child(13) { animation-delay: 1.56s; }
.schema .perlen-gruppe .perle:nth-child(14) { animation-delay: 1.68s; }
.schema .perlen-gruppe .perle:nth-child(15) { animation-delay: 1.80s; }
.schema .perlen-gruppe .perle:nth-child(16) { animation-delay: 1.92s; }
.schema .perlen-gruppe .perle:nth-child(17) { animation-delay: 2.04s; }
.schema .perlen-gruppe .perle:nth-child(18) { animation-delay: 2.16s; }
.schema .perlen-gruppe .perle:nth-child(19) { animation-delay: 2.28s; }
.schema .perlen-gruppe .perle:nth-child(20) { animation-delay: 2.40s; }
.schema .perlen-gruppe .perle:nth-child(21) { animation-delay: 2.52s; }
.schema .perlen-gruppe .perle:nth-child(22) { animation-delay: 2.64s; }
.schema .perlen-gruppe .perle:nth-child(23) { animation-delay: 2.76s; }
.schema .perlen-gruppe .perle:nth-child(24) { animation-delay: 2.88s; }
.schema .perlen-gruppe .perle:nth-child(25) { animation-delay: 3.00s; }
.schema .perlen-gruppe .perle:nth-child(26) { animation-delay: 3.12s; }
.schema .perlen-gruppe .perle:nth-child(27) { animation-delay: 3.24s; }
.schema .perlen-gruppe .perle:nth-child(28) { animation-delay: 3.36s; }
.schema .perlen-gruppe .perle:nth-child(29) { animation-delay: 3.48s; }
.schema .perlen-gruppe .perle:nth-child(30) { animation-delay: 3.60s; }
.schema .perlen-gruppe .perle:nth-child(31) { animation-delay: 3.72s; }
.schema .perlen-gruppe .perle:nth-child(32) { animation-delay: 3.84s; }
.schema .perlen-gruppe .perle:nth-child(33) { animation-delay: 3.96s; }
.schema .perlen-gruppe .perle:nth-child(34) { animation-delay: 4.08s; }
.schema .perlen-gruppe .perle:nth-child(35) { animation-delay: 4.20s; }
.schema .perlen-gruppe .perle:nth-child(36) { animation-delay: 4.32s; }
.schema .perlen-gruppe .perle:nth-child(37) { animation-delay: 4.44s; }
.schema .perlen-gruppe .perle:nth-child(38) { animation-delay: 4.56s; }
.schema .perlen-gruppe .perle:nth-child(39) { animation-delay: 4.68s; }
.schema .perlen-gruppe .perle:nth-child(40) { animation-delay: 4.80s; }
.schema .perlen-gruppe .perle:nth-child(41) { animation-delay: 4.92s; }
.schema .perlen-gruppe .perle:nth-child(42) { animation-delay: 5.04s; }
.schema .perlen-gruppe .perle:nth-child(43) { animation-delay: 5.16s; }
.schema .perlen-gruppe .perle:nth-child(44) { animation-delay: 5.28s; }
.schema .perlen-gruppe .perle:nth-child(45) { animation-delay: 5.40s; }
.schema .perlen-gruppe .perle:nth-child(46) { animation-delay: 5.52s; }
.schema .perlen-gruppe .perle:nth-child(47) { animation-delay: 5.64s; }
.schema .perlen-gruppe .perle:nth-child(48) { animation-delay: 5.76s; }
.schema .perlen-gruppe .perle:nth-child(49) { animation-delay: 5.88s; }
.schema .perlen-gruppe .perle:nth-child(50) { animation-delay: 6.00s; }
.schema .perlen-gruppe .perle:nth-child(51) { animation-delay: 6.12s; }
.schema .perlen-gruppe .perle:nth-child(52) { animation-delay: 6.24s; }
.schema .perlen-gruppe .perle:nth-child(53) { animation-delay: 6.36s; }
.schema .perlen-gruppe .perle:nth-child(54) { animation-delay: 6.48s; }
.schema .perlen-gruppe .perle:nth-child(55) { animation-delay: 6.60s; }
.schema .perlen-gruppe .perle:nth-child(56) { animation-delay: 6.72s; }
.schema .perlen-gruppe .perle:nth-child(57) { animation-delay: 6.84s; }
.schema .perlen-gruppe .perle:nth-child(58) { animation-delay: 6.96s; }
.schema .perlen-gruppe .perle:nth-child(59) { animation-delay: 7.08s; }
.schema .perlen-gruppe .perle:nth-child(60) { animation-delay: 7.20s; }
.schema .perlen-gruppe .perle:nth-child(61) { animation-delay: 7.32s; }
.schema .perlen-gruppe .perle:nth-child(62) { animation-delay: 7.44s; }
.schema .perlen-gruppe .perle:nth-child(63) { animation-delay: 7.56s; }
.schema .perlen-gruppe .perle:nth-child(64) { animation-delay: 7.68s; }