/* hauser.tankstelle – Website, Seitenebene. Baut auf tokens.css und bundle.css (Design-System v1) auf.
   Hier nur: Schriften, Textstile aus tokens.json, Seitenraster und Abschnitte der Website.
   Bausteine (ht-kopf, ht-band, ht-schritte, ht-notfall, ht-hinweis, ht-fuss, ht-btn) bleiben unverändert in bundle.css. */

/* Schriften – selbst gehostet, nicht von Google */
@font-face { font-family: "Fira Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/FiraSans-Light.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 300; font-style: italic; font-display: swap; src: url("../fonts/FiraSans-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/FiraSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Bitter-SemiBold.woff2") format("woff2"); }

/* Textstile (Namen und Werte aus tokens.json) */
.ht-display { font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 60px; letter-spacing: -0.01em; text-wrap: balance; }
.ht-h2 { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 34px; text-wrap: balance; }
.ht-h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 28px; text-wrap: balance; }
.ht-lead { font-size: 22px; line-height: 32px; font-weight: 300; }
.ht-body-s { font-size: 16px; line-height: 24px; font-weight: 300; }
.ht-small { font-size: 14px; line-height: 20px; font-weight: 300; }
.ht-label { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-muted); }
@media (max-width: 600px) { .ht-display { font-size: 40px; line-height: 44px; } }

/* Grundgerüst */
html { -webkit-text-size-adjust: 100%; }
body.ht-seite { background: var(--surface); color: var(--ink); }
:where(.ht-seite) :where(p, h1, h2, h3, ul, ol, dl, dd) { margin: 0; }

/* Korrektur zu bundle.css (bitte ins Design-System übernehmen): ".ht-seite a" (0,1,1) schlägt ".ht-btn" (0,1,0) –
   Links mit Button-Klasse bekamen Textfarbe ink auf action (unsichtbar) und einen Unterstrich. */
.ht-seite a.ht-btn { color: var(--on-action); text-decoration: none; }
.ht-seite a.ht-btn--sekundaer { color: var(--ink); }
.ht-seite .ht-invers a.ht-btn { color: var(--surface-inverse); }
.ht-seite .ht-invers a.ht-btn--sekundaer { color: var(--ink-inverse); }
.ht-seite img { max-width: 100%; }
.ht-inhalt { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .ht-inhalt { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }
.sprung { position: absolute; left: -9999px; top: 0; }
.sprung:focus { left: max(16px, env(safe-area-inset-left, 0px)); top: var(--space-2); z-index: 20; padding: var(--space-2) var(--space-4); background: var(--surface-raised); }
.fliess { max-width: var(--text-max); }
.stapel { display: grid; gap: var(--space-4); align-content: start; }
.kopf-titel { display: grid; gap: var(--space-2); }
.aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Kopfzeile: Raster der Inhaltsbreite, nur Logo (kein 24h-Störer daneben, Axel 29.10.) */
.ht-kopf { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .ht-kopf { padding-left: max(24px, env(safe-area-inset-left, 0px), calc((100% - var(--inhalt-max)) / 2 + 24px)); padding-right: max(24px, env(safe-area-inset-right, 0px), calc((100% - var(--inhalt-max)) / 2 + 24px)); } }
.kopf-marke { display: flex; align-items: center; gap: var(--space-5); }
.kopf-marke > a { display: block; line-height: 0; }
/* Logo größer als im Baustein (220 px), Innenabstand = Schutzzone (halbe Logohöhe) */
.ht-kopf .ht-kopf__logo { width: 280px; }
.ht-kopf { padding-top: var(--space-5); padding-bottom: var(--space-5); }
@media (max-width: 600px) { .ht-kopf .ht-kopf__logo { width: 240px; } .ht-kopf { padding-top: var(--space-4); padding-bottom: var(--space-3); } }

/* Abschnitte */
.abschnitt { padding-block: var(--space-8); }
.abschnitt--hell { background: var(--surface-raised); }
@media (max-width: 600px) { .abschnitt { padding-block: var(--space-7); } }
.zwei-spalten { display: grid; gap: var(--space-7); }
@media (min-width: 900px) { .zwei-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); } }
.zwei-spalten > * { min-width: 0; }

