/* =========================================================================
   Shelfwire — Regalwerk
   Design-System nach der Philosophie »Shelf & Signal«.
   Zwei Urformen: die horizontale Linie des Regalbodens und die
   durchlaufende Leitung, die im Knoten endet.
   ========================================================================= */

/* ---- Rn. 1 · Material ------------------------------------------------- */
:root {
  /* Farbwelt */
  --leinen:        #1E5C49;
  --leinen-tief:   #16483a;
  --leinen-hell:   #2c7a61;
  --tinte:         #15231D;
  --tinte-weich:   #1c2f27;
  --papier:        #F4F1E9;
  --papier-hell:   #FAF8F3;
  --band:          #BE3B2B;
  --band-tief:     #a53023;
  --messing:       #AD8A3B;

  /* Abgeleitete Töne — Schrift auf Papier */
  --text:          #15231D;
  --text-weich:    #5a6560;
  --text-leise:    #7d8781;

  /* Haarlinien */
  --linie:         rgba(21, 35, 29, .12);
  --linie-zart:    rgba(21, 35, 29, .07);
  --linie-messing: rgba(173, 138, 59, .34);

  /* Flächen */
  --karte:         #FFFFFF;
  --karte-linie:   rgba(21, 35, 29, .09);
  --schatten:      0 1px 2px rgba(21,35,29,.04), 0 8px 24px -12px rgba(21,35,29,.10);
  --schatten-hoch: 0 2px 4px rgba(21,35,29,.05), 0 20px 48px -20px rgba(21,35,29,.18);

  /* Schriften */
  --serif: 'Gloock', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Raum ist Regal */
  --bahn:      1180px;
  --bahn-eng:  760px;
  --rand:      clamp(1.25rem, 4vw, 2.5rem);
  --register:  clamp(4.5rem, 9vw, 7.5rem);

  --radius:    14px;
  --radius-s:  10px;
  --pille:     999px;
}

/* ---- Rn. 2 · Grundlage ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: rgba(30, 92, 73, .16); }

:focus-visible {
  outline: 2px solid var(--leinen);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  background: var(--tinte); color: var(--papier); padding: .7rem 1.2rem;
  border-radius: 0 0 var(--radius-s) var(--radius-s); z-index: 200;
  font-size: .9rem; text-decoration: none; transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---- Rn. 3 · Typografie ----------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--tinte);
  text-wrap: balance;
}
.display-xl { font-size: clamp(2.5rem, 4.7vw, 3.95rem); }
.display-l  { font-size: clamp(2.1rem, 3.9vw, 3.05rem); }
.display-m  { font-size: clamp(1.75rem, 3.1vw, 2.4rem); }
.display-s  { font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.16; }

.display .leinen { color: var(--leinen); }

/* Eyebrow — der Kolophon-Vermerk über jedem Register */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--messing);
  margin: 0 0 1.15rem;
}
.eyebrow.leise { color: var(--text-leise); }

.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.19rem);
  line-height: 1.66;
  color: var(--text-weich);
  max-width: 46ch;
  margin: 0;
  text-wrap: pretty;
}
.lead.mitte { margin-inline: auto; text-align: center; }

.prosa { color: var(--text-weich); margin: 0; text-wrap: pretty; }
.prosa + .prosa { margin-top: .85rem; }

.kursiv-serif {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--text-weich);
}

/* Gezähltes — Randnummern, Preise, Endpunkte */
.mono {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* Randnummer — das heimliche Ornament */
.rn {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--messing);
  margin: 0 0 .5rem;
  display: block;
}

.zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--tinte);
}

/* ---- Rn. 4 · Raster --------------------------------------------------- */
.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.bahn-eng { max-width: var(--bahn-eng); }

