/*
Theme Name: Wilhelm Sadtler
Author: Kedar & Partner
Description: Landingpage-Theme Wilhelm Sadtler Bedachungen, Bad Homburg
Version: 1.0.0
Text Domain: sadtler
*/
/* =========================================================
   Wilhelm Sadtler — Dachdeckerhandwerk seit 1747
   Landingpage Preview · style.css
   ========================================================= */

:root{
  --paper:      #F3EFE9;
  --paper-2:    #EAE4DA;
  --ink:        #17191B;
  --ink-2:      #23262A;
  --muted:      #5C6167;
  --muted-light:#A8A49D;
  --line:       rgba(23,25,27,.14);
  --line-light: rgba(255,255,255,.18);
  --bronze:     #9C7345;
  --bronze-lt:  #C49A66;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1520px;

  --ease: cubic-bezier(.19,1,.22,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(15px,1.02vw,17px);
  font-weight:400;
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }
[hidden]{ display:none !important; }

::selection{ background:var(--ink); color:var(--paper); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 20px;
}
.skip:focus{ left:12px; top:12px; }

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

/* ---------- Typography primitives ---------- */
.h2{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(2.3rem, 5.6vw, 5.6rem);
  line-height:.98;
  letter-spacing:-.045em;
}
.h2 em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
}
.h2--light{ color:#fff; }

.eyebrow{
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:14px;
  margin-bottom:clamp(20px,2.4vw,34px);
}
.eyebrow::after{
  content:""; flex:1; height:1px; background:var(--line); max-width:120px;
}
.eyebrow--light{ color:var(--muted-light); }
.eyebrow--light::after{ background:var(--line-light); }

.lead{
  font-size:clamp(1.05rem,1.45vw,1.35rem);
  line-height:1.5;
  letter-spacing:-.012em;
  color:var(--ink);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 30px;
  font-size:.8rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  border:1px solid transparent;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  white-space:nowrap;
}
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--bronze); }
.btn--solid.btn--light{ background:#fff; color:var(--ink); }
.btn--solid.btn--light:hover{ background:var(--bronze-lt); color:var(--ink); }
.btn--line{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn--line:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--ghost{
  height:42px; padding:0 22px;
  border-color:currentColor; font-size:.7rem;
}
.btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-top:env(safe-area-inset-top, 0px);
  color:#fff;
  transition:background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.nav__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(16px,1.9vw,28px) var(--pad);
  display:flex; align-items:center; gap:clamp(18px,3vw,56px);
}
.nav.is-solid{
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
}
.nav.is-hidden{ transform:translateY(-100%); transition:transform .5s var(--ease), background .5s var(--ease); }

.brand{ display:flex; align-items:center; gap:clamp(10px,1vw,16px); margin-right:auto; }
.brand__mark{ width:clamp(38px,3.2vw,48px); height:auto; flex:none; }
.brand__txt{ display:grid; line-height:1.1; }
.brand__name{
  font-family:var(--sans);
  font-size:clamp(1rem,1.3vw,1.2rem);
  font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}
.brand__sub{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:.62; margin-top:5px;
}

.nav__links{ display:flex; gap:clamp(20px,2.3vw,38px); }
.nav__links a{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  position:relative; padding-block:6px;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.burger{
  display:none;
  width:44px; height:44px; padding:0; margin-right:-10px;
  background:none; border:0; cursor:pointer; color:inherit;
  position:relative;
}
.burger span{
  position:absolute; left:11px; width:22px; height:1px; background:currentColor;
  transition:transform .45s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:19px; }
.burger span:nth-child(2){ top:25px; }
.burger.is-open span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* mobile overlay menu */
.menu{
  position:fixed; inset:0; z-index:99;
  background:var(--ink); color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(90px + env(safe-area-inset-top,0px)) var(--pad) calc(40px + env(safe-area-inset-bottom,0px));
  opacity:0; transition:opacity .45s var(--ease);
}
.menu.is-open{ opacity:1; }
.menu__links{ display:grid; gap:clamp(6px,1.6vw,14px); }
.menu__links a{
  display:flex; align-items:baseline; gap:18px;
  font-size:clamp(2rem,10vw,3.2rem); line-height:1.1;
  letter-spacing:-.035em; font-weight:500;
  border-bottom:1px solid var(--line-light); padding-bottom:14px;
}
.menu__links i{
  font-family:var(--serif); font-style:normal;
  font-size:.8rem; letter-spacing:.2em; color:var(--bronze-lt);
}
.menu__foot{ margin-top:auto; padding-top:40px; display:grid; gap:6px; font-size:.95rem; color:var(--muted-light); }
.menu__foot a{ color:#fff; }

/* =========================================================
   1 · HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:-8% 0 -8% 0; z-index:-2; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.1);
  animation:heroIn 2.4s var(--ease) forwards;
  will-change:transform;
}
@keyframes heroIn{ to{ transform:scale(1); } }

.hero__shade{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(10,11,12,.82) 0%, rgba(10,11,12,.3) 48%, rgba(10,11,12,.06) 72%, rgba(10,11,12,.4) 100%);
}

.hero__content{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) clamp(72px,11vh,130px);
}
.hero__title{
  font-weight:500;
  font-size:clamp(3rem, 9.6vw, 9.6rem);
  line-height:.9;
  letter-spacing:-.05em;
  display:grid;
  margin-bottom:clamp(22px,3vw,38px);
}
.hero__title em{
  font-family:var(--serif);
  font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,4.1vw,4.1rem);
  letter-spacing:-.01em;
  line-height:1.05;
  color:rgba(255,255,255,.9);
  margin-top:clamp(8px,1.2vw,18px);
}
.hero__lead{
  max-width:34ch;
  font-size:clamp(1rem,1.35vw,1.28rem);
  line-height:1.5; letter-spacing:-.012em;
  color:rgba(255,255,255,.82);
  margin-bottom:clamp(30px,3.6vw,48px);
}
.hero__actions span{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(30px,4.4vh,54px);
  width:1px; height:64px; background:rgba(255,255,255,.28); overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0; background:#fff;
  animation:scrollLine 2.6s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ transform:translateY(-100%); }
  55%,100%{ transform:translateY(100%); }
}

/* hero reveal lines */
.rl{ display:block; overflow:hidden; }
.rl > span{
  display:block;
  transform:translateY(105%);
  animation:lineUp 1.15s var(--ease) forwards;
}
.hero .eyebrow.rl{ display:flex; overflow:visible; }
.hero .eyebrow.rl > span{ animation-delay:.25s; }
.hero__title .rl:nth-of-type(1) > span{ animation-delay:.38s; }
.hero__title .rl:nth-of-type(2) > span{ animation-delay:.5s; }
.hero__lead > span{ animation-delay:.68s; }
.hero__actions > span{ animation-delay:.82s; }
@keyframes lineUp{ to{ transform:translateY(0); } }

/* =========================================================
   Scroll reveals
   ========================================================= */
/* Nur wenn JS laeuft (html.js) wird ueberhaupt versteckt -> nie eine leere Seite */
.js [data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity 1s var(--ease), transform 1.1s var(--ease);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .rl > span{ transform:none !important; animation:none !important; }
  .hero__media img{ animation:none; transform:none; }
  .hero__scroll span{ animation:none; }
}

/* =========================================================
   2 · GESCHICHTE / 1747
   ========================================================= */
.story{ padding:clamp(86px,12vw,180px) 0 clamp(70px,9vw,140px); }
.story__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:clamp(30px,5vw,96px);
  row-gap:clamp(40px,6vw,90px);
  align-items:start;
}
.year{
  display:block;
  font-family:var(--serif);
  font-size:clamp(6rem,16.5vw,17rem);
  line-height:.8;
  letter-spacing:-.045em;
  font-feature-settings:"lnum" 1;
}
.year__cap{
  margin-top:clamp(20px,2.4vw,34px);
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); line-height:1.8;
}
.story__col{ display:flex; flex-direction:column; min-width:0; }
.story__grid{ align-items:stretch; row-gap:0; }
.story__text{ padding-top:clamp(0px,1.6vw,26px); }
.story__text .h2{ margin-bottom:clamp(22px,2.6vw,36px); }
.story__text .lead{ margin-bottom:22px; }
.story__text p + p{ margin-top:18px; color:var(--muted); }

/* Bilder fuellen den Rest der Spalte -> beide enden buendig */
.story__img{ position:relative; overflow:hidden; flex:1 1 auto; min-height:clamp(200px,24vw,340px); margin-top:clamp(24px,3vw,44px); }
.story__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* =========================================================
   3 · LEISTUNGEN
   ========================================================= */
.services{ padding:clamp(70px,9vw,130px) 0 clamp(80px,10vw,150px); }
.sec-head{ max-width:min(100%,900px); margin-bottom:clamp(44px,6vw,86px); }
.sec-head__note{
  margin-top:clamp(18px,2vw,28px);
  color:var(--muted); max-width:46ch;
  font-size:clamp(.98rem,1.15vw,1.12rem);
}
.sec-head--row{
  max-width:none;
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:flex-end; gap:30px;
}
.sec-head--row .sec-head__note{ margin-top:0; }

.svc{ border-top:1px solid var(--line); }
.svc__item{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,42%);
  align-items:center;
  gap:clamp(20px,4vw,64px);
  padding:clamp(24px,3vw,44px) 0;
  border-bottom:1px solid var(--line);
  transition:opacity .5s var(--ease);
}
.svc__num{
  font-family:var(--serif);
  font-size:clamp(1rem,1.5vw,1.5rem);
  color:var(--bronze);
  letter-spacing:.02em;
  align-self:start;
  padding-top:.35em;
  min-width:2.2em;
}
.svc__body h3{
  font-size:clamp(1.6rem,3.9vw,3.6rem);
  line-height:1.05; letter-spacing:-.035em; font-weight:500;
  transition:transform .7s var(--ease), color .5s var(--ease);
}
.svc__body p{
  margin-top:14px; color:var(--muted);
  max-width:42ch; font-size:clamp(.95rem,1.05vw,1.05rem);
}
.svc__img{ overflow:hidden; aspect-ratio:16/10; }
.svc__img img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.3s var(--ease), filter 1.1s var(--ease);
  filter:saturate(.92);
}
.svc__item:hover .svc__img img{ transform:scale(1.1); filter:saturate(1.05); }
.svc__item:hover .svc__body h3{ transform:translateX(14px); }
.svc__go{
  display:block; height:1px; width:0; margin-top:22px;
  background:var(--bronze);
  transition:width .9s var(--ease);
}
.svc__item:hover .svc__go{ width:clamp(60px,9vw,150px); }

