/* =========================================================================
   Albert Elligsen GmbH & Elli Oil – globales Stylesheet
   Eigenes Design-System (kein Framework)
   ========================================================================= */

/* ---- Design Tokens ------------------------------------------------------ */
:root {
    /* Elligsen Landhandel */
    --color-primary-green: #4a7c3f;
    --color-primary-green-dark: #2e5225;
    --color-accent-gold: #c9a84c;

    /* Elli Oil */
    --color-primary-oil: #1a6e3c;
    --color-primary-oil-dark: #0f4425;
    --color-accent-orange: #e8671a;

    /* Neutral */
    --color-white: #ffffff;
    --color-bg-light: #f5f5f0;
    --color-text-dark: #1a1a1a;
    --color-text-muted: #555555;
    --color-border: #dddddd;

    /* Aktives Theme (wird per Body-Klasse umgeschaltet) */
    --color-primary: var(--color-primary-green);
    --color-primary-dark: var(--color-primary-green-dark);
    --color-accent: var(--color-accent-gold);

    /* Typografie */
    --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Maße */
    --container: 1200px;
    --container-narrow: 820px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Schatten */
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, .08);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, .10);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .16);

    /* Abstände */
    --space-section: clamp(3rem, 7vw, 6.5rem);

    /* Transition */
    --t-fast: .18s ease;
    --t: .28s ease;

    --header-h: 76px;
}

/* Theme-Umschaltung über die Body-Klasse */
body.theme-oil {
    --color-primary: var(--color-primary-oil);
    --color-primary-dark: var(--color-primary-oil-dark);
    --color-accent: var(--color-accent-orange);
}

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

* { margin: 0; }

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

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;          /* 17px */
    line-height: 1.6;
    color: var(--color-text-dark);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { list-style: none; padding: 0; }

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.12;
    font-weight: 700;
    color: var(--color-text-dark);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

p { max-width: 70ch; }

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---- Helpers ------------------------------------------------------------ */
.container {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-section); }
.section--light { background: var(--color-bg-light); }
.section--tint  { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-white)); }

.text-center { text-align: center; }
.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .8rem;
    color: var(--color-primary);
    margin-bottom: .8rem;
}
.lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--color-text-muted); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: var(--color-primary);
    color: #fff;
    padding: .8rem 1.2rem;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    padding: .85rem 1.6rem;
    border-radius: var(--radius-pill);
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    text-decoration: none;
    line-height: 1;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-md); }

.btn--accent { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--accent:hover { filter: brightness(.94); }

.btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.65); }
.btn--ghost:hover { background: rgba(255,255,255,.14); }

.btn--outline { background: transparent; color: var(--color-primary-dark); border: 2px solid var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; }

/* =========================================================================
   Header & Navigation
   ========================================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--color-border);
}
/* Blur-Overlay als Pseudo-Element, damit position:fixed-Kinder (Mobile-Nav)
   nicht im backdrop-filter-Containing-Block gefangen sind (Safari-Bug). */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    z-index: -1;
}
.site-header__inner {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Marke / Logo */
.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand:hover { text-decoration: none; }
.brand__mark { flex: 0 0 auto; border-radius: 50%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.18rem;
    color: var(--color-text-dark);
    letter-spacing: -.01em;
}
.brand__text small { font-size: .72rem; color: var(--color-text-muted); letter-spacing: .02em; }

/* Navigation – Desktop */
.primary-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: .35rem; }
.nav-item { position: relative; }

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .6rem .85rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .98rem;
    color: var(--color-text-dark);
    transition: background var(--t-fast), color var(--t-fast);
}
.nav-link:hover { background: color-mix(in srgb, var(--color-primary) 12%, transparent); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--color-primary); }
.nav-caret { transition: transform var(--t-fast); }

