/* ══════════════════════════════════════════════════════════════════════
   ZUSATZSEITEN FASTTUNING REUTLINGEN — gemeinsames Stylesheet

   Gilt fuer `dellentechnik.html` und `sattlerei.html`.

   HERKUNFT: Tokens, Kante, Kopf, Blatt-Gliederung, Anschrift, Fuss und
   Werksmarke sind woertlich aus `_System-Tuning/rechtliches.html`
   uebernommen — der einzigen Unterseite, die es im System schon gab. Das
   ist Absicht: Diese Seiten sollen als dieselbe Website erkennbar sein,
   und ein zweites Farb- oder Abstandssystem waere genau der Bruch, den
   niemand benennen kann, aber jeder sieht.

   NEU ist nur, was es dort nicht gab: der Einstieg, die Kennzeilen, die
   Reflexionsgrafik, die Naht, das Formular und die Bildplaetze.

   WICHTIG — DIESE DATEI GEHOERT NICHT ZUM GEMEINSAMEN SYSTEM.
   Sie liegt im Kundenordner von Reutlingen. Wurmsham bekommt sie nicht.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --grund:#08090B;
  --tief:#0D0F13;
  --text:#E8EBEE;
  --weich:#9AA1A9;
  --leise:#666D75;
  --linie:#1E2329;
  --licht:#E8A33C;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'Martian Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --takt:220ms; --kurve:cubic-bezier(.4,0,.15,1);
  --rand:clamp(20px,5vw,84px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
html,body{margin:0;background:var(--grund);}
body{color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;}

/* Dieselbe senkrechte Linie wie auf Haupt- und Rechtsseite — sie ist das,
   was alle Seiten als eine Seite erkennbar macht. */
.kante{position:fixed;top:0;bottom:0;left:calc(var(--rand) - 24px);width:1px;
  background:linear-gradient(180deg,transparent,var(--linie) 12%,
    var(--linie) 88%,transparent);pointer-events:none;z-index:1;}
@media (max-width:900px){ .kante{left:calc(var(--rand) - 10px);} }

/* ══ DER KOPF — DIE GLASPILLE ═══════════════════════════════════════
   Vorgabe Dennis, 31.08.2026: „glaspille". Befund davor: „der header
   erscheint in den beiden seiten auch nicht."

   Bis dahin trugen diese Seiten den schlichten Kopf von
   `rechtliches.html` — Logo links, „Zurueck zur Seite" rechts. Fuer ein
   Impressum ist das richtig; eine Leistungsseite wirkte damit wie ein
   Anhang, und man kam von dort nirgendwo hin.

   Die Rezeptur ist woertlich aus `seite-standort.html` uebernommen:
   dieselben fuenf Schattenebenen, dieselbe Lichtkante, dasselbe
   Blattmenue. Der gemeinsame Quelltext ist dabei NICHT angefasst — hier
   steht eine Kopie der Fassung, keine Aenderung am Original.

   DREI UNTERSCHIEDE, alle mit Grund:

   1. KEIN EINFAHREN. Auf der Hauptseite blendet sich die Pille beim
      Scrollen ein (`data-da`), weil sie sonst ueber dem Einstiegsbild
      laege. Hier gibt es kein Einstiegsbild — der Kopf ist einfach da.

   2. DAS MENUE HEISST `.menueblatt`. Auf der Hauptseite heisst es
      `.blatt` — und genauso heissen HIER die Inhaltsabschnitte. Zwei
      verschiedene Dinge unter einem Namen im selben Stylesheet waeren
      ein Fehler, der beim ersten Zusammentreffen zuschlaegt.

   3. KEINE SIEBEN TUNING-LEISTUNGEN IN DER NAVIGATION. Sie sind auf der
      Hauptseite Scrollzonen, keine Adressen — von hier aus liesse sich
      keine davon anspringen. Sieben Verweise, die alle auf derselben
      Stelle landen, waeren eine Luege. Stattdessen fuehrt ein Eintrag
      „Tuning & Setup" auf die Hauptseite. */
:root{
  --kopf-oben:14px;
  --kopf-rand:clamp(12px,3vw,30px);
  --kopf-max:1180px;
  --kopf-warm:232,163,60;
}

.kopf{position:fixed;top:var(--kopf-oben);left:0;right:0;z-index:80;
  display:flex;justify-content:center;pointer-events:none;
  padding-inline:var(--kopf-rand);}

.glas{pointer-events:auto;display:flex;align-items:center;
  gap:clamp(8px,1.4vw,18px);
  width:100%;max-width:var(--kopf-max);
  padding:5px 6px 5px 15px;border-radius:100px;position:relative;
  background:rgba(148,170,192,.075);
  -webkit-backdrop-filter:blur(40px) saturate(185%) brightness(1.22);
          backdrop-filter:blur(40px) saturate(185%) brightness(1.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.40),
    0 0 0 .5px rgba(255,255,255,.085),
    0 2px 6px -2px rgba(0,0,0,.55),
    0 16px 34px -18px rgba(0,0,0,.68),
    0 22px 46px -22px rgba(var(--kopf-warm),.22);}
