/* NUBER INTERIOR DESIGN – Redesign Oktober 2026 („klassisch und zugleich modern“)
   Umsetzung des Claude-Design-Entwurfs „Startseite“ auf Basis des Nuber-Designsystems.
   Schriften lokal, keine externen Einbindungen.
   Nuber Feder: based on Federo by Cyreal, SIL Open Font License 1.1, siehe /assets/fonts/OFL.txt
   Square Peg: The Square Peg Project Authors, SIL Open Font License 1.1, siehe /assets/fonts/OFL-SquarePeg.txt */

@font-face{font-family:'Nuber Feder';src:url('/assets/fonts/NuberFeder-Regular.woff2') format('woff2'),url('/assets/fonts/NuberFeder-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('/assets/fonts/raleway-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('/assets/fonts/raleway-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('/assets/fonts/raleway-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('/assets/fonts/raleway-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('/assets/fonts/raleway-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Square Peg';src:url('/assets/fonts/square-peg-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --nuber-anthracite:#525354;
  --nuber-greige:#c5bfba;
  --nuber-mist:#edeced;
  --nuber-slate:#5e7586;          /* Akzent-Blau, ersetzt #707C8A auf der Startseite */
  --nuber-slate-light:#8fa3b1;    /* Signatur auf dunklem Bild */
  --nuber-black:#000;
  --nuber-white:#fff;

  --surface-page:var(--nuber-mist);
  --surface-card:var(--nuber-white);
  --surface-brand-dark:var(--nuber-black);
  --overlay-brand-dark:rgba(0,0,0,.7);
  --border-default:rgba(82,83,84,.3);
  --border-on-dark:rgba(237,236,237,.4);
  --focus-ring:var(--nuber-slate);
  --accent:var(--nuber-slate);
  --headline-ink:#000;

  --font-display:'Nuber Feder','Times New Roman',serif;
  --font-body:'Raleway','Helvetica Neue',sans-serif;
  --font-signature:'Square Peg',cursive;

  --size-h1:clamp(34px,2.9vw + 23px,64px);
  --size-h2:clamp(32px,1.5vw + 26.4px,48px);
  --size-h3:clamp(20px,.56vw + 17.9px,26px);
  --size-lead:clamp(18px,.19vw + 17.3px,20px);
  --size-body:clamp(17px,.094vw + 16.65px,18px);
  --size-label:clamp(13px,.094vw + 12.65px,14px);
  --size-quote:clamp(26px,1.3vw + 21px,40px);

  --text-h1:400 var(--size-h1)/1.05 var(--font-display);
  --text-h2:400 var(--size-h2)/1.1 var(--font-display);
  --text-h3:400 var(--size-h3)/1.3 var(--font-display);
  --text-quote:400 var(--size-quote)/1.35 var(--font-display);
  --text-lead:400 var(--size-lead)/1.5 var(--font-body);
  --text-body:400 var(--size-body)/1.65 var(--font-body);
  --text-label:500 var(--size-label)/1.4 var(--font-body);
  --tracking-display:.06em;
  --tracking-display-mixed:.02em;   /* Headline-Form B: Versalwort + normale Schreibung */
  --tracking-label:.18em;
  --tracking-body:.01em;

  --gutter:clamp(20px,4vw,64px);
  --section-pad:clamp(80px,4vw + 56px,120px);
  --indent:min(8.3%,120px);
  --ease-calm:cubic-bezier(.25,.1,.25,1);
  --duration-fast:180ms;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:#000;font:var(--text-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased;hyphens:manual;-webkit-hyphens:manual;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,blockquote,figure{margin:0}
h1,h2,h3{font-weight:400;overflow-wrap:break-word}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:100;background:#fff;color:#000;padding:12px 16px}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- Typografie-Rollen ---------- */
.eyebrow{display:block;font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent);margin-bottom:-12px}
.on-dark .eyebrow{color:var(--nuber-mist)}
.label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.h1{font:var(--text-h1);letter-spacing:var(--tracking-display);text-transform:uppercase;text-wrap:pretty}
.h1 span{display:block}
.h2{font:var(--text-h2);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--headline-ink);text-wrap:pretty}
.h2--mixed{text-transform:none;letter-spacing:var(--tracking-display-mixed)}
.h2--mixed .caps{text-transform:uppercase}
.h3{font:var(--text-h3);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--headline-ink);text-wrap:pretty}
.on-dark .h2,.on-dark .h3{color:inherit}
.lead{font:var(--text-lead);text-wrap:pretty}
.body{font:var(--text-body)}
.quote{font:var(--text-quote);color:var(--headline-ink);text-wrap:pretty}
.signature{font-family:var(--font-signature);font-weight:400;line-height:1;white-space:nowrap}

/* ---------- Buttons (eckig, Versalien) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:16px 32px;border-radius:0;font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid #000;background:#000;color:var(--nuber-mist);transition:background var(--duration-fast) var(--ease-calm),color var(--duration-fast) var(--ease-calm),border-color var(--duration-fast) var(--ease-calm)}
.btn:hover{background:var(--nuber-anthracite);border-color:var(--nuber-anthracite);color:var(--nuber-mist)}
.btn--dark{border-color:var(--nuber-mist);background:var(--nuber-mist);color:#000}
.btn--dark:hover{background:var(--nuber-greige);border-color:var(--nuber-greige);color:#000}
.btn--outline{background:transparent;color:#000;border-color:#000}
.btn--outline:hover{background:#000;border-color:#000;color:var(--nuber-mist)}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;min-height:72px;display:flex;align-items:center;background:transparent;color:var(--nuber-mist);transition:background 300ms var(--ease-calm),color 300ms var(--ease-calm)}
.nav.is-solid{background:var(--nuber-mist);color:#000}
.nav__inner{width:100%;max-width:1440px;margin:0 auto;padding:16px var(--gutter);display:flex;align-items:baseline;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.wordmark{display:inline-flex;gap:.32em;font-family:var(--font-body);font-size:17px;line-height:1.65;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.wordmark b{font-weight:700}
.wordmark span{font-weight:300}
.nav__links{display:flex;gap:clamp(16px,2.5vw,40px);flex-wrap:wrap;margin-left:auto;justify-content:flex-end;font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.nav__links a{text-decoration:none}
.nav__links a.nav__cta{border-bottom:1px solid currentColor;padding-bottom:2px}

.nav__links a[aria-current="page"]{border-bottom:1px solid currentColor;padding-bottom:2px}
/* Burger-Navigation (Handy, Tablet): ab 1180 px stehen alle Links rechtsbündig in einer Zeile neben dem Logo (seit 05.10.2026 abends: Über mich und Prozess raus, Navigation rechtsbündig) */
.nav__burger{display:none;width:44px;height:44px;margin:-10px -10px -10px 0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;align-self:center;align-items:center;justify-content:center;flex-direction:column;gap:7px}
.nav__burger span{display:block;width:24px;height:1px;background:currentColor;transition:transform 250ms var(--ease-calm)}
.nav.is-open .nav__burger span:first-child{transform:translateY(4px) rotate(45deg)}
.nav.is-open .nav__burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
.nav__menu{display:none}
@media (max-width:1179px){
  .nav__inner{flex-wrap:nowrap;align-items:center}
  .nav__inner>.nav__links{display:none}
  .nav__burger{display:inline-flex}
  .nav.is-open{background:var(--nuber-mist);color:#000}
  .nav.is-open .nav__menu{display:flex}
  .nav__menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--nuber-mist);color:#000;padding:0 var(--gutter) 32px;max-height:calc(100svh - 72px);overflow-y:auto;border-top:1px solid var(--border-default)}
  .nav__menu a{display:block;padding:18px 0;border-bottom:1px solid var(--border-default);font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:none}
  .nav__menu a[aria-current="page"]{color:var(--accent)}
  .nav__menu a.btn{margin-top:28px;align-self:flex-start;border-bottom:1px solid #000;padding:16px 32px;color:var(--nuber-mist)}
}

/* ---------- Flächen ---------- */
.section{padding:var(--section-pad) 0}
.section--white{background:var(--surface-card)}
.section--mist{background:var(--surface-page)}
.section--screen{min-height:100svh;display:flex;align-items:center;box-sizing:content-box}
.on-dark{position:relative;color:var(--nuber-mist);overflow:hidden}
.bg{position:absolute;inset:0;overflow:hidden}
.overlay{position:absolute;inset:0;background:var(--overlay-brand-dark)}
.on-dark>.wrap{position:relative}

/* Parallax im festen Rahmen: Bild ist 1,5-fach hoch eingesetzt und wandert darin */
.plx{position:relative;overflow:hidden}
.plx>img,.bg>img{position:absolute;left:0;top:-25%;width:100%;height:150%;object-fit:cover}
.fill{width:100%;height:100%;object-fit:cover}

/* ---------- 01 Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--nuber-mist);overflow:hidden}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.25) 100%)}
.hero__inner{position:relative;width:100%;max-width:1440px;margin:0 auto;padding:140px var(--gutter) clamp(64px,8vw,120px)}
.hero__content{display:flex;flex-direction:column;gap:32px;max-width:960px;margin-left:var(--indent)}
.hero__content .eyebrow{color:var(--nuber-mist)}
.hero__text{max-width:600px}
.hero__actions{display:flex;gap:24px 48px;flex-wrap:wrap;align-items:center;justify-content:space-between;max-width:760px}
.hero__signature{font-size:clamp(34px,3vw,46px);color:var(--nuber-slate-light)}
.hero__content>.hero__signature{display:block;margin-top:-12px}

/* Gemeinsame Zwei-Spalten-Raster (wie im Entwurf: automatisch, ab ca. 950 px nebeneinander) */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.stack{display:flex;flex-direction:column}

/* ---------- 02 Raumwirkung (Duo mit Überlappung) ---------- */
.raumwirkung .split{gap:64px clamp(24px,4vw,80px);align-items:center}
.duo{position:relative;padding:0 14% 20% 0}
.duo__main{aspect-ratio:3/2}
.duo__detail{position:absolute;right:0;bottom:0;width:40%;aspect-ratio:4/5;overflow:hidden}
.raumwirkung .text{gap:24px;max-width:600px}
.raumwirkung .quote{margin-top:8px}

/* ---------- 03 Ausgangslage + Hier setzt meine Arbeit an ---------- */
.ausgangslage .split{gap:80px clamp(24px,4vw,96px);align-items:start}
.ausgangslage .col{gap:40px;max-width:600px}
.ausgangslage .head{gap:24px}
.lage{display:flex;flex-direction:column;gap:12px;padding:28px 0;border-top:1px solid var(--border-on-dark)}
.ansatz{display:flex;flex-direction:column;gap:32px;max-width:560px;position:sticky;top:120px;padding-top:clamp(0px,8vw,120px)}
.words .w{transition:color 400ms var(--ease-calm)}

/* ---------- 04 Zwei Einstiege ---------- */
.einstiege .wrap{display:flex;flex-direction:column;gap:64px}
.center-head{display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:48px clamp(24px,3vw,48px)}
.kachel{display:flex;flex-direction:column;gap:32px;align-items:center}
.kachel__bild{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;color:var(--nuber-mist);text-decoration:none}
.kachel__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kachel__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.2) 100%)}
.kachel__text{position:absolute;inset:0;padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:flex-end;gap:16px}
.kachel__titel{font:var(--text-h2);font-size:clamp(24px,3.2vw,44px);letter-spacing:var(--tracking-display);text-transform:uppercase;text-wrap:pretty;overflow-wrap:anywhere}
.kachel__text p{max-width:480px}
.einstiege__cta{display:flex;flex-direction:column;gap:40px;align-items:center;text-align:center;max-width:800px;margin:clamp(16px,4vw,48px) auto 0}
.einstiege__cta .lead{font-size:clamp(22px,.75vw + 19px,28px)}

