/* --------------------------------------------------------------------------
   Schriften, lokal eingebunden
   Hanken Grotesk und Caveat liegen im Theme, statt bei Google geladen zu
   werden. Beim Seitenaufruf geht dadurch keine Verbindung an Google, und es
   braucht dafuer keine Einwilligung. Beide sind variable Schriften, eine
   Datei deckt alle Staerken ab. Lizenz: SIL Open Font License.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Hanken Grotesk";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Caveat";
  font-style:normal;
  font-weight:600 700;
  font-display:swap;
  src:url("../fonts/caveat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Caveat";
  font-style:normal;
  font-weight:600 700;
  font-display:swap;
  src:url("../fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Stork Bauunternehmen
   Umsetzung des XD-Entwurfs Webseiten-Entwurf-Stork.pdf
   Farbwerte aus dem Entwurf ausgelesen, Formensprache nachgebaut.
   ========================================================================== */

:root{
  color-scheme: light;

  /* Farben, direkt aus dem Entwurf gemessen */
  --grund:#EFEEEB;      /* Seitenhintergrund */
  --blatt:#E3DED8;      /* abgesetzte Blöcke, Fuß, Formularflächen */
  --tief:#161514;       /* Text und dunkle Blöcke */
  --rot:#C2000B;        /* Akzent, Schaltflächen, hervorgehobene Wörter */
  --stumm:#75726D;      /* Fließtext */
  --anthrazit:#323232;

  /* Schrift. Der Entwurf liefert keine Schriftdaten, weil der Text beim
     PDF-Export in Pfade umgewandelt wurde. Hanken Grotesk steht hier als
     nächstliegender freier Ersatz und lässt sich an dieser einen Stelle
     gegen die echte Hausschrift tauschen. */
  --schrift:"Hanken Grotesk","Segoe UI",Helvetica,sans-serif;

  /* Organische Rundungen. Der Entwurf nutzt leicht unregelmäßige Formen,
     hier über acht Radien nachgebildet, damit sie mitskalieren. */
  --form-gross:70px 54px 76px 60px / 52px 72px 56px 78px;
  --form-mittel:34px 26px 38px 28px / 26px 36px 28px 40px;
  --form-klein:20px 15px 22px 17px / 15px 21px 16px 23px;
  --form-bild:24px 32px 20px 28px / 28px 22px 32px 24px;

  --bahn:1240px;
  --rand:clamp(1.4rem,5vw,3rem);
  --luft:clamp(4rem,8vw,7rem);
  --schwung:cubic-bezier(0.22,1,0.36,1);
  --kopfhoehe:74px;
}

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

body{
  margin:0;background:var(--grund);color:var(--tief);
  font-family:var(--schrift);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--schrift);margin:0;font-weight:800;letter-spacing:-0.02em;text-wrap:balance;}
p{margin:0;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}

::selection{background:var(--rot);color:#fff;}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--rot);outline-offset:3px;
}

.bahn{width:min(100% - (2 * var(--rand)),var(--bahn));margin-inline:auto;}
.luft{padding-block:var(--luft);}
.rot{color:var(--rot);}

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */
.kopf{
  position:sticky;top:0;z-index:80;background:var(--grund);
  height:var(--kopfhoehe);display:flex;align-items:center;
}
.kopf-innen{
  width:min(100% - (2 * var(--rand)),1460px);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.kopf .zeichen img{height:34px;width:auto;}
.menue{display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.6rem);}
.menue > *{position:relative;}
.menue a{font-size:0.95rem;font-weight:500;padding-block:0.4rem;display:inline-block;}
.menue > .punkt > a::after,.menue > a::after{
  content:"";position:absolute;left:0;bottom:0.1rem;width:100%;height:2px;background:var(--rot);
  transform:scaleX(0);transform-origin:right;transition:transform 420ms var(--schwung);
}
.menue > .punkt:hover > a::after,.menue > a:hover::after,
.menue > a[aria-current]::after,.menue > .punkt > a[aria-current]::after{transform:scaleX(1);transform-origin:left;}
.menue a[aria-current]{color:var(--rot);}

.klapp{
  position:absolute;top:100%;left:-1.1rem;min-width:290px;background:var(--grund);
  border-radius:var(--form-mittel);padding:0.8rem 0;
  box-shadow:0 22px 46px rgba(22,21,20,0.13);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity 300ms var(--schwung),transform 300ms var(--schwung),visibility 0s linear 300ms;
}
.punkt:hover .klapp,.punkt:focus-within .klapp{
  opacity:1;visibility:visible;transform:none;
  transition:opacity 300ms var(--schwung),transform 300ms var(--schwung),visibility 0s;
}
.klapp a{display:block;padding:0.55rem 1.3rem;font-size:0.92rem;line-height:1.35;}
.klapp a::after{display:none;}
.klapp a:hover{color:var(--rot);}