/* =========================================================
   4 · QUALITÄT / WERTE
   ========================================================= */
.values{
  background:var(--paper-2);
  padding:clamp(80px,10vw,150px) 0;
}
.values__grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr) minmax(0,.7fr);
  gap:clamp(34px,5vw,80px);
  align-items:start;
}
.values__head .h2{ margin-bottom:clamp(20px,2.4vw,32px); }
.values__head p{ color:var(--muted); max-width:36ch; }

.values__list{ border-top:1px solid var(--line); }
.values__list li{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(18px,3vw,44px);
  padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.values__num{
  font-family:var(--serif);
  font-size:.95rem; color:var(--bronze); letter-spacing:.06em;
}
.values__list h3{
  font-size:clamp(1.3rem,2.3vw,2.05rem);
  letter-spacing:-.03em; line-height:1.1; font-weight:500;
}
.values__list p{ margin-top:8px; color:var(--muted); font-size:.98rem; max-width:40ch; }

.values__img{ overflow:hidden; align-self:stretch; min-height:clamp(380px,34vw,600px); }
.values__img img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   5 · PROJEKTE
   ========================================================= */
.work{ padding:clamp(80px,10vw,150px) 0 clamp(70px,9vw,130px); }
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(54px,5.3vw,92px);
  gap:clamp(12px,1.6vw,24px);
}
.tile{
  position:relative; overflow:hidden;
  background:var(--paper-2);
}
/* Asymmetrisches Editorial-Raster */
.tile:nth-child(1){ grid-column:1 / 8;  grid-row:1 / span 6; }
.tile:nth-child(2){ grid-column:8 / 13; grid-row:1 / span 3; }
.tile:nth-child(3){ grid-column:8 / 13; grid-row:4 / span 3; }
.tile:nth-child(4){ grid-column:1 / 8;  grid-row:7 / span 4; }
.tile:nth-child(5){ grid-column:8 / 13; grid-row:7 / span 4; }
.tile:nth-child(6){ grid-column:1 / 13; grid-row:11 / span 4; }
.tile:nth-child(7){ grid-column:1 / 7;  grid-row:15 / span 4; }
.tile:nth-child(8){ grid-column:7 / 13; grid-row:15 / span 4; }

