/* =========================================================
   1. FONTS & VARIABLES
   ========================================================= */

@font-face {
  font-family: 'Quicksand';
  src: url("../fonts/quicksand/Quicksand-VariableFont_wght-X-QD4sO.ttf") format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

/* woff2 steht vor ttf: der Browser nimmt das erste Format, das er kennt —
   das spart gegenueber dem unkomprimierten ttf rund 140KB je Seitenaufruf. */
@font-face {
  font-family: 'Amatic SC';
  src: url("../fonts/amatic/AmaticSC-Regular-FsxBMmh.woff2") format('woff2'),
       url("../fonts/amatic/AmaticSC-Regular-SArWEIj.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Ohne diese Regel rechnet der Browser h1–h4 (font-weight: 700) synthetisch
   fett — der eigentliche Grund fuer das duenne, unruhige Schriftbild. */
@font-face {
  font-family: 'Amatic SC';
  src: url("../fonts/amatic/AmaticSC-Bold-8gdgkSo.woff2") format('woff2'),
       url("../fonts/amatic/AmaticSC-Bold-eqTIOoD.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Farben: Hauptpalette --- */
  --color-primary: #952B62;
  --color-secondary: #41729A;
  --color-accent: #89AA95;
  --color-text: #2C111E;
  --color-weiss: #FFFFFF;

  /* --- Farben: Erweitert --- */
  --color-wolke: #99B2C9;
  --color-hellwolke: #c2d0e5;
  --color-lavendel: #A598A9;
  --color-beere: #C05665;
  --color-altrosa: #e38a8f;
  --color-mango: #F6BA22;
  --color-honig: #F7D484;
  --color-hellgrau: #f3f2f2;
  --color-grau: #afacac;
  --color-dunkelgrau: #827d7d;
  --color-sand: #DDD0C3;
  --color-hellsand: #f6f2ef;
  --color-salbei: #89aa95;
  --color-hellsalbei: #b9d0c2;
  --color-traube: #d2adb7;
 
  --color-primary-rgb: 149, 43, 98;
  --color-secondary-rgb: 65, 114, 154;
  --color-wolke-rgb: 153, 178, 201;
  --color-hellwolke-rgb: 194, 208, 229;
  --color-lavendel-rgb: 165, 152, 169;
  --color-beere-rgb: 192, 86, 101;
  --color-altrosa-rgb: 227, 138, 143;
  --color-mango-rgb: 246, 186, 34;
  --color-honig-rgb: 247, 212, 132;
  --color-hellgrau-rgb: 243, 242, 242;
  --color-grau-rgb: 175, 172, 172;
  --color-dunkelgrau-rgb: 130, 125, 125;
  --color-sand-rgb: 221, 208, 195;
  --color-hellsand-rgb: 246, 242, 239;
  --color-salbei-rgb: 137, 170, 149;
  --color-hellsalbei-rgb: 185, 208, 194;
  --color-traube-rgb: 210, 173, 183;

  /* --- Typografie --- */
  --font-primary: 'Quicksand', sans-serif;
  --font-headings: 'Amatic SC', sans-serif;
  
  --font-size-base: 18px;
  --font-size-lead: 1.5em;

  /* --- Typografie Ergänzungen --- */
  --h1-size: 4.5em;
  --h2-size: 3.5em;
  --h3-size: 2.65em;
  --h4-size: 2em;
  --h5h6-size: 1.5em;

  /* --- Layout & Spacing --- */
  --content-width-boxed: 1280px;
  --gap-blocks: 25px;
  --section-padding: 5%;

  --radius-boxed: 30px;
  --padding-boxed: 25px;
  --radius-button: 50px;
  --radius-image: 30px;
  --padding-button: 15px 20px;
  
  /* --- Kachel-Radius ---
     Einheitliche Abrundung aller Info-Kacheln (Termin-/Meta-Items, Teaser-Infos,
     Header-Kennzahlen, Kultur.Klassen-Karten). Vorher liefen sie mit 16/18/24px
     nebeneinander auseinander; Referenz ist .ksbam-admin-meta-item mit 16px.
     Grosse Container-Karten (.ksbam-card-blur, 30px) bleiben bewusst davon
     unberuehrt — sie sind eine Ebene darueber. */
  --ksbam-tile-radius: 16px;

  /* --- Container Settings--- */
  --div-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --div-blur: 8px;

  /* --- Navigation Settings --- */
  --nav-height: 80px;
  --nav-side-width: 180px;      
  --nav-top-offset: 30px;
  --nav-logo-width: 135px;
  --nav-logo-overlap-x: 25px;
  
  --nav-bg: rgba(255, 255, 255, 0.95);
  --nav-blur: 8px;
  --nav-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* --- Wave & Hero --- */
  --wave-height: 175px;
  --hero-height: 800px;
  --hero-bg: none; 
  
   /* --- Sienna Widget Barrierefrei--- */
  --asw-primary-color: var(--color-primary) !important;
  
  /* --- Schatten--- */

  --bs-box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --ksbam-main-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);

  /* --- Links im CI statt Bootstrap-Blau --- */
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-secondary);
  --bs-link-color-rgb: var(--color-primary-rgb);
  }

.btn {
  --bs-border-radius: 20px;
  --bs-border-radius-sm: 20px;
    font-weight: 600;
}

.btn:hover,
.btn:focus {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  filter: brightness(0.95) saturate(1.1);
  color: white !important;
}

.btn.btn-link:hover,
.btn.btn-link:focus {
  box-shadow: none;
  filter: none;
  color: var(--bs-link-hover-color) !important;
}

a:not(.btn):hover,
a:not(.btn):focus {
  color: var(--color-secondary) !important;
}

.ksbam-admin-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 46px;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--color-sand);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

a.ksbam-admin-action:hover,
a.ksbam-admin-action:focus,
button.ksbam-admin-action:hover,
button.ksbam-admin-action:focus {
  background: var(--color-sand);
  border-color: var(--color-sand);
  color: var(--color-text) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  filter: brightness(0.95) saturate(1.1);
}

/* Als <button> nutzbar (Footer-Aktionen im Buchungsprozess) */
button.ksbam-admin-action {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2;
}

.ksbam-admin-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary);
  flex-shrink: 0;
}

a.ksbam-admin-action:hover .ksbam-admin-action__icon,
a.ksbam-admin-action:focus .ksbam-admin-action__icon,
button.ksbam-admin-action:hover .ksbam-admin-action__icon,
button.ksbam-admin-action:focus .ksbam-admin-action__icon {
  background: var(--color-weiss);
  color: var(--color-primary);
}

.ksbam-admin-action__label {
  flex: 1;
  white-space: nowrap;
}

.ksbam-admin-action__arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0.7;
}

.ksbam-admin-action--fit {
  width: fit-content;
}

/* Gefüllte Variante für primäre Aktionen – Farbe kommt über eine bg-*-Utility
   am selben Element (z. B. bg-primary / bg-salbei / bg-mango). */
.ksbam-admin-action--solid {
  color: var(--color-weiss);
  border-color: transparent;
}

.ksbam-admin-action--solid .ksbam-admin-action__icon {
  background: rgba(255, 255, 255, 0.22);
  color: var(--color-weiss);
}

.ksbam-admin-action--solid .ksbam-admin-action__arrow {
  opacity: 0.95;
}

a.ksbam-admin-action--solid:hover,
a.ksbam-admin-action--solid:focus,
button.ksbam-admin-action--solid:hover,
button.ksbam-admin-action--solid:focus {
  color: var(--color-weiss) !important;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  filter: brightness(0.95) saturate(1.1);
}

a.ksbam-admin-action--solid:hover .ksbam-admin-action__icon,
a.ksbam-admin-action--solid:focus .ksbam-admin-action__icon,
button.ksbam-admin-action--solid:hover .ksbam-admin-action__icon,
button.ksbam-admin-action--solid:focus .ksbam-admin-action__icon {
  background: rgba(255, 255, 255, 0.3);
  color: var(--color-weiss);
}

.ksbam-booking-delete-action {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  padding: 0;
  border: 1px solid var(--color-sand);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--color-beere);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.ksbam-booking-delete-action:hover,
.ksbam-booking-delete-action:focus {
  background: var(--color-sand);
  border-color: var(--color-sand);
  color: var(--color-beere) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  filter: brightness(0.95) saturate(1.1);
}

.ksbam-booking-delete-action svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Beschriftet statt nur Icon: Der runde Icon-Button in der Kopfzeile des
   Workflow-Schritts wurde übersehen (Rückmeldung 10.08.2026). */
.ksbam-workflow-cancel-action {
  height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-hellsand);
  color: var(--color-beere);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.ksbam-workflow-cancel-action:hover,
.ksbam-workflow-cancel-action:focus {
  color: var(--color-beere) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  filter: brightness(0.95) saturate(1.1);
}

.ksbam-workflow-cancel-action svg {
  width: 1.1rem;
  height: 1.1rem;
}

.ksbam-booking-delete-action--solid {
  background: var(--color-beere);
  border-color: var(--color-beere);
  color: var(--color-weiss);
}

.ksbam-booking-delete-action--solid:hover,
.ksbam-booking-delete-action--solid:focus {
  background: var(--color-beere);
  border-color: var(--color-beere);
  color: var(--color-weiss) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  filter: brightness(0.95) saturate(1.1);
}

.ksbam-public-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.ksbam-public-info-card {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(210, 183, 154, 0.38);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 8px 20px rgba(140, 109, 78, 0.08);
}

.ksbam-public-info-card__icon {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--color-hellsand);
  color: var(--color-primary);
}

.ksbam-public-info-card__label {
  display: block;
  margin-bottom: 0.1rem;
  color: rgba(32, 26, 23, 0.64);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ksbam-public-info-card__value {
  display: block;
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Projektdokument: hebt sich als einzige Aktions-Kachel farbig ab. */
.ksbam-public-info-card--download {
  background: var(--color-hellsand);
}

.ksbam-public-info-card--download .ksbam-public-info-card__icon {
  background: var(--color-weiss);
}

.ksbam-mini-tile {
  min-width: 0;
  height: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(210, 183, 154, 0.38);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 8px 20px rgba(140, 109, 78, 0.08);
}

/* =========================================================
   MEDIA QUERIES (Zentrale Variablen-Steuerung)
   ========================================================= */

/* 1. Große Tablets & kleine Laptops (Desktop-Anpassung) */
@media (max-width: 1199px) {
  :root {
    --nav-side-width: 140px; 
    --wave-height: 120px;
  }
}

/* 2. Standard Tablets im Querformat / iPad Pro (Zwischenstufe) */
@media (max-width: 1024px) {
  :root {
    --h1-size: 3.5em;
    --h2-size: 3em;
    --h3-size: 2.35em;
    --font-size-lead: 1.3em;
    --wave-height: 100px;
    --nav-side-width: 100px;
  }
}

/* 3. Tablets im Hochformat & große Smartphones */
@media (max-width: 991px) {
  :root {
    --nav-side-width: 70px;
    --wave-height: 85px;
    --h1-size: 3em;
    --h2-size: 2.5em;
    --h3-size: 1.9em;
    --nav-logo-width: 150px; 
    --nav-logo-overlap-x: 35px; 
  }
}

/* 4. Smartphone Modus (Alles unter 768px) */
@media (max-width: 767px) {
  :root {
    /* Amatic SC laeuft bei gleicher Punktgroesse optisch kleiner als Quicksand.
       Die frueher nur fuer h3/h4 vorgenommene Anhebung reichte mobil nicht —
       die Ueberschriften gingen neben dem Fliesstext weiter unter. Die ganze
       Amatic-Leiter (h1–h4) ist deshalb um eine Stufe verschoben: h3 traegt
       jetzt die Groesse, die zuvor h2 hatte, h4 die von h3 usw.
       --h5h6-size bleibt unveraendert — h5/h6 sind Quicksand. */
    --h1-size: 3.5em;
    --h2-size: 3em;
    --h3-size: 2.5em;
    --h4-size: 2.15em;
    --h5h6-size: 1.5em;
    --font-size-lead: 1.15em;
    --font-size-base: 16px;
    /* Seitenrand: 4px Section-Padding + 6px halber Bootstrap-Gutter = 10px
       (den Gutter setzt der Container-Block direkt unterhalb) */
    --section-padding: 40px 4px;
    --wave-height: 70px;
    --radius-boxed: 20px;
    /* Kompakter Header: Logo-Oberkante ~6px statt 36px (siehe .ksbam-header) */
    --nav-top-offset: 6px;
    --nav-height: 64px;
    --nav-logo-width: 104px;
    --nav-logo-overlap-x: 24px;
  }
}

/* Zweite Haelfte des mobilen Seitenrands. Bootstrap definiert --bs-gutter-x
   lokal an jedem Container (1.5rem), eine Setzung in :root bliebe deshalb
   wirkungslos. 12px Gutter = 6px je Seite; zusammen mit --section-padding
   (4px) bleiben 10px Rand statt der bisherigen 27px. */
@media (max-width: 767px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-fluid {
    --bs-gutter-x: 12px;
  }
}

/* Der fixe Header ueberlagert den normalen Dokumentfluss. Hero- und
   Subhero-Seiten reservieren ihren Abstand bereits selbst; einfache Seiten,
   die direkt mit einem Container oder einer normalen Section beginnen,
   bekommen ihn deshalb zentral am Main-Element. So sind auch kuenftige Seiten
   ohne Hero mobil automatisch geschuetzt. */
@media (max-width: 767.98px) {
  body > main:not(:has(> .section-hero, > .section-subhero-dynamic)) {
    padding-top: calc(var(--nav-top-offset) + var(--nav-height) + 20px);
  }
}


/* =========================================================
   2. COLOR UTILITIES
   ========================================================= */

/* --- Backgrounds --- */
.bg-primary      { background-color: var(--color-primary) !important;   --bg-color: var(--color-primary); }
.bg-secondary    { background-color: var(--color-secondary) !important; --bg-color: var(--color-secondary); }
.bg-accent       { background-color: var(--color-accent) !important;    --bg-color: var(--color-accent); }
.bg-wolke        { background-color: var(--color-wolke) !important;     --bg-color: var(--color-wolke); }
.bg-hellwolke    { background-color: var(--color-hellwolke) !important; --bg-color: var(--color-hellwolke); }
.bg-lavendel     { background-color: var(--color-lavendel) !important;  --bg-color: var(--color-lavendel); }
.bg-beere        { background-color: var(--color-beere) !important;     --bg-color: var(--color-beere); }
.bg-altrosa      { background-color: var(--color-altrosa) !important;   --bg-color: var(--color-altrosa); }
.bg-mango        { background-color: var(--color-mango) !important;     --bg-color: var(--color-mango); }
.bg-honig        { background-color: var(--color-honig) !important;     --bg-color: var(--color-honig); }
.bg-hellgrau     { background-color: var(--color-hellgrau) !important;  --bg-color: var(--color-hellgrau); }
.bg-grau         { background-color: var(--color-grau) !important;      --bg-color: var(--color-grau); }
.bg-dunkelgrau   { background-color: var(--color-dunkelgrau) !important;--bg-color: var(--color-dunkelgrau); }
.bg-sand         { background-color: var(--color-sand) !important;      --bg-color: var(--color-sand); }
.bg-hellsand     { background-color: var(--color-hellsand) !important;  --bg-color: var(--color-hellsand); }
.bg-salbei       { background-color: var(--color-salbei) !important;    --bg-color: var(--color-salbei); }
.bg-hellsalbei   { background-color: var(--color-hellsalbei) !important;--bg-color: var(--color-hellsalbei); }
.bg-traube       { background-color: var(--color-traube) !important;    --bg-color: var(--color-traube); }
.bg-weiss        { background-color: var(--color-weiss) !important;     --bg-color: var(--color-weiss); }
.bg-dark         { background-color: var(--color-text) !important;      --bg-color: var(--color-text); }
.bg-success      { background-color: var(--color-salbei) !important;    --bg-color: var(--color-salbei); }

/* --- Text Colors --- */
.text-primary    { color: var(--color-primary) !important; }
.text-secondary  { color: var(--color-secondary) !important; }
.text-accent     { color: var(--color-accent) !important; }
.text-wolke      { color: var(--color-wolke) !important; }
.text-hellwolke  { color: var(--color-hellwolke) !important; }
.text-lavendel   { color: var(--color-lavendel) !important; }
.text-beere      { color: var(--color-beere) !important; }
.text-altrosa    { color: var(--color-altrosa) !important; }
.text-salbei     { color: var(--color-salbei) !important; }
.text-hellsalbei { color: var(--color-hellsalbei) !important; }
.text-traube     { color: var(--color-traube) !important; }
.text-success    { color: var(--color-salbei) !important; }
.text-mango      { color: var(--color-mango) !important; }
.text-honig      { color: var(--color-honig) !important; }
.text-sand       { color: var(--color-sand) !important; }
.text-hellsand   { color: var(--color-hellsand) !important; }
.text-grau       { color: var(--color-grau) !important; }
.text-dunkelgrau { color: var(--color-dunkelgrau) !important; }
.text-hellgrau   { color: var(--color-hellgrau) !important; }
.text-weiss      { color: var(--color-weiss) !important; }
.text-default    { color: var(--color-text) !important; }
.text-text		 { color: var(--color-text) !important; }

/* --- Border Colors --- */
.border-primary    { border-color: var(--color-primary) !important; }
.border-secondary  { border-color: var(--color-secondary) !important; }
.border-beere      { border-color: var(--color-beere) !important; }
.border-salbei     { border-color: var(--color-salbei) !important; }
.border-success    { border-color: var(--color-salbei) !important; }
.border-mango      { border-color: var(--color-mango) !important; }
.border-honig      { border-color: var(--color-honig) !important; }
.border-lavendel   { border-color: var(--color-lavendel) !important; }
.border-sand       { border-color: var(--color-sand) !important; }
.border-traube     { border-color: var(--color-traube) !important; }


/* --- Button Styles --- */
.btn.bg-primary,
.btn.bg-secondary,
.btn.bg-accent,
.btn.bg-wolke,
.btn.bg-hellwolke,
.btn.bg-lavendel,
.btn.bg-salbei,
.btn.bg-hellsalbei,
.btn.bg-beere,
.btn.bg-altrosa,
.btn.bg-traube,
.btn.bg-mango,
.btn.bg-honig,
.btn.bg-sand,
.btn.bg-hellsand,
.btn.bg-hellgrau,
.btn.bg-grau,
.btn.bg-dunkelgrau,
.btn.bg-dark {
  background-color: var(--bg-color) !important;
  border-color: var(--bg-color) !important;
  color: var(--color-weiss) !important;
}

.btn-success {
  background-color: var(--color-salbei) !important;
  border-color: var(--color-salbei) !important;
  color: var(--color-weiss) !important;
}

.btn-success:hover,
.btn-success:focus {
  filter: brightness(0.92) saturate(1.1) !important;
  color: var(--color-weiss) !important;
}

/* Hover-Effekt: Etwas abdunkeln und Sättigung leicht erhöhen */
.btn.bg-primary:hover, .btn.bg-primary:focus,
.btn.bg-secondary:hover, .btn.bg-secondary:focus,
.btn.bg-accent:hover, .btn.bg-accent:focus,
.btn.bg-wolke:hover, .btn.bg-wolke:focus,
.btn.bg-hellwolke:hover, .btn.bg-hellwolke:focus,
.btn.bg-lavendel:hover, .btn.bg-lavendel:focus,
.btn.bg-salbei:hover, .btn.bg-salbei:focus,
.btn.bg-hellsalbei:hover, .btn.bg-hellsalbei:focus,
.btn.bg-beere:hover, .btn.bg-beere:focus,
.btn.bg-altrosa:hover, .btn.bg-altrosa:focus,
.btn.bg-traube:hover, .btn.bg-traube:focus,
.btn.bg-mango:hover, .btn.bg-mango:focus,
.btn.bg-honig:hover, .btn.bg-honig:focus,
.btn.bg-sand:hover, .btn.bg-sand:focus,
.btn.bg-hellsand:hover, .btn.bg-hellsand:focus,
.btn.bg-hellgrau:hover, .btn.bg-hellgrau:focus,
.btn.bg-grau:hover, .btn.bg-grau:focus,
.btn.bg-dunkelgrau:hover, .btn.bg-dunkelgrau:focus,
.btn.bg-dark:hover, .btn.bg-dark:focus {
  filter: brightness(0.92) saturate(1.1) !important;
  transition: filter 0.2s ease-in-out;
}

/* --- KS:BAM Custom Outline Pills --- */

/* Basis-Stil für alle Outline-Pills */
.btn-check + .btn-outline-custom {
    border-width: 2px;
    background: transparent;
    transition: all 0.2s ease-in-out;
}

/* Dynamische Generierung der Farbklassen */
/* Hauptfarben */
.btn-outline-primary { border-color: var(--color-primary); color: var(--color-primary); }
.btn-check:checked + .btn-outline-primary, .btn-outline-primary:hover { background-color: var(--color-primary) !important; color: var(--color-weiss) !important; }

.btn-outline-secondary { border-color: var(--color-secondary); color: var(--color-secondary); }
.btn-check:checked + .btn-outline-secondary, .btn-outline-secondary:hover { background-color: var(--color-secondary) !important; color: var(--color-weiss) !important; }

.btn-outline-accent { border-color: var(--color-accent); color: var(--color-accent); }
.btn-check:checked + .btn-outline-accent, .btn-outline-accent:hover { background-color: var(--color-accent) !important; color: var(--color-weiss) !important; }

/* Erweiterte Palette */
.btn-outline-wolke { border-color: var(--color-wolke); color: var(--color-wolke); }
.btn-check:checked + .btn-outline-wolke, .btn-outline-wolke:hover { background-color: var(--color-wolke) !important; color: var(--color-weiss) !important; }

.btn-outline-lavendel { border-color: var(--color-lavendel); color: var(--color-lavendel); }
.btn-check:checked + .btn-outline-lavendel, .btn-outline-lavendel:hover { background-color: var(--color-lavendel) !important; color: var(--color-weiss) !important; }

.btn-outline-beere { border-color: var(--color-beere); color: var(--color-beere); }
.btn-check:checked + .btn-outline-beere, .btn-outline-beere:hover { background-color: var(--color-beere) !important; color: var(--color-weiss) !important; }

.btn-outline-mango { border-color: var(--color-mango); color: var(--color-mango); }
.btn-check:checked + .btn-outline-mango, .btn-outline-mango:hover { background-color: var(--color-mango) !important; color: var(--color-text) !important; }

.btn-outline-salbei { border-color: var(--color-salbei); color: var(--color-salbei); }
.btn-check:checked + .btn-outline-salbei, .btn-outline-salbei:hover { background-color: var(--color-salbei) !important; color: var(--color-weiss) !important; }

.btn-outline-traube { border-color: var(--color-traube); color: var(--color-traube); }
.btn-check:checked + .btn-outline-traube, .btn-outline-traube:hover { background-color: var(--color-traube) !important; color: var(--color-text) !important; }

/* Grautöne */
.btn-outline-grau { border-color: var(--color-grau); color: var(--color-grau); }
.btn-check:checked + .btn-outline-grau, .btn-outline-grau:hover { background-color: var(--color-grau) !important; color: var(--color-weiss) !important; }

.btn-outline-dunkelgrau { border-color: var(--color-dunkelgrau); color: var(--color-dunkelgrau); }
.btn-check:checked + .btn-outline-dunkelgrau, .btn-outline-dunkelgrau:hover { background-color: var(--color-dunkelgrau) !important; color: var(--color-weiss) !important; }

/* Helle Töne (mit dunklem Text bei active) */
.btn-outline-honig { border-color: var(--color-honig); color: #d4a017; } /* Etwas dunklerer Text für Kontrast auf Weiß */
.btn-check:checked + .btn-outline-honig, .btn-outline-honig:hover { background-color: var(--color-honig) !important; color: var(--color-text) !important; }

.btn-outline-sand { border-color: var(--color-sand); color: #a68b73; }
.btn-check:checked + .btn-outline-sand, .btn-outline-sand:hover { background-color: var(--color-sand) !important; color: var(--color-text) !important; }

/* Hilfsklasse für Fokus */
.btn-check:focus + .btn-outline-custom, .btn-check:focus + .btn-outline-primary, 
.btn-check:focus + .btn-outline-secondary, .btn-check:focus + .btn-outline-beere,
.btn-check:focus + .btn-outline-mango, .btn-check:focus + .btn-outline-salbei {
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25) !important;
}

/* =========================================================
   3. BASE LAYOUT & TYPOGRAPHY
   ========================================================= */

html, body { height: 100%; overflow-x: hidden; }

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-weiss);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }
footer {
    position: relative;
    /* Schiebt den Footer-Block über die Sektion davor */
    margin-top: -50px; 
    z-index: 100; 
    flex-shrink: 0;
    background-color: var(--color-lavendel);
    /* RUNDUNG ENTFERNT, da wir jetzt den SVG-Bogen nutzen */
    border-radius: 0;
    box-shadow: none;
}

h1, h2, h3, h4 { 
  font-family: var(--font-headings); 
  font-weight: 700; 
}

h1 { 
  color: var(--color-primary); 
  font-size: var(--h1-size); 
}
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }

h5, h6 {
  font-family: var(--font-primary);
  font-size: var(--h5h6-size);
  font-weight: 700;
}

/* Die Seiten- und Bereichsueberschriften tragen durchgaengig Bootstrap-
   Display-Klassen. Deren font-size ist ein eigenes calc(rem + vw) und haengt
   nicht an der Amatic-Leiter oben — bei der mobilen Anhebung waeren sie sonst
   als einzige zurueckgeblieben. Mobil folgen sie deshalb denselben Variablen:
   display-2 (Begruessung/Objekttitel) = h1, display-4 (Seitentitel) = h2,
   display-5 (Wizard-Schritte) = h3. app.css laedt nach bootstrap.min.css,
   gleiche Spezifitaet genuegt. */
@media (max-width: 767px) {
  .display-2 { font-size: var(--h1-size); }
  .display-4 { font-size: var(--h2-size); }
  .display-5 { font-size: var(--h3-size); }
}

/* Sections nutzen jetzt die zentrale Variable */
section { 
  padding: var(--section-padding); 
}

/* Die Sektion direkt im Footer */
.section-footer { 
    padding-top: clamp(2rem, 4vh, 3.5rem); 
  	padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
    width: 100%;
    position: relative;
    z-index: 2; 
}

@media (max-width: 767px) {
    .section-footer {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Platzhalter-Klasse für die letzte Sektion jeder Seite */
.section-last {
    padding-bottom: 190px !important; 
    position: relative;
}

/* Mobil-Optimierung */
@media (max-width: 767px) {
    footer {
        margin-top: -30px;
    }
    .ksbam-footer-wave {
        top: -29px;
    }
    .ksbam-footer-wave svg {
        height: 30px;
    }
    .section-last {
        padding-bottom: 150px !important;
    }

    /* Auf der Startseite soll die Kontaktkarte enger an den Infotext anschließen. */
    .ksbam-home-contact-row {
        --bs-gutter-y: 0.75rem;
    }
}

/* Links im Footer (optionales Feintuning) */
.footer-nav-link {
    transition: transform 0.2s ease, color 0.2s ease;
}

.footer-nav-link:hover {
    transform: translateX(5px);
    color: var(--color-weiss) !important;
}

/* Kontaktmail: unterstrichen, damit sie sich vom umgebenden Fließtext abhebt */
.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-weiss);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color 0.2s ease;
}

.footer-contact-link:hover,
.footer-contact-link:focus-visible {
    color: var(--color-primary);
}

.footer-contact-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

/* Social-Media: als Schaltfläche gerahmt, sonst wirken die Symbole wie Dekoration */
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid var(--color-weiss);
    border-radius: 50%;
    color: var(--color-weiss) !important;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.footer-social-link:hover,
.footer-social-link:focus-visible {
    color: var(--color-primary) !important;
    background-color: var(--color-weiss);
    border-color: var(--color-weiss);
}

.footer-social-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.footer-logo-list {
    justify-content: flex-start;
}

.footer-logo-list a {
    flex: 0 1 175px;
    min-width: 0;
}

.footer-partner-logo {
    width: 100%;
    /* zuvor an beiden Verwendern inline gesetzt */
    max-width: 175px;
    height: auto;
}

.lead { 
  font-size: var(--font-size-lead); 
  font-weight: 500; 
}

.ksbam-header-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.9rem;
    max-width: 100%;
}

.ksbam-header-metrics--start {
    justify-content: flex-start;
}

.ksbam-header-metric {
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(210, 183, 154, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(140, 109, 78, 0.12);
}

.ksbam-header-metric__icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ksbam-header-metric__value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
}

.ksbam-header-metric__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(32, 26, 23, 0.72);
}

.ksbam-step-label {
    color: var(--color-text) !important;
    font-weight: 700;
}

/* Anklickbarer Timeline-Marker im Buchungs-Wizard (erreichte Schritte) */
.ksbam-step-link {
    cursor: pointer;
}

