@charset "utf-8";

/*
Theme Name: fischer Garten- und Landschaftsbau
Theme URI: https://fwn-media.de
Author: FWN Media
Author URI: https://fwn-media.de
Description: OnePager für fischer Garten- und Landschaftsbau & Erdarbeiten in Rohrbach an der Ilm. Block-Theme, kein Page Builder, kein JS-Framework, Schriften self-hosted. Farben, Schriften und Abstände stehen ausschliesslich in theme.json.
Version: 2.0.4
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fischer-galabau
Tags: one-column, block-patterns, full-site-editing, custom-colors, editor-style
*/

/* ==========================================================================
   fischer Garten- und Landschaftsbau — Stylesheet
   FWN Media · uebernommen aus entwurf/assets/css/entwurf-b.css (06.08.2026)

   Gegenueber dem Entwurf haben sich genau drei Dinge geaendert:

   a  Die @font-face-Regeln sind raus. Die Schriften kommen jetzt ueber
      theme.json → fontFace; nur so kennt sie auch der Block-Editor.
   b  Die --wp--preset--* und --wp--custom--* Werte sind raus. Sie kommen
      ebenfalls aus theme.json — eine Quelle, nicht zwei. Im :root unten
      stehen nur noch die abgeleiteten Werte, die WordPress nicht kennt.
   c  Am Ende steht ein kurzer Abschnitt 24 fuer das, was erst im Theme
      dazukommt: Adminleiste, Blockhuellen, Inhalt einer Unterseite.

   Alles dazwischen ist unveraendert.

   Drei Regeln tragen den Entwurf:

   1  Bogen und Ader liegen nie auf einem Foto und enden nie frei. Sie sind
      immer an einer Fensterkante angeschnitten. Auf der ganzen Seite: zwei
      Boegen (Hero unten links, Ueber mich oben rechts) und eine Ader (die
      Linie im Ablauf). Vorher: drei Boegen, vier Adern, davon zwei quer
      ueber dem Hero-Foto.

   2  Alle Entwurfsnotizen tragen dieselbe Form — .notiz. Vorher gab es
      vier: schwarze Balken im Bild, umrandete Kaesten, freie Absaetze,
      Bloecke mit rotem Randstrich.

   3  Jede Sektion hat eine Blickachse. Ueberschrift und Erklaertext stehen
      untereinander, nicht in zwei Spaltenkoepfen nebeneinander. Zweite
      Spalten tragen nur noch Bilder.

   Keine Farbe ausserhalb der fuenf CD-Werte. Keine Groesse ausserhalb der
   Skala. Zwei Schriften, beide lokal.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 — Abgeleitete Werte

   Farben, Schriften, Groessen- und Abstandsskala stehen in theme.json und
   erscheinen von dort als --wp--preset--* und --wp--custom--*. Hier steht
   nur, was sich daraus ableitet und was WordPress nicht kennt.

   ⚠️ Keine Ziffer an den Anfang eines Slugs. WordPress schreibt Slugs vor
   der Ausgabe in Kebab-Schreibweise um und setzt dabei einen Bindestrich
   zwischen Ziffer und Buchstabe: aus "2xl" wird --wp--preset--font-size--2-xl.
   Wer im Stylesheet dann --wp--preset--font-size--2xl schreibt, greift ins
   Leere; die Regel faellt aus, ohne dass etwas meldet. Genau das ist bis
   zum 10.08.2026 passiert — h1 und h2 standen live auf 17 px statt auf
   88 px und 56 px. Die beiden Stufen heissen deshalb "xxl" und "xxxl".
   Reine Ziffernslugs wie die Abstaende (20…70) sind unbedenklich, dort
   kommt kein Buchstabe hinterher.

   Die Einsatzregeln der fuenf Farben aus der Kontrastrechnung:
     Schwarz auf Creme  13,6:1   alles
     Creme auf Schwarz  13,6:1   alles
     Schwarz auf Mint    7,8:1   alles
     Weiss auf Rot       4,6:1   alles
     Rot auf Creme       3,7:1   nur Saira-Bold ab 19 px (grosse Schrift)
     Creme auf Rot       3,7:1   nicht verwenden — auf Rot steht Weiss
     Weiss/Rot auf Mint  2,2:1   nicht verwenden
   -------------------------------------------------------------------------- */

:root {
  /* Abgeleitete Toene — reine Deckkraftstufen der fuenf Werte, keine
     sechste Farbe. Nur fuer Linien und Platzhalterschraffur.               */
  --linie-schwarz: rgba(29, 29, 27, 0.22);
  --linie-schwarz-fein: rgba(29, 29, 27, 0.12);
  --linie-creme: rgba(237, 230, 220, 0.24);
  --schraffur-mint: rgba(146, 185, 157, 0.8);
  --schraffur-creme: rgba(237, 230, 220, 0.22);

  /* Abstand von der Bahnkante bis zur Fensterkante.

     ⚠️ Seit dem 10.08.2026 nirgends mehr benutzt: Alle Bildflaechen sind
     geboxt, keine laeuft mehr ueber den Rand. Die Rechnung bleibt stehen,
     weil sie schwer wiederzufinden waere — der uebliche
     calc(50% - 50vw)-Griff misst den Rasterplatz statt der Seite und
     schiesst zu weit. Wer wieder anschneiden will, hat sie hier. */
  --ueberhang: calc(
    50vw - min(100vw, var(--wp--custom--layout--wide)) / 2 +
      var(--wp--custom--layout--rand)
  );

  /* Radius 0 auf allem Rechteckigen — Knoepfe, Formularfelder, Karte.
     Stammt aus der Formensprache „Gewicht und Kante", die am 10.08.2026
     durch „geboxt" abgeloest wurde; fuer die Bedienelemente ist die harte
     Kante geblieben.                                                      */
  --kante: 0;

  /* Bildflaechen dagegen sind seit dem 10.08.2026 leicht gerundet. 8 px
     sind sichtbar, ohne dass ein Foto nach Aufkleber aussieht. Eigener
     Wert und nicht --kante, weil eine halb gerundete Seite schlechter
     waere als eine konsequente: Bilder rund, Bedienelemente eckig.        */
  --kante-bild: 0.5rem;

  --takt-schnell: 160ms;
  --takt-mittel: 240ms;
  --takt-ruhig: 320ms;

  /* Nur fuer die Drehung der Galeriekachel (14.08.2026, Entscheidung
     Ferdinand: „etwas langsamer“). Vorher lief sie auf --takt-ruhig mit
     320 ms — zu schnell, um den Titel auf der Rueckseite mitzulesen.

     Eigener Wert und nicht ein hoeher gesetztes --takt-ruhig: An dem
     haengen auch das Ueberblenden der Dias und die Zustaende im Formular,
     und die sollen nicht mit langsamer werden. Eine halbe Sekunde ist die
     Obergrenze fuer eine Zustandsaenderung, die sich noch wie eine Reaktion
     anfuehlt; das hier ist eine Bewegung, die man ansehen soll.            */
  --takt-karte: 620ms;

  --kurve: cubic-bezier(0.4, 0, 0.2, 1);

  --kopfhoehe: 4.75rem;

  /* Eigener Token, weil die Ablauflinie exakt unter der Ziffernzeile
     sitzen muss — ohne festen Wert waere die Hoehe nicht berechenbar. */
  --ablauf-zahl: clamp(3rem, 5vw, 4.5rem);

}


/* --------------------------------------------------------------------------
   3 — Grundlage   (unveraendert)
   -------------------------------------------------------------------------- */

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

/* Muss vor allen Klassenregeln stehen und sie schlagen: sonst hebt ein
   display-Wert aus einer Klasse das hidden-Attribut auf, und ohne
   JavaScript steht z. B. die wirkungslose Filterzeile sichtbar da. */
[hidden] { display: none !important; }

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

/* Waagerecht abschneiden.

   `--ueberhang` rechnet mit `100vw`, und `100vw` schliesst die
   Bildlaufleiste mit ein — `clientWidth` nicht. Sobald die Seite eine
   Bildlaufleiste hat und breiter als die Bahn ist, schiessen die
   randlosen Bildflaechen deshalb um deren Breite ueber den rechten
   Rand hinaus: gemessen 8 px bei 1440, rund 16 px bei 1920. Das reicht,
   damit sich die Seite am Trackpad seitlich schieben laesst, und genau
   das fuehlt sich beim Scrollen falsch an.

   `clip` statt `hidden`, weil `hidden` einen Scroll-Container erzeugen
   und damit den klebenden Kopf aushebeln wuerde. */
html,
body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--wp--preset--color--creme);
  color: var(--wp--preset--color--schwarz);
  font-family: var(--wp--preset--font-family--text);
  font-weight: 300;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.94;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--wp--preset--font-size--xxxl); }
h2 { font-size: var(--wp--preset--font-size--xxl); }
h3 { font-size: var(--wp--preset--font-size--xl); }
h4 { font-size: var(--wp--preset--font-size--lg); line-height: 1.05; }

p {
  margin: 0 0 var(--wp--preset--spacing--30);
  max-width: 68ch;
}

p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

img,
svg { display: block; max-width: 100%; }

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--wp--preset--color--rot);
  outline-offset: 3px;
}

.sprungziel {
  position: absolute;
  left: var(--wp--custom--layout--rand);
  top: 0;
  z-index: 90;
  transform: translateY(-120%);
  background: var(--wp--preset--color--schwarz);
  color: var(--wp--preset--color--creme);
  padding: 0.75rem 1.25rem;
  font-family: var(--wp--preset--font-family--ueberschrift);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--takt-schnell) var(--kurve);
}

.sprungziel:focus { transform: translateY(0); }

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


/* --------------------------------------------------------------------------
   4 — Bahnen und Sektionen
   Sektionshoehen variieren mit dem Gewicht des Inhalts — nicht alle gleich.
   -------------------------------------------------------------------------- */

.bahn {
  width: 100%;
  max-width: var(--wp--custom--layout--wide);
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--rand);
}

.spalte { max-width: var(--wp--custom--layout--content); }

.sektion {
  position: relative;
  scroll-margin-top: var(--kopfhoehe);
}

/* Die Polsterung ist gegenueber dem ersten Entwurf um rund ein Drittel
   zurueckgenommen. Zielgroesse ist ein 1920x1080-Laptop bei 150 %
   Windows-Skalierung: 1280 x 600 nutzbare CSS-Pixel. Darauf soll jede
   Sektion ausser der Galerie auf einen Bildschirm passen. */
.sektion--xl { padding-block: clamp(2.75rem, 5vw, 5rem); }
.sektion--l  { padding-block: clamp(2.5rem, 4.8vw, 4.75rem); }
.sektion--m  { padding-block: clamp(2rem, 3.5vw, 3.5rem); }
.sektion--s  { padding-block: clamp(1.75rem, 3vw, 3rem); }

/* Macht unten Platz fuer die Formularkarte, die in diese Sektion
   hineinragt. */
.sektion--vor-karte { padding-bottom: clamp(3rem, 5.5vw, 5.5rem); }

.sektion--schwarz {
  background: var(--wp--preset--color--schwarz);
  color: var(--wp--preset--color--creme);
}

.sektion--mint {
  background: var(--wp--preset--color--mint);
  color: var(--wp--preset--color--schwarz);
}

.sektion--rot {
  background: var(--wp--preset--color--rot);
  color: var(--wp--preset--color--weiss);
}

/* Auf dunklen und roten Flaechen wechselt der Fokusrahmen die Farbe —
   Rot auf Schwarz waere zwar knapp ueber 3:1, Creme ist eindeutig. */
.sektion--schwarz :focus-visible,
.sektion--rot :focus-visible,
.leiste :focus-visible,
.fuss :focus-visible {
  outline-color: var(--wp--preset--color--creme);
}


/* Label ueber der Ueberschrift — Saira, klein, mit Logo-Punkt davor */
.marke {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: var(--wp--preset--font-size--base);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1;
}

