/* ===========================================================================
   heimseiten.de – Design-Tokens & Basis (natives CSS mit Nesting)
   Variablen-Konvention wie contao57.heimseiten.com (--color_N …)
   Werte aus dem Live-Design (heimseiten.de)
   =========================================================================== */
:root {
    interpolate-size: allow-keywords;

    /************************************** COLORS */
    --color_1: #7cab16;            /* heimseiten-Grün (Primärfarbe) */
    --color_1_bright: #8fc41d;
    --color_2: #629100;            /* dunkleres Grün (Footer-Streifen/Hover) – Live-Wert */
    --color_3: #333333;            /* dunkler Text / Überschriften */
    --color_4: #f2f2f2;            /* helle Fläche (Header-/Footer-BG) */
    --color_5: #ffffff;
    --white_alternate: #f8f8f8;

    --header_background: rgba(255, 255, 255, 0.95);
    --header_top_background: #f2f2f2;
    --footer_background: #f2f2f2;
    --footer_font_color: #444;

    /************************************** FONTS */
    --font_family: "Open Sans", Helvetica, Arial, sans-serif;
    --font_color: #555555;
    --font_size: 16px;
    --font_size_small: 12px;
    --font_size_big: 18px;
    --font_weight: 400;
    --font_weight_strong: 600;
    --line_height: 1.7;

    /************************************** WIDTHS */
    --content_width: 1024px;
    /* vom text-image-positioning-Bundle im grid-template-columns der Media-Split-Blöcke gebraucht;
       fehlte (bei der Live-CSS-Umwandlung verloren) → calc() ungültig → Grid brach auf 1 Spalte zusammen. */
    --content_margin: 20px;
    --header_width: 1240px;
    --footer_width: 1200px;

    /************************************** HEIGHTS */
    --header_height: 130px;
    --header_height_mobile: 51px;
    --info_row_height: 40px;

    /************************************** BORDER */
    --border_color: #dddddd;
    --border_radius: 3px;
    --border_width: 1px;
    --header_border_bottom: 1px solid var(--border_color);
    --article_border-bottom: 0;

    /************************************** GRIDS */
    --cell_min_width: 200px;
    --grid_gap: 60px;
    @media (max-width: 1023px) { --grid_gap: 20px; }

    /************************************** SPACES */
    --horizontal_spacing: 20px;
    @media (max-width: 1023px) { --horizontal_spacing: 10px; }
    --vertical_spacing: 60px;
    @media (max-width: 1023px) { --vertical_spacing: 20px; }
    --image_margin: 60px;
    @media (max-width: 1023px) { --image_margin: 20px; }

    /************************************** FORMS */
    --form_gap: 15px;
    --form_input_padding: 8px;
    --field_height: 38px;
    --input_border_radius: var(--border_radius);

    /************************************** BUTTONS */
    --button_background_color: var(--color_1);
    --button_font_color: #fff;
    --button_border_color: var(--color_1);
    --button_border_width: 1px;
    --button_border_radius: var(--border_radius);
    --button_font_size: 1em;
    --button_font_weight: var(--font_weight_strong);
    --button_padding: 10px 22px;
    --button_hover_background_color: var(--color_2);
    --button_hover_font_color: #fff;

    /************************************** ANIMATIONS */
    --tr: all 0.25s ease-in-out;
    --fade_duration: 1.2s;
    --move_duration: 1.2s;
    --ivp_animation_delay: 0s;

    /************************************** NAVIGATION (Core-a11y-Nav)
       Mobil-Optik + Animationen 1:1 von der Referenz contao57.heimseiten.com übernommen
       (deren Werte aus files/layout/css/style.css; Markenfarben via var(--color_1) = grün).
       --nav-font-size bleibt 16px: die DESKTOP-Nav ist pixelgenau an der alten Live-Seite
       abgenommen (Live-Original 16px) — c57s 20px gilt nur für deren Demo. */
    --nav-breakpoint: 1024;
    /* KEIN var(--font_color) wie bei c57: live-design.css überschreibt --font_color mit dem
       RGB-TRIPEL „85 85 85" (fürs dortige rgb(var(--font_color)/x)-Muster) → als Farbwert in
       conic-gradient/color ungültig → ganze Deklaration invalid-at-computed-value (Pfeil-Icon
       der Core-Nav verschwand!). Daher konkrete Farbe (= heimseiten-Textfarbe #555). */
    --nav-color: #555;
    --nav-active-color: var(--color_1);
    --nav-item-line-height: 1.5;
    --nav-font-size: 16px;
    --nav-font-weight: 400;
    --nav-icon-background: transparent;
    --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%237cab16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>');
    --nav-mobile-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%237cab16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>');
    --nav-mobile-background: #fff;
    --nav-mobile-color: #555;   /* s.o.: nicht var(--font_color) — live-design macht daraus ein Tripel */
    --nav-mobile-active-background: #f8f8f8;
    --nav-mobile-active-color: var(--color_1);
    --nav-mobile-active-border-color: var(--color_1);
    --nav-mobile-btn-clr: var(--color_1);
    --nav-mobile-separator-color: #ddd;
    --nav-mobile-padding: 0px 20px 20px;
    --nav-mobile-font-size: 18px;
    --nav-mobile-backdrop-height: 0;
    --nav-submenu-background: #fff;
    --nav-burger-line-color: var(--color_1);
}

/************************************** RESET / BASIS */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
script, .invisible:not(:focus):not(:focus-within) { /* skip-link bleibt fokussierbar */ }
.invisible { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed; clip: auto; width: auto; height: auto; top: 8px; left: 8px; z-index: 1000; background: #fff; color: var(--color_1); padding: 10px 16px; border-radius: var(--border_radius); }

body {
    /* Startwert für den Scroll-Fortschritt: theme.js setzt --scroll erst bei DOMContentLoaded —
       ohne Fallback war `bottom: calc(var(--scroll)*1000px)` am .slogan bis dahin invalid
       (bottom:auto → „simple is beautiful" stand kurz unter der Navigation und sprang dann). */
    --scroll: 0;
    margin: 0;
    font-family: var(--font_family);
    font-size: var(--font_size);
    line-height: var(--line_height);
    color: var(--font_color);
    background: #fff;
    overflow-x: clip; /* Off-Canvas-Mobilmenü erzeugt keinen horizontalen Scroll */
}

::selection { background: var(--color_1); color: #fff; }

.error { color: #c0392b; margin-bottom: 1em; line-height: 1.2; font-size: 0.9em; }

/************************************** FOKUS (Barrierefreiheit) */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--color_1); outline-offset: 2px; border-radius: 2px; }

/************************************** SCROLL */
[id] { scroll-margin-top: 2em; }
html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    /* Versatz fuer Anker-Landungen = Hoehe des fixen Headers AM ZIEL: beim
       Tief-Scrollen ist er GESCHRUMPFT (130 -> 83, siehe Header-Schrumpf in
       heimseiten.css) — die volle Hoehe liesse 47px Vorgaenger sichtbar.
       Anker-Luft je Element ueber [id]{scroll-margin-top} (oben). */
    scroll-padding: 83px 0 0;
    @media (max-width: 1023px) { scroll-padding: var(--header_height_mobile, 51px) 0 0; }
}
.preload * { transition: none !important; }

/************************************** SANFTE SEITENÜBERGÄNGE (View Transitions) */
@view-transition { navigation: auto; }
main::view-transition-old(root) { animation: fade-out 0.4s ease forwards; }
main::view-transition-new(root) { animation: fade-in 0.4s ease forwards; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }