/* =========================================================================
   MOTORWERK SÜD — Beispielkonzept

   Gestalterische Leitidee: dunkel und technisch, aber nicht laut. Eine freie
   Werkstatt fuer den Alltag, keine Tuningbude — deshalb kein Neonrot, kein
   Carbon, keine schraegen Linien.

   Was das konkret heisst:
     - Der Seitenaufbau besteht aus waagerechten Baendern, die sich in der
       Helligkeit abwechseln. Jedes Band ist ein Thema. Das ist die
       Gegenbewegung zu den gestapelten Karten der anderen Muster.
     - Die Leistungen sind volle Zeilen mit grosser Positionsnummer links —
       wie Positionen auf einem Werkstattauftrag.
     - Ecken sind praktisch scharf (2px). Orange ist Signalfarbe und
       erscheint nur an Handlungen und Markierungen.
     - Zahlen sind gross gesetzt. In einer Werkstatt ist die Position
       wichtiger als die Ueberschrift.

   UEBERARBEITUNG (zweiter Durchgang):

     Massstab.  H1 bis 72px, H2 bis 46px, Fliesstext bis 18px, Knoepfe 56px.
                Der Kopf ist hoeher, die Buehne begrenzt auf 76vh statt der
                vollen Fensterhoehe.

     Schrift.   Oswald traegt nur noch Ueberschriften, Ziffern und die
                wenigen echten Etiketten. Fliesstext, Navigation, Zeiten und
                Adressen stehen in Nunito Sans. Vorher war fast alles
                schmal und in Versalien gesetzt — das las sich wie ein
                Werkstattplakat und nicht wie eine Website.

     Abgrenzung zu Falkenwerk. Beide sind technische Handwerksbetriebe, aber
                Motorwerk bleibt dunkel und flaechig: grosse Fotografie,
                Fast Black und Anthrazit als Grundflaechen, Orange nur als
                Signal. Falkenwerk ist hell, navy und gerastert. Keine
                Komponente wurde von dort uebernommen.
   ========================================================================= */

