/* =========================================================================
   Himmelstoß Garden · Konzeptentwurf SZ Websites
   Richtung A "Die Werkakte". Eine Schrift (Archivo 400/600), Grundgröße 17px.
   Die Seite ist bewusst auf einen hellen Modus festgelegt.
   ========================================================================= */

:root{
  color-scheme: light;

  --tinte:        #191C1A;
  --gruen:        #2E4A34;
  --gruen-dunkel: #233A29;
  --lehm:         #D8C7A8;
  --lehm-hell:    #EDE5D4;
  --papier:       #F7F5F0;
  --weiss:        #FFFFFF;
  --grau:         #4A4F49;
  --linie:        #D7D3C8;
  --linie-stark:  #B4AE9E;
  --rot:          #A32A16;

  --bahn:   1180px;
  --radius: 2px;

  --raum-1: 8px;  --raum-2: 14px; --raum-3: 22px;
  --raum-4: 34px; --raum-5: 56px; --raum-6: 88px;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:16px }
@media (min-width:1140px){ html{ scroll-padding-top:92px } }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  padding-bottom:86px;            /* Platz fuer den festen Anrufbalken */
  background:var(--papier);
  color:var(--tinte);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-weight:600; letter-spacing:-.018em; line-height:1.12; margin:0 }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
img{ display:block; max-width:100% }
a{ color:inherit }

.bahn{ max-width:var(--bahn); margin-inline:auto; padding-inline:20px }
@media (min-width:900px){ .bahn{ padding-inline:40px } }

.sprung{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gruen); color:var(--weiss);
  padding:14px 20px; font-weight:600; text-decoration:none;
}
.sprung:focus{ left:0 }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--gruen);
  outline-offset:2px;
}

/* ---------------------------------------------------------------- Lilie -- */
.signet     { width:26px; height:36px; fill:var(--gruen); flex:0 0 auto; margin-top:4px }
.punkt      { width:13px; height:18px; fill:var(--gruen); flex:0 0 auto;
              margin-right:10px; vertical-align:-3px; display:inline-block }
.fuss__logo { width:196px; height:auto; border-radius:8px; display:block; margin-bottom:16px }

/* ------------------------------------------------------------ Navigation -- */
/* Auf dem Handy scrollt der Kopf mit weg, der Anruf sitzt unten im festen
   Balken. Ab 1000 px klebt der Kopf oben und traegt die Nummer selbst. */
.kopf{
  background:var(--papier);
  border-bottom:1px solid var(--linie);
}
.kopf__innen{
  max-width:var(--bahn); margin-inline:auto; padding:0 20px;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  column-gap:14px; row-gap:0; min-height:64px;
}
.marke{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; padding:12px 0; min-height:44px;
}
/* Im Kopf steht das Signet aus dem Logo neben dem gesetzten Namen. Der volle
   Schriftzug wäre in Kopfhöhe zu klein zum Lesen, er steht dafür im Fuß. */
.marke__signet{ display:block; width:34px; height:34px; border-radius:6px; flex:0 0 auto }
.marke__text{ font-weight:600; font-size:19px; letter-spacing:-.02em; line-height:1.15 }
.marke__text span{ color:var(--gruen) }

.nav{ grid-column:1 / -1; border-top:1px solid var(--linie); margin-inline:-20px }
.nav ul{ display:flex; flex-wrap:wrap; padding-inline:20px }
.nav a{
  display:block; white-space:nowrap; text-decoration:none;
  padding:11px 22px 11px 0; font-size:17px; color:var(--grau);
  min-height:44px;
}
.nav a:hover{ color:var(--gruen) }

.kopf__tel{
  display:none;                    /* auf dem Handy uebernimmt der Rufbalken */
  grid-row:1; grid-column:2;
  flex-direction:column; text-decoration:none;
  background:var(--gruen); color:var(--weiss);
  padding:9px 16px; border-radius:var(--radius); min-height:44px;
  justify-content:center;
}
.kopf__tel-label{ font-size:17px; font-weight:600; line-height:1.2 }
.kopf__tel .luecke{ font-size:17px }
.kopf__tel:hover{ background:var(--gruen-dunkel) }

