/* Zweites Stylesheet nach styles.css (Denny). Farbe und Schrift: SET7 (Familjen Grotesk,
   Overpass Mono, Nacht/Papier/Licht). Aufbau, Verlaeufe je Abschnitt, Rhythmus und Bewegung.
   Eigener Code, keine Bibliothek. */

:root{
  --kurve:cubic-bezier(.4,0,.2,1);
  --pad-w:clamp(24px,5.6vw,80px);
  --kopf-tiefe:var(--kopf-h);
  --ts:16%;
}
:root[data-fassung="hell"]{--ts:22%}
html{scroll-behavior:auto}

/* ---------- Pfeil ↗ als Maske, Farbe folgt dem Text ---------- */
.hauptnav a::after,.w-mehr::after,.kontaktknopf span::after{content:"";display:inline-block;width:.62em;height:.62em;margin-left:.4em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3 2h5v5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3 2h5v5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat}
.hauptnav a{display:flex;align-items:center}
.menu[open] .hauptnav a{justify-content:space-between}

/* ---------- Kopf auf der Startseite: durchsichtig, darunter laufender Inhalt wird unscharf ---------- */
.seitenkopf{background:transparent;box-shadow:none}
.seitenkopf::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 28px);z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--grund) 78%,transparent) 0,color-mix(in srgb,var(--grund) 78%,transparent) 62%,transparent 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 66%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 66%,transparent 100%)}
.menu[open] .hauptnav{background:color-mix(in srgb,var(--grund) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

.wrap{max-width:none;padding-inline:var(--pad-w)}

/* ---------- Fester Kontaktknopf: Quadrat mit der Diagonale der 7 ---------- */
.kontaktknopf{position:fixed;z-index:40;right:clamp(14px,2.4vw,36px);bottom:clamp(14px,2.4vw,36px);display:grid;align-content:start;width:104px;height:104px;padding:16px 0 0 16px;
  clip-path:polygon(0 0,100% 0,100% 56%,56% 100%,0 100%);text-decoration:none;font:600 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:#17131f;color:#f5eee8;transition:transform .6s var(--kurve)}
:root:not([data-fassung="hell"]) .kontaktknopf{background:#f0913f;color:#17131f}
.kontaktknopf:hover{transform:scale(1.06)}
.kontaktknopf:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--akzent)}
.kontaktknopf span{display:block;white-space:nowrap}
@media (max-width:640px){.kontaktknopf{width:76px;height:76px;padding:10px 0 0 10px;font-size:9.5px;letter-spacing:.08em}.w-hero{padding-bottom:104px}}
body{padding-bottom:0}

/* ---------- Einblenden: erst blass und unscharf, dann klar ---------- */
.js .rv{opacity:0;filter:blur(10px);transform:translateY(22px);transition:opacity .8s var(--kurve),filter .8s var(--kurve),transform .8s var(--kurve)}
.js .rv.da{opacity:1;filter:none;transform:none}

/* ---------- Abschnitte mit eigenem Verlauf von oben nach unten ---------- */
.w-abschnitt,.w-hero{background:linear-gradient(180deg,var(--grund) 0,color-mix(in srgb,var(--t,#e0568b) var(--ts),var(--grund)) 100%)}
.w-abschnitt{padding-block:clamp(72px,10vw,150px)}
.w-in{max-width:none;margin:0 auto;padding-inline:var(--pad-w)}
.w-abschnitt h2{margin:0 0 .6em;max-width:14em;font:600 clamp(34px,4.3vw,62px)/1.1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.w-abschnitt .label{margin-bottom:14px}
.w-rechts{margin:0 0 clamp(40px,5vw,72px) auto;max-width:42em;text-align:right;font-size:clamp(16px,1.35vw,19px);line-height:1.55;text-wrap:pretty}
.w-ansatz{--t:#f0913f}
.w-zustaende{--t:var(--gedimmt)}
.w-leistungen{--t:#e0568b}
.w-zahlen{--t:#f0913f}
.w-zusagen{--t:var(--gedimmt)}
.w-stimmen{--t:#f0913f}
.w-kontakt{--t:#e0568b}

/* ---------- Knoepfe: schraeg wie die 7 ---------- */
.w-knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 38px;text-decoration:none;color:var(--schrift);font:600 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:transform .6s var(--kurve),color .3s var(--kurve)}
.w-knopf span{position:relative;z-index:1}
.w-knopf::before{content:"";position:absolute;inset:0;background:var(--schrift);transition:background-color .3s var(--kurve);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='7,1 99,1 93,99 1,99' fill='none' stroke='%23000' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='7,1 99,1 93,99 1,99' fill='none' stroke='%23000' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.w-knopf:hover{transform:scale(1.04)}
.w-knopf:focus-visible{outline:2px solid var(--akzent);outline-offset:5px}
.w-knopf--voll{color:var(--grund);clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}
.w-knopf--voll::before{-webkit-mask:none;mask:none}
.w-knopf--klein{min-height:44px;padding:12px 30px}

/* ---------- Hero: Wortbild mit dem 7-Fenster ---------- */
.w-hero{--t:#e0568b;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:min(calc(100svh - var(--kopf-h)),1100px);padding:clamp(16px,3vw,40px) var(--pad-w) clamp(48px,6vw,96px);text-align:center;overflow:hidden}
.w-eyebrow{margin:0 0 clamp(8px,1.4vw,20px);color:var(--gedimmt)}
.w-wort{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(10px,1.6vw,26px);width:100%;max-width:none}
/* Memo 2026-10-13: die 7 taugt nicht als Fenster, es wird die Sonne der Marke (voller Kreis, nie angeschnitten). */
.w-fenster{grid-column:2;grid-row:1;position:relative;width:clamp(250px,27vw,560px);aspect-ratio:1/1;background:var(--grund-2);clip-path:circle(50%)}
.w-fenster img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0}
.w-fenster img:nth-child(1){object-position:50% 42%}
.w-hero h1{display:contents}
.w-hero h1 > span{display:block;margin:0;font:600 clamp(30px,3.9vw,80px)/1.06 var(--display);letter-spacing:-.025em;text-wrap:balance}
.w-hero .w-l{grid-column:1;grid-row:1;text-align:right;transform-origin:100% 50%}
.w-hero .w-r{grid-column:3;grid-row:1;text-align:left;transform-origin:0 50%}
.w-lede{margin:clamp(22px,3vw,40px) 0 clamp(20px,2.4vw,30px);max-width:34em;font-size:clamp(16px,1.35vw,19px);line-height:1.5;text-wrap:pretty}
@media (prefers-reduced-motion:no-preference){
  /* Vier Szenen, jede 4,5 s. Die Schrift zieht sich zum Schnitt zusammen und gibt die Breite wieder frei:
     die Kernbewegung des Vorbilds, hier ohne Video aus vier Standbildern der Marke. */
  .w-fenster img{animation:w-szene 18s linear infinite}
  .w-fenster img:nth-child(2){animation-delay:4.5s}
  .w-fenster img:nth-child(3){animation-delay:9s}
  .w-fenster img:nth-child(4){animation-delay:13.5s}
  .w-hero h1 > span{animation:w-zieht 4.5s var(--kurve) infinite}
}
@media (prefers-reduced-motion:reduce){.w-fenster img:nth-child(1){opacity:1}}
@keyframes w-szene{0%,24.9%{opacity:1}25%,100%{opacity:0}}
@keyframes w-zieht{0%{transform:scaleX(.8)}14%,86%{transform:scaleX(1)}100%{transform:scaleX(.8)}}
@media (max-width:719px){
  .w-wort{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .w-hero .w-l{grid-column:1;grid-row:1;text-align:center;transform-origin:50% 50%}
  .w-fenster{grid-column:1;grid-row:2;justify-self:center;width:min(78vw,320px)}
  .w-hero .w-r{grid-column:1;grid-row:3;text-align:center;transform-origin:50% 50%}
  .w-hero h1 > span{font-size:clamp(30px,9vw,42px)}
}

/* ---------- Ansatz: vier Spalten mit Zeichen ---------- */
.w-spalten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.w-spalten li{padding:6px clamp(16px,1.8vw,28px) 0;border-left:1px solid color-mix(in srgb,var(--schrift) 30%,transparent)}
.w-spalten li:first-child{padding-left:0;border-left:0}
.w-marke{display:block;width:clamp(76px,7.4vw,108px);margin-bottom:clamp(28px,3.4vw,52px);color:var(--set7-licht-2)}
.w-marke svg{width:100%;height:auto}
.w-spalten h3{margin:0 0 .7em;font:600 clamp(20px,2vw,29px)/1.2 var(--display);letter-spacing:-.01em;text-wrap:balance}
.w-spalten p{margin:0;max-width:20em;font-size:clamp(15px,1.15vw,16.5px);line-height:1.55}
@media (max-width:959px){
  .w-spalten{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:40px}
  .w-spalten li:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width:559px){
  .w-spalten{grid-template-columns:minmax(0,1fr);row-gap:0}
  .w-spalten li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;padding:22px 0;border-left:0;border-top:1px solid color-mix(in srgb,var(--schrift) 30%,transparent)}
  .w-marke{grid-row:1/span 2;width:56px;margin:0;padding-top:2px}
}

/* ---------- Zustaende: Bilder im versetzten Raster ---------- */
.w-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(36px,5vw,80px) clamp(16px,2vw,32px);align-items:start}
.w-karte{display:block;text-decoration:none;color:inherit}
.w-karte--a{grid-column:1/7}
.w-karte--b{grid-column:8/13;margin-top:clamp(70px,11vw,180px)}
.w-karte--c{grid-column:3/10}
.w-karte picture{display:block;overflow:hidden}
.w-karte img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--kurve)}
.w-karte--a picture{aspect-ratio:4/3;clip-path:polygon(0 0,calc(100% - 18%) 0,100% 22%,100% 100%,0 100%)}
.w-karte--b picture{aspect-ratio:1/1;clip-path:polygon(0 0,100% 0,100% 100%,22% 100%,0 80%)}
.w-karte--c picture{aspect-ratio:16/9;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0)}
.w-kopfzeile{display:block;margin-top:20px;font:500 11px/1.6 var(--mono);letter-spacing:.14em;color:var(--gedimmt)}
.w-titel{display:block;margin-top:6px;font:600 clamp(24px,2.6vw,36px)/1.15 var(--display);letter-spacing:-.015em;text-wrap:balance}
.w-mehr{display:inline-flex;align-items:center;margin-top:14px;padding-block:12px;font:600 12px/1 var(--mono);letter-spacing:.12em}
@media (hover:hover){
  .w-karte:hover img{transform:scale(1.05)}
  .w-karte .w-mehr{opacity:.55;transition:opacity .3s var(--kurve) .2s}
  .w-karte:hover .w-mehr{opacity:1}
}
.w-karte:focus-visible{outline:2px solid var(--akzent);outline-offset:6px}
@media (max-width:719px){
  .w-raster{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .w-karte--a,.w-karte--c{grid-column:1}
  .w-karte--b{grid-column:1;margin-top:0;margin-left:14%}
  .w-karte--c{margin-right:10%}
}

/* ---------- Leistungen: drei Karten mit je eigener Farbe und Kante ---------- */
.w-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(36px,4.4vw,64px)}
.w-lk{padding:clamp(28px,3vw,44px) clamp(24px,2.6vw,40px) clamp(40px,4vw,64px);min-height:clamp(260px,26vw,400px);transition:transform .6s var(--kurve)}
.w-lk h3{margin:0 0 .6em;font:600 clamp(26px,2.9vw,40px)/1.1 var(--display);letter-spacing:-.02em}
.w-lk p{margin:0;max-width:24em;font-size:clamp(16px,1.25vw,18px);line-height:1.5}
.w-lk--1{background:color-mix(in srgb,#e0568b 30%,var(--grund));clip-path:polygon(0 0,100% 0,100% calc(100% - 64px),calc(100% - 64px) 100%,0 100%)}
.w-lk--2{background:color-mix(in srgb,#f0913f 34%,var(--grund));clip-path:polygon(0 0,calc(100% - 64px) 0,100% 64px,100% 100%,0 100%)}
.w-lk--3{background:color-mix(in srgb,var(--gedimmt) 22%,var(--grund));clip-path:polygon(64px 0,100% 0,100% 100%,0 100%,0 64px)}
@media (hover:hover){.w-lk:hover{transform:scale(1.03)}}
.w-weiter{margin:clamp(30px,3.6vw,52px) 0 0}
@media (max-width:899px){.w-karten{grid-template-columns:minmax(0,1fr)}.w-lk{min-height:0}}

/* ---------- Zahlen: zwei Spalten, Haarlinie unter jeder ---------- */
.w-zahlenliste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,120px);margin:clamp(24px,3vw,48px) 0 0}
.w-zahlenliste > div{display:grid;grid-template-columns:minmax(.9em,auto) minmax(0,1fr);align-items:end;column-gap:clamp(16px,2.4vw,40px);padding:clamp(26px,3vw,44px) 0 clamp(18px,2vw,28px);border-bottom:1px solid color-mix(in srgb,var(--schrift) 30%,transparent)}
.w-zahlenliste dt{margin:0}
.w-zahl{display:block;min-width:.9em;font:600 clamp(60px,8.6vw,124px)/.95 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--akzent)}
.w-zahlenliste dd{margin:0;padding-bottom:.5em;max-width:20em;font-size:clamp(15px,1.3vw,18px);line-height:1.4}
@media (max-width:759px){.w-zahlenliste{grid-template-columns:minmax(0,1fr)}}

/* ---------- Zusagen: horizontale Reihe mit Pfeilen ---------- */
.w-zusagen-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.w-zusagen-kopf h2{margin-bottom:clamp(28px,3vw,48px)}
.w-pfeile{display:flex;gap:10px;flex:0 0 auto;padding-top:8px}
.w-pfeile button{display:grid;place-items:center;width:48px;height:48px;padding:0;color:var(--schrift);background:none;border:1.5px solid var(--schrift);cursor:pointer;clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);transition:background-color .3s var(--kurve),color .3s var(--kurve)}
.w-pfeile button:hover{background:var(--schrift);color:var(--grund)}
.w-pfeile button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.w-pfeile svg{width:22px;height:22px}
.w-reihe{display:flex;gap:clamp(18px,2.4vw,36px);margin:0;padding:6px 0 18px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.w-reihe::-webkit-scrollbar{display:none}
.w-reihe:focus-visible{outline:2px solid var(--akzent);outline-offset:4px}
.w-reihe li{flex:0 0 min(560px,84vw);scroll-snap-align:start;padding:clamp(24px,2.6vw,40px) 0 0 clamp(20px,2.2vw,32px);border-left:2px solid var(--akzent)}
.w-reihe blockquote{margin:0;font:600 clamp(22px,2.3vw,32px)/1.25 var(--display);letter-spacing:-.015em;text-wrap:pretty}
.w-quelle{margin:22px 0 0;font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gedimmt)}

/* ---------- Kontakt: Text links, Formular mit Haarlinien rechts ---------- */
.w-kontakt-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,112px);align-items:start}
.w-lede-links{margin:0 0 1.2em;max-width:30em;font-size:clamp(17px,1.5vw,21px);line-height:1.5}
.w-kontakt .register{max-width:30em}
.w-formular{display:grid;gap:clamp(18px,2vw,28px);padding-top:6px}
.w-formular label{display:grid;gap:2px}
.w-formular label span{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gedimmt)}
.w-formular input,.w-formular textarea{width:100%;padding:12px 0 14px;font:400 18px/1.4 var(--display);color:var(--schrift);background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--schrift) 55%,transparent);border-radius:0;resize:vertical}
.w-formular input:focus-visible,.w-formular textarea:focus-visible{outline:0;border-bottom:2px solid var(--akzent);padding-bottom:13px}
.w-formular .w-knopf{justify-self:start;margin-top:8px;border:0;cursor:pointer;background:var(--schrift)}
.w-hinweis{margin:0;font:500 12px/1.6 var(--mono);letter-spacing:.06em;color:var(--gedimmt)}
@media (max-width:859px){.w-kontakt-raster{grid-template-columns:minmax(0,1fr)}}

/* ---------- Fuss ---------- */
/* Durchgang 2026-10-20: Zeichen 176 px statt bis 460, Claim eine Zeile, Seiten in zwei Spalten,
   Kleingedrucktes und Rechtliches in einer Leiste. Hoehe Desktop ca. 300 px statt 619. */
.fuss{border-top:1px solid var(--linie);font:400 clamp(15px,1.05vw,17px)/1.5 var(--display);color:var(--schrift)}
.fuss .fuss-in{display:grid;gap:0;padding-block:clamp(36px,3.6vw,56px) 0}
.fuss-oben{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px clamp(32px,5vw,96px);align-items:start;padding-bottom:clamp(28px,3vw,44px)}
.fuss-logo{--w:min(100%,clamp(150px,12.5vw,184px));display:block;width:var(--w);margin-left:calc(var(--w) * -.08);color:var(--schrift)}
.fuss-logo svg{display:block;width:100%;height:auto}
.fuss-claim{margin:18px 0 0;font:700 clamp(18px,1.4vw,22px)/1.2 var(--display);letter-spacing:-.01em}
.fuss-zeile{margin:.35em 0 0;color:var(--gedimmt);font-size:clamp(14px,.95vw,15.5px)}
.fuss-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:28px clamp(24px,3vw,48px);padding-top:4px}
.fuss-spalte{display:grid;gap:0;align-content:start}
.fuss-spalte p{margin:0}
.fuss-kopf{margin-bottom:8px!important;font:600 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gedimmt)}
.fuss-spalte a{display:flex;align-items:center;min-height:36px;color:var(--schrift);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.28em;overflow-wrap:anywhere;transition:text-decoration-color .18s ease}
.fuss-spalte a:hover{text-decoration-color:var(--akzent)}
.fuss-nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.fuss-nav .fuss-kopf{grid-column:1/-1}
.fuss-kleingedruckt{margin:0;padding-block:18px;border-top:1px solid var(--linie);font:400 clamp(13px,.9vw,14.5px)/1.5 var(--display);color:var(--gedimmt)}
@media (max-width:1099px){.fuss-oben{grid-template-columns:minmax(0,1fr)}.fuss-text{padding-top:0}}
@media (pointer:coarse),(max-width:659px){.fuss-spalte a{min-height:44px}}
@media (max-width:659px){.fuss-text{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:20px}.fuss-text > .fuss-spalte:first-child{grid-column:1/-1}.fuss-nav{grid-template-columns:minmax(0,1fr)}.fuss-nav .fuss-kopf{grid-column:auto}}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;filter:none;transform:none;transition:none}
  .w-knopf,.w-lk,.kontaktknopf,.w-karte img{transition:none}
  .w-hero h1 > span{animation:none}
}

