/* Joiner GmbH – Stylesheet im Joiner-Markenauftritt
   Farben aus Logo und Flyern: Joiner-Blau, Anthrazit, Weiß, Hellgrau
   Schriften lokal eingebunden (keine Verbindung zu Google) */

@font-face{font-family:"Adventor";src:url("fonts/adventor-regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Adventor";src:url("fonts/adventor-bold.woff") format("woff");font-weight:700;font-display:swap}

:root{
  --blau:#1463F6;
  --blau-dunkel:#0B4FD6;
  --anthrazit:#232428;
  --tiefe:#16171A;
  --weiss:#FFFFFF;
  --hellgrau:#EDF2FC;   /* zartes Blau statt Grau */
  --grau-text:#4A4C52;
  --linie:#DCE4F2;
  --schrift:"Adventor","Century Gothic","Avant Garde","Segoe UI",Arial,sans-serif;
  --schmal:"Adventor","Century Gothic","Avant Garde",Arial,sans-serif;
  --breite:74rem;
  --rand:clamp(1.25rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--weiss);color:var(--anthrazit);font-family:var(--schrift);font-size:1.05rem;line-height:1.7}
img,svg{display:block;max-width:100%}
a{color:var(--blau)}
a:hover{color:var(--blau-dunkel)}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--anthrazit);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
p{margin:0 0 1em;max-width:38em}
h1,h2,h3{margin:0 0 .5em;line-height:1.05}

.innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}

/* Zweizeilige Markenüberschrift wie auf den Flyern: erste Zeile anthrazit, zweite blau */
.marke{font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.marke .z1,.marke .z2{display:block}
.marke .z2{color:var(--blau)}
h1.marke{font-size:clamp(2.5rem,6.6vw,5.6rem);margin-bottom:1.5rem}
h2.marke{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:1.25rem}
h2.einfach{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;text-transform:uppercase}

/* Kopfzeile */
.kopf{background:rgba(255,255,255,.96);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--linie);backdrop-filter:blur(6px)}
.kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.75rem}
.logo img{height:2.4rem;width:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:1.9rem}
.nav a{font-weight:700;font-size:.98rem;color:var(--anthrazit);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--blau)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--blau)}
.menue-knopf{display:none;font:700 .98rem var(--schrift);background:none;border:2px solid var(--anthrazit);color:var(--anthrazit);padding:.35rem .9rem;border-radius:6px;cursor:pointer}

