/* 1) Akkordeon =========================================================
   mozilo Accordion (Namensraum: mz-akk-*)
   Version: 1.2 — 2025-11-16
   Checkbox-Version: mehrere Elemente können offen sein,
   jedes Element kann einzeln wieder geschlossen werden.
   Titel & Inhalt unterstützen beliebiges HTML.
   ========================================================= 
*/
/* Styling Varianten über Zusatzklassen mit eigenem CSS am Dateiende.
Foglende Klassen sind schon angelegt - können verändert werden
    - is-compact 
    - theme-softblue 
    -light-sky 
    - warm-sand 
    - dark-slate 
    -is-inline 
*/
/* =========================
   0) Styling-Variablen
   ========================= */

.mz-akk-box {
  --mz-akk-max-width: 64rem;
  --mz-akk-gap: 1.5rem;

  --mz-akk-font: system-ui, Arial, sans-serif;
  --mz-akk-font-size: 1rem;
  --mz-akk-text: #111;
  --mz-akk-muted: #666;

  --mz-akk-bg: #ffffff;
  --mz-akk-header-bg: #f6f6f7;
  --mz-akk-header-bg-hover: #eeeeef;
  --mz-akk-border: #d9d9df;
  --mz-akk-focus: #1769ff;

  --mz-akk-radius: 10px;
  --mz-akk-shadow: 0 1px 2px rgba(0,0,0,.06);

  --mz-akk-duration: 380ms;
  --mz-akk-ease: cubic-bezier(.2,.6,.2,1);

  --mz-akk-max-body: 1200px;

  --mz-akk-title-img-h: 2.5rem;

  --akk-scroll-offset: 16px;
    
  --mz-akk-icon-url: url("icons/caret-right.svg");   /* Standard-Symbol im titel */    
}

/* =========================
   1) Box-Grundlayout
   ========================= */

.mz-akk-box {
  max-width: var(--mz-akk-max-width);
  margin: 0 auto;
  font-family: var(--mz-akk-font);
  font-size: var(--mz-akk-font-size);
  color: var(--mz-akk-text);

  /* ersetzt frühere .mz-akk-form */
  display: grid;
  gap: var(--mz-akk-gap);
}

/* =========================
   2) Einzel-Item
   ========================= */

.mz-akk-item {
  background: var(--mz-akk-bg);
  border: 1px solid var(--mz-akk-border);
  border-radius: var(--mz-akk-radius);
  box-shadow: var(--mz-akk-shadow);
  overflow: clip;
  position: relative;
  scroll-margin-top: var(--akk-scroll-offset, 16px);
}

/* Checkbox verstecken – klickbar über Label */
.mz-akk-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* =========================
   3) Header
   ========================= */

.mz-akk-header {
  display: flex;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
  padding: 0.9rem 1rem;
  background: var(--mz-akk-header-bg);
  border-bottom: 1px solid var(--mz-akk-border);
  user-select: none;
  transition: background-color var(--mz-akk-duration) var(--mz-akk-ease);
}

.mz-akk-header:hover {
  background: var(--mz-akk-header-bg-hover);
}

.mz-akk-header:focus-visible {
  outline: 2px solid var(--mz-akk-focus);
  outline-offset: 2px;
  border-radius: calc(var(--mz-akk-radius) - 2px);
}

.mz-akk-title { font-weight: 600; }
.mz-akk-subtitle { color: var(--mz-akk-muted); font-size: .95em; }

.mz-akk-header img {
  max-height: var(--mz-akk-title-img-h);
  width: auto;
  display: inline-block;
}

/* =========================
   4) Title-Icon via SVG
   ========================= */

.mz-akk-header::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  margin-right: .4rem;
  background-image: var(--mz-akk-icon-url); /* <-- Variable hier statt fester URL */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform var(--mz-akk-duration) var(--mz-akk-ease);
  opacity: .9;
}

.mz-akk-item:has(.mz-akk-toggle:checked) .mz-akk-header::before {
  transform: rotate(90deg);
}

/* =========================
   5) Body
   ========================= */

.mz-akk-body {
  max-height: 0;
  overflow: clip;
  padding: 0 1rem;
  transition:
    max-height var(--mz-akk-duration) var(--mz-akk-ease),
    padding-top var(--mz-akk-duration) var(--mz-akk-ease),
    padding-bottom var(--mz-akk-duration) var(--mz-akk-ease);
  background: var(--mz-akk-bg);
}

.mz-akk-item:has(.mz-akk-toggle:checked) .mz-akk-body {
  max-height: var(--mz-akk-max-body);
  padding-top: 0.9rem;
  padding-bottom: 1rem;
}

.mz-akk-body p { margin: 0 0 .8rem 0; line-height: 1.6; }
.mz-akk-body ul, .mz-akk-body ol { margin: 0 0 .9rem 1.2rem; }

.mz-akk-body img,
.mz-akk-body video,
.mz-akk-body svg,
.mz-akk-body canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

.mz-akk-item:first-child .mz-akk-header {
  border-top-left-radius: var(--mz-akk-radius);
  border-top-right-radius: var(--mz-akk-radius);
}

.mz-akk-item:last-child .mz-akk-body {
  border-bottom-left-radius: var(--mz-akk-radius);
  border-bottom-right-radius: var(--mz-akk-radius);
}

/* =========================
   6) Barrierefreiheit
   ========================= */

@media (prefers-reduced-motion: reduce) {
  .mz-akk-header,
  .mz-akk-body {
    transition: none;
  }
}

.mz-akk-item:has(.mz-akk-toggle:focus-visible) .mz-akk-header {
  outline: 2px solid var(--mz-akk-focus);
  outline-offset: 2px;
  border-radius: calc(var(--mz-akk-radius) - 2px);
}

/* =========================
   7) Modifikator-Klassen
   ========================= */

.mz-akk-box.is-compact {
  --mz-akk-gap: .35rem;
  --mz-akk-radius: 8px;
  --mz-akk-title-img-h: 1.25rem;
  --mz-akk-duration: 300ms;
}

.mz-akk-box.theme-softblue {
  --mz-akk-header-bg: #f4f7ff;
  --mz-akk-header-bg-hover: #e9f0ff;
  --mz-akk-border: #cfd8ea;
  --mz-akk-focus: #2a7fff;
}

/* --- Themes: light-sky, warm-sand, dark-slate (unverändert) --- */

.mz-akk-box.light-sky {
  --mz-akk-header-bg: #eef6ff;
  --mz-akk-header-bg-hover: #e2efff;
  --mz-akk-border: #bcd7ff;
  --mz-akk-focus: #1e66ff;
  --mz-akk-radius: 10px;
  --mz-akk-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --mz-akk-font-size: 1rem;
  --mz-akk-gap: 0.55rem;
  --mz-akk-icon-url: url("icons/arrow-circle.svg");     
}

@media (prefers-color-scheme: dark) {
  .mz-akk-box.light-sky {
    --mz-akk-header-bg: #16233a;
    --mz-akk-header-bg-hover: #1b2b48;
    --mz-akk-border: #2e4975;
    --mz-akk-focus: #7aa2ff;
  }
}

.mz-akk-box.warm-sand {
  --mz-akk-header-bg: #fff8e6;
  --mz-akk-header-bg-hover: #fff2d1;
  --mz-akk-border: #e2c88f;
  --mz-akk-focus: #d99a00;
  --mz-akk-radius: 12px;
  --mz-akk-shadow: 0 1px 2px rgba(80, 60, 0, 0.1);
  --mz-akk-font-size: 1.02rem;
  --mz-akk-gap: 0.6rem;
  --mz-akk-icon-url: url("icons/chevron-down.svg");    
}