.marke::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--wp--preset--color--rot);
  flex: 0 0 auto;
}

/* Entwurfsnotiz. Faellt vor dem Livegang weg, muss bis dahin aber
   lesbar sein — deshalb kein Rot auf Creme, das erreicht nur 3,7:1. */
.hinweis {
  font-size: var(--wp--preset--font-size--sm);
  max-width: 82ch;
}

.hinweis b { font-weight: 600; }
.abstand { margin-top: var(--wp--preset--spacing--40); }
.abstand-klein { margin-top: var(--wp--preset--spacing--30); }


/* Die eine Form fuer jede Entwurfsnotiz.
   Vorher hatten dieselben Inhalte vier verschiedene Formen — schwarze
   Balken im Bild, umrandete Kaesten, freie Absaetze, Bloecke mit rotem
   Randstrich. Ein grosser Teil dessen, was unruhig wirkte, war
   Baustellenmarkierung. Sichtbar bleiben muss sie (anti-ki.md), aber in
   einer Form. Der rote Strich ist eine Linie, kein Text — die 3,7:1 von
   Rot auf Creme sind hier unerheblich. */
.notiz {
  border-left: 2px solid var(--wp--preset--color--rot);
  padding-left: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.5;
  max-width: 84ch;
}

.notiz b { font-weight: 600; }


/* --------------------------------------------------------------------------
   5 — Angeschnittene Kreisformen
   Die einzigen Rundungen der Seite. Immer angeschnitten an einer
   Fensterkante, nie ganz sichtbar, nie ueber einem Foto. Zwei Stueck auf
   der ganzen Seite: Hero unten links, Ueber mich oben rechts.

   Die Blattader ist von vier Vorkommen auf eines zusammengestrichen: die
   Linie im Ablauf. Sie steht dort weiter unten bei .ablauf__schritte.
   -------------------------------------------------------------------------- */

.bogen {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.bogen--mint { background: var(--wp--preset--color--mint); }
.bogen--creme { background: var(--wp--preset--color--creme); }
.bogen--rot { background: var(--wp--preset--color--rot); }


/* --------------------------------------------------------------------------
   6 — Schaltflaechen   (unveraendert)
   -------------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.6875rem 1.375rem;
  border: 2px solid var(--wp--preset--color--rot);
  border-radius: var(--kante);
  background: var(--wp--preset--color--rot);
  color: var(--wp--preset--color--weiss);
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: 1.1875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--takt-schnell) var(--kurve),
    border-color var(--takt-schnell) var(--kurve);
}

.knopf:hover {
  background: var(--wp--preset--color--schwarz);
  border-color: var(--wp--preset--color--schwarz);
}

/* CD-Paar: aussen roter Rahmen, beim Zeigen gefuellt */
.knopf--linie {
  background: transparent;
  color: var(--wp--preset--color--rot);
}

.knopf--linie:hover {
  background: var(--wp--preset--color--rot);
  border-color: var(--wp--preset--color--rot);
  color: var(--wp--preset--color--weiss);
}

/* Auf dunklen und roten Flaechen */
.sektion--schwarz .knopf--linie { color: var(--wp--preset--color--creme); }

.sektion--rot .knopf {
  background: var(--wp--preset--color--weiss);
  border-color: var(--wp--preset--color--weiss);
  color: var(--wp--preset--color--rot);
}

.sektion--rot .knopf:hover {
  background: var(--wp--preset--color--schwarz);
  border-color: var(--wp--preset--color--schwarz);
  color: var(--wp--preset--color--weiss);
}

/* Ausnahme von der Ausnahme, 06.08.2026.
   Die Regel darueber ist fuer Knoepfe gedacht, die direkt auf der roten
   Flaeche stehen — weisser Knopf auf Rot. Der Absendeknopf steht aber
   IM cremefarbenen Formularkasten, und Weiss auf Creme ist keine
   sichtbare Kante: Der Knopf verliert seine Form und sieht aus wie ein
   Stueck Papier mit roter Schrift.

   Aufgefallen ist es erst, seit das Formular Primaerziel ist — der
   wichtigste Knopf der Seite war der unsichtbarste. Im Kasten gilt
   deshalb wieder die normale Fuellung. */
.karte .knopf {
  background: var(--wp--preset--color--rot);
  border-color: var(--wp--preset--color--rot);
  color: var(--wp--preset--color--weiss);
}

.karte .knopf:hover {
  background: var(--wp--preset--color--schwarz);
  border-color: var(--wp--preset--color--schwarz);
  color: var(--wp--preset--color--weiss);
}

.knopf__zeichen { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }

/* Textlink — Saira 700 ab 19 px, damit Rot auf Creme als grosse Schrift
   die 3:1 erfuellt. Kleiner darf er nicht werden. */
.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.4375rem;
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: 1.1875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--rot);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--takt-schnell) var(--kurve);
}

.textlink:hover { border-bottom-color: var(--wp--preset--color--rot); }
.textlink::after { content: "\203A"; font-size: 1.375em; line-height: 0; }

.sektion--schwarz .textlink,
.sektion--mint .textlink { color: currentColor; }
.sektion--schwarz .textlink:hover,
.sektion--mint .textlink:hover { border-bottom-color: currentColor; }


/* --------------------------------------------------------------------------
   7 — Bildflaechen
   Wo noch kein Foto vorliegt, bleibt eine markierte Platzhalterflaeche:
   richtiges Seitenverhaeltnis, Motiv und Ausschnitt angeschrieben. Ein
   echtes Foto rueckt spaeter ohne Layoutaenderung ein.
   -------------------------------------------------------------------------- */

.bild {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: var(--wp--preset--color--creme);
  border: 1px solid var(--linie-schwarz);
  /* overflow: hidden darueber ist der Grund, warum hier eine Zeile
     reicht: Der Radius schneidet das Foto mit. */
  border-radius: var(--kante-bild);
}

/* Die Schraffur liegt nur noch dort, wo wirklich kein Foto ist.
   Vorher trug sie jede Bildflaeche, auch die elf, ueber denen ein Foto
   liegt und die man deshalb nie sieht — ein wiederholter Verlauf ueber
   eine grosse Flaeche kostet bei jedem Neuzeichnen echte Zeit, und auf
   einem Windows-Rechner mit 150 % Skalierung wird er mit anderthalb-
   facher Pixelzahl gerastert. Zusammen mit dem klebenden Kopf war das
   der Grund fuers Ruckeln beim Scrollen. */
.bild--leer {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 13px,
    var(--schraffur-mint) 13px 14px
  );
}

/* Das Foto fuellt die Flaeche vollstaendig aus. Es liegt absolut, damit die
   Notiz als Flex-Kind darueber sitzen bleibt — sie traegt z-index 1.
   Wo noch kein Foto eingerueckt ist, bleibt die Schraffur sichtbar und
   zeigt weiter an, welches Motiv dort fehlt. */
.bild img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zwei Motive sitzen nicht mittig. Auf schmalen Bildschirmen aendert sich
   das Seitenverhaeltnis beider Flaechen, und der Standardwert `center`
   wuerde genau das wegschneiden, worum es geht. */

/* 21:9 wird unter 64em zu 3:2 — sichtbar bleiben dann knapp zwei Drittel
   der Bildbreite. Der Bagger steht links und muss drin bleiben. */
.erde__panorama img { object-position: left center; }

/* Seit dem 17.08.2026 traegt das Hero-Bild genau 16:10 — die Datei ist aus
   einem Hochformat auf das Mass der Flaeche geschnitten. Auf Desktop und
   Handy wird deshalb gar nichts mehr weggeschnitten, unter 64em (3:2) nur
   links und rechts je 3 % der Breite.

   Vertikal greift der Wert nur noch in einem Fall: Wenn am Handy
   max-height: 30svh zieht, wird die Flaeche flacher als 16:10. Der
   Schwerpunkt nach unten haelt dann den Rasen im Bild statt des Himmels. */
.hero__bild img { object-position: center 60%; }

.bild--dunkel {
  background-color: var(--wp--preset--color--schwarz);
  border-color: var(--linie-creme);
}

/* Auch hier: die Schraffur nur, wenn wirklich kein Foto darueberliegt. */
.bild--dunkel.bild--leer {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 13px,
    var(--schraffur-creme) 13px 14px
  );
}

/* Der schwarze Balken bleibt genau dort, wo er etwas erklaert: auf einer
   leeren Platzhalterflaeche, auf der sonst nur Schraffur stuende. Ueber
   den Galeriefotos ist er weg — dort steht die Unterschrift jetzt unter
   der Kachel (.kachel__notiz). */
.bild__notiz {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--wp--preset--color--schwarz);
  color: var(--wp--preset--color--creme);
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: var(--wp--preset--font-size--sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.35;
  max-width: none;
}

/* Der Punkt markiert die Notiz in Rot, der Text bleibt im vollen
   Kontrast — Rot auf Schwarz erreicht ebenfalls nur 3,7:1. */
.bild__notiz::before {
  content: "";
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--wp--preset--color--rot);
  margin-right: 0.5rem;
  vertical-align: 0.05em;
}

.bild__notiz b { font-weight: 700; }

.bild--dunkel .bild__notiz {
  background: var(--wp--preset--color--creme);
  color: var(--wp--preset--color--schwarz);
}


/* --------------------------------------------------------------------------
   8 — Kopf   (unveraendert)
   -------------------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wp--preset--color--creme);
  border-bottom: 1px solid var(--linie-schwarz-fein);
}

.kopf__bahn {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  min-height: var(--kopfhoehe);
}

.kopf__logo {
  margin-right: auto;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}

.kopf__logo img { height: 2.75rem; width: auto; }

.kopf__weg {
  display: flex;
  align-items: center;
  gap: 1.625rem;
}

.kopf__weg a {
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: var(--wp--preset--font-size--base);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--takt-schnell) var(--kurve);
}

.kopf__weg a:hover { border-bottom-color: var(--wp--preset--color--rot); }

/* Der Punkt, dessen Sektion gerade oben steht (16.08.2026).

   Dieselbe rote Kante wie beim Ueberfahren, nur dauerhaft. Zwei Farben fuer
   zwei Zustaende waeren hier eine Unterscheidung ohne Nutzen: Niemand faehrt
   mit dem Zeiger ueber das Menue, waehrend er liest.

   Gesetzt wird aria-current von fischer.js, Abschnitt 3. Ohne Skript bleibt
   die Zeile unmarkiert — es fehlt dann nichts, es fuehrt nur nichts mit. */
.kopf__weg a[aria-current] { border-bottom-color: var(--wp--preset--color--rot); }

.kopf__schalter { display: none; }

/* Offen zeigt der Knopf ein Kreuz statt der drei Balken (14.08.2026,
   Entscheidung Ferdinand). Beide Zeichen liegen im Markup, entschieden wird
   an aria-expanded — an demselben Attribut haengt auch das Menue selbst.
   Damit kann die Anzeige nicht vom Zustand abweichen, und kein Skript muss
   mitten im Tippen ein SVG austauschen.

   Die Regeln stehen hier und nicht im Handy-Block: Ueber 64em ist der Knopf
   ohnehin display: none, ein zweites Zeichen darin faellt also nicht auf. */
.kopf__zeichen--kreuz { display: none; }
.kopf__schalter[aria-expanded="true"] .kopf__zeichen--balken { display: none; }
.kopf__schalter[aria-expanded="true"] .kopf__zeichen--kreuz { display: block; }

/* Der kurze Draht: Telefon und E-Mail als Zeichenknoepfe.

   Sie stehen seit dem 10.08.2026 dort, wo bis dahin „Projekt anfragen“ stand.
   Ohne Beschriftung — mit Text passte die Zeile nicht mehr neben Logo und
   Navigation. Was eine Beschriftung sonst leistet, leisten hier aria-label
   (Sprachausgabe) und title (Maus).

   2,75 rem sind 44 px: die kleinste Flaeche, die sich mit dem Daumen
   zuverlaessig treffen laesst. */
