/* ...[er]leben — Entwurf „Das Heft ist die Seite"
   Eine Datei für alle sieben Seiten. Keine Fremdschriften, keine Frameworks.
   Typografische Zeichen in content: ausschließlich als Escape. */

:root {
  --rot: #e2001a;
  --rot-dunkel: #b50015;
  --grau: #8a8a8a;
  --grau-hell: #b5b0a8;
  --tinte: #151515;
  --text: #2e2e2e;
  --text-leise: #5f5b55;
  --papier: #f7f4ee;
  --papier-2: #eeeae2;
  --papier-3: #e4dfd5;
  --linie: #d5cfc4;
  --weiss: #ffffff;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", P052, "URW Palladio L", Georgia, "Liberation Serif", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", "Liberation Sans", sans-serif;
  --breite: 1260px;
  --rand: clamp(16px, 4vw, 48px);
  --radius: 3px;
  --schatten: 0 24px 50px -22px rgba(20, 15, 5, .45), 0 0 0 1px rgba(0, 0, 0, .06);
}

/* ---------- Grundlagen ---------- */

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font: 400 1.0625rem/1.55 var(--sans);
  overflow-wrap: break-word;
}

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

a { color: inherit; text-decoration-color: var(--grau-hell); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--rot); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 3px;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--tinte); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 6.4vw, 5.4rem); line-height: .98; letter-spacing: -.025em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2rem 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--rot); color: var(--weiss); }

.nur-vorlesen {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.hülle, .huelle { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }

/* Kicker: die Klammer der Wortmarke als Ordnungsmotiv */
.klammer {
  font: 500 .8rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .6rem;
}
.klammer::before { content: "["; color: var(--grau); font-weight: 400; font-size: 1.3em; }
.klammer::after  { content: "]"; color: var(--grau); font-weight: 400; font-size: 1.3em; }
.klammer.rot { color: var(--rot); }
.dachzeile {
  font: 500 .78rem/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin: 0 0 .9rem;
}
.dachzeile b { color: var(--rot); font-weight: inherit; }

/* ---------- Rücklink zur Entwurfsübersicht ---------- */

.zurueck {
  display: block;
  background: var(--tinte);
  color: #f2efe8;
  font-size: .82rem;
  letter-spacing: .02em;
  padding: .45rem var(--rand);
  text-decoration: none;
}
.zurueck:hover { color: var(--weiss); text-decoration: underline; }

/* ---------- Kopf und Navigation ---------- */

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247, 244, 238, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linie);
}
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; flex-wrap: wrap; }

.marke {
  font: 700 clamp(1.55rem, 2.4vw, 1.9rem)/1 var(--sans);
  letter-spacing: -.04em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--tinte);
  display: inline-flex; align-items: baseline;
}
.marke .p, .marke .k { color: var(--grau); font-weight: 400; }
.marke em { font-style: normal; color: #000; }
.marke b  { color: var(--rot); }
.marke .p { letter-spacing: .05em; margin-right: .06em; }
.marke small { font: 500 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); margin-left: .9em; align-self: center; }

.menue-knopf {
  display: none;
  background: transparent; border: 1px solid var(--tinte); border-radius: 999px;
  padding: .45rem .95rem; font-size: .88rem; cursor: pointer;
}
.menue-knopf[aria-expanded="true"] { background: var(--tinte); color: var(--weiss); }

.menue ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.6rem, 2vw, 1.8rem); align-items: center; }
.menue a { text-decoration: none; font-size: .95rem; padding: .35rem 0; border-bottom: 2px solid transparent; }
.menue a:hover, .menue a[aria-current="page"] { border-bottom-color: var(--rot); }
.menue a.hervor {
  background: var(--rot); color: var(--weiss); border-radius: 999px;
  padding: .5rem 1.1rem; border: 0;
}
.menue a.hervor:hover { background: var(--rot-dunkel); }

@media (max-width: 899px) {
  .menue-knopf { display: inline-block; }
  .menue { display: none; flex-basis: 100%; padding-bottom: 1rem; }
  .menue.offen { display: block; }
  .menue ul { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--linie); }
  .menue li { border-bottom: 1px solid var(--linie); }
  .menue a { display: block; padding: .9rem 0; font-size: 1.1rem; }
  .menue a.hervor { border-radius: 0; margin-top: .5rem; text-align: center; }
  .marke small { display: none; }
}

/* ---------- Bühne auf der Startseite ---------- */

.buehne {
  overflow: hidden;
  border-bottom: 1px solid var(--linie);
  background:
    radial-gradient(ellipse at 80% 20%, rgba(226, 0, 26, .07), transparent 55%),
    var(--papier);
}
.buehne .huelle {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--rand);
  align-items: center; padding-block: clamp(2.5rem, 6vw, 5.5rem);
}
.buehne h1 b { color: var(--rot); font-weight: inherit; }
.buehne .vorspann { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.45; max-width: 34em; color: var(--text); margin-top: 1.4rem; }
.knopfleiste { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.suche-start { display: flex; gap: .5rem; margin-top: 1.8rem; max-width: 560px; }
.suche-start input[type="search"] { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1.05rem; padding: .8rem 1.2rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); color: var(--tinte); }
.suche-start .knopf { flex: 0 0 auto; }
.suche-start + .knopfleiste { margin-top: 1rem; }
@media (max-width: 480px) { .suche-start { flex-direction: column; } }

.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--tinte); color: var(--weiss);
  text-decoration: none; font-weight: 500; font-size: .98rem;
  padding: .85rem 1.4rem; border-radius: 999px; border: 1px solid var(--tinte);
  cursor: pointer; transition: background .15s, color .15s;
}
.knopf:hover { background: #000; }
.knopf.rot { background: var(--rot); border-color: var(--rot); }
.knopf.rot:hover { background: var(--rot-dunkel); }
.knopf.hell { background: transparent; color: var(--tinte); }
.knopf.hell:hover { background: var(--tinte); color: var(--weiss); }
.knopf.klein { padding: .5rem .95rem; font-size: .85rem; }

.heft-stapel { position: relative; width: min(100%, 420px); margin-inline: auto; padding: 4% 6% 8% 8%; }
.heft-stapel a { display: block; }
.heft-stapel .vorne { position: relative; z-index: 2; transform: rotate(-3deg); box-shadow: var(--schatten); transition: transform .3s; }
.heft-stapel a:hover .vorne { transform: rotate(-1.5deg) translateY(-6px); }
.heft-stapel .hinten {
  position: absolute; z-index: 1; inset: 4% 6% 8% 8%;
  transform: rotate(5deg) translate(7%, 3%);
  box-shadow: var(--schatten); filter: brightness(.92);
}
.heft-stapel .etikett {
  position: absolute; z-index: 3; right: 0; bottom: 3%;
  background: var(--rot); color: var(--weiss);
  font: 500 .78rem/1.25 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: .55rem .8rem; border-radius: 2px; transform: rotate(-3deg);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
}

@media (max-width: 899px) {
  .buehne .huelle { grid-template-columns: 1fr; text-align: left; }
  .heft-stapel { width: min(78%, 340px); order: -1; margin-bottom: 2.5rem; }
}

/* Streifen mit den Heftseiten */
.streifen { border-bottom: 1px solid var(--linie); background: var(--papier-2); }
.streifen .huelle { display: flex; align-items: center; gap: 1.2rem; padding-block: 1rem; }
.streifen p { margin: 0; font-size: .85rem; color: var(--text-leise); flex: 0 0 auto; }
.streifen ol {
  list-style: none; margin: 0; padding: .3rem 0; display: flex; gap: .55rem;
  overflow-x: auto; scrollbar-width: thin; flex: 1 1 auto;
}
.streifen li { flex: 0 0 auto; }
.streifen .knopf { white-space: nowrap; flex: 0 0 auto; }
.streifen a { display: block; position: relative; }
.streifen img { width: 56px; height: auto; aspect-ratio: 300 / 424; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .45); transition: transform .15s; }
.streifen a:hover img { transform: translateY(-3px); }
.streifen a span {
  position: absolute; left: 0; bottom: 0; background: var(--tinte); color: var(--weiss);
  font-size: .6rem; padding: .1rem .3rem; line-height: 1.3;
}
@media (max-width: 599px) { .streifen p { display: none; } }

