/* import gekapseltes CSS einzelner Module 
Beschreibunmg Modul entnehmen: zusätzlich einrichten
- Benutzuerelemente
- HTML-Element in template.html
- notwendige css-Regel in style.css
- javaScript mit own-js.js
*/
@import url("news-box.css");    /* NewsBox Aktuelles / Werbung */
@import url("info-box.css");  /* Info wie Te. ausserhalb; per Flag einblenden */
@import url("hover-box.css");   /* Bild als Link bei Hover mit Ovrlay-Text */
@import url("scroll-top.css");  /* Top Button */
@import url("link-box.css");    /* Link (Text, Bild) in Box auf gesamten Inhalt ausdehnen */
/* =================================================================
   Stand August 2025
Media-Queries: in jede .css eingügen
@media (max-width: 550px) {}
@media (min-width: 768px) {}
@media (min-width: 1024px) {}
@media (min-width: 1200px) {}
   ================================================================ */
/* =========================================================
   VARIABLES  &  COLOR SYSTEM
   ========================================================= */
:root {
    /* — Grundfarben — */
    --clr-bg:            #f5fbf4;
    --clr-text:          #183217;

    --clr-primary:       #3f7d3a;
    --clr-primary-dark:  #2e5c28;
    --clr-primary-light: #cae8c5;

    --clr-white:         #ffffff;
    --clr-muted:         #4c6649;
    --clr-overlay:       rgba(255, 255, 255, .85);

    /* — Layoutgrößen — */
    --header-h:       400px;   /* volle Headerhöhe (Desktop) */
    --header-logo-w:  180px;    /* Breite Logobild im header, links */
    --sidebar-w:      260px;    /* Breite Sidebar mit navigation und Newsboxen */
    --sidebar-gap:    1.5rem;   /* Abstand Newsboxen */

    /* — Radius — */
    --ecke-rund:      none;
    --ecke-flxbx:     5px;
    
}    

/* =========================================================
   GLOBAL RESET & BASE STYLES
   ========================================================= */
* { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; scroll-behavior:smooth; }
body {
    display:flex; flex-direction:column; position:relative;
    min-height:100%; padding-bottom:64px; margin:0 auto;
    max-width:1920px;
    font:16px/1.5 'Roboto',sans-serif; color:var(--clr-text);
    background:var(--clr-bg);
}
html, body { overflow-x: hidden; }

/* =========================================================
   HEADER (Logo + Titelbild)
   ========================================================= */
.header{ position:relative; height:calc(var(--header-h)/2); overflow:hidden; }
.header__logo{ position:absolute; top:1rem; left:-1rem; width:var(--header-logo-w); z-index:3; }
.header__logo img{ width:100%; display:block; }
.header__title{ position:relative; width:100%; height:100%; }
.header__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:1; }
.site-title{
    position:relative; z-index:2; margin:0; text-align:center;
    font-family:'Oswald',sans-serif; font-size:clamp(2.5rem,5vw,6rem); line-height:1.1;
    color:var(--clr-primary-dark);
    padding:1rem 1rem 1.5rem calc(var(--header-logo-w) + 1.5rem);
    background:linear-gradient(to bottom,
        var(--clr-bg) 0%, rgba(245,251,244,.96) 35%, rgba(245,251,244,.85) 55%,
        rgba(245,251,244,.5) 75%, rgba(245,251,244,0) 100%);
}
.site-title--image{ text-indent:-9999px; white-space:nowrap; overflow:hidden; display:block; width:100%; background-image:var(--title-image); background-repeat:no-repeat; background-position:center; background-size:cover; min-height:clamp(160px,25vw,360px); padding-left:0; }

/* =========================================================
   LAYOUT (Sidebar + Main)
   ========================================================= */
.layout  { padding:0 1rem; }
.sidebar { margin-bottom:var(--sidebar-gap); }
main     { padding:1rem; background:var(--clr-white); border-radius:var(--ecke-rund); box-shadow:0 0 6px rgba(0,0,0,.05); }


/* =========================================================
   NAVIGATION & INFOBOX – BEREINIGTE VERSION
   ========================================================= */