/* Dropdowns */
.nav-sub {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 230px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: .5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
    z-index: 50;
}
.nav-item--has-sub:hover .nav-sub,
.nav-item--has-sub:focus-within .nav-sub,
.nav-sub-toggle[aria-expanded="true"] + .nav-sub {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-item--has-sub:hover .nav-caret,
.nav-sub-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-sublink {
    display: block;
    padding: .6rem .8rem;
    border-radius: 9px;
    font-weight: 500;
    font-size: .95rem;
    color: var(--color-text-dark);
}
.nav-sublink:hover { background: var(--color-bg-light); text-decoration: none; }
.nav-sublink[aria-current="page"] { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }

/* Hamburger */
.nav-toggle {
    display: none;
    margin-left: auto;
    width: 46px; height: 46px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.nav-toggle__bar {
    display: block;
    width: 24px; height: 2.5px;
    background: var(--color-text-dark);
    border-radius: 2px;
    transition: transform var(--t), opacity var(--t-fast);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
    position: relative;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55)),
        var(--hero-image, linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)));
    background-size: cover;
    background-position: center;
    padding-block: clamp(4rem, 12vw, 9rem);
}
.hero__inner { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.hero__content { max-width: 660px; }
.hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero__sub { font-size: clamp(1.1rem, 2vw, 1.4rem); margin-top: 1.1rem; color: rgba(255,255,255,.94); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

/* Hero mit Tankanzeige im Headerbild (Text links, Tafel rechts) */
.hero--tafel { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero--tafel .hero__inner {
    display: grid;
    grid-template-columns: 1.1fr minmax(300px, 420px);
    gap: clamp(1.8rem, 5vw, 4rem);
    align-items: center;
}
.hero--tafel .hero__content { max-width: none; }
.hero__tafel { width: 100%; }
.hero__tafel .preistafel { margin: 0; max-width: 420px; margin-left: auto; }

@media (max-width: 960px) {
    .hero--tafel .hero__inner { grid-template-columns: 1fr; }
    .hero__tafel .preistafel { margin-inline: auto; }
}

/* Schmaler Seiten-Hero (Unterseiten) */
.page-hero {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    background-size: cover;
    background-position: center;
    color: #fff;
    padding-block: clamp(3rem, 8vw, 5rem);
}
/* Variante mit Hintergrundfoto: dunkler Verlauf über dem Bild für Lesbarkeit.
   Bildpfad per Inline-Variable --page-hero-image setzen. */
.page-hero--image {
    background-color: var(--color-primary-dark);
    background-image:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary-dark) 82%, transparent),
            color-mix(in srgb, #000 58%, transparent)),
        var(--page-hero-image);
}
.page-hero__inner { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero p { color: rgba(255,255,255,.92); margin-top: .9rem; font-size: 1.15rem; }
.breadcrumb { font-size: .85rem; color: rgba(255,255,255,.8); margin-bottom: .8rem; }
.breadcrumb a { color: rgba(255,255,255,.95); }

/* =========================================================================
   Kachel-Navigation (Startseite)
   ========================================================================= */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.1rem;
}
@media (max-width: 720px) {
    .tile-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
    .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .7rem;
    padding: 1.6rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-dark);
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
    text-decoration: none;
}
.tile__icon {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-white));
}
.tile__icon img, .tile__icon svg { width: 38px; height: 38px; }
.tile__label { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }

/* =========================================================================
   Inhalts-Bausteine
   ========================================================================= */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
.split--media-first .split__media { order: -1; }
.split__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    object-fit: cover;
}
.split__body > * + * { margin-top: 1rem; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.4rem;
}
.card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.8rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__icon {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-white));
    color: var(--color-primary-dark);
    margin-bottom: 1rem;
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--color-text-muted); }

/* "Unseren Beitrag leisten" – drei Feature-Kacheln nebeneinander, zentriert,
   mit rundem Icon-Badge. */
