/* ===================================================================
   dailyshirt.de — Gestaltungssystem
   Sand, Anthrazit, Messing. Instrument Serif + Libre Franklin.
   Gilt fuer alle Seiten und beide Sprachen.
   =================================================================== */

:root{
  --sand:#E6E1D5;
  --sand-l:#F1EDE3;
  --sand-d:#D8D2C2;

  --anthra:#23262A;
  --anthra-2:#2E3238;

  --brass:#9B7A3C;        /* nur Linien, Rahmen, Flaechen */
  --brass-t:#6F5624;      /* Text auf Sand — 5,3:1 */
  --brass-d:#C2A05A;      /* Text auf Anthrazit — 6,1:1 */

  --ink:#1C1E20;
  --muted:#4A4E52;        /* auf Sand — 6,4:1 */
  --bone:#EDE9DE;
  --bone-m:#B4B8BC;       /* auf Anthrazit — 7,6:1 */

  --rule:rgba(35,38,42,.15);
  --rule-s:rgba(35,38,42,.09);
  --rule-d:rgba(237,233,222,.16);

  --measure:64ch;
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press:160ms;
  --dur-hover:180ms;
  --dur-panel:250ms;
  --dur-reveal:600ms;
  --ease:var(--ease-out);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--sand);
  color:var(--ink);
  font-family:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1;}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,3.6vw,56px);}
a{color:var(--anthra);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--brass-t);}
:focus-visible{outline:2px solid var(--anthra);outline-offset:3px;border-radius:1px;}
img,svg{max-width:100%;}
h1,h2,h3{text-wrap:balance;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--anthra);color:var(--bone);padding:14px 22px;
  font-size:14px;font-weight:600;text-decoration:none;
}
.skip:focus{left:0;color:var(--bone);}

/* ---------- Typografie ---------- */
.kicker{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-t);margin:0 0 22px;
}
h1{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(40px,6.4vw,76px);line-height:1.0;letter-spacing:-.022em;
  color:var(--anthra);margin:0 0 26px;
}
/* Die Vergangenheit tritt zurueck, die Gegenwart traegt den Kontrast.
   Die Schrift erzaehlt damit dieselbe Geschichte wie der Text. */
h1{color:var(--muted);}
h1 em{font-style:italic;color:var(--anthra);}
h1 em::after{
  content:"";display:block;height:3px;margin-top:.2em;width:3.2em;
  background-image:var(--stich);
}
h2 em{font-style:italic;color:var(--brass-t);}
h2{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(29px,4vw,50px);line-height:1.06;letter-spacing:-.016em;
  color:var(--anthra);margin:0 0 20px;
}
h3{font-size:17px;font-weight:600;color:var(--ink);margin:0 0 8px;letter-spacing:-.005em;}
.lead{font-size:clamp(16px,1.5vw,18px);line-height:1.64;color:var(--muted);max-width:var(--measure);margin:0;}
.lead b{color:var(--ink);font-weight:600;}
.lead + .lead{margin-top:16px;}
.note{font-size:13.5px;line-height:1.55;color:var(--muted);margin:16px 0 0;max-width:70ch;}