.taste{
  display:inline-block;background:var(--rot);color:#fff;
  font-weight:700;font-size:0.95rem;line-height:1;
  padding:0.82rem 1.3rem;border-radius:var(--form-klein);border:0;
  transition:background 380ms var(--schwung),transform 380ms var(--schwung);
}
.taste:hover{background:#9E0009;}
.taste:active{transform:scale(0.98);}
.taste.gross{font-size:1.02rem;padding:0.95rem 1.7rem;}

.mehr{
  display:inline-flex;align-items:center;gap:0.45rem;
  font-weight:700;font-size:0.93rem;margin-top:0.9rem;
}
.mehr .pfeil{transition:transform 420ms var(--schwung);}
.mehr:hover{color:var(--rot);}
.mehr:hover .pfeil{transform:translateX(4px);}

/* Menü für schmale Fenster */
.griff{display:none;width:44px;height:44px;border:0;background:none;padding:0;position:relative;}
.griff i{position:absolute;left:10px;right:10px;height:2px;background:var(--tief);
  transition:transform 420ms var(--schwung),opacity 260ms var(--schwung);}
.griff i:nth-child(1){top:15px;}
.griff i:nth-child(2){top:21px;}
.griff i:nth-child(3){top:27px;}
.griff[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.griff[aria-expanded="true"] i:nth-child(2){opacity:0;}
.griff[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.schublade{
  position:fixed;inset:var(--kopfhoehe) 0 0 0;z-index:75;background:var(--grund);
  padding:2rem var(--rand) 3rem;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity 340ms var(--schwung),visibility 0s linear 340ms;
}
.schublade.offen{opacity:1;visibility:visible;transition:opacity 340ms var(--schwung),visibility 0s;}
.schublade a{display:block;font-weight:800;font-size:1.4rem;padding:0.6rem 0;}
.schublade .unter a{font-size:1rem;font-weight:500;color:var(--stumm);padding:0.35rem 0 0.35rem 1rem;}
.schublade .unter{margin-bottom:1rem;}
.schublade .taste{margin-top:1.6rem;}
body.fest{overflow:hidden;}

/* --------------------------------------------------------------------------
   Bühne der Unterseiten: Bild mit geschwungener Unterkante
   -------------------------------------------------------------------------- */
.buehne{
  position:relative;overflow:hidden;background:var(--anthrazit);
  min-height:min(64svh,520px);display:flex;align-items:center;
  border-bottom-left-radius:58% 46px;
  border-bottom-right-radius:42% 34px;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.buehne > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.buehne::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,14,13,0.62) 0%,rgba(15,14,13,0.34) 40%,rgba(15,14,13,0.06) 72%);
}
.buehne .bahn{position:relative;z-index:2;color:#fff;padding-block:clamp(3rem,6vw,4.5rem);}
.buehne h1{font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.04;max-width:17ch;}
.buehne .satz{
  margin-top:1.5rem;max-width:52ch;font-size:0.99rem;line-height:1.6;
  color:rgba(255,255,255,0.9);padding-left:0.9rem;border-left:3px solid var(--rot);
}
.buehne .taste{margin-top:1.6rem;}

.krume{font-size:0.87rem;color:rgba(255,255,255,0.72);margin-bottom:1.1rem;}
.krume a:hover{color:#fff;}

/* --------------------------------------------------------------------------
   Startseite: Textblock über dem Objektfoto, Ziegeltextur im Hintergrund
   -------------------------------------------------------------------------- */
.startbuehne{
  position:relative;margin-bottom:clamp(3rem,6vw,5rem);
  background:var(--grund) url("../img/textur-weisse-wand.png") left top / 620px auto repeat;
}
.startbuehne .raster{
  width:min(100% - (2 * var(--rand)),1460px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;min-height:min(74svh,660px);
}
.startbuehne .foto{
  grid-column:2;grid-row:1;align-self:stretch;position:relative;overflow:hidden;
  margin-right:calc(-1 * var(--rand));
}
.startbuehne .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.startbuehne .startkarte{
  grid-column:1;grid-row:1;z-index:2;background:var(--blatt);
  border-radius:var(--form-gross);
  padding:clamp(2.2rem,4vw,3.6rem);
  margin-right:clamp(-6rem,-4vw,-2rem);
  margin-left:calc(-1 * var(--rand) - 3rem);
  padding-left:calc(var(--rand) + 3rem);
}
.startbuehne h1{font-size:clamp(2.2rem,4.2vw,3.8rem);line-height:1.05;max-width:15ch;}
.startbuehne .satz{
  margin-top:1.5rem;max-width:48ch;color:var(--stumm);font-size:0.99rem;
  padding-left:0.9rem;border-left:3px solid var(--rot);
}
.startbuehne .taste{margin-top:1.7rem;}

/* --------------------------------------------------------------------------
   Überschriften
   -------------------------------------------------------------------------- */
.h2{font-size:clamp(1.7rem,3.1vw,2.7rem);line-height:1.1;margin-bottom:clamp(1.6rem,3vw,2.4rem);}
.h2.mitte{text-align:center;max-width:22ch;margin-inline:auto;}
.h3{font-size:1.16rem;line-height:1.25;}
.vorspann{color:var(--stumm);max-width:58ch;margin-top:-0.8rem;margin-bottom:clamp(1.8rem,3vw,2.6rem);}

/* --------------------------------------------------------------------------
   Beige Blockfläche
   -------------------------------------------------------------------------- */
.tafel{
  background:var(--blatt);border-radius:var(--form-gross);
  padding:clamp(2.2rem,4.5vw,4rem) clamp(1.5rem,3.5vw,3.5rem);
}

/* --------------------------------------------------------------------------
   Leistungskacheln
   -------------------------------------------------------------------------- */
.karten{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.4vw,2.2rem);}
.karte{display:flex;flex-direction:column;}
.karte .bild{overflow:hidden;border-radius:var(--form-bild);background:var(--anthrazit);aspect-ratio:4/3;}
.karte .bild img{width:100%;height:100%;object-fit:cover;transition:transform 1100ms var(--schwung);}
.karte:hover .bild img{transform:scale(1.05);}
.karte h3{font-size:1.06rem;line-height:1.25;margin-top:1.1rem;}
.karte p{color:var(--stumm);font-size:0.93rem;margin-top:0.5rem;flex:1;}
.karte .partner{color:var(--rot);font-size:0.85rem;margin-top:0.5rem;}

.karte-dunkel{
  background:var(--tief);color:#fff;border-radius:var(--form-mittel);
  padding:clamp(1.4rem,2.2vw,1.9rem);
  display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;
}
.karte-dunkel b{font-size:1.06rem;line-height:1.25;display:block;font-weight:800;}
.karte-dunkel span.text{color:rgba(255,255,255,0.66);font-size:0.93rem;display:block;margin-top:0.6rem;}

/* --------------------------------------------------------------------------
   Zwei Wege
   -------------------------------------------------------------------------- */
.wege{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);}
.weg .bild{overflow:hidden;border-radius:var(--form-bild);background:var(--anthrazit);aspect-ratio:16/10;}
.weg .bild img{width:100%;height:100%;object-fit:cover;}
.weg h3{font-size:clamp(1.3rem,2.2vw,1.75rem);margin-top:1.4rem;}
.weg > p{color:var(--stumm);margin-top:0.7rem;max-width:46ch;font-size:0.97rem;}
.posten{margin-top:1.7rem;display:grid;gap:1.2rem;}
.posten b{display:block;font-size:1.02rem;font-weight:800;}
.posten span{color:var(--stumm);font-size:0.95rem;}

/* --------------------------------------------------------------------------
   Gütezeile
   -------------------------------------------------------------------------- */
.guete{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,3rem);}
.guete b{display:block;font-size:1.04rem;font-weight:800;}
.guete span{display:block;margin-top:0.6rem;color:var(--stumm);font-size:0.94rem;line-height:1.55;}

/* --------------------------------------------------------------------------
   Dreischrittiger Ablauf über einem Formular
   -------------------------------------------------------------------------- */
.ablaufdrei{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.4rem);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.ablaufdrei > div{padding-top:1rem;border-top:2px solid var(--tief);}
.ablaufdrei b{display:block;font-size:1.02rem;font-weight:800;}
.ablaufdrei span{display:block;margin-top:0.5rem;color:var(--stumm);font-size:0.94rem;line-height:1.55;}

/* --------------------------------------------------------------------------
   Vorstellung mit Unterschrift
   -------------------------------------------------------------------------- */
.vorstellung{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.vorstellung .text > * + *{margin-top:1.1rem;}
.vorstellung p{color:var(--stumm);}
.vorstellung .zitat{font-weight:700;color:var(--tief);margin-top:2rem;}
.unterschrift{display:flex;align-items:center;gap:1.1rem;margin-top:1.2rem;}
.unterschrift img{height:34px;width:auto;}
.unterschrift .strich{width:1px;height:34px;background:var(--stumm);opacity:0.4;}
.unterschrift .name{font-size:1.3rem;font-style:italic;font-weight:500;}
.vorstellung .bild img{width:100%;height:auto;}

/* --------------------------------------------------------------------------
   Klinkerfassade: Text links, freigestellte Steine rechts
   -------------------------------------------------------------------------- */
.gruende{
  position:relative;background:var(--blatt);
  border-radius:var(--form-gross);
  padding-block:clamp(3rem,6vw,5rem);
  margin-block:clamp(2.5rem,5vw,4rem);
}
.gruende .raster{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;}
.gruende .liste{display:grid;gap:1.4rem;margin-top:1.8rem;}
.gruende .liste b{display:block;font-size:1.04rem;font-weight:800;}
.gruende .liste span{color:var(--stumm);font-size:0.95rem;}
.gruende .steine{position:relative;}
.gruende .steine img{width:min(120%,640px);margin-left:-6%;}

/* --------------------------------------------------------------------------
   Versetzte Referenzreihe auf der Startseite
   -------------------------------------------------------------------------- */
.versatz{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,1.8rem);}
.versatz figure{margin:0;overflow:hidden;border-radius:var(--form-bild);background:var(--anthrazit);}
.versatz img{width:100%;height:100%;object-fit:cover;}
.versatz .a{grid-column:1 / span 5;aspect-ratio:16/11;margin-left:calc(-1 * var(--rand));}
.versatz .b{grid-column:6 / span 4;aspect-ratio:4/3;}
.versatz .c{grid-column:10 / span 4;aspect-ratio:4/3;margin-right:calc(-1 * var(--rand));}
.versatz .d{grid-column:1 / span 3;aspect-ratio:3/4;margin-left:calc(-1 * var(--rand));margin-top:clamp(1rem,2vw,1.8rem);}
.versatz .e{grid-column:4 / span 6;aspect-ratio:16/10;margin-top:clamp(1rem,2vw,1.8rem);}
.versatz .f{grid-column:10 / span 4;aspect-ratio:4/3;margin-right:calc(-1 * var(--rand));margin-top:clamp(1rem,2vw,1.8rem);}

/* --------------------------------------------------------------------------
   Projektraster
   -------------------------------------------------------------------------- */
.werke{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.6rem);}
.werk .bild{overflow:hidden;border-radius:var(--form-bild);background:var(--anthrazit);aspect-ratio:4/3;}
.werk .bild img{width:100%;height:100%;object-fit:cover;transition:transform 1100ms var(--schwung);}
.werk:hover .bild img{transform:scale(1.05);}
.werk h3{font-size:1.06rem;margin-top:1.1rem;}
.werk .meta{color:var(--stumm);font-size:0.92rem;margin-top:0.25rem;}

/* --------------------------------------------------------------------------
   Zweispalter mit Seitenleiste
   -------------------------------------------------------------------------- */
.zwei{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(2.2rem,5vw,5rem);align-items:start;}
.saeule{display:grid;gap:1.2rem;position:sticky;top:calc(var(--kopfhoehe) + 1.4rem);}
.kasten{background:var(--blatt);border-radius:var(--form-mittel);padding:clamp(1.5rem,2.4vw,2rem);}
.kasten.dunkel{background:var(--tief);color:#fff;}
.kasten h3{font-size:1.1rem;margin-bottom:0.8rem;}
.kasten p{font-size:0.95rem;color:var(--stumm);}
.kasten.dunkel p{color:rgba(255,255,255,0.68);}
.kasten .taste{margin-top:1.3rem;}
.kontaktzeile{display:flex;align-items:center;gap:0.7rem;margin-top:0.9rem;font-size:0.95rem;font-weight:700;}
.kontaktzeile svg{width:17px;height:17px;flex-shrink:0;fill:currentColor;opacity:0.85;}
.kasten ul{display:grid;gap:0.55rem;font-size:0.95rem;}
.kasten ul a:hover{color:var(--rot);}
.kasten ul .hier{color:var(--rot);font-weight:700;}

/* --------------------------------------------------------------------------
   Fließtext
   -------------------------------------------------------------------------- */
.text > * + *{margin-top:1.1rem;}
.text h2{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.12;margin-top:clamp(2.4rem,4.5vw,3.4rem);}
.text h2:first-child{margin-top:0;}
.text h3{font-size:1.1rem;margin-top:1.8rem;}
.text p{color:var(--stumm);max-width:66ch;}
.text strong{color:var(--tief);font-weight:800;}
.text a.textlink{color:var(--rot);text-decoration:underline;text-underline-offset:3px;}
.text ul{display:grid;gap:0.9rem;max-width:66ch;}
.text ul li{color:var(--stumm);padding-left:1.3rem;position:relative;}
.text ul li::before{
  content:"";position:absolute;left:0;top:0.62em;width:7px;height:7px;background:var(--rot);
}
.text .merk{
  padding-left:1rem;border-left:3px solid var(--rot);
  font-weight:700;color:var(--tief);max-width:52ch;
  margin-block:clamp(1.6rem,3vw,2.2rem);
}
.partnerband{
  background:var(--blatt);border-radius:var(--form-mittel);
  padding:clamp(1.4rem,2.4vw,2rem);margin-block:clamp(1.8rem,3vw,2.4rem);max-width:66ch;
}
.partnerband b{display:block;font-size:1.08rem;font-weight:800;margin-bottom:0.5rem;}
.partnerband p{color:var(--stumm);max-width:none;}

/* --------------------------------------------------------------------------
   Galerie
   -------------------------------------------------------------------------- */
.galerie{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1rem,2vw,1.6rem);}
.galerie figure{margin:0;overflow:hidden;border-radius:var(--form-bild);background:var(--anthrazit);grid-column:span 2;}
.galerie img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;cursor:zoom-in;transition:transform 1100ms var(--schwung);}
.galerie figure:hover img{transform:scale(1.04);}
.galerie .weit{grid-column:span 4;}
.galerie .weit img{aspect-ratio:16/9;}
.galerie .voll{grid-column:span 6;}
.galerie .voll img{aspect-ratio:21/9;}