@media (prefers-color-scheme: dark) {
  .mz-akk-box.warm-sand {
    --mz-akk-header-bg: #2b2415;
    --mz-akk-header-bg-hover: #3a311d;
    --mz-akk-border: #5e4b29;
    --mz-akk-focus: #ffb200;
  }
}

.mz-akk-box.dark-slate {
  --mz-akk-bg: #111418;
  --mz-akk-header-bg: #1a1f26;
  --mz-akk-header-bg-hover: #222833;
  --mz-akk-border: #3a4352;
  --mz-akk-focus: #63a4ff;
  --mz-akk-text: #e9eef7;
  --mz-akk-muted: #a3b0c0;
  --mz-akk-radius: 0;
  --mz-akk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --mz-akk-font-size: 1.5rem;
  --mz-akk-gap: 1rem;
  --mz-akk-icon-url: url("icons/caret-right.svg");     
  --mz-akk-max-width: 800px;
}

@media (prefers-color-scheme: dark) {
  .mz-akk-box.dark-slate {
    --mz-akk-header-bg-hover: #2b3442;
    --mz-akk-focus: #81b4ff;
  }
}

.mz-akk-box.is-inline {
  --mz-akk-max-width: 100%;
  --mz-akk-gap: .25rem;
  --mz-akk-radius: 4px;
  --mz-akk-shadow: none;
  --mz-akk-header-bg: transparent;
  --mz-akk-header-bg-hover: rgba(0,0,0,.04);
  --mz-akk-border: rgba(0,0,0,.15);
  --mz-akk-font-size: .95rem;
}

/* Optional etwas kompaktere Item-Anordnung; INLINE */
.mz-akk-box.is-inline .mz-akk-item {
  display: inline-block;
  margin-right: .5rem;
}

.mz-akk-box.is-inline .mz-akk-header {
  padding: .25rem .5rem;
}

.mz-akk-box.is-inline .mz-akk-body {
  padding: .25rem .5rem;
}


/* =========================
   8) Fallback ohne :has()
   ========================= */

@supports not (selector(:has(*))) {
  .mz-akk-body {
    max-height: none !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    overflow: visible !important;
  }
}

/* 2) FlagBox =============== flag-box.css (minimal) =============== */
:root{
  --ibox-width : 360px;      /* max Panelbreite */
  --ibox-speed : 320ms;      /* sanfte Animation */
  --flag-size  : 48px;       /* Kantenlänge des Flags */
  --flag-top   : 15rem;      /* Default-Top (per body[data-flag-top] überschreibbar) */
  --overlay    : rgba(0,0,0,.5);
}