/* Zahlenzeile */
.zahlen { border-bottom: 1px solid var(--linie); }
.zahlen ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.zahlen li { padding: 1.6rem 1.2rem 1.6rem 0; border-right: 1px solid var(--linie); }
.zahlen li + li { padding-left: 1.4rem; }
.zahlen li:last-child { border-right: 0; }
.zahlen strong { display: block; font: 500 clamp(2.2rem, 4.5vw, 3.6rem)/1 var(--serif); color: var(--tinte); letter-spacing: -.03em; }
.zahlen strong i { font-style: normal; color: var(--rot); }
.zahlen span { display: block; font-size: .88rem; color: var(--text-leise); margin-top: .35rem; }
@media (max-width: 699px) {
  .zahlen ul { grid-template-columns: 1fr 1fr; }
  .zahlen li:nth-child(2) { border-right: 0; }
  .zahlen li:nth-child(3) { padding-left: 0; border-top: 1px solid var(--linie); }
  .zahlen li:nth-child(4) { border-top: 1px solid var(--linie); }
}

/* ---------- Abschnitte ---------- */

.abschnitt { padding-block: clamp(2.5rem, 6vw, 5rem); border-bottom: 1px solid var(--linie); }
.abschnitt-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.abschnitt-kopf h2 { margin: 0; max-width: 20ch; }
.abschnitt-kopf p { margin: 0; max-width: 42ch; color: var(--text-leise); }
.abschnitt-kopf .rechts { text-align: right; }
.abschnitt-kopf .rechts a { white-space: nowrap; }

/* Aus dem Heft: ruhige, gleich große Bildflächen */
.heftschau { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem clamp(1rem, 2.5vw, 2rem); }
.karte { display: grid; grid-template-rows: auto 1fr; gap: 1rem; position: relative; }
.karte > div { display: flex; flex-direction: column; }
.karte .weiter { margin-top: auto; padding-top: .8rem; }
.karte figure { margin: 0; position: relative; }
.karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; background: var(--papier-3); }
.karte .seite-tag {
  position: absolute; top: .7rem; left: .7rem;
  background: var(--weiss); color: var(--tinte);
  font: 500 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem .6rem; border-radius: 2px;
}
.karte .seite-tag b { color: var(--rot); font-weight: inherit; }
.karte .rubrik { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); margin: 0 0 .45rem; }
.karte h3 { margin: 0 0 .4rem; }
.karte h3 a { text-decoration: none; }
.karte h3 a:hover { color: var(--rot); }
.karte h3 a::after { content: ""; position: absolute; inset: 0; }
.karte .stadtteil { font-size: .88rem; color: var(--text-leise); margin: 0 0 .5rem; }
.karte .zitat { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; color: var(--text); }
.karte .weiter { font-size: .9rem; }
.karte .weiter::after { content: " \2192"; }
.karte .weiter { color: var(--rot); font-weight: 500; }
.karte.alle { background: var(--tinte); color: #efebe3; text-decoration: none; padding: 1.4rem 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; min-height: 260px; border-radius: var(--radius); }
.karte.alle .klammer { color: #efebe3; margin: 0; }
.karte.alle strong { font: 500 clamp(1.5rem, 2.2vw, 1.9rem)/1.1 var(--serif); color: var(--weiss); }
.karte.alle .pfeil-text { font: 500 2.6rem/1 var(--serif); color: var(--rot); margin-top: .4rem; }
.karte.alle:hover strong { text-decoration: underline; text-decoration-color: var(--rot); }
@media (max-width: 1099px) { .heftschau { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .heftschau { grid-template-columns: 1fr; } .karte img { aspect-ratio: 3 / 2; } }

/* Stadtteile als typografische Liste */
.stadtteile ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  border-top: 1px solid var(--linie); border-left: 1px solid var(--linie);
}
.stadtteile li { border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.stadtteile a {
  display: block; padding: 1.15rem 1.1rem 1.05rem; text-decoration: none; min-height: 100%;
  transition: background .15s;
}
.stadtteile a:hover, .stadtteile a[aria-current="page"] { background: var(--weiss); }
.stadtteile a[aria-current="page"] strong { color: var(--rot); }
.stadtteile small { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); }
.stadtteile strong { display: block; font: 500 clamp(1.35rem, 2vw, 1.7rem)/1.15 var(--serif); color: var(--tinte); margin-top: .2rem; letter-spacing: -.01em; }
.stadtteile strong::after { content: " \2192"; color: var(--grau); font-size: .8em; opacity: 0; transition: opacity .15s; }
.stadtteile a:hover strong::after { opacity: 1; }
.stadtteile .hinweis, .rubriken .hinweis { font-size: .85rem; color: var(--text-leise); margin-top: 1rem; }
.stadtteile .anzahl-ort { display: block; font-size: .8rem; color: var(--text-leise); margin-top: .35rem; }
.stadtteile a.ohne strong { color: var(--text-leise); }
.stadtteile a.ohne .anzahl-ort { font-style: italic; }

/* Rubriken als Wortband */
.rubriken ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .2rem; align-items: baseline; }
.rubriken li { display: flex; align-items: baseline; }
.rubriken li + li::before { content: "\00B7"; color: var(--rot); font-weight: 700; margin: 0 .6rem; font-size: 1.5em; line-height: 1; }
.rubriken a { font: 500 clamp(1.5rem, 3.6vw, 2.9rem)/1.15 var(--serif); letter-spacing: -.02em; text-decoration: none; color: var(--tinte); }
.rubriken a:hover { color: var(--rot); }

/* Aktuelles */
.aktuell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--rand); }
.aktuell time { font: 500 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rot); display: block; margin-bottom: .6rem; }
.aktuell h3 { margin-top: 0; }
.aktuell .quelle { font-size: .9rem; color: var(--text-leise); }
@media (max-width: 699px) { .aktuell { grid-template-columns: 1fr; } }