/* Held */
.held { padding-top: var(--space-8); padding-bottom: var(--space-7); display: grid; gap: var(--space-5); }
@media (max-width: 600px) { .held { padding-top: var(--space-6); } }
.held__zeile { display: grid; gap: var(--space-5); justify-items: start; }
.held .ht-lead { max-width: var(--text-max); text-wrap: pretty; }
.fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.fakten > div { display: grid; gap: var(--space-1); align-content: start; padding-top: var(--space-3); border-top: var(--rahmen) solid var(--ink); }
.fakten dt { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 34px; font-variant-numeric: tabular-nums; }
.fakten dd { font-size: 16px; line-height: 24px; }
@media (max-width: 900px) { .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); } }

/* Polygon-Kopf schließt nahtlos an den Sockel des dunklen Abschnitts an (gleicher Maßstab, gleiche Mitte) */
.ht-band--kopf.band-anschluss { height: auto; aspect-ratio: 2400 / 760; min-height: 200px; max-height: 520px; object-position: center bottom; }
.sockel { background-color: var(--ht-1); background-image: url("../bilder/ht_polygon_sockel_web.svg"); background-repeat: no-repeat; background-position: center top; background-size: max(100%, calc(200px * 2400 / 760)) auto; }
.label-invers { color: var(--ht-7); }

/* Versprechen */
.drei { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 900px) { .drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.drei > article { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-4); border-top: var(--rahmen) solid var(--ink); }
.ht-invers .drei > article { border-top-color: var(--ink-inverse); }

