/* ================================================================
   Hammer IT — hammer-it-freiburg.de
   Dunkles Erscheinungsbild, Messing-Akzent, Textur-Hintergrund.

   Aus der Vorgängerseite übernommen:
   · Farbwelt Messing #C7A552 / Türkis #00ADB5 auf dunklem Grund
   · Textur-Hintergrund mit background-attachment: fixed
   · Versetzte, leicht geschrägte Kante hinter Karten
     (Prinzip nach Shadner Joseph, https://codepen.io/Shadnerjo/pen/JjaEoBe)
   · Große transluzente Ziffern auf Karten
   · Zeitstrahl mit Punkten
     (Prinzip nach Alan Houser, https://codepen.io/alanhouser/pen/aErrQJ)

   Aufbau: 1 Tokens · 2 Reset · 3 Typo · 4 Layout · 5 Kopf
           6 Hero · 7 Komponenten · 8 Fuß · 9 Formular · 10 Hell
================================================================ */

/* ============ 1 · Tokens ============ */
:root {
  /* Dunkle Flächen */
  --tief:    #0D1720;
  --panel:   #152530;
  --panel-2: #1B2E3B;

  /* Akzente — alle auf dunklem Grund geprüft */
  --messing:      #C7A552;   /* 7,7:1 — Überschriften, Rahmen */
  --messing-warm: #E0C27E;
  --blau:         #1B9AD6;   /* Logo-Blau — Marke, Flächen, Aktionen */
  --blau-link:    #3FB2E4;   /* aufgehellt für Links auf Karten (5,8:1) */
  --tuerkis:      #00ADB5;   /* Zweitakzent, sparsam */
  --signal:       #FF7A47;

  /* Schrift auf dunklem Grund */
  --text:   #E4EDF2;   /* 15,3:1 */
  --text-2: #A9BFCC;   /*  9,5:1 */
  --text-3: #8AA5B5;   /*  7,0:1 */
  --weiss:  #FFFFFF;

  /* Helle Flächen für lange Lesetexte und Rechtsseiten */
  --licht:        #F4F6F7;
  --licht-tinte:  #0D1720;
  --licht-tinte2: #3D5464;
  --blau-tief:    #0B6A96;   /* 6,0:1 auf Weiß */
  --messing-tief: #7C5A16;   /* 6,3:1 auf Weiß */

  --rand:       rgba(199, 165, 82, .34);
  --rand-still: rgba(255, 255, 255, .13);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --breite: 1140px;
  --schmal: 68ch;
  --radius: 3px;
}

/* Schriften lokal — Dateien nach /fonts/ legen, Bezug: https://fontsource.org */
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-latin-700-normal.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Atkinson Hyperlegible'; src:url('../fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Atkinson Hyperlegible'; src:url('../fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }

/* ============ 2 · Reset ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--tief);
  /* Textur der Vorgängerseite, mit dunklem Schleier für die Lesbarkeit */
  background-image:
    linear-gradient(rgba(13,23,32,.88), rgba(13,23,32,.95)),
    url("../images/Background_2.jpeg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 768px) { body { background-attachment: scroll; } }

img { max-width:100%; height:auto; display:block; }
ul, ol { list-style:none; }
code { font-family: var(--mono); font-size:.92em; color: var(--messing); }

:focus-visible { outline:3px solid var(--messing); outline-offset:2px; border-radius:2px; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.sprunglink {
  position:absolute; inset-inline-start: 1rem; top:-4rem; z-index:200;
  background: var(--messing); color: var(--tief);
  padding:.75rem 1.25rem; font-weight:700; text-decoration:none;
  border-radius: var(--radius); transition: top .15s;
}
.sprunglink:focus { top:1rem; }

/* ============ 3 · Typografie ============ */
h1, h2, h3, h4 {
  font-family: var(--display); font-weight:700; line-height:1.15;
  letter-spacing:-.015em; text-wrap:balance; color: var(--weiss);
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem); margin-bottom:.75rem; color: var(--messing); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
h4 { font-size:1.0625rem; font-weight:600; }

p, li { max-width: var(--schmal); }
p + p { margin-top:.9rem; }

a { color: var(--blau-link); text-underline-offset:.18em; }
a:hover { color: var(--messing-warm); }

.eyebrow {
  font-family: var(--mono); font-size:.8125rem; letter-spacing:.09em;
  text-transform:uppercase; color: var(--text-3); margin-bottom:.6rem; display:block;
}
.lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: var(--text-2); }
.hinweis { font-size:.9rem; color: var(--text-3); margin-top:1rem; }

/* ============ 4 · Layout ============ */
.huelle { width:100%; max-width: var(--breite); margin:0 auto; padding:0 1.5rem; }

.band { padding: clamp(3rem, 6vw, 5rem) 0; }
.band--tief  { background: rgba(13,23,32,.72); }
.band--panel { background: rgba(21,37,48,.82); }
/* Akzentband, von Messing-Haarlinien gerahmt — für USP und Vergleich */
.band--akzent {
  background: rgba(9,17,24,.86);
  border-block-start:1px solid var(--rand); border-block-end:1px solid var(--rand);
}

.raster { display:grid; gap:1.5rem; isolation:isolate; }
@media (min-width: 720px)  { .raster--2 { grid-template-columns:repeat(2,1fr); } }
@media (min-width: 900px)  { .raster--3 { grid-template-columns:repeat(3,1fr); } }
@media (min-width: 1000px) { .raster--4 { grid-template-columns:repeat(4,1fr); } }

.abstand-oben  { margin-top:2rem; }
.abstand-klein { margin-top:1rem; }

/* ============ 5 · Kopf ============ */
.kopf {
  background: rgba(9,17,24,.94); backdrop-filter: blur(6px);
  position:sticky; top:0; z-index:100; border-block-end:1px solid var(--rand);
}
.kopf__innen { display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:72px; }
.kopf__marke { display:flex; align-items:center; }
/* Seitenverhältnis 9,33 — jeder Pixel Höhe kostet gut neun Pixel Breite */
.kopf__marke img { height:26px; width:auto; }

.kopf__schalter {
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; border:1px solid var(--rand); color: var(--messing);
  font-family: var(--body); font-size:.95rem; padding:.5rem .85rem;
  border-radius: var(--radius); cursor:pointer;
}
.kopf__schalter:hover { background: rgba(199,165,82,.12); }
.kopf__balken { display:block; width:18px; height:2px; background:currentColor; position:relative; }
.kopf__balken::before, .kopf__balken::after {
  content:''; position:absolute; inset-inline-start: 0; width:18px; height:2px; background:currentColor; }
.kopf__balken::before { top:-6px; } .kopf__balken::after { top:6px; }

.kopf__nav ul { display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.kopf__nav a { display:block; padding:.55rem .65rem; border-radius: var(--radius);
  color: var(--text-2); text-decoration:none; font-size:.98rem; }
.kopf__nav a:hover { background: rgba(199,165,82,.14); color: var(--messing-warm); }
.kopf__nav a[aria-current="page"] { color: var(--weiss); font-weight:700;
  box-shadow: inset 0 -2px 0 var(--messing); }
.kopf__nav .knopf-klein { background: var(--blau); color: var(--tief);
  font-weight:700; margin-inline-start:.4rem; }
.kopf__nav .knopf-klein:hover { background: var(--messing); color: var(--tief); }

/* Umbruch bei 1120 px: Logo (243) + Navigation (787) brauchen 1046 px */
@media (max-width: 1119px) {
  .kopf__nav { display:none; width:100%; padding:.5rem 0 1rem; border-block-start:1px solid var(--rand); }
  .kopf__nav[data-offen="true"] { display:block; }
  .kopf__nav ul { flex-direction:column; align-items:stretch; gap:0; }
  .kopf__nav a { padding:.85rem .5rem; }
  .kopf__nav .knopf-klein { margin:.6rem 0 0; text-align:center; }
  .kopf__innen { flex-wrap:wrap; }
}
@media (min-width: 1120px) {
  .kopf__schalter { display:none; }
  .kopf__nav { display:block !important; }
  .kopf__nav ul { flex-wrap:nowrap; }
}

/* ============ 6 · Hero ============ */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0;
  background: rgba(9,17,24,.8); border-block-end:1px solid var(--rand); }
.hero__raster { display:grid; gap:2.5rem; align-items:center; }
@media (min-width: 940px) { .hero__raster { grid-template-columns:1.05fr .95fr; gap:3.5rem; } }
.hero h1 { color: var(--weiss); }
.hero__text p { color: var(--text-2); font-size: clamp(1.05rem,1rem + .45vw,1.25rem); margin-top:1.1rem; }
.hero__aktionen { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }

/* Ordnerbaum */
.ordner { background:#071118; border:1px solid var(--rand); border-radius: var(--radius);
  overflow:hidden; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.ordner__kopf { font-family: var(--mono); font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; color: var(--messing); padding:.7rem 1rem;
  border-block-end:1px solid var(--rand); background: rgba(199,165,82,.06); }
.ordner pre { font-family: var(--mono); font-size: clamp(.78rem,.68rem + .35vw,.92rem);
  line-height:1.85; color: var(--text); padding:1.15rem 1rem; margin:0; overflow-x:auto; }
.ordner b { color: var(--blau); font-weight:400; }
.ordner i { color: var(--messing); font-style:normal; }
.ordner figcaption { padding:.95rem 1rem 1.1rem; border-block-start:1px solid var(--rand);
  font-size:.95rem; color: var(--text-2); background: rgba(199,165,82,.05); }
.ordner figcaption strong { color: var(--messing); }

/* ============ 7 · Komponenten ============ */
.knopf {
  display:inline-block; font-family: var(--body); font-weight:700; font-size:1.02rem;
  padding:.85rem 1.6rem; border:2px solid transparent; border-radius: var(--radius);
  text-decoration:none; cursor:pointer;
  transition: background-color .15s, color .15s, transform .12s;
}
.knopf--voll { background: var(--blau); color: var(--tief); border-color: var(--blau); }
.knopf--voll:hover { background: var(--messing); border-color: var(--messing);
  color: var(--tief); transform: translateY(-1px); }
.knopf--linie { background:transparent; color: var(--messing); border-color: var(--rand); }
.knopf--linie:hover { background: rgba(199,165,82,.14); color: var(--messing-warm);
  border-color: var(--messing); }

/* Karte — frostige Fläche mit Messing-Haarlinie, wie auf der Vorgängerseite */
.karte { background: rgba(255,255,255,.055); border:1px solid var(--rand);
  border-radius: var(--radius); padding:1.5rem; }
.karte h3 { margin-bottom:.5rem; color: var(--messing); }
.karte p { color: var(--text-2); }
.karte em { color: var(--text-3); font-style:normal; font-size:.9em; }

/* Signature: versetzte geschrägte Kante hinter der Karte.
   Prinzip aus der Vorgängerseite — statt vier bunter Gradienten
   jetzt einheitlich Messing nach Logo-Blau.

   WICHTIG: Die Karte MUSS deckend sein. Liegt ein halbtransparenter
   Hintergrund darüber, scheint der Farbverlauf durch und der Text
   wird unlesbar. Deshalb setzt .kante den Hintergrund selbst. */
.kante {
  position: relative;
  background: var(--panel-2);          /* deckend, nicht rgba */
  border: 1px solid var(--rand-still);
}
.kante::before {
  content:''; position:absolute; inset:-3px; z-index:-1;
  background: linear-gradient(135deg, var(--messing), var(--blau));
  transform: skew(1deg, 1deg); border-radius: var(--radius);
}

/* Karten, die selbst ein Link sind (die beiden Wege auf der Startseite) */
.karte--link { display: block; text-decoration: none; color: var(--text); }
.karte--link:hover { border-color: var(--messing); }
.karte--link:hover h3 { color: var(--messing-warm); }
.karte--link .hinweis { color: var(--messing); }

/* ----------------------------------------------------------------
   Alternativen zur Kante — jeweils eine Variante aktiv lassen.
   Zum Wechseln den gewünschten Block einkommentieren und den
   .kante::before-Block oben auskommentieren.

   A) Ruhiger: nur Messing statt Farbverlauf
   .kante::before { background: var(--messing); }

   B) Noch ruhiger: keine Fläche, nur eine dicke Linie links
   .kante::before { display: none; }
   .kante { border-inline-start: 3px solid var(--messing); }

   C) Ganz ohne Kante, nur Messing-Rahmen
   .kante::before { display: none; }
   .kante { border-color: var(--rand); }
---------------------------------------------------------------- */

/* Signature: große transluzente Ziffer */
.ziffer {
  position:absolute; top:.6rem; inset-inline-end: .9rem;
  font-family: var(--display); font-weight:700;
  font-size: clamp(3.5rem, 2rem + 4vw, 5.5rem);
  line-height:1; color: var(--messing); opacity:.16;
  pointer-events:none; transition: opacity .3s, top .3s;
}
.kante:hover .ziffer { opacity:.34; top:.2rem; }

.haken li { position:relative; padding-inline-start:1.9rem; margin-bottom:.7rem; max-width: var(--schmal); }
.haken li::before { content:''; position:absolute; inset-inline-start: 0; top:.45em; width:11px; height:6px;
  border-inline-start:2.5px solid var(--messing); border-block-end:2.5px solid var(--messing);
  transform: rotate(-45deg); }
.haken strong { color: var(--messing); }

.problem li { border-inline-start:3px solid var(--rand); padding:.15rem 0 .15rem 1.1rem;
  margin-bottom:1.15rem; max-width: var(--schmal); }
.problem strong { display:block; font-family: var(--display); font-size:1.05rem; color: var(--weiss); }
.problem span { color: var(--text-2); }

.vergleich { display:grid; gap:1.25rem; margin-top:1.75rem; isolation:isolate; }
@media (min-width: 800px) { .vergleich { grid-template-columns:1fr 1fr; gap:1.75rem; } }
.vergleich__spalte { border-radius: var(--radius); padding:1.5rem; }
.vergleich__spalte--andere { background: rgba(255,255,255,.04); border:1px solid var(--rand-still); }
.vergleich__spalte--andere h3 { color: var(--text-2); }
.vergleich__spalte--wir { background: rgba(199,165,82,.09); border:1px solid var(--messing); }
.vergleich__spalte--wir h3 { color: var(--messing); }
.vergleich h3 { font-size:1.15rem; margin-bottom:1rem; }
.vergleich dl { display:grid; grid-template-columns:1fr auto; gap:.55rem 1rem; align-items:baseline; }
.vergleich dt { color: var(--text-2); font-size:.98rem; max-width:none; }
.vergleich dd { font-family: var(--mono); font-size:.95rem; text-align:end; color: var(--text); }
.vergleich--null dd { color: var(--messing); font-weight:700; }

.paket { background: var(--panel-2); border:1px solid var(--rand-still);
  border-radius: var(--radius); padding:1.5rem; display:flex; flex-direction:column;
  position:relative; }
.paket--empfohlen { border-color: var(--messing); }
.paket__marke { font-family: var(--mono); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.08em; color: var(--messing); margin-bottom:.5rem; display:block; }
.paket h3 { margin-bottom:.35rem; color: var(--weiss); }
.paket__preis { font-family: var(--display); font-size:1.75rem; font-weight:700;
  color: var(--messing); margin:.5rem 0 .2rem; }
.paket__zusatz { font-size:.9rem; color: var(--text-3); margin-bottom:1rem; }
.paket ul { margin-top:auto; }
.paket .haken li { font-size:.97rem; margin-bottom:.5rem; }

.kosten { border-block-start:1px solid var(--rand); margin-top:1.5rem; }
.kosten div { display:flex; justify-content:space-between; gap:1.5rem;
  padding:.8rem 0; border-block-end:1px solid var(--rand-still); }
.kosten dt { max-width:none; color: var(--text-2); }
.kosten dd { font-family: var(--mono); white-space:nowrap; color: var(--text); }
.kosten div:last-child { font-weight:700; border-bottom-color: var(--rand); }
.kosten div:last-child dt, .kosten div:last-child dd { color: var(--messing); }

.foerder-box { background: rgba(199,165,82,.1); border-inline-start:4px solid var(--messing);
  padding:1.4rem 1.5rem; border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
.foerder-box h3 { color: var(--messing); }
.foerder-box li { margin-bottom:.5rem; padding-inline-start:1.1rem; position:relative; }
.foerder-box li::before { content:'·'; position:absolute; inset-inline-start: .25rem;
  color: var(--messing); font-weight:700; }

.referenz { display:grid; gap:2rem; align-items:start; }
@media (min-width: 880px) { .referenz { grid-template-columns:1fr 1fr; gap:3rem; } }
.referenz__bild { border:1px solid var(--rand); border-radius: var(--radius); overflow:hidden; }
.referenz__zahlen { display:flex; flex-wrap:wrap; gap:2rem; margin:1.5rem 0; }
.referenz__zahlen div { min-width:90px; }
.referenz__zahlen dt { font-family: var(--mono); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.07em; color: var(--text-3); }
.referenz__zahlen dd { font-family: var(--display); font-weight:700; font-size:1.5rem;
  color: var(--messing); }

.typen { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.typen li { max-width:none; border:1px solid var(--rand); background: rgba(199,165,82,.07);
  border-radius:999px; padding:.45rem 1.05rem; font-size:.97rem;
  color: var(--text); margin-bottom:0; }

.wege { display:grid; gap:1.25rem; margin-top:1.5rem; }
@media (min-width: 800px) { .wege { grid-template-columns:1fr 1fr; gap:1.75rem; } }
.wege__karte { background: var(--panel-2); border:1px solid var(--rand-still);
  border-radius: var(--radius); padding:1.5rem; }
.wege__karte h3 { margin-bottom:.3rem; color: var(--weiss); }
.wege__preis { font-family: var(--mono); font-size:.95rem; color: var(--messing);
  margin-bottom:.9rem; display:block; }

.gegenrede { border:1px solid var(--rand-still); border-inline-start:4px solid var(--tuerkis);
  background: rgba(255,255,255,.04); padding:1.4rem 1.5rem;
  border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
.gegenrede h3 { margin-bottom:.6rem; color: var(--tuerkis); }
.gegenrede li { margin-bottom:.45rem; padding-inline-start:1.4rem; position:relative; color: var(--text-2); }
.gegenrede li::before { content:'→'; position:absolute; inset-inline-start: 0; color: var(--tuerkis); }

.ablauf { counter-reset: schritt; }
.ablauf li { counter-increment: schritt; position:relative;
  padding-inline-start:3.2rem; margin-bottom:1.5rem; max-width: var(--schmal); }
.ablauf li::before {
  content: counter(schritt); position:absolute; inset-inline-start: 0; top:0;
  width:2.2rem; height:2.2rem; border-radius:50%;
  background:transparent; border:1px solid var(--messing); color: var(--messing);
  font-family: var(--mono); font-size:.95rem; display:grid; place-items:center;
}
.ablauf strong { display:block; font-family: var(--display); font-size:1.1rem;
  margin-bottom:.2rem; color: var(--weiss); }
.ablauf span { color: var(--text-2); }

/* Zeitstrahl — Prinzip aus der Vorgängerseite, für ueber-mich.html */
.zeitstrahl { list-style:none; padding:0; border-inline-start:2px solid var(--rand); margin-top:1.5rem; }
.zeitstrahl .ereignis { margin:0 0 2rem; padding-inline-start:1.75rem; position:relative; }
.zeitstrahl .ereignis::before {
  content:''; position:absolute; top:.5em; inset-inline-start: -8px; width:14px; height:14px;
  background: var(--messing); border-radius:50%; box-shadow: 0 0 0 4px var(--tief);
}
.zeitstrahl .ereignis h3 { color: var(--messing); font-size:1.2rem; margin-bottom:.35rem; }
.zeitstrahl .ereignis p { color: var(--text-2); }

.faq details { background: rgba(255,255,255,.05); border:1px solid var(--rand-still);
  border-radius: var(--radius); margin-bottom:.75rem; }
.faq details[open] { border-color: var(--rand); }
.faq summary { padding:1.1rem 1.25rem; cursor:pointer; color: var(--weiss);
  font-family: var(--display); font-weight:600; font-size:1.05rem; list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-family: var(--mono); font-size:1.4rem; color: var(--messing); }
.faq details[open] summary::after { content:'–'; }
.faq details[open] summary { border-block-end:1px solid var(--rand-still); color: var(--messing); }
.faq .faq__inhalt { padding:1.1rem 1.25rem; }
.faq .faq__inhalt p { color: var(--text-2); }

.karten-platzhalter { background: rgba(255,255,255,.05); border:1px solid var(--rand);
  border-radius: var(--radius); padding:2rem 1.5rem; text-align:center; }
.karten-platzhalter p { margin:0 auto 1rem; max-width:46ch; color: var(--text-2); }

.aufruf { text-align:center; }
.aufruf p { margin-inline-start:auto; margin-inline-end:auto; }
.aufruf .hero__aktionen { justify-content:center; }

/* ============ 8 · Fuß ============ */
.fuss { background: rgba(6,12,17,.92); color: var(--text-2);
  padding:3rem 0 1.5rem; font-size:.97rem; border-block-start:1px solid var(--rand); }
.fuss a { color: var(--messing); }
.fuss a:hover { color: var(--messing-warm); }
.fuss h4 { color: var(--weiss); margin-bottom:.7rem; font-family: var(--display); }
.fuss__raster { display:grid; gap:2rem; }
@media (min-width: 760px) { .fuss__raster { grid-template-columns:1.4fr 1fr 1fr; gap:3rem; } }
.fuss__logo { height:26px; width:auto; margin-bottom:1rem; }
.fuss li { margin-bottom:.4rem; }
.fuss__schluss { margin-top:2.5rem; padding-top:1.25rem;
  border-block-start:1px solid var(--rand-still); font-size:.88rem; color: var(--text-3); }

/* ============ 9 · Formular ============ */
.formular { max-width:34rem; }
.feld { margin-bottom:1.25rem; }
.feld label { display:block; font-weight:700; margin-bottom:.35rem; color: var(--messing); }
.feld .hilfe { display:block; font-weight:400; font-size:.9rem; color: var(--text-3); margin-bottom:.35rem; }
.feld input, .feld textarea, .feld select {
  width:100%; font-family: var(--body); font-size:1rem; padding:.7rem .8rem;
  color: var(--text); background: rgba(0,0,0,.35);
  border:1px solid var(--rand); border-radius: var(--radius);
}
.feld textarea { min-height:9rem; resize:vertical; }
.feld input:focus, .feld textarea:focus { border-color: var(--messing); }
.pflicht { color: var(--signal); }
.honig { position:absolute; inset-inline-start: -9999px; }
.meldung { padding:1rem 1.25rem; border-radius: var(--radius); margin-bottom:1.5rem; }
.meldung--ok { background: rgba(0,173,181,.15); border-inline-start:4px solid var(--tuerkis); }
.meldung--fehler { background: rgba(255,122,71,.15); border-inline-start:4px solid var(--signal); }

/* ============ 10 · Helle Flächen (Rechtsseiten, lange Lesetexte) ============ */
.band--licht { background: var(--licht); color: var(--licht-tinte);
  border-block-start:1px solid var(--rand); border-block-end:1px solid var(--rand); }
.band--licht h1 { color: var(--licht-tinte); }
.band--licht h2, .band--licht h3 { color: var(--messing-tief); }
.band--licht p, .band--licht li, .band--licht dt, .band--licht dd { color: var(--licht-tinte); }
.band--licht .lead, .band--licht .hinweis, .band--licht .eyebrow { color: var(--licht-tinte2); }
.band--licht a { color: var(--blau-tief); }
.band--licht a:hover { color: var(--licht-tinte); }
.band--licht .haken li::before { border-color: var(--blau-tief); }
.band--licht .haken strong { color: var(--messing-tief); }
.band--licht code { color: var(--messing-tief); }

/* Druck */
@media print {
  .kopf, .hero__aktionen, .aufruf, .karten-platzhalter { display:none; }
  body { background:#fff !important; color:#000; }
  .band, .hero, .fuss { background:#fff !important; }
  h1,h2,h3,h4,p,li,dt,dd { color:#000 !important; }
  .kante::before, .ziffer { display:none; }
}

/* ================================================================
   11 · Mehrsprachigkeit und RTL
   Das gesamte Stylesheet oben nutzt logische Eigenschaften
   (padding-inline-start statt padding-left usw.), deshalb spiegelt
   sich das Layout bei dir="rtl" von selbst. Hier nur die Ausnahmen,
   die sich NICHT automatisch richtig verhalten.
================================================================ */

/* --- Arabische Schrift ------------------------------------------
   Atkinson Hyperlegible enthält keine arabischen Zeichen.
   IBM Plex Sans Arabic passt zum bereits genutzten IBM Plex Mono.
   Bezug: https://fontsource.org (SIL Open Font License)            */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

:lang(ar) {
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  /* Arabische Schrift wirkt bei gleicher Punktgröße kleiner und
     braucht mehr Zeilenabstand für die Ober- und Unterlängen. */
  font-size: 1.08em;
  line-height: 1.9;
  letter-spacing: 0;   /* negatives Tracking zerstört die Ligaturen */
}
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 {
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  letter-spacing: 0;
  line-height: 1.4;
}

/* --- Ausnahmen bei RTL ------------------------------------------ */

/* Der Ordnerbaum besteht aus Rahmenzeichen und Pfaden. Beides
   zerfällt bei Rechts-nach-links-Fluss, deshalb bleibt er LTR. */
[dir="rtl"] .ordner pre,
[dir="rtl"] code {
  direction: ltr;
  text-align: start;
  unicode-bidi: isolate;
}

/* Die geschrägte Kante muss mitgespiegelt werden, sonst zeigt sie
   in die falsche Richtung. */
[dir="rtl"] .kante::before { transform: skew(-1.2deg, -1.2deg); }

/* Der Haken ist ein Symbol, kein Text — er wird nicht gespiegelt,
   nur seine Position wechselt (das macht inset-inline-start schon). */

/* Pfeile hingegen müssen die Richtung wechseln. */
[dir="rtl"] .gegenrede li::before { content: '←'; }

/* Telefonnummern und E-Mail-Adressen immer LTR, sonst wandern
   Vorwahl und Länderkennung an die falsche Stelle. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: embed; }

/* Zahlenkolonnen in den Kostentabellen lesbar halten. */
[dir="rtl"] .kosten dd,
[dir="rtl"] .vergleich dd { direction: ltr; unicode-bidi: isolate; }

/* Die große Deko-Ziffer sitzt gespiegelt automatisch richtig,
   die Ziffer selbst bleibt aber westlich-arabisch. */
[dir="rtl"] .ziffer { direction: ltr; }

/* Sprachumschalter im Kopf */
.sprachen { display: flex; gap: .15rem; align-items: center; }
.sprachen a {
  font-family: var(--mono); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em; padding: .35rem .5rem; border-radius: var(--radius);
  color: var(--text-3); text-decoration: none;
}
.sprachen a:hover { color: var(--messing-warm); background: rgba(199,165,82,.14); }
.sprachen a[aria-current="true"] { color: var(--messing); font-weight: 700; }
.sprachen span[aria-hidden] { color: var(--rand-still); }

/* ============ 12 · Referenzseite ============ */

/* Zitat eines Kunden */
.zitat {
  border-inline-start: 3px solid var(--messing);
  padding: .25rem 0 .25rem 1.5rem;
  margin: 2rem 0;
}
.zitat blockquote {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem);
  line-height: 1.45; color: var(--weiss);
  max-width: 42ch;
}
.zitat figcaption {
  margin-top: .9rem; font-size: .95rem; color: var(--text-3);
}
.zitat figcaption strong { color: var(--messing); font-weight: 700; }

/* Vorher/Nachher-Gegenüberstellung */
.wandel { display: grid; gap: .75rem; margin-top: 1.5rem; }
@media (min-width: 700px) { .wandel { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.wandel__seite {
  background: rgba(255,255,255,.05); border: 1px solid var(--rand-still);
  border-radius: var(--radius); padding: 1.25rem;
}
.wandel__seite--nachher { background: rgba(199,165,82,.09); border-color: var(--messing); }
.wandel__marke {
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-3); display: block; margin-bottom: .5rem;
}
.wandel__seite--nachher .wandel__marke { color: var(--messing); }
.wandel__pfeil {
  font-family: var(--mono); font-size: 1.6rem; color: var(--messing);
  text-align: center; line-height: 1;
}
@media (max-width: 699px) { .wandel__pfeil { transform: rotate(90deg); padding: .25rem 0; } }
[dir="rtl"] .wandel__pfeil { transform: scaleX(-1); }

/* Bildstrecke mit Bildunterschriften */
.strecke { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 780px) { .strecke { grid-template-columns: repeat(2, 1fr); } }
.strecke figure {
  border: 1px solid var(--rand); border-radius: var(--radius);
  overflow: hidden; background: rgba(255,255,255,.04);
}
.strecke img { width: 100%; display: block; }
.strecke figcaption {
  padding: .85rem 1rem; font-size: .92rem; color: var(--text-2);
  border-block-start: 1px solid var(--rand-still);
}

/* Platzhalter, solange ein Bild fehlt */
.bild-fehlt {
  display: grid; place-items: center; min-height: 14rem;
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,.03) 0 12px, transparent 12px 24px);
  border-block-end: 1px solid var(--rand-still);
  font-family: var(--mono); font-size: .85rem; color: var(--text-3);
  text-align: center; padding: 1.5rem;
}

/* ============ 13 · Über mich ============ */

.portrait {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.portrait img { width: 100%; display: block; }
.portrait figcaption {
  padding: .9rem 1rem;
  border-block-start: 1px solid var(--rand-still);
  font-size: .92rem; color: var(--text-2);
}

/* Kurzprofil als Datenzeilen */
.profil { border-block-start: 1px solid var(--rand); margin-top: 1.5rem; }
.profil div {
  display: flex; gap: 1.5rem; justify-content: space-between;
  padding: .7rem 0; border-block-end: 1px solid var(--rand-still);
}
.profil dt {
  max-width: none; color: var(--text-3);
  font-family: var(--mono); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .07em;
  padding-top: .15rem; flex: 0 0 auto;
}
.profil dd { text-align: end; color: var(--text); max-width: 40ch; }

/* ================================================================
   11 · Mehrsprachigkeit und RTL
   Das Stylesheet nutzt durchgehend logische Eigenschaften, deshalb
   spiegelt sich das Layout bei dir="rtl" von selbst. Hier nur die
   Ausnahmen, die sich NICHT automatisch richtig verhalten.
================================================================ */

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

:lang(ar) {
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  font-size: 1.08em; line-height: 1.9;
  letter-spacing: 0;   /* negatives Tracking zerstört die Ligaturen */
}
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 {
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  letter-spacing: 0; line-height: 1.4;
}

/* Ordnerbaum und Code bestehen aus Rahmenzeichen und Pfaden — bleiben LTR */
[dir="rtl"] .ordner pre, [dir="rtl"] code {
  direction: ltr; text-align: start; unicode-bidi: isolate;
}
[dir="rtl"] .kante::before { transform: skew(-1deg, -1deg); }
[dir="rtl"] .gegenrede li::before { content: '←'; }
[dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"] {
  direction: ltr; unicode-bidi: embed;
}
[dir="rtl"] .kosten dd, [dir="rtl"] .vergleich dd {
  direction: ltr; unicode-bidi: isolate;
}
[dir="rtl"] .ziffer { direction: ltr; }

/* Sprachumschalter */
.sprachen { display: flex; gap: .15rem; align-items: center; }
.sprachen a {
  font-family: var(--mono); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em; padding: .35rem .5rem; border-radius: var(--radius);
  color: var(--text-3); text-decoration: none;
}
.sprachen a:hover { color: var(--messing-warm); background: rgba(199,165,82,.14); }
.sprachen a[aria-current="true"] { color: var(--messing); font-weight: 700; }
.sprachen span[aria-hidden] { color: var(--rand-still); }


/* ================================================================
   14 · Glühwürmchen auf Karten
   Technik nach Christian Alder, „Bioluminescence" (CodePen 2025):
   Animation entlang eines Pfades mit offset-path. Pfade eigens gezeichnet.
================================================================ */

.karte--glueh { --glanz: var(--messing); }
.karte--glueh > :where(h3, h4, p, ul, ol, dl, div) { position: relative; z-index: 1; }
.karte--glueh > .ziffer { z-index: 1; }

.gluehwuermchen {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  opacity: 0; transition: opacity .6s ease-in;
}
.gluehwuermchen .funke {
  fill: var(--glanz);
  filter: drop-shadow(0 0 3px var(--glanz)) drop-shadow(0 0 9px var(--glanz));
  animation: funke-bahn 18s linear infinite both paused,
             funke-blinzeln 3s ease-in-out infinite both paused;
}
.funke--1 { offset-path: path("M40 280C10 200 60 140 120 150C190 162 200 90 150 60C100 30 40 70 60 120C80 170 150 200 220 170C280 144 300 200 270 250C240 300 120 300 40 280"); animation-duration: 19s, 3.1s; }
.funke--2 { offset-path: path("M280 40C220 20 180 80 210 130C240 180 180 220 120 200C60 180 30 120 70 70C110 20 190 40 200 100C210 160 160 260 240 280C300 295 310 90 280 40"); animation-duration: 24s, 2.4s; }
.funke--3 { offset-path: path("M160 300C80 290 50 230 90 190C130 150 110 100 60 110C20 118 30 180 90 200C160 224 250 180 260 120C268 70 210 40 180 80C150 120 190 200 150 250C120 288 200 300 160 300"); animation-duration: 15s, 3.8s; }
.funke--4 { offset-path: path("M60 60C140 40 200 90 170 140C140 190 60 170 70 230C78 280 180 290 230 250C290 200 250 120 200 100C140 76 100 30 60 60"); animation-duration: 21s, 2.9s; }

.karte--glueh:hover .gluehwuermchen,
.karte--glueh:focus-within .gluehwuermchen { opacity: 1; }
.karte--glueh:hover .funke,
.karte--glueh:focus-within .funke { animation-play-state: running; }

@keyframes funke-bahn { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes funke-blinzeln {
  0%, 20%, 40%, 60%, 80%, 100% { opacity: .2; }
  10%, 30%, 50%, 70%, 90%      { opacity: 1; }
}

/* Die globale Regel für reduzierte Bewegung würde die Animation auf
   .01ms stauchen — dann würden die Funken springen statt zu fliegen. */
@media (prefers-reduced-motion: reduce) { .gluehwuermchen { display: none; } }


/* ================================================================
   15 · Abschnittsnavigation für lange Seiten
   Reines CSS. Auf dem Desktop läuft die Leiste unter dem Kopf mit,
   auf schmalen Geräten steht sie fest und lässt sich seitlich schieben.
================================================================ */

.seitennav {
  background: rgba(9, 17, 24, .96);
  border-block-end: 1px solid var(--rand);
  font-size: .95rem;
}
.seitennav__innen { display: flex; align-items: center; gap: 1rem; }
.seitennav__titel {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
  white-space: nowrap; flex: 0 0 auto;
}
.seitennav ul {
  display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: thin;
  padding-block: .6rem; margin: 0;
  mask-image: linear-gradient(to right, transparent 0, #000 1.5rem,
                              #000 calc(100% - 1.5rem), transparent 100%);
}
.seitennav li { margin: 0; max-width: none; }
.seitennav a {
  display: block; white-space: nowrap; padding: .45rem .8rem;
  border-radius: var(--radius); color: var(--text-2); text-decoration: none;
}
.seitennav a:hover { background: rgba(199,165,82,.14); color: var(--messing-warm); }

@media (min-width: 1120px) {
  .seitennav { position: sticky; top: 72px; z-index: 90; backdrop-filter: blur(6px); }
}

/* Entscheidend: Sprungziele unter dem mitlaufenden Kopf hervorholen.
   Ohne das verschwindet die Überschrift beim Sprung dahinter. */
:where(section[id]) { scroll-margin-block-start: 140px; }
@media (max-width: 1119px) { :where(section[id]) { scroll-margin-block-start: 90px; } }

section[id]:target { box-shadow: inset 3px 0 0 var(--messing); }
[dir="rtl"] section[id]:target { box-shadow: inset -3px 0 0 var(--messing); }

@media print { .seitennav { display: none; } }


/* ================================================================
   16 · Bildergalerie mit Großansicht
   Nutzt <dialog> und das command-Attribut — kein JavaScript nötig.
================================================================ */

.strecke figure { position: relative; }
.strecke figure button {
  display: block; width: 100%; padding: 0; position: relative;
  border: 0; background: none; cursor: zoom-in;
}
.strecke figure button img { display: block; width: 100%; }
.strecke figure button picture { display: block; max-height: 260px; overflow: hidden; }

.strecke figure button::before {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 60px;
  background: linear-gradient(transparent, var(--panel-2));
  pointer-events: none;
}
.strecke figure button::after {
  content: '⤢'; position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  background: rgba(9,17,24,.85); color: var(--messing);
  border: 1px solid var(--rand); border-radius: var(--radius);
  font-size: 1rem; opacity: 0; transition: opacity .2s;
}
.strecke figure button:hover::after,
.strecke figure button:focus-visible::after { opacity: 1; }

.gross {
  padding: 0; border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--tief); color: var(--text);
  max-width: min(94vw, 1400px); max-height: 92vh;
  display: flex; flex-direction: column;
}
.gross::backdrop { background: rgba(4,9,13,.88); backdrop-filter: blur(3px); }
.gross > img { display: block; width: 100%; height: auto; }

.gross__rahmen {
  flex: 1 1 auto; min-height: 0;   /* ohne min-height: 0 schrumpft es nicht */
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.gross__rahmen img { display: block; width: 100%; height: auto; }

.gross__hinweis {
  flex: 0 0 auto; padding: .6rem 1rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  border-block-end: 1px solid var(--rand-still); background: rgba(199,165,82,.05);
}
.gross__fuss {
  flex: 0 0 auto; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; padding: .85rem 1rem;
  border-block-start: 1px solid var(--rand-still);
  font-size: .95rem; color: var(--text-2);
}
.gross__fuss button {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--rand);
  color: var(--messing); font-family: var(--body); font-size: .95rem;
  padding: .45rem .9rem; border-radius: var(--radius); cursor: pointer;
}
.gross__fuss button:hover { background: rgba(199,165,82,.14); color: var(--messing-warm); }

/* Absicherung: geschlossene Dialoge bleiben unsichtbar */
dialog:not([open]) { display: none; }

@media print {
  .strecke figure button::after, .strecke figure button::before, .gross { display: none; }
}


/* ================================================================
   17 · Referenzvorschau auf der Startseite
================================================================ */

.referenz__bild a {
  display: block; position: relative;
  border-radius: var(--radius); overflow: hidden; text-decoration: none;
}
.referenz__bild a picture { display: block; max-height: 220px; overflow: hidden; }
.referenz__bild a img { display: block; width: 100%; }
.referenz__bild a::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 70px;
  background: linear-gradient(transparent, var(--tief));
  pointer-events: none;
}
.referenz__bild a:hover { outline: 1px solid var(--messing); }