/*
Theme Name: AUPROCA
Theme URI: https://auproca.at/
Author: Sidavo
Author URI: https://www.sidavo.at
Description: Theme der Autosattlerei AUPROCA in Nassereith, Tirol. Fester Inhalt in den Templates, kein Seitenbaukasten: WordPress uebernimmt Adressen, Formularversand und Verwaltung. Beim Aktivieren legt das Theme seine Seiten selbst an.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Alle Rechte vorbehalten
Text Domain: auproca
Tags: business, custom-colors, custom-menu, accessibility-ready
*/

/* Ab hier das Stylesheet der Seite. Die Schrift und die Bilder liegen im
   Theme; die Pfade sind relativ zu dieser Datei. */

@charset "UTF-8";
/* ==========================================================================
   AUPROCA — assets/css/main.css
   Gemeinsam für alle Seiten. Palette, Schriften und Maße stammen aus
   DESIGN.md; hier kommt keine Farbe und kein Schriftgrad vor, der dort
   nicht festgelegt ist.
   ========================================================================== */

/* ---------- 1 · Schrift ---------- */
/* Eine Datei, zwei Achsen: Gewicht 100–900 und Breite 62–125 %. Damit trägt
   dieselbe Schrift die breite Signaletik der Überschriften und den ruhigen
   Fließtext, ohne dass ein zweiter Download nötig wird. */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2 · Token ---------- */
:root {
  /* Palette — Herkunft und gemessene Kontraste siehe DESIGN.md */
  --paper: #FFFFFF;        /* Trägerfläche */
  --paper-2: #F3F3F3;      /* zweite Fläche, Rhythmuswechsel */
  --ink: #111111;          /* Text, dunkle Bänder */
  --ink-2: #5A5A5A;        /* Sekundärtext auf hell, 6,90:1 */
  --ink-3: #767676;        /* gedämpft auf hell, 4,54:1 */
  --line: #E2E2E2;         /* Haarlinie, dekorativ */
  --line-strong: #949494;  /* Rand bedienbarer Elemente auf hell, 3,03:1 */
  --red: #D5281B;          /* Signalfarbe der Beschilderung, 5,06:1 auf Weiß */
  --red-deep: #A81E13;     /* abgeleitet, für Links auf hell, 7,34:1 */

  --on-dark: #FFFFFF;      /* 18,88:1 auf --ink */
  --on-dark-2: #B3B3B3;    /* 9,00:1 auf --ink */
  --line-dark: rgba(255, 255, 255, .15);
  --line-dark-strong: #6E6E6E;  /* 3,70:1 auf --ink */

  --ff: 'Archivo', 'Archivo Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --sec-y: clamp(68px, 8vw, 132px);
  --hdr-h: 72px;

  /* Radius liegt ausschließlich auf Bedienelementen: Knöpfe, Felder, Karte.
     Flächen, Bilder und Bänder bleiben scharfkantig, damit das Raster steht. */
  --r: 10px;
  --r-sm: 8px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 3 · Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
}
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, .97rem + .18vw, 1.075rem)/1.6 var(--ff);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; font-family: var(--ff); color: inherit; }
:where(ul, ol)[class] { list-style: none; padding: 0; }
/* Ohne diese Zeile färbt der Browser Links bis zum Eintreffen von main.css
   blau und besuchte violett. Sie steht deshalb auch im kritischen CSS
   jeder Seite. */
a { color: inherit; }

/* ---------- 4 · Typografie ---------- */
/* Überschriften laufen breit (font-stretch 112 %) und schwer. Das ist die
   Sprache von Werkstattbeschilderung, nicht die eines Buchsatzes. */
h1, h2, h3, h4 {
  font-family: var(--ff);
  font-weight: 800;
  font-stretch: 112%;
  line-height: .98;
  letter-spacing: -.028em;
  text-wrap: balance;
  /* Deutsche Komposita wie 'Autohimmelreparaturen' sind breiter als ein
     Handy-Bildschirm. Mit lang='de-AT' am html-Element trennt der Browser
     korrekt, statt die Zeile herauslaufen zu lassen. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2.6rem, 1.35rem + 5.1vw, 5rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.7vw, 3.15rem); }
h3 {
  font-size: clamp(1.08rem, 1rem + .38vw, 1.3rem);
  font-weight: 700; font-stretch: 100%;
  line-height: 1.16; letter-spacing: -.01em;
}
h4 { font-size: 1.02rem; font-weight: 700; font-stretch: 100%; letter-spacing: -.005em; }
p { text-wrap: pretty; }
p + p { margin-top: .9em; }

.lede {
  font-size: clamp(1.15rem, 1.03rem + .6vw, 1.45rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -.012em;
}
.measure { max-width: 62ch; }
.measure-s { max-width: 46ch; }
.mt { margin-top: 1.1em; }

/* Datenbezeichner in Definitionslisten. Kein Etikett über Überschriften. */
.dt {
  font: 700 .72rem/1.4 var(--ff);
  font-stretch: 100%;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2);
}

