/* ==========================================================================
   GREBE – Theme-Stylesheet
   Design-System: Swiss/Editorial, Navy als Klammer, Rot als sparsamer Akzent.
   Tokens kommen aus theme.json (--wp--preset--*). Hier nur Komponenten.
   ========================================================================== */

:root {
  --g-navy: var(--wp--preset--color--navy, #29225B);
  --g-navy-dark: var(--wp--preset--color--navy-dark, #1C1740);
  --g-red: var(--wp--preset--color--red, #BE1321);
  --g-line: var(--wp--preset--color--contrast-3, #D6D6DE);
  --g-muted: var(--wp--preset--color--contrast-2, #5B5B68);
  --g-ease: cubic-bezier(.22, .61, .36, 1);
  --g-t: 220ms;
  --g-header-h: 76px;
  --g-gutter: 1.5rem;
  --g-max: 1220px;
  /* Einheitlicher Satzspiegel fuer Kopf, Hero, Sektionen und Fuss */
  --g-inset: max(var(--g-gutter), calc((100% - var(--g-max)) / 2));
}

/* --------------------------------------------------------------------------
   1. Basis & Zugänglichkeit
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--g-header-h) + 16px); }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Zahlen, Preise, Öffnungszeiten immer in Tabellenziffern */
table, .g-num, .g-hours, .g-phone, time { font-variant-numeric: tabular-nums; }

/* Sichtbarer Fokusring – nie entfernen */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--g-red);
  outline-offset: 2px;
  border-radius: 2px;
}
.wp-block-navigation a:focus-visible { outline-offset: 4px; }

/* Skip-Link */
.skip-link.screen-reader-text:focus {
  background: var(--g-navy); color: #fff; padding: 14px 22px;
  left: 16px; top: 16px; z-index: 9999; border-radius: 4px;
  font-weight: 600; text-decoration: none; clip: auto !important; clip-path: none;
  width: auto; height: auto;
}

/* Touch-Ziele mindestens 44px */
.wp-block-navigation__container > .wp-block-navigation-item > a,
.g-topbar a, .g-footer a { min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .g-reveal { opacity: 1 !important; transform: none !important; }
}

/* Bilder nie verzerrt, Platz reserviert (CLS) */
img, video { max-width: 100%; height: auto; }
figure img { border-radius: 6px; }

/* --------------------------------------------------------------------------
   2. Wortmarke
   Originallogo der Unternehmensgruppe: Schriftzug GREBE in Navy mit rotem
   Oberschnitt. Da nur eine Bitmap vorliegt, wird die doppelt aufgeloeste
   Datei per srcset ausgeliefert; eine Vektorfassung ist beim Kunden
   angefragt (siehe UEBERGABE.md).
   -------------------------------------------------------------------------- */

.g-logo {
  display: inline-flex; flex-direction: column; gap: 4px;
  text-decoration: none; line-height: 1;
}
.g-logo:focus-visible { outline-offset: 6px; }
.g-logo__img { display: block; width: auto; height: 40px; }
.g-logo__sub {
  font-family: var(--wp--preset--font-family--heading);
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--g-muted);
}

/* Auf dunklem Grund steht das Navy-Logo auf einem hellen Feld,
   solange keine Negativfassung vorliegt. */
.g-logo--invert {
  background: #fff; border-radius: 6px;
  padding: .75rem 1rem; align-self: flex-start;
}
.g-logo--invert .g-logo__sub { color: var(--g-muted); }


/* --------------------------------------------------------------------------
   3. Kopfbereich
   -------------------------------------------------------------------------- */

/* Servicezeile über der Navigation */
.g-topbar {
  background: var(--g-navy-dark); color: #fff;
  font-size: .875rem; font-family: var(--wp--preset--font-family--heading);
}
.g-topbar__inner {
  padding: 0 var(--g-inset);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem 1.5rem; min-height: 42px;
}
.g-topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.g-topbar a:hover { text-decoration: underline; }
.g-topbar__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.g-topbar__note { color: rgba(255, 255, 255, .78); font-weight: 400; }
.g-topbar__ico { width: 16px; height: 16px; margin-right: .5rem; flex: none; }
/* Die Servicezeile braucht rund 900 px, sonst bricht sie auf zwei Zeilen um. */
@media (max-width: 919px) { .g-topbar__hide-s { display: none; } }

/* Sticky-Header */
.g-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--g-line);
  transition: box-shadow var(--g-t) var(--g-ease);
}
.g-header--stuck { box-shadow: 0 2px 16px rgba(41, 34, 91, .10); }
/* Der Gruppen-Block liefert padding-top/bottom als Inline-Style mit 0 aus,
   die Zeilenhoehe haengt damit allein am Inhalt: am Desktop am Kopf-Button,
   mobil nur am Logo. Die Mindesthoehe haelt beide Zustaende gleich hoch. */
