/* =========================================================================
   Wanlickhus — Landingpage
   Die Seite ist das Bauschild: cremefarbener Grund, blaue Tinte für
   Überschriften, Linien und Knöpfe, dunkler Lauftext, eine Schrift (Outfit),
   Bilder mit runden Ecken. Eine blaue Fläche pro Seite (der Ruf am Ende),
   sonst Blau nur in Teilen: Pillen, Zahlen, Linien.
   Vorlage: ~/Documents/Bauschild/*.pdf
   ========================================================================= */

@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-variable.woff2') format('woff2-variations'),
       url('fonts/outfit-variable.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}

:root {
  --grund:  #FCF6EC;
  --tinte:  #0A01E0;
  --tinte-tief: #0700A8;
  --tinte-hell: rgba(10, 1, 224, .08);
  --tinte-linie: rgba(10, 1, 224, .35);
  --text:   var(--tinte);                      /* alles in blauer Tinte, wie das Schild */
  --leise:  var(--tinte);
  --linie:  rgba(10, 1, 224, .25);
  --weiss:  #fff;

  --rahmen: 1320px;
  --rand: clamp(20px, 4vw, 56px);
  --radius: clamp(16px, 2.5vw, 32px);          /* wie das Bild auf dem Schild */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;
  --kopf-hoehe: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--kopf-hoehe); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, .94rem + .3vw, 1.2rem);
  line-height: 1.5;
  font-synthesis-weight: none;
  overflow-x: hidden;
  min-height: 100svh; display: flex; flex-direction: column;   /* Fuß bleibt unten, auch auf kurzen Seiten */
}
main { flex: 1 0 auto; }

img { display: block; max-width: 100%; height: auto; }
/* Bilder nicht per Rechtsklick, Ziehen oder langem Tippen speichern. Hält nur
   Gelegenheitskopierer auf, Screenshots und Entwicklerwerkzeuge gehen weiter. */
img { pointer-events: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; border-radius: 4px; }
b, strong { font-weight: 700; }
h1, h2, h3, p, ul, ol, figure, dl { margin: 0; }
h1, h2, h3 { color: var(--tinte); }
p { max-width: 62ch; }
p + p { margin-top: .8em; }
button { font: inherit; color: inherit; }
.leise { font-weight: 400; color: var(--leise); }

.springmarke { position: absolute; left: -9999px; background: var(--tinte); color: var(--grund); padding: 12px 20px; z-index: 99; }
.springmarke:focus { left: 12px; top: 12px; }
.rahmen { width: 100%; max-width: var(--rahmen); margin-inline: auto; padding-inline: var(--rand); }

/* --- Wortmarke: WANLICK Bold, HUS ExtraLight, wie gedruckt ------------ */
.wortmarke {
  display: inline-flex; align-items: baseline; color: var(--tinte);
  font-size: clamp(2.6rem, 9.5vw, 8rem); line-height: .95;
  text-transform: uppercase; white-space: nowrap; letter-spacing: -.02em;
  font-kerning: normal; font-feature-settings: "kern" 1;
}
.wortmarke:hover { text-decoration: none; }
.wortmarke .fett  { font-weight: 700; }
.wortmarke .light { font-weight: 200; margin-left: .04em; }
.wortmarke .kA { margin-left: -.085em; }
.wortmarke .kN, .wortmarke .kU { margin-left: -.01em; }
.wortmarke .kL, .wortmarke .kI, .wortmarke .kS { margin-left: -.005em; }
.wortmarke--klein { font-size: clamp(1.5rem, 3.4vw, 1.8rem); line-height: 1; }

/* --- Kopfleiste: liegt über der Seite, wird beim Scrollen zur Fläche ----
   --p setzt js/site.js von 0 (ganz oben) auf 1 (gescrollt). Alles mittig
   in einer festen Höhe, das Bild beginnt direkt darunter.              */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50; --p: 1; height: var(--kopf-hoehe);
  background: rgba(252, 246, 236, calc(.8 * var(--p)));
  -webkit-backdrop-filter: blur(calc(14px * var(--p))); backdrop-filter: blur(calc(14px * var(--p)));
  box-shadow: 0 1px 0 rgba(10, 1, 224, calc(.18 * var(--p)));
}
.kopf__innen { max-width: var(--rahmen); margin-inline: auto; padding: 0 var(--rand); height: 100%; display: flex; align-items: center; gap: var(--s3); }
.kopf .wortmarke { margin-right: auto; }
.kopf nav { display: flex; gap: var(--s3); font-weight: 700; font-size: 1rem; }
.kopf .knopf { padding: .55em 1.1em; font-size: .9rem; }
.kopf__menu { display: none; background: none; border: 0; font-weight: 700; cursor: pointer; padding: 8px 0; }
@media (max-width: 860px) {
  .kopf nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: var(--s2);
              padding: var(--s3) var(--rand) var(--s4); background: var(--grund); border-bottom: 2px solid var(--tinte); font-size: 1.3rem; }
  .kopf.ist-offen nav { display: flex; }
  .kopf__menu { display: inline-block; }
  .kopf .knopf { display: none; }
}