.ksbam-step-link .rounded-circle {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ksbam-step-link:hover .rounded-circle,
.ksbam-step-link:focus-visible .rounded-circle {
    transform: scale(1.08);
    box-shadow: 0 0.35rem 0.85rem rgba(32, 26, 23, 0.22) !important;
}

@media (max-width: 991.98px) {
    .ksbam-header-metrics {
        justify-content: flex-start;
    }

    .ksbam-header-metric {
        min-width: 180px;
    }
}

/* Nur die Metrikkarten im eigentlichen Seitenkopf werden mobil verdichtet.
   Die Basisklasse wird auch fuer Klassen-, Einrichtungs- und Buchungskarten im
   Seiteninhalt verwendet; durch den direkten Kindselektor bleiben diese
   bewusst unveraendert. */
@media (max-width: 767.98px) {
    .ksbam-header-metrics {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
        width: 100%;
        gap: 0.5rem;
    }

    .ksbam-header-metrics > .ksbam-header-metric {
        min-width: 0;
        gap: 0.625rem;
        padding: 0.65rem 0.75rem;
    }

    .ksbam-header-metrics > .ksbam-header-metric:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .ksbam-header-metrics > .ksbam-header-metric > :last-child,
    .ksbam-header-metrics > .ksbam-header-metric .ksbam-header-metric__content {
        min-width: 0;
    }

    .ksbam-header-metrics > .ksbam-header-metric .ksbam-header-metric__icon {
        width: 34px;
        height: 34px;
    }

    .ksbam-header-metrics > .ksbam-header-metric .ksbam-header-metric__value {
        font-size: 1rem;
        overflow-wrap: anywhere;
    }

    .ksbam-header-metrics > .ksbam-header-metric .ksbam-header-metric__label {
        font-size: 0.75rem !important;
        letter-spacing: 0.03em;
        overflow-wrap: anywhere;
    }
}
/* =========================================================
   BOOTSTRAP TABLE - TOOLBAR, FILTERS & PAGINATION
   ========================================================= */

/* 1. TOOLBAR & SUCHE (Oben rechts)
   Integrierter Blur-Look ohne Lücken
   ------------------------------------------------------ */
.fixed-table-toolbar {
    margin-bottom: 2rem !important;
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-sand);
    border-radius: 30px;
    padding: 8px 14px;
    box-shadow: var(--div-shadow);
    overflow: visible !important;
    position: relative;
    z-index: 30;
}

/* Tabellenansichten bekommen Atemraum fuer den Schatten.
   Card-/Kachelansichten werden gezielt ausgenommen. */
.table-responsive:has(.bootstrap-table):not(:has(.ksbam-card-grid-table)) {
    padding: 0.85rem;
    margin: -0.85rem;
}

.table-responsive:has(.bootstrap-table):not(:has(.ksbam-card-grid-table)) .bootstrap-table .fixed-table-body {
    background: var(--color-weiss) !important;
    border-radius: var(--radius-boxed);
}


/* Einheitlicher vertikaler Abstand innerhalb der Toolbar.
   bootstrap-table gibt .bs-bars/.columns/.search je 10px oben und unten
   (dist/bootstrap-table.min.css). Sobald die Suchzeile unter die Filter
   umbricht, summieren sich die beiden Raender auf 20px — waehrend die Filter
   untereinander nur den 12px-gap der .projekt-filter-toolbar halten. Die
   Suchzeile stand dadurch sichtbar weiter ab als alles andere. 6px je Seite
   ergeben denselben 12px-Abstand.
   Gleiche Spezifitaet wie die Vendor-Regel (0,3,0), spaetere Position gewinnt. */
.bootstrap-table .fixed-table-toolbar .bs-bars,
.bootstrap-table .fixed-table-toolbar .columns,
.bootstrap-table .fixed-table-toolbar .search {
    margin-top: 6px;
    margin-bottom: 6px;
}

/* Such-Einheit (Input + Clear Button verschmolzen) */
.fixed-table-toolbar .search.btn-group {
    display: flex !important;
    align-items: stretch;
    flex-wrap: nowrap;
    min-height: 46px;
    position: relative;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 23px;
    border: 1px solid var(--color-sand);
    overflow: visible;
    width: min(310px, 100%);
    max-width: 100%;
}

.fixed-table-toolbar .search input {
    height: 46px !important;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border-radius: 23px !important;
    border: none !important;
    background: transparent !important;
    padding-left: 1.5rem !important;
    padding-right: 3rem !important;
    font-size: 0.95rem;
    box-shadow: none !important;
}

/* Der integrierte Clear-Button (X) */
.fixed-table-toolbar .search button {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    height: 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    border: none !important;
    background: transparent !important;
    color: var(--color-primary) !important;
    padding: 0 !important;
    transition: all 0.2s ease;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: auto !important;
    cursor: pointer;
}

.fixed-table-toolbar .search button:hover {
    background: transparent !important;
    color: var(--color-secondary) !important;
}

.fixed-table-toolbar .search button i,
.fixed-table-toolbar .search button svg,
.fixed-table-toolbar .search button span {
    pointer-events: none;
}

/* Der separate Reset/Filter Button */
.fixed-table-toolbar .columns.btn-group button,
.fixed-table-toolbar .btn-secondary:not([name="clearSearch"]):not([name="search"]) {
    height: 46px !important;
    margin-left: 10px !important;
    border: 1px solid var(--color-sand) !important;
    border-radius: 30px !important;
    
    /* Blur Look wie Paginierung */
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-primary) !important;
    
    padding: 0 15px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.fixed-table-toolbar .search.btn-group,
.fixed-table-toolbar .columns.btn-group button,
.fixed-table-toolbar .btn-secondary:not([name="clearSearch"]):not([name="search"]),
.toolbar-filter-group .ts-wrapper .ts-control,
.toolbar-filter-pills .btn-check + .btn {
    min-height: 46px !important;
}

.fixed-table-toolbar .btn-secondary:not([name="clearSearch"]):not([name="search"]):hover,
.fixed-table-toolbar .columns.btn-group button:hover {
    background: var(--color-primary) !important;
    color: white !important;
}

/* Icon-Farbe beim Hover erzwingen */
.fixed-table-toolbar .btn-secondary:not([name="clearSearch"]):not([name="search"]):hover i,
.fixed-table-toolbar .btn-secondary:not([name="clearSearch"]):not([name="search"]):hover svg,
.fixed-table-toolbar .columns.btn-group button:hover i,
.fixed-table-toolbar .columns.btn-group button:hover svg {
    color: white !important;
}

/* 2. PAGINIERUNG - INFO & PICKER (Unten links)
   Minimalistischer Text-Style ohne blaue Blöcke
   ------------------------------------------------------ */
.fixed-table-pagination .pagination-info,
.fixed-table-pagination .page-list {
    color: var(--color-text) !important;
    display: inline-flex;
    align-items: center;
    min-height: 46px;
}

.bootstrap-table .fixed-table-pagination {
    margin-top: 0 !important;
}

/* Der Picker-Button (die Zahl) */
.fixed-table-pagination .page-list .btn-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    min-height: 46px;
    padding: 0.35rem 0.75rem !important;
    border: none !important;
    border-radius: 10px !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(5px);
    color: var(--color-primary) !important;
    font-weight: 700;
    line-height: 1;
    box-shadow: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

.fixed-table-pagination .page-list .btn-group .btn:hover,
.fixed-table-pagination .page-list .btn-group .btn:focus,
.fixed-table-pagination .page-list .btn-group.show .btn {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.fixed-table-pagination .page-list .btn-group .btn .caret {
    margin-left: 0.45rem;
}

.fixed-table-pagination .page-list .btn-group .btn.dropdown-toggle::after {
    margin-left: 0.45rem;
    vertical-align: middle;
}

/* Kompaktes Dropdown-Popup */
.fixed-table-pagination .page-list .dropdown-menu {
    min-width: 65px !important;
    padding: 5px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
}

/* Einträge im Picker-Popup (Nur Text-Hover) */
.fixed-table-pagination .page-list .dropdown-menu .dropdown-item {
    text-align: center;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    color: var(--color-text) !important;
    background: transparent !important;
    transition: color 0.2s ease;
}

.fixed-table-pagination .page-list .dropdown-menu .dropdown-item.active,
.fixed-table-pagination .page-list .dropdown-menu .dropdown-item:hover {
    background: transparent !important; 
    color: var(--color-primary) !important;
    font-weight: bold;
}

/* 3. PAGINIERUNG - NAVIGATION (Unten rechts)
   ------------------------------------------------------ */
.fixed-table-pagination .pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: none !important;
    margin: 0 3px;
    border-radius: 10px !important;
    color: var(--color-primary) !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
}

.fixed-table-pagination .page-list .btn-group,
.fixed-table-pagination .pagination {
    display: inline-flex;
    align-items: center;
}

.fixed-table-pagination .pagination .page-item .page-link:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.fixed-table-pagination .pagination .page-item.active .page-link {
    background-color: var(--color-primary) !important;
    color: white !important;
    box-shadow: var(--bs-box-shadow-sm) !important;
}

/* 3b. BEDIEN-BUTTONS IM FOOTER (Vollbild / Spalten / Export)
   Per JS (post-body) wird .columns-right aus der oberen Toolbar in einen eigenen, stabilen
   Container .bs-table-tools-footer verschoben — NICHT in .fixed-table-pagination: die baut
   Bootstrap-Table bei jedem Re-Render (Filter/Seitenwechsel) per jQuery .html() neu auf und
   würde dabei die Event-Handler der Buttons aus dem Knoten strippen (Vollbild/Spalten/Export
   funktionierten dann nicht mehr). Per Flexbox auf .bootstrap-table sitzen Paginierung (links)
   und Tools (rechts) trotzdem auf einer Zeile.
   ------------------------------------------------------ */
/* Tools-Container: Inhalt immer rechtsbündig (gilt in Normal- UND Vollbildmodus). */
.bs-table-tools-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}

/* Die verschobene .columns-right ist eine Bootstrap-.btn-group: deren Kinder ziehen sich per
   margin-left:-1px zu einem verbundenen Block zusammen. Hier sind es aber freistehende Pills,
   darum den negativen Rand aufheben und wie in .projekt-filter-toolbar per gap trennen. */
.bs-table-tools-footer .bs-tools-in-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bs-table-tools-footer .bs-tools-in-footer > .btn,
.bs-table-tools-footer .bs-tools-in-footer > .btn-group {
    margin-left: 0 !important;
}

/* Normalmodus: .bootstrap-table als Flex-Zeile, damit Paginierung (links) und Tools (rechts)
   auf einer Zeile sitzen. NUR im Normalmodus — das Vollbild bekommt unten ein eigenes,
   sauberes Spalten-Layout (sonst würden flex-wrap/align-items:center es zerlegen). */
.bootstrap-table:not(.fullscreen) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Toolbar und Tabellenkörper bleiben volle Zeilen; Paginierung und Tools teilen die letzte. */
.bootstrap-table:not(.fullscreen) > .fixed-table-toolbar,
.bootstrap-table:not(.fullscreen) > .fixed-table-container {
    flex: 0 0 100%;
    min-width: 0;
}

.bootstrap-table:not(.fullscreen) > .fixed-table-pagination {
    flex: 1 1 auto;
    min-width: 0;
}

.bootstrap-table:not(.fullscreen) > .bs-table-tools-footer {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 1.25rem;
}

/* Pill-/Blur-Look der Buttons (die .fixed-table-toolbar-Regeln greifen im Footer nicht mehr) */
.bs-table-tools-footer .btn,
.bs-table-tools-footer .keep-open > .btn,
.bs-table-tools-footer .export > .btn {
    height: 46px !important;
    border: 1px solid var(--color-sand) !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-primary) !important;
    padding: 0 15px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

.bs-table-tools-footer .btn:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.bs-table-tools-footer .btn:hover i,
.bs-table-tools-footer .btn:hover svg {
    color: #fff !important;
}

/* 3c. ZENTRALES VOLLBILD (einmalig gestaltet, gilt für alle Tabellen)
   Stock-CSS macht .bootstrap-table.fullscreen position:fixed mit weißem Grund und
   overflow-y:scroll. Hier wird daraus eine gebrandete Flex-Spalte: Toolbar oben fix,
   Tabellenkörper scrollt, Paginierung + Tools unten fix.
   ------------------------------------------------------ */
.bootstrap-table.fullscreen {
    z-index: 1050;
    background: var(--nav-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1.5rem 2rem !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;          /* sonst bricht die Spalte in mehrere Spalten um */
    align-items: stretch;       /* Kinder auf volle Breite (statt zentriert/natürliche Breite) */
    overflow: hidden !important;
}

.bootstrap-table.fullscreen .fixed-table-toolbar {
    flex: 0 0 auto;
}

.bootstrap-table.fullscreen .fixed-table-container {
    flex: 1 1 auto;
    min-width: 0;               /* erlaubt horizontales Scrollen breiter Tabellen */
    overflow: auto;
}

.bootstrap-table.fullscreen .fixed-table-pagination,
.bootstrap-table.fullscreen .bs-table-tools-footer {
    flex: 0 0 auto;
}

/* Während ein Vollbild aktiv ist, Seiten-Chrome ausblenden: der Footer (z-index:100, bewusst über
   die letzte Sektion gezogen) liegt je nach Stacking-Context sonst über dem Overlay.
   visibility:hidden vermeidet jeden Reflow (Header/Footer behalten ihren Platz). */
body.bs-table-fullscreen-active > header,
body.bs-table-fullscreen-active > footer {
    visibility: hidden;
}

/* 4. PROJEKT-FILTER TOOLBAR (In Bootstrap-Table integriert)
   ------------------------------------------------------ */
.projekt-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 40;
}

/* "Alle Filter zuruecksetzen" sitzt global rechts neben dem Suchfeld. filter_reset.js
   klammert beide in .ksbam-toolbar-search-group — als Flex-Item ist der Button an das
   Suchfeld gebunden und bricht mit ihm um, statt als eigener Float in einer anderen
   Zeile zu landen. Das margin-left:10px der generischen
   .fixed-table-toolbar .btn-secondary-Regel bleibt bewusst stehen: es ist hier der
   Abstand zum Suchfeld. */
.fixed-table-toolbar > .ksbam-toolbar-search-group {
    float: right;
    display: flex;
    align-items: center;
}

/* Die Suchbox rechnet ihre Breite ueber width: min(310px, 100%) aus; im
   shrink-to-fit-Wrapper faellt dieses 100% kleiner aus als gedacht. Die Breite
   deshalb als Flex-Basis vorgeben — schrumpfbar, aber nicht wachsend. */
.fixed-table-toolbar > .ksbam-toolbar-search-group .search.btn-group {
    flex: 0 1 310px;
    width: auto;
}

/* Fallback-Positionierung, falls der Button doch in der Custom-Filterleiste landet
   (Tabelle ohne .fixed-table-toolbar): dort ist er Flex-Item, das margin-left wuerde
   den gap verdoppeln. Die Selektorkette muss die Spezifitaet (0,4,0) der generischen
   Regel erreichen — !important allein genuegt nicht, wenn beide Regeln !important
   tragen (siehe docs/filter-toolbar-migration.txt). */
.fixed-table-toolbar .bs-bars .projekt-filter-toolbar .ksbam-filter-reset {
    margin-left: 0 !important;
    flex-shrink: 0;
}

.toolbar-filter-group {
    flex-shrink: 0;
    position: relative;
    z-index: 45;
}

/* Vertikaler Trennstrich zwischen benachbarten Filterbereichen — global per CSS
   statt <span class="vr"> in jedem einzelnen Template. Der border-left liegt im
   gap der Toolbar (0.75rem), das padding-left stellt den Abstand rechts davon
   wieder her, sodass der Strich mittig zwischen den Gruppen steht.
   Nur ab 992px: darunter stapelt .projekt-filter-toolbar die Gruppen
   untereinander, ein linker Rand waere dort sinnlos. */
@media (min-width: 992px) {
    .projekt-filter-toolbar .toolbar-filter-group + .toolbar-filter-group {
        border-left: 1px solid var(--color-sand);
        padding-left: 0.75rem;
    }
}

/* position + z-index machen jede Filtergruppe zu einem eigenen Stapelkontext.
   Der hohe z-index des Dropdowns wirkt deshalb nur innerhalb seiner Gruppe —
   gegen die nachfolgenden Gruppen und das Suchfeld verliert es, weil die im
   DOM spaeter kommen. Nebeneinander (Desktop) faellt das nicht auf, mobil
   stehen die Filter untereinander und das offene Dropdown verschwand hinter
   ihnen. TomSelect markiert den geoeffneten Wrapper mit .dropdown-active. */
.toolbar-filter-group:has(.ts-wrapper.dropdown-active) {
    z-index: 1060;
}

.toolbar-filter-pills {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.toolbar-filter-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 46px;
    padding: 0 0.5rem;
    color: var(--color-text);
    font-weight: 700;
    white-space: nowrap;
}

.toolbar-filter-title svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.toolbar-filter-pills .ksbam-filter-chip {
    display: flex;
    align-items: stretch;
}

.toolbar-filter-group .ts-wrapper {
    min-width: 180px;
    max-width: 280px;
    z-index: 50;
}

.toolbar-filter-group .ts-wrapper .ts-control {
    min-height: 46px !important;
    padding: 0.5rem 0.95rem !important;
    border-radius: 23px !important;
    border: 1px solid var(--color-sand) !important;
    background: var(--nav-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none !important;
    font-size: 0.85rem;
}

.toolbar-filter-group .ts-wrapper.focus .ts-control {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
}

.toolbar-filter-group .ts-wrapper .ts-control .item {
    font-size: 0.8rem;
    padding: 1px 6px !important;
    margin: 2px 2px !important;
    border-radius: 12px;
    background: var(--color-primary) !important;
    color: var(--color-weiss) !important;
}

.toolbar-filter-group .ts-wrapper .ts-control .item.tomselect-label-color {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    color: var(--color-weiss) !important;
}

.toolbar-filter-group .ts-wrapper .ts-control .item.tomselect-label-color-secondary {
    background: var(--color-secondary) !important;
}

.toolbar-filter-group .ts-wrapper .ts-control .item.tomselect-label-color-beere {
    background: var(--color-beere) !important;
}

.toolbar-filter-group .ts-wrapper .ts-control .item.tomselect-label-color-salbei {
    background: var(--color-salbei) !important;
}

.toolbar-filter-group .ts-wrapper .ts-control .item.tomselect-label-color .remove {
    color: inherit !important;
    border-left-color: rgba(255, 255, 255, 0.35) !important;
}

.toolbar-filter-group .ts-wrapper .ts-dropdown .option .tomselect-label-color {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    color: var(--color-weiss);
    font-size: 0.8rem;
    font-weight: 700;
}

.toolbar-filter-group .ts-wrapper .ts-dropdown .option .tomselect-label-color-secondary {
    background: var(--color-secondary);
}

.toolbar-filter-group .ts-wrapper .ts-dropdown .option .tomselect-label-color-beere {
    background: var(--color-beere);
}

.toolbar-filter-group .ts-wrapper .ts-dropdown .option .tomselect-label-color-salbei {
    background: var(--color-salbei);
}

.toolbar-filter-group .ts-wrapper .ts-dropdown {
    border-radius: 16px !important;
    border: 1px solid var(--color-sand) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    z-index: 1065 !important;
    padding: 0.4rem !important;
    overflow: hidden;
}

.toolbar-filter-group .ts-wrapper .ts-dropdown .option {
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    border-radius: 8px;
    margin: 0.1rem 0;
}

.toolbar-filter-group .ts-wrapper .ts-dropdown .option.active {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

.toolbar-filter-group .ts-wrapper .ts-dropdown .option:hover {
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
}

.kp-view-container .toolbar-filter-group .ts-wrapper .ts-dropdown,
.kp-view-container .toolbar-filter-group .ts-wrapper .ts-dropdown .option {
    text-align: left;
}

/* Schuljahr-Filter (Archiv) — Icon-Adornment + Single-Select-Pille
   ------------------------------------------------------ */
.toolbar-filter-schuljahr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toolbar-filter-schuljahr .ts-wrapper {
    min-width: 200px;
}

.toolbar-filter-schuljahr .ts-wrapper .ts-control {
    font-weight: 600;
}

.toolbar-filter-schuljahr .ts-wrapper .ts-control .item {
    background: transparent !important;
    color: var(--color-text) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fixed-table-toolbar .search button,
.fixed-table-toolbar .search button:hover,
.fixed-table-toolbar .search button:focus,
.fixed-table-toolbar .search button:active {
    box-shadow: none !important;
    filter: none !important;
}

/* Der globale Button-Hover (.btn:hover, weiter oben) legt jedem Schalter einen
   kräftigen Schlagschatten unter. Für die Filter-Pills wird er hier einmal für
   alle Farben zurückgenommen — vorher tat das jeder Farbblock einzeln, was
   salbei und secondary ausließ: in derselben Leiste warfen dann einzelne Pills
   einen Schatten und andere nicht. Der Fokusring bleibt unberührt, er wird am
   Ende dieses Abschnitts mit höherer Spezifität gesetzt. */
.toolbar-filter-pills .btn-check + .btn {
    height: 46px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    padding: 0 1rem !important;
    line-height: 1;
    border-width: 1px !important;
    margin: 0;
    box-shadow: none !important;
}

.toolbar-filter-pills .btn-check + .btn-outline-primary,
.toolbar-filter-pills .btn-check + .btn-outline-secondary,
.toolbar-filter-pills .btn-check + .btn-outline-accent,
.toolbar-filter-pills .btn-check + .btn-outline-wolke,
.toolbar-filter-pills .btn-check + .btn-outline-lavendel,
.toolbar-filter-pills .btn-check + .btn-outline-beere,
.toolbar-filter-pills .btn-check + .btn-outline-mango,
.toolbar-filter-pills .btn-check + .btn-outline-salbei,
.toolbar-filter-pills .btn-check + .btn-outline-traube,
.toolbar-filter-pills .btn-check + .btn-outline-grau,
.toolbar-filter-pills .btn-check + .btn-outline-dunkelgrau,
.toolbar-filter-pills .btn-check + .btn-outline-honig,
.toolbar-filter-pills .btn-check + .btn-outline-sand {
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.toolbar-filter-pills .btn-check:checked + .btn-outline-primary,
.toolbar-filter-pills .btn-outline-primary:hover,
.toolbar-filter-pills .btn-outline-primary.active,
.toolbar-filter-pills .btn-outline-primary:active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-weiss) !important;
}

.toolbar-filter-pills .btn-check:checked + .btn-outline-beere,
.toolbar-filter-pills .btn-outline-beere:hover,
.toolbar-filter-pills .btn-outline-beere.active,
.toolbar-filter-pills .btn-outline-beere:active {
    background-color: var(--color-beere) !important;
    border-color: var(--color-beere) !important;
    color: var(--color-weiss) !important;
}

/* Mango-Pills ("Angefragt", "Nicht abgerechnet"): die globale Regel weiter oben
   setzt beim Hover dunklen Text (var(--color-text)). In der Filterleiste sollen
   alle Pills gleich reagieren — gefuellt mit weisser Schrift. */
.toolbar-filter-pills .btn-check:checked + .btn-outline-mango,
.toolbar-filter-pills .btn-outline-mango:hover,
.toolbar-filter-pills .btn-outline-mango.active,
.toolbar-filter-pills .btn-outline-mango:active {
    background-color: var(--color-mango) !important;
    border-color: var(--color-mango) !important;
    color: var(--color-weiss) !important;
}

.toolbar-filter-pills .btn-check:focus + .btn,
.toolbar-filter-pills .btn:focus,
.toolbar-filter-pills .btn:active:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
}

.ksbam-toolbar-single-row {
    align-items: center;
}

/* Entfallen sind hier fuenf Regeln der Form
   `.ksbam-toolbar-single-row .fixed-table-toolbar …` (width, margin-bottom,
   margin-left, min-width des Suchfelds). Zur Laufzeit ist die Verschachtelung
   umgekehrt: bootstrap-table verschiebt die Leiste nach
   .fixed-table-toolbar > .bs-bars, die Toolbar ist also der Vorfahr. Die
   Regeln haben nie gematcht — entfernt statt umgeschrieben, damit sich das
   heutige Erscheinungsbild nicht aendert. */

.ksbam-toolbar-single-row__filters {
    flex: 1 1 auto;
    min-width: 0;
}

.ksbam-toolbar-single-row__filters .toolbar-filter-pills {
    flex-wrap: nowrap;
}

/* Testlauf nur fuer die Buchungsplanung der Einrichtung: Die vielen Filter
   teilen sich den verfuegbaren Platz, waehrend Suche und Reset als feste
   Einheit rechts stehen. Unterhalb von 1200px bleibt das bestehende,
   gestapelte Verhalten erhalten. */
@media (min-width: 1200px) {
    .einrichtung-planung-view .fixed-table-toolbar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .einrichtung-planung-view .fixed-table-toolbar > .bs-bars {
        float: none;
        flex: 1 1 auto;
        min-width: 0;
    }

    .einrichtung-planung-view .ksbam-toolbar-single-row__filters {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }

    .einrichtung-planung-view .ksbam-toolbar-single-row__filters > .toolbar-filter-group {
        flex: 1 1 0;
        min-width: 0;
    }

    .einrichtung-planung-view .toolbar-filter-group .ts-wrapper {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .einrichtung-planung-view .fixed-table-toolbar > .ksbam-toolbar-search-group {
        float: none;
        flex: 0 1 366px;
        min-width: 280px;
    }
}

@media (max-width: 991px) {
    .projekt-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
    }

    /* Gestapelt halten die Filter nur noch 0.5rem Abstand (gap oben). Damit die
       Suchzeile darunter nicht weiter absteht als die Filter untereinander,
       sinken die Toolbar-Raender hier von 6px auf 4px je Seite — zusammen
       wieder 8px. Siehe die 6px-Regel im Toolbar-Abschnitt. */
    .bootstrap-table .fixed-table-toolbar .bs-bars,
    .bootstrap-table .fixed-table-toolbar .columns,
    .bootstrap-table .fixed-table-toolbar .search {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    /* align-items: stretch wuerde auch den Reset ueber die volle Zeilenbreite
       ziehen — er traegt aber nur ein Trichter-Icon. */
    .projekt-filter-toolbar .ksbam-filter-reset {
        align-self: flex-start;
    }

    .toolbar-filter-group .ts-wrapper {
        min-width: 100%;
        max-width: 100%;
    }

    .toolbar-filter-pills {
        justify-content: flex-start;
    }

    .ksbam-toolbar-single-row {
        flex-direction: row;
        align-items: center;
    }

    .ksbam-toolbar-single-row__filters {
        width: auto;
        flex-wrap: nowrap;
    }
}

@media (max-width: 767px) {
    .fixed-table-toolbar .float-left,
    .fixed-table-toolbar .float-right {
        float: none !important;
        width: 100%;
    }

    .fixed-table-toolbar .search.btn-group {
        width: 100% !important;
        margin-bottom: 0.5rem;
        min-width: 100%;
    }

    .fixed-table-toolbar .search input {
        width: 100% !important;
    }

    /* Spalten-/Export-Buttons auf volle Breite. Der Filter-Reset ist bewusst
       ausgenommen: er ist ein reiner Icon-Button (46px) und lief mit width:100%
       samt margin-left ueber die rechte Toolbar-Kante hinaus. */
    .fixed-table-toolbar .columns.btn-group,
    .fixed-table-toolbar .columns.btn-group button,
    .fixed-table-toolbar .btn-secondary:not(.ksbam-filter-reset) {
        width: 100%;
        margin-left: 0 !important;
    }

    /* Mobil nimmt die Gruppe die volle Breite ein; das Suchfeld darin schrumpft,
       damit der Reset-Button daneben passt (die generische Regel gibt .search
       sonst width:100% !important und wuerde den Button hinausdruecken). */
    .fixed-table-toolbar > .ksbam-toolbar-search-group {
        float: none;
        width: 100%;
    }

    .fixed-table-toolbar > .ksbam-toolbar-search-group .search.btn-group {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
    }

    .toolbar-filter-group {
        width: 100%;
    }

    /* !important, weil die Filterleiste im Twig ein .flex-nowrap traegt (dort
       fuer die einzeilige Desktop-Anordnung noetig). Ohne diese Regel stehen
       die Filtergruppen mobil nebeneinander und die hinteren liegen unsichtbar
       hinter dem rechten Rand. */
    .ksbam-toolbar-single-row,
    .ksbam-toolbar-single-row__filters,
    .ksbam-toolbar-single-row__filters .toolbar-filter-pills {
        flex-wrap: wrap !important;
    }

    /* Die Filtergruppen untereinander statt nebeneinander. */
    .ksbam-toolbar-single-row__filters {
        width: 100%;
        row-gap: 0.5rem;
    }

    .ksbam-toolbar-single-row__filters > .toolbar-filter-group {
        width: 100%;
    }

    .klasse-budget-filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        width: 100%;
    }

    .klasse-budget-filter .ksbam-filter-chip,
    .klasse-budget-filter .btn-check + .btn {
        min-width: 0;
        width: 100%;
    }

    .klasse-budget-filter .btn-check + .btn {
        padding-inline: 0.45rem !important;
        font-size: 0.75rem;
        white-space: nowrap;
    }
}

/* 5. LANDING-KULTURPARTNER - CARD GRID & VIEW TOGGLE
   ------------------------------------------------------ */
/* 2. Grid-System (Kompakter & Stabil) */
#tbl_kulturpartner_cards thead { display: none !important; }

#tbl_kulturpartner_cards tbody {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 1fr;
    gap: 1.25rem !important; /* Etwas engerer Abstand wie gewünscht */
    border: none !important;
}

