/* mailboxbuch.de: Mobile first, Desktop über min-width. */

@font-face { font-family: "Barlow Condensed"; font-weight: 900; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-black.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-extrabold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-bold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-semibold.woff2") format("woff2"); }
@font-face { font-family: "Charis SIL"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/charis-sil-regular.woff2") format("woff2"); }
@font-face { font-family: "Charis SIL"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/charis-sil-italic.woff2") format("woff2"); }
@font-face { font-family: "Charis SIL"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/charis-sil-bold.woff2") format("woff2"); }
@font-face { font-family: "WAnsiDraw VGA"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/wansidraw-vga.woff2") format("woff2"); }

:root {
  --anthrazit: #1c1d1f;
  --anthrazit-tief: #131415;
  --anthrazit-linie: #34363a;
  --hell: #ececea;
  --hell-matt: #9a9da1;
  --gruen: #9ad3b0;
  --papier: #ffffff;
  --papier-grau: #eff0f1;
  --papier-linie: #d5d7da;
  --tinte: #121314;
  --tinte-grau: #5b5e62;
  --register: #2f6abd;
  --kopf: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --text: "Charis SIL", Georgia, "Times New Roman", serif;
  --vga: "WAnsiDraw VGA", "Lucida Console", Consolas, monospace;
  --breit: 1240px;
  --rand: 18px;
}
.teil-1 { --register: #2f6abd; }
.teil-2 { --register: #27953c; }
.teil-3 { --register: #d01b91; }
.teil-4 { --register: #009bad; }
.teil-5 { --register: #d0272b; }
.teil-6 { --register: #7b7879; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--register); text-underline-offset: 0.15em; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 3px solid var(--register); outline-offset: 2px; }
.kopf :focus-visible, .hero :focus-visible, .projekte :focus-visible, .fuss :focus-visible, .teil-kopf :focus-visible { outline-color: var(--hell); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, h3, h4 {
  font-family: var(--kopf);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 9vw, 4.6rem); }
h2 { font-size: clamp(2rem, 7vw, 3.4rem); }
h3 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; }
p { margin: 0 0 1em; }
.vorspann { font-weight: 700; font-size: 1.15rem; line-height: 1.4; }
.dachzeile {
  font-family: var(--kopf);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.85rem;
  color: var(--register);
  margin: 0 0 0.6em;
}
.kleingedruckt { font-size: 0.9rem; color: var(--tinte-grau); }
.innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
.sprung {
  position: absolute; left: -999px; top: 0; background: var(--hell); color: var(--tinte);
  padding: 8px 12px; font-family: var(--kopf); font-weight: 800; z-index: 100;
}
.sprung:focus { left: 8px; top: 8px; }

/* Knöpfe */
.knopf {
  display: inline-block;
  font-family: var(--kopf);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.65em 1.4em;
  background: var(--tinte);
  color: var(--papier);
  border: 2px solid var(--tinte);
  cursor: pointer;
  line-height: 1.1;
}
.knopf:hover { background: var(--papier); color: var(--tinte); }
.knopf-zweit { background: transparent; color: var(--tinte); }
.knopf-zweit:hover { background: var(--tinte); color: var(--papier); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 1.4em 0 0.9em; }
.hero .knopf, .projekte .knopf, .teil-kopf .knopf { background: var(--hell); color: var(--tinte); border-color: var(--hell); }
.hero .knopf:hover, .projekte .knopf:hover, .teil-kopf .knopf:hover { background: transparent; color: var(--hell); }
.hero .knopf-zweit { background: transparent; color: var(--hell); border-color: var(--hell-matt); }
.hero .knopf-zweit:hover { background: var(--hell); color: var(--tinte); border-color: var(--hell); }

/* Kopf der Seite */
.kopf { background: var(--anthrazit); color: var(--hell); border-bottom: 1px solid var(--anthrazit-linie); }
.kopf-innen { max-width: var(--breit); margin: 0 auto; padding: 16px var(--rand); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.marke { text-decoration: none; color: var(--hell); display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.marke:hover { color: var(--papier); }
.marke-name { font-family: var(--vga); font-weight: 400; font-size: 1.9rem; letter-spacing: 0.06em; line-height: 1; color: var(--papier); white-space: nowrap; }
.marke-cursor { display: inline-block; margin-left: 0.04em; color: var(--papier); animation: cursor 1.06s step-end infinite; }
@keyframes cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.marke-zusatz { font-family: var(--vga); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.1em; line-height: 1; color: var(--hell-matt); white-space: nowrap; }
.menue-knopf { list-style: none; cursor: pointer; font-family: var(--kopf); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1rem; padding: 6px 12px; border: 2px solid var(--hell-matt); color: var(--hell); }
.menue-knopf::-webkit-details-marker { display: none; }
.menue[open] .menue-knopf { background: var(--hell); color: var(--tinte); border-color: var(--hell); }
.navi { display: none; flex-basis: 100%; }
.menue[open] + .navi { display: block; }
.navi ul { list-style: none; margin: 8px 0 0; padding: 0; }
.navi li { margin: 0; }
.navi a { display: block; padding: 11px 0; color: var(--hell); text-decoration: none; font-family: var(--kopf); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; border-top: 1px solid var(--anthrazit-linie); }
.navi a:hover { color: var(--papier); }
.navi a[aria-current] { color: var(--papier); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }

.start .inhalt-liste h2, .start .blick-kopf h2, .start .projekte-kopf h2, .start .geschenk h2 { font-weight: 700; letter-spacing: -0.015em; }

/* Hero: Text links, das ANSI-Bild als Bildschirm rechts */
.hero { background: var(--anthrazit); color: var(--hell); }
.hero-innen { max-width: var(--breit); margin: 0 auto; padding: 44px var(--rand) 48px; display: grid; gap: 36px; }
.hero h1 { color: var(--papier); font-weight: 600; font-size: clamp(3rem, 12.5vw, 5.6rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 0.45em; }
.hero-vorspann { font-size: 1.08rem; line-height: 1.6; max-width: 34em; color: var(--hell); }
.hero-fakten { font-family: var(--kopf); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; color: var(--hell-matt); margin: 0; }
.hero-bild { margin: 0; align-self: center; }
.hero-schirm { position: relative; container-type: inline-size; background: #000; padding: 14px; border: 1px solid var(--anthrazit-linie); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }
.schirm-text { position: absolute; left: 14px; top: 14px; right: 14px; margin: 0; padding: 0.4em 0.6em; font-family: var(--vga); font-size: calc((100cqw - 28px) / 40); line-height: 1; color: #aaaaaa; white-space: pre; pointer-events: none; z-index: 1; }
.schirm-text:empty { display: none; }
.hero-schirm img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #000; clip-path: inset(0 0 var(--rest, 0%) 0); }
.hero-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 14px; }
.knopf-anrufen {
  font-family: var(--vga); font-size: 0.95rem; letter-spacing: 0;
  background: transparent; color: var(--hell);
  border: 1px solid var(--hell-matt); padding: 7px 14px; cursor: pointer;
}
.knopf-anrufen:hover, .knopf-anrufen[aria-pressed="true"] { background: var(--hell); color: var(--tinte); border-color: var(--hell); }
.modem-status { font-family: var(--vga); font-size: 0.95rem; color: var(--gruen); min-width: 10ch; }
.knopf-box { font-family: var(--vga); font-size: 0.95rem; text-decoration: none; background: var(--hell); color: var(--tinte); border: 1px solid var(--hell); padding: 7px 14px; }
.knopf-box:hover { background: transparent; color: var(--hell); }
.knopf-box[hidden] { display: none; }
.hero-quelle { margin-left: auto; font-family: var(--kopf); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6f7276; }

/* Inhalt: Buch und Inhaltsverzeichnis */
.inhalt { padding: 56px 0 64px; }
.inhalt-raster { display: grid; gap: 40px; }
.inhalt-buch img { width: min(62vw, 300px); height: auto; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28), 0 2px 5px rgba(0, 0, 0, 0.25); }
.buchdaten { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 26px 0 0; font-size: 0.95rem; }
.buchdaten dt { font-family: var(--kopf); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8rem; color: var(--tinte-grau); padding-top: 3px; }
.buchdaten dd { margin: 0; }
.inhalt-liste h2 { margin-bottom: 0.5em; }
.toc { list-style: none; margin: 0; padding: 0; border-bottom: 2px solid var(--tinte); }
.toc li { border-top: 1px solid var(--papier-linie); }
.toc li:first-child { border-top: 2px solid var(--tinte); }
.toc a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 0 20px; color: inherit; text-decoration: none; }
.toc-nr { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: var(--register); color: #fff; font-family: var(--kopf); font-weight: 900; font-size: 1.35rem; }
.toc-kopf { display: block; }
.toc-teil { display: block; font-family: var(--kopf); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78rem; color: var(--register); margin-bottom: 2px; }
.toc-titel { display: block; font-family: var(--kopf); font-weight: 900; font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1; }
.toc-seite { font-family: var(--kopf); font-weight: 900; font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1; color: var(--papier-linie); align-self: end; }
.toc-text { grid-column: 2 / -1; color: var(--tinte-grau); font-size: 1rem; max-width: 38em; }
.toc a:hover .toc-titel { color: var(--register); }
.toc a:hover .toc-seite { color: var(--register); }

/* Blick ins Heft: der Seitenstreifen */
.blick { background: var(--papier-grau); padding: 56px 0 40px; border-top: 1px solid var(--papier-linie); }
.blick-kopf { display: grid; gap: 4px 40px; align-items: end; margin-bottom: 26px; }
.blick-kopf h2 { margin: 0; }
.blick-kopf p { margin: 0; color: var(--tinte-grau); max-width: 30em; }
.blick-pfeile { display: none; gap: 8px; }
.pfeil { font-family: var(--kopf); font-weight: 900; font-size: 1.4rem; width: 48px; height: 48px; background: var(--papier); color: var(--tinte); border: 2px solid var(--tinte); cursor: pointer; line-height: 1; }
.pfeil:hover { background: var(--tinte); color: var(--papier); }
.streifen {
  --start: max(var(--rand), calc((100vw - var(--breit)) / 2 + var(--rand)));
  list-style: none; margin: 0; padding: 6px var(--start) 26px;
  display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--start);
  scrollbar-width: thin;
}
.streifen li { flex: 0 0 auto; scroll-snap-align: start; margin: 0; }
.streifen-seiten { display: flex; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.2); }
.streifen-seiten a { display: block; position: relative; }
.streifen img { height: clamp(340px, 98vw, 520px); width: auto; max-width: none; }
.doppel .streifen-seiten a:first-child::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 26px; background: linear-gradient(to left, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)); pointer-events: none; }
.doppel .streifen-seiten a:last-child::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 18px; background: linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)); pointer-events: none; z-index: 1; }
.streifen-text { margin: 12px 0 0; font-family: var(--kopf); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8rem; color: var(--tinte-grau); }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: var(--anthrazit-tief); color: var(--hell); max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.9); }
.lightbox-innen { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; }
.lightbox-bild { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; }
.lightbox-bild img { max-width: 100%; max-height: calc(100vh - 90px); width: auto; height: auto; object-fit: contain; }
.lightbox-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 14px; font-family: var(--kopf); font-weight: 600; letter-spacing: 0.06em; font-size: 0.95rem; text-transform: uppercase; }
.lightbox-fuss p { margin: 0; }
.lightbox button { font-family: var(--kopf); font-weight: 800; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; background: transparent; color: var(--hell); border: 2px solid var(--hell-matt); padding: 8px 12px; cursor: pointer; }
.lightbox button:hover { background: var(--hell); color: var(--tinte); }
.lightbox-schliessen { position: absolute; right: 12px; top: 12px; }

/* Drei Projekte */
.projekte { background: var(--anthrazit-tief); color: var(--hell); padding: 64px 0 72px; }
.projekte a { color: var(--papier); }
.projekte a:hover { color: var(--hell-matt); }
.projekte-kopf { display: grid; gap: 8px 48px; margin-bottom: 40px; }
.projekte-kopf h2 { color: var(--papier); margin: 0; }
.projekte-kopf p { color: var(--hell); margin: 0; max-width: 36em; font-size: 1.1rem; }
.projekte-raster { display: grid; gap: 48px; }
.projekt { margin: 0; display: grid; gap: 18px; align-content: start; }
.projekt img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #000; border: 1px solid var(--anthrazit-linie); }
.projekt-gross img { aspect-ratio: auto; }
.projekt h3 { color: var(--papier); margin-bottom: 0.3em; }
.projekt-text p { margin: 0 0 0.8em; max-width: 34em; }
.projekt-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--kopf); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 1rem; }
.projekt-links a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* Schluss: Geschenk und Autor */
.schluss { padding: 64px 0 72px; }
.schluss-raster { display: grid; gap: 44px; }
.geschenk h2 { font-size: clamp(2.2rem, 7vw, 3.6rem); max-width: 12em; }
.schluss-gross { font-size: 1.2rem; line-height: 1.55; max-width: 32em; }
.autor { border-top: 2px solid var(--tinte); padding-top: 16px; font-size: 1rem; }
.autor-titel { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 12px; }

/* Kästen aus dem Heft */
.kasten { margin: 1.5em 0; border: 1px solid var(--tinte); box-shadow: 4px 4px 0 var(--tinte); background: var(--papier-grau); font-size: 1rem; }
.kasten p { margin: 0; padding: 12px 14px; }
.kasten-titel { font-family: var(--kopf); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem; background: var(--tinte); color: var(--papier); padding: 6px 14px !important; }
.kasten-brannik { background: #e9ebed; }
.kasten-brannik p:not(.kasten-titel) { font-style: italic; }
.kasten-randnotiz { background: var(--papier); }
.kasten-randnotiz p:not(.kasten-titel) { font-style: italic; }
.kasten-damals .kasten-titel { background: #3a3c40; }

/* Fuß */
.fuss { background: var(--anthrazit); color: var(--hell-matt); padding: 48px 0 30px; font-size: 0.95rem; }
.fuss-innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); display: grid; gap: 28px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin: 0 0 7px; }
.fuss a { color: var(--hell); text-decoration: none; }
.fuss a:hover { color: var(--papier); text-decoration: underline; }
.fuss-hinweis { margin: 1.1em 0 0; }
.fuss-titel { font-family: var(--kopf); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem; color: var(--papier); margin: 0 0 10px; }
.fuss-zeile { border-top: 1px solid var(--anthrazit-linie); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.fuss-zeile p { margin: 0; }
.fuss-recht a + a { margin-left: 0.75em; }

/* Teilseiten */
.teil-kopf { background: var(--anthrazit); color: var(--hell); padding: 36px 0 40px; position: relative; }
.teil-aufmacher { max-width: 560px; margin: 0 auto; padding: 0 var(--rand); }
.teil-aufmacher img { width: 100%; height: auto; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); }
.teil-titelzeile { max-width: var(--breit); margin: 0 auto; padding: 30px var(--rand) 0; }
.teil-titelzeile h1 { color: var(--papier); }
.teil-titelzeile .dachzeile { color: var(--hell-matt); }
.teil-titelzeile .vorspann { max-width: 40em; font-weight: 400; font-size: 1.15rem; color: var(--hell); }
.register-tab { display: none; }
.heft { background: var(--papier); padding: 44px 0 20px; }
.heft-innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.heft-text, .heft-rand { min-width: 0; overflow-wrap: anywhere; }
.heft-text h2 { color: var(--register); font-size: clamp(1.6rem, 5vw, 2.1rem); margin-top: 1.2em; }
.heft-text h2:first-child { margin-top: 0; }
.heft-text figure { margin: 1.4em 0; }
.heft-text figcaption, .heft-rand figcaption { font-family: var(--kopf); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.03em; color: var(--tinte-grau); margin-top: 8px; text-transform: none; }
.buchseite { display: grid; gap: 12px; padding: 18px 0; border-top: 1px solid var(--papier-linie); border-bottom: 1px solid var(--papier-linie); }
.buchseite a, .buchseite img { display: block; }
.buchseite img { border: 1px solid var(--papier-linie); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); width: min(100%, 280px); height: auto; }
.heft-text .buchseite figcaption { margin: 0; font-family: var(--kopf); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.01em; line-height: 1.2; color: var(--tinte); }
.heft-text .ansi img { width: auto; max-width: 100%; max-height: 460px; }
.rand-block { display: grid; gap: 8px; }
.ansi img { background: #000; }
.heft-rand { font-size: 0.98rem; }
.rand-titel { font-size: 1.3rem; font-weight: 800; margin: 0 0 8px; }
.kapitel { width: 100%; border-collapse: collapse; font-family: var(--kopf); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; margin: 0 0 24px; }
.kapitel th { background: var(--tinte); color: var(--papier); text-align: left; padding: 5px 8px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; }
.kapitel th:last-child, .kapitel td:last-child { text-align: right; }
.kapitel td { padding: 4px 8px; border-bottom: 1px solid var(--papier-linie); }
.kapitel tbody tr:nth-child(even) td { background: var(--papier-grau); }
.rand-links ul { list-style: none; padding: 0; margin: 0 0 24px; }
.rand-links li { margin: 0 0 8px; padding-left: 1.1em; position: relative; }
.rand-links li::before { content: "\203A"; position: absolute; left: 0; top: -0.05em; color: var(--register); font-family: var(--kopf); font-weight: 900; font-size: 1.3em; }
.rand-links a { font-family: var(--kopf); font-weight: 800; font-size: 1.1rem; text-decoration: none; }
.rand-links a:hover { text-decoration: underline; }
.teil-fuss { background: var(--papier); padding: 10px 0 60px; }
.teil-fuss-innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
.teil-kauf { border-top: 2px solid var(--tinte); border-bottom: 1px solid var(--papier-linie); padding: 22px 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; }
.teil-kauf p { margin: 0; max-width: 40em; }
.teil-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--kopf); font-weight: 800; font-size: 1.15rem; }
.teil-nav a { text-decoration: none; color: var(--tinte); }
.teil-nav a:hover { color: var(--register); }
.teil-nav .weiter { margin-left: auto; text-align: right; }
.teil-nav small { display: block; font-family: var(--kopf); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.75rem; color: var(--tinte-grau); }