@media (min-width:1140px){
  body{ padding-bottom:0 }
  .kopf{ position:sticky; top:0; z-index:50 }
  .kopf__innen{ grid-template-columns:auto 1fr auto; min-height:76px; padding-inline:40px }
  .nav{ grid-column:auto; border-top:0; margin-inline:0; justify-self:end }
  .nav ul{ flex-wrap:nowrap; padding-inline:0 }
  .nav a{ padding:12px 12px }
  .kopf__tel{
    display:flex; grid-row:auto; grid-column:auto;
    flex-direction:row; align-items:center; gap:8px;
  }
}

/* ----------------------------------------------------------- Rufbalken -- */
/* Die beiden Knoepfe schweben ohne Leiste ueber dem Inhalt. Der Traeger
   selbst nimmt deshalb keine Klicks an, sonst waere der Streifen neben und
   zwischen den Knoepfen eine unsichtbare Sperre fuer Scrollen und Tippen. */
.rufbalken{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns:1.55fr 1fr; gap:10px;
  padding:0 14px calc(14px + env(safe-area-inset-bottom, 0px));
  pointer-events:none;
}
.rufbalken > *{ pointer-events:auto }
.rufbalken .luecke{ font-size:17px }
@media (min-width:1140px){ .rufbalken{ display:none } }

/* --------------------------------------------------------------- Knopf --
   Vorlage: Uiverse.io von Allyhere. Mechanik unveraendert: wandernder
   Verlauf beim Hover, Innenkanten oben hell und unten dunkel, eigener
   Fokusring.

   Angepasst wurden die Farben auf die Palette der Seite. Die Originalwerte
   der Vorlage stehen hier, falls sie zurueck sollen:
     --btn-bg-1: hsla(194 100% 69% / 1);
     --btn-bg-2: hsla(217 100% 56% / 1);
     box-shadow: 0 0 20px rgba(71,184,255,.5), 0 5px 5px -1px rgba(58,125,233,.25),
                 inset 4px 4px 8px rgba(175,230,255,.5),
                 inset -4px -4px 8px rgba(19,95,216,.35);
   Weiss auf dem hellen Verlaufsende ergab damit 1,6:1. Mit den Werten
   unten sind es 6,4:1 in der Mitte und 12,8:1 an den Enden, der Knopf
   erfuellt also WCAG AA an jeder Stelle.

   Ausserdem: Schriftgroesse 17 px (die Seite geht nirgends darunter),
   Schriftschnitt 600 (nur Archivo 400 und 600 sind geladen) und
   Flex-Zentrierung, weil die Knoepfe hier Links sind und keine <button>.
   ----------------------------------------------------------------------- */
.btn-donate {
  --btn-bg-1: hsl(140 24% 33%);          /* helles Werkgruen, Mitte des Verlaufs */
  --btn-bg-2: hsl(140 30% 17%);          /* tiefes Werkgruen, beide Enden */
  --btn-bg-color: hsl(0 0% 100%);
  --radii: 0.5em;
  cursor: pointer;
  padding: 0.9em 1.4em;
  min-width: 120px;
  min-height: 44px;
  font-size: var(--size, 1rem);
  font-weight: 500;
  transition: 0.8s;
  background-size: 280% auto;
  background-image: linear-gradient(
    325deg,
    var(--btn-bg-2) 0%,
    var(--btn-bg-1) 55%,
    var(--btn-bg-2) 90%
  );
  border: none;
  border-radius: var(--radii);
  color: var(--btn-bg-color);
  box-shadow:
    0px 0px 18px rgba(46, 74, 52, 0.30),
    0px 5px 5px -1px rgba(25, 28, 26, 0.28),
    inset 4px 4px 8px rgba(228, 222, 204, 0.30),
    inset -4px -4px 8px rgba(14, 28, 18, 0.45);
}

.btn-donate:hover {
  background-position: right top;
}

.btn-donate:is(:focus, :focus-visible, :active) {
  outline: none;
  box-shadow:
    0 0 0 3px var(--papier),
    0 0 0 6px var(--gruen);
}

