/* b2b.it-sp.net — handgeschrieben, kein Build-Schritt, keine fremde Schrift.
   Farben und Geometrie nach dem Entwurf, Abschnitt 3. */

:root {
  --orange:      #f6a034;  /* die einzige Buntfarbe */
  --grund:       #17171a;  /* warmes Dunkelgrau, kein reines Schwarz */
  --flaeche:     #1f1f23;  /* Kacheln, Formularfelder */
  --linie:       #2e2e34;  /* Linien und Ränder */
  --text:        #ffffff;
  --neben:       #9a9aa2;  /* Nebentext, 6,3:1 auf dem Grundton */
  --auf-orange:  #4a350c;  /* Text auf orangefarbener Fläche, 5,5:1 */
  --breite:      1180px;
  --fuge:        12px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Helvetica Neue", Inter, system-ui, -apple-system, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* Sprungziele nicht unter den festen Kopf schieben. Der Wert muss über der Kopfhöhe
   liegen, und die hängt an der Breite: gemessen 72,6 px ab 840 px Breite, 176,5 px im
   Band 601–627 px (dort bricht die Navigation in drei Zeilen) und 149,0 px unter 435 px.
   Ein fester Wert für alle Breiten schiebt das Sprungziel schmal unter den Kopf — die
   beiden Medienabfragen weiter unten ziehen ihn deshalb nach. */
:target { scroll-margin-top: 90px; }

img, svg { max-width: 100%; }

a { color: var(--orange); }
a:hover { color: var(--text); }

/* Fokus sichtbar, überall. Ohne das ist die Seite mit der Tastatur unbenutzbar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

/* --- Sprunglink: erst bei Fokus sichtbar (Entwurf §9) ------------------- */
.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--orange);
  color: var(--auf-orange);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}
.sprunglink:focus { left: 0; }

/* --- Kopf --------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(23, 23, 26, 0.94);
  border-bottom: 1px solid var(--linie);
}
@supports (backdrop-filter: blur(8px)) {
  .kopf { backdrop-filter: blur(8px); }
}
.kopf__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.kopf__marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.kopf__marke img { width: 130px; height: auto; display: block; }

/* Das B2B-Zeichen: eckige Fläche, weil es eine Fläche ist und kein Knopf */
.kopf__b2b {
  color: var(--auf-orange);
  background: var(--orange);
  font-weight: 700;
  font-size: 14px;
  padding: 3px 9px;
  line-height: 1.3;
}

.kopf__nav { display: flex; align-items: center; gap: 22px; margin-left: auto; flex-wrap: wrap; }

/* Das :not(.knopf) ist die Behebung eines Kaskadenfehlers, nicht Kosmetik (gemessen
   12.08.2026): ".kopf__nav a" hat Spezifität (0,1,1) und schlug damit ".knopf--voll" (0,1,0).
   Der auffälligste Knopf der Seite — "Anfrage stellen" im Kopf — rendete deshalb WEISS auf
   #f6a034, ein Kontrast von 2,10:1 und weit unter AA, und in 16 px statt der 15 px aus
   .knopf--klein. Behoben wird die Kaskade und nicht die Farbe: die Navigationsregel
   beansprucht den Knopf gar nicht mehr, und er trägt dieselbe Farbe und Größe wie jeder
   andere "knopf--voll knopf--klein".

   Warum kein !important: es müsste ZWEIMAL gesetzt werden. Auch ".kopf__nav a:hover" (0,2,1)
   schlägt ".knopf--voll:hover" (0,2,0) — ein !important nur an der Grundfarbe hätte den
   Knopf beim Überfahren wieder weiß gemacht. Und die Regel .kopf__zurueck darunter zeigt,
   wohin dieser Weg führt: sie braucht ihre beiden !important, weil sie mit (0,1,0) gegen
   diese Regel verliert — vor der Änderung gegen (0,1,1), jetzt gegen (0,2,1). Ihre Lage
   wird dadurch nicht besser und nicht schlechter; ein drittes !important wäre eine
   Verschlechterung gewesen.

   Der Selektor selbst ist der Prüfgegenstand in tests/faelle/09-annahme.php (Fall 17): eine
   Prüfung auf "color: var(--auf-orange)" wäre auch VOR der Behebung grün gewesen, denn die
   Zeile stand die ganze Zeit da und wurde nur überstimmt. */
.kopf__nav a:not(.knopf) { color: var(--text); text-decoration: none; font-size: 16px; }
.kopf__nav a:not(.knopf):hover { color: var(--orange); }
.kopf__zurueck { color: var(--neben) !important; font-size: 15px !important; }

