/* 08.10. Einheitliche Bausteine auf allen Seiten (Lukas: gleiche Elemente, gleiche Logik). Wird als letzte Datei geladen.
   Regeln:
   1. Abschnittskopf auf hellem Grund: Stichwort mit Linie davor, H2 in der Pinselschrift, Kernaussage im Traeger, Lauftext darunter, linksbuendig.
      Dunkle Abschnitte (Service, Technische Daten, Mission Kapitel) behalten ihre helle Zweitzeile statt Traeger.
   2. Fragen und Antworten (FAQ, Bedenken): ein Baustein, Aufklappfelder (inc/fragen.php).
   3. Einsatzorte als Karten: ein Baustein (inc/einsatz-karten.php).
   4. Seitenende: Showroom und Standortcheck, ein Baustein (inc/anfrage-block.php).
   5. Erster Knopf im Kopf jeder Seite: "Standortcheck anfragen" (gruen, springt zum Formular), zweiter Knopf seitenspezifisch. */
section .kopfzeile.kopfzeile.kopfzeile.kopfzeile { max-width: 50em; margin: 0 0 clamp(36px, 4.5vw, 64px); text-align: left; }
section .kopfzeile.kopfzeile.kopfzeile.kopfzeile.mitte { text-align: left; margin-inline: 0; }
section .kopfzeile.kopfzeile.kopfzeile.kopfzeile .stichwort, #anfrage .v4-stichwort.v4-stichwort {
  display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green-2); margin-bottom: 16px; }
section .kopfzeile.kopfzeile.kopfzeile.kopfzeile .stichwort::before, #anfrage .v4-stichwort.v4-stichwort::before { content: ""; display: block; width: 30px; height: 2px; margin: 0; background: currentColor; opacity: .7; }
section .kopfzeile.kopfzeile.kopfzeile.kopfzeile .stichwort::after, #anfrage .v4-stichwort.v4-stichwort::after { content: none; }
section .kopfzeile.kopfzeile.kopfzeile.kopfzeile h2 { font-size: clamp(38px, 5vw, 72px); line-height: 1.02; letter-spacing: -.01em; }
section .kopfzeile.kopfzeile.kopfzeile.kopfzeile h2 .traeger { font-size: 1em; }
section .kopfzeile.kopfzeile.kopfzeile.kopfzeile p { margin: 14px 0 0; font-size: clamp(17px, 1.35vw, 20px); max-width: 34em; color: var(--muted); }
@media (max-width: 700px) { section .kopfzeile.kopfzeile.kopfzeile.kopfzeile h2 .traeger { white-space: normal; } }
/* Standortcheck am Seitenende: Kopf steht in der halben Spalte, darum kleiner, sonst gleich */
#anfrage h2#anfrage-h { font-size: clamp(34px, 3.6vw, 56px); line-height: 1.04; letter-spacing: -.01em; }
/* Fragen und Antworten */
.fragen-block .faq { margin-top: 0; max-width: 860px; }
/* Kundenlogos (inc/kunden-band.php), gleich auf Startseite und Mission */
.kd-liste { display: flex; flex-wrap: wrap; gap: 14px; }
.kd-mark { flex: 0 1 calc((100% - 6 * 14px) / 7); min-width: 150px; display: flex; align-items: center; justify-content: center; height: clamp(90px, 12vh, 120px);
  padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 26px; transition: transform .4s var(--ease-in-out), box-shadow .4s; }
.kd-mark:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -34px rgba(15,51,25,.5); }
.kd-mark img { max-width: 100%; max-height: 60px; object-fit: contain; }
.kd-verband { margin: clamp(18px, 3vh, 30px) 0 0; color: var(--muted); font-size: 15px; }
@media (max-width: 900px) { .kd-mark { flex-basis: calc(50% - 7px); min-width: 0; } }

/* 19.10. Startseite: Hero-Text auf der Hoehe der Automaten-Oberkante (Wert setzt js/hero.js) */
body:not(.hochkant) #hero.oben-buendig .kapitel { top: var(--automat-oben); transform: none; }
/* 19.10. alle H2: etwas mehr Zeilenabstand, damit die Zeilen nicht aufeinanderkleben */
h2, section .kopfzeile.kopfzeile.kopfzeile.kopfzeile h2, #anfrage h2#anfrage-h, .ez-kopf h2, .eo-punkt h2, .mi-kapitel h2,
.v4-dunkel h2, .v4-hell h2, .showroom-text h2 { line-height: 1.14; }
.rechtstext h2, .v4-fuss h2.fuss-titel { line-height: 1.3; }