/* ---------- Team: sieben Fotofelder im versetzten Raster (Platzhalter, Fotos folgen) ---------- */
.w-team-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,4vw,64px) clamp(14px,2vw,32px);align-items:start}
.w-foto{margin:0}
.w-feld{position:relative;display:grid;place-items:center;width:100%;background:color-mix(in srgb,var(--schrift) 11%,var(--grund));color:var(--gedimmt);text-align:center}
.w-feld::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 22px,color-mix(in srgb,var(--schrift) 8%,transparent) 22px 23px);pointer-events:none}
.w-feld span{position:relative;z-index:1;padding:8px 12px;color:var(--schrift);background:color-mix(in srgb,var(--grund) 70%,transparent);font:500 11px/1.5 var(--mono);letter-spacing:.12em}
.w-foto figcaption{margin-top:16px;max-width:26em;font-size:clamp(15px,1.15vw,16.5px);line-height:1.5}
.w-foto strong{display:block;margin-bottom:4px;font:600 clamp(20px,2vw,28px)/1.2 var(--display);letter-spacing:-.01em}
.w-foto--1{grid-column:1/5}.w-foto--1 .w-feld{aspect-ratio:4/5;clip-path:polygon(0 0,100% 0,100% 100%,18% 100%,0 82%)}
.w-foto--2{grid-column:5/9;margin-top:clamp(40px,8vw,130px)}.w-foto--2 .w-feld{aspect-ratio:1/1;clip-path:polygon(0 0,82% 0,100% 18%,100% 100%,0 100%)}
.w-foto--3{grid-column:9/13;margin-top:clamp(10px,2vw,30px)}.w-foto--3 .w-feld{aspect-ratio:4/5;clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%)}
.w-foto--4{grid-column:2/8}.w-foto--4 .w-feld{aspect-ratio:3/2;clip-path:polygon(0 0,100% 0,100% 100%,14% 100%,0 76%)}
.w-foto--5{grid-column:9/12;margin-top:clamp(30px,6vw,100px)}.w-foto--5 .w-feld{aspect-ratio:4/5;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,0 22%)}
.w-foto--6{grid-column:1/6}.w-foto--6 .w-feld{aspect-ratio:1/1;clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%)}
.w-foto--7{grid-column:7/13;margin-top:clamp(30px,6vw,100px)}.w-foto--7 .w-feld{aspect-ratio:3/2;clip-path:polygon(0 0,86% 0,100% 24%,100% 100%,0 100%)}
@media (max-width:719px){
  .w-team-raster{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:32px}
  .w-foto--1,.w-foto--3{grid-column:1/6}.w-foto--3{grid-column:2/7;margin-top:0}
  .w-foto--2,.w-foto--5{grid-column:1/4;margin-top:0}.w-foto--5{grid-column:4/7;margin-top:36px}
  .w-foto--4,.w-foto--7{grid-column:1/7;margin-top:0}.w-foto--6{grid-column:1/5}
}