.card-grid--feature { grid-template-columns: repeat(3, 1fr); }
.card--feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.2rem 1.6rem;
}
.card--feature .card__icon {
    width: 78px; height: 78px;
    border-radius: 50%;
    margin-bottom: 1.3rem;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-white));
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.card--feature .card__icon svg { width: 42px; height: 42px; }
.card--feature:hover .card__icon {
    background: var(--color-primary);
    color: #fff;
    transform: scale(1.06);
}
.card--feature p { max-width: 34ch; }

@media (max-width: 760px) {
    .card-grid--feature { grid-template-columns: 1fr; }
    .card--feature { padding: 1.8rem 1.4rem; }
}

.section-head { max-width: 60ch; margin-bottom: 2.6rem; }
.section-head--center { margin-inline: auto; text-align: center; }
/* Volle Breite: Überschrift nicht auf 60ch begrenzen (verhindert frühe
   Umbrüche). Lange Headlines wickeln ausgewogen statt im engen Block. */
.section-head--wide { max-width: none; }
.section-head--wide h2 { text-wrap: balance; }
/* Kurze Headline ohne Umbruch – ab Tablet einzeilig, auf Handy normal umbrechen. */
@media (min-width: 760px) {
    .h2--nowrap { white-space: nowrap; }
}

.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 1.6rem; margin-top: .55rem; }
.prose ul li::before {
    content: "";
    position: absolute; left: 0; top: .55em;
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--color-accent);
}

.info-banner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-white));
    border-left: 5px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
}

/* CTA-Band */
.cta-band {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 5vw, 3.4rem);
    text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.92); margin: .8rem auto 1.6rem; }

/* =========================================================================
   Tankpreis-Anzeige – „Preistafel" im Stil der Zapfsäulen-Anzeige
   ========================================================================= */

