/* ============================================================
   ALURAD · Service Wilms
   Paper-white studio · graphite ink · turquoise accent
   ============================================================ */

:root{
  --paper:#F5F4F2;
  --paper-2:#EEEDEA;
  --ink:#141414;
  --ink-soft:#5a5a57;
  --ink-faint:#9a9a96;
  --line:#dcdbd6;
  --graphite:#0b0c0e;
  --graphite-2:#141518;
  /* Die eine Akzentfarbe. --red-rgb trägt denselben Ton für rgba()-Tönungen.
     Der Variablenname stammt noch aus der roten Fassung, die es nicht mehr gibt —
     wer die Farbe ändern will, ändert genau diese zwei Werte. */
  --red:#47A6B0;
  --red-rgb:71,166,176;
  --serif:"Fraunces","Playfair Display",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --wordmark:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad: clamp(1.25rem, 5vw, 6rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* Das Türkis ist deutlich heller als das frühere Signalrot: weiße Schrift darauf
   käme nur auf 2,9:1. Überall dort, wo die Akzentfarbe als *Fläche* hinter Text
   liegt, trägt der Text deshalb Graphit statt Weiß (6,6:1). */
::selection{background:var(--red);color:#0b0c0e}

.display{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:.98}
em{font-style:italic}

.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--pad);width:100%}

/* Nur für Screenreader und Suchmaschinen: Text, der im Layout keinen Platz
   einnimmt. Die H1 der Startseite ist rein grafisch (Wortmarke als SVG) —
   ohne diesen Satz hätte die Seite eine H1 ganz ohne Textinhalt. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- numbered eyebrow ---------- */
.kicker{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--wordmark);
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);
}
.kicker.light{color:rgba(255,255,255,.65)}
.kicker .num{color:var(--red);font-weight:700;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.kicker::after{content:"";flex:0 0 auto;width:clamp(2rem,6vw,4.5rem);height:1px;background:currentColor;opacity:.35}

/* ============================================================
   BRAND MARK — WILMS / ALURAD / service
   One inline <symbol> per page, referenced with <use>.
   Wordmark inherits `currentColor`; the accent follows --brand-accent.
   ============================================================ */
.brand-defs{position:absolute;width:0;height:0;overflow:hidden}
.brand{
  --brand-h:36px;
  display:block;height:var(--brand-h);width:calc(var(--brand-h) * 3.03); /* viewBox 600 × 198 */
  flex:0 0 auto;
}

/* ============================================================
   SEKTIONS-ÜBERGÄNGE
   Papierweiß und Filmschwarz stoßen an drei Stellen hart aufeinander: Vertrauen
   → Leistungen, Leistungen → Team und Team → Kontakt. Ein kurzer Verlauf lässt
   sie ineinanderlaufen, statt als Kante zu springen.
   ============================================================ */
/* `isolation` macht jede Sektion zum eigenen Stapelkontext. Dadurch liegt die
   Naht (z-index -1) über dem Sektionshintergrund, aber unter dem Text — und die
   Sektion als Ganzes bleibt hinter der gepinnten Leistungs-Sektion, die im
   Dokument später kommt. Ohne das schoben sich Team-Zitat und Naht über das
   bereits fixierte Bild. */
.trust,.team{position:relative;isolation:isolate}
.trust::after,.team::before,.team::after{
  content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none;
  height:clamp(160px,26vh,320px);
}
/* Mehrere Stopps statt eines linearen Verlaufs: linear liest sich als grauer
   Balken mit sichtbarem Ende, die gestaffelten Stopps laufen weich aus.

   Die Leistungs-Sektion ist gepinnt: ein Verlauf an ihrem Kopf bliebe während
   des ganzen Pins als heller Streifen am Bildschirmrand stehen. Der Übergang
   sitzt deshalb am Fuß der Sektion davor und scrollt normal mit. */
.trust::after{bottom:0;background:linear-gradient(180deg,
  rgba(5,5,6,0) 0%,rgba(5,5,6,.06) 17%,rgba(5,5,6,.19) 34%,
  rgba(5,5,6,.44) 54%,rgba(5,5,6,.74) 74%,rgba(5,5,6,.94) 90%,#050506 100%)}
.team::before{top:0;background:linear-gradient(180deg,
  #050506 0%,rgba(5,5,6,.94) 10%,rgba(5,5,6,.74) 26%,
  rgba(5,5,6,.44) 46%,rgba(5,5,6,.19) 66%,rgba(5,5,6,.06) 83%,rgba(5,5,6,0) 100%)}
/* Team → Kontakt: der Fuß läuft ins Graphit der Kontaktsektion aus. */
.team::after{bottom:0;background:linear-gradient(180deg,
  rgba(11,12,14,0) 0%,rgba(11,12,14,.06) 17%,rgba(11,12,14,.19) 34%,
  rgba(11,12,14,.44) 54%,rgba(11,12,14,.74) 74%,rgba(11,12,14,.94) 90%,var(--graphite) 100%)}

/* ============================================================
   GRAIN + PROGRESS
   ============================================================ */
/* Filmkorn liegt jetzt als Hintergrundebene auf den Papierflächen — also
   genau dort, wo es je sichtbar war. Vorher war es eine bildschirmfüllende
   Ebene mit mix-blend-mode über der gesamten Seite, die bei jedem Scroll-Frame
   neu verrechnet werden musste: gemessen 58 % aller Frames über 32 ms, bei
   einer Wirkung von unter 1 % Helligkeit. */
.story,.trust,.team,.rpage{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),linear-gradient(var(--paper),var(--paper));
  background-blend-mode:multiply,normal;
  background-size:160px 160px,100% 100%;
  background-repeat:repeat,no-repeat;
}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:130;background:transparent}
.progress__bar{display:block;height:100%;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left}

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--graphite);
  display:grid;place-content:center;gap:1.5rem;justify-items:center;
  transition:opacity .9s var(--ease),visibility .9s;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader__mark{color:#f4f3f1}
.loader__mark .brand{--brand-h:clamp(44px,8vw,72px)}
.loader__meter{width:min(46vw,220px);height:1px;background:rgba(255,255,255,.16);overflow:hidden}
.loader__meter span{display:block;height:100%;width:0;background:var(--red);transition:width .25s linear}

/* ============================================================
   NAV
   ============================================================ */
/* A frosted bar floating clear of the edges. It carries its own background, so
   the menu reads the same over the dark film sections and over paper — the old
   difference blend flipped the colours and made the links hard to catch. */
.nav{
  position:fixed;top:.85rem;left:var(--pad);right:var(--pad);z-index:100;
  max-width:1280px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem .6rem .55rem 1.1rem;
  border-radius:50px;
  /* .88 keeps the bar reliably light even over the near-black film sections,
     where a thinner tint would slide to mid-grey and swallow the links */
  background:rgba(248,247,245,.88);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 16px 38px -22px rgba(8,9,11,.6),0 0 0 1px rgba(20,20,20,.05);
  color:var(--ink);
  /* solange die Leiste über dem Hero versteckt ist, soll der Backdrop-Blur gar
     nicht erst über der laufenden Bildsequenz gerechnet werden */
  transform:translateY(-170%);opacity:0;visibility:hidden;
  transition:transform .6s var(--ease),opacity .35s var(--ease),visibility 0s .6s;
}
.nav.show{transform:none;opacity:1;visibility:visible;transition-delay:0s}
.nav__brand{display:flex;align-items:center}
.nav__brand .brand{--brand-h:28px}
.nav__links{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2rem);font-size:.8rem;letter-spacing:.03em;font-weight:600}
/* etwas dunkler als --ink-soft: über den Filmsektionen sinkt die Leiste auf
   rgb(207) ab, dort käme --ink-soft nur noch auf 4,4:1 */