/* ---------- 05 Dein Ergebnis ---------- */
.ergebnis .split{gap:64px clamp(24px,4vw,96px);align-items:start}
.ergebnis__bild{align-self:start}
.ergebnis__bild .plx{aspect-ratio:4/5;max-width:520px}
@media (min-width:960px){.ergebnis__bild{position:sticky;top:96px}}
.ergebnis .col{gap:56px;max-width:600px;padding-top:24px}
.ergebnis .head{gap:24px}
.punkt{display:flex;flex-direction:column;gap:12px;padding-bottom:40px;border-bottom:1px solid var(--border-default)}
.punkt .h3{color:var(--accent)}

/* ---------- 05b Haltung ---------- */
.haltung .wrap{display:flex;flex-direction:column;gap:56px}
.haltung .head{gap:24px;max-width:640px;margin-left:auto;margin-right:var(--indent);width:100%}
.haltung .eyebrow{color:var(--nuber-greige)}
.grundsaetze{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:48px clamp(24px,3vw,48px)}
.grundsatz{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid var(--border-on-dark)}

/* ---------- 06 Portfolio ---------- */
.portfolio{display:flex;flex-direction:column;gap:clamp(96px,10vw,160px)}
.portfolio .head{gap:24px}
.vergleich{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--nuber-greige);user-select:none;-webkit-user-select:none;max-width:1100px;margin-left:auto;touch-action:pan-y}
.vergleich__platzhalter{position:absolute;inset:0;border:1px dashed var(--nuber-anthracite)}
.vergleich__platzhalter span{position:absolute;left:24px;top:24px;max-width:38%;color:var(--headline-ink)}
.vergleich__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 var(--pos,50%))}
.vergleich__linie{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1px;background:var(--nuber-mist);transform:translateX(-.5px);pointer-events:none}
.vergleich__griff{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border:1px solid var(--nuber-mist);background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:var(--nuber-mist)}
.vergleich__tag{position:absolute;bottom:16px;padding:6px 10px;pointer-events:none}
.vergleich__tag--skizze{left:16px;color:var(--headline-ink);background:rgba(237,236,237,.85)}
.vergleich__tag--visual{right:16px;color:var(--nuber-mist);background:rgba(0,0,0,.55)}
.vergleich input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.vergleich:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:3px}
.projekt{display:flex;flex-direction:column;gap:56px}
.projekt__text{display:flex;flex-direction:column;gap:24px;max-width:600px;margin-left:var(--indent)}
.projekt__text--rechts{margin-left:auto;margin-right:var(--indent)}
.projekt__bilder{display:flex;flex-direction:column;gap:16px}
.projekt__gross--169{aspect-ratio:16/9;overflow:hidden}
.projekt__gross--32{width:min(100%,800px);margin-left:auto;aspect-ratio:3/2;overflow:hidden}
.projekt__klein{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.projekt__klein>div{aspect-ratio:4/5;overflow:hidden}
/* Laptop-Höhe (05.10.2026, Petra): Text und Hauptbild nebeneinander, Bildhöhen an die Fensterhöhe gebunden, damit Text und ganzes Bild zugleich sichtbar sind */
@media (min-width:1100px){
  .projekt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(40px,4vw,72px);align-items:center}
  .projekt:has(.projekt__text--rechts){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .projekt__bilder{display:contents}
  .projekt__text{grid-column:1;grid-row:1;margin-left:0;max-width:540px}
  .projekt__text--rechts{grid-column:2;margin-right:0}
  .projekt__gross--169,.projekt__gross--32{grid-column:2;grid-row:1;width:100%;max-height:calc(100svh - 140px);margin-left:0}
  .projekt__text--rechts~.projekt__bilder>.projekt__gross--169,.projekt__text--rechts~.projekt__bilder>.projekt__gross--32{grid-column:1}
  .projekt__klein{grid-column:1/-1;grid-row:2;margin-top:clamp(16px,2vw,32px)}
  .projekt__klein{grid-template-columns:repeat(3,minmax(0,1fr))}
  .projekt__klein>div{aspect-ratio:4/3}
}
.ergebnis__bild .plx{max-width:440px;max-height:calc(100svh - 140px)}

/* ---------- 07 Über mich (Porträt mit Zweitbild) ---------- */
.ueber .split{gap:64px clamp(24px,4vw,96px);align-items:center}
.portraet{position:relative;padding:10% 0 0 24%}
.portraet__zweit{position:absolute;left:0;top:0;width:44%;aspect-ratio:3/4;overflow:hidden}
.portraet__zweit img{transform:scale(1.6);transform-origin:50% 72%}
.portraet__haupt{position:relative;aspect-ratio:4/5;overflow:hidden;max-width:520px;margin-left:auto}
.ueber .text{gap:24px;max-width:600px}
.ueber__signatur{padding-top:8px}
.ueber__signatur .signature{font-size:clamp(40px,3.4vw,52px);color:var(--nuber-slate-light)}

/* ---------- 08 Kundenstimmen ---------- */
.stimmen .wrap{display:flex;flex-direction:column;gap:clamp(48px,6vw,80px)}
.stimmen .head{gap:24px;max-width:760px}
.stimme{width:min(100%,1200px);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));background:var(--surface-card);color:#000}
.js .stimme:not(.is-active){display:none}
.stimme blockquote{padding:clamp(32px,5vw,72px);display:flex;flex-direction:column;gap:32px;justify-content:center;min-width:0}
.stimme__name{color:var(--accent)}
.stimme__text{color:var(--nuber-anthracite);text-wrap:pretty}
.stimme__text strong{font-weight:600;color:#000}
.stimme__bild{position:relative;min-height:360px;overflow:hidden}
.stimme__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stimme__steuerung{display:none;align-items:center;gap:24px;padding-top:8px}
.js .stimme__steuerung{display:flex}
.pfeil{width:44px;height:44px;border:1px solid var(--nuber-anthracite);background:transparent;color:var(--headline-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;border-radius:0}
.pfeil:hover{background:var(--nuber-anthracite);color:var(--nuber-mist)}
.stimme__zaehler{font:var(--text-label);letter-spacing:var(--tracking-label);color:var(--headline-ink)}

/* ---------- 09 Mein Prozess (Zeitstrahl) ---------- */
.prozess .wrap{display:flex;flex-direction:column;gap:64px}
.prozess .head{gap:24px;max-width:640px}
.schritt{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 clamp(24px,3vw,56px)}
.schritt__achse{display:flex;flex-direction:column;align-items:center;gap:16px}
.zahl{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:1px solid #000;font:var(--text-label);letter-spacing:.08em;color:#000}
.schritt__linie{flex:1;border-left:1px solid var(--border-default)}
.schritt__inhalt{display:flex;flex-direction:column;gap:24px;max-width:600px;padding:8px 0 clamp(48px,6vw,96px)}
.schritt__titel{display:flex;flex-direction:column;gap:12px}
.schritt__body{display:flex;flex-direction:column;gap:32px}
.schritt__bild{aspect-ratio:3/2;overflow:hidden;max-width:480px}
.platzhalter{aspect-ratio:3/2;max-width:480px;background:var(--nuber-greige);border:1px dashed var(--nuber-anthracite);padding:24px;color:var(--headline-ink)}

/* ---------- 10 Abschluss ---------- */
.abschluss{padding:clamp(120px,12vw,200px) 0 clamp(96px,10vw,160px);min-height:90svh;display:flex;align-items:center;background:#000;box-sizing:content-box}
.abschluss .bg>img{object-position:62% 18%}
.abschluss__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.65) 100%)}
.abschluss__text{max-width:640px;margin-left:var(--indent);display:flex;flex-direction:column;gap:32px}

/* ---------- Footer ---------- */
.footer{background:var(--surface-brand-dark);color:var(--nuber-mist);padding:clamp(24px,4vw,56px) 0 40px}
.footer .wrap{display:flex;flex-direction:column;gap:clamp(48px,6vw,80px)}
.footer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px 64px;flex-wrap:wrap}
.footer .wordmark{font-size:20px;color:var(--nuber-greige)}
.footer__spalten{display:flex;gap:40px 48px;flex-wrap:wrap;align-items:flex-start}
.footer__spalte{display:flex;flex-direction:column;gap:16px}
.footer__spalte a{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:none;color:var(--nuber-mist);white-space:nowrap;display:inline-flex;align-items:center;gap:12px}
.footer__spalte a:hover,.footer__recht a:hover{color:var(--nuber-greige)}
.footer__spalte svg{flex:none}
.footer__unten{display:flex;justify-content:space-between;align-items:center;gap:16px 40px;flex-wrap:wrap;border-top:1px solid var(--border-on-dark);padding-top:24px}
.footer__klein{font:var(--text-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--nuber-greige);white-space:nowrap}
.footer__recht{display:flex;gap:28px;flex-wrap:wrap}
.footer__recht a:hover{color:var(--nuber-mist)}