/* --- Knöpfe: Pillen ---------------------------------------------------- */
.knopf {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 22px;
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.knopf--voll { background: var(--orange); color: var(--auf-orange); }
.knopf--voll:hover { background: #ffb455; color: var(--auf-orange); }
.knopf--rand { background: transparent; color: var(--text); border-color: var(--linie); }
.knopf--rand:hover { border-color: var(--orange); color: var(--orange); }
.knopf--klein { padding: 8px 16px; font-size: 15px; }

/* --- Hero -------------------------------------------------------------- */
.hero { padding: 76px 0 64px; border-bottom: 1px solid var(--linie); }
.hero__vorspann { color: var(--neben); font-size: 15px; margin: 0 0 18px; }
.hero h1 {
  margin: 0 0 22px;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero h1 em { color: var(--orange); font-style: normal; }
.hero__text { max-width: 62ch; color: var(--neben); margin: 0 0 30px; font-size: 18px; }
.hero__text a { color: var(--orange); }
.hero__knoepfe { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero__nummer { color: var(--text); text-decoration: none; font-weight: 600; margin-left: 6px; }

/* --- Abschnittsköpfe: Titel, Haarlinie, rechts eine sachliche Angabe --- */
.abschnitt { padding: 72px 0; border-bottom: 1px solid var(--linie); }
.abschnittskopf { display: flex; align-items: baseline; gap: 16px; margin: 0 0 32px; }
.abschnittskopf h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.abschnittskopf .linie { flex: 1 1 auto; height: 1px; background: var(--linie); }
.abschnittskopf .angabe { color: var(--neben); font-size: 14px; text-align: right; }

/* --- Kachelraster ------------------------------------------------------ */
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fuge); }

.kachel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 0;            /* Flächen sind eckig */
  color: var(--text);
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.kachel__zeichen {
  width: 46px;
  height: 46px;
  border-radius: 14px;         /* Zeichen sind weich gerundet */
  background: rgba(246, 160, 52, 0.14);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background-color .15s, color .15s;
}
.kachel__zeichen svg { width: 24px; height: 24px; display: block; }
.kachel h3 { margin: 0; font-size: 19px; font-weight: 600; }
.kachel p { margin: 0; color: var(--neben); font-size: 16px; flex: 1 1 auto; }
.kachel__mehr { color: var(--orange); font-weight: 600; font-size: 15px; }

.kachel:hover, .kachel:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--auf-orange);
}
.kachel:hover p, .kachel:focus-visible p,
.kachel:hover .kachel__mehr, .kachel:focus-visible .kachel__mehr {
  color: var(--auf-orange);
}
.kachel:hover .kachel__zeichen, .kachel:focus-visible .kachel__zeichen {
  background: rgba(74, 53, 12, 0.16);
  color: var(--auf-orange);
}

/* Die zehnte Kachel. Bis zum 12.08.2026 füllte sie als neunte die Lücke, die acht Bereiche
   in drei Spalten lassen — mit dem neunten Bereich gibt es diese Lücke bei drei Spalten
   nicht mehr, und sie stünde allein in einer vierten Reihe. Deshalb spannt sie hier über die
   ganze Reihe. Bei ZWEI Spalten wird das in der Medienabfrage unten zurückgenommen: dort
   lassen neun Bereiche genau eine Lücke frei, und die füllt sie wieder. Beide Hälften sind
   am gelieferten Stylesheet geprüft (tests/faelle/09-annahme.php, Fall 17). */
.kachel--anfrage {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--auf-orange);
  justify-content: space-between;
  grid-column: 1 / -1;
}
.kachel--anfrage h3 { font-size: 19px; }
.kachel--anfrage p { color: var(--auf-orange); }
.kachel--anfrage .knopf {
  background: var(--auf-orange);
  color: var(--orange);
  align-self: flex-start;
}
.kachel--anfrage .knopf:hover { background: var(--grund); color: var(--orange); }

/* --- Die Bereiche im Einzelnen ---------------------------------------- */
.bereich {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid var(--linie);
}
.bereich:first-of-type { border-top: 0; padding-top: 0; }
.bereich__kopf { display: flex; flex-direction: column; gap: 12px; }
.bereich__zeichen {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(246, 160, 52, 0.14);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bereich__zeichen svg { width: 24px; height: 24px; display: block; }
.bereich h3 { margin: 0; font-size: 20px; font-weight: 600; }
.bereich p { margin: 0 0 16px; color: var(--neben); max-width: 68ch; }
.bereich ul { margin: 0 0 18px; padding: 0; list-style: none; }
.bereich li { position: relative; padding-left: 20px; margin-bottom: 7px; }
.bereich li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--orange);
}

/* --- Über uns --------------------------------------------------------- */
.ueberuns { max-width: 72ch; }
.ueberuns p { color: var(--neben); }
.ueberuns p:first-child { color: var(--text); font-size: 19px; }

