/* =======================
   Esch Aktuell – Base CSS
   ======================= */

:root{
  /* Farben */
  --ea-red:#E00019;
  --ea-red-dark:#b80016;
  --ea-green:#51a853;
  --ea-green-dark:#3f8f40;
  --ea-green-50:#f4faf4;
  --ea-green-200:#e3f0e3;
  --text:#111;

  /* Layout / Typo */
  --sidebar-w:300px;
  --radius:10px;
  --shadow:0 6px 20px rgba(0,0,0,.08);
  --fs-base:clamp(15px,.97vw,17px);
  --fs-sm:clamp(13px,.85vw,15px);

  /* Header-Höhe (wird per JS exakt gesetzt; das hier ist Fallback) */
  --header-offset: clamp(70px, 10vw, 120px);

  /* Header-Titel (Desktop fix, Mobil dynamisch via JS im Bereich min..max) */
  --header-title-desk: 24px;  /* Desktop-Schriftgröße */
  --title-min-mob: 14;        /* MIN px für Mobil-Autofit */
  --title-max-mob: 26;        /* MAX px für Mobil-Autofit */
}

/* Reset + Grundschrift */
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* iOS/Safari: verhindert automatische Textvergrößerung */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body{
  font-family:Arial,Helvetica,"Segoe UI",system-ui,sans-serif;
  font-size:var(--fs-base);
  line-height:1.55;
  color:var(--text);
  background:#fff;
  text-rendering:optimizeLegibility;
}

/* Skip-Link (A11y) */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#000;color:#fff;z-index:2000;border-radius:8px}

/* ===== Layout-Grid ===== */
.layout{
  min-height:100dvh;
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  overflow-x:hidden;

  /* Platz für den fixierten Header */
  padding-top: var(--header-offset);
}

/* ===================== */
/*        HEADER         */
/* ===================== */
.header{
  grid-area: header;
  display: grid;
  grid-template-columns: auto auto 1fr; /* Burger | Brand | Titel */
  align-items: center;
  column-gap: 12px;
  padding: 10px 14px;

  /* Fixiert oben im Viewport */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030; /* Overlay=1040, Sidebar=1050 → Menü liegt darüber */

  /* Original-Hintergrund unverändert */
  background:
    linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0)),
    url("/Bilder/header_EschAktuellHintergrund.jpg");
  background-size: cover;
  background-position: center;
  border-bottom: 4px solid var(--ea-green);
}