.glas::before{content:'';position:absolute;left:9%;right:9%;top:0;height:1px;
  border-radius:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),
    rgba(255,255,255,.55) 26%,rgba(255,255,255,.55) 74%,rgba(255,255,255,0));}
.glas::after{content:'';position:absolute;inset:1px 1px auto 1px;height:44%;
  border-radius:100px 100px 0 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,0));}
.glas > *{position:relative;z-index:1;}
/* Ohne Unschaerfe traegt nur die Flaeche. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glas{background:#161B22;}
}

.logo{display:flex;align-items:center;flex:0 0 auto;color:#CBD0D6;
  line-height:0;border-bottom:0;
  transition:color var(--takt) var(--kurve);}
.logo:hover{color:var(--text);}
.logo svg{display:block;height:17px;width:auto;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}
.logo:focus-visible{outline:1px solid var(--licht);outline-offset:4px;
  border-radius:3px;}

.nav{display:flex;gap:1px;margin-left:auto;}
.nav a{position:relative;text-decoration:none;font-family:var(--sans);
  font-size:12.5px;font-weight:500;letter-spacing:-.005em;
  color:#98A0A9;padding:7px 11px;border-radius:100px;white-space:nowrap;
  border-bottom:0;transition:color 200ms ease;}
.nav a::before{content:'';position:absolute;inset:0;border-radius:100px;
  background:rgba(255,255,255,.08);opacity:0;transform:scale(.94);
  transition:opacity 200ms var(--kurve),transform 200ms var(--kurve);}
.nav a:hover::before,.nav a:focus-visible::before{opacity:1;transform:none;}
.nav a > span{position:relative;}
.nav a:hover,.nav a:focus-visible{color:var(--text);}
/* Wo man gerade steht: das Werkstattlicht, sonst nichts. */
.nav a[aria-current="page"]{color:#F0D9B4;}
.nav a[aria-current="page"]::before{opacity:1;transform:none;
  background:rgba(232,163,60,.13);}

.kopf-tel{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:34px;height:34px;border-radius:100px;
  color:#B4BBC3;background:rgba(255,255,255,.06);border-bottom:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  transition:background 200ms var(--kurve),color 200ms var(--kurve);}
.kopf-tel svg{width:16px;height:16px;display:block;fill:currentColor;}
.kopf-tel:hover{background:rgba(255,255,255,.13);color:var(--text);}
.kopf-tel:focus-visible{outline:1px solid var(--licht);outline-offset:2px;}

.pc{display:inline-flex;align-items:center;gap:.7rem;
  background:rgba(255,255,255,.05);color:#fff;border-radius:100px;
  border:1px solid rgba(255,255,255,.42);border-bottom-color:rgba(255,255,255,.42);
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.005em;
  padding:12px 21px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background 200ms var(--kurve),border-color 200ms var(--kurve),
             transform 200ms var(--kurve);}
.pc:hover{background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.72);transform:translateY(-1px);}
.pc:active{transform:none;}
.pc:focus-visible{outline:2px solid var(--licht);outline-offset:3px;}
.pc-kopf{flex:0 0 auto;padding:10px 17px;font-size:13px;}

/* ── Der Menueknopf ─────────────────────────────────────────────── */
.menue-auf{display:none;width:36px;height:36px;flex:0 0 auto;
  background:none;border:0;cursor:pointer;padding:0;position:relative;
  border-radius:100px;transition:background 200ms ease;}
.menue-auf:hover{background:rgba(255,255,255,.08);}
.menue-auf:focus-visible{outline:1px solid var(--licht);outline-offset:2px;}
.menue-auf span{position:absolute;left:50%;margin-left:-8px;
  width:16px;height:1.6px;border-radius:2px;background:#C8CDD3;
  transition:transform 300ms var(--kurve);}
.menue-auf span:first-child{top:50%;margin-top:-3.6px;}
.menue-auf span:last-child{top:50%;margin-top:2px;}
.menue-auf[aria-expanded="true"] span:first-child{transform:translateY(2.8px) rotate(45deg);}
.menue-auf[aria-expanded="true"] span:last-child{transform:translateY(-2.8px) rotate(-45deg);}

/* ── Das Blattmenue ─────────────────────────────────────────────── */
.menueblatt{position:fixed;
  top:calc(var(--kopf-oben) + 58px);
  left:var(--kopf-rand);right:var(--kopf-rand);z-index:79;
  border-radius:22px;padding:8px;
  background:rgba(18,22,28,.86);
  -webkit-backdrop-filter:blur(34px) saturate(160%);
          backdrop-filter:blur(34px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),
             0 0 0 .5px rgba(255,255,255,.08),
             0 22px 50px -18px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;transform:translateY(-12px) scale(.985);
  transition:opacity 240ms var(--kurve),transform 320ms var(--kurve),
             visibility 320ms;}
.menueblatt[data-offen="1"]{opacity:1;visibility:visible;transform:none;}
.menueblatt nav{display:grid;}
.menueblatt a{text-decoration:none;font-family:var(--sans);font-size:15px;
  font-weight:600;letter-spacing:-.01em;color:#B4BBC3;border-bottom:0;
  padding:12px 14px;border-radius:14px;display:flex;align-items:center;
  gap:11px;transition:background 200ms var(--kurve),color 200ms var(--kurve);}
.menueblatt a:hover{background:rgba(255,255,255,.07);color:var(--text);}
.menueblatt a[aria-current="page"]{color:#F0D9B4;background:rgba(232,163,60,.11);}

@media (max-width:1080px){
  .nav{display:none;}
  .kopf-tel{margin-left:auto;}
  .menue-auf{display:block;}
}
@media (min-width:1081px){
  .menueblatt{display:none;}
}
@media (max-width:620px){
  .glas{padding:4px 4px 4px 12px;gap:6px;}
  .logo svg{height:15px;}
  .pc-kopf{padding:9px 13px;font-size:12px;}
  .pc-kopf .lang{display:none;}
  .kopf-tel{width:31px;height:31px;}
  .menueblatt{top:calc(var(--kopf-oben) + 52px);}
}
@media (orientation:portrait) and (max-width:900px){
  :root{--kopf-oben:8px;}
  .glas{padding:3px 4px 3px 12px;}
}
@media (prefers-reduced-motion:reduce){
  .menueblatt,.menue-auf span,.pc{transition:none;}
}

/* ── Grundraster ──────────────────────────────────────────────────── */
/* `overflow-x:clip` ist kein Schoenheitsfehler-Pflaster, sondern die
   Bedingung dafuer, dass die Trennlinien ueberhaupt so aussehen duerfen:
   Sie ragen mit `right:-40%` absichtlich ueber die Spalte hinaus und
   verlieren sich im Leeren. Auf breiten Schirmen ist rechts davon Platz;
   auf dem Telefon schoben sie die Seite um 121 px auf (gemessen am
   28.08.2026, 393 px). `clip` schneidet sie am Rand ab, ohne eine
   Scrollstrecke zu erzeugen — anders als `hidden`, das eine Scrollbox
   anlegt und `position:fixed` darin einfangen wuerde. */
/* Zwei Zeilen, nicht eine: `clip` kennt Safari erst ab Version 16. Wer
   mit einem aelteren iPhone kommt, bekommt `hidden` — das legt zwar eine
   Scrollbox an, verhindert den Ueberlauf aber genauso. Neuere Browser
   ueberschreiben es mit `clip` und sparen sich die Box. */
/* Das Polster oben traegt die feste Kopfpille: Sie misst rund 49 px und
   sitzt 14 px unter dem Rand. Ohne diesen Abstand laege die erste
   Ueberschrift darunter. */
main{position:relative;z-index:2;
  overflow-x:hidden;
  overflow-x:clip;
  padding:clamp(96px,13vh,132px) var(--rand) clamp(60px,9vh,110px);}
/* ══ DIE ZWEI ACHSEN ═══════════════════════════════════════════════
   Vorgabe Dennis, 28.08.2026: „beschriftung links u inhalt rechts".

   ERST GEMESSEN, DANN GEBAUT. Einspaltig standen bei 1512 px rechts
   604 px leer (40 %), bei 1920 px sogar 1004 px (52 %) — Weissraum, der
   nichts traegt, weil er nur auf einer Seite liegt.

   Die Zeile darf dabei NICHT laenger werden: Sie misst 64 Zeichen, und
   das ist genau die Breite, bei der das Auge den Zeilensprung noch
   sicher findet. Wer die Spalte einfach breiter zieht, landet bei rund
   110 Zeichen — die Seite sieht voller aus und liest sich schlechter.

   Deshalb zwei Achsen: Die Rubrik wandert in eine eigene schmale
   Spalte, der Inhalt bekommt mehr Raum fuer Raster, Grafik und
   Formular, waehrend die Absaetze bei ihren 62ch bleiben (siehe `p`).
   Rest-Leerraum bei 1512 px danach: rund 19 % statt 40 %. */
:root{
  --marke:16rem;      /* die Beschriftungsspalte */
  --spalt:4rem;       /* zwischen den Achsen — hier steht die Leuchte */
  --inhalt:52rem;     /* der Inhalt; der FLIESSTEXT bleibt bei 62ch */
}
.spalte{max-width:calc(var(--marke) + var(--spalt) + var(--inhalt));}

/* Die Zuordnung ohne zusaetzliche Verpackung: Alles landet in Spalte 2,
   nur die Rubrik in Spalte 1 — und zwar auf derselben Zeile wie die
   Ueberschrift. Die Ueberschrift bleibt damit gross; in einer 16 rem
   schmalen Spalte waere sie zu einem Turm aus Silben geworden. */
.blatt,.einstieg{
  display:grid;
  grid-template-columns:var(--marke) minmax(0,var(--inhalt));
  column-gap:var(--spalt);
  align-content:start;}
/* ══ ALLE VIER REGELN AUF GLEICHER SPEZIFITAET (0,2,0) ═══════════════
   Hier lag der Fehler, den Dennis am 31.08.2026 auf der Live-Seite sah:
   „sind da texte hinter den ueberschriften".

   Die Sammelregel hiess `.blatt > *:not(.leuchte):not(.naht)` und wog
   damit 0,3,0 — SCHWERER als die Ausnahme `.blatt > .nummer` mit 0,2,0.
   Also gewann `grid-column:2` auch fuer die Rubrik: Sie landete in
   Spalte 2, Zeile 1 — derselben Zelle wie die Ueberschrift, und lag
   hinter ihr. Beim Einstieg fiel es nicht auf, weil dort noch die
   gleich schwere Fassung ohne `:not(.naht)` stand.

   Jetzt wiegen alle vier Regeln gleich viel, und es entscheidet die
   Reihenfolge — so, wie es gedacht war. Leuchte und Naht bekommen ihre
   Zuweisung ausdruecklich zurueckgenommen statt sie per `:not` zu
   umgehen: Ein absolut positioniertes Grid-Kind MIT fester Platzierung
   wird relativ zu seiner ZELLE positioniert, nicht zum Abschnitt — mit
   `grid-column:2` lief die Leiste quer durch die Ueberschrift (gemessen
   am 28.08.2026: 684 px statt 364 px). Ohne definite Platzierung ist
   der Bezug die Polsterkante des Abschnitts. */
.blatt > *,.einstieg > *{grid-column:2;min-width:0;}
.blatt > h2,.einstieg > h1{grid-row:1;}
.blatt > .nummer,.einstieg > .nummer{grid-column:1;grid-row:1;}
.blatt > .leuchte,.einstieg > .leuchte,
.blatt > .naht{grid-column:auto;grid-row:auto;}

.blatt{padding-top:clamp(38px,6vh,66px);position:relative;}
.blatt + .blatt{margin-top:clamp(54px,8vh,96px);}
/* Die Linie endet nicht hart, sondern verliert sich nach rechts. */
.blatt::before{content:'';position:absolute;left:0;right:-40%;top:0;height:1px;
  background:linear-gradient(90deg,var(--linie) 0,var(--linie) 42%,
    rgba(30,35,41,.35) 70%,transparent 100%);}

/* In der eigenen Spalte braucht die Rubrik keinen Abstand nach unten
   mehr — sie steht neben der Ueberschrift, nicht ueber ihr. Die
   optische Grundlinie stellt das Polster oben her. */
.nummer{display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--leise);
  margin:0;padding-top:.55em;line-height:1.7;
  text-wrap:balance;}

h1{margin:0 0 1.5rem;font-size:clamp(34px,6.2vw,68px);font-weight:700;
  letter-spacing:-.035em;line-height:1.02;text-wrap:balance;
  white-space:pre-line;max-width:15ch;}
h2{margin:0 0 1.1rem;font-size:clamp(21px,2.7vw,32px);font-weight:700;
  letter-spacing:-.025em;line-height:1.14;white-space:pre-line;
  text-wrap:balance;}
h3{margin:1.9rem 0 .7rem;font-family:var(--mono);font-size:10px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--weich);}
p{margin:0 0 1.05rem;font-size:15.5px;line-height:1.75;color:var(--weich);
  max-width:62ch;}