/* Overlay – vollflächig, klickbar nur wenn sichtbar */
#ibox-overlay{
  position: fixed;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ibox-speed);
  z-index: 900;
}
#ibox-overlay.visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Panel – von rechts, „Flag guckt raus“ solange geschlossen */
.ibox-panel{
  position: fixed;
  top: var(--flag-top, 15rem);
  right: 0;
  width: min(var(--ibox-width), calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  box-sizing: border-box;
  background: #fff;
  color: #222;
  border-radius: .5rem 0 0 .5rem; /* nur linke Ecke rund, da rechts an Kante */
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 1000; /* über Overlay */
  overflow: hidden; /* saubere Rundung */
  will-change: transform;
  transition: transform var(--ibox-speed) ease;
  transform: translateX(calc(100% - var(--flag-size)));
}

/* offen: komplett sichtbar */
.ibox-panel.open{
  transform: translateX(0);
  overflow: auto; /* Inhalt darf scrollen */
}

/* Geschlossen: nur Flag sichtbar, ohne „Schlitz“ */
.ibox-panel:not(.open){
  background: transparent;
  box-shadow: none;
  min-height: var(--flag-size);
}
/* Alles außer Flag ausblenden, damit nichts an der Kante „durchscheint“ */
.ibox-panel:not(.open) > :not(.ibox-flag){ display: none !important; }

/* Flag – fix an der Panel-Oberkante, ragt nach links heraus */
.ibox-panel .ibox-flag{
  position: absolute;
  top: 0;
  right: calc(100% - var(--flag-size));
  width: var(--flag-size);
  height: var(--flag-size);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: .5rem 0 0 .5rem;
  background: #ffb400;
  color: #000;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background .2s ease, transform .2s ease;
  z-index: 1010;
}
.ibox-panel .ibox-flag:hover{ background:#ffa000; }
.ibox-panel .ibox-flag:active{ transform: scale(.96); }
.ibox-panel .ibox-flag:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Inhalt – simples Padding; bei „right“ links Platz für das Flag lassen */
.ibox-panel .ibox-content{
  padding: 1rem 1.25rem 1.5rem;
  padding-left: calc(1.25rem + var(--flag-size));
  line-height: 1.5;
}

/* Barrierearme Bewegung */
@media (prefers-reduced-motion: reduce){
  .ibox-panel, #ibox-overlay, .ibox-panel .ibox-flag{ transition: none !important; }
}

/* Optional: Daten-Attribut statt CSS-Var für Top-Versatz */
body[data-flag-top] .ibox-panel{
  top: attr(data-flag-top); /* wird von Browsern ignoriert → JS setzt tatsächlich */
}

/* =========================
   Vertikale Position je Instanz
   Default: Desktop / große Screens
   (passe Werte frei an)
========================= */
.ibox-top-1 { --flag-top: 15rem; } /* erste Box */
.ibox-top-2 { --flag-top: 19rem; } /* +4rem Abstand */
.ibox-top-3 { --flag-top: 23rem; } /* +4rem Abstand */

/* Phone hochkant (<=600px) */
@media (max-width: 600px) and (orientation: portrait){
  .ibox-top-1 { --flag-top: 10rem; }
  .ibox-top-2 { --flag-top: 13rem; }
  .ibox-top-3 { --flag-top: 16rem; }
}

/* Phone quer (<=900px) */
@media (max-width: 900px) and (orientation: landscape){
  .ibox-top-1 { --flag-top: 12rem; }
  .ibox-top-2 { --flag-top: 15rem; }
  .ibox-top-3 { --flag-top: 18rem; }
}

/* Tablet quer / mittlere Screens (optional Feintuning) */
@media (min-width: 901px) and (max-width: 1200px){
  .ibox-top-1 { --flag-top: 14rem; }
  .ibox-top-2 { --flag-top: 18rem; }
  .ibox-top-3 { --flag-top: 22rem; }
}

/* Optional: Safe-Area rechts (iPhone Notch im Querformat)
   – nur wenn du merkst, dass es knapp wird */
@supports (right: env(safe-area-inset-right)){
  .ibox-panel{ right: max(0px, env(safe-area-inset-right)); }
}

/* 3) FloatBox =======================================================================
   float-img.css — universelles Bild-/Float-Modul (Variant B: Opt-in via [data-floatimg])
   Version: 2025-10-01 (robuste Fassung ohne Auto-flow-root)
   ► Template-Schalter:
       <main id="content" data-floatimg> … </main>
   Wirkt NUR innerhalb von [data-floatimg]; Header/Logo/Slider bleiben unberührt.
   ======================================================================= */

/* 0) Scope-Guard: Das Attribut-Element selbst soll immer block & 100% breit sein */
[data-floatimg] {
  display: block;
  width: 100%;
  max-width: 100%;
}
/* Leichter Außenabstand für alle Lightbox-Wrapper */
[data-floatimg] .lightbox-item { padding-inline: .6em; }

/* 1) Responsive Defaults für Bilder im Content-Scope (niedrige Spezifität via :where) */
[data-floatimg] :where(img:not([width][height]), picture > img[data-responsive]) {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 2) KEIN automatisches flow-root mehr auf generischen Containern (Vermeidet Shrink-Effekte)
      -> Nur opt-in-Utilities: .flow-root / .clearfix */
[data-floatimg] :where(.flow-root, .clearfix) { display: flow-root; }
[data-floatimg] .clear { clear: both; }

/* 3) Bildklassen (mozilo & Co.) nur für echte <img> */
[data-floatimg] :where(img.contentimage, img.leftcontentimage, img.rightcontentimage) {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius, .5rem);
}

/* 4) Floating-Bilder links/rechts */
[data-floatimg] :where(img.leftcontentimage, span.leftcontentimage) {
  float: left;
/* margin-weg     
  margin: .35em .9em .75em .9em;
 */   
  max-width: min(100%, 18rem);
}
[data-floatimg] :where(img.rightcontentimage, span.rightcontentimage) {
  float: right;
/* margin-weg      
  margin: .35em 0 .75em .9em;
*/      
  max-width: min(100%, 18rem);
}

/* Optional: schöner Textfluss */
@supports (shape-outside: inset(0 round 12px)) {
  [data-floatimg] img.leftcontentimage  { shape-outside: inset(0 round 12px); }
  [data-floatimg] img.rightcontentimage { shape-outside: inset(0 round 12px); }
}


/* 5) Captions / Bildunterschriften */
[data-floatimg] :where(figcaption, .imagesubtitle,
                       span.contentimage, span.leftcontentimage, span.rightcontentimage) {
  display: block;
  font-size: .85em;
  color: var(--clr-muted, #6b7280);
  line-height: 1.3;
  text-align: center;
  margin: .35rem;
}
[data-floatimg] figure { margin: 1.2em 0; }

/* 6) Utilities */
[data-floatimg] .float-left  { float: left;  margin: .35em .9em .75em 0; }
[data-floatimg] .float-right { float: right; margin: .35em 0 .75em .9em; }
[data-floatimg] .float-none  { float: none !important; }
[data-floatimg] .img-center  { display: block; margin-inline: auto; float: none; }
[data-floatimg] .img-rounded { border-radius: var(--radius, .5rem); }
[data-floatimg] .img-framed  { box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.1)); background: #fff; }

/* 7) Mobile: Floats aufheben */
@media (max-width: 599px) {
  [data-floatimg] :where(img.leftcontentimage, span.leftcontentimage,
                         img.rightcontentimage, span.rightcontentimage,
                         .float-left, .float-right) {
    float: none;
    margin: 0 0 1rem 0;
    max-width: 100%;
  }
}

/* 8) Safety */
[data-floatimg] img { max-width: 100%; height: auto; }

/* 9) Headings unter Floats beginnen (scoped) */
[data-floatimg] :where(h1,h2,h3,h4,h5,h6,
                       .heading1, .heading2, .heading3, .heading4, .heading5, .heading6) {
  clear: both;
}
[data-floatimg] :where(.content-box > h3, .card-header, .card-footer) { clear: none; }

/* 10) Kompatibilitäts-Shim:
   Überschreibt alte Theme-Regeln, die .contentimage/.leftcontentimage/.rightcontentimage
   pauschal auf inline-block setzen. Der Scope + !important macht es zuverlässig. */
[data-floatimg] .contentimage,
[data-floatimg] .leftcontentimage,
[data-floatimg] .rightcontentimage {
  display: block !important;
  max-width: 100%;
  height: auto;
}

/* 4) GridBox  GridContainer mit GridBoxen === 
/* 31.12.2025 Modifikator cols-2 und cols-3-4
/* Für Floating auch die Selektoren in style.css beachten */

Zwei Benutzerelemente anlegen:
grid_container = <div class="content-grid {DESCRIPTION}">{VALUE}</div>
grid_element = <div class="content-box"><h3>{DESCRIPTION}</h3><div class="content-flow">{VALUE}</div></div>
grid_element_imgchange = <div class="content-box-imgchange {DESCRIPTION}"><div class="content-flow"><div class="image-wrapper-ba-auto">{VALUE}</div></div></div>
grid_element_plain = <div class="content-box-plain {DESCRIPTION}"><div class="content-flow">{VALUE}</div></div>

Anwendung : 
[grid_container={DESCRIPTION}|
[grid_element=Titel in Box 1|Kompletter Inhalt Box 1]
[grid_element=Titel in Box 2|Kompletter Inhalt Box 2]
[grid_element=Titel in Box n|Kompletter Inhalt Box n]
]

{DESCRIPTION} (opt.) kann zusätzliche Klassen für Containergestaltung bekommen
*/

:root{
  --grid-content-wide: 1400px;  /* Breite Grid Area  */
  --grid-box-wide: 280px;       /* grid_box / grid_box_plain */  
}

/* === grid-Container === */
.content-grid{
  display: grid;
  gap: 1.5rem;                           /* Abstand zwischen Boxen */
  max-width: var(--grid-content-wide);   /* maximale Breite */
  margin-inline: auto;                   /* zentriert */
  padding: 1rem;

  /* Container Queries aktivieren */
  container-type: inline-size;

  /* === Steuer-Variablen === */
  --col-min: var(--grid-box-wide, 280px); /* Karten-Mindestbreite */
  --card-float-pct: 30%;                 /* Bildanteil neben Text */
  --card-float-max: 14rem;               /* obere Kappung */

  /* === Spalten-Definition (nur EINMAL!) === */
grid-template-columns: repeat(
  auto-fit,
  minmax(min(var(--col-min), 100%), 1fr)
);
}
.content-grid > * { min-width: 0; }

/* === grid-box ===
Element grid-box mit Überschrift, farbiger Markierung und Inhalt 

Anwendung: [grid_element={DESCRIPTION}|{VALUE}]
{DESCRIPTION}   Gridelement Überschrift H3
{VALUE}         Grid-Inhalt
*/
.content-box {
  position: relative;    
  background: #fff;               /* später z. B. var(--clr-surface) */
  border: 1px solid #ddd;         /* dünner Rahmen in Entwicklungsphase */
  border-radius: .5rem;           /* abgerundete Ecken */
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: top .2s ease, box-shadow .2s ease;
  top: 0;    
}
/* Bilder in Boxen neutral behandeln */
.content-box img{
  /* Kleine bilder zentrieren */
  margin-inline: auto;
  display:block;
  max-width:100%;
  height:auto;
  border:none;
  box-shadow:none;
  border-radius:.35rem;
}
.content-box .content-flow img{
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* 1) Float-Bilder IN content-box: prozentual begrenzen */
.content-box img.leftcontentimage,
.content-box span.leftcontentimage {
  float: left;
  margin: .35em .9em .75em 0;
  /* Bild nimmt max. 45% der Spaltenbreite, aber nie größer als 14rem */
  /* NEU: prozentuale Steuerung + Kappung */
  max-width: min(var(--card-float-pct, 40%), var(--card-float-max, 14rem));
}

.content-box img.rightcontentimage,
.content-box span.rightcontentimage {
  float: right;
/* margin-weg    
  margin: .35em 0 .75em .9em;
*/    
  /* NEU: prozentuale Steuerung + Kappung */
  max-width: min(var(--card-float-pct, 40%), var(--card-float-max, 14rem));
}

/* H3-Deko nur für echte Titel */
.content-box > h3{
  font-size: 1.2rem;
  font-weight: 600;
  padding-left: .75rem;
  border-left: 4px solid var(--clr-primary);
  margin: 0 0 .75rem;
}

/* H3 ausblenden, wenn leer/whitespace → keine Deko-Linie */
.content-box > h3:empty { display:none; }
.content-box > h3:empty + * { margin-top: 0; } /* kein Extraluftloch */

.content-box:hover {
  top: -4px;                   /* kleiner Versatz ohne transform */
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* === grid-box-plain ===
Element grid-box-plain über klasse .content-box-plain angesprochen 
alle extras weggelassen 
Alternative zu content-box Baseline – wirklich „plain“ 
grid_element_plain = <div class="content-box-plain"> {DESCRIPTION} {VALUE}</div>
Anwendung : [grid_element_plain={DESCRIPTION}|{VALUE}]
*/
.content-box-plain{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  position: relative;
}

/* Falls versehentlich ein H3 gesetzt wird → nicht anzeigen */
.content-box-plain > h1,
.content-box-plain > h2,
.content-box-plain > h3 { display:none; }

/* Medien in der Plain-Box: full-bleed, ohne Rahmen/Schatten */
.content-box-plain img,
.content-box-plain picture,
.content-box-plain video{
  display:block;
  width:100%;
  height:auto;
  border:0;
  box-shadow:none;
  border-radius: 0;           /* absolut flach */
}

.content-box .content-flow { display: flow-root; } /* sauberer Umfluss innerhalb der Karte */
/* Karte ist schmal → Bild nicht mehr floaten, volle Breite */
@container (max-width: 520px) {
  .content-box img.leftcontentimage,
  .content-box span.leftcontentimage,
  .content-box img.rightcontentimage,
  .content-box span.rightcontentimage {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 0 1rem 0;  /* Bild oben, Text darunter */
  }
}
/* *** Anfang Slider einspaltig zentrieren 
Slider füllt Gridelement voll aus, wenn nur 1 Element in zeile
Slider bild wird cover und beschneidet z.T. oben / unten *** 

.content-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--col-min), 100%), 1fr)
  );
  gap: 1rem;
}


.content-box-plain {
  width: 100%;
}


.content-box-plain .mr-slider,
.content-box-plain .mr-slider-viewport {
  width: 100%;
}


.content-box-plain .mr-slides img {
  width: 100%;
  height: auto;
  display: block;
}
*** Ende Slider zentrieren */

/* Slider selbst darf ruhig 100% breit bleiben */
.content-grid .mr-slider{
  width: 100%;
}

/* Der entscheidende Teil: wenn der Viewport schmaler wird -> zentrieren */
.content-grid .mr-slider-viewport{
  margin-inline: auto;   /* zentriert bei geringerer Breite */
}


/* ======================================
Modifier-Klassen für indiv. Gestaltung 
=========================================*/
/* Breite min pro gridelement bei Hochkantbildern */
.content-grid.drei-hochkant {
    --col-min: 350px;
}
/* Breite min pro gridelement bei Querbildern */
.content-grid.zwei-breit {
    --col-min: 450px;
}
/* Querformat-Container: Cards dürfen nicht zu schmal werden */
.content-grid.one-column{
  --col-min: 380px; /* so wählen, dass bei gewünschter Breite 2→1 kippt */
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
}

/* Element-Boxen ohne Rand, ohjne Schatten */
.content-grid.randlos .content-box {
    border: none;
    box-shadow: none;
}

.content-grid.cols-2{
  --col-min: 420px;
}

@container (max-width: 560px){
  .content-grid.cols-2{
    --col-min: 100%;
  }
}

.content-grid.cols-3-4{
  --col-min: 280px;
}

@container (max-width: 900px){
  .content-grid.cols-3-4{
    --col-min: 360px;
  }
}

@container (max-width: 560px){
  .content-grid.cols-3-4{
    --col-min: 100%;
  }
}

/* 1) Bild oben komplett ohne Abstand zu Rahmen; Inhalt darunter mit Abstand 
WICHTIG! Bild (als LINK oder Normal) ist erstes Element; Auch kein WhiteSpace davor!
*/
.content-grid.cards-media-top .content-box {
  padding: 0;
  overflow: hidden;              /* wichtig für runde Ecken */
}

/* 2. content-flow bekommt den Abstand, der für den Text gelten soll */
.content-grid.cards-media-top .content-box .content-flow {
  padding: 0 1rem 1rem;         /* links/rechts/unten Abstand für Text */
}

/* 3. Bild (oder Bild-Link) als erstes Kind "frisst" das Padding weg */
.content-grid.cards-media-top .content-box .content-flow > a.page:first-child,
.content-grid.cards-media-top .content-box .content-flow > img:first-child {
  display: block;
  /* globale 5px-Margin überschreiben */
  margin: 0 -1rem 1rem;         /* links/rechts negativ = bündig, unten = Abstand zum Text */
  width: calc(100% + 2rem);     /* gleicht die negativen Ränder aus */
  max-width: none;                  /* OVERRIDET max-width:100% aus der Basisregel */    
}

/* Sicherheit: img im Link selbst nicht wieder einengen */
.content-grid.cards-media-top .content-box .content-flow > a.page:first-child img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* generell: innerhalb der Box kein extra Margin für Links */
.content-grid.cards-media-top .content-box a.page {
  margin: 0;
}

/* =========================================================
   2) SPEZIAL-ELEMENT: grid_element_imgchange für Vorher / Nachher Bilder
   Klasse: .content-box-imgchange (ersetzt content-box)
   Verwendet img:nth-of-type(2) für das Nachher-Bild
============================================================*/

/* 1. Container-Vorbereitung (Muss die Basis-Styles liefern) */
.content-box-imgchange {
    position: relative; 
    padding: 0; /* Padding entfernen, damit das Bild bündig abschließt */
    overflow: hidden; 
    /* Basis-Styling von content-box */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: top .2s ease, box-shadow .2s ease;
    top: 0;
    min-height: 250px; /* Falls h3 leer ist */
}

/* 2. Style für den Bild-Wrapper (.image-wrapper-ba-auto) */
.content-box-imgchange .image-wrapper-ba-auto {
    position: relative; 
    display: block;
    width: 100%;
    /* Höhe der Box definieren */
    height: 350px; 
}

/* 3. Basis-Style für ALLE Bilder im Wrapper (Bild 1 und Bild 2) */
.content-box-imgchange .image-wrapper-ba-auto img {
    /* Beide Bilder absolut positionieren, damit sie sich überlappen */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    z-index: 1; /* Standard-Z-Index */
}

/* 4. SPEZIAL: Das ZWEITE Bild als "After-Image" behandeln */
.content-box-imgchange .image-wrapper-ba-auto img:nth-of-type(2) {
    z-index: 2; /* Liegt über dem Vorher-Bild */
    transform: translateX(100%); /* Startet außerhalb des Sichtbereichs */
    transition: transform 0.4s ease-in-out; /* Fügt Animation hinzu */
}

/* 5. HOVER-Effekt: Das "Nachher"-Bild einblenden */
.content-box-imgchange:hover .image-wrapper-ba-auto img:nth-of-type(2) {
    transform: translateX(0%);
}

/* 6. Überschrift: Abstand zum Bild korrigieren */
.content-box-imgchange > h3 {
    /* Stellt Padding wieder her und dient als Platzhalter über dem Bild */
    padding: 1.5rem 1.5rem 0.5rem 1.5rem; 
    border-left: 4px solid var(--clr-primary);
    margin: 0;
}

/* 5) Hover-Box */
/* Bild als Link, Hover bringt darüber Overlay-Text
benötigt own-js.js */
/* Box-Container Element [hover_container] */
.hover-box {
  position: relative;
  display: inline-block;
  overflow: hidden;           /* nichts ragt heraus */
  cursor: pointer;
  text-decoration: none;      /* Link-Unterstrich entfernen */
  touch-action: manipulation; /* kein DoubleTap-Zoom auf Touch-Geräten */
  /* outline NICHT global entfernen; wir liefern unten einen Fokus-Ring */
}

/* Link im Hover-Container als Block + Bezugspunkt */
.hover-box > a {
  display: block;
  position: relative;
  text-decoration: none;
}

/* Bild im/unter der Box (robust, egal ob in <a> oder direktes Kind) */
.hover-box img {
  display: block;             /* vermeidet Lücke unter dem Bild */
  width: 100%;
  height: auto;
}

/* Overlay-Container Element [hover_inhalt]
mit Überblendtext (robust gegen Reset/Fremd-CSS) */
.hover-box .ovl,
.hover-box > a > .ovl {
  position: absolute !important;  /* sichert gegen globale span-Regeln */
  inset: 0 !important;             /* füllt die ganze Box aus */
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);      /* halbtransparentes Schwarz */
  color: #fff;
  font: 700 1rem/1.2 system-ui;
  text-align: center;
  padding: 1em;
  opacity: 0;                      /* unsichtbar, bis Hover/Fokus/Aktiv */
  transition: opacity .3s;
  pointer-events: none;            /* Klick geht immer an <a> */
  border-radius: inherit;          /* folgt der Box, falls dort Radius gesetzt ist */
}

/* Hover, Tastaturfokus & Touch-Aktivierung */
.hover-box:hover .ovl,
.hover-box:focus-within .ovl,  /* wenn z. B. <a> den Fokus hat */
.hover-box:focus-visible .ovl, /* falls die Box selbst fokussierbar ist */
.hover-box.touched .ovl {      /* Klasse wird per JS auf Touch gesetzt */
  opacity: 1;
}

/* optional: :active-Regel verhindert kurzen Flash beim ersten Tap */
.hover-box:active .ovl {
  opacity: 0;
}

/* Deutlicher Fokus-Ring (Keyboard) */
.hover-box:focus-within::after,
.hover-box:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.8);
  border-radius: inherit;
  pointer-events: none;
}