/* Burger – Desktop aus, mobil an */
.burger{
  display: none; /* Desktop ausblenden */
  -webkit-tap-highlight-color: transparent;
  width: 44px;
  height: 36px;
  padding: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1100;
}
.burger:focus-visible{ outline:2px solid #000; outline-offset:2px }
.burger-bar{
  display: block;
  width: 100%;
  height: 3px;
  background: #111;           /* ggf. #fff für stärkeren Kontrast */
  border-radius: 2px;
}

/* Marke links */
.brand-wrap{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0 }
.brand-crest{ display:block }
.brand-text{ line-height:.86; min-width:0 }
.brand-text .esch   { display:block; font-weight:900; color:var(--ea-red); text-shadow:0 1px 0 rgba(255,255,255,.65); font-size:clamp(26px,2.4vw,36px) }
.brand-text .aktuell{ display:block; font-weight:900; color:#fff;    text-shadow:0 1px 0 rgba(0,0,0,.2);      font-size:clamp(26px,2.4vw,36px) }

/* Titel rechts – EINZEILIG, JS setzt mobil die Größe (Autofit) */
.header-title{ margin-left:6px; min-width:0 }
.org-title{
  font-size: var(--header-title-desk); /* Desktop fix */
  font-weight: 800;
  color: #000;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  white-space: nowrap;   /* eine Zeile */
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-url{ margin-top:2px; font-size:.92em; color:#6e6e6e }

/* ===== Mobile Header-Layout + Startwert für Auto-Fit ===== */
@media (max-width: 900px){
  .burger{ display: inline-flex; justify-self: end; } /* mobil sichtbar, rechts */

  .header{
    grid-template-columns: 1fr auto;  /* Brand | Burger */
    grid-template-rows: auto auto;    /* Zeile 1: Brand+Burger, Zeile 2: Titel */
    align-items: center;
  }
  .brand-wrap{ grid-column:1; grid-row:1; min-width:0 } /* Logo/Text links */
  .burger{ grid-column:2; grid-row:1 }                   /* Burger rechts */
  .header-title{ grid-column:1 / -1; grid-row:2; margin-top:4px; min-width:0 }

  /* Startgröße (wird von app.js dynamisch zwischen min..max gesetzt) */
  .org-title{ font-size: calc(var(--title-max-mob) * 1px); }
  .org-url{ display:none } /* URL mobil aus */
}

/* ===================== */
/*        SIDEBAR        */
/* ===================== */

.sidebar{
  grid-area: sidebar;
  background: var(--ea-green-200);
  border-right: 3px solid var(--ea-green);
  padding: .6rem 0;

  /* sticky unter dem Header */
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: var(--header-offset);
  align-self: start;

  max-height: calc(100dvh - var(--header-offset));
  overflow: auto;

  /* Typografie – überall gleich */
  --nav-font-family: Arial, Helvetica, "Segoe UI", system-ui, sans-serif;
  --nav-font-size: 1.06rem;   /* passt in alle Kacheln */
  --nav-font-weight: 700;     /* einheitlich kräftig */
  font-family: var(--nav-font-family);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  line-height: 1.25;
}

/* Liste + vertikale Abstände: EINHEITLICH auf <li> */
.nav-list{ list-style: none; margin: 0; padding: 0; }
.nav-list > li{ margin: .32rem .6rem; }
.nav-list li.sep{ height:1px; background:rgba(0,0,0,.08); margin:.4rem 0 }

/* Gemeinsame Basis für alle Kachel-Buttons (Links & Buttons) */
.nav a,
.nav .nav-btn{
  display: flex; width: 100%; align-items: center; gap: .55rem;
  min-height: 64px; padding: 14px 16px;
  color: #fff; text-decoration: none;
  background: linear-gradient(180deg,#6ec16e 0%, #49a14a 100%);
  border: 1px solid #2d7f2e;
  border-left-width: 6px; border-left-color: #2d7f2e;
  border-radius: var(--radius);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  font: inherit; /* Family, Größe, Gewicht übernehmen */
  cursor: pointer;
}

/* Hover/Focus – dezent dunkler grün */
.nav a:hover,
.nav a:focus,
.nav .nav-btn:hover{
  background: linear-gradient(180deg,#66ba66 0%, #439a45 100%);
  border-color:#2a7a2b; border-left-color:#2a7a2b;
  color:#fff;
}

/* Buttons behalten beim Focus die Grundfarbe → kein „Kleben“ */
.nav .nav-btn:focus{
  background: linear-gradient(180deg,#6ec16e 0%, #49a14a 100%);
  border-color:#2d7f2e; border-left-color:#2d7f2e;
}

/* Active – gleiche Optik/Typo wie Hover (keine Sonder-Fettung) */
.nav a.active,
.nav a.active:hover,
.nav a.active:focus{
  background: linear-gradient(180deg,#66ba66 0%, #439a45 100%);
  border-color:#2a7a2b; border-left-color:#2a7a2b;
  color:#fff;
  font-weight: inherit;
}

/* Pfeil nur bei Gruppen-Buttons */
.nav a::after{ content:none; }
.nav .nav-btn .caret{
  margin-left:auto; width:0; height:0;
  border:6px solid transparent; border-left-color:rgba(255,255,255,.85);
  transform:translateX(2px) rotate(0deg);
  transition: transform .18s ease;
}
.nav .group.is-open > .nav-btn .caret,
.nav .nav-btn[aria-expanded="true"] .caret{ transform:translateX(2px) rotate(90deg) }

/* Subnavigation */
.nav .nav-sub{ list-style:none; margin:0; padding:0 0 .4rem 0; }
.nav .nav-sub[hidden]{ display:none !important; }
.nav .nav-sub > li{ margin:.28rem .6rem .28rem 1.2rem; } /* konsistente Einrückung */

/* Unterpunkte (Links & verschachtelte Buttons) */
.nav .nav-sub a,
.nav .nav-sub .nav-btn{
  min-height:56px; padding:12px 14px; width: 100%;
  background: linear-gradient(180deg,#7ecb7f 0%, #5aad5b 100%);
  border: 1px solid #2f8b30; border-left-width:6px; border-left-color:#2f8b30;
  border-radius: calc(var(--radius) - 2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  color:#fff; font: inherit; text-align:left;
}

/* Sub: Hover/Focus/Active – grün abgedunkelt */
.nav .nav-sub a:hover,
.nav .nav-sub a:focus,
.nav .nav-sub .nav-btn:hover{
  background: linear-gradient(180deg,#6fbe70 0%, #489d49 100%);
  border-color:#2a7a2b; border-left-color:#2a7a2b;
}
.nav .nav-sub .nav-btn:focus{
  background: linear-gradient(180deg,#7ecb7f 0%, #5aad5b 100%);
  border-color:#2f8b30; border-left-color:#2f8b30;
}
.nav .nav-sub a.active,
.nav .nav-sub a.active:hover,
.nav .nav-sub a.active:focus{
  background: linear-gradient(180deg,#6fbe70 0%, #489d49 100%);
  border-color:#2a7a2b; border-left-color:#2a7a2b;
  font-weight: inherit;
}

/* Desktop: Sidebar fix + oberes „Padding-Loch“ links in Grün füllen */
@media (min-width: 901px){
  .sidebar{
    position: fixed;
    left: 0;
    top: var(--header-offset);
    width: var(--sidebar-w);
    height: calc(100dvh - var(--header-offset));
    overflow: auto;
    z-index: 1020;
  }
  .sidebar::before{
    content:"";
    position: fixed;
    left: 0; top: 0;
    width: var(--sidebar-w);
    height: var(--header-offset);
    background: var(--ea-green-200);
    border-right: 3px solid var(--ea-green);
    z-index: 1019; /* unter Header (1030), über Main */
  }
}

/* sehr kleine Screens – optional leicht kleinere Typo */
@media (max-width:360px){
  .sidebar{ --nav-font-size: var(--fs-sm, 15px); }
}

/* ===================== */
/*      MAIN & FOOTER    */
/* ===================== */
/* MAIN */
.main{
  grid-area: main;
  padding: clamp(14px, 2.2vw, 26px);
  min-width: 0;
}

/* FOOTER (Logo/Brand links, nur "Impressum" rechts) */
.footer{
  grid-area: footer;
  background:#fafafa;
  border-top:1px solid #e7e7e7;
  padding:14px 16px;
  font-size:var(--fs-sm);
  color:#333;
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr auto; /* links Brand, rechts Link */
  gap:16px;
  align-items:start;
}

/* Desktop: Footer nicht unter der fixierten Sidebar anzeigen */
@media (min-width: 901px){
  .footer{
    grid-column: 2 / -1; /* nur Main-Spalte */
  }
}

/* Brand links */
.f-brand{display:flex; align-items:center; gap:.6rem; min-width:0}
.f-crest{flex:0 0 auto; display:block}
.f-brand-text{line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.f-brand-text strong{font-weight:800}
.f-brand-text small{color:#666}

/* Einziger Link rechts */
.f-links{display:flex; align-items:flex-start; justify-content:flex-end}
.f-link{
  color:#1b1b1b; text-decoration:none; font-weight:700;
  border-bottom:1px solid transparent; padding:.15rem 0;
}
.f-link:hover, .f-link:focus{
  color:var(--ea-red);
  border-bottom-color:rgba(224,0,25,.25);
}

/* Mobil: untereinander & zentriert */
@media (max-width: 900px){
  .footer-inner{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
  }
  .f-links{justify-content:center}
}

/* ===================== */
/*      Overlay/OffCanvas */
/* ===================== */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.38); z-index:1040 }
.overlay[hidden]{ display:none !important; }

@media (max-width:900px){
  .layout{ grid-template-columns:1fr; grid-template-areas:"header""main""footer" }
  .sidebar{
    position:fixed; inset:0 auto 0 0;
    width:min(86vw,340px);
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.2,.7,.2,1);
    z-index:1050; box-shadow:var(--shadow);
  }
  .layout[data-menu-open="true"] .sidebar{ transform:none }
  .layout[data-menu-open="true"] .overlay[hidden]{ display:block }
  .layout[data-menu-open="true"] .overlay{ display:block }
}


/* Mobile: Alle Sidebar-Links typografisch wie "Home aktiv" */
@media (max-width: 900px){
  /* Einheitliche (fette) Grundstärke für alle Nav-Elemente */
  .sidebar{ --nav-font-weight: 800; }

  .nav a,
  .nav .nav-btn,
  .nav .nav-sub a{
    font-weight: var(--nav-font-weight, 800);
    font-size: var(--nav-font-size, 1.06rem);
  }

  /* Aktiv-Zustand übernimmt die gleiche Stärke (keine Extra-Fettung) */
  .nav a.active,
  .nav .nav-sub a.active{
    font-weight: inherit;
  }
}

/* Touch – größere Tap-Ziele */
@media (pointer:coarse){ .nav a{ padding:.9rem 1.1rem } }

/* Bewegungsreduktion */
@media (prefers-reduced-motion: reduce){ .sidebar{ transition:none !important } }

/* Fokus-Style */
:focus-visible{ outline:2px solid var(--ea-green); outline-offset:2px }

/* ===================== */
/*      EA MODAL         */
/* ===================== */
.ea-modal-backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45);
  z-index: 2147483645 !important; /* sicher über jedem Header */
}
.ea-modal{
  position: fixed !important;
  inset: clamp(12px, 3vh, 24px) clamp(10px, 3vw, 24px) !important;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; box-shadow: var(--shadow);
  max-height: calc(100dvh - clamp(24px, 6vh, 48px));
  overflow: auto;
  z-index: 2147483646 !important; /* oberhalb der Backdrop */
}
.ea-modal header{
  position: sticky; top: 0; background:#fff;
  padding:10px 14px; border-bottom:1px solid #eee; z-index:1;
}
.ea-modal .ea-close{
  margin-left:auto; position: sticky; top:8px;
  width:36px; height:36px; border:0; border-radius:50%;
  background:#111; color:#fff; cursor:pointer;
}
.ea-modal img, .ea-modal video, .ea-modal figure{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* === Farbränder für Sektionen === */
:root{
  --blau: #1e88e5;
}
.ea-framed{
  border: 3px solid currentColor;
  border-radius: 14px;
  padding: clamp(12px, 1.8vw, 20px);
  background: #fff;
  margin: 10px 0 24px;
}
.ea-framed--green{ color: var(--ea-green); box-shadow: inset 0 0 0 1px rgba(0,0,0,.02); }
.ea-framed--red  { color: var(--ea-red);   box-shadow: inset 0 0 0 1px rgba(0,0,0,.02); }
.ea-framed--blue { color: var(--blau);     box-shadow: inset 0 0 0 1px rgba(0,0,0,.02); }

.ea-framed > .cards,
.ea-framed > .grid,
.ea-framed > .list{ margin:0; }



/* ===================== */
/*  Kapsel-Header        */
/*    Seitenübershriften */
/* ===================== */



.ea-head{
  /* per Modifier überschreibbar */
  --ea-head-bg: var(--ea-green-50);
  --ea-head-accent: var(--ea-green);

  margin: 0 0 12px 0;
  padding: 10px 12px 12px;
  background: var(--ea-head-bg);
  border-left: 8px solid var(--ea-head-accent);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.ea-head__title{
  margin: 0;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .2px;
  color: #000;
  font-size: clamp(18px, 2.1vw, 24px);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.ea-head__sub{
  margin: .3rem 0 0 0;
  color: #333;
  font-size: clamp(14px, 1vw, 16px);
}

/* Varianten (optional) */
.ea-head--red { --ea-head-bg:#fff3f4; --ea-head-accent:var(--ea-red); }
.ea-head--plain { box-shadow:none; }
.ea-head--tight { margin-bottom:8px; padding:8px 10px 10px; }



/* ===================== */
/*  Alter Schreibstil    */
/*  Historisches Esch    */
/* ===================== */



:root{
  --ea-note-max: 920px;
  --ea-note-pad-x: clamp(16px,2.6vw,32px);
  --ea-note-pad-y: clamp(16px,2.2vw,28px);

  /* Typo */
  --ea-font-display: "Caveat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ea-font-serif: "Merriweather", Georgia, "Times New Roman", serif;

  /* Papierfarben (wie Ursprung) */
  --ea-paper-bg: #f6efde;      /* warmes, sehr helles Beige */
  --ea-paper-border: #e7dcc6;  /* feiner Rand */
  --ea-paper-shadow: 0 16px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
}

/* Seitenbreite */
.ea-page{
  max-width: min(100%, var(--ea-note-max) + 2*var(--ea-note-pad-x));
  margin: 0 auto;
}

/* Basis (MOBILE): flach */
.ea-note{
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: var(--ea-note-pad-y) var(--ea-note-pad-x);
  border-radius: 0;
}
.ea-note::before,
.ea-note::after { content: none; } /* kein Tape */

/* Typografie */
.ea-note__body{ font-family: var(--ea-font-serif); }
.ea-note__head{ margin: 0 0 clamp(12px,1.8vw,20px); }
.ea-note > :last-child{ margin-bottom: 0; } /* hält den unteren Rand clean, auch ohne Footer */

.ea-note h1{
  font-family: "Caveat", cursive;
  font-weight: 400;           /* bewusst schlanker wie im alten Stil */
  font-size: 2.5em;
  text-align: center;
  margin: 0 0 20px 0;
}

.ea-note h2{
  font-family: var(--ea-font-serif);
  font-size: clamp(20px, 2.2vw, 28px);
  margin: 1.1em 0 .45em;
}
.ea-note h3{ margin: 1.05em 0 .35em; }
.ea-note p  { margin: .65em 0; }

.ea-byline{ font-style: italic; color:#565656; margin-bottom: .65em; }


/* Quellenangaben */
.ea-note .quellenangaben{
  font-size: 0.8em;
  color: #555;
  margin-top: 1em;
}

/* Desktop: Papierkarte exakt wie im Ursprung (ohne Tape) */
@media (min-width: 900px){
  .ea-note{
    background: var(--ea-paper-bg);
    border: 1px solid var(--ea-paper-border);
    border-radius: 14px;
    box-shadow: var(--ea-paper-shadow);
  }
}

/* Optional: Hinweisboxen (CI-grün), bleiben wie gehabt */
.ea-note .greenbox{
  border-left:6px solid var(--ea-green);
  background: var(--ea-green-50);
  padding: .8em 1em;
  border-radius: 10px;
  margin: 1em 0;
}
.ea-note .redbox{
  border-left:6px solid var(--ea-red);
  background: #fff3f4;
  padding: .8em 1em;
  border-radius: 10px;
  margin: 1em 0;
}

/* =========================================================
   TABS (Esch Aktuell) – responsive Pills
   Wiederverwendbar: .ea-tabs; bestehende Seiten: .hefte-tabs
   ========================================================= */

/* Container: 3 gleichbreite Kapseln im dunklen Balken */
.ea-tabs,
.hefte-tabs{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
  background:#2f2f2f;
  border-radius:12px;
  padding:8px;
  align-items:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Tab-Pills */
.ea-tabs .tab,
.hefte-tabs .tab{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:.6rem 1rem;
  color:#fff;
  background:rgba(255,255,255,.06);
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
  line-height:1.1;
  text-align:center;
  transition: background .2s, box-shadow .2s, transform .1s;
  white-space:nowrap;        /* Desktop einzeilig */
  overflow:hidden;
  text-overflow:ellipsis;
}
.ea-tabs .tab:is(:hover,:focus-visible),
.hefte-tabs .tab:is(:hover,:focus-visible){
  background:rgba(255,255,255,.12);
}
.ea-tabs .tab.is-active,
.hefte-tabs .tab.is-active{
  background:linear-gradient(180deg,#E00019,#c80015);
  box-shadow:0 2px 0 rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.18);
  color:#fff;
}

/* Sehr schmale Geräte: 2 + 1 Aufteilung */
@media (max-width: 420px){
  .ea-tabs,
  .hefte-tabs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ea-tabs .tab:last-child,
  .hefte-tabs .tab:last-child{
    grid-column: 1 / -1; /* dritter Tab volle Breite in Zeile 2 */
  }
  .ea-tabs .tab,
  .hefte-tabs .tab{
    white-space:normal;  /* darf mehrzeilig werden */
  }
}

/* Mini-Geräte (z. B. 320px): alle untereinander */
@media (max-width: 340px){
  .ea-tabs,
  .hefte-tabs{
    grid-template-columns: 1fr;
  }
}

/* ===== Esch-Aktuell Tabs – Sichtbarkeit, Stickiness, Mobile-Optimierung ===== */

/* Balken leicht „glassy“, immer gut sichtbar */
.ea-tabs,
.hefte-tabs{
  background: rgba(47,47,47,.92);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  border: 1px solid rgba(255,255,255,.08);
}

/* Sticky-Variante: bleibt unterm Header sichtbar */
.ea-tabs.sticky,
.hefte-tabs.sticky{
  position: sticky;
  top: calc(var(--header-offset, 64px) + 6px); /* Headerhöhe + Luft */
  z-index: 50;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Aktiver Tab: etwas größer & klarer */
.ea-tabs .tab.is-active,
.hefte-tabs .tab.is-active{
  transform: translateY(-1px);
  font-weight: 900;
}

/* Touch-Ziele vergrößern (Mobile) */
@media (max-width: 600px){
  .ea-tabs .tab,
  .hefte-tabs .tab{
    padding: .7rem 1rem;
    font-size: 1rem;
  }
}

/* Sicherstellen, dass lange Wörter nicht abgeschnitten werden */
.ea-tabs .tab,
.hefte-tabs .tab{
  word-break: keep-all;
  hyphens: auto;
}

/* Panels: sanftes Ein-/Ausblenden (motion-aware) */
.panel{
  display: none;
  padding: 12px 6px 4px;
  opacity: 0;
  transition: opacity .18s ease;
}
.panel.is-active{
  display: block;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .panel{ transition: none; }
}

/* Überschrift-Kapsel etwas luftiger (passt optisch zum Balken) */
.ea-head{ margin: .5rem 0 1.1rem; }
.ea-head__title{ font-size: clamp(1.25rem, 2.2vw, 1.9rem); }
.ea-head__sub{ margin-top: .25rem; color: #2f5536; }

/* Karten-Raster: minimal größerer Abstand auf Mobile */
@media (max-width: 480px){
  .cards{ gap: 14px; }
}

/* === Tabs: Segmented-Control (Desktop & Mobile konsistent) === */
.ea-tabs.ea-tabs--seg,
.hefte-tabs.ea-tabs--seg{
  /* immer 3 Spalten – keine 2+1-Umbrecherei */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;

  /* heller, dünner Balken */
  background: #f6f6f6;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: 6px;

  /* sticky bleibt wie gehabt (kommt von .sticky) */
}

/* Buttons: schlank, zweizeilig erlaubt */
.ea-tabs.ea-tabs--seg .tab,
.hefte-tabs.ea-tabs--seg .tab{
  background: transparent;
  color: #222;
  border-radius: 10px;
  padding: .5rem .6rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;

  white-space: normal;      /* darf umbrechen */
  word-break: keep-all;
  hyphens: auto;

  transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}

/* Hover/Focus */
.ea-tabs.ea-tabs--seg .tab:is(:hover,:focus-visible){
  background: rgba(0,0,0,.04);
}

/* Aktiv: „Kärtchen“ auf hell – modern & klar */
.ea-tabs.ea-tabs--seg .tab.is-active{
  background: #fff;
  color: #E00019;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.10);
}

/* Mobile Feintuning – bleibt EINZEILIG mit 3 Spalten */
@media (max-width: 420px){
  .ea-tabs.ea-tabs--seg,
  .hefte-tabs.ea-tabs--seg{
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* erzwingt 3 Spalten */
  }
  .ea-tabs.ea-tabs--seg .tab,
  .hefte-tabs.ea-tabs--seg .tab{
    padding: .48rem .5rem;
    font-size: .96rem;       /* etwas kompakter */
  }
}
@media (max-width: 340px){
  .ea-tabs.ea-tabs--seg .tab,
  .hefte-tabs.ea-tabs--seg .tab{
    font-size: .92rem;       /* sehr schmale Geräte */
  }
}

/* Sticky-Look leicht „glassy“ */
.ea-tabs.sticky{
  position: sticky;
  top: calc(var(--header-offset, 64px) + 6px);
  z-index: 50;
  background: rgba(246,246,246,.96);
  backdrop-filter: saturate(120%) blur(4px);
  -webkit-backdrop-filter: saturate(120%) blur(4px);
}