/* ---------- Unterseiten ---------- */
.hero--sub{min-height:min(88svh,780px)}
.hero--sub .hero__inner{padding-top:160px}
.btn-reihe{display:flex;gap:16px 24px;flex-wrap:wrap;align-items:center}
.btn--outline-dark{background:transparent;color:var(--nuber-mist);border-color:var(--nuber-mist)}
.btn--outline-dark:hover{background:var(--nuber-mist);border-color:var(--nuber-mist);color:#000}
.intro .split{gap:64px clamp(24px,4vw,96px);align-items:start}
.intro .text{gap:24px;max-width:600px}
.intro .aside{gap:32px;max-width:560px;padding-top:clamp(0px,4vw,56px)}
.liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.liste li{position:relative;padding:12px 0 12px 32px;border-top:1px solid var(--border-default);font:var(--text-body)}
.liste li:last-child{border-bottom:1px solid var(--border-default)}
.liste li::before{content:"";position:absolute;left:0;top:calc(12px + .82em);width:16px;border-top:1px solid var(--accent)}
.on-dark .liste li{border-color:var(--border-on-dark)}
.preis{display:flex;flex-direction:column;gap:8px;padding:28px 0;border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default)}
.preis__betrag{font:var(--text-h2);letter-spacing:var(--tracking-display);color:var(--headline-ink)}
.preis a{text-decoration:none;border-bottom:1px solid currentColor}
.listen{gap:56px;max-width:600px;padding-top:24px}
.listen .block{display:flex;flex-direction:column;gap:20px}
.reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:48px clamp(24px,3vw,48px)}
.reihe__item{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid var(--border-default)}
.on-dark .reihe__item{border-color:var(--border-on-dark)}
.on-dark .zahl{border-color:var(--nuber-mist);color:var(--nuber-mist)}
.reihe--start .reihe__item{border-top:0;padding-top:0}
.zwei-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:64px clamp(24px,4vw,96px);align-items:start}
.zwei-spalten>.stack{gap:24px;max-width:600px}
.abschluss-hell{text-align:left}
.abschluss-hell .wrap{display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.abschluss-hell .h2{max-width:900px}
.faq .split{gap:48px clamp(24px,4vw,96px);align-items:start}
.faq__liste{display:flex;flex-direction:column;border-top:1px solid var(--border-default)}
.faq__liste details{border-bottom:1px solid var(--border-default)}
.faq__liste summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer;font:500 var(--size-lead)/1.45 var(--font-body)}
.faq__liste summary::-webkit-details-marker{display:none}
.faq__liste summary::after{content:"";flex:none;width:16px;height:16px;background:linear-gradient(currentColor,currentColor) center/16px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 16px no-repeat;transition:transform 250ms var(--ease-calm)}
.faq__liste details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/16px 1px no-repeat}
.faq__liste details p{padding:0 0 28px;max-width:640px}
.faq__liste summary:hover{color:var(--accent)}
.figur figcaption{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;padding-top:12px;font:400 15px/1.5 var(--font-body);color:var(--nuber-anthracite)}
.figur figcaption .label{font-size:12px;color:var(--accent)}
.figur__bild{overflow:hidden}
.figur__bild img{width:100%;height:100%;object-fit:cover}
.galerie{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px 16px}
.galerie>.figur{grid-column:span 2}
.galerie>.figur--gross{grid-column:span 6}
.galerie .figur__bild{aspect-ratio:3/2}
.galerie .figur--gross .figur__bild{aspect-ratio:16/9}
@media (min-width:900px){.galerie>.figur:not(.figur--gross):nth-last-child(-n+2){grid-column:span 3}}
@media (max-width:899px){.galerie>.figur{grid-column:span 3}.galerie>.figur:last-child{grid-column:span 6}}
@media (max-width:559px){.galerie>.figur{grid-column:span 6}}
.case .wrap{display:flex;flex-direction:column;gap:clamp(72px,8vw,120px)}
.case__sub{font:var(--text-lead);color:var(--accent)}
.case .block{display:flex;flex-direction:column;gap:16px}
.case .block a{border-bottom:1px solid currentColor;text-decoration:none}
.case .split{gap:48px clamp(24px,4vw,96px);align-items:start}
.lead--gross{font-size:clamp(22px,.75vw + 19px,28px)}
.portraet-solo{aspect-ratio:4/5;overflow:hidden;max-width:520px;width:100%;margin-left:auto}
.bild-32{aspect-ratio:3/2}
.fehler{min-height:100svh}