.register {
  padding-block: var(--register);
  position: relative;
}
.register-schmal { padding-block: clamp(3rem, 6vw, 4.5rem); }
/* Das erste Register rückt näher an die Kopfzeile */
main > .register:first-child { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* Registerlinie — Bücher ruhen auf Böden */
.boden { border-top: 1px solid var(--linie); }

.kopf { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.kopf.mitte { margin-inline: auto; text-align: center; }
.kopf .lead { margin-top: 1.1rem; }
.kopf.mitte .lead { margin-inline: auto; }

.raster { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .raster-3, .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .raster-2, .raster-3, .raster-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Rn. 5 · Dunkle Register ----------------------------------------- */
.tinte-band {
  background: var(--tinte);
  color: rgba(244, 241, 233, .82);
}
.tinte-band .display,
.tinte-band .zahl { color: var(--papier); }
.tinte-band .display .leinen { color: #8fc4b1; }
.tinte-band .lead,
.tinte-band .prosa { color: rgba(244, 241, 233, .72); }
.tinte-band .eyebrow { color: var(--messing); }
.tinte-band .boden { border-color: rgba(244, 241, 233, .14); }

.leinen-band {
  background: var(--leinen);
  color: rgba(244, 241, 233, .86);
}
.leinen-band .display { color: var(--papier); }
.leinen-band .lead { color: rgba(244, 241, 233, .78); }
.leinen-band .eyebrow { color: rgba(244, 241, 233, .62); }

/* ---- Rn. 6 · Marke ----------------------------------------------------
   Ein zusammenhängendes Zeichen: die Regalböden tragen, der unterste läuft
   als Leitung unter dem Schriftzug hindurch und endet im Knoten. Zeichen und
   Wortmarke greifen ineinander und werden nie getrennt gesetzt.            */
.marke {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--tinte);
}
.marke-zeichen {
  width: 134px;
  height: auto;
  display: block;
  flex: none;
}
.marke-zeichen .wort-wire { fill: var(--leinen); }
.marke-invers, .tinte-band .marke { color: var(--papier); }
.marke-invers .wort-wire,
.tinte-band .marke .wort-wire { fill: #8fc4b1; }

.marke-fuss .marke-zeichen { width: 126px; }
@media (max-width: 400px) { .marke-zeichen { width: 118px; } }

/* Titelbogen — Text links, Tafel rechts */
.raster-titel {
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
.raster-titel-eng { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 900px) {
  .raster-titel, .raster-titel-eng { grid-template-columns: minmax(0, 1fr); }
}

/* Zwei Spalten, die auf schmalen Schirmen stapeln */
.raster-versetzt { grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 860px) { .raster-versetzt { grid-template-columns: minmax(0, 1fr); } }

/* ---- Rn. 7 · Navigation ---------------------------------------------- */
.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 241, 233, .86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.kopfzeile.gescrollt {
  border-bottom-color: var(--linie);
  background: rgba(244, 241, 233, .94);
}
.kopfzeile-inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.1rem);
}
.nav a {
  text-decoration: none;
  font-size: .95rem;
  color: var(--text-weich);
  padding: .35rem 0;
  position: relative;
  transition: color .18s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--tinte); }
.nav a.aktiv { color: var(--tinte); font-weight: 500; }
/* Lesebändchen markiert die aktive Seite */
.nav a.aktiv::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.28rem;
  height: 2px;
  background: var(--band);
}

.kopf-aktionen { display: flex; align-items: center; gap: .75rem; }

.menue-schalter {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--linie);
  background: transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.menue-schalter span,
.menue-schalter span::before,
.menue-schalter span::after {
  content: "";
  display: block;
  width: 17px; height: 1.5px;
  background: var(--tinte);
  transition: transform .22s ease, opacity .18s ease;
}
.menue-schalter span::before { position: absolute; transform: translateY(-5.5px); }
.menue-schalter span::after  { position: absolute; transform: translateY(5.5px); }
.menue-schalter span { position: relative; }
.menue-schalter[aria-expanded="true"] span { background: transparent; }
.menue-schalter[aria-expanded="true"] span::before { transform: rotate(45deg); }
.menue-schalter[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

.klapp-menue {
  display: none;
  border-top: 1px solid var(--linie);
  background: var(--papier);
}
.klapp-menue.offen { display: block; }
.klapp-menue nav {
  display: flex;
  flex-direction: column;
  padding: .6rem 0 1.35rem;
}
.klapp-menue nav a {
  text-decoration: none;
  color: var(--text-weich);
  padding: .72rem 0;
  border-bottom: 1px solid var(--linie-zart);
  font-size: 1rem;
}
.klapp-menue nav a.aktiv { color: var(--tinte); font-weight: 500; }
.klapp-menue .knopf { margin-top: 1.1rem; }

@media (max-width: 940px) {
  .nav, .kopf-aktionen .knopf { display: none; }
  .menue-schalter { display: inline-flex; }
}

/* ---- Rn. 8 · Knöpfe --------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: .92rem 1.6rem;
  border-radius: var(--pille);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }

.knopf-leinen { background: var(--leinen); color: var(--papier); }
.knopf-leinen:hover { background: var(--leinen-tief); }

.knopf-band { background: var(--band); color: #fff; }
.knopf-band:hover { background: var(--band-tief); }

.knopf-linie {
  background: transparent;
  color: var(--tinte);
  border-color: rgba(21, 35, 29, .28);
}
.knopf-linie:hover { border-color: var(--tinte); background: rgba(21,35,29,.03); }

.tinte-band .knopf-linie,
.leinen-band .knopf-linie {
  color: var(--papier);
  border-color: rgba(244, 241, 233, .34);
}
.tinte-band .knopf-linie:hover,
.leinen-band .knopf-linie:hover {
  border-color: rgba(244, 241, 233, .8);
  background: rgba(244, 241, 233, .07);
}

.knopf-klein { padding: .62rem 1.1rem; font-size: .88rem; }

.knopf[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.knopf-reihe.mitte { justify-content: center; }

/* Textlink mit Pfeil — führt weiter wie die Leitung */
.weiter {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--leinen);
  text-decoration: none;
}
.weiter svg { transition: transform .2s ease; }
.weiter:hover svg { transform: translateX(3px); }
.tinte-band .weiter { color: #8fc4b1; }

/* ---- Rn. 9 · Karten --------------------------------------------------- */
.karte {
  background: var(--karte);
  border: 1px solid var(--karte-linie);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  box-shadow: var(--schatten);
  display: flex;
  flex-direction: column;
}
.karte-still {
  background: transparent;
  box-shadow: none;
  border-color: var(--linie);
}
.tinte-band .karte {
  background: rgba(244, 241, 233, .045);
  border-color: rgba(244, 241, 233, .13);
  box-shadow: none;
}

/* Buchrücken-Marke am Kartenkopf */
.karte-marke {
  width: 3px;
  height: 1.35em;
  border-radius: 2px;
  background: var(--leinen);
  flex: none;
}
.karte-marke.messing { background: var(--messing); }
.karte-marke.band    { background: var(--band); }

.karte-titel {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .9rem;
}
.karte-titel h3 {
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.15;
  color: var(--tinte);
}
.tinte-band .karte-titel h3 { color: var(--papier); }

/* Aufzählung mit Knotenpunkten */
.punkte { list-style: none; margin: 1.15rem 0 0; padding: 0; }
.punkte li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--text-weich);
  font-size: .96rem;
  line-height: 1.55;
}
.punkte li + li { margin-top: .68rem; }
.punkte li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--band);
}
.tinte-band .punkte li { color: rgba(244, 241, 233, .76); }
.punkte.leinen li::before { background: var(--leinen); }