@media (max-width: 1100px) { #tbl_kulturpartner_cards tbody { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 768px)  { #tbl_kulturpartner_cards tbody { grid-template-columns: 1fr !important; gap: 1rem !important; } }

#tbl_kulturpartner_cards tbody tr, 
#tbl_kulturpartner_cards tbody td {
    display: block !important;
    height: 100%;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* 3. KP-Card Design (Schatten-Feedback für Tiefe) */
.kp-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-boxed);
    /* Border bleibt dezent im Hintergrund */
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 2.5rem 1.5rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
    
    /* Sanfter Übergang für den Schatten */
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.kp-card:hover {
    /* Schatten statt Border-Farbe */
    box-shadow: var(--bs-box-shadow-lg) !important;
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(255, 255, 255, 0.6); /* Nur minimale Aufhellung der Kante */
}

/* 4. Profil-Circle (Ohne Rand, zentriert) */
.kp-card__circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: none !important; 
    box-shadow: var(--bs-box-shadow-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-beere);
}

.kp-card__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kp-card__placeholder-icon {
    width: 70px !important;
    height: 70px !important;
    color: rgba(255, 255, 255, 0.8);
}

/* 5. Card Body & Footer (Links/Rechts Verteilung) */
.kp-card__body {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Zwei Zeilen fuer den Namen reservieren, damit ein- und zweizeilige
   Kulturpartner-Namen Footer und Gesamthoehe der Karten nicht verschieben. */
.kp-card__title {
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kp-card__footer {
    width: 100%;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Kulturpartner-Kartenansicht: kein zusätzlicher Shadow auf dem Table-Body,
   aber genügend Raum für den Hover-Schatten der Karten */
.kp-view-pane--cards .bootstrap-table .fixed-table-body {
    box-shadow: none !important;
}

.kp-view-pane--cards .bootstrap-table .fixed-table-container,
.kp-view-pane--cards .bootstrap-table .fixed-table-body {
    overflow: visible !important;
}

.kp-view-pane--cards #tbl_kulturpartner_cards tbody {
    padding: 0.35rem !important;
}
/* =========================================================
   Landingpage - Gesamte Komponenten
   ========================================================= */

/* 1. Die 4-Schritte Kacheln (Vollflächiges Bild-Design) */
.ksbam-card-img {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: var(--card-bg);
    box-shadow: var(--div-shadow);
}

.ksbam-card-img::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Overlay für weißen Text */
    z-index: 1;
}

.ksbam-card-img__body {
    position: relative;
    z-index: 2;
    height: 100%;
}

.step-label-large {
    background: var(--color-secondary);
    color: white;
    padding: 5px 22px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
}

.step-icon-huge svg {
    width: 65px;
    height: 65px;
    color: var(--color-primary);
}

/* 3. Kontaktkarte & Sidebar-Items */
.ksbam-card-head {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}

.icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Utility Klassen */
.py-6 { padding: 5rem 0; }

@media (max-width: 991px) {
    .ksbam-card-head { width: 100% !important; margin-top: 2rem; }
}


/* 6. View-Toggle (Kachel ↔ Zeile) */
.ksbam-view-toggle {
    width: 46px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    float: right;
    /* 6px wie .bs-bars/.search (siehe Toolbar-Abschnitt), damit der Button auf
       einer Linie mit dem Suchfeld sitzt. */
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    cursor: pointer;
}

/* Ab Tablet zeigt der Button nur sein Icon. Dass er zwischen zwei Ansichten
   umschaltet, verrät sonst nichts — deshalb ein deutlicher Hover-Zustand
   (Vollton statt der dezenten Blur-Fläche der übrigen Toolbar-Buttons) und ein
   Tooltip aus dem Stimulus-Controller. Die generische Toolbar-Hover-Regel
   (0,4,0) färbt nur den Grund; Anheben und Schatten kommen hier dazu. */
.fixed-table-toolbar .ksbam-view-toggle.btn-secondary:hover,
.fixed-table-toolbar .ksbam-view-toggle.btn-secondary:focus-visible {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-weiss) !important;
    box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.35) !important;
    transform: translateY(-1px);
}

.fixed-table-toolbar .ksbam-view-toggle.btn-secondary:hover i,
.fixed-table-toolbar .ksbam-view-toggle.btn-secondary:focus-visible i {
    color: var(--color-weiss) !important;
}

/* Die Beschriftung erscheint nur im Handy-Modus (siehe Media-Query weiter
   unten); auf grossen Breiten bleibt der Button ein Icon-Button, den Namen der
   Aktion tragen Tooltip und aria-label. */
.ksbam-view-toggle__label {
    display: none;
}

@media (max-width: 767.98px) {
    /* Der Umschalter soll mobil eine eigene, volle Zeile über den Filtern sein.
       Die Toolbar-Kinder sind Floats — Reihenfolge und volle Breite lassen sich
       daran nicht steuern, deshalb wird die Toolbar hier zur Flex-Spalte. Nur
       innerhalb von .kp-view-container: alle übrigen Tabellen behalten ihr
       Float-Layout. */
    .kp-view-container .fixed-table-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .kp-view-container .fixed-table-toolbar > * {
        float: none !important;
    }

    .kp-view-container .fixed-table-toolbar > .ksbam-view-toggle {
        order: -1;
    }

    /* Muss die Spezifität (0,4,0) der generischen Toolbar-Button-Regel
       übertreffen, sonst gewinnen deren margin-left und padding (!important auf
       beiden Seiten — siehe .ksbam-filter-reset weiter oben). */
    .fixed-table-toolbar .ksbam-view-toggle.btn-secondary:not([name="search"]):not([name="clearSearch"]) {
        width: 100% !important;
        margin-left: 0 !important;
        /* 4px wie .bs-bars/.search unterhalb von 992px — gleicher 8px-Abstand
           zur nächsten Zeile. */
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        padding: 0 1rem !important;
    }

    .ksbam-view-toggle__label {
        display: inline;
        font-size: 0.9rem;
        font-weight: 700;
    }
}

.kp-view-container.kp-view--cards .kp-view-pane--rows { display: none; }
.kp-view-container.kp-view--rows  .kp-view-pane--cards { display: none; }

/* Zeilen-Tabelle: Linksbündigkeit aller Zellen erzwingen */
#tbl_kulturpartner_rows thead th,
#tbl_kulturpartner_rows tbody td {
    text-align: left !important;
}
#tbl_kulturpartner_rows thead th .th-inner {
    text-align: left !important;
}

/* Die Aktionsspalte bildet am rechten Tabellenrand die Ausnahme. */
#tbl_kulturpartner_rows thead th[data-field="action"],
#tbl_kulturpartner_rows thead th[data-field="action"] .th-inner {
    text-align: right !important;
}

/* =========================================================
   BOOTSTRAP TABLE - TABLE SURFACE & CELL STYLING
   ========================================================= */

/* Der Haupt-Container: Glassmorphism, Rundungen & Schatten */
.bootstrap-table .fixed-table-container {
    border: none !important;
    background: transparent !important;
    border-radius: var(--radius-boxed) !important; /* Rundung für das gesamte Grid */
    overflow: hidden; /* Verhindert, dass Zeilen über die Rundung ragen */
    margin-bottom: 1rem !important; /* Hält Pagination näher an der Tabelle */
    position: relative;
    z-index: 1;
}

.bootstrap-table:not(:has(.ksbam-card-grid-table)) .fixed-table-container {
    background: var(--color-weiss) !important;
    box-shadow: var(--div-shadow);
}

/* Globaler mobiler Leerzustand aller Bootstrap-Tabellen. Optisch entspricht
   er der Hinweiskachel „… hat derzeit keine Projekte veröffentlicht“ auf dem
   oeffentlichen Kulturpartner-Profil. Tablet und Desktop behalten die
   Standarddarstellung der Tabelle. */
@media (max-width: 767.98px) {
    .table-responsive:has(.bootstrap-table .no-records-found) {
        width: 100%;
        margin-inline: 0;
        padding-inline: 0;
    }

    .bootstrap-table .fixed-table-container .table tbody tr.no-records-found {
        background: transparent !important;
    }

    .bootstrap-table .fixed-table-container .table tbody tr.no-records-found > td {
        padding: 1.5rem !important;
        border: 0 !important;
        border-radius: var(--radius-boxed);
        background: rgba(255, 255, 255, 0.92) !important;
        box-shadow: var(--div-shadow);
        color: var(--color-text);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        text-align: left !important;
        white-space: normal;
    }
}

/* Tabellen-Header: Normale Textgröße & Primärfarbe */
.bootstrap-table .fixed-table-container thead th {
    background-color: var(--color-sand) !important;
    border-bottom: 2px solid rgba(210, 183, 154, 0.8) !important;
    padding: 0 !important; /* Reset für inneres Padding */
}

.bootstrap-table .fixed-table-container thead th .th-inner {
    font-size: 1rem !important; /* Normale Textgröße statt klein/uppercase */
    color: var(--color-primary);
    font-weight: 700;
    padding: 1.25rem 1rem !important;
    text-transform: none !important; /* Kein Standard-Uppercase */
    letter-spacing: normal !important;
}

/* Mehrwortige Spaltentitel duerfen am Leerzeichen umbrechen.
   bootstrap-table setzt auf .th-inner grundsaetzlich white-space: nowrap
   (dist/bootstrap-table.min.css); lange Titel wie „Dauer (90 Min.)" oder
   „Kosten (KUBIS)" ziehen die Spalte dadurch unnoetig breit.
   Die Klasse steht am <th> im Template; bootstrap-table uebernimmt sie als
   column.class und setzt sie damit auch auf die Zellen der Spalte — dort
   ohne Wirkung, da <td> ohnehin umbricht. */
.bootstrap-table .fixed-table-container thead th.ksbam-col-wrap .th-inner {
    white-space: normal !important;
    overflow: visible;
    text-overflow: clip;
}

/* Lange Adressen aus migrierten Datensaetzen duerfen nur in der
   KS:BAM-Kulturpartnerliste umbrechen, statt die gesamte Tabelle zu verbreitern. */
#tbl_kulturpartner .ksbam-kulturpartner-email {
    width: 220px;
    max-width: 220px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tbl_kulturpartner .ksbam-kulturpartner-email .th-inner,
#tbl_kulturpartner .ksbam-kulturpartner-email a {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Projekt- und Kulturpartnernamen duerfen in der KS:BAM-Projektliste den
   festen Status-, Kategorie- und Aktionsspalten keinen Platz wegnehmen. */
#tbl_projekt .ksbam-project-text-column {
    width: 260px;
    max-width: 260px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tbl_projekt .ksbam-project-text-column .th-inner,
#tbl_projekt .ksbam-project-text-column a {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* E-Mail-Adressen bleiben in Benutzer- und Teamlisten vollstaendig sichtbar,
   koennen aber nicht mehr die uebrigen Spalten aus dem Viewport schieben. */
#tbl_user .ksbam-table-email-column,
#tbl_team .ksbam-table-email-column {
    width: 220px;
    max-width: 220px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tbl_user .ksbam-table-email-column .th-inner,
#tbl_team .ksbam-table-email-column .th-inner,
#tbl_team .ksbam-table-email-column a {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Die drei variablen Namensspalten der KS:BAM-Buchungsverwaltung teilen sich
   den Restplatz, ohne Status, Termine, Kosten und Aktionen zu verdraengen. */
.ksbam-booking-management-table .ksbam-booking-entity-column {
    width: 210px;
    max-width: 210px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ksbam-booking-management-table .ksbam-booking-entity-column .th-inner,
.ksbam-booking-management-table .ksbam-booking-entity-column a {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Lange Einrichtungsnamen und Adressen umbrechen innerhalb ihrer vorgesehenen
   Spalten; die breite Budgetdarstellung bleibt dadurch stabil sichtbar. */
#tbl_einrichtung .ksbam-facility-text-column {
    max-width: 240px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tbl_einrichtung .ksbam-facility-text-column .th-inner {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Gesamttopf-Fussleiste der Klassentabellen (klassen_summe_footer.js).
   bootstrap-table richtet Fusszeilen unten aus (`.table tfoot th` in
   dist/bootstrap-table.min.css). Die Budgetspalte ist mit ihren sieben Zeilen
   die hoechste; „Gesamttopf" und die Buchungssumme klebten dadurch an deren
   Unterkante statt auf einer Linie mit der ersten Budgetzeile zu beginnen.
   Klasse steht am <table> im Template — die Regel gilt bewusst nur fuer diese
   Summenfusszeilen, nicht fuer jede kuenftige tfoot. */
table.ksbam-summe-footer > tfoot > tr > th,
table.ksbam-summe-footer > tfoot > tr > td,
table.ksbam-summe-footer > tfoot .th-inner {
    vertical-align: top !important;
}

/* Die Summenzeile hebt sich in Hellsand vom weissen Tabellenkoerper ab.
   !important, weil bootstrap-table die Fusszeilen wie Kopfzellen behandelt und
   .table th dort ein weisses background-color !important setzt. */
table.ksbam-summe-footer > tfoot > tr > th,
table.ksbam-summe-footer > tfoot > tr > td {
    background-color: var(--color-hellsand) !important;
}

/* Tabellenzellen */
.table tbody td {
    vertical-align: middle !important;
    padding: 1rem !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    color: var(--color-text);
    background-color: var(--color-weiss) !important;
    transition: background-color 0.2s ease;
}

/* Hover-Effekt für Bootstrap Table Zeilen erzwingen */
.bootstrap-table .table-hover tbody tr:hover td {
    background-color: var(--color-hellsand) !important;
}

/* Bootstrap Table Hover-Variablen: dezenter Hellsand-Ton */
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--color-hellsand) !important;
    --bs-table-bg-state: var(--color-hellsand) !important;
}

/* Karten-Grid: Bootstrap-Hover-Variablen zurücksetzen */
.ksbam-card-grid-table.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
}

/* Karten-Grid-Tabellen: kein Zellen-Hintergrund */
.ksbam-card-grid-table tbody td {
    background-color: transparent !important;
}
.ksbam-card-grid-table.table-hover tbody tr:hover td,
.bootstrap-table .ksbam-card-grid-table.table-hover tbody tr:hover td {
    background-color: transparent !important;
}

/* Avatar-Design: Rahmen entfernt, Schatten hinzu */
.table-avatar {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 50%;
    border: none !important; /* Weißer Rahmen entfernt */
    box-shadow: var(--bs-box-shadow-sm);
    transition: transform 0.2s ease-in-out;
    display: inline-block;
}

/* Dieselbe Klasse traegt auch der Platzhalter — ein farbiger Kreis mit Icon
   statt eines Bildes. Die Zentrierung des Icons haengt dort bisher an den
   Utilities (.d-flex.align-items-center.justify-content-center) im Template;
   in der mobilen Card-View kippt sie deshalb (siehe die
   justify-content-Regel im Card-View-Abschnitt). Hier wird sie unabhaengig
   davon gesetzt, damit das Icon in jedem Kontext exakt in der Kreismitte
   sitzt. Bilder (<img>) sind ausgenommen: fuer sie gilt weiter object-fit. */
:not(img).table-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

:not(img).table-avatar > svg {
    display: block;
    flex-shrink: 0;
}

/* Klick-Feedback für das verlinkte Bild */
a:has(.table-avatar):active .table-avatar {
    transform: scale(0.95);
}

/* Kulturpartner Link in Primary */
.table-kp-link {
    color: var(--color-primary) !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.table-kp-link:hover {
    color: var(--color-secondary) !important;
}

/* Badge-Veredelung */
.table .badge {
    font-size: 0.7rem;
    padding: 0.4em 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    border-radius: 6px;
    /* Bootstrap richtet .badge standardmaessig an der Text-Baseline aus.
       In Tabellen fuehrt das neben Inline-Flex-Zaehlern und Icons zu einem
       sichtbaren Hoehenversatz, obwohl die Zelle selbst mittig steht. */
    vertical-align: middle;
}

.ksbam-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 3.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.12), rgba(173, 31, 100, 0.1));
    color: var(--color-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 700;
}

.ksbam-count-badge svg {
    flex-shrink: 0;
    opacity: 0.9;
}

/* =========================================================
   BOOTSTRAP TABLE - CARD VIEW (MOBILE)
   =========================================================
   Der Card-View entsteht durch die Mobile-Extension bei <= 562px. Die drei
   Vendor-Regeln stellen Label und Wert nebeneinander (display:flex,
   min-width:30%) — auf dem Handy klebten beide ohne Abstand aneinander
   ("KulturpartnerAtelier Regenbogen"). Hier wird auf "Label ueber Wert"
   umgestellt.

   Keine Media-Query noetig: .card-view existiert im DOM nur, solange die
   Extension umgeschaltet hat.

   ABGRENZUNG: Jeder Selektor haengt an .card-view/.card-views. Die
   Kulturpartner-Kachelansicht (.kp-card in einer CSS-Grid-Tabelle) ist eine
   voellig andere Mechanik und erzeugt nie einen .card-view-Knoten — kein
   Selektor hier darf auf .table tbody td oder .bootstrap-table tbody allein
   zielen. */

/* Jeder Datensatz wird eine eigene Kachel: die Tabellenflaeche darunter wird
   transparent geschaltet, den weissen Grund samt Rundung und Schatten traegt
   .card-views selbst. Der Abstand zwischen den Kacheln kommt aus dem
   Zellen-padding, weil <tr>/<td> kein margin annehmen. */
.bootstrap-table .fixed-table-container.has-card-view {
    background: transparent !important;
    box-shadow: none !important;
    /* sonst schneidet die Rundung des Containers den Kachelschatten ab */
    overflow: visible;
}

.bootstrap-table .fixed-table-container.has-card-view .fixed-table-body {
    overflow: visible;
}

/* Der Tabellenkoerper traegt sonst eine eigene weisse, nur aussen gerundete
   Flaeche (siehe die .table-responsive-Regel im Toolbar-Abschnitt, (0,5,0) mit
   !important). Hinter den Kacheln blitzten deren eckige Ecken durch, sobald
   der bunte Seitenhintergrund darunter lag. Gleiche Spezifitaet und spaetere
   Position gewinnt. */
.table-responsive:has(.bootstrap-table) .bootstrap-table .fixed-table-container.has-card-view .fixed-table-body {
    background: transparent !important;
    border-radius: 0;
}

.table tbody td:has(> .card-views) {
    background: transparent !important;
    border-bottom: none !important;
}

/* Zeilenmarker wie „meine Klasse/Einrichtung" liegen in der Tabellenansicht
   als inset-Schatten auf der ersten Zelle. Im Card-View ist diese Zelle jedoch
   die Traegerflaeche der ganzen Karte; dort wuerde der Streifen falsch sitzen. */
.bootstrap-table .fixed-table-container.has-card-view .table tbody tr > td:first-child {
    box-shadow: none !important;
}

/* Im Card-View darf die globale Tabellen-Hoverfarbe nicht auf der transparenten
   Traegerzelle erscheinen: Sie wuerde als rechteckige Flaeche hinter der
   abgerundeten Karte sichtbar. Die Karte selbst bleibt unveraendert. */
.bootstrap-table .fixed-table-container.has-card-view .table-hover tbody tr:hover > td {
    --bs-table-accent-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
    background-color: transparent !important;
}

.card-views {
    display: block;
    padding: 1rem;
    background: var(--color-weiss);
    border-radius: var(--radius-boxed);
    box-shadow: var(--div-shadow);
}

/* Die Vendor-Kette ist (0,5,3) und traegt teils !important; kuerzere
   Selektoren wuerden verlieren. */
.bootstrap-table .fixed-table-container .table tbody tr .card-view {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0.7rem 0;
}

/* Trennlinie oben statt unten: so bleibt die letzte Zeile der Kachel ohne
   Linie, ohne dass ein :last-child gegen die (0,5,3)-Vendorkette antreten
   muesste — und ausgeblendete Spalten (leerer Wert) verschieben nichts. */
.bootstrap-table .fixed-table-container .table tbody tr .card-view + .card-view {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.bootstrap-table .fixed-table-container .table tbody tr .card-view:first-child {
    padding-top: 0;
}

.bootstrap-table .fixed-table-container .table tbody tr .card-view:last-child {
    padding-bottom: 0;
}

/* Label: gleiche Rolle und Farbe wie der Spaltentitel im Tabellenkopf. */
.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-title {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0.2rem;
    /* !important, weil bootstrap-table das style-Attribut der Spalte auf den
       Titel-<span> mitkopiert. */
    font-size: 0.8rem !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-primary);
    white-space: normal !important;
    /* Bootstrap Table kopiert data-align der Spalte als Inline-Style auf den
       Titel. Dadurch stand insbesondere „Aktionen" rechtsbuendig. */
    text-align: left !important;
}

/* Bilder erklaeren sich in der mobilen Kartenansicht selbst und erhalten
   tabellenuebergreifend dieselbe praegnante Vorschaugroesse. */
.card-views > .card-view:has(.table-avatar) .card-view-title {
    display: none !important;
}

.card-views > .card-view:has(.table-avatar) .table-avatar {
    width: 72px !important;
    height: 72px !important;
}

.card-views > .card-view:has(.ksbam-card-view-image) .card-view-title {
    display: none !important;
}

.card-views .ksbam-card-view-image {
    width: 72px !important;
    height: 72px !important;
}

/* Direkte Absicherung fuer Listen mit fester Bildspalte an erster Position.
   Die lange Kette schlaegt auch die Vendor-Regel. */
.bootstrap-table .fixed-table-container #tbl_projekte tbody tr .card-views > .card-view:first-child .card-view-title,
.bootstrap-table .fixed-table-container #tbl_kulturpartner_rows tbody tr .card-views > .card-view:first-child .card-view-title,
.bootstrap-table .fixed-table-container #tbl_einrichtung_buchungen tbody tr .card-views > .card-view:first-child .card-view-title,
.bootstrap-table .fixed-table-container #tbl_buchungen tbody tr .card-views > .card-view:first-child .card-view-title {
    display: none !important;
}

/* KS:BAM-Verwaltungslisten: feste Absicherung für Bildspalten, unabhängig
   davon, ob ein echtes Bild oder nur ein Platzhalter ausgegeben wird. */
.bootstrap-table .fixed-table-container #tbl_kulturpartner tbody tr .card-views > .card-view:first-child .card-view-title,
.bootstrap-table .fixed-table-container #tbl_user tbody tr .card-views > .card-view:first-child .card-view-title,
.bootstrap-table .fixed-table-container #tbl_projekt tbody tr .card-views > .card-view:nth-child(3) .card-view-title {
    display: none !important;
}

/* KS:BAM-Projektverwaltung: Bild und Freigabestatus bilden mobil den
   gemeinsamen Kartenkopf. Die Desktop-Spaltenreihenfolge bleibt unverändert. */
#tbl_projekt .card-views {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 1rem;
}

#tbl_projekt .card-view {
    grid-column: 1 / -1;
}

#tbl_projekt .card-view:first-child {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 0 0.7rem !important;
    border-top: 0 !important;
}

#tbl_projekt .card-view:first-child .card-view-title {
    display: none !important;
}

#tbl_projekt .card-view:first-child .card-view-value {
    width: auto !important;
    text-align: right !important;
}

#tbl_projekt .card-view:nth-child(3) {
    grid-column: 1;
    grid-row: 1;
    padding: 0 0 0.7rem !important;
    border-top: 0 !important;
}

#tbl_projekt .card-view:nth-child(2),
#tbl_projekt .card-view:nth-child(n + 4) {
    grid-column: 1 / -1;
}

/* Buttonspalten erklaeren sich in der mobilen Kartenansicht selbst. Die
   Erkennung ueber den tatsaechlichen Inhalt funktioniert unabhaengig davon,
   ob die Spalte „Aktion", „Aktionen" oder anders benannt ist. */
.bootstrap-table .fixed-table-container .table tbody tr .card-view:has(> .card-view-value :is(.btn, .ksbam-admin-action)) > .card-view-title {
    display: none !important;
}

/* Kulturpartner-Projektliste: Status (erste Datenspalte) und Bild (zweite
   Datenspalte) bilden im Card-View einen kompakten gemeinsamen Kartenkopf.
   Die DOM-Reihenfolge der Desktop-Tabelle bleibt dabei unangetastet. */
#tbl_kp_projekte .card-views {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 1rem;
}

#tbl_kp_projekte .card-view:first-child {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 !important;
}

#tbl_kp_projekte .card-view:first-child .card-view-value {
    width: auto !important;
    text-align: right !important;
}

#tbl_kp_projekte .card-view:first-child .card-view-title {
    display: none !important;
}

#tbl_kp_projekte .card-view:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
    padding: 0 0 0.7rem !important;
    border-top: 0;
}

#tbl_kp_projekte .card-view:nth-child(n + 3) {
    grid-column: 1 / -1;
}

/* Bildbasierte Buchungslisten: Bild und Status werden im mobilen Card-View
   unabhaengig von Tabelle und Spaltenposition zu einem Kartenkopf. Der Scope
   haengt direkt am erzeugten Karteninhalt und bleibt daher stabil, wenn
   Bootstrap Table beim Umschalten Tabellenklassen neu setzt. */
.card-views:has(.table-avatar):has(.ksbam-booking-card-status) {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 1rem;
}

.card-views:has(.table-avatar):has(.ksbam-booking-card-status) > .card-view {
    grid-column: 1 / -1;
}

.card-views:has(.table-avatar):has(.ksbam-booking-card-status) > .card-view:has(> .card-view-value .table-avatar) {
    grid-column: 1;
    grid-row: 1;
    padding: 0 0 0.7rem !important;
    border-top: 0 !important;
}

.card-views:has(.table-avatar):has(.ksbam-booking-card-status) > .card-view:has(> .card-view-value .ksbam-booking-card-status) {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 0 0.7rem !important;
    border-top: 0 !important;
}

.card-views:has(.table-avatar):has(.ksbam-booking-card-status) > .card-view:has(> .card-view-value .ksbam-booking-card-status) > .card-view-title {
    display: none !important;
}

.card-views:has(.table-avatar):has(.ksbam-booking-card-status) > .card-view:has(> .card-view-value .ksbam-booking-card-status) > .card-view-value {
    width: auto !important;
    text-align: right !important;
}

/* Klassenakte der Einrichtung: feste Absicherung analog zur PFK-Planung.
   Bild ist Spalte 1, Status Spalte 8. */
.einrichtung-klasse-buchungen-card-view .card-views {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 1rem;
}

.einrichtung-klasse-buchungen-card-view .card-view {
    grid-column: 1 / -1;
}

.einrichtung-klasse-buchungen-card-view .card-view:first-child {
    grid-column: 1;
    grid-row: 1;
    padding: 0 0 0.7rem !important;
    border-top: 0 !important;
}

.einrichtung-klasse-buchungen-card-view .card-view:nth-child(8) {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 0 0.7rem !important;
    border-top: 0 !important;
}

.einrichtung-klasse-buchungen-card-view .card-view:first-child > .card-view-title,
.einrichtung-klasse-buchungen-card-view .card-view:nth-child(8) > .card-view-title {
    display: none !important;
}

.einrichtung-klasse-buchungen-card-view .card-view:first-child .table-avatar {
    width: 72px;
    height: 72px;
}

.einrichtung-klasse-buchungen-card-view .card-view:nth-child(8) > .card-view-value {
    width: auto !important;
    text-align: right !important;
}

.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 1rem;
    color: var(--color-text);
    /* Lange Werte (Mailadressen, URLs) sonst Ursache des horizontalen
       Scrollens; ebenso die inline min-width an einzelnen <td>. */
    overflow-wrap: anywhere;
}

/* Alle 21 responsiven Bootstrap-Tabellen laufen mobil durch diesen Card-View.
   0.75rem sind bei der globalen 16px-Basis exakt 12px und ueberschreiben die
   allgemeine Tabellen-Badgegroesse von 0.7rem (11.2px). */
.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value .badge {
    font-size: 0.75rem !important;
}

/* Spalten ohne Inhalt hinterlassen sonst eine verwaiste Label-Zeile. */
.card-views > .card-view:has(> .card-view-value:empty) {
    display: none !important;
}

/* Der Innenabstand kommt von .card-views, unten bleibt der Kachelabstand.
   Die :has-Bedingung bindet die Regel an den Card-View — ohne sie wuerde sie
   jede Tabellenzelle treffen. */
.table tbody td:has(> .card-views) {
    padding: 0 0 0.75rem !important;
}

/* In der Tabelle richten die Templates den Zellinhalt an der Spalte aus
   (.justify-content-end an den Aktionen, .mx-auto am Bild-Platzhalter,
   .text-center an Status-Spalten). In der Kachel steht jeder Wert linksbuendig
   unter seinem Label — sonst springt das Bild in die Mitte und die
   Aktionsbuttons an den rechten Rand, waehrend alles andere links beginnt.
   text-align allein genuegt nicht: Flex- und Auto-Margin-Ausrichtung haengen
   nicht daran.

   AUSNAHME Platzhalter-Kreise: .table-avatar und .rounded-circle sind selbst
   der Wert und tragen dieselben Utilities, weil ihr Icon mittig im Kreis sitzen
   soll. Ohne die Ausnahme schob diese Regel das Icon an den linken Kreisrand —
   der Kreis als Ganzes steht ueber die .mx-auto-Regel darunter trotzdem
   linksbuendig in der Kachel. */