/* 7-Segment-Schrift (lokal gehostet, SIL OFL) */
@font-face {
    font-family: 'DSEG7';
    src: url('/assets/fonts/DSEG7Classic-Bold.woff2') format('woff2'),
         url('/assets/fonts/DSEG7Classic-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.preistafel {
    max-width: 440px;
    margin-inline: auto;
    background: linear-gradient(165deg, #557f59 0%, #3c6340 72%);
    border: 7px solid #e7e9e1;
    border-radius: 28px;
    padding: clamp(1.1rem, 4vw, 1.7rem);
    box-shadow: var(--shadow-lg), inset 0 0 0 3px rgba(255, 255, 255, .07);
}

.preistafel__logo {
    width: min(210px, 64%);
    margin: 0 auto clamp(1rem, 3vw, 1.4rem);
}
.preistafel__logo svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }

.preistafel__rows { display: grid; gap: .7rem; }

.tafel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(180deg, #3c413c, #2f3431);
    border-radius: 12px;
    padding: .55rem 1.1rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 3px rgba(0,0,0,.28);
}
.tafel-row__label {
    color: #ffffff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1rem, 4.4vw, 1.2rem);
    letter-spacing: .01em;
    white-space: nowrap;
}

/* LCD-Ziffern mit Geister-Segmenten */
.lcd { display: inline-flex; align-items: flex-start; line-height: 1; }
.lcd-cell {
    position: relative;
    display: inline-block;
    font-family: 'DSEG7', ui-monospace, 'Courier New', monospace;
}
.lcd-cell--big { font-size: clamp(1.7rem, 8.5vw, 2.3rem); }
.lcd-cell--sup { font-size: clamp(.9rem, 4.4vw, 1.2rem); margin-left: .14em; }
.lcd__ghost { color: rgba(255, 255, 255, .09); }
.lcd__val {
    position: absolute;
    inset: 0;
    color: #f6f8f1;
    text-shadow: 0 0 8px rgba(255,255,255,.45), 0 0 2px rgba(255,255,255,.55);
}
.lcd--empty .lcd__val { color: rgba(255,255,255,.35); text-shadow: none; }

/* Lade-Pulsieren der Geister-Segmente */
.tafel-row--loading .lcd__ghost { animation: tafelpulse 1.2s ease-in-out infinite; }
@keyframes tafelpulse { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }

/* Öffnungszeiten auf der Tafel */
.preistafel__hours {
    margin-top: clamp(.9rem, 3vw, 1.3rem);
    padding-top: .9rem;
    border-top: 1px solid rgba(255,255,255,.16);
    display: grid;
    gap: .1rem;
}
.preistafel__hours-row {
    display: flex;
    justify-content: center;
    gap: 1.4rem;
    color: rgba(255,255,255,.82);
    font-size: .88rem;
    padding: .18rem 0;
}
.preistafel__hours-row span:first-child { min-width: 62px; }

.preistafel__note {
    text-align: center;
    color: rgba(255,255,255,.62);
    font-size: .78rem;
    font-style: italic;
    margin: .9rem auto 0;
    max-width: 36ch;
}
.tafel-stand { color: rgba(255,255,255,.85); font-style: normal; }
.tafel-stale { color: #f0b15a; font-style: normal; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   Dezente Einblend-Animationen (Scroll-Reveal)
   Nur aktiv, wenn JS die Klasse .js-reveal am <html> gesetzt hat –
   ohne JS bleibt alles sofort sichtbar.
   ========================================================================= */
.js-reveal .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease-out, transform .55s ease-out;
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Hero-Inhalte beim Laden sanft einblenden */
.hero__content, .page-hero__inner {
    animation: hero-fade .7s ease-out both;
}
@keyframes hero-fade {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* =========================================================================
   Rundgang-Slider / Karussell
   ========================================================================= */
.rundgang-slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: #000;
    margin-top: 2rem;
}
.rundgang-slider__track {
    display: flex;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.rundgang-slide {
    flex: 0 0 100%;
    min-width: 0;
}
.rundgang-slide__img-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg-light);
}
.rundgang-slide__img-wrap--wide { aspect-ratio: 1000 / 504; background: var(--color-white); }
.rundgang-slide__img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rundgang-slide__caption {
    padding: 1.2rem 1.6rem 1.4rem;
    background: var(--color-white);
}
.rundgang-slide__caption h3 {
    font-size: 1.1rem;
    margin: 0 0 .3rem;
    color: var(--color-primary-dark);
}
.rundgang-slide__caption p {
    margin: 0;
    font-size: .93rem;
    color: var(--color-text-muted);
}

/* Pfeil-Buttons */
.slider-btn {
    position: absolute;
    top: calc(50% - 3rem);  /* etwas über Bildmitte, nicht über Caption */
    transform: translateY(-50%);
    z-index: 10;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(255,255,255,.88);
    color: var(--color-primary-dark);
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    transition: background var(--t-fast), box-shadow var(--t-fast);
}
.slider-btn:hover { background: var(--color-white); box-shadow: 0 4px 16px rgba(0,0,0,.22); }
.slider-btn--prev { left: .8rem; }
.slider-btn--next { right: .8rem; }

/* Punkte-Navigation */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: .45rem;
    padding: .8rem 0 .6rem;
    background: var(--color-white);
}
.slider-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    background: var(--color-border);
    transition: background var(--t-fast), transform var(--t-fast);
}
.slider-dot.is-active {
    background: var(--color-primary);
    transform: scale(1.25);
}

/* =========================================================================
   Stellenangebote (Karriere)
   ========================================================================= */