p:last-child{margin-bottom:0;}
a{color:var(--text);text-decoration:none;border-bottom:1px solid #2E353E;
  transition:border-color var(--takt) var(--kurve);overflow-wrap:anywhere;}
a:hover{border-bottom-color:var(--licht);}
/* Die Unterkante gehoert an Verweise IM FLIESSTEXT — dort ersetzt sie
   die Unterstreichung. Elemente, die ihre eigene Form haben, bekommen
   sie nicht: Unter dem Logo sah sie aus wie ein Fehler im Zeichen.
   (Gefunden beim Ansehen des Fusses am 28.08.2026.) */
.zeichen,.zurueck,.logo{border-bottom:0;}

/* Das Zeichen im Fuss. Im Kopf traegt es `.logo` und ist heller; hier
   unten steht es leiser, wie auf der Haupt- und der Rechtsseite. */
.fuss .zeichen{display:block;color:#8E959D;line-height:0;width:fit-content;
  transition:color var(--takt) var(--kurve);}
.fuss .zeichen:hover{color:#C6CCD3;}
.fuss .zeichen svg{display:block;height:16px;width:auto;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}

/* ══ DIE LICHTLEISTE ═══════════════════════════════════════════════
   Vorgabe Dennis, 28.08.2026: „setz das aber mal visuell um mit
   lichtleisten oder so".

   SIE IST NICHT DEKORATION — das Motiv kommt aus dem Inhalt. Auf der
   Dellenseite steht woertlich, woran der Fachmann eine Delle erkennt:
   an einer LINIENLEUCHTE, deren Spiegelung sich verzieht. Die Leiste
   zwischen den beiden Achsen ist dieselbe Leuchte, einen Schritt
   abstrahiert: eine Werkstattlampe, die angeht, wenn man an den
   Abschnitt herantritt.

   Sie haelt sich an die Farbregel: Die Markenfarbe erscheint auf
   Linien, Akzenten und in Bewegung — nie als Hintergrundflaeche. Das
   hier ist eine Linie von einem Pixel.

   Der Schein laeuft ueber `drop-shadow`, nicht ueber `box-shadow`:
   drop-shadow folgt der Alpha-Form des Verlaufs und laeuft oben und
   unten mit ihm aus. Ein box-shadow haette den Schein rechteckig um
   die Box gelegt — mit sichtbarer Kante dort, wo das Licht laengst
   transparent ist.

   Bewegt wird `transform`, nicht die Position: kein Layout, nur
   Zeichnen. */
.leuchte{position:absolute;top:0;bottom:0;pointer-events:none;
  left:calc(var(--marke) + var(--spalt)/2);
  width:1px;background:var(--linie);
  overflow:hidden;}
.leuchte i{position:absolute;left:-1px;top:0;width:3px;height:210px;
  display:block;border-radius:2px;
  background:linear-gradient(180deg,
    rgba(232,163,60,0)    0%,
    rgba(232,163,60,.95) 20%,
    rgba(232,163,60,.5)  58%,
    rgba(232,163,60,0)  100%);
  filter:drop-shadow(0 0 5px rgba(232,163,60,.45))
         drop-shadow(0 0 15px rgba(232,163,60,.22));
  opacity:0;transform:translateY(-240px);
  transition:transform 1.15s cubic-bezier(.22,.61,.36,1),
             opacity .55s ease;}
.leuchtet .leuchte i{opacity:1;transform:translateY(0);}
/* Ohne Bewegung steht das Licht sofort da — es traegt die Gliederung
   und darf nie fehlen, nur weil eine Animation nicht laufen kann. */
@media (prefers-reduced-motion:reduce){
  .leuchte i{transition:none;opacity:1;transform:none;}
}

/* ── Der Einstieg ─────────────────────────────────────────────────── */
/* Angebot und Ergebnis gehoeren ins erste Bild — das ist die Vorgabe aus
   dem Creative Audit, nicht Geschmack. Deshalb steht hier die Leistung
   im Klartext, nicht eine Haltung. */
.einstieg{padding-bottom:clamp(30px,5vh,54px);position:relative;}
.einstieg .vorspann{font-size:clamp(16px,1.9vw,19px);line-height:1.62;
  color:var(--text);max-width:48ch;font-weight:400;}
.ort-zeile{margin:1.6rem 0 0;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--leise);}

