/*
  Neu organisierte Datei styles.css
  Abschnitte:
   1) Root-Variablen
   2) Basis: html, body
   3) Typografie & Links
   4) Hilfsklassen (Utilities)
   5) Container / Wrapper
   6) Seitenleiste & Menü
   7) Banner / Kopfbereich
   8) Inhalts-Helpers
   9) Layout (Grid)
  10) Responsive Überschreibungen (klein -> groß)
*/

/* -------------------- 1) Root variables -------------------- */
:root{
  --base-font: clamp(1rem,1.3vw,1.125rem);
  --small-font: clamp(1rem,1.2vw,1.05rem);

  /* Font stacks */
  --font-sans: 'Inter', 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif;
  --font-heading: 'Inter', 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif;
  --font-brand: 'Inter', 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif;
  --space-unit: 1rem;

  /* width of the first column used in the header (Kopf Top) and sidebar */
  --kopf-col-1: 20vw;
  --sidebar-min: var(--kopf-col-1);
  --sidebar-max: var(--kopf-col-1);
  --header-height:max(3rem,min(33vh,16.6667vh));
  --header-frame:clamp(0.375rem,0.8vw,0.875rem);
  --banner-min-height:min(var(--header-height),33vh);
  --brand-green:#568460;
  --background-color:#E1F7E1;
  --brand-border:rgb(0 0 0 / 8%);
  --menu-title-bg:#0C3C0C;

  /* Cookie consent defaults (migrated here to avoid duplicate :root blocks) */
  --cc-bg:#fff;
  --cc-text:#082408;
  --cc-accent:var(--brand-green);
  --cc-muted:#6b6b6b;
}

/* =================== Moderne Ergänzungen (konservativ) ===================
  - Globales box-sizing-Reset
  - Modernisierte "visually-hidden"-Hilfe für Screenreader
  - Beachtung der Präferenz für reduzierte Bewegung
  - Vermeidung eines global erzwungenen sehr kleinen Link-Schriftgrads
  - Optimierung des Scroll-Verhaltens der mobilen Seitenleiste
  Diese Änderungen sind bewusst konservativ, um Layout-Regressionen zu vermeiden.
  Weitere empfohlene Refactorings (PostCSS / Autoprefixer) siehe README.md.
======================================================================= */

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

/* Modernisierte "visually-hidden"-Klasse (für Screenreader zugänglich)
   Standardisierte, breit unterstützte Variante. */
.visually-hidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Bevorzuge reduzierte Bewegung (Accessibility) */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important;scroll-behavior:auto!important}
  .site-banner{background-image:none!important}
}