.job-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.6rem;
    overflow: hidden;
}
.job-card__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: .8rem 1.5rem;
    padding: 1.4rem 1.8rem;
    background: color-mix(in srgb, var(--color-primary-green) 6%, var(--color-white));
    border-bottom: 1px solid var(--color-border);
}
.job-card__title { font-size: 1.25rem; margin: 0 0 .25rem; }
.job-card__meta  { margin: 0; font-size: .88rem; color: var(--color-text-muted); }
.job-card__facts { text-align: right; }
.job-card__lohn {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-primary-green-dark);
}
.job-card__stunden { display: block; font-size: .85rem; color: var(--color-text-muted); margin-top: .15rem; }
.job-card__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem 2rem;
    padding: 1.5rem 1.8rem;
}
.job-card__col h4 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted);
    margin: 0 0 .6rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid color-mix(in srgb, var(--color-primary-green) 35%, transparent);
}
.job-card__col ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .93rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.job-card__col li {
    position: relative;
    padding-left: 1.1rem;
}
.job-card__col li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .48em;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--color-primary-green);
}
.job-card__foot {
    padding: 1rem 1.8rem 1.4rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}
@media (max-width: 760px) {
    .job-card__cols { grid-template-columns: 1fr; }
    .job-card__facts { text-align: left; }
}

/* =========================================================================
   Öffnungszeiten-Box
   ========================================================================= */
.hours-box {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.8rem;
    box-shadow: var(--shadow-sm);
}
.hours-list li {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--color-border);
}
.hours-list li:last-child { border-bottom: none; }
.hours-list span:first-child { font-weight: 600; }
.hours-note { margin-top: 1rem; font-size: .9rem; color: var(--color-text-muted); }

/* =========================================================================
   Formulare
   ========================================================================= */