/* --- Reservierte Zonen: fertig gestylt, Markup folgt später ----------- */
.zone {
  border: 1px solid var(--linie);
  border-radius: 0;
  background: var(--flaeche);
  padding: 24px;
}
.zonen-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fuge);
  align-items: center;
}
.zonen-raster > * { display: flex; align-items: center; justify-content: center; min-height: 88px; }

/* --- Kontakt ---------------------------------------------------------- */
.kontakt { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--fuge); }
.kasten { background: var(--flaeche); border: 1px solid var(--linie); padding: 26px; }

.feld { margin-bottom: 18px; }
/* NICHTS, WAS BEDEUTUNG TRÄGT, GEHT UNTER 16 px.
   Feldbeschriftungen, die Schlüssel einer Definitionsliste und die Einwilligung sind kein
   Beiwerk, sondern der Text, an dem sich der Leser orientiert. 16 px ist die übliche
   Untergrenze für bedeutungstragenden Text; auf dunklem Grund mit einem mittleren Grau
   liest sich weniger noch kleiner, als es ist. Betroffen sind außer dieser Regel:
   .ankreuz label (Einwilligung zum Datenschutzhinweis — die kleinste Schrift der Seite war
   der falsche Ort dafür), .anschrift dt und .anschrift__zusage (Anschriftenblock),
   .rechtstext dt (dasselbe Muster, rechtlich empfindlicher: Impressum und
   Datenschutzerklärung) und .fehlermeldung.
   Die Ausnahme ist .fehlermeldung mit 15 px: sie steht unter der Feldbeschriftung und darf
   nicht größer werden als diese — die zusätzliche Strichstärke trägt dort den Rest.
   Festgenagelt am AUSGELIEFERTEN Stylesheet in tests/faelle/09-annahme.php, Abschnitt 16;
   eine Rückkehr auf 14/15 px fiele sonst niemandem auf. */
.feld label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.feld .frei { color: var(--neben); font-weight: 400; }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="date"],
.feld select,
.feld textarea {
  width: 100%;
  background: var(--grund);
  color: var(--text);
  border: 1px solid var(--linie);
  border-radius: 0;            /* Formularfelder sind eckig */
  padding: 11px 12px;
  font: inherit;
  font-size: 16px;             /* unter 16px zoomt iOS beim Antippen hinein */
}
.feld textarea { min-height: 130px; resize: vertical; }
.feld select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--neben) 50%),
                    linear-gradient(135deg, var(--neben) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.feld--fehler input,
.feld--fehler select,
.feld--fehler textarea { border-color: var(--orange); }
/* 15 px und nicht 16 — die einzige Ausnahme von der Untergrenze bei .feld label, und der
   Grund steht dort. */
.fehlermeldung {
  display: block;
  color: var(--orange);
  font-size: 15px;
  font-weight: 600;
  margin-top: 6px;
}

.feld--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fuge); }

.ankreuz { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.ankreuz input { margin-top: 5px; flex: none; width: 17px; height: 17px; accent-color: var(--orange); }
/* 16 px, siehe die Untergrenze bei .feld label: hier steht die Einwilligung zum
   Datenschutzhinweis. */
.ankreuz label { font-weight: 400; font-size: 16px; margin: 0; }

/* Das unsichtbare Zusatzfeld. Nicht display:none — manche Skripte überspringen
   ausgeblendete Felder gerade deshalb. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bestaetigung {
  border-left: 3px solid var(--orange);
  background: rgba(246, 160, 52, 0.10);
  padding: 16px 18px;
  margin: 0 0 24px;
}
.bestaetigung strong { display: block; margin-bottom: 4px; }
.fehlerliste {
  border-left: 3px solid var(--orange);
  background: rgba(246, 160, 52, 0.10);
  padding: 16px 18px;
  margin: 0 0 24px;
}
.fehlerliste ul { margin: 8px 0 0; padding-left: 20px; }

.anschrift dl { margin: 0; }
/* 16 px und 600, siehe die Untergrenze bei .feld label: das sind die Schlüssel einer
   Definitionsliste ("Anschrift", "Telefon", "Geschäftszeiten"), sie tragen Bedeutung. */
.anschrift dt { color: var(--neben); font-size: 16px; font-weight: 600; margin-top: 18px; }
.anschrift dt:first-child { margin-top: 0; }
.anschrift dd { margin: 4px 0 0; }
.anschrift a { color: var(--text); text-decoration: none; }
.anschrift a:hover { color: var(--orange); }
/* 16 px, siehe die Untergrenze bei .feld label. */
.anschrift__zusage {
  color: var(--neben);
  font-size: 16px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--linie);
}