/* ---------- Layout ---------- */
section{padding:clamp(60px,7vw,116px) 0;border-top:1px solid var(--rule);}
.two{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4.6vw,72px);align-items:start;}
.two.end{align-items:end;}
@media (max-width:940px){.two{grid-template-columns:1fr;align-items:stretch;}}
.stack{display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
.stack>*{width:100%;}

/* ---------- Buttons ---------- */
.cta{display:flex;flex-wrap:wrap;gap:14px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;letter-spacing:.012em;text-decoration:none;
  padding:15px 28px;min-height:50px;border-radius:1px;line-height:1.3;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn-p{background:var(--anthra);color:var(--bone);border:1px solid var(--anthra);}
.btn-p:hover{background:var(--anthra-2);color:var(--bone);}
.btn-s{background:transparent;color:var(--anthra);border:1px solid var(--rule);}
.btn-s:hover{border-color:var(--anthra);background:rgba(35,38,42,.04);color:var(--anthra);}
.btn-sm{padding:11px 19px;min-height:44px;font-size:13.5px;}
.on-dark .btn-p{background:var(--brass);border-color:var(--brass);color:#1A1305;}
.on-dark .btn-p:hover{background:#B08D48;color:#1A1305;}
.on-dark .btn-s{color:var(--bone);border-color:var(--rule-d);}
.on-dark .btn-s:hover{border-color:var(--bone);background:rgba(237,233,222,.07);color:var(--bone);}

/* ---------- Kopfzeile ---------- */
/* 1px hoher Wachposten ueber dem Kopf - der Beobachter meldet daran,
   ob gescrollt wurde. Billiger als ein Scroll-Zuhoerer. */
#kopf-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;}
.site-head{
  position:sticky;top:0;z-index:50;
  background-color:var(--sand);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.site-head.is-scrolled{border-bottom-color:var(--rule);background-color:rgba(230,225,213,.94);backdrop-filter:saturate(1.4) blur(9px);}
/* Nur senkrecht setzen - der waagerechte Abstand kommt von .wrap.
   Ein padding-Kurzschreibweise wuerde ihn ueberschreiben. */
.head-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);
         padding-top:22px;padding-bottom:22px;}
.logo{display:flex;align-items:center;color:var(--anthra);text-decoration:none;flex-shrink:0;}
.logo svg{height:36px;width:auto;display:block;}
.mainnav{display:none;}
.mainnav a{
  position:relative;font-size:14.5px;font-weight:500;text-decoration:none;color:var(--ink);
  padding:11px 1px;min-height:44px;display:inline-flex;align-items:center;
}
.mainnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.mainnav a:hover{color:var(--anthra);}
@media (hover: hover) and (pointer: fine){
  .mainnav a:hover::after{transform:scaleX(1);}
}
.mainnav a[aria-current]::after{transform:scaleX(1);}
.head-side{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.langsw{font-size:13px;font-weight:600;letter-spacing:.07em;display:flex;gap:5px;align-items:center;}
.langsw a{text-decoration:none;padding:11px 3px;min-height:44px;display:inline-flex;align-items:center;}
.langsw [aria-current]{
  color:var(--muted);padding:11px 3px;min-height:44px;
  display:inline-flex;align-items:center;cursor:default;
}
.langsw i{color:var(--rule);font-style:normal;}

/* ---------- Seitenumschalter ---------- */
.segschalter{
  position:relative;display:inline-flex;gap:2px;margin-left:auto;
  background-color:rgba(35,38,42,.055);border:1px solid var(--rule);
  border-radius:2px;padding:3px;
}
.segschalter a{
  display:inline-flex;align-items:center;gap:7px;
  min-height:40px;padding:0 18px;border-radius:1px;
  font-size:14px;font-weight:600;color:var(--muted);
  text-decoration:none;white-space:nowrap;
  transition:color .25s var(--ease),background-color .25s var(--ease);
}
.segschalter a:hover{color:var(--anthra);}
.segschalter a[aria-current]{
  background-color:var(--sand-l);color:var(--anthra);
  box-shadow:0 1px 2px rgba(35,38,42,.09);
}
.segschalter .segmarke{
  font-size:9.5px;font-weight:600;letter-spacing:.12em;color:var(--brass-t);
  border:1px solid rgba(155,122,60,.5);border-radius:1px;padding:1px 4px;
}
.seg-mobil{display:none;}
@media (max-width:960px){
  .segschalter{display:none;}
  .seg-mobil{display:flex;width:100%;margin:0 0 16px;}
  .seg-mobil a{flex:1;justify-content:center;}
}

/* Menuknopf — nur unterhalb des Umbruchs sichtbar */
.menubtn{
  display:none;align-items:center;justify-content:center;gap:9px;
  min-height:44px;min-width:44px;padding:10px 14px;
  background:transparent;border:1px solid var(--rule);border-radius:1px;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--anthra);cursor:pointer;
}
.menubtn:hover{border-color:var(--anthra);}
.menubtn svg{width:17px;height:17px;}
.menubtn .ic-zu{display:none;}
.menubtn[aria-expanded="true"] .ic-auf{display:none;}
.menubtn[aria-expanded="true"] .ic-zu{display:block;}

.mobilenav{display:none;border-top:1px solid var(--rule);
           padding-top:10px;padding-bottom:22px;}
.mobilenav a{
  display:flex;align-items:center;min-height:52px;padding:6px 0;
  font-size:17px;font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule-s);
}
.mobilenav a:last-of-type{border-bottom:0;}
.mobilenav .mlang{display:flex;gap:18px;padding-top:16px;margin-top:10px;border-top:1px solid var(--rule);}
.mobilenav .mlang a{border-bottom:0;min-height:44px;font-size:14px;font-weight:600;letter-spacing:.07em;}

@media (max-width:960px){
  .mainnav{display:none;}
  .menubtn{display:inline-flex;}
  .head-in{justify-content:space-between;}
  .head-side{margin-left:auto;}
  .head-side .langsw{display:none;}
  .site-head.is-open .mobilenav{display:block;}
}

/* ---------- Bildplatzhalter ---------- */
.ph{
  position:relative;display:flex;align-items:flex-end;padding:18px;overflow:hidden;
  background-color:var(--sand-d);border:1px solid var(--rule);
  font-size:11.5px;line-height:1.5;letter-spacing:.03em;color:var(--muted);
  background-image:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 62%);
}
.ph::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,transparent 0 13px,rgba(35,38,42,.028) 13px 26px);
}
.ph span{position:relative;}

