/* ═══════════════════════════════════════════════════════════════
   WE — eine Sprache für alle Seiten.
   Dieselben Werte wie die Startseite: dasselbe Weiß, dieselbe Tinte,
   dieselbe Glut, dieselbe Schrift, dieselbe schwarze Tafel am Fuß.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --weiss:#FFFFFF;
  --tinte:#0E0E10;
  --text:#33333A;
  --grau:#7C7C82;
  --leise:#5E5E68;
  --linie:#E8E8EC;
  --nebel:#F2F2F4;
  --glut:#C8502E;
  --tafel:#0B0B0D;
  --tafel-kante:#1E1E22;
  --breite:41em;
  --konsole-b:210px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--weiss); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,system-ui,sans-serif;
  font-size:19px; line-height:1.66; font-weight:400;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  padding:0 24px;
}
.spalte{max-width:var(--breite);margin:0 auto}

/* ── Kopf: die Marke in der Schrift der Startseite ───────── */
.kopf{padding:26px 0 0}
.marke{
  font-size:22px; font-weight:700; letter-spacing:-.045em;
  color:var(--tinte); text-decoration:none; line-height:1;
}
.marke:hover{color:var(--glut)}

/* ── Typografie: die Überschrift ist eine kleine Schwester von WE ── */
h1{
  font-size:clamp(46px,9.5vw,104px);
  font-weight:700; letter-spacing:-.045em; line-height:.92;
  color:var(--tinte);
  margin:clamp(64px,13vh,132px) 0 clamp(26px,4vh,40px);
}
h2{
  font-size:clamp(24px,3.2vw,32px); font-weight:700;
  letter-spacing:-.026em; line-height:1.16;
  color:var(--tinte); margin:clamp(52px,7vh,84px) 0 16px;
}
h3{font-size:19px;font-weight:600;color:var(--tinte);margin:34px 0 8px}
p{margin-bottom:18px}
p.gross{
  font-size:clamp(21px,2.7vw,27px); line-height:1.42; font-weight:600;
  letter-spacing:-.018em; color:var(--tinte); margin-bottom:26px;
}
b,strong{font-weight:600;color:var(--tinte)}
a{color:var(--glut); text-underline-offset:3px}
a:hover{color:var(--tinte)}
em.still{font-style:normal;color:var(--grau)}

ul{list-style:none;margin:18px 0 24px}
li{padding-left:22px;position:relative;margin-bottom:12px}
li:before{content:'';position:absolute;left:2px;top:.68em;
  width:5px;height:5px;border-radius:50%;background:var(--glut);opacity:.75}

hr{border:0;border-top:1px solid var(--linie);margin:52px 0}

/* ── Der ruhige Block: oben und unten eine Haarlinie ────── */
.ruhig{
  margin:38px 0; padding:28px 0;
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
}
.ruhig p:last-child{margin-bottom:0}

/* ── Formular ───────────────────────────────────────────── */
label{display:block;font-size:15px;font-weight:600;color:var(--tinte);margin-bottom:8px}
.hilf{font-size:16px;color:var(--grau);margin-bottom:14px}
textarea,input[type=text]{
  width:100%;font:inherit;font-size:19px;line-height:1.55;
  padding:16px 17px;background:var(--weiss);color:var(--tinte);
  border:1.5px solid var(--linie);border-radius:10px;resize:vertical;
}
textarea::placeholder,input::placeholder{color:#A6A6AE}
textarea:focus,input:focus{outline:2.5px solid var(--glut);outline-offset:1px;border-color:transparent}
button{
  font:inherit;font-weight:600;font-size:18px;
  padding:14px 32px;border:0;border-radius:99px;
  background:var(--glut);color:#fff;cursor:pointer;margin-top:22px;
  transition:background .2s;
}
button:hover{background:#A8442A}
button:disabled{background:#D6D6DB;cursor:default}

/* ── Die Tafel am Fuß jeder Seite ───────────────────────── */
footer{
  margin:clamp(72px,12vh,124px) -24px 0;
  padding:clamp(30px,5vh,48px) 24px clamp(34px,5vh,52px);
  background:var(--tafel); color:#8A8A92;
  font-size:15px; line-height:1.6;
}
footer .spalte{max-width:var(--breite)}
footer a{color:#C9C9D1}
footer a:hover{color:#fff}
footer .zeile{margin-bottom:9px}
footer .zeile:last-child{margin-bottom:0}
footer .fussmarke{
  display:block; font-size:22px; font-weight:700; letter-spacing:-.045em;
  color:#fff; text-decoration:none; margin-bottom:18px; line-height:1;
}
footer .echr{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--tafel-kante);
  font-size:14.5px; color:#6B6B74;
}
footer .echr a{color:#9A9AA4; text-decoration:underline}
footer .echr a:hover{color:#fff}

/* ── Das Menü der Startseite — auf jeder Seite dasselbe ─── */
.knopf{
  position:fixed; top:0; right:0; z-index:52;
  padding:26px 30px; font-size:14px; font-weight:500; letter-spacing:.2em;
  color:var(--grau); cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:9px; transition:color .3s;
}
.knopf .striche{display:flex;flex-direction:column;gap:3px}
.knopf .striche b{display:block;width:15px;height:1.5px;border-radius:2px;
  background:currentColor;opacity:.65;transition:opacity .3s}
.knopf:hover .striche b,.knopf.offen .striche b{opacity:1}
.knopf:hover,.knopf.offen{color:var(--tinte)}
.knopf.fix{color:var(--glut)}
.konsole{
  position:fixed; top:62px; right:26px; z-index:50; width:var(--konsole-b);
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  pointer-events:none;
}
.konsole.offen{pointer-events:auto}
.bogen{height:9px;width:0;background:var(--glut);border-radius:99px;
  transition:width .34s cubic-bezier(.16,1,.3,1)}
.konsole.offen .bogen{width:100%}
.seg{
  display:flex; align-items:center; justify-content:flex-end;
  height:44px; width:0; padding:0; overflow:hidden;
  background:var(--nebel); border-radius:99px;
  font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none;
  color:var(--tinte); white-space:nowrap;
  transition:width .34s cubic-bezier(.16,1,.3,1), background .22s, color .22s;
}
.konsole.offen .seg{width:var(--w);padding-right:24px}
.seg:hover{background:var(--tinte);color:#fff}
.seg.akzent{background:var(--glut);color:#fff}
.seg.akzent:hover{background:var(--tinte)}
.seg span{opacity:0;transition:opacity .18s ease .16s}
.konsole.offen .seg span{opacity:1}
.konsole .seg:nth-child(2){transition-delay:.04s}
.konsole .seg:nth-child(3){transition-delay:.08s}
.konsole .seg:nth-child(4){transition-delay:.12s}
.konsole .seg:nth-child(5){transition-delay:.16s}
.zumachen{
  display:block;width:100%;margin-top:10px;height:44px;
  border:none;border-radius:99px;cursor:pointer;
  background:var(--nebel);color:var(--leise);
  font-family:inherit;font-size:13px;letter-spacing:.1em;
  opacity:0;transition:opacity .18s ease .2s;
}
.konsole.offen .zumachen{opacity:1}
.zumachen:hover{background:var(--tinte);color:#fff}
.balken{height:6px;width:0;background:var(--leise);border-radius:99px;margin-top:3px;
  transition:width .34s cubic-bezier(.16,1,.3,1) .28s}
.konsole.offen .balken{width:52%}

@media (max-width:640px){
  :root{--konsole-b:196px}
  body{font-size:18px}
  .knopf{padding:20px 22px}
  .konsole{top:58px;right:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition-duration:.01ms !important}}