.tile img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.015);
  transition:transform 1.4s var(--ease), filter 1s var(--ease);
  filter:saturate(.94);
}
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,13,14,.62), rgba(12,13,14,0) 52%);
  opacity:.7; transition:opacity .7s var(--ease);
}
.tile figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(16px,1.8vw,28px);
  display:flex; justify-content:space-between; align-items:flex-end;
  color:#fff;
}
.tile__cat{
  font-size:clamp(.72rem,.95vw,.88rem);
  letter-spacing:.17em; text-transform:uppercase; font-weight:500;
  transform:translateY(0);
  transition:transform .7s var(--ease);
}
.tile__idx{
  font-family:var(--serif); font-size:.9rem;
  color:rgba(255,255,255,.65);
}
.tile:hover img{ transform:scale(1.075); filter:saturate(1.02); }
.tile:hover::after{ opacity:1; }
.tile:hover .tile__cat{ transform:translateY(-4px); }

/* =========================================================
   6 · STATEMENT
   ========================================================= */
.statement{
  position:relative;
  min-height:clamp(440px,72vh,760px);
  display:flex; align-items:center;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
}
.statement__media{ position:absolute; inset:-12% 0 -12% 0; z-index:-2; }
.statement__media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.statement::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(10,11,12,.82) 0%, rgba(10,11,12,.5) 55%, rgba(10,11,12,.28) 100%);
}
.statement__inner{ padding-block:clamp(60px,9vw,110px); }
.statement h2{
  font-size:clamp(2.2rem,6.2vw,6rem);
  line-height:.98; letter-spacing:-.042em; font-weight:500;
  max-width:16ch;
}
.statement h2 em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.01em;
}
.statement p{
  margin-top:clamp(22px,2.6vw,34px);
  max-width:44ch;
  font-size:clamp(1rem,1.25vw,1.2rem);
  color:rgba(255,255,255,.78);
}