/* Link font-size preserved relative to surrounding text to avoid very small clickable areas
  (kept with main link styling below) */


  /* -------------------- 2) Basis: html, body -------------------- */
  html,body{min-height:100vh;height:auto;margin:0;overflow:auto;-webkit-overflow-scrolling:touch}

  /* Hinweis: Für Produktion empfiehlt sich das Self-Hosting der Schriftart 'Inter' oder die Verwendung eines Anbieters (Google Fonts, Adobe) - siehe README.md */

  /* Beispiel (Google Fonts):
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
  */
  body{font-family:var(--font-sans);font-size:var(--base-font);color:#000;background-color:var(--background-color)}

  /* -------------------- 3) Typografie & Links -------------------- */
  a{color:#082408;font-weight:bold;text-decoration:none;font-size:inherit}

  /* Skip-link: versteckt außer bei Tastaturfokus, dann gut sichtbar */
  .skip-link{
    position:absolute;
    left:-9999px; /* off-canvas by default */
    top:auto;
    background:#fff;
    color:#082408;
    padding:.5rem 1rem;
    z-index:999;
    border:2px solid #082408;
    box-shadow:0 2px 6px rgb(0 0 0 / 12%);
    transition:left .15s ease-in-out, transform .15s ease-in-out;
  }

  /* Beim Fokus sichtbar am oberen Rand und mit deutlichem Fokusrahmen */
  .skip-link:focus,
  .skip-link:active{
    left:0;
    top:0;
    transform:translateY(0);
    outline:3px solid #ffbf47;
    outline-offset:3px;
  }

  /* Tastaturfokus sichtbar machen - bevorzugt :focus-visible wenn unterstützt */
  :focus{outline:3px solid #ffbf47;outline-offset:3px}

  @media (hover: hover) and (pointer: fine){
    :focus:not(:focus-visible){outline: none}
  }

  /* Ensure form controls and interactive elements have a clear focus state */
  input:focus, textarea:focus, select:focus, button:focus, a:focus{
    outline:3px solid #ffbf47;
    outline-offset:3px;
    box-shadow:0 0 0 3px rgb(255 191 71 / 12%);
  }
  a:hover{text-decoration:underline;color:#000}
  a.inside{color:#1E4C1E}

  /* -------------------- Headings: left + spacing -------------------- */   
  /* Alle Überschriften linksbündig ausrichten und etwas mehr Abstand darunter geben */
  h1,h2,h3,h4,h5,h6{
    text-align:left;
    /* Mehr Platz über und unter Überschriften für bessere Lesbarkeit */
    margin-top:1.25rem;
    margin-bottom:1rem; /* etwas mehr Abstand zum folgenden Text */
    line-height:1.3;
  }

  /* Explizite, barrierefreie Größen für Hauptüberschriften
     Ziel: Überschriften nicht übermäßig groß im Verhältnis zum Fließtext,
     gleichzeitig ausreichend Kontrast und Zeilenhöhe beibehalten. */
  h1{font-size:clamp(1.25rem,3.2vw,1.5rem);line-height:1.25}
  h2{font-size:clamp(1.1rem,2.6vw,1.25rem);line-height:1.3}

  /* Globaler Absatzabstand: etwas mehr Luft zwischen Absätzen */
  p{
    margin:0 0 1rem; /* oberer Abstand bleibt kontextabhängig, unterer Abstand sichtbar erhöht */
    line-height:1.6; /* bessere Lesbarkeit bei Fließtext */
  }

  table{font-family:inherit;font-size:0.95rem;color:#082408}
  td{font-family:inherit;font-size:0.95rem;color:#082408}

  /* -------------------- 4) Hilfsklassen (Utilities) -------------------- */
  .text-center{text-align:center}

  /* Kleine Utility-Abstände (vermeidet Inline-Styles in HTML) */
  .mt-1{margin-top:1rem}

  /* -------------------- Touch targets (Accessibility) -------------------- */

  /* Ensure interactive elements are easy to tap on touch devices.
     Applies only for coarse pointers (touch) or small screens to avoid
     unintended layout shifts on desktop. Minimum recommended target: 44x44px */
  @media (pointer: coarse), (width <= 900px) {
    /* Generic interactive elements: make them at least 44x44 and center content */
    a, button, input[type="button"], input[type="submit"], .phone-link, .menu-content a, .footer-column a, .ds-toc a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      padding: 0.35rem 0.5rem; /* ensures comfortable hit target without large visual change */
      gap: 0.25rem;
      touch-action: manipulation;
    }

    /* For block links that already take full width keep block behaviour but ensure min-height */
    .menu-content a, .form-list a { display: block; min-height: 44px; padding: 0.5rem 0; }

    /* Ensure inline lists of links have enough separation */
    .ds-toc a, .footer-column a { margin: 0.25rem 0.35rem; }
  }

    /* Additional touch-target improvements: explicitly ensure common anchors and buttons
       meet the 44x44px recommendation on smaller/touch devices */
  @media (pointer: coarse), (width <= 900px) {
    .footer-column a, .menu-content a, .phone-link, .cc-btn, .cookie-settings-persistent, .footer-cookie-btn, .hamburger {
      min-width: 44px;
      min-height: 44px;
      padding: 0.35rem 0.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      touch-action: manipulation;
    }

    /* Make sure small inline anchors don't collapse visually */
    .footer-column a{display:inline-block}
  }

  /* -------------------- 5) Container / Wrapper -------------------- */
  .content-wrapper,.impressum-wrapper,.contact-wrapper{width:100%;max-width:clamp(30rem,85vw,75rem);margin:0 auto;padding:clamp(0.5rem,1.2vw,2rem);box-sizing:border-box}
  .content-wrapper{max-width:clamp(420px,80vw,1000px);background-image:url('../img/tableback.jpg');background-repeat:no-repeat;background-position:center;background-size:cover}
  .page-heading{margin:0 0 1rem}
  .form-list a{display:block;margin:.25rem 0}
  .impressum-address{white-space:pre-line}

  /* -------------------- 6) Seitenleiste & Menü -------------------- */

  /* Seitenleiste: Bevorzugt grid-basierte Größensteuerung, damit die Breite mit der ersten Header-Spalte übereinstimmt */
  .sidebar{display:grid;grid-auto-rows:min-content;align-content:start;align-items:start;text-align:center;background-color:var(--brand-green);margin:0;padding:calc(var(--space-unit) * 0.75) calc(var(--space-unit) * 0.5);box-sizing:border-box}
  .sidebar img{display:block;margin:calc(var(--space-unit) * 0.5) auto;max-width:100%;height:auto}
  .menu-box{background:var(--brand-green);width:100%;box-sizing:border-box;margin:calc(var(--space-unit) * 0.5) 0;padding:0;border-radius:0.5rem;border:1px solid var(--brand-border);overflow:visible}
  .menu-box::after{content:"";display:block;height:0.625rem;background:#0C3C0C;width:100%}
  .menu-box::before{content:"";display:block;height:1px;width:100%;background:rgb(0 0 0 / 6%)}
  .menu-title{display:block;background:var(--menu-title-bg);color:var(--background-color);text-align:center;padding:clamp(0.375rem,0.8vw,0.75rem) 0;font-weight:bold}

  /* Increased vertical spacing and larger font for easier reading / touch targets */
  .menu-content{background:var(--background-color);padding:clamp(0.75rem,1.8vw,1.5rem) 1rem;text-align:left;overflow:auto}
  .menu-content a{display:block;color:#110505;font-weight:bold;font-size:clamp(0.875rem,1.1vw,1rem);line-height:1.35;text-decoration:none;margin:clamp(0.375rem,0.9vw,0.75rem) 0;padding:0.125rem 0}
  .menu-content a:hover{color:rgb(12 103 47);text-decoration:underline}

  #overDiv{position:absolute;visibility:hidden;z-index:1000}

  /* Logobanner (alternative Seitenklasse) */
  body.logobanner{margin:0;padding:0;background-image:url('../img/back.jpg');background-color:#E1F7E1}
  .logo-banner{margin:0;padding:0}
  .logo-banner img{display:block;width:auto;max-width:100%;height:auto;border:0}

  /* -------------------- 7) Inhalts-Helpers -------------------- */
  .content-wrapper .press-item{margin:0 auto 1.5rem;max-width:800px}
  .content-wrapper .press-item header h2{background:#0C3C0C;color:var(--background-color);padding:0.5rem 0.625rem;margin:0 0 0.75rem;font-size:1rem}
  .content-wrapper .press-item section{background:var(--background-color);padding:0.75rem;margin:0}
  .content-wrapper .press-item p{margin:0 0 0.75rem}

  /* Center the site title within the content wrapper */
  .content-wrapper h1.site-title{margin-top:0;padding-top:.25rem;text-align:center}
  .content-wrapper ul{margin:.5rem 0 1rem 1.25rem}

  /* -------------------- Datenschutzerklärung: Table of Contents & Sections -------------------- */
  .ds-toc{background:rgb(12 60 12 / 4%);border:1px solid var(--brand-border);padding:0.75rem;margin:0 0 1rem;border-radius:0.375rem}
  .ds-toc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0.25rem}
  .ds-toc a{display:inline-block;padding:0.25rem 0.5rem;color:#082408;background:transparent;border-radius:0.25rem;text-decoration:none;font-size:var(--small-font)}
  .ds-toc a:hover{text-decoration:underline;background:rgb(86 132 96 / 6%)}
  .ds-section{margin:0 0 1.25rem;padding:0.5rem 0;border-bottom:1px dashed rgb(0 0 0 / 4%)}
  .ds-section h2,.ds-section h3{margin:0 0 0.75rem}
  .meta-contact{font-size:0.95rem;margin:0 0 0.5rem}

  /* Make anchors more visible when focused */
  :target{outline:3px solid #ffbf47;padding:0.25rem}

  /* -------------------- Footer -------------------- */
  .site-footer{background-color:rgb(12 60 12 / 6%);border-top:1px solid var(--brand-border);padding:1rem 0;margin-top:1rem}
  .site-footer .content-wrapper{display:flex;flex-direction:column;gap:0.75rem}
  .footer-nav .footer-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
  .footer-column h4{margin:0 0 0.5rem;font-size:0.95rem;color:var(--menu-title-bg)}
  .footer-column ul{list-style:none;padding:0;margin:0}
  .footer-column li{margin:0.25rem 0}
  .footer-column a{color:#082408;text-decoration:none;font-size:var(--small-font)}
  .footer-column a:hover{text-decoration:underline;color:#000}
  .footer-meta{border-top:1px solid rgb(0 0 0 / 4%);padding-top:0.5rem;font-size:0.9rem;color:#082408}

  /* Also center site titles that live inside .site-header (e.g. index.html) */
  .site-header .site-title{margin-top:0;padding-top:.25rem;text-align:center}

  .content-main{max-width:50rem;margin:0 auto;padding:1rem;box-sizing:border-box;background-color:var(--background-color);flex:1}
  .layout .content-main{max-width:none;width:100%;margin:0}
  .content-main figure{text-align:center;margin:1rem 0}
  .responsive-img{max-width:100%;height:auto;display:block;margin:0 auto}

  .banner-sample{text-align:center;margin:1rem 0}
  .linklist{max-width:31.25rem;margin:0 auto;padding:0 1rem}
  .linklist pre{background:var(--background-color);padding:.5rem;overflow:auto}
  .phone-highlight{font-family:var(--font-brand);font-size:1.25rem;color:#568460}

  /* -------------------- 8) Seiten-Container -------------------- */
  .site-container{width:100%;max-width:68.75rem;margin:0 auto;padding:clamp(.75rem,1.4vw,2rem);box-sizing:border-box;background-color:var(--background-color);flex:1;display:flex;flex-direction:column}
  .site-container img,.site-container video,.site-container svg{max-width:100%;height:auto;display:block}
  .site-container table{width:100%;max-width:100%;border-collapse:collapse}
  .site-container .table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .site-container pre,.site-container code{white-space:pre-wrap;overflow-wrap:anywhere}
  .responsive-embed{position:relative;width:100%;padding-bottom:56.25%;height:0}
  .responsive-embed iframe,.responsive-embed object,.responsive-embed embed{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

  /* -------------------- 9) Layout (CSS Grid) -------------------- */

  /* Layout-Grid: Verwende die erste Header-Spalten-Variable, damit die Seitenleisten-Breite der Kopf-Top-Spalte 1 entspricht */
  .layout{display:grid;grid-template-columns:var(--kopf-col-1) 1fr;grid-template-rows:var(--header-height) auto;min-height:100vh}
  .sidebar{grid-column:1;grid-row:1/3}
  .banner{grid-column:2;grid-row:1;overflow:hidden;z-index:2}

  /* Content column: grid placement + flex layout + min-height */
  .content{grid-column:2;grid-row:1/3;padding:0;display:flex;flex-direction:column;min-height:calc(100vh - var(--header-height))}
  .layout iframe,iframe{width:100%;min-height:100%;border:0}

  @media(width >=1200px){.layout{grid-template-columns:1fr 5fr}}
  .content-main{width:100%;max-width:none;box-sizing:border-box}

  /* -------------------- 10) Seitenbanner / Kopfbereich -------------------- */
  .site-banner{width:100%;height:var(--header-height);min-height:var(--banner-min-height);box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-color:transparent;background-image:url('../banner/ban_anim1.gif'),url('../img/kopf.jpg');background-repeat:no-repeat;background-position:center center,right center;background-size:cover,cover;border:0;box-shadow:none;padding:0;margin:0}
  .site-banner .banner-logo{width:100%;height:100%;display:block;object-fit:contain;object-position:right center}

  .site-banner img,.site-banner video,.site-banner canvas{max-width:100%;height:auto;display:block;overflow:hidden}

  .site-banner--no-anim{background-image: url('../img/kopf.jpg');background-repeat: no-repeat;background-position: right center;background-size: cover}

  /* Kopf-Top: Referenziert die gemeinsame Variable --kopf-col-1, damit Seitenleiste und Header-Spalte 1 synchron bleiben */
  .kopf-top{width:100%;max-width:100%;box-sizing:border-box;background-color:var(--brand-green);display:grid;grid-template-columns:var(--kopf-col-1) minmax(var(--sidebar-min),var(--sidebar-max)) 1fr 1fr 1fr;align-items:stretch;padding:var(--header-frame);height:calc(var(--header-height) + (var(--header-frame) * 2));min-height:calc(var(--header-height) + (var(--header-frame) * 2));overflow:hidden}
  .kopf-top .site-banner{place-self:stretch stretch;box-sizing:border-box;height:100%;width:100%;max-width:100%;overflow:hidden;background-size:cover;background-position:center center}
  .kopf-top img{display:block;width:100%;height:auto;max-height:min(5rem, calc(var(--header-height) - (var(--header-frame) * 2)));object-fit:cover;box-sizing:border-box}
  .kopf-top .site-banner .banner-logo{width:100%;height:100%;object-fit:contain;display:block;max-height:calc(var(--header-height) - (var(--header-frame) * 2))}

  .banner-logo--stretch{width:100%;min-height:100%;object-fit:fill;object-position:right center;display:block}
  .banner-logo--visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;object-position:right center}

  .banner-tree{background-image: image-set(url('/assets/img/baum2.webp') 1x, url('/assets/img/baum2.jpg') 1x);background-image: image-set(url('/assets/img/baum2.webp') type('image/webp') 1x, url('/assets/img/baum2.jpg') type('image/jpeg') 1x);background-image: url('/assets/img/baum2.jpg');background-repeat: no-repeat;background-position: center center;background-size: contain;display: flex;align-items: center;justify-content: center;min-height: 100%;height: 100%;width:100%;box-sizing:border-box}

    /* Reserve explicit minimum vertical space for banner/tree to avoid layout shifts
      when images are loaded dynamically via JS. These are conservative fallbacks. */
    .banner-tree, .site-banner{min-height:3.5rem}
  .kopf-top .banner-tree{grid-column:1}
  .kopf-top .site-banner{grid-column:2 / span 4}
  .kopf-top .site-banner,.kopf-top .banner-tree{min-height:100%;height:100%}
  .kopf-top .site-banner .banner-logo{width:100%;height:100%;object-fit:contain;display:block}

  /* -------------------- 11) Responsive-Überschreibungen (klein -> groß) -------------------- */
  @media (width <=480px){
    body{font-size:var(--small-font)}
    .site-title{font-size:clamp(0.75rem,3.5vw,1rem)}

    /* Improve line-height and touch spacing for very small screens */
    .site-header .site-title{line-height:1.15;margin-bottom:0.5rem}

    /* Make phone link more prominent and easier to tap */
    .phone-link{display:inline-block;padding:.35rem .5rem;border-radius:0.375rem;background:rgb(86 132 96 / 6%);text-decoration:none}
    .phone-link:active,.phone-link:focus{outline:3px solid #ffbf47;outline-offset:3px}
    .menu-box{width:auto;margin:0.375rem}
  .site-banner{height:var(--header-height);min-height:3rem;background-size:cover;background-image: url('../img/kopf.jpg');background-repeat:no-repeat;background-position:right center}
    .site-banner .banner-logo{max-width:95%}
  }

  @media (width <=480px){
    .footer-nav .footer-grid{grid-template-columns:1fr;gap:0.5rem}
    .footer-column h4{margin:0 0 0.5rem;font-size:0.9rem}
    .footer-meta{text-align:center}
  }

  @media (width >=769px){
    .sidebar{height:100vh;min-height:100vh;overflow:auto;padding:calc(var(--header-frame) / 2) calc(var(--space-unit) * 0.625)}
    .menu-box{max-height:calc(100vh - var(--header-height) - (4 * var(--space-unit)));overflow:visible;display:flex;flex-direction:column}
    .menu-content{max-height:calc(100vh - var(--header-height) - (8 * var(--space-unit)));overflow:auto}
  }

  @media (width <=600px){
    .site-banner{background-size:cover,cover;background-position:center center,right center}
    .banner-logo--visually-hidden{position:static!important;width:auto!important;height:auto!important;margin:0!important;white-space:normal!important;border:0!important;display:block!important}
    .banner-tree{background-size:contain;background-position:center center}
    .kopf-top{grid-template-columns:1fr;grid-auto-rows:auto}
    .kopf-top .site-banner{grid-column:1}
    .banner-tree{min-height:3.5rem}
  }

  @media (width <=768px){.layout{display:block}.sidebar{width:100%;order:2;position:static;display:block;padding:calc(var(--space-unit) * 0.375);height:auto;justify-content:flex-start}.kopf-top{order:1;height:auto}.content{order:3}.banner-tree{display:none}.site-banner{height:var(--header-height);min-height:3.5rem}}

  /* Hamburger & mobile overlay sidebar */

  /* Default: hidden on larger screens */
  .hamburger{display:none;background:transparent;border:0;padding:.25rem;margin:.25rem;cursor:pointer}
  .hamburger-box{display:inline-block;width:2rem;height:1.6rem;position:relative}

  /* Lines: increase contrast and add smooth transform for animated state */
  .hamburger-inner{position:absolute;top:50%;left:0;right:0;height:2px;background:#082408;display:block;transform:translateY(-50%);transition:background-color .15s ease, transform .18s ease}
  .hamburger-inner::before,.hamburger-inner::after{content:'';position:absolute;left:0;right:0;height:2px;background:#082408;display:block;transition:transform .18s ease, opacity .12s ease}
  .hamburger-inner::before{top:-7px}
  .hamburger-inner::after{bottom:-7px}

  /* Improved visible button for touch: rounded, solid background and subtle shadow */
  @media (width <=768px){
    .hamburger{display:inline-flex;align-items:center;justify-content:center;background:rgb(255 255 255 / 95%);color:#082408;border-radius:0.5rem;padding:.5rem;box-shadow:0 2px 8px rgb(0 0 0 / 15%);border:1px solid rgb(0 0 0 / 6%)}

    /* Darker background variant when header is dark (brand-green) */
    .kopf-top .hamburger{background:linear-gradient(180deg,rgb(255 255 255 / 96%),rgb(245 245 245 / 90%));}
    .hamburger:focus{outline:3px solid #ffbf47;outline-offset:3px}
    .hamburger:hover{transform:translateY(-1px)}

    /* When open (aria-expanded=true) show a filled brand color and animate into an 'X' */
    .hamburger[aria-expanded="true"]{background:var(--menu-title-bg);color:var(--background-color);box-shadow:0 4px 14px rgb(12 60 12 / 18%)}
    .hamburger[aria-expanded="true"] .hamburger-inner{background:transparent}
    .hamburger[aria-expanded="true"] .hamburger-inner::before{transform:translateY(7px) rotate(45deg);background:var(--background-color)}
    .hamburger[aria-expanded="true"] .hamburger-inner::after{transform:translateY(-7px) rotate(-45deg);background:var(--background-color)}
    .hamburger[aria-expanded="true"] .hamburger-inner{transform:translateY(0)}
  }

  @media (width <=768px){
    /* Show hamburger in the header; position it top-left within the header */
    .hamburger{display:inline-block;position:absolute;left:.5rem;top:.5rem;z-index:10002;background:transparent;border:0;padding:.5rem}

    /* Make the sidebar an overlay when active */
    .sidebar{position:fixed;top:0;left:-100%;height:100vh;width:min(320px,80vw);z-index:10001;background:var(--brand-green);box-shadow:2px 0 12px rgb(0 0 0 / 25%);overflow:auto;transition:left .25s ease-in-out}
    .sidebar.sidebar--open{left:0}

    /* Backdrop for when sidebar is open */
    .sidebar-backdrop{position:fixed;inset:0;background:rgb(0 0 0 / 45%);z-index:10000;display:none}
    .sidebar-backdrop.visible{display:block}

    /* Ensure content is still readable behind overlay */
    .content[aria-hidden="true"]{filter:blur(.5px);pointer-events:none}
  }

  @media (width <=1024px){.layout{grid-template-columns:minmax(var(--sidebar-min),var(--sidebar-max)) 1fr}.kopf-top{min-height:var(--header-height)}.banner-tree{min-height:calc(var(--banner-min-height) * 0.9)}.site-banner{background-position:left center}}

  @media (width >=1200px){.layout{grid-template-columns:1fr 5fr}.site-banner{background-size:100% 100%}}

  /* End reorganized styles.css */

/* -------------------- Post card: unaufdringlicher Rahmen & Hintergrund -------------------- */

/* Dezente, zugängliche Karte für Beitragseinträge (article.post) */
.post{
  background: rgb(255 255 255 / 94%); /* leicht aufgehellter Hintergrund über dem Seiten-Hintergrund */
  border: 1px solid rgb(0 0 0 / 6%); /* sehr dezenter Rahmen */
  padding: clamp(0.75rem,1.5vw,1.25rem);
  margin: 0 0 1.25rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 4px rgb(0 0 0 / 4%);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Subtiles Hover-Lift nur auf Geräten mit Zeiger */
@media (hover: hover) and (pointer: fine){
  .post:hover{transform: translateY(-3px);box-shadow:0 6px 18px rgb(0 0 0 / 7%)}
}

  .post header h2{margin:0 0 0.75rem;font-size:1.05rem;color:#082408}
.post .byline{font-size:0.95rem;color:rgb(0 0 0 / 60%);margin:0 0 .5rem}
.post .lead{margin:0 0 .75rem;color:rgb(0 0 0 / 88%)}

/* Kennzeichnung für Entwürfe mit leichter Hintergrundtönung (unaufdringlich) */
.post.post-draft{background: linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(247 250 247 / 96%));border-color: rgb(86 132 96 / 8%)}
.post.post-archive{opacity:0.98}


/* ---- Page-specific helpers ---- */

/* Motto styling used on pages/team.html to give a subtle, respectful emphasis */
.motto{
  font-style:italic;
  color: #375a36; /* subdued brand-green */
  margin: 0.5rem 0 1rem;
  text-align:center;
  font-weight:500;
  font-size:1.03em;
}

/* -------------------- Intro-Text Styling -------------------- */
.intro-text{
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  line-height: 1.6;
  text-align: center;
}

  .intro-text h2{
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--menu-title-bg);
  margin: 1.5rem 0 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.intro-text h3{
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: #082408;
  margin: 1.5rem 0 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.intro-text p{
  margin: 0 0 1rem;
  color: rgb(0 0 0 / 87%);
  font-size: var(--base-font);
  line-height: 1.6;
  text-align: center;
}

.intro-text ul{
  margin: 0.75rem auto 1.25rem;
  padding-left: 0;
  list-style-type: none;
  text-align: left;
  max-width: 40rem;
  display: inline-block;
}

.intro-text ul li{
  margin: 0.5rem 0;
  padding-left: 0;
  position: relative;
  line-height: 1.6;
}

.intro-text ul li::before{
  content: none;
}

.intro-text strong{
  color: #082408;
  font-weight: 700;
}

.intro-text .phone-link{
  color: var(--brand-green);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.intro-text .phone-link:hover{
  color: var(--menu-title-bg);
  text-decoration: underline;
}

@media (width <= 768px){
  .intro-text h2{
    font-size: 1.05rem;
    margin: 1rem 0 0.75rem;
  }
  
  .intro-text h3{
    font-size: 1.05rem;
  }
  
  .intro-text p{
    font-size: 0.95rem;
  }
}

/* ------------------------------------------------------------------------- */

/* Cookie Consent styles (migrated from cookie-consent.css)                   */

/* These styles were previously inline in index.html and are moved here to   */

/* provide a single stylesheet for the site and avoid duplicate includes.    */

/* ------------------------------------------------------------------------- */

/* Cookie consent variables migrated to top :root to avoid duplicates. */
.cookie-consent{position:fixed;right:1rem;left:1rem;bottom:1rem;z-index:9999;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.cc-inner{background:var(--cc-bg);color:var(--cc-text);border:1px solid rgb(0 0 0 / 6%);box-shadow:0 6px 20px rgb(0 0 0 / 12%);max-width:1100px;width:100%;padding:1rem;display:flex;gap:1rem;align-items:flex-start;border-radius:0.5rem;pointer-events:auto}
.cc-text{flex:1}
  .cc-text h2{margin:.125rem 0 .5rem;font-size:1rem;color:var(--cc-accent)}
.cc-text p{margin:0;color:var(--cc-muted);font-size:0.95rem}
.cc-actions{display:flex;flex-direction:column;gap:.5rem}
.cc-btn{background:transparent;border:1px solid var(--cc-accent);color:var(--cc-accent);padding:.45rem .75rem;border-radius:0.375rem;cursor:pointer;font-weight:600}
.cc-btn.cc-accept{background:var(--cc-accent);color:var(--cc-bg);border-color:var(--cc-accent)}
.cc-btn.cc-reject{background:transparent;color:var(--cc-accent)}
.cc-btn.cc-customize{background:transparent;color:var(--cc-accent);border-style:dashed}

/* Modal */
.cc-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--cc-bg);border:1px solid rgb(0 0 0 / 6%);box-shadow:0 12px 40px rgb(0 0 0 / 20%);max-width:720px;width:min(96%,720px);padding:1rem;border-radius:0.5rem;display:none;z-index:10000}
.cc-modal[aria-hidden="false"]{display:block}
  .cc-modal-inner header h3{margin:0 0 .75rem;color:var(--cc-accent)}
.cc-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;border-top:1px dashed rgb(0 0 0 / 4%)}
.cc-row:first-of-type{border-top:0}
.cc-row label{font-weight:700;color:var(--cc-text)}
.cc-desc{display:block;color:var(--cc-muted);font-size:0.9rem}
.cc-row{cursor:default}
.cc-row.clickable{cursor:pointer}
.cc-row.clickable:hover{background: rgb(86 132 96 / 12%); background: color-mix(in srgb, var(--cc-accent) 12%, transparent)}
.cc-row.clickable:focus-within{background: rgb(86 132 96 / 10%); background: color-mix(in srgb, var(--cc-accent) 10%, transparent)}
.cc-row input{cursor:auto}
.cc-modal-actions{display:flex;gap:.5rem;justify-content:flex-end;padding-top:.75rem}
.cc-modal .cc-btn{padding:.5rem .75rem}
.cookie-settings{position:fixed;right:1rem;bottom:5.5rem;background:var(--cc-accent);color:#fff;border:0;padding:.4rem .6rem;border-radius:999px;cursor:pointer;box-shadow:0 6px 20px rgb(0 0 0 / 12%);z-index:9998}

/* Ensure persistent button is visible and accessible on small screens */
.cookie-settings-persistent{position:fixed;right:0.75rem;bottom:5.25rem;background:var(--cc-accent);color:#fff;border:0;padding:.45rem .7rem;border-radius:999px;cursor:pointer;box-shadow:0 6px 20px rgb(0 0 0 / 12%);z-index:9998}

/* Accessibility focus */
.cc-btn:focus,.cookie-settings:focus{outline:3px solid #ffbf47;outline-offset:3px}

@media (width <=600px){
  .cc-inner{flex-direction:column;align-items:stretch}
  .cc-actions{flex-direction:row;justify-content:space-between}
  .cc-text p{font-size:0.95rem}
}

@media (width <=420px){
  /* On very small screens, stack cookie action buttons vertically and enlarge touch targets */
  .cc-actions{flex-direction:column;gap:0.5rem}
  .cc-btn{padding:.6rem .75rem;font-size:1rem;border-radius:0.5rem}
  .cc-inner{padding:.75rem}
}