/* ---------- Rechtliche Seiten (Impressum, Datenschutz, Buchungsbedingungen) ---------- */
.page-legal .nav{position:sticky}
.legal{background:var(--surface-card)}
.legal__inner{padding-top:clamp(72px,9vw,140px);padding-bottom:clamp(72px,9vw,140px)}
.legal__head{display:flex;flex-direction:column;gap:24px;max-width:760px}
.legal__stand{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--nuber-anthracite)}
.legal__body{margin-top:clamp(48px,6vw,96px);max-width:760px;display:flex;flex-direction:column;gap:clamp(44px,5vw,64px);text-wrap:pretty}
.legal__body article{display:flex;flex-direction:column;gap:18px}
.legal__body h2{display:flex;gap:16px;align-items:baseline;padding-top:16px;border-top:1px solid var(--border-default);font:600 15px/1.5 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#000}
.legal__body h2 .nr{font:var(--text-label);letter-spacing:.08em;color:var(--accent)}
.legal__body h3{font:600 var(--size-body)/1.5 var(--font-body);color:#000}
.legal__body ul,.legal__body ol{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.legal__body a{text-decoration:none;border-bottom:1px solid var(--nuber-greige)}
.legal__body a:hover{border-bottom-color:#000}
.legal__note{padding-top:28px;border-top:1px solid var(--border-default)}

/* Datenschutz: Inhaltsverzeichnis links, ab Tablet mitlaufend */
.legal__grid{display:flex;flex-wrap:wrap;gap:clamp(40px,6vw,88px);margin-top:clamp(48px,6vw,96px);align-items:flex-start}
.legal__grid .legal__body{margin-top:0;flex:1 1 540px;min-width:0}
.legal__toc{flex:1 1 210px;max-width:260px;position:sticky;top:96px;display:flex;flex-direction:column;gap:9px;padding-top:16px;border-top:1px solid var(--border-default)}
.legal__toc .label{margin-bottom:6px;color:var(--accent)}
.legal__toc a{font:400 14px/1.55 var(--font-body);color:var(--nuber-anthracite);text-decoration:none;border:0}
.legal__toc a:hover{color:#000}
@media (max-width:899px){.legal__toc{position:static;max-width:none}}
.legal__box{margin-top:8px;padding:28px 32px;background:var(--surface-page);border-left:2px solid var(--nuber-anthracite);display:flex;flex-direction:column;gap:14px}
.legal__body article{scroll-margin-top:96px}

/* ---------- Bewegung (nur mit JS, abschaltbar über „Bewegung reduzieren“) ---------- */
.motion [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 900ms var(--ease-calm) var(--delay,0ms),transform 900ms var(--ease-calm) var(--delay,0ms)}
.motion [data-reveal-img]{opacity:0;transition:opacity 1500ms var(--ease-calm)}
.motion [data-reveal].in,.motion [data-reveal-img].in{opacity:1;transform:none}
.plx>img,.bg>img{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .plx>img,.bg>img{transform:none!important;will-change:auto}
  [data-reveal],[data-reveal-img]{opacity:1!important;transform:none!important;transition:none!important}
}
.schritte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.legal__titel{margin-top:24px;font-size:clamp(18px,6vw,48px)}
.legal__stand{display:block;margin-top:20px}
.legal__body p,.legal__body li{overflow-wrap:break-word}.legal__body a{overflow-wrap:anywhere}
.hero__overlay--stark{background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.62) 45%,rgba(0,0,0,.45) 100%)}
.h1--lang{font-size:clamp(20px,6.6vw,64px)}
/* Schmale Handys: lange Wörter („Zusammenarbeit“, „Konzeptentwicklung“) brechen nur zwischen ganzen Wörtern */
.reihe .h3{font-size:clamp(20px,1.6vw,24px)}
@media (max-width:400px){
  :root{--size-h2:min(32px,8vw)}
  .schritt{grid-template-columns:36px minmax(0,1fr);gap:0 16px}
  .schritt .zahl{width:36px;height:36px}
}
@media (max-width:359px){
  :root{--size-h3:18px}
  .h3{letter-spacing:.03em}
}
/* Mein Prozess: Zeitstrahl ab Tablet-Breite nach rechts eingerückt (asymmetrische Achse) */
@media (min-width:960px){.prozess .schritte{margin-left:min(33%,440px)}}
.h1 .h1__eyebrow{display:block;margin-bottom:20px}

/* ---------- Ergänzungen 04.10.2026 ---------- */
/* Kennenlernen: Porträt im Hero. Gesicht rechts oben, Text links unten; unter 1024 px Hochformat, Text unter dem Gesicht */
.bg>picture>img{position:absolute;left:0;top:-25%;width:100%;height:150%;object-fit:cover;will-change:transform}
.hero--portraet .bg img{object-position:88% 30%}
@media (max-width:1023px){
  .hero--portraet{background:#000}
  .hero--portraet .bg>picture>img{top:-8svh;height:115svh;object-position:50% 0}
  .hero--portraet .hero__inner{padding-top:52svh}
}
@media (prefers-reduced-motion:reduce){.bg>picture>img{transform:none!important;will-change:auto}}

/* Kundenstimmen: ab 900 px Breite bleibt der Bereich stehen, die Stimmen schieben sich beim Scrollen von rechts ein.
   Ohne JS, bei „Bewegung reduzieren“ oder wenn die Karte nicht in den Bildschirm passt: Pfeile wie bisher. */
.stimmen__pin{position:static}
.stimmen__pin>.wrap{position:relative}
.stimmen.is-pinned{padding:0;height:calc(100svh + var(--stimmen-weg,120svh));overflow:clip}
.stimmen.is-pinned .stimmen__pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;padding:72px 0 24px}
.stimmen.is-pinned .wrap{gap:clamp(32px,4vw,56px)}
.stimmen.is-pinned .stimmen__fenster{width:min(100%,1200px);margin:0 auto;overflow:hidden}
.stimmen.is-pinned .stimmen__spur{display:flex;gap:32px;will-change:transform}
.stimmen.is-pinned .stimme{display:grid;flex:0 0 100%;width:100%;margin:0}
.stimmen.is-pinned .stimme blockquote{padding:clamp(32px,4vw,56px)}
.stimmen.is-pinned .stimme__bild{min-height:320px}

/* 11 Instagram */
.insta .wrap{display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}
.insta__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap}
.insta__handle{font:var(--text-label);letter-spacing:.08em;color:var(--accent);text-decoration:none}
.insta__handle:hover{color:#000}
.insta__raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,16px)}
.insta__raster img{width:100%;aspect-ratio:1;object-fit:cover;transition:opacity var(--duration-fast) var(--ease-calm)}
.insta__raster img:hover{opacity:.85}
.insta__fuss{display:flex;justify-content:space-between;align-items:center;gap:16px 40px;flex-wrap:wrap}
@media (max-width:899px){.insta__raster{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Seite Pakete und Preise (/raumkonzepte/, Entwurf 04.10.2026) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pakete{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;align-items:stretch}
.paket{display:flex;flex-direction:column;gap:24px;background:var(--surface-card);padding:clamp(28px,3vw,44px);border:1px solid var(--border-default)}
.paket__kopf{display:flex;flex-direction:column;gap:12px}
.paket__claim{font:var(--text-lead);color:var(--nuber-anthracite);text-wrap:pretty}
.paket__marke{color:var(--accent)}
.paket .liste{flex:1}
.paket__fakt{color:var(--nuber-anthracite)}
.paket__preis{border-top:1px solid var(--border-default);padding-top:20px;display:flex;flex-direction:column;gap:6px}
.paket__betrag{font:var(--text-h3);letter-spacing:.02em;color:var(--headline-ink);text-wrap:balance}
.paket--mitte{background:#000;color:var(--nuber-mist);border-color:#000}
.paket--mitte .h3,.paket--mitte .paket__betrag{color:var(--nuber-mist)}
.paket--mitte .paket__claim,.paket--mitte .paket__fakt{color:var(--nuber-greige)}
.paket--mitte .paket__marke{color:var(--nuber-slate-light)}
.paket--mitte .paket__preis{border-color:var(--border-on-dark)}
.paket--mitte .liste li{border-color:var(--border-on-dark)}
.paket--mitte .liste li::before{border-color:var(--nuber-slate-light)}
.paketvergleich{overflow-x:auto;-webkit-overflow-scrolling:touch}
.paketvergleich table{width:100%;min-width:720px;border-collapse:collapse;font:var(--text-body)}
.paketvergleich th,.paketvergleich td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-default)}
.paketvergleich thead th{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--headline-ink);border-bottom:1px solid #000}
.paketvergleich tbody th{font-weight:500;color:var(--headline-ink);width:28%}
.paketvergleich td{color:var(--nuber-anthracite)}
.paketvergleich .ist-mitte{background:var(--surface-page)}
.vergleich__skizze{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}

/* Startseite: Raumwirkung und Ausgangslage in einem Abschnitt (05.10.2026) */
.verbund__wrap{display:flex;flex-direction:column;gap:clamp(72px,9vw,140px)}
.raumwirkung .verbund__lage{gap:64px clamp(24px,4vw,96px);align-items:start}
.verbund .col{gap:40px;max-width:600px}
.verbund .head{gap:24px}
.verbund .lage{border-top-color:var(--border-default)}
.verbund .lage:last-child{border-bottom:1px solid var(--border-default)}
/* Paketseite: Kundenstimme */
.stimme-solo{gap:24px;max-width:900px}

.footer__klein.footer__ort{white-space:normal}

/* Kennenlernen: Projektanfrage (05.10.2026) */
.anfrage .split{gap:48px clamp(24px,4vw,96px);align-items:start}
.anfrage__kopf{max-width:520px}
.anfrage__alternativ a{color:inherit}
.anfrage__rahmen{background:var(--nuber-white);padding:clamp(24px,4vw,56px)}
.anfrage__form{display:flex;flex-direction:column;gap:36px}
.feld{display:flex;flex-direction:column;gap:12px;border:0;margin:0;padding:0;min-width:0}
.feld__titel{font:500 var(--size-body)/1.4 var(--font-body);color:#000;padding:0;margin-bottom:4px}
.feld__frei{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--nuber-anthracite);margin-left:8px;white-space:nowrap}
.feld__hilfe{font:400 16px/1.55 var(--font-body);color:var(--nuber-anthracite);margin:0}
.feld__hilfe--oben{margin-top:-4px;margin-bottom:4px}
.anfrage [hidden]{display:none!important}
.feld__hilfe a,.anfrage__hinweis a{color:#000}
.feld-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:36px 24px}
@media (min-width:700px){.feld--halb{max-width:calc(50% - 12px)}}
.eingabe{font:400 var(--size-body)/1.5 var(--font-body);color:#000;background:var(--nuber-white);border:1px solid var(--border-default);border-radius:0;padding:14px 16px;width:100%;min-height:52px;transition:border-color var(--duration-fast) var(--ease-calm)}
.eingabe::placeholder{color:#76777a}
.eingabe:hover{border-color:var(--nuber-anthracite)}
.eingabe:focus{outline:2px solid var(--focus-ring);outline-offset:2px;border-color:var(--nuber-anthracite)}
.eingabe--text{resize:vertical;min-height:160px}
.eingabe[aria-invalid="true"]{border-color:#9b2c2c}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;border:1px solid var(--border-default);font:400 16px/1.3 var(--font-body);color:#000;background:var(--nuber-white);transition:background var(--duration-fast) var(--ease-calm),color var(--duration-fast) var(--ease-calm),border-color var(--duration-fast) var(--ease-calm)}
.chip:hover span{border-color:#000}
.chip input:checked+span{background:#000;border-color:#000;color:var(--nuber-mist)}
.chip input:focus-visible+span{outline:2px solid var(--focus-ring);outline-offset:2px}
.feld[aria-invalid="true"] .chip span{border-color:#9b2c2c}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.anfrage__fehler{border-left:3px solid #9b2c2c;padding:12px 16px;background:#f6eeee;font:400 16px/1.55 var(--font-body);color:#000}
.anfrage__fehler ul{margin:8px 0 0;padding-left:20px}
.anfrage__fehler a{color:#000}
.anfrage__danke{display:flex;flex-direction:column;gap:16px;padding:8px 0}
.anfrage__danke:focus{outline:none}
.btn[disabled]{opacity:.6;cursor:wait}
.projekt__klein--zwei>div{aspect-ratio:16/9}
@media (min-width:1100px){.projekt__klein.projekt__klein--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}.projekt__klein--zwei>div{aspect-ratio:16/9}}
/* Projektanfrage breiter (05.10.2026, Petra): Formular bekommt zwei Drittel der Breite, Kopf bleibt beim Scrollen stehen */
@media (min-width:1100px){
  .anfrage .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .anfrage__kopf{position:sticky;top:120px}
}
.anfrage__alternativ a{white-space:nowrap}
/* Renderings Ferienhaus Sylt: Sättigung -20 % wie auf der alten Canva-Seite (05.10.2026, Petra). Moodboard und Skizze ausgenommen. */
img[src*="sylt"]:not([src*="moodboard"]):not([src*="skizze"]){filter:saturate(.8)}