/* ==========================================================================
   Tischlerei Hallwirth — Gestaltung (Demo)
   Richtung: Werkzeichnung. Die Seite liest sich wie der Plansatz, den die
   Werkstatt vor jedem Auftrag zeichnet: Zeichenpapier, Graphit, und
   Eisenoxid-Rot nur dort, wo gemessen wird.

   Inhalt
     1  Schriften
     2  Grundwerte (Farben hell und dunkel, Größen, Abstände, Bewegung)
     3  Grundlagen
     4  Raster
     5  Schriftstile
     6  Bausteine: Knöpfe, Verweise, Blatt, Eckmarken, Maßlinien, Schriftfeld
     7  Demo-Leiste, Kopfzeile, Menü
     8  Startseite
     9  Unterseiten: Seitenkopf, Leistungen, Referenzen
    10  Über uns
    11  Aktuelles
    12  Kontakt und Formular
    13  Rechtstexte, 404
    14  Fußzeile
    15  Zeichnen (Maßlinien und Plan ziehen sich einmal auf)
    16  Aufmaß (Startanimation der Startseite)
    17  Breiten, Bewegung reduzieren, Druck
   ========================================================================== */


/* 1  SCHRIFTEN ============================================================

   Barlow ist aus der Linie der DIN 1451 gewachsen, der Normschrift, mit der
   technische Zeichnungen und Schilder beschriftet werden. Barlow Condensed
   für Überschriften und Maße: schmal genug, dass lange deutsche Wörter wie
   „Einbauschränke“ auch groß in eine Zeile passen. Beide liegen auf diesem
   Server (SIL Open Font License, assets/fonts/OFL.txt), keine Verbindung zu
   Google. Die Ersatzschriften sind in den Maßen angeglichen, damit beim
   Laden nichts springt. */

/* Vier Schnitte, zusammen rund 87 KB: Barlow 400 und 500 für Text,
   Barlow Condensed 500 und 600 für Überschriften und Maße. Kursiv und
   Barlow 600 werden nicht gebraucht und deshalb nicht geladen. */
@font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../assets/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face {
  font-family: "Barlow Ersatz";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue");
  size-adjust: 99%; ascent-override: 101%; descent-override: 20.2%; line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Condensed Ersatz";
  src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Roboto Condensed");
  size-adjust: 100%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%;
}


/* 2  GRUNDWERTE ===========================================================

   Farbe in OKLCH berechnet (_werkzeug/farben.py). Alle Grautöne tragen den
   Farbton des Akzents (30°) mit sehr wenig Sättigung (C 0,002 bis 0,012):
   Zeichenkarton, kein Cremeton. Eisenoxid-Rot (wie Rostschutz-Grundierung auf Stahl)
   nur für Maßlinien, Marken, Fokus und Hover, nie als Fläche.

   Kontrast auf --grund: --graphit 14,1:1, --graphit-2 7,3:1,
   --graphit-3 4,9:1, --eisen-text 7,3:1, --eisen 6,5:1. */

:root {
  color-scheme: light dark;
  --grund:      #F5F1F1;
  --grund-2:    #EDE9E8;
  --grund-3:    #E3DEDD;
  --feld:        #FCFAFA;
  --linie:       #D1CAC9;
  --linie-stark: #99908E;
  --graphit:     #272120;
  --graphit-2:   #564D4C;
  --graphit-3:   #706765;
  --eisen:       #943A2C;
  --eisen-text:  #86352A;
  --eisen-hell:  #F4D6D0;
  /* dunkle Flächen (Anrufblock, Demo-Leiste) */
  --dunkel:      #272120;
  --dunkel-text: #F5F1F1;
  --dunkel-text-2: #BBB6B4;
  --dunkel-akzent: #DB7E6A;

  --sans:   "Barlow", "Barlow Ersatz", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --schmal: "Barlow Condensed", "Barlow Condensed Ersatz", "Arial Narrow", "Barlow Ersatz", Arial, sans-serif;

  /* Schriftgrößen, Verhältnis ungefähr 1:1,333. Nichts unter 15 px. */
  --t-klein: 0.9375rem;
  --t-text:  clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lead:  clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --t-m:     clamp(1.4375rem, 1.25rem + 0.75vw, 2rem);
  --t-l:     clamp(2.25rem, 1.5rem + 2.8vw, 4rem);
  --t-xl:    clamp(2.75rem, 1.6rem + 4.4vw, 5.75rem);
  --t-hero:  clamp(3.25rem, 1.5rem + 5.2vw, 6rem);

  /* Raster und Abstände (8er-Schritte) */
  --max:     1360px;
  --rand:    clamp(16px, 4.5vw, 64px);
  --aussen:  max(var(--rand), calc((100vw - var(--max)) / 2));
  --luecke:  clamp(16px, 2vw, 32px);
  --sektion: clamp(88px, 11vw, 168px);
  --kopf-h:  72px;
  --lesebreite: 36em;

  /* Bewegung: eine Kurve, drei Dauern */
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --kurz:   160ms;
  --mittel: 320ms;
  --lang:   900ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:      #191716;
    --grund-2:    #221F1E;
    --grund-3:    #2B2726;
    --feld:        #221F1E;
    --linie:       #3C3635;
    --linie-stark: #696160;
    --graphit:     #EAE7E6;
    --graphit-2:   #BCB6B4;
    --graphit-3:   #9E9695;
    --eisen:       #DB7E6A;
    --eisen-text:  #E48E79;
    --eisen-hell:  #44241E;
    --dunkel:      #2B2726;
    --dunkel-text: #EAE7E6;
    --dunkel-text-2: #BBB6B4;
    --dunkel-akzent: #E48E79;
  }
}


/* 3  GRUNDLAGEN =========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--grund);
  scroll-padding-top: calc(var(--kopf-h) + 24px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-synthesis: none;
  caret-color: var(--eisen);
  margin: 0;
  background-color: var(--grund);
  color: var(--graphit-2);
  font-family: var(--sans);
  font-size: var(--t-text);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, picture, svg { display: block; max-width: 100%; }
picture img { width: 100%; height: auto; outline: 1px solid color-mix(in oklch, var(--graphit) 10%, transparent); outline-offset: -1px; }

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; color: var(--graphit); font-weight: 500; text-wrap: balance; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
p, li, dd { text-wrap: pretty; }
:lang(de-AT) p, :lang(de-AT) li, :lang(de-AT) dd { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; }

::selection { background: var(--eisen-text); color: var(--grund); }

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

.sprung {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 12px 20px; background: var(--graphit); color: var(--grund);
  font-weight: 500; text-decoration: none;
}
.sprung:focus { top: 12px; }

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

.nw { white-space: nowrap; }
.zahl { font-family: var(--schmal); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.klein { font-size: var(--t-klein); }


/* 4  RASTER ================================================================

   Zwölf Spalten, außen so breit wie der Seitenrand. */

.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--luecke);
  padding-inline: var(--aussen);
}


/* 5  SCHRIFTSTILE ========================================================= */

/* Überschriften in Barlow normaler Breite, Gewicht 500, eng gesetzt.
   Barlow Condensed bleibt für Maßzahlen, Preise und das Logo: dort, wo auf
   einem Plan die Normschrift steht. */