/* ---------- Utility-Klassen für A11y (neu) ---------- */
.sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.visually-hidden {
    position:absolute;
    width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Wrapper für beide Schaltflächen ---------- */
.nav-controls{ display:flex; align-items:center; gap:.75rem; padding-left:1rem; }

/* ---------- (alt) Versteckte Checkboxen via ID ----------
   Darf bleiben; Inputs sind zusätzlich mit .visually-hidden versehen. */
#nav-small, #info-small{ position:absolute; left:-9999px; }

/* ---------- Gemeinsames Button-Design ---------- */
.nav-burger, .info-toggle{
    display:flex; align-items:center; justify-content:center;
    width:2.5rem; height:2.5rem; background:#eee;
    border-radius:.5rem; cursor:pointer; transition:background .2s;
}

/* --- Burger-Icon: Drei Striche via ::before --- */
.nav-burger{ position:relative; }
.nav-burger::before{
    content:""; position:absolute; inset-inline:0; top:50%; height:.2rem;
    background:var(--clr-primary); border-radius:var(--ecke-rund);
    transform:translateY(-50%);
    box-shadow:0 -.6rem 0 0 var(--clr-primary), 0 .6rem 0 0 var(--clr-primary);
}

/* --- Info-Button: ℹ️-Symbol via ::before --- */
.info-toggle::before{ content:"ℹ"; font-size:1.35rem; line-height:1; }

/* Sichtbarer Fokus über das passende Label */
#nav-small:focus-visible ~ .nav-controls .nav-burger,
#info-small:focus-visible ~ .nav-controls .info-toggle {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

/* Aktiver (checked) Zustand – Label einfärben */
#nav-small:checked ~ .nav-controls .nav-burger,
#info-small:checked ~ .nav-controls .info-toggle {
  background:#ddd;
}

/* ---------- Hauptmenü (mobile) ---------- */
nav{
    background:var(--clr-overlay); border-radius:var(--ecke-rund);
    padding:0 1rem; max-height:0; opacity:0; transform:translateY(-.5rem);
    overflow:hidden;
    transition:max-height .35s ease, opacity .3s ease, transform .3s ease, padding .35s ease;
}
#nav-small:checked ~ .layout nav{ max-height:60vh; opacity:1; transform:translateY(0); padding:1rem; }

nav ul{ list-style:none; }
nav li{ margin:.25rem 0; }
nav a{ display:block; padding:.35rem 0; text-decoration:none; color:var(--clr-text); border-radius:var(--ecke-rund); transition:background .2s, color .2s; }
nav a:hover, nav a:focus{ background:var(--clr-primary-light); color:var(--clr-primary-dark); }
nav a.active{ font-weight:700; color:var(--clr-primary); }
nav ul ul a{ padding-left:1.5rem; }

/* ---------- Infobox (mobile) ---------- */
#infobox{
    overflow:hidden; max-height:0; padding:0; background:transparent;
    transition:max-height .3s ease, padding .3s ease, background .3s ease;
}
#info-small:checked ~ .layout .sidebar #infobox{
    max-height:999px; padding:1rem; background:var(--clr-primary-light);
}
#infobox section{
    background:var(--clr-overlay); border:1px solid var(--clr-muted);
    border-radius:var(--ecke-flxbx); padding:.75rem; margin-block:.25rem;
}

/* =========================================================
   WEITERE MODULE 
   ========================================================= */

/* Mini-Navigation (aus Original) */
.mf-mini-nav{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.85); backdrop-filter:blur(6px); border:1px solid #ddd; padding:.25rem 0; display:none; }
.mf-mini-nav[open] summary{ margin-bottom:.25rem; }
.mf-mini-nav summary{ cursor:pointer; font-weight:600; }
.mf-mini-card{ flex:0 0 72px; display:flex; flex-direction:column; align-items:center; text-decoration:none; opacity:.7; transition:opacity .2s; }
.mf-mini-card:hover{ opacity:1; }
.mf-mini-card.active{ opacity:.35; pointer-events:none; }
.mf-mini-card img{ width:40px; height:40px; object-fit:contain; }