/* ---------- Fotoflaechen ---------- */
.bildbox{
  position:relative;overflow:hidden;
  background-color:var(--sand-d);border:1px solid var(--rule);
}
.bildbox img{
  display:block;width:100%;height:100%;object-fit:cover;
}
/* Freigestellte Portraets stehen auf hellem Grund, ohne harte Bildkante */
.bildbox.portraet{
  background-color:var(--sand-l);border-color:var(--rule);
  aspect-ratio:1/1;display:flex;align-items:flex-end;justify-content:center;
}
.bildbox.portraet img{object-fit:contain;object-position:bottom center;}
.bildbox.hero-img{aspect-ratio:3/4;min-height:290px;max-height:min(70vh,640px);align-self:end;}

/* ---------- Hero ---------- */
.hero{padding:clamp(44px,6vw,92px) 0 clamp(34px,4vw,60px);}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,4.8vw,72px);align-items:end;}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;align-items:stretch;}}
.hero .kicker{
  padding-bottom:14px;border-bottom:0;position:relative;
}
.hero .kicker::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background-image:var(--stich);
}
.hero .sub{font-size:clamp(16px,1.6vw,19px);line-height:1.62;color:var(--muted);max-width:50ch;margin:0 0 34px;}
.hero .sub b{color:var(--ink);font-weight:600;}
.hero-img{aspect-ratio:3/4;min-height:290px;}

/* ===================================================================
   Signatur: die Naht.
   Ein Steppstich im Rhythmus einer Naehmaschine ersetzt die Balken
   ueber Kennzahlen und Ablaufschritten. Er laeuft beim Erscheinen von
   links nach rechts durch - wie eine Naht entsteht. Kein Bild, nur CSS.
   =================================================================== */
:root{
  --stich: repeating-linear-gradient(90deg,
           var(--brass) 0 6px, transparent 6px 10px);
}
/* Die Naht ist immer da. Nur ihr Durchlaufen haengt an .js -
   ohne JavaScript steht sie sofort vollstaendig. */
.naht{display:block;height:3px;background-image:var(--stich);}
.js .naht{clip-path:inset(0 100% 0 0);transition:clip-path var(--dur-reveal) var(--ease-out);}
.js .naht.is-in,.js .is-in > .naht{clip-path:inset(0 0 0 0);}