/* Werben-Band */
.werbeband { background: var(--tinte); color: #efebe3; }
.werbeband .huelle { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--rand); padding-block: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.werbeband h2 { color: var(--weiss); font-size: clamp(2rem, 4.4vw, 3.6rem); margin: 0 0 1rem; }
.werbeband h2 b { color: var(--rot); font-weight: inherit; }
.werbeband p { color: #cfc9be; max-width: 44ch; }
.werbeband .klammer { color: #efebe3; }
.werbeband .knopf.hell { color: var(--weiss); border-color: #efebe3; }
.werbeband .knopf.hell:hover { background: var(--weiss); color: var(--tinte); }
.preise { list-style: none; margin: 0; padding: 0; border-top: 1px solid #3a3a3a; }
.preise li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #3a3a3a; }
.preise strong { display: block; font: 500 1.2rem/1.2 var(--serif); color: var(--weiss); }
.preise span { display: block; font-size: .85rem; color: #a9a39a; margin-top: .2rem; }
.preise .preis { font: 500 clamp(1.7rem, 3vw, 2.4rem)/1 var(--serif); color: var(--weiss); white-space: nowrap; letter-spacing: -.02em; }
.preise .preis small { font: 400 .7rem/1 var(--sans); color: #a9a39a; letter-spacing: .06em; margin-left: .3rem; }
.preise-hinweis { font-size: .8rem; color: #8f8980; margin-top: .8rem; }
@media (max-width: 799px) { .werbeband .huelle { grid-template-columns: 1fr; } }

/* ---------- Fuß ---------- */

.fuss { background: var(--papier-2); border-top: 1px solid var(--linie); padding-block: 2.5rem 3rem; font-size: .9rem; color: var(--text-leise); }
.fuss .huelle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.fuss h4 { font: 500 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinte); margin: 0 0 .8rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .35rem; }
.fuss .marke { margin-bottom: .8rem; }
.fuss p { margin: 0 0 .5rem; }
.fuss .klein { font-size: .78rem; margin-top: 1.4rem; grid-column: 1 / -1; border-top: 1px solid var(--linie); padding-top: 1rem; }
@media (max-width: 799px) { .fuss .huelle { grid-template-columns: 1fr; gap: 1.5rem; } .fuss .klein { grid-column: auto; } }

/* ---------- Brotkrumen ---------- */

.krumen { font-size: .85rem; color: var(--text-leise); margin: 1.4rem 0 0; }
.krumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .5rem; }
.krumen li + li::before { content: "\203A"; margin-right: .5rem; color: var(--grau); }
.krumen a { text-decoration: none; }
.krumen a:hover { text-decoration: underline; }

/* ---------- Stadtteilseite ---------- */

.stadtteil-kopf { padding-block: clamp(2rem, 5vw, 4rem) 2rem; border-bottom: 1px solid var(--linie); }
.stadtteil-kopf h1 { margin-bottom: .6rem; }
.stadtteil-kopf h1 small { display: block; font: 500 .8rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise); margin-bottom: .8rem; }
.stadtteil-kopf .vorspann { font-size: 1.15rem; max-width: 64ch; }

.stadtteil-wahl { border-bottom: 1px solid var(--linie); background: var(--papier-2); }
.stadtteil-wahl ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: thin; }
.stadtteil-wahl li { flex: 0 0 auto; }
.stadtteil-wahl a { display: block; padding: .8rem .75rem; font-size: .9rem; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; color: var(--text-leise); }
.stadtteil-wahl a:hover { color: var(--tinte); }
.stadtteil-wahl a[aria-current="page"] { color: var(--rot); border-bottom-color: var(--rot); font-weight: 500; }

.filter { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: flex-start; padding-block: 1.6rem; border-bottom: 1px solid var(--linie); }
.filter form { flex: 1 1 260px; display: flex; gap: .4rem; }
.filter input[type="search"] {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1rem;
  padding: .7rem 1rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); color: var(--tinte);
}
.filter fieldset { border: 0; margin: 0; padding: 0; flex: 2 1 460px; }
.filter legend { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); margin-bottom: .6rem; }
.filter .rubrik-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter .rubrik-knoepfe button {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 999px;
  padding: .42rem .85rem; font-size: .88rem; cursor: pointer; display: inline-flex; gap: .45rem; align-items: baseline;
}
.filter .rubrik-knoepfe button:hover { border-color: var(--tinte); }
.filter .rubrik-knoepfe button[aria-pressed="true"] { background: var(--tinte); color: var(--weiss); border-color: var(--tinte); }
.filter .rubrik-knoepfe button[hidden] { display: none; }
.filter .rubrik-knoepfe .anzahl { font-size: .74rem; color: inherit; opacity: .7; }
.filter[hidden], .filter-stand[hidden] { display: none; }
.filter-stand { font-size: .9rem; color: var(--text-leise); padding-block: 1.2rem .2rem; }

.verzeichnis { list-style: none; margin: 0; padding: 0; }
.adresse {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 240px); gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 2rem; border-bottom: 1px solid var(--linie); align-items: start;
}
.adresse.versteckt { display: none; }
.adresse figure { margin: 0; }
.adresse img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; height: auto; background: var(--papier-3); }
.adresse figcaption { font-size: .75rem; color: var(--text-leise); margin-top: .4rem; }
.adresse .rubrik { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); margin: 0 0 .5rem; }
.adresse h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin: 0 0 .6rem; }
.adresse h2 a { text-decoration: none; }
.adresse h2 a:hover { color: var(--rot); }
.adresse > div:not(.stamm) { display: flex; flex-direction: column; align-items: flex-start; }
.adresse > div > .knopf { margin-top: auto; }
.adresse > div > .zitat, .adresse > div > p { align-self: stretch; }
.adresse figure a { display: block; }
.adresse .zitat { font-family: var(--serif); font-size: 1.2rem; line-height: 1.4; margin: 0 0 .8rem; }
.adresse .zitat cite { font-style: normal; font-family: var(--sans); font-size: .85rem; color: var(--text-leise); }
.adresse .stamm { font-size: .92rem; color: var(--text); border-top: 1px solid var(--linie); padding-top: .9rem; }
.adresse .stamm dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); margin-top: .7rem; }
.adresse .stamm dd { margin: .1rem 0 0; }
.adresse .stamm dl { margin: 0; }
.adresse .heft-verweis { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; text-decoration: none; font-size: .88rem; border: 1px solid var(--tinte); border-radius: 999px; padding: .4rem .9rem; }
.adresse .heft-verweis:hover { background: var(--tinte); color: var(--weiss); }
.adresse .heft-verweis b { color: var(--rot); font-weight: 500; }
.adresse .heft-verweis:hover b { color: var(--weiss); }
@media (max-width: 899px) {
  .adresse { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); }
  .adresse .stamm { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .adresse { grid-template-columns: 1fr; }
  .adresse img { aspect-ratio: 3 / 2; }
}
.leer-meldung { padding: 3rem 0; color: var(--text-leise); text-align: center; font-family: var(--serif); font-size: 1.3rem; }
.leer-meldung[hidden] { display: none; }
.leer-meldung p { margin: 0 0 .7rem; }
.leer-meldung .klein-text { font-family: var(--sans); font-size: 1rem; }
.leer-meldung a { color: var(--rot); }

/* ---------- Kundenseite ---------- */

.kunde-kopf { padding-block: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
/* align-items: start statt end. Bei einem hohen Bild sank die Ueberschrift sonst
   an den unteren Rand und liess die linke obere Ecke leer — der Auftraggeber:
   „irritierend, dass die ueberschrift nicht oben los geht". 23.09.2026. */
/* Spaltenmass und Abstand sind absichtlich dieselben wie in .kunde-koerper:
   so steht die Bildkante des Kopfes genau ueber der Kante des Kontaktkastens.
   Vorher war die Bildspalte rund 150 px breiter, die Kante sprang. 23.09.2026. */
.kunde-kopf .oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.kunde-kopf h1 { margin-bottom: 1rem; font-size: clamp(2.2rem, 5.2vw, 4.4rem); }
.kunde-kopf .vorspann { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.4; color: var(--text); max-width: 34em; }
.kunde-kopf .firma { font: 500 .8rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinte); margin: 0 0 .9rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.kunde-kopf .firma span { color: var(--text-leise); }
.kunde-kopf .firma .rubrik-tag { color: var(--rot); }
.kunde-kopf figure { margin: 0; }
/* Der Rahmen um dieses Bild steht nicht mehr hier, sondern ganz am Dateiende
   unter „Bildrahmen, einheitlich" — er gilt inzwischen fuer alle Fotos. */
.kunde-kopf figure img { width: 100%; height: auto; display: block; }
.kunde-kopf figcaption { font-size: .78rem; color: var(--text-leise); margin-top: .5rem; }
/* Das Kopfbild richtet sich nach dem Textblock, nicht umgekehrt. Vorher gab ein
   hohes Bild die Zeilenhoehe vor; war der Vorspann kurz, stand links eine halbe
   Bildschirmhoehe Leere („dann laaange nichts", 23.09.2026). min-height: 0 nimmt
   dem Bild das Mitreden ueber die Zeilenhoehe, der Deckel haelt es im Rahmen.
   object-position etwas oberhalb der Mitte: auf den Anzeigenfotos stehen die
   Gesichter im oberen Drittel. */
.kunde-kopf .oben { align-items: stretch; }
.kunde-kopf figure.hoch { display: flex; flex-direction: column; min-height: 0; }
.kunde-kopf figure.hoch img {
  /* flex-basis 0, nicht auto: mit auto brachte das Bild seine natuerliche Hoehe
     als Ausgangswert in die Zeile ein und zog sie wieder auf — trotz min-height:0
     am Rahmen blieben 200 px Leere unter dem Text. Mit 0 zaehlt nur min-height. */
  flex: 1 1 0; min-height: 240px; max-height: 460px; height: auto;
  object-fit: cover; object-position: center 32%; aspect-ratio: auto;
}
/* Bilder, die nichts verlieren duerfen: Querformate (1400x797 in 4:5 geschnitten
   baute rechts einen Turm und liess links ein Loch) und Buchumschlaege, bei denen
   ein angeschnittener Rand wie ein Fehler aussieht. Sie behalten ihr Mass und
   machen den Zeilenabschluss nicht mit. 23.09.2026. */
.kunde-kopf figure.ganz img { aspect-ratio: auto; object-fit: contain; height: auto; max-height: 460px; }
/* figure.quer (Bildband ueber die ganze Breite) ist am 23.09.2026 entfallen:
   „das mit dem riesen bild sieht nicht gut aus … generell vermeiden". Grosse
   Fotos stehen jetzt im Fliesstext zwischen den Absaetzen. */
@media (max-width: 899px) {
  .kunde-kopf .oben { grid-template-columns: 1fr; }
}

.kunde-koerper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(1.5rem, 4vw, 4rem); padding-block: 1rem clamp(2.5rem, 6vw, 5rem); align-items: start; }
.artikel { max-width: 68ch; font-size: 1.08rem; line-height: 1.65; }
.artikel h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 2rem 0 .7rem; }
.artikel h2:first-child { margin-top: 0; }
.artikel > p:first-of-type::first-letter { font: 500 3.4em/0.8 var(--serif); float: left; margin: .1em .12em 0 0; color: var(--rot); }
.artikel ul { padding-left: 1.1em; }
.artikel li { margin-bottom: .35em; }
.artikel .spalten { columns: 2; column-gap: 2rem; list-style: none; padding: 0; margin: 0 0 1.2rem; }
.artikel .spalten li { break-inside: avoid; padding: .45rem 0 .45rem 1.2rem; border-bottom: 1px solid var(--linie); position: relative; margin: 0; }
.artikel .spalten li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .5rem; height: .5rem; background: var(--rot); border-radius: 50%; }
@media (max-width: 559px) { .artikel .spalten { columns: 1; } }
.artikel .pruefliste { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: punkt; }
.artikel .pruefliste li { counter-increment: punkt; display: flex; gap: .9rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--linie); margin: 0; }
.artikel .pruefliste li::before { content: counter(punkt, decimal-leading-zero); font: 500 1rem/1 var(--serif); color: var(--rot); min-width: 1.8em; }
.artikel .hinweis { font-size: .9rem; color: var(--text-leise); }
.artikel figure { margin: 1.8rem 0; }
.artikel figure img { width: 100%; height: auto; background: var(--papier-3); }
.artikel figcaption { font-size: .8rem; color: var(--text-leise); margin-top: .5rem; }
.artikel .bildpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.8rem 0; }
.artikel .bildpaar figure { margin: 0; }
.artikel .bildpaar img { aspect-ratio: 4 / 5; object-fit: cover; height: auto; }
@media (max-width: 559px) { .artikel .bildpaar { grid-template-columns: 1fr; } .artikel .bildpaar img { aspect-ratio: 4 / 3; } }

