/* =================================================================
   style.css – vollständige, bereinigte Version
   Fokus: Navigation (Burger‑Menü), Info‑Boxen & übrige vorhandene Styles
   Stand 28 Jul 2025
   ================================================================ */

/* =========================================================
   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;
    --sidebar-w:      260px;
    --sidebar-gap:    1.5rem;

    /* — 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);
}

/* =========================================================
   SCROLL‑TOP BUTTON (unverändert)
   ========================================================= */
#scrollTopBtn {
    position:fixed; right:1.5rem; bottom:8rem; z-index:90;
    font-size:32px; border:none; padding:6px 10px;
    border-radius:var(--ecke-rund); cursor:pointer;
    background:rgba(255,255,255,.65); color:var(--clr-primary-dark);
    opacity:0; transform:translateY(20px);
    transition:opacity .3s, transform .3s;
    pointer-events:none;
}
#scrollTopBtn.show       { opacity:1; transform:translateY(0); pointer-events:auto; }
#scrollTopBtn:hover      { background:rgba(255,255,255,.85); }

/* =========================================================
   HEADER (Logo + Titelbild) – unverändert
   ========================================================= */
.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
   ========================================================= */

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

/* ---------- Versteckte Checkboxen (Burger / Info) ---------- */
#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; }
#info-small:checked + .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 (Hover‑Box, Mini‑Nav, etc.) – unverändert
   ========================================================= */
.hover-box{ position:relative; display:inline-block; overflow:hidden; cursor:pointer; text-decoration:none; touch-action:manipulation; outline:none; }
.hover-box > img{ display:block; width:100%; height:auto; }
.hover-box .ovl{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); color:#fff; font:700 1rem/1.2 system-ui; text-align:center; padding:1em; opacity:0; transition:opacity .3s; pointer-events:none; }
.hover-box:hover .ovl, .hover-box:focus-visible .ovl, .hover-box.touched .ovl{ opacity:1; }
.hover-box:active .ovl{ opacity:0; }
.hover-box:focus-visible::after{ box-shadow:0 0 0 3px rgba(255,255,255,.8); }

/* 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 (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 2rem; }
    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 (unverändert)
   ========================================================= */
footer{ background:var(--clr-primary-dark); 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; }

.flex_nur_bild .card_header {
    display: none;            
    }

/* ======== ENDE style.css ======== */
/* Klasse ausblenden , z.B. Flexelement */
.hide {
    display: none;
}
.show {
    margin: 5px;
}
.img-180-130 {
    width:180px;
    height:130px;
}