/* ===================================================================
   Gartengestaltung Kurt Kamper - Stil
   ===================================================================

   Aufbau:
    1  Farben, Schrift, Grundwerte
    2  Grundgeruest
    3  Knoepfe
    4  Kopfleiste
    5  Kopfbereich
    6  Vertrauensreihe
    7  Leistungen
    8  Winterdienst
    9  Gaerten
   10  Ablauf
   11  Ueber
   12  Kontakt und Formular
   13  Fuss und Rufleiste
   14  Einblenden
   15  Grosses Handy und kleines Tablet (bis 760)
   16  Die iPad-Luecke (761 bis 1039)
   17  iPad quer und kleiner Rechner (1040 bis 1279)
   18  Bewegung reduzieren
   =================================================================== */

/* ---------------------------------------- 1  Farben, Schrift, Grundwerte */

:root{
  /* Dunkles Tannengruen. Traegt den Kopfbereich und die Fusszeile. */
  --tief:#10241A;
  --tief-weich:#193527;
  --gruen:#2A6342;
  --gruen-hell:#5E9E63;

  /* Warmes Papier statt Weiss. Reines Weiss wirkt neben Gruen kalt. */
  --papier:#FAF7F1;
  --sand:#EFE7DA;
  --sand-tief:#E2D6C3;

  /* Terrakotta. Nur fuer Knoepfe und einzelne Akzente. */
  --akzent:#A9491B;
  --akzent-hell:#C9A84C;

  --text:#1B2A20;
  --text-leise:#4C5A50;
  --text-hell:#F3EEE4;
  --text-hell-leise:#C3D0C4;

  --linie:rgba(27,42,32,.14);
  --linie-hell:rgba(243,238,228,.20);

  --rund:18px;
  --rund-klein:12px;

  --mitte:1180px;
  --luft:clamp(22px,5vw,40px);

  /* Jede Bewegung hat eine feste Dauer. Auch wer schnell scrollt,
     sieht sie - sie wird nicht uebersprungen. */
  --dauer:.62s;
  --kurve:cubic-bezier(.22,.68,.26,1);

  --schrift:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --schrift-titel:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}

/* ---------------------------------------- 2  Grundgeruest */

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

/* Die Farbe gehoert auf html, nicht auf body. Sonst entsteht beim
   Ueberziehen am oberen Rand ein heller Schnitt. */
html{
  background:var(--papier);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--papier);
  color:var(--text);
  font-family:var(--schrift);
  font-size:clamp(16px,1.06vw,18px);
  line-height:1.62;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3{
  font-family:var(--schrift-titel);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}

h1{font-size:clamp(2.3rem,6.2vw,4.3rem)}
h2{font-size:clamp(1.85rem,3.9vw,3rem)}
h3{font-size:clamp(1.12rem,1.6vw,1.34rem);line-height:1.22}

p{margin:0}

a{color:inherit}

.mitte{
  width:min(100% - var(--luft)*2, var(--mitte));
  margin-inline:auto;
}

.band{padding:clamp(66px,8.5vw,118px) 0}

/* Die Abschnitte liegen ueber den festen Ebenen des Kopfbereichs.
   Ohne diese Zeile verschwinden sie dahinter. */
.band,.vertrauen,.winter,.kontakt,.fuss{position:relative;z-index:2}

.ueberschrift-klein{
  font-family:var(--schrift);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--akzent);
  margin:0 0 14px;
}
.ueberschrift-klein.hell{color:var(--akzent-hell)}

.vorspann{
  font-size:clamp(1.02rem,1.3vw,1.16rem);
  color:var(--text-leise);
  max-width:56ch;
  margin-top:20px;
}

.kapitel{margin-bottom:clamp(38px,5vw,60px);max-width:60ch}

.springen{
  position:absolute;left:-9999px;top:0;
  background:var(--tief);color:var(--text-hell);
  padding:12px 20px;border-radius:0 0 var(--rund-klein) 0;
  z-index:200;
}
.springen:focus{left:0}

:focus-visible{
  outline:3px solid var(--akzent);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------------------------------- 3  Knoepfe */

.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;
  border:1.5px solid transparent;
  border-radius:999px;
  font-size:1rem;font-weight:600;
  text-decoration:none;
  cursor:pointer;
  /* Nur transform und Farbe bewegen sich. Nichts, was neu gezeichnet
     werden muss - sonst ruckelt es auf dem Tablet. */
  transition:transform .2s var(--kurve), background-color .2s linear, color .2s linear, border-color .2s linear;
  white-space:nowrap;
}
.knopf:active{transform:translateY(1px)}