.titel-hero, .titel-xl, .titel-l, .titel-m {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--graphit);
}
.titel-hero { font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.032em; }
.titel-xl   { font-size: var(--t-xl);   line-height: 1.0;  letter-spacing: -0.03em; }
.titel-l    { font-size: var(--t-l);    line-height: 1.05; letter-spacing: -0.024em; }
.titel-m    { font-size: var(--t-m);    line-height: 1.18; letter-spacing: -0.012em; }

.lead { font-size: var(--t-lead); line-height: 1.42; color: var(--graphit); max-width: 30em; letter-spacing: -0.005em; }
.lead a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }


/* 6  BAUSTEINE ============================================================ */

/* Knöpfe: kantig wie ein Zuschnitt. Hauptknopf Graphit, beim Überfahren Eisen. */
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.knopf {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 22px;
  background: var(--graphit); color: var(--grund);
  border: 1px solid var(--graphit);
  font-family: var(--sans); font-size: 1rem; font-weight: 500; line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--kurz) var(--ease), border-color var(--kurz) var(--ease), color var(--kurz) var(--ease);
}
.knopf .pfeil { width: 20px; height: 12px; flex: none; transition: transform var(--kurz) var(--ease); }
.knopf:active { transform: translateY(1px); }
.knopf-leise { background: transparent; color: var(--graphit); border-color: var(--graphit-3); }
.knopf-klein { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.knopf-hell { background: var(--dunkel-text); color: var(--dunkel); border-color: var(--dunkel-text); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--eisen-text); border-color: var(--eisen-text); color: var(--grund); }
  .knopf:hover .pfeil { transform: translateX(3px); }
  .knopf-leise:hover { background: var(--grund-2); border-color: var(--graphit); color: var(--graphit); }
  .knopf-hell:hover { background: var(--dunkel-akzent); border-color: var(--dunkel-akzent); color: #191716; }
}

/* Verweis mit Pfeil */
.verweis {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  color: var(--graphit); font-weight: 500;
  text-decoration: none;
}
.verweis span { text-decoration: underline; text-decoration-color: var(--linie-stark); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-color var(--kurz) var(--ease); }
.verweis .pfeil { width: 20px; height: 12px; flex: none; color: var(--eisen); transition: transform var(--kurz) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .verweis:hover span { text-decoration-color: var(--eisen); }
  .verweis:hover .pfeil { transform: translateX(3px); }
}

/* Blatt: Foto mit Eckmarken wie auf einem Plan. Die Marken sitzen in einem
   9-px-Rand um das Bild, außerhalb des Motivs. */
.eck {
  --eck-l: 14px;
  --eck-c: var(--graphit-3);
  padding: 9px;
  background:
    linear-gradient(var(--eck-c) 0 0) left top / var(--eck-l) 1px,
    linear-gradient(var(--eck-c) 0 0) left top / 1px var(--eck-l),
    linear-gradient(var(--eck-c) 0 0) right top / var(--eck-l) 1px,
    linear-gradient(var(--eck-c) 0 0) right top / 1px var(--eck-l),
    linear-gradient(var(--eck-c) 0 0) left bottom / var(--eck-l) 1px,
    linear-gradient(var(--eck-c) 0 0) left bottom / 1px var(--eck-l),
    linear-gradient(var(--eck-c) 0 0) right bottom / var(--eck-l) 1px,
    linear-gradient(var(--eck-c) 0 0) right bottom / 1px var(--eck-l);
  background-repeat: no-repeat;
}
.blatt { position: relative; }
.blatt-bild { position: relative; }
.blatt-bild img { object-fit: cover; background: var(--grund-3); }
.blatt.mit-mass-h { padding-right: 44px; }

.bildzeile {
  display: flex; flex-wrap: wrap; gap: 2px 12px; justify-content: space-between;
  margin: 10px 9px 0;
  font-size: var(--t-klein); line-height: 1.45; color: var(--graphit-2);
}
.bildzeile:empty { display: none; }
.bildzeile a { display: inline-block; padding-block: 6px; margin-block: -6px; color: var(--graphit); text-underline-offset: 0.2em; }
.bildzeile-nachweis { color: var(--graphit-3); }

/* Maßlinien: Schrägstrich-Begrenzung, Maßhilfslinien, Zahl über der Linie.
   Die graue Linie ist immer da. .mass-linie ist die Eisen-Linie, die sich
   beim Erreichen darüberzieht (Abschnitt 15). */
.mass {
  position: relative; display: block;
  color: var(--graphit-3);
  font-family: var(--schmal); font-weight: 500; font-size: 0.9375rem; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.mass::before, .mass::after { content: ""; position: absolute; pointer-events: none; }
.mass-wert { position: absolute; color: var(--eisen-text); white-space: nowrap; }
.mass-linie { position: absolute; background: var(--eisen); }

.mass-b { height: 34px; margin: 4px 9px 0; }
.mass-b::before { left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; }
.mass-b::after {
  left: -7px; right: -7px; top: 0; bottom: 0;
  background:
    linear-gradient(currentColor 0 0) 7px 0 / 1px calc(100% - 3px) no-repeat,
    linear-gradient(currentColor 0 0) calc(100% - 7px) 0 / 1px calc(100% - 3px) no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) 0 calc(100% - 2px) / 14px 14px no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) 100% calc(100% - 2px) / 14px 14px no-repeat;
}
.mass-b .mass-linie { left: 0; right: 0; bottom: 9px; height: 1.5px; transform-origin: 50% 50%; }
.mass-b .mass-wert { left: 50%; bottom: 14px; transform: translateX(-50%); }

.mass-h { position: absolute; top: 9px; bottom: 9px; right: -44px; width: 36px; }
.mass-h::before { left: 24px; top: 0; bottom: 0; width: 1px; background: currentColor; }
.mass-h::after {
  left: 0; right: 0; top: -7px; bottom: -7px;
  background:
    linear-gradient(currentColor 0 0) 0 7px / 31px 1px no-repeat,
    linear-gradient(currentColor 0 0) 0 calc(100% - 7px) / 31px 1px no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) 17px 0 / 14px 14px no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) 17px 100% / 14px 14px no-repeat;
}
.mass-h .mass-linie { left: 24px; top: 0; bottom: 0; width: 1.5px; transform-origin: 50% 50%; }
.mass-h .mass-wert { left: 8px; top: 50%; writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(180deg); }

/* Kleine Beschriftung über Angaben (Kontaktseite, Fußzeile) */
.sf-label, .fuss-label {
  margin: 0 0 6px;
  font-size: var(--t-klein); font-weight: 500;
  color: var(--graphit-3);
}


/* 7  DEMO-LEISTE, KOPFZEILE, MENÜ ========================================= */

.demo-leiste {
  background: var(--dunkel); color: var(--dunkel-text);
  padding: 9px var(--aussen);
  font-size: var(--t-klein); line-height: 1.4;
}
.demo-leiste strong { font-weight: 500; }
.demo-leiste a { color: inherit; text-underline-offset: 0.2em; }

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--grund);
  border-bottom: 1px solid transparent;
  transition: transform var(--mittel) var(--ease), border-color var(--kurz) linear;
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf.ist-versteckt { transform: translateY(-101%); }
.kopf-innen {
  display: flex; align-items: center; gap: 24px;
  min-height: var(--kopf-h);
  padding-inline: var(--aussen);
}