/* ---------- Kennzahlenband ---------- */
.band{border-top:1px solid var(--rule);background-color:rgba(216,210,194,.5);padding:clamp(30px,3.4vw,46px) 0;}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,2.6vw,38px);}
@media (max-width:940px){.kpis{grid-template-columns:repeat(2,1fr);gap:30px;}}
@media (max-width:540px){.kpis{grid-template-columns:1fr;}}
.kpi{padding-top:16px;position:relative;}
.kpi::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background-image:var(--stich);
}
.js .kpi::before{clip-path:inset(0 100% 0 0);transition:clip-path var(--dur-reveal) var(--ease-out);}
.js .kpi.is-in::before{clip-path:inset(0 0 0 0);}
.kpi .pre{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px;}
.kpi .n{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(31px,3.8vw,48px);line-height:1;color:var(--anthra);
  display:block;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.kpi .lab{font-size:13.5px;line-height:1.46;color:var(--muted);margin-top:10px;display:block;}

/* ---------- Datenkarte ---------- */
.datacard{background-color:var(--sand-l);border:1px solid var(--rule);padding:clamp(22px,2.6vw,34px);}
.datacard h3,.panel-d h3{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-t);margin:0 0 18px;padding-bottom:13px;
  border-bottom:0;position:relative;
}
.datacard h3::after,.panel-d h3::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background-image:var(--stich);
}
.drow{display:grid;grid-template-columns:132px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--rule-s);font-size:14.5px;margin:0;}
.drow:last-of-type{border-bottom:0;padding-bottom:0;}
.drow dt{color:var(--muted);font-weight:500;}
.drow dd{margin:0;color:var(--ink);font-weight:500;}
@media (max-width:480px){.drow{grid-template-columns:1fr;gap:2px;}}
.panel-d{background-color:var(--anthra-2);color:var(--bone);border:1px solid var(--anthra-2);padding:clamp(22px,2.6vw,34px);}
.panel-d h3{color:var(--brass-d);border-bottom-color:var(--rule-d);}
.panel-d .drow{border-bottom-color:var(--rule-d);}
.panel-d .drow dt{color:var(--bone-m);}
.panel-d .drow dd{color:var(--bone);}
.open{
  display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brass-t);
  border:1px dashed rgba(155,122,60,.65);padding:4px 10px;border-radius:1px;
}
.panel-d .open{color:var(--brass-d);border-color:rgba(194,160,90,.6);}

/* ---------- Tabelle ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);background-color:var(--sand-l);}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:15px;}
caption{text-align:left;padding:19px 22px 0;font-size:13.5px;color:var(--muted);}
th,td{text-align:left;padding:15px 22px;border-bottom:1px solid var(--rule-s);vertical-align:top;}
thead th{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-t);border-bottom:1px solid rgba(155,122,60,.4);}
tbody th{font-weight:500;color:var(--muted);width:46%;}
td{font-weight:600;color:var(--anthra);font-variant-numeric:tabular-nums;}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}

/* ---------- Schrittfolge ---------- */
.steps{display:grid;gap:clamp(20px,2.8vw,38px);margin-top:48px;}
.steps-4{grid-template-columns:repeat(4,1fr);}
.steps-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:960px){.steps-4,.steps-5{grid-template-columns:repeat(2,1fr);}}
@media (max-width:540px){.steps-4,.steps-5{grid-template-columns:1fr;}}
.step{padding-top:17px;position:relative;}
.step::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background-image:var(--stich);
}
.js .step::before{clip-path:inset(0 100% 0 0);transition:clip-path var(--dur-reveal) var(--ease-out);}
.js .step.is-in::before{clip-path:inset(0 0 0 0);}
.step .num{
  font-family:"Instrument Serif",Georgia,serif;font-size:25px;color:var(--brass-t);
  display:block;line-height:1;margin-bottom:13px;font-variant-numeric:tabular-nums;
}
.step .num.small{font-family:"Libre Franklin",sans-serif;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;}
.step p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0;}