.nav__links a{color:#444442;transition:color .3s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{border:1px solid var(--ink);border-radius:50px;padding:.6rem 1.2rem;color:var(--ink) !important;
  transition:background .3s var(--ease),color .3s var(--ease)}
.nav__cta:hover{background:var(--ink);color:var(--paper) !important}
@media(max-width:720px){ .nav__links{display:none} }

/* ============================================================
   HERO  (full-screen canvas sequence)
   ============================================================ */
.hero{position:relative;height:100vh;height:100dvh;background:#050506;overflow:hidden}
.hero__stage{position:absolute;inset:0}
.hero__grade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 20%,transparent 52%,rgba(3,3,4,.78) 100%);
}
.hero__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 78% at 50% 42%,transparent 42%,rgba(0,0,0,.62) 100%);
}
.hero__content{
  position:absolute;left:0;right:0;bottom:clamp(3.6rem,11vh,7rem);z-index:3;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(.9rem,2vh,1.4rem);justify-items:center;text-align:center;padding-inline:var(--pad);
}
/* every line has to be able to wrap instead of widening the track and pushing
   the whole block sideways on narrow screens */
.hero__content > *{max-width:100%}
.hero__eyebrow{flex-wrap:wrap;justify-content:center}
.hero__content::before{
  content:"";position:absolute;inset:-40% -25% -60% -25%;z-index:-1;
  background:radial-gradient(58% 62% at 50% 58%,rgba(0,0,0,.6),rgba(0,0,0,.28) 45%,transparent 72%);
  filter:blur(10px);pointer-events:none;
}
.hero__eyebrow{
  display:flex;align-items:center;gap:.6rem;font-family:var(--wordmark);
  color:rgba(255,255,255,.72);font-size:.72rem;letter-spacing:.36em;text-transform:uppercase;font-weight:600;
}
.hero__eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 14px var(--red)}
.hero__title{display:flex;justify-content:center;max-width:100%}
.hero__brand{
  --brand-h:min(22vw,180px);
  color:#f7f6f4;
  filter:drop-shadow(0 8px 44px rgba(0,0,0,.55));
  opacity:0;transform:translateY(26px);
}
.hero__sub{
  font-size:clamp(.82rem,1.5vw,1.02rem);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.78);font-weight:400;opacity:0;
}
.hero__scroll{
  position:absolute;left:50%;bottom:1.4rem;translate:-50% 0;z-index:3;
  display:grid;justify-items:center;gap:.5rem;font-family:var(--wordmark);
  font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:500;
}
.hero__scroll i{width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.55),transparent);animation:drop 2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero__fade{position:absolute;inset:0;z-index:4;background:var(--paper);opacity:0;pointer-events:none}