.lupe{position:fixed;inset:0;z-index:120;background:rgba(15,14,13,0.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(1.5rem,5vw,4rem);cursor:zoom-out;}
.lupe[hidden]{display:none;}
.lupe img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--form-mittel);}
.lupe .zu{position:absolute;top:1.2rem;right:1.6rem;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,0.14);color:#fff;font-size:1.5rem;line-height:1;}
.lupe .zu:hover{background:rgba(255,255,255,0.26);}

/* --------------------------------------------------------------------------
   Häufige Fragen
   -------------------------------------------------------------------------- */
.fragen{max-width:700px;margin-inline:auto;border-top:1px solid rgba(22,21,20,0.14);}
.frage{border-bottom:1px solid rgba(22,21,20,0.14);}
.frage summary{
  list-style:none;cursor:pointer;position:relative;padding:1.1rem 2.6rem 1.1rem 0;
  font-weight:700;font-size:1rem;line-height:1.35;transition:color 320ms var(--schwung);
}
.frage summary::-webkit-details-marker{display:none;}
.frage summary:hover{color:var(--rot);}
.frage summary::after{
  content:"";position:absolute;right:0.5rem;top:1.35rem;width:10px;height:10px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform 380ms var(--schwung);
}
.frage[open] summary::after{transform:rotate(-135deg);top:1.55rem;}
.frage .antwort{padding:0 2.6rem 1.3rem 0;color:var(--stumm);font-size:0.96rem;}
.frage .antwort > * + *{margin-top:0.8rem;}

/* --------------------------------------------------------------------------
   Dunkles Band
   -------------------------------------------------------------------------- */
.band{
  background:var(--tief);color:#fff;border-radius:var(--form-gross);
  padding:clamp(1.8rem,3.4vw,2.8rem) clamp(1.6rem,3vw,2.6rem);
  display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:space-between;
  margin-block:clamp(2.5rem,5vw,4rem);
}
.band h2{font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.2;max-width:24ch;}
.band p{color:rgba(255,255,255,0.62);margin-top:0.7rem;max-width:44ch;font-size:0.95rem;}

/* --------------------------------------------------------------------------
   Stellen
   -------------------------------------------------------------------------- */
.stellen{display:grid;gap:1rem;}
.stelle{
  background:var(--blatt);border-radius:var(--form-mittel);
  padding:clamp(1.2rem,2.2vw,1.6rem) clamp(1.3rem,2.4vw,1.8rem);
  display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;
}
.stelle h3{font-size:1.06rem;}
.stelle .meta{color:var(--stumm);font-size:0.93rem;margin-top:0.2rem;}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */
.formularflaeche{
  background:var(--blatt);border-radius:var(--form-gross);
  padding:clamp(2rem,4vw,3.4rem) clamp(1.4rem,3vw,3rem);
}
.formular{display:grid;gap:1rem;max-width:640px;margin-inline:auto;}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.feld{display:grid;gap:0.35rem;}
.feld > span{font-size:0.88rem;color:var(--stumm);}
.feld > span .pflicht{color:var(--stumm);}
.feld input,.feld select,.feld textarea{
  font-family:var(--schrift);font-size:0.97rem;color:var(--tief);
  background:#fff;border:1px solid rgba(22,21,20,0.16);border-radius:9px;
  padding:0.68rem 0.8rem;
  transition:border-color 320ms var(--schwung),box-shadow 320ms var(--schwung);
}
.feld textarea{resize:vertical;min-height:120px;}
.feld input::placeholder,.feld textarea::placeholder{color:#A8A29A;}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--rot);box-shadow:0 0 0 3px rgba(194,0,11,0.12);
}
.gruppentitel{font-weight:800;font-size:1.05rem;margin-top:0.8rem;}
.formular > .gruppentitel:first-child{margin-top:0;}
.wahlreihe{display:flex;flex-wrap:wrap;gap:0.5rem;}
.wahl{position:relative;}
.wahl input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.wahl span{
  display:block;padding:0.55rem 1rem;font-size:0.92rem;color:var(--stumm);
  background:#fff;border:1px solid rgba(22,21,20,0.16);border-radius:9px;cursor:pointer;
  transition:all 320ms var(--schwung);
}
.wahl input:checked + span{background:var(--tief);border-color:var(--tief);color:#fff;}
.wahl input:focus-visible + span{outline:2px solid var(--rot);outline-offset:2px;}
.ablage{
  border:1px dashed rgba(22,21,20,0.28);border-radius:9px;background:rgba(255,255,255,0.55);
  padding:clamp(1.2rem,2.4vw,1.8rem);text-align:center;color:var(--stumm);font-size:0.9rem;
}
.ablage b{display:block;font-weight:800;color:var(--tief);font-size:0.98rem;margin-bottom:0.3rem;}
.zustimmung{display:flex;gap:0.7rem;align-items:flex-start;font-size:0.86rem;color:var(--stumm);line-height:1.5;}
.zustimmung input{margin-top:0.2rem;accent-color:var(--rot);width:16px;height:16px;flex-shrink:0;}

/* --------------------------------------------------------------------------
   Karte
   -------------------------------------------------------------------------- */
.kartenfeld{
  border-radius:var(--form-bild);overflow:hidden;background:var(--blatt);
  aspect-ratio:16/9;position:relative;
}
.kartenfeld img{width:100%;height:100%;object-fit:cover;}
.kartenfeld .platz{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0.4rem;text-align:center;padding:2rem;background:rgba(227,222,216,0.9);color:#5C574F;
}
.kartenfeld .platz b{font-weight:800;color:var(--tief);}

/* --------------------------------------------------------------------------
   Rechtstexte, Notizen, 404
   -------------------------------------------------------------------------- */
.rechtstext{max-width:72ch;}
.rechtstext h2{font-size:clamp(1.25rem,2.2vw,1.7rem);margin-top:clamp(2rem,3.5vw,2.8rem);}
.rechtstext h3{font-size:1.04rem;margin-top:1.6rem;}
.rechtstext p,.rechtstext li{color:var(--stumm);}
.rechtstext > p + p{margin-top:0.9rem;}
.rechtstext ul{margin-top:0.9rem;padding-left:1.2rem;list-style:disc;display:grid;gap:0.45rem;}

.notiz{
  border:1px dashed var(--rot);border-radius:var(--form-klein);
  padding:1rem 1.3rem;margin-top:1.6rem;max-width:72ch;
  font-size:0.88rem;color:#8A2A20;background:rgba(194,0,11,0.045);line-height:1.55;
}
.notiz b{display:block;font-weight:800;margin-bottom:0.25rem;color:var(--rot);}

.vierhundert{min-height:52svh;display:flex;flex-direction:column;justify-content:center;}
.vierhundert .zahl{font-weight:800;font-size:clamp(5rem,17vw,12rem);line-height:0.8;letter-spacing:-0.05em;color:var(--blatt);}

/* --------------------------------------------------------------------------
   Fuß
   -------------------------------------------------------------------------- */
.fuss{
  background:var(--blatt);border-radius:var(--form-gross) var(--form-gross) 0 0;
  margin-top:clamp(3rem,6vw,5rem);
}
.fuss .bahn{padding-block:clamp(2.8rem,5vw,4rem) 2rem;}
.fuss-raster{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:2.5rem;}
.fuss img{height:38px;width:auto;}
.fuss .beschreibung{margin-top:1.3rem;color:var(--stumm);font-size:0.94rem;max-width:34ch;}
.fuss ul{display:grid;gap:0.9rem;font-size:0.95rem;color:var(--stumm);}
.fuss ul a:hover{color:var(--rot);}
.fuss-schluss{
  margin-top:clamp(2.2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1.2rem;
  justify-content:space-between;color:var(--stumm);font-size:0.9rem;
}
.fuss-schluss a:hover{color:var(--rot);}

/* --------------------------------------------------------------------------
   Einblenden
   -------------------------------------------------------------------------- */
.auf{opacity:0;transform:translateY(18px);transition:opacity 800ms var(--schwung),transform 800ms var(--schwung);}
.auf.sicht{opacity:1;transform:none;}
.reihe > *{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--schwung),transform 700ms var(--schwung);}
.reihe.sicht > *{opacity:1;transform:none;}
.reihe.sicht > *:nth-child(2){transition-delay:70ms;}
.reihe.sicht > *:nth-child(3){transition-delay:140ms;}
.reihe.sicht > *:nth-child(4){transition-delay:210ms;}
.reihe.sicht > *:nth-child(5){transition-delay:280ms;}
.reihe.sicht > *:nth-child(6){transition-delay:350ms;}
.reihe.sicht > *:nth-child(7){transition-delay:420ms;}
.reihe.sicht > *:nth-child(8){transition-delay:490ms;}

/* --------------------------------------------------------------------------
   Anpassungen
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .menue{display:none;}
  .griff{display:block;}
  .karten{grid-template-columns:repeat(2,1fr);}
  .zwei{grid-template-columns:1fr;}
  .saeule{position:static;grid-template-columns:1fr 1fr;}
  .werke{grid-template-columns:repeat(2,1fr);}
  .guete{grid-template-columns:1fr 1fr;}
  .fuss-raster{grid-template-columns:1fr 1fr;}
  .vorstellung{grid-template-columns:1fr;}
  .gruende .raster{grid-template-columns:1fr;}
  .gruende .steine img{width:min(90%,460px);margin-left:0;}
  .startbuehne .raster{grid-template-columns:1fr;min-height:0;}
  .startbuehne .foto{grid-column:1;grid-row:1;aspect-ratio:16/10;margin-right:0;}
  .startbuehne .startkarte{grid-column:1;grid-row:2;margin:-3rem 0 0 0;padding:clamp(1.8rem,5vw,2.6rem);}
  .versatz{grid-template-columns:repeat(6,1fr);}
  .versatz .a,.versatz .b,.versatz .c,.versatz .d,.versatz .e,.versatz .f{
    grid-column:span 3;margin:0;aspect-ratio:4/3;
  }
}
@media (max-width:760px){
  .karten{grid-template-columns:1fr;}
  .werke{grid-template-columns:1fr;}
  .wege{grid-template-columns:1fr;}
  .guete{grid-template-columns:1fr;}
  .saeule{grid-template-columns:1fr;}
  .paar{grid-template-columns:1fr;}
  .fuss-raster{grid-template-columns:1fr;}
  .galerie{grid-template-columns:repeat(2,1fr);}
  .galerie figure,.galerie .weit,.galerie .voll{grid-column:span 2;}
  .versatz{grid-template-columns:1fr;}
  .versatz .a,.versatz .b,.versatz .c,.versatz .d,.versatz .e,.versatz .f{grid-column:span 1;}
  .band{flex-direction:column;align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}
  .auf,.reihe > *{opacity:1;transform:none;}
}

/* --------------------------------------------------------------------------
   Bildform aus dem Entwurf
   Die Fotoflaechen bekommen die echte Kontur aus "Gruppe 140.svg" als Maske,
   statt sie ueber acht Radien anzunaehern. Textbloecke behalten ihre Radien,
   weil eine Maske dort die Schrift an den Ecken anschneiden wuerde.
   -------------------------------------------------------------------------- */
:root{
  --form-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1527.008 1102.725' preserveAspectRatio='none'%3E%3Cpath d='M1498.483,1060.071c21.323-13.1,33.144-66.557,26.826-142.448-31.24-378.848,36.952-825.087-26.826-856.354C1313.552-29.5,1130.612,8.145,943.258,5.716L497.5.252,247.411,2.984C196.094,3.591,7.058.007,5.625,67.036,1.412,82.654,7.01,383.957,0,548.792L4.673,857.82,3.115,950.711c-.692,40.981,1.558,66.442,1.558,66.442,20.414,113.017,366.36,81.544,366.36,81.544l325.423-6.194c89.134-4.25,300.5,0,300.5,0,84.2-3.643,194.645-3.946,282.913,0l98.214-6.682S1477.16,1073.168,1498.483,1060.071Z' fill='black'/%3E%3C/svg%3E");
}
.karte .bild,
.weg .bild,
.versatz figure,
.werk .bild,
.galerie figure,
.kartenfeld,
.bildform{
  -webkit-mask-image:var(--form-svg);
  mask-image:var(--form-svg);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  border-radius:0;
}

/* --------------------------------------------------------------------------
   Feinschliff nach Abstimmung
   -------------------------------------------------------------------------- */
:root{
  /* Abstand vom Fensterrand bis zur Bahnkante, damit angeschnittene Flaechen
     trotzdem auf der Rasterlinie beginnen */
  --bahnluft:max(var(--rand),calc((100vw - var(--bahn)) / 2));
  --heroversatz:clamp(3rem,4vw,5rem);
  /* Hausschrift fuer die Unterschrift. Die Datei fehlt noch, siehe Hinweis
     unten. Bis dahin greift die naechstliegende Systemschrift. */
  --schrift-hand:"P22 Freely","Segoe Script","Bradley Hand","Brush Script MT",cursive;
}

/* Ueberschriften eine Stufe groesser */
.h2{font-size:clamp(2rem,3.9vw,3.3rem);}

/* Unterschrift Oliver Stork */
.unterschrift .name{
  font-family:var(--schrift-hand);
  font-style:normal;font-weight:400;
  font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1;
}

/* Referenzreihe: alle Bilder auf gleicher Hoehe */
.versatz figure{height:clamp(200px,20vw,300px);}
.versatz .a,
.versatz .b,
.versatz .c,
.versatz .d,
.versatz .e,
.versatz .f{aspect-ratio:auto;}

/* Beige Flaeche der Gruende laeuft als Band durch, ohne Rundung an den Seiten */
.gruende{border-radius:0;overflow:visible;}

@media (min-width:1101px){
  /* Hero: Textflaeche ueber den linken Rand hinaus, Foto bis zum rechten Rand,
     Text laeuft ueber das Foto */
  .startbuehne{overflow:hidden;}
  .startbuehne .raster{
    width:100%;max-width:none;margin-inline:0;
    grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  }
  .startbuehne .foto{margin-right:0;}
  .startbuehne .startkarte{
    margin-left:calc(-1 * var(--heroversatz));
    padding-left:calc(var(--bahnluft) + var(--heroversatz));
    margin-right:calc(-1 * clamp(6rem,12vw,14rem));
    padding-right:clamp(2.5rem,5vw,4.5rem);
  }
  .startbuehne h1{max-width:18ch;}
  .startbuehne .satz{max-width:none;}

  /* Steine bis zum rechten Rand und ueber die Bandkanten hinaus */
  .gruende .steine{position:relative;z-index:2;}
  .gruende .steine img{
    display:block;width:min(132%,820px);max-width:none;
    margin-left:auto;margin-right:calc(-1 * var(--bahnluft));
    margin-block:calc(-1 * clamp(3rem,7vw,6rem));
  }
}

@media (max-width:1100px){
  .versatz figure{height:clamp(190px,34vw,260px);}
}
@media (max-width:760px){
  .versatz figure{height:clamp(200px,52vw,300px);}
}

/* Sobald die Lizenzdatei vorliegt, hier eintragen und die Systemschrift faellt weg:
@font-face{
  font-family:"P22 Freely";
  src:url("../img/p22-freely.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
*/

/* --------------------------------------------------------------------------
   Beige Flaechen mit der Entwurfskontur
   Die Radius-Naeherung wirkt runder als der Entwurf. Deshalb bekommen auch die
   grossen Flaechen die Kontur aus "Gruppe 140.svg". Sie ist an den Seiten fast
   gerade und wackelt nur leicht, genau wie in der Vorlage.
   -------------------------------------------------------------------------- */
.startbuehne .startkarte,
.tafel{
  -webkit-mask-image:var(--form-svg);
  mask-image:var(--form-svg);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  border-radius:0;
}

/* Beim Band der Gruende liegt die Kontur auf einer eigenen Ebene, damit die
   freigestellten Steine weiterhin ueber die Kante hinausragen duerfen. Eine
   Maske auf dem Abschnitt selbst wuerde sie abschneiden. */
.gruende{background:transparent;border-radius:0;position:relative;}
.gruende::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--blatt);
  -webkit-mask-image:var(--form-svg);
  mask-image:var(--form-svg);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.gruende > *{position:relative;z-index:1;}