/* ---------- Raster ---------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background-color:var(--rule);border:1px solid var(--rule);margin-top:44px;}
@media (max-width:880px){.grid4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:500px){.grid4{grid-template-columns:1fr;}}
.cell{background-color:var(--sand);padding:26px clamp(18px,2.2vw,26px);}
.cell .cn{font-family:"Instrument Serif",Georgia,serif;font-size:22px;color:var(--brass-t);display:block;margin-bottom:13px;line-height:1;}
.cell p{font-size:14px;line-height:1.55;color:var(--muted);margin:0;}
.taglist{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none;}
.taglist li{font-size:13.5px;border:1px solid var(--rule);padding:10px 17px;border-radius:1px;color:var(--ink);background-color:var(--sand-l);}

/* ---------- Referenzen ---------- */
.reflist{display:flex;flex-wrap:wrap;gap:12px 0;margin:26px 0 0;padding:0;list-style:none;}
.reflist li{
  font-family:"Instrument Serif",Georgia,serif;font-size:clamp(20px,2.2vw,28px);
  color:var(--anthra);line-height:1.3;padding:0 20px;border-right:1px solid var(--rule);
}
.reflist li:first-child{padding-left:0;}
.reflist li:last-child{border-right:0;}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.9vw,26px);margin-top:44px;}
@media (max-width:1040px){.team{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.team{grid-template-columns:repeat(2,1fr);}}
.person .ph{aspect-ratio:1/1;padding:13px;font-size:10.5px;}
.person .pname{font-family:"Instrument Serif",Georgia,serif;font-size:23px;line-height:1.15;margin:14px 0 3px;color:var(--anthra);}
.person .ploc{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-t);margin:0;}
.person.is-remote .ph{background-color:var(--anthra-2);border-color:var(--anthra-2);color:var(--bone-m);}
.person.is-remote .ph::before{background:repeating-linear-gradient(-45deg,transparent 0 13px,rgba(237,233,222,.05) 13px 26px);}

/* ---------- Haeuser ---------- */
.houses{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.3vw,30px);margin-top:44px;}
@media (max-width:860px){.houses{grid-template-columns:1fr;}}
.house{
  background-color:var(--sand-l);border:1px solid var(--rule);padding:clamp(22px,2.6vw,30px);
  text-decoration:none;display:block;transition:border-color .35s var(--ease),transform .35s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .house:hover{border-color:var(--brass);transform:translateY(-2px);}
}
.house .hname{font-family:"Instrument Serif",Georgia,serif;font-size:26px;color:var(--anthra);line-height:1.15;margin:0 0 9px;}
.house p{font-size:14.5px;color:var(--muted);margin:0 0 16px;line-height:1.52;}
.house .hurl{font-size:12.5px;font-weight:600;letter-spacing:.07em;color:var(--brass-t);display:flex;align-items:center;gap:8px;}
.house .hurl svg{width:13px;height:13px;flex-shrink:0;transition:transform .35s var(--ease);}
.house:hover .hurl svg{transform:translate(2px,-2px);}

/* ---------- Hinweisblock ---------- */
.warn{border:1px solid var(--brass);background-color:var(--sand-l);padding:clamp(26px,3.4vw,46px);}
.warn .wl{display:flex;align-items:center;gap:12px;margin:0 0 18px;}
.warn .wl svg{width:21px;height:21px;color:var(--brass-t);flex-shrink:0;}
.warn .wl span{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-t);}
.warn h2{margin-bottom:18px;}
.warn ul{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:12px;}
.warn li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--ink);line-height:1.5;}
.warn li svg{width:16px;height:16px;color:var(--brass-t);flex-shrink:0;margin-top:5px;}

/* ---------- Rechtsseiten ---------- */
.legal{padding:clamp(48px,5.4vw,84px) 0 clamp(60px,7vw,110px);}
.legal-in{max-width:74ch;}
.legal h1{font-size:clamp(34px,5vw,58px);margin-bottom:34px;}
.legal h2{font-size:clamp(20px,2.1vw,25px);margin:44px 0 12px;letter-spacing:-.008em;}
.legal p{font-size:16px;line-height:1.68;color:var(--muted);margin:0 0 14px;}
.legal p b{color:var(--ink);font-weight:600;}
.legal .drow{grid-template-columns:210px 1fr;font-size:16px;}
@media (max-width:560px){.legal .drow{grid-template-columns:1fr;}}
.hinweisbox{
  border-left:3px solid var(--brass);background-color:var(--sand-l);
  padding:18px 22px;margin:0 0 34px;
}
.hinweisbox p{margin:0;font-size:15px;color:var(--ink);}
.hinweisbox .hl{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-t);margin:0 0 7px;display:block;}

/* ---------- 404 ---------- */
.fehler{padding:clamp(70px,11vw,170px) 0;text-align:left;}
.fehler .lead{margin-bottom:32px;}