/* ============================================================
   HERO ALS BILDERWECHSLER  (Fassung 3)
   Echte Resultate-Fotos statt der Videosequenz. Die Bilder stammen aus vier
   verschiedenen Arbeiten, sind bei unterschiedlichem Licht entstanden und
   passen von Haus aus nicht zueinander. Zwei Lagen bringen sie auf einen Ton:
   ein gemeinsamer Filter auf den Bildern selbst (Sättigung und Helligkeit
   herunter, Kontrast leicht hoch) und darüber ein durchgehender Schleier in
   Graphit mit einem Hauch der Akzentfarbe. Erst beides zusammen lässt die
   Motive wie eine Serie wirken.
   ============================================================ */
.shuffle{position:absolute;inset:0;background:#050506;will-change:transform;transform:scale(1.03)}
.shuffle__slide{position:absolute;inset:0;margin:0;opacity:0}
.shuffle__slide:first-child{opacity:1}
/* Die Sättigung liegt bewusst tief: erst dann setzt sich der Ton des Schleiers
   gegen die Eigenfarbe der Motive durch. Gemessen über den mittleren Farbton
   aller sechs Bilder streuten sie bei saturate(.78) über 58°, bei .4 mit
   diesem Schleier nur noch über 15° — das ist der Unterschied zwischen
   „sechs Fotos" und „eine Serie". */
.shuffle__slide img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.4) contrast(1.12) brightness(.84);
}
.shuffle__veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    /* der Akzentton — er zieht alle Motive in dieselbe Kühle */
    linear-gradient(180deg,rgba(var(--red-rgb),.22) 0%,rgba(var(--red-rgb),.12) 55%,rgba(var(--red-rgb),.19) 100%),
    /* darunter das Graphit, das die Helligkeitsunterschiede einebnet */
    linear-gradient(180deg,rgba(6,8,9,.5) 0%,rgba(6,8,9,.26) 34%,rgba(6,8,9,.34) 62%,rgba(5,6,7,.72) 100%);
}
/* unten links, damit der mittig sitzende Scroll-Hinweis frei bleibt */
.shuffle__dots{position:absolute;left:var(--pad);bottom:1.75rem;z-index:3;display:flex;gap:.45rem}
.shuffle__dots i{width:22px;height:2px;border-radius:2px;background:rgba(255,255,255,.28);
  transition:background .45s var(--ease)}
.shuffle__dots i.on{background:var(--red)}
@media(max-width:520px){ .shuffle__dots i{width:16px} }

/* ============================================================
   STORY
   ============================================================ */
.story{padding:clamp(7rem,22vh,16rem) 0;background:var(--paper)}
.story .wrap{max-width:1120px}
.story__title{font-size:clamp(2.8rem,10vw,8.5rem);margin:1.8rem 0 0}
.story__title .line{display:block;overflow:hidden}
.story__title em{color:var(--red)}
.story__body{margin-top:clamp(2.5rem,6vw,4.5rem);max-width:46ch;margin-left:auto;
  font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.65;color:var(--ink)}
