/* ============================================================
   Dachstuhl.de — Komponenten und Sektionen
   ============================================================ */

/* ============================================================
   1. Schaltflächen
   ============================================================ */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:15px 28px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:var(--r-s);
  /* 19 px in 700 gilt als grosse Schrift – dort genuegen 3:1, was weisse
     Schrift auf dem Markenorange erreicht. Nicht kleiner setzen. */
  font-family:var(--f-display);
  font-size:1.1875rem; font-weight:700; letter-spacing:-.008em; line-height:1.15;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .12s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn svg{width:18px; height:18px; flex:none}

.btn--primary{--btn-bg:var(--accent-btn); --btn-fg:#fff}
.btn--primary:hover{--btn-bg:var(--accent-btn-hover)}
.btn--ink{--btn-bg:var(--blue-900); --btn-fg:#fff}
.btn--ink:hover{--btn-bg:#1c4e73}
.btn--quiet{--btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-2)}
.btn--quiet:hover{--btn-bd:var(--ink); --btn-bg:var(--off)}
.btn--lg{min-height:64px; padding:19px 38px; font-size:1.25rem}

/* Feinere Ausführung für die Bühne: flacher, schmaler, enger gesetzt.
   18,8 px in 700 ist das Mindestmass, ab dem WCAG von grosser Schrift
   ausgeht – darunter wäre weisse Schrift auf dem Markenorange nicht mehr
   zulässig. Deshalb nicht weiter verkleinern, nur Höhe und Polsterung. */
.btn--fein{
  min-height:50px; padding:13px 28px;
  font-size:1.175rem; letter-spacing:-.016em;
}

/* ============================================================
   2. Kopfbereich
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:120;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; gap:clamp(16px,3vw,44px); min-height:var(--header-h)}

.logo{
  display:inline-flex; align-items:baseline; flex:none; gap:1px;
  /* 19 px in 700 zählt als grosse Schrift – erst dadurch darf das „.de“
     im vollen Markenorange stehen (3,0:1, Schwelle 3:1). Nicht kleiner
     oder leichter setzen. */
  font-family:var(--f-display);
  font-size:1.1875rem; font-weight:700; letter-spacing:-.028em;
  color:var(--ink); text-decoration:none;
}
.logo span{color:var(--accent)}

.mainnav{margin-inline-start:auto}
.mainnav ul{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.mainnav a{
  display:block; padding:9px 14px; border-radius:var(--r-xs);
  color:var(--ink-2); font-size:.9375rem; font-weight:530; text-decoration:none;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.mainnav a:hover{color:var(--ink); background:var(--off-2)}
/* Der Knopf in der Liste erscheint nur im aufgeklappten Menue auf dem Smartphone.
   Im Kopfbereich steht bewusst keine Schaltflaeche neben der Wortmarke. */
@media (min-width:900px){ .mainnav li:last-child{display:none} }

.burger{
  display:none; margin-inline-start:auto;
  width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-xs); cursor:pointer;
}
.burger i{display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:background .2s}
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink);
  transition:transform .25s var(--ease), top .25s var(--ease);
}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0; transform:rotate(-45deg)}

@media (max-width:899px){
  .burger{display:flex}
  .mainnav{
    position:fixed; inset:var(--header-h) 0 auto 0; z-index:119;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:10px var(--gut) 26px; display:none;
    max-height:calc(100dvh - var(--header-h)); overflow:auto;
  }
  .mainnav.is-open{display:block}
  .mainnav ul{flex-direction:column; align-items:stretch; gap:0}
  .mainnav a{padding:17px 4px; font-size:1.0625rem; border-bottom:1px solid var(--line)}
  .mainnav li:last-child a{border-bottom:0}
  .mainnav .btn{margin-top:18px; width:100%; min-height:56px; font-size:1.0625rem}
}

/* ============================================================
   3. Bühne — Konstruktionszeichnung als Bildmotiv
   ============================================================ */