/* ---- Rn. 10 · Marken, Chips, Fundstellen ----------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  border-radius: var(--pille);
  background: rgba(21, 35, 29, .05);
  border: 1px solid transparent;
  font-size: .85rem;
  color: var(--text-weich);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover { color: var(--tinte); }
.chip-leinen { background: rgba(30, 92, 73, .1); color: var(--leinen); font-weight: 500; }
.chip-messing { background: rgba(173, 138, 59, .14); color: #7d6224; font-weight: 500; }
.chip-reihe { display: flex; flex-wrap: wrap; gap: .55rem; }

.marker {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .3rem .6rem;
  border-radius: 6px;
  background: rgba(30, 92, 73, .1);
  color: var(--leinen);
}
.marker-punkt { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Fundstelle — Zitat mit Lesebändchen am Rand */
.fundstelle {
  border-left: 2px solid var(--band);
  padding: .55rem 0 .55rem .9rem;
  background: rgba(21, 35, 29, .02);
  border-radius: 0 6px 6px 0;
}
.fundstelle .quelle {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--messing);
  letter-spacing: .02em;
}
.fundstelle .zitat {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--text-weich);
  margin-top: .2rem;
}

/* Endpunkt / Code */
.endpunkt {
  font-family: var(--mono);
  font-size: .84rem;
  background: rgba(21, 35, 29, .045);
  border: 1px solid var(--linie-zart);
  border-radius: var(--radius-s);
  padding: .78rem 1rem;
  color: var(--tinte);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.7;
}
.tinte-band .endpunkt {
  background: rgba(0, 0, 0, .32);
  border-color: rgba(244, 241, 233, .12);
  color: rgba(244, 241, 233, .9);
}
.endpunkt .verb { color: var(--messing); }
.endpunkt .wert { color: var(--leinen-hell); }