.knopf-voll{background:var(--akzent);color:#FFF7F1;border-color:var(--akzent)}
.knopf-rand{background:transparent;color:var(--text-hell);border-color:rgba(243,238,228,.55)}
.knopf-hell{background:var(--papier);color:var(--tief);border-color:var(--papier)}
.knopf-breit{width:100%}

.knopf-ruf{
  background:var(--sand);
  color:var(--tief);
  border-color:var(--sand-tief);
  padding:11px 20px;
  font-size:.95rem;
}

@media (hover:hover){
  .knopf-voll:hover{background:#8F3C14;border-color:#8F3C14}
  .knopf-rand:hover{background:rgba(243,238,228,.12);border-color:var(--text-hell)}
  .knopf-hell:hover{background:#FFFFFF}
  .knopf-ruf:hover{background:var(--sand-tief)}
}

/* ---------------------------------------- 4  Kopfleiste */

.balken{
  position:fixed;inset:0 0 auto 0;
  z-index:100;
  padding:calc(12px + env(safe-area-inset-top)) 0 12px;
  background:rgba(250,247,241,0);
  border-bottom:1px solid transparent;
  transition:background-color .3s linear, border-color .3s linear, padding .3s var(--kurve);
}
/* Erst wenn gescrollt wurde, legt sich Papier hinter die Leiste.
   Kein backdrop-filter: der bricht auf iPhone und iPad, sobald
   darunter etwas bewegt wird. */
.balken.fest{
  background:var(--papier);
  border-bottom-color:var(--linie);
  padding:calc(9px + env(safe-area-inset-top)) 0 9px;
}

.balken-innen{display:flex;align-items:center;gap:22px}

.marke{
  display:flex;align-items:center;gap:11px;min-height:44px;
  text-decoration:none;color:var(--text-hell);
  transition:color .3s linear;
  margin-right:auto;
}
.balken.fest .marke{color:var(--tief)}

.marke-zeichen{display:grid;place-items:center;flex:0 0 auto}
.marke-zeichen svg{width:30px;height:30px}

.marke-text{display:flex;flex-direction:column;line-height:1.15}
.marke-text b{font-family:var(--schrift-titel);font-size:1.17rem;font-weight:600;letter-spacing:-.01em}
.marke-text i{font-style:normal;font-size:.73rem;letter-spacing:.06em;opacity:.78}

.haupt-nav{display:flex;gap:26px}
.haupt-nav a{
  text-decoration:none;
  /* Mindestens 44 Pixel hoch. Gemessen waren es vorher 25 - zu wenig
     zum Treffen mit dem Daumen. */
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.95rem;font-weight:500;
  color:var(--text-hell);
  opacity:.88;
  transition:color .3s linear, opacity .2s linear;
}
.balken.fest .haupt-nav a{color:var(--text)}
@media (hover:hover){.haupt-nav a:hover{opacity:1}}

/* ---------------------------------------- 5  Kopfbereich */

.kopf{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:calc(110px + env(safe-area-inset-top)) 0 clamp(80px,10vh,120px);
  overflow:hidden;
  isolation:isolate;
}

/* Der Hintergrund ist ein fertig weichgezeichnetes Bild. Die Unschaerfe
   steckt in der Datei, nicht im CSS - so kann Safari sie nicht
   falsch zeichnen, und sie kostet im Betrieb nichts. */
.kopf-grund{
  position:absolute;inset:0;z-index:-2;
  background:#16281C url("bilder/kopf-grund.jpg?v=20261022a") center/cover no-repeat;
}

.kopf-schleier{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(104deg, rgba(10,28,18,.94) 0%, rgba(13,34,22,.80) 44%, rgba(16,36,26,.52) 100%),
    linear-gradient(to top, rgba(10,24,16,.88) 0%, rgba(10,24,16,0) 42%);
}

.kopf-innen{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,5vw,64px);
  align-items:center;
  width:min(100% - var(--luft)*2, var(--mitte));
}

.kopf-text{color:var(--text-hell);max-width:38ch}
.kopf-text h1{margin:0 0 22px}
.kopf-text .vorspann{color:var(--text-hell-leise);max-width:42ch}

.kopf-knoepfe{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}

.kopf-fuss{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  margin-top:28px;
  font-size:.9rem;
  color:var(--text-hell-leise);
}
.kopf-fuss span{display:flex;align-items:center;gap:8px}
.kopf-fuss span::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gruen-hell);flex:0 0 auto;
}