/* ── Kennzeilen ───────────────────────────────────────────────────── */
/* Zwei bis drei Angaben, die den Eingriff technisch festlegen. Dieselbe
   Rolle wie `kenn` auf der Hauptseite: Substanz statt Haltung. */
.kenn{list-style:none;margin:1.7rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:1px;
  background:var(--linie);border:1px solid var(--linie);max-width:34rem;}
.kenn li{background:var(--tief);padding:.82rem 1.1rem;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  line-height:1.6;color:var(--weich);text-transform:uppercase;}

/* ── Vorteilsliste ────────────────────────────────────────────────── */
/* Markus' sechs Punkte. Der Haken ist eine gezeichnete Linie, kein
   Zeichen aus einer Bibliothek — Icons aus Bibliotheken sind im
   Designstandard ausdruecklich ausgeschlossen. */
.vorteile{list-style:none;margin:1.6rem 0 0;padding:0;
  display:grid;gap:.1rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  max-width:56rem;}
.vorteile li{display:flex;align-items:flex-start;gap:.95rem;
  padding:.95rem 0;font-size:15px;line-height:1.55;color:var(--weich);
  border-top:1px solid var(--linie);}
.vorteile .haken{flex:none;width:15px;height:15px;margin-top:.22em;
  stroke:var(--licht);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}