.tlink {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; text-decoration: none;
  color: var(--red-deep);
  padding-bottom: 2px;
  box-shadow: inset 0 -2px 0 var(--red);
  transition: gap .25s var(--ease), background-color .2s var(--ease);
}
.tlink:hover { gap: .85em; background: color-mix(in srgb, var(--red) 12%, transparent); }
.tlink svg { flex: none; }
.on-dark .tlink { color: var(--on-dark); }

/* ---------- 5 · Signature: die Sattlernaht ---------- */
/* Eine schräg gesetzte Steppnaht, Stich 10 px, Teilung 22 px, Stärke 3 px.
   Die Schräge ist das, was eine Handnaht von einer gestrichelten Linie
   unterscheidet. Sie gliedert die Seite und näht auf /werkstatt/ den Ablauf
   zusammen — ein Element, überall dasselbe Maß. */
.stitch {
  height: 8px; border: 0; flex: none; margin: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='8' viewBox='0 0 22 8'%3E%3Cpath d='M2 6.5 12 1.5' stroke='%23D5281B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 22px 8px;
}

/* ---------- 6 · Layout ---------- */
/* Rasterfelder bekommen von Haus aus min-width:auto und werden dadurch vom
   laengsten Wort aufgespreizt — bei deutschen Komposita reicht das, um die
   Spalte aus dem Bildschirm zu schieben. */
.split > *, .detail > *, .pair > *, .row > *, .abl__list > *, .step > * { min-width: 0; }

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gut);
}
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--red); color: #fff;
  padding: 12px 18px; font-weight: 700; text-decoration: none;
  border-radius: var(--r-sm);
  transition: top .18s var(--ease);
}
.skip:focus { top: 8px; }

.sec { padding-block: var(--sec-y); position: relative; }
.sec--tight { padding-block: clamp(48px, 5.5vw, 88px); }
.sec--grey { background: var(--paper-2); }
.sec--dark, .on-dark { background: var(--ink); color: var(--on-dark); }

/* Asymmetrisch 5/7 statt symmetrischem Zweispalter */
.split { display: grid; gap: clamp(28px, 4vw, 60px); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; align-items: start; }
  .split--wide { grid-template-columns: 7fr 5fr; }
  .split--half { grid-template-columns: 1fr 1fr; }
}
.sechead { margin-bottom: clamp(32px, 4.2vw, 62px); }
/* ch wird an der Schriftgröße des Elements gemessen: am h2 selbst gesetzt,
   damit eine kurze Überschrift nicht am Container umbricht. */
.sechead h2 { max-width: 22ch; }
/* Kurzüberschrift über reinen Bildsektionen: eine Zeile, damit die Bilder
   nicht kontextlos stehen, ohne dem Abschnitt das Gewicht eines Kapitels zu geben. */
.sechead--sm { margin-bottom: clamp(20px, 2.6vw, 32px); }
.sechead--sm h2 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem); max-width: 34ch; }

/* ---------- 7 · Fotoband: Hero, Seitenköpfe, Abschluss ---------- */
/* Foto über die volle Breite, darüber eine Abdunklung. Die Abdunklung ist
   nicht nach Augenmaß gesetzt: Selbst wenn das Foto an der Textstelle rein
   weiß wäre, bleiben weiße Schrift und Grund bei mindestens 8:1. */
.band {
  position: relative; isolation: isolate;
  display: grid; align-items: end;
  background: var(--ink); color: var(--on-dark);
  padding-block: clamp(64px, 9vw, 120px);
  overflow: hidden;
}
.band__bg { position: absolute; inset: 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.band::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(9, 9, 9, .90) 0%, rgba(9, 9, 9, .78) 46%, rgba(9, 9, 9, .66) 100%);
}
@media (min-width: 900px) {
  .band__bg img { object-position: 60% 50%; }
  .band::before {
    background:
      linear-gradient(100deg, rgba(9, 9, 9, .92) 0%, rgba(9, 9, 9, .86) 62%, rgba(9, 9, 9, .50) 88%, rgba(9, 9, 9, .36) 100%),
      linear-gradient(to top, rgba(9, 9, 9, .34), rgba(9, 9, 9, 0) 60%);
  }
}
.band__in { position: relative; }
.band p, .band .lede { max-width: 46ch; }