.zitatkasten {
  margin: 2rem 0; padding: 1.4rem 1.6rem; border-left: 4px solid var(--rot);
  background: var(--weiss); font: 500 clamp(1.25rem, 2vw, 1.55rem)/1.35 var(--serif); color: var(--tinte);
}
.zitatkasten p { margin: 0; }
.zitatkasten p::before { content: "\201E"; }
.zitatkasten p::after { content: "\201C"; }

.merkkasten { background: var(--papier-2); padding: 1.2rem 1.4rem; margin: 1.5rem 0; border-radius: var(--radius); }
.merkkasten h3 { font-size: 1.05rem; margin: 0 0 .5rem; font-family: var(--sans); font-weight: 600; letter-spacing: .02em; }
.merkkasten ul { margin: 0; padding-left: 1.1em; }

.stellen {
  background: var(--rot); color: var(--weiss); padding: 1.6rem 1.8rem; margin: 2rem 0; border-radius: var(--radius);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center;
}
.stellen h2 { color: var(--weiss); margin: 0 0 .5rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.stellen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: 1.05rem; }
.stellen li + li::before { content: "\00B7"; margin-right: .9rem; opacity: .7; }
.stellen p { margin: .8rem 0 0; font-size: .95rem; }
.stellen a { color: var(--weiss); text-decoration-color: rgba(255, 255, 255, .5); }
.stellen .knopf { background: var(--weiss); color: var(--rot); border-color: var(--weiss); }
.stellen .knopf:hover { background: var(--tinte); color: var(--weiss); border-color: var(--tinte); }
@media (max-width: 599px) { .stellen { grid-template-columns: 1fr; } }

/* Steckbrief in der Randspalte */
.steckbrief { position: sticky; top: 84px; display: grid; gap: 1.2rem; }
.steckbrief > section { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.steckbrief h2 { font: 500 .76rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); margin: 0 0 .9rem; }
.steckbrief address strong { display: block; font: 500 1.2rem/1.25 var(--serif); color: var(--tinte); margin-bottom: .3rem; }
.steckbrief .kontakt { list-style: none; margin: .9rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--linie); }
.steckbrief .kontakt li { display: grid; grid-template-columns: 5.2em 1fr; gap: .5rem; padding: .3rem 0; font-size: .95rem; }
.steckbrief .kontakt span { color: var(--text-leise); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding-top: .2em; }
.steckbrief .kontakt a { overflow-wrap: anywhere; }
.zeiten { width: 100%; border-collapse: collapse; font-size: .95rem; }
.zeiten th, .zeiten td { text-align: left; padding: .38rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; font-weight: 400; }
.zeiten th { color: var(--text-leise); width: 6.2em; }
.zeiten td span { display: block; white-space: nowrap; }
.zeiten tr[aria-current="date"] th, .zeiten tr[aria-current="date"] td { color: var(--tinte); font-weight: 600; }
.zeiten .geschlossen { color: var(--text-leise); }
.zeiten-status { margin: .9rem 0 0; font-weight: 600; color: var(--tinte); font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.zeiten-status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--grau-hell); flex: 0 0 auto; }
.zeiten-status.offen::before { background: #1b8f3a; }
.zeiten-status.zu::before { background: var(--rot); }
.zeiten-status:empty { display: none; }
.zeiten-hinweis { font-size: .85rem; color: var(--text-leise); margin: .6rem 0 0; }
.karte-link { display: block; margin-top: .9rem; }
.karte-link .fenster {
  display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; position: relative;
  background:
    linear-gradient(transparent 49%, rgba(0, 0, 0, .06) 50%, transparent 51%) 0 0 / 100% 22px,
    linear-gradient(90deg, transparent 49%, rgba(0, 0, 0, .06) 50%, transparent 51%) 0 0 / 22px 100%,
    var(--papier-2);
}
.karte-link .fenster::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: var(--rot); box-shadow: 0 0 0 4px var(--weiss), 0 0 0 5px var(--rot); transform: translate(-50%, -50%);
}
.karte-link .koordinaten { display: block; font-size: .8rem; color: var(--text-leise); margin-top: .4rem; font-variant-numeric: tabular-nums; }
.im-heft { display: grid; grid-template-columns: 84px 1fr; gap: 1rem; align-items: start; }
.im-heft img { width: 84px; height: auto; aspect-ratio: 1000 / 1413; object-fit: cover; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.im-heft p { margin: 0 0 .6rem; font-size: .92rem; }
.im-heft .knopf { margin-top: .3rem; }
.im-heft small { display: block; color: var(--text-leise); font-size: .78rem; margin-top: .5rem; }
@media (max-width: 899px) {
  .kunde-koerper { grid-template-columns: 1fr; }
  .steckbrief { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.nachbarn { padding-block: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--linie); }
.nachbarn ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.nachbarn li { background: var(--papier); padding: 1.2rem 1.3rem; }
.nachbarn small { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); margin-bottom: .3rem; }
.nachbarn strong { font: 500 1.25rem/1.2 var(--serif); color: var(--tinte); display: block; }
.nachbarn a { text-decoration: none; }
.nachbarn a:hover strong { color: var(--rot); }
.nachbarn span.ort { display: block; font-size: .88rem; color: var(--text-leise); margin-top: .3rem; }

/* ---------- Blättermagazin ---------- */

.magazin-kopf { padding-block: clamp(1.6rem, 4vw, 3rem) 1.2rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.magazin-kopf h1 { margin: 0; font-size: clamp(2rem, 4.6vw, 3.6rem); }
.magazin-kopf h1 small { display: block; font: 500 .8rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise); margin-bottom: .7rem; }
.magazin-kopf p { margin: 0; color: var(--text-leise); max-width: 40ch; }

/* Der Leser liegt tiefer als die Seite: an der oberen und der unteren Kante
   ein weicher Schlagschatten nach innen. Vorher war der Uebergang ein reiner
   Farbwechsel mit Haarlinie und wirkte aufgesetzt. 23.09.2026. */
.leser {
  background: var(--papier-3);
  border-block: 1px solid var(--linie);
  box-shadow:
    inset 0 16px 20px -16px rgba(20, 15, 5, .55),
    inset 0 -16px 20px -16px rgba(20, 15, 5, .55);
}
.leser-leiste { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-block: .7rem; flex-wrap: wrap; font-size: .9rem; }
.leser-leiste .zaehler { font-variant-numeric: tabular-nums; color: var(--tinte); }
.leser-leiste .zaehler b { font-weight: 600; }
.leser-leiste .werkzeuge { display: flex; gap: .4rem; flex-wrap: wrap; }
.leser-leiste button {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 999px;
  padding: .4rem .85rem; font-size: .85rem; cursor: pointer;
}
.leser-leiste button:hover { border-color: var(--tinte); }
.leser-leiste button[aria-pressed="true"] { background: var(--tinte); color: var(--weiss); border-color: var(--tinte); }
.leser-leiste .nur-js { display: none; }
.leser.js .leser-leiste .nur-js { display: inline-block; }
@media (min-width: 900px) { .leser.js .leser-leiste [data-uebersicht] { display: none; } }
@media (max-width: 899px) { .leser.js .leser-leiste [data-ansicht] { display: none; } }

.buehne-heft { position: relative; padding-block: .5rem 1rem; }
.seiten {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.seiten::-webkit-scrollbar { display: none; }
/* scroll-margin-top: Abstand fuer die klebende Kopfleiste beim Sprung auf #seite-N.
   Bei 150px blieb die Seitenueberschrift zur Haelfte unter der Leiste stehen;
   76px setzt die Leseleiste direkt unter den Kopf. Nachgezogen 22.09.2026. */
.seiten li { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 .35rem; scroll-margin-top: 76px; }
.seiten .blatt { position: relative; margin: 0 auto; width: min(100%, calc((100vh - 220px) * 1200 / 1697)); }
.seiten img { width: 100%; height: auto; aspect-ratio: 1200 / 1697; background: var(--weiss); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .05); }
.seiten .leer { display: none; }
.seiten .nummer {
  position: absolute; bottom: .6rem; right: .6rem; background: rgba(21, 21, 21, .85); color: var(--weiss);
  font-size: .72rem; padding: .25rem .5rem; border-radius: 2px; font-variant-numeric: tabular-nums;
}
.seiten .blatt button.lupe {
  position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; cursor: zoom-in; padding: 0;
  display: none;
}
.leser.js .seiten .blatt button.lupe { display: block; }
.seiten .blatt button.lupe span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Doppelseite ab 900 px: Leerblätter einblenden, jedes zweite Blatt rechts anlegen */
@media (min-width: 900px) {
  .leser.doppel .seiten li { flex: 0 0 50%; padding: 0; }
  .leser.doppel .seiten .leer { display: block; }
  .leser.doppel .seiten li:nth-child(even) { scroll-snap-align: none; }
  .leser.doppel .seiten .blatt { width: min(100%, calc((100vh - 220px) * 1200 / 1697)); }
  .leser.doppel .seiten li:nth-child(odd) .blatt { margin-right: 0; }
  .leser.doppel .seiten li:nth-child(even) .blatt { margin-left: 0; }
  .leser.doppel .seiten li:nth-child(odd) .blatt img { box-shadow: -10px 14px 34px -14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .05); }
  .leser.doppel .seiten li:nth-child(odd) .blatt::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 26px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .10));
    pointer-events: none;
  }
  .leser.doppel .seiten li:nth-child(even) .blatt::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26px;
    background: linear-gradient(270deg, transparent, rgba(0, 0, 0, .14));
    pointer-events: none;
  }
  .leser.doppel .seiten .leer .blatt { visibility: hidden; }
  .leser:not(.doppel) .seiten li { flex: 0 0 100%; }
}

.pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--linie);
  background: var(--weiss); color: var(--tinte); cursor: pointer; font-size: 1.4rem; line-height: 1;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
}
.pfeil:hover { background: var(--tinte); color: var(--weiss); }
.pfeil[disabled] { opacity: .3; cursor: default; }
.pfeil[disabled]:hover { background: var(--weiss); color: var(--tinte); }
.pfeil.zurueck-blatt { left: max(8px, calc((100% - var(--breite)) / 2 - 60px)); }
.pfeil.vor-blatt { right: max(8px, calc((100% - var(--breite)) / 2 - 60px)); }
.leser.js .pfeil { display: flex; }
@media (max-width: 899px) { .pfeil { width: 42px; height: 42px; top: auto; bottom: 1.4rem; transform: none; } .pfeil.zurueck-blatt { left: 12px; } .pfeil.vor-blatt { right: 12px; } }

.seitenzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: .3rem 1rem; font-size: .92rem; min-height: 2.2rem; }
.seitenzeile .titel { font-family: var(--serif); font-size: 1.15rem; color: var(--tinte); }
.seitenzeile .titel small { font-family: var(--sans); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); margin-right: .7rem; }
.seitenzeile a.eintrag { text-decoration: none; border: 1px solid var(--tinte); border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; }
.seitenzeile a.eintrag:hover { background: var(--tinte); color: var(--weiss); }
.seitenzeile a.eintrag::after { content: " \2192"; }
.seitenzeile a.eintrag[hidden] { display: none; }

.minis { list-style: none; margin: 0; padding: .9rem 0 1.1rem; display: flex; gap: .55rem; overflow-x: auto; scrollbar-width: thin; border-top: 1px solid var(--linie); }
.minis li { flex: 0 0 auto; }
.minis a, .minis button { display: block; position: relative; padding: 0; border: 0; background: transparent; cursor: pointer; }
.minis img { width: 64px; height: auto; aspect-ratio: 300 / 424; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .45); outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .15s, transform .15s; }
.minis a:hover img, .minis button:hover img { transform: translateY(-2px); }
.minis [aria-current="true"] img { outline-color: var(--rot); }
.minis span { position: absolute; left: 0; bottom: 0; background: var(--tinte); color: var(--weiss); font-size: .62rem; padding: .1rem .3rem; line-height: 1.3; }
@media (max-width: 899px) {
  .leser.js .minis { display: none; }
  .leser.js .minis.offen { display: flex; }
}

.lupe-dialog { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; background: rgba(15, 15, 15, .96); color: var(--weiss); }
.lupe-dialog::backdrop { background: rgba(0, 0, 0, .8); }
.lupe-dialog .innen { width: 100%; height: 100%; overflow: auto; display: grid; place-items: start center; padding: 3.5rem 1rem 2rem; }
.lupe-dialog img { width: min(100%, 1200px); height: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .7); }
.lupe-dialog .schliessen { position: fixed; top: .8rem; right: .8rem; background: var(--weiss); color: var(--tinte); border: 0; border-radius: 999px; padding: .55rem 1rem; cursor: pointer; z-index: 2; }
.lupe-dialog .lupe-titel { position: fixed; top: 1.1rem; left: 1rem; font-size: .9rem; color: #ddd; }

.inhalt-heft { padding-block: clamp(2.5rem, 6vw, 5rem); }
.inhalt-heft .abschnitt-kopf { margin-bottom: 1.5rem; }
.inhalt-tabelle { width: 100%; border-collapse: collapse; }
.inhalt-tabelle th, .inhalt-tabelle td { text-align: left; padding: .7rem .5rem .7rem 0; border-bottom: 1px solid var(--linie); vertical-align: baseline; }
.inhalt-tabelle th { font: 500 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); }
.inhalt-tabelle td.nr { width: 3.5em; font: 500 1.15rem/1 var(--serif); color: var(--tinte); font-variant-numeric: tabular-nums; }
.inhalt-tabelle td.firma { font-family: var(--serif); font-size: 1.15rem; color: var(--tinte); }
.inhalt-tabelle td.thema { color: var(--text-leise); }
.inhalt-tabelle td.thema::before { content: "\2026 "; color: var(--grau); }
.inhalt-tabelle td.weg { text-align: right; white-space: nowrap; font-size: .88rem; }
.inhalt-tabelle td.weg span { color: var(--grau-hell); }
.inhalt-tabelle .rubrik-zeile td { padding-top: 2rem; }
.inhalt-tabelle .rubrik-zeile h3 { margin: 0; font-size: 1.5rem; }
.inhalt-tabelle .rubrik-zeile h3 .k { color: var(--grau); }
.inhalt-tabelle .rubrik-zeile h3 .l { color: var(--rot); }
.inhalt-zwei { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--rand); align-items: start; }
.inhalt-zwei aside { background: var(--weiss); border: 1px solid var(--linie); padding: 1.5rem 1.6rem; position: sticky; top: 84px; }
.inhalt-zwei aside h3 { margin-top: 0; }
.inhalt-zwei aside ul { padding-left: 1.1em; margin: 0 0 1rem; }
.inhalt-zwei aside li { margin-bottom: .5em; }
.tabelle-rahmen { overflow-x: auto; min-width: 0; }
@media (max-width: 899px) {
  .inhalt-zwei { grid-template-columns: minmax(0, 1fr); }
  .inhalt-zwei aside { position: static; }
  .inhalt-tabelle td.thema, .inhalt-tabelle th:nth-child(3) { display: none; }
  .inhalt-tabelle td.weg { white-space: normal; }
  .inhalt-tabelle td.firma { font-size: 1.05rem; }
}

/* ---------- Werben ---------- */

.werben-kopf { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--linie); }
.werben-kopf .huelle { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--rand); align-items: center; }
.werben-kopf h1 b { color: var(--rot); font-weight: inherit; }
.werben-kopf .vorspann { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 36em; margin-top: 1.4rem; }
.werben-kopf blockquote { margin: 0; padding: 1.4rem 1.6rem; background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--rot); font-family: var(--serif); font-size: 1.15rem; line-height: 1.45; }
.werben-kopf blockquote p { margin: 0 0 .6rem; }
.werben-kopf blockquote footer { font-family: var(--sans); font-size: .85rem; color: var(--text-leise); }
@media (max-width: 899px) { .werben-kopf .huelle { grid-template-columns: 1fr; } }