/* Drei Bilder, leicht gedreht, wie hingelegte Abzuege.
   Jedes wird hoechstens so breit gezeigt, wie die Datei ist -
   hochskaliert waere es unscharf. */
.kopf-bilder{position:relative;height:clamp(330px,41vw,470px)}
.kb{
  position:absolute;margin:0;
  border-radius:var(--rund);
  overflow:hidden;
  border:5px solid rgba(250,247,241,.93);
  box-shadow:0 26px 58px -18px rgba(0,0,0,.72);
}
.kb img{width:100%;height:100%;object-fit:cover}

.kb-1{width:58%;aspect-ratio:4/3;left:0;top:4%;transform:rotate(-3.2deg);z-index:3}
.kb-2{width:40%;aspect-ratio:3/4;right:2%;top:0;transform:rotate(2.6deg);z-index:2}
.kb-3{width:47%;aspect-ratio:4/3;right:8%;bottom:0;transform:rotate(1.4deg);z-index:4}

.kopf-pfeil{
  position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:30px;height:46px;
  border:1.5px solid rgba(243,238,228,.42);
  border-radius:999px;
  display:grid;place-items:start center;
  padding-top:9px;
  z-index:3;
}
.kopf-pfeil span{
  width:4px;height:9px;border-radius:2px;
  background:var(--text-hell);
  animation:tropfen 1.9s var(--kurve) infinite;
}
@keyframes tropfen{
  0%,100%{transform:translateY(0);opacity:1}
  55%{transform:translateY(15px);opacity:.15}
  56%{transform:translateY(0);opacity:0}
}

/* ---------------------------------------- 6  Vertrauensreihe */

.vertrauen{
  background:var(--tief);
  color:var(--text-hell);
  padding:clamp(34px,4.4vw,52px) 0;
}
.vertrauen-reihe{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,3vw,38px);
}
.vt{display:flex;flex-direction:column;gap:5px;min-width:0}
.vt b{
  font-family:var(--schrift-titel);
  font-size:clamp(1.85rem,3.4vw,2.7rem);
  font-weight:600;line-height:1;
  color:var(--akzent-hell);
}
.vt span{font-size:.88rem;color:var(--text-hell-leise);line-height:1.38}

/* Trennstriche zwischen den Zahlen, nicht am Rand. */
.vt + .vt{
  padding-left:clamp(18px,3vw,38px);
  border-left:1px solid var(--linie-hell);
}

/* ---------------------------------------- 7  Leistungen */

.leistungen{background:var(--papier)}

.karten{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);
}

.karte{
  position:relative;
  background:#FFFFFF;
  border:1px solid var(--linie);
  border-radius:var(--rund);
  padding:clamp(24px,2.6vw,34px);
  overflow:hidden;
  transition:transform .3s var(--kurve), box-shadow .3s linear, border-color .3s linear;
}
.karte::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--gruen);
  transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--kurve);
}
@media (hover:hover){
  .karte:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px -22px rgba(16,36,26,.4);
    border-color:var(--sand-tief);
  }
  .karte:hover::before{transform:scaleY(1)}
}

.karte-nr{
  display:block;
  font-family:var(--schrift-titel);
  font-size:.95rem;font-weight:600;
  color:var(--akzent);
  margin-bottom:12px;
  letter-spacing:.04em;
}
.karte h3{margin-bottom:9px}
.karte > p{color:var(--text-leise);font-size:.96rem;margin-bottom:17px}

.karte ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--linie);
  padding-top:16px;
}
.karte li{
  position:relative;padding-left:20px;
  font-size:.94rem;color:var(--text-leise);line-height:1.45;
}
.karte li::before{
  content:"";position:absolute;left:0;top:.56em;
  width:7px;height:7px;border-radius:2px;
  background:var(--gruen-hell);
}

/* ---------------------------------------- 8  Winterdienst */