/* Naht über der Überschrift. Das Raster nimmt die Breite des breitesten
   Elements an, deshalb läuft die Naht mit width:100 % exakt so weit wie die
   Überschrift darunter — nicht auf ein geratenes Maß. */
.hhead { display: grid; justify-items: start; gap: clamp(20px, 2.6vw, 32px); }
.hhead .stitch { width: min(100%, 220px); }

/* Hero: füllt den Bildschirm unter dem Kopf */
.band--hero {
  min-height: calc(100svh - var(--hdr-h));
  align-items: center;
}
.band--hero h1 { max-width: 15ch; }
.band--hero .lede { margin-top: clamp(18px, 2.2vw, 28px); color: var(--on-dark); }
.band--hero .chev { max-width: 220px; margin-bottom: clamp(22px, 3vw, 34px); }


/* Seitenkopf der Unterseiten */
.band--head { min-height: clamp(340px, 46vh, 460px); }
.band--head h1 { max-width: 18ch; }
.band--head .lede { margin-top: clamp(16px, 2vw, 24px); color: var(--on-dark); }

/* Abschlussband mit Handlungsaufforderung */
.band--cta { min-height: clamp(400px, 58vh, 560px); }

/* Betriebsfoto: helles Motiv mit Berg, Himmel und Betriebsgebäude. Es braucht
   keinen eigenen Verlauf — der Standard aus Abschnitt 7 trägt, sobald der
   Zuschnitt stimmt. Am Foto gemessen, nicht geschätzt: schlechtester Punkt der
   Textzone 7,77:1 auf Desktop und 10,65:1 auf Schmalformaten.
   Der weiße Lieferwagen am linken Rand ist aus dem Zuschnitt genommen; er war
   die hellste Stelle und drückte den Kontrast auf 2,85:1. */
.band--haus .band__bg img { object-position: 38% 52%; }
@media (min-width: 900px) { .band--haus .band__bg img { object-position: 50% 50%; } }

/* Kopf der Rechtstexte: dieselbe Bauform, aber ohne Foto. Rechtstexte
   brauchen kein Bild, nur eine klare Kante zum Fließtext. */
.band--legal {
  min-height: clamp(230px, 30vh, 300px);
  padding-block: clamp(48px, 6vw, 78px);
}
.band--legal::before { display: none; }
.band--legal h1 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 3.8rem); }
.band--cta h2 { max-width: 16ch; }

/* Brotkrumen liegen im Band */
.crumbs { font-size: .84rem; margin-bottom: clamp(20px, 3vw, 34px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; padding: 0; }
.crumbs a, .crumbs [aria-current] { display: inline-block; padding: 6px 0; }
.crumbs a { color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: var(--on-dark); text-decoration: underline; }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--line-dark-strong); }
.crumbs [aria-current="page"] { color: var(--on-dark); }

/* ---------- 8 · Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 20px; min-height: var(--hdr-h); }
/* Lockup nach der Beschilderung: Wortmarke, darunter die Unterzeile auf
   rund 84 % ihrer Breite, um 14 % eingerueckt. Alle Masse haengen an --wm,
   damit das Verhaeltnis bei jeder Groesse stimmt. */