.hero{position:relative; overflow:hidden; background:var(--blue-100)}
/* Millimeterpapier, sehr zurückhaltend */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(15,43,64,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,43,64,.07) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(78% 78% at 64% 44%, #000 0%, transparent 82%);
  -webkit-mask-image:radial-gradient(78% 78% at 64% 44%, #000 0%, transparent 82%);
}
.hero__inner{
  position:relative;
  display:grid; align-items:center; gap:clamp(36px,5vw,64px);
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  padding-block:clamp(50px,7vw,104px) clamp(56px,7vw,110px);
}
.hero h1{margin-bottom:.36em}
.hero__sub{
  font-size:clamp(1.0625rem,1.4vw,1.28rem); line-height:1.52;
  color:var(--ink-2); max-width:40ch; margin-bottom:36px; letter-spacing:-.009em;
}
.hero__plan{position:relative}

/* Der Hintergrund der Vorlage entspricht dem Hellblau der Bühne, deshalb
   steht das Bild ohne Rahmen. Die Bauteile sind im alt-Text benannt. */
.dachbild{position:relative; margin:0; aspect-ratio:1448/1086}
.dachbild picture{display:block}
.dachbild img{width:100%; height:auto; display:block; border-radius:clamp(10px,1.2vw,18px)}

@media (prefers-reduced-motion:no-preference){
  .dachbild{animation:ds-zeigen .9s var(--ease-out) .12s backwards}
}
@keyframes ds-zeigen{ from{opacity:0; transform:translateY(18px)} }

@media (max-width:959px){
  .hero__inner{grid-template-columns:1fr; gap:clamp(30px,6vw,46px)}
  .hero__sub{max-width:46ch}
  .hero__plan{max-width:700px}
}
@media (max-width:520px){
  .hero__inner{padding-block:30px 46px}
  .hero .btn{width:100%}
}

/* ============================================================
   4. Kooperation
   ============================================================ */
/* Die Nennung soll als Beleg gelesen werden, nicht als Anzeige. Sie steht
   deshalb als eingefasste Flaeche in der Inhaltsbreite, nicht als Band ueber
   die volle Seite: das gibt ihr eine klare Kante und nimmt ihr zugleich das
   Gewicht eines eigenen Abschnitts. Das Logo bleibt im Originalorange — eine
   fremde Wortmarke wird nicht umgefaerbt —, traegt aber nur noch 108 px, damit
   es nicht mit der Schaltflaeche der Buehne um Aufmerksamkeit streitet. */
.coop-band{padding-block:clamp(30px,4vw,48px); background:var(--paper)}

/* Drei Spalten: Marke, Satz, Verweis. Der Verweis sitzt am rechten Rand und
   gibt der Zeile einen Abschluss – sonst liefe die Flaeche nach rechts leer
   aus, weil der Satz die Inhaltsbreite nicht ausfuellt. */
.coop{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  padding:clamp(18px,2.2vw,24px) clamp(22px,3vw,32px);
  background:var(--off); border:1px solid var(--line); border-radius:var(--r-l);
}
.coop__brand{display:flex; flex-direction:column; align-items:flex-start; gap:10px; flex:none}
.coop__label{
  font-size:.6875rem; font-weight:650; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;
}
.coop__logo{display:block; border-radius:var(--r-xs)}
/* Vektorfassung: bei jeder Aufloesung scharf, Groesse frei waehlbar. */
.coop__logo img{width:108px; height:auto}

/* Haarlinie zwischen Marke und Satz – der Abstand liegt zu gleichen Teilen
   links und rechts davon. */
.coop__text{
  margin:0 0 0 clamp(20px,2.8vw,34px); padding-left:clamp(20px,2.8vw,34px);
  border-left:1px solid var(--line-2);
  font-size:.9375rem; line-height:1.6; color:var(--ink-2); max-width:58ch;
}
.coop__text strong{color:var(--ink); font-weight:620}
.coop__link{
  margin-left:clamp(20px,2.6vw,32px); white-space:nowrap;
  font-size:.9375rem; color:var(--accent-text); font-weight:620; text-decoration:none;
  border-bottom:1.5px solid var(--accent-100);
}
.coop__link:hover{color:var(--ink); border-bottom-color:var(--accent)}

/* Gestapelt: eine Spalte, die Haarlinie wandert von der Seite nach oben,
   der Verweis schliesst den Satz ab statt die Zeile. */
@media (max-width:760px){
  .coop{grid-template-columns:1fr; gap:16px}
  .coop__logo img{width:96px}
  .coop__text{
    margin-left:0; padding-left:0; border-left:0;
    padding-top:16px; border-top:1px solid var(--line-2); max-width:none;
  }
  .coop__link{margin-left:0}
}

/* ============================================================
   5. Ablauf — kleine Motive mit Fortschrittslinie
   ============================================================ */
.journey{margin-top:clamp(36px,4.5vw,58px)}
.journey__track{
  --jgap:clamp(22px,3.2vw,46px);
  --art:clamp(88px,8vw,116px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--jgap);
  list-style:none; margin:0; padding:0;
}

.step{position:relative}

.step__art{
  width:var(--art); aspect-ratio:4/3; margin-bottom:20px;
  border-radius:clamp(9px,1vw,13px);
  background:linear-gradient(162deg,#f6fbfe 0%, #e2eef9 100%);
  display:grid; place-items:center; padding:8px; overflow:hidden;
}
.step__art svg{width:100%; height:100%; display:block}

/* Fortschrittslinie auf Höhe der Motive: sie läuft vom Rand des einen
   Motivs bis kurz vor das nächste, nicht von Spalte zu Spalte. */
.step::before,.step::after{
  content:""; position:absolute; height:2px;
  top:calc(var(--art) * 0.375);
  left:calc(var(--art) + 14px);
  right:calc(14px - var(--jgap));
}
.step::before{background:var(--line-2)}
.step::after{
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease-out);
}
.step.is-linked::after{transform:scaleX(1)}
.step:last-child::before,.step:last-child::after{content:none}

.step h3{margin-bottom:.45em}
.step__no{
  color:var(--ink-4); margin-right:.42em;
  font-variant-numeric:tabular-nums;
  transition:color .5s var(--ease);
}
.step.is-on .step__no{color:var(--accent-text)}
.step p{color:var(--ink-3); font-size:.9688rem; max-width:34ch; margin:0}

@media (prefers-reduced-motion:no-preference){
  .step__art{opacity:0; transform:translateY(12px);
             transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
  .step.is-on .step__art{opacity:1; transform:none}
}

@media (max-width:820px){
  .journey__track{grid-template-columns:1fr; gap:clamp(26px,4vw,38px)}
  .step{display:grid; grid-template-columns:var(--art) 1fr; gap:0 clamp(16px,3vw,24px)}
  .step__art{grid-row:span 2; margin-bottom:0; align-self:start}
  .step p{max-width:none}
  /* Senkrechte Linie unter dem Motiv */
  .step::before,.step::after{
    top:calc(var(--art) * 0.75 + 6px); bottom:auto; left:calc(var(--art) / 2 - 1px);
    width:2px; height:calc(100% - var(--art) * 0.75 + var(--jgap) - 12px);
  }
  .step::after{transform:scaleY(0); transform-origin:top; transition:transform .9s var(--ease-out)}
  .step.is-linked::after{transform:scaleY(1)}
}
@media (max-width:440px){
  .step{grid-template-columns:1fr}
  .step__art{grid-row:auto; margin-bottom:16px}
  .step::before,.step::after{content:none}
}

/* ============================================================
   6. Fußbereich
   ============================================================ */
.site-footer{padding-block:clamp(46px,6vw,70px) 0; border-top:1px solid var(--line)}
.footer-top{display:flex; flex-wrap:wrap; gap:26px 48px; align-items:flex-start; justify-content:space-between}
.footer-top .logo{font-size:1.1875rem}   /* nicht kleiner: siehe .logo */
.site-footer nav ul{display:flex; flex-wrap:wrap; gap:8px 26px; list-style:none; margin:0; padding:0}
.site-footer a{color:var(--ink-3); text-decoration:none; font-size:.9375rem}
.site-footer a:hover{color:var(--ink)}
.footer-bottom{
  margin-top:clamp(30px,4vw,50px); padding-block:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; justify-content:space-between;
  color:var(--ink-4); font-size:.8125rem;
}
.footer-bottom nav ul{gap:8px 22px}
.linkbtn{background:none; border:0; padding:0; cursor:pointer; color:var(--ink-3); font-size:.9375rem}
.linkbtn:hover{color:var(--ink)}

/* ============================================================
   7. Fragen
   ============================================================ */
.faq{margin-top:clamp(32px,4vw,52px); border-top:1.5px solid var(--blue-900)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex; align-items:center; gap:22px;
  padding:25px 0; cursor:pointer; list-style:none;
  color:var(--ink); font-size:clamp(1.0313rem,1.15vw,1.0938rem); font-weight:560;
  letter-spacing:-.014em; line-height:1.38;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-text)}
.faq__no{
  flex:none; width:2.4em; font-size:.8125rem; font-weight:650;
  font-variant-numeric:tabular-nums; letter-spacing:.08em; color:var(--ink-4);
}
.faq__sign{
  position:relative; flex:none; width:20px; height:20px; margin-inline-start:auto;
  color:var(--ink-3); transition:color .2s var(--ease);
}
.faq__sign::before,.faq__sign::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px;
  background:currentColor; transform:translateY(-50%);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq__sign::after{transform:translateY(-50%) rotate(90deg)}
.faq details[open] .faq__sign{color:var(--accent)}
.faq details[open] .faq__sign::after{transform:translateY(-50%); opacity:0}
.faq__answer{padding:0 44px 27px calc(2.4em + 22px); color:var(--ink-3); max-width:76ch}
@media (max-width:560px){ .faq__answer{padding-left:0; padding-right:0} }

/* ============================================================
   8. Abschluss
   ============================================================ */
.final{
  position:relative; overflow:hidden;
  background:var(--blue-900); color:#b8cfe0;
  border-radius:var(--r-l);
  padding:clamp(52px,8vw,108px) clamp(28px,6vw,72px);
}
.final::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(80% 100% at 84% 50%, #000 0%, transparent 76%);
  -webkit-mask-image:radial-gradient(80% 100% at 84% 50%, #000 0%, transparent 76%);
}
.final > *{position:relative}
.final h2{color:#fff; max-width:15ch; position:relative; padding-bottom:24px}
.final h2::after{content:""; position:absolute; left:0; bottom:0; width:64px; height:3px; background:var(--accent)}
.final p{max-width:38ch; margin-bottom:34px; font-size:clamp(1.0313rem,1.25vw,1.1875rem)}
@media (max-width:520px){ .final .btn{width:100%} }

/* ============================================================
   9. Leistungen — Positionsliste statt Bildkarten
   ============================================================ */
.positions{margin-top:clamp(40px,5vw,66px); border-top:1.5px solid var(--blue-900)}
.position{
  display:grid; grid-template-columns:76px minmax(0,1fr) minmax(0,1.05fr) auto;
  gap:clamp(18px,3vw,40px); align-items:start;
  padding:clamp(26px,3vw,38px) 0;
  border-bottom:1px solid var(--line);
  transition:background .25s var(--ease);
}
.position:hover{background:var(--off)}
.position__no{
  font-size:.8125rem; font-weight:650; letter-spacing:.1em;
  font-variant-numeric:tabular-nums; color:var(--ink-4); padding-top:.35em;
}
.position h3{margin:0}
.position p{margin:0; color:var(--ink-3); font-size:.9688rem}
.position .tlink{align-self:center; white-space:nowrap}

@media (max-width:899px){
  .position{grid-template-columns:52px 1fr; gap:6px 16px}
  .position__no{grid-row:span 3; padding-top:.25em}
  .position p{margin-top:2px}
  .position .tlink{margin-top:14px; align-self:start}
}

/* Textlink im Zeichnungsduktus: Unterstrich statt Pfeilspielerei */
.tlink{
  display:inline-flex; align-items:center; gap:9px;
  background:none; border:0; padding:0 0 3px; cursor:pointer;
  color:var(--ink); font-weight:620; font-size:.9375rem; text-decoration:none;
  border-bottom:1.5px solid var(--accent);
}
.tlink svg{width:14px; height:14px; color:var(--accent); transition:transform .25s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* ============================================================
   10. Inhaltsseiten
   ============================================================ */
.page-head{padding-block:clamp(46px,6vw,86px) clamp(28px,4vw,46px); border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(2rem,4.2vw,3.1rem)}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.28rem,2vw,1.5625rem); margin-top:2.4em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.0625rem; margin-top:1.9em}
.prose ul{padding-left:1.15em; display:grid; gap:9px; margin:0 0 1em}
.prose a{color:var(--accent-text)}
.prose address{
  font-style:normal; background:var(--off); border-left:2px solid var(--accent);
  padding:20px 24px; line-height:1.75; margin:0 0 1em;
}
.prose .placeholder{
  background:var(--accent-050); border:1px dashed var(--accent);
  color:var(--accent-text); border-radius:var(--r-xs);
  padding:2px 8px; font-size:.9em; font-weight:600; white-space:nowrap;
}
.notice{
  border:1px solid var(--line); border-left:2px solid var(--accent);
  background:var(--off); padding:20px 24px; margin:0 0 2em;
  font-size:.9375rem; color:var(--ink-2);
}