/* --- Hero: die Szene aus dem Bauschild, in Ebenen, im Rahmen ----------- */
.hero { padding-top: var(--kopf-hoehe); padding-bottom: var(--s4); }   /* kleiner Rand unter der Szene */
.szene {
  position: relative; overflow: hidden;
  width: min(100% - 2 * var(--rand), 1600px); margin-inline: auto;
  aspect-ratio: 16 / 9; max-height: calc(100svh - var(--kopf-hoehe) - var(--s4));
  border-radius: var(--radius);
  background: url('img/hero/01-papier-hintergrund-2560.webp') center / cover;
}
.ebene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; will-change: transform; }
@media (max-width: 760px) { .szene { min-height: 62svh; } }
.ebene--pflanzen { top: 18%; }   /* wie im Druck: die untere Fensterreihe bleibt frei */

/* --- Sektionen ---------------------------------------------------------------
   Auf dem Desktop füllt jede reguläre Sektion einen Bildschirm (abzüglich
   Kopfleiste), der Inhalt sitzt mittig. Ablauf und Ruf (.sektion--frei)
   nehmen sich, was sie brauchen. Auf kleinen Bildschirmen zählt nur der
   Inhalt.                                                                  */
.sektion { padding-block: clamp(48px, 7vh, 96px); }   /* Luft zwischen den Sektionen, Sprungabstand regelt scroll-padding-top am html */
@media (min-width: 900px) and (min-height: 640px) {
  .sektion:not(.sektion--frei) { min-height: calc(100svh - var(--kopf-hoehe)); display: grid; grid-template-columns: 100%; align-content: center; }
}
/* Kein Strich über der Überschrift: der war in der Ruhelage einer Sektion
   immer zu sehen. Stattdessen ein kleines Quadrat davor und Luft darüber. */
.trenner {
  display: flex; align-items: center; gap: .5em;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; word-spacing: .1em;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.1;
}
.trenner::before { content: ''; width: .5em; height: .5em; border-radius: 2px; background: var(--tinte); flex: none; }
.sektion__intro { margin-top: var(--s2); max-width: 64ch; }

/* --- Einstieg: ein Absatz, der wie in der Zeitung in zwei Spalten läuft.
       Ein einziger Absatz, damit die linke Spalte nie kürzer ist als die
       rechte (der Browser gibt der ersten Spalte die aufgerundete Hälfte). */
.intro { padding-block: var(--s4) var(--s5); }
.intro h1 { font-weight: 700; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.025em; max-width: 14ch; }
.intro__text { margin-top: var(--s4); max-width: 100ch; orphans: 2; widows: 2; }
.intro__text p { max-width: none; }
@media (min-width: 760px) { .intro__text { columns: 2; column-gap: var(--s5); } }
.intro .tat { justify-content: flex-start; margin-top: var(--s4); }