@font-face {
  font-family: "Oswald";
  src: url("../schrift/oswald-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../schrift/oswald-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../../assets/fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  --anthrazit: #15191d;   /* Fast Black */
  --stahl:     #343a40;
  --hell:      #f3f3ef;   /* Off-White */
  --orange:    #e86f32;   /* Signalfarbe fuer Linien, Zahlen, Rubriken */
  --orange-d:  #b4491a;   /* Text auf Hell und gefuellte Knoepfe: weisser
                            Text erreicht auf #e86f32 nur 3,11:1. Das helle
                            Orange bleibt Akzent, gefuellt wird dunkler. */
  --orange-h:  #f0854a;   /* Kleinschrift auf der Buehne. Dort liegt der
                            Grund wegen des Fotos bei L=0,037 statt bei
                            0,009 wie auf Fast Black; #e86f32 erreicht dann
                            nur 3,89:1. Dieser Ton kommt auf 4,69:1. */
  --grau:      #d8dadd;
  --tinte:     #1c2023;
  --tinte-2:   #4d545b;
  --linie:     #c9ccd0;
  --linie-d:   rgba(255, 255, 255, 0.16);

  --tit:  "Oswald", "Arial Narrow", system-ui, sans-serif;
  --text: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --rand: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --spalte: 1280px;
  --kante: 2px;

  --luft-s:  clamp(0.75rem, 0.6rem + 0.6vw, 1.1rem);
  --luft-m:  clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --luft-l:  clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --luft-xl: clamp(3.5rem, 2.3rem + 4.8vw, 6.5rem);
}

body {
  background: var(--hell);
  color: var(--tinte);
  font-family: var(--text);
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);   /* 17 -> 18 */
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

.mitte {
  width: 100%; max-width: var(--spalte);
  margin-inline: auto; padding-inline: var(--rand);
}

h1, h2, h3 {
  font-family: var(--tit); font-weight: 600; line-height: 1.1;
  letter-spacing: 0.005em; margin: 0;
}
p { margin: 0 0 0.9rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--orange-d); }
a:focus-visible, span.knopf:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.rubrik {
  font-family: var(--tit); font-weight: 500; font-size: 0.875rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--orange-d); margin: 0 0 0.75rem;
}
.streifen--dunkel .rubrik { color: var(--orange); }
.buehne .rubrik { color: var(--orange-h); }

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0.85rem 2rem;
  background: var(--orange-d); color: #fff;
  font-family: var(--tit); font-size: 1.125rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  border: 2px solid var(--orange-d); border-radius: var(--kante);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.knopf:hover { background: #93380f; border-color: #93380f; }
.knopf--hell { background: transparent; color: #fff; border-color: var(--linie-d); }
.knopf--hell:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.knopf--dunkel { background: transparent; color: var(--anthrazit); border-color: var(--anthrazit); }
.knopf--dunkel:hover { background: var(--anthrazit); color: #fff; }

.tel {
  font-family: var(--tit); font-weight: 500; font-size: 1.125rem;
  letter-spacing: 0.04em; cursor: default; white-space: nowrap;
}

/* ---------- Kopf ---------- */
.kopf { background: var(--anthrazit); color: #fff; }
.kopf__innen {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem);
  padding-block: 1.4rem;
}
.kopf__marke { text-decoration: none; color: #fff; margin-right: auto; display: block; }
.kopf__wort {
  font-family: var(--tit); font-weight: 600; font-size: 1.875rem;
  letter-spacing: 0.06em; display: block; line-height: 1;
}
.kopf__unter {
  font-family: var(--tit); font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.24em; color: var(--orange);
  display: block; margin-top: 0.35rem;
}
.kopf__nav { display: none; }
.kopf__nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.kopf__nav a {
  /* Bewusst in der Fliesstextschrift und ohne Versalien: die Navigation
     muss im Alltag lesbar sein, nicht plakativ wirken. */
  font-family: var(--text); font-weight: 600; font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.86); text-decoration: none;
  padding-block: 0.35rem; border-bottom: 2px solid transparent;
}
.kopf__nav a:hover { color: #fff; border-bottom-color: var(--orange); }
.kopf__tel { display: none; }
.kopf__knopf { display: none; }
.kopf__strich { width: 1px; align-self: stretch; background: rgba(255,255,255,0.18); display: none; }
@media (min-width: 64rem) {
  .kopf__nav { display: block; }
  .kopf__tel { display: inline; }
  .kopf__knopf { display: inline-flex; min-height: 48px; padding: 0.6rem 1.5rem; font-size: 1rem; }
  /* Senkrechte Linie trennt Telefon und Menue sichtbar voneinander. */
  .kopf__strich { display: block; }
}

/* ---------- Bühne ---------- */
.buehne { position: relative; isolation: isolate; background: var(--anthrazit); color: #fff; }
.buehne img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.buehne::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Links kraeftig genug fuer weissen Text, nach rechts deutlich offener —
     sonst verschwindet die Werkstatt hinter der Flaeche und das Bild
     koennte auch fehlen. */
  background: linear-gradient(100deg,
    rgba(21, 25, 29, 0.94) 0%, rgba(21, 25, 29, 0.80) 42%, rgba(21, 25, 29, 0.34) 100%);
}
.buehne__innen {
  display: flex; flex-direction: column; justify-content: center;
  /* 76vh statt voller Fensterhoehe: die Buehne soll wirken, aber nicht
     den ganzen ersten Bildschirm belegen. */
  min-height: clamp(28rem, 76vh, 44rem);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
.buehne h1 {
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);   /* 36 -> 72 */
  text-transform: uppercase; max-width: 19ch; margin-bottom: var(--luft-m);
}
.buehne__lead {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  color: rgba(255, 255, 255, 0.9); max-width: 48ch; margin-bottom: var(--luft-m);
}
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1.75rem; }
/* Drei getrennte Servicepunkte statt einer Aufzaehlung — jeder mit eigener
   oranger Oberkante. */
.buehne__trust {
  display: grid; gap: 0; list-style: none; margin: 0; padding: 0;
}
.buehne__trust li {
  padding: 0.85rem 0 0; border-top: 3px solid var(--orange);
  font-family: var(--tit); font-weight: 500; font-size: 1.0625rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
}
@media (min-width: 34rem) {
  .buehne__trust { grid-template-columns: repeat(3, minmax(0, 14rem)); gap: 0 1.5rem; }
}

/* ---------- Bänder ---------- */
.streifen { padding-block: var(--luft-xl); }
.streifen--dunkel { background: var(--anthrazit); color: #fff; }
.streifen--dunkel h2, .streifen--dunkel h3 { color: #fff; }
.streifen--stahl { background: var(--stahl); color: #fff; }
.streifen--stahl h2, .streifen--stahl h3 { color: #fff; }
.streifen--grau { background: var(--grau); }

.kopfzeile { max-width: 46ch; margin-bottom: var(--luft-l); }
.kopfzeile h2 {
  font-size: clamp(1.875rem, 1.35rem + 2.6vw, 2.875rem);   /* 30 -> 46 */
  text-transform: uppercase; margin-bottom: var(--luft-s);
}
.kopfzeile p { color: var(--tinte-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.streifen--dunkel .kopfzeile p, .streifen--stahl .kopfzeile p { color: rgba(255, 255, 255, 0.8); }

/* ---------- Services: volle Zeilen mit Positionsnummer ---------- */
.service { border-top: 2px solid var(--orange); }
.service__zeile {
  display: grid; gap: 0.5rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3.4vw, 2.75rem);
  border-bottom: 1px solid var(--linie);
}
.streifen--dunkel .service__zeile { border-bottom-color: var(--linie-d); }
.service__nr {
  font-family: var(--tit); font-weight: 600;
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
  color: var(--orange); line-height: 1; margin: 0;
}
.service h3 { font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.9375rem); text-transform: uppercase; }
.service p { color: rgba(255, 255, 255, 0.78); margin: 0; }
@media (min-width: 50rem) {
  .service__zeile { grid-template-columns: 6rem minmax(13rem, 1fr) minmax(0, 1.5fr); align-items: baseline; }
}

/* ---------- Warum: drei Spalten mit Oberlinie ---------- */
.gruende { display: grid; gap: clamp(2rem, 3.5vw, 3.5rem); }
.gruende > div { border-top: 3px solid var(--orange); padding-top: var(--luft-m); }
.gruende h3 { font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); text-transform: uppercase; margin-bottom: 0.6rem; }
.gruende p { color: var(--tinte-2); margin: 0; }
@media (min-width: 52rem) { .gruende { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Ablauf: waagerechte Kette mit grossen Zahlen ---------- */
.ablauf { display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.ablauf > li { counter-increment: schritt; }
.ablauf > li::before {
  content: "0" counter(schritt);
  display: block; font-family: var(--tit); font-weight: 600;
  font-size: clamp(2.75rem, 2.1rem + 2.6vw, 4.25rem); line-height: 1;
  color: var(--orange); margin-bottom: var(--luft-s);
  border-bottom: 1px solid var(--linie-d); padding-bottom: 0.85rem;
}
.ablauf h3 { font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem); text-transform: uppercase; margin-bottom: 0.5rem; }
.ablauf p { color: rgba(255, 255, 255, 0.82); font-size: 1.0625rem; margin: 0; }
@media (min-width: 52rem) { .ablauf { grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 3vw, 3rem); } }

/* ---------- Saison-Teaser: Bild links, Aufruf rechts ---------- */
.saison__innen { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.saison img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--kante); }
/* Das Etikett markiert den Block als Saisonthema — dadurch ist erkennbar,
   dass hier spaeter ein anderer Inhalt stehen kann. */
/* Zwei Klassen plus Elementname: .saison p steht weiter unten im
   Stylesheet und haette bei gleicher Spezifitaet gewonnen. */
.saison p.saison__marke {
  display: inline-block; font-family: var(--tit); font-size: 0.9375rem;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; background: var(--orange-d);
  padding: 0.35rem 0.9rem; margin-bottom: var(--luft-m); border-radius: var(--kante);
}
.saison h2 { font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem); text-transform: uppercase; margin-bottom: var(--luft-s); }
.saison p { color: var(--tinte-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); margin-bottom: var(--luft-m); max-width: 44ch; }
@media (min-width: 48rem) { .saison__innen { grid-template-columns: 47fr 53fr; } }

/* ---------- Werkstatt ---------- */
.werkstatt__innen { display: grid; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
.werkstatt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--kante); }
.werkstatt h2 { font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem); text-transform: uppercase; margin-bottom: var(--luft-m); }
.werkstatt p { color: rgba(255, 255, 255, 0.86); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); max-width: 46ch; }
@media (min-width: 52rem) { .werkstatt__innen { grid-template-columns: 45fr 55fr; } }

/* ---------- Standort ---------- */
.standort__innen { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.standort h2 { font-size: clamp(1.5rem, 1.35rem + 0.7vw, 1.9375rem); text-transform: uppercase; margin-bottom: var(--luft-s); }
.standort address { font-style: normal; color: var(--tinte-2); margin-bottom: 0.75rem; font-size: 1.125rem; }
.standort__zusatz {
  font-family: var(--tit); font-size: 0.9375rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-d); margin: 0 0 var(--luft-m);
}
.standort__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.zeiten { margin: 0; }
.zeiten > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding-block: 0.8rem; border-bottom: 1px solid var(--linie); font-size: 1.0625rem;
}
.zeiten dt { font-family: var(--text); font-weight: 700; }
.zeiten dd { margin: 0; color: var(--tinte-2); }
@media (min-width: 48rem) { .standort__innen { grid-template-columns: 1fr 1fr; } }

/* ---------- Fuss ---------- */
.fuss {
  background: var(--anthrazit); color: rgba(255, 255, 255, 0.78);
  padding-block: var(--luft-m); font-size: 1rem;
}
.fuss__innen { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; }
.fuss__wort { font-family: var(--tit); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.06em; color: #fff; }