.brand {
  --wm: clamp(126px, 15vw, 158px);
  display: inline-flex; flex-direction: column;
  gap: calc(var(--wm) * .018);
  text-decoration: none; margin-right: auto; padding: 8px 0;
}
.brand__wm { display: block; width: var(--wm); height: auto; }
.brand__sub {
  /* Aus dem Foto gemessen: Versalhöhe 6,45 % und Satzbreite 82,6 % der
     Wortmarkenbreite, um 14,2 % eingerückt. Archivo laufweitenverengt auf
     80 % trifft die schmalen, leichten Versalien der Beschilderung. */
  align-self: center;
  font-weight: 350; font-stretch: 80%;
  font-size: calc(var(--wm) * .0866);
  line-height: 1;
  letter-spacing: .227em;
  /* Die Sperrung haengt auch hinter dem letzten Buchstaben. Ohne diesen
     Ausgleich saesse die Zeile um eine halbe Sperrung zu weit links. */
  margin-right: -.227em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.nav { display: none; }
@media (min-width: 940px) { .nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); } }
.nav a {
  position: relative; display: block;
  text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 12px 2px; color: var(--ink);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .24s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { font-weight: 700; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.hdr__tel {
  display: none; text-decoration: none; font-weight: 700; font-size: .95rem;
  align-items: center; gap: .5em; white-space: nowrap;
}
/* Etwas Luft zwischen Navigation und Telefonnummer: Ohne sie liest sich die
   Nummer wie ein weiterer Menüpunkt. */
@media (min-width: 800px) { .hdr__tel { display: inline-flex; margin-left: clamp(8px, 1.6vw, 22px); } }
.hdr__tel:hover { color: var(--red-deep); }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; background: none;
  border: 2px solid var(--ink); border-radius: var(--r-sm); cursor: pointer;
}
@media (min-width: 940px) { .burger { display: none; } }
.burger__b { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; }
.burger__b::before, .burger__b::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.burger__b::before { top: -6px; }
.burger__b::after { top: 6px; }
[aria-expanded="true"] .burger__b { background: transparent; }
[aria-expanded="true"] .burger__b::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"] .burger__b::after { top: 0; transform: rotate(-45deg); }

.mnav {
  position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 99;
  background: var(--paper); padding: 24px var(--gut) 40px; overflow-y: auto;
}
.mnav[hidden] { display: none; }
.mnav a {
  display: block; text-decoration: none;
  font-weight: 800; font-stretch: 112%; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 8vw, 2.3rem);
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.mnav a[aria-current="page"] { color: var(--red-deep); }
.mnav__foot { margin-top: 26px; display: grid; gap: 6px; }
.mnav__foot a {
  font-size: 1rem; font-weight: 700; font-stretch: 100%; letter-spacing: 0;
  padding: 10px 0; border: 0;
}

/* ---------- 9 · Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 14px 26px;
  font-weight: 700; font-size: .98rem; text-decoration: none; text-align: center;
  background: var(--red); color: #fff;
  border: 2px solid var(--red); border-radius: var(--r); cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), gap .2s var(--ease);
}
.btn:hover { background: var(--red-deep); border-color: var(--red-deep); gap: .9em; }
.btn--ghost { background: none; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.on-dark .btn--ghost, .band .btn--ghost, .sec--dark .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
.on-dark .btn--ghost:hover, .band .btn--ghost:hover, .sec--dark .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }

/* ---------- 10 · Fokus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
iframe:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.band a:focus-visible, .band button:focus-visible,
.sec--dark a:focus-visible, .on-dark a:focus-visible { outline-color: #fff; }

/* ---------- 11 · Zeilenliste, durch die Zickzackkante getrennt ---------- */
.rows { border-top: 0; }
.row {
  display: grid; gap: 8px clamp(20px, 3vw, 48px);
  padding-block: clamp(26px, 3vw, 40px);
  position: relative;
}
@media (min-width: 820px) { .row { grid-template-columns: 4fr 8fr; align-items: baseline; } }
.row::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='8' viewBox='0 0 22 8'%3E%3Cpath d='M2 6.5 12 1.5' stroke='%23D5281B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 22px 8px;
}
.sec--dark .row::before, .on-dark .row::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='8' viewBox='0 0 22 8'%3E%3Cpath d='M2 6.5 12 1.5' stroke='%23D5281B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.row__b { color: var(--ink-2); }
.sec--dark .row__b, .on-dark .row__b { color: var(--on-dark-2); }
.row__b p + p { margin-top: .65em; }
.rows-end {
  height: 8px; border: 0; margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='8' viewBox='0 0 22 8'%3E%3Cpath d='M2 6.5 12 1.5' stroke='%23D5281B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 22px 8px;
}
.sec--dark .rows-end, .on-dark .rows-end {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='8' viewBox='0 0 22 8'%3E%3Cpath d='M2 6.5 12 1.5' stroke='%23D5281B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- 12 · Bilder ---------- */
figure { margin: 0; }
.fig--3x2 img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.fig--3x4 img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

/* Paar: beide Bilder exakt gleich groß, gleiches Verhältnis, eine Kante */
.pair { display: grid; gap: clamp(16px, 2.2vw, 26px); }
@media (min-width: 720px) { .pair { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Detail: Bild neben Text, in der Spalte gehalten statt randlos.
   Ab Zweispaltigkeit ist das Bild exakt so hoch wie die Textspalte. Das
   Seitenverhältnis gibt dann nur noch die Mindesthöhe vor. */
.detail { display: grid; gap: clamp(26px, 4vw, 54px); align-items: center; }
.detail__fig img { object-fit: cover; width: 100%; }
@media (min-width: 900px) {
  .detail { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .detail--flip .detail__fig { order: 2; }
  /* schmales Hochformat neben langem Text */
  .detail--narrow { grid-template-columns: 5fr 7fr; }
  .detail--narrow.detail--flip { grid-template-columns: 7fr 5fr; }
  .detail--narrow.detail--flip .detail__fig { order: 2; }

  .detail__fig { display: flex; }
  .detail__fig picture { display: flex; width: 100%; }
  .detail .detail__fig img { aspect-ratio: auto; height: 100%; min-height: 100%; }
  .detail > :not(.detail__fig):not(.detail__map) { align-self: center; }
}

/* ---------- 13 · Zahlenblock ---------- */
.facts { margin-top: clamp(26px, 3.2vw, 40px); }
.facts > div { display: grid; gap: 4px 22px; padding-block: 14px; border-top: 1px solid var(--line); }
@media (min-width: 620px) { .facts > div { grid-template-columns: 11rem 1fr; } }
.facts dt { font: 700 .72rem/1.5 var(--ff); font-stretch: 100%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.facts dd { margin: 0; }
.on-dark .facts > div, .sec--dark .facts > div { border-top-color: var(--line-dark); }
.on-dark .facts dt, .sec--dark .facts dt { color: var(--on-dark-2); }

/* ---------- 14 · Ablauf: die Naht, die beim Scrollen gesetzt wird ---------- */
/* Links bleibt ein Zähler stehen, rechts laufen die vier Schritte durch. Die
   Naht dazwischen wird gesetzt, während man scrollt, und schaltet dabei die
   Schritte scharf. Ohne JavaScript ist die Naht vollständig gesetzt und alle
   Schritte sind aktiv — das ist der Grundzustand im Markup. */
/* Vier gleich große Felder im Raster. Die Zeilenhöhe folgt dem längsten
   Eintrag, damit alle vier exakt gleich hoch stehen. */
.abl__list { list-style: none; padding: 0; margin: 0; display: grid; }
@media (min-width: 820px) {
  .abl__list { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
}

.step {
  position: relative;
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px clamp(18px, 2.2vw, 28px);
  align-content: start;
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--line-dark);
}
.sec:not(.sec--dark) .step { border-top-color: var(--line); }
@media (min-width: 820px) {
  .step { padding-inline: clamp(18px, 2.4vw, 34px); }
  .step:nth-child(odd) { padding-left: 0; }
  .step:nth-child(even) { padding-right: 0; border-left: 1px solid var(--line-dark); }
  .sec:not(.sec--dark) .step:nth-child(even) { border-left-color: var(--line); }
  .abl__list .step:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .sec:not(.sec--dark) .abl__list .step:nth-last-child(-n+2) { border-bottom-color: var(--line); }
}
@media (max-width: 819px) {
  .abl__list .step:last-child { border-bottom: 1px solid var(--line-dark); }
  .sec:not(.sec--dark) .abl__list .step:last-child { border-bottom-color: var(--line); }
}

.step__n {
  font-weight: 800; font-stretch: 112%; letter-spacing: -.03em; line-height: .8;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
  font-variant-numeric: tabular-nums;
  color: var(--line-dark-strong);
  transition: color .35s var(--ease);
  min-width: 2.2ch;
}
.sec:not(.sec--dark) .step__n { color: #C9C9C9; }
@media (min-width: 700px) { .step__n { grid-row: 1 / span 3; } }
.step.is-on .step__n { color: var(--red); }

.step__t { margin: 0; }
.step__meta {
  font: 700 .72rem/1.4 var(--ff); font-stretch: 100%;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-2); margin-top: 4px;
}
.sec:not(.sec--dark) .step__meta { color: var(--ink-3); }
.step__b { margin-top: 10px; max-width: 62ch; color: var(--on-dark-2); transition: color .35s var(--ease); }
.sec:not(.sec--dark) .step__b { color: var(--ink-2); }
.step.is-on .step__b { color: var(--on-dark); }
.sec:not(.sec--dark) .step.is-on .step__b { color: var(--ink); }

/* ---------- 15 · FAQ ---------- */
.faq { margin-top: clamp(24px, 3vw, 40px); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 0; cursor: pointer;
  font-weight: 700; font-stretch: 105%; letter-spacing: -.012em;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem); line-height: 1.3;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; margin-left: auto; margin-top: .3em;
  width: 12px; height: 12px;
  border-right: 3px solid var(--red); border-bottom: 3px solid var(--red);
  transform: rotate(45deg);
  transition: transform .28s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--red-deep); }
.faq__a { padding: 0 0 22px; max-width: 68ch; color: var(--ink-2); }
.faq__a p + p { margin-top: .7em; }

/* ---------- 16 · Formular ---------- */
.form { display: grid; gap: 20px; }
.row2 { display: grid; gap: 20px; }
.field { display: grid; gap: 7px; align-content: start; }
/* Zwei Felder nebeneinander teilen sich dieselben drei Zeilen: Beschriftung,
   Eingabe, Hinweis. Damit stehen linke und rechte Spalte auf derselben Höhe,
   auch wenn nur eine Seite einen Hinweis trägt. */
@media (min-width: 640px) {
  .row2 { grid-template-columns: 1fr 1fr; }
  @supports (grid-template-rows: subgrid) {
    .row2 { grid-template-rows: auto auto auto; }
    .row2 > .field { grid-row: span 3; grid-template-rows: subgrid; }
  }
  .row2 > .field > :is(input, select, textarea) { align-self: stretch; }
}
.field label { font: 700 .78rem/1.4 var(--ff); font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase; }
.field .req { color: var(--red-deep); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; min-height: 52px;
  background: var(--paper);
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent);
}
.field textarea { min-height: 118px; resize: vertical; }
.field .hint { font-size: .86rem; color: var(--ink-2); }
.field .err { display: none; font-size: .87rem; font-weight: 700; color: var(--red-deep); }
.field.has-err input, .field.has-err select, .field.has-err textarea { border-color: var(--red-deep); }
.field.has-err input:focus, .field.has-err select:focus, .field.has-err textarea:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 16%, transparent);
}
.field.has-err .err { display: block; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.check input {
  width: 24px; height: 24px; min-height: 0; margin-top: 1px; flex: none;
  accent-color: var(--red); border-radius: 6px;
}
.check label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .95rem; }