/* Knöpfe */
.knopf{display:inline-block;font-weight:700;font-size:1rem;line-height:1;padding:1rem 1.5rem;border-radius:6px;text-decoration:none;border:2px solid transparent;text-align:center}
.knopf-blau{background:var(--blau);color:#fff}
.knopf-blau:hover{background:var(--blau-dunkel);color:#fff}
.knopf-rahmen{border-color:var(--anthrazit);color:var(--anthrazit)}
.knopf-rahmen:hover{border-color:var(--blau);color:var(--blau)}
.knopf-hell{background:#fff;color:var(--anthrazit)}
.knopf-hell:hover{background:var(--hellgrau);color:var(--anthrazit)}
.nav .knopf{padding:.75rem 1.1rem;color:#fff}
.nav .knopf:hover{color:#fff}
.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* Bühne: Überschrift oben, Foto wächst aus dem Weiß heraus (wie auf den Flyern) */
.buehne{padding-top:clamp(3rem,7vw,5.5rem)}
.buehne .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--grau-text);max-width:34em}
.buehne-foto{margin-top:clamp(-1rem,-2vw,0rem);position:relative}
.buehne-foto img{width:100%;height:clamp(18rem,42vw,34rem);object-fit:cover;object-position:center 60%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%)}

/* Abschnitte */
.abschnitt{padding:clamp(3.5rem,8vw,6.5rem) 0}
.abschnitt-grau{background:var(--hellgrau)}
.intro{margin-bottom:2.75rem}
.intro p{color:var(--grau-text)}

/* Leistungen / Vorteile: Icon im grauen Kreis, blauer Strich, Titel schmal in Versalien */
.punkte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 3.5rem}
.punkte.einspaltig{grid-template-columns:1fr;gap:2rem;max-width:40rem}
.punkt{display:grid;grid-template-columns:4.75rem 1fr;gap:1.4rem;align-items:start}
.punkt .icon{width:4.75rem;height:4.75rem;border-radius:50%;background:var(--hellgrau);display:grid;place-items:center;color:var(--blau)}
.abschnitt-grau .punkt .icon{background:#fff}
.punkt .icon svg{width:2.6rem;height:2.6rem}
.punkt .text{border-left:3px solid var(--blau);padding-left:1.25rem;min-height:4.75rem}
.punkt h3{font-family:var(--schmal);font-size:1.45rem;text-transform:uppercase;letter-spacing:.02em;margin:0 0 .3rem;line-height:1.1}
.punkt p{margin:0;color:var(--grau-text);font-size:.97rem;line-height:1.65}

/* Zwei Spalten */
.spalten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.foto-rund img{width:100%;border-radius:10px;object-fit:cover}
.haken{list-style:none;margin:0;padding:0}
.haken li{padding:.75rem 0 .75rem 2rem;position:relative;border-bottom:1px solid var(--linie)}
.haken li::before{content:"";position:absolute;left:.1rem;top:1.05rem;width:1rem;height:.55rem;border-left:3px solid var(--blau);border-bottom:3px solid var(--blau);transform:rotate(-45deg)}

/* Nebenjob-Teaser auf der Startseite: Text oben, Foto wächst unten aus dem Grau */
.nebenjob{background:var(--hellgrau)}
.nebenjob .text{padding:clamp(3.5rem,8vw,6rem) 0 1rem;align-items:end}
.nebenjob .bild img{width:100%;height:clamp(15rem,30vw,27rem);object-fit:cover;object-position:center 72%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 12%,#000 55%);mask-image:linear-gradient(to bottom,transparent 12%,#000 55%)}

/* Ablauf (echte Reihenfolge) */
.ablauf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--schritte,4),1fr);gap:2rem;counter-reset:schritt}
.ablauf li{counter-increment:schritt;background:#fff;border-radius:10px;padding:1.75rem 1.5rem;border-top:4px solid var(--blau)}
.abschnitt:not(.abschnitt-grau) .ablauf li{background:var(--hellgrau)}
.ablauf li::before{content:counter(schritt);font-weight:700;font-size:2.4rem;line-height:1;color:var(--blau);display:block;margin-bottom:.9rem}
.ablauf h3{font-family:var(--schmal);font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.4rem}
.ablauf p{margin:0;font-size:.95rem;color:var(--grau-text)}

/* Hinweis-Band */
.band{background:var(--blau);color:#fff;padding:clamp(2.75rem,6vw,4rem) 0}
.band .innen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.band h2{margin:0 0 .35rem;font-size:clamp(1.6rem,3.4vw,2.5rem);text-transform:uppercase;font-weight:700}
.band p{margin:0;opacity:.92}

/* Seitenkopf der Unterseiten ohne Foto */
.seitenkopf{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem)}
.seitenkopf .lead{font-size:1.15rem;color:var(--grau-text);max-width:34em}

/* Kontakt */
.karten{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.kontakt-karte{background:var(--hellgrau);border-radius:10px;padding:clamp(1.75rem,3vw,2.5rem);border-top:4px solid var(--blau)}
.kontakt-karte h2{font-size:1.6rem;text-transform:uppercase;font-weight:700}
.kontakt-daten{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 2rem}
.kontakt-daten dt{font-family:var(--schmal);font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em}
.kontakt-daten dd{margin:0}

/* Rechtstexte */
.rechtstext{max-width:46rem}
.rechtstext h2{font-size:1.4rem;margin-top:2.2em}
.rechtstext p{color:var(--grau-text)}

/* Platzhalter – vor Veröffentlichung ersetzen */
.platzhalter{background:#FFF1BF;color:var(--anthrazit);border-bottom:2px dashed #E0A800;padding:0 .25em;font-style:italic}

/* Fußzeile */
.fuss{background:var(--tiefe);color:#E7E8EA;padding:3.75rem 0 2rem;font-size:.95rem}
.fuss a{color:#E7E8EA;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss-raster{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem}
.fuss .logo img{height:2.2rem;margin-bottom:1rem}
.fuss h2{font-family:var(--schmal);font-size:1.15rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.7rem;color:#fff}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.4rem}
.fuss-unten{border-top:1px solid rgba(255,255,255,.15);padding-top:1.25rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;color:#A9ACB2}
.fuss-unten a{color:#A9ACB2}

/* Mobil */
@media (max-width:56rem){
  .menue-knopf{display:block}
  .nav{position:relative}
  .nav ul{display:none;position:absolute;right:0;top:calc(100% + .9rem);flex-direction:column;align-items:stretch;gap:1rem;background:#fff;border:1px solid var(--linie);box-shadow:0 12px 30px rgba(22,23,26,.12);border-radius:10px;padding:1.25rem 1.5rem;min-width:15rem}
  .nav.offen ul{display:flex}
  .punkte{grid-template-columns:1fr;gap:2rem}
  .spalten,.karten{grid-template-columns:1fr}
  .ablauf{grid-template-columns:1fr 1fr}
  .nebenjob .bild img,.buehne-foto img.breit{height:auto;aspect-ratio:1024/335;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}
  .fuss-raster{grid-template-columns:1fr}
}
@media (max-width:32rem){
  .ablauf{grid-template-columns:1fr}
  .punkt{grid-template-columns:3.75rem 1fr;gap:1rem}
  .punkt .icon{width:3.75rem;height:3.75rem}
  .punkt .icon svg{width:1.8rem;height:1.8rem}
  .kontakt-daten{grid-template-columns:1fr;gap:0}
  .kontakt-daten dd{margin-bottom:.7rem}
  .knoepfe .knopf{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* =====================================================================
   Aufbau nach Referenz: Held mit Grafik, Kachel-Mosaik, Vorteile,
   Einsatzbereiche, Smartphone, Region, FAQ, Fragen-Box
   ===================================================================== */

/* Held (Seitenanfang) */
.held{position:relative;overflow:hidden;padding:clamp(3rem,7vw,5.5rem) 0}
.held .innen{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;position:relative;z-index:1}
.held h1.marke{font-size:clamp(2.4rem,5.4vw,4.6rem);margin-bottom:1.25rem}
.held h1.satz{font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:700;line-height:1.08;margin-bottom:1.25rem}
.held .lead{font-size:clamp(1.02rem,1.5vw,1.15rem);color:var(--grau-text);max-width:32em}
.held-start{min-height:calc(100vh - 4.75rem);min-height:calc(100svh - 4.75rem);display:flex;align-items:center}
.held-start .innen{width:100%}
.held-blau{background:var(--blau);color:#fff}
.held-blau .lead{color:rgba(255,255,255,.88)}
.held-blau .knopf-blau{background:#fff;color:var(--blau)}
.held-blau .knopf-blau:hover{background:var(--hellgrau);color:var(--blau-dunkel)}
.held-ring::before{content:"";position:absolute;width:clamp(24rem,46vw,44rem);aspect-ratio:1;border-radius:50%;
  border:clamp(3rem,6vw,5.5rem) solid #E8F0FE;left:clamp(-16rem,-14vw,-7rem);bottom:clamp(-20rem,-18vw,-9rem)}
.held-blau.held-ring::before{border-color:rgba(255,255,255,.08)}
.knopf-dunkel{background:var(--anthrazit);color:#fff}
.knopf-dunkel:hover{background:#000;color:#fff}

/* Kachel-Mosaik statt Foto */
.mosaik{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.2vw,.9rem)}
.kachel{aspect-ratio:1;border-radius:14px;padding:clamp(.9rem,1.6vw,1.3rem);display:flex;flex-direction:column;justify-content:space-between;
  text-decoration:none;color:var(--anthrazit);background:var(--hellgrau);min-width:0}
.kachel.breit{grid-column:span 2;aspect-ratio:auto}
.kachel svg{width:clamp(1.9rem,3vw,2.6rem);height:auto}
.kachel span{font-family:var(--schmal);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(.95rem,1.45vw,1.25rem);line-height:1.1}
.kachel.blau{background:var(--blau);color:#fff}
.kachel.dunkel{background:var(--anthrazit);color:#fff}
.kachel.hellblau{background:#DCE8FD;color:var(--blau)}
.kachel.hellblau span{color:var(--anthrazit)}
.kachel.ring{background:#E8F0FE;color:var(--blau);display:grid;place-items:center}
.kachel.ring svg{width:66%;height:auto}
.kachel.ring i{display:block;width:62%;aspect-ratio:1;border-radius:50%;border:clamp(.9rem,1.6vw,1.3rem) solid var(--blau)}
.held-blau .kachel{background:rgba(255,255,255,.12);color:#fff}
.held-blau .kachel.weiss{background:#fff;color:var(--blau)}
.held-blau .kachel.weiss span{color:var(--anthrazit)}
.held-blau .kachel.dunkel{background:var(--anthrazit)}
.held-blau .kachel.ring{background:rgba(255,255,255,.12)}
.held-blau .kachel.ring{color:#fff}

/* Abschnitts-Kopf zentriert */
.kopf-mitte{text-align:center;max-width:44rem;margin:0 auto clamp(2.5rem,5vw,3.5rem)}
.kopf-mitte p{margin:0 auto;color:var(--grau-text)}
.kopf-mitte h2.marke{margin-bottom:1rem}

/* Vorteile / Kennzahlen: Icon oben, Text darunter */
.vorteile{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.vorteil{text-align:center;padding:clamp(1.5rem,2.5vw,2rem) clamp(1rem,2vw,1.5rem);border-radius:14px;background:var(--hellgrau)}
.abschnitt-grau .vorteil{background:#fff}
.vorteil .icon{width:4.5rem;height:4.5rem;margin:0 auto 1.1rem;border-radius:50%;background:var(--blau);color:#fff;display:grid;place-items:center}
.vorteil .icon svg{width:2.2rem;height:2.2rem}
.vorteil h3{font-family:var(--schmal);font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.45rem}
.vorteil p{margin:0 auto;font-size:.95rem;color:var(--grau-text);line-height:1.6}

/* Einsatzbereiche als farbige Banner-Kacheln */
.banner{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.banner li{border-radius:14px;padding:clamp(1.5rem,2.5vw,2rem);min-height:13.5rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;background:var(--hellgrau)}
.banner li:nth-child(6n+1){background:var(--blau);color:#fff}
.banner li:nth-child(6n+2){background:var(--anthrazit);color:#fff}
.banner li:nth-child(6n+3){background:#DCE8FD}
.banner li:nth-child(6n+4){background:var(--blau-dunkel);color:#fff}
.banner li:nth-child(6n+5){background:var(--anthrazit);color:#fff}
.banner li:nth-child(6n+6){background:var(--blau);color:#fff}
.banner svg{width:2.6rem;height:2.6rem}
.banner li:nth-child(6n+3) svg{color:var(--blau)}
.banner h3{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:700;text-transform:uppercase;margin:0 0 .4rem;line-height:1.1}
.banner p{margin:0;font-size:.95rem;line-height:1.6;opacity:.9}
.mitte-knopf{text-align:center;margin-top:clamp(2rem,4vw,3rem)}
.mitte-knopf .knoepfe{justify-content:center;margin-top:0}

/* Smartphone-Abschnitt */
.handy-spalten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.handy{width:min(17rem,70vw);margin:0 auto;aspect-ratio:9/18.5;border-radius:2.6rem;background:var(--anthrazit);padding:.75rem;box-shadow:0 30px 60px -20px rgba(20,99,246,.35)}
.handy-screen{height:100%;border-radius:2rem;background:#fff;padding:1.4rem 1.1rem;display:flex;flex-direction:column;gap:.9rem;overflow:hidden}
.handy-screen .logo-klein{height:1.3rem;width:auto;align-self:flex-start}
.handy-screen b{font-family:var(--schmal);text-transform:uppercase;font-size:1.05rem;letter-spacing:.03em}
.handy-kal{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.handy-kal i{aspect-ratio:1;border-radius:50%;background:#DCE4F2}
.handy-kal i.an{background:var(--blau)}
.handy-kal i.halb{background:#BFD4FD}
.handy-zeile{height:2.6rem;border-radius:10px;background:var(--hellgrau);display:flex;align-items:center;gap:.6rem;padding:0 .7rem}
.handy-zeile::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--blau);flex:none}
.handy-zeile::after{content:"";height:.45rem;border-radius:4px;background:#CBD8F0;flex:1}
.handy-zeile.aus::before{background:#B9C6DF}

/* Region */
.region{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;background:var(--hellgrau);border-radius:14px;padding:clamp(1.75rem,4vw,3rem)}
.region .icon{width:5.5rem;height:5.5rem;border-radius:50%;background:var(--blau);color:#fff;display:grid;place-items:center}
.region .icon svg{width:2.6rem;height:2.6rem}
.region h2{margin:0 0 .35rem}
.region p{margin:0;color:var(--grau-text)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chips span{background:#fff;border-radius:999px;padding:.35rem 1rem;font-weight:700;font-size:.92rem}

/* FAQ */
.faq{max-width:50rem;margin:0 auto;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.3rem 0;font-weight:700;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--hellgrau);color:var(--blau);display:grid;place-items:center;transition:transform .2s ease,background-color .2s ease}
.faq summary .plus svg{width:1.1rem;height:1.1rem}
.faq details[open] summary .plus{transform:rotate(45deg);background:var(--blau);color:#fff}
.faq summary:hover{color:var(--blau)}
.faq .antwort{padding:0 3.5rem 1.4rem 0;color:var(--grau-text)}
.faq .antwort p{margin:0}

/* Fragen-Box am Seitenende */
.fragen{background:var(--anthrazit);color:#fff;border-radius:14px;padding:clamp(2rem,5vw,3.5rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.fragen h2{margin:0 0 .4rem;font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;text-transform:uppercase}
.fragen p{margin:0;color:#C9CBD0}

/* Fußzeile mit drei Spalten wie Referenz: Seiten, Rechtliches, Social */
.folge a{display:inline-flex;align-items:center;gap:.5rem}

@media (max-width:56rem){
  .held .innen,.handy-spalten{grid-template-columns:1fr}
  .held-start{min-height:0}
  .banner{grid-template-columns:1fr 1fr}
}
@media (max-width:36rem){
  .banner{grid-template-columns:1fr}
  .banner li{min-height:0}
  .region{grid-template-columns:1fr}
  .faq .antwort{padding-right:0}
}
@media (prefers-reduced-motion:reduce){.faq summary .plus{transition:none}}
@media (min-width:64rem){.vorteile.fuenf{grid-template-columns:repeat(5,1fr);gap:1.1rem}.vorteile{grid-template-columns:repeat(4,1fr)}}

/* ===== Foto-Mosaik rechts neben der Überschrift ===== */
.fotomosaik{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1.25fr 1fr;gap:clamp(.5rem,1vw,.8rem);
  height:clamp(24rem,40vw,34rem)}
.fotomosaik .foto{margin:0;border-radius:14px;overflow:hidden;background:var(--hellgrau);min-width:0;min-height:0}
.fotomosaik .foto img{width:100%;height:100%;object-fit:cover;display:block}
.fotomosaik .f1{grid-column:1 / span 4}
.fotomosaik .f2{grid-column:5 / span 2}
.fotomosaik .f3{grid-column:1 / span 2}
.fotomosaik .f4{grid-column:3 / span 2}
.fotomosaik .f5{grid-column:5 / span 2}
.held-blau .fotomosaik .foto{box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
@media (max-width:56rem){.fotomosaik{height:clamp(20rem,70vw,30rem)}}
@media (max-width:36rem){
  .fotomosaik{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:9.5rem;height:auto}
  .fotomosaik .f1{grid-column:1 / span 2;grid-row:span 1}
  .fotomosaik .f2,.fotomosaik .f3,.fotomosaik .f4,.fotomosaik .f5{grid-column:auto}
  .fotomosaik .f5{display:none}
}
.held .innen:has(.fotomosaik){grid-template-columns:.9fr 1.1fr}
.fotomosaik{grid-template-rows:1.2fr 1fr;height:clamp(24rem,36vw,31rem)}
@media (max-width:56rem){.held .innen:has(.fotomosaik){grid-template-columns:1fr}}
@media (max-width:36rem){
  .fotomosaik{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:9.5rem;height:auto}
  .fotomosaik .f1{grid-column:1 / span 2}
  .fotomosaik .f2,.fotomosaik .f3,.fotomosaik .f4,.fotomosaik .f5{grid-column:auto;display:block}
}

/* ===== Startseite: großes Logo links, großes Foto rechts bis zum Rand ===== */
.held-foto{display:grid;grid-template-columns:44fr 56fr;min-height:calc(100vh - 4.75rem);min-height:calc(100svh - 4.75rem);position:relative;overflow:hidden}
.held-foto::before{content:"";position:absolute;width:clamp(24rem,40vw,40rem);aspect-ratio:1;border-radius:50%;
  border:clamp(3rem,5.5vw,5rem) solid #E8F0FE;left:clamp(-16rem,-14vw,-7rem);bottom:clamp(-20rem,-17vw,-9rem)}
.held-foto-text{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,4rem) clamp(2.5rem,6vw,4.5rem) max(var(--rand),calc((100vw - var(--breite))/2 + var(--rand)))}
.logo-gross{margin:0 0 clamp(1.75rem,3.5vw,2.75rem)}
.logo-gross img{width:100%;max-width:36rem;height:auto;margin-left:-.4rem}
.marke.slogan{font-size:clamp(1.5rem,2.5vw,2.2rem);margin:0 0 .9rem}
.held-foto-text .lead{font-size:clamp(1.02rem,1.4vw,1.15rem);color:var(--grau-text);max-width:28em;margin:0}
.held-foto-bild{margin:0;position:relative}
.held-foto-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
@media (max-width:56rem){
  .held-foto{grid-template-columns:1fr;min-height:0}
  .held-foto-text{padding:clamp(2rem,6vw,3rem) var(--rand)}
  .logo-gross img{max-width:26rem}
  .held-foto-bild img{position:static;height:clamp(16rem,62vw,26rem)}
}

/* ===== Personal anfragen: andere Anordnung der Fotos ===== */
.fotomosaik.variante-b{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);height:clamp(26rem,40vw,34rem)}
.fotomosaik.variante-b .f1{grid-column:1 / span 2;grid-row:1 / span 3}
.fotomosaik.variante-b .f2{grid-column:3 / span 2;grid-row:1}
.fotomosaik.variante-b .f3{grid-column:3;grid-row:2}
.fotomosaik.variante-b .f4{grid-column:4;grid-row:2}
.fotomosaik.variante-b .f5{grid-column:3 / span 2;grid-row:3}
@media (max-width:36rem){
  .fotomosaik.variante-b{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:9.5rem;height:auto}
  .fotomosaik.variante-b .f1{grid-column:1;grid-row:span 2}
  .fotomosaik.variante-b .f2,.fotomosaik.variante-b .f3,.fotomosaik.variante-b .f4{grid-column:auto;grid-row:auto}
  .fotomosaik.variante-b .f5{grid-column:1 / span 2;grid-row:auto}
}
.held-foto-text{padding-right:clamp(1.5rem,2.8vw,2.5rem)}
.held-foto-bild img{object-position:40% 72%}
@media (max-width:56rem){.held-foto-text{padding-right:var(--rand)}}

/* ===== Startseite: Fotostreifen ganz links, Logo in der Mitte, großes Foto rechts ===== */
.held-foto.mit-streifen{grid-template-columns:clamp(7.5rem,11vw,10.5rem) 40fr 56fr}
.held-foto.mit-streifen::before{display:none}
.held-streifen{display:grid;grid-template-rows:repeat(4,1fr);gap:.5rem;padding:.5rem .5rem .5rem 0;min-height:0}
.held-streifen figure{margin:0;border-radius:0 12px 12px 0;overflow:hidden;min-height:0;background:var(--hellgrau)}
.held-streifen img{width:100%;height:100%;object-fit:cover;display:block}
.mit-streifen .held-foto-text{padding-left:clamp(2rem,4.5vw,4.5rem)}
.mit-streifen .lead{font-size:clamp(1.05rem,1.5vw,1.25rem)}
@media (max-width:56rem){
  .held-foto.mit-streifen{grid-template-columns:1fr}
  .held-streifen{order:3;grid-template-rows:none;grid-template-columns:repeat(4,1fr);padding:.5rem 0 0;gap:.4rem}
  .held-streifen figure{border-radius:0;aspect-ratio:1}
  .mit-streifen .held-foto-text{order:1;padding-left:var(--rand)}
  .mit-streifen .held-foto-bild{order:2}
}

/* ===== Startseite: Format wie Nebenjob, Teppich-Foto als Blickfang ===== */
.held-start .lead{font-size:clamp(1.05rem,1.5vw,1.25rem)}
.held-start .logo-gross{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.fotomosaik.variante-start{grid-template-rows:1.7fr 1fr;height:clamp(26rem,40vw,36rem)}
@media (max-width:36rem){
  .fotomosaik.variante-start{grid-template-rows:none;height:auto}
  .fotomosaik.variante-start .f1{grid-row:span 2}
}
/* Blickfang über die ganze Breite, die vier anderen Fotos in einer Reihe darunter */
.fotomosaik.variante-start{grid-template-columns:repeat(4,1fr);grid-template-rows:2.1fr 1fr}
.fotomosaik.variante-start .f1{grid-column:1 / span 4}
.fotomosaik.variante-start .f2{grid-column:1}
.fotomosaik.variante-start .f3{grid-column:2}
.fotomosaik.variante-start .f4{grid-column:3}
.fotomosaik.variante-start .f5{grid-column:4}
@media (max-width:36rem){
  .fotomosaik.variante-start{grid-template-columns:repeat(4,1fr);grid-template-rows:auto;grid-auto-rows:auto;height:auto}
  .fotomosaik.variante-start .f1{grid-column:1 / span 4;grid-row:auto;height:14rem}
  .fotomosaik.variante-start .f2,.fotomosaik.variante-start .f3,.fotomosaik.variante-start .f4,.fotomosaik.variante-start .f5{aspect-ratio:1;grid-column:auto}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fotomosaik.variante-start{grid-template-rows:1.45fr 1fr}
/* Blickfang im breiten Format, damit beide Empfangstresen sichtbar bleiben */
.fotomosaik.variante-start{height:auto;grid-template-rows:auto clamp(9rem,13vw,12rem)}
.fotomosaik.variante-start .f1{aspect-ratio:2/1}
@media (max-width:36rem){.fotomosaik.variante-start{grid-template-rows:auto}.fotomosaik.variante-start .f1{height:auto}}
/* Überschrift als ganzer Satz: kleiner und ohne Versalien, damit sie gut lesbar bleibt */
.kopf-mitte h2.einfach{max-width:20ch;margin-left:auto;margin-right:auto}

/* Region-Block braucht eigenen Abstand, wenn davor ein weißer Abschnitt steht */
.abschnitt + .abschnitt[style]{padding-top:0}

/* Social-Media-Logos in der Fußzeile */
.social{display:flex;gap:.75rem}
.social li{margin:0}
.social a{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background-color .2s ease}
.social a:hover{background:var(--blau);color:#fff}
.social svg{width:1.4rem;height:1.4rem}

/* Abschnittsüberschriften linksbündig statt mittig */
.kopf-mitte{text-align:left;margin-left:0}
.kopf-mitte p{margin-left:0}
.kopf-mitte h2.einfach,.kopf-mitte h2.marke{margin-left:0;margin-right:0}
.faq{margin-left:0}
.mitte-knopf{text-align:center}
.mitte-knopf .knoepfe{justify-content:center}
.kopf-mitte h2.einfach{max-width:26ch}

/* Auch die Überschriften in den Kästen starten an derselben Kante wie die Seitentexte */
.region{grid-template-columns:1fr;gap:1.25rem;padding:clamp(1.75rem,3.5vw,2.5rem);
  margin-left:calc(-1 * clamp(1.75rem,3.5vw,2.5rem));margin-right:calc(-1 * clamp(1.75rem,3.5vw,2.5rem))}
.fragen{padding:clamp(2rem,4vw,3rem);margin-left:calc(-1 * clamp(2rem,4vw,3rem));margin-right:calc(-1 * clamp(2rem,4vw,3rem))}
@media (max-width:56rem){
  .region,.fragen{margin-left:0;margin-right:0}
}

/* ===== Kontaktformular ===== */
.formular{max-width:48rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem}
.feld{margin:0 0 1.15rem;max-width:none}
.feld label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.4rem}
.feld input,.feld select,.feld textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--anthrazit);background:#fff;
  border:2px solid var(--linie);border-radius:8px;padding:.7rem .9rem;transition:border-color .15s ease}
.feld textarea{resize:vertical;min-height:7rem}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:#B9C9E8}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--blau);outline:none;box-shadow:0 0 0 3px rgba(20,99,246,.18)}
.feld input::placeholder,.feld textarea::placeholder{color:#8F96A3}
.feld select{appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231463F6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:1.1rem}
.einwilligung label{display:flex;align-items:flex-start;gap:.7rem;font-weight:400;font-size:.95rem;line-height:1.55}
.einwilligung input{width:1.25rem;height:1.25rem;flex:none;margin-top:.15rem;accent-color:var(--blau)}
.formular .knoepfe{margin-top:1.5rem}
.formular button.knopf{cursor:pointer;font-family:inherit}
@media (max-width:44rem){.feld-reihe{grid-template-columns:1fr}}