@media (prefers-reduced-motion: reduce) {
  .btn-donate {
    transition: linear;
  }
}

/* Anpassungen fuer den Einsatz als Link im Rufbalken */
.rufbalken .btn-donate{
  --size: 1.0625rem;                 /* 17 px */
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:600; text-decoration:none; text-align:center;
  min-width:0;
}

/* -------------------------------------------------------------- Lücken --- */
.luecke{
  background:var(--lehm); color:var(--tinte);
  padding:1px .4em; font-weight:600;
  border-bottom:2px dotted #83795F;
  white-space:nowrap;
}
.luecke--auf-gruen{
  background:rgba(255,255,255,.20); color:var(--weiss);
  border-bottom-color:rgba(255,255,255,.75);
}
.luecke--dunkel{
  background:rgba(255,255,255,.14); color:#F0EEE8;
  border-bottom-color:rgba(255,255,255,.5);
}

/* -------------------------------------------------------------- Tasten --- */
.taste{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:13px 24px;
  font-size:18px; font-weight:600; line-height:1.25;
  text-decoration:none; border-radius:var(--radius);
  border:2px solid transparent; cursor:pointer;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease, transform .08s ease;
}
.taste--voll { background:var(--gruen); color:var(--weiss); border-color:var(--gruen) }
.taste--voll:hover{ background:var(--gruen-dunkel); border-color:var(--gruen-dunkel) }
.taste--linie{ background:transparent; color:var(--tinte); border-color:var(--tinte) }
.taste--linie:hover{ background:var(--tinte); color:var(--papier) }
.taste--hell { background:var(--weiss); color:var(--gruen); border-color:var(--weiss) }
.taste--hell:hover{ background:var(--lehm); border-color:var(--lehm); color:var(--tinte) }
.taste--breit{ width:100%; font-family:inherit }
.taste:active{ transform:translateY(1px) }
@media (prefers-reduced-motion: reduce){ .taste{ transition:none } .taste:active{ transform:none } }

.text-link{
  display:inline-block; margin-top:var(--raum-3);
  font-weight:600; color:var(--gruen);
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:2px; min-height:44px; padding-block:8px;
}
.text-link:hover{ color:var(--gruen-dunkel) }

/* ---------------------------------------------------------- Bildplätze --- */
.bildplatz{
  margin:0; position:relative; overflow:hidden;
  background:var(--lehm-hell);
  border-radius:var(--radius);
}
.bildplatz img{ width:100%; height:100%; object-fit:cover }
.bildplatz.leer{
  border:1px dashed var(--linie-stark);
  display:grid; place-items:center; text-align:center; padding:20px;
}
.bildplatz.leer img{ display:none }
.bildplatz.leer::after{
  content:"Bild folgt \A" attr(data-soll);
  white-space:pre-line;
  font-size:17px; line-height:1.5; color:#6B6248; font-weight:600;
}
.bildplatz--hero    { aspect-ratio:4/5 }
.bildplatz--band    { aspect-ratio:8/5 }
.bildplatz--portraet{ aspect-ratio:4/5 }

/* ---------------------------------------------------------------- Hero --- */
.hero{ padding:var(--raum-5) 0 var(--raum-5) }
.hero__innen{
  max-width:var(--bahn); margin-inline:auto; padding-inline:20px;
  display:grid; gap:var(--raum-4);
}
.hero h1{
  font-size:clamp(30px,7.4vw,50px);
  line-height:1.08;
  max-width:19ch;
  margin-bottom:var(--raum-3);
}
.hero__lead{
  font-size:20px; line-height:1.55; color:var(--grau);
  max-width:48ch; margin-bottom:var(--raum-4);
}
.hero__tasten{ display:flex; flex-wrap:wrap; gap:12px }

@media (min-width:900px){
  .hero{ padding:var(--raum-6) 0 }
  .hero__innen{
    grid-template-columns:1.12fr .88fr;
    align-items:center; gap:var(--raum-6); padding-inline:40px;
  }
  .hero h1{ font-size:clamp(38px,4.3vw,52px) }
}