.marke {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  color: var(--graphit); text-decoration: none;
}
.marke .dreieck { width: 22px; height: 20px; color: var(--eisen); flex: none; }
.marke-name { font-family: var(--schmal); font-weight: 600; font-size: 1.625rem; letter-spacing: 0.01em; line-height: 1; }
.marke-zusatz { font-family: var(--schmal); font-weight: 500; font-size: 0.875rem; color: var(--graphit-3); line-height: 1; padding-top: 5px; }

.kopf-nav { margin-left: auto; display: flex; align-items: center; gap: 32px; }
.kopf-liste { display: flex; gap: 4px 22px; list-style: none; margin: 0; padding: 0; }
.kopf-verweis {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--graphit); font-weight: 500; font-size: 1rem; text-decoration: none;
  text-underline-offset: 8px; text-decoration-thickness: 2px;
}
.kopf-verweis[aria-current="page"] { text-decoration-line: underline; text-decoration-color: var(--eisen); }
@media (hover: hover) and (pointer: fine) {
  .kopf-verweis:hover { text-decoration-line: underline; text-decoration-color: var(--linie-stark); }
  .kopf-verweis[aria-current="page"]:hover { text-decoration-color: var(--eisen); }
}
.kopf-kontakt { display: flex; align-items: center; gap: 18px; }
.kopf-tel {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--schmal); font-weight: 600; font-size: 1.1875rem; font-variant-numeric: tabular-nums;
  color: var(--graphit); text-decoration: none; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .kopf-tel:hover { color: var(--eisen-text); } }

.kopf-tel-mobil, .menue-knopf { display: none; }

@media (max-width: 1179px) {
  .marke-zusatz { display: none; }
  .kopf-tel-mobil {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto;
    color: var(--graphit);
  }
  .kopf-tel-mobil svg { width: 22px; height: 22px; }
  .menue-knopf {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 4px 0 12px;
    background: none; border: 0; color: var(--graphit);
    font-weight: 500; font-size: 1rem;
  }
  .menue-knopf-striche { position: relative; width: 22px; height: 12px; }
  .menue-knopf-striche::before, .menue-knopf-striche::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
    transition: transform var(--mittel) var(--ease), top var(--mittel) var(--ease);
  }
  .menue-knopf-striche::before { top: 1px; }
  .menue-knopf-striche::after { top: 9px; }
  .menue-offen .menue-knopf-striche::before { top: 5px; transform: rotate(45deg); }
  .menue-offen .menue-knopf-striche::after { top: 5px; transform: rotate(-45deg); }

  .kopf-nav {
    display: none;
    position: fixed; left: 0; right: 0; top: var(--kopf-h); bottom: 0;
    flex-direction: column; align-items: stretch; justify-content: space-between; gap: 32px;
    margin: 0; padding: 16px var(--aussen) 32px;
    background: var(--grund);
    border-top: 1px solid var(--linie);
    overflow-y: auto;
  }
  .menue-offen .kopf-nav { display: flex; }
  .kopf-liste { flex-direction: column; gap: 0; }
  .kopf-liste li { border-bottom: 1px solid var(--linie); }
  .kopf-verweis { width: 100%; min-height: 64px; font-size: 1.875rem; letter-spacing: -0.02em; }
  .kopf-kontakt { flex-direction: column; align-items: stretch; gap: 12px; }
  .kopf-tel { font-size: 1.75rem; }
  .kopf-kontakt .knopf { justify-content: center; min-height: 52px; font-size: 1rem; }
  body.menue-sperre { overflow: hidden; }
}


/* 8  STARTSEITE =========================================================== */

.start-kopf {
  position: relative;
  padding-top: clamp(72px, 7vw, 112px);
  padding-bottom: clamp(24px, 3vw, 48px);
  row-gap: 48px;
  align-items: end;
}
.start-text { grid-column: 1 / span 7; padding-bottom: clamp(8px, 4vw, 72px); }
.start-text .titel-hero { max-width: 7.5em; }
.hero-satz { display: block; }
.start-text .lead { margin-top: clamp(24px, 2.5vw, 40px); max-width: 24em; }
.start-text .knopf-reihe { margin-top: clamp(28px, 3vw, 44px); }
.start-bild { grid-column: 8 / -1; }
.start-bild img { aspect-ratio: auto; height: clamp(420px, calc(100svh - 240px), 780px); }