.leistungen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); counter-reset: leistung; }
.leistungen li { background: var(--papier); padding: 1.6rem 1.5rem 1.7rem; counter-increment: leistung; }
.leistungen li::before { content: counter(leistung, decimal-leading-zero); display: block; font: 500 .85rem/1 var(--sans); letter-spacing: .12em; color: var(--rot); margin-bottom: 1rem; }
.leistungen li p { margin: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.4; color: var(--tinte); }
@media (max-width: 899px) { .leistungen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .leistungen { grid-template-columns: 1fr; } }

.pakete { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rand); }
.paket { background: var(--weiss); border: 1px solid var(--linie); padding: 2rem 2rem 2.2rem; display: grid; gap: .6rem; align-content: start; position: relative; }
.paket.empfohlen { border-color: var(--tinte); }
.paket .dachzeile { margin-bottom: .2rem; }
.paket h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0; }
.paket .preis { font: 500 clamp(2.6rem, 5vw, 4rem)/1 var(--serif); color: var(--tinte); letter-spacing: -.03em; margin: .6rem 0 .2rem; }
.paket .preis small { font: 400 .8rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); margin-left: .4rem; }
.paket ul { margin: .8rem 0 1.2rem; padding-left: 1.1em; }
.paket li { margin-bottom: .35rem; }
.paket .knopf { justify-self: start; }
.pakete-hinweis { font-size: .85rem; color: var(--text-leise); margin-top: 1.2rem; }
@media (max-width: 699px) { .pakete { grid-template-columns: 1fr; } }

.vorher-nachher { display: grid; grid-template-columns: minmax(0, 300px) auto minmax(0, 1fr); gap: var(--rand); align-items: center; }
.vorher-nachher figure { margin: 0; }
.vorher-nachher .heftseite img { box-shadow: var(--schatten); }
.vorher-nachher figcaption { font-size: .8rem; color: var(--text-leise); margin-top: .6rem; }
.vorher-nachher .pfeil-gross { font: 500 3rem/1 var(--serif); color: var(--rot); text-align: center; }
.vorher-nachher .eintrag-vorschau { background: var(--weiss); border: 1px solid var(--linie); padding: 1.4rem 1.6rem; }
/* Die Vorschau ist zweispaltig: Bild links, Text rechts — so sieht sie aus wie
   ein Eintrag und nicht wie ein Foto mit Bildunterschrift. Vorher lag das Bild
   ueber die ganze Breite in einem 21:9-Ausschnitt; das schnitt jedes Motiv zu
   einem Streifen und beherrschte die Karte. 23.09.2026. */
.vorher-nachher .eintrag-vorschau { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 0 1.3rem; align-items: start; }
.vorher-nachher .eintrag-vorschau > img { width: 116px; aspect-ratio: 300 / 424; object-fit: cover; height: auto; margin: 0; grid-row: 1 / span 5; }
.vorher-nachher .eintrag-vorschau > :not(img) { grid-column: 2; }
.vorher-nachher .eintrag-vorschau > .knopf { justify-self: start; }
.vorher-nachher .eintrag-vorschau .dachzeile { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); margin: 0 0 .45rem; }
@media (max-width: 559px) {
  .vorher-nachher .eintrag-vorschau { grid-template-columns: 84px minmax(0, 1fr); }
  .vorher-nachher .eintrag-vorschau > img { width: 84px; }
}
.vorher-nachher .eintrag-vorschau h3 { margin: 0 0 .4rem; }
.vorher-nachher .eintrag-vorschau p { margin: 0 0 .8rem; font-size: .95rem; }
.vorher-nachher .merkmale { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.vorher-nachher .merkmale li { font-size: .78rem; border: 1px solid var(--linie); border-radius: 999px; padding: .25rem .7rem; color: var(--text-leise); }
@media (max-width: 899px) {
  .vorher-nachher { grid-template-columns: 1fr; }
  .vorher-nachher .pfeil-gross { transform: rotate(90deg); }
  .vorher-nachher .heftseite { width: min(100%, 300px); }
}

.kontakt-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--rand); align-items: start; }
.kontakt-band .gross { font: 500 clamp(1.8rem, 3.6vw, 2.8rem)/1.15 var(--serif); color: var(--tinte); letter-spacing: -.02em; }
.kontakt-band .gross a { text-decoration: none; color: var(--rot); }
.kontakt-band .gross a:hover { text-decoration: underline; }
.kontakt-band dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; font-size: .98rem; }
.kontakt-band dt { color: var(--text-leise); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .25em; }
.kontakt-band dd { margin: 0; }
@media (max-width: 699px) { .kontakt-band { grid-template-columns: 1fr; } }

/* ---------- Kleinigkeiten ---------- */

.symbol { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); }
.tag { display: inline-block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--linie); border-radius: 999px; padding: .25rem .65rem; color: var(--text-leise); }
.tag.rot { border-color: var(--rot); color: var(--rot); }
.rechts-buendig { text-align: right; }
.nach-oben { display: inline-block; margin-top: 2rem; font-size: .85rem; }

/* ---------- Die Hefte ----------
   Seit 14.10.2026 zwei Hefte (city, koenigsdorf); bayenthal ist abgeschaltet.
   Die Spaltenzahl folgt der Zahl der Kacheln, damit ein drittes Heft spaeter
   wieder ohne CSS-Aenderung passt. */