/* ---- Rn. 11 · Leitung ------------------------------------------------- */
/* Die Kette »Vom Regal in die Antwort« */
.leitung {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 1.5rem;
}
.leitung::before {
  content: "";
  position: absolute;
  top: calc(1.5rem + 9px);
  left: 12.5%;
  right: 12.5%;
  height: 1.5px;
  background: var(--band);
}
.leitung-station { text-align: center; position: relative; }
.leitung-knoten {
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1.5px solid var(--band);
  background: var(--tinte);
  margin: 0 auto 1.35rem;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}
.leitung-knoten::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--band);
}
.leitung-station h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--papier);
  margin-bottom: .3rem;
}
.leitung-station p {
  font-family: var(--mono);
  font-size: .76rem;
  color: rgba(244, 241, 233, .55);
  margin: 0;
  letter-spacing: .02em;
}
@media (max-width: 720px) {
  .leitung { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; text-align: left; }
  .leitung::before { left: 9px; right: auto; top: 1.5rem; bottom: 1.5rem; width: 1.5px; height: auto; }
  .leitung-station { display: grid; grid-template-columns: 19px 1fr; gap: 1rem; text-align: left; align-items: start; }
  .leitung-knoten { margin: .2rem 0 0; }
}

/* Nummerierte Schritte */
.schritte { counter-reset: schritt; }
.schritt-zahl {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(30, 92, 73, .3);
  background: rgba(30, 92, 73, .07);
  color: var(--leinen);
  font-family: var(--mono);
  font-size: .9rem;
  display: grid;
  place-items: center;
  flex: none;
}

/* Werte-Register: vier Spalten mit Trennlinien */
.werte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: center;
}
.werte > div { padding: .5rem clamp(.75rem, 2vw, 1.5rem); }
.werte > div + div { border-left: 1px solid var(--linie); }
.werte h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--leinen);
  margin-bottom: .3rem;
}
.werte p { margin: 0; font-size: .89rem; color: var(--text-weich); }
@media (max-width: 780px) {
  .werte { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.25rem; }
  .werte > div:nth-child(odd) { border-left: none; }
}
@media (max-width: 420px) {
  .werte { grid-template-columns: minmax(0, 1fr); }
  .werte > div { border-left: none !important; }
}

/* ---- Rn. 12 · Bildtafeln --------------------------------------------- */
.tafel {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--karte-linie);
  box-shadow: var(--schatten-hoch);
  background: var(--karte);
}
.tafel img { width: 100%; display: block; }
.tafel-bu {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--text-leise);
  margin-top: .8rem;
  text-align: center;
}

/* ---- Rn. 12b · Katalog ------------------------------------------------ */
.suchzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.suchfeld { position: relative; flex: 1 1 320px; }
.suchfeld .eingabe { padding-left: 2.9rem; border-radius: var(--pille); }
.suchfeld svg {
  position: absolute;
  left: 1.05rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-leise);
  pointer-events: none;
}