.card-views .card-view-value .justify-content-center:not(.table-avatar):not(.rounded-circle),
.card-views .card-view-value .justify-content-end {
    justify-content: flex-start !important;
}

.card-views .card-view-value .mx-auto {
    margin-inline: 0 !important;
}

.card-views .card-view-value .text-center,
.card-views .card-view-value .text-end {
    text-align: left !important;
}

/* Kultur.Klassen der Einrichtung: Die sechs Statuswerte nutzen im Desktop
   weiterhin die zentrierte Tabellenspalte, stehen in der Card-View aber bündig
   unter der Beschriftung. */
.card-views .klasse-card-status-overview {
    justify-content: flex-start !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Aktionsspalten: umbrechen statt ueberlaufen, Buttons auf Tap-Groesse. */
.card-views .card-view-value .btn-group,
.card-views .card-view-value .btn-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* In einer .btn-group sitzen die Buttons per margin-left: -1px auf Stoss und
   nur die aeusseren Ecken sind gerundet. In der Kachel stehen sie einzeln:
   eigener Abstand, rundum gerundet, Icon mittig (Bootstrap gibt .btn nur
   text-align: center, vertikal sitzt das Icon sonst auf der Grundlinie). */
.card-views .card-view-value .btn-group > .btn,
.card-views .card-view-value .btn-toolbar > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0 !important;
    border-radius: var(--radius-boxed) !important;
}

/* Auch freistehende Buttons (z. B. „Details" in der Projektliste, ausserhalb
   jeder .btn-group) sind in der Kachel Tap-Targets. Bootstrap laesst .btn als
   inline-block, Beschriftung und Icon sassen dadurch in den 44px Mindesthoehe
   auf der Grundlinie statt in der Mitte — die Flaechen wirkten ungleichmaessig
   gefuellt. */
.card-views .card-view-value .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.card-views .card-view-value .btn-group-sm > .btn,
.card-views .card-view-value .btn-sm {
    min-height: 44px;
    min-width: 44px;
    /* Seitliches Padding, damit beschriftete Buttons nicht am Rand kleben;
       Icon-Buttons bleiben ueber min-width quadratisch. */
    padding: 0.25rem 0.75rem;
}

/* 14px Icon in einem 44px-Button wirkt verloren. */
.card-views .card-view-value .btn-group > .btn svg,
.card-views .card-view-value .btn-toolbar > .btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* =========================================================
   PROGRESS BAR - CUSTOM STYLING (MATCHING KSBAM DESIGN)
   ========================================================= */

/* Der Hintergrund der Bar (Track). Die Füllfarbe kommt als Bootstrap-Variable,
   damit bg-*-Utilities an einzelnen Segmenten sie überschreiben können. */
.progress {
    --bs-progress-bar-bg: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb), 0.1) !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Der gefüllte Teil der Bar. Ohne eigenen Radius, damit gestapelte Segmente
   nicht jedes für sich abgerundet werden — die Füllung sähe sonst unterbrochen
   aus. Die äußere Rundung schneidet der Track per overflow:hidden. */
.progress-bar {
    border-radius: 0;
    transition: width 0.6s ease;
}

/* Einzelner Balken (Regelfall, z. B. Budgetanzeige): Hier gibt es keinen
   Nachbarn, deshalb darf auch das rechte Ende rund sein. */
.progress-bar:only-child {
    border-radius: 10px;
}

/* =========================================================
   4. NAVIGATION (HEADER & BAR)
   ========================================================= */

.ksbam-header {
  position: fixed;
  top: var(--nav-top-offset);
  left: 0;
  right: 0;
  padding: 0% 5% 20px 5%;
  z-index: 2000;
  /* Macht den Header-Container klick-durchlässig, damit
     Elemente darunter (Hero-Buttons etc.) anklickbar bleiben */
  pointer-events: none;
}

@media (max-width: 767px) {
    .ksbam-header {
        padding: 14px 0;
    }

    .ksbam-header > .container-xxl {
        width: 100%;
        max-width: none;
        padding-inline: 0;
    }
}

/* Wrapper als Positionskontext für das Logo.
   Liegt ausserhalb des backdrop-filter-Elements, damit das Logo
   an der abgerundeten Nav-Ecke nicht vom Browser geclippt wird. */
.ksbam-nav-wrapper {
  position: relative;
  width: 100%;
  max-width: min(calc(var(--content-width-boxed) + 200px), 100vw);
  margin: 0 auto;
}

.ksbam-nav {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  background-color: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  box-shadow: var(--nav-shadow);
  border-radius: var(--radius-boxed);
  padding: 0 15px;
  position: relative;
  z-index: 100;
  /* Schaltet die Klickbarkeit für die eigentliche Leiste wieder ein */
  pointer-events: auto;
}

.ksbam-nav-logo {
  width: var(--nav-logo-width);
  position: absolute;
  left: calc(-1 * var(--nav-logo-overlap-x));
  top: calc(var(--nav-height) / 2);
  transform: translateY(-50%);
  z-index: 110;
  pointer-events: auto;
}

.ksbam-nav-logo img {
  width: 100%; 
  height: auto; 
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.ksbam-nav-spacer { flex: 0 0 var(--nav-side-width); }
.ksbam-nav-center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.ksbam-nav-cta { flex: 0 0 var(--nav-side-width); display: flex; justify-content: flex-end; pointer-events: none; }
/* Leere linke Hälfte des CTA-Bereichs reicht Klicks an den darunterliegenden letzten Menüpunkt ("Konten") durch; nur der Avatar/Dropdown bleibt klickbar */
.ksbam-nav-cta > * { pointer-events: auto; }

/* Links & Items */
.ksbam-nav-links { 
    display: flex; 
    gap: 0.5rem; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    flex-wrap: nowrap; 
    white-space: nowrap;
}

.nav-link {
  color: var(--color-text);
  font-weight: 600;
}

.nav-link:hover, 
.nav-link.active {
  color: var(--color-primary);
  background: transparent; 
}


.ksbam-nav .nav-link {
  font-weight: 600;
  padding: 8px 10px; 
  border-radius: 12px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}


.ksbam-nav .nav-link svg { width: 18px; height: 18px; }

.ksbam-cta {
  gap: 6px;
  padding: 12px 18px;
}

.ksbam-cta svg {
  width: 18px;
  height: 18px;
}

/* =========================================================
   5. NAVIGATION (MOBILE & TABLET)
   ========================================================= */

.ksbam-nav-burger {
  background: transparent; 
  border: none;
  color: var(--color-text);
  padding: 10px;
  position: relative;
  z-index: 120; 
  cursor: pointer;
  /* Sicherstellen, dass der Burger-Button klickbar ist */
  pointer-events: auto;
}

.ksbam-nav-burger-icon,
.ksbam-nav-burger-icon::before,
.ksbam-nav-burger-icon::after {
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.ksbam-nav-burger-icon {
  position: relative;
  display: block;
}

.ksbam-nav-burger-icon::before,
.ksbam-nav-burger-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.ksbam-nav-burger-icon::before {
  transform: translateY(-10px);
}

.ksbam-nav-burger-icon::after {
  transform: translateY(10px);
}

.ksbam-nav-burger[aria-expanded="true"] .ksbam-nav-burger-icon {
  background-color: transparent;
}

.ksbam-nav-burger[aria-expanded="true"] .ksbam-nav-burger-icon::before {
  transform: rotate(45deg);
}

.ksbam-nav-burger[aria-expanded="true"] .ksbam-nav-burger-icon::after {
  transform: rotate(-45deg);
}

/* Mobil oeffnet die gesamte Leiste das Menue, nicht nur das Icon: der Button
   deckt die Leiste als Schaltflaeche ab, das Icon bleibt rechts stehen.
   Mobil enthaelt die Leiste sonst nichts — Spacer, Menuemitte und CTA sind
   alle d-none d-md-*. Das Logo sitzt ausserhalb von .ksbam-nav in einem
   hoeheren Stapelkontext (z-index 110 gegen 100) und bleibt anklickbar. */
@media (max-width: 767px) {
  .ksbam-nav-burger {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 15px;
    /* neutralisiert das ms-auto aus dem Template, das hier nicht mehr traegt */
    margin: 0 !important;
    border-radius: var(--radius-boxed);
  }
}

/* Mobiles Dropdown-Menü */

.ksbam-nav-mobile-container {
  background-color: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  border-radius: var(--radius-boxed);
  box-shadow: var(--div-shadow);
  margin-top: 10px;
  margin-inline: 15px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.75rem;
  list-style: none;
  z-index: 90;
  /* Klickbarkeit für die mobilen Links */
  pointer-events: auto;
}

@media (max-width: 767px) {
  .ksbam-nav-wrapper {
    width: auto;
    max-width: none;
    margin-left: 15px;
    margin-right: 10px;
  }
  .ksbam-nav {
    padding: 0 15px;
    justify-content: flex-end;
  }

  .ksbam-nav-mobile-container {
    margin-inline: 0;
    max-height: calc(100dvh - var(--nav-top-offset) - var(--nav-height) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ksbam-nav-burger-icon,
  .ksbam-nav-burger-icon::before,
  .ksbam-nav-burger-icon::after {
    transition: none;
  }
}

@media (max-width: 1199px) and (min-width: 768px) {
  .ksbam-nav-wrapper {
    width: auto;
    margin-inline: 15px;
  }
  .ksbam-nav .nav-link span { display: none; }
  .ksbam-cta-label { display: none; }
  .ksbam-nav-links { gap: 1.5rem; }
  .ksbam-nav .nav-link svg { width: 20px; height: 20px; }
  .ksbam-nav .nav-link { 
  	padding: 10px; 
  	color: var(--color-text);
  	}
}

/* =========================================================
   6. BUTTONS & COMPONENTS
   ========================================================= */


/* === Custom Standard Button === */
.btn-custom {
  /* Struktur & Maße */
  border-radius: var(--radius-button);
  padding: var(--padding-button);
  font-family: var(--font-primary);
  font-weight: 700;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-decoration: none;
  cursor: pointer;
  width: fit-content;
  line-height: 1;

  /* Dynamische Farbe: Fallback ist primary, falls keine bg-* Klasse gesetzt ist */
  background-color: var(--bg-color, var(--color-primary)) !important;
  color: white !important;
}  

/* Hover-Verhalten für alle btn-custom Varianten */
.btn-custom:hover,
.btn-custom:focus {
  /* Dein gewünschter Schatten aus dem Beispiel */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  /* Leichtes Abdunkeln/Sättigen für den Interaktions-Effekt */
  filter: brightness(0.95) saturate(1.1);
  color: white !important;
}

/* Spezialfall: Falls du btn-custom OHNE eine bg-* Klasse nutzt, 
   sollte der Hover-Zustand explizit definiert sein 
*/
.btn-custom:not([class*="bg-"]):hover {
    background-color: var(--color-primary) !important;
}

/* .btn-gradient (Elementor-Stil, Farbverlauf) ist entfallen: Die fünf
   Auth-Seiten (Login, Passwort-Reset, Bestätigungslink) nutzen jetzt den
   Standardbutton .btn-custom mit bg-primary – der Verlauf fiel dort aus dem
   Rahmen (Rückmeldung KS:BAM 07.08.2026). */

.ksbam-card {
  background: var(--color-weiss);
  border-radius: var(--radius-boxed);
  box-shadow: var(--div-shadow);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ksbam-card__imgwrap { padding: 20px 20px 0 20px; }
.ksbam-card__img { width: 100%; border-radius: var(--radius-image); display: block; object-fit: cover; }
.ksbam-card__body { padding: 25px; flex: 1 1 auto; display: flex; flex-direction: column; }
.ksbam-card__body .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 767.98px) {
  .kp-project-new-form form button[type="submit"] {
    align-self: center;
  }
}
.ksbam-card-blur {
  /* backdrop-filter entfernt: in Firefox clippt die Kombination aus
     backdrop-filter + border-radius überstehende fixed-Elemente
     (Logo) an den runden Card-Kanten. Der Hintergrund ist mit
     85 % Weiss ohnehin fast deckend, der Blur optisch marginal. */
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-boxed);
  box-shadow: var(--div-shadow);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ksbam-card-head {
  background: var(--color-weiss);
  border-radius: var(--radius-boxed);
  box-shadow: var(--div-shadow);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Der Header-Bereich mit dem Hintergrundbild */
.ksbam-card-head__header {
  position: relative;
  /* Bild war zuvor inline gesetzt; es gibt genau einen Verwender (landing/home). */
  background-image: url("../images/img/background_main-05mke0S.png");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  padding: 20px 25px 10px 25px;
}


/* Body & Button Logik (identisch zur Standard-Card) */
.ksbam-card-head__body {
  padding: 25px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ksbam-card-img {
  position: relative;
  background-color: var(--color-weiss); /* Fallback */
  border-radius: var(--radius-boxed);
  box-shadow: var(--div-shadow);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* Das Hintergrundbild über die gesamte Fläche */
.ksbam-card-img::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
}

/* Optionales Overlay für bessere Lesbarkeit des Textes */
.ksbam-card-img::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.3); /* Heller Schleier */
}

.ksbam-card-img__body {
  position: relative;
  padding: 25px;
  flex: 1;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/* Profil-/Steckbrief-Karten */
.ksbam-card-blur .ksbam-card__imgwrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .ksbam-card-blur .row.g-0 {
        flex-direction: column;
    }

    .ksbam-card__imgwrap {
        padding: 20px !important;
    }

    .ksbam-card__imgwrap img {
        height: 250px !important;
    }
}

/* Projekt-/Teaser-Karten
   Kein Hover-Zoom auf dem Kachelbild: der Effekt war auf den Projektkacheln der
   Kulturpartner-Profile (.ksbam-card__image-header) unerwuenscht — und das ist
   die einzige Stelle, an der diese Bild-Wrapper vorkommen. */

.ksbam-card .btn-custom {
    width: auto !important;
    white-space: nowrap;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    transition: all 0.2s ease;
}

.ksbam-card.shadow-sm {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.ksbam-card__image-header {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-hellgrau);
}

.ksbam-card__image-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ksbam-card__body h4 {
    line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ksbam-kp-project-card__body h4 {
    min-height: 0;
}

/* =========================================================
   7. SECTIONS, HERO & WAVES (Optimiert)
   ========================================================= */

/* Gemeinsame Basis für alle Wellen/Bögen */
.ksbam-wave, 
.ksbam-footer-wave {
  width: 100%;
  line-height: 0;
  pointer-events: none;
}

.ksbam-wave svg,
.ksbam-footer-wave svg {
  display: block;
  fill: currentColor; /* Nutzt die Textfarbe des Containers */
}

/* Spezifisch für die Hero/Subhero Waves */
.ksbam-wave {
  height: var(--wave-height);
  color: var(--color-weiss);
  /* Das SVG ist mit width: 130% breiter als der Viewport und ragte seitlich
     heraus — sichtbar als horizontaler Ueberlauf der Startseite, den bisher
     nur das globale overflow-x: hidden kaschiert hat. */
  overflow: hidden;
}

.ksbam-wave svg {
  width: 130%; 
  height: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
}

.ksbam-footer-wave {
    position: absolute; 
    top: -49px; 
    left: 0; 
    width: 100%; 
    overflow: hidden; 
    line-height: 0;
    z-index: 101; /* Sicherstellen, dass es über allem liegt */
}

.ksbam-footer-wave svg {
    /* Wir machen das SVG 110% breit und zentrieren es, 
       damit die Kurvenenden außerhalb des Sichtfelds liegen */
    width: 110%; 
    height: 50px; 
    margin-left: -5%;
    fill: var(--color-lavendel);
    /* Der Filter-Schatten kann manchmal "dreckig" aussehen. 
       Wir ersetzen ihn durch einen saubereren drop-shadow */
    filter: drop-shadow(0 -5px 5px rgba(0,0,0,0.03));
    /* Verhindert Subpixel-Lücken zwischen SVG und Footer-Body */
    transform: translateY(1px); 
}
.ksbam-wave[class*="bg-"] { background-color: transparent !important; color: var(--bg-color); }
.ksbam-wave path { fill: currentColor; } 
.ksbam-wave--flip-y svg { transform: translateX(-50%) scaleY(-1); }

.section-hero {
  position: relative;
  min-height: var(--hero-height);
  display: flex;
  align-items: center;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: top center;
  padding-top: calc(var(--nav-top-offset) + var(--nav-height) + 50px);
  padding-bottom: 40px; 
  z-index: 10;
}

.section-hero .ksbam-wave {
  position: absolute;
  bottom: -1px; left: 0;
  z-index: 1;
}

.section-subhero-dynamic {
  position: relative;
  background-color: var(--subhero-base-color, var(--color-weiss));
  min-height: var(--subhero-bg-height, 600px);
  padding-top: calc(var(--nav-top-offset) + var(--nav-height) + 50px);
  padding-bottom: 60px;
  z-index: 1;
}

/* Tabellenuebersichten sollen mobil unabhaengig von der Zeilenzahl mit
   demselben Abstand vor dem Footer enden. Die 900px-Subhero-Mindesthoehe ist
   fuer lange Listen wirkungslos, erzeugt bei kurzen Listen aber Leerraum. Der
   eigentliche Footerabstand bleibt zentral bei .section-last (150px mobil). */
@media (max-width: 767.98px) {
  .section-subhero-dynamic.ksbam-table-page {
    min-height: 0;
    padding-bottom: 1rem !important;
  }
}

/* Vollflächiger, fixierter Hintergrund für den Buchungsprozess (Wizard + Workflow).
   Das background-image bleibt inline (dynamisch via asset()). */
.booking-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
}

/* --- Spezifische Korrekturen für Info-Seiten (Stufen-Modell) --- */

/* 1. Desktop & große Tablets (ab 1025px) */
.ksbam-info-title-box {
  margin-top: -65px; 
  position: relative;
  z-index: 10;
}

/* 2. Tablet Modus (768px bis 1024px) */
@media (max-width: 1024px) {
  .ksbam-subhero-info {
    --subhero-bg-height: 240px !important; /* Etwas flacher als Desktop */
  }
  .ksbam-info-title-box {
    margin-top: -30px; 
  }
}

/* 3. Mobile Modus (bis 767px) */
@media (max-width: 767px) {
  .ksbam-subhero-info {
    --subhero-bg-height: 180px !important; /* Deutlich flacher */
  }
  .ksbam-info-title-box {
    margin-top: -35px; /* Kleiner Versatz */
  }
}


.ksbam-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--subhero-bg-height, 600px);
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
  overflow: hidden; 
}

.ksbam-backdrop .ksbam-wave {
  position: absolute;
  bottom: -1px; left: 0;
  z-index: 1;
}

.section-content {
  position: relative;
  z-index: 20;
  width: 100%;
}

/* Fehlerseiten (403/404/Sammelseite), Markup in partials/_error_page.html.twig.
   Hero mit Statuscode ueber dem Hintergrundbild, die Karte ragt in die Welle. */
.ksbam-error-hero {
  --subhero-bg-height: 460px;
  --subhero-base-color: var(--color-hellsand);
  display: flex;
  align-items: flex-start;
}

/* Flachere Welle als auf den uebrigen Seiten (Standard: 175px): sonst reicht ihr
   Scheitel bis in den Statuscode, der dann auf hellem Grund statt auf dem Bild steht. */
.ksbam-error-hero .ksbam-wave {
  --wave-height: 100px;
}

.ksbam-error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.ksbam-error-icon svg {
  width: 40px;
  height: 40px;
}

.ksbam-error-code {
  margin: 0;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-weiss);
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Zieht die Karte ueber die Wellenkante.
   height:auto hebt das height:100% von .ksbam-card auf: zusammen mit dem negativen
   Margin schrumpft die aufgeloeste Hoehe sonst um genau diesen Betrag und
   overflow:hidden schneidet den unteren Innenabstand ab (Buttons an der Kante).
   position/z-index: .section-subhero-dynamic hat z-index:1, die nachfolgende
   Sektion nur auto — ohne eigenen Wert deckt der Hero-Backdrop den ueberstehenden
   Teil der Karte ab (obere Rundung + Innenabstand fehlen, der Kasten wirkt offen). */
.ksbam-error-card {
  position: relative;
  z-index: 2;
  height: auto;
  margin-top: -3rem;
}

.ksbam-error-card .ksbam-card__body {
  gap: 0.25rem;
}

@media (max-width: 767px) {
  /* Kleinere Navigation und kleinerer Statuscode: das Bild darf flacher ausfallen,
     sonst steht viel leerer Hintergrund zwischen Code und Karte. */
  .ksbam-error-hero {
    --subhero-bg-height: 390px;
  }

  .ksbam-error-hero .ksbam-wave {
    --wave-height: 70px;
  }

  .ksbam-error-card {
    margin-top: -1.5rem;
  }

  .ksbam-error-card .ksbam-card__body {
    padding: 2rem 1.5rem !important;
  }
}

/* =========================================================
   BILD-TRENNER (IMAGE SEPARATOR) - OPTIMIERT
   ========================================================= */

.ksbam-image-separator {
    position: relative;
    width: 100%;
    /* Bild und Wellenfarben standen zuvor inline; es gibt genau einen
       Verwender (landing/home). */
    background-image: url("../images/img/banner_1-e7HPPsS.jpg");
    --wave-top-color: var(--color-hellsand);
    --wave-bottom-color: var(--color-honig);
    --separator-height: 400px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    /* Fallback */
    height: var(--separator-height, 600px); 
    overflow: hidden;
}


.ksbam-separator-wave {
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 2;
}

.ksbam-separator-wave--top { top: -1px; }
.ksbam-separator-wave--bottom { bottom: -1px; }

.ksbam-separator-wave svg {
    display: block;
    width: 100%;
    height: 50px; /* Standardhöhe Desktop */
    transition: height 0.3s ease;
}

.ksbam-separator-wave--top svg { fill: var(--wave-top-color); }
.ksbam-separator-wave--bottom svg { fill: var(--wave-bottom-color); }

@media (max-width: 991px) {
    .ksbam-image-separator {
        background-attachment: scroll;
        min-height: 250px;
    }
    .ksbam-separator-wave svg {
        height: 25px; 
    }
}
/* =========================================================
   8. TOOLTIPS & ANIMATIONS
   ========================================================= */

@media (max-width: 1199px) and (min-width: 768px) {
  .ksbam-nav :is(.nav-link, .ksbam-tablet-tooltip) { position: relative; }
  
  .ksbam-nav :is(.nav-link, .ksbam-tablet-tooltip):hover::after {
    content: attr(aria-label);
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 15px;
    background-color: var(--color-primary); color: var(--color-weiss);
    font-family: var(--font-primary); font-size: 0.85rem; font-weight: 600;
    white-space: nowrap; padding: 6px 12px; border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); z-index: 3000; pointer-events: none;
    animation: fadeInTooltip 0.2s ease-in-out forwards;
  }
  
  .ksbam-nav :is(.nav-link, .ksbam-tablet-tooltip):hover::before {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 5px; 
    border-width: 5px; border-style: solid;
    border-color: transparent transparent var(--color-primary) transparent;
    z-index: 3000; animation: fadeInTooltip 0.2s ease-in-out forwards;
  }
}

@keyframes fadeInTooltip {
  from { opacity: 0; transform: translate(-50%, -5px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* =========================================================
   9. FORMULARE & INPUTS
   ========================================================= */

/* Labels: Immer oberhalb, fett und mit Abstand */
.form-label, 
label {
  display: block;
  width: 100%;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
  white-space: normal; 
  text-align: left;
}

.form-control,
.form-select {
  border-radius: var(--radius-boxed) !important;
  border: 1px solid var(--color-sand) !important;
  background-color: var(--color-weiss);
  font-family: var(--font-primary);
  box-shadow: var(--bs-box-shadow-sm) !important;
  padding: 0.65rem 1rem !important; 
  transition: all 0.2s ease-in-out;
}

.form-control:focus,
.form-select:focus {
  background-color: #ffffff;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1) !important;
  outline: none;
}

/* Schreibgeschützte Felder (z.B. der Slug) */
.form-control:read-only {
  background-color: var(--color-hellsand, #f8f9fa) !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
  cursor: not-allowed;
  opacity: 0.8;
}

/* Große Variante (z.B. für Login/Register) */
.form-control-lg {
  padding: 1rem 1.5rem !important;
  font-size: 1.1rem !important;
}

/* Das Dropdown bekommt exakt dasselbe Padding, plus Platz für den Pfeil */
.form-select-lg {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  padding-left: 1.5rem !important;
  padding-right: 3rem !important; 
  font-size: 1.1rem !important;
}

/* Tom Select / Symfony UX Autocomplete */
.ts-wrapper .ts-control {
  border-radius: var(--radius-boxed) !important;
  border: 1px solid var(--color-sand) !important;
  background-color: var(--color-weiss);
  font-family: var(--font-primary);
  box-shadow: var(--bs-box-shadow-sm) !important;
  padding: 0.65rem 1rem !important; /* Hier auch an Standard angepasst */
}

/* Tom Select LG Variante */
.ts-wrapper.form-control-lg .ts-control {
  padding: 1rem 1.5rem !important;
}

.ts-wrapper.focus .ts-control {
  background-color: #ffffff;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1) !important;
}

.ts-wrapper .ts-control input {
  outline: none !important;
}

/* Input-Gruppen im runden KS:BAM-Formdesign */
.input-group {
  align-items: stretch;
  flex-wrap: nowrap;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-floating,
.input-group > .ts-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .ts-wrapper .ts-control {
  height: 46px;
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .ts-wrapper:not(:last-child) .ts-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .ts-wrapper:not(:first-child) .ts-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .input-group-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1rem;
  border-radius: var(--radius-boxed);
  border: 1px solid var(--color-sand) !important;
  background: var(--color-sand) !important;
  color: var(--color-text) !important;
  font-weight: 600;
  box-shadow: var(--bs-box-shadow-sm);
  white-space: nowrap;
}

.input-group > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: 0;
  min-height: 46px;
  padding: 0 1rem;
  border-radius: var(--radius-boxed);
  box-shadow: var(--bs-box-shadow-sm);
}

.input-group > .input-group-text:not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .btn:not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .input-group-text:not(:last-child) {
  margin-right: -1px;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .btn:not(:last-child) {
  margin-right: -1px;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .ts-wrapper.focus .ts-control {
  z-index: 3;
}

.input-group.input-group-sm > .form-control,
.input-group.input-group-sm > .form-select,
.input-group.input-group-sm > .ts-wrapper .ts-control {
  height: 34px;
  min-height: 34px;
  padding: 0.25rem 0.65rem !important;
  font-size: 0.875rem;
}

.input-group.input-group-sm > .btn,
.input-group.input-group-sm > .input-group-text {
  min-height: 34px;
  padding: 0 0.65rem;
}

/* Quill / Rich-Text-Editor im KS:BAM-Formdesign */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border: 1px solid var(--color-sand) !important;
}

.ql-toolbar.ql-snow {
  border-top-left-radius: var(--radius-boxed);
  border-top-right-radius: var(--radius-boxed);
  border-bottom: none !important;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--bs-box-shadow-sm);
  padding: 0.75rem 1rem !important;
}

.ql-container.ql-snow {
  border-bottom-left-radius: var(--radius-boxed);
  border-bottom-right-radius: var(--radius-boxed);
  background: var(--color-weiss);
  box-shadow: var(--bs-box-shadow-sm);
  min-height: 260px;
}

.ql-editor {
  min-height: 220px;
  padding: 1rem 1.25rem !important;
}

.ql-editor.ql-blank::before {
  left: 1.25rem !important;
  right: 1.25rem !important;
  color: var(--color-dunkelgrau) !important;
  font-style: italic;
}

.ql-snow .ql-stroke {
  stroke: var(--color-text);
}

.ql-snow .ql-fill {
  fill: var(--color-text);
}

.ql-snow .ql-picker {
  color: var(--color-text);
}

.ql-snow .ql-picker-options {
  border: 1px solid var(--color-sand) !important;
  border-radius: 16px;
  box-shadow: var(--bs-box-shadow-sm);
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button:focus,
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-item:hover {
  color: var(--color-primary) !important;
}

.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button:focus .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-item:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: var(--color-primary) !important;
}

.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button:focus .ql-fill,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill,
.ql-toolbar.ql-snow .ql-picker-item:hover .ql-fill,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: var(--color-primary) !important;
}

/* Formular-Sektionen als dezente, runde Inhaltsblöcke */
.ksbam-form-section {
  background: rgba(var(--color-sand-rgb), 0.18);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-boxed);
  padding: 2rem;
}

.ksbam-booking-info-section {
  padding: 2rem !important;
}

.ksbam-form-nav {
  border-color: var(--color-sand) !important;
  /* Zuvor an sieben Stellen inline gesetzt. Ohne !important, damit
     Bootstraps .sticky-top-Regel weiterhin die Grundlage bildet — app.css
     lädt später und gewinnt bei gleicher Spezifität. */
  top: 180px;
  z-index: 100;
}

.ksbam-category-choice-label {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
}

.ksbam-category-choice-label .text-muted {
  color: rgba(255, 255, 255, 0.82) !important;
}

.ksbam-booking-status-legend__item {
  min-height: 100px;
}

@media (min-width: 1200px) {
  .ksbam-booking-status-legend__separator {
    border-right: 2px solid var(--bs-border-color);
  }
}

.ksbam-cost-hint {
  color: var(--color-primary) !important;
  cursor: help;
}

.ksbam-kubis-result-field {
  border-color: rgba(138, 178, 157, 0.8) !important;
  box-shadow: 0 0 0 4px rgba(138, 178, 157, 0.12), var(--bs-box-shadow-sm) !important;
  background-color: rgba(138, 178, 157, 0.08) !important;
}

label.required::after,
legend.required::after {
  content: "*";
  display: inline-block;
  margin-left: 0.3rem;
  color: var(--color-beere);
  font-weight: 700;
}

/* Medien-Uploads in Projektformularen */
.ksbam-media-upload {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100%;
}

.ksbam-media-preview {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-boxed);
  background: rgba(var(--color-sand-rgb), 0.2);
  box-shadow: var(--bs-box-shadow-sm);
}

.ksbam-media-preview__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mülleimer an einer Bild-/Dateivorschau (11.08.2026).
   Beere ist projektweit die Löschfarbe (Delete-Buttons, Modal-Header); der weiße
   Ring setzt den Knopf gegen beliebige Bildinhalte ab. */
.ksbam-media-remove-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.ksbam-media-remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-beere);
  color: var(--color-weiss);
  box-shadow: 0 0 0 3px var(--color-weiss), var(--bs-box-shadow-sm);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.ksbam-media-remove svg {
  width: 1.15rem;
  height: 1.15rem;
}

.ksbam-media-remove:hover,
.ksbam-media-remove:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-weiss);
  transform: scale(1.08);
}