.winter{
  background:linear-gradient(140deg,#1C3F52 0%,#26566B 62%,#2E6377 100%);
  color:var(--text-hell);
  padding:clamp(48px,6vw,76px) 0;
  overflow:hidden;
}
.winter-innen{
  display:flex;align-items:center;gap:clamp(24px,4vw,56px);
  justify-content:space-between;
}
/* Das Gold aus dem Rest der Seite (#C9A84C) kommt auf dem hellen Ende
   des Verlaufs nur auf 2,9 zu 1 - gerechnet, nicht geschaetzt. Hier
   steht darum ein helleres Gold: 4,87 zu 1 am hellsten Punkt. */
.winter .ueberschrift-klein.hell{color:#EFDCA0}

.winter-text{max-width:54ch}
.winter-text h2{margin:0 0 16px}
.winter-text p{color:#D5E4EA;margin-bottom:26px;max-width:46ch}

.winter-zahl{flex:0 0 auto}
.flocke{
  display:block;
  font-size:clamp(70px,10vw,132px);
  line-height:1;
  color:rgba(243,238,228,.26);
  animation:drehen 26s linear infinite;
}
@keyframes drehen{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ---------------------------------------- 9  Gaerten */

.garten{background:var(--sand)}

.filter{
  display:flex;flex-wrap:wrap;gap:9px;
  margin-bottom:clamp(24px,3vw,34px);
}
.fk{
  font:inherit;font-size:.9rem;font-weight:600;
  padding:10px 19px;
  border:1.5px solid var(--sand-tief);
  background:transparent;color:var(--text-leise);
  border-radius:999px;cursor:pointer;
  transition:background-color .2s linear, color .2s linear, border-color .2s linear;
}
.fk.ist-an{background:var(--tief);color:var(--text-hell);border-color:var(--tief)}
@media (hover:hover){.fk:not(.ist-an):hover{border-color:var(--tief);color:var(--text)}}

/* Die Spaltenzahl richtet sich nach der Schaerfe, nicht nach dem Gefuehl.
   Die Vorlagen des Kunden sind 360 bis 600 Pixel breit. Wird eine Kachel
   breiter als ihre Datei, wird das Bild weich - gemessen, nicht geraten:
   bei zwei Spalten auf dem iPad waren es 473 Pixel fuer eine 360er Datei,
   also das 1,31fache. Mit drei Spalten sind es 308 Pixel, mit vier auf
   dem Rechner 280. Dann ist jede Kachel scharf. */
.gitter{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,22px);
}
@media (min-width:1280px){
  .gitter{grid-template-columns:repeat(4,1fr)}
}

.gb{
  margin:0;position:relative;
  border-radius:var(--rund);
  overflow:hidden;
  background:#D8CCB8;
  box-shadow:0 14px 30px -20px rgba(16,36,26,.55);
  /* Die Hoehe ist fest, damit das Raster beim Filtern nicht springt. */
  aspect-ratio:4/3;
  transition:transform .3s var(--kurve), box-shadow .3s linear;
}
.gb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--kurve)}

.gb figcaption{
  position:absolute;inset:auto 0 0 0;
  padding:38px 16px 14px;
  font-size:.88rem;font-weight:500;line-height:1.3;
  color:#FFFFFF;
  background:linear-gradient(to top,rgba(9,22,14,.90) 18%,rgba(9,22,14,0) 100%);
}

@media (hover:hover){
  .gb:hover{transform:translateY(-3px);box-shadow:0 22px 40px -20px rgba(16,36,26,.6)}
  .gb:hover img{transform:scale(1.045)}
}

.gb.weg{display:none}

.gitter-leer{
  margin-top:26px;color:var(--text-leise);font-size:1rem;
}

/* ---------------------------------------- 10  Ablauf */

.ablauf{background:var(--papier)}

.schritte{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,34px);
  counter-reset:s;
}
.schritt{
  position:relative;
  padding-top:28px;
  border-top:2px solid var(--sand-tief);
}
.schritt-nr{
  position:absolute;top:-19px;left:0;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--tief);color:var(--akzent-hell);
  font-family:var(--schrift-titel);font-size:1.05rem;font-weight:600;
  border:4px solid var(--papier);
}
.schritt h3{margin:12px 0 9px}
.schritt p{color:var(--text-leise);font-size:.97rem}

/* ---------------------------------------- 11  Ueber */