.hefte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.hefte a { display: grid; grid-template-columns: 96px 1fr; gap: 1.1rem; align-items: stretch; text-decoration: none; background: var(--weiss); border: 1px solid var(--linie); padding: 1.1rem 1.2rem; border-radius: var(--radius); height: 100%; }
.hefte a:hover { border-color: var(--tinte); }
.hefte img { width: 96px; height: auto; aspect-ratio: 300 / 424; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
.hefte strong { display: block; font: 500 1.3rem/1.15 var(--serif); color: var(--tinte); }
.hefte small { display: block; font-size: .8rem; color: var(--text-leise); margin-top: .35rem; }
.hefte small.orte { color: var(--text); }
/* „Blättern“ steht in allen Heften auf einer Linie: die Textspalte ist
   eine Flex-Spalte, der Verweis wird nach unten geschoben. Vorher richtete er
   sich nach der Laenge der Stadtteilliste — bayenthal nennt einen Ort,
   koenigsdorf fuenf, also standen die Verweise 20 Pixel versetzt. 23.09.2026. */
.hefte a > span { display: flex; flex-direction: column; height: 100%; }
.hefte .weiter { align-self: start; margin-top: auto; padding-top: .7rem; font-size: .88rem; color: var(--rot); font-weight: 500; }
.hefte .weiter::after { content: " \2192"; }
.hefte a[aria-current="page"] { border-color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
@media (max-width: 899px) { .hefte { grid-template-columns: 1fr; } }

.heft-wahl { border-bottom: 1px solid var(--linie); padding-block: 1rem 1.4rem; }
.heft-wahl .klammer { margin-bottom: .7rem; }
.heft-wahl ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .8rem; }
.heft-wahl a { display: grid; grid-template-columns: 56px 1fr; gap: .8rem; align-items: center; text-decoration: none; border: 1px solid var(--linie); border-radius: var(--radius); padding: .6rem .8rem; background: var(--weiss); }
.heft-wahl a:hover { border-color: var(--tinte); }
.heft-wahl a[aria-current="page"] { border-color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
.heft-wahl img { width: 56px; height: auto; aspect-ratio: 300 / 424; box-shadow: 0 4px 12px -5px rgba(0, 0, 0, .5); }
.heft-wahl strong { display: block; font: 500 1.05rem/1.15 var(--serif); color: var(--tinte); }
.heft-wahl small { display: block; font-size: .74rem; color: var(--text-leise); margin-top: .15rem; }
.heft-wahl .hinweis { font-size: .85rem; color: var(--text-leise); margin: .8rem 0 0; }
@media (max-width: 899px) { .heft-wahl ul { grid-template-columns: 1fr; } }

/* Die rechte Spalte nimmt nur, was der Heftkasten braucht — und faellt auf
   „Alle Stadtteile“ ganz weg, weil es dort kein einzelnes Heft gibt. Vorher
   stand dort eine feste Spalte, auch wenn sie leer war. 23.09.2026. */
.stadtteil-kopf .zwei { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--rand); align-items: start; }
@media (max-width: 899px) { .stadtteil-kopf .zwei { grid-template-columns: 1fr; } }
.heft-hinweis { display: grid; grid-template-columns: 72px minmax(0, 1fr); max-width: 380px; gap: 1.1rem; align-items: start; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-top: .6rem; }
.heft-hinweis[hidden] { display: none; }
/* Der Kasten „Drei Hefte“ steht nur auf „Alle Stadtteile“. Wichtig ist das
   :not([hidden]) — vorher hiess die Regel schlicht .heft-hinweis.alle { display:
   block } und stand hinter .heft-hinweis[hidden] { display: none }. Damit
   ueberstimmte sie das Verstecken, und der Kasten erschien auch auf den
   einzelnen Stadtteilseiten, wo er nichts zu suchen hat. 23.09.2026. */
.heft-hinweis.alle:not([hidden]) { display: block; padding: 1rem 1.2rem; justify-self: end; max-width: 300px; }
.heft-hinweis.alle ul { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; gap: .7rem; }
.heft-hinweis.alle a { text-decoration: none; display: block; }
.heft-hinweis.alle img { width: 64px; height: auto; aspect-ratio: 300 / 424; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.heft-hinweis.alle li span { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); margin-top: .35rem; }
.heft-hinweis.alle a:hover span { color: var(--rot); }
@media (max-width: 899px) { .heft-hinweis.alle:not([hidden]) { justify-self: start; } }
.heft-hinweis .cover img { width: 72px; height: auto; aspect-ratio: 300 / 424; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.heft-hinweis .klammer { margin-bottom: .5rem; }
.heft-hinweis p { margin: 0 0 .7rem; font-size: .95rem; }
.stadtteil-wahl a small { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin-top: .1rem; }
.stadtteil-wahl a[aria-current="page"] small { color: var(--rot); }

.heft-stapel.drei { width: min(100%, 520px); padding: 6% 4% 10%; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; }
.heft-stapel.drei a { position: relative; display: block; transition: transform .25s; }
.heft-stapel.drei img { width: 100%; height: auto; box-shadow: var(--schatten); }
.heft-stapel.drei .l { transform: rotate(-9deg) translate(12%, 6%); z-index: 1; }
.heft-stapel.drei .m { transform: translateY(-4%) scale(1.12); z-index: 3; }
.heft-stapel.drei .r { transform: rotate(9deg) translate(-12%, 6%); z-index: 2; }
.heft-stapel.drei a:hover { z-index: 4; transform: translateY(-10px) scale(1.08); }
.heft-stapel.drei .etikett { position: absolute; left: 50%; bottom: -1.3rem; transform: translateX(-50%); white-space: nowrap; font: 500 .68rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte); background: var(--weiss); padding: .35rem .55rem; border-radius: 2px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }
@media (max-width: 899px) { .heft-stapel.drei { width: min(92%, 420px); margin-bottom: 3rem; } }

/* Zwei Hefte (ab 14.10.2026): das erste Heft (.m) vorn rechts, das zweite (.l)
   leicht gedreht dahinter links. Die Klasse setzt include_hefte_inc.php nach der
   Zahl der freigeschalteten Hefte. */
.heft-stapel.zwei { width: min(100%, 440px); padding: 6% 8% 10%; display: grid; grid-template-columns: repeat(2, 1fr); align-items: end; }
.heft-stapel.zwei a { position: relative; display: block; grid-row: 1; transition: transform .25s; }
.heft-stapel.zwei img { width: 100%; height: auto; box-shadow: var(--schatten); }
.heft-stapel.zwei .m { grid-column: 2; transform: translate(-10%, -3%) scale(1.08); z-index: 2; }
.heft-stapel.zwei .l { grid-column: 1; transform: rotate(-7deg) translate(10%, 5%); z-index: 1; }
.heft-stapel.zwei a:hover { z-index: 3; transform: translateY(-10px) scale(1.06); }
.heft-stapel.zwei .etikett { position: absolute; left: 50%; bottom: -1.3rem; transform: translateX(-50%); white-space: nowrap; font: 500 .68rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte); background: var(--weiss); padding: .35rem .55rem; border-radius: 2px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }
@media (max-width: 899px) { .heft-stapel.zwei { width: min(86%, 380px); margin-bottom: 3rem; } }

/* ---------- Umblättern am Rechner: der Buchkörper ---------- */
.buch { display: none; }
@media (min-width: 900px) {
  .leser.js.doppel .seiten { display: none; }
  .leser.js.doppel .buch {
    display: block; position: relative; margin: .4rem auto 0;
    width: min(100%, calc(2 * (100vh - 240px) * 1200 / 1697));
    aspect-ratio: 2400 / 1697;
    perspective: 2600px;
  }
}
.buch .seite { position: absolute; top: 0; width: 50%; height: 100%; background: var(--weiss); }
.buch .seite.links { left: 0; box-shadow: -10px 14px 34px -14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .05); }
.buch .seite.rechts { left: 50%; box-shadow: 10px 14px 34px -14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .05); }
.buch .seite.leer { background: transparent; box-shadow: none; }
.buch .seite img { width: 100%; height: 100%; display: block; }
.buch .seite.links::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 28px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .12)); pointer-events: none; }
.buch .seite.rechts::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 28px; background: linear-gradient(270deg, transparent, rgba(0, 0, 0, .16)); pointer-events: none; }
.buch .seite.leer::before, .buch .seite.leer::after { display: none; }
.buch .nummer { position: absolute; bottom: .6rem; background: rgba(21, 21, 21, .85); color: var(--weiss); font-size: .72rem; padding: .25rem .5rem; border-radius: 2px; font-variant-numeric: tabular-nums; }
.buch .seite.links .nummer { left: .6rem; }
.buch .seite.rechts .nummer { right: .6rem; }
.buch button.lupe { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; cursor: zoom-in; padding: 0; }
.buch button.lupe span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Das drehende Blatt: Achse ist der Falz */
.umblatt { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; z-index: 6; will-change: transform; }
.umblatt.vor { left: 50%; transform-origin: left center; transform: rotateY(0deg); }
.umblatt.rueck { left: 0; transform-origin: right center; transform: rotateY(0deg); }
.umblatt.dreht { transition: transform .9s cubic-bezier(.38, .04, .22, 1); }
.umblatt.vor.dreht { transform: rotateY(-180deg); }
.umblatt.rueck.dreht { transform: rotateY(180deg); }
.umblatt .flaeche { position: absolute; inset: 0; background: var(--weiss); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }
.umblatt .flaeche img { width: 100%; height: 100%; display: block; }
.umblatt .hinten { transform: rotateY(180deg); }
.umblatt .flaeche .falzlicht { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.umblatt.vor .vorn .falzlicht { background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .05) 45%, transparent); }
.umblatt.vor .hinten .falzlicht { background: linear-gradient(270deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .05) 45%, transparent); }
.umblatt.rueck .vorn .falzlicht { background: linear-gradient(270deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .05) 45%, transparent); }
.umblatt.rueck .hinten .falzlicht { background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .05) 45%, transparent); }
.umblatt.dreht .falzlicht { animation: falzlicht .9s cubic-bezier(.38, .04, .22, 1) both; }
@keyframes falzlicht { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
/* Schlagschatten des Blattes auf der Seite darunter */
.buch .wurfschatten { position: absolute; top: 0; height: 100%; width: 50%; pointer-events: none; z-index: 5; opacity: 0; }
.buch .wurfschatten.vor { left: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .28), transparent 60%); }
.buch .wurfschatten.rueck { left: 50%; background: linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 60%); }
.buch .wurfschatten.dreht { animation: wurfschatten .9s cubic-bezier(.38, .04, .22, 1) both; }
@keyframes wurfschatten { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .umblatt.dreht, .umblatt.dreht .falzlicht, .buch .wurfschatten.dreht { transition: none; animation: none; }
}


/* ==========================================================================
   Bildrahmen, einheitlich (23.09.2026)
   Der Auftraggeber wollte den Rahmen des Eintragskopfes ueberall haben:
   „bilder im text auch einen kleinen duennen rahmen. einheitlich." Deshalb
   steht er an dieser einen Stelle und nicht in jedem Abschnitt neu.
   Passepartout aus Papierton, Haarlinie, gleicher Eckenradius wie sonst.
   Mouseover nur, wo das Bild auch zu etwas fuehrt.
   ========================================================================== */