/* --- Bedienebene 1: Pillen (Haustyp, Bauteil) ---------------------------- */
.pillen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.pillen button {
  font-size: .88rem; font-weight: 700; padding: .4em 1em; border-radius: 999px; cursor: pointer;
  background: none; border: 1.5px solid var(--tinte-linie); color: var(--text);
  transition: background-color .15s, color .15s, border-color .15s;
}
.pillen button:hover { border-color: var(--tinte); color: var(--tinte); }
.pillen button[aria-selected="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--grund); }

/* --- Tafeln: alle Inhalte einer Auswahl liegen übereinander im selben
       Gitterfeld. Höhe = die höchste Tafel, so springt beim Wechsel nichts.
       Ohne JS ist nur die erste sichtbar.                                */
.tafeln { display: grid; }
.tafeln > * { grid-area: 1 / 1; min-width: 0; }
.js .tafeln > .ist-weg { visibility: hidden; }
html:not(.js) .tafeln > :not(:first-child) { display: none; }

/* --- Bedienebene 2: Reiter mit Unterstrich (Ansichten, Varianten) -------- */
.ansichten, .varianten { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.ansichten { justify-content: space-between; }
.ansichten__reiter { display: flex; gap: var(--s3); flex-wrap: wrap; }
.ansichten__reiter button, .varianten button {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: .35em 0; margin-bottom: -1px;
  font-size: .9rem; font-weight: 700; color: var(--leise); cursor: pointer; transition: color .15s, border-color .15s;
}
.ansichten__reiter button:hover, .varianten button:hover { color: var(--tinte); }
.ansichten__reiter button[aria-selected="true"], .varianten button[aria-selected="true"] { color: var(--tinte); border-bottom-color: var(--tinte); }
.ansichten__pfeile { display: flex; align-items: center; gap: var(--s1); }
.ansichten__pfeile.ist-weg { display: none; }
.ansichten__pfeile button {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--tinte-linie); background: none; color: var(--tinte);
  font-weight: 700; cursor: pointer; display: grid; place-items: center; line-height: 1;
}
.ansichten__pfeile button:hover { background: var(--tinte); border-color: var(--tinte); color: var(--grund); }
.ansichten__zaehler { font-size: .85rem; color: var(--leise); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: center; }
.varianten { margin-top: var(--s3); border-bottom: 1px solid var(--linie); }
.varianten button { font-size: .95rem; }

/* --- Papier: die Zeichnungen liegen auf dem Papier der Szene, ohne Rand,
       mit leichtem Schatten, als läge das Blatt auf der Seite.            */
.papier {
  background: url('img/hero/01-papier-hintergrund-1280.webp') center / cover;
  border-radius: calc(var(--radius) * .5); padding: clamp(12px, 2vw, 24px);
  box-shadow: 0 1px 2px rgba(10, 1, 224, .10), 0 10px 30px rgba(10, 1, 224, .12);
}

/* --- Zweispalt nach Skizze: Bild und Text nebeneinander, Luft zur
       Überschrift. --bild-links: Papier links (Was wir bauen), sonst
       Papier rechts (Wie wir bauen, gespiegelt).                          */
.zweispalt { display: grid; gap: var(--s4); margin-top: var(--s3); align-items: start; }
@media (min-width: 900px) {
  .zweispalt { grid-template-columns: 4fr 8fr; gap: var(--s5); }
  .zweispalt--bild-links { grid-template-columns: 8fr 4fr; }
}
/* Auf großen Bildschirmen stehen Überschrift, Einstieg, Bedienung und Text in
   der schmalen Spalte, das Papier daneben über die ganze Sektionshöhe. So ist
   die Zeichnung so groß, wie der Bildschirm es hergibt. Dafür löst sich
   .zweispalt auf (display: contents) und alles sitzt direkt im Sektionsgitter:
   Papier links bei „Was wir bauen“, rechts bei „Wie wir bauen“.           */
@media (min-width: 900px) and (min-height: 640px) {
  .sektion--haus.sektion { grid-template-columns: 8fr 4fr; }
  .sektion--holz.sektion { grid-template-columns: 4fr 8fr; }
  .sektion--haus.sektion, .sektion--holz.sektion { grid-template-rows: auto auto 1fr; column-gap: var(--s5); }
  .sektion--haus > .zweispalt, .sektion--holz > .zweispalt { display: contents; }
  .sektion--haus > h2, .sektion--holz > h2 { grid-row: 1; }
  .sektion--haus > .sektion__intro, .sektion--holz > .sektion__intro { grid-row: 2; }
  .sektion--haus > h2, .sektion--haus > .sektion__intro { grid-column: 2; }
  .sektion--holz > h2, .sektion--holz > .sektion__intro { grid-column: 1; }
  .sektion--haus > .zweispalt > :first-child { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .sektion--haus > .zweispalt > :last-child  { grid-column: 2; grid-row: 3; align-self: start; margin-top: var(--s3); }
  .sektion--holz > .zweispalt > :first-child { grid-column: 1; grid-row: 3; align-self: start; margin-top: var(--s3); }
  .sektion--holz > .zweispalt > :last-child  { grid-column: 2; grid-row: 1 / -1; align-self: center; }
}

/* --- Was wir bauen: Plan links, Pillen und Text rechts ------------------- */
.typ__plan { display: grid; gap: var(--s2); align-content: center; }
.zweispalt .pillen { margin-top: 0; }
.zweispalt .pillen + .tafeln { margin-top: var(--s3); }
.typ__bilder figure { width: 100%; aspect-ratio: 4 / 3; max-height: max(300px, calc(100svh - var(--kopf-hoehe) - 13rem)); }
.typ__bilder img { width: 100%; height: 100%; object-fit: contain; }
.typ__text h3, .bauteil__text h3 { font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05; }
.typ__text h3 .leise { font-weight: 400; font-size: .55em; margin-left: .3em; }
.eckdaten { margin-top: var(--s3); display: grid; gap: 6px; font-size: .95em; }
.eckdaten div { display: grid; grid-template-columns: 9em 1fr; gap: var(--s2); border-top: 1px solid var(--linie); padding-top: 6px; }
.eckdaten dt { font-weight: 400; color: var(--leise); } .eckdaten dd { margin: 0; font-weight: 700; }
.eckdaten + p { margin-top: var(--s3); }
.folgt { margin-top: var(--s3); font-size: .85em; font-weight: 400; color: var(--leise); padding: 6px 10px; border: 1.5px dashed var(--linie); border-radius: 8px; display: inline-block; }

/* --- Wie wir bauen: Text links, Zeichnung rechts ------------------------- */
.bauteil__text > p:first-of-type { margin-top: var(--s2); }
.bauteil__text .tafeln { margin-top: var(--s3); }
.hinweis { margin-top: var(--s3); font-size: .85em; font-weight: 400; color: var(--leise); }
.bauteil__bild { display: grid; align-content: center; height: 100%; }
.bauteil__bild figure { width: 100%; aspect-ratio: 4 / 3; max-height: max(300px, calc(100svh - var(--kopf-hoehe) - 10rem)); overflow: hidden; border-radius: calc(var(--radius) * .4); }
.bauteil__bild img { width: 100%; height: 100%; object-fit: contain; }
.bauteil__bild .foto img { object-fit: cover; }
/* Details mit Nummern: die Fläche hat genau das Seitenverhältnis der Zeichnung
   (4:3), auch wenn die Höhe gekappt wird. So sitzen die Knöpfe (--x/--y in %,
   aus der PDF ausgelesen) immer auf den Kreisen. Beschreibung beim Drüberfahren,
   Antippen oder per Tab; overflow sichtbar, damit sie am Rand nicht abreißt. */
.bauteil__bild figure.detail { position: relative; width: min(100%, max(400px, calc((100svh - var(--kopf-hoehe) - 10rem) * 4 / 3))); max-height: none; margin-inline: auto; overflow: visible; }
.detail img { border-radius: inherit; }
.nr { position: absolute; left: var(--x); top: var(--y); width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; border-radius: 50%; background: transparent; font: inherit; cursor: help; }
.nr:hover, .nr:focus-visible { background: rgba(10, 1, 224, .14); outline: none; }
.nr:focus-visible { box-shadow: 0 0 0 2px var(--tinte); }
.nr > span {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 2;
  width: max-content; max-width: 14rem; padding: 6px 10px; border-radius: 8px; background: var(--tinte); color: var(--grund);
  font-size: .85rem; font-weight: 500; line-height: 1.3; text-align: center; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
}
.nr:hover > span, .nr:focus > span { opacity: 1; visibility: inherit; }   /* inherit: in einer versteckten Tafel bleibt der Tooltip versteckt */
/* Handy: die Zeichnung steht über dem Text, direkt unter der Überschrift.
   Das Papier behält 4:3, sonst gibt das hochkante Fensterfoto im Tafelstapel
   die Höhe vor und der Papiergrund wird viel zu hoch.                      */
@media (max-width: 899px) {
  .sektion--holz > .zweispalt > :last-child { order: -1; }
  .bauteil__bild figure { aspect-ratio: 4 / 3; max-height: none; }
  .bauteil__bild img { height: 100%; }
  .bauteil__bild .foto img { object-fit: cover; }
}

/* --- So läuft's: Kopf bleibt stehen, die Schritte falten sich beim
       Scrollen auf. Die Zahl wird blau, wenn sie die Bildmitte kreuzt.  */
.ablauf { display: grid; gap: var(--s4); }
@media (min-width: 900px) {
  .ablauf { grid-template-columns: 2fr 3fr; gap: var(--s6); align-items: start; }
  .ablauf__kopf { position: sticky; top: calc(var(--kopf-hoehe) + var(--s4)); }
}
.schritte { list-style: none; padding: 0; position: relative; display: grid; gap: clamp(40px, 9vh, 110px); padding-block: var(--s2) var(--s4); }
.schritte::before, .schritte::after { content: ''; position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; background: var(--linie); }
.schritte::after { background: var(--tinte); transform-origin: top; transform: scaleY(0); }
.schritt { display: grid; grid-template-columns: 48px 1fr; gap: var(--s3); align-items: start; position: relative; z-index: 1; }
.schritt__nr {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--tinte); background: var(--grund); color: var(--tinte);
  display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; position: relative; z-index: 1; overflow: hidden;
}
.schritt__nr::before, .schritt__nr::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; }
.schritt__nr::before { background: var(--tinte); transform: scale(0); }
.schritt__nr::after { content: attr(data-nr); color: var(--grund); display: grid; place-items: center; clip-path: circle(0% at 50% 50%); }
.schritt h3 { font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.15; padding-top: .45em; }
.schritt p { margin-top: var(--s2); max-width: 52ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .schritt { animation: auffalten linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .schritt__nr::before { animation: scheibe linear both; animation-timeline: view(block 48% 48%); animation-range: cover 0% cover 100%; }
    .schritt__nr::after { animation: ziffer linear both; animation-timeline: view(block 48% 48%); animation-range: cover 0% cover 100%; }
    .schritte::after { transform: scaleY(0); animation: linie linear both; animation-timeline: view(block 48% 48%); animation-range: cover 0% cover 100%; }
  }
}
@keyframes auffalten { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes scheibe { to { transform: scale(1); } }
@keyframes ziffer { to { clip-path: circle(75% at 50% 50%); } }
@keyframes linie { to { transform: scaleY(1); } }
@media (max-width: 899px) { .schritte { gap: var(--s4); } }

/* --- Referenzen: ein Laufband im Rahmen, eine Richtung. Alle Bilder
       quadratisch in einer Reihe. Das Band ist ein seitlich scrollbarer
       Bereich ohne Leiste, js/site.js schiebt ihn weiter und hält unter der
       Maus an. Zweiter Satz = Kopie für den nahtlosen Übergang.           */
.lauf { --kachel: clamp(250px, 38vh, 440px); margin-top: var(--s4); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: calc(var(--radius) * .6); }
.lauf::-webkit-scrollbar { display: none; }
.lauf__band { display: flex; width: max-content; }
.lauf__satz { display: flex; gap: var(--s2); padding-right: var(--s2); }
.lauf__satz img { width: var(--kachel); aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) * .6); }
html:not(.js) .lauf__satz[aria-hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .lauf__satz[aria-hidden] { display: none; } }