.ueber{background:var(--sand)}
.ueber-innen{
  display:grid;
  /* Die Spalte ist genau so breit wie die Bilddatei (417 px). Breiter
     hiesse: Luecke neben dem Bild, denn groesser als die Datei wird es
     nicht gezeigt. */
  grid-template-columns:minmax(0,417px) minmax(0,1fr);
  gap:clamp(28px,4.6vw,64px);
  align-items:center;
}
.ueber-bild figure{margin:0;max-width:417px}
.ueber-bild img{
  /* Die Datei ist 417 Pixel breit. Mehr wird nicht daraus. */
  width:100%;max-width:417px;border-radius:var(--rund);
  border:5px solid var(--papier);
  box-shadow:0 24px 50px -24px rgba(16,36,26,.6);
}
.ueber-bild figcaption{
  margin-top:12px;font-size:.88rem;color:var(--text-leise);font-style:italic;
}
.ueber-text h2{margin:0 0 18px}
.ueber-text p{color:var(--text-leise);margin-bottom:14px;max-width:54ch}

.haken{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.haken li{position:relative;padding-left:30px;font-size:.97rem}
.haken li::before{
  content:"";position:absolute;left:0;top:.28em;
  width:18px;height:18px;border-radius:50%;
  background:var(--gruen);
}
.haken li::after{
  content:"";position:absolute;left:5.6px;top:.62em;
  width:4px;height:8px;
  border:solid #FFFFFF;border-width:0 2px 2px 0;
  transform:rotate(42deg);
}

/* ---------------------------------------- 12  Kontakt und Formular */

.kontakt{
  background:var(--tief);
  color:var(--text-hell);
  padding:clamp(66px,8.5vw,112px) 0;
}
.kontakt-innen{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(34px,5vw,74px);
  align-items:start;
}
.kontakt-text h2{margin:0 0 18px}
.kontakt-text .vorspann{color:var(--text-hell-leise)}

.kontakt-liste{
  list-style:none;margin:34px 0 0;padding:0;
  display:flex;flex-direction:column;
}
.kontakt-liste li{
  display:flex;gap:18px;align-items:center;
  padding:6px 0;
  border-bottom:1px solid var(--linie-hell);
}
.kontakt-liste li:last-child{border-bottom:0}
.kl-art{
  flex:0 0 82px;
  font-size:.77rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-hell-leise);
}
.kontakt-liste a{
  text-decoration:none;font-size:1.1rem;font-weight:600;
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid rgba(201,168,76,.5);
}
@media (hover:hover){.kontakt-liste a:hover{border-bottom-color:var(--akzent-hell)}}