/* Werkindex: die vier Bereiche als dichte Liste, wie ein Stücklisten-Kopf */
.werkindex { padding-top: var(--sektion); row-gap: 40px; }
.werkindex-kopf { grid-column: 1 / span 4; }
.werkindex-kopf p { margin-top: 20px; max-width: 26em; }
.werkindex-kopf .verweis { margin-top: 16px; }
.werkindex-liste { grid-column: 6 / -1; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linie); }
.werkindex-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto 20px;
  gap: 8px 28px;
  align-items: baseline;
  padding: 28px 0 30px;
  border-top: 1px solid var(--linie);
  color: var(--graphit-2); text-decoration: none;
}
.wi-titel { font-weight: 500; font-size: var(--t-m); line-height: 1.15; letter-spacing: -0.012em; color: var(--graphit); transition: color var(--kurz) var(--ease); }
.wi-nutzen { font-size: 1.0625rem; line-height: 1.5; }
.wi-daten { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.wi-preis { font-family: var(--schmal); font-weight: 600; font-size: 1.3125rem; color: var(--graphit); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wi-zeit { font-size: var(--t-klein); color: var(--graphit-3); white-space: nowrap; }
.werkindex-zeile .pfeil { width: 20px; height: 12px; color: var(--eisen); align-self: center; transition: transform var(--kurz) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .werkindex-zeile:hover .wi-titel { color: var(--eisen-text); }
  .werkindex-zeile:hover .pfeil { transform: translateX(4px); }
}

/* Prinzip: die Zeichnung als Hauptbeweis */
.prinzip { background: var(--grund-2); padding-block: var(--sektion); margin-top: var(--sektion); }
.prinzip-haupt { row-gap: 40px; align-items: start; }
.prinzip-text { grid-column: 1 / span 4; padding-top: 8px; }
.prinzip-text .lead { margin-top: 24px; }
.prinzip-text p + p { margin-top: 16px; }
.prinzip-text .verweis { margin-top: 16px; }
.prinzip-plan { grid-column: 5 / -1; }
.plan-blatt { background-color: var(--grund); padding: clamp(14px, 2vw, 28px); --eck-c: var(--graphit-2); }
.plan-schmal { display: none; }


.zeichnung { width: 100%; height: auto; }
.zeichnung .z-vor { stroke: var(--linie-stark); }
.zeichnung .z-k { stroke: var(--graphit); }
.zeichnung .z-d { stroke: var(--graphit-2); }
.zeichnung .z-ma { stroke: var(--eisen); }
.zeichnung .z-verdeckt { stroke: var(--graphit-2); }
.zeichnung pattern line { stroke: var(--linie-stark); }
.zeichnung .z-t { font-family: var(--schmal); font-weight: 500; letter-spacing: 0.02em; fill: var(--graphit); }
.zeichnung .z-m { fill: var(--eisen-text); }
.zeichnung .z-klein { fill: var(--graphit-2); }

/* Material: ein Foto über die volle Breite, zwei Spalten Text darunter */
.material { padding-top: var(--sektion); }
.material-bild img { aspect-ratio: 21 / 9; }
.material-bild .bildzeile { margin-inline: var(--aussen); }
.material-text { padding-top: clamp(40px, 5vw, 72px); row-gap: 48px; }
.material-spalte:first-child { grid-column: 1 / span 5; }
.material-spalte:last-child { grid-column: 7 / span 5; }
.material-spalte p { margin-top: 16px; max-width: 32em; }

/* Auswahl: ein großer Auftrag, der links aus dem Raster läuft, zwei kleine */
.auswahl { padding-top: var(--sektion); padding-bottom: 48px; row-gap: 48px; align-items: start; }
.auswahl-kopf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.auswahl-gross { grid-column: 1 / span 7; margin-left: calc(-1 * var(--aussen)); }
.auswahl-gross .blatt-bild.eck { background: none; padding: 0; }
.auswahl-gross .mass-b { margin-left: 0; }
.auswahl-gross .auswahl-titel, .auswahl-gross .auswahl-meta { padding-left: var(--aussen); }
.auswahl-gross img { aspect-ratio: 5 / 6; }
.auswahl-rechts { grid-column: 9 / -1; display: grid; gap: 64px; }
.auswahl-klein img { aspect-ratio: 3 / 2; }
.auswahl-titel { margin-top: 22px; font-size: var(--t-m); line-height: 1.18; letter-spacing: -0.012em; }
.auswahl-titel a { color: var(--graphit); text-decoration: none; }
.auswahl-titel .zahl { color: var(--graphit-3); margin-right: 8px; letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) { .auswahl-titel a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } }
.auswahl-meta { margin-top: 6px; font-size: var(--t-klein); color: var(--graphit-3); }

/* Ablauf: die vier Schritte hängen an einer Maßkette, die Zeit misst */
.ablauf { padding-top: var(--sektion); padding-bottom: var(--sektion); }
.ablauf-kopf { grid-column: 1 / span 6; margin-bottom: 64px; }
.ablauf-kopf p { margin-top: 20px; max-width: 32em; }
.ablauf-kette { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.ablauf-schritt > h3, .ablauf-schritt > p { padding-right: 32px; }
.ablauf-dauer { position: relative; display: block; height: 44px; margin-bottom: 24px; color: var(--graphit-3); }
.ablauf-dauer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; }
.ablauf-dauer::after {
  content: ""; position: absolute; left: -7px; right: -7px; top: 4px; bottom: 0;
  background:
    linear-gradient(currentColor 0 0) 7px 0 / 1px calc(100% - 3px) no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) 0 calc(100% - 3px) / 14px 14px no-repeat;
}
.ablauf-schritt:last-child .ablauf-dauer::after {
  background:
    linear-gradient(currentColor 0 0) 7px 0 / 1px calc(100% - 3px) no-repeat,
    linear-gradient(currentColor 0 0) calc(100% - 7px) 0 / 1px calc(100% - 3px) no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) 0 calc(100% - 3px) / 14px 14px no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) 100% calc(100% - 3px) / 14px 14px no-repeat;
}
.ablauf-dauer .mass-linie { left: 0; right: 0; bottom: 10px; height: 1.5px; background: var(--graphit); transform-origin: 0 50%; }
.ablauf-dauer-wert {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-family: var(--schmal); font-weight: 500; font-size: 1.0625rem; white-space: nowrap;
  color: var(--graphit-2); font-variant-numeric: tabular-nums;
}
.ist-freigabe .ablauf-dauer { color: var(--eisen); }
.ist-freigabe .ablauf-dauer .mass-linie { background: var(--eisen); }
.ist-freigabe .ablauf-dauer-wert { color: var(--eisen-text); }
.ablauf-titel { font-size: var(--t-m); line-height: 1.18; letter-spacing: -0.012em; }
.ablauf-nr { display: inline-block; min-width: 1.1em; margin-right: 8px; color: var(--eisen-text); font-variant-numeric: tabular-nums; }
.ablauf-schritt p { margin-top: 12px; font-size: 1.0625rem; }

/* Anrufblock: die Telefonnummer als größte Zeile der Seite */
.anruf { background: var(--dunkel); color: var(--dunkel-text-2); padding-block: var(--sektion); }
.anruf-innen { row-gap: 28px; }
.anruf-titel { grid-column: 1 / -1; color: var(--dunkel-text); }
.anruf-vor { display: block; font-family: var(--sans); font-weight: 500; font-size: var(--t-lead); color: var(--dunkel-text-2); }
.anruf-nummer {
  display: inline-block; margin-top: 8px;
  font-family: var(--schmal); font-weight: 600; font-size: clamp(3.5rem, 1rem + 10.5vw, 10.5rem); line-height: 0.95;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  color: var(--dunkel-text); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .anruf-nummer:hover { color: var(--dunkel-akzent); } }
.anruf-nummer:focus-visible { outline-color: var(--dunkel-akzent); }
.anruf-text { grid-column: 1 / span 6; max-width: 34em; }
.anruf .knopf-reihe { grid-column: 1 / -1; }
.anruf .knopf:focus-visible { outline-color: var(--dunkel-akzent); }


/* 9  UNTERSEITEN ========================================================== */

.seitenkopf { padding-top: clamp(56px, 8vw, 128px); padding-bottom: clamp(48px, 6vw, 88px); row-gap: 32px; }
.seitenkopf h1 { grid-column: 1 / span 10; }
.seitenkopf-lead { grid-column: 1 / span 7; }

.sprungliste { grid-column: 1 / -1; margin-top: 12px; }
.sprungliste ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linie); }
.sprungliste a {
  display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 14px 16px 14px 0;
  color: var(--graphit); text-decoration: none;
}
.sprungliste a span:first-child { font-weight: 500; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; }
.sprung-preis { font-size: var(--t-klein); color: var(--graphit-3); }
@media (hover: hover) and (pointer: fine) { .sprungliste a:hover span:first-child { color: var(--eisen-text); } }

/* Leistungen */
.leistung { padding-top: var(--sektion); row-gap: 40px; align-items: start; }
.leistung-bild { grid-column: 1 / span 6; position: sticky; top: calc(var(--kopf-h) + 24px); }
.leistung-bild img { aspect-ratio: 4 / 5; }
.leistung-text { grid-column: 8 / -1; }
.leistung.ist-rechts .leistung-bild { grid-column: 8 / -1; grid-row: 1; }
.leistung.ist-rechts .leistung-text { grid-column: 1 / span 6; grid-row: 1; }
.leistung-text .lead { margin-top: 20px; }
.leistung-text > p:not(.lead) { margin-top: 18px; max-width: var(--lesebreite); }
.leistung-text .verweis { margin-top: 24px; }

.datenblatt { margin-top: 36px; padding-top: 12px; border-top: 1px solid var(--linie-stark); }
.datenblatt > div { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 2px 24px; padding: 9px 0; }
.datenblatt dt { font-size: var(--t-klein); font-weight: 500; color: var(--graphit-3); padding-top: 2px; }
.datenblatt dd { color: var(--graphit); font-size: 1.0625rem; }
.datenblatt-eng { margin-top: 24px; margin-bottom: 24px; }
.datenblatt-eng > div { grid-template-columns: 8em minmax(0, 1fr); }
.komma-liste { display: inline; margin: 0; padding: 0; }
.komma-liste li { display: inline; }
.komma-liste li:not(:last-child)::after { content: ", "; }