.story__body .muted{color:var(--ink-soft);margin-top:1.1rem;font-size:.96em}

/* ============================================================
   LEISTUNGEN
   Früher eine gepinnte Sektion mit einer scrubbenden Bildsequenz rechts. Die
   Animation ist raus; die vier Leistungen stehen jetzt als ruhiges Raster
   nebeneinander — zwei links, zwei rechts. Ohne Pin ist die Sektion nur noch
   so hoch wie ihr Inhalt.
   ============================================================ */
.restore{position:relative;background:#050506;color:#f4f3f1;
  padding:clamp(6rem,16vh,11rem) 0 clamp(6rem,16vh,11rem)}
.restore__title{font-size:clamp(2.2rem,6vw,4.6rem);color:#fff;margin-top:1.8rem}
.restore__title em{color:var(--red)}
.restore__lead{margin-top:1.7rem;max-width:52ch;color:rgba(255,255,255,.7);
  font-size:clamp(1.02rem,1.5vw,1.25rem);line-height:1.6}

.callouts{list-style:none;margin-top:clamp(3rem,7vw,5rem);
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2.5rem,6vw,5rem)}
/* Rahmen an jedem Element statt am Raster: so bekommt jede der beiden Spalten
   ihre eigenen Trennlinien und die Zeilen bleiben auch dann sauber, wenn die
   beiden Texte einer Zeile unterschiedlich hoch ausfallen. */
.callout{display:flex;gap:1.1rem;padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.14)}
.callout:nth-child(3),.callout:nth-child(4){border-bottom:1px solid rgba(255,255,255,.14)}
.callout__idx{font-family:var(--serif);font-size:.95rem;color:var(--red);padding-top:.15rem;font-variant-numeric:tabular-nums;min-width:1.5em}
.callout h3{font-family:var(--wordmark);font-size:clamp(1.02rem,1.6vw,1.25rem);font-weight:600;letter-spacing:.005em}
.callout p{margin-top:.4rem;color:rgba(255,255,255,.62);font-size:.94rem;line-height:1.55;max-width:38ch}

@media(max-width:720px){
  .callouts{grid-template-columns:1fr;gap:0}
  .callout:nth-child(3){border-bottom:none}
}

/* ============================================================
   TRUST
   ============================================================ */
.trust{padding:clamp(7rem,20vh,15rem) 0;background:var(--paper)}
.trust__title{font-size:clamp(2.2rem,7vw,6rem);margin-top:1.8rem}
.trust__lead{margin-top:1.7rem;max-width:52ch;color:var(--ink-soft);font-size:clamp(1.02rem,1.5vw,1.25rem);line-height:1.6}
/* Die 1.7rem trennen die Überschrift vom Text. Zwischen zwei Absätzen desselben
   Blocks wäre das eine Lücke — dort reicht ein normaler Absatzabstand. */
.trust__lead + .trust__lead{margin-top:.9rem}
.marques{margin-top:clamp(3rem,7vw,5rem);display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;
  font-family:var(--wordmark);font-size:clamp(1rem,2.4vw,1.8rem);color:var(--ink);font-weight:600;letter-spacing:.01em}
.marques i{color:var(--red);font-style:normal;opacity:.7}
.marques span{opacity:.85}
.stats{margin-top:clamp(3.5rem,8vw,6rem);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);
  border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,3rem)}