.g-header__inner {
  padding: .75rem var(--g-inset);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 60px;
}

/* Navigation */
.g-nav .wp-block-navigation-item__content { color: var(--g-navy); text-decoration: none; padding: .5rem .25rem; }
.g-nav .wp-block-navigation-item { position: relative; }
.g-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: .25rem; right: .25rem; bottom: 2px;
  height: 2px; background: var(--g-red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--g-t) var(--g-ease);
}
.g-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.g-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.g-nav .wp-block-navigation__submenu-container {
  border: 1px solid var(--g-line); border-top: 3px solid var(--g-red);
  box-shadow: 0 12px 32px rgba(41, 34, 91, .14); border-radius: 0 0 6px 6px; padding: .5rem 0;
  min-width: 260px;
}
.g-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .625rem 1.25rem; width: 100%; }
/* Der Aufklapper steht auf Navy mit weisser Schrift - ein heller Hover-Grund
   loeschte die Beschriftung aus, deshalb hellt der Grund hier nur auf. */
.g-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #fff; }
.g-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
.g-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within {
  background: rgba(255, 255, 255, .12);
}

/* Button im Header */
.g-header .wp-block-button__link { white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. Sektionen & Typografie-Helfer
   -------------------------------------------------------------------------- */

/* Eyebrow / Kicker über Überschriften */
.g-eyebrow {
  font-family: var(--wp--preset--font-family--heading);
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--g-red);
  display: flex; align-items: center; gap: .625rem; margin-bottom: .75rem;
}
.g-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--g-red); flex: none; }
.has-navy-background-color .g-eyebrow,
.g-section--dark .g-eyebrow { color: #F08A93; }
.has-navy-background-color .g-eyebrow::before,
.g-section--dark .g-eyebrow::before { background: #F08A93; }

/* Lead-Absatz */
.g-lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--g-muted); }
.g-section--dark .g-lead, .has-navy-background-color .g-lead { color: rgba(255, 255, 255, .82); }

/* Dunkle Sektion: Überschriften und Text invertieren */
.g-section--dark, .has-navy-background-color, .has-navy-dark-background-color {
  color: #fff;
}
.g-section--dark :is(h1, h2, h3, h4, h5, h6),
.has-navy-background-color :is(h1, h2, h3, h4, h5, h6),
.has-navy-dark-background-color :is(h1, h2, h3, h4, h5, h6) { color: #fff; }
.g-section--dark a:not(.wp-block-button__link),
.has-navy-background-color a:not(.wp-block-button__link) { color: #fff; text-underline-offset: 3px; }

/* Roter Akzentstrich unter Überschriften */
.g-rule { width: 56px; height: 3px; background: var(--g-red); border: 0; margin: 0 0 1.25rem; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.g-hero {
  position: relative; background: var(--g-navy); color: #fff; overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
/* Diagonale Struktur statt Stockfoto-Platzhalter */
.g-hero::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background:
    radial-gradient(1100px 480px at 88% -10%, rgba(190, 19, 33, .32), transparent 62%),
    radial-gradient(900px 500px at 8% 108%, rgba(66, 58, 109, .85), transparent 60%);
}
.g-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .10;
  background-image: repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 26px);
}
.g-hero > * { position: relative; z-index: 1; }
.g-hero__inner { padding-inline: var(--g-inset); }
.g-hero h1 { color: #fff; max-width: 20ch; }
.g-hero__claim { font-size: clamp(1.125rem, 2vw, 1.375rem); color: rgba(255, 255, 255, .86); max-width: 56ch; line-height: 1.5; }
.g-hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2rem; }

/* Sekundärer Button auf dunklem Grund */
.g-btn-ghost .wp-block-button__link,
a.g-btn-ghost {
  background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .55);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: .9375rem;
  padding: .875rem 1.75rem; border-radius: 4px; display: inline-flex; align-items: center; gap: .5rem;
  transition: background var(--g-t) var(--g-ease), border-color var(--g-t) var(--g-ease);
}
.g-btn-ghost .wp-block-button__link:hover, a.g-btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* --------------------------------------------------------------------------
   6. Kennzahlen-Leiste
   -------------------------------------------------------------------------- */

