/* PitNow · Startseite und Unterseiten
   Die Werte kommen aus ~/Projects/kfz-plattform/public/kunde.css und sind
   seit dem 06.10.2026 im Betrieb erprobt. Nicht neu erfinden.
   Fuenf Abstaende (8 16 24 48 96), vier Schriftgroessen plus zwei benannte
   Sonderwerte. Keine fremden Schriftserver. */

:root{
  --s1:8px; --s2:16px; --s3:24px; --s4:48px; --s5:96px;
  --t1:52px; --t2:30px; --t3:20px; --t4:16px;
  /* zwei benannte Sondergroessen, im Bauplan ausdruecklich verlangt */
  --klein:14px;   /* Augenbraue und Tag in der Terminkachel */
  --zahl:180px;   /* die eine grosse Zahl im Abschnitt Luecke */
  --zeile:1.55; --breite:65ch;

  --papier:#f2efe8;
  --weiss:#fffdf9;
  --tinte:#14161a;
  --tinte-2:#23262c;
  --grau:#5c6066;
  --grau-hell:#9a9a96;
  --linie:#ddd6c8;
  --gelb:#f5b700;
  --gelb-hell:#fff0bf;
  --rot:#a3321f;
  --gold-tief:#8a6500;   /* dunkles Gold, damit die Schrittnummer auf Papier lesbar bleibt */
  --schatten:0 24px 48px -24px rgba(20,22,26,.35), 0 2px 8px rgba(20,22,26,.06);

  --eng:"Avenir Next Condensed","DIN Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --sans:"Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --kopfhoehe:72px;
}
@media(max-width:760px){
  :root{ --t1:34px; --t2:24px; --t3:18px; --s5:48px; --zahl:92px; --kopfhoehe:auto; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}
body{ margin:0; background:var(--papier); color:var(--tinte);
      font:400 var(--t4)/var(--zeile) var(--sans); -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-underline-offset:3px; }
p{ margin:0 0 var(--s3); max-width:var(--breite); }
h1,h2,h3{ margin:0; font-family:var(--eng); font-weight:700; letter-spacing:-.01em; }
h1{ font-size:var(--t1); line-height:1.02; }
h2{ font-size:var(--t2); line-height:1.15; }
h3{ font-size:var(--t3); line-height:1.2; }
:focus-visible{ outline:3px solid var(--gelb); outline-offset:2px; }
[hidden]{ display:none !important; }

/* ===== Das 12-Spalten-Raster. Behaelter 1180, Rinne 24, Aussenrand 24 ===== */
.raster{
  max-width:1180px; margin:0 auto; padding:0 var(--s3);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s3);
}
@media(max-width:900px){
  .raster{ grid-template-columns:minmax(0,1fr); padding:0 var(--s2); }
  .raster > *{ grid-column:1 / -1 !important; }
}