/* --- Und dein Haus? Der Abschluss, mit viel Raum, ohne Fläche --------------- */
.ruf { display: grid; gap: var(--s4); padding-block: clamp(32px, 6vh, 64px) clamp(80px, 14vh, 160px); }
.ruf::before { content: ''; grid-column: 1 / -1; border-top: 2px solid var(--tinte); margin-bottom: clamp(40px, 8vh, 96px); }
@media (min-width: 900px) { .ruf { grid-template-columns: 3fr 2fr; gap: var(--s6); align-items: start; } }
.ruf h2 { font-weight: 700; font-size: clamp(2.4rem, 5.2vw, 4.6rem); line-height: 1; letter-spacing: -.025em; }
.ruf__wege p { max-width: 40ch; }
.ruf .tat { margin-top: var(--s4); justify-content: flex-start; }
.ruf__mail { margin-top: var(--s5); font-weight: 400; line-height: 1.4; }
.ruf__mail a { font-weight: 700; font-size: 1.25em; text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 2px; }
.ruf__adresse { margin-top: var(--s2); font-size: .9em; font-weight: 400; }

.tat { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s4); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95em; padding: .8em 1.5em; border-radius: 12px;
  background: var(--tinte); color: var(--grund); border: 2px solid var(--tinte);
  transition: transform .15s, background-color .15s, border-color .15s;
}
.knopf:hover { text-decoration: none; transform: translateY(-2px); background: var(--tinte-tief); border-color: var(--tinte-tief); }
.knopf--leer { background: transparent; color: var(--tinte); }
.knopf--leer:hover { background: var(--tinte-hell); border-color: var(--tinte); }
.knopf--hell { background: var(--grund); color: var(--tinte); border-color: var(--grund); }
.knopf--hell:hover { background: var(--weiss); border-color: var(--weiss); }
.knopf--leer-hell { background: transparent; color: var(--grund); border-color: rgba(252, 246, 236, .6); }
.knopf--leer-hell:hover { background: rgba(255, 255, 255, .1); border-color: var(--grund); }