/* Am runden Profilbild muss der Knopf nach innen rücken – außen an der Ecke
   stünde er neben dem Kreis in der Luft.

   Die Breite wiederholt die von .ksbam-form-preview-img-round: Das Bild darin
   rechnet seine 100 % gegen den Wrapper, der ohne eigenes Maß die volle
   Spaltenbreite einnähme – der Knopf säße dann weit rechts neben dem Kreis. */
.ksbam-media-remove-wrap--round {
  width: min(100%, 200px);
}

.ksbam-media-remove-wrap--round .ksbam-media-remove {
  top: auto;
  right: 6%;
  bottom: 6%;
}

/* Das Projektdokument hat keine Bildvorschau, auf der ein Overlay sitzen könnte:
   Dort steht der Knopf am Ende der Dateizeile. */
.ksbam-media-remove--inline {
  position: static;
  flex-shrink: 0;
  box-shadow: var(--bs-box-shadow-sm);
}

.ksbam-media-file {
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-boxed);
  background: rgba(var(--color-sand-rgb), 0.2);
  padding: 0.5rem 0.65rem;
}

.ksbam-media-upload--document .vich-file,
.ksbam-media-upload--document .mb-3 {
  margin-bottom: 0 !important;
}

.ksbam-media-upload--document .form-check {
  margin-top: 0.75rem;
}

.ksbam-media-upload--document .form-check-input {
  margin-top: 0.2rem;
}

.ksbam-media-upload--document .form-check-label,
.ksbam-media-upload--document .form-label {
  font-weight: 600;
}

.ksbam-media-upload--document input[type="file"] {
  width: 100%;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-boxed);
  background: rgba(var(--color-sand-rgb), 0.2);
  box-shadow: var(--bs-box-shadow-sm);
  padding: 0.35rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ksbam-media-upload--document input[type="file"]:focus,
.ksbam-media-upload--document input[type="file"]:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1), var(--bs-box-shadow-sm);
  outline: none;
}

.ksbam-media-upload--document input[type="file"]::file-selector-button {
  margin-right: 1rem;
  border: 0;
  border-radius: calc(var(--radius-boxed) - 10px);
  background-color: var(--bg-color, var(--color-primary)) !important;
  color: var(--color-weiss) !important;
  padding: 0.7rem 1.15rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ksbam-media-upload--document input[type="file"]:hover::file-selector-button {
  background-color: var(--color-sand) !important;
  color: var(--color-text) !important;
}

.ksbam-media-upload--document input[type="file"]::-webkit-file-upload-button {
  margin-right: 1rem;
  border: 0;
  border-radius: calc(var(--radius-boxed) - 10px);
  background-color: var(--bg-color, var(--color-primary)) !important;
  color: var(--color-weiss) !important;
  padding: 0.7rem 1.15rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ksbam-media-upload--document input[type="file"]:hover::-webkit-file-upload-button {
  background-color: var(--color-sand) !important;
  color: var(--color-text) !important;
}

@media (max-width: 767.98px) {
  .ksbam-media-preview {
    width: 100%;
  }
}

/* Read-only Inhalte in Formularsektionen */
.ksbam-readonly-grid {
  align-items: stretch;
}

.ksbam-readonly-block {
  height: 100%;
  padding: 0.5rem 0 1.75rem;
}

.ksbam-readonly-block h5 {
  margin-bottom: 1.25rem !important;
}

.ksbam-readonly-block .row:last-child,
.ksbam-readonly-block p:last-child {
  margin-bottom: 0;
}

.ksbam-readonly-block .badge {
  margin-top: 0.15rem;
}

.ksbam-readonly-grid + .text-muted.small {
  margin-top: 1rem !important;
}

@media (min-width: 1200px) {
  .ksbam-readonly-grid > [class*="col-"]:first-child .ksbam-readonly-block {
    padding-right: 2rem;
    border-right: 1px solid rgba(var(--color-sand-rgb), 0.9);
  }

  .ksbam-readonly-grid > [class*="col-"]:last-child .ksbam-readonly-block {
    padding-left: 2rem;
  }
}

/* 4. Fehlermeldungen & Checkboxen */
.alert {
  border-radius: var(--radius-boxed) !important;
}

.invalid-feedback {
  border-radius: var(--radius-boxed);
  font-weight: 600;
  margin-top: 0.5rem;
  padding: 0.75rem;
}

.form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.125em;
    cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Schalter „… öffentlich anzeigen" neben dem zugehoerigen Feld.
   Symfony rendert das Widget mit einem eigenen inneren <div class="form-check">
   (bootstrap_5_layout.html.twig) — .ksbam-field-switch ist nur die aeussere
   Huelle. Bootstrap rueckt beide Ebenen ein (.form-switch padding-left 2.5em
   aussen, .form-check padding-left 1.5em innen) und zieht den Input mit einem
   negativen margin wieder heraus. Gemessen sass der Switch dadurch 27px (Desktop)
   bzw. 24px (mobil) vom linken Rand entfernt statt buendig unter dem Feld
   darueber. Beide Einrueckungen werden aufgehoben; Switch und Beschriftung
   stehen als Flex-Zeile nebeneinander — dasselbe Muster wie bei
   .ksbam-form-switch--flush weiter unten. */
.ksbam-field-switch {
  min-height: 46px;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
}

.ksbam-field-switch > .form-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding-left: 0;
  min-width: 0;
}

.ksbam-field-switch .form-check-input {
  flex-shrink: 0;
  margin-top: 0;
  margin-left: 0;
}

/* Lange Beschriftungen duerfen umbrechen, statt den Switch aus dem Container
   zu schieben. */
.ksbam-field-switch .form-check-label {
  min-width: 0;
  white-space: normal;
}

.ksbam-register-phone-switch {
  min-height: calc(1.5em + 2rem + 2px);
  margin-top: 2rem;
}

@media (max-width: 767.98px) {
  .ksbam-field-row {
    --bs-gutter-y: 0.75rem;
  }

  .ksbam-field-row.mb-2 {
    margin-bottom: 1rem !important;
  }

  .ksbam-field-row > [class*="col-"]:first-child > .mb-3 {
    margin-bottom: 0 !important;
  }

  /* Ausrichtung, Umbruch und Abstand des Switches gelten inzwischen fuer alle
     Breiten (siehe .ksbam-field-switch oben). Mobil faellt nur die
     Mindesthoehe weg — die Zeile steht dort allein und braucht die 46px
     Feldhoehe des Desktop-Rasters nicht. */
  .ksbam-field-switch {
    min-height: auto;
    margin: 0;
  }

  .ksbam-register-phone-switch {
    min-height: auto;
    margin-top: 0;
  }
}

.ksbam-form-switch--flush {
  padding-left: 0;
}

.ksbam-booking-confirmation {
  text-align: left;
}

.ksbam-booking-confirmation__field > .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding-left: 0;
}

.ksbam-booking-confirmation__field .form-check-input {
  flex-shrink: 0;
  margin: 0.2rem 0 0 !important;
}

.ksbam-booking-confirmation__field .form-check-label {
  line-height: 1.45;
  text-align: left;
}

.ksbam-booking-confirmation .invalid-feedback,
.ksbam-booking-confirmation .form-error-message {
  margin-top: 0.65rem;
}

.ksbam-form-switch--flush > .form-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding-left: 0;
}

.ksbam-form-switch--flush > .form-check > .form-check-input {
  flex-shrink: 0;
  margin-top: 0;
  margin-left: 0;
}

/* Umbrechen statt ueberlaufen: siehe .ksbam-field-switch weiter oben. Der
   Switch selbst schrumpft dabei nicht (flex-shrink: 0). */
.ksbam-form-switch--flush > .form-check > .form-check-label {
  white-space: normal;
  min-width: 0;
}

/* =========================================================
   9b. MOBILE KOMPAKTIERUNG (Container, Felder, Tap-Targets)
   =========================================================
   Von 390px Viewportbreite blieben zuvor nur 304px nutzbar — 22% gingen fuer
   gestapeltes Padding drauf. Dieser Block reduziert die Innenabstaende der
   Karten- und Formularhuellen sowie die Feldhoehen.

   Bindende Randbedingung: keine font-size unter 16px. iOS Safari zoomt beim
   Fokussieren kleinerer Felder hinein und zoomt nicht zurueck. Hoehe und
   Padding duerfen schrumpfen, die Schriftgroesse nicht.

   Abgrenzung: alle Selektoren haengen an projekteigenen Karten-Klassen.
   Ein nacktes .p-4 { padding: 16px !important } wuerde quer durch die App
   schlagen, auch in die Kulturpartner-Kacheln (.kp-card). */

@media (max-width: 767px) {
    /* --- Karten- und Sektionshuellen --- */
    .ksbam-card__body,
    .ksbam-card-head__body,
    .ksbam-card-img__body {
        padding: 16px;
    }

    /* Bootstrap-Utilities, die rund 60 Templates auf denselben Karten-Bodies
       mitbringen. Nur im Kartenkontext normalisiert, nie global.
       .ksbam-card-blur steht mit in der Liste: einige Karten (z. B. die
       Rollen-Kacheln der Registrierung) tragen das Padding an der Karte selbst
       statt an einem __body-Kind — mobil kosteten die 48px des p-5 dort die
       halbe nutzbare Breite. */
    :is(.ksbam-card__body, .ksbam-card-head__body, .ksbam-card-img__body, .ksbam-card-blur):is(.p-4, .p-5, .p-md-5, .p-lg-5) {
        padding: 16px !important;
    }

    .ksbam-form-section {
        padding: 1rem;
    }

    .ksbam-booking-info-section {
        padding: 1rem !important;
    }

    /* --- Formularfelder: flacher, aber nicht kleiner geschrieben --- */
    .form-control,
    .form-select,
    .ts-wrapper .ts-control {
        padding: 0.45rem 0.85rem !important;
    }

    .form-control-lg {
        padding: 0.6rem 1rem !important;
    }

    .ts-wrapper.form-control-lg .ts-control {
        padding: 0.6rem 1rem !important;
    }

    /* Beim Select bleibt rechts Platz fuer den Pfeil. */
    .form-select-lg {
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
        padding-left: 1rem !important;
        padding-right: 3rem !important;
    }

    /* --- iOS-Zoom: die Feldtypen unter 16px --- */
    .form-control-sm,
    .form-select-sm,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select {
        font-size: 1rem !important;
    }

    .fixed-table-toolbar .search input {
        font-size: 1rem;
    }

    .toolbar-filter-group .ts-wrapper .ts-control {
        font-size: 1rem;
    }

    /* --- Tap-Targets: 44px Mindesthoehe --- */
    .footer-nav-link {
        min-height: 44px;
    }

    .ksbam-back-button-wrapper > a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* .align-baseline steht an den wenigen .btn-link im Fliesstext; dort wuerde
       eine Mindesthoehe die Zeile aufblaehen. */
    .btn.btn-link:not(.align-baseline) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Die Mindestmasse vergroessern die Box; ohne inline-flex bliebe der
       Inhalt auf der Grundlinie sitzen (gemessen: Icon 9px oben, 17px unten).
       Gilt fuer alle Tabellen-Aktionen, auch die ohne Card-View
       (Einstellungen, Tag-Pool). */
    .btn-group-sm > .btn,
    .btn-group-sm > .btn.btn-custom {
        min-height: 40px;
        min-width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* =========================================================
   Formular ScrollSpy Slider
   ========================================================= */

#form-navigation,
[data-scrollspy-nav] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#form-navigation .list-group-item,
[data-scrollspy-nav] .list-group-item {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: var(--color-text);
    opacity: 0.8;
    padding: 0;
}

#form-navigation .list-group-item.active,
[data-scrollspy-nav] .list-group-item.active {
    opacity: 1;
    color: var(--color-primary) !important;
    transform: scale(1.3);
    background: transparent !important;
}

/* Hover Status */
#form-navigation .list-group-item:hover,
[data-scrollspy-nav] .list-group-item:hover {
    transform: scale(1.1);
}

/* Das wichtigste für Smooth Scroll und Highlight */
html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 140px;
}

/* Rücksprung an den Listenanfang (assets/controllers/shared-scroll-restore_controller.js).
   Der Offset rechnet die Höhe des fixierten .ksbam-header aus den Nav-Variablen und stimmt
   damit auf dem Handy (Ziel bei 110px) genauso wie auf Tablet/Desktop (150px). Gleiches
   Muster wie .ksbam-scope-portal-setting-index weiter unten. */
[data-controller~="shared-scroll-restore"] {
    scroll-margin-top: calc(var(--nav-top-offset) + var(--nav-height) + 40px);
}

/* =========================================================
   10. CMS / RICH-TEXT STYLES
   ========================================================= */

.cms-content {
  line-height: 1.5;
  color: var(--color-text);
  font-size: 1rem;
}

/* Überschriften: Deutlich kompaktere Abstände */
.cms-content h2, 
.cms-content h3 {
  color: var(--color-primary);
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

/* Absätze: Straffere Führung */
.cms-content p {
  margin-top: 0;          /* Verhindert doppelte Abstände */
  margin-bottom: 0.75rem; /* Kompakterer vertikaler Rhythmus */
}

.cms-content p:has(> br:only-child) {
  display: none;
}

/* Listen: Ebenfalls enger zusammenrücken */
.cms-content ul, 
.cms-content ol {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}

.cms-content li {
  margin-bottom: 0.2rem;
}

/* Letztes Element im Content braucht keinen Abstand nach unten */
.cms-content > *:last-child {
  margin-bottom: 0 !important;
}

/* Bilder: Kompakter margin */
.cms-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-boxed);
  margin: 0.75rem 0;
  box-shadow: var(--div-shadow);
}

/* =========================================================
   11. TOASTS & NOTIFICATIONS
   ========================================================= */

.toast-container {
  /* Abstand vom oberen Rand wegen der fixierten Nav */
  top: calc(var(--nav-top-offset) + var(--nav-height) + 20px) !important;
  right: 5% !important;
  z-index: 3000 !important;
}

/* Stapel-Abstand zwischen mehreren Toasts */
.toast-container > :not(:last-child) {
  margin-bottom: 12px;
}

.toast {
  background: var(--color-weiss) !important;
  border: none !important;
  border-radius: var(--radius-boxed) !important;
  box-shadow: var(--div-shadow) !important;
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  overflow: hidden;
  width: 350px;
  /* Sanftes Ein- und Ausblenden. Beide Properties bewusst gleich lang:
     Bootstrap liest für seinen transitionend-Fallback nur den ersten Wert aus
     transition-duration und setzt danach display:none – bei ungleichen Dauern
     würde die Bewegung mittendrin abgeschnitten. */
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Zustände für die Animation.
   Bootstrap setzt .showing beim Ein- UND beim Ausblenden, jeweils zusätzlich
   zu .show. Die Regel muss deshalb spezifischer sein als .toast.show – sonst
   gewinnt beim Ausblenden opacity:1 und der Toast verschwindet übergangslos. */
.toast.showing,
.toast.show.showing {
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
}

.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Header-Bereich des Toasts */
.toast-header {
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  padding: 12px 20px !important;
  background-color: transparent !important;
  color: var(--color-text) !important;
  display: flex;
  align-items: center;
}

.toast-header strong {
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
}

/* Body-Bereich */
.toast-body {
  padding: 15px 20px !important;
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--color-text) !important;
}

/* Farbindikatoren (linker Streifen) */
.toast {
  position: relative;
  border-left: 6px solid var(--toast-color, var(--color-primary)) !important;
}

/* Mapping auf deine Farb-Variablen */
.toast.text-bg-success,
.toast.text-bg-salbei { --toast-color: var(--color-salbei); }
/* Auch der Fehler-Toast bleibt weiß mit farbigem Streifen: .toast-header und
   .toast-body erzwingen ohnehin color:var(--color-text) !important, eine
   Beere-Fläche hätte hier also dunkle Schrift und ein unsichtbares Icon. */
.toast.text-bg-beere   { --toast-color: var(--color-beere); }
.toast.text-bg-warning { --toast-color: var(--color-mango); }
.toast.text-bg-info    { --toast-color: var(--color-secondary); }

/* Close-Button Styling */
.toast .btn-close {
  margin-left: auto;
  filter: brightness(0.2); /* Dunkler Button auf weißem Grund */
  opacity: 0.5;
  transition: opacity 0.2s;
}

.toast .btn-close:hover {
  opacity: 1;
}

/* Ablauf-Fortschrittsbalken am unteren Rand.
   Läuft in der jeweiligen Typ-Farbe (wie der linke Streifen) synchron zur
   Autohide-Dauer von links nach rechts. Dauer wird per --toast-progress-duration
   vom Stimulus-Controller aus dem Bootstrap-Delay gesetzt. Der Toast hat bereits
   overflow:hidden, daher wird der Balken an den runden Ecken beschnitten. */
.toast-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background-color: var(--toast-color, var(--color-primary));
  transform: scaleX(1);
  transform-origin: left center;
}

/* Animation läuft einmalig durch. Gestartet wird sie vom Stimulus-Controller
   per .is-running erst beim shown.bs.toast-Event – exakt dann, wenn auch
   Bootstraps Autohide-Timer beginnt (nach der Einblend-Transition). */
.toast-progress.is-running {
  animation: toast-progress var(--toast-progress-duration, 7500ms) linear forwards;
}

/* Pause bei Hover/Fokus – synchron zu Bootstraps pausiertem Autohide-Timer.
   Den Neustart nach dem Verlassen übernimmt der Stimulus-Controller. */
.toast:hover .toast-progress,
.toast:focus-within .toast-progress {
  animation-play-state: paused;
}

@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Kein laufender Balken und keine Bewegung bei reduzierter Bewegung.
   transition:none lässt Bootstraps Callback sofort greifen – der Toast
   erscheint und verschwindet dann ohne Übergang. */
@media (prefers-reduced-motion: reduce) {
  .toast-progress {
    display: none;
  }

  .toast {
    transition: none;
  }

  .toast.showing,
  .toast.show.showing {
    transform: none;
  }
}

/* Mobil-/Tablet-Anpassung: Toast ueber die volle Viewport-Breite abzueglich
   eines schmalen Rands. Gilt bis unter den lg-Breakpoint (< 992px), deckt also
   Handy und Tablet ab. Zuvor begrenzten left/right je 25% die Breite auf
   50vw — auf dem Handy blieben davon nur ~195px, in denen der Meldungstext
   mehrzeilig umbrach. */
@media (max-width: 991.98px) {
  .toast-container {
    top: calc(var(--nav-top-offset) + var(--nav-height) + 75px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1900 !important;
  }

  .toast {
    width: 100%;
    border-radius: var(--radius-boxed); /* Nutzt deine zentrale Variable */
  }
}

/* =========================================================
   11. PROFILE & SMALL UTILITIES
   ========================================================= */

.transition-all {
    transition: all 0.3s ease;
}

/* =========================================================
   12. Projekt / Angebot & Sidebar
   ========================================================= */

/* Sidebar Icon-Kreise (Absolut stabil gegen Verzerrung) */
.ksbam-sidebar-info-list .icon-circle {
    width: 48px;
    height: 48px;
    min-width: 48px; 
    min-height: 48px;
    background: white;
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.ksbam-sidebar-info-list .icon-circle svg {
    width: 24px;
    height: 24px;
}

/* Quill liefert seinen Inhalt in <p>-Absätzen; deren margin-bottom erzeugte in
   den Eckdaten eine Leerzeile zum nächsten Eintrag (Rückmeldung KS:BAM
   07.08.2026, „Ort"/„Kosten" auf der öffentlichen Projektseite). Die Regel ist
   in allen vier Projektansichten identisch und steht deshalb global. */
.ksbam-sidebar-info-list .ksbam-richtext > *:last-child {
    margin-bottom: 0;
}

/* Sidebar Info-Items & Text-Styling */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sidebar-item small {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    opacity: 0.8;
    margin-bottom: 2px;
}

.sidebar-item span {
    line-height: 1.2;
    display: block;
    font-weight: 700;
}

.sidebar-item > div:last-child {
    min-width: 0;
}

.sidebar-item a,
.sidebar-item span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Spezielle Box für Lehrplanbezug */
.bg-salbei.rounded-4 {
    border-left: 5px solid var(--color-primary);
    padding: 1.5rem;
}

/* =========================================================
   13. Backend Kulturpartner & Navigation
   ========================================================= */

/* --- 13.1 Profilbilder & Avatare (Ohne Rahmen) --- */

/* Der kleine Avatar in der Top-Nav */
.ksbam-avatar-frame {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: transparent; 
    border: none;          
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.ksbam-avatar-frame:hover {
    transform: scale(1.1);
}

/* WICHTIG: Das sorgt dafür, dass das Gesicht mittig bleibt und alles ausfüllt */
.ksbam-avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Das große runde Profilbild im Steckbrief */
.ksbam-card__img-round {
    width: 280px !important;
    height: 280px !important;
    object-fit: cover;
    border-radius: 50% !important;
    border: none;
    box-shadow: none;
}

/* Kleines rundes Vorschaubild in Upload-Formularen */
.ksbam-form-preview-img-round {
    width: min(100%, 200px);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: none;
    box-shadow: none;
}

/* Der Platzhalter (Icon statt Foto) ist selbst rund. Ohne eigenen Radius bliebe
   er ein Rechteck, das erst .ksbam-avatar-frame per overflow:hidden kreisrund
   beschneidet — der 1px-Rand der KS:BAM-Variante wurde dabei angeschnitten und
   blieb nur als ausgefranste Fragmente stehen (wirkte unscharf/verpixelt). */
.ksbam-avatar-fallback {
    font-size: 1.2rem;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* --- 13.2 Dropdown & Navigation --- */

.no-caret::after {
    display: none !important;
}

.dropdown-menu {
    min-width: 240px;
    border: 1px solid var(--color-sand) !important;
    border-radius: var(--radius-boxed) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    padding: 0.5rem;
}

.dropdown-item {
    color: var(--color-text);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.dropdown-item:hover {
    background-color: var(--color-hellsand);
    color: var(--color-primary) !important;
    padding-left: 1.25rem;
}

.dropdown-item.text-beere:hover {
    background-color: #fff0f0; 
    color: var(--color-beere) !important;
}

/* --- 13.3 Tooltips & Mobile --- */

.ksbam-custom-tooltip .tooltip-inner {
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.8rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.ksbam-custom-tooltip.bs-tooltip-top .tooltip-arrow::before,
.ksbam-custom-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--color-primary);
}
.ksbam-custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.ksbam-custom-tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--color-primary);
}
.ksbam-custom-tooltip.bs-tooltip-start .tooltip-arrow::before,
.ksbam-custom-tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--color-primary);
}
.ksbam-custom-tooltip.bs-tooltip-end .tooltip-arrow::before,
.ksbam-custom-tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--color-primary);
}

@media (max-width: 767px) {
    .ksbam-nav-mobile-container .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px;
        font-weight: 600;
    }
}

/* --- 13.4 Steckbrief Text-Flow & Editor-Fixes --- */

/* Collapse & Animationen */
.ksbam-steckbrief-wrapper .collapse.show,
#collapseSteckbrief.collapsing {
    display: inline !important;
}

#collapseSteckbrief.collapsing {
    transition: opacity 0.3s ease;
    opacity: 0;
}

#collapseSteckbrief.show {
    animation: fadeInText 0.4s ease forwards;
}

@keyframes fadeInText {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Links & Buttons */
.ksbam-steckbrief-wrapper .btn-link,
#steckbrief-full-container .btn-link {
    vertical-align: baseline;
    text-decoration: none;
    font-weight: bold;
}

#steckbrief-full-container .btn-link {
    margin-top: 0.25rem;
    display: inline-block;
}


/* --- 13.5 Status-Karten (Toast-Look) --- */

.ksbam-card-status {
    position: relative;
    /* Der magische Teil: Die Border übernimmt die Farbe der Klasse "text-..." */
    border-left: 6px solid currentColor !important;
    
    /* Etwas mehr Abstand links, damit der Text nicht am Strich klebt */
    padding-left: 1.5rem !important;
    
    /* Falls die Card-Blur noch kein Overflow-Hidden hat, hier sicherstellen 
       damit der Strich oben/unten sauber mit den Rundungen abschließt */
    overflow: hidden;
}

/* =========================================================
   14.x Klassen-Tabelle: Hervorhebung "meine Klasse"
   ========================================================= */

/* Markiert in der Klassenliste die Zeilen, in denen der eingeloggte PFK
   selbst als verantwortliche Fachkraft eingetragen ist. Linker farbiger
   Akzent + leicht getönter Hintergrund, damit die eigenen Klassen auf
   einen Blick erkennbar sind, ohne die Tabelle visuell zu zerreissen. */
#tbl_klassen tbody tr.klasse-row--meine > td:first-child {
    box-shadow: inset 4px 0 0 0 var(--color-primary);
}

#tbl_klassen tbody tr.klasse-row--meine > td {
    background-color: rgba(var(--color-primary-rgb), 0.04);
}

/* =========================================================
   14.x Einrichtungen-Tabelle: Hervorhebung "meine Einrichtung"
   ========================================================= */

#tbl_einrichtung tbody tr.einrichtung-row--meine > td:first-child {
    box-shadow: inset 4px 0 0 0 var(--color-primary);
}

#tbl_einrichtung tbody tr.einrichtung-row--meine > td {
    background-color: rgba(var(--color-primary-rgb), 0.04);
}

/* =========================================================
   15. Sienna Accessibility Widget – Farb-/Größen-Override
   ========================================================= */

/* Toggle-Button: Primary statt Standard-Blau
   (Sienna injiziert sein Stylesheet zur Laufzeit nach app.css und hardcodet
   einen Gradient mit !important — daher höhere Spezifität via doppelter
   Klasse nötig, damit unser Override später bzw. spezifischer greift.) */
.asw-menu-btn.asw-menu-btn {
    background: var(--color-primary) !important;
    background-image: none !important;
    outline-color: var(--color-primary) !important;
}

/* Größe des Toggles (Auslieferung: 58x58 mit 36px-Icon, mobil 42/26) auf
   30x30 reduzieren. Bewusst hier statt in assets/vendor/scysys/, damit ein
   Update des Widgets die Anpassung nicht überschreibt.
   Das Icon skaliert mit (18px hält das Verhältnis Icon:Button der Auslieferung);
   Sienna friert es über min-/max-width fest, die deshalb mit überschrieben
   werden müssen. Die weiße Border geht von 3px auf 2px zurück, sonst frisst
   sie bei 30px zwei Drittel der Innenfläche. */
.asw-menu-btn.asw-menu-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-width: 2px !important;
}

.asw-menu-btn.asw-menu-btn svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
}

.asw-btn:hover {
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.12) !important;
    border-color: var(--color-primary) !important;
}

.asw-btn.asw-selected {
    border-color: var(--color-primary) !important;
    background: rgba(var(--color-primary-rgb), 0.06) !important;
}

.asw-btn.asw-selected svg,
.asw-btn.asw-selected span {
    fill: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* Wobble-Effekt, wenn der „fortführen"-Button live freigeschaltet wird
   (ksbam-buchung-step-proceed-Controller). */
@keyframes ksbam-wobble {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-12px) rotate(-4deg); }
    30%  { transform: translateX(9px) rotate(3deg); }
    45%  { transform: translateX(-7px) rotate(-2.5deg); }
    60%  { transform: translateX(5px) rotate(1.5deg); }
    75%  { transform: translateX(-3px) rotate(-1deg); }
    100% { transform: translateX(0); }
}

.ksbam-wobble {
    animation: ksbam-wobble 0.9s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .ksbam-wobble {
        animation: none;
    }
}

/* =========================================================
   16. AUSGELAGERTE SEITEN-/KOMPONENTEN-STYLES
   -------------------------------------------------------------------
   Zuvor als <style> im {% block stylesheets %} bzw. inline in einzelnen
   Templates. Hierher zusammengeführt.
   - 16.0  Global geteilte Utilities (über mehrere Seiten identisch).
   - 16.1+ Seitenspezifische Blöcke, gescopt über eine Klasse auf <body>
           (.ksbam-scope-<seite>, gesetzt via {% block body_class %}).
           Nötig, weil dieselben Klassen (z. B. .ksbam-teaser-info) pro
           Seite bewusst leicht abweichen — globales Zusammenlegen würde
           das Layout einzelner Seiten verändern.
   ========================================================= */