.kopf__draht { display: flex; gap: 0.5rem; }

.zeichenknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border: 2px solid var(--wp--preset--color--rot);
  border-radius: var(--kante);
  background: var(--wp--preset--color--rot);
  color: var(--wp--preset--color--weiss);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--takt-schnell) var(--kurve),
    border-color var(--takt-schnell) var(--kurve);
}

.zeichenknopf svg { width: 1.375rem; height: 1.375rem; }

.zeichenknopf:hover {
  background: var(--wp--preset--color--schwarz);
  border-color: var(--wp--preset--color--schwarz);
}


/* --------------------------------------------------------------------------
   9 — Hero
   Aufbau wie zuvor: asymmetrisch 44/56, Foto laeuft rechts aus dem Raster.

   Neu ist, was fehlt. Die beiden roten Blattadern liefen quer ueber das
   Foto und noch ueber die Sektionskante hinaus bis in die schwarze
   Leistungsleiste; der rote Halbkreis schob sich in die linke Fotokante
   und stand dort neben dem roten Fassadenfeld im Bild. Beides ist weg.

   Uebrig bleibt ein Mint-Bogen unten links, angeschnitten an der
   Fensterkante und unterhalb des Textes. Rot traegt jetzt nur noch der
   Knopf — und ist damit das Erste, was auffaellt.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  /* Sprungziel des Logos. Der Hero beginnt 77 px unter dem Seitenanfang,
     weil der Kopf darueber steht — ohne Ausgleich landet der Sprung genau
     diese 77 px zu tief, und der klebende Kopf verdeckt den Streifen.

     Abgezogen werden bewusst ein paar Pixel mehr als die Kopfhoehe: Das
     Ergebnis waere negativ, der Browser klemmt auf 0, und der Sprung
     landet exakt oben statt einen Pixel darunter.

     Die Kennung darf NICHT an den Kopf. Der klebt, und ein Ziel, das
     schon oben steht, bewegt nichts. */
  scroll-margin-top: calc(var(--kopfhoehe) + 1rem);
  padding-block: clamp(2rem, 3.5vw, 3.5rem) clamp(2.5rem, 4.5vw, 4.5rem);
}

/* 50/50 statt 44/56. Der Treiber der Hoehe war nicht das Foto, sondern
   die h1: In der schmalen Spalte brach sie dreizeilig um und kostete
   allein 248 px. In der breiteren Spalte passt sie in zwei Zeilen — die
   Schriftgroesse bleibt unangetastet. */
.hero__bahn {
  display: grid;
  grid-template-columns: minmax(0, 50fr) minmax(0, 50fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.hero__text { position: relative; z-index: 2; }

/* Der Deckel ist am 13.08.2026 dazugekommen. Die h1 traegt seither Leistung
   und Ort — 48 Zeichen, die bei vollen 88 px in die 575 px schmale
   Textspalte auf vier Zeilen brechen. Drei sind gewuenscht (Entscheidung
   Ferdinand), und der Ortsname bleibt vollstaendig: „Rohrbach“ allein gibt
   es in Deutschland mehrfach, fuer die oertliche Suche zaehlt der Zusatz.

   Ein blosser Deckel per min() reichte nicht: Er begrenzt nur nach oben,
   waehrend die Textspalte mit dem Fenster schmaler wird — bei 1024 px
   standen damit wieder vier Zeilen. Die Groesse muss also mit der Spalte
   mitlaufen.

   Die Formel ist gemessen, nicht geraten. Drei Zeilen brauchen rund
   16 Zeichen je Zeile, ein Zeichen der Saira Extra Condensed ist etwa halb
   so breit wie hoch — noetige Groesse also Spaltenbreite geteilt durch acht:

     1024 px Fenster → 443 px Spalte → 55 px
     1440 px Fenster → 575 px Spalte → 72 px

   Daraus die Steigung, mit etwas Reserve nach unten. Der obere Deckel sitzt
   dort, wo die Bahn ihre Maximalbreite erreicht und die Spalte nicht mehr
   mitwaechst. */
.hero h1 {
  font-size: clamp(2.75rem, 0.48rem + 4.33vw, 4.375rem);
  margin-bottom: var(--wp--preset--spacing--30);
}

/* Zwei Zeilen statt vier: die Ortsaufzaehlung ist nach unten gewandert.
   Ueber dem Knopf steht jetzt ein Satz. */
.hero__satz {
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.5;
  max-width: 42ch;
  margin-bottom: var(--wp--preset--spacing--30);
}

/* Beide Kleinzeilen stehen unter dem Knopf, nicht als zweite Spalte
   daneben. Damit hat der Textblock eine Achse statt zweier. */
.hero__hinweis {
  font-size: var(--wp--preset--font-size--sm);
  max-width: 52ch;
  margin: var(--wp--preset--spacing--30) 0 0;
}

/* .hero__gebiet ist am 06.08.2026 entfallen — die Kilometerangabe stand
   dort, und das Gebiet wird jetzt ausschliesslich in der Kontaktsektion
   benannt. Der Hero traegt damit vier Elemente statt fuenf. */

.hero__bildfeld { position: relative; }

/* Bildflaeche laeuft nach rechts bis zur Fensterkante */
/* 10.08.2026: geboxt. Das Bild lief bis zur Fensterkante und hatte rechts
   keinen Rahmen — der Anschnitt war die Formensprache der Seite. Jetzt
   endet es mit der Bahn wie jede andere Flaeche. Dieselbe Aenderung an
   vier weiteren Stellen. --ueberhang bleibt als Rechnung im :root stehen,
   wird aber nirgends mehr abgefragt. */
.hero__bild {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 10;
}

.hero__bogen {
  width: clamp(13rem, 20vw, 22rem);
  aspect-ratio: 1;
  left: clamp(-10rem, -8vw, -6rem);
  bottom: clamp(-10rem, -8vw, -5rem);
}


/* --------------------------------------------------------------------------
   10 — Leistungsleiste   (unveraendert)
   Schmale Sprungmarkenzeile. Keine eigene Kartensektion — der Inhalt steht
   sonst zweimal auf der Seite.
   -------------------------------------------------------------------------- */

.leiste {
  background: var(--wp--preset--color--schwarz);
  color: var(--wp--preset--color--creme);
}

.leiste__bahn {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.leiste__bahn::-webkit-scrollbar { display: none; }

.leiste a {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  white-space: nowrap;
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: var(--wp--preset--font-size--base);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-decoration: none;
  padding-block: 1.25rem;
}

/* Logo-Punkt als Trennzeichen — als CSS-Kreis, nicht als Zeichen */
.leiste a::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--wp--preset--color--rot);
  flex: 0 0 auto;
}

.leiste a:first-child::before { display: none; }

.leiste a span {
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  transition: border-color var(--takt-schnell) var(--kurve);
}

.leiste a:hover span { border-bottom-color: var(--wp--preset--color--rot); }


/* --------------------------------------------------------------------------
   11 — Projektgalerie
   Die dichteste Sektion, deshalb der groesste Aufraeumer.

   Der Kopf ist einspaltig: Ueberschrift und Erklaersatz stehen
   untereinander statt links und rechts nebeneinander.

   Die Kachel traegt .bild__notiz; die Notiz sitzt nicht als schwarzer
   Balken im Bild, sondern als Zeile darunter. Fuenf schwarze Flaechen
   weniger auf einem Bildschirm.

   Stand 11.08.2026: Die Kachel ist keine Schaltflaeche mehr (kein
   Lichtkasten), sie traegt keine data-Attribute mehr (kein Filter), und
   sichtbar ist immer genau eine — die Sektion ist eine Slideshow.
   -------------------------------------------------------------------------- */

/* Der Abstand nach unten ist am 11.08.2026 von 1 auf 3,5 rem gewachsen.
   Nicht aus Geschmack: Zwischen Satz und Bild standen vorher die
   Filterzeile und deren eigener Abstand, zusammen rund 76 px. Ohne sie
   waeren es 16 px geblieben — der Satz klebte am Breitband. */
.galerie__kopf {
  max-width: var(--wp--custom--layout--content);
  margin-bottom: var(--wp--preset--spacing--50);
}

.galerie__kopf h2 {
  max-width: 24ch;
  margin-bottom: var(--wp--preset--spacing--20);
}

.galerie__satz { max-width: 48ch; }

/* Die Filterzeile ist am 11.08.2026 entfallen (Entscheidung Ferdinand).
   Mit ihr .galerie__steuerung, die nichts anderes enthielt — den Abstand
   zwischen Einleitungssatz und Bild traegt jetzt wieder .galerie__kopf. */


/* Die Slideshow.

   Vierter Aufbau dieser Sektion (10.08.2026), zweimal nachjustiert am
   11.08.2026: erst auf 1010 x 631 px zurueckgenommen, dann wieder auf die
   volle Bahn gestellt und dafuer flachgelegt. Jetzt ein Breitband ueber
   1208 x 537 px — die Hoehe von 16:10 minus 15 %.

   Ohne JavaScript ist .dia__bahn ein zweispaltiges Raster mit allen
   Bildern. Erst .js stapelt sie uebereinander und blendet eines ein; die
   Pfeile stehen im Markup auf hidden und kommen ebenfalls erst per Skript.
   Ein Blaetterknopf ohne Blaetterwerk waere schlimmer als keiner. */
.dia { position: relative; }

.dia__bahn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem) clamp(0.75rem, 1.4vw, 1.25rem);
}

/* Mit Skript liegen alle Bilder uebereinander. */
.js .dia__bahn { display: block; position: relative; }

/* width: 100% ist nicht kosmetisch: Die Bilder sind <button>, und ein
   Knopf misst sich nach seinem Inhalt statt nach seinem Kasten. Im Raster
   gab die Spalte die Breite vor; sobald die weg ist, faellt er auf die
   Breite seines Inhalts zusammen — und der Bildkasten hat nur ein
   Seitenverhaeltnis, keine eigene Breite. Ergebnis waeren 3 px. */
.js .dia__bahn > * {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--takt-ruhig) var(--kurve),
    visibility var(--takt-ruhig) var(--kurve);
}

/* Das erste Bild bleibt im Fluss und gibt der Bahn ihre Hoehe — ohne das
   fiele sie auf null zusammen, weil alle uebrigen absolut liegen. */
.js .dia__bahn > *:first-child { position: relative; }

.js .dia__bahn > [aria-current="true"] {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* 9:4 seit dem 11.08.2026. Auf voller Bahnbreite sind das 1208 x 537 px;
   16:10 waeren an derselben Stelle 755 px hoch gewesen.

   Der Zuschnitt entsteht im Browser: .bild img steht auf object-fit: cover
   (Abschnitt 8), das Foto wird also oben und unten beschnitten statt
   verzerrt. Sitzt ein Motiv dadurch falsch im Bild, gehoert dorthin ein
   object-position — wie bei .erde__panorama img.

   Am Handy gilt das nicht, siehe Abschnitt 21: 9:4 waeren dort 149 px
   Bildhoehe. */
.js .dia__bahn .kachel__bild { aspect-ratio: 9 / 4; }

/* Die Pfeile liegen im Bild. Schwarz mit weissem Zeichen, damit sie auf
   hellem Rasen genauso lesbar sind wie auf dunklem Erdreich. */
.dia__pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(29, 29, 27, 0.62);
  color: var(--wp--preset--color--weiss);
  cursor: pointer;
  transition: background var(--takt-schnell) var(--kurve);
}

.dia__pfeil[hidden] { display: none; }
.dia__pfeil svg { width: 1.5rem; height: 1.5rem; }
.dia__pfeil:hover { background: var(--wp--preset--color--rot); }

.dia__pfeil--zurueck { left: clamp(0.5rem, 1.5vw, 1.25rem); }
.dia__pfeil--weiter { right: clamp(0.5rem, 1.5vw, 1.25rem); }

/* Punktreihe und Halteknopf in einer Zeile. Die Punkte stehen mittig, der
   Knopf sitzt rechts daneben — deshalb die drei Spalten mit gleich breiten
   Aussenteilen: Sonst schoebe der Knopf die Punkte aus der Mitte. */