/* ---------- Hell/Dunkel: nur ein Punkt in der Farbe des anderen Grundes ---------- */
.fassung,.fassung--leiste{width:44px;height:44px;margin:-16px -8px;padding:0;justify-content:center}
.fassung span{position:absolute;width:1px;height:1px;min-width:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:root[lang="en"] .fassung span{min-width:0}
.fassung::before{content:"";display:block;width:20px;height:20px;border-radius:50%;background:#f5eee8;box-shadow:0 0 0 1.5px var(--gedimmt);transition:transform .3s var(--kurve)}
:root[data-fassung="hell"] .fassung::before{background:#17131f}
.fassung:hover::before{transform:scale(1.18)}
.fassung:focus-visible{outline:2px solid var(--akzent);outline-offset:-2px}
@media (max-width:479px){
  .menu[open] .hauptnav .fassung:not([hidden]){width:44px;height:44px;margin:12px 0 0 -12px;padding:0;border:0;align-self:flex-start;justify-content:center}
}

/* ================= Unterseiten im Layout der Startseite (Memo: „die anderen bitte anpassen") ================= */
body[data-seite="kontakt"] .kontaktknopf{display:none}
/* Abschnitte: eigener Verlauf je Abschnitt, Tint wechselt Rosa, Orange, Grau */
main > .abschnitt{background:linear-gradient(180deg,var(--grund) 0,color-mix(in srgb,var(--t,#e0568b) var(--ts),var(--grund)) 100%);padding-block:clamp(72px,10vw,150px);border-top:0}
main > .abschnitt:nth-of-type(3n+1){--t:#e0568b}
main > .abschnitt:nth-of-type(3n+2){--t:#f0913f}
main > .abschnitt:nth-of-type(3n){--t:var(--gedimmt)}
main > .abschnitt.abschluss{--t:#e0568b}
main > .auftakt{padding-block:clamp(40px,6vw,96px) clamp(72px,9vw,128px)}
/* Titel wie auf der Startseite: Gewicht 600 */
.auftakt h1{margin:0 0 .45em;font:600 clamp(42px,5.8vw,84px)/1.04 var(--display);letter-spacing:-.03em;text-wrap:balance}
main > .abschnitt h2{margin:0 0 .6em;font:600 clamp(32px,4.1vw,60px)/1.1 var(--display);letter-spacing:-.02em;text-wrap:balance}
main > .enthalten h2,main > .danach h2,.zusage + h2{font-size:clamp(28px,3.2vw,46px)}
.auftakt .lede{margin:0 0 clamp(36px,4.4vw,64px) auto;max-width:34em;text-align:right;font-size:clamp(17px,1.5vw,21px);color:var(--schrift)}
.fluss{color:var(--schrift)}
/* Leistungen: vier Karten mit eigener Farbe und Kantenform, wie die drei der Startseite */
.reihe--weit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(24px,3vw,44px);border-top:0}
.reihe--weit > div{display:block;padding:clamp(28px,3vw,44px) clamp(24px,2.6vw,40px) clamp(40px,4vw,60px);border-bottom:0;min-height:clamp(220px,22vw,320px);transition:transform .6s var(--kurve)}
.reihe--weit dt{margin:0 0 .6em;font:600 clamp(24px,2.6vw,36px)/1.12 var(--display);letter-spacing:-.02em}
.reihe--weit dd{max-width:30em;color:var(--schrift);font-size:clamp(16px,1.25vw,18px);line-height:1.5}
.reihe--weit > div:nth-child(1){background:color-mix(in srgb,#e0568b 30%,var(--grund));clip-path:polygon(0 0,100% 0,100% calc(100% - 64px),calc(100% - 64px) 100%,0 100%)}
.reihe--weit > div:nth-child(2){background:color-mix(in srgb,#f0913f 34%,var(--grund));clip-path:polygon(0 0,calc(100% - 64px) 0,100% 64px,100% 100%,0 100%)}
.reihe--weit > div:nth-child(3){background:color-mix(in srgb,var(--gedimmt) 22%,var(--grund));clip-path:polygon(64px 0,100% 0,100% 100%,0 100%,0 64px)}
.reihe--weit > div:nth-child(4){background:color-mix(in srgb,#e0568b 18%,color-mix(in srgb,#f0913f 18%,var(--grund)));clip-path:polygon(0 0,100% 0,100% 100%,64px 100%,0 calc(100% - 64px))}
@media (hover:hover){.reihe--weit > div:hover{transform:scale(1.02)}}
@media (max-width:759px){.reihe--weit{grid-template-columns:minmax(0,1fr)}.reihe--weit > div{min-height:0}}
/* Linien und Zitate */
.register li,.schritte li,.frage,.ablauf li{border-color:color-mix(in srgb,var(--schrift) 28%,transparent)!important}
.enthalten,.fragen,.grenze-abschnitt,.danach,.verweis,.solo{border-top:0}
.register li:last-child,.schritte li:last-child{border-bottom-color:color-mix(in srgb,var(--schrift) 28%,transparent)}
.register--knapp li{color:var(--schrift)}
.solo .satz,.zusage .satz,.personen-schluss{font:600 clamp(26px,3.1vw,44px)/1.15 var(--display);letter-spacing:-.02em;max-width:22em;color:var(--schrift)}
.solo--spalte .satz{font-size:clamp(26px,3.1vw,44px)}
.personen-schluss{font-size:clamp(22px,2.2vw,32px)}
.frage p,.verweis p,.grenze-in p,.frage-schluss,.person-text,.ablauf p,.fluss{color:var(--schrift)}
/* So arbeiten wir: die Ablaufspur läuft jetzt über die volle Satzbreite */
.ablauf-abschnitt .ablauf h3{font-weight:600}
/* Über uns: Porträtfeld links, Name, Text */
.w-feld--person{aspect-ratio:4/5;max-width:300px;clip-path:polygon(0 0,100% 0,100% 100%,18% 100%,0 82%)}
.person:nth-of-type(even) .w-feld--person{clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%)}
@media (min-width:860px){.person{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);align-items:start}}
@media (max-width:859px){.w-feld--person{max-width:200px}}
.person h3{font-weight:600}
/* Kontaktseite: Text links, Formular rechts */
.kontaktseite .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,112px);align-items:start}
.kontaktseite .lede{margin-left:0;text-align:left}
.kontaktseite h2{font-size:clamp(24px,2.4vw,34px)!important;margin-bottom:.8em!important}
@media (max-width:859px){.kontaktseite .wrap{grid-template-columns:minmax(0,1fr)}}
/* Kontaktabschluss am Seitenende wie auf der Startseite */
.abschluss .lede{color:var(--schrift);text-align:left;margin-left:0}
/* Rechtstexte */
.text{background:linear-gradient(180deg,var(--grund) 0,color-mix(in srgb,#e0568b var(--ts),var(--grund)) 100%)}
.text article{max-width:62ch}
.text h1{font:600 clamp(36px,4.6vw,64px)/1.05 var(--display);letter-spacing:-.025em}

/* ================= Größen und Positionen skaliert (Denny, 2026-10-13: „Schriftgröße, Logogröße, Positionen analysieren und optimieren") =================
   Befund bei 1905 px: Logo 140 px und Navigation 12 px wirkten klein gegen eine Leiste, die 1745 px breit ist;
   Passend wären Navigation 18 px und Kopf 143 px. Titel standen bei 62 px (Deckel) und damit bei
   1905 px nur noch halb so groß im Verhältnis zur Zeile. Regel: bis 1440 px unverändert, darüber wachsen Kopf, Logo,
   Schriften und Abschnittsabstände mit der Breite (vw-Formeln bei 1440 px auf die bisherigen Werte geeicht), gedeckelt bei 2560 px. */
:root{--kopf-h:clamp(71px,5.2vw,112px);--zeichen-h:clamp(56px,3.9vw,84px)}
.hauptnav a,.menu summary,.fassung{font-size:clamp(12px,.9vw,17px)}
.sprache a{font-size:clamp(14px,1vw,19px)}
.eyebrow,.label,.rolle,.w-eyebrow{font-size:clamp(11px,.78vw,15px)}
.w-kopfzeile,.w-quelle,.w-formular label span,.w-feld span{font-size:clamp(11px,.78vw,14px)}
.kontaktknopf{width:clamp(104px,7.2vw,150px);height:clamp(104px,7.2vw,150px);padding:clamp(16px,1.1vw,22px) 0 0 clamp(16px,1.1vw,22px);font-size:clamp(11px,.8vw,15px)}
.w-knopf,.w-mehr{font-size:clamp(12px,.85vw,16px)}
.w-knopf{min-height:clamp(48px,3.4vw,64px);padding-inline:clamp(38px,2.7vw,56px)}
@media (min-width:1500px){
  main > .abschnitt,.w-abschnitt{padding-block:clamp(72px,10vw,200px)}
  .w-abschnitt h2,main > .abschnitt h2{font-size:clamp(34px,4.3vw,84px)}
  main > .enthalten h2,main > .danach h2{font-size:clamp(28px,3.2vw,64px)}
  .auftakt h1{font-size:clamp(42px,5.8vw,112px)}
  .w-rechts,.w-lede,.auftakt .lede{font-size:clamp(16px,1.35vw,26px)}
  .w-lede-links,.abschluss .lede{font-size:clamp(17px,1.5vw,29px)}
  .w-spalten h3{font-size:clamp(20px,2vw,40px)}
  .w-spalten p,.w-foto figcaption{font-size:clamp(15px,1.15vw,22px)}
  .w-lk h3,.reihe--weit dt{font-size:clamp(26px,2.9vw,56px)}
  .w-lk p,.reihe--weit dd{font-size:clamp(16px,1.25vw,24px)}
  .w-titel{font-size:clamp(24px,2.6vw,50px)}
  .w-zahl{font-size:clamp(60px,8.6vw,168px)}
  .w-zahlenliste dd{font-size:clamp(15px,1.3vw,25px)}
  .w-reihe blockquote{font-size:clamp(22px,2.3vw,44px)}
  .w-reihe li{flex-basis:min(560px,84vw)}
  .w-foto strong,.person h3{font-size:clamp(20px,2vw,40px)}
  .register li,.frage p,.verweis p,.grenze-in p,.person-text,.fluss{font-size:clamp(16px,1.3vw,25px)}
  .solo .satz,.zusage .satz{font-size:clamp(26px,3.1vw,60px)}
  .personen-schluss{font-size:clamp(22px,2.2vw,42px)}
  .frage h3{font-size:clamp(19px,1.6vw,32px)}
  .mail{font-size:clamp(24px,3.4vw,66px)}
  .w-formular input,.w-formular textarea{font-size:clamp(18px,1.25vw,24px)}
  .text p{font-size:clamp(17px,1.3vw,24px)}
}

/* Logo optisch ausgerichtet: die Buchstaben der Wortmarke sitzen im Zuschnitt 7 % der Boxhöhe unter der Mitte
   (Sonne und Schutzraum oben) und 8,5 % der Boxbreite rechts der Kante. Gemessen am Render bei 1905 px:
   Buchstabenmitte y 56,5 bei Leistenmitte 49,5, linke Kante x 99 bei Seitenrand 80. Beides ausgeglichen,
   damit Zeichen, Navigation und Inhalt auf derselben Linie stehen. */
.zeichen{margin-left:calc(var(--zeichen-h) * -.2564)}
.zeichen svg{transform:translateY(calc(var(--zeichen-h) * -.04))}

/* ================= Material von Rafiki und Texte von Marija (Aufträge #11, #13, #15, #18, #19) ================= */
/* Hero: Video im Kreisfenster, Szenenzeile darunter */
.w-fenster video,.w-fenster .w-poster{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.w-fenster .w-poster{display:none;opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){.w-fenster .w-poster{display:block}.w-video{display:none}}
.w-hero h1 > span{animation:none!important}
.w-szene{margin:clamp(14px,1.6vw,26px) 0 0;min-height:1.6em;font:500 clamp(11px,.8vw,15px)/1.6 var(--mono);letter-spacing:.14em;color:var(--gedimmt);text-align:center}
.w-szene + .w-lede{margin-top:clamp(14px,1.8vw,26px)}

/* So läuft es: Fotos statt Zeichen, Nummer mit durchlaufender Linie */
.w-ansatz .w-spalten--bild{align-items:start}
.w-nr{display:flex;align-items:center;gap:12px;margin:0 0 20px;font:500 clamp(11px,.8vw,14px)/1 var(--mono);letter-spacing:.14em;color:var(--akzent)}
.w-nr::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--schrift) 38%,transparent);margin-right:calc(-1 * clamp(16px,1.8vw,28px))}
.w-spalten--bild li:last-child .w-nr::after{margin-right:0;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.w-bild{position:relative;margin:0 0 clamp(18px,2vw,30px);width:100%;max-width:clamp(180px,17vw,360px);aspect-ratio:4/5}
.w-bild picture,.w-bild img{display:block;width:100%;height:100%}
.w-bild img{object-fit:cover}
.w-bild::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--schrift) 26%,transparent);pointer-events:none}
.w-bild--1,.w-bild--5{clip-path:polygon(0 0,100% 0,100% 100%,18% 100%,0 82%)}
.w-bild--2{clip-path:polygon(0 0,82% 0,100% 18%,100% 100%,0 100%)}
.w-bild--3{clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%)}
.w-bild--4{clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,0 18%)}
@media (max-width:559px){
  .w-spalten--bild li{grid-template-columns:96px minmax(0,1fr)}
  .w-spalten--bild .w-nr{grid-column:1/-1;margin-bottom:14px}
  .w-spalten--bild .w-bild{grid-row:2/span 2;grid-column:1;width:96px;margin:0}
  .w-spalten--bild h3,.w-spalten--bild p{grid-column:2}
}

/* Fälle */
.w-faelle{--t:#e0568b}
.w-faelle-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(44px,5.4vw,96px) clamp(16px,2vw,32px);align-items:start;margin-top:clamp(24px,3vw,48px)}
.w-fall{margin:0}
.w-fall--1{grid-column:1/6}.w-fall--2{grid-column:6/13;margin-top:clamp(40px,6vw,110px)}
.w-fall--3{grid-column:1/5}.w-fall--4{grid-column:5/10;margin-top:clamp(30px,4.6vw,80px)}
.w-fall--5{grid-column:10/13;margin-top:clamp(10px,2vw,30px)}.w-fall--6{grid-column:2/12}
.w-fall-bild{overflow:hidden;aspect-ratio:var(--ar);background:var(--grund-2)}
.w-fall-bild picture,.w-fall-bild img{display:block;width:100%;height:100%;object-fit:cover}
.w-fall-bild img{transition:transform .6s var(--kurve)}
.w-fall--1 .w-fall-bild{clip-path:polygon(0 0,82% 0,100% 18%,100% 100%,0 100%)}
.w-fall--2 .w-fall-bild{clip-path:polygon(0 0,100% 0,100% 100%,16% 100%,0 72%)}
.w-fall--3 .w-fall-bild{clip-path:polygon(0 0,100% 0,100% 84%,84% 100%,0 100%)}
.w-fall--4 .w-fall-bild{clip-path:polygon(16% 0,100% 0,100% 100%,0 100%,0 20%)}
.w-fall--5 .w-fall-bild{clip-path:polygon(0 0,100% 0,100% 100%,24% 100%,0 80%)}
.w-fall--6 .w-fall-bild{clip-path:polygon(0 0,88% 0,100% 40%,100% 100%,0 100%)}
@media (hover:hover){.w-fall:hover .w-fall-bild img{transform:scale(1.05)}}
.w-kurz{margin:8px 0 0;max-width:30em;font-size:clamp(15px,1.2vw,22px);line-height:1.5;text-wrap:pretty}
.w-fall .w-titel{font-size:clamp(22px,2.1vw,40px)}
@media (max-width:719px){
  .w-faelle-raster{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .w-fall--1,.w-fall--2,.w-fall--3,.w-fall--4,.w-fall--5,.w-fall--6{grid-column:1;margin-top:0}
  .w-fall--2,.w-fall--5{margin-left:12%}.w-fall--3,.w-fall--4{margin-right:10%}
}

/* Leistungen: vier Karten, drei mit Foto */
.w-karten--vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.w-karten--vier .w-lk{display:flex;flex-direction:column;padding:0;min-height:0}
.w-lk-bild{margin:0;aspect-ratio:4/5;overflow:hidden}
.w-lk-bild picture,.w-lk-bild img{display:block;width:100%;height:100%;object-fit:cover}
.w-lk-bild img{transition:transform .6s var(--kurve)}
@media (hover:hover){.w-lk:hover .w-lk-bild img{transform:scale(1.05)}}
.w-karten--vier .w-lk-text{padding:clamp(22px,2.2vw,38px) clamp(20px,2vw,34px) clamp(36px,3.6vw,56px)}
.w-karten--vier .w-lk h3{font-size:clamp(24px,2.3vw,44px)}
.w-karten--vier .w-lk p{font-size:clamp(15px,1.15vw,20px)}
@media (max-width:1099px){.w-karten--vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.w-karten--vier{grid-template-columns:minmax(0,1fr)}}

/* Team: Arbeitsdetails statt Gesichter, zwei Personen als Liste */
.w-foto picture,.w-foto img{display:block;width:100%;height:auto}
.w-foto--1 picture{clip-path:polygon(0 0,100% 0,100% 100%,18% 100%,0 82%)}
.w-foto--2 picture{clip-path:polygon(0 0,82% 0,100% 18%,100% 100%,0 100%)}
.w-foto--3 picture{clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%)}
.w-foto--4 picture{clip-path:polygon(0 0,100% 0,100% 100%,14% 100%,0 76%)}
.w-foto--5 picture{clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,0 22%)}
.w-foto--6 picture{clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%)}
.w-foto--7 picture{clip-path:polygon(0 0,86% 0,100% 24%,100% 100%,0 100%)}
.w-unterzeile{margin-top:14px;max-width:none;font:500 clamp(10.5px,.78vw,14px)/1.6 var(--mono);letter-spacing:.12em;color:var(--gedimmt)}

/* Zahlen, Kontakt */
.w-vor{letter-spacing:-.04em}
.mail--tel{font-size:clamp(20px,2.4vw,44px);margin-top:4px}
.w-hilfe{display:block;margin-top:6px;font:400 clamp(14px,1vw,17px)/1.4 var(--display);letter-spacing:0;text-transform:none;color:var(--gedimmt)}
.w-antwort{margin:0;font:500 clamp(12px,.9vw,16px)/1.5 var(--mono);letter-spacing:.06em}

/* Mehr: fünf Fotos statt der Sonnenspur, Verbindung über die Nummernlinie */
.ablauf h3::before{content:none}
.ablauf .w-nr{margin-bottom:16px}
.ablauf li .w-bild{max-width:none}
@media (max-width:1159px){
  .ablauf li{grid-template-columns:96px minmax(0,1fr);column-gap:16px}
  .ablauf .w-nr{grid-column:1/-1;margin-bottom:12px}
  .ablauf li .w-bild{grid-row:2/span 2;grid-column:1;width:96px;margin:0}
  .ablauf li h3,.ablauf li p{grid-column:2}
}
@media (min-width:1160px){
  .ablauf li{padding-right:clamp(16px,1.6vw,26px)}
  .ablauf li:last-child{padding-right:0}
}
.w-lk--4{background:color-mix(in srgb,#e0568b 18%,color-mix(in srgb,#f0913f 20%,var(--grund)));clip-path:polygon(0 0,100% 0,100% 100%,64px 100%,0 calc(100% - 64px))}
@media (min-width:1160px){.ablauf li:last-child{padding-right:clamp(16px,1.6vw,26px)}}
@media (max-width:640px){.w-hero .w-knopf{padding-inline:28px;letter-spacing:.08em}}

/* Englisch ist vorerst aus (Memo 2026-10-13): kein Sprachwechsel im Kopf, der Hell/Dunkel-Punkt steht allein ohne Trennlinie. */
.einstellungen{padding-left:0;border-left:0}

/* Mehr: die Sonnenlinie läuft wieder über den Fotos (Memo: „die Sonnenlinie hatte mir auch gefallen"). Die Nummernlinie entfällt dort, wo die Spur steht. */
@media (min-width:1160px){
  .ablauf-spur{margin-bottom:clamp(14px,1.6vw,26px)}
  .ablauf-abschnitt .w-nr::after{display:none}
}

/* So läuft es: drei Spalten (Memo 2026-10-13: „2 Sprachen sind kein Verkaufsargument, bitte rausnehmen"), Bilder entsprechend größer */
.w-spalten--bild{grid-template-columns:repeat(3,minmax(0,1fr))}
.w-spalten--bild .w-bild{max-width:clamp(200px,22vw,460px)}
@media (max-width:959px){.w-spalten--bild{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:719px){.w-spalten--bild{grid-template-columns:minmax(0,1fr)}.w-spalten--bild li:nth-child(odd){padding-left:clamp(16px,1.8vw,28px)}}

/* ================= Sonne und Linie als PNG (Rafiki #31, Memos Wahl 2a), Hero-Fenster als Kuppe ================= */
:root{--sonne-url:url(/assets/wk/sonnenlinie/sonne-nacht.png);--linie-url:url(/assets/wk/sonnenlinie/linie-nacht.png)}
:root[data-fassung="hell"]{--sonne-url:url(/assets/wk/sonnenlinie/sonne-papier.png);--linie-url:url(/assets/wk/sonnenlinie/linie-papier.png)}
.w-linie{display:none}
@media (min-width:1160px){
  /* Fläche: Linie über die volle Breite der fünf Spalten (Marken an den Spaltengrenzen), Sonnen sitzen auf dem Horizont.
     Sonnenbreite 12,5 % der Linie (160 px bei 1280, Rafikis Anzeigegröße), Kuppenhöhe 6,25 %. Horizont = Oberkante des Linienbilds. */
  .w-linie{display:block;position:relative;width:100%;padding-top:6.25%;margin-bottom:clamp(14px,1.6vw,26px)}
  .w-linie-band{display:block;width:100%;aspect-ratio:2560/130;background:var(--linie-url) 0 0/100% 100% no-repeat}
  .w-sonne{position:absolute;top:0;width:12.5%;aspect-ratio:2/1;overflow:hidden}
  .w-sonne--1{left:.8%}.w-sonne--2{left:20.8%}.w-sonne--3{left:40.8%}.w-sonne--4{left:60.8%}
  .w-sonne-bild{display:block;width:100%;aspect-ratio:1;background:var(--sonne-url) 0 0/100% 100% no-repeat;will-change:transform}
  /* Stand je Schritt: Steigung 25 % des Radius je Schritt, Schritt 4 ist die halbe Sonne. Grundwert = Endzustand. */
  .w-sonne--1 .w-sonne-bild{--bis:37.5%;transform:translateY(37.5%)}
  .w-sonne--2 .w-sonne-bild{--bis:25%;transform:translateY(25%)}
  .w-sonne--3 .w-sonne-bild{--bis:12.5%;transform:translateY(12.5%)}
  .w-sonne--4 .w-sonne-bild{--bis:0%;transform:translateY(0)}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:1160px){
    .w-sonne--2 .w-sonne-bild,.w-sonne--3 .w-sonne-bild,.w-sonne--4 .w-sonne-bild{animation:w-sonne-auf linear both;animation-timeline:--ablauf-sicht}
    .w-sonne--2 .w-sonne-bild{animation-range:cover 12% cover 24%}
    .w-sonne--3 .w-sonne-bild{animation-range:cover 16% cover 28%}
    .w-sonne--4 .w-sonne-bild{animation-range:cover 20% cover 32%}
    @keyframes w-sonne-auf{from{transform:translateY(37.5%)}to{transform:translateY(var(--bis))}}
  }
}

/* Hero-Fenster: Kuppe (halbe Sonne über dem Horizont, 2 : 1), Memos Wahl */
.w-fenster{width:clamp(300px,36vw,680px);aspect-ratio:2/1;clip-path:ellipse(50% 100% at 50% 100%);align-self:end}
@media (max-width:719px){.w-fenster{width:min(88vw,400px);align-self:auto}}

/* ================= Mietmöbel mit Partnern (Aufträge #25, #27) ================= */
.w-miet-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3.6vw,64px);align-items:start;margin-top:clamp(8px,1.4vw,24px)}
.w-miet-bild{margin:0;aspect-ratio:4/5;clip-path:polygon(0 0,100% 0,100% 100%,18% 100%,0 82%);background:var(--grund-2)}
.w-miet-bild picture,.w-miet-bild img{display:block;width:100%;height:100%;object-fit:cover}
.w-miet-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);margin:0;padding:0;list-style:none}
.w-miet-karte a{display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(120px,11vw,200px);height:100%;padding:clamp(18px,1.8vw,30px);text-decoration:none;color:var(--schrift);transition:transform .6s var(--kurve)}
.w-miet-name{font:600 clamp(22px,2.1vw,40px)/1.12 var(--display);letter-spacing:-.015em}
.w-miet-link{margin-top:18px;font:600 clamp(11px,.8vw,14px)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.w-miet-karte:nth-child(4n+1) a{background:color-mix(in srgb,#e0568b 26%,var(--grund));clip-path:polygon(0 0,100% 0,100% calc(100% - 36px),calc(100% - 36px) 100%,0 100%)}
.w-miet-karte:nth-child(4n+2) a{background:color-mix(in srgb,#f0913f 30%,var(--grund));clip-path:polygon(0 0,calc(100% - 36px) 0,100% 36px,100% 100%,0 100%)}
.w-miet-karte:nth-child(4n+3) a{background:color-mix(in srgb,var(--gedimmt) 20%,var(--grund));clip-path:polygon(36px 0,100% 0,100% 100%,0 100%,0 36px)}
.w-miet-karte:nth-child(4n+4) a{background:color-mix(in srgb,#e0568b 14%,color-mix(in srgb,#f0913f 18%,var(--grund)));clip-path:polygon(0 0,100% 0,100% 100%,36px 100%,0 calc(100% - 36px))}
@media (hover:hover){.w-miet-karte a:hover{transform:scale(1.03)}}
.w-miet-karte a:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.w-miet-preis{margin:clamp(28px,3.4vw,52px) 0 0;max-width:42em;font-size:clamp(15px,1.2vw,21px);line-height:1.5}
.w-miet-partner{margin:18px 0 0;font:500 clamp(11px,.8vw,14px)/1.6 var(--mono);letter-spacing:.14em;color:var(--gedimmt)}
.w-miet-knoepfe{display:flex;flex-wrap:wrap;gap:16px 24px}
.w-knopf--hauptsache{color:var(--grund)!important;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}
.w-knopf--hauptsache::before{-webkit-mask:none;mask:none}
@media (max-width:859px){.w-miet-raster{grid-template-columns:minmax(0,1fr)}.w-miet-bild{max-width:340px}}
@media (max-width:479px){.w-miet-karten{grid-template-columns:minmax(0,1fr)}}

/* ---------- Dev-Runde 2026-10-13 (Memo): kleinere Zustände, drei Zusagen im Satzspiegel, Quellen ohne Versalien ---------- */
.w-zustaende .w-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);align-items:start}
.w-zustaende .w-karte--a,.w-zustaende .w-karte--b,.w-zustaende .w-karte--c{grid-column:auto;margin:0}
.w-zustaende .w-karte--b{margin-top:clamp(28px,4vw,64px)}
.w-zustaende .w-karte--c{margin-top:clamp(56px,8vw,128px)}
.w-zustaende .w-karte--a picture,.w-zustaende .w-karte--b picture,.w-zustaende .w-karte--c picture{aspect-ratio:4/3}
.w-zustaende .w-titel{font-size:clamp(20px,1.9vw,30px)}
@media (max-width:899px){
  .w-zustaende .w-raster{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .w-zustaende .w-karte--b,.w-zustaende .w-karte--c{margin-top:0}
  .w-zustaende .w-karte--b{margin-left:14%}.w-zustaende .w-karte--c{margin-right:10%}
}
@media (min-width:1100px){
  .w-zusagen .w-reihe li,.w-stimmen .w-reihe li{flex:1 1 0;min-width:0}
  .w-zusagen .w-reihe blockquote,.w-stimmen .w-reihe blockquote{font-size:clamp(20px,1.8vw,30px)}
}
.w-quelle{text-transform:none;letter-spacing:.06em}
.w-lk .w-miet-link{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:4px}
.w-hero .w-claim{margin:clamp(22px,2.6vw,40px) 0 clamp(14px,1.6vw,24px);font:600 clamp(13px,.95vw,18px)/1.2 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--schrift);text-align:center}

/* So arbeiten wir (Memo 2026-10-13): ein Bereich, keine Sonnenlinie, fünf Schritte versetzt */
@media (min-width:1160px){
  .ablauf-abschnitt .ablauf{align-items:start}
  .ablauf-abschnitt .ablauf li:nth-child(2){margin-top:clamp(40px,5.5vw,100px)}
  .ablauf-abschnitt .ablauf li:nth-child(3){margin-top:clamp(12px,1.6vw,30px)}
  .ablauf-abschnitt .ablauf li:nth-child(4){margin-top:clamp(64px,8.5vw,160px)}
  .ablauf-abschnitt .ablauf li:nth-child(5){margin-top:clamp(28px,3.6vw,68px)}
}
.w-feldlink{color:inherit;text-decoration:none}
.w-feldlink:hover,.w-feldlink:focus-visible{text-decoration:underline;text-underline-offset:.18em}

/* Über uns, erster Bereich (Memos Geschichte, Marija #37): zwei Personen versetzt, ein Gemeinsam-Absatz, die Ambition groß */
.ueber-story{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(28px,3.4vw,52px);margin-top:clamp(8px,1.6vw,24px)}
.ueber-person{grid-column:1/6}
.ueber-person--2{grid-column:7/12;margin-top:0}
.ueber-person .label{margin:0 0 14px}
.ueber-person p:not(.label),.ueber-gemeinsam{margin:0;font-size:clamp(16px,1.2vw,20px);line-height:1.6;color:var(--schrift);text-wrap:pretty}
.ueber-gemeinsam{grid-column:4/11;grid-row:2;max-width:38em}
.ueber-ambition{margin:clamp(56px,7vw,112px) 0 0;max-width:22em;font:600 clamp(26px,3.1vw,52px)/1.18 var(--display);letter-spacing:-.02em;text-wrap:balance}
@media (max-width:899px){
  .ueber-story{grid-template-columns:minmax(0,1fr)}
  .ueber-person,.ueber-person--2,.ueber-gemeinsam{grid-column:1;grid-row:auto;margin-top:0}
  .ueber-person--2{margin-left:8%}
}

/* Hero-Paar (Marija #34, A): rechts bricht „was Sie / abnehmen." um, links steht „Fertig ist," auf der Höhe der ersten Zeile, damit beide über das Fenster als ein Satz laufen */
@media (min-width:720px){
  .w-hero .w-l{transform:translateY(-.53em)}
}
@media (min-width:2200px){.w-hero .w-l{transform:none}}

/* ===== Content-Update 2026-10-15: Bausteine für längere Fließtexte ===== */
.w-lede--folge{margin-top:0}
.w-hero .w-lede{max-width:40em}
.w-hero-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 20px;margin:0}
.w-knopf--zweit{background:transparent}
.w-unter{margin:0 0 1em!important;font:600 clamp(16px,1.3vw,19px)/1.35 var(--display)!important;letter-spacing:-.005em;color:var(--schrift)}
.w-unter--rechts{max-width:42em;margin:0 0 1.2em auto!important;text-align:right}
.w-text{max-width:42em;font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--schrift);text-wrap:pretty}
.w-text p,p.w-text{margin:0 0 1em}
.w-text--rechts{margin:0 0 clamp(36px,4.4vw,64px) auto;text-align:right}
.auftakt .lede.gross{margin-bottom:clamp(20px,2.6vw,36px)}
.w-h2-gross{margin:0 0 .5em;max-width:20em;font:600 clamp(30px,3.6vw,56px)/1.1 var(--display);letter-spacing:-.025em;text-wrap:balance}
.w-h3-gross{margin:clamp(40px,5vw,72px) 0 clamp(18px,2vw,28px);font:600 clamp(22px,2.2vw,34px)/1.15 var(--display);letter-spacing:-.015em}
.w-liste{margin:0 0 1.1em;padding:0;list-style:none}
.w-liste li{position:relative;padding:.35em 0 .35em 1.3em;font-size:clamp(15px,1.15vw,17px);line-height:1.5}
.w-liste li::before{content:"";position:absolute;left:0;top:.95em;width:.6em;height:2px;background:var(--akzent)}
.w-listenkopf{margin:1.2em 0 .3em!important;font:500 clamp(11px,.8vw,13px)/1.6 var(--mono)!important;letter-spacing:.12em;text-transform:uppercase}
.reihe--weit dd p{margin:0 0 .9em;max-width:none}
.reihe--weit dd .w-knopf{margin-top:.4em}
.reihe--weit dd .w-knopf span{color:inherit}
.w-raster-text{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(20px,2.4vw,40px);margin:clamp(28px,3.4vw,52px) 0 0;padding:0;list-style:none}
.w-raster-text li{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--schrift) 30%,transparent)}
.w-raster-text h3{margin:0 0 .6em;font:600 clamp(20px,1.9vw,30px)/1.2 var(--display);letter-spacing:-.01em;text-wrap:balance}
.w-raster-text p{margin:0 0 .8em;font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:var(--schrift)}
.w-raster-text--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.w-anspruch{max-width:26em;margin:clamp(40px,5vw,72px) 0 0;font:600 clamp(22px,2.4vw,36px)/1.25 var(--display);letter-spacing:-.015em;text-wrap:balance}
.w-ausstattung{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);margin:0 0 clamp(36px,4vw,64px);padding:0;list-style:none}
.w-ausstattung li{padding:clamp(18px,1.8vw,30px);background:color-mix(in srgb,var(--gedimmt) 16%,var(--grund))}
.w-ausstattung li:nth-child(4n+1){background:color-mix(in srgb,#e0568b 22%,var(--grund));clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
.w-ausstattung li:nth-child(4n+2){background:color-mix(in srgb,#f0913f 26%,var(--grund));clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.w-ausstattung li:nth-child(4n+3){clip-path:polygon(28px 0,100% 0,100% 100%,0 100%,0 28px)}
.w-ausstattung li:nth-child(4n+4){background:color-mix(in srgb,#e0568b 12%,color-mix(in srgb,#f0913f 14%,var(--grund)));clip-path:polygon(0 0,100% 0,100% 100%,28px 100%,0 calc(100% - 28px))}
.w-ausstattung strong,.w-ausstattung h3{display:block;margin:0 0 .5em;font:600 clamp(18px,1.6vw,26px)/1.2 var(--display);letter-spacing:-.01em}
.w-ausstattung p{margin:0 0 .7em;font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.5}
.w-ausstattung p.w-unter{font-size:clamp(14.5px,1.1vw,16.5px)!important}
.w-miet-raster--oben{grid-template-columns:minmax(0,4fr) minmax(0,9fr)}
.w-miet-raster--oben .w-miet-bild{position:sticky;top:calc(var(--kopf-h,72px) + 24px)}
.w-ausstattung--lang{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.w-daten{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin:clamp(24px,3vw,44px) 0 0}
.w-daten > div{padding-top:14px;border-top:1px solid color-mix(in srgb,var(--schrift) 30%,transparent)}
.w-daten dt{margin:0 0 6px;font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gedimmt)}
.w-daten dd{margin:0;font:600 clamp(17px,1.5vw,24px)/1.3 var(--display)}
.w-daten .mail{font-size:inherit;overflow-wrap:anywhere}
.w-anfrage .lede{margin-left:0;text-align:left}
.w-auszeichnet .w-spalten{margin-top:clamp(28px,3.4vw,52px)}
.w-spalten p + p{margin-top:.8em}
.w-reihe--karten li{border-left:2px solid var(--akzent)}
.w-reihe--karten h3{margin:0 0 .5em;font:600 clamp(22px,2.1vw,32px)/1.2 var(--display);letter-spacing:-.015em}
.w-reihe--karten p{margin:0;font-size:clamp(15px,1.2vw,18px);line-height:1.55}
.w-name{margin:0;font:600 clamp(26px,2.8vw,44px)/1.1 var(--display);letter-spacing:-.02em}
.w-rolle{margin:.5em 0 1.2em!important;font:500 clamp(11px,.85vw,14px)/1.6 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--gedimmt)!important}
.ueber-person p + p{margin-top:.9em}
.w-ergebnis{margin-top:.9em!important}
.ablauf .w-unter{font-size:clamp(15px,1.1vw,17px)!important}
.fragen .w-text{margin-bottom:clamp(24px,3vw,40px)}
.frage ul{margin:0}
.grenze-in{margin-top:clamp(40px,5vw,72px)}
.grenze-in h3{margin:0 0 .6em;font:600 clamp(22px,2.2vw,34px)/1.15 var(--display);letter-spacing:-.015em}
.w-vier .reihe--weit{margin-top:clamp(24px,3vw,44px)}
.w-miet .w-miet-partner,.w-angebote .w-miet-partner{margin-block:clamp(20px,2.4vw,36px)}
.abschluss .lede + .lede{margin-top:-.4em}
.abschluss .w-antwort{margin:clamp(8px,1vw,16px) 0 clamp(18px,2vw,28px)}
.abschluss .register{margin-top:clamp(24px,3vw,40px)}
.abschluss .register a{color:inherit}
@media (max-width:1199px){
  .w-raster-text{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w-ausstattung{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w-daten{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:859px){
  .w-miet-raster--oben{grid-template-columns:minmax(0,1fr)}
  .w-miet-raster--oben .w-miet-bild{position:static}
  .w-ausstattung--lang{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:659px){
  .w-raster-text,.w-raster-text--zwei,.w-ausstattung{grid-template-columns:minmax(0,1fr)}
  .w-daten{grid-template-columns:minmax(0,1fr)}
  .w-text--rechts,.w-unter--rechts{text-align:left;margin-left:0}
}
.w-lk-text p{margin:0 0 .8em}
.w-lk-text p.w-unter{margin-bottom:.9em!important}
.w-hero .w-lede{margin-block:clamp(10px,1.2vw,16px) 0}
.w-hero .w-szene + .w-lede{margin-top:clamp(14px,1.8vw,26px)}
.w-hero .w-lede--folge{margin-top:.8em}
.w-reihe--karten h3{font-size:clamp(20px,1.75vw,28px);hyphens:auto;overflow-wrap:break-word}
.w-zusagen-kopf h2{min-width:0;flex:1 1 auto}
.w-pfeile{flex:0 0 auto}
@media (max-width:659px){.w-zusagen-kopf{flex-direction:column;gap:0}.w-zusagen-kopf .w-pfeile{order:2;margin:-12px 0 20px}}
.verweis p.label{max-width:none;font-size:clamp(11px,.78vw,15px);color:var(--akzent)}
.frage .antwort > :first-child{margin-top:0}
.frage .antwort p{margin:0 0 .9em}
.frage .antwort ul{margin:0 0 .9em}
p.w-text--rechts{margin:0 0 clamp(36px,4.4vw,64px) auto}
.ueber-person p:not(.label):not(.w-rolle) + p{margin-top:.9em}
@media (min-width:860px){
  .w-anfrage .w-formular{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px)}
  .w-anfrage .w-formular label:has(textarea),.w-anfrage .w-formular .w-knopf,.w-anfrage .w-formular .w-antwort,.w-anfrage .w-formular .w-hinweis,.w-anfrage .w-formular .w-datenschutz{grid-column:1/-1}
}
@media (max-width:659px){p.w-text--rechts{margin-left:0}}
.w-miet-raster--ohne-bild{grid-template-columns:minmax(0,1fr)}
.w-miet-raster--ohne-bild .w-ausstattung--lang{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1199px){.w-miet-raster--ohne-bild .w-ausstattung--lang{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:659px){.w-miet-raster--ohne-bild .w-ausstattung--lang{grid-template-columns:minmax(0,1fr)}}

/* ===== Hero (Memo 2026-10-15, Stand der dev-Seite): „Ihr Partner für professionelle" links, Kuppe mitten, „Messe- und Eventaufbauten." rechts; Claim und Knopf stehen im ersten Bild, der Fließtext folgt darunter ===== */
.w-hero .w-wort{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(12px,2vw,36px);row-gap:clamp(10px,1.2vw,20px);align-items:center;width:100%}
.w-hero h1{display:contents}
.w-hero h1 > span.w-l,.w-hero h1 > span.w-r{display:block;margin:0;transform:none;grid-row:1;font:600 clamp(30px,3.55vw,80px)/1.06 var(--display);letter-spacing:-.025em;text-wrap:balance}
.w-hero h1 > span.w-l{grid-column:1;text-align:right}
.w-hero h1 > span.w-r{grid-column:3;text-align:left}
.w-hero .w-fenster{grid-column:2;grid-row:1;justify-self:center;align-self:center;width:clamp(300px,35vw,680px)}
.w-hero .w-szene{grid-column:2;grid-row:2;justify-self:center;margin:0;text-align:center;min-height:0}
.w-hero .w-claim{margin:clamp(14px,1.8vw,28px) 0 clamp(12px,1.4vw,20px)}
.w-hero-knoepfe{justify-content:center;margin:0}
.w-hero-text{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);align-items:center;margin-top:clamp(40px,5vw,84px);max-width:none;text-align:left}
.w-hero-text .w-lede{max-width:none;margin:0 0 .9em;text-align:left;break-inside:avoid}
@media (max-width:859px){
  .w-hero .w-wort{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .w-hero h1{display:block;grid-column:1;grid-row:1;margin:0;text-align:center}
  .w-hero h1 > span.w-l,.w-hero h1 > span.w-r{display:inline;text-align:center;font-size:clamp(30px,7.4vw,54px)}
  .w-hero .w-fenster{grid-column:1;grid-row:2;width:min(88vw,520px)}
  .w-hero .w-szene{grid-column:1;grid-row:3}
  .w-hero-text{grid-template-columns:minmax(0,1fr);text-align:center}
  .w-hero-text .w-lede{text-align:center}
}
.w-pfeile[hidden]{display:none}
.w-hero .w-eyebrow{margin-bottom:clamp(14px,2vw,32px)}
@media (min-width:1200px){
  .w-anspruch-abschnitt .w-raster-text,.w-arbeitsweise .w-raster-text{grid-template-columns:repeat(5,minmax(0,1fr))}
  .w-anspruch-abschnitt .w-raster-text h3,.w-arbeitsweise .w-raster-text h3{font-size:clamp(18px,1.55vw,28px);hyphens:auto;overflow-wrap:break-word}
}
/* Mietmöbel-Kacheln mit Bild oben */
.w-ausstattung--lang li{padding:0;display:flex;flex-direction:column}
.w-aus-bild{margin:0;aspect-ratio:3/2;overflow:hidden}
.w-aus-bild picture,.w-aus-bild img{display:block;width:100%;height:100%;object-fit:cover}
.w-aus-text{padding:clamp(18px,1.8vw,30px)}
.w-miet-raster--ohne-bild .w-ausstattung--lang{gap:clamp(14px,1.6vw,26px)}
.w-auftakt-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,72px);align-items:start;margin-bottom:clamp(24px,3vw,44px)}
.w-auftakt-bild{margin:0;aspect-ratio:3/2;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),calc(100% - 48px) 100%,0 100%)}
.w-auftakt-bild picture,.w-auftakt-bild img{display:block;width:100%;height:100%;object-fit:cover}
.w-auftakt-raster .w-text--rechts{margin:0}
@media (max-width:859px){.w-auftakt-raster{grid-template-columns:minmax(0,1fr)}}
.w-hero .w-szene{text-transform:uppercase;min-height:3.2em}
@media (min-width:860px){.w-hero .w-szene{min-height:1.6em}}

/* ---------- Ueber uns: Portrait, Amt, Kontakt (Website-Optimierung 2026-10-19) ---------- */
.ueber-portrait{margin:0 0 clamp(20px,2.4vw,32px);aspect-ratio:4/5;overflow:hidden;background:var(--grund-2)}
.ueber-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.ueber-person .w-amt{margin:0 0 10px;font:500 clamp(11px,.85vw,14px)/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent)}
.ueber-kontakt{list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;display:grid}
.ueber-kontakt a{display:flex;align-items:center;min-height:44px;font:600 clamp(17px,1.3vw,21px)/1.3 var(--display);color:var(--schrift);text-decoration:underline;text-decoration-color:var(--akzent);text-decoration-thickness:2px;text-underline-offset:.28em;overflow-wrap:anywhere}

/* Honigtopf gegen Spam: fuer Menschen und Screenreader unsichtbar, fuer Bots ein Feld */
.w-falle{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.w-hinweis[data-zustand=fehler]{color:var(--schrift);font-weight:600}
.w-datenschutz{margin:0;max-width:34em;font:400 clamp(14px,1vw,16px)/1.5 var(--display);color:var(--gedimmt)}
.w-datenschutz a{color:var(--schrift);text-decoration:underline;text-decoration-color:var(--akzent);text-underline-offset:.2em}
.w-karten--vier .w-lk h3{overflow-wrap:break-word}
/* Leistungen-Seite: die kurze Kachel 01 nimmt den Platz neben der langen Kachel 02 mit dem Crew-Foto */
.reihe--weit > div:has(.w-leist-bild){display:flex;flex-direction:column}
.reihe--weit > div:has(.w-leist-bild) dd{flex:1;display:flex;flex-direction:column;max-width:none}
.w-leist-bild{flex:1 1 200px;min-height:200px;margin:clamp(12px,1.4vw,20px) 0 0;overflow:hidden}
.w-leist-bild picture,.w-leist-bild img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:860px){.w-anfrage .w-formular label:has(input[type=tel]){grid-column:1/-1}}

/* Lückenbilder neben den Texten (Website-Optimierung 2026-10-19): 4:5 links, Text rechts */
.w-auftakt-bild--hoch{aspect-ratio:4/5}
.w-auftakt-raster--hoch{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.w-hero-bild{margin:0;aspect-ratio:4/5;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),calc(100% - 48px) 100%,0 100%)}
.w-hero-bild picture,.w-hero-bild img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:859px){.w-auftakt-raster--hoch{grid-template-columns:minmax(0,1fr)}.w-auftakt-bild--hoch,.w-hero-bild{aspect-ratio:4/3}}


/* ---------- Durchgang 2026-10-20: Bilder kleiner ---------- */
.w-auftakt-raster,.w-auftakt-raster--hoch{grid-template-columns:clamp(260px,25vw,360px) minmax(0,1fr)}
.w-auftakt-raster:not(.w-auftakt-raster--hoch){grid-template-columns:clamp(300px,31vw,440px) minmax(0,1fr)}
.w-hero-text{grid-template-columns:clamp(260px,25vw,360px) minmax(0,1fr)}
.w-lk-bild{aspect-ratio:4/3}
.ueber-portrait{max-width:clamp(220px,19vw,280px)}
@media (max-width:859px){
  .w-auftakt-raster,.w-auftakt-raster--hoch,.w-auftakt-raster:not(.w-auftakt-raster--hoch){grid-template-columns:minmax(0,1fr)}
  .w-auftakt-bild--hoch,.w-hero-bild{aspect-ratio:3/2}
  .w-lk-bild{aspect-ratio:3/2}
  .w-hero-text{grid-template-columns:minmax(0,1fr)}
  .ueber-portrait{max-width:220px}
}

/* Durchgang Layout 2026-10-22 (Memo: alles linksbündig, ein Textblock rückt nur dann nach rechts, wenn links ein Bild steht).
   Text läuft überall linksbündig. Ohne Bild beginnen Überschrift, Einleitung und Text am linken Rand.
   Mit Bild links steht die Textspalte rechts daneben (Raster .w-auftakt-raster), ebenfalls linksbündig. */
.w-rechts,.auftakt .lede,.w-unter--rechts,.w-text--rechts,p.w-text--rechts{margin-left:0;margin-right:0;text-align:left}
.w-rechts,.auftakt .lede{max-width:38em}
.w-auftakt-raster .w-text--rechts{margin:0}
/* Auftakt ohne Bild (Memo 2026-10-22: Bild oben bei Mietmöbel und Leistungen entfällt): Text am linken Rand */
.w-auftakt-text{margin-bottom:clamp(24px,3vw,44px)}
/* Fußzeile (Memo 2026-10-22): alle Seiten untereinander in einer Spalte, damit keine Spalte ohne Überschrift steht */
.fuss-nav{grid-template-columns:minmax(0,1fr)}
.fuss-text{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Kontakt: allgemeine Adresse und die beiden persönlichen Kontakte in drei Spalten */
.w-daten--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.w-daten--drei dd{font-size:clamp(16px,1.3vw,22px)}
.w-daten--drei dd a{display:inline-block;margin-top:.2em}
@media (max-width:859px){.w-daten--drei{grid-template-columns:minmax(0,1fr)}}

/* Durchgang Lücken 2026-10-22 (Memo: wo keine Bilder stehen, keine großen Lücken im Text).
   Textblöcke mit mehreren Absätzen laufen ab 1000 px in zwei Spalten, linksbündig, und füllen die Breite.
   Ein einzelner Absatz bleibt bei normaler Zeilenlänge. */
.w-unter--rechts{margin:0 0 1.2em!important}
@media (min-width:1000px){
  .w-text:has(> p:nth-child(2)):not(.w-auftakt-raster .w-text){max-width:min(100%,78em);columns:2;column-gap:clamp(32px,4.5vw,84px)}
  .w-text:has(> p:nth-child(2)) > p{break-inside:avoid}
  .w-text:has(> p:nth-child(2)) > p:last-child{margin-bottom:0}
  .w-auftakt-text .w-text{max-width:min(100%,78em)}
}
@media (min-width:1000px){
  .abschluss .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4.5vw,84px)}
  .abschluss .wrap > *{grid-column:1/-1}
  .abschluss .wrap > .lede{grid-column:auto;max-width:none}
  .abschluss .lede + .lede{margin-top:0}
}