/* --- 16.0 Global: Scrollspy-Sprungmarken der Formularseiten --- */
/* Anker-Sprung und Scrollspy-Offset müssen zur Höhe der fixierten Top-Nav passen.
   Höhere Spezifität als section[id] (140px) → 180px gewinnt. */
#sec-organisation,
#sec-kontakt,
#sec-adresse,
#sec-profil,
#sec-dokumente,
#sec-person,
#sec-erreichbarkeit,
#sec-allgemein,
#sec-zeiten,
#sec-beschreibung,
#sec-kategorie,
#sec-kosten,
#sec-notizen,
#sec-kommentar,
#sec-fuehrungszeugnis,
#sec-rahmenvertrag {
    scroll-margin-top: 180px;
}

/* --- 16.0 Global: Status-Indikator (Projekt-/KP-Übersichten) --- */
.ksbam-status-indicator {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid transparent;
    box-shadow: 0 6px 16px rgba(49, 39, 31, 0.12);
    cursor: help;
    transition: box-shadow 0.18s ease, filter 0.18s ease;
}

.ksbam-status-indicator:hover,
.ksbam-status-indicator:focus {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    filter: brightness(0.95) saturate(1.1);
}

.ksbam-status-indicator.is-freigegeben {
    background: linear-gradient(135deg, rgba(138, 178, 157, 0.2), rgba(138, 178, 157, 0.35));
    color: #6f9d84;
    border-color: rgba(138, 178, 157, 0.35);
}

.ksbam-status-indicator.is-offen {
    background: linear-gradient(135deg, rgba(173, 31, 100, 0.14), rgba(173, 31, 100, 0.26));
    color: #ad1f64;
    border-color: rgba(173, 31, 100, 0.24);
}

.ksbam-status-indicator.is-noch-nicht-gueltig {
    background: linear-gradient(135deg, rgba(165, 152, 169, 0.2), rgba(165, 152, 169, 0.34));
    color: #6f6474;
    border-color: rgba(165, 152, 169, 0.34);
}

.ksbam-status-indicator.is-abgelaufen {
    background: linear-gradient(135deg, rgba(175, 172, 172, 0.2), rgba(175, 172, 172, 0.34));
    color: #6f6c6c;
    border-color: rgba(175, 172, 172, 0.34);
}

.ksbam-status-indicator.is-categories {
    background: linear-gradient(135deg, rgba(84, 107, 122, 0.14), rgba(84, 107, 122, 0.28));
    color: var(--color-secondary);
    border-color: rgba(84, 107, 122, 0.26);
}

/* --- 16.0 Global: Status-/Kategorie-Popover (Bootstrap hängt es an <body>) --- */
.popover.ksbam-status-popover {
    --bs-popover-bg: var(--color-hellsand);
    --bs-popover-border-color: rgba(217, 190, 162, 0.72);
    --bs-popover-header-bg: transparent;
    --bs-popover-body-color: var(--color-text);
    --bs-popover-max-width: 320px;
    border-radius: 30px !important;
    background: var(--color-hellsand) !important;
    border-color: rgba(217, 190, 162, 0.72) !important;
    box-shadow: 0 18px 40px rgba(68, 48, 33, 0.2);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    overflow: hidden;
}

.popover.ksbam-status-popover,
.popover.ksbam-status-popover .popover-body,
.popover.ksbam-status-popover .popover-body > :first-child,
.popover.ksbam-status-popover .popover-body > :last-child {
    border-radius: 30px;
}

.popover.ksbam-status-popover .popover-body {
    background: var(--color-hellsand) !important;
}

.popover.ksbam-status-popover.bs-popover-top > .popover-arrow::after,
.popover.ksbam-status-popover.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
    border-top-color: var(--color-hellsand) !important;
}

.popover.ksbam-status-popover.bs-popover-bottom > .popover-arrow::after,
.popover.ksbam-status-popover.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
    border-bottom-color: var(--color-hellsand) !important;
}

.popover.ksbam-status-popover.bs-popover-start > .popover-arrow::after,
.popover.ksbam-status-popover.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
    border-left-color: var(--color-hellsand) !important;
}

.popover.ksbam-status-popover.bs-popover-end > .popover-arrow::after,
.popover.ksbam-status-popover.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
    border-right-color: var(--color-hellsand) !important;
}

.ksbam-status-popover .popover-body {
    padding: 1rem 1rem 0.9rem;
}

.ksbam-status-popover__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(32, 26, 23, 0.62);
    margin-bottom: 0.75rem;
}

.ksbam-status-popover__table {
    display: grid;
    gap: 0.45rem;
}

.ksbam-status-popover__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0.65rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(217, 190, 162, 0.28);
}

.ksbam-status-popover__label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    font-weight: 600;
    min-width: 0;
}

.ksbam-status-popover__label span {
    overflow-wrap: anywhere;
}

.ksbam-status-popover__value {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.ksbam-status-popover__value.is-ok {
    background: rgba(138, 178, 157, 0.16);
    color: #6f9d84;
}

.ksbam-status-popover__value.is-missing {
    background: rgba(173, 31, 100, 0.12);
    color: #ad1f64;
}

.ksbam-status-popover__value.is-optional {
    background: rgba(140, 140, 140, 0.16);
    color: #6b7280;
}

.ksbam-status-popover__label svg,
.ksbam-status-popover__value svg {
    display: block;
    width: 14px;
    height: 14px;
    overflow: visible;
    flex-shrink: 0;
}

.ksbam-category-popover__section + .ksbam-category-popover__section {
    margin-top: 0.9rem;
}

.ksbam-category-popover__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* --- 16.0 Global: Timeline (Buchungs-Detailseiten) --- */
.ksbam-timeline {
    position: relative;
    padding-left: 1rem;
}

.ksbam-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: -16px;
    width: 2px;
    background-color: rgba(210, 183, 154, 0.45);
    z-index: 1;
}

.ksbam-timeline-item:last-child {
    padding-bottom: 0 !important;
}

/* --- 16.0 Global: Buchungs-Wizard-Box --- */
.ksbam-booking-wizard-box {
    border-radius: var(--radius-boxed) !important;
}

.ksbam-workflow-step-mobile__toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-boxed);
}

.ksbam-workflow-step-mobile__toggle > span {
    flex: 1 1 auto;
}

.ksbam-workflow-step-mobile .min-w-0 {
    min-width: 0;
}

.ksbam-workflow-step-mobile__toggle::after {
    margin-left: auto;
}

.ksbam-workflow-step-mobile__menu {
    border: 0;
    border-radius: var(--radius-boxed);
}

.ksbam-workflow-step-mobile__menu .dropdown-item.active,
.ksbam-workflow-step-mobile__menu .dropdown-item:active {
    background-color: var(--color-primary);
    color: var(--color-weiss);
}

.ksbam-workflow-step-mobile__menu .dropdown-item.disabled {
    opacity: 0.58;
}

/* Buchungs-Wizard: mobil führt die Seite erst durch Kontext und Beschreibung,
   danach folgen Rückweg und die klar gruppierten Formularaktionen. */
@media (max-width: 767.98px) {
    .ksbam-booking-wizard-page {
        padding-top: 1.5rem !important;
    }

    .einr-booking-wizard-heading-layout {
        display: flex;
        flex-direction: column;
    }

    .einr-booking-wizard-heading {
        display: contents !important;
    }

    .einr-booking-wizard-heading__copy {
        display: contents;
    }

    .einr-booking-wizard-heading__step {
        align-self: flex-start;
        order: 1;
    }

    .einr-booking-wizard-heading__title {
        order: 2;
        margin-bottom: 1rem !important;
    }

    .einr-booking-wizard-heading__metrics {
        margin-bottom: 1rem;
        order: 3;
        width: 100%;
    }

    .einr-booking-wizard-heading__description {
        order: 4;
    }

    .einr-booking-wizard-card__body {
        padding: 1.25rem !important;
    }

    .einr-booking-wizard-actions__primary {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        order: 1;
        width: 100%;
    }

    .einr-booking-wizard-actions__primary .ksbam-admin-action {
        justify-content: center;
        width: 100%;
    }

    .einr-booking-wizard-actions__primary--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .einr-booking-wizard-actions__primary--stacked {
        grid-template-columns: minmax(0, 1fr);
    }

    .einr-booking-wizard-actions__primary--stacked > span,
    .einr-booking-wizard-actions__primary--stacked > span .ksbam-admin-action {
        width: 100%;
    }

    .einr-booking-wizard-actions__cancel {
        display: flex;
        justify-content: center;
        align-self: stretch;
        order: 2;
    }

    .einr-booking-wizard-actions__cancel > .btn,
    .einr-booking-wizard-actions__cancel > a,
    .einr-booking-wizard-actions__cancel > button {
        padding: 0.25rem 0.75rem !important;
        font-size: 0.875rem;
        opacity: 0.72;
    }

    .einr-booking-wizard-actions__cancel > .btn:hover,
    .einr-booking-wizard-actions__cancel > .btn:focus-visible,
    .einr-booking-wizard-actions__cancel > a:hover,
    .einr-booking-wizard-actions__cancel > a:focus-visible,
    .einr-booking-wizard-actions__cancel > button:hover,
    .einr-booking-wizard-actions__cancel > button:focus-visible {
        opacity: 1;
    }
}

/* Die Steckbriefbereiche bestehen auf grossen Screens aus zwei col-xl-6,
   deren Kacheln intern mit 0.85rem Abstand angeordnet sind. Sobald die beiden
   Spalten untereinander umbrechen, darf das g-4 der aeusseren Row an der
   Spaltengrenze nicht 1.5rem erzeugen. Der :has-Scope trifft ausschliesslich
   Rows mit diesen Steckbrief-Kachelrastern. */
@media (max-width: 1199.98px) {
    .row.g-4.align-items-start:has(> .col-xl-6 .ksbam-teaser-info-grid),
    .row.g-4.align-items-start:has(> .col-xl-6 .ksbam-public-info-grid) {
        --bs-gutter-y: 0.85rem;
    }
}

/* In der öffentlichen Projektansicht steht mobil die primäre Aktion oben;
   der Rückweg bleibt darunter als bewusst zurückhaltende Navigation. */
@media (max-width: 767.98px) {
    .ksbam-public-project-actions__primary,
    .ksbam-public-project-actions__primary .ksbam-admin-action {
        width: 100%;
    }

    .ksbam-public-project-actions .ksbam-back-button-wrapper {
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }
}

/* --- 16.1 Seite: PFK-Detail (ksbam/pfk/show) --- */
.ksbam-scope-pfk-show .ksbam-richtext > *:last-child {
    margin-bottom: 0;
}

.ksbam-scope-pfk-show .ksbam-teaser-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-pfk-show .ksbam-teaser-info {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.95rem 1rem;
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(210, 183, 154, 0.38);
    box-shadow: 0 8px 20px rgba(140, 109, 78, 0.08);
}

.ksbam-scope-pfk-show .ksbam-teaser-info--wide {
    grid-column: 1 / -1;
}

.ksbam-scope-pfk-show .ksbam-teaser-info__icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--color-primary);
}

.ksbam-scope-pfk-show .ksbam-teaser-info__label {
    display: block;
    margin-bottom: 0.1rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-pfk-show .ksbam-teaser-info__value {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ksbam-scope-pfk-show .ksbam-teaser-info__meta {
    display: block;
    color: rgba(32, 26, 23, 0.68);
    font-weight: 600;
    line-height: 1.35;
}

.ksbam-scope-pfk-show .ksbam-freigabe-pill {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(32, 26, 23, 0.12);
}

.ksbam-scope-pfk-show .ksbam-freigabe-pill.is-freigegeben {
    background: var(--color-salbei);
}

.ksbam-scope-pfk-show .ksbam-freigabe-pill.is-angefragt {
    background: var(--color-mango);
}

.ksbam-scope-pfk-show .ksbam-freigabe-pill__label {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.8rem;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.ksbam-scope-pfk-show .ksbam-freigabe-pill__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: 0.35rem 0.55rem;
    border: 0;
    color: #fff;
    background: rgba(32, 26, 23, 0.18);
}

.ksbam-scope-pfk-show .ksbam-freigabe-pill__action:hover,
.ksbam-scope-pfk-show .ksbam-freigabe-pill__action:focus {
    color: #fff;
    background: rgba(32, 26, 23, 0.28);
}

.ksbam-scope-pfk-show .ksbam-admin-action--fit {
    width: fit-content !important;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-end;
}

.ksbam-scope-pfk-show .ksbam-admin-action--fit .ksbam-admin-action__label {
    flex: 0 0 auto;
}

.ksbam-scope-pfk-show .pfk-class-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.ksbam-scope-pfk-show .pfk-class-card {
    min-width: 0;
    justify-content: flex-start;
}

.ksbam-scope-pfk-show .pfk-class-card .btn {
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .ksbam-scope-pfk-show .pfk-class-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 575.98px) {
    .ksbam-scope-pfk-show .ksbam-teaser-info-grid {
        grid-template-columns: 1fr;
    }

    .ksbam-scope-pfk-show .pfk-class-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .ksbam-scope-pfk-show .pfk-class-card .btn {
        margin-left: 0 !important;
    }
}

/* --- 16.2 Seite: KSBAM-Koordinator-Detail (ksbam/ksbam/show) --- */
.ksbam-scope-ksbam-show .ksbam-teaser-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-ksbam-show .ksbam-teaser-info {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.95rem 1rem;
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(210, 183, 154, 0.38);
    box-shadow: 0 8px 20px rgba(140, 109, 78, 0.08);
}

.ksbam-scope-ksbam-show .ksbam-teaser-info--wide {
    grid-column: 1 / -1;
}

.ksbam-scope-ksbam-show .ksbam-teaser-info__icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    color: var(--color-primary);
}

.ksbam-scope-ksbam-show .ksbam-teaser-info__label {
    display: block;
    margin-bottom: 0.1rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-ksbam-show .ksbam-teaser-info__value {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ksbam-scope-ksbam-show .ksbam-teaser-info__meta {
    display: block;
    margin-top: 0.2rem;
    color: rgba(32, 26, 23, 0.62);
    font-size: 0.82rem;
    font-weight: 600;
}

.ksbam-scope-ksbam-show .ksbam-managed-entity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-ksbam-show .ksbam-managed-entity-card {
    align-items: center;
    width: 100%;
}

.ksbam-scope-ksbam-show .ksbam-managed-entity-card .btn {
    flex-shrink: 0;
}

.ksbam-scope-ksbam-show .ksbam-admin-action--fit {
    width: fit-content !important;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-end;
}

.ksbam-scope-ksbam-show .ksbam-admin-action--fit .ksbam-admin-action__label {
    flex: 0 0 auto;
}

@media (max-width: 1199.98px) {
    .ksbam-scope-ksbam-show .ksbam-managed-entity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .ksbam-scope-ksbam-show .ksbam-managed-entity-grid,
    .ksbam-scope-ksbam-show .ksbam-teaser-info-grid {
        grid-template-columns: 1fr;
    }

    .ksbam-scope-ksbam-show .ksbam-managed-entity-card {
        align-items: flex-start;
    }

    .ksbam-scope-ksbam-show .ksbam-managed-entity-card .btn {
        margin-left: 0 !important;
        margin-top: 0.5rem;
    }
}

/* --- 16.3 Seite: Kulturpartner-Detail (ksbam/kulturpartner/show) --- */
.ksbam-scope-kp-show .ksbam-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ksbam-scope-kp-show .ksbam-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(210, 183, 154, 0.45);
}

.ksbam-scope-kp-show .ksbam-detail-row span {
    color: rgba(32, 26, 23, 0.68);
    font-weight: 700;
}

.ksbam-scope-kp-show .ksbam-detail-row strong {
    color: var(--color-text);
    text-align: right;
}

.ksbam-scope-kp-show .ksbam-teaser-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-kp-show .ksbam-teaser-info {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.95rem 1rem;
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(210, 183, 154, 0.38);
    box-shadow: 0 8px 20px rgba(140, 109, 78, 0.08);
}

.ksbam-scope-kp-show .ksbam-teaser-info--wide {
    grid-column: 1 / -1;
}

.ksbam-scope-kp-show .ksbam-teaser-info__icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--color-primary);
}

.ksbam-scope-kp-show .ksbam-teaser-info.is-ok .ksbam-teaser-info__icon {
    color: var(--color-salbei);
    background: rgba(137, 170, 149, 0.18);
}

.ksbam-scope-kp-show .ksbam-teaser-info.is-open .ksbam-teaser-info__icon {
    color: var(--color-mango);
    background: rgba(246, 186, 34, 0.18);
}

.ksbam-scope-kp-show .ksbam-teaser-info__label {
    display: block;
    margin-bottom: 0.1rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-kp-show .ksbam-teaser-info__value {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ksbam-scope-kp-show .ksbam-teaser-info__meta {
    display: block;
    color: rgba(32, 26, 23, 0.68);
    font-weight: 600;
    line-height: 1.35;
}

.ksbam-scope-kp-show .ksbam-freigabe-pill {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(32, 26, 23, 0.12);
}

.ksbam-scope-kp-show .ksbam-freigabe-pill.is-freigegeben {
    background: var(--color-salbei);
}

.ksbam-scope-kp-show .ksbam-freigabe-pill.is-angefragt {
    background: var(--color-mango);
}

.ksbam-scope-kp-show .ksbam-freigabe-pill__label {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.8rem;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.ksbam-scope-kp-show .ksbam-freigabe-pill__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: 0.35rem 0.55rem;
    border: 0;
    color: #fff;
    background: rgba(32, 26, 23, 0.18);
}

.ksbam-scope-kp-show .ksbam-freigabe-pill__action:hover,
.ksbam-scope-kp-show .ksbam-freigabe-pill__action:focus {
    color: #fff;
    background: rgba(32, 26, 23, 0.28);
}

.ksbam-scope-kp-show .ksbam-admin-action--fit {
    width: fit-content !important;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-end;
}

.ksbam-scope-kp-show .ksbam-admin-action--fit .ksbam-admin-action__label {
    flex: 0 0 auto;
}

.ksbam-scope-kp-show .ksbam-visibility-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(210, 183, 154, 0.4);
    color: rgba(32, 26, 23, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    font-size: 0.74rem;
    line-height: 1;
    white-space: nowrap;
}

.ksbam-scope-kp-show .ksbam-visibility-meta__icon {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    flex-shrink: 0;
}

.ksbam-scope-kp-show .ksbam-visibility-meta__value {
    font-weight: 700;
    color: var(--color-text);
}

.ksbam-scope-kp-show .ksbam-visibility-meta.is-public .ksbam-visibility-meta__icon {
    color: var(--color-secondary);
    background: rgba(84, 107, 122, 0.14);
}

.ksbam-scope-kp-show .ksbam-visibility-meta.is-shared .ksbam-visibility-meta__icon {
    color: #6f9d84;
    background: rgba(138, 178, 157, 0.16);
}

.ksbam-scope-kp-show .ksbam-visibility-meta.is-internal .ksbam-visibility-meta__icon {
    color: #6c559c;
    background: rgba(108, 85, 156, 0.14);
}

.ksbam-scope-kp-show .ksbam-richtext > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .ksbam-scope-kp-show .ksbam-teaser-info-grid {
        grid-template-columns: 1fr;
    }

    .ksbam-scope-kp-show .ksbam-detail-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .ksbam-scope-kp-show .ksbam-detail-row strong {
        text-align: left;
    }
}

/* --- 16.4 Seite: Buchungs-Detail KSBAM (ksbam/buchung/show) --- */
.ksbam-scope-buchung-show .ksbam-richtext > *:last-child {
    margin-bottom: 0;
}

.ksbam-scope-buchung-show .ksbam-teaser-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-buchung-show .ksbam-teaser-info {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.95rem 1rem;
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(210, 183, 154, 0.38);
    box-shadow: 0 8px 20px rgba(140, 109, 78, 0.08);
}

.ksbam-scope-buchung-show .ksbam-teaser-info--wide {
    grid-column: 1 / -1;
}

.ksbam-scope-buchung-show .ksbam-teaser-info__icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    color: var(--color-primary);
}