/* Kraftstoffschilder – Farben wie vor Ort (Schilderrahmen ht.1) */
.schilder { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 600px) { .schilder { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.schild { position: relative; display: grid; align-content: space-between; gap: var(--space-4); min-height: 104px; padding: var(--space-3) var(--space-3) var(--space-4); border: var(--rahmen) solid var(--ht-1); box-sizing: border-box; }
.schild__name { font-weight: 500; font-size: 18px; line-height: 22px; }
.schild__norm { font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.02em; }
.schild--diesel { background: var(--ht-1); color: var(--ht-weiss); }
.schild--e10 { background: var(--ht-7); color: var(--ht-1); }
.schild--super, .schild--plus { background: var(--ht-9); color: var(--ht-1); }
.schild--plus::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-2); height: 4px; background: var(--accent); }
.nebenleistung { list-style: none; padding: 0; display: grid; }
.nebenleistung li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-top: var(--rahmen-haar) solid var(--line); }
.nebenleistung li:last-child { border-bottom: var(--rahmen-haar) solid var(--line); }
.nebenleistung strong { font-weight: 500; }
@media (max-width: 480px) { .nebenleistung li { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Bezahlen und Tschipi */
.tabelle { display: grid; }
.tabelle > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-top: var(--rahmen-haar) solid var(--line); }
.tabelle > div:last-child { border-bottom: var(--rahmen-haar) solid var(--line); }
.tabelle dt { font-weight: 500; }
/* Akzeptanzzeichen: fremde Marken in Originalfarben, wie am Automaten-Aufkleber; Kachel kantig nach System */
.zahlzeichen { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.zahlzeichen li { line-height: 0; background: var(--ht-weiss); border: var(--rahmen-haar) solid var(--line); }
.zahlzeichen img { display: block; width: 76px; height: 50px; object-fit: contain; }
.stapel-klein { display: grid; gap: var(--space-2); justify-items: start; }
@media (max-width: 480px) { .tabelle > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.tschipi { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); background: var(--surface-raised); border: var(--rahmen-haar) solid var(--line); }
@media (max-width: 600px) { .tschipi { padding: var(--space-5) var(--space-4); } }
.vorteile { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.vorteile li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.vorteile li::before { content: ""; width: 8px; height: 8px; background: var(--ink); transform: translateY(-2px); }
.vorteile strong { font-weight: 500; }

/* Zeitleiste */
.zeitleiste { list-style: none; padding: 0; display: grid; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 900px) { .zeitleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zeitleiste li { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-3); border-top: var(--rahmen) solid var(--ink); }
.zeitleiste .jahr { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 34px; font-variant-numeric: tabular-nums; }

/* Hilfe und Kontakt */
.adresse { font-style: normal; }
.kontakt-zeile { white-space: nowrap; }

/* Hilfe: eigene Rubrik als dunkles Band */
.hilfe-band { padding-block: var(--space-7); }
.hilfe-band__raster { display: grid; gap: var(--space-5); align-items: end; }
@media (min-width: 900px) { .hilfe-band__raster { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); } }

/* Fußzeile nach dem Muster der Gruppe: Polygon am Anfang (Vorlage quer y 300–760),
   läuft nahtlos in den Sockel (y 760–1248) – gleicher Maßstab, gleiche Mitte */
.fuss { background: var(--surface); }
.fuss__polygon { display: block; width: 100%; height: 160px; object-fit: cover; object-position: center bottom; background: linear-gradient(to top, var(--ht-1) 3px, transparent 3px); } /* dunkler Grund gegen Haarlinie an der Naht */
@media (max-width: 600px) { .fuss__polygon { height: 112px; } }
.ht-fuss.fuss__sockel { --ht-fuss-bild: url("../bilder/ht_polygon_sockel_web.svg"); background-size: max(100%, calc(160px * 2400 / 760)) auto; background-repeat: no-repeat; background-position: center top; padding: var(--space-4) 0 var(--space-5); font-size: 16px; line-height: 24px; }
@media (max-width: 600px) { .ht-fuss.fuss__sockel { background-size: max(100%, calc(112px * 2400 / 760)) auto; } }
.fuss__raster { display: grid; gap: var(--space-6); align-items: start; }
/* Logo-Oberkante auf Höhe der Versalien der Dachzeile „Anschrift“ (14/20 px) */
@media (min-width: 900px) { .fuss__marke { padding-top: 7px; } }
@media (min-width: 900px) { .fuss__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); } }
.fuss__marke { display: grid; gap: var(--space-4); align-content: start; }
.fuss .ht-fuss__logo { width: 440px; max-width: 100%; height: auto; margin: 0; }
@media (max-width: 600px) { .fuss .ht-fuss__logo { width: 300px; } }
.fuss__spalte { display: grid; gap: 0; align-content: start; min-width: 0; } /* einheitlicher Zeilenabstand 24 px */
.fuss__titel { font-weight: 500; font-size: 14px; line-height: 24px; letter-spacing: 0.02em; color: var(--ht-7); }
.fuss__spalte ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.fuss address { font-style: normal; }
.fuss__leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-7); padding-top: var(--space-4); border-top: var(--rahmen-haar) solid var(--ht-3); font-size: 14px; line-height: 20px; }
.fuss__leiste .ht-fuss__links { margin: 0; }
.ht-fuss { padding-left: 0; padding-right: 0; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Rechtstexte (Impressum, Datenschutz) */
.ht-h1 { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 46px; text-wrap: balance; }
@media (max-width: 600px) { .ht-h1 { font-size: 32px; line-height: 38px; } }
.rechtstext__inhalt { max-width: var(--text-max); display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.rechtstext__inhalt h2 { margin-top: var(--space-4); }

/* Tschipi-Seite */
.nr-liste { list-style: none; margin: 0; padding: 0; counter-reset: nr; display: grid; gap: var(--space-5); }
.nr-liste > li { counter-increment: nr; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-top: var(--space-3); border-top: var(--rahmen) solid var(--ink); }
.nr-liste > li::before { content: counter(nr); font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 28px; font-variant-numeric: tabular-nums; }
.nr-liste > li > div { display: grid; gap: var(--space-1); }
.klein { font-size: 14px; line-height: 20px; }
.app-links { font-weight: 500; }
.sockel .app-links a { color: var(--ht-weiss); }
.b24-platz:empty { display: none; }