.preistabelle { width: 100%; margin-top: 36px; border-collapse: collapse; }
.preistabelle caption { text-align: left; padding-bottom: 10px; font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--graphit); }
.preistabelle th, .preistabelle td { padding: 14px 0; border-top: 1px solid var(--linie); vertical-align: baseline; }
.preistabelle tr:last-child th, .preistabelle tr:last-child td { border-bottom: 1px solid var(--linie); }
.preistabelle th { text-align: left; font-weight: 400; font-size: 1.0625rem; color: var(--graphit-2); padding-right: 24px; }
.preistabelle td { text-align: right; white-space: nowrap; font-family: var(--schmal); font-weight: 600; font-size: 1.3125rem; color: var(--graphit); font-variant-numeric: tabular-nums; }

.fussnote { padding-top: 48px; }
.fussnote span { grid-column: 1 / span 8; max-width: 44em; font-size: var(--t-klein); color: var(--graphit-3); }

/* Referenzen: Werkliste und Aufträge */
.werkliste { padding-bottom: 16px; }
.tabelle-rahmen { grid-column: 1 / -1; }
.werkliste-tabelle { width: 100%; border-collapse: collapse; }
.werkliste-tabelle th, .werkliste-tabelle td { text-align: left; padding: 16px 20px 16px 0; border-bottom: 1px solid var(--linie); vertical-align: baseline; font-size: 1.0625rem; }
.werkliste-tabelle thead th { padding-top: 0; font-weight: 500; font-size: var(--t-klein); color: var(--graphit-3); border-bottom: 1px solid var(--linie-stark); }
.werkliste-tabelle tbody th { font-weight: 500; color: var(--graphit); }
.werkliste-tabelle a { color: inherit; text-decoration: none; }
.werkliste-tabelle .wl-titel a { text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .werkliste-tabelle .wl-titel a:hover { text-decoration-color: var(--eisen); } }
.wl-nr, .wl-mass, .wl-jahr { font-family: var(--schmal); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-nr a { color: var(--graphit-3); }
.wl-jahr { padding-right: 0 !important; text-align: right !important; }

.auftrag { padding-top: var(--sektion); row-gap: 40px; align-items: start; }
.auftrag-bild { grid-column: 1 / span 7; }
.auftrag-bild img { aspect-ratio: 3 / 2; }
.auftrag-bild.ist-hoch { grid-column: 1 / span 5; }
.auftrag-bild.ist-hoch img { aspect-ratio: 4 / 5; }
.auftrag-text { grid-column: 8 / -1; padding-left: clamp(0px, 1.5vw, 24px); }
.auftrag-text .titel-l { font-size: clamp(2rem, 1.3rem + 1.6vw, 2.875rem); }
.auftrag.ist-rechts .auftrag-bild { grid-column: 7 / span 6; grid-row: 1; }
.auftrag.ist-rechts .auftrag-bild.ist-hoch { grid-column: 8 / span 4; }
.auftrag.ist-rechts .auftrag-text { grid-column: 1 / span 5; grid-row: 1; }
.auftrag-text > p + p { margin-top: 14px; }
.auftrag-text > .datenblatt + p { margin-top: 28px; }
.auftrag-hinweis { color: var(--graphit-3); font-size: var(--t-klein); }

.hinweis-block { padding-top: var(--sektion); padding-bottom: var(--sektion); row-gap: 16px; }
.hinweis-block > * { grid-column: 1 / span 7; max-width: 40em; }
.hinweis-block p { max-width: 32em; }


/* 10  ÜBER UNS ============================================================ */

.bild-breit { padding-bottom: 24px; }
.bild-breit .blatt-bild.eck { background: none; padding: 0; }
.bild-breit img { aspect-ratio: 21 / 9; }
.bild-breit .bildzeile { margin-inline: var(--aussen); }

.chronik { padding-top: var(--sektion); row-gap: 32px; align-items: start; }
.chronik-kopf { grid-column: 1 / span 4; position: sticky; top: calc(var(--kopf-h) + 24px); }
.chronik-kopf p { margin-top: 20px; max-width: 24em; }
.chronik-liste { grid-column: 6 / -1; margin: 0; }
.chronik-eintrag { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 24px; padding: 32px 0; border-top: 1px solid var(--linie); }
.chronik-eintrag:last-child { border-bottom: 1px solid var(--linie); }
.chronik-jahr { font-size: 2.25rem; line-height: 1; color: var(--graphit); }
.chronik-eintrag p { margin-top: 8px; }

.regeln { padding-top: var(--sektion); row-gap: 32px; }
.regeln h2 { grid-column: 1 / span 4; }
.regeln-liste { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--luecke); margin: 0; }
.regeln-liste li { padding: 28px 0 32px; border-top: 1px solid var(--linie); }
.regeln-liste p { margin-top: 8px; }

.team { padding-top: var(--sektion); row-gap: 48px; align-items: start; }
.team-kopf { grid-column: 1 / span 6; }
.team-kopf p { margin-top: 20px; max-width: 32em; }
.person-gross { grid-column: 1 / span 5; }
.person-gross img { aspect-ratio: 4 / 5; }
.person-klein img { aspect-ratio: 3 / 4; }
.person-klein:nth-of-type(2) { grid-column: 7 / span 3; }
.person-klein:nth-of-type(3) { grid-column: 10 / span 3; }
.person .titel-m { margin-top: 18px; }
.person-rolle { margin-top: 4px; font-weight: 500; font-size: var(--t-klein); color: var(--eisen-text); }
.person p:last-child { margin-top: 10px; font-size: 1.0625rem; }
.team-rest { grid-column: 1 / span 8; padding-top: 24px; border-top: 1px solid var(--linie); }
.team-hinweis { grid-column: 1 / span 8; font-size: var(--t-klein); color: var(--graphit-3); margin-top: -24px; }

.zeichen { padding-block: var(--sektion); row-gap: 24px; align-items: center; }
.zeichen-bild { grid-column: 1 / span 2; color: var(--eisen); }
.zeichen-bild .dreieck { width: 100%; max-width: 132px; height: auto; }
.zeichen-text { grid-column: 3 / span 6; }
.zeichen-text p { margin-top: 12px; }


/* 11  AKTUELLES ============================================================ */

.journal { padding-bottom: var(--sektion); }
.eintrag {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid; row-gap: 24px;
  padding-block: 48px 56px;
  border-top: 1px solid var(--linie);
}
.eintrag:last-child { border-bottom: 1px solid var(--linie); }
.eintrag-meta { grid-column: 1 / span 2; display: flex; flex-direction: column; gap: 4px; }
.eintrag-meta time { font-family: var(--schmal); font-weight: 600; font-size: 1.25rem; color: var(--graphit); font-variant-numeric: tabular-nums; }
.eintrag-meta span { font-size: var(--t-klein); color: var(--graphit-3); }
.eintrag-text { grid-column: 3 / span 6; max-width: var(--lesebreite); }
.eintrag-text h2 a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .eintrag-text h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } }
.eintrag-text p { margin-top: 14px; }
.eintrag-bild { grid-column: 10 / -1; }
.eintrag-bild img { aspect-ratio: 3 / 4; }
.schritte { margin: 16px 0 0; padding-left: 1.4em; }
.schritte li { padding-left: 6px; margin-top: 8px; }
.schritte li::marker { font-family: var(--schmal); font-weight: 600; color: var(--eisen-text); }
.eintrag-hinweis { margin-top: 20px !important; padding: 12px 16px; background: var(--grund-2); color: var(--graphit); }


/* 12  KONTAKT UND FORMULAR ================================================= */