/* ===== Wiederkehrende Kleinteile ===== */
.augenbraue{
  display:block; font:600 var(--klein)/1.3 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:var(--grau);
  margin-bottom:var(--s2);
}
.auf-dunkel .augenbraue{ color:var(--gelb); }

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s1);
  font:600 var(--t4)/1.2 var(--sans); padding:var(--s2) var(--s4); min-height:56px;
  background:var(--gelb); color:var(--tinte); border:0; border-radius:999px;
  cursor:pointer; text-decoration:none;
  box-shadow:0 1px 0 rgba(0,0,0,.12) inset, 0 -2px 0 rgba(0,0,0,.12) inset;
  transition:transform .15s ease, background-color .15s ease;
}
.knopf:hover{ background:#ffc414; }
.knopf:active{ transform:translateY(1px); }
.knopf-rand{
  display:inline-flex; align-items:center; justify-content:center;
  font:600 var(--t4)/1.2 var(--sans); padding:var(--s2) var(--s3); min-height:56px;
  background:transparent; color:var(--tinte); border:1.5px solid var(--tinte);
  border-radius:999px; cursor:pointer; text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.knopf-rand:hover{ background:var(--tinte); color:var(--weiss); }

/* Die Terminkachel. Steht nur auf der Startseite und in der Buchungsstrecke. */
.kachel{
  background:var(--tinte); border-radius:4px; padding:var(--s2) var(--s3);
  text-align:center; border:1.5px solid var(--tinte); flex:none;
  transition:border-color .15s ease;
}
.kachel .tag{
  display:block; font:600 var(--klein)/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:var(--gelb);
}
.kachel .uhr{
  display:block; font:700 var(--t2)/1 var(--eng); color:var(--weiss); margin-top:var(--s1);
  font-variant-numeric:tabular-nums;
}

/* ===== Entwurfsband ===== */
.entwurf-band{
  background:repeating-linear-gradient(135deg,var(--gelb) 0 14px,#e4a900 14px 28px);
  color:var(--tinte); font:700 var(--klein)/1.3 var(--sans);
  letter-spacing:.1em; text-transform:uppercase; text-align:center;
  padding:var(--s1) var(--s2);
}

/* ===== 1 · Kopf ===== */
.kopf{ background:var(--tinte); color:var(--weiss); position:sticky; top:0; z-index:40; }
.kopf-innen{
  max-width:1180px; margin:0 auto; padding:0 var(--s3);
  height:var(--kopfhoehe); display:flex; align-items:center; gap:var(--s3);
}
.marke{ display:flex; align-items:center; margin-right:auto; text-decoration:none; min-height:44px; }
.marke img{ height:40px; width:auto; }
.kopf-nav{ display:flex; align-items:center; gap:var(--s4); }
.kopf-nav a{
  text-decoration:none; font-weight:500; color:#d8d3c8;
  min-height:44px; display:inline-flex; align-items:center;
}
.kopf-nav a:hover{ color:var(--weiss); }
.kopf .knopf-kopf{
  display:inline-flex; align-items:center; min-height:44px; padding:var(--s1) var(--s3);
  border:1.5px solid #4a4e55; border-radius:999px; color:var(--weiss); font-weight:600;
  text-decoration:none; white-space:nowrap;
  transition:border-color .15s ease, background-color .15s ease;
}
.kopf .knopf-kopf:hover{ border-color:var(--gelb); background:rgba(245,183,0,.1); }
/* Am Handy kein Klappmenue. Logo und Knopf oben, die zwei Anker in einer Zeile darunter. */
@media(max-width:900px){
  .kopf{ position:static; }
  .kopf-innen{ flex-wrap:wrap; padding:var(--s2); gap:var(--s2); height:auto; }
  .marke img{ height:32px; }
  .kopf .knopf-kopf{ order:2; }
  .kopf-nav{ order:3; width:100%; gap:var(--s4); justify-content:flex-start; }
}

/* ===== 2 · Buehne. Zwei Spalten, 7 zu 5. Karte links, Foto rechts, gleiche Hoehe.
   Geaendert 13.10.2026: Karte liegt nicht mehr ueber dem Foto, kein dunkler Schleier. ===== */
.buehne{
  position:relative; background:var(--papier);
  padding:var(--s4) 0;
}
.buehne .raster{ align-items:stretch; }
.buehne-foto{
  grid-column:8 / 13; position:relative; margin:0; min-height:100%;
  border-radius:4px; overflow:hidden; background:var(--linie);
}
.buehne-foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:40% 55%;
}
.such-karte{
  grid-column:1 / 8;
  background:var(--weiss); border-radius:4px; box-shadow:var(--schatten);
  padding:var(--s4);
  animation:karte-rein .24s ease-out both;
}
@keyframes karte-rein{ from{ opacity:0; transform:translateY(16px); } }
.such-karte h1{ margin-bottom:var(--s2); }
.such-karte .unterzeile{ color:var(--grau); margin-bottom:var(--s3); }

.statuszeile{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s1) var(--s2);
  background:var(--papier); border-radius:4px; padding:var(--s2);
  margin-bottom:var(--s4); max-width:none;
}
.statuszeile .punkt{
  width:10px; height:10px; border-radius:50%; background:#3f9c3a; flex:none;
  box-shadow:0 0 0 4px rgba(63,156,58,.18); animation:puls 1.6s ease-in-out infinite;
}
@keyframes puls{ 50%{ opacity:.35; } }
.statuszeile .wann{ font-weight:700; margin-left:auto; font-variant-numeric:tabular-nums; }
.statuszeile .was{ flex:1 1 200px; min-width:0; }

.feld{ display:flex; flex-direction:column; gap:var(--s1); margin-bottom:var(--s3); }
.feld > span{ font-weight:600; }
.feld input,.feld select{
  font:400 var(--t4)/1.4 var(--sans); color:var(--tinte); background:#fbf8f1; width:100%;
  border:1.5px solid var(--linie); border-radius:8px; padding:var(--s2); min-height:56px;
}
.feld input:focus,.feld select:focus{
  outline:none; border-color:var(--tinte); background:var(--weiss);
  box-shadow:0 0 0 4px var(--gelb-hell);
}
.feld input::placeholder{ color:#a8a39a; }
.knopf-zeile{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }

/* Am Rechner stehen die zwei Suchfelder nebeneinander, damit der Knopf ohne Scrollen sichtbar bleibt. */
@media(min-width:901px){
  .such-karte #suchform{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 var(--s3); }
  .such-karte .knopf-zeile{ grid-column:1 / -1; margin-top:var(--s3); }
}
/* Handy und Tablet hoch. Erst Text und Suche, darunter das Foto. */
@media(max-width:900px){
  .buehne{ padding:var(--s3) 0 var(--s4); }
  .buehne .raster{ gap:var(--s3); }
  .such-karte{ padding:var(--s3) var(--s2) var(--s4); }
  .buehne-foto{ min-height:0; height:240px; }
  .statuszeile .wann{ margin-left:0; }
  .knopf-zeile > *{ flex:1 1 100%; }
}

/* ===== 3 · Band. Eine Zeile, Spalte 1 bis 9. ===== */
.band{ background:var(--papier); padding:var(--s4) 0; }
.band p{
  grid-column:1 / 10; margin:0; max-width:none;
  font-size:var(--t3); line-height:1.4;
}
.band-linie{ max-width:1180px; margin:0 auto; padding:0 var(--s3); }
.band-linie hr{ border:0; border-top:1px solid var(--linie); margin:0; }
@media(max-width:900px){ .band-linie{ padding:0 var(--s2); } }

/* ===== 4 · Liste. Drei verschieden hohe Zeilen. ===== */
.liste{ background:var(--papier); padding:var(--s5) 0; }
.liste-kopf{ grid-column:1 / 7; margin-bottom:var(--s4); }
.liste-kopf h2{ margin-bottom:var(--s2); }
.liste-kopf p{ color:var(--grau); margin:0; }

.zeile-hoch{
  grid-column:1 / 13; background:var(--weiss); border-radius:4px;
  box-shadow:0 2px 8px rgba(20,22,26,.06);
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr) auto;
  gap:var(--s4); align-items:center; padding:var(--s3); margin-bottom:var(--s3);
}
.zeile-hoch .foto{ margin:0; border-radius:4px; overflow:hidden; aspect-ratio:16 / 10; }
.zeile-hoch .foto img{ width:100%; height:100%; object-fit:cover; }
.zeile-hoch .name{ font:700 var(--t2)/1.1 var(--eng); }
.zeile-hoch .ort{ color:var(--grau); margin:var(--s1) 0 var(--s2); }
.zeile-hoch .kann{ color:var(--tinte); margin:0; }

.zeile-flach{
  grid-column:1 / 11; background:var(--weiss); border-radius:4px;
  box-shadow:0 2px 8px rgba(20,22,26,.06);
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s2) var(--s3); margin-bottom:var(--s3);
  transition:transform .15s ease, box-shadow .15s ease;
}
.zeile-flach:hover{ transform:translateY(-2px); box-shadow:0 8px 20px -10px rgba(20,22,26,.3); }
.zeile-flach .rund{ width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:50% 18%; flex:none; }
.zeile-flach .wer{ margin-right:auto; min-width:0; }
.zeile-flach .name{ font:700 var(--t3)/1.2 var(--eng); }
.zeile-flach .ort{ color:var(--grau); }
.zeile-flach .kachel{ padding:var(--s1) var(--s2); }
.zeile-flach .kachel .uhr{ font-size:var(--t3); }
.zeile-hoch:hover .kachel,.zeile-flach:hover .kachel{ border-color:var(--gelb); }
@media(max-width:900px){
  .zeile-hoch{ grid-template-columns:minmax(0,1fr); gap:var(--s3); }
  .zeile-hoch .kachel{ justify-self:start; }
  .zeile-flach{ flex-wrap:wrap; }
  .zeile-flach .wer{ flex:1 1 auto; }
  .zeile-flach .kachel{ flex:none; }
}