/* Textseiten: Downloads, Links, Impressum, Datenschutz */
.textseite { padding: 44px 0 60px; }
.textseite h1 { font-size: clamp(2.4rem, 9vw, 4.2rem); }
.textseite h2 { font-size: clamp(1.7rem, 5vw, 2.4rem); margin-top: 1.4em; }
.textseite h3 { margin-top: 1.2em; }
.textseite .lesetext { max-width: 44em; overflow-wrap: anywhere; }
.textseite ul { padding-left: 1.2em; }
.hinweis { background: var(--papier-grau); border-left: 0; border-top: 2px solid var(--tinte); padding: 14px 16px; max-width: 44em; }
.hinweis p { margin: 0; }
.hinweis p + p { margin-top: 0.6em; }
.hinweis-titel { font-family: var(--kopf); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem; margin: 0 0 4px; }

/* Downloads */
.dl-abschnitt { border-top: 2px solid var(--tinte); padding: 26px 0 44px; margin-top: 30px; display: grid; gap: 26px; }
.dl-kopf h2 { margin: 0 0 0.4em; font-size: clamp(1.8rem, 6vw, 2.4rem); }
.dl-kopf p { max-width: 34em; }
.dl-knopf { margin: 1.2em 0 0.4em; }
.dl-info { font-family: var(--kopf); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; color: var(--tinte-grau); margin: 0 0 1em; }
.dl-mehr { font-family: var(--kopf); font-weight: 600; font-size: 1.05rem; }
.dl-inhalt { min-width: 0; }
.dl-vorschau { width: min(100%, 420px); height: auto; border: 1px solid var(--papier-linie); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16); }
.textseite .kurs-liste { list-style: none; margin: 0; padding: 0; }
.kurs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 0 26px; margin: 0 0 26px; border-bottom: 1px solid var(--papier-linie); }
.kurs:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.kurs-bild { background: #000; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; }
.kurs-bild img { width: 100%; height: 100%; object-fit: contain; }
.kurs h3 { margin: 0 0 0.25em; font-size: 1.5rem; }
.stufen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.stufen-label { font-family: var(--kopf); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; color: var(--tinte-grau); margin-right: 6px; flex-basis: 100%; }
.stufen a { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 2px solid var(--tinte); color: var(--tinte); text-decoration: none; font-family: var(--kopf); font-weight: 800; font-size: 1.1rem; }
.stufen a:hover { background: var(--tinte); color: var(--papier); }
.software { margin: 0 0 34px; }
.software:last-child { margin-bottom: 0; }
.software h3 { margin: 0 0 0.3em; }
.software p { max-width: 44em; }
.software .dateiliste { max-width: 44em; }
.dateiliste { list-style: none; padding: 0; margin: 0 0 1em; font-family: var(--kopf); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; }
.dateiliste li { padding: 6px 0; border-bottom: 1px solid var(--papier-linie); display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; overflow-wrap: anywhere; min-width: 0; }
.dateiliste li > * { min-width: 0; }
.dateiliste a { text-decoration: none; }
.dateiliste a:hover { text-decoration: underline; }
.dateiliste .groesse { color: var(--tinte-grau); font-weight: 400; }

/* Links */
.linkgruppe { margin: 0 0 30px; }
.linkgruppe h2 { margin-top: 1em; }
.linkliste { list-style: none; padding: 0; margin: 0; max-width: 46em; overflow-wrap: anywhere; }
.linkliste li { padding: 12px 0; border-bottom: 1px solid var(--papier-linie); }
.linkliste a { font-family: var(--kopf); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.02em; text-decoration: none; }
.linkliste a:hover { text-decoration: underline; }
.linkliste .adresse { display: block; font-family: var(--vga); font-size: 0.9rem; color: var(--tinte-grau); margin: 2px 0 4px; word-break: break-all; }
.linkliste p { margin: 0; }

/* Impressum, Datenschutz */
.adresse-block { font-style: normal; background: var(--papier-grau); border-top: 2px solid var(--tinte); padding: 14px 16px; display: block; max-width: 36em; overflow-wrap: anywhere; margin: 0 0 1.2em; }
.adresse-block p { margin: 0; }

/* 404 */
.fehler { max-width: var(--breit); margin: 0 auto; padding: 60px var(--rand) 80px; }
.terminal-gross { font-family: var(--vga); font-size: 1.1rem; color: var(--tinte-grau); }
.terminal-gross p { margin: 0 0 4px; }
.fehler h1 { margin-top: 20px; font-family: var(--vga); font-weight: 400; letter-spacing: 0.06em; font-size: clamp(2.6rem, 11vw, 6rem); }
.fehler-titel .marke-cursor { color: var(--tinte); }

/* Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-schirm img { clip-path: none; }
}

/* Breitere Bildschirme */
@media (min-width: 600px) {
  :root { --rand: 28px; }
  .navi ul { display: flex; flex-wrap: wrap; gap: 0 4px; }
  .navi a { border-top: 0; padding: 6px 8px; }
  .projekte-raster { grid-template-columns: 1fr 1fr; gap: 56px 40px; }
  .projekt-gross { grid-column: 1 / -1; }
  .heft-innen { grid-template-columns: minmax(0, 1fr) 300px; }
  .fuss-innen { grid-template-columns: 1fr 1fr; }
  .kurs { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: center; }
  .stufen-label { flex-basis: auto; }
  .fuss-zeile { grid-column: 1 / -1; }
  .streifen img { height: clamp(380px, 60vw, 520px); }
}

@media (min-width: 1100px) {
  .hero-innen { grid-template-columns: minmax(0, 1fr) 670px; gap: 56px; align-items: center; }
  .hero h1 { font-size: clamp(4rem, 5.4vw, 5rem); }
}

@media (min-width: 900px) {
  :root { --rand: 40px; }
  .menue { display: none; }
  .kopf-innen { flex-wrap: nowrap; }
  .navi { display: block; flex-basis: auto; }
  .navi ul { margin: 0; padding: 0; gap: 0 6px; }
  .navi a { font-size: 0.98rem; padding: 6px 9px; }
  .hero-innen { padding: 72px var(--rand) 76px; }
  .inhalt { padding: 84px 0 92px; }
  .inhalt-raster { grid-template-columns: 300px minmax(0, 1fr); gap: 80px; align-items: start; }
  .inhalt-buch { position: sticky; top: 30px; }
  .inhalt-buch img { width: 100%; }
  .toc a { grid-template-columns: 3rem minmax(0, 1fr) 5rem; gap: 6px 22px; padding: 24px 0 26px; }
  .toc-nr { width: 3rem; height: 3rem; font-size: 1.6rem; }
  .toc-titel, .toc-seite { font-size: 2.5rem; }
  .toc-seite { text-align: right; align-self: start; padding-top: 1.1rem; }
  .toc-text { grid-column: 2 / 3; font-size: 1.05rem; }
  .blick { padding: 84px 0 56px; }
  .blick-kopf { grid-template-columns: auto minmax(0, 1fr) auto; }
  .blick-pfeile { display: flex; margin: 0; }
  .projekte { padding: 92px 0 100px; }
  .projekte-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; margin-bottom: 56px; }
  .projekt-gross { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; }
  .schluss { padding: 92px 0 100px; }
  .schluss-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 80px; align-items: start; }
  .autor { margin-top: 12px; }
  .teil-kopf { padding: 56px 0 60px; }
  .teil-kopf-innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 64px; align-items: center; }
  .teil-aufmacher { margin: 0; max-width: none; padding: 0; }
  .teil-titelzeile { padding: 0; }
  .register-tab {
    display: block; position: absolute; right: 0; top: 60px;
    writing-mode: vertical-rl;
    background: var(--register); color: #fff;
    font-family: var(--kopf); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase;
    padding: 24px 10px;
  }
  .heft { padding-top: 64px; }
  .heft-innen { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
  .heft-rand { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .kapitel td { padding: 3px 8px; }
  .heft-text { font-size: 1.1rem; }
  .buchseite { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; }
  .buchseite img { width: 100%; }
  .fuss-innen { grid-template-columns: 1fr 1fr 1fr 1.4fr; }
  .dl-abschnitt { grid-template-columns: 320px minmax(0, 1fr); gap: 0 64px; align-items: start; margin-top: 44px; padding: 32px 0 56px; }
  .dl-kopf { position: sticky; top: 24px; }
  .linkgruppe { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0 56px; align-items: start; margin: 0; padding: 28px 0 44px; border-top: 2px solid var(--tinte); }
  .linkgruppe h2 { position: sticky; top: 24px; margin: 0; font-size: 2.2rem; }
  .linkgruppe .linkliste { max-width: none; }
  .linkgruppe .linkliste li:first-child { padding-top: 0; }
  .lightbox-bild img { max-height: calc(100vh - 80px); }
}

/* Bestellung mit Widmung: kleine Hinweise auf Startseite und Teilseiten */
.widmung-hinweis { font-size: 0.95rem; color: var(--tinte-grau); margin: 0; }
.hero .widmung-hinweis { color: var(--hell-matt); margin: -0.2em 0 1em; }
.hero .widmung-hinweis a { color: var(--hell); }
.hero .widmung-hinweis a:hover { color: var(--papier); }
.teil-kauf .widmung-hinweis { flex-basis: 100%; }
.geschenk .knoepfe { margin: 1.2em 0 0.6em; }
.geschenk-widmung { font-size: 0.95rem; color: var(--tinte-grau); max-width: 30em; }

/* Bestellseite und Dankeseite */
.bestellseite { padding: 40px 0 64px; }
.bestell-raster { display: grid; gap: 36px; }
.bestell-info h1, .danke h1 { font-weight: 700; font-size: clamp(2.3rem, 9vw, 3.6rem); letter-spacing: -0.015em; max-width: 13em; }
.bestell-vorspann { font-size: 1.15rem; line-height: 1.55; max-width: 32em; }
.haken { list-style: none; margin: 1.2em 0 0; padding: 0; }
.haken li { position: relative; padding: 0 0 0 1.9em; margin: 0 0 0.45em; }
.haken li::before {
  content: ""; position: absolute; left: 0.2em; top: 0.28em;
  width: 0.45em; height: 0.8em;
  border: solid var(--register); border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.bestell-buch { display: none; }
.bestell-buch img { width: 100%; height: auto; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28), 0 2px 5px rgba(0, 0, 0, 0.25); }
.bestell-formular { border-top: 2px solid var(--tinte); padding-top: 18px; min-width: 0; }
.bestell-formular h2 { font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 700; margin-bottom: 0.5em; }
.bestell-formular form { margin: 0; }
.bestell-formular fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.bestell-formular legend {
  font-family: var(--kopf); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.85rem;
  color: var(--tinte); padding: 0; margin: 0 0 12px;
}
.feld { margin: 0 0 16px; min-width: 0; }
.feld label, .feld-titel { display: block; font-family: var(--kopf); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; margin: 0 0 4px; }
.feld-frei { font-weight: 600; color: var(--tinte-grau); }
.feld input, .feld textarea {
  display: block; width: 100%; margin: 0;
  font: inherit; font-size: 1.0625rem; line-height: 1.4; color: var(--tinte);
  background: var(--papier); border: 1px solid #8b8e92; border-radius: 0;
  padding: 10px 12px;
}
.feld textarea { resize: vertical; min-height: 6.5em; }
.feld input::placeholder, .feld textarea::placeholder { color: #8b8e92; opacity: 1; }
.feld input:focus, .feld textarea:focus { border-color: var(--tinte); outline: 3px solid var(--register); outline-offset: 0; }
.feld-falsch input, .feld-falsch textarea { border: 2px solid #b3261e; padding: 9px 11px; }
.feld-fehler { color: #b3261e; font-weight: 700; font-size: 0.95rem; margin: 6px 0 0; }
.feld-hinweis { font-size: 0.92rem; color: var(--tinte-grau); margin: 6px 0 0; }
.zaehler { display: block; font-family: var(--kopf); font-weight: 600; letter-spacing: 0.06em; font-size: 0.9rem; margin-bottom: 2px; }
.zaehler-voll { color: #b3261e; }
.feld-land .feld-wert { margin: 0; padding: 4px 0 0; }
.falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bestell-meldung { background: #fbeceb; border-top: 2px solid #b3261e; padding: 12px 14px; margin: 0 0 20px; }
.bestell-meldung p { margin: 0; font-weight: 700; }
.bestell-summe { background: var(--papier-grau); border-top: 2px solid var(--tinte); padding: 14px 16px 16px; margin: 22px 0 18px; }
.bestell-summe-titel { font-family: var(--kopf); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem; margin: 0 0 8px; }
.bestell-summe dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; font-size: 0.98rem; }
.bestell-summe dt { font-family: var(--kopf); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem; color: var(--tinte-grau); margin-top: 8px; }
.bestell-summe dt:first-child { margin-top: 0; }
.bestell-summe dd { margin: 0; }
.bestell-recht { font-size: 0.92rem; color: var(--tinte-grau); }
.bestell-absenden { margin: 22px 0 8px; }
.bestell-absenden .knopf { width: 100%; font-size: 1.25rem; padding: 0.8em 1.2em; }
.bestell-absenden .knopf[disabled] { opacity: 0.6; cursor: wait; }
.danke-innen { max-width: 44em; }
.danke-nummer { font-size: 1.15rem; margin: 0 0 0.6em; }
.danke-nummer strong { display: block; font-family: var(--vga); font-weight: 400; font-size: clamp(1.9rem, 8vw, 2.6rem); letter-spacing: 0.04em; line-height: 1.2; margin-top: 4px; }
.danke-knopf { margin: 1.4em 0 1.2em; }
.knopf-gross { display: block; text-align: center; font-size: 1.2rem; padding: 0.85em 1em; }
.nicht-trennen { white-space: nowrap; }
/* PayPal-Knopf: zweimal kurz pulsieren, 1 s Pause, das Ganze zweimal. Ein Puls dauert 0,4 s (0,2 s hin, 0,2 s zurück). */
.danke-knopf .knopf { animation: puls 1.8s ease-in-out 0.4s 2; transform-origin: center; }
.danke-knopf .knopf:hover, .danke-knopf .knopf:focus, .danke-knopf .knopf:focus-visible { animation-play-state: paused; }
@keyframes puls {
  0%, 22.22%, 44.44%, 100% { transform: scale(1); }
  11.11%, 33.33% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .danke-knopf .knopf { animation: none; }
}
.danke-zurueck { margin-top: 2em; font-family: var(--kopf); font-weight: 800; font-size: 1.15rem; }
.danke-zurueck a { text-decoration: none; }
.danke-zurueck a:hover { text-decoration: underline; }

@media (min-width: 600px) {
  .feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .feld-paar-plz { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .bestell-summe dl { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 6px 16px; }
  .bestell-summe dt { margin-top: 0; padding-top: 2px; }
  .bestell-absenden .knopf { width: auto; }
  .knopf-gross { display: inline-block; font-size: 1.35rem; padding: 0.85em 1.6em; }
}

@media (min-width: 900px) {
  .bestellseite { padding: 64px 0 92px; }
  .bestell-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
  .bestell-info { position: sticky; top: 30px; }
  .bestell-buch { display: block; width: 260px; margin-top: 34px; }
  .bestell-formular { padding: 26px 30px 30px; border: 1px solid var(--papier-linie); border-top: 2px solid var(--tinte); }
}