/* 19.10. Rondelle: Karte ohne Zahlen, Text mittig neben den Knoepfen; Buehne passend zu den groesseren Elementen */
.rondell-karte.ohne-fakten { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: center; }
.rondell-karte.ohne-fakten .rk-fakten { display: none; }
.rondell-karte.ohne-fakten .rk-text { max-width: 46em; }
@media (max-width: 1180px) { .rondell-karte.ohne-fakten { grid-template-columns: 1fr; gap: 20px; } }
/* Buehne, Leiste und Karte passen gemeinsam auf einen Laptop-Bildschirm (Lukas 19.10.: die Ueberschrift darf wegscrollen) */
/* 20.10. (Lukas): Automaten im selben Abbildungsmass wie die Produkte im Sortiment-Rondell: gleiche Buehnenhoehe fuer beide */
body.start .rondell-automaten .rondell-buehne, body.start .rondell-sortiment .rondell-buehne { height: clamp(260px, min(36vw, 100svh - 340px), 500px); }
body.start .rondell-karte { margin-top: clamp(14px, 2vh, 28px); padding-top: clamp(20px, 2.6vh, 32px); padding-bottom: clamp(20px, 2.6vh, 32px); }
.rondell-item[style*="visibility: hidden"] { pointer-events: none; }
/* 19.10. Traeger am Zeilenanfang: Text buendig mit der Zeile darueber (Klasse setzt js/pinsel.js) */
.traeger.zeilenanfang, .traeger.mit-pinsel.zeilenanfang { margin-left: -.22em; }

/* 20.10. (Lukas): Weiterlesen, Missionsfoto weiter herausgezoomt: hoeheres Bildfeld in beiden Karten (bleiben gleich hoch),
   das Foto zeigt die beiden komplett mit Luft ueber den Koepfen, die beiden sitzen mittig */
.wk .motivfeld { height: clamp(340px, 46vh, 440px); }
.wk .motivfeld.foto img { object-position: 50% 27%; }
.wk:hover .motivfeld.foto img { transform: scale(1.02); }
/* 19.10. eine gemeinsame linke Kante auf allen Seiten: die Inhaltsbreite der V3-Abschnitte (Service, Weiterlesen, Showroom, Fuss)
   entspricht jetzt der .wrap-Breite aller anderen Abschnitte */
.inhalt-wrap { width: min(var(--container), 100% - 2 * clamp(16px, 5vw, 64px)); max-width: none; padding-left: 0; padding-right: 0; margin-inline: auto; }