/* ---------- Kontakt / dunkel ---------- */
.on-dark{background-color:var(--anthra);color:var(--bone);border-top:0;}
.on-dark h2,.on-dark h3{color:var(--bone);}
.on-dark .kicker{color:var(--brass-d);}
.on-dark h2 em{color:var(--brass-d);}
.on-dark .lead{color:var(--bone-m);}
.on-dark .lead b{color:var(--bone);}
.on-dark a{color:var(--bone);}
.on-dark a:hover{color:var(--brass-d);}
.cbox .clabel{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-d);margin:0 0 11px;}
.cbox address{font-style:normal;font-size:16px;line-height:1.68;color:var(--bone-m);}
.cbox address strong{color:var(--bone);font-weight:600;}

/* Links in Adress- und Datenblocken erreichen die Mindestgroesse
   von 24 px, ohne den Zeilenfluss zu sprengen. */
.cbox address a,.drow dd a,.legal p a,.house .hurl{
  display:inline-flex;align-items:center;min-height:24px;
}
.cbox address a{text-decoration-thickness:1px;text-underline-offset:4px;}

/* ---------- Fusszeile ---------- */
.site-foot{background-color:var(--anthra);color:var(--bone-m);padding:0 0 52px;font-size:14px;}
.site-foot.solo{padding-top:52px;}
.foot-top{border-top:1px solid var(--rule-d);padding-top:34px;display:flex;flex-wrap:wrap;gap:24px 44px;align-items:flex-start;}
.site-foot.solo .foot-top{border-top:0;padding-top:0;}
.site-foot a{color:var(--bone-m);}
.site-foot a:hover{color:var(--bone);}
.foot-legal{max-width:46ch;line-height:1.62;margin:0;}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-left:auto;}
.foot-links a{text-decoration:none;font-weight:500;padding:7px 0;display:inline-block;}
.foot-links a:hover{text-decoration:underline;}

/* ===================================================================
   Interaktion: Rueckmeldung beim Druecken, nicht erst beim Loslassen.
   Weiche Kante statt harter Trennlinie unter der Kopfzeile.
   =================================================================== */
.btn,.house,.mainnav a,.langsw a,.menubtn,.foot-links a{touch-action:manipulation;}
.btn:active{transform:scale(.97);}
.house:active{transform:scale(.995);}
.btn,.house{transition:background-color .3s var(--ease),color .3s var(--ease),
            border-color .3s var(--ease),transform var(--dur-press) var(--ease-out);}

/* Weiche Kante, wo Inhalt unter die schwebende Kopfzeile laeuft */
.site-head{border-bottom-color:transparent;}
.site-head::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:20px;pointer-events:none;
  background:linear-gradient(rgba(230,225,213,.9),rgba(230,225,213,0));
  opacity:0;transition:opacity .4s var(--ease);
}
.site-head.is-scrolled{border-bottom-color:var(--rule-s);}
.site-head.is-scrolled::after{opacity:1;}

@media (prefers-reduced-transparency: reduce){
  .site-head.is-scrolled{background-color:var(--sand);backdrop-filter:none;}
  .site-head::after{display:none;}
}
@media (prefers-contrast: more){
  :root{--rule:rgba(35,38,42,.42);--rule-s:rgba(35,38,42,.28);--muted:#2E3337;}
  .btn-s{border-color:var(--anthra);}
  .site-head.is-scrolled{background-color:var(--sand);backdrop-filter:none;}
}
@media (prefers-reduced-motion: reduce){
  .btn:active,.house:active{transform:none;}
}

/* ===================================================================
   Bewegung. Ohne JavaScript bleibt alles sichtbar — die Klasse .js
   wird erst von site.js gesetzt.
   =================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(15px);}
  .js [data-reveal].is-in{
    opacity:1;transform:none;
    transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
    transition-delay:var(--d,0ms);
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  /* Gezielt: Positionswechsel und Skalierung raus, Ein- und Ausblenden bleibt.
     Ein pauschaler Reset auf 0.01ms killt auch die Uebergaenge,
     die Verstaendnis stiften. */
  .js [data-reveal]{transform:none;transition:opacity 300ms ease;}
  .js .naht,.js .kpi::before,.js .step::before{clip-path:none;transition:none;}
  .btn:active,.house:active{transform:none;}
  .mainnav a::after{transition:none;}
  #seite,#seite.wechselt{transition:opacity 200ms ease;}
}