/* --- Rechtsseiten ----------------------------------------------------- */
.rechtstext { max-width: 74ch; padding: 56px 0 72px; }
/* Beide Klassen sitzen auf demselben Element (impressum.php, datenschutz.php). Die
   Kurzschreibweise oben steht später als .huelle und setzt deren seitliche 24 px auf 0
   zurück — unter rund 700 px klebte der Text dann an beiden Rändern, während Kopf und Fuß
   ihren Abstand behielten (gemessen bei 375 px: paddingLeft 0px, Textkante bei x = 0).
   Nur die Kombination wird hier korrigiert, damit .rechtstext für sich unverändert bleibt.
   box-sizing: border-box steht ganz oben, die 74ch werden also nicht breiter. */
.huelle.rechtstext { padding: 56px 24px 72px; }
.rechtstext h1 { font-size: 32px; font-weight: 700; margin: 0 0 28px; letter-spacing: -0.01em; }
.rechtstext h2 { font-size: 20px; font-weight: 600; margin: 38px 0 12px; }
.rechtstext h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
.rechtstext p, .rechtstext li { color: var(--neben); }
.rechtstext p { margin: 0 0 14px; }
.rechtstext ul { margin: 0 0 16px; padding-left: 22px; }
.rechtstext li { margin-bottom: 6px; }
.rechtstext dl { margin: 0 0 20px; }
/* 16 px und 600, siehe die Untergrenze bei .feld label. Heute trägt keine Rechtsseite eine
   Definitionsliste — impressum.php und datenschutz.php gliedern mit <h2> und <p>. Die Regel
   bleibt trotzdem richtig gesetzt: sie wartet auf das nächste <dl> auf einer Rechtsseite,
   und dort wäre eine 14-px-Beschriftung schlechter aufgehoben als irgendwo sonst. Wer sie
   ersatzlos streichen will, streicht auch den Prüffall dazu. */
.rechtstext dt { color: var(--neben); font-size: 16px; font-weight: 600; margin-top: 14px; }
.rechtstext dd { margin: 3px 0 0; color: var(--text); }

/* --- Fuß -------------------------------------------------------------- */
.fuss { padding: 30px 0 40px; }
.fuss__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 10px 22px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--neben);
  font-size: 15px;
}
.fuss a { color: var(--neben); text-decoration: none; }
.fuss a:hover { color: var(--orange); }

/* --- Responsiv: 3 → 2 → 1 Spalte ------------------------------------- */
@media (max-width: 900px) {
  /* Über der hier größten gemessenen Kopfhöhe (176,5 px bei 601–627 px Breite) */
  :target { scroll-margin-top: 190px; }

  /* Bricht die Navigation unter die Marke, soll sie dort auch anfangen und nicht
     rechtsbündig kleben, was links eine große Leere lässt. space-between statt
     margin-left: 0 allein: bei 840–900 px steht die Navigation noch in derselben Zeile
     wie die Marke, und dort gehört sie weiterhin an den rechten Rand — eine einzelne
     Flex-Zeile richtet sich unter space-between am Anfang aus, eine geteilte an beiden
     Rändern. Beides gemessen. */
  .kopf__innen { justify-content: space-between; }
  .kopf__nav { margin-left: 0; }

  .raster { grid-template-columns: repeat(2, 1fr); }
  /* Hier ist das Spannen aus der Grundregel gerade falsch: neun Bereiche lassen bei zwei
     Spalten genau eine Lücke frei, und die Anfrage-Kachel gehört hinein. */
  .kachel--anfrage { grid-column: auto; }
  .zonen-raster { grid-template-columns: repeat(2, 1fr); }
  .kontakt { grid-template-columns: 1fr; }
  .bereich { grid-template-columns: 1fr; gap: 14px; }
  .bereich__kopf { flex-direction: row; align-items: center; gap: 14px; }
  .abschnitt { padding: 56px 0; }
  .hero { padding: 52px 0 46px; }
}

@media (max-width: 600px) {
  /* Über der hier größten gemessenen Kopfhöhe (149,0 px unter 435 px Breite) */
  :target { scroll-margin-top: 165px; }

  .raster { grid-template-columns: 1fr; }
  .zonen-raster { grid-template-columns: 1fr; }
  .feld--zwei { grid-template-columns: 1fr; }
  .abschnittskopf { flex-wrap: wrap; }
  .abschnittskopf h2 { white-space: normal; }
  .abschnittskopf .linie { display: none; }
  .abschnittskopf .angabe { flex: 1 1 100%; text-align: left; }
  .kopf__nav { gap: 14px; }
  .kopf__nav .knopf { display: none; }   /* der Knopf steht im Hero, hier kostet er nur Platz */
}

/* --- Bewegung nur, wenn sie gewünscht ist (Entwurf §9) --------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}