/* --- Fuß: kompakt, links und rechts, ganz blau als Basis der Seite ---------- */
.fuss { background: var(--tinte); color: var(--grund); font-size: .9rem; }
.fuss .wortmarke { color: var(--grund); }
.fuss a:hover { color: var(--grund); text-decoration: underline; }
.fuss :focus-visible { outline-color: var(--grund); }
.fuss__innen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4); padding-block: var(--s3); }
.fuss__links, .fuss__rechts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.fuss .wortmarke--klein { font-size: 1.3rem; }

/* --- Kontaktseite und Formular ------------------------------------------------ */
.kontakt { padding-top: calc(var(--kopf-hoehe) + var(--s5)); padding-bottom: var(--s6); display: grid; gap: var(--s5); }
@media (min-width: 900px) { .kontakt { grid-template-columns: 2fr 3fr; gap: var(--s6); align-items: start; } }
.kontakt h1 { font-weight: 700; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; letter-spacing: -.025em; }
.kontakt__wege { margin-top: var(--s4); display: grid; gap: var(--s3); }
.kontakt__wege div { border-top: 1px solid var(--linie); padding-top: var(--s2); }
.kontakt__wege .leise { display: block; font-size: .85em; }
.kontakt__wege a { font-weight: 700; color: var(--tinte); }
.formular { display: grid; gap: var(--s3); }
@media (min-width: 600px) { .formular { grid-template-columns: 1fr 1fr; } .formular .breit { grid-column: 1 / -1; } }
.formular label { display: grid; gap: 6px; font-weight: 700; font-size: .95em; }
.formular label > span:first-child .leise { display: inline; }
.formular label .leise { font-weight: 400; font-size: .85em; margin-left: .3em; }
.formular input, .formular textarea {
  font: inherit; color: var(--text); width: 100%; padding: .7em .9em; border-radius: 10px;
  border: 1.5px solid var(--linie); background: var(--weiss);
}
.formular input:focus, .formular textarea:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px var(--tinte-hell); }
.formular textarea { min-height: 9em; resize: vertical; }
.formular .fehler { display: none; font-weight: 400; font-size: .85em; color: #B3261E; }
.formular.ist-geprueft :invalid { border-color: #B3261E; }
.formular.ist-geprueft :invalid + .fehler { display: block; }
.formular .honig { position: absolute; left: -9999px; }
.formular .knopf { justify-self: start; }
.formular .klein { font-size: .85em; font-weight: 400; color: var(--leise); }
.meldung { display: none; margin-bottom: var(--s3); padding: var(--s2) var(--s3); border-radius: 12px; border: 2px solid var(--tinte); font-weight: 700; }
.meldung:target { display: block; }
.meldung--gut { background: var(--tinte); color: var(--grund); }
.meldung--schlecht { border-color: #B3261E; color: #B3261E; }

/* --- Rechtsseiten ------------------------------------------------------------ */
.text { padding-top: calc(var(--kopf-hoehe) + var(--s5)); padding-bottom: var(--s5); }
.text h1 { font-weight: 700; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; letter-spacing: -.02em; }
.text h2 { font-weight: 700; font-size: 1.15em; margin-top: var(--s5); margin-bottom: var(--s2); text-transform: uppercase; letter-spacing: .05em; }
.text p { max-width: 62ch; }
.text ul { margin-block: var(--s2); }
.tafel { margin: 0; display: grid; max-width: 60ch; }
.tafel > div { display: grid; gap: 2px var(--s3); padding-block: 10px; border-top: 1px solid var(--linie); }
.tafel > div:last-child { border-bottom: 1px solid var(--linie); }
@media (min-width: 560px) { .tafel > div { grid-template-columns: 11rem 1fr; align-items: baseline; } }
.tafel dt { font-weight: 400; color: var(--leise); }
.tafel dd { margin: 0; font-weight: 700; }
.klaerpunkt {
  margin-top: var(--s3); padding: 12px 16px; border: 2px dashed var(--linie);
  border-radius: 10px; font-weight: 400; font-size: .92em; line-height: 1.5; max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) { .ebene { transform: none !important; } }
@media print { .kopf, .knopf, .ansichten__pfeile { display: none; } .hero { padding-top: 0; } .sektion { min-height: 0; } }