/* 19.10. Showroom: Textblock rechts, die Abdunklung kommt dafuer von rechts, das Bild zeigt links die Geraete */
.showroom .inhalt-wrap { display: flex; justify-content: flex-end; }
/* 20.10. (Lukas): Block rechts auf dem Bild, Text darin linksbuendig */
.showroom-text { text-align: left; }
.showroom-text p { margin-left: 0; max-width: 30em; }
.showroom-bild img { object-position: 30% 50%; }
.showroom::after { background: linear-gradient(to left, rgba(11,38,19,.94) 0%, rgba(11,38,19,.75) 38%, rgba(11,38,19,.1) 75%), linear-gradient(to top, rgba(11,38,19,.6), rgba(11,38,19,0) 50%); }
@media (max-width: 700px) { .showroom::after { background: linear-gradient(to top, rgba(11,38,19,.96) 0%, rgba(11,38,19,.8) 55%, rgba(11,38,19,.2) 100%); } }
/* 19.10. Fuss: Logo mit rotem Apfel (Schrift weiss), ohne Navigation, BDV-Mitgliedschaft in der Markenspalte */
.v4-fuss img.fuss-logo { filter: none; height: 52px; }
.v4-fuss .fuss-spalten { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.v4-fuss .fuss-bdv { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.v4-fuss .fuss-bdv span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); font-weight: 700; }
.v4-fuss .fuss-bdv img { filter: none; height: 44px; width: auto; margin: 0; align-self: flex-start; }
.v4-fuss .fuss-bdv b { font-weight: 600; color: #e6f2e9; font-size: 14px; max-width: 28em; line-height: 1.5; }
@media (max-width: 980px) { .v4-fuss .fuss-spalten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .v4-fuss .fuss-spalten { grid-template-columns: 1fr; } }
/* 19.10. Karten der Buehnen (Startseite Hero, Automatenseite) an derselben linken Kante wie alle Abschnitte */
.kapitel { left: max(clamp(16px, 5vw, 64px), calc((100% - var(--container, 1280px)) / 2)); }
.kapitel[data-seite="rechts"] { left: auto; right: max(clamp(16px, 5vw, 64px), calc((100% - var(--container, 1280px)) / 2)); }
body.hochkant .kapitel, body.hochkant .kapitel[data-seite="rechts"] { left: 12px; right: 12px; }
/* 19.10. Feinschliff: Pinselstrich beruehrt nie die Zeile darueber, Ueberschriften duerfen breiter laufen */
section .kopfzeile.kopfzeile.kopfzeile.kopfzeile { max-width: min(100%, 1060px); }
/* Rondell Startseite: Hinweiszeile weg (Pfeile und Punkte reichen), Knoepfe nebeneinander, so bleibt mehr Platz fuer das Geraet */
body.start .rondell-hinweis { display: none; }
body.start .rondell-leiste { margin-top: 10px; }
body.start .rondell-karte.ohne-fakten .rk-links { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
/* 20.10. (Lukas): Siegel (BDV, EU-Bio) klein in der untersten Zeile, mittig zwischen Firma und Rechtsseiten */
.v4-fuss .fuss-unten { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.v4-fuss .fuss-unten .links { justify-self: end; }
.v4-fuss .fuss-siegel { display: flex; gap: 10px; align-items: center; }
.v4-fuss .fuss-siegel img { filter: none; margin: 0; height: 22px; width: auto; background: #fff; border-radius: 6px; padding: 4px 7px; box-sizing: content-box; }
.v4-fuss .fuss-siegel img[src*="eu-bio"] { padding: 0; border-radius: 4px; height: 30px; }
@media (max-width: 700px) { .v4-fuss .fuss-unten { grid-template-columns: 1fr; justify-items: start; gap: 14px; } .v4-fuss .fuss-unten .links { justify-self: start; } }
/* 19.10. Einsatzorte-Reiter ohne Automatenmix (der steht auf der Seite des Einsatzorts): Bild links, Text rechts, beides gross */
.ez-tafel.ez-tafel { display: block; }
.ez-tafel[hidden] { display: none !important; }
.ez-tafel .ez-oben { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ez-tafel .ez-foto { height: auto; aspect-ratio: 16 / 10; }
.ez-tafel .ez-text .ez-grund { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; max-width: 32em; }
@media (max-width: 860px) { .ez-tafel .ez-oben { grid-template-columns: minmax(0, 1fr); } }
/* 19.10. Kapitel-Leiste unten (Sortiment, Mission) entfaellt: sie lag ueber Produkten und Texten und lenkte ab */
.seitennav { display: none !important; }
@media (max-width: 700px) { .showroom .inhalt-wrap { justify-content: flex-start; } .showroom-text { text-align: left; } .showroom-text p { margin-left: 0; } }
/* 20.10. (Lukas): Der Pinselstrich darf nie in die Zeile darueber ragen (Komma, g, y). Beginnt ein Traeger eine Zeile
   (Klasse .zeilenanfang aus js/pinsel.js), bekommt er so viel Abstand nach oben, dass zwischen Unterlaenge und Strich Luft bleibt.
   Geprueft mit Messskript auf allen Seiten in 390, 1280, 1440 und 1920 px Breite. */
.eo-kunde { padding: 6px; gap: 0; }
/* 20.10. (Lukas): unterste Zeile: links Firma, rechts die Siegel und ganz rechts aussen die Rechtsseiten */
.v4-fuss .fuss-unten { display: flex; align-items: center; justify-content: flex-start; gap: 12px 28px; }
.v4-fuss .fuss-unten .fuss-siegel { margin-left: auto; }
.v4-fuss .fuss-unten .links { justify-self: auto; }
@media (max-width: 700px) { .v4-fuss .fuss-unten { flex-wrap: wrap; } .v4-fuss .fuss-unten .fuss-siegel { margin-left: 0; } }
/* 20.10. (Lukas): Automatenmix auf den Einsatzort-Seiten: Geraete als Freisteller mit Text darunter, ohne Kaesten */
.mx-geraet, .mx-geraet:hover, .mx[data-gross="0"] .mx-geraet.gross, .mx[data-gross="1"] .mx-geraet.gross { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.mx-geraet:hover { transform: none; }
.mx-geraet .mx-bild, .mx-bild.dunkel { background: none; border-radius: 0; overflow: visible; }
.mx-bild img { filter: drop-shadow(0 22px 22px rgba(15,51,25,.16)); }
.mx-geraet:hover .mx-bild img { transform: translateY(-6px); }
.mx-tag { margin-left: 0; margin-right: 0; }
.mx-geraet b, .mx-text { margin-left: 0; margin-right: 0; }
.mx[data-gross="0"] .mx-geraet.gross { transform: none; }
/* 20.10. (Lukas): Mission, Team: kein Gruppenfoto, Valentin und Katharina gross nebeneinander, Name und Aufgabe darunter */
.team-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); max-width: 1060px; }
.person-gross { margin: 0; }
.person-gross .pg-bild { aspect-ratio: 4 / 5; border-radius: 36px; overflow: hidden; background: var(--green-tint); border: 1px solid var(--line); }
.person-gross .pg-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-in-out); }
.person-gross:hover .pg-bild img { transform: scale(1.03); }
.person-gross figcaption { margin-top: 18px; }
.person-gross b { display: block; font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; color: var(--ink); }
.person-gross span { display: block; margin-top: 6px; color: var(--muted); font-size: 16px; }
.person-gross a { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--green-2); text-decoration: none; }
@media (max-width: 700px) { .team-zwei { grid-template-columns: 1fr; } }

/* 20.10. Traeger v4 (Lukas: "zu 100 % sicher, aber keine riesigen Zeilenabstaende"):
   1. Ueberschriften mit Pinselschrift haben den engen Grundabstand 1,06.
   2. Der Pinsel folgt der echten Schrift im Traeger: schlank ueber normalen Buchstaben, nur ueber Umlautpunkten bzw. unter Komma
      und Unterlaengen ein Stueck hoeher bzw. tiefer. Jede Glyphe ist ganz bedeckt.
   3. js/pinsel.js misst danach je Ueberschrift die echte Form des Pinsels gegen die echte Tinte jedes Zeichens darueber und
      darunter. Fehlt irgendwo der Sicherheitsabstand, wird der Zeilenabstand DIESER Ueberschrift genau so weit erhoeht (data-zh).
      Innerhalb einer Ueberschrift bleiben alle Zeilen gleich. */
h1, h2, .mi-zeile, section .kopfzeile.kopfzeile.kopfzeile.kopfzeile h2, #anfrage h2#anfrage-h, .ez-kopf h2, .eo-punkt h2, .mi-kapitel h2,
.v4-dunkel h2, .v4-hell h2, .showroom-text h2, .kapitel h1, .kapitel h2, h1 .h1-satz { line-height: 1.06em !important; }
.rechtstext h2, .v4-fuss h2.fuss-titel { line-height: 1.3 !important; }
h1 .h1-kw { line-height: 1.4 !important; }
/* Der Traeger uebernimmt den Zeilenabstand der Ueberschrift (in px), ohne Innenabstand oben und unten: sein Kasten ist exakt die Zeile.
   So sind auch umbrochene Traeger (Handy) gleichmaessig gesetzt. Kleinere Traegerschrift wird per JS mittig in die Zeile gesetzt. */
body .traeger, body .traeger.mit-pinsel { line-height: inherit; padding: 0 .22em; margin: 0 .16em 0 .12em; vertical-align: baseline; }
body .traeger .tt { line-height: inherit; }
body .traeger.zeilenanfang, body .traeger.mit-pinsel.zeilenanfang { margin-left: -.22em; }
.traeger .pinsel { clip-path: none; }
/* 20.10. (Lukas): unterste Footerzeile senkrecht genau mittig zwischen Trennlinie und Seitenende (oben und unten gleich viel Luft) */
.v4-fuss { padding-bottom: 26px; }
.v4-fuss .fuss-unten { padding-top: 26px; align-items: center; }
.v4-fuss .fuss-unten > * { display: flex; align-items: center; }
.v4-fuss .fuss-siegel img { display: block; }
/* 20.10. (Lukas): Teamkarten halb so gross, weniger schlank (quadratisch) und mittig in der Breite */
.team-zwei { max-width: 560px; margin-left: auto; margin-right: auto; gap: clamp(20px, 3vw, 36px); }
.person-gross .pg-bild { aspect-ratio: 1 / 1; border-radius: 28px; }
.person-gross figcaption { margin-top: 14px; text-align: center; }
.person-gross b { font-size: clamp(20px, 1.7vw, 24px); }
.person-gross span { font-size: 15px; }
@media (max-width: 700px) { .team-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; gap: 16px; } .person-gross .pg-bild { border-radius: 20px; } .person-gross b { font-size: 18px; } .person-gross span { font-size: 13.5px; } }
.person-gross a { white-space: nowrap; }
@media (max-width: 700px) { .person-gross a { font-size: 13.5px; } }
/* 20.10. (Lukas): Gruenderfoto auf der Missionsseite so zeigen, dass beide Koepfe ganz im Bild sind (Ausschnitt von oben statt Mitte) */
#mi-anfang .mi-foto img { object-position: 50% 8%; }
/* 20.10. (Lukas): E-Mail unter Katharina, unter der Telefonnummer */
.person-gross figcaption a { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.person-gross a.pg-mail { margin-top: 4px; white-space: normal; overflow-wrap: anywhere; }
/* 20.10. (Lukas): Automatenseite auf dem Handy als einfache Fassung: keine Scroll-Buehne, keine Kamerafahrten. Die vier Kapitel stehen
   untereinander, je Text und darunter das passende Standbild. Auf dem Desktop bleiben die Standbilder unsichtbar (und ungeladen). */
.kap-bild { display: none; }
html.einfach #laden { display: none !important; }
html.einfach #story { height: auto !important; }
html.einfach #buehne { position: static !important; height: auto !important; overflow: visible; display: block; padding: calc(var(--nav-h, 72px) + 16px) 0 8px; }
html.einfach #buehne > canvas, html.einfach #buehne .modell-laden, html.einfach #buehne .ladechip, html.einfach #buehne .fortschritt,
html.einfach #buehne .hinweis, html.einfach #buehne .kapitel.platzhalter { display: none !important; }
html.einfach #buehne .kapitel, html.einfach body.hochkant #buehne .kapitel { position: static !important; inset: auto !important; width: auto !important; max-height: none !important; overflow: visible !important;
  transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; filter: none !important;
  margin: 0 0 clamp(44px, 10vw, 72px) !important; padding: 0 20px !important; background: none !important; border-radius: 0 !important; }