.buchruecken {
  width: 28px;
  height: 84px;
  border-radius: 3px;
  background: var(--leinen);
  flex: none;
  position: relative;
}
.buchruecken.tinte   { background: var(--tinte); }
.buchruecken.messing { background: var(--messing); }
.buchruecken::before,
.buchruecken::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px;
  height: 1.5px;
  background: rgba(244, 241, 233, .75);
  border-radius: 1px;
}
.buchruecken::before { top: 13px; }
.buchruecken::after  { bottom: 13px; }

.werk-kopf { display: flex; gap: 1.1rem; align-items: flex-start; }
.werk-kopf h3 {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--tinte);
  line-height: 1.28;
  margin-bottom: .3rem;
}
.werk-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
}
.werk[hidden] { display: none; }

.leer-hinweis {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--text-leise);
}

/* ---- Rn. 13 · Tabellen ------------------------------------------------ */
.tabelle-huelle { overflow-x: auto; }
table.tafel-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  min-width: 520px;
}
table.tafel-tabelle th {
  text-align: left;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-leise);
  font-weight: 500;
  padding: 0 1rem .7rem 0;
  border-bottom: 1px solid var(--linie);
}
table.tafel-tabelle td {
  padding: .95rem 1rem .95rem 0;
  border-bottom: 1px solid var(--linie-zart);
  color: var(--text-weich);
  vertical-align: top;
}
table.tafel-tabelle td:first-child { color: var(--tinte); font-weight: 500; }
table.tafel-tabelle tr:last-child td { border-bottom: none; }

/* ---- Rn. 13b · Preise & Fragen ---------------------------------------- */
.preis {
  font-family: var(--mono);
  font-size: clamp(1.9rem, 3.4vw, 2.35rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--tinte);
  line-height: 1;
  margin: 1.1rem 0 .35rem;
}
/* »Auf Anfrage« ist kein Gezähltes — es spricht in der Groteske */
.preis.wort {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.45rem, 2.4vw, 1.8rem);
  letter-spacing: -0.012em;
}
.preis small {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--text-weich);
  letter-spacing: 0;
  margin-left: .35rem;
}
.preis-karte { position: relative; }
.preis-karte.hervor { border-color: rgba(30, 92, 73, .35); box-shadow: var(--schatten-hoch); }
.preis-karte .band-marke {
  position: absolute;
  top: -1px; right: 1.5rem;
  width: 3px; height: 26px;
  background: var(--band);
  border-radius: 0 0 2px 2px;
}

details.frage {
  border-bottom: 1px solid var(--linie);
  padding: 1.15rem 0;
}
details.frage summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--tinte);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
details.frage summary::-webkit-details-marker { display: none; }
details.frage summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--messing);
  flex: none;
  transition: transform .2s ease;
}
details.frage[open] summary::after { content: "–"; }
details.frage p { color: var(--text-weich); margin: .8rem 0 0; max-width: 68ch; }

/* ---- Rn. 14 · Formular ------------------------------------------------ */
.feld { display: block; margin-bottom: 1.15rem; }
.feld > label,
.feld-name {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--tinte);
  margin-bottom: .45rem;
  letter-spacing: -0.003em;
}
.feld .pflicht { color: var(--band); }

.eingabe {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--tinte);
  background: var(--karte);
  border: 1px solid rgba(21, 35, 29, .18);
  border-radius: var(--radius-s);
  padding: .82rem .95rem;
  transition: border-color .18s ease, box-shadow .18s ease;
  appearance: none;
}
.eingabe::placeholder { color: var(--text-leise); }
.eingabe:hover { border-color: rgba(21, 35, 29, .3); }
.eingabe:focus {
  outline: none;
  border-color: var(--leinen);
  box-shadow: 0 0 0 3px rgba(30, 92, 73, .12);
}
textarea.eingabe { resize: vertical; min-height: 132px; line-height: 1.6; }

select.eingabe {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2315231D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}