.dia__leiste {
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.75rem;
  align-items: center;
  margin-top: var(--wp--preset--spacing--20);
}

/* Ausgeblendet wird die Zeile vom Skript (hidden), nicht per :has() —
   das haengt sonst an einer Browserfunktion, die hier nichts entscheidet. */
.dia__leiste[hidden] { display: none; }

/* Die Punktreihe sagt, wie viele Bilder es gibt und wo man steht — ohne
   sie waere bei einer Ueberblendung nicht zu erkennen, ob noch etwas
   kommt. */
.dia__punkte {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
}

/* Der Halteknopf. Pflicht, sobald die Slideshow von allein laeuft
   (WCAG 2.2.2) — und der Grund, warum das Weiterschalten hier ueberhaupt
   vertretbar ist. */
.dia__pause {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--linie-schwarz);
  cursor: pointer;
  transition: color var(--takt-schnell) var(--kurve);
}

.dia__pause[hidden] { display: none; }
.dia__pause:hover { color: var(--wp--preset--color--rot); }

.dia__zeichen { width: 1.125rem; height: 1.125rem; }

/* Laeuft: Haltezeichen sichtbar. Angehalten: Startzeichen. */
.dia__zeichen--lauf { display: none; }
.dia__pause--an .dia__zeichen--halt { display: none; }
.dia__pause--an .dia__zeichen--lauf { display: block; }

/* Angehalten bleibt der Knopf rot — sonst sieht man nicht, dass hier
   etwas aussteht. */
.dia__pause--an { color: var(--wp--preset--color--rot); }

/* Beruehrflaeche 2,75 rem, sichtbarer Punkt 0,625 rem — sonst waere er
   mit dem Daumen nicht zu treffen. */
.dia__punkt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.dia__punkt::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--linie-schwarz);
  transition: background var(--takt-schnell) var(--kurve),
    transform var(--takt-schnell) var(--kurve);
}

.dia__punkt:hover::before { background: var(--wp--preset--color--schwarz); }

.dia__punkt[aria-selected="true"]::before {
  background: var(--wp--preset--color--rot);
  transform: scale(1.3);
}


/* Bildflaeche oben, Unterschrift unten. Die Bildzeile ist 1fr, damit alle
   Kacheln einer Zeile gleich hoch bleiben, auch wenn eine Unterschrift
   zweizeilig umbricht.

   Seit dem 11.08.2026 ein <div>. Bis dahin war jede Kachel ein <button>,
   der die Grossansicht oeffnete — daher standen hier die ganzen
   Knopf-Ruecksetzer (appearance, border, background, font, color,
   text-align) und ein cursor: pointer. Mit dem Klick sind sie weg; ein
   Zeigefinger ueber einem Bild, das nichts tut, ist ein Blindgaenger. */
.kachel {
  display: grid;
  grid-template-rows: 1fr auto;
}


/* --------------------------------------------------------------------------
   Die Kachel als Karte   (13.08.2026)

   Beim Ueberfahren dreht sich das Bild und zeigt auf der Rueckseite, was
   darauf zu sehen ist. Auf Touch gibt es kein Hover — dort setzt fischer.js
   beim Tippen .ist-gedreht, ein zweiter Tipp nimmt sie wieder weg.

   Die Drehachse liegt senkrecht, beide Seiten liegen uebereinander im selben
   Raster. backface-visibility blendet die jeweils abgewandte Seite aus;
   ohne das schiene die Rueckseite spiegelverkehrt durch das Bild.

   Kein Link, kein Button: Die Galeriebilder sind seit dem 11.08.2026 bewusst
   nicht klickbar, und daran aendert die Drehung nichts — sie fuehrt
   nirgendwohin, sie zeigt nur mehr.
   -------------------------------------------------------------------------- */

.kachel__bild,
.kachel__rueck {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  /* 620 statt 320 ms seit dem 14.08.2026 — siehe --takt-karte in Abschnitt 1.
     Die Drehung soll lesbar sein, nicht schnell. */
  transition: transform var(--takt-karte) var(--kurve);
}

/* Die Rueckseite zeigt seit dem 13.08.2026 dasselbe Bild, ueberlagert von
   einem roten Verlauf: oben keine Ueberdeckung, nach unten kraeftiger. Der
   Text steht am unteren Rand, also dort, wo das Rot traegt.

   ⚠️ Farbverlaeufe sind in diesem Projekt sonst verboten — „kein Farbverlauf
   auf Text oder Buttons", und anti-ki.md fuehrt sie als Tell. Das hier ist
   keins von beidem: Der Verlauf liegt auf einer Bildflaeche und macht Text
   lesbar, statt zu schmuecken. Kein Freibrief fuer andere Stellen.

   Die Bildadresse kommt als Variable vom Element, weil sie je Kachel
   verschieden ist. Ein zweites <img> waere die Alternative gewesen, haette
   aber eine dritte Ebene in eine Flaeche gebracht, die schon zwei hat. */
.kachel__rueck {
  display: flex;
  align-items: flex-end;
  padding: var(--wp--preset--spacing--30);
  border-radius: var(--kante-bild);
  background-image:
    linear-gradient(to bottom, rgba(229, 34, 47, 0) 30%, rgba(229, 34, 47, 0.92) 100%),
    var(--kachel-rueck-bild, none);
  background-size: cover;
  background-position: center;
  background-color: var(--wp--preset--color--schwarz);
  color: var(--wp--preset--color--weiss);
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: var(--wp--preset--font-size--lg);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.05;
  transform: rotateY(180deg);
}

/* Leer bleibt leer: Ohne Text dreht nichts. Sonst zeigte die Karte bei einer
   Referenz ohne Angaben eine schwarze Flaeche. */
.kachel__rueck:empty { display: none; }

/* ⚠️ .ist-getippt schliesst :hover aus, und daran haengt seit dem 14.08.2026,
   ob die Karte auf Touch wieder zurueckdreht.

   Der Fehler sah aus wie ein Skriptfehler, war aber keiner: Der zweite Tipp
   nahm .ist-gedreht zuverlaessig wieder weg (nachgestellt und gemessen) — die
   Karte blieb trotzdem gedreht. Handybrowser lassen nach einem Tipp den
   :hover-Zustand am beruehrten Element kleben, bis woanders hingetippt wird.
   Die Hover-Regel hielt die Drehung also weiter, ganz ohne Zeigergeraet.

   Deshalb faellt eine einmal beruehrte Kachel dauerhaft aus der Hover-Regel
   heraus; von da an entscheidet allein der Tipp. Ein @media (hover: hover)
   um die Regel waere der kuerzere Weg gewesen und hier falsch: Ein Geraet mit
   Touchscreen UND Maus erfuellt (hover: hover) und haette den Fehler behalten.
   Dieselbe Falle steckte schon in der ersten Fassung der Touch-Erkennung in
   fischer.js — entschieden wird am tatsaechlichen Ereignis, nicht am Geraet.

   Was das kostet: Wer auf einem solchen Geraet eine Kachel antippt und sie
   danach mit der Maus ueberfaehrt, dreht sie damit nicht mehr. Sie bleibt per
   Tipp bedienbar, und beim naechsten Seitenaufruf ist die Klasse wieder weg. */
.kachel:not(.ist-getippt):hover .kachel__bild,
.kachel.ist-gedreht .kachel__bild { transform: rotateY(180deg); }

.kachel:not(.ist-getippt):hover .kachel__rueck,
.kachel.ist-gedreht .kachel__rueck { transform: rotateY(360deg); }

/* Ohne die Perspektive waere es kein Drehen, sondern ein Zusammenklappen. */
.dia__bahn { perspective: 1400px; }

/* ⚠️ Unter „Bewegung reduzieren" wird nicht gedreht. Die Rueckseite blendet
   dann ein, statt sich zu drehen — die Angabe geht nicht verloren, nur die
   Bewegung. Genau diese Art Effekt meint die Einstellung. */
@media (prefers-reduced-motion: reduce) {
  .kachel__bild,
  .kachel__rueck {
    backface-visibility: visible;
    transition: opacity var(--takt-schnell) var(--kurve);
    transform: none;
  }

  .kachel__rueck { opacity: 0; }

  /* :not(.ist-getippt) auch hier — sonst bliebe unter „Bewegung reduzieren"
     die Rueckseite nach dem zweiten Tipp eingeblendet, aus demselben Grund
     wie oben. */
  .kachel:not(.ist-getippt):hover .kachel__bild,
  .kachel.ist-gedreht .kachel__bild { transform: none; }

  .kachel:not(.ist-getippt):hover .kachel__rueck,
  .kachel.ist-gedreht .kachel__rueck { transform: none; opacity: 1; }
}

/* .kachel--tief ist am 11.08.2026 wieder entfallen — am selben Tag
   eingefuehrt und wieder weg. Die Regel schob den Ausschnitt nach unten,
   solange die Galeriebilder 4:3 waren und der Browser sie auf 9:4
   beschneiden musste; bei Plattenweg und Granitmauer lag der Gegenstand
   sonst unterhalb des Schnitts.

   Seit die Dateien selbst im Verhaeltnis der Flaeche liegen, gibt es nichts
   mehr zu verschieben: Der Ausschnitt steckt im Bild, nicht im Stylesheet.
   Das ist auch die bessere Stelle dafuer — er ist dann in jeder Groesse
   derselbe und nicht davon abhaengig, welche Regel gerade greift. */

/* Ueberschreibt den schwarzen Balken aus .bild__notiz. Die Klasse bleibt
   am Element, weil die Schrift von dort kommt — Familie, Groesse und
   Versalien stehen nur einmal, hier faellt nur der Balken weg. */
.kachel__notiz {
  position: static;
  padding: 0.625rem 0 0;
  background: none;
  color: inherit;
  letter-spacing: 0.05em;
}

/* 06.08.2026 — alle Kacheln gleich. Vorher spannten sie ueber 4/2/2/3/3
   Spalten und trugen vier verschiedene Seitenverhaeltnisse; das war die
   Unruhe in dieser Sektion.

   Nebeneffekt, der den Ausschlag gab: Im gespannten Raster riss jeder
   Filterklick Loecher, weil die grosse Kachel zwei Zeilen hielt. Gleich
   grosse Kacheln rutschen sauber nach. */
.kachel__bild { aspect-ratio: 4 / 3; }

/* Der Sektionsfuss traegt die Google-Bewertungen. Er lief bis zum 12.08.2026
   auf 54rem Lesebreite; seither zieht er ueber die volle Bahn wie die
   Slideshow darueber (Entscheidung Ferdinand). Geboxt bleibt er trotzdem —
   die Bahn ist die Grenze, den Fensterrand beruehrt seit dem 10.08.2026
   nichts mehr auf dieser Seite. */
.galerie__fuss { margin-top: var(--wp--preset--spacing--30); }

/* Nur Abstand, Ueberschrift und Satz. Am Inneren des Widgets wird bewusst
   nichts gestellt: Trustindex bringt eigenes CSS mit, unsere Regeln muessten
   dagegenhalten und braechen beim naechsten Plugin-Update. Passt die Optik
   nicht, wird sie in den Plugin-Einstellungen geaendert, nicht hier
   ueberschrieben. */
.bewertungen { margin-top: var(--wp--preset--spacing--30); }
.bewertungen h3 { margin-bottom: var(--wp--preset--spacing--20); }

/* Der Satz unter der Ueberschrift hat bewusst KEINE eigene Regel. Er stand
   am 12.08.2026 kurz auf .bewertungen__satz mit 48ch wie .galerie__satz und
   brach dort nach „angekommen“ um; einzeilig soll er sein (Entscheidung
   Ferdinand). Die globale p-Regel in Abschnitt 3 leistet beides bereits —
   68ch Begrenzung und derselbe Abstand darunter —, und 68ch sind 730 px,
   der Satz braucht 517. Eine eigene Klasse haette die globale Regel nur
   Wort fuer Wort wiederholt.

   Wer den Satz verlaengert, holt den Umbruch zurueck: Ab rund 68 Zeichen
   greift die globale Begrenzung. */