/* Modifikation der Gestaltung über zusätuzliche Klassen */
/* 1. Größerer, prominenter Text */
.hover-box.hover-big .ovl {
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: none; /* oder uppercase, wenn gewünscht */
}

/* 2. Links ausgerichteter Overlay-Text mit etwas Abstand */
.hover-box.hover-left .ovl {
  justify-content: flex-start;  /* horizontal */
  align-items: flex-start;      /* vertikal oben */
  text-align: left;
  padding: 1.2em 1.4em;
}
/* optional: leicht andere Typografie für Fließtext */
.hover-box.hover-left .ovl {
  font-weight: 500;
  line-height: 1.5;
}

/* 3. Helles Overlay mit blauem Text */
.hover-box.hover-soft-blue .ovl {
  background: rgba(255, 255, 255, 0.85);  /* helles Overlay */
  color: #0b4f6c;                         /* gedecktes Blau */
}

/* optional: zarter Rahmen für mehr Struktur */
.hover-box.hover-soft-blue .ovl {
  box-shadow: inset 0 0 0 1px rgba(11,79,108,0.25);
}

/* 6) ImgchangeBox =========================================================
   MODUL: Vorher / Nachher - Final & Universell (vn_ Namespace)
   
   Anwendung: [change_img=MODIFIKATOR-KLASSE|
     <img src="bilder/vorher.jpg"> 
     <img src="bilder/nachher.jpg">
   ]
============================================================*/