/* =========================================================
   7 · ÜBER UNS
   ========================================================= */
.about{ padding:clamp(64px,9.5vw,140px) 0; }
.about__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,6vw,96px);
  align-items:center;
}
.about__img{ overflow:hidden; aspect-ratio:4/3; }
.about__img img{ width:100%; height:100%; object-fit:cover; }
.about__text .h2{ font-size:clamp(2rem,3.6vw,3.6rem); line-height:1.02; }
.about__text p{ font-size:clamp(.92rem,1vw,1rem); }
.about__text .h2{ margin-bottom:clamp(18px,2vw,26px); }
.about__text p{ color:var(--muted); max-width:52ch; }
.about__text p + p{ margin-top:16px; }

.facts{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,64px);
  margin-top:clamp(34px,4vw,52px);
  padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--line);
}
.facts dt{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.facts dd{
  font-family:var(--serif);
  font-size:clamp(1.7rem,3vw,2.6rem);
  line-height:1; letter-spacing:-.02em;
}

/* =========================================================
   8 · KONTAKT
   ========================================================= */
.contact{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  padding:clamp(80px,11vw,160px) 0 clamp(60px,8vw,110px);
  isolation:isolate;
}
.contact__bg{ position:absolute; inset:0; z-index:-2; }
.contact__bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.16; filter:grayscale(1) contrast(1.15);
}
.contact::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(23,25,27,.9), rgba(23,25,27,.97));
}
.contact__head{ max-width:900px; margin-bottom:clamp(44px,6vw,80px); }