/* --------------------------------------------------------------------------
   12 — Leistungssektionen
   Fuenf Sektionen hintereinander sind die groesste Gefahr in diesem Layout.
   Jede bekommt eine eigene Bildfuehrung und eine eigene Hoehe.
   -------------------------------------------------------------------------- */

/* 5 — Privatgaerten: Text schmal links, Bild rechts ueber die Kante,
       zweites Bild versetzt darunter. Groesste Sektion.
       Der Versatz ist kleiner als zuvor — die Kerbe zwischen den beiden
       Bildern las sich sonst wie ein Zuschnittfehler. */
.privat { overflow: hidden; }

/* 42/58 statt 34/66. Die schmale Textspalte war der eigentliche
   Hoehentreiber: Bei 1280 px war sie nur 379 px breit, dadurch brachen
   die beiden Absaetze und die drei Listenpunkte auf viele Zeilen um. */
.privat__bahn {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.privat__text { position: relative; z-index: 2; }
.privat__text h2 { margin-bottom: var(--wp--preset--spacing--30); }

.privat__liste {
  margin-top: var(--wp--preset--spacing--30);
  display: grid;
  gap: var(--wp--preset--spacing--20);
}

.privat__liste li {
  display: grid;
  grid-template-columns: 0.4375rem 1fr;
  gap: 0.875rem;
  align-items: start;
}

.privat__liste li::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--wp--preset--color--rot);
  margin-top: 0.6em;
}

.privat__liste h3 {
  font-size: var(--wp--preset--font-size--lg);
  margin-bottom: 0.125rem;
}

.privat__liste p { font-size: var(--wp--preset--font-size--base); margin: 0; }

.privat__bilder { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.privat__bild-gross { aspect-ratio: 16 / 9; }

/* Schmaler und mit staerkerer Ueberlappung als zuvor — sonst ist die
   Bildspalte laenger als die Textspalte und bestimmt die Sektionshoehe. */
.privat__bild-klein {
  aspect-ratio: 5 / 4;
  width: min(42%, 19rem);
  margin-left: clamp(1.5rem, 6vw, 6rem);
  margin-top: clamp(-5rem, -6vw, -3rem);
  position: relative;
  z-index: 2;
}

/* 6 — Pflaster: dunkel, Bild linksbuendig randlos */
.pflaster { overflow: hidden; }

.pflaster__bahn {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.pflaster__bild {
  aspect-ratio: 3 / 2;
}

.pflaster__text h2 { margin-bottom: var(--wp--preset--spacing--30); }

/* Auf Schwarz behaelt der Randstrich der Notiz sein Rot — er ist eine
   Linie, kein Text. */
.sektion--schwarz .notiz { border-left-color: var(--wp--preset--color--rot); }

/* 7 — Erdarbeiten: Panorama ueber die Bahnbreite, darunter eine einzige
       Textspalte in Lesebreite. Der „Maschine"-Kasten, der vorher rechts
       neben der Ueberschrift stand, ist zur Notiz am Ende geworden.
       Damit ist das die ruhige Sektion zwischen zwei starken. */
.erde__panorama {
  aspect-ratio: 5 / 1;
  margin-bottom: var(--wp--preset--spacing--30);
}

/* 06.08.2026 — die Sektion steht jetzt vorn und ist zweispaltig geworden:
   Text links, rechts der Film.

   Das Verhaeltnis war zuerst 62/38 fuer ein Hochformat-Standbild. Mit dem
   Film muss es 55/45 sein: Ein 16:9-Bild in einer 38-Prozent-Spalte ist
   bei 1440 px Fensterbreite rund 430 px breit und 240 px hoch — das ist
   fuer Bewegtbild eine Briefmarke. */
.erde__bahn {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}

/* Film. Der Rahmen sitzt am Video selbst, nicht am Behaelter — der
   Behaelter traegt auch die Notiz darunter, und die soll keinen Rahmen
   bekommen. */
.film { position: relative; }

/* Die einzige Bildflaeche ohne .bild-Huelle — sie traegt den Radius
   deshalb selbst. */
.film__flaeche {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--wp--preset--color--schwarz);
  border: 1px solid var(--linie-schwarz);
  border-radius: var(--kante-bild);
}

/* Die Notiz steht unter dem Film, nicht darin. Als Ueberlagerung laege
   sie sonst auf der Bedienleiste des Browsers — dieselbe Loesung wie bei
   den Galeriekacheln. */
.film .bild__notiz {
  position: static;
  padding: 0.625rem 0 0;
  background: none;
  color: inherit;
  letter-spacing: 0.05em;
}

/* Etwas breiter als die reine Lesebreite: Das Panorama darueber laeuft
   ueber die volle Bahn, eine sehr schmale Spalte darunter waere hier
   ein Bruch ohne Grund — und jede Zeile weniger spart Hoehe. */
.erde__text { max-width: 54rem; }
.erde__text h2 { margin-bottom: var(--wp--preset--spacing--30); }

/* 8 — Pflege: Mint, Text links, quadratisches Bild rechts.
       Die leere Fuenftelspalte ist weg — sie las sich am Desktop wie ein
       Fehler. Als einzige Sektion der Seite laeuft hier kein Bild ueber
       eine Kante: der Ruhepunkt. */
.pflege__bahn {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.pflege__bahn h2 { margin-bottom: var(--wp--preset--spacing--30); }

/* Begrenzt, weil das Quadrat sonst ueber 660 px gross wird und die
   Sektion allein durch Bildhoehe zur laengsten der Seite macht. */
.pflege__bild {
  aspect-ratio: 1;
  width: 100%;
  max-width: 29rem;
  justify-self: end;
}

/* 9 — Bewaesserung ist am 10.08.2026 entfallen. Sektion, Zeichnung und
       Sprungmarke sind raus; die Regeln dazu standen hier. */


/* --------------------------------------------------------------------------
   13 — Ablauf einer Anfrage
   Der groesste Eingriff dieser Variante.

   Vorher standen die vier Schritte auf vier verschiedenen Hoehen und eine
   rote Polylinie schnitt durch die Ziffern 02 und 04 — die Leserichtung
   war nicht ablesbar.

   Jetzt eine Grundlinie. Die eine verbliebene Blattader laeuft als
   durchgehende Linie unter der Ziffernzeile und wird an beiden
   Fensterkanten angeschnitten; der Logo-Punkt markiert, wo jeder Schritt
   auf ihr sitzt. Sie verbindet die Schritte, statt sie zu durchkreuzen.
   -------------------------------------------------------------------------- */

.ablauf__bahn { position: relative; }
.ablauf h2 { margin-bottom: var(--wp--preset--spacing--50); }

.ablauf__schritte {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: start;
}

/* Die Ader. Der Abstand von oben ist gerechnet, nicht geschaetzt:
   Ziffernhoehe (Schriftgrad x Zeilenhoehe 0.8) plus 0,75rem Luft. */
.ablauf__schritte::before {
  content: "";
  position: absolute;
  /* Endet mit der Bahn statt an der Fensterkante — dieselbe Entscheidung
     wie bei den Bildern (10.08.2026). */
  left: 0;
  right: 0;
  top: calc(var(--ablauf-zahl) * 0.8 + 0.75rem);
  height: 1px;
  background: var(--wp--preset--color--rot);
  z-index: 0;
}

.ablauf__schritt { position: relative; z-index: 1; }

/* Logo-Punkt auf der Ader, an jedem Schrittanfang */
.ablauf__schritt::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--ablauf-zahl) * 0.8 + 0.75rem);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--wp--preset--color--rot);
  translate: 0 -50%;
}

.ablauf__zahl {
  display: block;
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: var(--ablauf-zahl);
  line-height: 0.8;
  /* Feste Hoehe, damit die Ader darunter berechenbar sitzt */
  height: calc(var(--ablauf-zahl) * 0.8);
  color: var(--wp--preset--color--rot);
  margin-bottom: 1.875rem;
}

.ablauf__schritt h3 { margin-bottom: 0.375rem; }
.ablauf__schritt p { font-size: var(--wp--preset--font-size--base); }


/* --------------------------------------------------------------------------
   14 — Ueber mich
   Einzelunternehmer. Kein fremdes Gesicht, auch nicht als Platzhalter.
   Die Ader, die hier vorher frei in der Luft endete, ist weg.
   -------------------------------------------------------------------------- */

.person { overflow: hidden; }