:root {
    /* -- Steuerung des Aussehens über CSS-Variablen -- */
    /* Breite und Höhe als Standard; über Modifikatoren passend deklarieren */
    --vn-max-width: 900px;         /* 900px Maximale Breite des gesamten Elements */
    --vn-height: 400px;            /* 400px Feste Höhe für das Bild (wichtig für die absolute Positionierung) */
    --vn-transition: 0.4s ease-in-out; /* Übergangsgeschwindigkeit */
    --vn-radius: 8px;              /* Abrundung der Ecken */
    --vn-box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    --vn-bg-color: #fff;
    --vn-border-color: #ddd;
}

/* 1. Äußerer Container (Breite, Ränder und Styling) */
.vn_change_img_container {
    max-width: var(--vn-max-width);
    margin: 2rem auto; /* Zentriert das Element */
    background: var(--vn-bg-color);
    border: 1px solid var(--vn-border-color);
    border-radius: var(--vn-radius);
    box-shadow: var(--vn-box-shadow);
    padding: 0; /* Wichtig, damit das Bild bündig abschließt */
    overflow: hidden; /* Muss hier sein, um die Abrundung zu sehen */
    position: relative; /* Für eventuelle zukünftige Overlays */
}

/* Optionaler Hover-Effekt für die gesamte Box */
.vn_change_img_container:hover {
    /* Sie können hier z.B. einen kleinen Versatz oder stärkeren Schatten einfügen */
}

/* 2. Bild-Wrapper: Definiert den Clipping-Bereich */
.vn_change_img_container .vn_image_wrapper {
    position: relative; 
    display: block;
    width: 100%;
    height: var(--vn-height); /* Setzt die feste Höhe */
    overflow: hidden; /* Wichtig für den Slide-Effekt */
}

/* 3. Basis-Style für ALLE Bilder im Wrapper (Bild 1 und Bild 2) */
/* Wichtig: Positionierung auf 'absolute' für Überlappung */
.vn_change_img_container .vn_image_wrapper img {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    z-index: 1; 
}

/* 4. SPEZIAL: Das ZWEITE Bild als "After-Image" behandeln */
.vn_change_img_container .vn_image_wrapper img:nth-of-type(2) {
    z-index: 2; 
    transform: translateX(100%); /* Startposition: Aus dem Sichtfeld geschoben */
    transition: transform var(--vn-transition);
}

/* 5. HOVER-Effekt: Bild einblenden */
.vn_change_img_container:hover .vn_image_wrapper img:nth-of-type(2) {
    transform: translateX(0%); /* Endposition: Im Sichtfeld */
}

/* =====================================
Modifikatoren-Klassen
========================================*/
/* 1. Default: Cropping-Variante; Höhe aus root-Variable --vn-height */
.vn_change_img_container.vn-ci--crop .vn_image_wrapper {
    height: var(--vn-height, 400px);
}

/* Bilder mittig ausrichten */
.vn_change_img_container.vn-ci--crop .vn_image_wrapper img {
    object-fit: cover;
    object-position: center center;
}

/* 2. Allgemein: Wrapper-Höhe per Aspect Ratio steuern */
.vn_change_img_container[class*="vn-ci--ratio"] .vn_image_wrapper {
    height: auto;
    aspect-ratio: var(--vn-aspect-ratio, 16 / 9);
}

