/* Vogt Tragwerksplanung : Basis: Tokens, Reset, Typografie, Kopf, Fuß, Bedienelemente.
   Konzept A "Das Kapitelband". Gehört zu design.md. */

@font-face{
  font-family:'Schibsted Grotesk';
  src:url('schriften/schibsted-grotesk-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';
  src:url('schriften/schibsted-grotesk-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Farbwelt: Kalkstein und Tannengrün. Bewusst NICHT die Kupfer-Rost-Orange-Familie,
     die bei sport-eck-marl und demo-stahlbau schon trägt. Das Grün steht hier für den
     Schwerpunkt des Büros: 61 Prozent Bestand statt Neubau, Holzbau, Rückbau. */
  --papier:#EDEFEA;
  --papier-2:#E1E4DC;
  --papier-3:#D2D7CB;
  --tinte:#1C201B;
  --tinte-2:#4F554B;
  --akzent:#3A6B4E;
  --akzent-tief:#2A5139;
  --akzent-blass:#C9D6CB;
  --linie:rgba(28,32,27,.16);
  --linie-stark:rgba(28,32,27,.32);
  --rahmen:#6E7468;
  --knopf-text:#F4F6F1;
  --fokus-kern:#1C201B;
  --fokus-ring:#EDEFEA;
  --bild-filter:brightness(1);

  --rand:clamp(1.25rem,5vw,5rem);
  --versatz:clamp(0rem,17vw,21rem);
  --luft:clamp(4.5rem,10vw,9rem);
  --dauer:.5s;
  color-scheme:light;
}
html[data-modus="dunkel"]{
  --papier:#141713;
  --papier-2:#1D2019;
  --papier-3:#282C24;
  --tinte:#E9ECE3;
  --tinte-2:#9EA598;
  --akzent:#6FB187;
  --akzent-tief:#86C39B;
  --akzent-blass:#25301F;
  --linie:rgba(233,236,227,.18);
  --linie-stark:rgba(233,236,227,.36);
  --rahmen:#868D80;
  --knopf-text:#12160F;
  --fokus-kern:#E9ECE3;
  --fokus-ring:#141713;
  --bild-filter:brightness(.86) contrast(1.02);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.62;
  font-synthesis-weight:none;
  overflow-x:clip;
}
img,video,svg{max-width:100%;display:block}
[hidden]{display:none !important}
img{height:auto}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.022em;line-height:1.06;hyphens:none}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
figure,blockquote{margin:0}
a{color:inherit}

section:focus,main:focus,section:focus-visible,main:focus-visible{outline:none}
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--fokus-kern);
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--fokus-ring);
  border-radius:2px;
}

.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{
  position:absolute;left:var(--rand);top:.5rem;z-index:80;
  transform:translateY(-160%);
  background:var(--tinte);color:var(--papier);
  padding:.7rem 1.1rem;font-weight:500;text-decoration:none;
}
.sprung:focus-visible{transform:translateY(0)}

/* ---------- Kopfzone: Demo-Streifen und Kopf teilen einen Container ---------- */
.kopfzone{position:relative;z-index:40}
.demo-streifen{
  background:var(--tinte);color:var(--papier);
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.55rem var(--rand);line-height:1.4;
}
.demo-streifen b{font-weight:700;color:var(--akzent-blass)}
html[data-modus="dunkel"] .demo-streifen{background:var(--papier-3);color:var(--tinte)}
html[data-modus="dunkel"] .demo-streifen b{color:var(--akzent)}

.kopf{
  display:flex;align-items:center;gap:1.5rem;
  padding:1.15rem var(--rand);
  border-bottom:1px solid var(--linie);
  background:var(--papier);
}
.marke{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--tinte);flex:0 0 auto}
.marke svg{height:37px;width:auto}
.marke__sparren{fill:none;stroke:var(--akzent);stroke-width:5;stroke-linecap:square;stroke-linejoin:miter}
.marke__zugband{stroke:currentColor;stroke-width:4}
.marke__wort{fill:currentColor;font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:44px;letter-spacing:.10em}
.marke__zusatz{fill:var(--tinte-2);font-family:'Schibsted Grotesk',sans-serif;font-weight:400;font-size:11.5px;letter-spacing:.22em}

.kopf__nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2vw,1.9rem)}
.kopf__nav a{
  text-decoration:none;font-size:.9rem;letter-spacing:.02em;
  display:inline-flex;align-items:center;min-height:44px;position:relative;
}
.kopf__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:.6rem;height:1px;
  background:var(--akzent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dauer) ease;
}
.kopf__nav a:hover::after,.kopf__nav a:focus-visible::after{transform:scaleX(1)}
.kopf__tel{font-weight:500;white-space:nowrap}

/* ---------- Bedienelemente: eigenes System für dieses Projekt ----------
   Zwei Formen, mehr nicht:
   1. Der HANDLUNGSKNOPF (.knopf, in seite.css) ist ein zweigeteiltes Feld mit einer
      1px-Fuge, wie ein Bauteil aus zwei Profilen. Kein Standard-Kasten.
   2. Der SCHALTER hat gar keinen Kasten. Er ist ein Wort auf einer Grundlinie, die
      beim Zeigen und im aktiven Zustand voll ausgezogen wird. */