.contact__body{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(34px,6vw,90px);
  padding-top:clamp(28px,3vw,44px);
  border-top:1px solid var(--line-light);
}
.contact__side{ display:grid; gap:clamp(26px,3vw,40px); align-content:start; }
.contact__lbl{
  display:block; margin-bottom:14px;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-light);
}
.contact address{ font-style:normal; line-height:1.85; color:rgba(255,255,255,.9); }
.contact__big{
  font-size:clamp(1.05rem,1.7vw,1.6rem);
  letter-spacing:-.025em; line-height:1.25;
  display:inline-block;
  border-bottom:1px solid transparent;
  transition:border-color .5s var(--ease), color .5s var(--ease);
  word-break:break-word;
}
.contact__big:hover{ border-color:var(--bronze-lt); color:var(--bronze-lt); }

/* ---------- Formular ---------- */
.form{ display:grid; gap:clamp(18px,2.2vw,28px); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,28px); }
.field{ display:grid; }
.field label{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-light); margin-bottom:10px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid var(--line-light);
  border-radius:0;
  padding:10px 0;
  color:#fff;
  font-family:var(--sans);
  font-size:clamp(.95rem,1.1vw,1.05rem);
  letter-spacing:-.01em;
  transition:border-color .45s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:70px; line-height:1.6; }