/* Fotoauswahl. Der native Dateidialog bleibt erhalten: Der Knopf ist ein
   <label>, das Feld selbst ist nur optisch verborgen. Ohne JavaScript
   funktioniert Auswahl und Absenden unverändert. */
/* Kompakt: Symbol, Text und Knopf stehen ab 520 px nebeneinander, damit die
   Fläche nicht höher wird als das Textfeld darüber. */
.drop {
  display: grid; justify-items: center; gap: 12px;
  padding: 20px;
  text-align: center;
  border: 2px dashed var(--line-strong); border-radius: var(--r);
  background: var(--paper-2);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
@media (min-width: 520px) {
  .drop {
    grid-template-columns: auto 1fr auto;
    justify-items: start; align-items: center;
    text-align: left; gap: 4px 16px;
    padding: 18px 20px;
  }
  .drop__ico { grid-row: 1 / span 2; }
  .drop__btn { grid-column: 3; grid-row: 1 / span 2; }
  .filelist { grid-column: 1 / -1; }
}
.drop.is-over { border-color: var(--red); border-style: solid; background: color-mix(in srgb, var(--red) 7%, var(--paper)); }
.drop__ico { color: var(--ink-3); transition: color .2s var(--ease); }
.drop.is-over .drop__ico { color: var(--red); }
.drop__t { font-weight: 700; }
.drop__s { font-size: .88rem; color: var(--ink-2); max-width: 40ch; }
.drop input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.drop__btn {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 46px; padding: 11px 22px;
  font-weight: 700; font-size: .95rem; letter-spacing: 0; text-transform: none;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.drop__btn:hover { background: var(--ink); color: var(--paper); }
.drop input[type="file"]:focus-visible + .drop__btn { outline: 3px solid var(--red); outline-offset: 3px; }
.filelist { font-size: .88rem; color: var(--ink-2); margin: 0; }
.filelist:empty { display: none; }
.filelist ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; padding: 0; margin: 0; }
.filelist li {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 6px 12px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line-strong);
  font-size: .84rem; max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filelist li.is-bad { border-color: var(--red-deep); color: var(--red-deep); font-weight: 700; }
/* Honeypot: für Menschen und Screenreader unsichtbar, für Bots ausfüllbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fstatus { display: none; padding: 16px 18px; border-left: 4px solid var(--ink); border-radius: var(--r-sm); background: var(--paper-2); }
.fstatus.is-on { display: block; }
.fstatus.is-ok { border-left-color: #1F6B3B; }
.fstatus.is-err { border-left-color: var(--red-deep); }

/* ---------- 17 · Kontaktdaten und Karte ---------- */
.cdata > div { padding-block: 15px; border-top: 1px solid var(--line); }
.cdata dt { font: 700 .72rem/1.5 var(--ff); font-stretch: 100%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.cdata dd { margin: 0; font-size: 1.05rem; }
.cdata a { text-decoration: none; font-weight: 700; color: var(--red-deep); box-shadow: inset 0 -2px 0 var(--red); }
.cdata a:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
address { font-style: normal; }

.map { border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--paper-2); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.05); transition: filter .3s var(--ease); }
.map:hover iframe, .map:focus-within iframe { filter: none; }
.map--tall { aspect-ratio: 4 / 3; }
.map--wide { aspect-ratio: 16 / 10; }
@media (max-width: 700px) { .map--wide, .map--tall { aspect-ratio: 4 / 3; } }
.map__note { font-size: .88rem; color: var(--ink-2); margin-top: 12px; }
.sec--dark .map__note, .on-dark .map__note { color: var(--on-dark-2); }
.map__note a { text-decoration: underline; text-underline-offset: 3px; }