/* =========================================================
   MEDIA-QUERIES
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 550px){
    body{ font-size:14px; }
    .header__logo{ left:.5rem; display:none; }
    .site-title{ font-size:clamp(2rem,6vw,3.5rem); padding-left:0; }
}

@media (min-width: 768px){
    /* — Layout Switch auf Zwei-Spalten — */
    .header__logo{ display:block; }
    .layout{ display:flex; gap:var(--sidebar-gap); align-items:flex-start; padding:0 3rem; }
    main#content{ flex:1 1 0; min-width:0; }
    .sidebar{ flex:0 0 var(--sidebar-w); display:flex; flex-direction:column; gap:var(--sidebar-gap); align-self:stretch; }

    /* — Navigation Desktop — */
    #nav-small, .nav-burger{ display:none !important; }
    nav{ position:sticky; top:.001rem; max-height:none; opacity:1; transform:none; overflow:visible; padding:.5rem; }
    nav a{ width:100%; padding:.25rem .5rem; }
    nav a.active, nav a[aria-current="page"]{ background:var(--clr-primary-light); color:var(--clr-primary-dark); font-weight:700; }
    nav li:hover > a{ background:var(--clr-primary-light); color:var(--clr-primary-dark); }
    

    /* — Infobox immer offen — */
    #infobox{ max-height:none; padding:1rem; background:var(--clr-primary-light); }
    .info-toggle{ display:none !important; }

    /* Mini-Cards sichtbar */
    .mf-mini-nav{ display:block; width:max-content; max-width:100%; margin:0 auto; }
    .mf-mini-flexnav{ display:inline-flex; flex-wrap:wrap; gap:.75rem; padding:0 .75rem; }
}

@media (min-width: 1024px) { .header{ height:var(--header-h); } }
@media (min-width: 1200px) { .sidebar{ flex:0 0 300px; } }

/* =========================================================
   FOOTER & GENERIC ELEMENTS 
   ========================================================= */
footer{ background:var(--clr-primary-dark); color:var(--clr-white); padding:1rem 0; text-align:center; }
footer a{ color:var(--clr-white); }
img, .contentimage{ max-width:100%; height:auto; }
h1,h2,h3,h4,h5,h6{ font-family:'Oswald',sans-serif; margin-bottom:10px; color:var(--clr-primary-dark); }

small{ font-size:90%; }
ol,ul{ list-style-position:inside; }
.tableofcontents li.blind{ list-style:none; }
.contenttable{ width:100%; text-align:center; margin:10px 0; background:var(--clr-primary-light); }
th.contenttable{ background:var(--clr-primary-dark); color:var(--clr-white); border-right:1px solid var(--clr-white); }
th.contenttable:last-child{ border-right:none; }
td{ padding:7px; border-bottom:1px solid var(--clr-primary-light); }
.horizontalrule{ margin:10px 0; background:var(--clr-primary-light); height:2px; border:none; }
fieldset#searchfieldset{ border:none; margin:0; padding:0; }

/* =========================================================
   Styles für FlexCards über eigene Klasse
   ========================================================= */
