/*
  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(0.75rem,1.3vw,1.125rem);
  --small-font: clamp(0.6875rem,0.9vw,0.875rem);
  /* 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:rgba(0,0,0,0.08);
  --menu-title-bg:#0C3C0C;
}

/* =================== 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 rgba(0,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 rgba(255,191,71,0.12);
  }
  a:hover{text-decoration:underline;color:#000}
  a.inside{color:#1E4C1E}

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

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

  /* -------------------- 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 .5rem 0}
  .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:rgba(0,0,0,0.06)}
  .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;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 0}
  /* 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:rgba(12,60,12,0.04);border:1px solid var(--brand-border);padding:0.75rem;margin:0 0 1rem 0;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:rgba(86,132,96,0.06)}
  .ds-section{margin:0 0 1.25rem 0;padding:0.5rem 0;border-bottom:1px dashed rgba(0,0,0,0.04)}
  .ds-section h2,.ds-section h3{margin:0 0 0.5rem 0}
  .meta-contact{font-size:0.95rem;margin:0 0 0.5rem 0}
  /* Make anchors more visible when focused */
  :target{outline:3px solid #ffbf47;padding:0.25rem}

  /* -------------------- Footer -------------------- */
  .site-footer{background-color:rgba(12,60,12,0.06);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.25rem 0;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 rgba(0,0,0,0.04);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;word-break:break-word}
  .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(min-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{align-self:stretch;justify-self: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: -webkit-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}
  .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 (max-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:rgba(86,132,96,0.06);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-position:center center;background-image: url('../img/kopf.jpg');background-repeat:no-repeat;background-position:right center}
    .site-banner .banner-logo{max-width:95%}
  }

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

  @media (min-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 (max-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 (max-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 (max-width:768px){
    .hamburger{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.95);color:#082408;border-radius:0.5rem;padding:.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.15);border:1px solid rgba(0,0,0,0.06)}
    /* Darker background variant when header is dark (brand-green) */
    .kopf-top .hamburger{background:linear-gradient(180deg,rgba(255,255,255,0.96),rgba(245,245,245,0.9));}
    .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 rgba(12,60,12,0.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 (max-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 rgba(0,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:rgba(0,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 (max-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 (min-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: rgba(255,255,255,0.94); /* leicht aufgehellter Hintergrund über dem Seiten-Hintergrund */
  border: 1px solid rgba(0,0,0,0.06); /* sehr dezenter Rahmen */
  padding: clamp(0.75rem,1.5vw,1.25rem);
  margin: 0 0 1.25rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  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 rgba(0,0,0,0.07)}
}

.post header h2{margin:0 0 .5rem 0;font-size:1.05rem;color:#082408}
.post .byline{font-size:0.95rem;color:rgba(0,0,0,0.6);margin:0 0 .5rem 0}
.post .lead{margin:0 0 .75rem 0;color:rgba(0,0,0,0.88)}

/* Kennzeichnung für Entwürfe mit leichter Hintergrundtönung (unaufdringlich) */
.post.post-draft{background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,247,0.96));border-color: rgba(86,132,96,0.08)}
.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 0;
  text-align:center;
  font-weight:500;
  font-size:1.03em;
}