.kontakt { padding-bottom: var(--sektion); row-gap: 56px; align-items: start; }
.formular-bereich { grid-column: 1 / span 7; }
.formular-intro { margin-top: 16px; max-width: 34em; }
.kontakt-info { grid-column: 9 / -1; border-top: 1px solid var(--linie-stark); }
.kontakt-bild { margin-top: 32px; }
.kontakt-bild img { aspect-ratio: 4 / 3; }
.kontakt-block { padding: 22px 0 24px; border-bottom: 1px solid var(--linie); }
.kontakt-block h3.sf-label { margin-top: 0; }
.kontakt-block h3.sf-label ~ h3.sf-label { margin-top: 16px; }
.kontakt-block p { color: var(--graphit); font-size: 1.0625rem; }
.kontakt-block p + p { margin-top: 10px; }
.kontakt-block a { text-underline-offset: 0.2em; }
.kontakt-tel a { font-family: var(--schmal); font-weight: 600; font-size: 2rem; line-height: 1.1; text-decoration: none; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .kontakt-tel a:hover { color: var(--eisen-text); } }
.zeiten > div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font-size: 1.0625rem; }
.zeiten dt { color: var(--graphit-2); }
.zeiten dd { color: var(--graphit); text-align: right; }
.kontakt-block .klein { margin-top: 10px; color: var(--graphit-2); }
.strich-liste { margin: 0; }
.strich-liste li { position: relative; padding-left: 20px; margin-top: 4px; color: var(--graphit); font-size: 1.0625rem; }
.strich-liste li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--eisen); }
.extern { color: var(--graphit); }

.formular { margin-top: 32px; display: grid; gap: 24px; }
.feld { display: grid; gap: 8px; }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.feld label { font-weight: 500; color: var(--graphit); font-size: 1rem; }
.pflicht { color: var(--eisen-text); }
.optional { font-weight: 400; color: var(--graphit-3); font-size: 0.9375rem; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--feld); color: var(--graphit);
  border: 1px solid var(--graphit-3); border-radius: 0;
  font-size: 1rem; line-height: 1.4;
  transition: border-color var(--kurz) var(--ease);
}
.feld textarea { resize: vertical; min-height: 160px; }
.feld select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--graphit) 50%), linear-gradient(-45deg, transparent 50%, var(--graphit) 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--eisen); outline-offset: 0; border-color: var(--graphit); }
@media (hover: hover) and (pointer: fine) { .feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--graphit); } }
.feld [aria-invalid="true"] { border-color: var(--eisen-text); border-width: 2px; padding: 11px 13px; }
.feld-wahl { border: 0; margin: 0; padding: 0; min-width: 0; }
.feld-wahl legend { padding: 0; margin-bottom: 8px; font-weight: 500; color: var(--graphit); font-size: 1rem; }
.wahl { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; font-weight: 400 !important; cursor: pointer; }
.wahl input { flex: none; width: 24px; height: 24px; min-height: 0; margin: 0; padding: 0; accent-color: var(--graphit); }
.feld-hilfe { max-width: 38em; font-size: var(--t-klein); color: var(--graphit-2); line-height: 1.5; }
.feld-fehler { font-size: 0.9375rem; color: var(--eisen-text); font-weight: 500; }
.feld-fehler:empty { display: none; }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular-hinweis { font-size: 0.9375rem; color: var(--graphit-2); }
.formular-hinweis a { color: var(--graphit); text-underline-offset: 0.2em; }
.formular-demo { padding: 12px 16px; background: var(--grund-2); color: var(--graphit); font-size: 0.9375rem; }
.formular-ohne-js { padding: 16px; border: 1px solid var(--graphit); color: var(--graphit); }
.formular-senden .knopf { min-width: 16em; justify-content: space-between; }
.formular-status { margin-top: 32px; padding: 28px; border: 1px solid var(--graphit); background: var(--grund); }
.formular-status h3 { font-size: var(--t-m); letter-spacing: -0.012em; }
.formular-status p { margin-top: 12px; color: var(--graphit); max-width: 34em; }
.formular-status .knopf { margin-top: 20px; }
.formular-status:focus { outline: none; }
.formular-status:focus-visible { outline: 2px solid var(--eisen); outline-offset: 3px; }


/* 13  RECHTSTEXTE, 404 ===================================================== */

.rechtstext { padding-top: clamp(40px, 6vw, 96px); padding-bottom: var(--sektion); }
.rechtstext-innen { grid-column: 1 / span 8; }
.rechtstext-innen .lead { margin-top: 20px; }
.rechtstext-innen h2 { margin-top: 48px; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.012em; }
.rechtstext-innen h2 + p, .rechtstext-innen h2 + ul { margin-top: 10px; }
.rechtstext-innen p + p { margin-top: 12px; }
.rechtstext-innen p, .rechtstext-innen li { max-width: var(--lesebreite); }
.rechtstext-innen a { color: var(--graphit); text-underline-offset: 0.2em; }
.rechtstext-demo { margin-top: 32px; padding: 20px 24px 22px; background: var(--grund-2); }
.rechtstext-demo h2 { margin-top: 0; }
.nachweis-liste { margin: 0; }
.nachweis-liste li { padding: 5px 0; border-bottom: 1px solid var(--linie); font-size: 0.9375rem; }
.nachweis-liste li span { font-family: var(--schmal); font-weight: 500; color: var(--graphit); }
.stand { margin-top: 40px !important; font-size: var(--t-klein); color: var(--graphit-3); }
.weg-liste { margin-top: 24px; border-top: 1px solid var(--linie-stark); }
.weg-liste li { border-bottom: 1px solid var(--linie-stark); }
.weg-liste .verweis { min-height: 56px; }


/* 14  FUSSZEILE =============================================================

   Offen und ruhig: Marke, Werkstatt, Kontakt, Seiten, Rechtliches. */