.kunde-kopf figure img,
.artikel figure img,
.artikel .bildpaar img,
.adresse figure img,
.eintrag-vorschau > img,
.heftseite img {
  background: var(--papier-3);
  padding: 8px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px -18px rgba(20, 15, 5, .5);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.kunde-kopf figure:hover img,
.kunde-kopf figure:focus-within img,
.adresse figure a:hover img,
.adresse figure a:focus-visible img {
  border-color: var(--grau-hell);
  box-shadow: 0 18px 38px -20px rgba(20, 15, 5, .55);
  transform: translateY(-2px);
}

/* Fotos im Fliesstext bleiben in Lesebreite und bauen keine Tuerme:
   hoch  = Hochformat neben dem Text,  sonst volle Spaltenbreite. */
.artikel figure img { max-height: 520px; object-fit: cover; }

/* ==========================================================================
   Trefferkarten auf der Startseite (23.09.2026)
   „kleinen duennen rahmen um die eintraege und zum eintrag lieber als button."
   Der Rahmen umschliesst die ganze Karte; das Foto darin bekommt deshalb
   keinen zweiten Rahmen, sonst stehen zwei Linien ineinander.
   ========================================================================== */
.karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 10px 10px 1.1rem;
  background: var(--papier-2, transparent);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.karte:hover, .karte:focus-within {
  border-color: var(--grau-hell);
  box-shadow: 0 14px 30px -22px rgba(20, 15, 5, .5);
  transform: translateY(-2px);
}
.karte > div { padding: 0 .35rem; }
.karte .knopf { margin-top: auto; align-self: flex-start; position: relative; z-index: 1; }


/* ==========================================================================
   Startseite mit Kölner Panorama (index2.html, 23.09.2026)
   Zum Ansehen gebaut: „hier hätte ich gerne irgendwie die Skyline von Köln
   ähnlich wie im Original". Im Original liegt ein Farbfoto oben links im
   Hintergrund des ganzen Auftritts. Hier steht dasselbe Motiv als Band am
   unteren Rand der Bühne — die Überschrift steht also über der Stadt.
   Das Bild ist in die Haustöne gelegt (Duplex Tinte→Papier): Der Himmel wird
   dadurch von selbst zum Papier und das Band hat keine sichtbare Oberkante.
   Farbe bleibt allein dem Rot der Wortmarke vorbehalten.
   ========================================================================== */
.buehne-skyline { position: relative; }
.buehne-skyline .huelle { position: relative; z-index: 1; padding-bottom: clamp(7rem, 15vw, 12rem); }
.buehne-skyline .skyline {
  position: absolute; left: 0; bottom: 0; width: 100%; height: auto;
  min-height: 130px; object-fit: cover; object-position: 62% bottom;
  opacity: .88; pointer-events: none; border: 0; padding: 0; background: none; box-shadow: none;
  /* multiply legt das Bild ins Papier statt darueber: die hellen Flaechen
     verschwinden ganz, nur die Zeichnung bleibt. */
  mix-blend-mode: multiply;
  /* Nach oben ausblenden, damit Text und Bild sich nicht ins Gehege kommen. */
  -webkit-mask-image: linear-gradient(to top, #000 62%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to top, #000 62%, rgba(0, 0, 0, 0) 100%);
}
/* Der Heftstapel steht vor dem Panorama, nicht darin. */
.buehne-skyline .heft-stapel { position: relative; z-index: 2; }
@media (max-width: 899px) {
  .buehne-skyline .huelle { padding-bottom: clamp(5rem, 22vw, 9rem); }
  /* Auf dem schmalen Schirm wird das Panorama zum Ausschnitt — dann muss der
     Dom hinein, nicht die Mitte der Bruecke. */
  .buehne-skyline .skyline { min-height: 120px; object-position: 8% bottom; }
}


/* ==========================================================================
   Startseite mit Panorama oben (index3.html, 23.09.2026)
   Dieselbe Aufnahme, aber zwischen Menue und Ueberschrift — naeher am
   Original, wo das Panorama den Kopf des Auftritts bildet. Der Text ruecktdeutlich
   hinein, und das Band verliert sich nach unten, damit die Ueberschrift
   darueberliegt und die Stadt hinter ihr durchschimmert. 
   ========================================================================== */
.buehne-oben { position: relative; }
.buehne-oben .skyline {
  position: absolute; top: 0; left: 0; width: 100%;
  height: clamp(150px, 16vw, 250px);
  object-fit: cover; object-position: 62% 72%;
  opacity: .9; pointer-events: none; border: 0; padding: 0; background: none; box-shadow: none;
  mix-blend-mode: multiply;
  /* Nach unten auslaufen: dort liegt die Ueberschrift. */
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, .3) 62%, rgba(0, 0, 0, 0) 94%);
          mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, .3) 62%, rgba(0, 0, 0, 0) 94%);
}
/* Der Inhalt beginnt im unteren, schon blassen Drittel des Bandes. */
.buehne-oben .huelle { position: relative; z-index: 1; padding-block: clamp(6.5rem, 13vw, 12rem) clamp(2.5rem, 6vw, 5.5rem); }
.buehne-oben .heft-stapel { position: relative; z-index: 2; }
@media (max-width: 899px) {
  .buehne-oben .skyline { height: clamp(130px, 30vw, 190px); object-position: 8% 72%; }
  .buehne-oben .huelle { padding-block: clamp(5rem, 22vw, 8rem) clamp(2rem, 6vw, 4rem); }
}


/* ==========================================================================
   Vertiefter Abschnitt (23.09.2026)
   Dieselbe Machart wie beim Blaetterleser: etwas dunklerer Grund, Haarlinie
   oben und unten, dazu je ein weicher Schatten nach innen. Der Abschnitt liegt
   dadurch tiefer als die Seite. Gedacht fuer die Heftauswahl auf der
   Startseite — auf Wunsch des Auftraggebers, „also drueber und drunter".
   ========================================================================== */
.abschnitt.vertieft {
  background: var(--papier-2);
  border-top: 1px solid var(--linie);
  box-shadow:
    inset 0 16px 20px -16px rgba(20, 15, 5, .55),
    inset 0 -16px 20px -16px rgba(20, 15, 5, .55);
}


/* Die Stadtteilauswahl steht auf dem dunkelsten der drei Papiertoene. Kein
   Schatten, keine Vertiefung, kein Farbstich — derselbe Ton wie sonst, nur
   dunkler, damit beim Scrollen nicht ein Abschnitt wie der naechste aussieht.
   (Ein rosé eingefaerbtes Papier war der erste Versuch und fiel durch.)
   23.09.2026 auf Wunsch des Auftraggebers. */
.abschnitt.stadtteile { background: var(--papier-3); border-top: 1px solid var(--linie); }

/* ---------- Ergaenzungen 05.10.2026: Module statt statischem HTML ---------- */

/* Kundenseite: eingebettete Karte (Leaflet) im Steckbrief */
.kunde-karte { width: 100%; aspect-ratio: 4 / 3; min-height: 220px; background: var(--papier-3); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.kunde-karte.leaflet-container { font: inherit; }
.karte-links { font-size: .82rem; color: var(--text-leise); margin: .7rem 0 0; }
.anzeige-pdf { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--linie); font-size: .9rem; }
.anzeige-pdf small { color: var(--text-leise); }
.steckbrief .im-heft + .im-heft { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.steckbrief .zeiten-hinweis { margin: 0; }
.kunde-kopf figure.ganz img, .artikel img.anzeige { object-fit: contain; background: var(--papier-3); }

/* Eintraege ohne Foto: die gerenderte Anzeigenseite als Bild */
.adresse img.anzeige, .karte img.anzeige { object-fit: contain; object-position: top; background: var(--papier-3); }
.karte figure.leer { aspect-ratio: 4 / 3; background: var(--papier-3); }

/* Rubriken-Zeile: Anzahl der Eintraege */
.rubriken .anzahl { font: 500 .8rem/1 var(--sans); color: var(--text-leise); vertical-align: super; margin-left: .2rem; }

/* Werbeband: Betriebe, die schon dabei sind */
.werbeband .dabei { list-style: none; margin: 0; padding: 0; border-top: 1px solid #3a3a3a; }
.werbeband .dabei li { border-bottom: 1px solid #3a3a3a; }
.werbeband .dabei a { display: block; padding: .7rem 0; text-decoration: none; color: inherit; }
.werbeband .dabei strong { display: block; font: 500 1.05rem/1.25 var(--serif); color: var(--weiss); }
.werbeband .dabei span { display: block; font-size: .8rem; color: #a9a39a; margin-top: .15rem; }
.werbeband .dabei a:hover strong { text-decoration: underline; text-decoration-color: var(--rot); }
.werbeband .preise-hinweis a { color: #cfc9be; }

/* Aktuell-Block: Ausgabe des News-Moduls im Design des Entwurfs */
.aktuell .ib-newsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.aktuell .ib-newsliste h3 a { text-decoration: none; }
.aktuell .ib-newsliste h3 a:hover { color: var(--rot); }
.aktuell .btn-zeile { margin: 1.2rem 0 0; }
.aktuell .btn-zeile a { font-size: .9rem; color: var(--rot); }
.aktuell h3 { margin: 0 0 .4rem; }