/* ------------------------------------------------------------ Abschnitt --- */
.abschnitt{ padding:var(--raum-5) 0 }
@media (min-width:900px){ .abschnitt{ padding:var(--raum-6) 0 } }

.abschnitt__kopf{ margin-bottom:var(--raum-4); max-width:62ch }
.abschnitt__kopf h2{ font-size:clamp(27px,5vw,38px); margin-bottom:var(--raum-2) }
.abschnitt__kopf p{ font-size:19px; color:var(--grau) }

/* ------------------------------------------------------ Leistungsblatt --- */
.blatt{ border-top:3px solid var(--tinte); padding-top:var(--raum-3); margin-top:var(--raum-5) }
.blatt:first-of-type{ margin-top:0 }

.blatt__kopf{ display:flex; gap:14px; margin-bottom:var(--raum-3) }
.blatt__kopf h3{ font-size:clamp(23px,4vw,29px); margin-bottom:6px }
.blatt__ein{ font-size:19px; color:var(--grau); max-width:56ch }

.posten li{
  border-top:1px solid var(--linie);
  padding:var(--raum-3) 0;
  display:grid; gap:var(--raum-2);
}
.posten li > *{ min-width:0 }
.posten h4{ font-size:20px; margin-bottom:6px }
.posten__haupt p{ color:var(--grau); max-width:60ch }

.posten__daten{ margin:0; display:grid; gap:var(--raum-1) }
.posten__daten div{ display:grid; grid-template-columns:104px 1fr; gap:10px; align-items:baseline }
.posten__daten dt{
  font-size:17px; color:var(--grau); margin:0;
}
.posten__daten dd{ margin:0; font-size:17px }
.preis{ font-weight:600; font-size:19px }
.preis span{ display:block; font-weight:400; font-size:17px; color:var(--grau) }

@media (min-width:820px){
  .posten li{ grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); gap:var(--raum-4) }
  .posten__daten div{ grid-template-columns:1fr; gap:2px; text-align:right }
  .posten__daten{ gap:var(--raum-2) }
}

/* -------------------------------------------------------------- Bildband -- */
.bildband{
  display:grid; gap:4px; padding:0 0 var(--raum-5);
}
@media (min-width:820px){ .bildband{ grid-template-columns:1fr 1fr; gap:6px } }