.g-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px; overflow: hidden; margin-top: 3rem;
}
.g-stats--light { background: var(--g-line); border-color: var(--g-line); }
.g-stat { background: var(--g-navy); padding: 1.5rem 1.25rem; }
.g-stats--light .g-stat { background: #fff; }
.g-stat__num {
  font-family: var(--wp--preset--font-family--heading); font-weight: 700;
  font-size: clamp(1.875rem, 3.4vw, 2.5rem); line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; display: block;
}
.g-stats--light .g-stat__num { color: var(--g-navy); }
.g-stat__num sup { font-size: .5em; color: var(--g-red); }
.g-stats--light .g-stat__num sup { color: var(--g-red); }
.g-stat__label { display: block; margin-top: .5rem; font-size: .875rem; line-height: 1.4; color: rgba(255, 255, 255, .76); }
.g-stats--light .g-stat__label { color: var(--g-muted); }

/* --------------------------------------------------------------------------
   7. Karten-Raster (Produktwelten, Themen)
   -------------------------------------------------------------------------- */

.g-grid { display: grid; gap: 1.25rem; }
.g-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g-grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.g-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.g-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--g-line); border-radius: 8px;
  padding: 1.75rem 1.5rem 1.5rem; text-decoration: none; color: inherit;
  transition: transform var(--g-t) var(--g-ease), box-shadow var(--g-t) var(--g-ease), border-color var(--g-t) var(--g-ease);
}
.g-card::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  background: var(--g-accent, var(--g-navy)); border-radius: 8px 8px 0 0;
  transform: scaleX(0); transform-origin: left; transition: transform var(--g-t) var(--g-ease);
}
a.g-card:hover, a.g-card:focus-visible {
  transform: translateY(-3px); border-color: transparent;
  box-shadow: 0 4px 8px rgba(26, 26, 31, .05), 0 18px 40px rgba(41, 34, 91, .14);
}
a.g-card:hover::before, a.g-card:focus-visible::before { transform: scaleX(1); }