.person__bahn {
  display: grid;
  grid-template-columns: minmax(0, 31fr) minmax(0, 69fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.person__bild { aspect-ratio: 4 / 5; position: relative; z-index: 2; }

/* Die Ausweichfassung ohne Bildspalte ist am 11.08.2026 entfallen — das
   Portraet liegt vor. Sie stand hier vom 10. bis zum 11.08. und nahm der
   Bahn die erste Spalte, damit der Text nicht auf ein Drittel der Breite
   umbrach, waehrend rechts nichts stand. */

.person__text {
  position: relative;
  z-index: 2;
  margin-top: clamp(1.5rem, 5vw, 5rem);
}

.person__text h2 { margin-bottom: var(--wp--preset--spacing--30); }

.person__bogen {
  width: clamp(14rem, 22vw, 26rem);
  aspect-ratio: 1;
  right: clamp(-11rem, -9vw, -6rem);
  top: clamp(-8rem, -6vw, -4rem);
}


/* --------------------------------------------------------------------------
   15 — Instagram

   Nur noch der Feed aus dem Plugin, ueber die ganze Bahn. Der Weg dahin,
   weil er erklaert, warum hier fast nichts mehr steht:

     bis 11.08.  links Text, rechts ein Zwei-Klick-Kasten mit drei
                 schraffierten Platzhalterkacheln
     11.08.      Feed statt Zwei-Klick, der Text bleibt links
     11.08.      Text ganz raus (Entscheidung Ferdinand) — der Feed bringt
                 Profilbild, Namen und Folgen-Knopf selbst mit

   Zwei Spalten braucht es damit nicht mehr; eine leere linke Spalte waere
   ein Loch. Das Plugin bringt seine eigenen Stile mit, hier steht deshalb
   nur, was der Kasten von aussen tun muss: nicht ueber die Bahn hinaus.
   Fremde Klassen zu ueberschreiben haelt ohnehin kein Update aus.
   -------------------------------------------------------------------------- */

.insta__feed { min-width: 0; }


/* --------------------------------------------------------------------------
   16 — Kontakt   (unveraendert)
   Die Formularkarte ragt oben in die vorige Sektion hinein — der eine
   bewusste Bruch der Seite.
   -------------------------------------------------------------------------- */

/* Seit dem 10.08.2026 ohne eigene Flaechenfarbe — sie steht auf dem Creme
   der Seite. Die Polsterung bleibt, damit die Sektion trotzdem als eigener
   Block liest; oben eine feine Linie, weil sonst der Uebergang von der
   Instagram-Sektion nicht zu sehen waere. */
.kontakt {
  padding-block: clamp(2.5rem, 4.8vw, 4.75rem);
  border-top: 1px solid var(--linie-schwarz-fein);

  /* Nachgetragen am 14.08.2026. Die Kontaktsektion traegt als einzige nicht
     die Klasse .sektion und hatte damit auch deren scroll-margin-top nicht —
     der klebende Kopf verdeckte nach dem Sprung aus dem Menue die ersten
     77 px, also Label und halbe Ueberschrift. */
  scroll-margin-top: var(--kopfhoehe);
}

/* Das Sprungziel des Hero-Knopfes (14.08.2026).

   Der Wert ist gemessen, nicht gegriffen: Am Desktop steht die Ueberschrift
   „Schreib uns, was geplant ist“ 13 px ueber der Karte. Mit 2,5 rem Zugabe
   auf die Kopfhoehe landet die Karte bei 116 px und die Ueberschrift bei
   103 — also unterhalb des 77 px hohen Kopfes und damit lesbar. Am Handy
   stehen ueber der Karte 385 px anderer Inhalt; dort zaehlt nur, dass die
   Karte knapp unter dem Kopf beginnt und die ersten Felder mit ins Bild
   kommen. */
#formular { scroll-margin-top: calc(var(--kopfhoehe) + 2.5rem); }

.kontakt__bahn {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.kontakt h2 { margin-bottom: var(--wp--preset--spacing--30); }

/* Ueberleitung zum zweiten Weg. Klein, damit sie den Formularhinweis
   darueber nicht ueberstimmt. */
.kontakt__oder {
  margin-top: var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: var(--wp--preset--font-size--base);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Nummer und Adresse sind seit dem 10.08.2026 Knoepfe.

   Die grosse Telefonnummer als Textzeile (.kontakt__nummer) und die
   Mailzeile darunter (.kontakt__zeile) sind entfallen. Sie sehen jetzt aus
   wie die Zeichenknoepfe im Kopf — rote Flaeche, weisses Zeichen —, tragen
   hier aber zusaetzlich ihre Beschriftung. Das ist der gewoehnliche
   .knopf; eine Sonderregel braucht es dafuer nicht mehr.

   Zwei nebeneinander, umbrechend — auf schmalen Fenstern stehen sie
   untereinander, statt die Beschriftung zu quetschen. */
.kontakt__draht {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
}

/* Nicht ueber die halbe Spalte hinaus: Ein Knopf, der die ganze Breite
   nimmt, liest sich wie ein Formularfeld. */
.kontakt__knopf { max-width: 100%; }

/* Ueber die volle Bahn unter beiden Spalten, nicht mehr in der linken. Die
   Trennlinie ist damit von Weiss auf die feine schwarze gewechselt — die
   Sektion steht seit dem 10.08.2026 auf Creme. */
.kontakt__gebiet {
  margin-top: var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--linie-schwarz-fein);
}

.kontakt__gebiet h3 {
  font-size: var(--wp--preset--font-size--lg);
  margin-bottom: var(--wp--preset--spacing--20);
}

/* Eine laufende Zeile, kein Listenbild: Der Punkt steht zwischen den Orten
   statt vor jedem. Vor dem ersten stuende er sonst ohne Gegenueber. */
.kontakt__orte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0;
  font-size: var(--wp--preset--font-size--base);
}

.kontakt__orte li { display: flex; align-items: center; }

.kontakt__orte li:not(:last-child)::after {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--wp--preset--color--rot);
  margin-inline: 0.75rem;
  flex: 0 0 auto;
}


/* Formularkarte */
/* Weiss statt creme, seit die Sektion selbst creme ist (10.08.2026) — sonst
   stuende die Karte unsichtbar auf ihrem eigenen Grund.

   Der Versatz nach oben ist entfallen. Die Karte ragte aus der roten
   Flaeche heraus; das war der Bruch an dieser Stelle. Ohne rote Flaeche
   ragt sie in Creme, und ein Bruch, den niemand sieht, ist keiner. */
.karte {
  background: var(--wp--preset--color--weiss);
  color: var(--wp--preset--color--schwarz);
  padding: clamp(1.25rem, 2.4vw, 2.25rem);
  border: 1px solid var(--linie-schwarz-fein);
  border-radius: var(--kante);
  box-shadow: 0 2px 24px rgba(29, 29, 27, 0.08);
}

.karte h3 { margin-bottom: var(--wp--preset--spacing--20); }
.karte :focus-visible { outline-color: var(--wp--preset--color--rot); }

.feld { display: grid; gap: 0.375rem; margin-bottom: 0.875rem; }

.feld label {
  font-family: var(--wp--preset--font-family--ueberschrift);
  font-size: var(--wp--preset--font-size--base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.feld input,
.feld textarea {
  font-family: inherit;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 300;
  color: inherit;
  background: var(--wp--preset--color--weiss);
  border: 1px solid var(--linie-schwarz);
  border-radius: var(--kante);
  padding: 0.75rem 0.875rem;
  min-height: 3rem;
}

.feld textarea { min-height: 5.5rem; resize: vertical; }

.feld input:hover,
.feld textarea:hover { border-color: var(--wp--preset--color--schwarz); }

.feld--fehler input,
.feld--fehler textarea { border-color: var(--wp--preset--color--rot); border-width: 2px; }

/* Fehler steht am Feld, nicht als Sammelmeldung oben */
.feld__fehler {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 400;
  color: var(--wp--preset--color--schwarz);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feld__fehler::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--wp--preset--color--rot);
  flex: 0 0 auto;
}

.feld__fehler[hidden] { display: none; }

.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-bottom: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--sm);
}

.zustimmung input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.6rem 0 0;
  accent-color: var(--wp--preset--color--rot);
}

/* Das Label ist mitgeschaltet und traegt das Beruehrziel */
.zustimmung label { padding-block: 0.625rem; cursor: pointer; }

/* Honigtoepfe gegen Formularmuell — kein reCAPTCHA, kein Turnstile und
   deshalb kein Einwilligungsbanner. Bewusst per Position aus dem Bild
   geschoben statt per display:none oder hidden: Ein Teil der Bots
   ueberspringt Felder, die als versteckt ausgezeichnet sind, und faellt
   dann nicht mehr darauf herein.

   Beide Felder tragen zusaetzlich tabindex="-1", damit sie beim Tabben
   nicht erreichbar sind, und der Behaelter aria-hidden fuer die
   Sprachausgabe. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.karte__bestaetigung {
  border-left: 3px solid var(--wp--preset--color--rot);
  padding-left: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--30);
}

.karte__bestaetigung[hidden] { display: none; }


/* --------------------------------------------------------------------------
   17 — Fuss   (unveraendert)
   -------------------------------------------------------------------------- */

.fuss {
  background: var(--wp--preset--color--schwarz);
  color: var(--wp--preset--color--creme);
  /* Von clamp(2.5rem, 4.5vw, 4.5rem) zurueckgenommen. Der Wert stammt aus
     der dreispaltigen Fassung — ein Block aus drei Spalten braucht Luft,
     damit er nicht an die Sektion darueber stoesst. Eine einzelne Zeile
     braucht sie nicht. */
  padding-block: clamp(2rem, 3vw, 3rem);
}

/* 10.08.2026 nach dem Aufbau von fwn-media.de: oben zwei Bereiche, unten
   eine Schlusszeile. Das Logo ist raus — es steht jetzt gross im
   Kontaktabschnitt direkt darueber.

   Links etwas schmaler als rechts (40/60): Der Satz braucht Lesebreite,
   die beiden Linkspalten brauchen Platz fuer die langen Leistungsnamen. */
/* Drei Spalten nach dem Vorbild von profi-offensive.de, dort vier zu
   320/229/229/229 bei 1200 px Container.

   Hier sind es seit dem 10.08.2026 drei: Die Spalte „Folgen“ trug einen
   einzigen Verweis und nahm dafuer ein Viertel der Breite — die
   E-Mail-Adresse stand daneben mit 241 px in einer 244 px breiten Spalte,
   also auf drei Pixel genau. Instagram ist jetzt ein Zeichenknopf in der
   Markenspalte, und die Labels haben Luft: rund 440 px je Spalte. */
.fuss__oben {
  display: grid;
  grid-template-columns: minmax(0, 36fr) repeat(2, minmax(0, 32fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

/* Das Logo im Fuss, klickbar. Ueber die Breite skaliert, damit das
   Verhaeltnis der SVG erhalten bleibt. */
.fuss__logo {
  display: block;
  width: clamp(9rem, 14vw, 12.5rem);
  margin-bottom: var(--wp--preset--spacing--30);
}

.fuss__logo img { display: block; width: 100%; height: auto; }

.fuss__satz {
  max-width: 38ch;
  margin: 0 0 var(--wp--preset--spacing--30);
}

/* Die 2,75 rem bleiben. Sie sind kein Abstand, sondern die Beruehrflaeche —
   enger heisst am Handy danebentippen. */
/* :not(.zeichenknopf), damit der Instagram-Knopf in der Markenspalte seine
   44 x 44 px behaelt. Ohne den Ausschluss zog ihn width: fit-content auf
   die Breite seines Zeichens zusammen — 26 px statt 44, und damit unter
   die Groesse, die sich mit dem Daumen treffen laesst. */
.fuss__spalte a:not(.zeichenknopf):not(.fuss__logo) {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  width: fit-content;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--takt-schnell) var(--kurve);
}

.fuss__spalte a:not(.zeichenknopf):not(.fuss__logo):hover { border-bottom-color: var(--wp--preset--color--creme); }

/* Das Logo bekommt beim Ueberfahren keinen Unterstrich, sondern wird
   etwas heller — ein Strich unter einer Bildmarke sieht nach Fehler aus. */
.fuss__logo { opacity: 1; transition: opacity var(--takt-schnell) var(--kurve); }
.fuss__logo:hover { opacity: 0.75; }

.fuss__spalte { display: grid; align-content: start; }

/* Das Label ueber jeder Spalte. Bei profi-offensive.de 13,6 px, versal,
   gesperrt, in Weiss — hier dasselbe Muster mit den Werten dieses
   Projekts: Saira, eine Stufe unter dem Fliesstext, weiss gegen das Creme
   der Verweise darunter. Es ordnet die Spalte, ohne sich in die
   Groessenhierarchie der Seite zu draengen. */
.fuss__spalte h2 {
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: 0.12em;
  line-height: 1.2;
  margin-bottom: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--weiss);
}

/* Die Schlussleiste, abgesetzt durch eine feine Linie — wie dort. Links
   der Rechtevorbehalt, rechts der Bauhinweis.

   nowrap seit dem 10.08.2026: Vorher brach die Zeile um, sobald beide
   Texte zusammen breiter waren als die Bahn, und der Bauhinweis rutschte
   allein in eine zweite Zeile. Zusammen sind es rund 680 px, die Bahn hat
   1320 — auf dem Handy loest die Regel weiter unten den Umbruch wieder. */
.fuss__leiste {
  /* Die Zeile ist ein <p> und erbte damit die Lesebreite von 68ch — 644 px
     statt der vollen Bahn. Genau daran lag es, dass der Bauhinweis in eine
     zweite Zeile rutschte. */
  max-width: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--linie-creme);
  font-size: var(--wp--preset--font-size--sm);
}

.fuss__leiste a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--takt-schnell) var(--kurve);
}

.fuss__leiste a:hover { border-bottom-color: var(--wp--preset--color--creme); }

/* Der Name der Agentur mit gruenem Verlauf   (14.08.2026)

   Uebernommen von profi-offensive.de (Entscheidung Ferdinand), dort
   .po-fwn-credit in assets/css/main.css. Werte unveraendert: derselbe
   Verlauf, dieselben 220 % Breite, dieselbe halbe Sekunde. Der Verlauf ist
   breiter als die Schrift und wird beim Ueberfahren verschoben — bewegt wird
   also nur die Hintergrundposition, kein Element und kein Text.

   ⚠️ Das bricht zwei harte Verbote dieses Projekts: „keine anderen Farben als
   die fuenf“ und „kein Farbverlauf auf Text“. Nach der Rueckseite der
   Galeriekachel ist es die zweite Ausnahme, und die letzte. Sie gilt fuer
   zwei Woerter im Fuss, unterhalb der Schlusslinie: Das ist die Signatur der
   Agentur, nicht die Marke fischer. Kein Freibrief fuer andere Stellen.

   Das @supports ist keine Formsache. Ohne background-clip: text steht
   -webkit-text-fill-color: transparent allein — die Schrift waere dann
   unsichtbar statt bunt. Wo die Eigenschaft fehlt, bleibt sie creme wie die
   Zeile davor. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .fwn {
    background: linear-gradient(110deg, #9ccf92, #6ab775, #4fb373, #21874a, #6ab775, #9ccf92);
    background-size: 220% auto;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.5s ease;
  }

  .fuss__leiste a:hover .fwn { background-position: -110% 0; }
}


/* --------------------------------------------------------------------------
   18 — Leiste am unteren Rand
   06.08.2026 zweigeteilt. Das Formular ist Primaerziel, trotzdem bleibt
   links der direkte Waehlvorgang: Ohne ihn haette die Leiste dasselbe
   Ziel wie der Kopfknopf und damit keinen eigenen Zweck.

   Die Trennung laeuft ueber eine Linie, nicht ueber zwei Farben. Zwei
   Rottoene gibt das CD nicht her, und Mint neben Rot waere hier eine
   Ampel.
   -------------------------------------------------------------------------- */