/* ===== 5 · Luecke. Bricht aus. Zahl gegen Text. ===== */
.luecke{ background:var(--tinte-2); color:var(--weiss); padding:var(--s5) 0; min-height:420px; }
.luecke .zahl-feld{ grid-column:1 / 6; }
.luecke .gross{
  font:700 var(--zahl)/.86 var(--eng); color:var(--gelb);
  letter-spacing:-.02em; display:block; white-space:nowrap;
}
.luecke .text-feld{ grid-column:7 / 12; }
.luecke h2{ margin-bottom:var(--s3); }
.luecke p{ max-width:48ch; color:#d8d3c8; }
.protokoll{
  list-style:none; margin:var(--s4) 0 0; padding:var(--s3) 0 0;
  border-top:1px solid #3b3f46;
  font-family:ui-monospace,Menlo,"SF Mono",monospace; font-size:var(--klein);
  color:#a7a39b;
}
.protokoll li{ display:flex; gap:var(--s2); line-height:1.8; }
.protokoll b{ margin-left:auto; font-weight:600; }
.protokoll .ok{ color:#6fcf6a; }
.protokoll .weg{ color:var(--gelb); }
@media(max-width:900px){
  .luecke .gross{ margin-bottom:var(--s3); }
}

/* ===== 6 · Ablauf. Ein hohes Bild gegen drei kurze Zeilen. ===== */
.ablauf{ background:var(--papier); padding:var(--s5) 0; }
.ablauf .bild{
  grid-column:1 / 8; margin:0; border-radius:4px; overflow:hidden;
  aspect-ratio:4 / 5; max-height:720px; box-shadow:var(--schatten);
}
.ablauf .bild img{ width:100%; height:100%; object-fit:cover; object-position:42% 50%; }
.ablauf .schritte{ grid-column:8 / 13; }
.ablauf .schritte h2{ margin-bottom:var(--s4); }
.schritt{ padding-bottom:var(--s4); }
.schritt .nr{
  display:block; font:700 var(--t2)/1 var(--eng); color:var(--gold-tief);
}
.schritt h3{ margin:var(--s1) 0 var(--s1); }
.schritt p{ color:var(--grau); margin:0; }
@media(max-width:900px){
  .ablauf .bild{ aspect-ratio:16 / 10; max-height:none; margin-bottom:var(--s4); }
  .ablauf .bild img{ object-position:42% 45%; }
}

/* ===== 7 · Nicht-Liste. Titel steht still. ===== */
.nicht{ background:var(--weiss); padding:var(--s5) 0; }
.nicht .titel{ grid-column:1 / 5; }
.nicht .titel h2{ position:sticky; top:calc(var(--kopfhoehe) + var(--s3)); }
.nicht .punkte{ grid-column:6 / 13; }
.nicht-zeile{ padding:var(--s3) 0; border-top:1px solid var(--linie); }
.nicht-zeile:first-child{ border-top:0; padding-top:0; }
.nicht-zeile .was{ font-weight:700; font-size:var(--t3); }
.nicht-zeile p{ color:var(--grau); margin:var(--s1) 0 0; }
@media(max-width:900px){
  .nicht .titel h2{ position:static; margin-bottom:var(--s3); }
}

/* ===== 8 · Werkstatt. Bricht aus. Text gegen Tafel. ===== */
.werkstatt{ background:var(--gelb-hell); padding:var(--s5) 0; min-height:480px; }
.werkstatt .wort{ grid-column:1 / 7; }
.werkstatt h2{ margin-bottom:var(--s3); }
.werkstatt .preis{
  font:700 var(--t2)/1.1 var(--eng); margin:var(--s4) 0 var(--s1);
}
.werkstatt .neben{ color:var(--grau); margin-bottom:var(--s4); }
.werkstatt .tafel{
  grid-column:8 / 13; margin-top:var(--s4); align-self:start;
  background:var(--tinte); color:var(--weiss); border-radius:4px;
  padding:var(--s3); box-shadow:var(--schatten);
}
.tafel .kopfzeile{
  font:600 var(--klein)/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--gelb); margin-bottom:var(--s3);
}
.tafel .zeile{
  display:flex; align-items:baseline; gap:var(--s2);
  padding:var(--s2) 0; border-top:1px dashed #3b3f46;
}
.tafel .zeile span{ color:#d8d3c8; }
.tafel .zeile b{
  margin-left:auto; font:700 var(--t2)/1 var(--eng); color:var(--gelb);
  font-variant-numeric:tabular-nums;
}
@media(max-width:900px){ .werkstatt .tafel{ margin-top:var(--s3); } }

/* ===== 9 · Fuss. Vier ungleiche Spalten. ===== */
.fuss{ background:var(--tinte); color:#c9c4ba; padding:var(--s5) 0 var(--s4); }
.fuss .ueber{ grid-column:1 / 6; }
.fuss .ueber img{ height:40px; width:auto; margin-bottom:var(--s3); }
.fuss .sp-a{ grid-column:6 / 8; }
.fuss .sp-b{ grid-column:8 / 10; }
.fuss .sp-c{ grid-column:10 / 13; }
.fuss h3{ color:var(--weiss); font-size:var(--t4); letter-spacing:.1em;
          text-transform:uppercase; margin-bottom:var(--s2); }
.fuss ul{ list-style:none; margin:0; padding:0; }
.fuss li{ margin-bottom:var(--s1); }
.fuss a{ color:#c9c4ba; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.fuss a:hover{ color:var(--weiss); text-decoration:underline; }
.fuss p{ color:#a7a39b; }
.fuss-unten{
  max-width:1180px; margin:var(--s4) auto 0; padding:var(--s3) var(--s3) 0;
  border-top:1px solid #3b3f46; display:flex; flex-wrap:wrap; gap:var(--s2);
  justify-content:space-between; color:#a7a39b; font-size:var(--klein);
}
@media(max-width:900px){ .fuss-unten{ padding:var(--s3) var(--s2) 0; } }

/* ===== Unterseiten. Gleiche Handschrift wie die Startseite. ===== */
.inhalt{ padding:var(--s5) 0; }
.inhalt .spalte{ grid-column:1 / 9; }
.inhalt .rand{ grid-column:10 / 13; }
.inhalt h1{ margin-bottom:var(--s3); }
.inhalt h2{ margin:var(--s4) 0 var(--s2); }
.inhalt ul{ margin:0 0 var(--s3); padding-left:var(--s3); max-width:var(--breite); }
.inhalt li{ margin-bottom:var(--s1); }
.inhalt .preis-gross{
  font:700 var(--t1)/1 var(--eng); display:block; margin:var(--s3) 0 var(--s1);
}
.merker{
  background:var(--gelb-hell); border-left:4px solid var(--gelb);
  padding:var(--s3); border-radius:4px;
}
.merker p:last-child{ margin-bottom:0; }

/* ===== Handy. Die Seite war zu lang, hier wird sie gestrafft. ===== */
@media(max-width:900px){
  .entwurf-band{ padding:var(--s1); }
  .kopf-innen{ padding:var(--s2); row-gap:var(--s1); }
  .marke img{ height:30px; }
  .kopf-nav{ gap:var(--s3); }

  .band{ padding:var(--s3) 0; }
  .band p{ font-size:var(--t4); }

  .liste{ padding:var(--s4) 0; }
  .liste-kopf{ margin-bottom:var(--s3); }
  .zeile-hoch{ padding:var(--s2); gap:var(--s2); }
  .zeile-flach{ padding:var(--s2); gap:var(--s2); }

  .luecke{ padding:var(--s4) 0; min-height:0; }
  .luecke .gross{ margin-bottom:var(--s2); }
  .protokoll{ margin-top:var(--s3); }

  .ablauf{ padding:var(--s4) 0; }
  .ablauf .bild{ margin-bottom:var(--s3); }
  .schritt{ padding-bottom:var(--s3); }

  .nicht{ padding:var(--s4) 0; }
  .nicht-zeile{ padding:var(--s2) 0; }

  .werkstatt{ padding:var(--s4) 0; min-height:0; }
  .werkstatt .preis{ margin-top:var(--s3); }
  .werkstatt .neben{ margin-bottom:var(--s3); }

  /* Fuss. Drei Linkspalten nebeneinander statt untereinander. */
  .fuss{ padding:var(--s4) 0 var(--s3); }
  .fuss .raster{ grid-template-columns:1fr 1fr; }
  .fuss .ueber{ grid-column:1 / -1 !important; }
  .fuss .sp-a,.fuss .sp-b,.fuss .sp-c{ grid-column:auto !important; }
  .fuss .ueber img{ margin-bottom:var(--s2); }
  .fuss li{ margin-bottom:0; }
  .fuss-unten{ margin-top:var(--s3); }
}

/* Statuszeile am Handy. Punkt und Text in einer Zeile, Uhrzeit darunter. */
@media(max-width:900px){
  .statuszeile{ margin-bottom:var(--s3); }
  .statuszeile .was{ flex:1 1 200px; }
  .statuszeile .wann{ flex:1 1 100%; }
}

/* ===== Live 13.10.2026 · Suchhinweis, Formular, Danke ===== */
.such-hinweis{
  background:var(--gelb-hell); border-left:4px solid var(--gelb); border-radius:4px;
  padding:var(--s2); margin:var(--s3) 0 0; max-width:none;
}
.anfrage{ max-width:var(--breite); margin-top:var(--s3); }
.anfrage .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.feld textarea{
  font:400 var(--t4)/1.4 var(--sans); color:var(--tinte); background:#fbf8f1; width:100%;
  border:1.5px solid var(--linie); border-radius:8px; padding:var(--s2); min-height:112px; resize:vertical;
}
.feld textarea:focus{ outline:none; border-color:var(--tinte); background:var(--weiss); box-shadow:0 0 0 4px var(--gelb-hell); }
.feld .opt{ font-weight:400; color:var(--grau); }
.feldpaar{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s3); }
@media(max-width:760px){ .feldpaar{ grid-template-columns:1fr; } }
.zustimmung{ display:flex; gap:var(--s2); align-items:flex-start; margin:0 0 var(--s4); }
.zustimmung input{ width:24px; height:24px; flex:none; margin-top:2px; accent-color:var(--tinte); }
.inhalt .rand .merker h2{ margin-top:0; font-size:var(--t3); }
.anfrage + p{ margin-top:var(--s3); }