/* ------------------------------------------------------------ Winterdienst */
.winter{ background:var(--lehm); padding:var(--raum-5) 0 }
@media (min-width:900px){ .winter{ padding:var(--raum-6) 0 } }
.abschnitt__kopf--winter p{ color:#4A422F }

.jahr{
  display:grid; grid-template-columns:repeat(6,1fr); gap:4px;
  margin-bottom:var(--raum-2);
}
.jahr li{
  background:var(--gruen); color:var(--weiss);
  font-size:17px; font-weight:600; text-align:center;
  padding:11px 2px; border-radius:var(--radius);
}
.jahr .jahr--aus{
  background:transparent; color:#5C543E; font-weight:400;
  border:1px solid #B8A985;
  padding:10px 2px;
}
.jahr__bild{ font-size:17px; color:#4A422F; margin-bottom:var(--raum-5) }
@media (min-width:760px){ .jahr{ grid-template-columns:repeat(12,1fr) } }

.winter__spalten{ display:grid; gap:var(--raum-4) }
@media (min-width:820px){ .winter__spalten{ grid-template-columns:1fr 1fr; gap:var(--raum-5) } }
.winter__block h3{ font-size:22px; margin-bottom:var(--raum-2); display:flex; align-items:baseline }
.winter__block p{ margin-bottom:var(--raum-2); max-width:60ch }
.winter__block p:last-child{ margin-bottom:0 }

.strich li{
  padding:10px 0 10px 0; border-top:1px solid #C0B091;
  max-width:60ch;
}
.strich li:first-child{ border-top:0; padding-top:0 }

.winter__preis{
  margin-top:var(--raum-5); background:var(--papier);
  padding:var(--raum-4); border-radius:var(--radius);
  display:grid; gap:var(--raum-4);
}
.winter__preis-label{ font-size:17px; color:var(--grau); margin-bottom:4px }
.winter__preis-zahl { font-size:clamp(24px,4.6vw,32px); font-weight:600; letter-spacing:-.02em; margin-bottom:8px }
.winter__preis-zusatz{ color:var(--grau); max-width:44ch }
@media (min-width:820px){
  .winter__preis{ grid-template-columns:1fr 1fr auto; align-items:end; gap:var(--raum-5) }
}

/* ---------------------------------------------------------------- Inhaber */
.inhaber{ background:var(--weiss) }
.inhaber__innen{ display:grid; gap:var(--raum-4) }
.inhaber__text h2{ font-size:clamp(27px,5vw,38px); margin-bottom:var(--raum-3) }
.inhaber__text p{ font-size:19px; margin-bottom:var(--raum-3); max-width:60ch }
@media (min-width:820px){
  .inhaber__innen{ grid-template-columns:.8fr 1.2fr; gap:var(--raum-6); align-items:start }
}

/* ------------------------------------------------------- Vorher / Nachher */
.vergleich__reihe{ margin-bottom:var(--raum-5) }
.vergleich__reihe:last-child{ margin-bottom:0 }
.vergleich__bu{ margin-top:var(--raum-2); font-size:17px; color:var(--grau); max-width:62ch }

.vgl{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius); background:var(--lehm-hell);
  --pos:50%;
}
.vgl__unten{ position:absolute; inset:0; border-radius:0 }
.vgl__oben{
  position:absolute; inset:0;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.vgl__oben .bildplatz{ position:absolute; inset:0; border-radius:0 }
.vgl__regler{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  appearance:none; -webkit-appearance:none;
  background:transparent; cursor:ew-resize;
}
.vgl__regler::-webkit-slider-thumb{
  -webkit-appearance:none; width:48px; height:48px; opacity:0; cursor:ew-resize;
}
.vgl__regler::-moz-range-thumb{ width:48px; height:48px; opacity:0; border:0; cursor:ew-resize }
.vgl__kante{
  position:absolute; top:0; bottom:0; left:var(--pos);
  width:3px; background:var(--weiss); transform:translateX(-1.5px);
  box-shadow:0 0 0 1px rgba(25,28,26,.35);
  pointer-events:none;
}
.vgl__kante::after{
  content:""; position:absolute; top:50%; left:50%;
  width:46px; height:46px; transform:translate(-50%,-50%);
  background:var(--weiss); border-radius:50%;
  box-shadow:0 0 0 1px rgba(25,28,26,.35), 0 2px 8px rgba(25,28,26,.25);
}
.vgl__regler:focus-visible ~ .vgl__kante::after{
  box-shadow:0 0 0 3px var(--gruen), 0 0 0 6px var(--weiss);
}
/* Im Vergleich stehen zwei Platzhalter uebereinander. Damit sich ihre
   Beschriftungen nicht ueberlagern, sitzt die eine unten links, die
   andere unten rechts. */
.vgl .bildplatz.leer{ align-items:end; padding-bottom:18px }
.vgl__oben  .bildplatz.leer{ justify-items:start; text-align:left }
.vgl__unten.leer           { justify-items:end;   text-align:right }
.vgl .bildplatz.leer::after{ max-width:46% }

.vgl__marke{
  position:absolute; top:14px; z-index:2;
  background:rgba(25,28,26,.82); color:var(--weiss);
  font-size:17px; font-weight:600; padding:6px 12px;
  border-radius:var(--radius); pointer-events:none;
}
.vgl__marke--links { left:14px }
.vgl__marke--rechts{ right:14px }

/* ----------------------------------------------------------------- Warum */
.warum{ background:var(--weiss) }
.pruefliste{ margin:0; display:grid; gap:0 }
.pruefliste > div{ border-top:1px solid var(--linie); padding:var(--raum-3) 0 }
.pruefliste dt{ font-size:20px; font-weight:600; margin-bottom:6px; display:flex; align-items:baseline }
.pruefliste dd{ margin:0; color:var(--grau); max-width:58ch }
@media (min-width:820px){
  .pruefliste{ grid-template-columns:1fr 1fr; column-gap:var(--raum-5) }
}

/* ------------------------------------------------------------- Gebiet --- */
.gebiet__gitter{ display:grid; gap:var(--raum-4) }
.gebiet__block h3{ font-size:22px; margin-bottom:var(--raum-2) }
.orte{ font-size:19px; line-height:1.75; max-width:62ch }
.orte--gross{ font-size:22px; font-weight:600; line-height:1.6 }
.gebiet__zusatz{ margin-top:var(--raum-3); color:var(--grau); max-width:52ch }
@media (min-width:820px){
  .gebiet__gitter{ grid-template-columns:1.5fr 1fr; gap:var(--raum-6) }
}

/* ------------------------------------------------------------ Kontakt --- */
.kontakt{ background:var(--tinte); color:var(--papier); padding:var(--raum-5) 0 }
@media (min-width:900px){ .kontakt{ padding:var(--raum-6) 0 } }
.kontakt__innen{ display:grid; gap:var(--raum-5) }
.kontakt__innen > *{ min-width:0 }
@media (min-width:900px){
  .kontakt__innen{ grid-template-columns:.95fr 1.05fr; gap:var(--raum-6); align-items:start }
}
.kontakt__direkt h2{ font-size:clamp(27px,5vw,38px); margin-bottom:var(--raum-2) }
.kontakt__ein{ font-size:19px; color:#C9CBC6; margin-bottom:var(--raum-4); max-width:44ch }

.tel-gross{
  display:block; text-decoration:none;
  background:var(--gruen); color:var(--weiss);
  padding:var(--raum-3); border-radius:var(--radius);
  margin-bottom:var(--raum-2);
}
.tel-gross:hover{ background:var(--gruen-dunkel) }
.tel-gross__label{ display:block; font-size:17px; color:#C6D5C8; margin-bottom:6px }
.tel-gross__zahl{
  display:inline-block; font-size:clamp(22px,5.2vw,34px);
  font-weight:600; letter-spacing:-.02em;
  white-space:normal;              /* der Platzhaltertext darf umbrechen */
  overflow-wrap:break-word;
}
.kontakt__zeiten{ color:#C9CBC6; margin-bottom:var(--raum-4) }
.kontakt__hinweis{ margin-top:var(--raum-2); color:#C9CBC6; max-width:44ch }

.formular{
  background:var(--weiss); color:var(--tinte);
  padding:var(--raum-4) var(--raum-3);
  border-radius:var(--radius);
}
@media (min-width:600px){ .formular{ padding:var(--raum-4) } }
.formular__ein{ color:var(--grau); margin-bottom:var(--raum-4) }
.formular__fuss{ margin-top:var(--raum-3); font-size:17px; color:var(--grau) }

.feld{ margin-bottom:var(--raum-3) }
.feld label{ display:block; font-weight:600; font-size:17px; margin-bottom:7px }
.feld abbr{ color:var(--rot); text-decoration:none; border:0 }
.feld input[type=text],
.feld input[type=tel],
.feld select,
.feld textarea{
  width:100%; font-family:inherit; font-size:17px; line-height:1.5;
  padding:13px 14px; color:var(--tinte); background:var(--weiss);
  border:1px solid #8E897C; border-radius:var(--radius);
  min-height:52px;
}
.feld textarea{ resize:vertical }
.feld select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23191C1A' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:44px;
}
.hilfe{ margin-top:6px; font-size:17px; color:var(--grau) }
.fehler{ margin-top:7px; font-size:17px; font-weight:600; color:var(--rot) }
.feld.hat-fehler input,
.feld.hat-fehler select,
.feld.hat-fehler textarea{ border:2px solid var(--rot) }

.pruef{ display:flex; gap:12px; align-items:flex-start; font-weight:400 !important }
.pruef input{ width:26px; height:26px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--gruen) }
.pruef span{ font-size:17px }
.pruef a{ color:var(--gruen); font-weight:600; text-underline-offset:3px }

.honig{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.sammelfehler{
  border-left:4px solid var(--rot); background:#FBF0ED;
  padding:var(--raum-3); margin-bottom:var(--raum-3);
}
.sammelfehler__titel{ font-weight:600; color:var(--rot); margin-bottom:8px }
.sammelfehler ul{ list-style:disc; padding-left:22px }
.sammelfehler li{ margin-bottom:4px }
.sammelfehler a{ color:var(--rot); font-weight:600 }

/* --------------------------------------------------------------- Fuß ---- */
.fuss{ background:var(--tinte); color:#C9CBC6; padding-top:var(--raum-5); border-top:1px solid #333934 }
.fuss__innen{ display:grid; gap:var(--raum-4); padding-bottom:var(--raum-4) }
.fuss__zeile{ max-width:36ch }
.fuss__spalte h2{ font-size:17px; font-weight:600; color:var(--papier); margin-bottom:12px }
.fuss__spalte p{ margin-bottom:12px }
.fuss__spalte a{ text-decoration:underline; text-underline-offset:3px }
.fuss__spalte p a{ display:inline-block; padding-block:9px }
.fuss__spalte li a{ display:inline-block; padding:9px 0; min-height:44px }
.fuss__spalte a:hover{ color:var(--weiss) }
@media (min-width:820px){
  .fuss__innen{ grid-template-columns:1.4fr 1fr 1fr; gap:var(--raum-5) }
}
.fuss__entwurf{
  border-top:1px solid #333934; margin-top:0;
  padding-bottom:calc(var(--raum-3) + 4px);
  padding:var(--raum-3) 20px; text-align:center;
  font-size:17px; color:#8A8F89;
}

/* ------------------------------------------------------------- Drucken -- */
@media print{
  .kopf,.hero__tasten,.vgl__regler,.vgl__kante,.taste,.sprung,.bildband,.rufbalken{ display:none !important }
  body{ padding-bottom:0 }
  body{ background:#fff; color:#000; font-size:11pt }
  .winter,.inhaber,.warum{ background:#fff }
  .kontakt,.fuss{ background:#fff; color:#000 }
  .formular{ border:1px solid #000 }
  .tel-gross{ background:#fff; color:#000; border:2px solid #000 }
  .tel-gross__label,.kontakt__ein,.kontakt__zeiten,.kontakt__hinweis{ color:#000 }
  .bildplatz{ border:1px solid #999 }
  .abschnitt,.winter,.kontakt{ padding:18pt 0 }
  .blatt{ break-inside:avoid }
  .posten li{ break-inside:avoid }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt }
}

/* ------------------------------------------------------- Rechtstexte ---- */
.rechtstext{
  padding-block:var(--raum-5) var(--raum-6);
  max-width:780px;
}
.rechtstext h1{ font-size:clamp(28px,5vw,40px); margin-bottom:var(--raum-3) }
.rechtstext h2{ font-size:23px; margin:var(--raum-4) 0 var(--raum-2) }
.rechtstext h3{ font-size:20px; margin:var(--raum-3) 0 var(--raum-1) }
.rechtstext p{ margin-bottom:var(--raum-2); max-width:66ch }
.rechtstext .taste{ margin-top:var(--raum-3) }
.rechtstext .zurueck{
  display:inline-block; margin-bottom:var(--raum-4);
  font-weight:600; color:var(--gruen);
  text-decoration:underline; text-underline-offset:4px;
  padding-block:10px; min-height:44px;
}
.liste{ list-style:disc; padding-left:24px; margin-bottom:var(--raum-2); max-width:66ch }
.liste li{ margin-bottom:6px }


/* =========================================================================
   Ab hier: Bausteine der Unterseiten
   ========================================================================= */

/* --------------------------------------------------------- Seitenkopf --- */
.seitenkopf{ padding:var(--raum-5) 0 var(--raum-4); border-bottom:1px solid var(--linie) }
@media (min-width:900px){ .seitenkopf{ padding:var(--raum-6) 0 var(--raum-5) } }
.seitenkopf h1{ font-size:clamp(30px,5.6vw,46px); max-width:21ch; margin-bottom:var(--raum-3) }
.seitenkopf__lead{ font-size:20px; line-height:1.55; color:var(--grau); max-width:62ch }
.seitenkopf--winter{ background:var(--lehm); border-bottom:0 }
.seitenkopf--winter .seitenkopf__lead{ color:#4A422F }
.seitenkopf--winter + .winter{ padding-top:0 }

/* Ohne Blattkopf traegt die H1 den Spartennamen, dann faellt die erste
   Trennlinie der Postenliste weg. */
.blatt > .posten:first-child > li:first-child{ border-top:0; padding-top:0 }

/* ------------------------------------------------- Navigation, aktiv ---- */
.nav a[aria-current="page"]{
  color:var(--tinte); font-weight:600;
  box-shadow:inset 0 -3px 0 var(--gruen);
}

/* ------------------------------------------------- Kurzblatt (Start) ---- */
.blatt__kopf h3 a{
  color:var(--gruen); text-decoration:underline;
  text-underline-offset:5px; text-decoration-thickness:2px;
}
.blatt__kopf h3 a:hover{ color:var(--gruen-dunkel) }
.posten--kurz li{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:2px 24px; padding:15px 0;
}
.posten__kurzname { font-size:18px; font-weight:600 }
.posten__kurzpreis{ font-size:17px; color:var(--grau) }
.blatt .text-link{ margin-top:var(--raum-2) }

/* ------------------------------------------------------- Einzelbilder --- */
.bildband--eins{ grid-template-columns:1fr }
@media (min-width:820px){ .bildband--eins{ grid-template-columns:1fr } }

/* -------------------------------------------- Absatz fuer Verwaltungen -- */
.verwaltung{ background:var(--weiss) }
.verwaltung h2{ font-size:clamp(25px,4.4vw,32px); margin-bottom:var(--raum-3); max-width:22ch }
.verwaltung p{ font-size:19px; margin-bottom:var(--raum-3); max-width:62ch }
.verwaltung p:last-child{ margin-bottom:0 }

/* ---------------------------------------------------- Querverweise ------ */
.verweis h2{ font-size:23px; margin-bottom:var(--raum-2) }
.verweis__liste{ display:grid }
@media (min-width:820px){ .verweis__liste{ grid-template-columns:1fr 1fr; column-gap:var(--raum-5) } }
.verweis__liste li{ border-top:1px solid var(--linie) }
.verweis__liste a{ display:block; padding:var(--raum-3) 0; text-decoration:none }
.verweis__titel{
  display:block; font-size:20px; font-weight:600; margin-bottom:5px;
  color:var(--gruen); text-decoration:underline;
  text-underline-offset:5px; text-decoration-thickness:2px;
}
.verweis__titel .punkt{ margin-right:9px }
.verweis__text{ display:block; color:var(--grau); max-width:52ch }
.verweis__liste a:hover .verweis__titel{ color:var(--gruen-dunkel) }

/* --------------------------------------------------- Kontaktband -------- */
.kontaktband{ background:var(--tinte); color:var(--papier); padding:var(--raum-5) 0 }
@media (min-width:900px){ .kontaktband{ padding:var(--raum-6) 0 } }
.kontaktband__innen{ display:grid; gap:var(--raum-4) }
.kontaktband__innen > *{ min-width:0 }
@media (min-width:820px){
  .kontaktband__innen{ grid-template-columns:1.05fr .95fr; gap:var(--raum-6); align-items:center }
}
.kontaktband__text h2{ font-size:clamp(27px,5vw,36px); margin-bottom:var(--raum-2) }
.kontaktband__text p{ color:#C9CBC6; max-width:48ch; margin-bottom:var(--raum-2) }
.kontaktband__zeiten{ margin-bottom:0 }
.kontaktband__wege{ display:grid; gap:12px }
.kontaktband .tel-gross{ margin-bottom:0 }

@media print{
  .kontaktband{ background:#fff; color:#000 }
  .kontaktband__text p{ color:#000 }
  .seitenkopf--winter{ background:#fff }
}