.kontrollkaestchen {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .89rem;
  color: var(--text-weich);
  line-height: 1.5;
}
.kontrollkaestchen input[type="checkbox"] {
  margin: .22rem 0 0;
  width: 17px; height: 17px;
  accent-color: var(--leinen);
  flex: none;
}
.kontrollkaestchen a { color: var(--leinen); text-decoration: underline; text-underline-offset: 2px; }

.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.meldung {
  display: none;
  margin-top: 1.1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-s);
  font-size: .92rem;
  line-height: 1.5;
  border-left: 2px solid transparent;
}
.meldung.sichtbar { display: block; }
.meldung.gut {
  background: rgba(30, 92, 73, .09);
  color: var(--leinen-tief);
  border-left-color: var(--leinen);
}
.meldung.schlecht {
  background: rgba(190, 59, 43, .08);
  color: var(--band-tief);
  border-left-color: var(--band);
}

.lader {
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dreh .7s linear infinite;
  display: none;
}
.lader.sichtbar { display: block; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---- Rn. 15 · Fußzeile ----------------------------------------------- */
.fusszeile {
  background: var(--tinte);
  color: rgba(244, 241, 233, .62);
  padding-block: clamp(3rem, 6vw, 4.25rem) 2rem;
  font-size: .93rem;
}
.fusszeile-raster {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.25rem);
}
@media (max-width: 860px) {
  .fusszeile-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fusszeile-raster > div:first-child { grid-column: 1 / -1; }
}
.fusszeile h4 {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--messing);
  margin-bottom: 1.1rem;
  font-weight: 500;
}
.fusszeile ul { list-style: none; margin: 0; padding: 0; }
.fusszeile li + li { margin-top: .62rem; }
.fusszeile a { color: rgba(244, 241, 233, .62); text-decoration: none; transition: color .18s ease; }
.fusszeile a:hover { color: var(--papier); }
.fusszeile-schluss {
  border-top: 1px solid rgba(244, 241, 233, .13);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: rgba(244, 241, 233, .42);
}
.fusszeile-anspruch {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: rgba(244, 241, 233, .55);
  margin: 1rem 0 0;
}

/* ---- Rn. 16 · Rechtstexte -------------------------------------------- */
.rechtstext { max-width: 74ch; }
.rechtstext h2 {
  font-family: var(--serif);
  font-size: 1.55rem;
  color: var(--tinte);
  margin: 3rem 0 1.1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}
.rechtstext > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.rechtstext h3 {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--tinte);
  margin: 1.9rem 0 .55rem;
}
.rechtstext h4 {
  font-size: .97rem;
  font-weight: 600;
  color: var(--tinte);
  margin: 1.35rem 0 .4rem;
}
.rechtstext p {
  color: var(--text-weich);
  margin: 0 0 .85rem;
  line-height: 1.68;
}
.rechtstext ul { color: var(--text-weich); padding-left: 1.2rem; margin: 0 0 .85rem; }
.rechtstext li { margin-bottom: .5rem; line-height: 1.62; }
.rechtstext a { color: var(--leinen); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.rechtstext .hinweis-gross {
  font-size: .87rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-weight: 500;
  color: var(--text-weich);
}
.rechtstext .adressblock {
  background: var(--karte);
  border: 1px solid var(--karte-linie);
  border-left: 2px solid var(--leinen);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.2rem;
  line-height: 1.7;
}

/* ---- Rn. 17 · Anmutung ----------------------------------------------- */
.auftauchen {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.auftauchen.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .auftauchen { opacity: 1; transform: none; transition: none; }
}

/* Hilfsklassen — sparsam gesetzt */
.mitte { text-align: center; }
.trenner { height: 1px; background: var(--linie); border: 0; margin: 0; }
/* Kleingedrucktes — Hinweis unter Beispielen */
.hinweis-klein {
  font-size: .76rem;
  line-height: 1.5;
  color: var(--text-leise);
  margin: .9rem 0 0;
  text-wrap: pretty;
}

.abstand-s { margin-top: 1rem; }
.abstand-m { margin-top: 1.75rem; }
.abstand-l { margin-top: 2.75rem; }
.wachsen { flex: 1; }
.messing-linie { height: 1px; background: var(--linie-messing); border: 0; }