.ksbam-scope-buchung-show .ksbam-teaser-info__label {
    display: block;
    margin-bottom: 0.1rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-buchung-show .ksbam-teaser-info__value {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ksbam-scope-buchung-show .ksbam-admin-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-buchung-show .ksbam-admin-meta-item {
    min-width: 0;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(210, 183, 154, 0.38);
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
}

.ksbam-scope-buchung-show .ksbam-admin-meta-item span {
    display: block;
    margin-bottom: 0.2rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-buchung-show .ksbam-admin-meta-item strong {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* In der Terminliste ist das Datum keine Beschriftung, sondern gleichwertige
   Information — es steht deshalb in normaler Größe und fett, die Uhrzeit darunter
   mager (Rückmeldung KS:BAM 09.08.2026), analog Wert/Zusatz der Kultur.Klassen-
   Karten. Die übrigen Meta-Items behalten ihr Label-Format. */
.ksbam-scope-buchung-show .ksbam-booking-date-list .ksbam-admin-meta-item span {
    color: var(--color-text);
    font-size: inherit;
    text-transform: none;
}

.ksbam-scope-buchung-show .ksbam-booking-date-list .ksbam-admin-meta-item strong {
    font-weight: 400;
}

.ksbam-scope-buchung-show .ksbam-booking-class-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-buchung-show .ksbam-booking-class-card {
    align-items: center;
    width: 100%;
}

.ksbam-scope-buchung-show .ksbam-booking-class-card .btn {
    flex-shrink: 0;
}

.ksbam-scope-buchung-show .ksbam-booking-date-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-buchung-show .ksbam-admin-action--fit {
    width: fit-content !important;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-end;
}

.ksbam-scope-buchung-show .ksbam-admin-action--fit .ksbam-admin-action__label {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .ksbam-detail-actions .ksbam-detail-actions__primary.ksbam-admin-action {
        order: 1;
        align-self: stretch;
        justify-content: center;
        width: 100% !important;
    }

    .ksbam-detail-actions .ksbam-back-button-wrapper {
        display: flex;
        justify-content: flex-start;
        order: 2;
        width: 100%;
    }

    .ksbam-detail-actions__group {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        order: 1;
        width: 100%;
    }

    .ksbam-detail-actions .ksbam-detail-actions__group .ksbam-admin-action {
        align-self: stretch;
        justify-content: center;
        width: 100% !important;
    }

    .ksbam-einrichtung-detail-footer {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center !important;
        column-gap: 1rem !important;
        row-gap: 1rem !important;
    }

    .ksbam-einrichtung-detail-footer__meta {
        display: contents !important;
    }

    .ksbam-einrichtung-detail-footer__meta > :first-child {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .ksbam-einrichtung-detail-footer__back {
        grid-column: 1;
        grid-row: 2;
    }

    .ksbam-einrichtung-detail-footer__delete {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .einrichtung-booking-detail-actions:has(.einrichtung-booking-detail-actions__delete) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .einrichtung-booking-detail-actions:has(.einrichtung-booking-detail-actions__delete) .ksbam-detail-actions__group {
        display: contents !important;
    }

    .einrichtung-booking-detail-actions:has(.einrichtung-booking-detail-actions__delete) .ksbam-admin-action {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100% !important;
    }

    .einrichtung-booking-detail-actions:has(.einrichtung-booking-detail-actions__delete) .ksbam-back-button-wrapper {
        grid-column: 1;
        grid-row: 2;
    }

    .einrichtung-booking-detail-actions__delete {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }
}

@media (max-width: 991.98px) {
    .ksbam-scope-buchung-show .ksbam-booking-class-grid,
    .ksbam-scope-buchung-show .ksbam-teaser-info-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 16.5 Seite: Buchungs-Detail Kulturpartner (kulturpartner/buchung/show) --- */
.ksbam-scope-kp-buchung-show .ksbam-richtext > *:last-child {
    margin-bottom: 0;
}

.ksbam-scope-kp-buchung-show .ksbam-teaser-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-kp-buchung-show .ksbam-teaser-info {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.95rem 1rem;
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(210, 183, 154, 0.38);
    box-shadow: 0 8px 20px rgba(140, 109, 78, 0.08);
}

.ksbam-scope-kp-buchung-show .ksbam-teaser-info--wide {
    grid-column: 1 / -1;
}

.ksbam-scope-kp-buchung-show .ksbam-teaser-info__icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    color: var(--color-primary);
}

.ksbam-scope-kp-buchung-show .ksbam-teaser-info__label {
    display: block;
    margin-bottom: 0.1rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-kp-buchung-show .ksbam-teaser-info__value {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ksbam-scope-kp-buchung-show .ksbam-admin-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-kp-buchung-show .ksbam-admin-meta-item {
    min-width: 0;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(210, 183, 154, 0.38);
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
}

.ksbam-scope-kp-buchung-show .ksbam-admin-meta-item span {
    display: block;
    margin-bottom: 0.2rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-kp-buchung-show .ksbam-admin-meta-item strong {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* In der Terminliste ist das Datum keine Beschriftung, sondern gleichwertige
   Information — es steht deshalb in normaler Größe und fett, die Uhrzeit darunter
   mager (Rückmeldung KS:BAM 09.08.2026), analog Wert/Zusatz der Kultur.Klassen-
   Karten. Die übrigen Meta-Items behalten ihr Label-Format. */
.ksbam-scope-kp-buchung-show .ksbam-booking-date-list .ksbam-admin-meta-item span {
    color: var(--color-text);
    font-size: inherit;
    text-transform: none;
}

.ksbam-scope-kp-buchung-show .ksbam-booking-date-list .ksbam-admin-meta-item strong {
    font-weight: 400;
}

.ksbam-scope-kp-buchung-show .ksbam-booking-class-grid,
.ksbam-scope-kp-buchung-show .ksbam-booking-date-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-kp-buchung-show .ksbam-booking-class-card {
    align-items: center;
    width: 100%;
}

.ksbam-scope-kp-buchung-show .ksbam-admin-action--fit {
    width: fit-content !important;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-end;
}

.ksbam-scope-kp-buchung-show .ksbam-admin-action--fit .ksbam-admin-action__label {
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .ksbam-scope-kp-buchung-show .ksbam-booking-class-grid,
    .ksbam-scope-kp-buchung-show .ksbam-booking-date-list,
    .ksbam-scope-kp-buchung-show .ksbam-teaser-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .ksbam-detail-column-stack > [class*="col-"]:first-child > .ksbam-card-blur:last-child,
    .ksbam-detail-column-stack > [class*="col-"]:first-child > .ksbam-card-img:last-child {
        margin-bottom: 0 !important;
    }
}

/* --- 16.6 Seite: Buchungs-Detail Einrichtung (einrichtung/buchung/details) --- */
.ksbam-scope-einr-buchung-details .ksbam-richtext > *:last-child {
    margin-bottom: 0;
}

.ksbam-scope-einr-buchung-details .ksbam-teaser-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-einr-buchung-details .ksbam-teaser-info {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.95rem 1rem;
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(210, 183, 154, 0.38);
    box-shadow: 0 8px 20px rgba(140, 109, 78, 0.08);
}

.ksbam-scope-einr-buchung-details .ksbam-teaser-info--wide {
    grid-column: 1 / -1;
}

.ksbam-scope-einr-buchung-details .ksbam-teaser-info__icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    color: var(--color-primary);
}

.ksbam-scope-einr-buchung-details .ksbam-teaser-info__label {
    display: block;
    margin-bottom: 0.1rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-einr-buchung-details .ksbam-teaser-info__value {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ksbam-scope-einr-buchung-details .ksbam-admin-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-einr-buchung-details .ksbam-admin-meta-item {
    min-width: 0;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(210, 183, 154, 0.38);
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
}

.ksbam-scope-einr-buchung-details .ksbam-admin-meta-item span {
    display: block;
    margin-bottom: 0.2rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-einr-buchung-details .ksbam-admin-meta-item strong {
    display: block;
    color: var(--color-text);
    font-weight: 700;
}

/* In der Terminliste ist das Datum keine Beschriftung, sondern gleichwertige
   Information — es steht deshalb in normaler Größe und fett, die Uhrzeit darunter
   mager (Rückmeldung KS:BAM 09.08.2026), analog Wert/Zusatz der Kultur.Klassen-
   Karten. Die übrigen Meta-Items behalten ihr Label-Format. */
.ksbam-scope-einr-buchung-details .ksbam-booking-date-list .ksbam-admin-meta-item span {
    color: var(--color-text);
    font-size: inherit;
    text-transform: none;
}

.ksbam-scope-einr-buchung-details .ksbam-booking-date-list .ksbam-admin-meta-item strong {
    font-weight: 400;
}

.ksbam-scope-einr-buchung-details .ksbam-booking-class-grid,
.ksbam-scope-einr-buchung-details .ksbam-booking-date-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-einr-buchung-details .ksbam-booking-class-card {
    align-items: center;
    width: 100%;
}

.ksbam-scope-einr-buchung-details .ksbam-admin-action--fit {
    width: fit-content !important;
    max-width: 100%;
    flex: 0 0 auto;
}

.ksbam-scope-einr-buchung-details .ksbam-admin-action--fit .ksbam-admin-action__label {
    flex: 0 0 auto;
}

.ksbam-scope-einr-buchung-details .einrichtung-booking-actions .ksbam-admin-action {
    width: 235px !important;
    max-width: 100%;
    justify-content: flex-start;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
}

.ksbam-scope-einr-buchung-details .einrichtung-booking-actions .ksbam-admin-action--fit {
    width: max-content !important;
}

.ksbam-scope-einr-buchung-details .einrichtung-booking-actions .ksbam-admin-action__label {
    flex: 1 1 auto;
    text-align: left;
}

.ksbam-scope-einr-buchung-details .einrichtung-booking-action--beere .ksbam-admin-action__icon {
    color: var(--color-beere);
    background: rgba(173, 31, 100, 0.12);
}

.ksbam-scope-einr-buchung-details .einrichtung-booking-action--beere:hover,
.ksbam-scope-einr-buchung-details .einrichtung-booking-action--beere:focus {
    background: var(--color-sand);
    border-color: var(--color-sand);
    color: var(--color-text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    filter: brightness(0.95) saturate(1.1);
}

.ksbam-scope-einr-buchung-details .einrichtung-booking-action--beere:hover .ksbam-admin-action__icon,
.ksbam-scope-einr-buchung-details .einrichtung-booking-action--beere:focus .ksbam-admin-action__icon {
    color: var(--color-beere);
    background: var(--color-weiss);
}

@media (max-width: 991.98px) {
    .ksbam-scope-einr-buchung-details .ksbam-booking-class-grid,
    .ksbam-scope-einr-buchung-details .ksbam-booking-date-list,
    .ksbam-scope-einr-buchung-details .ksbam-teaser-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .ksbam-scope-einr-buchung-details .einrichtung-booking-actions,
    .ksbam-scope-einr-buchung-details .einrichtung-booking-actions .ksbam-admin-action {
        width: 100% !important;
    }
}

/* --- 16.7 Seite: Projekt-Detail KSBAM (ksbam/projekt/show) --- */
.ksbam-scope-projekt-show .ksbam-richtext > *:last-child {
    margin-bottom: 0;
}

.ksbam-scope-projekt-show .ksbam-richtext p,
.ksbam-scope-projekt-show .ksbam-richtext ul,
.ksbam-scope-projekt-show .ksbam-richtext ol {
    color: var(--color-text);
}

.ksbam-scope-projekt-show .ksbam-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ksbam-scope-projekt-show .ksbam-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(210, 183, 154, 0.45);
}

.ksbam-scope-projekt-show .ksbam-detail-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ksbam-scope-projekt-show .ksbam-detail-row span {
    color: rgba(32, 26, 23, 0.68);
    font-weight: 700;
}

.ksbam-scope-projekt-show .ksbam-detail-row strong {
    color: var(--color-text);
    text-align: right;
    overflow-wrap: anywhere;
}

.ksbam-scope-projekt-show .ksbam-admin-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-projekt-show .ksbam-admin-meta-item {
    min-width: 0;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(210, 183, 154, 0.38);
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
}

.ksbam-scope-projekt-show .ksbam-admin-meta-item span {
    display: block;
    margin-bottom: 0.2rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-projekt-show .ksbam-admin-meta-item strong {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ksbam-scope-projekt-show .ksbam-teaser-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-projekt-show .ksbam-teaser-info {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.95rem 1rem;
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(210, 183, 154, 0.38);
    box-shadow: 0 8px 20px rgba(140, 109, 78, 0.08);
}

.ksbam-scope-projekt-show .ksbam-teaser-info--wide {
    grid-column: 1 / -1;
}

/* Projektdokument: hebt sich als einzige Aktions-Kachel farbig ab. */
.ksbam-scope-projekt-show .ksbam-teaser-info--download {
    background: var(--color-hellsand);
}

.ksbam-scope-projekt-show .ksbam-teaser-info__icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    color: var(--color-primary);
}

.ksbam-scope-projekt-show .ksbam-teaser-info__label {
    display: block;
    margin-bottom: 0.1rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-projekt-show .ksbam-teaser-info__value {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ksbam-scope-projekt-show .ksbam-admin-action--fit {
    width: fit-content !important;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-end;
}

.ksbam-scope-projekt-show .ksbam-admin-action--fit .ksbam-admin-action__label {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .ksbam-scope-projekt-show .ksbam-teaser-info-grid {
        grid-template-columns: 1fr;
    }

    .ksbam-scope-projekt-show .ksbam-detail-row {
        flex-direction: column;
        gap: 0.15rem;
    }

    .ksbam-scope-projekt-show .ksbam-detail-row strong {
        text-align: left;
    }
}

/* --- 16.8 Seite: Projekt-Detail Kulturpartner (kulturpartner/projekt/show) --- */
.ksbam-scope-kp-projekt-show .ksbam-richtext > *:last-child {
    margin-bottom: 0;
}

.ksbam-scope-kp-projekt-show .ksbam-richtext p,
.ksbam-scope-kp-projekt-show .ksbam-richtext ul,
.ksbam-scope-kp-projekt-show .ksbam-richtext ol {
    color: var(--color-text);
}

.ksbam-scope-kp-projekt-show .ksbam-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ksbam-scope-kp-projekt-show .ksbam-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(210, 183, 154, 0.45);
}

.ksbam-scope-kp-projekt-show .ksbam-detail-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ksbam-scope-kp-projekt-show .ksbam-detail-row span {
    color: rgba(32, 26, 23, 0.68);
    font-weight: 700;
}

.ksbam-scope-kp-projekt-show .ksbam-detail-row strong {
    color: var(--color-text);
    text-align: right;
    overflow-wrap: anywhere;
}

.ksbam-scope-kp-projekt-show .ksbam-teaser-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-kp-projekt-show .ksbam-teaser-info {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.95rem 1rem;
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(210, 183, 154, 0.38);
    box-shadow: 0 8px 20px rgba(140, 109, 78, 0.08);
}

.ksbam-scope-kp-projekt-show .ksbam-teaser-info--wide {
    grid-column: 1 / -1;
}

/* Projektdokument: hebt sich als einzige Aktions-Kachel farbig ab. */
.ksbam-scope-kp-projekt-show .ksbam-teaser-info--download {
    background: var(--color-hellsand);
}

.ksbam-scope-kp-projekt-show .ksbam-teaser-info__icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    color: var(--color-primary);
}

.ksbam-scope-kp-projekt-show .ksbam-teaser-info__label {
    display: block;
    margin-bottom: 0.1rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-kp-projekt-show .ksbam-teaser-info__value {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ksbam-scope-kp-projekt-show .ksbam-admin-action--fit {
    width: fit-content !important;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-end;
}

.ksbam-scope-kp-projekt-show .ksbam-admin-action--fit .ksbam-admin-action__label {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .ksbam-scope-kp-projekt-show .ksbam-teaser-info-grid {
        grid-template-columns: 1fr;
    }

    .ksbam-scope-kp-projekt-show .ksbam-detail-row {
        flex-direction: column;
        gap: 0.15rem;
    }

    .ksbam-scope-kp-projekt-show .ksbam-detail-row strong {
        text-align: left;
    }
}

/* --- 16.9 Seite: Projekt-Detail Einrichtung (einrichtung/projekt/show) --- */
.ksbam-scope-einr-projekt-show .ksbam-richtext > *:last-child {
    margin-bottom: 0;
}

.ksbam-scope-einr-projekt-show .ksbam-richtext p,
.ksbam-scope-einr-projekt-show .ksbam-richtext ul,
.ksbam-scope-einr-projekt-show .ksbam-richtext ol {
    color: var(--color-text);
}

.ksbam-scope-einr-projekt-show .ksbam-teaser-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-einr-projekt-show .ksbam-teaser-info {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.95rem 1rem;
    border-radius: var(--ksbam-tile-radius);
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(210, 183, 154, 0.38);
    box-shadow: 0 8px 20px rgba(140, 109, 78, 0.08);
}

.ksbam-scope-einr-projekt-show .ksbam-teaser-info--wide {
    grid-column: 1 / -1;
}

/* Projektdokument: hebt sich als einzige Aktions-Kachel farbig ab. */
.ksbam-scope-einr-projekt-show .ksbam-teaser-info--download {
    background: var(--color-hellsand);
}

.ksbam-scope-einr-projekt-show .ksbam-teaser-info__icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    color: var(--color-primary);
}

.ksbam-scope-einr-projekt-show .ksbam-teaser-info__label {
    display: block;
    margin-bottom: 0.1rem;
    color: rgba(32, 26, 23, 0.64);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-einr-projekt-show .ksbam-teaser-info__value {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ksbam-scope-einr-projekt-show .ksbam-admin-action--fit {
    width: fit-content !important;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-end;
}

.ksbam-scope-einr-projekt-show .ksbam-admin-action--fit .ksbam-admin-action__label {
    flex: 0 0 auto;
}

.ksbam-scope-einr-projekt-show .einrichtung-projekt-merkliste.ksbam-card-blur {
    position: relative;
    z-index: 10;
    overflow: visible !important;
}

.ksbam-scope-einr-projekt-show .einrichtung-projekt-merkliste .ts-wrapper {
    position: relative;
    z-index: 20;
}

.ksbam-scope-einr-projekt-show .einrichtung-projekt-merkliste .ts-wrapper.dropdown-active {
    z-index: 1080;
}

.ksbam-scope-einr-projekt-show .einrichtung-projekt-merkliste .ts-dropdown {
    z-index: 1081;
}

@media (max-width: 575.98px) {
    .ksbam-scope-einr-projekt-show .ksbam-teaser-info-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 16.10 Seite: Projekt-Übersicht KSBAM (ksbam/projekt/index) --- */
/* Metrik-Karten: global (Abschnitt 3). Status-Indikator/Popover: Abschnitt 16.0. */
.ksbam-scope-projekt-index .ksbam-project-filter-view .toolbar-filter-projektform .ts-wrapper {
    min-width: 150px;
    max-width: 170px;
}

.ksbam-scope-projekt-index .ksbam-visibility-meta {
    margin-top: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(210, 183, 154, 0.4);
    color: rgba(32, 26, 23, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    font-size: 0.74rem;
    line-height: 1;
    white-space: nowrap;
}

.ksbam-scope-projekt-index .ksbam-visibility-meta__icon {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    flex-shrink: 0;
}

.ksbam-scope-projekt-index .ksbam-visibility-meta__value {
    font-weight: 700;
    color: var(--color-text);
}

.ksbam-scope-projekt-index .ksbam-visibility-meta.is-public .ksbam-visibility-meta__icon {
    color: var(--color-secondary);
    background: rgba(84, 107, 122, 0.14);
}

.ksbam-scope-projekt-index .ksbam-visibility-meta.is-shared .ksbam-visibility-meta__icon {
    color: #6f9d84;
    background: rgba(138, 178, 157, 0.16);
}

.ksbam-scope-projekt-index .ksbam-visibility-meta.is-internal .ksbam-visibility-meta__icon {
    color: #6c559c;
    background: rgba(108, 85, 156, 0.14);
}

/* --- 16.11 Seite: Portal-Einstellungen (ksbam/portal_setting/index) --- */
/* Metrik-Karten: global (Abschnitt 3); hier nur der margin-left-Zusatz + Settings-Layout. */
.ksbam-scope-portal-setting-index .ksbam-header-metrics {
    margin-left: auto;
}

.ksbam-scope-portal-setting-index .ksbam-settings-header-side {
    flex: 0 1 720px;
    margin-left: auto;
}

.ksbam-scope-portal-setting-index .ksbam-settings-section__head {
    padding: 1.4rem 1.5rem 1.1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: var(--color-hellsand);
    border-bottom: 1px solid rgba(195, 166, 135, 0.28);
}

.ksbam-scope-portal-setting-index .ksbam-settings-section__toggle {
    position: relative;
    width: 100%;
    padding-right: 4rem;
    border: 0;
    border-bottom: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ksbam-scope-portal-setting-index .ksbam-settings-section__toggle:hover {
    background: var(--color-sand);
}

.ksbam-scope-portal-setting-index .ksbam-settings-section__toggle:focus-visible {
    outline: 3px solid rgba(var(--color-primary-rgb), 0.3);
    outline-offset: -3px;
}

.ksbam-scope-portal-setting-index .ksbam-settings-section__toggle[aria-expanded="true"] {
    border-bottom: 1px solid rgba(195, 166, 135, 0.28);
}

.ksbam-scope-portal-setting-index .ksbam-settings-section__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.6rem;
    width: 0.7rem;
    height: 0.7rem;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.25s ease;
}

.ksbam-scope-portal-setting-index .ksbam-settings-section__toggle[aria-expanded="true"]::after {
    transform: translateY(-30%) rotate(225deg);
}

.ksbam-scope-portal-setting-index .ksbam-settings-section {
    background: var(--color-hellsand) !important;
}

.ksbam-scope-portal-setting-index .ksbam-settings-section .ksbam-card__body,
.ksbam-scope-portal-setting-index .ksbam-settings-section .p-4,
.ksbam-scope-portal-setting-index .ksbam-settings-section .p-5 {
    background: transparent !important;
}

.ksbam-scope-portal-setting-index .ksbam-settings-table-wrap {
    background: var(--color-hellsand);
    overflow-x: auto;
}

.ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table {
    margin-bottom: 0;
}

.ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table thead th {
    background: var(--color-hellsand);
    color: var(--color-primary);
    font-size: 0.95rem;
    font-weight: 700;
    border-bottom: 2px solid rgba(210, 183, 154, 0.8);
    padding: 1.1rem 1rem;
    white-space: nowrap;
}

.ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody td {
    padding: 1rem;
    vertical-align: middle;
    color: var(--color-text);
    background: var(--color-weiss);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease;
}

.ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tfoot td {
    padding: 1.1rem 1.5rem;
    background: var(--color-hellsand);
    border-top: 1px solid rgba(195, 166, 135, 0.28);
}

.ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table.table-hover tbody tr:hover td {
    background: var(--color-hellsand);
}

/* Sprungmarken auf der Einstellungs-Seite: Settings-Zeilen (#setting-<id>), Portaltexte
   (#seite-<id>), Tag-Pool-Eintraege (#tagpool-<pool>-<id>) und die Pool-Abschnitte
   (#pool-<pool>). Ohne scroll-margin-top landet das Ziel unter der fix positionierten
   Navigation. Der Wert entspricht dem Hero-Offset plus etwas Luft. */
.ksbam-scope-portal-setting-index tr[id],
.ksbam-scope-portal-setting-index .ksbam-settings-section[id],
.ksbam-scope-portal-setting-index .ksbam-setting-anchor {
    scroll-margin-top: calc(var(--nav-top-offset) + var(--nav-height) + 40px);
}

/* Anker der angehaengten Mailtexte: reine Sprungmarke, darf nichts umbrechen. */
.ksbam-scope-portal-setting-index .ksbam-setting-anchor {
    display: block;
    height: 0;
    overflow: hidden;
}

/* Kurz hervorheben, damit die angesprungene Zeile in der langen Liste auffaellt.
   Zweiter Selektor: bei angehaengten Mailtexten traegt der Span die :target-Marke,
   hervorgehoben werden soll aber die umgebende Zeile. */
.ksbam-scope-portal-setting-index tr[id]:target td,
.ksbam-scope-portal-setting-index tr:has(.ksbam-setting-anchor:target) td {
    animation: ksbam-setting-flash 2.6s ease-out 1;
}

@keyframes ksbam-setting-flash {
    0%,
    45% {
        background-color: var(--color-honig);
    }

    100% {
        background-color: var(--color-weiss);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ksbam-scope-portal-setting-index .ksbam-settings-section__toggle,
    .ksbam-scope-portal-setting-index .ksbam-settings-section__toggle::after {
        transition: none;
    }

    .ksbam-scope-portal-setting-index tr[id]:target td,
    .ksbam-scope-portal-setting-index tr:has(.ksbam-setting-anchor:target) td {
        animation: none;
        background-color: var(--color-honig);
    }
}

/* Kategorien ausserhalb von E-Mail/Buchung (Allgemein, Workflow, Anzeige, System):
   dort stehen ganze Adressen im Eingabefeld, waehrend Bezeichnung + Beschreibung
   umbrechen duerfen. Also Bezeichnung schmaler, Wert breiter. */
.ksbam-scope-portal-setting-index .ksbam-settings-table--wide-value {
    table-layout: fixed;
}

.ksbam-scope-portal-setting-index .ksbam-settings-table--wide-value thead th:nth-child(1) {
    width: 30%;
}

.ksbam-scope-portal-setting-index .ksbam-settings-table--wide-value thead th:nth-child(2) {
    width: 9rem;
}

.ksbam-scope-portal-setting-index .ksbam-settings-table--wide-value thead th:nth-child(3) {
    width: auto;
}

.ksbam-scope-portal-setting-index .ksbam-settings-table--wide-value thead th:nth-child(4) {
    width: 13rem; /* sonst bricht die Bearbeiter-Adresse über drei Zeilen */
}

/* Das Eingabefeld ist zentral auf 260px gedeckelt (passt fuer Zahlen); hier soll es
   die gewonnene Spaltenbreite nutzen. */
.ksbam-scope-portal-setting-index .ksbam-settings-table--wide-value tbody td .input-group {
    max-width: none !important;
}

@media (max-width: 991.98px) {
    .ksbam-scope-portal-setting-index .ksbam-header-metrics {
        margin-left: 0;
    }

    .ksbam-scope-portal-setting-index .ksbam-settings-header-side {
        flex-basis: 100%;
        width: 100%;
        margin-left: 0;
    }

    .ksbam-scope-portal-setting-index .ksbam-settings-section__head {
        flex-direction: column;
        align-items: stretch;
    }

    /* align-items: stretch zieht sonst auch den Zaehler-Badge ueber die volle
       Breite — er soll seiner Beschriftung folgen. */
    .ksbam-scope-portal-setting-index .ksbam-settings-section__head .ksbam-count-badge {
        align-self: flex-start;
    }
}

/* Mobil: die fuenf Einstellungstabellen als Kacheln statt als Scrollflaeche.
   Sie sind zwischen 405 und 678px breit und brauchten bis zu 342px
   H-Scroll (2do_mobile.md B12). Anders als die Listen laufen sie nicht ueber
   bootstrap-table, es gibt hier also keinen Card-View — dieselbe Optik
   entsteht deshalb hier direkt: Zeile = Kachel, Label ueber Wert.
   Die Labels stehen als data-label an den Zellen, damit der Text im HTML
   bleibt und nicht im Stylesheet. Die Bezeichnungsspalte traegt bewusst kein
   data-label: ihr fetter Titel ist die Ueberschrift der Kachel. */
@media (max-width: 767px) {
    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap {
        overflow-x: visible;
        background: transparent;
    }

    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table,
    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody,
    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody tr,
    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody td {
        display: block;
        width: 100%;
    }

    /* table-layout: fixed samt Spaltenbreiten der wide-value-Variante greift
       im Blockfluss nicht mehr und wuerde die Kachel nur beschneiden. */
    .ksbam-scope-portal-setting-index .ksbam-settings-table--wide-value {
        table-layout: auto;
    }

    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table thead {
        display: none;
    }

    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody tr {
        background: var(--color-weiss);
        border-radius: var(--radius-boxed);
        box-shadow: var(--div-shadow);
        padding: 1rem;
        margin-bottom: 0.75rem;
    }

    /* !important, weil die generische Regel im Tabellen-Abschnitt
       (.table tbody td) Padding, Rahmen und Hintergrund mit !important setzt. */
    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody td {
        padding: 0.7rem 0 !important;
        background: transparent !important;
        border-bottom: none !important;
    }

    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody td + td {
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody tr > td:first-child {
        padding-top: 0 !important;
    }

    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody tr > td:last-child {
        padding-bottom: 0 !important;
    }

    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-primary);
    }

    /* Aktionen und Werte linksbuendig unter ihrem Label, wie in den Kacheln
       der uebrigen Listen. */
    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody td .justify-content-end {
        justify-content: flex-start !important;
    }

    /* Buttons wie im Card-View: einzeln stehend statt auf Stoss. Die
       Zentrierung im Button kommt aus der Tap-Target-Regel in Abschnitt 9b. */
    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody td .btn-group {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody td .btn-group > .btn {
        margin-left: 0 !important;
        border-radius: var(--radius-boxed) !important;
    }

    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody td .btn-group > .btn svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody td .input-group,
    .ksbam-scope-portal-setting-index .ksbam-settings-table--wide-value tbody td .input-group {
        max-width: none !important;
        width: 100%;
    }

    /* Leerzeile ("noch keine Einstellungen") und die Abstandszeile des
       Tag-Pools sind keine Datensaetze — ohne Kachelrahmen. */
    .ksbam-scope-portal-setting-index .ksbam-settings-table-wrap .table tbody tr:has(> td[colspan]) {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
}

/* --- 16.12 Seite: KP-Projektübersicht (kulturpartner/kulturpartner/projekte) --- */
.ksbam-scope-kp-projekte .ksbam-visibility-meta {
    margin-top: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(210, 183, 154, 0.4);
    color: rgba(32, 26, 23, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    font-size: 0.74rem;
    line-height: 1;
    white-space: nowrap;
}

.ksbam-scope-kp-projekte .ksbam-visibility-meta__icon {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    flex-shrink: 0;
}

.ksbam-scope-kp-projekte .ksbam-visibility-meta__value {
    font-weight: 700;
    color: var(--color-text);
}

.ksbam-scope-kp-projekte .ksbam-visibility-meta.is-public .ksbam-visibility-meta__icon {
    color: var(--color-secondary);
    background: rgba(84, 107, 122, 0.14);
}

.ksbam-scope-kp-projekte .ksbam-visibility-meta.is-shared .ksbam-visibility-meta__icon {
    color: #6f9d84;
    background: rgba(138, 178, 157, 0.16);
}

.ksbam-scope-kp-projekte .ksbam-visibility-meta.is-internal .ksbam-visibility-meta__icon {
    color: #6c559c;
    background: rgba(108, 85, 156, 0.14);
}

/* --- 16.12a Seite: Klassenakte --- */
.klasse-detail-export {
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .klasse-detail-footer__meta,
    .klasse-detail-footer__back {
        width: 100%;
    }

    .klasse-detail-footer__back {
        display: flex;
        justify-content: flex-start;
    }

    .klasse-detail-footer:has(.ksbam-klasse-detail-delete) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center !important;
        column-gap: 1rem !important;
        row-gap: 1rem !important;
    }

    .klasse-detail-footer:has(.ksbam-klasse-detail-delete) .klasse-detail-footer__meta {
        display: contents !important;
    }

    .klasse-detail-footer:has(.ksbam-klasse-detail-delete) .klasse-detail-footer__meta > :nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .klasse-detail-footer:has(.ksbam-klasse-detail-delete) .klasse-detail-footer__meta > :nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .klasse-detail-footer:has(.ksbam-klasse-detail-delete) .klasse-detail-footer__back {
        grid-column: 1;
        grid-row: 2;
    }

    .ksbam-klasse-detail-delete {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .klasse-planungshinweis {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .klasse-planungshinweis__content {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.75rem;
        width: 100%;
    }

    .klasse-planungshinweis__icon {
        grid-column: 1;
        grid-row: 1;
        margin: 0 !important;
        padding: 0 !important;
    }

    .klasse-planungshinweis__icon svg {
        width: 2rem;
        height: 2rem;
    }

    .klasse-planungshinweis__text {
        display: contents;
    }

    .klasse-planungshinweis__text h5 {
        grid-column: 2;
        grid-row: 1;
        margin: 0 !important;
    }

    .klasse-planungshinweis__text p {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .klasse-planungshinweis__action {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .ksbam-klasse-planungshinweis {
        gap: 1rem !important;
        padding: 1.25rem !important;
    }

    .ksbam-klasse-planungshinweis .klasse-planungshinweis__text p {
        margin-top: 0.25rem;
    }

    .ksbam-klasse-planungshinweis .klasse-planungshinweis__action {
        justify-content: center;
    }
}

/* --- 16.13 Seite: KP-Dashboard-Steckbrief (kulturpartner/kulturpartner/dashboard) --- */
.ksbam-scope-kp-dashboard .kp-dashboard-steckbrief,
.ksbam-scope-kp-dashboard .kp-dashboard-steckbrief .cms-content,
.ksbam-scope-kp-dashboard .kp-dashboard-steckbrief .teaser-text {
    font-size: 1rem;
    line-height: 1.5;
}

.ksbam-scope-kp-dashboard .kp-dashboard-steckbrief .cms-content p,
.ksbam-scope-kp-dashboard .kp-dashboard-steckbrief p {
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.ksbam-scope-kp-dashboard .kp-dashboard-steckbrief .cms-content > *:last-child,
.ksbam-scope-kp-dashboard .kp-dashboard-steckbrief > *:last-child {
    margin-bottom: 0 !important;
}

.ksbam-scope-kp-dashboard .kp-dashboard-profile-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ksbam-scope-kp-dashboard .kp-dashboard-profile-edit {
    width: 100%;
}

.ksbam-scope-kp-dashboard .kp-dashboard-profile-stats {
    margin-top: 0.5rem;
}

@media (min-width: 992px) {
    .ksbam-scope-kp-dashboard .kp-dashboard-profile-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 1rem;
    }

    .ksbam-scope-kp-dashboard .kp-dashboard-profile-edit {
        grid-column: 2;
        grid-row: 1;
        width: fit-content;
    }

    .ksbam-scope-kp-dashboard .kp-dashboard-profile-person,
    .ksbam-scope-kp-dashboard .kp-dashboard-steckbrief,
    .ksbam-scope-kp-dashboard .kp-dashboard-profile-stats {
        grid-column: 1 / -1;
    }
}

/* --- 16.13a Seite: Einrichtungs-Dashboard-Steckbrief --- */
.ksbam-scope-einr-dashboard .einr-dashboard-profile-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ksbam-scope-einr-dashboard .einr-dashboard-profile-edit {
    width: 100%;
}

.ksbam-scope-einr-dashboard .einr-dashboard-profile-stats {
    margin-top: 0.5rem;
}

@media (min-width: 992px) {
    .ksbam-scope-einr-dashboard .einr-dashboard-profile-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 1rem;
    }

    .ksbam-scope-einr-dashboard .einr-dashboard-profile-edit {
        grid-column: 2;
        grid-row: 1;
        width: fit-content;
    }

    .ksbam-scope-einr-dashboard .einr-dashboard-profile-person,
    .ksbam-scope-einr-dashboard .einr-dashboard-profile-text,
    .ksbam-scope-einr-dashboard .einr-dashboard-profile-stats {
        grid-column: 1 / -1;
    }
}

/* --- 16.14 Seite: Buchungs-Wizard Abschluss (einrichtung/buchung/wizard/complete) --- */
.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-card {
    height: auto !important;
    min-height: 0;
    align-self: flex-start;
    border-radius: var(--radius-boxed);
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-card--equal {
    height: 100% !important;
    align-self: stretch;
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-notice,
.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-section {
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-boxed);
    background: rgba(255, 255, 255, 0.62);
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-notice__icon {
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-hellsalbei);
    color: var(--color-primary);
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-section {
    padding: 1.25rem;
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-list {
    display: grid;
    gap: 0.9rem;
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-list > div span,
.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-dates span {
    display: block;
    color: rgba(44, 17, 30, 0.62);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-list strong,
.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-dates strong {
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* In der Terminliste ist das Datum keine Beschriftung, sondern gleichwertige
   Information — es steht deshalb in normaler Größe und fett, die Uhrzeit darunter
   mager (Rückmeldung KS:BAM 09.08.2026), analog Wert/Zusatz der Kultur.Klassen-
   Karten. Die übrige Zusammenfassung behält ihr Label-Format. */
.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-dates span {
    color: var(--color-text);
    font-size: inherit;
    text-transform: none;
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-dates strong {
    font-weight: 400;
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-dates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-dates > div {
    padding: 0.9rem 1rem;
    border-radius: var(--ksbam-tile-radius);
    background: var(--color-hellsand);
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-hints {
    padding-left: 1.2rem;
}

.ksbam-scope-einr-buchung-complete .ksbam-booking-complete-hints li + li {
    margin-top: 0.8rem;
}

@media (max-width: 575.98px) {
    .ksbam-scope-einr-buchung-complete .ksbam-booking-complete-notice {
        align-items: flex-start;
    }

    .ksbam-scope-einr-buchung-complete .ksbam-booking-complete-card .ksbam-admin-action--fit {
        width: 100% !important;
    }
}

/* --- 16.15 Seite: Buchung anlegen KSBAM (ksbam/buchung/new) --- */
.ksbam-scope-buchung-new .ksbam-booking-new-card {
    overflow: visible;
}

.ksbam-scope-buchung-new .ksbam-booking-new-card > .bg-sand {
    border-radius: var(--radius-boxed) var(--radius-boxed) 0 0;
}

.ksbam-scope-buchung-new .ksbam-booking-new-card .ts-dropdown {
    z-index: 1080;
}

/* --- 16.16 Partial: Freigabe-Pille in der User-Tabelle (partials/ksbam/user/_table) --- */
/* Eigene helle Variante; über den vorhandenen data-controller gescopt, damit sie
   nicht mit der Vollfarb-Pille der Detailseiten (16.1/16.3) kollidiert. */
[data-controller~="ksbam-user-filter"] .ksbam-freigabe-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid transparent;
    box-shadow: 0 6px 16px rgba(49, 39, 31, 0.08);
}

[data-controller~="ksbam-user-filter"] .ksbam-freigabe-pill.is-freigegeben {
    background: rgba(138, 178, 157, 0.14);
    border-color: rgba(138, 178, 157, 0.28);
    color: #5f8f75;
}

[data-controller~="ksbam-user-filter"] .ksbam-freigabe-pill.is-angefragt {
    background: rgba(255, 193, 7, 0.16);
    border-color: rgba(255, 193, 7, 0.3);
    color: #8a6500;
}

[data-controller~="ksbam-user-filter"] .ksbam-freigabe-pill__label {
    padding: 0.34rem 0.68rem;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

[data-controller~="ksbam-user-filter"] .ksbam-freigabe-pill__action {
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.32);
    color: currentColor;
    width: 2rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

[data-controller~="ksbam-user-filter"] .ksbam-freigabe-pill__action:hover,
[data-controller~="ksbam-user-filter"] .ksbam-freigabe-pill__action:focus {
    background: rgba(255, 255, 255, 0.52);
}

/* --- 16.17 Global: Termin-Collection im Buchungsprozess --- */
/* Vereint die drei früher inline gepflegten Blöcke aus
   {ksbam,kulturpartner,einrichtung}/…/_zeiten_collection.html.twig.
   Die Zusammenführung ist verlustfrei, weil die Unterschiede sich selbst
   begrenzen: .workflow-zeit-row--invalid wird ausschließlich von
   ksbam/buchung/workflow/step.html.twig gesetzt, und die Hover-Regel hängt an
   .workflow-zeiten-add-action, das der Kulturpartner-Button nicht trägt.

   Die Spaltenzahl hing früher an {% if not isReadonly %} mitten im
   grid-template-columns. Sie über --zeit-col-action: 0px zu lösen wäre falsch:
   column-gap erzeugt auch zu einer Nullspalte einen Abstand und würde die
   Datumsspalte schmaler machen. Daher zwei Spaltendefinitionen. */
.workflow-zeiten {
    --zeit-col-datum: minmax(150px, 1fr);
    --zeit-col-time: 110px;
    --zeit-col-action: 38px;
    --zeit-gap: 0.5rem;
}

.workflow-zeiten .workflow-zeiten-header,
.workflow-zeiten .workflow-zeit-row {
    display: grid;
    grid-template-columns: var(--zeit-col-datum) var(--zeit-col-time) var(--zeit-col-time) var(--zeit-col-action);
    column-gap: var(--zeit-gap);
    align-items: center;
}

.workflow-zeiten.is-readonly .workflow-zeiten-header,
.workflow-zeiten.is-readonly .workflow-zeit-row {
    grid-template-columns: var(--zeit-col-datum) var(--zeit-col-time) var(--zeit-col-time);
}

.workflow-zeiten .workflow-zeit-row {
    margin-bottom: 0.5rem;
}

/* Unvollständig ausgefüllte Zeile beim Speichern hervorheben (siehe step.html.twig). */
.workflow-zeiten .workflow-zeit-row.workflow-zeit-row--invalid {
    outline: 2px solid var(--color-beere, #C05665);
    outline-offset: 3px;
    border-radius: 4px;
}

.workflow-zeiten .workflow-zeiten-header {
    padding: 0 0.5rem 0.25rem 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.workflow-zeiten .workflow-zeiten-add-action:hover,
.workflow-zeiten .workflow-zeiten-add-action:focus {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-weiss) !important;
}

.workflow-zeit-remove-action__label {
    display: none;
}

/* Responsive: unter 640px stapeln, Header ausblenden */
@media (max-width: 639.98px) {
    .workflow-zeiten .workflow-zeiten-header { display: none; }
    .workflow-zeiten .workflow-zeit-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0.5rem;
        margin-bottom: 1.25rem;
    }
    .workflow-zeiten.is-readonly .workflow-zeit-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .workflow-zeiten .workflow-zeit-row > :nth-child(1) { grid-column: 1 / -1; }
    .workflow-zeiten .workflow-zeit-row > :nth-child(2) { grid-column: 1 / 2; }
    .workflow-zeiten .workflow-zeit-row > :nth-child(3) { grid-column: 2 / 3; }
    /* Im Readonly-Fall rendert die Schleife kein viertes Kind (der Entfernen-Knopf
       steht in {% if not isReadonly %}), die Regel greift dort also nie. */
    .workflow-zeiten .workflow-zeit-row > :nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
    }

    .workflow-zeiten .workflow-zeit-row input,
    .workflow-zeiten .workflow-zeit-row .form-control {
        width: 100%;
    }

    .workflow-zeiten .workflow-zeit-remove-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .workflow-zeit-remove-action__label {
        display: inline;
    }
}

/* --- 16.18 Global: Kostenverteilung im Buchungs-Workflow --- */
/* Aus ksbam/buchung/workflow/_kostenverteilung.html.twig; rein statisch.
   Nur ein Verwender, aber als Komponente global gehalten wie 16.17. */
.workflow-verteilung {
    --verteil-col-klasse: minmax(150px, 1fr);
    --verteil-col-anteil: 130px;
    --verteil-col-kubis: 120px;
    --verteil-gap: 0.5rem;
}

.workflow-verteilung .workflow-verteilung-header,
.workflow-verteilung .workflow-verteilung-row,
.workflow-verteilung .workflow-verteilung-summe {
    display: grid;
    grid-template-columns: var(--verteil-col-klasse) var(--verteil-col-anteil) var(--verteil-col-kubis);
    column-gap: var(--verteil-gap);
    align-items: center;
}

.workflow-verteilung .workflow-verteilung-row { margin-bottom: 0.4rem; }

.workflow-verteilung .workflow-verteilung-header {
    padding: 0 0.25rem 0.25rem;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.workflow-verteilung .verteil-kubis { font-variant-numeric: tabular-nums; }

.workflow-verteilung .workflow-verteilung-summe {
    border-top: 1px solid var(--color-hellsand, #e5e0d8);
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    font-weight: 600;
}

.workflow-verteilung .verteil-summe--invalid { color: var(--color-beere, #C05665); }

@media (max-width: 575.98px) {
    .workflow-verteilung .workflow-verteilung-header { display: none; }
    .workflow-verteilung .workflow-verteilung-row,
    .workflow-verteilung .workflow-verteilung-summe {
        grid-template-columns: 1fr auto auto;
        column-gap: 0.75rem;
    }
}

/* --- 16.19 Global: Hintergrundbild der Einstellungsseiten --- */
/* In allen vier Einstellungsseiten byte-identisch gepflegt gewesen.
   url() relativ statt asset(): AssetMapper schreibt beides auf denselben
   versionierten Pfad um — nachweisbar an den Schriften weiter oben. */
.ksbam-settings-bg {
    background-image: url("../images/img/background_main-05mke0S.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* --- 16.20 Seite: Portal-Einstellung anlegen (ksbam/portal_setting/new) --- */
.ksbam-setting-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.ksbam-setting-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(210, 183, 154, 0.5);
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(140, 109, 78, 0.12);
}

@media (max-width: 991.98px) {
    .ksbam-setting-meta {
        justify-content: flex-start;
    }
}


/* --- 16.21 Seite: Portal-Einstellung bearbeiten (ksbam/portal_setting/edit) --- */
.ksbam-setting-edit-view .section-content {
    padding-bottom: 3rem;
}

.ksbam-setting-editor,
.ksbam-template-help {
    background: rgba(255, 255, 255, 0.78);
}

.ksbam-setting-card-head {
    padding: 1.45rem 1.7rem 1.2rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.62);
    border-bottom: 1px solid rgba(210, 183, 154, 0.34);
}

.ksbam-setting-card-head h5 {
    margin: 0;
    line-height: 1.2;
}

.ksbam-setting-card-head p {
    margin-top: 0.45rem;
}

.ksbam-setting-card-body {
    padding: 1.7rem;
}

.ksbam-setting-editor .ksbam-setting-card-body {
    padding: 2rem 2.6rem 2.4rem;
}

.ksbam-template-help .ksbam-setting-card-body {
    padding-top: 1.45rem;
}

.ksbam-mail-editor-field {
    margin-top: 0.25rem;
}

.ksbam-setting-editor .ql-toolbar.ql-snow {
    border: 1px solid rgba(210, 183, 154, 0.7);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, 0.82);
}

.ksbam-setting-editor .ql-container.ql-snow {
    border: 1px solid rgba(210, 183, 154, 0.7);
    border-radius: 0 0 18px 18px;
    background: rgba(255, 255, 255, 0.9);
    font-family: inherit;
    font-size: 1rem;
}

.ksbam-setting-editor .ql-editor {
    min-height: 400px;
    color: var(--color-text);
}

.ksbam-setting-editor textarea.form-control {
    min-height: 360px;
    border-radius: 18px;
    border-color: rgba(210, 183, 154, 0.7);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: none;
}

.ksbam-variable-list {
    display: grid;
    gap: 0.65rem;
}

.ksbam-variable-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(210, 183, 154, 0.42);
}

.ksbam-variable-item code {
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--color-beere);
    font-weight: 700;
}

.ksbam-template-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 16px;
    background: rgba(138, 178, 157, 0.14);
    color: var(--color-text);
    font-size: 0.88rem;
}

.ksbam-template-note__icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(138, 178, 157, 0.22);
    color: var(--color-salbei);
}

@media (max-width: 991.98px) {
    .ksbam-setting-card-head {
        padding: 1.25rem 1.35rem 1rem;
    }

    .ksbam-setting-card-body,
    .ksbam-setting-editor .ksbam-setting-card-body {
        padding: 1.35rem;
    }
}


/* --- 16.22 Seite: Seiten-Editor (ksbam/seite/edit) --- */
.ksbam-page-editor,
.ksbam-page-switcher {
    background: rgba(255, 255, 255, 0.78);
}

.ksbam-page-switcher__head {
    padding: 1.45rem 1.7rem 1.2rem;
    background: rgba(255, 255, 255, 0.62);
    border-bottom: 1px solid rgba(210, 183, 154, 0.34);
}

.ksbam-page-switcher__body {
    padding: 1.45rem 1.7rem 1.7rem;
}

.ksbam-page-link-list {
    display: grid;
    gap: 0.7rem;
}

.ksbam-page-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 60px;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(210, 183, 154, 0.42);
    color: var(--color-text);
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.ksbam-page-link:hover,
.ksbam-page-link:focus {
    color: var(--color-text);
    border-color: rgba(var(--color-primary-rgb), 0.28);
    box-shadow: 0 12px 26px rgba(140, 109, 78, 0.14);
    transform: translateY(-1px);
}

.ksbam-page-link.is-current {
    background: rgba(var(--color-primary-rgb), 0.1);
    border-color: rgba(var(--color-primary-rgb), 0.3);
}

.ksbam-page-link__icon {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--color-primary);
    flex-shrink: 0;
}

.ksbam-page-link__content {
    min-width: 0;
}

.ksbam-page-link__title {
    display: block;
    font-weight: 800;
    line-height: 1.2;
}

.ksbam-page-link__meta {
    display: block;
    margin-top: 0.18rem;
    color: rgba(32, 26, 23, 0.62);
    font-size: 0.78rem;
    font-weight: 700;
}

.ksbam-page-link__arrow {
    width: 1rem;
    height: 1rem;
    color: rgba(32, 26, 23, 0.45);
}


/* --- 16.23 Seite: Tag-Pool bearbeiten (ksbam/tag_pool/edit) --- */
.ksbam-tag-orientation {
    background: rgba(255, 255, 255, 0.78);
}

.ksbam-tag-orientation__head {
    padding: 1.45rem 1.7rem 1.2rem;
    background: rgba(255, 255, 255, 0.62);
    border-bottom: 1px solid rgba(210, 183, 154, 0.34);
}

.ksbam-tag-orientation__body {
    padding: 1.45rem 1.7rem 1.7rem;
}

.ksbam-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.ksbam-tag-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(210, 183, 154, 0.48);
    color: var(--color-text);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.ksbam-tag-chip.is-current {
    background: rgba(173, 31, 100, 0.12);
    border-color: rgba(173, 31, 100, 0.28);
    color: var(--color-beere);
}

/* --- 16.24 Global: Hintergrundbilder und Subhero-Maße --- */
/* Ersetzt die früher an jeder Section gesetzten style-Attribute.

   Das Bild ist projektweit dasselbe. Der Wert wird direkt auf den lesenden
   Elementen gesetzt statt auf der Section: geprüft ist, dass jedes dieser
   Elemente den Wert bisher auch bekommen hat (53 .ksbam-backdrop zu 54 Settern,
   10 von 10 .ksbam-card-img) — es entsteht also nirgends ein Bild, wo vorher
   keines war. url() relativ; AssetMapper löst das wie asset() auf. */
.ksbam-backdrop,
.section-hero {
    --hero-bg: url("../images/img/background_main-05mke0S.png");
}

.ksbam-card-img {
    --card-bg: url("../images/img/background_main-05mke0S.png");
}

.booking-hero {
    background-image: url("../images/img/background_main-05mke0S.png");
}

/* Vollflächiges Hintergrundbild auf Sections, die keinen .ksbam-backdrop haben
   (Anmeldung, Registrierung, Passwort-Zurücksetzen, einzelne Übersichten).
   Dort stand der gesamte Block bisher im style-Attribut der Section. */
.ksbam-hero-image {
    background-image: url("../images/img/background_main-05mke0S.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.ksbam-hero-image--fixed { background-attachment: fixed; }
.ksbam-hero-image--center { display: flex; align-items: center; }
.ksbam-hero-image--top { display: flex; align-items: flex-start; }
.ksbam-hero-image--padded { padding-top: 160px; padding-bottom: 3rem; }

/* Höhe und Grundfarbe des Subheros.
   BEWUSST OHNE !important: app.css setzt --subhero-bg-height für
   .ksbam-subhero-info in zwei Media Queries per !important (240px ab 1024px,
   180px ab 767px). Der frühere Inline-Wert wurde davon geschlagen; mit
   !important würden diese Klassen die Media Queries überstimmen und die
   Darstellung auf schmalen Fenstern verändern.
   Zwei Klassen im Selektor, damit sie gegen .ksbam-error-hero (0,0,1,0)
   gewinnen — so wie der Inline-Style es tat. */
.section-subhero-dynamic.subhero-h300 { --subhero-bg-height: 300px; }
.section-subhero-dynamic.subhero-h600 { --subhero-bg-height: 600px; }
.section-subhero-dynamic.subhero-h650 { --subhero-bg-height: 650px; }
.section-subhero-dynamic.subhero-h760 { --subhero-bg-height: 760px; }
.section-subhero-dynamic.subhero-h780 { --subhero-bg-height: 780px; }
.section-subhero-dynamic.subhero-h900 { --subhero-bg-height: 900px; }

.section-subhero-dynamic.subhero-c-hellsand   { --subhero-base-color: var(--color-hellsand); }
.section-subhero-dynamic.subhero-c-honig      { --subhero-base-color: var(--color-honig); }
.section-subhero-dynamic.subhero-c-salbei     { --subhero-base-color: var(--color-salbei); }
.section-subhero-dynamic.subhero-c-hellsalbei { --subhero-base-color: var(--color-hellsalbei); }

/* --- 16.25 Global: Komponenten aus wiederkehrenden Inline-Maßen --- */

/* Marker der Buchungs-Timeline; stand an sieben Stellen identisch inline. */
.ksbam-timeline-marker {
    width: 32px;
    height: 32px;
    left: -16px;
    z-index: 2;
}

/* Kleine Schriftgrade, die an vielen Stellen einzeln gesetzt waren.
   Mit !important, weil sie zuvor als Inline-Wert auch Bootstraps
   .badge { font-size: .75em } geschlagen haben. */
.ksbam-fs-75 { font-size: 0.75rem !important; }
.ksbam-fs-85 { font-size: 0.85rem !important; }

/* Bildfläche der Projektkarten (sieben gleichlautende Verwender). */
.ksbam-card-img-box {
    height: 100%;
    min-height: 300px;
}

/* Mindesthöhen für zentrierte Inhaltsblöcke. */
.ksbam-minh-60 { min-height: 60px; }
.ksbam-minh-75 { min-height: 75px; }

/* --- 16.26 Global: Zustände, die früher inline gesetzt wurden --- */

/* Formularfelder, die der Stimulus-Controller ksbam-portal-setting-form
   ein- und ausblendet. BEWUSST OHNE !important: der Controller setzt
   element.style.display direkt; ein !important hier würde ihn aushebeln
   und die Umschaltung tot legen. */
.ksbam-field-hidden {
    display: none;
}

/* Schaltfläche „fortführen" im Buchungs-Workflow. Template und Controller
   setzen `disabled` immer zusammen mit opacity/pointer-events — der Zustand
   lässt sich deshalb allein aus :disabled ableiten. */
[data-ksbam-buchung-step-proceed-target="proceedButton"]:disabled {
    opacity: .55;
    pointer-events: none;
}

/* Balkenfüllung des Wizard-Fortschritts (Breite kommt aus .ksbam-pct-*). */
.ksbam-progress-fill {
    height: 100%;
    transition: width 0.3s ease;
}

/* Farbpunkt in HTML-Tooltips (Statuslegende der Tabellen). Die Farbe kommt
   über die vorhandenen bg-*-Utilities; hier nur die Form. Bootstrap fügt den
   Tooltip-Inhalt per innerHTML ein, class ist in der allowList erlaubt. */
.ksbam-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

/* Prozentbreiten für Fortschrittsbalken. Die Werte sind serverseitig ganze
   Zahlen von 0 bis 100 (Klasse::getBudgetProzent*, gerundeter Wizard-Schritt),
   deshalb eine feste Klasse je Wert statt eines style-Attributs. Das ist
   redundanter Text, der sich stark komprimiert — dafür entfällt das letzte
   dynamische Inline-Styling an dieser Stelle. */
.ksbam-pct-0 { width: 0% !important; }
.ksbam-pct-1 { width: 1% !important; }
.ksbam-pct-2 { width: 2% !important; }
.ksbam-pct-3 { width: 3% !important; }
.ksbam-pct-4 { width: 4% !important; }
.ksbam-pct-5 { width: 5% !important; }
.ksbam-pct-6 { width: 6% !important; }
.ksbam-pct-7 { width: 7% !important; }
.ksbam-pct-8 { width: 8% !important; }
.ksbam-pct-9 { width: 9% !important; }
.ksbam-pct-10 { width: 10% !important; }
.ksbam-pct-11 { width: 11% !important; }
.ksbam-pct-12 { width: 12% !important; }
.ksbam-pct-13 { width: 13% !important; }
.ksbam-pct-14 { width: 14% !important; }
.ksbam-pct-15 { width: 15% !important; }
.ksbam-pct-16 { width: 16% !important; }
.ksbam-pct-17 { width: 17% !important; }
.ksbam-pct-18 { width: 18% !important; }
.ksbam-pct-19 { width: 19% !important; }
.ksbam-pct-20 { width: 20% !important; }
.ksbam-pct-21 { width: 21% !important; }
.ksbam-pct-22 { width: 22% !important; }
.ksbam-pct-23 { width: 23% !important; }
.ksbam-pct-24 { width: 24% !important; }
.ksbam-pct-25 { width: 25% !important; }
.ksbam-pct-26 { width: 26% !important; }
.ksbam-pct-27 { width: 27% !important; }
.ksbam-pct-28 { width: 28% !important; }
.ksbam-pct-29 { width: 29% !important; }
.ksbam-pct-30 { width: 30% !important; }
.ksbam-pct-31 { width: 31% !important; }
.ksbam-pct-32 { width: 32% !important; }
.ksbam-pct-33 { width: 33% !important; }
.ksbam-pct-34 { width: 34% !important; }
.ksbam-pct-35 { width: 35% !important; }
.ksbam-pct-36 { width: 36% !important; }
.ksbam-pct-37 { width: 37% !important; }
.ksbam-pct-38 { width: 38% !important; }
.ksbam-pct-39 { width: 39% !important; }
.ksbam-pct-40 { width: 40% !important; }
.ksbam-pct-41 { width: 41% !important; }
.ksbam-pct-42 { width: 42% !important; }
.ksbam-pct-43 { width: 43% !important; }
.ksbam-pct-44 { width: 44% !important; }
.ksbam-pct-45 { width: 45% !important; }
.ksbam-pct-46 { width: 46% !important; }
.ksbam-pct-47 { width: 47% !important; }
.ksbam-pct-48 { width: 48% !important; }
.ksbam-pct-49 { width: 49% !important; }
.ksbam-pct-50 { width: 50% !important; }
.ksbam-pct-51 { width: 51% !important; }
.ksbam-pct-52 { width: 52% !important; }
.ksbam-pct-53 { width: 53% !important; }
.ksbam-pct-54 { width: 54% !important; }
.ksbam-pct-55 { width: 55% !important; }
.ksbam-pct-56 { width: 56% !important; }
.ksbam-pct-57 { width: 57% !important; }
.ksbam-pct-58 { width: 58% !important; }
.ksbam-pct-59 { width: 59% !important; }
.ksbam-pct-60 { width: 60% !important; }
.ksbam-pct-61 { width: 61% !important; }
.ksbam-pct-62 { width: 62% !important; }
.ksbam-pct-63 { width: 63% !important; }
.ksbam-pct-64 { width: 64% !important; }
.ksbam-pct-65 { width: 65% !important; }
.ksbam-pct-66 { width: 66% !important; }
.ksbam-pct-67 { width: 67% !important; }
.ksbam-pct-68 { width: 68% !important; }
.ksbam-pct-69 { width: 69% !important; }
.ksbam-pct-70 { width: 70% !important; }
.ksbam-pct-71 { width: 71% !important; }
.ksbam-pct-72 { width: 72% !important; }
.ksbam-pct-73 { width: 73% !important; }
.ksbam-pct-74 { width: 74% !important; }
.ksbam-pct-75 { width: 75% !important; }
.ksbam-pct-76 { width: 76% !important; }
.ksbam-pct-77 { width: 77% !important; }
.ksbam-pct-78 { width: 78% !important; }
.ksbam-pct-79 { width: 79% !important; }
.ksbam-pct-80 { width: 80% !important; }
.ksbam-pct-81 { width: 81% !important; }
.ksbam-pct-82 { width: 82% !important; }
.ksbam-pct-83 { width: 83% !important; }
.ksbam-pct-84 { width: 84% !important; }
.ksbam-pct-85 { width: 85% !important; }
.ksbam-pct-86 { width: 86% !important; }
.ksbam-pct-87 { width: 87% !important; }
.ksbam-pct-88 { width: 88% !important; }
.ksbam-pct-89 { width: 89% !important; }
.ksbam-pct-90 { width: 90% !important; }
.ksbam-pct-91 { width: 91% !important; }
.ksbam-pct-92 { width: 92% !important; }
.ksbam-pct-93 { width: 93% !important; }
.ksbam-pct-94 { width: 94% !important; }
.ksbam-pct-95 { width: 95% !important; }
.ksbam-pct-96 { width: 96% !important; }
.ksbam-pct-97 { width: 97% !important; }
.ksbam-pct-98 { width: 98% !important; }
.ksbam-pct-99 { width: 99% !important; }
.ksbam-pct-100 { width: 100% !important; }

/* Der Footer dieses Layouts überlappt die Sektion darüber um 50px — auch auf
   schmalen Fenstern, wo `@media (max-width: 767px) footer { margin-top: -30px }`
   greifen würde. Das stand zuvor als Inline-Wert am Element und hat die Regel
   überschrieben; als Klasse gewinnt es weiterhin (0,0,1,0 gegen 0,0,0,1). */
.ksbam-footer-overlap {
    margin-top: -50px;
}

/* --- 16.27 Global: verbliebene Maße aus Inline-Styles --- */

/* Kleinere Variante des Tabellen-Avatars. .table-avatar bringt 45px und
   object-fit bereits mit; hier wird nur die Größe übersteuert. */
.table-avatar--sm { width: 40px !important; height: 40px !important; }

/* Quadratische Flächen für Kreise, Initialen und Symbolfelder. */
.ksbam-box-40 { width: 40px; height: 40px; }
.ksbam-box-44 { width: 44px; height: 44px; }
.ksbam-box-45 { width: 45px; height: 45px; }
.ksbam-box-45-fix { width: 45px; height: 45px; min-width: 45px; }
.ksbam-box-48 { width: 48px; height: 48px; }
.ksbam-box-48-lg { width: 48px; height: 48px; font-size: 1.1rem; }
.ksbam-box-52 { width: 52px; height: 52px; }

/* Balkenhöhen (Bootstrap .progress). */
.ksbam-progress-6 { height: 6px; }
.ksbam-progress-10 { height: 10px; }

/* Verbindungslinie zwischen den Schritten des Buchungs-Indikators. */
.ksbam-step-line { height: 3px; z-index: 0; }
.ksbam-step-line--w50 { width: 50%; }
.ksbam-step-line--w66 { width: 66.66%; }
.ksbam-step-line--w80 { width: 80%; }

/* Versalien-Label über Formularabschnitten. */
.ksbam-label-xs { font-size: 0.7rem; letter-spacing: 0.5px; }
.ksbam-label-sm { font-size: 0.75rem; letter-spacing: 0.5px; }
.ksbam-text-sm-lh { font-size: 0.8rem; line-height: 1.3; }

/* Breitenbegrenzungen. */
.ksbam-mw-150-center { max-width: 150px; margin: 0 auto; }
.ksbam-mw-260 { max-width: 260px; }
.ksbam-mw-450 { max-width: 450px; }
.ksbam-mw-34 { max-width: 34rem; }
.ksbam-minw-200 { min-width: 200px; }

/* Einzelfälle mit genau einem Verwender. */
.ksbam-z-1 { z-index: 1; }
.ksbam-center-x { margin: 0 auto; }
.ksbam-inline-block { display: inline-block; }
.ksbam-radius-boxed { border-radius: var(--radius-boxed); }
.ksbam-card-img--350 { min-height: 350px; }
.ksbam-empty-icon { font-size: 4rem; }
.ksbam-pin-bottom-left { bottom: 0.5rem; left: 0; }

/* =========================================================
   17. ICON-GRÖSSEN
   =========================================================
   Ersetzt die früher an jedem ux_icon()-Aufruf gesetzten style-Attribute.

   Warum !important: ux_icons gibt width/height als Präsentationsattribute
   (1em) aus — die haben Spezifität 0 und werden von jeder Klasse geschlagen.
   Es gibt in dieser Datei aber auch Regeln wie
   `.ksbam-nav .nav-link svg { width: 18px }` (0,0,2,1), die eine schlichte
   Utility-Klasse (0,0,1,0) überstimmen würden. Der frühere Inline-Style hat
   sie geschlagen; !important stellt genau dieses Verhalten wieder her.
   Für width/height an svg existiert projektweit kein !important, das hier
   überstimmt würde — die Umstellung ist damit ausgabeneutral.

   Namensschema:
     ksbam-icn-<n>    quadratisch (width und height)
     ksbam-icn-w<n>   nur Breite; die Höhe bleibt beim 1em-Attribut
     ksbam-icn-fs<n>  über die Schriftgröße skaliert
   ========================================================= */

.ksbam-icn-12 { width: 12px !important; height: 12px !important; }
.ksbam-icn-14 { width: 14px !important; height: 14px !important; }
.ksbam-icn-16 { width: 16px !important; height: 16px !important; }
.ksbam-icn-18 { width: 18px !important; height: 18px !important; }
.ksbam-icn-20 { width: 20px !important; height: 20px !important; }
.ksbam-icn-22 { width: 22px !important; height: 22px !important; }
.ksbam-icn-24 { width: 24px !important; height: 24px !important; }
.ksbam-icn-28 { width: 28px !important; height: 28px !important; }
.ksbam-icn-30 { width: 30px !important; height: 30px !important; }
.ksbam-icn-32 { width: 32px !important; height: 32px !important; }
.ksbam-icn-40 { width: 40px !important; height: 40px !important; }
.ksbam-icn-60 { width: 60px !important; height: 60px !important; }
.ksbam-icn-65 { width: 65px !important; height: 65px !important; }
.ksbam-icn-70 { width: 70px !important; height: 70px !important; }
.ksbam-icn-80 { width: 80px !important; height: 80px !important; }
.ksbam-icn-86 { width: 86px !important; height: 86px !important; }
.ksbam-icn-100 { width: 100px !important; height: 100px !important; }
.ksbam-icn-125 { width: 125px !important; height: 125px !important; }

.ksbam-icn-125em { width: 1.25em !important; height: 1.25em !important; }

.ksbam-icn-w12 { width: 12px !important; }
.ksbam-icn-w14 { width: 14px !important; }
.ksbam-icn-w16 { width: 16px !important; }
.ksbam-icn-w18 { width: 18px !important; }
.ksbam-icn-w20 { width: 20px !important; }
.ksbam-icn-w22 { width: 22px !important; }
.ksbam-icn-w24 { width: 24px !important; }

.ksbam-icn-fs2 { font-size: 2rem !important; }

/* Führungs-Icon in Fließtext: sitzt auf der ersten Zeile und schrumpft nicht. */
.ksbam-icn-lead {
    width: 1.1em !important;
    height: 1.1em !important;
    flex-shrink: 0;
    margin-top: .15em;
}