/* --------------------------------------------------------------------------
   Steine groesser und deutlicher ueber die Bandkanten
   -------------------------------------------------------------------------- */
.gruende{margin-block:clamp(4rem,9vw,7.5rem);}

@media (min-width:1101px){
  .gruende .steine img{
    width:min(168%,1060px);
    margin-block:calc(-1 * clamp(5rem,11vw,10rem));
  }
}
@media (max-width:1100px){
  .gruende .steine img{width:min(104%,560px);margin-block:calc(-1 * clamp(2rem,6vw,4rem));}
}

/* Steine nehmen die halbe Bildschirmbreite ein und sitzen buendig am rechten Rand */
@media (min-width:1101px){
  .gruende .steine img{
    width:50vw;
    max-width:none;
    margin-left:auto;
    margin-right:calc(-1 * var(--bahnluft));
    margin-block:calc(-1 * clamp(5rem,11vw,10rem));
  }
}

/* --------------------------------------------------------------------------
   Groessere Grunddarstellung
   Der Entwurf wirkt bei 125 Prozent Browserzoom stimmiger. Statt den Zoom vom
   Besucher zu verlangen, ist die Basis hier fest hochgesetzt: Grundschriftgroesse
   auf 125 Prozent, dazu die in Pixeln gesetzten Masse im gleichen Verhaeltnis.
   Alles was in rem, ch oder Prozent steht, waechst dadurch von selbst mit.
   Erst ab der Desktopbreite, damit auf dem Handy nichts ueberlaeuft.
   -------------------------------------------------------------------------- */
@media (min-width:1101px){
  html{font-size:125%;}
  :root{
    --bahn:77.5rem;        /* entspricht 1240px bei 125 Prozent */
    --kopfhoehe:4.625rem;  /* entspricht 74px bei 125 Prozent */
  }
  .kopf .zeichen img{height:2.125rem;}   /* 34px */
  .unterschrift img,
  .unterschrift .strich{height:2.125rem;}
  .fuss img{height:2.375rem;}            /* 38px */
}

/* --------------------------------------------------------------------------
   Zwischenbereich: Laptops von 1101 bis 1599 Pixel
   Dort ist die volle Vergroesserung zusammen mit vier Kachelspalten zu eng,
   die Kacheln waeren nur rund 200 Pixel breit. Deshalb eine Stufe kleiner
   skalieren und auf drei Spalten gehen.
   -------------------------------------------------------------------------- */
@media (min-width:1101px) and (max-width:1599px){
  html{font-size:112.5%;}
  :root{
    --bahn:68rem;
    --kopfhoehe:4.1rem;
  }
  .karten{grid-template-columns:repeat(3,1fr);}
}

/* --------------------------------------------------------------------------
   Ueberstand der Steine auch auf schmaleren Bildschirmen
   Die Steine sind nahezu quadratisch, ihre Hoehe haengt also an der Breite.
   Auf breiten Schirmen ragen sie damit von selbst ueber das Band. Darunter
   wird das Band durch die vier Textbloecke hoeher als das Bild. Deshalb wird
   der Text dort zweispaltig gesetzt und das Band flacher gepolstert, damit
   der Ueberstand erhalten bleibt.
   -------------------------------------------------------------------------- */