.field select{
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted-light) 50%),
                   linear-gradient(135deg,var(--muted-light) 50%,transparent 50%);
  background-position:calc(100% - 9px) 19px, calc(100% - 4px) 19px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.field select option{ background:var(--ink); color:#fff; }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--bronze-lt); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{ outline:2px solid var(--bronze-lt); outline-offset:6px; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{ border-bottom-color:#C9705A; }

.form__submit{ justify-self:start; margin-top:clamp(4px,1vw,12px); }
.form__note{
  font-size:.72rem; letter-spacing:.06em;
  color:var(--muted-light); max-width:44ch;
}
.form__note.is-error{ color:#D98A76; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  background:var(--ink); color:var(--muted-light);
  padding:clamp(26px,3vw,38px) 0 calc(clamp(26px,3vw,38px) + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line-light);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
.foot__inner{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:18px 34px;
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,28px); }
.foot__nav a:hover, .foot__brand{ color:#fff; }
.foot__credit{
  margin-top:clamp(20px,2.4vw,30px);
  padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line-light);
  font-size:.66rem; letter-spacing:.18em;
  color:rgba(168,164,157,.7);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .values__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
  .values__img{ grid-column:1 / -1; min-height:0; aspect-ratio:16/7; }
}

@media (max-width:980px){
  .nav__links, .nav__cta{ display:none; }
  .burger{ display:block; }

  .story__grid{ grid-template-columns:1fr; row-gap:clamp(30px,6vw,50px); }
  .story__grid{ row-gap:clamp(30px,6vw,50px); }
  .story__img{ flex:none; min-height:0; aspect-ratio:3/2; }
  .year{ font-size:clamp(7rem,30vw,13rem); }

  .svc__item{ grid-template-columns:auto 1fr; }
  .svc__img{ grid-column:1 / -1; margin-top:8px; aspect-ratio:16/9; }
  .svc__num{ padding-top:.5em; }

  .values__grid{ grid-template-columns:1fr; }
  .values__img{ min-height:0; aspect-ratio:16/8; }

  .about__grid{ grid-template-columns:1fr; }
  .about__img{ aspect-ratio:16/10; }

  .contact__body{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .form__row{ grid-template-columns:1fr; }
  .form__submit{ justify-self:stretch; }
  .grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .tile:nth-child(n){ grid-column:1 / -1; grid-row:auto; aspect-ratio:4/3; }
  .tile:nth-child(1){ aspect-ratio:4/4.6; }

  .hero{ align-items:flex-end; }
  .hero__content{ padding-bottom:clamp(120px,22vh,190px); }
  .hero__lead{ max-width:26ch; }
  .hero__actions span{ flex-direction:column; align-items:stretch; }
  .btn{ height:54px; }
  .hero__scroll{ display:none; }

  .sec-head--row{ flex-direction:column; align-items:flex-start; }

  .facts{ gap:22px 40px; }
  .foot__inner{ flex-direction:column; align-items:flex-start; text-align:left; }
}

@media (max-width:520px){
  .eyebrow::after{ max-width:48px; }
  .svc__item{ grid-template-columns:1fr; gap:10px; }
  .svc__num{ padding-top:0; }
  .values__list li{ grid-template-columns:1fr; gap:6px; }
}

/* ---------- Contact Form 7 ---------- */
.form--cf7 .wpcf7-form{ display:grid; gap:clamp(18px,2.2vw,28px); }
.form--cf7 .wpcf7-form p{ margin:0; }
.form--cf7 label{ display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-light); }
.form--cf7 .wpcf7-form-control-wrap{ display:block; margin-top:10px; }
.form--cf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.form--cf7 select,
.form--cf7 textarea{
  width:100%; max-width:100%; box-sizing:border-box; background:transparent;
  border:0; border-bottom:1px solid var(--line-light); border-radius:0;
  padding:10px 0; color:#fff; font-family:var(--sans);
  font-size:clamp(.95rem,1.1vw,1.05rem); letter-spacing:-.01em;
  -webkit-appearance:none; appearance:none; transition:border-color .45s var(--ease);
}
.form--cf7 textarea{ resize:vertical; min-height:70px; line-height:1.6; }
.form--cf7 select option{ background:var(--ink); color:#fff; }
.form--cf7 input:focus, .form--cf7 select:focus, .form--cf7 textarea:focus{ outline:none; border-bottom-color:var(--bronze-lt); }
.form--cf7 .wpcf7-submit{
  cursor:pointer; justify-self:start; background:#fff; color:var(--ink);
  border:1px solid #fff; border-radius:999px; padding:15px 32px;
  font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
}
.form--cf7 .wpcf7-not-valid-tip{ color:#D98A76; font-size:.72rem; margin-top:6px; }
.form--cf7 .wpcf7-response-output{ margin:0 !important; padding:0 !important; border:0 !important; font-size:.78rem; color:var(--muted-light); }
.form--cf7 .wpcf7-spinner{ display:none; }
.form--cf7 .wpcf7-acceptance, .form--cf7 .wpcf7-list-item{ margin:0; font-size:.8rem; color:var(--muted-light); }
@media (max-width:600px){ .form--cf7 .wpcf7-submit{ justify-self:stretch; width:100%; } }

/* CF7 mit Theme-Klassen (.form__row/.field): gleiches Layout wie zuvor */
.form--cf7 .field .wpcf7-form-control-wrap{ margin-top:0; }
.form--cf7 .field label{ margin-bottom:10px; }
.form--cf7 .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,28px); }
.form--cf7 .field select{
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted-light) 50%),linear-gradient(135deg,var(--muted-light) 50%,transparent 50%);
  background-position:calc(100% - 9px) 19px, calc(100% - 4px) 19px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.form--cf7 .wpcf7-not-valid{ border-bottom-color:#C9705A !important; }
.form--cf7 .wpcf7-submit:hover{ background:var(--bronze-lt); border-color:var(--bronze-lt); }
@media (max-width:600px){ .form--cf7 .form__row{ grid-template-columns:1fr; } }

/* CF7 Feinschliff */
.form--cf7 .wpcf7-form > p:empty, .form--cf7 .hidden-fields-container, .form--cf7 .screen-reader-response{ display:none; }
.form--cf7 textarea{ height:110px; }
.form--cf7 ::placeholder{ color:var(--muted-light); opacity:.8; }
.form--cf7 .wpcf7-form br{ display:none; }

/* Über-uns-Sektion kompakter */
.about__text p{ max-width:60ch; }
.about__text .facts{ margin-top:clamp(22px,2.4vw,32px); padding-top:clamp(16px,1.8vw,24px); }
.about__text .facts dd{ font-size:clamp(1.5rem,2.3vw,2rem); }
.about__text .eyebrow{ margin-bottom:clamp(14px,1.6vw,22px); }

/* Über-uns: Bild so hoch wie der Text */
.about__grid{ align-items:stretch; }
.about__text{ align-self:center; }
.about__text .h2{ font-size:clamp(2.1rem,3.9vw,3.9rem); }
.about__text p{ font-size:clamp(.95rem,1.08vw,1.06rem); }
.about__img{ position:relative; aspect-ratio:auto; min-height:clamp(380px,36vw,560px); }
.about__img img{ position:absolute; inset:0; }
@media (max-width:900px){ .about__img{ min-height:0; aspect-ratio:16/10; } }

/* Footer: rechtliche Links */
.foot__credit{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 28px; align-items:center; }
.foot__legal{ display:flex; gap:clamp(18px,2.4vw,32px); }
.foot__legal a{ color:inherit; text-transform:uppercase; transition:color .35s var(--ease); }
.foot__legal a:hover{ color:#fff; }

/* Rechtstexte (Impressum, Datenschutz, normale Seiten) */
.legal{ padding:clamp(130px,15vw,200px) 0 clamp(70px,9vw,130px); }
.legal__inner{ max-width:820px; }
.legal__title{ font-family:var(--sans); font-weight:500; font-size:clamp(2.2rem,5vw,4rem); letter-spacing:-.04em; line-height:1; margin-bottom:clamp(28px,4vw,52px); }
.legal__body{ color:var(--muted); line-height:1.75; font-size:clamp(.95rem,1.05vw,1.02rem); overflow-wrap:anywhere; }
.legal__body h2, .legal__body h3{ font-family:var(--sans); font-weight:500; color:var(--ink); letter-spacing:-.02em; line-height:1.15; margin:clamp(30px,3.6vw,48px) 0 12px; }
.legal__body h2{ font-size:clamp(1.3rem,2vw,1.7rem); }
.legal__body h3{ font-size:clamp(1.1rem,1.5vw,1.3rem); }
.legal__body p, .legal__body ul, .legal__body ol{ margin-bottom:14px; }
.legal__body ul, .legal__body ol{ padding-left:1.3em; }
.legal__body a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.legal__body strong{ color:var(--ink); font-weight:500; }

/* Unterseiten ohne Hero: Menue immer sichtbar (dunkel auf hell) */
body:not(.home) .nav{ background:var(--paper); color:var(--ink); box-shadow:0 1px 0 var(--line); }
body:not(.home) .nav .btn--ghost{ border-color:var(--ink); color:var(--ink); }

/* Header: dünne Linie unten */
.nav{ border-bottom:1px solid rgba(255,255,255,.35); box-shadow:none; }
.nav.is-solid, body:not(.home) .nav{ border-bottom-color:rgba(23,25,27,.18); box-shadow:none; }