.form { max-width: 640px; }
.form__row { display: grid; gap: .4rem; margin-bottom: 1.2rem; }
.form__row--two { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form label { font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.form .req { color: var(--color-accent-orange); }

.form input,
.form select,
.form textarea {
    font: inherit;
    width: 100%;
    padding: .8rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.form textarea { min-height: 160px; resize: vertical; }

.form__check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; }
.form__check input { width: auto; margin-top: .25rem; }
.form__check label { font-weight: 400; font-size: .95rem; color: var(--color-text-muted); }

/* Honeypot – visuell & für AT versteckt */
.form__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.form-alert {
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1.6rem;
    font-weight: 500;
}
.form-alert--ok    { background: color-mix(in srgb, var(--color-primary-green) 16%, var(--color-white)); border-left: 5px solid var(--color-primary-green); }
.form-alert--error { background: #fdeceb; border-left: 5px solid #c0392b; color: #7a221b; }
.field-error { color: #c0392b; font-size: .85rem; }
.form input.has-error, .form select.has-error, .form textarea.has-error { border-color: #c0392b; }

/* Kontakt-Layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(1.8rem, 4vw, 3.5rem);
    align-items: start;
}
.contact-info { background: var(--color-bg-light); border-radius: var(--radius-lg); padding: 1.8rem; }
.contact-info h3 { margin-bottom: 1rem; }
.contact-info p + p { margin-top: .8rem; }

/* ---- Standort-Karten (zwei Maps) --------------------------------------- */
.map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}
.map-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}
.map-card__head {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: 1.1rem 1.3rem;
}
.map-card__ic { width: 26px; flex: 0 0 26px; margin-top: .15rem; }
.map-card__head h3 { font-size: 1.15rem; }
.map-card__head p { color: var(--color-text-muted); font-size: .92rem; margin-top: .15rem; }
.map-card iframe { width: 100%; height: 300px; border: 0; display: block; background: var(--color-bg-light); }

/* Click-to-load-Platzhalter für Google Maps (DSGVO: Karte erst nach Klick laden) */
.map-consent {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.4rem;
    background:
        linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
        repeating-linear-gradient(45deg, var(--color-bg-light) 0 14px, var(--color-white) 14px 28px);
}
.map-consent__inner { max-width: 320px; }
.map-consent__icon { width: 34px; height: 34px; color: var(--color-primary); margin: 0 auto .5rem; }
.map-consent__txt { font-size: .86rem; color: var(--color-text-muted); margin: 0 0 .9rem; line-height: 1.5; }
.map-consent__btn {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    border: 0;
    border-radius: var(--radius);
    padding: .7rem 1.3rem;
    color: #fff;
    background: var(--color-primary);
}
.map-consent__btn:hover { background: color-mix(in srgb, #000 12%, var(--color-primary)); }
.map-card__link {
    display: block;
    text-align: center;
    padding: .85rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .92rem;
    background: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
}
.map-card__link:hover { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-light)); text-decoration: none; }

/* ---- Ansprechpartner ---------------------------------------------------- */
.team-dept {
    font-size: 1.15rem;
    margin: 2rem 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
}
.team-dept:first-of-type { margin-top: 0; }
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.1rem;
}
.person {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.person:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.person__name { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; }
.person__role { color: var(--color-primary); font-weight: 600; font-size: .85rem; margin: .15rem 0 .9rem; }
.person__contact { display: grid; gap: .35rem; }
.person__contact a {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--color-text-muted);
    word-break: break-word;
}
.person__contact a:hover { color: var(--color-primary-dark); text-decoration: none; }
.person__ic { width: 17px; flex: 0 0 17px; color: var(--color-primary); }

@media (max-width: 760px) {
    .map-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
    background: var(--color-primary-dark);
    color: rgba(255, 255, 255, .82);
}
.site-footer__inner {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 2.4rem;
    padding-block: clamp(2.6rem, 5vw, 4rem);
}
.footer-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: #fff; margin-bottom: .8rem; }
.footer-address { font-style: normal; line-height: 1.7; }
.footer-contact { margin-top: 1rem; }
.site-footer a { color: rgba(255, 255, 255, .82); }
.site-footer a:hover { color: #fff; }
.footer-heading { font-size: 1rem; color: #fff; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .08em; }
.footer-links li + li { margin-top: .55rem; }
.footer-hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.footer-hours-note { font-size: .85rem; margin-top: .8rem; }
.footer-social { display: flex; gap: .7rem; margin-top: 1.2rem; }
.footer-social a {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    transition: background var(--t-fast);
}
.footer-social a:hover { background: var(--color-accent); }

.site-footer__bar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    align-items: center;
    justify-content: space-between;
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
    padding-block: 1.2rem;
    font-size: .88rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* =========================================================================
   Responsive – Mobile-Navigation
   ========================================================================= */
@media (max-width: 920px) {
    .nav-toggle { display: flex; }

    .primary-nav {
        position: fixed;
        inset: var(--header-h) 0 0 auto;
        width: min(86vw, 360px);
        background: var(--color-white);
        border-left: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        padding: 1rem 1.1rem 2rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--t);
        margin-left: 0;
    }
    body.nav-open .primary-nav { transform: translateX(0); }
    body.nav-open { overflow: hidden; }

    .nav-list { flex-direction: column; align-items: stretch; gap: .15rem; }
    .nav-link { width: 100%; justify-content: space-between; padding: .85rem 1rem; font-size: 1.05rem; }

    /* Akkordeon-Dropdowns mobil */
    .nav-sub {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none;
        border-left: 2px solid var(--color-border);
        border-radius: 0;
        margin: .1rem 0 .4rem .8rem;
        padding: 0 0 0 .4rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--t);
    }
    .nav-sub-toggle[aria-expanded="true"] + .nav-sub { max-height: 520px; }

    .contact-grid,
    .form__row--two { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
    .split--media-first .split__media { order: 0; }

    .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .site-footer__inner { grid-template-columns: 1fr; }
    .brand__text small { display: none; }
    h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* =========================================================================
   Theme-Umschalter (Hell / Dunkel) – Button rechts neben „Kontakt"
   ========================================================================= */
.nav-item--theme { display: flex; align-items: center; }
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--color-text-dark);
    border: 1px solid var(--color-border);
    background: transparent;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.theme-toggle:hover {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
}
.theme-toggle__icon { width: 20px; height: 20px; }
.theme-toggle__icon--sun { display: none; }
html[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
html[data-theme="dark"] .theme-toggle__icon--sun  { display: block; }

/* Im Mobil-Menü als volle Zeile mit Beschriftung links */
@media (max-width: 920px) {
    .nav-item--theme { justify-content: flex-start; padding: .4rem .2rem; }
}

/* =========================================================================
   Dark Mode – aktiv über html[data-theme="dark"].
   Es werden NUR die neutralen Tokens (Flächen, Text, Rahmen, Schatten)
   gekippt; die Markenfarben (Grün/Orange/Gold) bleiben unverändert.
   ========================================================================= */
:root { color-scheme: light; }

html[data-theme="dark"] {
    color-scheme: dark;
    --color-white:      #1e2421;   /* Flächen: Karten, Header, Body, Inputs */
    --color-bg-light:   #161a18;   /* abgesetzte Bänder / Sektionen */
    --color-text-dark:  #e8e9e3;
    --color-text-muted: #a7a9a2;
    --color-border:     #353c38;
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, .45);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, .50);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .60);
}

/* Sanfter Übergang beim Umschalten (Theme wird vor dem Paint gesetzt -> kein Flash) */
body,
.site-header::before,
.nav-sub,
.primary-nav { transition: background-color var(--t), color var(--t), border-color var(--t); }

/* Header-Blur-Overlay im Dunkelmodus abdunkeln (war literal weiß) */
html[data-theme="dark"] .site-header::before { background: rgba(20, 24, 22, .9); }

/* Links auf dunklem Grund lesbar halten: Markenfarbe aufhellen */
html[data-theme="dark"] a { color: color-mix(in srgb, var(--color-primary) 55%, #ffffff); }
/* Footer behält seinen dunkelgrünen Grund -> eigene Linkfarben unverändert */
html[data-theme="dark"] .site-footer a       { color: rgba(255, 255, 255, .82); }
html[data-theme="dark"] .site-footer a:hover { color: #fff; }

/* Button-Schrift im Dunkelmodus durchgehend weiß. Wichtig vor allem für den
   Outline-Button (hatte dunkelgrünen Text). Diese Regel ist spezifischer als
   die obige Link-Regel und gewinnt daher auch bei <a class="btn">. */
html[data-theme="dark"] .btn          { color: #fff; }
html[data-theme="dark"] .btn--outline { border-color: var(--color-primary); }

/* Schnellzugriff-Kacheln: Schrift UND Icons (currentColor) im Dunkelmodus weiß.
   Überschreibt die generische Link-Aufhellung (Kacheln sind <a>). */
html[data-theme="dark"] .tile,
html[data-theme="dark"] .tile__label { color: #fff; }

/* Abschnitts-Label (eyebrow) im Dunkelmodus einheitlich in der Akzentfarbe des
   Bereichs (Gold = Landhandel, Orange = Elli Oil). !important, weil einige
   Eyebrows ihre Farbe per Inline-Style setzen und sonst uneinheitlich bleiben. */
html[data-theme="dark"] .eyebrow { color: var(--color-accent) !important; }

/* Navigation: einheitliche Linkfarbe (schwarz im Hell-, weiß im Dunkelmodus),
   unabhängig davon ob der Eintrag ein <a> oder ein <button> ist. Überschreibt
   im Dunkelmodus die generische Link-Aufhellung (sonst sind die <a>-Einträge
   grün, die Dropdown-Buttons aber weiß). */
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .nav-sublink { color: var(--color-text-dark); }
/* Aktiver Menüpunkt bleibt als Highlight (aufgehellte Markenfarbe). */
html[data-theme="dark"] .nav-link[aria-current="page"],
html[data-theme="dark"] .nav-sublink[aria-current="page"] {
    color: color-mix(in srgb, var(--color-primary) 55%, #fff);
}