.g-card__icon {
  width: 48px; height: 48px; border-radius: 8px; margin-bottom: 1.125rem;
  display: grid; place-items: center; flex: none;
  background: var(--g-accent-bg, var(--wp--preset--color--navy-50, #F2F1F7));
}
.g-card__icon svg { width: 26px; height: 26px; stroke: var(--g-accent, var(--g-navy)); fill: none; stroke-width: 1.75; }
.g-card__title {
  font-family: var(--wp--preset--font-family--heading); font-weight: 700;
  font-size: 1.25rem; line-height: 1.25; color: var(--g-navy); margin: 0 0 .5rem;
}
.g-card__text { font-size: 1rem; line-height: 1.55; color: var(--g-muted); margin: 0 0 1.25rem; }
.g-card__more {
  margin-top: auto; font-family: var(--wp--preset--font-family--heading);
  font-weight: 600; font-size: .9375rem; color: var(--g-red);
  display: inline-flex; align-items: center; gap: .4375rem;
}
.g-card__more::after {
  content: ""; width: 16px; height: 8px; background: currentColor;
  clip-path: polygon(0 3px, 10px 3px, 10px 0, 16px 4px, 10px 8px, 10px 5px, 0 5px);
  transition: transform var(--g-t) var(--g-ease);
}
a.g-card:hover .g-card__more::after { transform: translateX(4px); }

/* Produktwelt-Akzentfarben */
.g-acc--heat { --g-accent: #C77800; --g-accent-bg: var(--wp--preset--color--amber-50, #FEF6E8); }
.g-acc--fuel { --g-accent: #29225B; --g-accent-bg: #F2F1F7; }
.g-acc--gas  { --g-accent: #C06A00; --g-accent-bg: var(--wp--preset--color--orange-50, #FDF3E6); }
.g-acc--lub  { --g-accent: #5B5B68; --g-accent-bg: #F2F2F4; }
.g-acc--fut  { --g-accent: #0E8C9E; --g-accent-bg: var(--wp--preset--color--teal-50, #E7F5F7); }
.g-acc--stat { --g-accent: #BE1321; --g-accent-bg: var(--wp--preset--color--red-50, #FDF0F1); }
.g-acc--log  { --g-accent: #423A6D; --g-accent-bg: #F2F1F7; }

/* --------------------------------------------------------------------------
   8. Tankstellen: Filter + Standortkarten
   -------------------------------------------------------------------------- */

.g-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.g-filter__btn {
  font-family: var(--wp--preset--font-family--heading); font-size: .875rem; font-weight: 600;
  padding: .625rem 1.125rem; min-height: 44px; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--g-navy); border: 1px solid var(--g-line);
  transition: all var(--g-t) var(--g-ease); display: inline-flex; align-items: center; gap: .5rem;
}
.g-filter__btn:hover { border-color: var(--g-navy); }
.g-filter__btn[aria-pressed="true"] { background: var(--g-navy); color: #fff; border-color: var(--g-navy); }
.g-filter__count { font-size: .8125rem; opacity: .7; font-variant-numeric: tabular-nums; }

.g-stations { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g-station {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--g-line); border-radius: 8px; overflow: hidden;
  transition: box-shadow var(--g-t) var(--g-ease), transform var(--g-t) var(--g-ease);
}
.g-station:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(26,26,31,.05), 0 18px 40px rgba(41,34,91,.13); }
.g-station[hidden] { display: none; }
.g-station__head {
  background: var(--g-navy); color: #fff; padding: 1.125rem 1.25rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.g-station__name { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.125rem; line-height: 1.25; margin: 0; color: #fff; }
.g-station__place { font-size: .8125rem; color: rgba(255,255,255,.72); margin: .25rem 0 0; letter-spacing: .04em; text-transform: uppercase; }
.g-station__brand {
  font-family: var(--wp--preset--font-family--heading); font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; background: #fff; color: var(--g-navy);
  padding: .25rem .5rem; border-radius: 3px; flex: none;
}
.g-station__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .875rem; flex: 1; }
.g-station__row { display: flex; gap: .75rem; font-size: .9375rem; line-height: 1.5; }
.g-station__row svg { width: 18px; height: 18px; flex: none; margin-top: .1875rem; stroke: var(--g-navy); fill: none; stroke-width: 1.75; }
.g-station__row a { color: var(--g-navy); text-decoration: none; font-weight: 600; }
.g-station__row a:hover { text-decoration: underline; }

.g-pill {
  display: inline-flex; align-items: center; gap: .375rem;
  font-family: var(--wp--preset--font-family--heading); font-size: .75rem; font-weight: 700;
  letter-spacing: .04em; padding: .25rem .625rem; border-radius: 999px; white-space: nowrap;
}
.g-pill--247 { background: #E6F2E7; color: #1F5C22; }
.g-pill--hours { background: var(--wp--preset--color--base-3, #EDEDF1); color: #45454F; }

.g-tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: auto; padding-top: .25rem; }
.g-tag {
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  padding: .3125rem .5625rem; border-radius: 4px;
  background: var(--wp--preset--color--navy-50, #F2F1F7); color: var(--g-navy);
  border: 1px solid var(--wp--preset--color--navy-100, #E0DEEA);
}
.g-tag--alt { background: var(--wp--preset--color--teal-50, #E7F5F7); color: #0A6B79; border-color: #C4E4E9; }
.g-tag--truck { background: var(--wp--preset--color--orange-50, #FDF3E6); color: #94530A; border-color: #F5DCBC; }

.g-station__foot { border-top: 1px solid var(--g-line); display: flex; }
.g-station__foot a {
  flex: 1; text-align: center; padding: .875rem .75rem; min-height: 44px;
  font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: .875rem;
  text-decoration: none; color: var(--g-navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .4375rem;
  transition: background var(--g-t) var(--g-ease);
}
.g-station__foot a:hover { background: var(--wp--preset--color--navy-50, #F2F1F7); }
.g-station__foot a + a { border-left: 1px solid var(--g-line); }
.g-station__foot svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; }

.g-empty {
  display: none; padding: 2.5rem 1.5rem; text-align: center; color: var(--g-muted);
  border: 1px dashed var(--g-line); border-radius: 8px;
}
.g-empty--show { display: block; }

/* --------------------------------------------------------------------------
   9. Tabellen (Öffnungszeiten, Kraftstoff-Matrix)
   -------------------------------------------------------------------------- */

.g-tablewrap { overflow-x: auto; border: 1px solid var(--g-line); border-radius: 8px; }
.g-table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 560px; }
.g-table th, .g-table td { padding: .875rem 1rem; text-align: left; border-bottom: 1px solid var(--g-line); }
.g-table thead th {
  background: var(--g-navy); color: #fff; font-family: var(--wp--preset--font-family--heading);
  font-size: .8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  position: sticky; top: 0;
}
.g-table tbody tr:nth-child(even) { background: var(--wp--preset--color--base-2, #F9F9FB); }
.g-table tbody tr:hover { background: var(--wp--preset--color--navy-50, #F2F1F7); }
.g-table tbody tr:last-child td { border-bottom: 0; }
.g-table td:first-child { font-weight: 600; color: var(--g-navy); }
.g-yes { color: #1F5C22; font-weight: 700; }
.g-no { color: var(--g-line); }

/* --------------------------------------------------------------------------
   10. Hinweis-/Infoboxen
   -------------------------------------------------------------------------- */

.g-note {
  display: flex; gap: 1rem; padding: 1.25rem 1.5rem; border-radius: 8px;
  border: 1px solid var(--g-line); border-left: 4px solid var(--g-navy);
  background: var(--wp--preset--color--base-2, #F9F9FB); font-size: 1rem; line-height: 1.6;
}
.g-note svg { width: 22px; height: 22px; flex: none; margin-top: .125rem; stroke: var(--g-navy); fill: none; stroke-width: 1.75; }
.g-note--warn { border-left-color: var(--wp--preset--color--orange, #E8820C); background: var(--wp--preset--color--orange-50, #FDF3E6); }
.g-note--warn svg { stroke: #94530A; }
.g-note--danger { border-left-color: var(--g-red); background: var(--wp--preset--color--red-50, #FDF0F1); }
.g-note--danger svg { stroke: var(--g-red); }
.g-note strong { color: var(--g-navy); }

/* Bereitschaftsdienst-Block */
.g-standby {
  background: var(--g-navy); color: #fff; border-radius: 10px; padding: 2rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; justify-content: space-between;
}
.g-standby h3 { color: #fff; margin: 0 0 .5rem; }
.g-standby p { margin: 0; color: rgba(255,255,255,.82); max-width: 52ch; }
.g-standby__tel {
  font-family: var(--wp--preset--font-family--heading); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem); color: #fff; text-decoration: none;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: .75rem;
}
.g-standby__tel:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   11. Vertrauens-Leiste (Zertifikate)
   -------------------------------------------------------------------------- */

.g-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; }
.g-trust__item { display: flex; gap: .875rem; align-items: flex-start; }
.g-trust__badge {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--wp--preset--color--navy-50, #F2F1F7); border: 1px solid var(--wp--preset--color--navy-100, #E0DEEA);
}
.g-trust__badge svg { width: 22px; height: 22px; stroke: var(--g-navy); fill: none; stroke-width: 1.75; }
.g-trust__name { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1rem; color: var(--g-navy); margin: 0 0 .125rem; }
.g-trust__desc { font-size: .875rem; line-height: 1.45; color: var(--g-muted); margin: 0; }
.g-section--dark .g-trust__badge { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.g-section--dark .g-trust__badge svg { stroke: #fff; }
.g-section--dark .g-trust__name { color: #fff; }
.g-section--dark .g-trust__desc { color: rgba(255,255,255,.72); }

/* --------------------------------------------------------------------------
   12. Wertschöpfungskette (Vom Lager bis zur Zapfsäule)
   -------------------------------------------------------------------------- */

.g-chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; counter-reset: chain; }
.g-chain__step {
  position: relative; padding: 1.5rem 1.25rem; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); counter-increment: chain;
}
.g-chain__step::before {
  content: "0" counter(chain);
  font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: .875rem;
  color: #F08A93; letter-spacing: .08em; display: block; margin-bottom: .625rem;
}
.g-chain__step h4 { color: #fff; margin: 0 0 .375rem; font-size: 1.0625rem; }
.g-chain__step p { margin: 0; font-size: .9375rem; line-height: 1.5; color: rgba(255,255,255,.76); }

/* --------------------------------------------------------------------------
   13. Ansprechpartner
   -------------------------------------------------------------------------- */

.g-person {
  display: flex; gap: 1.25rem; padding: 1.5rem; background: #fff;
  border: 1px solid var(--g-line); border-radius: 8px; align-items: flex-start;
}
.g-person__ini {
  width: 60px; height: 60px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--g-navy); color: #fff;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.25rem; letter-spacing: .02em;
}
.g-person__name { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.0625rem; color: var(--g-navy); margin: 0; }
.g-person__role { font-size: .875rem; color: var(--g-muted); margin: .125rem 0 .625rem; }
.g-person__links { display: flex; flex-direction: column; gap: .25rem; font-size: .9375rem; }
.g-person__links a { color: var(--g-navy); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.g-person__links a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. Fußbereich
   -------------------------------------------------------------------------- */

.g-footer { background: var(--g-navy-dark); color: rgba(255,255,255,.76); }
.g-footer__inner { padding: 4rem var(--g-inset) 0; }
.g-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2.5rem; }
.g-footer h2, .g-footer h3, .g-footer h4 {
  color: #fff; font-size: .8125rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 1.125rem;
}
.g-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .125rem; }
.g-footer a { color: rgba(255,255,255,.76); text-decoration: none; font-size: .9375rem; }
.g-footer a:hover { color: #fff; text-decoration: underline; }
.g-footer__addr { font-size: .9375rem; line-height: 1.7; font-style: normal; }
.g-footer__addr strong { color: #fff; }
.g-footer__bottom {
  margin-top: 3.5rem; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; justify-content: space-between;
  font-size: .875rem;
}
.g-footer__legal { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   15. Sticky-CTA (mobil)
   -------------------------------------------------------------------------- */

.g-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: 1px; background: var(--g-line);
  box-shadow: 0 -2px 16px rgba(41,34,91,.16);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.g-sticky-cta a {
  flex: 1; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: .9375rem;
  text-decoration: none; background: #fff; color: var(--g-navy);
}
.g-sticky-cta a.is-primary { background: var(--g-red); color: #fff; }
.g-sticky-cta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (max-width: 781px) {
  .g-sticky-cta { display: flex; }
  body { padding-bottom: 56px; }
}

/* --------------------------------------------------------------------------
   16. Scroll-Reveal (dezent, respektiert reduced motion)
   -------------------------------------------------------------------------- */

.g-reveal { opacity: 0; transform: translateY(14px); transition: opacity 480ms var(--g-ease), transform 480ms var(--g-ease); }
.g-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   17. Inhalt/Layout-Feinschliff
   -------------------------------------------------------------------------- */

/* Absätze und Listen im Fließtext lesefreundlich begrenzen */
.entry-content p, .entry-content li { max-width: 72ch; }
.entry-content :is(h2) { margin-top: 2.5rem; }
.entry-content :is(h3) { margin-top: 2rem; }

/* Breadcrumb */
.g-crumbs { font-size: .875rem; color: var(--g-muted); display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }
.g-crumbs a { color: var(--g-muted); text-decoration: none; }
.g-crumbs a:hover { color: var(--g-navy); text-decoration: underline; }
.g-crumbs span[aria-hidden] { opacity: .5; }

/* Seitenkopf für Unterseiten */
.g-pagehead { background: var(--g-navy); color: #fff; padding-block: clamp(2.5rem, 5vw, 4rem); }
.g-pagehead h1 { color: #fff; margin: .5rem 0 0; }
.g-pagehead .g-crumbs, .g-pagehead .g-crumbs a { color: rgba(255,255,255,.7); }
.g-pagehead .g-crumbs a:hover { color: #fff; }
.g-pagehead__lead { margin: 1rem 0 0; max-width: 62ch; font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); color: rgba(255,255,255,.84); line-height: 1.55; }

/* Zwei-Spalten-Textblock */
.g-split { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .g-split { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; } }

/* Definitionsliste für Fakten */
.g-facts { display: grid; gap: 0; border-top: 1px solid var(--g-line); margin: 0; }
.g-facts > div { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--g-line); }
.g-facts dt { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: .9375rem; color: var(--g-navy); margin: 0; }
.g-facts dd { margin: 0; font-size: .9375rem; line-height: 1.55; }

/* Bild-Platzhalter, bis echte Fotos vorliegen */
.g-imgph {
  position: relative; border-radius: 8px; overflow: hidden; display: grid; place-items: center;
  min-height: 260px; background: linear-gradient(160deg, #29225B 0%, #1C1740 100%); color: rgba(255,255,255,.62);
  font-family: var(--wp--preset--font-family--heading); font-size: .8125rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 1.5rem;
}
.g-imgph::after {
  content: ""; position: absolute; inset: 0; opacity: .12;
  background-image: repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 22px);
}
.g-imgph span { position: relative; z-index: 1; }

/* Druck */
@media print {
  .g-topbar, .g-header, .g-sticky-cta, .g-footer__legal { display: none !important; }
  .g-hero, .g-pagehead { background: #fff !important; color: #000 !important; }
  .g-hero h1, .g-pagehead h1 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}

/* --------------------------------------------------------------------------
   18. Anfrageformular
   -------------------------------------------------------------------------- */

.g-form {
  background: #fff; border: 1px solid var(--g-line); border-radius: 10px;
  padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 780px;
}
.g-form__row { display: grid; gap: 0 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .g-form__row { grid-template-columns: 1fr 1fr; } }

.g-field { display: flex; flex-direction: column; gap: .4375rem; margin: 0 0 1.25rem; }
.g-field label {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600; font-size: .9375rem; color: var(--g-navy);
}
.g-field input[type="text"], .g-field input[type="tel"], .g-field input[type="email"],
.g-field select, .g-field textarea {
  font-family: inherit; font-size: 1.0625rem; line-height: 1.5; color: var(--wp--preset--color--contrast, #1A1A1F);
  padding: .75rem .875rem; min-height: 48px; width: 100%;
  background: #fff; border: 1px solid var(--g-line); border-radius: 5px;
  transition: border-color var(--g-t) var(--g-ease), box-shadow var(--g-t) var(--g-ease);
}
.g-field textarea { min-height: 150px; resize: vertical; }
.g-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329225B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .875rem center; background-size: 20px;
  padding-right: 2.75rem;
}
.g-field :is(input, select, textarea):focus {
  border-color: var(--g-navy); outline: 3px solid rgba(41, 34, 91, .25); outline-offset: 0;
  box-shadow: none;
}
.g-field--error :is(input, select, textarea) { border-color: var(--g-red); border-width: 2px; }
.g-field__error { color: var(--wp--preset--color--red-dark, #A20F1C); font-size: .875rem; font-weight: 600; }
.g-req { color: var(--g-red); }
.g-opt { color: var(--g-muted); font-weight: 400; font-size: .875rem; }

.g-field--check { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .75rem; }
.g-field--check input { width: 22px; height: 22px; min-height: 22px; margin-top: .1875rem; flex: none; accent-color: var(--g-navy); }
.g-field--check label { font-weight: 400; font-size: .9375rem; line-height: 1.5; flex: 1; min-width: 240px; color: var(--wp--preset--color--contrast, #1A1A1F); }
.g-field--check .g-field__error { flex-basis: 100%; }

.g-form__hint { font-size: .875rem; color: var(--g-muted); margin: -.75rem 0 1.5rem; }
.g-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: .5rem 0 0; }
.g-form__actions .g-form__hint { margin: 0; }
.g-form button[type="submit"] {
  font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1rem;
  background: var(--g-red); color: #fff; border: 2px solid var(--g-red); border-radius: 4px;
  padding: .9375rem 2rem; min-height: 52px; cursor: pointer;
  transition: background var(--g-t) var(--g-ease), border-color var(--g-t) var(--g-ease);
}
.g-form button[type="submit"]:hover { background: var(--wp--preset--color--red-dark, #A20F1C); border-color: var(--wp--preset--color--red-dark, #A20F1C); }

/* Honeypot – für Menschen unsichtbar, für Screenreader ausgeblendet */
.g-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.g-formnote { border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1.75rem; line-height: 1.6; }
.g-formnote--ok { background: #E6F2E7; border-left: 4px solid var(--wp--preset--color--success, #2E7D32); color: #1F5C22; }
.g-formnote--error { background: var(--wp--preset--color--red-50, #FDF0F1); border-left: 4px solid var(--g-red); color: var(--wp--preset--color--red-dark, #A20F1C); }
.g-formnote ul { margin: .625rem 0 0; padding-left: 1.25rem; }
.g-formnote a { color: inherit; }

/* --------------------------------------------------------------------------
   19. Satzspiegel im Seiteninhalt

   WordPress zentriert im constrained-Layout jedes Kind einzeln über
   auto-Margins. Das lässt Überschriften mit Lesebreite nach innen rutschen,
   während Kartenraster die volle Breite nutzen – die linke Kante bricht.

   Deshalb: Die Sektion trägt den zentrierenden Rand, ihre Kinder stehen
   alle an derselben linken Kante. Fließtext behält seine Lesebreite.
   -------------------------------------------------------------------------- */

/* Der Seiteninhalt selbst traegt keinen Rand - jede Sektion bringt ihren mit,
   damit vollflaechige Baender wirklich bis an den Rand laufen. */
.entry-content.wp-block-post-content { padding-left: 0 !important; padding-right: 0 !important; }

.entry-content > .wp-block-group,
.g-pagehead {
  padding-left: var(--g-inset) !important;
  padding-right: var(--g-inset) !important;
}

.entry-content > .wp-block-group > *,
.g-pagehead > * {
  max-width: none;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Lesebreiten – lange Zeilen ermüden, besonders die ältere Zielgruppe */
.entry-content > .wp-block-group > :is(p, ul, ol, dl):not(.g-eyebrow) { max-width: 72ch; }
.entry-content > .wp-block-group > .g-lead,
.g-pagehead > .g-pagehead__lead { max-width: 62ch; }
.entry-content > .wp-block-group > :is(h3, h4) { max-width: 30ch; }
.entry-content > .wp-block-group > h2,
.g-pagehead > h1 { max-width: 22ch; }

/* Hero bringt seinen eigenen Innenabstand mit */
.entry-content > .g-hero { max-width: none !important; width: 100%; margin-inline: 0; }

/* Abstand zwischen Einleitung und folgendem Baustein */
.entry-content > .wp-block-group > .g-lead + * { margin-top: 2.5rem; }

/* Rasterspalten fest definieren, damit sechs Karten nicht 4 + 2 brechen */
@media (min-width: 600px) and (max-width: 959px) {
  .g-grid--2, .g-grid--3, .g-grid--4, .g-stations { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .g-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .g-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .g-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .g-stations { grid-template-columns: repeat(3, 1fr); }
}

.g-form { margin-left: 0; }

/* Vollbreite Sektionen: WordPress zieht alignfull-Bloecke um den Root-Rand
   nach aussen. Da der Seiteninhalt hier keinen Rand mehr hat, entfaellt
   dieser Ausgleich - sonst ragen die Baender ueber den Viewport hinaus. */
.entry-content > .wp-block-group.alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   21. Abstandsskala
   WordPress mischt seine Standard-Spacing-Skala unter die Theme-Stufen und
   gewinnt bei gleichen Slugs - "spacingScale": {"steps": 0} genuegt dafuer
   nicht. Damit die Sektionsabstaende des Entwurfs gelten, setzen wir die
   Stufen hier verbindlich. Werte identisch zu theme.json.
   -------------------------------------------------------------------------- */

:root {
  --wp--preset--spacing--10: 0.5rem !important;
  --wp--preset--spacing--20: 1rem !important;
  --wp--preset--spacing--30: 1.5rem !important;
  --wp--preset--spacing--40: 2.5rem !important;
  --wp--preset--spacing--50: 4rem !important;
  --wp--preset--spacing--60: 6rem !important;
  --wp--preset--spacing--70: 8rem !important;
}

/* Auf kleinen Displays weniger Luft, damit die Seite nicht auseinanderfaellt */
@media (max-width: 781px) {
  :root {
    --wp--preset--spacing--50: 2.75rem !important;
    --wp--preset--spacing--60: 3.5rem !important;
    --wp--preset--spacing--70: 4.5rem !important;
  }
}

/* --------------------------------------------------------------------------
   22. Kopfbereich auf mittleren Breiten
   Das Overlay-Menue des Navigations-Blocks greift erst unter 600 px. Dazwischen
   wird die Zeile eng, deshalb entfaellt dort der Kopf-Button - den
   Handlungsaufruf uebernimmt die Leiste am unteren Rand. Das !important ist
   noetig, weil die Layout-Styles des Buttons-Blocks nach diesem Stylesheet
   ausgegeben werden und bei gleicher Spezifitaet gewinnen.
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
  .g-header .g-header__cta { display: none !important; }
}
@media (min-width: 600px) and (max-width: 960px) {
  .g-nav { font-size: .875rem; }
  .g-nav .wp-block-navigation__container { gap: 1.25rem !important; }
}

/* Zwischen 782 und 959 px stehen Logo, Navigation und Kopf-Button gemeinsam
   in der Zeile - die Layout-Styles des Gruppen-Blocks bringen flex-wrap: wrap
   mit, die Zeile brach dort also auf zwei Reihen um. Etwas engere Abstaende
   und ein kompakterer Button halten sie zusammen. */
@media (min-width: 782px) and (max-width: 959px) {
  .g-header__inner { gap: .75rem; }
  .g-header__inner > .wp-block-group { gap: .75rem !important; }
  .g-nav .wp-block-navigation__container { gap: .875rem !important; }
  .g-header__cta .wp-block-button__link {
    padding-left: .875rem !important; padding-right: .875rem !important;
    font-size: .875rem;
  }
}

/* Zwei hell hinterlegte Sektionen hintereinander brauchen nur einen Abstand */
.entry-content > .wp-block-group:not(.has-background) + .wp-block-group:not(.has-background) {
  padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
   23. Overlay-Menue (unter 600 px)
   Der Navigations-Block erbt die Rechtsbuendigkeit aus der Kopfzeile. Fuer
   eine untereinander stehende Liste ist das falsch, deshalb wird hier links
   ausgerichtet. Die erste Ebene traegt die rote Linie dauerhaft, die zweite
   Ebene bekommt denselben Hover-Grund wie der Aufklapper am Desktop.
   Die !important-Angaben richten sich gegen die Overlay-Styles des
   Navigations-Blocks, die nach diesem Stylesheet ausgegeben werden.
   -------------------------------------------------------------------------- */

.g-nav .wp-block-navigation__responsive-container.is-menu-open,
.g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  --navigation-layout-justification-setting: flex-start;
  --navigation-layout-align: flex-start;
  --navigation-layout-justify: flex-start;
  text-align: left;
}
.g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
}
.g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.75rem; }

/* Erste Ebene: rote Linie dauerhaft, Breite folgt dem Text */
.g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  position: relative; display: inline-flex; width: auto !important;
  padding: .25rem 0 .5rem !important;
  font-size: 1.0625rem; font-weight: 700;
}
.g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
  left: 0; right: 0; bottom: 0; transform: scaleX(1);
}

/* Zweite Ebene: volle Zeilenbreite als Hover-Flaeche */
.g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  gap: .125rem !important;
  padding: .75rem 0 0 !important;
}
.g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block; width: 100%;
  padding: .625rem 1rem !important;
}
/* Der Overlay-Modus setzt die Eintraege hart auf transparent, deshalb hier
   ebenfalls !important. */
.g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
.g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within {
  background-color: rgba(255, 255, 255, .12) !important;
}

/* --------------------------------------------------------------------------
   24. Fokus in der Navigation
   Der globale Fokusring legte sich als roter Kasten um den Menueeintrag.
   Im Menue uebernimmt stattdessen der bekannte Hover-Zustand die Anzeige -
   sichtbar fuer die Tastatur, aber ohne Rahmen.
   -------------------------------------------------------------------------- */

.g-nav .wp-block-navigation-item__content:focus-visible,
.g-nav .wp-block-navigation__submenu-icon:focus-visible,
.g-nav .wp-block-navigation__responsive-container-open:focus-visible,
.g-nav .wp-block-navigation__responsive-container-close:focus-visible {
  outline: none;
}
.g-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after {
  transform: scaleX(1);
}
.g-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background: rgba(255, 255, 255, .12);
}
.g-nav .wp-block-navigation__responsive-container-open:focus-visible,
.g-nav .wp-block-navigation__responsive-container-close:focus-visible {
  box-shadow: 0 0 0 2px currentColor;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   25. Verlinkter Stationsname
   Seit die Standorte eigene Detailseiten haben, ist der Name auf der Karte
   ein Link. Er soll aussehen wie zuvor die Ueberschrift.
   -------------------------------------------------------------------------- */

.g-station__name a {
  color: inherit; text-decoration: none;
}
.g-station__name a:hover,
.g-station__name a:focus-visible {
  text-decoration: underline; text-underline-offset: 3px;
}