/* ============================================================
   DEMO / MOTORWERK - Kfz-Meisterbetrieb

   FARBE   Werkstattgrau mit Warnorange. Dunkel, weil eine
           Werkstatt dunkel ist - und weil Preise auf dunklem
           Grund praeziser wirken als auf Weiss.
   SCHRIFT Space Grotesk. Technisch, leicht eigenwillig, mit
           sehr guten Ziffern. Eine Werkstatt rechnet in Zahlen.
   AUFBAU  Die Preisliste steht NEBEN der Schlagzeile, nicht
           hinter drei Absaetzen Leitbild. In dieser Branche
           wird nach Preisen gesucht, nicht nach Haltung.
   ============================================================ */

:root {
  --grund:      #16181B;
  --grund-2:    #1E2125;
  --text:       #EDEEF0;
  --text-2:     #9BA2AA;
  --akzent:     #FF7A00;
  --akzent-2:   #FF9330;
  --auf-akzent: #16181B;
  --linie:      #2E3238;

  --tit: "Space Grotesk", system-ui, sans-serif;
  --txt: "Inter", system-ui, sans-serif;
  --r: 2px;
  --tit-spacing: -0.02em;
  --maxw: 74rem;

  --fuss-grund: #0F1113;
  --fuss-text:  #EDEEF0;
  --kopf-linie: 1px solid #2E3238;
}

h1, h2, h3 { font-weight: 700; }

/* --- Notleiste ganz oben ----------------------------------
   Der Abschleppdienst steht ueber allem anderen. Wer ihn
   braucht, hat keine Zeit zu scrollen. */
.notruf { background: var(--akzent); color: var(--auf-akzent); }
.notruf .wrap {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  align-items: center; justify-content: center;
  padding-block: 0.7rem; font-weight: 600; font-size: 0.9375rem; text-align: center;
}
.notruf a { color: var(--auf-akzent); font-weight: 700; }

/* --- Hero --------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero .wrap { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 62rem) { .hero .wrap { grid-template-columns: 1.1fr 0.9fr; } }
.hero h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); margin-bottom: 1rem; }
.hero__lead { font-size: 1.125rem; color: var(--text-2); margin-bottom: 1.75rem; }

/* --- Die Preisliste als eigenes Moebel ---------------------- */
.preisbox {
  border: 1px solid var(--linie);
  background: var(--grund-2);
  border-radius: var(--r);
  overflow: hidden;
}
.preisbox h2 {
  font-family: var(--txt);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-2);
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--linie);
  margin: 0;
}
.preisbox .tabelle td { padding: 0.7rem 1.1rem; }
.preisbox .tabelle td:last-child { color: var(--akzent); font-weight: 600; }
.preisbox__fuss {
  padding: 0.8rem 1.1rem;
  font-size: 0.8125rem; color: var(--text-2);
  border-top: 1px solid var(--linie);
  margin: 0; max-width: none;
}

/* --- Marken ------------------------------------------------- */
.marken { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.marken span {
  border: 1px solid var(--linie); border-radius: var(--r);
  padding: 0.4rem 0.8rem; font-size: 0.8125rem;
  color: var(--text-2); font-family: var(--txt);
}

/* --- Formular ----------------------------------------------- */
.feld { display: grid; gap: 0.35rem; margin-bottom: 0.9rem; }
.feld label {
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2);
}
.feld input, .feld textarea {
  font: inherit; font-size: 1rem; min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--grund-2); color: var(--text);
}
.feld textarea { min-height: 6.5rem; resize: vertical; }
.hinweis { font-size: 0.8125rem; color: var(--text-2); margin-top: 0.75rem; }