@media (min-width:1101px) and (max-width:1899px){
  .gruende{padding-block:clamp(2.2rem,3.4vw,3rem);}
  .gruende .liste{grid-template-columns:1fr 1fr;column-gap:clamp(1.4rem,2.4vw,2.4rem);}
}

/* Die Steine reichen exakt bis zur Fensterkante. Weil 50vw die Breite samt
   Scrollleiste meint, entstuende sonst ein paar Pixel Querlauf. Waagerecht
   beschneiden, senkrecht sichtbar lassen, damit der Ueberstand bleibt. */
.gruende{overflow-x:clip;overflow-y:visible;}

/* --------------------------------------------------------------------------
   Abgleich mit dem Entwurf, Stand Abstimmung
   -------------------------------------------------------------------------- */

/* Unterschrift: kleiner und fett, wie im Entwurf */
.unterschrift .name{
  font-size:clamp(1.35rem,1.9vw,1.6rem);
  font-weight:700;
}

/* Hero hoeher und die Wandtextur fuellt die Flaeche, statt sich zu kacheln */
.startbuehne{
  background:var(--grund) url("../img/textur-weisse-wand.png") left top / cover no-repeat;
}
.startbuehne .raster{min-height:min(88svh,860px);}
/* Das Hero-Foto bekommt dieselbe Kontur wie die uebrigen Bildflaechen */
.startbuehne .foto{
  -webkit-mask-image:var(--form-svg);
  mask-image:var(--form-svg);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

/* Fuss als abgesetzter Block in Bahnbreite mit der Entwurfskontur */
.fuss{background:transparent;border-radius:0;}
.fuss > .bahn{
  background:var(--blatt);
  -webkit-mask-image:var(--form-svg);
  mask-image:var(--form-svg);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  padding:clamp(2.6rem,4.5vw,3.6rem) clamp(2rem,3.5vw,3rem) clamp(1.8rem,3vw,2.4rem);
}
.fuss-schluss{margin-top:clamp(2rem,3.5vw,3rem);}

/* Ueberschriften mit der Klasse h2 behalten ihre Groesse auch in Textspalten.
   Die allgemeine Regel .text h2 gilt sonst fuer Zwischenueberschriften auf den
   Detailseiten und hat die Einleitung auf der Startseite verkleinert. */
.text h2.h2{
  font-size:clamp(2rem,3.9vw,3.3rem);
  margin-top:0;
}

/* --------------------------------------------------------------------------
   Zweite Runde Feinschliff
   -------------------------------------------------------------------------- */

/* Alle uebrigen Flaechen bekommen die Entwurfskontur statt runder Ecken */
.kasten,
.karte-dunkel,
.band,
.stelle,
.formularflaeche{
  -webkit-mask-image:var(--form-svg);
  mask-image:var(--form-svg);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  border-radius:0;
}

/* Der Fuss laeuft nach unten aus dem Bild, die Kontur endet nicht sichtbar */
.fuss > .bahn{
  -webkit-mask-size:100% calc(100% + 180px);
  mask-size:100% calc(100% + 180px);
  -webkit-mask-position:center top;
  mask-position:center top;
  padding-bottom:clamp(2.4rem,4vw,3.4rem);
}
.fuss{margin-bottom:0;}

/* Hero: Wandtextur kleiner, Foto ohne Kontur */
.startbuehne{
  background:var(--grund) url("../img/textur-weisse-wand.png") left top / auto 100% no-repeat;
}
.startbuehne .foto{
  -webkit-mask-image:none;
  mask-image:none;
}

/* Unterschrift in einer echter wirkenden Handschrift */
:root{
  --schrift-hand:"P22 Freely","Caveat","Segoe Script","Bradley Hand",cursive;
}
.unterschrift .name{
  font-size:clamp(1.9rem,2.8vw,2.4rem);
  font-weight:700;
  line-height:0.9;
}

/* --------------------------------------------------------------------------
   Objektlaufband: randlos, seitlich scrollbar, Infos beim Darueberfahren
   -------------------------------------------------------------------------- */
.laufer{position:relative;}
.spur{
  display:flex;gap:clamp(0.8rem,1.4vw,1.2rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-inline:var(--bahnluft);padding-block:0.4rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.spur::-webkit-scrollbar{display:none;}
.objektkachel{
  position:relative;flex:0 0 clamp(260px,26vw,430px);
  aspect-ratio:4/3;overflow:hidden;background:var(--anthrazit);
  scroll-snap-align:start;
  -webkit-mask-image:var(--form-svg);mask-image:var(--form-svg);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.objektkachel img{width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--schwung);}
.objektkachel:hover img,
.objektkachel:focus-visible img{transform:scale(1.05);}
.objektkachel .info{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(1rem,2vw,1.6rem);color:#fff;
  background:linear-gradient(to top,rgba(16,15,14,0.86) 0%,rgba(16,15,14,0.55) 45%,rgba(16,15,14,0) 100%);
  opacity:0;transform:translateY(10px);
  transition:opacity 420ms var(--schwung),transform 420ms var(--schwung);
}
.objektkachel:hover .info,
.objektkachel:focus-visible .info{opacity:1;transform:none;}
.objektkachel .info b{display:block;font-size:1.05rem;font-weight:800;line-height:1.25;}
.objektkachel .info span{display:block;margin-top:0.25rem;font-size:0.92rem;color:rgba(255,255,255,0.82);}

.pfeiltaste{
  position:absolute;top:50%;z-index:4;transform:translateY(-50%);
  width:3rem;height:3rem;border:0;border-radius:50%;
  background:#fff;color:var(--tief);
  font-size:1.7rem;line-height:1;padding:0 0 0.15rem;
  box-shadow:0 6px 22px rgba(22,21,20,0.18);
  display:flex;align-items:center;justify-content:center;
  transition:background 300ms var(--schwung),opacity 300ms var(--schwung),transform 300ms var(--schwung);
}
.pfeiltaste:hover{background:var(--rot);color:#fff;}
.pfeiltaste.links{left:max(0.8rem,calc(var(--bahnluft) - 1.5rem));}
.pfeiltaste.rechts{right:max(0.8rem,calc(var(--bahnluft) - 1.5rem));}
.pfeiltaste[disabled]{opacity:0;pointer-events:none;}

/* Auf Beruehrungsgeraeten zeigen die Infos dauerhaft, dort gibt es kein Hover */
@media (hover:none){
  .objektkachel .info{opacity:1;transform:none;}
  .pfeiltaste{display:none;}
}

/* Unterschrift als Bild aus dem Entwurf */
.unterschrift img.name{height:2.1rem;width:auto;}

/* Das Einrasten muss den Innenabstand kennen, sonst springt die erste Kachel
   beim Laden an den Fensterrand statt auf die Rasterlinie */
.spur{
  scroll-padding-inline:var(--bahnluft);
}
.unterschrift img.name{height:1.9rem;}

/* --------------------------------------------------------------------------
   Objektlaufband in zwei Reihen
   Beide Reihen scrollen gemeinsam. Die Kacheln sind unterschiedlich breit,
   die Hoehe bleibt gleich, dadurch versetzen sich die Reihen gegeneinander.
   -------------------------------------------------------------------------- */
.spur{
  display:flex;
  flex-direction:column;
  gap:clamp(0.8rem,1.4vw,1.2rem);
  scroll-snap-type:none;
}
.spur .zeile{
  display:flex;
  gap:clamp(0.8rem,1.4vw,1.2rem);
  width:max-content;
}
.objektkachel{
  flex:0 0 auto;
  aspect-ratio:auto;
  height:clamp(150px,14vw,230px);
}
.objektkachel.schmal{width:clamp(180px,15vw,240px);}
.objektkachel.mittel{width:clamp(240px,21vw,330px);}
.objektkachel.breit{width:clamp(300px,28vw,440px);}
.objektkachel .info b{font-size:0.98rem;}
.objektkachel .info span{font-size:0.86rem;}
.objektkachel .info{padding:clamp(0.8rem,1.4vw,1.1rem);}

/* Objektkacheln groesser, Verhaeltnisse bleiben gleich */
.objektkachel{height:clamp(200px,19vw,320px);}
.objektkachel.schmal{width:clamp(215px,20vw,325px);}
.objektkachel.mittel{width:clamp(290px,28vw,455px);}
.objektkachel.breit{width:clamp(370px,37vw,600px);}
.objektkachel .info b{font-size:1.08rem;}
.objektkachel .info span{font-size:0.92rem;}
.objektkachel .info{padding:clamp(1rem,1.7vw,1.4rem);}

/* Objektkacheln noch eine Stufe groesser */
.objektkachel{height:clamp(230px,23vw,395px);}
.objektkachel.schmal{width:clamp(245px,24vw,400px);}
.objektkachel.mittel{width:clamp(335px,34vw,560px);}
.objektkachel.breit{width:clamp(425px,45vw,740px);}
.objektkachel .info b{font-size:1.14rem;}
.objektkachel .info span{font-size:0.95rem;}

/* Die Wandtextur im Hero fuellt die linke Flaeche auch auf breiten Schirmen.
   Die Breite waechst mit dem Fenster, faellt aber nie unter die Herohoehe,
   damit unten nichts abschneidet. */
.startbuehne{
  background:var(--grund) url("../img/textur-weisse-wand.png") left top / max(50%,790px) auto no-repeat;
}

/* --------------------------------------------------------------------------
   Buehne der Unterseiten
   Statt zweier Radien laeuft die Entwurfskontur unten durch. Die Maske ist
   hoeher als die Flaeche und unten verankert, dadurch bleibt die Oberkante
   gerade und nur die untere Schwingung ist sichtbar.
   Overlay wie im Entwurf: 50 Prozent auf #161514.
   -------------------------------------------------------------------------- */
.buehne{
  border-radius:0;
  -webkit-mask-image:var(--form-svg);
  mask-image:var(--form-svg);
  -webkit-mask-size:100% calc(100% + 190px);
  mask-size:100% calc(100% + 190px);
  -webkit-mask-position:center bottom;
  mask-position:center bottom;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.buehne::after{
  background:rgba(22,21,20,0.5);
}

/* --------------------------------------------------------------------------
   Schaltflaechen mit der Buttonkontur aus dem Entwurf
   -------------------------------------------------------------------------- */
:root{
  --form-taste:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 186.012 35.072' preserveAspectRatio='none'%3E%3Cpath d='M181.724,33.715c2.586-.417,4.019-2.117,3.253-4.53-.767-11.974,4.481-26.241-3.253-27.236C159.3-.938,137.112.259,114.391.181L60.333.008,30,.095C23.781.114.856,0,.682,2.132.171,2.628.85,12.211,0,17.454l.567,9.828L.378,30.237A6.007,6.007,0,0,0,.567,32.35C3.042,35.944,45,34.943,45,34.943l39.465-.2c10.809-.135,36.443,0,36.443,0,10.211-.116,23.605-.126,34.31,0l11.911-.213S179.139,34.131,181.724,33.715Z' fill='black'/%3E%3C/svg%3E");
}
.taste,
button.taste,
.senden{
  border-radius:0;
  -webkit-mask-image:var(--form-taste);
  mask-image:var(--form-taste);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}

/* Absendeknopf und Knopf in der Schublade nicht ueber die volle Breite ziehen,
   sonst wird die Buttonkontur flach gezogen */
.formular > .taste,
.formular button.taste{justify-self:start;width:auto;}
.schublade .taste{display:inline-block;width:auto;}

/* Knopf im Hero eine Spur kleiner */
.startbuehne .taste{
  font-size:0.9rem;
  padding:0.7rem 1.15rem;
}

/* --------------------------------------------------------------------------
   Feste Menuleiste am unteren Bildschirmrand
   Punkte in der Entwurfsform, die beim Darueberfahren aufklappen. Der Punkt
   der aktuellen Seite ist dauerhaft offen und rot.
   -------------------------------------------------------------------------- */
.leiste{
  position:fixed;left:50%;bottom:clamp(1rem,2.5vh,1.8rem);
  transform:translateX(-50%);
  z-index:70;display:flex;gap:clamp(0.45rem,0.9vw,0.8rem);
  padding:0;margin:0;list-style:none;
}
.leiste li{display:block;filter:drop-shadow(0 10px 26px rgba(22,21,20,0.22));}
.leiste a{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:3.4rem;height:3.4rem;
  background:#fff;color:var(--stumm);
  border-radius:0;
  -webkit-mask-image:var(--form-taste);
  mask-image:var(--form-taste);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  transition:width 520ms var(--schwung),background 380ms var(--schwung),color 380ms var(--schwung);
}
.leiste a:hover,
.leiste a:focus-visible,
.leiste a.aktiv{width:9.4rem;background:var(--rot);color:#fff;}
.leiste .zeichen{
  position:relative;z-index:2;display:flex;
  transition:transform 380ms var(--schwung),opacity 300ms var(--schwung);
}
.leiste .zeichen svg{width:1.45rem;height:1.45rem;display:block;}
.leiste a:hover .zeichen,
.leiste a:focus-visible .zeichen,
.leiste a.aktiv .zeichen{transform:scale(0.4);opacity:0;}
.leiste .wort{
  position:absolute;z-index:2;
  font-family:var(--schrift);font-weight:700;font-size:0.86rem;
  letter-spacing:0.04em;text-transform:uppercase;color:#fff;
  transform:scale(0.4);opacity:0;
  transition:transform 420ms var(--schwung) 90ms,opacity 320ms var(--schwung) 90ms;
  white-space:nowrap;
}
.leiste a:hover .wort,
.leiste a:focus-visible .wort,
.leiste a.aktiv .wort{transform:none;opacity:1;}

/* Platz fuer die Leiste, damit sie den Fuss nicht verdeckt */
.fuss{padding-bottom:clamp(5.5rem,9vh,7rem);}

@media (max-width:900px){
  .leiste{gap:0.35rem;bottom:0.7rem;}
  .leiste a{width:2.7rem;height:2.7rem;}
  .leiste a:hover,
  .leiste a:focus-visible,
  .leiste a.aktiv{width:7rem;}
  .leiste .zeichen svg{width:1.2rem;height:1.2rem;}
  .leiste .wort{font-size:0.7rem;letter-spacing:0.02em;}
}
@media (prefers-reduced-motion:reduce){
  .leiste a,.leiste .zeichen,.leiste .wort{transition:none;}
}

/* Pfeile am Objektlaufband in derselben Form statt als Kreise */
.pfeiltaste{
  border-radius:0;
  -webkit-mask-image:var(--form-taste);
  mask-image:var(--form-taste);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  box-shadow:none;
  filter:drop-shadow(0 6px 18px rgba(22,21,20,0.22));
  width:3.2rem;height:3.2rem;
}

/* Buehne der Unterseiten: seitlich nichts abschneiden, nur die Unterkante
   traegt die Kontur. Dafuer ist die Maske auch breiter als die Flaeche. */
.buehne{
  -webkit-mask-size:calc(100% + 260px) calc(100% + 190px);
  mask-size:calc(100% + 260px) calc(100% + 190px);
  -webkit-mask-position:center bottom;
  mask-position:center bottom;
}
/* --------------------------------------------------------------------------
   Untere Menuleiste vorerst ausgeblendet
   Markup und Stile bleiben stehen, eine Zeile schaltet sie wieder ein.
   -------------------------------------------------------------------------- */
.leiste{display:none;}
.fuss{padding-bottom:clamp(2rem,3.5vw,2.6rem);}

/* --------------------------------------------------------------------------
   Serviceleiste ueber der Navigation
   Duenne dunkle Zeile mit Anschrift, Mailadresse und Rufnummer. Beim Scrollen
   faehrt sie ein, danach steht nur noch die Navigation im Kopf.
   -------------------------------------------------------------------------- */
:root{--dienst:2.1rem;}

.kopf{display:block;height:auto;transition:box-shadow 420ms var(--schwung);}
.kopf-innen{height:var(--kopfhoehe);}
.kopf.eng{box-shadow:0 12px 30px rgba(22,21,20,0.10);}

.dienst{
  background:var(--tief);color:rgba(255,255,255,0.6);
  font-size:0.72rem;letter-spacing:0.01em;overflow:hidden;max-height:var(--dienst);
  transition:max-height 520ms var(--schwung),opacity 380ms var(--schwung);
}
.kopf.eng .dienst{max-height:0;opacity:0;}
.dienst-innen{
  width:min(100% - (2 * var(--rand)),1460px);margin-inline:auto;height:var(--dienst);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  white-space:nowrap;
}
.dienst-innen > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.dienst .rechts{display:flex;align-items:center;gap:clamp(0.9rem,1.8vw,1.6rem);flex:0 0 auto;}
.dienst a{color:rgba(255,255,255,0.78);transition:color 260ms var(--schwung);}
.dienst a:hover{color:#fff;}
.dienst b{font-weight:700;}
.dienst b a{color:#fff;}

/* Die Schublade beginnt unter dem gesamten Kopf, im eingefahrenen Zustand
   unter der Navigationszeile. */
.schublade{top:calc(var(--kopfhoehe) + var(--dienst));}
.kopf.eng ~ .schublade{top:var(--kopfhoehe);}

/* Auf schmalen Schirmen bleibt nur die Rufnummer stehen */
@media (max-width:1100px){
  .dienst-innen > span:first-child{display:none;}
  .dienst-innen{justify-content:flex-end;}
}
@media (prefers-reduced-motion:reduce){
  .dienst{transition:none;}
}

/* --------------------------------------------------------------------------
   Nachbesserungen
   -------------------------------------------------------------------------- */
/* In den Stellenzeilen greift sonst der Abstand von .text h3 und schiebt die
   Beschriftung aus der Mitte der Kontur. */
.stelle h3{margin-top:0;}

/* Der Fuss endet mit seiner Flaeche, darunter folgt kein leerer Rand mehr. */
.fuss{padding-bottom:0;}

/* --------------------------------------------------------------------------
   Rhythmus im Fliesstext
   Eine Ueberschrift gehoert zum Text darunter, deshalb rueckt der folgende
   Absatz naeher heran, waehrend der Abstand zum vorherigen Block waechst.
   -------------------------------------------------------------------------- */
.text h2{margin-top:clamp(3.2rem,6vw,4.6rem);}
.text h3{margin-top:clamp(2.4rem,4vw,3.2rem);}
.text h2:first-child,
.text h2.h2:first-child{margin-top:0;}
.text h2 + *,
.text h3 + *{margin-top:0.65rem;}

/* Der Aufruf zur Anfrage sitzt naeher am Text darueber */
.band{margin-top:clamp(1.8rem,3.2vw,2.8rem);}

/* --------------------------------------------------------------------------
   Kopfzeile
   Der Anfrageknopf ist eine Flaeche, keine Verweiszeile, er bekommt beim
   Darueberfahren also keinen Unterstrich.
   -------------------------------------------------------------------------- */
.menue > a.taste::after{display:none;}

/* --------------------------------------------------------------------------
   Kleines Megamenue fuer die Leistungen
   Zwei Spalten in der Entwurfskontur statt einer schmalen Liste.
   -------------------------------------------------------------------------- */
@media (min-width:1101px){
  .menue .klapp{
    width:min(40rem,80vw);min-width:0;left:-1.4rem;top:calc(100% + 0.7rem);
    background:transparent;box-shadow:none;border-radius:0;
    padding:clamp(1.2rem,1.8vw,1.6rem) clamp(1.3rem,2vw,1.8rem);
    display:grid;grid-template-columns:1fr 1fr;gap:0.1rem clamp(1rem,1.6vw,1.6rem);
  }
  .menue .klapp::before{
    content:"";position:absolute;inset:0;z-index:0;background:var(--blatt);
    -webkit-mask-image:var(--form-svg);
    mask-image:var(--form-svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
  }
  .menue .klapp a{
    position:relative;z-index:1;padding:0.5rem 0.7rem;border-radius:0;
    transition:color 260ms var(--schwung),transform 320ms var(--schwung);
  }
  .menue .klapp a:hover{transform:translateX(3px);}
  .menue .klapp a:first-child{
    grid-column:1 / -1;color:var(--rot);font-size:0.95rem;padding-bottom:0.9rem;
  }
  .menue .klapp a:first-child:hover{transform:none;color:var(--tief);}
}

/* Die Stellenzeilen liegen im Fliesstext, behalten aber ihre eigene Ausrichtung */
.text .stelle h3{margin-top:0;}
.text .stelle h3 + *{margin-top:0.2rem;}

/* --------------------------------------------------------------------------
   Nachtrag zur Kopfzeile und zum Textrhythmus
   -------------------------------------------------------------------------- */
/* Der Schlagschatten liegt dauerhaft unter dem Kopf, nicht erst beim Scrollen */
.kopf{box-shadow:0 12px 30px rgba(22,21,20,0.10);}

/* Auch die grossen Zwischenueberschriften der uebrigen Unterseiten binden
   sich an ihren Text. Nur die erste Ueberschrift einer Spalte bleibt oben
   buendig. */
.text h2.h2{margin-top:clamp(3.2rem,6vw,4.6rem);}
.text h2.h2:first-child{margin-top:0;}
/* Im zweispaltigen Textteil traegt die Ueberschrift ausserdem den knappen
   Abstand nach unten. Freistehende Ueberschriften vor Kachelgittern und
   Galerien behalten ihren grosszuegigen Abstand. */
.zwei .text h2.h2{margin-bottom:0.65rem;}

/* --------------------------------------------------------------------------
   Megamenue der Leistungen mit Bildern
   Aufbau wie die Kacheln unter Was wir fuer Sie ausfuehren, nur kompakter.
   Das Feld haengt an der Menuezeile und richtet sich rechts an ihr aus.
   -------------------------------------------------------------------------- */
@media (min-width:1101px){
  .menue{position:relative;}
  .menue > .punkt{position:static;}

  .menue .klapp{
    left:auto;right:-0.7rem;
    width:min(62rem,calc(100vw - (2 * var(--rand))));
    top:calc(100% + 0.75rem);
    grid-template-columns:repeat(4,1fr);
    gap:0.3rem clamp(0.8rem,1.3vw,1.3rem);
    padding:clamp(1.3rem,2vw,1.9rem) clamp(1.4rem,2.2vw,2rem) clamp(1.5rem,2.4vw,2.1rem);
  }
  /* Unsichtbare Bruecke, damit der Zeiger die Luecke queren kann */
  .menue .klapp::after{
    content:"";position:absolute;left:0;right:0;top:-1.1rem;height:1.1rem;
  }
  .menue .klapp a{
    padding:0.35rem 0.35rem 0.5rem;font-size:0.88rem;line-height:1.3;font-weight:700;
  }
  .menue .klapp a:hover{transform:none;color:var(--rot);}
  .menue .klapp .bildchen{
    display:block;aspect-ratio:16/10;overflow:hidden;margin-bottom:0.6rem;
    background:var(--anthrazit);
    -webkit-mask-image:var(--form-svg);
    mask-image:var(--form-svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
  }
  .menue .klapp .bildchen img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 900ms var(--schwung);
  }
  .menue .klapp a:hover .bildchen img{transform:scale(1.06);}
  .menue .klapp a:first-child{
    grid-column:1 / -1;color:var(--rot);font-size:0.95rem;padding-bottom:0.8rem;
  }
  .menue .klapp a:first-child:hover{color:var(--tief);}
}

/* --------------------------------------------------------------------------
   Nachtraege
   -------------------------------------------------------------------------- */
/* Der Unterstrich des Menuepunkts Leistungen gehoert unter das Wort. Weil der
   Punkt fuer das Megamenue nicht mehr als Bezug dient, bekommt der Verweis
   selbst wieder einen. */
@media (min-width:1101px){
  .menue > .punkt > a{position:relative;}
}

/* Hinweis auf freiwillige Angaben in den Gruppentiteln des Formulars */
.gruppentitel .freiwillig{
  font-weight:500;color:var(--stumm);font-size:0.92rem;letter-spacing:0;
}

/* ==========================================================================
   Mobil
   Unter 1100 Pixeln steht alles untereinander. Die Regeln hier stehen bewusst
   am Ende, weil einige spaetere Nachbesserungen sonst zurueckschlagen.
   ========================================================================== */
@media (max-width:1100px){
  /* Die Buehne bekommt ihre Hoehe vom Inhalt, nicht vom Fenster. Sonst zieht
     die Mindesthoehe die Bildreihe auf und das Seitenverhaeltnis rechnet das
     Foto ueber den Bildschirmrand hinaus. */
  .startbuehne{overflow:hidden;}
  .startbuehne .raster{min-height:0;row-gap:0;}

  /* Foto von Kante zu Kante */
  .startbuehne .foto{
    grid-column:1;grid-row:1;align-self:start;
    width:calc(100% + (2 * var(--rand)));
    margin-inline:calc(-1 * var(--rand));
    aspect-ratio:16/10;height:auto;
  }

  /* Die Textflaeche laeuft an beiden Seiten aus dem Bild heraus, damit von der
     Kontur nur die gerade Mitte zu sehen ist und keine angeschnittene Rundung. */
  .startbuehne .startkarte{
    --ueberstand:clamp(2.5rem,9vw,4rem);
    grid-column:1;grid-row:2;justify-self:start;
    width:calc(100% + (2 * var(--rand)) + (2 * var(--ueberstand)));
    margin:-2.5rem 0 0 calc(-1 * (var(--rand) + var(--ueberstand)));
    padding:clamp(2rem,7vw,2.8rem) calc(var(--rand) + var(--ueberstand)) clamp(1.8rem,6vw,2.4rem);
  }
  .startbuehne h1{font-size:clamp(1.9rem,8.2vw,2.6rem);max-width:none;}
  .startbuehne .satz{font-size:0.96rem;margin-top:1.1rem;}
  .startbuehne .taste{margin-top:1.3rem;}
}

/* Objektlaufband: die Kacheln richten sich auf schmalen Schirmen nach der
   Fensterbreite, sonst passt nicht einmal eine ganze Kachel ins Bild. */
@media (min-width:761px) and (max-width:1100px){
  .objektkachel{height:clamp(190px,26vw,260px);}
  .objektkachel.schmal{width:clamp(200px,26vw,280px);}
  .objektkachel.mittel{width:clamp(270px,36vw,380px);}
  .objektkachel.breit{width:clamp(340px,48vw,500px);}
}
@media (max-width:760px){
  .objektkachel{height:clamp(150px,44vw,210px);}
  .objektkachel.schmal{width:clamp(150px,40vw,190px);}
  .objektkachel.mittel{width:clamp(210px,56vw,265px);}
  .objektkachel.breit{width:clamp(260px,72vw,335px);}
  .objektkachel .info b{font-size:0.92rem;}
  .objektkachel .info span{font-size:0.8rem;}
  .objektkachel .info{padding:0.7rem 0.8rem;}

  /* Ueberschriften eine Stufe kleiner, 32 Pixel wirken auf dem Telefon wuchtig */
  .h2{font-size:clamp(1.6rem,7.2vw,2.1rem);}
  .text h2.h2{font-size:clamp(1.6rem,7.2vw,2.1rem);}

  /* Unterschriftszeile: Logo, Strich und Namenszug passen sonst nicht nebeneinander */
  .unterschrift{flex-wrap:wrap;gap:0.7rem 0.9rem;}
  .unterschrift img.name{height:1.6rem;}

  /* Kachelbeschriftungen und Fliesstext etwas ruhiger setzen */
  .karte h3{font-size:1rem;}
  .karte p{font-size:0.9rem;}
  .guete b{font-size:1rem;}
  .guete span{font-size:0.9rem;}
}

@media (max-width:760px){
  /* Eingabefelder mindestens 16 Pixel, sonst zoomt iOS beim Antippen in die
     Seite hinein und der Besucher landet in einer verschobenen Ansicht. */
  .feld input,
  .feld select,
  .feld textarea,
  .formular input,
  .formular select,
  .formular textarea{font-size:1rem;}

  /* Etwas mehr Griff fuer Finger */
  .feld input,
  .feld select{padding-block:0.8rem;}
  .zustimmung{gap:0.8rem;}
  .fuss ul{gap:1.1rem;}
  .fuss-schluss{flex-direction:column;align-items:flex-start;gap:0.6rem;}
}

/* Auf Tabletbreiten wuerde ein Foto im Format 16 zu 10 die halbe Seite fuellen,
   deshalb liegt es dort flacher. */
@media (min-width:761px) and (max-width:1100px){
  .startbuehne .foto{aspect-ratio:2/1;}
}

/* Serviceleiste auf dem Telefon: nur die Rufnummer, dafuer lesbar gross und
   mit genug Flaeche zum Antippen. */
@media (max-width:560px){
  :root{--dienst:2.5rem;}
  .dienst{font-size:0.82rem;}
  .dienst-innen .rechts > a[href^="mailto"]{display:none;}
  .dienst b a{display:inline-flex;align-items:center;height:2.5rem;padding-inline:0.2rem;}
}

/* ==========================================================================
   Kopfzeile ohne Umschalten
   Vorher wurde die Serviceleiste per Klasse zusammengeklappt. Weil sie im
   Fluss steht, wurde die Seite dabei um ihre Hoehe kuerzer, der Inhalt rutschte
   nach oben, die Scrollposition kippte ueber die Schaltgrenze zurueck und das
   Ganze schaukelte sich zum Flackern auf. Jetzt klebt der Kopf um die Hoehe der
   Leiste versetzt: die Leiste rollt beim Scrollen einfach aus dem Bild, die
   Navigationszeile bleibt stehen. Nichts schaltet, nichts springt.
   ========================================================================== */
.kopf{top:calc(-1 * var(--dienst));}
.kopf .dienst{max-height:none;opacity:1;}

/* Die Schublade legt sich jetzt ueber die ganze Flaeche und laesst oben Platz
   fuer den Kopf, damit sie nicht von seiner Hoehe abhaengt. */
.schublade{
  inset:0;
  padding-top:calc(var(--kopfhoehe) + var(--dienst) + 1.5rem);
}

/* Sprungmarken landen nicht mehr unter der Kopfzeile */
html{scroll-padding-top:calc(var(--kopfhoehe) + 1rem);}

/* Zwei Abschnitte hintereinander stapeln sonst zweimal die volle Luft
   uebereinander, das reisst die Seite auseinander. */
.luft + .luft{padding-top:clamp(2rem,4vw,3.4rem);}

/* ==========================================================================
   Ergänzungen für WordPress
   Die Formulare senden jetzt wirklich, dafür brauchen sie ein Dateifeld,
   ein verstecktes Feld gegen Bots und eine Zeile für Rückmeldungen.
   ========================================================================== */
.ablage input[type="file"]{
  display:block;margin:0.6rem auto 0.4rem;max-width:100%;
  font-size:0.88rem;color:var(--stumm);
}
.ablage input[type="file"]::file-selector-button{
  font:inherit;font-weight:700;color:#fff;background:var(--rot);
  border:0;border-radius:var(--form-klein);
  padding:0.5rem 0.9rem;margin-right:0.8rem;cursor:pointer;
}
.ablage input[type="file"]::file-selector-button:hover{background:#9E0009;}

/* Der Honigtopf steht im Quelltext, aber nie im Bild. Bots füllen ihn aus,
   Menschen sehen ihn gar nicht erst. */
.honigtopf{
  position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none;
}

/* Rückmeldung nach dem Absenden */
.fehler{
  border-radius:var(--form-klein);
  padding:0.9rem 1.2rem;margin-bottom:1.4rem;max-width:72ch;
  font-size:0.92rem;line-height:1.55;
  color:#8A2A20;background:rgba(194,0,11,0.08);
}
.formularflaeche > .merk{margin-bottom:1.4rem;}

/* Beiträge, die WordPress im Editor erzeugt, bleiben im Textfluss lesbar */
.text img{border-radius:var(--form-bild);}
.text figure{margin:1.4rem 0;}
.text figcaption{font-size:0.88rem;color:var(--stumm);margin-top:0.5rem;}

/* --------------------------------------------------------------------------
   Nachtraege nach der Kundendurchsicht
   -------------------------------------------------------------------------- */

/* Die Klinkersteine behalten ihr Seitenverhaeltnis. Aus WordPress bringt das
   Bild eigene Hoehenangaben mit, ohne diese Zeile wuerde es gestaucht. */
.gruende .steine img{height:auto;}

/* Auf schmalen Geraeten wirkt die organische Kontur unruhig, weil viele
   kleine Flaechen dicht untereinander stehen. Dort uebernimmt die ruhigere
   Buttonkontur alle Flaechen. Eine Zeile schaltet das wieder um. */
@media (max-width:1100px){
  :root{--form-svg:var(--form-taste);}
}
/* --------------------------------------------------------------------------
   Eigene Kontur fuer die Tafel
   Die Tafel steht mobil hochkant: bei 375 Pixeln misst sie 330 auf 3023, bei
   1024 Pixeln 913 auf 2020. Die uebrigen Konturen sind quer angelegt und
   wuerden dabei um ein Vielfaches gedehnt, die Ecken fransen dann aus.
   Diese Kontur ist selbst hochkant gezeichnet, im Verhaeltnis eins zu viereinhalb.
   Dadurch bleibt die Abweichung in beiden Faellen klein und die Schwingung
   ruhig. Der Strich folgt dem Entwurf: weiche Ecken, flache Wellen, leicht
   unregelmaessig statt geometrisch exakt.
   -------------------------------------------------------------------------- */
:root{
  --form-tafel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 1530' preserveAspectRatio='none'%3E%3Cpath d='M54,3 C120,1 200,8 286,5 C310,6 336,30 337,66 C339,300 332,520 337,760 C339,1000 331,1230 336,1466 C337,1502 312,1526 284,1527 C200,1529 120,1522 56,1525 C26,1524 2,1500 3,1464 C1,1230 9,1000 4,760 C1,520 9,300 5,64 C6,30 28,4 54,3 Z' fill='black'/%3E%3C/svg%3E");
}
@media (max-width:1100px){
  .tafel{
    border-radius:0;
    -webkit-mask-image:var(--form-tafel);
    mask-image:var(--form-tafel);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
  }
}
/* --------------------------------------------------------------------------
   Mobiles Menue: Leistungen einklappbar, Knopf mit eigenem Mass
   Der Knopf erbte bisher Schriftgrad und Innenabstand vom Menuelink. Dadurch
   stand der Text ohne seitlichen Abstand und lief ueber die Kontur hinaus.
   Und weil die Leistungen immer ausgeklappt waren, rutschte er unter die
   Falz. Beides ist hier geregelt.
   -------------------------------------------------------------------------- */
.schublade .taste{
  font-size:0.95rem;
  font-weight:700;
  line-height:1;
  padding:0.82rem 1.3rem;
}

/* Zeile mit Text links und Schalter rechts */
.schublade .klapper{
  display:flex;align-items:center;justify-content:space-between;gap:0.6rem;
}
.schublade .klapper > a{flex:1 1 auto;}
.schublade .klappe{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:2.8rem;height:2.8rem;margin-right:-0.6rem;
  background:none;border:0;padding:0;cursor:pointer;color:var(--tief);
}
.schublade .klappe::before{
  content:"";display:block;width:0.62rem;height:0.62rem;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:translateY(-0.18rem) rotate(45deg);
  transition:transform 320ms var(--schwung);
}
.schublade .klappe[aria-expanded="true"]::before{
  transform:translateY(0.1rem) rotate(-135deg);
}
.schublade .unter[hidden]{display:none;}
/* --------------------------------------------------------------------------
   Unterschriftszeile
   Die Regel fuer Bilder im Textbereich rundet auch das Logo ab. Logos tragen
   nie eine Rundung, deshalb hier die Ausnahme. Und die Zeile bleibt einzeilig:
   Logo, Strich und Namenszug werden mit der Fensterbreite kleiner, statt
   untereinander zu rutschen.
   -------------------------------------------------------------------------- */
.unterschrift img,
.fuss img,
.kopf .zeichen img{border-radius:0;}

@media (max-width:760px){
  .unterschrift{flex-wrap:nowrap;gap:0.55rem;}
  .unterschrift img,
  .unterschrift .strich{height:clamp(1.3rem,7.2vw,2.125rem);}
  .unterschrift img.name{height:clamp(1rem,5.8vw,1.9rem);}
}
/* --------------------------------------------------------------------------
   Formulare bleiben im Rahmen
   Im Raster darf ein Feld von sich aus nicht schmaler werden als sein Inhalt.
   Das Auswahlfeld und das Dateifeld bringen eine Mindestbreite von gut 310
   Pixeln mit und ziehen damit die ganze Spalte ueber die Flaeche hinaus.
   Mit einer ausdruecklichen Null als Untergrenze duerfen sie schrumpfen.
   -------------------------------------------------------------------------- */
.formular{grid-template-columns:minmax(0,1fr);}
.formular > *,
.paar > *,
.feld > *,
.wahlreihe > *{min-width:0;}
.formular input,
.formular select,
.formular textarea{min-width:0;max-width:100%;}
.ablage input[type="file"]{max-width:100%;box-sizing:border-box;}
/* Die eingebettete Karte fuellt ihre Flaeche wie ein Bild. */
.kartenfeld iframe{display:block;width:100%;height:100%;border:0;}
/* --------------------------------------------------------------------------
   Rechenaufgabe gegen Spam
   Die Aufgabe steht links, das Eingabefeld daneben und bleibt schmal, damit
   klar ist, dass dort nur eine Zahl hingehoert.
   -------------------------------------------------------------------------- */
.formular .rechnung .aufgabe{
  display:flex;align-items:center;gap:0.7rem;
}
.formular .rechnung .aufgabe b{
  font-weight:800;font-size:1.05rem;white-space:nowrap;
}
.formular .rechnung .aufgabe input{
  width:5.5rem;flex:0 0 auto;text-align:center;
}
/* Die Bestaetigung nach dem Absenden ist jetzt die Hauptrueckmeldung, sie
   bleibt auf der Seite stehen statt auf eine Dankeseite zu leiten. */
.formularflaeche > .merk{
  border-radius:var(--form-klein);
  padding:0.95rem 1.2rem;margin-bottom:1.4rem;max-width:72ch;
  font-size:0.95rem;line-height:1.55;font-weight:700;
  color:#1C5134;background:rgba(28,81,52,0.1);
}
/* Die Rueckmeldungen stehen ueber dem Formular und richten sich nach dessen
   Breite, sonst kleben sie am linken Rand der Flaeche. */
.formularflaeche > .merk,
.formularflaeche > .fehler{
  max-width:640px;
  margin-inline:auto;
}
/* Das schwebende Cookie-Symbol von CCM19 ausblenden. Die Einstellungen
   oeffnet stattdessen der Link im Fussbereich. CCM19 setzt eigene Regeln
   mit hoher Gewichtung, deshalb hier mit Nachdruck. */
.ccm-settings-summoner{display:none !important;}