/* Karte in einer Zweispalte: füllt die Spalte auf die Höhe des Textes,
   damit keine leere Fläche neben dem Text stehen bleibt. */
.detail__map { display: flex; flex-direction: column; min-width: 0; }
/* Einspaltig gibt das Seitenverhältnis die Höhe vor. Eine Mindesthöhe darf
   hier nicht stehen: zusammen mit aspect-ratio würde sie die Breite bestimmen
   und die Karte aus dem Bildschirm schieben. */
.detail__map .map { flex: 1 1 auto; width: 100%; }
@media (min-width: 900px) {
  .detail__map .map { aspect-ratio: auto; min-height: 400px; }
}

/* ---------- 18 · Galerie ---------- */
.grid-p { display: grid; gap: clamp(16px, 2.2vw, 26px); }
@media (min-width: 640px) { .grid-p { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-p { grid-template-columns: repeat(3, 1fr); } }
.pitem { margin: 0; }
.pitem__btn { display: block; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; overflow: hidden; }
.pitem img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; transition: transform .5s var(--ease); }
.pitem__btn:hover img { transform: scale(1.03); }

dialog.lb { border: 0; padding: 0; max-width: min(1100px, 94vw); max-height: 92vh; background: var(--ink); color: var(--on-dark); }
dialog.lb::backdrop { background: rgba(10, 10, 10, .92); }
.lb__in { display: grid; }
.lb__bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line-dark); }
.lb__bar .count { margin-left: auto; font-size: .86rem; color: var(--on-dark-2); }
.lb button { min-width: 44px; min-height: 44px; background: none; color: inherit; border: 2px solid var(--line-dark-strong); border-radius: var(--r-sm); cursor: pointer; }
.lb button:hover { background: #fff; color: var(--ink); border-color: #fff; }
.lb img { max-height: 68vh; width: auto; margin-inline: auto; }

/* ---------- 19 · Footer ---------- */
.ft { background: var(--ink); color: var(--on-dark); padding-block: clamp(48px, 6vw, 84px) 28px; }
.ft__grid { display: grid; gap: clamp(30px, 4vw, 54px); }
@media (min-width: 780px) { .ft__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
/* Dasselbe Lockup wie im Kopf, nur groesser: Unterzeile mittig unter der
   Wortmarke, Schriftgrad an deren Breite gekoppelt. */
.ft__brand { display: inline-flex; flex-direction: column; --wm: 178px; gap: calc(var(--wm) * .018); }
.ft__wm { width: var(--wm); height: auto; }
.ft__sub {
  align-self: center;
  font-weight: 350; font-stretch: 80%;
  font-size: calc(var(--wm) * .0866);
  line-height: 1;
  letter-spacing: .227em;
  margin-right: -.227em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.ft address { margin-top: 20px; color: var(--on-dark); }
.ft__owner { display: block; margin-bottom: .5em; }
.ft h2 { font: 700 .72rem/1.5 var(--ff); font-stretch: 100%; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); margin-bottom: 12px; }
/* Ohne diese Zeile setzt der Browser Aufzählungspunkte vor jeden Eintrag. */
.ft ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.ft ul a { display: inline-block; padding: 8px 0; }
.ft a { text-decoration: none; }
.ft a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ft__bar {
  margin-top: clamp(34px, 4vw, 54px); padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center;
  font-size: .88rem; color: var(--on-dark-2);
}
/* Urhebernachweis. Rot scheidet hier aus: auf --ink kommt es nur auf 3,73:1
   und trägt damit keinen Kleintext. Die Hervorhebung läuft über Weiß und
   Schriftstärke. */
/* p + p aus der Typografie greift auch hier und schoebe die Zeile nach unten. */
.ft__bar p + p { margin-top: 0; }
/* Trennstrich nur, solange beide Angaben auf einer Zeile stehen. Bricht die
   Leiste um, stuende er am Zeilenanfang und saehe aus wie ein Aufzaehlungszeichen. */
@media (min-width: 560px) {
  .ft__by::before { content: '—'; margin-right: 16px; color: var(--on-dark-2); }
}
.ft__by a { color: var(--on-dark); font-weight: 700; }
.ft__by a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ft__bar ul { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; list-style: none; padding: 0; }
.ft__bar ul a { padding: 0; }

/* ---------- 20 · Mobile Anruf-Aktion ---------- */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ink); border-top: 2px solid var(--red);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 940px) { .mcta { display: none; } }
.mcta a {
  min-height: 54px; display: flex; align-items: center; justify-content: center; gap: .5em;
  text-decoration: none; font-weight: 700; font-size: .95rem; color: #fff;
}
.mcta a:first-child { background: var(--red); }
@media (max-width: 939px) { body { padding-bottom: 54px; } }