.formular{
  background:rgba(250,247,241,.055);
  border:1px solid var(--linie-hell);
  border-radius:var(--rund);
  padding:clamp(22px,2.8vw,34px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* Feld mit wanderndem Beschriftungstext. Die Beschriftung bleibt
   immer lesbar - sie verschwindet nicht, sobald getippt wird. */
.feld{position:relative}
.feld-breit{grid-column:1 / -1}

.feld input,.feld textarea,.feld select{
  width:100%;
  font:inherit;font-size:1rem;
  color:var(--text-hell);
  background:rgba(10,24,16,.42);
  border:1.5px solid var(--linie-hell);
  border-radius:var(--rund-klein);
  padding:21px 15px 9px;
  transition:border-color .2s linear, background-color .2s linear;
  -webkit-appearance:none;appearance:none;
}
.feld textarea{resize:vertical;min-height:112px;padding-top:25px}
.feld select{
  padding-top:21px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C3D0C4' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px;
}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  border-color:var(--akzent-hell);
  background:rgba(10,24,16,.62);
}

.feld label{
  position:absolute;left:16px;top:15px;
  font-size:1rem;color:var(--text-hell-leise);
  pointer-events:none;
  transition:transform .18s var(--kurve), font-size .18s var(--kurve), color .18s linear;
  transform-origin:left top;
}
.feld input:focus + label,
.feld input:not(:placeholder-shown) + label,
.feld textarea:focus + label,
.feld textarea:not(:placeholder-shown) + label,
.feld .label-fest{
  transform:translateY(-9px);
  font-size:.765rem;
  letter-spacing:.05em;
  color:var(--akzent-hell);
}
.feld select:not(:focus):invalid + .label-fest{color:var(--text-hell-leise)}

.formular-hinweis{
  grid-column:1 / -1;
  font-size:.8rem;color:var(--text-hell-leise);line-height:1.5;
}
.formular .knopf{grid-column:1 / -1}

.formular-meldung{
  grid-column:1 / -1;
  font-size:.95rem;font-weight:600;
  min-height:1.4em;
}
.formular-meldung.gut{color:var(--gruen-hell)}
.formular-meldung.schlecht{color:#F2A878}

/* ---------------------------------------- 13  Fuss und Rufleiste */

.fuss{
  background:var(--tief-weich);
  color:var(--text-hell-leise);
  padding:34px 0 calc(34px + env(safe-area-inset-bottom));
  font-size:.9rem;
  border-top:1px solid var(--linie-hell);
}
.fuss-innen{display:flex;flex-wrap:wrap;gap:18px 34px;justify-content:space-between;align-items:center}
.fuss b{color:var(--text-hell);font-weight:600}
.fuss-nav{display:flex;gap:18px}
.fuss-nav a{
  text-decoration:none;border-bottom:1px solid transparent;
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
}
@media (hover:hover){.fuss-nav a:hover{border-bottom-color:currentColor}}

/* Der feste Streifen unten. Nur auf dem Handy, und erst wenn der
   Kopfbereich vorbei ist - sonst steht er ueber den Knoepfen dort. */
.ruf-leiste{
  position:fixed;inset:auto 0 0 0;z-index:90;
  display:flex;gap:10px;
  padding:11px var(--luft) calc(11px + env(safe-area-inset-bottom));
  background:var(--papier);
  border-top:1px solid var(--linie);
  transform:translateY(102%);
  transition:transform .34s var(--kurve);
}
.ruf-leiste.da{transform:translateY(0)}
.ruf-leiste .knopf{flex:1;padding:13px 10px}
.ruf-leiste .knopf-rand{color:var(--tief);border-color:var(--sand-tief)}
@media (min-width:761px){.ruf-leiste{display:none}}

/* ---------------------------------------- 14  Einblenden */

/* Feste Dauer, feste Verzoegerung. Wer schnell scrollt, sieht die
   Bewegung trotzdem: sie startet beim Sichtbarwerden und laeuft ab. */
.auf{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.auf.drin{opacity:1;transform:none}
.auf[data-auf="2"]{transition-delay:.09s}
.auf[data-auf="3"]{transition-delay:.18s}
.auf[data-auf="4"]{transition-delay:.27s}
.auf[data-auf="5"]{transition-delay:.36s}

/* ---------------------------------------- 15  Bis 760: Handy */

@media (max-width:760px){
  :root{--luft:20px}

  .haupt-nav{display:none}
  .knopf-ruf{padding:10px 15px;font-size:.88rem}
  .marke-text i{display:none}

  .kopf{
    min-height:auto;
    padding:calc(120px + env(safe-area-inset-top)) 0 56px;
  }
  .kopf-grund{background-image:url("bilder/kopf-grund-hoch.jpg?v=20261022a")}
  .kopf-innen{grid-template-columns:1fr;gap:38px}
  .kopf-text{max-width:none}
  .kopf-knoepfe{margin-top:28px}
  .kopf-knoepfe .knopf{flex:1 1 auto}
  .kopf-pfeil{display:none}

  /* Die drei Bilder nebeneinander statt uebereinander. Gedreht wirken
     sie auf dem schmalen Schirm unruhig. */
  .kopf-bilder{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:11px}
  .kb{position:static;transform:none;border-width:4px}
  .kb-1{grid-column:1 / -1;aspect-ratio:16/10}
  .kb-2,.kb-3{width:auto;aspect-ratio:1/1}

  .vertrauen-reihe{grid-template-columns:1fr 1fr;gap:18px}
  .vt + .vt{padding-left:0;border-left:0}
  .vt:nth-child(even){padding-left:18px;border-left:1px solid var(--linie-hell)}

  .karten{grid-template-columns:1fr}
  .gitter{grid-template-columns:1fr 1fr;gap:10px}
  .schritte{grid-template-columns:1fr;gap:34px}
  .ueber-innen{grid-template-columns:1fr;gap:30px}
  .kontakt-innen{grid-template-columns:1fr}
  .formular{grid-template-columns:1fr}
  .winter-innen{flex-direction:column;align-items:flex-start;gap:26px}
  .winter-zahl{align-self:center}
  .fuss-innen{flex-direction:column;align-items:flex-start;text-align:left}

  /* Platz fuer den festen Streifen unten. */
  .fuss{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
}

/* ---------------------------------------- 16  761 bis 1039: die iPad-Luecke */

/* Dieser Bereich faellt sonst zwischen Handy und Rechner: zu breit fuer
   eine Spalte, zu schmal fuer drei. Beide iPad-Hochformate liegen hier. */
@media (min-width:761px) and (max-width:1039px){
  :root{--luft:30px}

  .haupt-nav{gap:18px}
  .haupt-nav a{font-size:.88rem}
  .marke-text b{font-size:1.05rem}

  .kopf{min-height:auto;padding:calc(128px + env(safe-area-inset-top)) 0 76px}
  .kopf-innen{grid-template-columns:1fr;gap:44px;max-width:760px}
  .kopf-text{max-width:30ch}
  .kopf-text h1{font-size:clamp(2.9rem,6.4vw,3.6rem)}

  /* Hochkant stehen die drei Bilder nebeneinander in einer Reihe,
     leicht versetzt. Uebereinander gelegt waeren sie hier zu gross. */
  .kopf-bilder{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:center}
  .kb{position:static;width:auto}
  .kb-1{aspect-ratio:3/4;transform:rotate(-2deg)}
  .kb-2{aspect-ratio:3/4;transform:translateY(-16px) rotate(1.4deg)}
  .kb-3{aspect-ratio:3/4;transform:rotate(2.4deg)}

  .vertrauen-reihe{grid-template-columns:1fr 1fr;gap:20px 26px}
  .vt:nth-child(odd){padding-left:0;border-left:0}

  .karten{grid-template-columns:1fr 1fr}
  /* Drei Spalten, nicht zwei: bei zwei waeren die Kacheln 473 Pixel
     breit und die Bilder damit weich. */
  .gitter{grid-template-columns:repeat(3,1fr)}
  .schritte{grid-template-columns:1fr;gap:32px}
  /* Bildspalte schmaler als die Datei: schaerfer, und der Text bekommt
     rund 52 Zeichen je Zeile statt 38. */
  .ueber-innen{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:30px}
  .kontakt-innen{grid-template-columns:1fr;gap:40px}
  .kontakt-text .vorspann{max-width:48ch}
}

/* ---------------------------------------- 17  1040 bis 1279 */

/* iPad quer und kleine Rechner. Drei Spalten passen, aber die
   Schrift im Kopfbereich muss kleiner werden, damit alles
   ohne Scrollen auf einen Schirm passt. */
@media (min-width:1040px) and (max-width:1279px){
  .kopf{padding-top:calc(102px + env(safe-area-inset-top))}
  .kopf-text h1{font-size:clamp(2.5rem,4.6vw,3.3rem)}
  .kopf-bilder{height:clamp(300px,36vw,400px)}
  .kopf-fuss{font-size:.85rem}
}

/* Quer auf dem iPad ist der Schirm niedrig. Dann darf der Kopfbereich
   nicht die volle Hoehe fordern, sonst steht der Text gequetscht. */
@media (min-width:761px) and (max-height:834px) and (orientation:landscape){
  .kopf{min-height:auto;padding:calc(104px + env(safe-area-inset-top)) 0 64px}
  .kopf-pfeil{display:none}
}

/* ---------------------------------------- 18  Bewegung reduzieren */

/* Auf vielen iPads steht der Schalter "Bewegung reduzieren" an.
   Dann laeuft hier nichts - aber es fehlt auch nichts. Alles ist
   sofort da und steht richtig. Das ist die wichtigere Haelfte. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  /* Nicht verstecken, nicht verschieben - nur da sein. */
  .auf{opacity:1;transform:none;transition:none}

  .kopf-pfeil{display:none}
  .flocke{animation:none}

  /* Die gedrehten Bilder stehen gerade. Ohne Bewegung wirkt die
     Schraege wie ein Fehler, nicht wie Absicht.

     NUR die Drehung faellt weg, nicht der Aufbau. Vorher stand hier
     auch der Handy-Aufbau, und der galt dann fuer jede Breite: auf dem
     iPad wurde das erste Bild dadurch ueber die ganze Breite gezogen,
     750 Pixel aus einer 400-Pixel-Datei, Faktor 1,88. Gemessen.
     Die Aufteilung macht weiter die jeweilige Breite. */
  .kb{transform:none}

  /* Der feste Streifen unten faehrt nicht ein, er ist einfach da. */
  .ruf-leiste{transform:none}
  .ruf-leiste:not(.da){display:none}
}