/* Garten Perle Bau — Design-Sprache «Pflanzschild & Terrakotta»
   Idee: Erde zuerst, Grün als Marke, Terrakotta als einziges Signal.
   Das Pflanzschild (Schild mit Spitze) ist das wiederkehrende Zeichen. */

:root {
  --sand: #F1EDE2;
  --panel: #FBF9F3;
  --weiss: #FFFFFF;
  --tinte: #1E211A;
  --grau: #62655A;
  --linie: #D8D2C2;
  --erde: #2E2A20;
  --erde-tief: #23201A;
  --blatt: #3E6B3A;
  --blatt-hell: #7B9573;
  --terrakotta: #B34A2B;
  --terrakotta-hell: #E08A5C;
  --wrap: 1180px;
  --r: 6px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sand);
  color: var(--tinte);
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.1;
  margin: 0;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.15rem, 5.4vw, 3.7rem); font-stretch: 105%; }
h2 { font-size: clamp(1.72rem, 3.5vw, 2.55rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
p { margin: 0 0 15px; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }

/* ---------- Marker: das Pflanzschild ---------- */
.eyebrow {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blatt);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: '';
  width: 11px; height: 15px;
  flex: none;
  background: var(--blatt);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.sektion-erde .eyebrow, .fuss .eyebrow { color: var(--terrakotta-hell); }
.sektion-erde .eyebrow::before, .fuss .eyebrow::before { background: var(--terrakotta-hell); }

/* ---------- Demo-Band + Kopf ---------- */
.demo-hinweis {
  background: var(--erde-tief);
  color: #D9D3C4;
  font-family: 'Spline Sans Mono', monospace;
  font-size: .7rem;
  letter-spacing: .05em;
  text-align: center;
  padding: 7px 14px;
  line-height: 1.35;
}

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(241, 237, 226, .93);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--linie);
}
.kopf-inner { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.marke { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
/* Sein eigenes Logo in der Kopfzeile — GANZ, so wie er es geschickt hat.
   Das Zeichen ist fast quadratisch und dicht: Haus, Werkzeuge, Schriftzug,
   Nummer, drei Abzeichen. In Kopfgroesse ist davon nur die Silhouette zu
   erkennen, kein Wort. Deshalb die Arbeitsteilung: das Zeichen steht als
   Marke, der Name daneben in der Seitenschrift und bleibt lesbar.
   54 px ist das Groesste, was die 68-px-Leiste traegt; darunter zerfaellt auch
   die Silhouette. Die weichen, durchsichtigen Blattraender lassen die enge
   Luft oben und unten nicht als Gedraenge lesen.
   Die Breite laeuft ueber die Seitenverhaeltnis-Angabe mit, damit nichts
   springt, bevor das Bild da ist. Der Cremegrund der Datei ist durchsichtig
   gemacht — die Kopfleiste ist halbdurchsichtig und scrollt ueber Fotos
   hinweg; ein undurchsichtiges Rechteck haette sich dabei als heller Fleck
   abgezeichnet. */
.marke-logo {
  height: 54px; width: auto; display: block; flex: none;
  aspect-ratio: 420 / 384;
}
.marke-text { display: block; }
.marke-name {
  display: block; white-space: nowrap;
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 1.03rem; letter-spacing: -.015em; line-height: 1.15;
  color: var(--tinte);
}
.marke-ort {
  display: block;
  font-family: 'Spline Sans Mono', monospace;
  font-size: .67rem; letter-spacing: .07em; text-transform: uppercase; color: var(--grau);
}
.kopf-nav { display: flex; gap: 24px; }
.kopf-nav a { text-decoration: none; font-size: .93rem; color: var(--grau); padding: 6px 0; border-bottom: 2px solid transparent; }
.kopf-nav a:hover { color: var(--tinte); border-bottom-color: var(--blatt); }
.kopf-rechts { display: flex; align-items: center; gap: 16px; }
.kopf-tel { font-family: 'Spline Sans Mono', monospace; font-size: .86rem; text-decoration: none; color: var(--tinte); white-space: nowrap; }
.kopf-tel:hover { color: var(--terrakotta); }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 1rem;
  padding: 14px 24px; border-radius: 4px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.btn-primar { background: var(--terrakotta); color: #FFF6F1; }
.btn-primar:hover { background: #9C3D22; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30,33,26,.16); }
.btn-linie { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.btn-linie:hover { background: var(--tinte); color: var(--sand); }
.btn-klein { padding: 10px 17px; font-size: .92rem; }
.pfeil { transition: transform .16s ease; }
.btn:hover .pfeil { transform: translateX(3px); }
/* Auf dunkler Erde braucht der Hauptknopf eine eigene Regel — sonst
   verschwindet er fast in der Fläche. Hell auf dunkel, Text in Tinte. */
.sektion-erde .btn-primar, .abschluss .btn-primar {
  background: var(--terrakotta-hell); color: #2A1509;
}
.sektion-erde .btn-primar:hover, .abschluss .btn-primar:hover { background: #EFA179; }
.sektion-erde .btn-linie { color: var(--sand); border-color: rgba(241,237,226,.55); }
.sektion-erde .btn-linie:hover { background: var(--sand); color: var(--erde); }

/* Tippziele: 44px nur auf eigenständigen Link-Zeilen — an einem Link mitten
   im Fliesstext würde die Mindesthöhe den Zeilenabstand aufreissen. */
.marke, .kopf-tel, .tel-weg, .fuss-tel, .anf-tel, .anf-zurueck, .lage-liste .v a {
  min-height: 44px; display: inline-flex; align-items: center;
}
.marke { display: flex; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--terrakotta); outline-offset: 3px; border-radius: 3px;
}

/* ---------- Hero ---------- */
.hero { padding: 60px 0 54px; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero h1 .gruen { color: var(--blatt); }
.hero-lead { font-size: 1.13rem; color: #3D4036; max-width: 33em; margin-bottom: 26px; }
.hero-aktionen { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.tel-weg { font-family: 'Spline Sans Mono', monospace; font-size: .88rem; color: var(--grau); text-decoration: none; border-bottom: 1px solid var(--linie); }
.tel-weg:hover { color: var(--terrakotta); border-bottom-color: var(--terrakotta); }

.fakten {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-family: 'Spline Sans Mono', monospace; font-size: .75rem;
  letter-spacing: .04em; color: var(--grau);
  border-top: 1px solid var(--linie); padding-top: 16px; margin: 0;
}
.fakten span { display: flex; align-items: center; gap: 7px; }
.fakten span::before {
  content: ''; width: 8px; height: 11px; flex: none; background: var(--blatt);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}

.bild-rahmen {
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--linie);
  box-shadow: 0 18px 40px rgba(30,33,26,.10);
  background: var(--panel);
}
.bild-rahmen img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 3; }
/* Seit dem 14.08.2026 stehen hier Igors EIGENE Arbeitsfotos. Auf jedem klebt
   unten sein Firmenlogo. Darum traegt jeder Rahmen exakt das Verhaeltnis
   seines Fotos: Bei jedem anderen Wert schneidet «object-fit: cover» nach —
   und das Erste, was dabei wegfaellt, ist sein Logo. Nie ein Verhaeltnis
   aendern, ohne das Bild neu zuzuschneiden.
   AUSNAHME Heckenbild (17.08.2026): Dort ist das aufgeklebte Logo bewusst
   weggeschnitten. Es sass gross unten links mitten im Foto, war in dieser
   Groesse nicht lesbar und verdeckte die Arbeit. Sein Logo steht jetzt oben in
   der Kopfzeile — auf dem Foto braucht es keins mehr. Neu zugeschnitten aus
   seinem Originalfoto (1080x492), linke 310 px weg: damit faellt neben dem
   Logo auch die vollgestellte Hausecke mit dem Trampolinnetz raus, und uebrig
   bleibt genau das, was die Bildunterschrift verspricht. */
.bild-quer img { aspect-ratio: 770 / 492; }
.bild-hoch { max-width: 420px; }
.bild-hoch img { aspect-ratio: 3 / 4; }
/* Das Dachfoto etwas schmaler, damit es neben der Textspalte nicht erschlaegt.
   Es ist das Bild, das das Fachhandwerk beweist — seit dem 25.09.2026 die
   Dachverstaerkung in Zuerich statt des alten Isolationsfotos (Igors Wunsch). */
.bild-dach { max-width: 420px; }
/* 25.09.2026: Verhaeltnis folgt dem neuen Schnitt der Dachverstaerkung
   (924x1150). Vorher 945/1425 fuer das alte Isolationsfoto. Nie ohne den
   Zuschnitt im img-Ordner aendern — «object-fit: cover» schneidet sonst nach. */
.bild-dach img { aspect-ratio: 924 / 1150; }
.bild-portraet { max-width: 420px; }
.bild-portraet img { aspect-ratio: 945 / 1380; }
/* Auf schmalen Schirmen steht das Bild allein und darf die volle Breite haben. */
@media (max-width: 980px) {
  .bild-hoch, .bild-portraet, .bild-dach { max-width: 340px; }
}
.bild-note {
  font-family: 'Spline Sans Mono', monospace; font-size: .68rem;
  color: var(--grau); margin: 10px 0 0; letter-spacing: .03em;
}

/* ---------- Sein Firmenbild ----------
   Der Abbinder des Betriebs-Abschnitts, linksbuendig auf der Rasterkante.
   Die Datei ist bereits fertig zugeschnitten (siehe den ausfuehrlichen
   Kommentar im HTML: Nummernbalken entfernt, Schriftzug und Name vollstaendig).
   Darum hier bewusst OHNE «object-fit: cover» und ohne festes Verhaeltnis —
   die Datei wird nur skaliert, nie noch einmal nachgeschnitten und nie
   verzerrt. Wer das Verhaeltnis anfasst, schneidet als Erstes seinen
   Schriftzug an.
   Der Rahmen hat denselben Cremeton wie der Bildhintergrund, damit die
   Blattkanten nicht abgeschnitten wirken.
   Die Breite bleibt unter der des Portraits (420px): Im Abschnitt ueber den
   Mann darf die Werbegrafik das Gesicht nicht schlagen. */
.firmenbild {
  margin: 46px 0 0;
  max-width: 380px;
}
.firmenbild-rahmen {
  border-radius: var(--r);
  border: 1px solid var(--linie);
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(30,33,26,.10);
  overflow: hidden;
}
.firmenbild img {
  display: block;
  width: 100%;
  height: auto;   /* nie verzerrt, nie nachgeschnitten */
}
.firmenbild figcaption {
  font-family: 'Spline Sans Mono', monospace; font-size: .68rem;
  color: var(--grau); margin: 12px 0 0; letter-spacing: .03em;
}
/* Das Zeichen bleibt auf JEDER Breite schmaler als das Portrait darueber.
   Das Portrait faellt unter 980px von 420 auf 340 — das Zeichen zieht mit,
   sonst schlaegt die Werbegrafik auf dem Handy doch wieder das Gesicht. */
@media (max-width: 980px) {
  .firmenbild { max-width: 300px; margin-top: 34px; }
}

/* Ein ruhiger Einstieg, kein Auftritt — der Wow-Moment ist das Gartenjahr. */
.hero > .wrap > div { animation: auf .7s ease both; }
.hero > .wrap > div:nth-child(2) { animation-delay: .12s; }
@keyframes auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Sektionen ---------- */
.sektion { padding: 74px 0; }
/* Sprungziele muessen UNTER der klebenden Kopfzeile landen, sonst ist die
   erste Zeile jeder angesprungenen Sektion halb verdeckt. */
section[id], figure[id] { scroll-margin-top: 96px; }
.sektion-hell { background: var(--panel); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.sektion-erde { background: var(--erde); color: #E4DFD1; }
.sektion-erde h2, .sektion-erde h3 { color: #F4F0E4; }
.sektion-erde p { color: #C8C3B4; }
.sektion-kopf { max-width: 40em; margin-bottom: 40px; }
.sektion-kopf p { color: var(--grau); font-size: 1.05rem; }
.sektion-erde .sektion-kopf p { color: #C8C3B4; }

/* ---------- Was Sie ankreuzen können ---------- */
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.karte {
  display: flex; flex-direction: column;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r);
  padding: 26px 24px 22px; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.karte:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(30,33,26,.10); border-color: var(--blatt); }
/* Die Ziffer sitzt auf dem grünen Schild und braucht die Sandfarbe — sonst
   sticht die allgemeine Absatzfarbe der Karte sie aus und sie verschwindet. */
.karte .karte-nr {
  font-family: 'Spline Sans Mono', monospace; font-size: .72rem; letter-spacing: .1em;
  color: var(--sand); background: var(--blatt);
  width: 30px; height: 38px; display: flex; align-items: center; justify-content: center;
  padding-bottom: 7px;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
  margin: 0 0 16px;
}
.karte h3 { margin-bottom: 8px; }
.karte > p { color: var(--grau); font-size: .96rem; margin-bottom: 18px; }
.karte-weg {
  margin-top: auto; font-weight: 700; font-size: .93rem; color: var(--terrakotta);
  display: inline-flex; align-items: center; gap: 7px;
}
.karte:hover .karte-weg .pfeil { transform: translateX(3px); }

/* ---------- Die drei Bereiche (Wegweiser, bewusst ohne Bilder) ---------- */
.bereiche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bereich {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--linie); border-radius: var(--r);
  padding: 28px 26px 24px; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bereich:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(30,33,26,.10); border-color: var(--blatt); }
.bereich-sinn {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(62,107,58,.10); color: var(--blatt); margin-bottom: 18px;
}
.bereich-sinn svg { width: 23px; height: 23px; }
.bereich h3 { margin: 0 0 4px; font-size: 1.32rem; }
.bereich-unter {
  font-family: 'Spline Sans Mono', monospace; font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--blatt); margin: 0 0 14px;
}
.bereich > p { color: var(--grau); font-size: .96rem; margin: 0 0 18px; }
.bereich:hover .karte-weg .pfeil { transform: translateX(3px); }

/* ---------- Die drei Bereiche schon im Hero ---------- */
.hero-bereiche {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0;
}
.hero-bereiche a {
  display: inline-block; text-decoration: none; color: var(--blatt);
  font-family: 'Spline Sans Mono', monospace; font-size: .72rem; letter-spacing: .09em;
  /* 44px hoch: Die drei Marken sind auf dem Handy echte Tippziele, mit 35px
     trifft man sie mit dem Daumen nur mit Glueck. */
  text-transform: uppercase; padding: 7px 16px; min-height: 44px; line-height: 1;
  display: inline-flex; align-items: center;
  border: 1px solid rgba(62,107,58,.35); border-radius: 100px;
  transition: background .18s ease, color .18s ease;
}
.hero-bereiche a:hover, .hero-bereiche a:focus-visible { background: var(--blatt); color: var(--sand); }

/* ---------- Aufzaehlung in den Bereichs-Abschnitten ---------- */
.liste { list-style: none; padding: 0; margin: 22px 0 0; }
.liste li {
  position: relative; padding-left: 26px; margin-bottom: 11px; color: #3D4036;
}
.liste li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 9px; height: 11px; background: var(--blatt);
  clip-path: polygon(0 0, 100% 0, 100% 66%, 50% 100%, 0 66%);
}
.klein-hinweis {
  margin: 22px 0 0; font-size: .92rem; color: var(--grau);
  border-left: 2px solid var(--linie); padding-left: 14px;
}
/* Solar-Abschnitt: Text links, Bild rechts — sonst stehen Dach und Solar
   als zwei identische Bloecke untereinander. */
.betrieb-grid-gedreht { grid-template-columns: 1.05fr .95fr; }

/* ---------- Arbeits-Band zwischen zwei Sektionen ---------- */
/* Das Panoramafoto der Solaranlage ist das staerkste Bild der Seite und laeuft
   in seinem eigenen Verhaeltnis — kein Nachschneiden, sonst faellt Igors Logo
   unten rechts weg. Begrenzt auf die Textbreite, damit der Streifen nicht
   einen ganzen Bildschirm frisst. */
.band picture { display: block; }
.band { margin: 0 auto; position: relative; max-width: var(--wrap); padding: 0 26px; }
.band img {
  width: 100%; height: auto; aspect-ratio: 1080 / 486; object-fit: cover;
  display: block; border-radius: var(--r); border: 1px solid var(--linie);
}
/* Bewusst LINKS unten: rechts unten sitzt in diesem Foto Igors Logo, und das
   darf nicht hinter der Bildunterschrift verschwinden. */
.band figcaption {
  position: absolute; left: 26px; bottom: 0;
  background: rgba(35,32,26,.78); color: #C8C3B4;
  font-family: 'Spline Sans Mono', monospace; font-size: .66rem; letter-spacing: .03em;
  padding: 6px 12px;
}
/* Auf dem Handy ist das Panorama nur noch gut 150px hoch. Eine Unterschrift
   IM Bild wuerde dort ein Drittel der Flaeche verdecken — sie rueckt darunter. */
@media (max-width: 700px) {
  .band { padding: 0 18px; }
  .band img { aspect-ratio: 4 / 3; }   /* passt zum Handy-Ausschnitt, kein Nachschnitt */
  .band figcaption {
    position: static; background: none; color: var(--grau);
    padding: 9px 0 0; display: block;
  }
}

/* ---------- Aus den letzten Arbeiten: seine eigenen Fotos ---------- */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.galerie figure { margin: 0; }
.galerie img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border-radius: var(--r); border: 1px solid var(--linie);
  box-shadow: 0 14px 32px rgba(30,33,26,.09);
}
.galerie figcaption {
  font-family: 'Spline Sans Mono', monospace; font-size: .72rem;
  color: var(--grau); letter-spacing: .03em; margin-top: 11px;
}
/* Ortsangaben stehen bewusst OHNE eigene Auszeichnung in der Zeile (25.09.2026).
   Kurz gab es hier ein dunkleres, halbfettes .ort — bei zwei von vier Fotos, weil
   wir die anderen zwei Orte nicht kennen. Hervorgehoben sieht die Luecke nach
   vergessen aus statt nach unbekannt, und der Bruch sass in der oberen Reihe. */
/* Zwei belegte Fotos statt drei (siehe Kommentar im HTML). Das dritte Feld ist
   der Ausgang der Sektion, damit die Reihe gefuellt bleibt und die Bilder ihr
   Mass behalten. Die Textspalte darf schmaler sein als ein Foto. */
.galerie-zwei { grid-template-columns: 1fr 1fr .82fr; align-items: start; }
/* Vier Fotos (seit 25.09.2026): dieselben drei Spalten, aber zwei Bildreihen.
   Der Ausgang haelt seine Spalte — zur Platzierung darin siehe die Regel
   unten. Zwei Spalten fuer die Fotos heisst: sie behalten ihr Mass. */
.galerie-vier { grid-template-columns: 1fr 1fr .82fr; align-items: start; }
/* Der Ausgang steht in Reihe ZWEI, oben buendig — nicht mittig ueber beide
   Reihen. Mittig zentriert liess er je rund 500 px Leere ueber und unter sich:
   der Knopf schwebte und die Sektion sah aus, als fehle ein Bild. So steht er
   neben dem fertigen Lausen-Foto, und die Luft sammelt sich oben als Rand. */
.galerie-vier .galerie-ausgang { grid-column: 3; grid-row: 2; align-self: start; }
/* Die vier Fotos MUESSEN fest gesetzt werden. Sobald der Ausgang eine feste
   Zeile hat, laesst die automatische Platzierung das dann freie Feld oben
   rechts von einem Foto fuellen — Ergebnis war drei Bilder oben, eines unten
   und ein Loch in der Mitte. */
.galerie-vier figure:nth-of-type(1) { grid-area: 1 / 1; }
.galerie-vier figure:nth-of-type(2) { grid-area: 1 / 2; }
.galerie-vier figure:nth-of-type(3) { grid-area: 2 / 1; }
.galerie-vier figure:nth-of-type(4) { grid-area: 2 / 2; }
/* Eine Zeile mehr Platz als in der Zwei-Bild-Fassung: sonst steht das «an?»
   der Frage allein auf der zweiten Zeile. */
.galerie-vier .galerie-ausgang p { max-width: 18em; }
/* Vom 20.08. bis 21.08.2026 stand hier eine Einzelbild-Fassung (.galerie-eins,
   Querformat, Notiz daneben). Sie ist wieder raus, seit Igor am 21.08. das
   Schneefang-Foto nachgeliefert hat: die Reihe traegt wieder zwei Fotos plus
   Ausgang, und beide Bilder stehen im gleichen Hochformat wie ihre Vorlagen. */
.galerie-ausgang {
  align-self: center; padding-left: 6px;
}
.galerie-ausgang p {
  font-size: 1.02rem; margin: 0 0 18px; max-width: 15em;
}
@media (max-width: 900px) {
  .galerie-zwei, .galerie-vier { grid-template-columns: 1fr 1fr; }
  /* Auch .galerie-vier .galerie-ausgang mitnennen: Die Spalten-Zuweisung oben ist
     zweistellig spezifisch und wuerde die Mediaquery sonst ueberstimmen — der
     Ausgang bliebe in einer dritten, hier gar nicht vorhandenen Spalte haengen. */
  .galerie-ausgang, .galerie-vier .galerie-ausgang {
    grid-column: 1 / -1; grid-row: auto; padding-left: 0; margin-top: 8px;
  }
  /* Zwei Spalten statt drei: die festen Bildplaetze von oben wieder loesen. */
  .galerie-vier figure:nth-of-type(n) { grid-area: auto; }
  /* Volle Breite: die 15em der Spaltenfassung lassen hier sonst ein einzelnes
     "an?" auf der zweiten Zeile stehen. */
  .galerie-ausgang p { max-width: none; }
}

@media (max-width: 700px) { .galerie { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Vorher / Nachher ----------
   Zwei Paare, zwei Formate. Das Verhaeltnis kommt aus den Fotos selbst und
   steht darum am Bild-Element (width/height im HTML) statt hier — so schneidet
   nichts nach und Igors Logo bleibt in jedem Bild ganz. */
.vn-paar + .vn-paar { margin-top: 62px; }
.vn-paar-kopf { max-width: 40em; margin-bottom: 22px; }
.vn-paar-kopf h3 { font-size: clamp(1.18rem, 2.1vw, 1.45rem); margin-bottom: 9px; }
.vn-paar-kopf p { margin: 0; font-size: .98rem; }

.vn-bilder { display: grid; gap: 20px; }
.vn-bilder-quer { grid-template-columns: 1fr 1fr; }
/* Das Dach-Paar ist Hochformat und waere auf voller Wrap-Breite fast dreimal so
   hoch wie das Garten-Paar. Der Betrieb lebt aber vom Garten — darum ein
   ruhigeres, mittiges Mass, damit sich die beiden Paare auf Augenhoehe
   gegenueberstehen. */
.vn-bilder-hoch { grid-template-columns: 1fr 1fr; max-width: 820px; margin-inline: auto; }

/* Stiller Ausgang unter dem Garten-Paar: Der orange Knopf gehoert dem
   Zugabe-Block am Schluss — zwei davon in einer Sektion kippen die Rangfolge. */
.vn-weg { margin: 18px 0 0; }
.vn-weg a {
  font-family: 'Spline Sans Mono', monospace; font-size: .78rem;
  letter-spacing: .04em; color: var(--terrakotta-hell);
  text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color .18s ease;
}
.vn-weg a:hover { color: #F0A97F; text-decoration: underline; text-underline-offset: 4px; }
.vn-weg .pfeil { margin-left: 7px; transition: transform .18s ease; }
.vn-weg a:hover .pfeil { transform: translateX(3px); }

.vn-bild { position: relative; margin: 0; }
.vn-bild img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r); border: 1px solid rgba(241,237,226,.16);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}
.vn-bild figcaption {
  font-family: 'Spline Sans Mono', monospace; font-size: .7rem;
  color: #B4AF9F; letter-spacing: .03em; margin-top: 11px; line-height: 1.5;
}
/* Die Marke sagt in einem Wort UND in einer Farbe, welches Bild welches ist:
   Vorher gedeckt, Nachher im Terrakotta-Signal der Seite. Sie sitzt oben links
   im Bild — in keinem der vier Fotos liegt dort das Logo. */
.vn-marke {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-family: 'Spline Sans Mono', monospace; font-size: .66rem;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 5px 11px 5px 10px;
  background: rgba(35,32,26,.86); color: #D9D3C4;
  border-radius: 3px;
}
.vn-marke-nach { background: var(--terrakotta); color: #FDF3EC; }

/* Zugabe-Block: Bild und Text nebeneinander, Bild bewusst kleiner als die
   Paare darueber — es ist der ruhige Ausklang, nicht der Beweis. */
.vn-zugabe {
  display: grid; grid-template-columns: 340px 1fr; gap: 42px;
  align-items: center; margin-top: 66px;
  padding-top: 46px; border-top: 1px solid rgba(241,237,226,.14);
}
.vn-innen { border-color: rgba(241,237,226,.16); background: transparent; }
.vn-innen img { aspect-ratio: 945 / 1250; }
.vn-zugabe-text { max-width: 34em; }
.vn-zugabe-text h3 { font-size: clamp(1.25rem, 2.3vw, 1.6rem); margin-bottom: 12px; }

@media (max-width: 900px) {
  .vn-zugabe { grid-template-columns: 1fr; gap: 26px; margin-top: 52px; }
  .vn-innen { max-width: 320px; }
}
/* HANDY — hier entscheidet sich, ob das Versprechen «beide gleichzeitig sehen»
   haelt. Zwei Formate, zwei Antworten:
   Garten (breite Streifen): nebeneinander waere jedes Bild ein Band von
   Fingerbreite. Sie stehen untereinander, dafuer mit einem engeren Ausschnitt
   derselben Fotos (3:2, siehe <picture>) — gestapelt passen beide zusammen auf
   einen Schirm.
   Dach (Hochformat): gestapelt waere das Paar fast 1000px hoch, man saehe nie
   beide zugleich. Es bleibt darum NEBENEINANDER. Ein engerer Handy-Ausschnitt
   waere hier keine Loesung: Igors Logo sitzt oben im Himmel, der Kupferkamin
   reicht bis unten — jeder Beschnitt kappt eines von beidem. */
@media (max-width: 760px) {
  .vn-bilder-quer { grid-template-columns: 1fr; gap: 26px; }
  /* max-width des Dach-Paars hier aufheben: auf dem Handy ist jeder Pixel
     Bildbreite entscheidend, und 820px begrenzt dort ohnehin nichts Sinnvolles. */
  .vn-bilder-hoch { gap: 10px; max-width: none; }
  /* .64rem waren rund 10px Monospace und damit unter der Lesbarkeitsgrenze. */
  .vn-bild figcaption { font-size: .72rem; margin-top: 8px; }
  .vn-marke { top: 8px; left: 8px; font-size: .58rem; padding: 3px 7px; }
  .vn-paar + .vn-paar { margin-top: 48px; }
}
/* Auf den kleinsten Schirmen (iPhone SE) waere das gestapelte Garten-Paar rund
   15px zu hoch — die Unterkante des Nachher-Bilds verschwaende hinter der
   klebenden Aktionsleiste. Genau dort scheitert aber das Versprechen, beide
   Bilder zugleich zu sehen. */
@media (max-width: 400px) {
  .vn-bilder-quer { gap: 18px; }
}

/* ---------- Das Gartenjahr (der eine Wow) ---------- */
.jahr { margin-top: 6px; }
/* Das Jahresband: zwölf Balken, deren Farbe zeigt, wie viel im Garten läuft —
   stiller Winter, wachsender Frühling, voller Sommer, abklingender Herbst. */
.jahr-band {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 5px; align-items: end; margin-bottom: 14px;
}
.monat { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.monat .bal {
  display: block; border-radius: 2px 2px 0 0;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s cubic-bezier(.2,.85,.3,1);
}
.jahr-band.laeuft .monat .bal { transform: scaleY(1); }
.monat:nth-child(1) .bal { transition-delay: .00s }
.monat:nth-child(2) .bal { transition-delay: .04s }
.monat:nth-child(3) .bal { transition-delay: .08s }
.monat:nth-child(4) .bal { transition-delay: .12s }
.monat:nth-child(5) .bal { transition-delay: .16s }
.monat:nth-child(6) .bal { transition-delay: .20s }
.monat:nth-child(7) .bal { transition-delay: .24s }
.monat:nth-child(8) .bal { transition-delay: .28s }
.monat:nth-child(9) .bal { transition-delay: .32s }
.monat:nth-child(10) .bal { transition-delay: .36s }
.monat:nth-child(11) .bal { transition-delay: .40s }
.monat:nth-child(12) .bal { transition-delay: .44s }
.s-winter .bal { height: 26px; background: #59634F; }
.s-fruehling .bal { height: 52px; background: #6D9A5C; }
.s-sommer .bal { height: 74px; background: #4E8A3F; }
.s-herbst .bal { height: 46px; background: #8A6A34; }
.monat .mk {
  font-family: 'Spline Sans Mono', monospace; font-size: .7rem;
  letter-spacing: .04em; color: #A8A395;
  border-top: 1px solid rgba(228,223,209,.22); padding-top: 8px;
  text-align: center;
}
/* Der laufende Monat wird über Farbe markiert, nicht über die Höhe — sonst
   liest das Band «August ist die Hauptsaison», was es nicht meint. */
.monat.jetzt .bal { background: var(--terrakotta-hell); }
.monat.jetzt .mk { color: var(--terrakotta-hell); font-weight: 700; border-top-color: var(--terrakotta-hell); }
.jahr-legende { font-size: .88rem; color: #A8A395; margin: 0 0 32px; max-width: 44em; }
.jahr-legende strong { color: var(--terrakotta-hell); }
@media (prefers-reduced-motion: reduce) {
  .monat .bal { transform: scaleY(1); transition: none; }
}

.saisons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.saison {
  background: rgba(241,237,226,.06);
  border: 1px solid rgba(228,223,209,.16);
  border-radius: var(--r);
  padding: 22px 20px;
}
.saison.jetzt { border-color: var(--terrakotta-hell); background: rgba(224,138,92,.09); }
.saison-kopf {
  font-family: 'Spline Sans Mono', monospace; font-size: .7rem; letter-spacing: .11em;
  text-transform: uppercase; color: #A8A395; margin: 0 0 4px;
}
.saison.jetzt .saison-kopf { color: var(--terrakotta-hell); }
.saison h3 { font-size: 1.06rem; margin-bottom: 12px; }
.saison ul { margin: 0; padding: 0; list-style: none; }
.saison li {
  font-size: .93rem; color: #C8C3B4; padding-left: 17px; position: relative; margin-bottom: 6px; line-height: 1.5;
}
.saison li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 8px; height: 11px; background: var(--blatt);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.saison.jetzt li::before { background: var(--terrakotta-hell); }
.jahr-fuss { margin-top: 34px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.jahr-fuss p { margin: 0; max-width: 30em; font-size: .95rem; }

/* ---------- Der Betrieb ---------- */
.betrieb-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 52px; align-items: start; }
.gross { font-size: 1.13rem; color: #3D4036; }
/* Die Nummer mitten im Satz bleibt erkennbar als Link, ohne den Absatz
   zu zerreissen — und ist mit der Polsterung auch am Daumen zu treffen. */
.text-link {
  color: var(--blatt); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-block; padding: 17px 5px; margin: -17px -5px;
}
.text-link:hover { color: var(--terrakotta); }

/* ---------- Ablauf ---------- */
.ablauf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.schritt-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r); padding: 26px 24px; }
.schritt-karte .nr {
  font-family: 'Spline Sans Mono', monospace; font-size: .95rem; font-weight: 700;
  color: var(--sand); background: var(--blatt);
  width: 34px; height: 42px; display: flex; align-items: center; justify-content: center;
  padding-bottom: 8px;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
  margin: 0 0 16px;
}
.schritt-karte h3 { margin-bottom: 9px; }
.schritt-karte p { color: var(--grau); font-size: .96rem; margin-bottom: 0; }
.schritt-note {
  margin-top: 12px !important; font-family: 'Spline Sans Mono', monospace;
  font-size: .72rem; color: var(--terrakotta); line-height: 1.45;
}

/* ---------- Lage ---------- */
.lage-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 46px; align-items: start; }
.lage-liste { list-style: none; margin: 0; padding: 0; }
.lage-liste li { display: flex; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--linie); }
.lage-liste .k {
  font-family: 'Spline Sans Mono', monospace; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grau); flex: none; width: 108px; padding-top: 3px;
}
.lage-liste .v { font-size: 1rem; }
.lage-liste .v a { color: var(--terrakotta); }
.karten-rahmen {
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--linie);
  box-shadow: 0 14px 32px rgba(30,33,26,.10); background: #E6E2D6;
}
.karten-rahmen iframe { width: 100%; height: 400px; border: 0; display: block; }

/* ---------- Abschluss ---------- */
.abschluss { background: var(--erde); color: #E4DFD1; text-align: center; padding: 82px 0; }
.abschluss h2 { color: #F4F0E4; margin-bottom: 14px; }
.abschluss > .wrap > p { color: #C8C3B4; max-width: 34em; margin-left: auto; margin-right: auto; }
.abschluss .btn { margin-top: 12px; }
.tel-zeile { font-family: 'Spline Sans Mono', monospace; font-size: .85rem; margin-top: 22px !important; }
/* Die Nummer ist der zweite Weg zum Betrieb — am Daumen muss sie treffbar sein. */
.tel-zeile a {
  color: var(--terrakotta-hell); padding: 6px 4px;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* ---------- Fuss ---------- */
.fuss { background: var(--erde-tief); color: #9C9788; padding: 44px 0 34px; font-size: .9rem; }
.fuss-inner { display: flex; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.fuss a { color: #C4BFB0; }
.fuss-tel { font-family: 'Spline Sans Mono', monospace; }
.fuss-demo { max-width: 30em; font-size: .84rem; }
/* Der Link sitzt mitten im Satz — die negative Marge vergroessert nur das
   Tippziel auf Daumengroesse, ohne den Zeilenfluss zu veraendern. */
.fuss-demo a, .anf-fuss-demo a {
  display: inline-block; padding: 15px 6px; margin: -15px -6px;
}

/* ---------- Handy-Leiste ---------- */
.handy-leiste { display: none; }

/* ---------- Scroll-Reveals ---------- */
/* Ohne JavaScript bliebe die halbe Seite unsichtbar — der Einblende-Effekt
   startet bei opacity 0 und wird erst vom IntersectionObserver aufgehoben.
   Der <noscript>-Block im <head> setzt .reveal darum hart auf sichtbar. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero > .wrap > div { animation: none; }
}

/* =========================================================
   ANFRAGE — radikal reduziert, nur das Formular
   ========================================================= */
.anfrage-body { background: var(--sand); }
.anf-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 640px; margin: 0 auto; padding: 18px 22px 6px;
}
.anf-kopf-rechts { display: flex; align-items: center; gap: 14px; }
.anf-tel { font-family: 'Spline Sans Mono', monospace; font-size: .82rem; text-decoration: none; white-space: nowrap; }
.anf-zurueck { font-size: .86rem; color: var(--grau); text-decoration: none; border-bottom: 1px solid var(--linie); }
.anf-main { max-width: 640px; margin: 0 auto; padding: 14px 22px 60px; }
.anf-box { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r); padding: 30px 28px 32px; }

.fortschritt { margin-bottom: 26px; }
.fortschritt-bar { height: 5px; background: var(--linie); border-radius: 3px; overflow: hidden; }
.fortschritt-fuell { height: 100%; width: 0; background: var(--terrakotta); transition: width .35s ease; }
.fortschritt-txt {
  font-family: 'Spline Sans Mono', monospace; font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--grau); margin-top: 9px;
}

.mitgebracht {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: 'Spline Sans Mono', monospace; font-size: .73rem; color: var(--grau);
  background: var(--sand); border-radius: 4px; padding: 9px 13px; margin: 0 0 20px;
}
.mitgebracht[hidden] { display: none; }
.mitgebracht button {
  background: none; border: 0; color: var(--terrakotta); font: inherit;
  text-decoration: underline; cursor: pointer; padding: 2px 8px; min-height: 44px;
}

.schritt { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.schritt.aktiv { display: block; animation: schrittAuf .28s ease both; }
@keyframes schrittAuf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .schritt.aktiv { animation: none; } }
.frage {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.5rem;
  line-height: 1.2; letter-spacing: -.015em; padding: 0; margin: 0 0 8px;
}
.frage:focus { outline: none; }
.frage-sub { color: var(--grau); font-size: .95rem; margin-bottom: 22px; }

.optionen { display: grid; gap: 10px; }
.optionen.zwei { grid-template-columns: repeat(2, 1fr); }
/* Der Bereichsname traegt, die Beispiele stehen leiser darunter — sonst
   liest sich die erste Frage wie eine Aufzaehlung statt wie eine Wahl. */
.opt-zwei { flex-wrap: wrap; align-items: flex-start; padding-top: 13px; padding-bottom: 13px; }
.opt-sub {
  flex-basis: 100%; margin: 2px 0 0 27px;
  font-size: .86rem; color: var(--grau); font-weight: 400; line-height: 1.4;
}
.opt.gewaehlt .opt-sub { color: #4C5147; }
.opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--panel); border: 1.5px solid var(--linie); border-radius: 4px;
  padding: 15px 17px; font: inherit; font-weight: 600; color: var(--tinte);
  cursor: pointer; min-height: 56px;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.opt:hover { border-color: var(--blatt); background: var(--weiss); transform: translateY(-1px); }
/* Der Marker ist wieder das Pflanzschild — dasselbe Zeichen wie auf der Startseite. */
.mark {
  width: 15px; height: 20px; flex: none;
  background: var(--linie);
  clip-path: polygon(0 0, 100% 0, 100% 66%, 50% 100%, 0 66%);
  transition: background .15s ease;
}
.opt:hover .mark { background: #B9C4B0; }
.opt.gewaehlt { border-color: var(--blatt); background: #F2F6EF; }
.opt.gewaehlt .mark { background: var(--blatt); }

.anf-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.btn-zurueck {
  background: none; border: 0; color: var(--grau); font: inherit; font-size: .92rem;
  cursor: pointer; padding: 11px 4px; text-decoration: underline; min-height: 44px;
}
.btn-zurueck:hover { color: var(--tinte); }

.feld { margin-bottom: 18px; }
.feld label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 6px; }
.optional-note { font-weight: 400; color: var(--grau); font-size: .84rem; }
.feld input, .feld textarea {
  width: 100%; font: inherit; padding: 13px 15px;
  border: 1.5px solid var(--linie); border-radius: 4px; background: var(--panel); color: var(--tinte);
}
.feld input:focus, .feld textarea:focus { border-color: var(--blatt); background: var(--weiss); }
.feld textarea { min-height: 92px; resize: vertical; }
.feld-fehler { border-color: #B02A1C !important; background: #FDF3F1 !important; }
.feld-fehler-txt { color: #B02A1C; font-size: .86rem; margin: 6px 0 0; }
.feld-fehler-txt[hidden] { display: none; }
.daten-hinweis { font-size: .8rem; color: var(--grau); margin: 18px 0 0; line-height: 1.5; }

/* Ladezustand: der Knopf behält seine Beschriftung, damit nichts springt. */
.btn.laedt { opacity: .75; cursor: progress; }
.btn.laedt .pfeil { display: none; }
.lade-punkt { display: none; }
.btn.laedt .lade-punkt {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,246,241,.35); border-top-color: #FFF6F1;
  animation: dreh .7s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.laedt .lade-punkt { animation-duration: 2s; } }

.sende-fehler {
  background: #FDF3F1; border-left: 3px solid #B02A1C; border-radius: 3px;
  padding: 13px 16px; margin: 0 0 18px; font-size: .92rem; color: #7A1C12;
}
.sende-fehler[hidden] { display: none; }
.sende-fehler a { color: #B02A1C; font-weight: 700; }
.sende-fehler:focus { outline: 3px solid var(--terrakotta); outline-offset: 3px; }

.erfolg { display: none; text-align: center; }
.erfolg.aktiv { display: block; animation: schrittAuf .4s ease both; }
.haken {
  width: 46px; height: 58px; margin: 0 auto 18px;
  background: var(--blatt); color: #FFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; padding-bottom: 12px;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
}
.erfolg h2 { font-size: 1.6rem; margin-bottom: 10px; }
.erfolg p { color: var(--grau); }

/* Die Klammer: dasselbe Pflanzschild, jetzt beschriftet mit den Angaben des Besuchers. */
.schild {
  background: var(--sand); border: 1px solid var(--linie); border-radius: 4px;
  padding: 20px 22px 22px; margin: 24px 0; text-align: left;
  position: relative;
}
.schild::after {
  content: ''; position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
  width: 22px; height: 14px; background: var(--linie);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.schild-kopf {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: 'Spline Sans Mono', monospace; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grau);
  border-bottom: 1px solid var(--linie); padding-bottom: 9px; margin: 0 0 12px;
}
.schild-zeile { display: flex; gap: 14px; padding: 5px 0; }
.schild-zeile .label {
  font-family: 'Spline Sans Mono', monospace; font-size: .7rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--grau); flex: none; width: 62px; padding-top: 3px;
}
.schild-zeile .wert { font-weight: 600; font-size: .97rem; }
.erfolg-demo { font-size: .89rem; background: #FDF6F1; border-left: 3px solid var(--terrakotta); padding: 12px 15px; text-align: left; border-radius: 3px; }
.erfolg-eilig { margin-top: 24px !important; font-weight: 600; color: var(--tinte) !important; }
.erfolg-zurueck { margin-top: 20px !important; font-size: .9rem; }
.erfolg-zurueck a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; }
.anf-fuss {
  text-align: center; font-size: .85rem; color: var(--grau); margin: 26px 0 0; line-height: 1.6;
}
.anf-fuss a { color: var(--terrakotta); }
/* Auf dem Handy ist diese Zeile der einzige Telefonweg der Anfrageseite —
   und eine Fixleiste gibt es hier nicht, also braucht der Fuss keinen Platz. */
.anf-fuss a[href^="tel:"] { display: inline-block; padding: 11px 6px; min-height: 44px; }
.anfrage-body { padding-bottom: 24px !important; }
.anf-fuss-demo { font-size: .78rem; }

/* =========================================================
   Handy
   ========================================================= */
@media (max-width: 980px) {
  .hero-grid, .betrieb-grid, .lage-grid { grid-template-columns: 1fr; gap: 34px; }
  /* Gedreht heisst auf schmal: das Bild gehoert wieder VOR den Text, sonst
     stehen im Solar-Abschnitt zwei Textbloecke ohne Bild dazwischen. */
  .betrieb-grid-gedreht { grid-template-columns: 1fr; }
  .betrieb-grid-gedreht > div:first-child { order: 2; }
  .karten, .ablauf, .bereiche { grid-template-columns: repeat(2, 1fr); }
  .saisons { grid-template-columns: repeat(2, 1fr); }
  .kopf-nav { display: none; }
}

@media (max-width: 700px) {
  body { font-size: 16px; padding-bottom: 76px; }
  .wrap { padding: 0 18px; }
  .hero { padding: 34px 0 40px; }
  .sektion { padding: 54px 0; }
  .abschluss { padding: 60px 0; }
  .karten, .ablauf, .saisons, .bereiche { grid-template-columns: 1fr; }
  .kopf-cta { display: none; }
  .marke-ort { display: none; }
  .hero-aktionen { gap: 14px; }
  .hero-aktionen .btn { width: 100%; justify-content: center; }
  .lage-liste li { flex-direction: column; gap: 3px; }
  .lage-liste .k { width: auto; }
  .karten-rahmen iframe { height: 300px; }
  .anf-box { padding: 22px 18px 26px; }
  /* Auf dem Handy ist in der Kopfzeile Platz für genau EINE Sache neben der
     Marke. Das ist die Nummer, nicht der Rückweg: Wer mitten im Ausfüllen
     lieber anruft, darf dafür nicht ans Seitenende scrollen müssen — und
     zurück führt das Firmenzeichen links ohnehin. */
  .anf-zurueck { display: none; }
  .anf-tel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: .9rem; }
  .anf-kopf { padding: 12px 18px 4px; }
  /* Auf 390 px stehen Zeichen, Name und Nummer nebeneinander. Das Zeichen
     ist fast quadratisch, kostet also nur rund 46 px Breite — der Name
     bekommt den frei gewordenen Platz und rueckt eine Spur enger. */
  .marke-logo { height: 42px; }
  .marke-name { font-size: .92rem; }
  .marke { gap: 9px; }
}

/* Sehr schmale Geraete (iPhone SE und aelter, 320 px). Zeichen, Name und
   Nummer zusammen brauchen dort 335 px — 15 zu viel, und die Nummer klebte
   mit 2 px am rechten Rand. Der Abstand zwischen Marke und rechter Gruppe
   traegt den Verzicht besser als die Schrift: 10 statt 22 px, und der Name
   eine Spur kleiner. Damit stehen links und rechts wieder dieselben 18 px. */
@media (max-width: 360px) {
  .kopf-inner { gap: 10px; }
  .marke-name { font-size: .86rem; }
  .kopf-tel { font-size: .82rem; }
  /* Die Anfrageseite hat ihre eigene Kopfzeile mit .anf-tel — und die wird
     unter 700 px sogar VERGROESSERT. Ohne diese Zeile brach die Nummer dort
     bei 320 px auf zwei Zeilen um («076 563 87» / «38»), ausgerechnet auf der
     Seite, die den Abschluss traegt. */
  .anf-kopf-rechts { gap: 8px; }
  .anf-tel { font-size: .82rem; }
  .optionen.zwei { grid-template-columns: 1fr; }
  .frage { font-size: 1.3rem; }
  /* Zwölf Monatsnamen passen auf 390px nicht nebeneinander — die Balken
     schon, und die tragen die Aussage. Beschriftet werden die Ecken. */
  .jahr-band { gap: 3px; }
  /* Zwölf Kürzel nebeneinander wären auf 390px 9px klein — lesbar bleibt nur,
     wer die Ecken beschriftet. Die übrigen halten ihren Platz. */
  .monat .mk { font-size: .66rem; letter-spacing: 0; visibility: hidden; }
  .monat:nth-child(1) .mk, .monat:nth-child(4) .mk, .monat:nth-child(7) .mk,
  .monat:nth-child(10) .mk, .monat:nth-child(12) .mk { visibility: visible; }
  /* Der markierte Balken darf nie namenlos dastehen — sonst schwebt ein
     farbiger Strich ohne Monat zwischen zwei beschrifteten Ecken. */
  .monat.jetzt .mk { visibility: visible; }
  .s-winter .bal { height: 20px } .s-fruehling .bal { height: 40px }
  .s-sommer .bal { height: 56px } .s-herbst .bal { height: 35px }
  .fuss-inner { flex-direction: column; gap: 22px; }

  /* Solange der Hero-Knopf im Bild ist, wären zwei Knöpfe für dieselbe Aktion
     im selben Blickfeld — die Leiste kommt erst, wenn er weg ist. */
  .handy-leiste {
    display: flex; gap: 10px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: rgba(35,32,26,.97); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(110%); transition: transform .25s ease;
  }
  body.leiste-zeigen .handy-leiste { transform: none; }
  .handy-leiste .btn { flex: 1; justify-content: center; padding: 13px 12px; font-size: .95rem; }
  .handy-leiste .btn-primar { background: var(--terrakotta-hell); color: #2A1509; flex: 1.5; }
  .handy-leiste .btn-linie { color: var(--sand); border-color: rgba(241,237,226,.5); }
}

/* ---------- Rechtsseiten (Impressum, Datenschutz) ----------
   Bewusst schmal und ruhig: Diese Seiten werden gelesen, nicht überflogen.
   Kein Reveal, keine Bewegung — hier will niemand geführt werden. */
.recht-main { background: var(--panel); border-bottom: 1px solid var(--linie); }
.recht-inner { max-width: 760px; margin: 0 auto; padding-top: 58px; padding-bottom: 74px; }
.recht-inner h1 { margin-bottom: 14px; font-size: clamp(2rem, 4.6vw, 2.9rem); }
.recht-inner h2 {
  font-size: 1.16rem; margin: 38px 0 10px; padding-top: 16px;
  border-top: 1px solid var(--linie);
}
.recht-inner h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 30px; }
.recht-inner p { max-width: 66ch; }
/* :not(.btn) ist Pflicht, nicht Zierde: Diese Regel hat 0,2,0 und sticht das
   .btn-primar mit 0,1,0 — ohne die Ausnahme stuende der Hauptknopf der
   404-Seite in Terrakotta auf Terrakotta, also unsichtbar. */
.recht-inner a:not(.btn) { color: var(--terrakotta); }
.recht-vorspann { font-size: 1.1rem; color: var(--grau); max-width: 58ch; margin-bottom: 6px; }
.recht-adresse {
  font-style: normal; line-height: 1.75; margin: 0 0 6px;
  padding: 18px 22px; background: var(--weiss);
  border-left: 3px solid var(--blatt); border-radius: 0 var(--r) var(--r) 0;
  /* Fuenf kurze Zeilen ueber die volle Spaltenbreite waeren ein Balken, kein
     Kasten — die Karte soll nur so breit sein wie ihr laengster Eintrag. */
  width: fit-content; max-width: 100%;
}
.recht-adresse strong { font-family: 'Archivo', sans-serif; }
.recht-stand {
  font-family: 'Spline Sans Mono', monospace; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--grau);
  margin-top: 30px;
}
.recht-zurueck { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--linie); }
.recht-zurueck a { text-decoration: none; font-weight: 600; }
.recht-zurueck a:hover { text-decoration: underline; }

/* Die zwei Pflichtlinks in der Fusszeile — auf allen Seiten gleich.
   Bewusst leise: sie sollen auffindbar sein, nicht um Aufmerksamkeit
   konkurrieren mit dem Weg zur Offerte. Auf dem Handy sind es trotzdem echte
   Tap-Ziele (44px), wie ueberall sonst auf der Seite. */
.fuss-recht { display: block; margin-top: 8px; }
.fuss-recht a {
  display: inline-block; margin-right: 22px; padding: 11px 0;
  min-height: 44px; text-decoration: none;
}
.fuss-recht a:hover { color: #E4DFD1; text-decoration: underline; }
.anf-fuss-recht { display: block; margin-top: 4px; font-size: .78rem; }
.anf-fuss-recht a { display: inline-block; margin: 0 9px; padding: 11px 4px; min-height: 44px; }

@media (max-width: 720px) {
  .recht-inner { padding-top: 38px; padding-bottom: 54px; }
  .recht-inner h2 { margin-top: 30px; }
}
/* Die 76px Platzreserve am Seitenende gelten der festen Handy-Leiste. Die
   Rechtsseiten haben keine — dort bliebe sonst ein toter Streifen unter der
   Fusszeile stehen. */
@media (max-width: 700px) {
  body.seite-recht { padding-bottom: 0; }
}