.schalter{
  border:0;background:transparent;color:inherit;font:inherit;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.6rem 0 .55rem;cursor:pointer;min-height:44px;
  display:inline-flex;align-items:center;gap:.5rem;position:relative;
}
.schalter::after{
  content:"";position:absolute;left:0;right:0;bottom:.45rem;height:2px;
  background:var(--akzent);
  transform:scaleX(.34);transform-origin:left;
  transition:transform var(--dauer) cubic-bezier(.22,.61,.36,1);
}
.schalter:hover::after,.schalter:focus-visible::after,.schalter[aria-expanded="true"]::after{transform:scaleX(1)}
.schalter:hover{color:var(--akzent-tief)}
.menue-knopf{display:none}

/* ---------- Mobilmenü als einfahrendes Panel ---------- */
.abdunklung{
  position:fixed;inset:0;background:rgba(20,18,16,.55);
  opacity:0;visibility:hidden;transition:opacity var(--dauer) ease,visibility var(--dauer);
  z-index:50;
}
.abdunklung[data-offen="ja"]{opacity:1;visibility:visible}
.panel{
  position:fixed;top:0;right:0;bottom:0;width:min(21rem,86vw);
  background:var(--papier-2);border-left:1px solid var(--linie);
  transform:translateX(100%);transition:transform var(--dauer) cubic-bezier(.22,.61,.36,1);
  z-index:60;display:flex;flex-direction:column;padding:1.15rem var(--rand) 2rem;
  overflow-y:auto;visibility:hidden;
}
.panel[data-offen="ja"]{transform:translateX(0);visibility:visible}
.panel__zu{align-self:flex-end;margin-bottom:1.6rem}
.panel__liste{display:flex;flex-direction:column;gap:.2rem;margin-bottom:2rem}
.panel__liste a{
  display:flex;align-items:baseline;gap:1rem;text-decoration:none;
  padding:.85rem 0;border-bottom:1px solid var(--linie);
  font-size:1.35rem;letter-spacing:-.01em;min-height:44px;
}
.panel__nr{font-size:.75rem;letter-spacing:.14em;color:var(--akzent);font-weight:700}
.panel__fuss{margin-top:auto;font-size:.9rem;color:var(--tinte-2);line-height:1.7}
.panel__fuss a{font-weight:500;color:var(--tinte);display:inline-flex;align-items:center;min-height:44px}

/* ---------- Fußzeile ---------- */
.fuss{
  border-top:1px solid var(--linie);
  padding:var(--luft) var(--rand) 2.5rem;
  background:var(--papier-2);
}
.fuss__raster{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.inhalt-verzeichnis{border-top:1px solid var(--linie-stark)}
.inhalt-verzeichnis a{
  display:grid;grid-template-columns:3.2rem 1fr;align-items:baseline;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid var(--linie);
  text-decoration:none;font-size:1.02rem;min-height:44px;
}
.inhalt-verzeichnis a:hover .iv__name,.inhalt-verzeichnis a:focus-visible .iv__name{color:var(--akzent)}
.iv__nr{font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--akzent)}
.iv__name{transition:color var(--dauer) ease}
.fuss__adresse{font-style:normal;line-height:1.85}
.fuss__adresse a{font-weight:500;display:inline-flex;align-items:center;min-height:44px}
.fuss__recht{
  margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:baseline;
  font-size:.86rem;color:var(--tinte-2);
}
.fuss__recht a{min-height:44px;display:inline-flex;align-items:center}
.fuss__hinweis{width:100%;margin-top:.4rem;max-width:52rem}

@media (max-width:900px){
  .kopf__nav a:not(.kopf__tel):not(.kopf__immer){display:none}
  .menue-knopf{display:inline-flex}
  .fuss__raster{grid-template-columns:1fr}
}
.modus-knopf--panel{margin-bottom:1.6rem;align-self:flex-start}
.kopf__immer{white-space:nowrap}
@media (min-width:561px){
  .modus-knopf--panel{display:none}
}
@media (max-width:560px){
  .kopf__nav a.kopf__tel{display:none}
  .kopf .modus-knopf:not(.modus-knopf--immer){display:none}
  .marke svg{height:32px}
  .kopf{gap:.75rem;padding-inline:1.15rem}
  .kopf__nav{gap:.6rem}
}
@media (max-width:360px){
  .marke svg{height:28px}
  .schalter{padding:.6rem .7rem;font-size:.78rem}
}
@media (min-width:901px){
  .panel,.abdunklung,.panel__zu{display:none}
}

@media (max-width:400px){
  /* Auf sehr schmalen Schirmen traegt die Wortmarke den Weg zurueck,
     der zusaetzliche Textlink wuerde die Kopfzeile aufsprengen. */
  .kopf__nav a.kopf__immer{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}