.fuss { background: var(--grund-2); padding-top: clamp(64px, 8vw, 120px); padding-bottom: 32px; }
.fuss-innen { row-gap: 40px; align-items: start; }
.fuss-marke { grid-column: 1 / span 4; }
.fuss-marke p { margin-top: 16px; max-width: 22em; color: var(--graphit-2); }
.marke-fuss .marke-name { font-size: 2.25rem; }
.marke-fuss .dreieck { width: 28px; height: 26px; }
.fuss-spalte:nth-child(2) { grid-column: 5 / span 3; }
.fuss-spalte:nth-child(3) { grid-column: 8 / span 3; }
.fuss-spalte:nth-child(4) { grid-column: 11 / span 2; }
.fuss-spalte p, .fuss-spalte li { color: var(--graphit); font-size: 1rem; line-height: 1.6; }
.fuss-spalte a { color: inherit; text-underline-offset: 0.2em; text-decoration-color: var(--linie-stark); }
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; }
.fuss-spalte li a { display: inline-block; padding: 2px 0; }
@media (pointer: coarse) { .fuss-spalte li a { padding: 10px 0; } }
.fuss-zeiten { margin-top: 12px; color: var(--graphit-2) !important; }
.fuss-zeiten span { display: block; }
.fuss-unten { margin-top: clamp(56px, 7vw, 96px); padding-top: 20px; row-gap: 8px; border-top: 1px solid var(--linie); }
.fuss-unten { align-items: baseline; }
.fuss-unten p, .fuss-recht { font-size: var(--t-klein); color: var(--graphit-3); }
.fuss-zeile { grid-column: 1 / span 4; }
.fuss-recht { grid-column: 5 / span 3; }
.fuss-recht ul { display: flex; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.fuss-recht a { display: inline-block; padding: 4px 0; color: var(--graphit-2); text-underline-offset: 0.2em; }
@media (pointer: coarse) { .fuss-recht a { padding: 12px 0; } }
.fuss-demo { grid-column: 9 / -1; text-align: right; }
.fuss-demo a { color: var(--graphit-2); text-underline-offset: 0.2em; }


/* 15  ZEICHNEN ==============================================================

   Die Werkzeichnung und die Maßkette im Ablauf ziehen sich einmal auf, wenn
   man sie erreicht. Maßlinien an Fotos stehen einfach da. Versteckt wird nur, wenn js/einsatz.js läuft und die Klasse
   .zeichnen-bereit gesetzt hat. Selbst dann bleibt die graue Linie bzw. die
   Vorzeichnung sichtbar; es fehlt höchstens die Eisen- oder Graphitlinie
   darüber. Ohne JavaScript steht alles fertig da. */

.mass-linie { transition: transform var(--lang) var(--ease); }
.zeichnen-bereit .ablauf-dauer[data-zeichnen]:not(.ist-da) .mass-linie { transform: scaleX(0); }
.ablauf-schritt:nth-child(2) .mass-linie { transition-delay: 150ms; }
.ablauf-schritt:nth-child(3) .mass-linie { transition-delay: 300ms; }
.ablauf-schritt:nth-child(4) .mass-linie { transition-delay: 450ms; }

.zeichnung .z-rein line, .zeichnung .z-rein polygon, .zeichnung .z-rein polyline, .zeichnung .z-rein circle {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1400ms var(--ease);
}
.zeichnung .z-d line, .zeichnung .z-d polygon, .zeichnung .z-d polyline, .zeichnung .z-d circle { transition-delay: 450ms; }
.zeichnung .z-ma line { transition-delay: 800ms; }
.zeichnung .z-verdeckt { transition: opacity 600ms linear 1100ms; }
.zeichnen-bereit .plan-blatt:not(.ist-da) .z-rein line,
.zeichnen-bereit .plan-blatt:not(.ist-da) .z-rein polygon,
.zeichnen-bereit .plan-blatt:not(.ist-da) .z-rein polyline,
.zeichnen-bereit .plan-blatt:not(.ist-da) .z-rein circle { stroke-dashoffset: 1; }
.zeichnen-bereit .plan-blatt:not(.ist-da) .z-verdeckt { opacity: 0.35; }

/* 16  AUFMASS: Startanimation der Startseite (js/aufmass.js) ===============

   Die Maßlinie über die volle Fensterbreite entsteht nur mit JavaScript und
   blendet sich nach dem Aufmaß aus.
   aufmass-voll setzt das Kopfskript vor dem ersten Bild: Überschrift und
   Foto stehen da, nur als Vorzeichnung (grau). Text und Knöpfe darunter sind
   von Anfang an normal, damit nichts deaktiviert wirkt. aufmass-lauf legt die
   Übergänge fest. Nichts ist je unsichtbar. */

.aufmass {
  position: absolute; left: 0; right: 0; top: clamp(12px, 1.6vw, 28px);
  height: 34px;
  color: var(--graphit-3);
  font-family: var(--schmal); font-weight: 500; font-size: 0.9375rem; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 700ms var(--ease);
}
/* Nach dem Aufmaß tritt die Linie zurück; sie kommt wieder, solange man das
   Fenster breiter oder schmäler zieht. So bleibt oben keine Dauer-Leiste. */
.aufmass.ist-weg { opacity: 0; }
.aufmass > span { position: absolute; }
.am-hilfe { top: 4px; bottom: 3px; width: 1px; background: currentColor; transform-origin: 50% 0; }
.am-hilfe.am-links { left: 0; }
.am-hilfe.am-rechts { right: 0; }
.am-linie {
  left: 0; right: 0; bottom: 9px; height: 1.5px;
  background: var(--eisen); transform-origin: 0 50%;
  transition: background-color var(--lang) var(--ease);
}
.aufmass.ist-gemessen .am-linie { background: currentColor; }
.aufmass.ist-gemessen.ist-am-messen .am-linie { background: var(--eisen); transition-duration: var(--kurz); }
.am-strich {
  bottom: calc(9px - 0.25px); width: 14px; height: 1.5px;
  background: currentColor; transform: rotate(-45deg);
}
.am-strich.am-links { left: -7px; }
.am-strich.am-rechts { right: -7px; }
.am-text { left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap; font-size: 1rem; }
.am-wert { color: var(--eisen-text); font-weight: 600; }

/* Eckmarken: rahmen zuerst das Fenster ein und wandern dann zum Foto
   (js/aufmass.js). Endlage und Stärke gleich wie die gezeichneten Marken
   von .eck, damit der Wechsel am Ende nicht springt. */
.am-ecken { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.am-ecke {
  position: absolute; width: var(--am-gross); height: var(--am-gross);
  border: 0 solid var(--eisen); box-sizing: border-box;
}
.am-ol { left: var(--am-rand); top: var(--am-rand); border-top-width: 2px; border-left-width: 2px; transform-origin: 0 0; }
.am-or { right: var(--am-rand); top: var(--am-rand); border-top-width: 2px; border-right-width: 2px; transform-origin: 100% 0; }
.am-ul { left: var(--am-rand); bottom: var(--am-rand); border-bottom-width: 2px; border-left-width: 2px; transform-origin: 0 100%; }
.am-ur { right: var(--am-rand); bottom: var(--am-rand); border-bottom-width: 2px; border-right-width: 2px; transform-origin: 100% 100%; }

.aufmass-voll .start-text .hero-satz { color: var(--graphit-3); }
.aufmass-voll .start-bild .bildzeile { opacity: 0.3; }
.aufmass-voll .start-bild img { filter: grayscale(1) contrast(0.92); }
.aufmass-voll .start-bild .eck,
.aufmass-ecken .start-bild .eck { --eck-c: transparent; }

.aufmass-lauf .start-text .hero-satz { transition: color 420ms var(--ease); }
.aufmass-lauf .start-bild img { transition: filter 640ms var(--ease) 60ms; }
.aufmass-lauf .start-bild .bildzeile { transition: opacity 420ms var(--ease) 260ms; }
.aufmass-sofort .start-kopf,
.aufmass-sofort .start-kopf * { transition: none !important; }


/* 17  BREITEN, BEWEGUNG REDUZIEREN, DRUCK ================================== */

@media (max-width: 1099px) {
  .start-text { grid-column: 1 / -1; }
  .start-bild { grid-column: 1 / -1; max-width: 760px; }
  .start-bild img { height: auto; aspect-ratio: 3 / 2; }
  .start-text { padding-bottom: 0; }
  .werkindex-kopf { grid-column: 1 / -1; }
  .werkindex-liste { grid-column: 1 / -1; }
  .prinzip-text, .prinzip-plan { grid-column: 1 / -1; }
  .prinzip-text { max-width: 40em; }
  .auswahl-gross { grid-column: 1 / -1; margin-left: calc(-1 * var(--aussen)); margin-right: calc(-1 * var(--aussen)); }
  .auswahl-gross img { aspect-ratio: 4 / 3; }
  .auswahl-rechts { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--luecke); }
  .ablauf-kette { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .ablauf-schritt .ablauf-dauer::after {
    background:
      linear-gradient(currentColor 0 0) 7px 0 / 1px calc(100% - 3px) no-repeat,
      linear-gradient(currentColor 0 0) calc(100% - 7px) 0 / 1px calc(100% - 3px) no-repeat,
      linear-gradient(45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) 0 calc(100% - 3px) / 14px 14px no-repeat,
      linear-gradient(45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) 100% calc(100% - 3px) / 14px 14px no-repeat;
  }
  .ablauf-schritt .ablauf-dauer { margin-right: 32px; }
  .leistung-bild, .leistung.ist-rechts .leistung-bild { grid-column: 1 / span 8; grid-row: auto; position: static; }
  .leistung-text, .leistung.ist-rechts .leistung-text { grid-column: 1 / -1; grid-row: auto; }
  .leistung-bild img { aspect-ratio: 3 / 2; }
  .auftrag-bild, .auftrag.ist-rechts .auftrag-bild,
  .auftrag-bild.ist-hoch, .auftrag.ist-rechts .auftrag-bild.ist-hoch { grid-column: 1 / span 9; grid-row: auto; }
  .auftrag-bild.ist-hoch img { aspect-ratio: 4 / 5; }
  .auftrag-text, .auftrag.ist-rechts .auftrag-text { grid-column: 1 / span 10; grid-row: auto; }
  .chronik-kopf { grid-column: 1 / -1; position: static; }
  .chronik-liste { grid-column: 1 / -1; }
  .regeln h2, .regeln-liste { grid-column: 1 / -1; }
  .person-gross { grid-column: 1 / span 6; }
  .person-klein:nth-of-type(2) { grid-column: 7 / -1; }
  .person-klein:nth-of-type(3) { grid-column: 7 / -1; }
  .team-kopf, .team-rest, .team-hinweis { grid-column: 1 / -1; }
  .formular-bereich, .kontakt-info { grid-column: 1 / -1; }
  .kontakt-info { max-width: 40em; }
  .eintrag-meta { grid-column: 1 / span 3; }
  .eintrag-text { grid-column: 4 / -1; }
  .eintrag-bild { grid-column: 4 / span 6; }
  .fuss-marke { grid-column: 1 / -1; }
  .fuss-spalte:nth-child(2) { grid-column: 1 / span 4; }
  .fuss-spalte:nth-child(3) { grid-column: 5 / span 4; }
  .fuss-spalte:nth-child(4) { grid-column: 9 / span 4; }
  .fuss-zeile { grid-column: 1 / span 5; }
  .fuss-recht { grid-column: 6 / span 3; }
  .fuss-demo { grid-column: 1 / -1; text-align: left; }
  .material-spalte:first-child, .material-spalte:last-child { grid-column: 1 / -1; }
  .material-bild img { aspect-ratio: 16 / 9; }
  .rechtstext-innen, .hinweis-block > * { grid-column: 1 / span 11; }
}

@media (max-width: 759px) {
  .start-bild { max-width: none; }
  .werkindex-zeile { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 20px 0; }
  .wi-nutzen { grid-column: 1 / -1; grid-row: 2; }
  .wi-daten { grid-column: 1 / -1; grid-row: 3; flex-direction: row; gap: 12px; align-items: baseline; }
  .werkindex-zeile .pfeil { grid-column: 2; grid-row: 1; }
  .plan-breit { display: none; }
  .plan-schmal { display: block; }
  .plan-blatt { margin-inline: calc(-1 * var(--aussen) + 4px); }
  .auswahl-rechts { grid-template-columns: 1fr; gap: 48px; }
  .ablauf-kette { grid-template-columns: 1fr; row-gap: 40px; }
  .ablauf-schritt > h3, .ablauf-schritt > p { padding-right: 0; }
  .ablauf-schritt .ablauf-dauer { margin-right: 0; }
  .anruf-text { grid-column: 1 / -1; }
  .ablauf-kopf { grid-column: 1 / -1; }
  .fussnote span { grid-column: 1 / -1; }
  .seitenkopf h1, .seitenkopf-lead { grid-column: 1 / -1; }
  .sprungliste ul { grid-template-columns: 1fr 1fr; }
  .leistung-bild, .leistung.ist-rechts .leistung-bild { grid-column: 1 / -1; }
  .datenblatt > div { grid-template-columns: 1fr; gap: 2px; }
  .auftrag-bild, .auftrag.ist-rechts .auftrag-bild,
  .auftrag-bild.ist-hoch, .auftrag.ist-rechts .auftrag-bild.ist-hoch { grid-column: 1 / -1; }
  .auftrag-bild.ist-hoch img { aspect-ratio: 4 / 5; }
  .auftrag-text, .auftrag.ist-rechts .auftrag-text { grid-column: 1 / -1; }

  /* Werkliste: aus der Tabelle werden Karteikarten */
  .werkliste-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .werkliste-tabelle, .werkliste-tabelle tbody, .werkliste-tabelle tr, .werkliste-tabelle th, .werkliste-tabelle td { display: block; }
  .werkliste-tabelle tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .werkliste-tabelle tbody th, .werkliste-tabelle td { padding: 0; border: 0; font-size: 0.9375rem; }
  .werkliste-tabelle .wl-nr { grid-row: 1 / span 4; }
  .werkliste-tabelle tbody th { font-size: 1rem; }
  .werkliste-tabelle td:not(.wl-nr) { color: var(--graphit-2); }
  .wl-jahr { text-align: left !important; }

  .regeln-liste { grid-template-columns: 1fr; }
  .person-gross, .person-klein:nth-of-type(2), .person-klein:nth-of-type(3) { grid-column: 1 / -1; }
  .person-klein img { aspect-ratio: 4 / 5; }
  .zeichen-bild { grid-column: 1 / span 3; }
  .zeichen-text { grid-column: 1 / -1; }
  .eintrag { row-gap: 16px; }
  .eintrag-meta, .eintrag-text, .eintrag-bild { grid-column: 1 / -1; }
  .eintrag-meta { flex-direction: row; gap: 12px; align-items: baseline; }
  .eintrag-bild { max-width: 420px; }
  .feld-paar { grid-template-columns: 1fr; }
  .formular-senden .knopf { width: 100%; min-width: 0; }
  .fuss-spalte:nth-child(2), .fuss-spalte:nth-child(3) { grid-column: 1 / -1; }
  .fuss-spalte:nth-child(4) { grid-column: 1 / -1; }
  .fuss-zeile, .fuss-recht, .fuss-demo { grid-column: 1 / -1; }
  .material-bild img { aspect-ratio: 4 / 3; }
  .rechtstext-innen, .hinweis-block > * { grid-column: 1 / -1; }
  .bild-breit img { aspect-ratio: 4 / 3; }
  .blatt.mit-mass-h { padding-right: 40px; }
}

@media (max-width: 420px) {
  .preistabelle td { white-space: normal; }
  .preistabelle th { padding-right: 12px; }
  .sprungliste ul { grid-template-columns: 1fr; }
  .knopf-reihe .knopf { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; }
}

@media print {
  .demo-leiste, .aufmass, .kopf-nav, .menue-knopf, .kopf-tel-mobil, .anruf .knopf-reihe, .formular { display: none !important; }
  .kopf { position: static; }
  body { background: #fff; color: #000; }
  .mass-linie { transform: none !important; }
  .zeichnung .z-rein * { stroke-dashoffset: 0 !important; }
}