/* ── DIE REFLEXIONSGRAFIK (nur Dellentechnik) ─────────────────────
   Eine Delle sieht man nicht am Blech, sondern an der Spiegelung. Genau
   das zeigt die Grafik — sie ist das Erklaermittel der Seite und der
   Grund, warum diese Seite ohne Foto auskommt: Das Ergebnis ist hier ein
   PRINZIP, und ein Prinzip laesst sich zeichnen. (Bei der Sattlerei ist
   das Ergebnis ein Gegenstand — deshalb steht dort nichts Vergleichbares.)

   Die Linien zeichnet `seiten.js`; hier steht nur, wie sie aussehen. */
/* Fuellt die Inhaltsspalte. Mit den frueheren 44rem stand rechts
   eine Luecke, seit die Spalte 52rem misst. */
.reflexion{margin:2rem 0 0;}
.blech{display:block;width:100%;height:auto;
  background:linear-gradient(168deg,#141821 0%,#0C0E13 52%,#101319 100%);
  border:1px solid var(--linie);border-radius:2px;}
.blech .linie{fill:none;stroke:#7F8B99;stroke-width:1.15;
  stroke-linecap:round;vector-effect:non-scaling-stroke;}
/* Die mittleren Linien tragen das Licht, die aeusseren laufen aus. */
.blech .linie.hell{stroke:#C8D2DC;stroke-width:1.4;}
.blech .linie.matt{stroke:#4A535F;}

.schalter{display:inline-flex;margin:1.4rem 0 0;
  background:var(--linie);border:1px solid var(--linie);gap:1px;}
.schalter button{appearance:none;border:0;cursor:pointer;
  background:var(--tief);color:var(--leise);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:.8rem 1.25rem;min-height:44px;
  transition:color var(--takt) var(--kurve),
             background var(--takt) var(--kurve);}
.schalter button:hover{color:var(--text);}
.schalter button[aria-pressed="true"]{background:rgba(232,163,60,.12);
  color:#F0D9B4;}
.schalter button:focus-visible{outline:1px solid var(--licht);
  outline-offset:-1px;}
.bedienhinweis{margin:.85rem 0 0;font-family:var(--mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--leise);}

/* ── DIE NAHT (nur Sattlerei) ─────────────────────────────────────
   Sattlerhandwerk ist Linie, Kante und Material. Die Steppnaht zieht
   sich als einzige durchgehende Linie durch die Seite und verbindet die
   Abschnitte — sie behauptet kein Ergebnis, sie ist ein Ordnungsmittel. */
/* ERST SENKRECHT GEBAUT, DANN GEMESSEN UND GEDREHT (28.08.2026).
   Senkrecht neben der Spalte sass sie bei left:-1.55rem — und damit
   genau auf der `.kante`, der durchgehenden Linie, die alle Seiten
   dieser Website verbindet. Sie war schlicht unsichtbar. Danebengelegt
   waeren es zwei parallele Linien im Abstand von zehn Pixeln gewesen;
   das sieht nach Fehler aus, nicht nach Absicht.

   Jetzt liegt sie dort, wo eine Naht hingehoert: ZWISCHEN den
   Abschnitten. Eine Naht verbindet zwei Teile — genau das tut die
   Trennlinie. Sie ersetzt `.blatt::before` (siehe `.blatt.genaht`)
   statt mit ihr zu konkurrieren.

   Als CSS-Verlauf, nicht als SVG: Ein SVG mit preserveAspectRatio="none"
   haette die Stichlaenge mit der Breite verzerrt.

   Sie ist von der Spaltenzuweisung ausgenommen — dieselbe Grid-Falle wie
   bei der Leuchte: Mit `grid-column:2` begann sie erst beim Inhalt
   (396 px) statt am linken Rand, waehrend die Trennlinie der Dellenseite
   ueber die volle Breite laeuft. Zwei Seiten, zwei verschiedene Kanten —
   gemessen und behoben am 28.08.2026. */
.blatt.genaht::before{display:none;}
.naht{position:absolute;left:0;right:-40%;top:0;height:2px;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,
    #39424C 0 7px, transparent 7px 16px);
  /* Nach rechts hin laeuft sie aus — wie die Linie, die sie ersetzt. */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 46%,transparent 92%);
          mask-image:linear-gradient(90deg,#000 0,#000 46%,transparent 92%);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s cubic-bezier(.4,0,.15,1);}
.naht.genaeht{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){
  .naht{transform:scaleX(1);transition:none;}
}

/* ── Zwei Wege (nur Sattlerei) ────────────────────────────────────── */
.wege{display:grid;gap:1px;margin:1.8rem 0 0;max-width:52rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  background:var(--linie);border:1px solid var(--linie);}
.wege > div{background:var(--tief);padding:1.5rem 1.5rem 1.7rem;}
.wege h4{margin:0 0 .8rem;font-family:var(--mono);font-size:10px;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:#F0D9B4;}
.wege p{margin:0;font-size:14.5px;line-height:1.7;}

/* ── Umfangsliste ────────────────────────────────────────────────── */
.umfang{list-style:none;margin:1.6rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.5rem;max-width:52ch;}
.umfang li{position:relative;padding-left:1.3rem;font-size:15px;
  line-height:1.7;color:var(--weich);}
.umfang li::before{content:'';position:absolute;left:0;top:.78em;
  width:7px;height:1px;background:#39424C;}

/* ── Der Hinweis mit Kante ────────────────────────────────────────── */
/* Bauform aus rechtliches.html. Hier traegt sie die Einschraenkung —
   was die Methode NICHT kann. Ein Betrieb, der seine Grenze selbst
   nennt, wird glaubwuerdiger, nicht schwaecher. */
.merke{margin:1.7rem 0 0;padding:1rem 0 1rem 1.15rem;
  border-left:2px solid rgba(232,163,60,.45);max-width:58ch;}
.merke p{margin:0;font-size:14px;line-height:1.7;color:var(--leise);}

/* ── Bildplaetze ─────────────────────────────────────────────────
   VORBEREITET, HEUTE LEER. Die Seiten sind am 28.08.2026 ohne Fotos
   gebaut worden (Entscheidung Dennis). Kommen von Markus Bilder echter
   Arbeiten, werden sie hier eingehaengt — die Seite wird dafuer nicht
   umgebaut. Ein leerer Platz erscheint NICHT: `seiten.js` blendet den
   ganzen Abschnitt aus, solange keine Datei da ist. Ein leerer Rahmen
   auf einer Kundenseite waere schlimmer als gar keiner. */
.galerie{display:grid;gap:1px;margin:1.8rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  background:var(--linie);border:1px solid var(--linie);}
.galerie figure{margin:0;background:var(--tief);}
.galerie img{display:block;width:100%;height:auto;}
.galerie figcaption{padding:.75rem 1rem;font-family:var(--mono);
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--leise);}
[hidden]{display:none !important;}

/* ── Der Kontaktabschnitt ─────────────────────────────────────────── */
.wege-kontakt{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.7rem 0 0;}
.knopf{display:inline-flex;align-items:center;gap:.7rem;
  padding:.95rem 1.4rem;border:1px solid var(--linie);border-bottom:1px solid var(--linie);
  background:var(--tief);color:var(--text);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:border-color var(--takt) var(--kurve),
             background var(--takt) var(--kurve);}
.knopf:hover{border-color:#39424C;background:#12161C;}
.knopf.wichtig{border-color:rgba(232,163,60,.5);color:#F0D9B4;
  background:rgba(232,163,60,.08);}
.knopf.wichtig:hover{border-color:var(--licht);
  background:rgba(232,163,60,.15);}
.knopf svg{width:14px;height:14px;flex:none;fill:currentColor;}
.knopf:focus-visible{outline:1px solid var(--licht);outline-offset:3px;}

/* ── Das Formular ─────────────────────────────────────────────────── */
/* Es schickt an dasselbe `anfrage.php`, das die Hauptseite benutzt —
   ein Versandweg, nicht zwei. Das Feld `anliegen` sagt dem Empfaenger,
   von welcher Seite die Anfrage kommt. */
.anfrage{margin:1.9rem 0 0;max-width:40rem;
  display:flex;flex-direction:column;gap:1px;
  background:var(--linie);border:1px solid var(--linie);}
.feld{background:var(--tief);padding:1rem 1.15rem;}
.feld label{display:block;font-family:var(--mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--leise);
  margin-bottom:.6rem;}
.feld input,.feld textarea{width:100%;background:transparent;border:0;
  color:var(--text);font-family:var(--sans);font-size:15px;
  line-height:1.6;padding:0;resize:vertical;}
.feld textarea{min-height:5.2em;}
.feld input::placeholder,.feld textarea::placeholder{color:#4E555D;}
.feld input:focus,.feld textarea:focus{outline:0;}
.feld:focus-within{background:#12161C;}
.feld:focus-within label{color:#D9AE72;}

.wahl{display:flex;flex-wrap:wrap;gap:.5rem;}
/* 44 px Mindesthoehe, nicht aus Geschmack: Bei .5rem Polsterung waren
   die Knoepfe 33 px hoch (gemessen 28.08.2026 auf 393 px) — zu wenig,
   um sie mit dem Daumen sicher zu treffen. Auf dieser Seite fuellt
   jemand ein Formular auf dem Telefon aus, waehrend er neben einem
   beschaedigten Auto steht. */
.wahl button{appearance:none;cursor:pointer;
  background:transparent;border:1px solid #2A313A;color:var(--weich);
  font-family:var(--sans);font-size:13.5px;padding:.62rem 1.05rem;
  min-height:44px;border-radius:100px;
  transition:border-color var(--takt) var(--kurve),
             color var(--takt) var(--kurve),
             background var(--takt) var(--kurve);}
.wahl button:hover{border-color:#39424C;color:var(--text);}
.wahl button[aria-pressed="true"]{border-color:rgba(232,163,60,.55);
  color:#F0D9B4;background:rgba(232,163,60,.1);}
.wahl button:focus-visible{outline:1px solid var(--licht);outline-offset:2px;}

.absenden{background:var(--tief);padding:1.15rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;}
.absenden button{appearance:none;cursor:pointer;border:0;
  background:var(--licht);color:#1A1206;
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.95rem 1.6rem;
  transition:filter var(--takt) var(--kurve);}
.absenden button:hover{filter:brightness(1.12);}
.absenden button:focus-visible{outline:2px solid var(--text);
  outline-offset:2px;}
.absenden button[disabled]{opacity:.5;cursor:default;filter:none;}
.absenden .pflichtnote{margin:0;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--leise);}
.rueckmeldung{margin:1rem 0 0;font-size:14.5px;line-height:1.65;}
.rueckmeldung:empty{display:none;}
.rueckmeldung.gut{color:#8FCB9B;}
.rueckmeldung.schlecht{color:#D99A9A;}

/* ── Der Fuss ─────────────────────────────────────────────────────── */
.fuss{position:relative;z-index:2;background:var(--tief);
  padding:clamp(40px,6vh,72px) var(--rand) clamp(32px,5vh,56px);
  display:grid;gap:clamp(24px,3.4vh,38px);}
.fuss::before{content:'';position:absolute;left:var(--rand);right:0;top:0;
  height:1px;pointer-events:none;
  background:linear-gradient(90deg,var(--linie) 0,var(--linie) 44%,
    rgba(30,35,41,.35) 72%,transparent 100%);}
.fuss-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:1.6rem clamp(20px,4vw,56px);}
.fuss-marke{display:flex;flex-direction:column;gap:1.05rem;min-width:0;}
.fuss-ort{display:inline-flex;align-items:center;gap:.5rem;margin:0;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--text);text-decoration:none;width:fit-content;border-bottom:0;}
.fuss-ort .nadel{width:13px;height:13px;flex:none;fill:var(--leise);
  transition:fill var(--takt) var(--kurve);}
.fuss-ort .wo{border-bottom:1px solid transparent;padding-bottom:1px;
  transition:border-color var(--takt) var(--kurve);}
.fuss-ort:hover .nadel{fill:var(--weich);}
.fuss-ort:hover .wo{border-bottom-color:#39424C;}
.fuss-ort:focus-visible{outline:1px solid var(--licht);outline-offset:4px;}
.fuss-zeiten{margin:.5rem 0 0;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.8;
  color:var(--leise);}
.fuss-zeiten:empty{display:none;}
.fuss-stand{margin:0;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.9;
  color:var(--leise);text-align:right;}
.fuss-stand b{display:block;font-weight:500;color:var(--weich);}
.fuss-links{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;}
.fuss-links a{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leise);border-bottom:0;
  transition:color var(--takt) var(--kurve);}
.fuss-links a:hover{color:var(--text);}
.fuss-recht{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;}
.fuss-recht a{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leise);border-bottom:0;
  transition:color var(--takt) var(--kurve);}
.fuss-recht a:hover{color:var(--text);}
.fuss-signatur{display:flex;justify-content:flex-end;color:var(--weich);}
@media (max-width:640px){
  .fuss-kopf{flex-direction:column;align-items:flex-start;}
  .fuss-stand{text-align:left;}
  .fuss-signatur{justify-content:flex-start;}
}

/* ── DIE WERKSMARKE ───────────────────────────────────────────────
   Fassung B „Das Siegel", woertlich aus `vorlagen/werksmarke.html`.
   Sie erbt Farbe ueber `currentColor` und Schrift vom Elternelement —
   nur die Form des Zeichens ist Flowlee. Angepasst wird genau eine
   Stelle: die Domain in `utm_source`, und die setzt `seiten.js` aus den
   Standortdaten, damit sie nicht wie auf der Rechtsseite auf einem
   fremden Standort stehenbleibt. */
.flw-sig{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.8125rem; line-height:1; color:inherit; text-decoration:none;
  opacity:.55; transition:opacity .22s ease; border-bottom:0;
}
.flw-sig .zeichen{
  display:grid; place-items:center; width:2.1em; height:2.1em; flex:none;
  border:1px solid currentColor; border-radius:50%; color:inherit;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.flw-sig .zeichen svg{ height:.85em; width:auto; display:block;
  fill:currentColor; filter:none }
.flw-sig .text{ display:flex; flex-direction:column; gap:.3em; text-align:left }
.flw-sig .oben{ font-size:.92em; line-height:1 }
.flw-sig .unten{ font-size:.78em; line-height:1; letter-spacing:.16em;
                 text-transform:uppercase; opacity:.75 }
.flw-sig:hover, .flw-sig:focus-visible{ opacity:1 }
.flw-sig:hover .zeichen, .flw-sig:focus-visible .zeichen{ transform:rotate(-8deg) }
.flw-sig:focus-visible{ outline:2px solid currentColor; outline-offset:4px;
                        border-radius:3px }
@media (prefers-reduced-motion:reduce){
  .flw-sig, .flw-sig .zeichen{ transition:none }
  .flw-sig:hover .zeichen, .flw-sig:focus-visible .zeichen{ transform:none }
}

/* ── Schmale Schirme ──────────────────────────────────────────────── */
/* Unter 1040 px reichen zwei Achsen nicht mehr: Die Beschriftungsspalte
   waere schmaler als ihre eigenen Woerter. Dann faellt sie nach oben
   zurueck, genau wie vor dem Umbau — und die Leuchte verschwindet mit
   ihr, weil es zwischen einer einzigen Spalte nichts zu trennen gibt.
   Die Schwelle liegt bewusst ueber 1024: Ein Tablet im Hochformat soll
   schon die einspaltige Fassung bekommen. */
@media (max-width:1040px){
  .blatt,.einstieg{display:block;}
  .nummer{margin-bottom:1.1rem;padding-top:0;}
  .leuchte{display:none;}
}
@media (max-width:560px){
  .vorteile{grid-template-columns:1fr;}
  .wege-kontakt .knopf{width:100%;justify-content:center;}
}