/* Beispiel-Modifier */
.vn_change_img_container.vn-ci--ratio-16-9 {
    --vn-aspect-ratio: 16 / 9;
}

.vn_change_img_container.vn-ci--ratio-4-3 {
    --vn-aspect-ratio: 4 / 3;
}

/* Bilder bleiben wie gehabt */
.vn_change_img_container[class*="vn-ci--ratio"] .vn_image_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. Variante: füllt die Zelle komplett; z.B. in grid-box, flex-cards */
.vn_change_img_container.vn-ci--fill-parent {
    max-width: none;
    margin: 0;
    width: 100%;
    /* kein height:100%; stattdessen Aspect-Ratio */
    aspect-ratio: var(--vn-aspect-ratio, 16 / 9);
    overflow: hidden;
}

.vn_change_img_container.vn-ci--fill-parent .vn_image_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.vn_change_img_container.vn-ci--fill-parent .vn_image_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 7) LinkBox */
/* Container – Bezugsfläche für die Klickfläche */
.linked-box {
  max-width: 30em;
  padding: 1em;
  position: relative;     /* wichtig für absolut positionierte Pseudo-Elemente */
  border: thin solid;
  overflow: visible;      /* falls etwas herausragt */
  transition: transform 0.2s ease; /* für den Zoom-Effekt */
}

/* Link-Optik */
.linked-box a {
  color: hsl(20 80% 40%);
  text-decoration: none;
}

/* Hover/Fokus-Optik */
.linked-box a:focus,
.linked-box a:hover {
  color: inherit;
  background: hsl(20 80% 90%);
  outline: none;
}

/* Klickfläche über gesamte Box legen */
.linked-box a::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* füllt komplette .linked-box */
  z-index: 1;               /* liegt VOR dem normalen Boxinhalt */
  background: transparent;  /* unsichtbar, nur Klickfang */
}

/* Hover-Zoom am gesamten Container */
.linked-box:hover {
  transform: scale(1.03);
}

/* Falls in der Box andere Elemente sind, nicht über die Klickfläche legen */
.linked-box > *:not(a) {
  position: relative;
  z-index: 0;
}

/* 8) NewsBox ==================================================================
  NewsBox – robuste, modulare CSS-Version
  Funktioniert mit und ohne JavaScript.
  Mit JS: Merkt sich "geschlossen" pro Seite oder global.
  Ohne JS: Schließen gilt nur bis Seitenreload.
  
  HTML-Grundstruktur:
  <div class="nb-anchor bx-warn" data-boxid="optional" data-scope="page">
    <input type="checkbox" id="nb-toggle" hidden>
    <div class="newsbox">
      <label class="newsbox__close" for="nb-toggle" aria-label="Schließen"></label>
      <div class="newsbox__content">…</div>
    </div>
  </div>
==================================================================
*/

/* --- Bezugssystem für Sticky-Variante: Content-Container --- */
#content,
main,
.content {
  position: relative; /* nötig für position:sticky */
}

/* --- Standard-Variablen für Maße, Position, Z-Index --- */
:root {
  --nb-width: 300px;       /* Box-Breite */
  --nb-max-height: 200px;  /* Max. Inhaltshöhe */
  --nb-offset-top: 1rem;   /* Abstand oben */
  --nb-offset-right: 2.5rem; /* Abstand rechts */
  --nb-z: 950;            /* Standard-Z-Index */
}

/* ------------------------------------------
   ANKER (hält die Box, selbst unsichtbar)
------------------------------------------ */
.nb-anchor {
  position: sticky; /* klebt im Content-Bereich */
  top: var(--nb-offset-top);
  margin-left: auto; /* nach rechts schieben */
  height: 0; /* kein eigener Platzbedarf */
  pointer-events: none; /* nur die Box selbst klickbar */
  z-index: var(--nb-z);
}

/* Alternative: Feste Position am Viewport */
.nb-anchor.fixed {
  position: fixed;
  top: var(--nb-offset-top);
  right: var(--nb-offset-right);
  left: auto;
}