/* ---------- 21 · Rechtstexte ---------- */
.legal { max-width: 72ch; }
.legal h2 { margin-top: clamp(34px, 4vw, 50px); font-size: clamp(1.3rem, 1.15rem + .8vw, 1.75rem); }
.legal h3 { margin-top: 28px; font-size: 1.05rem; }
.legal p, .legal ul { margin-top: .8em; }
.legal ul { list-style: disc; padding-left: 1.4em; display: grid; gap: 6px; }
.legal a { color: var(--red-deep); text-decoration: underline; text-underline-offset: 3px; }

/* Fehlende Pflichtangabe. Sichtbar und nicht zu uebersehen — ein Rechtstext,
   dem eine Pflichtangabe still fehlt, faellt niemandem auf und ist dann jahrelang
   angreifbar. Ein sichtbarer Platzhalter faellt am ersten Tag auf. */
.legal__gap {
  display: inline-block;
  padding: 1px 8px;
  border: 2px dashed var(--red);
  border-radius: var(--r-sm);
  color: var(--red-deep);
  font-weight: 700;
  font-size: .9em;
  letter-spacing: .02em;
}
.legal__stand { margin-top: 3em; color: var(--ink-2); font-size: .92rem; }
.legal__wahl {
  margin-top: 1.4em; padding: 14px 18px;
  border-left: 4px solid var(--red);
  background: var(--paper-2);
  border-radius: var(--r-sm);
  font-size: .95rem;
}

/* ---------- 22 · 404 ---------- */
.err404 { min-height: 56vh; display: grid; align-content: center; }

/* ---------- 23 · Motion ---------- */
/* Ein orchestrierter Moment im Hero, darunter nur der Sektionskopf. Die
   einzige laufende Bewegung ist die Naht im Ablauf, und die folgt dem
   Scrollen, statt von selbst zu spielen. */
.js .rv { opacity: 0; transform: translateY(14px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .rv.in.d1 { transition-delay: .07s; }
.js .rv.in.d2 { transition-delay: .14s; }
.js .rv.in.d3 { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .rv { opacity: 1 !important; transform: none !important; }
  .pitem__btn:hover img { transform: none; }
  
/* ---------- 24 · Print ---------- */
@media print {
  .hdr, .mcta, .mnav, .btn, .skip, .map { display: none !important; }
  body { background: #fff; color: #000; }
  .band, .sec--dark, .on-dark, .ft { background: #fff !important; color: #000 !important; }
  .band::before, .band__bg { display: none !important; }
}