html.einfach #buehne .kapitel .lang { display: inline !important; }
html.einfach #buehne .kapitel p { font-size: 16px; line-height: 1.55; }
html.einfach #buehne .kap-bild { display: block; margin: 22px 0 0; border-radius: 24px; overflow: hidden; background: #F8FBF7; }
html.einfach #buehne .kap-bild img { display: block; width: 100%; height: auto; }
/* 20.10. (Lukas): auch auf dem Handy stehen die Ziffern an der jeweiligen Stelle des Automaten. Die Positionen sind aus denselben
   Projektionsdaten berechnet wie auf dem Desktop (daten/kap.js, Haltebild des Kapitels); Aussehen wie die Punkte der Buehne. */
html.einfach #buehne .kap-bild { position: relative; }
.kap-punkt { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #35AC54; box-shadow: 0 0 0 2px #fff, 0 0 0 10px rgba(53,172,84,.2), 0 2px 10px rgba(15,51,25,.28); pointer-events: none; }
.kap-punkt i { display: block; width: 100%; height: 100%; color: #fff; font: 800 14px/26px var(--font-display); text-align: center; font-style: normal; }
/* 20.10. (Lukas): Handy sauber. Der Pinsel-Rahmen (SVG) ragt seitlich ueber den Bildschirm, dadurch liess sich die Seite auf dem Handy
   ein paar Pixel seitlich schieben. clip schneidet nur ab, ohne Scrollbereich (sticky bleibt intakt). */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
/* Einwilligung im Formular: Kaestchen links, Satz als ein Block daneben */
form label.check > span { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  /* Rondelle: ohne Pfeile auf dem Handy, also auch ohne den Hinweis "Ziehen, tippen oder Pfeile" (wie auf der Startseite) */
  .rondell-hinweis { display: none; }
  /* Sortiment: Warengruppen als eine wischbare Zeile statt zwei umbrochener Reihen */
  .mk-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
               margin-left: -20px; margin-right: -20px; padding: 2px 20px 4px; scroll-padding: 0 20px; }
  .mk-filter::-webkit-scrollbar { display: none; }
  .mk-filter button { flex: none; }
}
/* 20.10.: .rk-kopf ist auch der Seitenkopf der Reklamationsseite; dessen Innenabstand (v4.css) galt versehentlich auch fuer den Kopf
   der Rondell-Karten und erzeugte dort eine Luecke zwischen Text und Knopf */
.rondell-karte .rk-kopf { padding-bottom: 0 !important; }
/* 20.10. (Lukas): unterste Footerzeile am Desktop dreigeteilt: links Firma, BDV- und EU-Bio-Logo exakt in der Mitte der Zeile,
   rechts die Rechtsseiten. Die Mitte bleibt mittig, egal wie breit links und rechts sind (zwei gleich breite Aussenspalten). */
@media (min-width: 701px) {
  .v4-fuss .fuss-unten { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 28px; }
  .v4-fuss .fuss-unten > :first-child { justify-self: start; }
  .v4-fuss .fuss-unten .fuss-siegel { justify-self: center; margin-left: 0 !important; }
  .v4-fuss .fuss-unten .links { justify-self: end; }
}