/* ------------------------------------------
   NEWSBOX selbst – absolut im Anker
------------------------------------------ */
.nb-anchor .newsbox {
  position: absolute;
  right: var(--nb-offset-right);
  width: var(--nb-width);
  height: auto;
  padding: 1rem 1.25rem;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid currentColor;
  border-radius: 5px;
  background: var(--nb-bg, #fff);
  color: var(--nb-color, #222);
  box-shadow: var(--nb-shadow, 0 0.25rem 0.5rem rgba(0,0,0,.15));
  pointer-events: auto;
  backdrop-filter: blur(2px);
  transform-origin: top right;
  animation: nb-fade .35s ease-out;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover-Effekt nur, wenn Klasse .bx-hover gesetzt ist */
.nb-anchor.bx-hover .newsbox:hover {
  transform: scale(var(--nb-scale-hover, 1.04));
  box-shadow: var(--nb-shadow-hover, 0 0.75rem 1.5rem rgba(0,0,0,.55));
}

/* --- Ein-/Ausblenden ohne JS über Checkbox --- */
.nb-anchor #nb-toggle:checked + .newsbox {
  display: none !important;
}

/* --- Inhalt der Box --- */
.newsbox__content {
  max-height: var(--nb-max-height);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ------------------------------------------
   Schließen-Button
------------------------------------------ */
.nb-anchor .newsbox__close {
  position: absolute;
  top: -0.55rem; /* jetzt in rem, nicht em */
  right: -0.55rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  background: #fff;
  color: #222;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0.25rem rgba(0,0,0,.2);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.nb-anchor .newsbox__close::before {
  content: "×";
}
.nb-anchor .newsbox__close:hover,
.nb-anchor .newsbox__close:focus-visible {
  background: #d32f2f;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(0,0,0,.25);
}

/* ------------------------------------------
   Farb- und Designvarianten
------------------------------------------ */
.nb-anchor.bx-light {
  --nb-bg: #fff;
  --nb-color: #222;
}
.nb-anchor.bx-warn {
  --nb-bg: rgba(255,204,0,.9);
  --nb-color: #222;
}
.nb-anchor.bx-success {
  --nb-bg: rgba(76,175,80,.92);
  --nb-color: #fff;
}
.nb-anchor.bx-flat {
  --nb-shadow: none;
  --nb-shadow-hover: none;
  --nb-scale-hover: 1;
}

/* ------------------------------------------
   Animation Keyframes
------------------------------------------ */
@keyframes nb-fade {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------
   Responsive Anpassung
------------------------------------------ */
@media (max-width: 768px) {
  .nb-anchor .newsbox {
    right: 1rem;
    width: min(var(--nb-width), calc(100vw - 2rem));
  }
  .newsbox__content {
    max-height: 40vh;
  }
}

/* ------------------------------------------
   Druckausgabe
------------------------------------------ */
@media print {
  .nb-anchor { display: none !important; }
}

/* 9) Raster-Box (universell) === */
/* verteilt Kacheln / Elemente in einer Box */
/* Benutzerelemente anlegen
raster_container = <div class="raster-grid {DESCRIPTION}">{VALUE}</div>
raster_element = <div class="raster-cell {DESCRIPTION}">{VALUE}</div>

=== Anwendung ===
1. Umspannender Container
raster_container = <div class="raster-grid {DESCRIPTION}">{VALUE}</div>
Für {DESCRIPTION} Klassenname; Container separat stylbar
- vorgeschlagene Namenskonvention: grid_name1, grid_name2
- Standardklasse .raster_grid immer da
Für VALUE entweder [raster_element|] oder [raster_bild|]

2. Rasterkachel = Element
raster_element = <div class="raster-cell {DESCRIPTION}">{VALUE}</div>
Für {DESCRIPTION} Klassenname; jede Kachel separat stylbar
- vorgeschlagene Namenskonvention: cell_name1, cell_name2
- Standardklasse .raster_cell immer da
Für VALUE beliebiges Element; falls Bild, dann kein ALT möglich
(Ausnahme: modifizierte syntax.php [bild|bild.jpg|alt=Text])

3. Sonderfall - nur Bild ==> NICHT BENUTZEN!
raster_bild = <div class="raster-cell"><img src="{VALUE}" alt="{DESCRIPTION}"></div>
VALUE nur Bilddatei
DESCRIPTION Alt-Atribut
*/
.raster-grid {
    /* Defaults – pro Container überschreibbar */
  --r-w: 180px;      /* Elementbreite */
  --r-h: 80px;       /* Elementhöhe */
  --r-gap: 25px;          /* Elementabstand */
  --cell-bg: beige;     /* Elementhintergrund */ 

  display: flex;
  flex-wrap: wrap;
  gap: var(--r-gap);
  justify-content: center;   /* <-- horizontal zentriert */
  /* optional: */
  /* align-content: center;   /* vertikal zentriert, falls genug Höhe vorhanden */     
}

/* Jede Kachel: feste Fläche, zentriert */
.raster-cell {
  /* Fallback (physisch) */
  width: var(--r-w);
  height: var(--r-h);

  /* Logisch (überschreibt nur, wenn unterstützt – gleicher Wert, also unkritisch) */
  inline-size: var(--r-w);
  block-size: var(--r-h);

  display: grid;
  place-items: center;
  box-sizing: border-box;
  background-color: var(--cell-bg);
}

/* Bilder/SVGs passen sich ein, ohne hochzuskalieren */
.raster-cell > img,
.raster-cell > svg {
  width: 100%;
  height: 100%;
  object-fit: scale-down;   /* skaliert nur nach unten, NIE nach oben */
  object-position: center;
  display: block;
}

/* Inhalte (Links/Buttons) sollen die Zelle ausfüllen & zentrieren */
.raster-cell > a,
.raster-cell > button {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  text-decoration: none;
  color: inherit;
}

/* Ab hier Klassen für individuelle Gestaltung .raster_grid 
Namenskonvention: grid_name1, grid_name2 */
/* ===========================
   Grid-Varianten (Container)
   =========================== */

/* kompakter: kleinere Slots + geringerer Abstand */
.raster-grid.grid-sm { 
  --r-w: 140px; 
  --r-h: 60px; 
  --r-gap: 16px; 
}

/* großzügiger: größere Slots + mehr Abstand */
.raster-grid.grid-lg { 
  --r-w: 220px; 
  --r-h: 100px; 
  --r-gap: 30px; 
}

/* enger zusammenrücken, Slotgröße bleibt */
.raster-grid.grid-tight { 
  --r-gap: 8px; 
}

/* linksbündig statt zentriert */
.raster-grid.grid-left { 
  justify-content: flex-start; 
}

/* Container dunkel – wirkt auf alle Zellen via --cell-bg */
.raster-grid.grid-dark {
  --cell-bg: #1f2937;   /* dunkles Grau (Tailwind: slate-800) */
  color: #f3f4f6;       /* heller Text (slate-100) */
}

/* Ab hier Klassen für individuelle Gestaltung .raster_cell 
Namenskonvention: cell_name1, cell_name2 */
/* ===========================
   Cell-Varianten (Kacheln)
   =========================== */

/* transparenter Hintergrund (z. B. für Logos auf farbiger Fläche) */
.raster-cell.cell-ghost { 
  background: transparent; 
}

/* feine Kontur */
.raster-cell.cell-outline { 
  border: 1px solid #ddd; 
}

/* abgerundet, Inhalte bleiben sauber beschnitten */
.raster-cell.cell-rounded { 
  border-radius: 12px; 
  overflow: hidden; 
}

/* leichte Schattenkarte */
.raster-cell.cell-shadow { 
  box-shadow: 0 2px 5px rgba(0,0,0,.08); 
}

/* etwas Innenabstand (nützlich für Text/Icons/Kombis) */
.raster-cell.cell-tight { 
  padding: 5px; 
}

/* dezenter Hover-Lift (optional kombinierbar mit .cell-shadow) */
.raster-cell.cell-hover { 
  transition: transform .15s ease, box-shadow .15s ease; 
}
.raster-cell.cell-hover:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 4px 12px rgba(0,0,0,.12); 
}

/* Einzelne Kachel dunkel (falls du nur manche dunkel willst) */
.raster-cell.cell-dark {
  background: #1f2937;
  color: #f3f4f6;
  border: 1px solid rgba(255,255,255,.12);
}

/* Helle Kachel (z. B. für dunkle Logos auf Dark-Grid) */
.raster-cell.cell-light {
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

/* Dezente Hover-Optik auf dunklem Grund */
.raster-cell.cell-dark.cell-hover:hover,
.raster-grid.grid-dark .raster-cell.cell-hover:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transform: translateY(-2px);
}

/* Optional: auf sehr kleinen Screens Logos etwas kleiner */
@media (max-width: 600px) {
  .raster-grid {
    --r-w: 140px;
    --r-h: 60px;
    --r-gap: 16px;
  }
}

/* 10) ScrollTop
Scroll To Top — Modul-CSS

Installation:
1) own-js.js einbinden (defer)
2) Diese Datei in style.css importieren:  @import url("scroll-top.css");
3) HTML-Element (z. B. nach </footer>):
   <button id="scrollTopBtn" aria-label="Nach oben">▲</button>
4) Optional in style.css:
   html { scroll-behavior: smooth; }
*/

/* Grundzustand: unsichtbar und nicht fokussierbar */
#scrollTopBtn {
  position: fixed;
  right: 1.5rem;
  bottom: 2rem;
  z-index: 90;

  font-size: 32px;
  line-height: 1;
  min-width: 44px;               /* bessere Touch-Zielgröße */
  min-height: 44px;

  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;
  visibility: hidden;            /* verhindert Fokus im versteckten Zustand */
  transform: translateY(20px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}

/* Sichtbar, sobald own-js.js die Klasse .show setzt */
#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hover-Feedback */
#scrollTopBtn:hover {
  background: rgba(255,255,255,.85);
}

/* Tastaturfokus klar anzeigen */
#scrollTopBtn:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

/* 11) TableBox === Defaults (unverändert) === 
 ... in style.css ... */

/* === Varianten: immer NACH den Defaults platzieren === */
/* 
1. tab-klassik      Standard
2. tab-kompakt      Zeilenhöhe, Schrift, kein Schatten
3. tab-karten       Zellen wie Button, keine vert. Trennlinien
4. tab-contrast     titel farbig
5- tab-clean        nur Trennlinie unter titel
6- tab-schmal       soo breit, wie Inhalt, zentriert    
*/
/* 1) Klassik – feinere Linien, leichte Zebraoptik behalten */
.tab-klassik table.contenttable {
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  background: #fff;
}

.tab-klassik th.contenttable {
  background: linear-gradient(to bottom, #f9fafb, #e5e7eb);
  color: #111827;
  font-weight: 700;
  border: 1px solid #d1d5db;
}

.tab-klassik td.contenttable1 { background: #ffffff; }
.tab-klassik td.contenttable2 { background: #f3f4f6; }


/* 2) Kompakt – weniger Padding, kleinere Schrift, kein Shadow */
.tab-kompakt table.contenttable {
  box-shadow: none;
  border: 1px solid #e5e7eb;
  border-radius: .25rem;
}

.tab-kompakt th.contenttable,
.tab-kompakt td.contenttable1,
.tab-kompakt td.contenttable2 {
  padding: .25rem .4rem;
  font-size: 0.9rem;
  line-height: 1.2;
}

.tab-kompakt th.contenttable {
  background: #f4f4f5;
  color: #333;
  text-transform: none;
}
/* 3) Kartenstil – Zeilen wie Karten, keine vert. Linien */
.tab-karten table.contenttable {
  border: none;
  border-collapse: separate;
  border-spacing: 0 8px;
  background: transparent;
  box-shadow: none;
}

.tab-karten thead th.contenttable {
  background: transparent;
  border: none;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding-bottom: .25rem;
}

.tab-karten tbody td.contenttable1,
.tab-karten tbody td.contenttable2 {
  background: #fff;
  border: 1px solid #e5e7eb;
}

.tab-karten tbody tr {
  border-radius: .75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.06);
  overflow: hidden;
}
.tab-karten tbody tr td:first-child {
  border-top-left-radius: .75rem;
  border-bottom-left-radius: .75rem;
}
.tab-karten tbody tr td:last-child {
  border-top-right-radius: .75rem;
  border-bottom-right-radius: .75rem;
}

/* Bonus: High-Contrast Variante */
.tab-kontrast table.contenttable {
  border-color: #1f2937;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tab-kontrast th.contenttable {
  background: #1f2937;
  color: #fff;
  border-color: #1f2937;
}

.tab-kontrast td.contenttable1,
.tab-kontrast td.contenttable2 {
  border-color: #d1d5db;
  color: #111827;
}

/* === Variante: CLEAN – rahmenlos, nur Kopftrennlinie === */
.tab-clean table.contenttable {
  border: none;
  border-collapse: collapse;
  width: 100%;
  background: transparent;
  box-shadow: none;
}

.tab-clean th.contenttable {
  border: none;
  border-bottom: 2px solid #e5e7eb; /* nur Trennlinie unter Header */
  background: transparent;
  color: #111827;
  text-align: center;               /* zentriert */
  padding: .6rem .75rem;
  font-weight: 600;
}

.tab-clean td.contenttable1,
.tab-clean td.contenttable2 {
  border: none;
  background: transparent;
  text-align: center;               /* zentriert */
  padding: .5rem .75rem;
  color: #374151;
}

.tab-clean tr:nth-child(even) td {
  background: #f9fafb;              /* optional: zartes Zebra */
}

.tab-clean tr:hover td {
  background: #f3f4f6;              /* leichtes Hover-Feedback */
}

/* === Variante: SCHMAL – kompakt, spaltenbasiert, Kopf zentriert, Inhalt links === */
.tab-schmal table.contenttable {
  width: auto;                      /* nur so breit wie nötig */
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  border-radius: .25rem;
  box-shadow: none;
  margin: 0 auto;                   /* zentriert die gesamte Tabelle im Container */
}

.tab-schmal th.contenttable {
  text-align: center;               /* Kopf zentriert */
  white-space: nowrap;              /* Kopfzeilen bleiben in einer Zeile */
  padding: .35rem .6rem;
  font-size: .9rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  font-weight: 600;
}

.tab-schmal td.contenttable1,
.tab-schmal td.contenttable2 {
  text-align: left;                 /* Inhalt linksbündig */
  padding: .3rem .6rem;
  border: 1px solid #e5e7eb;
  font-size: .9rem;
  white-space: nowrap;              /* verhindert Umbrüche */
}

.tab-schmal td.contenttable1 { background: #ffffff; }
.tab-schmal td.contenttable2 { background: #f9fafb; }

/* Optional: kleine Hover-Wirkung */
.tab-schmal tbody tr:hover td {
  background: #f3f4f6;
}

/* === Variante: KOMPAKTFIT v2 – Caps je Spalte, Tabelle schrumpft, responsive === */
.tab-kompaktfit table.contenttable{
  /* verhindert 100%-Breite */
  display: inline-table;       /* shrink-to-fit, bleibt linksbündig */
  width: auto !important;      /* überschreibt den 100%-Default sicher */
  table-layout: auto;
  border: 1px solid #e5e7eb;
  border-radius: .25rem;
  box-shadow: none;
}

/* Kopf zentriert, darf umbrechen */
.tab-kompaktfit thead th.contenttable{
  text-align: center;
  font-weight: 600;
  font-size: .9rem;
  padding: .35rem .6rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Zellen links, Umbruch erlaubt */
.tab-kompaktfit td.contenttable1,
.tab-kompaktfit td.contenttable2{
  text-align: left;
  padding: .3rem .6rem;
  font-size: .9rem;
  border: 1px solid #e5e7eb;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.tab-kompaktfit td.contenttable1{ background: #fff; }
.tab-kompaktfit td.contenttable2{ background: #f9fafb; }

/* --- Spalten-"Maximalbreiten" per CSS-Variablen (in ch – ca. Zeichenbreite) --- */
/* Default-Caps (kannst du im Wrapper überschreiben) */
.tab-kompaktfit{
  --col-1: 16ch;
  --col-2: 24ch;
  --col-3: 20ch;
  /* mehr Spalten? einfach ergänzen */
}

/* Caps anwenden – Zellen dürfen schmaler werden (wrap), aber nicht breiter als Cap */
.tab-kompaktfit thead th.contenttable:nth-child(1),
.tab-kompaktfit tbody td:nth-child(1){ max-inline-size: var(--col-1); }
.tab-kompaktfit thead th.contenttable:nth-child(2),
.tab-kompaktfit tbody td:nth-child(2){ max-inline-size: var(--col-2); }
.tab-kompaktfit thead th.contenttable:nth-child(3),
.tab-kompaktfit tbody td:nth-child(3){ max-inline-size: var(--col-3); }

/* Optional: kleines Hover-Feedback */
.tab-kompaktfit tbody tr:hover td{ background: #f3f4f6; }

/* --- Responsive: bei sehr schmalen Screens Caps lockern oder entfernen --- */
@media (max-width: 520px){
  .tab-kompaktfit{
    --col-1: 10ch;
    --col-2: 12ch;
    --col-3: 10ch;
  }
}
@media (max-width: 400px){
  /* ganz frei lassen, wenn’s extrem eng wird */
  .tab-kompaktfit thead th.contenttable,
  .tab-kompaktfit tbody td{ max-inline-size: none; }
}



@media (max-width: 640px) {
  .tab-responsive table.contenttable thead {
    display: none;
  }
  .tab-responsive table.contenttable,
  .tab-responsive tbody,
  .tab-responsive tr,
  .tab-responsive td {
    display: block;
    width: 100%;
  }
  .tab-responsive tbody tr {
    margin-bottom: .75rem;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    overflow: hidden;
  }
  .tab-responsive td.contenttable1,
  .tab-responsive td.contenttable2 {
    position: relative;
    padding-left: 7rem;
    text-align: left;
  }
  .tab-responsive td::before {
    content: attr(data-label);
    position: absolute;
    left: .75rem;
    top: .5rem;
    font-weight: 600;
    opacity: .6;
  }
}