.stat{display:grid;gap:.5rem}
.stat__num{font-size:clamp(1.4rem,2.8vw,2.4rem);color:var(--ink);line-height:1}
.stat__label{font-family:var(--wordmark);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.quote{margin-top:clamp(3.5rem,9vw,6.5rem);max-width:24ch}
.quote p{font-family:var(--serif);font-size:clamp(1.6rem,4vw,3rem);line-height:1.15;font-style:italic}
.quote cite{display:block;margin-top:1.2rem;font-style:normal;font-family:var(--wordmark);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
@media(max-width:720px){ .stats{grid-template-columns:1fr;gap:1.6rem} }
.reviews{margin-top:clamp(3.5rem,7vw,5.5rem);border-top:1px solid var(--line);padding-top:clamp(2.4rem,5vw,3.4rem)}
.reviews__label{font-family:var(--wordmark);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:clamp(2rem,4vw,3rem)}
.reviews__grid{columns:2;column-gap:clamp(3rem,6vw,5rem)}
@media(max-width:720px){ .reviews__grid{columns:1} }
.review{display:inline-block;width:100%;break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 clamp(2.4rem,4.5vw,3.4rem);padding-top:clamp(1.4rem,2.5vw,1.9rem);border-top:1px solid var(--line)}
.review__mark{display:block;font-family:var(--serif);font-size:2.2rem;line-height:.3;color:var(--red);margin-bottom:.9rem}
.review p{font-size:1rem;line-height:1.75;color:var(--ink)}
.review p+p{margin-top:.85rem}
.review__ps{color:var(--ink-soft);font-size:.92rem}
.review cite{display:block;margin-top:1.4rem;font-style:normal;font-family:var(--wordmark);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;line-height:1.5}

/* real workshop photo gallery */
.gallery{margin-top:clamp(3rem,6vw,4.5rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.4vw,1.1rem)}
.gallery figure{overflow:hidden;border-radius:2px;background:#111}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .9s var(--ease);filter:contrast(1.03)}
.gallery figure:hover img{transform:scale(1.05)}
@media(max-width:640px){ .gallery{grid-template-columns:1fr} }
.gallery__more{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.gallery__more a{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--wordmark);font-weight:600;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--red);padding-bottom:.35rem;transition:gap .3s var(--ease)}
.gallery__more a span{color:var(--red)}
.gallery__more a:hover{gap:1rem}

/* ============================================================
   RESULTATE (subpage)
   ============================================================ */
.rpage{background:var(--paper);color:var(--ink)}
.rhead{padding:clamp(7rem,14vh,10rem) 0 clamp(2rem,5vw,3.5rem)}
.rhead__title{font-size:clamp(2.6rem,8vw,6.5rem);margin-top:1.4rem}
.rhead__title em{color:var(--red)}
.rhead__lead{margin-top:1.5rem;max-width:54ch;color:var(--ink-soft);font-size:clamp(1.02rem,1.5vw,1.25rem);line-height:1.6}
.rcat{padding:clamp(3.5rem,7vw,6rem) 0;border-top:1px solid var(--line)}
.rcat__head{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.rcat__num{font-family:var(--wordmark);color:var(--red);font-weight:700;font-size:.9rem;letter-spacing:.1em}
.rcat__title{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,4.5vw,3.2rem);line-height:1}
.rcat__desc{color:var(--ink-soft);font-size:.98rem;max-width:42ch;line-height:1.5}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(.5rem,1.1vw,.9rem)}
.rgrid figure{overflow:hidden;border-radius:2px;background:#e7e6e2;aspect-ratio:4/3}
.rgrid img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.rgrid figure:hover img{transform:scale(1.05)}
.rfoot{padding:clamp(4rem,9vh,7rem) 0;border-top:1px solid var(--line);text-align:center;display:grid;gap:1.6rem;justify-items:center}

/* ============================================================
   TEAM
   ============================================================ */
.team{background:var(--paper);padding:clamp(6rem,15vh,11rem) 0 clamp(7rem,18vh,13rem)}
.team__title{font-size:clamp(2.4rem,7vw,6rem);margin-top:1.6rem}
.team__title em{color:var(--red)}
.team__lead{margin-top:1.6rem;max-width:46ch;font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink-soft);line-height:1.6}
.team__photo{margin:clamp(3rem,7vw,5.5rem) auto 0;max-width:1280px;padding-inline:var(--pad)}
/* Das Werkstattfoto lädt verzögert und von einer fremden Domain. Ohne
   reservierte Höhe wächst die Team-Sektion beim Eintreffen nachträglich und
   schiebt alles darunter nach unten — die gepinnte Detail-Sektion hat ihre
   Startposition dann längst berechnet und springt beim Einrasten. */
.team__photo img{width:100%;height:auto;aspect-ratio:1200/648;object-fit:cover;
  display:block;filter:grayscale(1) contrast(1.03);border-radius:2px}
.team__grid{list-style:none;margin-top:clamp(3rem,7vw,5rem);display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.5rem;border-top:1px solid var(--line);padding-top:2.2rem}
.team__grid li{display:grid;gap:.3rem;align-content:start}
.team__ph{aspect-ratio:3/4;overflow:hidden;border-radius:3px;background:#e7e6e2;margin-bottom:.9rem}
.team__ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);transition:transform .8s var(--ease)}
.team__grid li:hover .team__ph img{transform:scale(1.04)}
.team__name{font-family:var(--wordmark);font-weight:700;font-size:clamp(.95rem,1.2vw,1.12rem);letter-spacing:.005em}
.team__role{font-size:.82rem;color:var(--ink-soft);line-height:1.35}
.team__quote{margin-top:clamp(3.5rem,8vw,5.5rem);max-width:32ch}
.team__quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.2}
.team__quote cite{display:block;margin-top:1.1rem;font-style:normal;font-family:var(--wordmark);
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
@media(max-width:860px){ .team__grid{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.4rem} }
@media(max-width:460px){ .team__grid{grid-template-columns:1fr} }

/* ============================================================
   CTA
   ============================================================ */
.cta{background:var(--graphite);color:#f4f3f1;padding-top:clamp(6rem,14vh,11rem)}
.cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,7vw,6rem);align-items:start}
.cta__title{font-size:clamp(3rem,9vw,7rem);color:#fff;margin:1.6rem 0}
.cta__title em{color:var(--red)}
.cta__lead{max-width:38ch;color:rgba(255,255,255,.72);font-size:1.08rem;line-height:1.6}
.cta__service{margin-top:clamp(1.8rem,4vw,2.6rem);max-width:46ch;display:grid;gap:.85rem;
  border-left:2px solid var(--red);padding-left:clamp(.9rem,1.6vw,1.3rem)}
.cta__service p{color:rgba(255,255,255,.7);font-size:.98rem;line-height:1.6}
.cta__service strong{color:#fff;font-weight:600}
.cta__contact{list-style:none;margin-top:clamp(2rem,5vw,3.5rem);display:grid;gap:1rem}
.cta__contact li{display:grid;gap:.15rem;font-size:1rem;color:rgba(255,255,255,.9);border-top:1px solid rgba(255,255,255,.12);padding-top:1rem}
.cta__contact span{font-family:var(--wordmark);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:500}
.cta__contact a:hover{color:var(--red)}
/* the Saturday rules ride under the weekday line, quieter than the label above it */
.cta__contact .cta__hint{font-family:var(--sans);font-size:.88rem;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.58);font-weight:400}

.cta__social{list-style:none;margin-top:clamp(1.6rem,3.5vw,2.2rem);display:flex;flex-wrap:wrap;gap:.7rem}
.cta__social a{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.05rem;border-radius:50px;
  border:1px solid rgba(255,255,255,.2);font-size:.85rem;color:rgba(255,255,255,.85);
  transition:border-color .3s,color .3s,background .3s}
.cta__social a:hover{border-color:var(--red);color:#fff;background:rgba(var(--red-rgb),.12)}
.cta__social svg{width:17px;height:17px;flex:0 0 auto}

.form{display:grid;gap:1.4rem}
.drop{position:relative;border:1.5px dashed rgba(255,255,255,.25);border-radius:14px;min-height:190px;
  display:grid;place-items:center;overflow:hidden;transition:border-color .3s,background .3s;cursor:pointer;background:rgba(255,255,255,.02)}
.drop.drag{border-color:var(--red);background:rgba(var(--red-rgb),.08)}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop__inner{display:grid;justify-items:center;gap:.5rem;text-align:center;padding:1.5rem;pointer-events:none}
.drop__icon{width:44px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:grid;place-items:center;font-size:1.1rem;color:#fff}
.drop__title{font-size:1rem;color:#fff}
.drop__hint{font-size:.8rem;color:rgba(255,255,255,.45);letter-spacing:.04em}
.drop.busy{opacity:.6;pointer-events:none}
.drop.has-file{min-height:120px}

/* the picked shots, each removable */
.shots{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.6rem;margin-top:-.5rem}
.shots:empty{display:none;margin:0}
.shot{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.05)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot__x{position:absolute;top:5px;right:5px;width:24px;height:24px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(8,9,11,.72);color:#fff;font-size:1rem;line-height:1;display:grid;place-items:center;
  transition:background .25s}
.shot__x:hover{background:var(--red);color:#0b0c0e}
.shot__size{position:absolute;left:0;right:0;bottom:0;padding:.25rem .4rem;font-size:.62rem;letter-spacing:.06em;
  color:rgba(255,255,255,.85);background:linear-gradient(0deg,rgba(8,9,11,.78),transparent)}

.field{position:relative}
.field--split{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.field--split>div{position:relative}
.field input,.field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.2);
  color:#fff;font-family:var(--sans);font-size:1rem;padding:1.3rem 0 .55rem;outline:none;transition:border-color .3s;resize:none}
.field textarea{border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:1rem}
.field input:focus,.field textarea:focus{border-color:var(--red)}
.field label{position:absolute;left:0;top:1.25rem;color:rgba(255,255,255,.45);font-size:1rem;pointer-events:none;transition:.25s var(--ease)}
.field textarea~label{top:1rem}
.field input:focus~label,.field input:not(:placeholder-shown)~label,
.field textarea:focus~label,.field textarea:not(:placeholder-shown)~label{
  top:.1rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-family:var(--wordmark)}
.field textarea:focus~label,.field textarea:not(:placeholder-shown)~label{top:-1.15rem}

.btn{justify-self:start;display:inline-flex;align-items:center;gap:.7rem;background:var(--red);color:#0b0c0e;border:none;border-radius:50px;
  padding:1rem 1.8rem;font-family:var(--wordmark);font-size:.95rem;font-weight:600;letter-spacing:.02em;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s;box-shadow:0 10px 30px -12px rgba(var(--red-rgb),.7)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(var(--red-rgb),.9)}
.btn i{transition:transform .3s var(--ease)}
.btn:hover i{transform:translateX(5px)}
.form__note{font-size:.85rem;color:var(--red);min-height:1.2em}
.form__note.ok{color:#7fd18a}
.form__legal{font-size:.76rem;line-height:1.55;color:rgba(255,255,255,.42);max-width:44ch;margin-top:-.6rem}
.btn:disabled{opacity:.55;cursor:progress;transform:none;box-shadow:none}
@media(max-width:860px){ .cta__grid{grid-template-columns:1fr} }

.foot{margin-top:clamp(4rem,10vh,8rem);border-top:1px solid rgba(255,255,255,.12);padding:2rem var(--pad);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  font-family:var(--wordmark);font-size:.76rem;letter-spacing:.06em;color:rgba(255,255,255,.45);font-weight:500}
.foot__mark{display:flex;align-items:center;color:rgba(255,255,255,.82)}
.foot__mark .brand{--brand-h:42px}
.foot__links{display:flex;gap:1.4rem}
.foot__links a{color:rgba(255,255,255,.62);transition:color .3s var(--ease)}
.foot__links a:hover{color:var(--red)}
/* Tippziele: die Fusszeilen-Links massen 17 px */
@media (pointer: coarse){ .foot__links a{padding-block:.55rem} }
.form__legal a{color:rgba(255,255,255,.72);text-decoration:underline;
  text-underline-offset:.2em;text-decoration-color:rgba(255,255,255,.3);
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.form__legal a:hover{color:var(--red);text-decoration-color:var(--red)}

/* ============================================================
   REVEALS
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(28px)}
.no-js [data-reveal], .reduced [data-reveal]{opacity:1;transform:none}
.hero.reduced .hero__brand{transform:none;opacity:1}
.hero.reduced .hero__sub{opacity:1}
@media (prefers-reduced-motion: reduce){
  .hero__scroll i{animation:none}
}

/* ============================================================
   MOBIL — Feinschliff

   Zwei Dinge, die erst auf dem Telefon auffallen:

   1. Die Punkte des Bilderwechslers standen linksbündig am Rand und die
      Linie des Scroll-Hinweises lief mitten durch sie hindurch (gemessen bei
      390 px: Punkte von 20 bis 268, Hinweis mittig darüber). Jetzt stapeln
      sich Text, Hinweis und Punkte sauber übereinander, alles mittig.

   2. Die Sektionsabstände hängen an vh-Werten. Auf einem hohen, schmalen
      Display ergibt das fast denselben Weißraum wie am Desktop — nur nimmt
      er dort einen viel größeren Teil des Bildschirms ein: zwischen Werkstatt
      und Vertrauen klafften 355 px, also 42 % einer Bildschirmhöhe.
   ============================================================ */
@media(max-width:720px){
  /* Hero: Inhalt hoch, damit unter ihm Hinweis und Punkte Platz finden */
  .hero__content{bottom:clamp(7rem,15vh,9rem)}
  .hero__scroll{bottom:3.4rem}
  .hero__scroll i{height:26px}
  .shuffle__dots{left:50%;translate:-50% 0;bottom:1.35rem}

  /* Luft zwischen den Sektionen auf etwa die Hälfte */
  .story{padding:clamp(4.5rem,11vh,7rem) 0}
  .trust{padding:clamp(4.5rem,11vh,7rem) 0}
  .restore{padding:clamp(4.5rem,11vh,7rem) 0}
  .team{padding:clamp(4.5rem,11vh,7rem) 0 clamp(5rem,13vh,8rem)}
  .cta{padding-top:clamp(4.5rem,11vh,7rem)}
  .foot{margin-top:clamp(3rem,7vh,5rem)}
}

/* ============================================================
   TIPPZIELE AUF BERÜHRUNGSGERÄTEN

   Textlinks sind nur so hoch wie ihre Zeile — gemessen 24 px bei Telefon und
   E-Mail, 26 px bei „Alle Resultate ansehen". Mit dem Finger trifft man das
   schlecht; ausgerechnet die Telefonnummer ist auf dem Handy der wichtigste
   Link der ganzen Seite. Die Regel hängt an pointer:coarse statt an einer
   Breite, damit sie den Mauszeiger in Ruhe lässt.
   ============================================================ */
@media (pointer: coarse){
  .cta__contact a{display:inline-block;padding:.62rem 0}
  .cta__contact li{padding-top:.7rem}
  .gallery__more a{padding:.6rem 0 .62rem}
  /* die Leiste ist durch den CTA-Knopf ohnehin rund 50 px hoch, die Links
     bekommen also Trefferfläche geschenkt, ohne dass etwas wächst */
  .nav__links a{padding:.7rem 0}
  .menu__foot a{display:inline-block;padding:.35rem 0}
  /* Das Logo in der Leiste ist 26 px hoch. Padding wuerde die Leiste wachsen
     lassen, deshalb vergroessert eine unsichtbare Flaeche nur die Trefferzone —
     das Layout bleibt exakt, wie es ist. */
  .nav__brand{position:relative}
  .nav__brand::after{content:"";position:absolute;inset:-9px -12px}
  /* Beschriftungen und der Scroll-Hinweis lagen bei 10,6 bzw. 9,6 px */
  .cta__contact span{font-size:.74rem}
  .hero__scroll span{font-size:.7rem}
}

/* ============================================================
   MOBILE MENU (hamburger + full-screen overlay)
   ============================================================ */
.nav__toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:34px;height:34px;background:none;border:0;cursor:pointer;padding:0;color:inherit}
.nav__toggle span{display:block;width:26px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.nav__toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.open span:nth-child(2){opacity:0}
.nav__toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:150;background:var(--graphite);color:#f4f3f1;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.6rem,5vh,2.8rem);padding:6rem var(--pad) 3rem;opacity:0;visibility:hidden;transform:translateY(-5%);transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .4s}
.menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s}
.menu__brand{color:#f4f3f1;margin-bottom:.4rem}
.menu__brand .brand{--brand-h:46px}
.menu__links{display:flex;flex-direction:column}
.menu__links a{display:flex;align-items:baseline;gap:1.1rem;font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,11vw,3.4rem);line-height:1.05;color:#f7f6f4;padding:1.05rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.menu__links a .midx{font-family:var(--wordmark);font-size:.72rem;letter-spacing:.2em;color:var(--red);font-weight:700;flex:0 0 auto}
.menu__links a.cta{color:var(--red)}
.menu__foot{display:grid;gap:.55rem;font-family:var(--wordmark);font-size:.9rem;letter-spacing:.02em;color:rgba(255,255,255,.55)}
.menu__foot a{color:rgba(255,255,255,.85)}
.menu__foot a:hover{color:var(--red)}
.menu__social{display:flex;gap:1.4rem;margin-top:.35rem}
.menu__social a{display:inline-flex;align-items:center;gap:.45rem}
.menu__social svg{width:17px;height:17px;flex:0 0 auto}
.menu__legal{display:flex;gap:1.4rem;margin-top:.2rem}
.menu__legal a{color:rgba(255,255,255,.55);text-decoration:underline;
  text-underline-offset:.2em;text-decoration-color:rgba(255,255,255,.25)}
.menu__legal a:hover{color:var(--red);text-decoration-color:var(--red)}
body.menu-open{overflow:hidden}
@media(max-width:720px){
  .nav{transform:none;opacity:1;z-index:160;padding:.5rem .5rem .5rem .9rem}
  .nav__brand .brand{--brand-h:26px}
  .nav__toggle{display:flex}
  .rnav{z-index:160}
  .rnav nav{display:none}
}
/* over the open full-screen menu the bar steps back and turns light */
body.menu-open .nav{
  background:transparent;border-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:#f4f3f1;
}