/* ⚠️ Die klebende Anrufleiste ist am 13.08.2026 entfallen (Entscheidung
   Ferdinand). Sie sass fest am unteren Handy-Rand und war zweigeteilt:
   links waehlen, rechts zum Formular springen.

   Weg sind damit .anrufleiste, .anrufleiste__teil, --anrufleiste und das
   padding-bottom am Body, das ihre Hoehe ausglich. Der Anruf ist statt
   dessen oben geblieben — der Telefon-Zeichenknopf im Kopf wird jetzt auch
   am Handy gezeigt (Abschnitt 21). Der Weg zum Formular fuehrt am Handy
   ueber den Hero-Knopf und den Menuepunkt „Kontakt“. */


/* --------------------------------------------------------------------------
   19 — frei

   Hier stand bis zum 11.08.2026 der Lichtkasten. Er ist mit dem Klick auf
   die Galeriebilder entfallen und war ohne ihn ueber nichts mehr zu
   oeffnen. Die Nummer bleibt frei, damit die Verweise auf die folgenden
   Abschnitte gueltig bleiben.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   20 — Einblenden beim Scrollen   (unveraendert)
   Nur mit JavaScript aktiv. Einmal je Element, nie beim Zurueckscrollen
   wiederholt. Der erste Bildschirm wird nie eingeblendet.
   -------------------------------------------------------------------------- */

.js [data-auftritt] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--takt-ruhig) var(--kurve),
    transform var(--takt-ruhig) var(--kurve);
}

.js [data-auftritt].ist-da { opacity: 1; transform: none; }


/* --------------------------------------------------------------------------
   20.1 — Bewegung, ergaenzt am 10.08.2026

   Die Seite war zu ruhig. Dazugekommen sind zwei Dinge, jedes mit einem
   Grund — Bewegung ohne Zweck schliesst interaktion.md aus:

     b  Die klebenden Textspalten halten fest, worueber man gerade liest,
        waehrend die Bildspalte daneben durchlaeuft.
     c  Die Ziffern im Ablauf zaehlen hoch (fischer.js) und fuehren damit
        durch die vier Schritte in ihrer Reihenfolge.

   Punkt a war der Bildzoom in der Galerie. Seine Begruendung stand hier
   selbst: Er sagte „anklickbar“. Seit dem 11.08.2026 sind die Bilder es
   nicht mehr, also ist er entfallen — mit ihm der rote Rahmen beim
   Ueberfahren. Die Buchstaben bleiben, damit b und c nicht wandern.

   Das gestaffelte Einblenden steht im Skript, nicht hier — es setzt nur
   transition-delay auf die Regel darueber.

   Abschnitt 22 schaltet all das bei prefers-reduced-motion ab.
   -------------------------------------------------------------------------- */

/* b — Nur dort, wo die Bildspalte tatsaechlich laenger ist als der Text.
       Ohne Hoehenunterschied gibt es nichts zu kleben, und die Regel
       waere wirkungslos statt falsch. Der Abstand nach oben ist die
       Kopfhoehe plus Luft — sonst klebte der Text unter dem Kopf fest. */
.privat__text {
  position: sticky;
  top: calc(var(--kopfhoehe) + var(--wp--preset--spacing--40));
  align-self: start;
}


/* --------------------------------------------------------------------------
   21 — Breiten
   Desktop zuerst entschieden, die Handyfassung jeder Sektion gleich mit.
   -------------------------------------------------------------------------- */

/* Tablet und darunter */
@media (max-width: 63.999em) {
  /* Ohne JavaScript bleibt die Navigation eine gewoehnliche Zeile unter
     dem Logo und der Menueknopf verschwindet — ein Vollbild-Overlay,
     das sich nicht schliessen laesst, waere sonst die Folge. */
  .kopf__bahn { flex-wrap: wrap; gap: var(--wp--preset--spacing--30); }

  .kopf__weg {
    order: 3;
    width: 100%;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.75rem;
  }

  .js .kopf__weg {
    position: fixed;
    inset: var(--kopfhoehe) 0 0 0;
    z-index: 45;
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: var(--wp--preset--spacing--40) var(--wp--custom--layout--rand);
    background: var(--wp--preset--color--creme);
    overflow-y: auto;
  }

  .js .kopf__weg a {
    width: 100%;
    font-size: var(--wp--preset--font-size--xl);
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--linie-schwarz-fein);
  }

  /* ⚠️ Sagt dasselbe wie die Regel in Abschnitt 8 und ist trotzdem noetig.
     Die Regel darueber setzt die Kurzform border-bottom mit `.js` davor,
     hat also hoehere Spezifitaet als `.kopf__weg a[aria-current]` — ohne
     diese Wiederholung bliebe der markierte Punkt im geoeffneten Handymenue
     grau. Zwei Pixel statt einem, damit die Markierung neben den feinen
     Trennlinien der uebrigen Punkte zu sehen ist.

     Gefunden beim Nachrechnen der Kaskade, nicht beim Ansehen: Im
     Pruefffenster wird gerade keine Stilneuberechnung ausgefuehrt. */
  .js .kopf__weg a[aria-current] {
    border-bottom: 2px solid var(--wp--preset--color--rot);
  }

  .js .kopf__weg a:hover { border-bottom-color: var(--wp--preset--color--rot); }

  .kopf__schalter { display: none; }

  /* Ohne Rahmen seit dem 13.08.2026 (Entscheidung Ferdinand). Die Hoehe von
     2,75 rem bleibt: Sie ist das Tap-Ziel, nicht die Zier. Der sichtbare
     Fokusrahmen bleibt ebenfalls, er ist Pflicht. */
  .js .kopf__schalter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--kante);
    background: none;
    color: inherit;
    font-family: var(--wp--preset--font-family--ueberschrift);
    font-size: var(--wp--preset--font-size--base);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
  }

  .kopf__draht { gap: 0.375rem; }

  /* .insta__bahn stand hier bis zum 11.08.2026 mit in der Reihe. Sie ist
     kein Raster mehr — in der Sektion steht nur noch der Feed. */
  .hero__bahn,
  .privat__bahn,
  .pflaster__bahn,
  .pflege__bahn,
  .person__bahn,
  .kontakt__bahn {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Hero: Bild zuerst, darunter Text — auf dem Handy kommt die Mehrheit an.
     Der Mint-Bogen rutscht unter den Text statt dahinter. */
  .hero { padding-top: 0; }
  .hero__bahn { gap: var(--wp--preset--spacing--50); }
  .hero__bildfeld { order: -1; }
  .hero__bild { aspect-ratio: 3 / 2; }
  .hero__bogen {
    width: 48vw;
    left: -20vw;
    bottom: -20vw;
  }

  .privat__bild-klein {
    width: min(76%, 22rem);
    margin-top: 0;
    margin-left: clamp(1.5rem, 8vw, 4rem);
  }

  /* ⚠️ Hier stand bis zum 13.08.2026 margin-inline: calc(50% - 50vw) — das
     zog das Bild randlos ueber die volle Fensterbreite. Ein Relikt aus der
     Zeit vor dem 10.08.2026, als der Anschnitt noch Formensprache war;
     seither sind alle Bilder geboxt und beruehren den Fensterrand nicht
     mehr. Beim Umbau uebersehen worden, gemessen bei 768 px: Das Bild ragte
     6 px ueber die linke Bahnkante. */
  .pflaster__bild { aspect-ratio: 3 / 2; }
  .erde__panorama { aspect-ratio: 3 / 2; }

  .karte { margin-top: 0; }

  /* Ablauf senkrecht: die Ader wird zur durchgehenden Linie links */
  .ablauf__schritte { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ablauf__schritte::before { display: none; }
  .ablauf__schritt::before { display: none; }
  .ablauf__schritt {
    padding: 0 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
    border-left: 1px solid var(--wp--preset--color--rot);
  }
  .ablauf__schritt:last-child { padding-bottom: 0; border-left-color: transparent; }
  .ablauf__zahl {
    height: auto;
    margin-bottom: var(--wp--preset--spacing--20);
    margin-left: calc(-1 * var(--wp--preset--spacing--40) - 1px);
    padding-left: 0.5rem;
    background: var(--wp--preset--color--creme);
  }

  /* Erdarbeiten: Text und Film untereinander statt nebeneinander. Der
     Film laeuft dann ueber die volle Textbreite — auf dem Tablet ist das
     die einzige Groesse, in der die Maschine noch etwas hergibt. */
  .erde__bahn { grid-template-columns: minmax(0, 1fr); }

  /* Fuss: Marke ueber die volle Breite, die drei Listen darunter
     nebeneinander. Vier Spalten waeren auf dem Tablet je 150 px breit —
     „Datenschutzerklaerung“ braucht mehr. */
  /* Marke ueber die volle Breite, Kontakt und Rechtliches darunter
     nebeneinander. Drei Spalten liessen je rund 230 px — die
     E-Mail-Adresse braucht 241 und braeche um. */
  .fuss__oben {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--40) clamp(1.5rem, 3vw, 2.5rem);
  }
  .fuss__marke { grid-column: 1 / -1; }
}