.spezialklasse {background-color:aliceblue;}  
.spezialklasse .flexcards-container {gap: 2rem;}  
.spezialklasse .card-footer {color: #000;}  
      
/* ========================================================================
   MOZILO COMPAT LAYER — v2 (nicht-invasiv, auf mozilo Selektoren  gemappt)
   ======================================================================== */

/* Headings */
.heading1, .heading2, .heading3 {
  font-family:'Oswald',sans-serif;
  color:var(--clr-primary-dark);
  margin-bottom:10px;
}
.heading1 { font-size: 2rem; }
.heading2 { font-size: 1.75rem; }
.heading3 { font-size: 1.5rem; }

/* Listen */
.unorderedlist { list-style: disc inside; margin:0 0 10px; padding:0; }
.orderedlist   { list-style: decimal inside; margin:0 0 10px; padding:0; }
.listitem { margin:.25rem 0; }

/* Inline-Textformatierungen */
.contentbold { font-weight:700; }
.contentitalic { font-style:italic; }
.contentunderlined { text-decoration:underline; text-underline-offset:.15em; }
.contentstrikethrough { text-decoration:line-through; }

/* Link-Typen (leicht, ohne harte Farbe) */
a.link, a.mail, a.page, a.category, a.file { text-decoration:none; }
a.link:hover, a.mail:hover, a.page:hover, a.category:hover, a.file:hover { text-decoration:underline; }

/* Bilder + Bildunterschriften */
.contentimage,
.leftcontentimage,
.rightcontentimage { display:inline-block; max-width:100%; height:auto; }
.contentimage img,
.leftcontentimage img,
.rightcontentimage img { display:block; max-width:100%; height:auto; }
.imagesubtitle { display:block; font-size:.9em; color:var(--clr-muted); margin-top:.25rem; text-align:center; }

/* Ausrichtung */
.alignleft   { text-align:left; }
.aligncenter { text-align:center; margin-left:auto; margin-right:auto; }
.alignjustify{ text-align:justify; }
.alignright  { text-align:right; }

/* Horizontal Rule */
.horizontalrule { margin:10px 0; background:var(--clr-primary-light); height:2px; border:none; }

/* Tabellen */
.contenttable { width:100%; text-align:center; margin:10px 0; background:var(--clr-primary-light); border-collapse:collapse; }
th.contenttable { background:var(--clr-primary-dark); color:var(--clr-white); padding:7px; border-right:1px solid var(--clr-white); }
th.contenttable:last-child { border-right:none; }
.contenttable td,
.contenttable1 .contenttablecell,
.contenttable2 .contenttablecell { padding:7px; border-bottom:1px solid var(--clr-primary-light); }
.contenttable1 .contenttablecell { background:transparent; }          /* ungerade */
.contenttable2 .contenttablecell { background:rgba(0,0,0,.035); }     /* gerade */

/* Menüs (Haupt/Detail/Sub) – an vorhandene nav-Styles angedockt */
.mainmenu, .detailmenu { list-style:none; margin:0; padding:0; }
.mainmenu-item, .detailmenu-item { margin:.25rem 0; }

nav a.menu,
nav a.detailmenu,
nav a.submenu {
  display:block; padding:.35rem 0; text-decoration:none; color:var(--clr-text);
  border-radius:var(--ecke-rund); transition:background .2s, color .2s;
}
nav a.menu:hover,
nav a.detailmenu:hover,
nav a.submenu:hover,
nav a.menu:focus,
nav a.detailmenu:focus,
nav a.submenu:focus {
  background:var(--clr-primary-light); color:var(--clr-primary-dark);
}

/* Aktive Zustände wie dein nav a.active */
nav a.menuactive,
nav a.detailmenuactive,
nav a.submenuactive {
  font-weight:700; color:var(--clr-primary); background:var(--clr-primary-light);
}

/* Einrückung, wenn UL in UL */
.mainmenu ul a,
.detailmenu ul a { padding-left:1.5rem; }

/* Suche */
.searchform { display:block; }
.searchtextfield { padding:.35rem .5rem; border:1px solid var(--clr-muted); border-radius:var(--ecke-flxbx); }
.searchbutton { padding:.4rem .75rem; border:1px solid var(--clr-primary); background:var(--clr-primary-light); border-radius:var(--ecke-flxbx); cursor:pointer; }
.searchbutton:hover, .searchbutton:focus { background:var(--clr-primary); color:var(--clr-white); }

/* Sitemap / Suchergebnisse */
#sitemap { margin:1rem 0; }
.result-list-header { font-weight:700; margin-bottom:.5rem; }
/* Falls die Liste zwei Klassen am selben Element hat: */
.searchmap.result-list { list-style:none; margin:0; padding:0; }
/* Falls verschachtelt: */
.searchmap .result-list { list-style:none; margin:0; padding:0; }

/* Hervorhebung & Deadlinks */
.highlight { background:#ffe58f; padding:0 .15em; }
.deadlink { color:#b00020; text-decoration:underline dotted; }

/* Fallback für .fontsize (bewusst neutral) */
.fontsize { font-size:1em; }