/* Handy */
@media (max-width: 47.999em) {
  .kopf__logo img { height: 2.25rem; }


  /* Fuss: eine Spalte. Bei drei Spalten blieben je 95 px — darin bricht
     „Datenschutzerklaerung“ auf vier Zeilen um. */
  .fuss__oben { grid-template-columns: minmax(0, 1fr); }

  /* Ab „Kontakt“ steht alles mittig (14.08.2026, Entscheidung Ferdinand).

     Die Markenspalte darueber bleibt linksbuendig: Logo und Satz sind der
     einzige zusammenhaengende Textblock im Fuss, und zentrierter Fliesstext
     ueber drei Zeilen hat keine ruhige linke Kante mehr.

     Nur unter 48em. Auf dem Tablet stehen Kontakt und Rechtliches
     nebeneinander — zwei zentrierte Spalten nebeneinander haetten vier
     Textkanten statt zwei.

     justify-items zusaetzlich zu text-align, weil die Verweise
     inline-flex mit width: fit-content sind: text-align allein bewegt den
     Text in ihnen, nicht die Kaesten selbst. */
  .fuss__spalte:not(.fuss__marke) {
    justify-items: center;
    text-align: center;
  }

  /* Hier darf die Schlusszeile wieder umbrechen. Eine Zeile ist auf
     375 px nicht zu halten, und gequetscht waere sie unlesbar. Seit dem
     14.08.2026 bricht sie mittig statt nach links. */
  .fuss__leiste {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 0;
  }

  /* Das Breitband gilt nur bis hierher. Die Bahn ist am Handy 335 px
     breit — 9:4 waeren 149 px Bildhoehe, darauf ist von einem Garten
     nichts mehr zu erkennen. Zurueck auf 16:10, das sind 209 px.
     Entscheidung Ferdinand, 11.08.2026. */
  .js .dia__bahn .kachel__bild { aspect-ratio: 16 / 10; }

  /* Fuenf Punkte zu 44 px plus Fugen sind 260 px — mehr, als die mittlere
     Spalte auf einem Handy hergibt (247 px). Sie liefen ueber und
     schoeben den Halteknopf aus dem Bild. 36 px bleiben ein sicheres
     Beruehrziel; die Untergrenze liegt bei 24 px. */
  .dia__punkt { width: 2.25rem; height: 2.25rem; }
  .dia__punkte { gap: 0.5rem; }
  .dia__leiste { grid-template-columns: 2.25rem 1fr 2.25rem; }
  .dia__pause { width: 2.25rem; height: 2.25rem; }

  /* Der klebende Text gilt nur, solange Text und Bild nebeneinander stehen.
     Einspaltig klebte die Ueberschrift und das Bild liefe darunter weg —
     Bewegung ohne Zweck. */
  .privat__text { position: static; }


  /* ------------------------------------------------------------------
     Der Hero passt auf einen Bildschirm   (14.08.2026)

     Ferdinand: „es soll die ganze Hero inkl Button direkt zu Beginn am
     Handy sichtbar sein.“ Gemessen am statischen Aufbau bei 375 px
     Fensterbreite endete der Knopf vorher bei 769 px — auf einem Handy
     liegt darueber die Browserleiste, und er war abgeschnitten.

     Gekuerzt wird an fuenf Stellen, keine davon geraten:

       Bild        3:2 → 16:10        223 → 209 px
       Spalt       56 → 28 px
       h1          44 → 38 px         bleibt dreizeilig
       Satz        19 → 16 px         5 → 4 Zeilen
       Kleinzeile  Abstand 24 → 16 px

     Ergebnis nachgemessen: Knopf endet bei 658 px, der ganze Hero bei
     762 px. Auf 375 x 667 (das kleinste gaengige Geraet) endet der Knopf
     bei 649 px und ist damit ebenfalls ganz zu sehen; die Kleinzeile
     darunter reicht dort ueber den Rand.

     Der Deckel in svh ist die Versicherung dafuer: Auf einem niedrigen
     Bildschirm gibt das Bild Hoehe ab, nicht der Text. svh und nicht vh,
     weil vh am Handy die Hoehe OHNE Browserleiste meint — also genau die
     Rechnung, die den Knopf ueberhaupt erst abgeschnitten hat.
     ------------------------------------------------------------------ */
  .hero__bahn { gap: var(--wp--preset--spacing--40); }

  /* Am Handy steht das Bild oben, und bis zum 17.08.2026 sass es bündig
     unter dem klebenden Kopf — Abstand oben 0 px, an den Seiten 20 px.
     Das ist der Rest von `.hero { padding-top: 0 }` aus dem Block
     darueber, das die Bildkante bewusst an den Kopf zog.

     Gesetzt wird derselbe Token wie fuer die Seiten (.bahn nimmt ihn als
     padding-inline), nicht die Zahl 20: So bleiben die drei Kanten auch
     dann gleich, wenn der Rand mit der Fensterbreite mitwaechst
     (clamp(1.25rem, 4vw, 3.5rem)).

     ⚠️ Das schiebt den ganzen Hero um den Randwert nach unten und geht
     damit gegen den Absatz darueber. Nachgemessen bleibt der Knopf auf
     beiden dort genannten Geraeten im Bild — bei 375 x 667 und bei
     393 x 760. Wer hier weiter aufmacht, prueft das erneut. */
  .hero { padding-top: var(--wp--custom--layout--rand); }

  /* ⚠️ width: 100% ist am 17.08.2026 dazugekommen und behebt einen
     ungleichen Seitenabstand (Entscheidung Ferdinand). Gemessen bei
     375 x 667: links 20 px, rechts 34,9 px.

     Die Ursache ist das Zusammenspiel der beiden Zeilen darunter. 30svh
     sind dort 200,1 px, fuer die vollen 335 px Breite braeuchte 16:10
     aber 209,4. Also deckelt die Hoehe — und weil .bild ein Flexcontainer
     mit width: auto ist, zieht das Seitenverhaeltnis die BREITE auf
     320,1 px mit. Die uebrigen 15 px liegen alle rechts, weil die Box in
     der Zeilenrichtung am Anfang steht.

     Mit einer festen Breite ist die Breite zuerst da und der Deckel
     schneidet nur noch Hoehe. Die Flaeche wird dann flacher als 16:10
     (335 x 200, also 1,675), und object-fit: cover nimmt rund 4 % der
     Bildhoehe weg — genau der Fall, fuer den object-position: center 60 %
     in Abschnitt 7 steht.

     ⚠️ Die Hoehe bleibt bei 200,1 px, der Deckel wirkt unveraendert. Die
     Knopfposition aus dem Absatz darueber aendert sich dadurch nicht. */
  .hero__bild {
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 30svh;
  }

  .hero h1 {
    font-size: 2.375rem;
    margin-bottom: var(--wp--preset--spacing--20);
  }

  .hero__satz {
    font-size: var(--wp--preset--font-size--base);
    margin-bottom: var(--wp--preset--spacing--30);
  }

  .hero__hinweis { margin-top: var(--wp--preset--spacing--20); }


  /* Der grosse Kopfknopf faellt weg: „Projekt anfragen" steht am Handy
     schon im Hero, und im schmalen Kopf nimmt er den Platz, den Logo und
     Menuezeichen brauchen.

     ⚠️ Die Zeichenknoepfe bleiben seit dem 13.08.2026 sichtbar. Bis dahin
     verschwanden sie hier mit, weil die klebende Leiste unten Anruf und
     Formular schon trug. Die Leiste ist entfallen — ohne diese Aenderung
     waere die Telefonnummer am Handy erst in der Kontaktsektion
     erreichbar, also nach der ganzen Seite. */
  .kopf .knopf { display: none; }
}


/* --------------------------------------------------------------------------
   22 — Weniger Bewegung
   Verpflichtend vor Auslieferung. (references/interaktion.md)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   23 — Druck
   Der Ausdruck-Test aus anti-ki.md wird tatsaechlich ausgedruckt.
   -------------------------------------------------------------------------- */

@media print {
  .kopf,
  .leiste { display: none; }

  .sektion, .hero, .kontakt, .fuss { padding-block: 1.5rem; }
  .bogen { display: none; }
  .ablauf__schritte::before { display: none; }
}


/* ==========================================================================
   24 — Was erst im Theme dazukommt

   Alles oberhalb dieser Linie steht so auch im Entwurf. Hier drunter steht
   nur, was es im Entwurf nicht geben konnte, weil es dort kein WordPress
   gab. Wer eine Abweichung zum Entwurf sucht, sucht hier.
   ========================================================================== */

/* --------------------------------------------------------------------------
   24.1 — Adminleiste

   Der Kopf klebt mit top: 0. Ist jemand angemeldet, haengt die Adminleiste
   darueber und der Kopf schoebe sich darunter. Die Variable setzt
   WordPress selbst; ohne Anmeldung ist sie nicht da und der Rueckfallwert
   greift.
   -------------------------------------------------------------------------- */

.admin-bar .kopf,
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0px); }
.admin-bar .js .kopf__weg { inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--kopfhoehe)); }


/* --------------------------------------------------------------------------
   24.1b — Der klebende Kopf, im Block-Theme

   `.kopf` steht seit dem Entwurf auf position: sticky. Im Entwurf ist er ein
   Kind von <body> und klebt deshalb ueber die ganze Seite. WordPress legt um
   den Template-Part aber ein eigenes <header class="wp-block-template-part">,
   und dieser Kasten ist genau so hoch wie der Kopf selbst — 77 px. Ein
   klebendes Element kann seinen Elternkasten nicht verlassen: Bei null
   Spielraum scrollt es weg wie ein gewoehnliches Element.

   Auf der Seite sah das aus, als sei sticky gar nicht gesetzt. Es war
   gesetzt, es hatte nur keinen Platz.

   Deshalb klebt hier die Huelle. `.kopf` darf sein sticky behalten — es
   wirkt dann nur innerhalb der Huelle und stoert nicht.
   -------------------------------------------------------------------------- */

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 50;
}


/* --------------------------------------------------------------------------
   24.2 — Blockhuellen

   WordPress legt um den Inhalt einer Vorlage ein <div class="wp-site-blocks">
   und um <main> eine Gruppe. Beide bringen einen senkrechten Abstand
   zwischen Geschwisterelementen mit. Den brauchen die Sektionen nicht —
   sie tragen ihren Abstand selbst, und der ist von Sektion zu Sektion
   verschieden. Ohne diese Zeilen stuende zwischen jeder Sektion eine
   zusaetzliche Fuge, und der Rhythmus, um den es in der Struktur geht,
   waere dahin.
   -------------------------------------------------------------------------- */

.wp-site-blocks > *,
main.wp-block-group > * { margin-block: 0; }

/* Die Hueltgruppe selbst ist reines Geruest und darf nichts beitragen. */
main.wp-block-group { margin: 0; padding: 0; }


/* --------------------------------------------------------------------------
   24.3 — Rueckmeldung des Formulars ohne JavaScript

   Nach dem Absenden laedt die Seite neu. Die Bestaetigung steht dann
   serverseitig im Markup — .karte__bestaetigung gibt es schon oben. Neu
   ist der Fehlerfall: Er braucht eine eigene Form, weil sonst niemand
   erkennt, ob die Anfrage angekommen ist oder nicht.
   -------------------------------------------------------------------------- */

.karte__fehler {
  border-left: 3px solid var(--wp--preset--color--rot);
  padding-left: var(--wp--preset--spacing--30);
  margin-bottom: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--sm);
}

.karte__fehler b { font-weight: 600; }
.karte__fehler[hidden] { display: none; }

/* WordPress und einige Blocks setzen diese Klasse. Sie tut dasselbe wie
   .nur-vorlesen und wird deshalb daran gehaengt statt zweimal gebaut. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   24.4 — Unterseiten

   Impressum und Datenschutzerklaerung sind gewoehnliche WordPress-Seiten.
   Ihr Inhalt kommt aus dem Editor und traegt deshalb keine Klassen aus
   diesem Stylesheet. Er bekommt hier eine Lesebreite und die Abstaende,
   die der OnePager sonst ueber die Sektionen regelt.

   Bewusst knapp gehalten: Auf diesen beiden Seiten steht Fliesstext, sonst
   nichts. Wer hier mehr aufbaut, baut ein zweites Layout.
   -------------------------------------------------------------------------- */

.beitrag { max-width: var(--wp--custom--layout--content); }

.beitrag h1 { font-size: var(--wp--preset--font-size--xxl); }
.beitrag h1,
.beitrag h2,
.beitrag h3,
.beitrag h4 { margin-top: var(--wp--preset--spacing--40); }
.beitrag > :first-child { margin-top: 0; }

.beitrag h2 { font-size: var(--wp--preset--font-size--xl); }
.beitrag h3 { font-size: var(--wp--preset--font-size--lg); }

/* h4 kam am 12.08.2026 dazu. Die gelieferte Datenschutzerklaerung gliedert
   vier Ebenen tief — 24 h3 und 6 h4 („Wer ist verantwortlich fuer die
   Datenerfassung?“). Ohne diese Zeilen stuenden ihre Zwischenfragen ohne
   Abstand mitten im Text, und sie saehen aus wie die Ebene darueber: h3 und
   h4 kommen aus theme.json beide auf dieselbe Groesse. Eine Stufe kleiner
   macht den Unterschied sichtbar; die Schriftart traegt die Ueberschrift
   ohnehin. */
.beitrag h4 {
  font-size: var(--wp--preset--font-size--base);
  margin-bottom: var(--wp--preset--spacing--20);
}

.beitrag ul,
.beitrag ol {
  margin: 0 0 1.25em;
  padding-left: 1.25rem;
  list-style: revert;
}

.beitrag li { margin-bottom: 0.375rem; }

.beitrag a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.beitrag a:hover { text-decoration-color: var(--wp--preset--color--rot); }

.beitrag table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25em;
  font-size: var(--wp--preset--font-size--sm);
}

.beitrag th,
.beitrag td {
  border-bottom: 1px solid var(--linie-schwarz-fein);
  padding: 0.5rem 0.75rem 0.5rem 0;
  text-align: left;
  vertical-align: top;
}

.beitrag img { max-width: 100%; height: auto; }