/* ==========================================================================
   client.css — ESM Mieterportal (cms_id=71)
   Client-spezifische Overrides fuer ANOXA-Base-CSS
   Stand: 2026-04-29 · Modern-Red Redesign · Session 1

   --------------------------------------------------------------------------
   ARCHITEKTUR-PRINZIP
   --------------------------------------------------------------------------
   - Selektoren mit `body`-Prefix fuer hoehere Spezifitaet gegen ANOXA-Base
     (cloud.anoxa.ai/lib/css/client.css.php, cross-tenant, nicht editierbar).
   - !important nur dort, wo Base-CSS / frontend.addon.php ueberschrieben
     werden muss (z.B. config_container_breite, header-position).
   - Design-Tokens als CSS-Variablen in :root (--bk-red, --bk-ink, etc.).
   - Icons immer `fa-sharp fa-regular` (FontAwesome 7 Sharp Pro).
   - Fonts: `medium` (Headlines bold) / `standard` (Body) / `this` (Light) / `fat` (unused).

   --------------------------------------------------------------------------
   INHALTSVERZEICHNIS  (wird laufend gepflegt)
   --------------------------------------------------------------------------

   FOUNDATION (Session 1 — diese Datei, ab hier)
     0. Design-Tokens (:root)
     1. Volle Breite (override config_container_breite)
     2. Content-Header (.content_header · Logo · Sprache · Burger)
     3. Nav-Overlay (#nav-overlay · Burger-Menue)
     4. Misc-Reset (.videocontainer · .addon_video · .blue)

   LEGACY (noch nicht refaktoriert — wird stufenweise aufgeraeumt)
     - Newsletter / Login-Info
     - Werbeflaechen / Buchung
     - Wikisuche / Mieterhandbuch
     - Uebersicht / Modul-Nav (.uebersicht · .navi_left · .user_daten)
     - Mieterprofil / Form-Felder (.formular · .mieter_felder)
     - Umfrage / Mobile MQs

   ========================================================================== */


/* ==========================================================================
   0. DESIGN-TOKENS
   ========================================================================== */

:root{
  /* Brand — ESM Magenta (urspr. BIKINI-Rot, mandantenspezifisch ueberschrieben) */
  --bk-red:           #E6197B;     /* ESM-Magenta · CTA, Akzent */
  --bk-red-soft:      #FCE4F0;     /* Pink-Soft · Hover-Backgrounds */
  --bk-red-deep:      #B81263;     /* Magenta-Deep · Hover-States */

  /* Tinten */
  --bk-ink:           #151515;     /* Body-Schwarz */
  --bk-ink-soft:      #4A4A4A;
  --bk-muted:         #767676;
  --bk-line:          #E2E2E2;

  /* Flaechen */
  --bk-bg:            #F5F5F5;
  --bk-surface:       #FFFFFF;
  --bk-surface-cool:  #EFEFEF;

  /* Layout */
  --bk-content-pad:   32px;        /* Linker/rechter Innenabstand bei Full-Width */
  --bk-header-h:      80px;        /* Header-Hoehe */
}


/* ==========================================================================
   1. VOLLE BREITE
   Ueberschreibt config_container_breite aus frontend.addon.php (DB-Wert ist
   pro CMS einmalig — Mieterportal nutzt aber die volle Viewport-Breite).
   ========================================================================== */

body main#wrapper{
  max-width:none !important;
  width:100% !important;
  left:0 !important;
  margin:0 !important;
  padding:0 !important;
  padding-top:var(--bk-header-h) !important;  /* Platz fuer fixed Header */
  transform:none !important;
}

body main > section,
body .section,
body .onesection{
  max-width:none !important;
  padding-left:var(--bk-content-pad) !important;
  padding-right:var(--bk-content-pad) !important;
}

/* Erste Section direkt unter dem Header — edge-to-edge, kein DB-Margin.
   frontend.addon.php setzt fuer `main > section:first-of-type` aus DB:
     margin: {config_container_first_margin}    (z.B. 180px 0 150px)
     padding: {config_container_first_padding}
   — fuer die Mieternav-Section wollen wir aber direkten Anschluss an den
   Header und edge-to-edge Topbar/Card. */
body main > section:first-of-type{
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
}

body header{
  max-width:none !important;
  width:100% !important;
  left:0 !important;
  transform:none !important;
}


/* ==========================================================================
   2. CONTENT-HEADER  (Logo · Sprache-Pill · Burger)
   Markup: lib/php/content/__navigation.php (<header class="content_header">)
   ========================================================================== */

.content_header{
  display:flex;
  align-items:center;
  height:var(--bk-header-h);
  padding:0 var(--bk-content-pad);
  background:#000;                  /* ESM-Frontend-Style: schwarzer Header */
  color:#fff;
}

/* Logo links */
#header_logo,
.header_logo{
  display:inline-flex;
  align-items:center;
  height:100%;
  flex:0 0 auto;
  text-decoration:none;
}
/* Logo-Bild zurueck in den natuerlichen Flex-Flow holen.
   ANOXA frontend.addon.php setzt fuer BIKINI (config_logo_ausrichtung=center)
   `#header_logo img { position:absolute !important; left:50%; transform:translateX(-50%); top:35px; max-height:Xpx; }`
   — wir wollen das Bild stattdessen als Flex-Item im Header sitzen haben.
   Wichtig: explizite `height` (nicht nur max-height), sonst collapsed das
   SVG im Flex-Container auf 0x0. */
.content_header #header_logo img,
.content_header .header_logo img{
  position:static !important;
  top:auto !important;
    filter:none;                    /* SVG ist weiss — passt auf schwarzem Header (kein invert noetig) */
  left:auto !important;
  transform:none !important;
  margin:0 !important;
  height:50px !important;
  max-height:none !important;
  width:auto !important;
  max-width:none !important;
  display:block;
}

/* Sprachwechsel als Pill — schiebt sich nach rechts (margin-left:auto).
   ANOXA frontend.css setzt `.language_select { position:fixed; display:inline-block;
   font-size:24px; height:50px; }` — wir resetten das im content_header-Kontext. */
.content_header .language_select{
  position:static !important;
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  height:auto;
  line-height:1;
  font-size:inherit;
  padding:0;
  z-index:auto;
}
.content_header .language_select a{
  display:inline-flex; align-items:center;
  height:32px;
  padding:0 14px;
  font-family:standard, sans-serif;
  font-size:11px; font-weight:700; letter-spacing:0.1em; line-height:1;
  color:rgba(255,255,255,0.80);
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:999px;
  text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.content_header .language_select a:hover{
  background:rgba(255,255,255,0.20);
  color:#fff;
  border-color:rgba(255,255,255,0.40);
}

/* Burger-Button — 40x40, ganz rechts, vertikal zentriert.
   ANOXA-Base setzt fuer manche Header-Elemente position:fixed — sicherheitshalber
   resetten + align-self:center fuer saubere Vertikal-Zentrierung im Flex-Header. */
.content_header .nav-toggle{
  position:static !important;
  top:auto !important;
  right:auto !important;
  width:40px; height:40px; padding:0;
  margin-left:12px;
  background:transparent; border:1px solid transparent; border-radius:9px;
  display:inline-grid; place-items:center;
  align-self:center;
  cursor:pointer;
  flex:0 0 auto;
  transition:background .15s ease, border-color .15s ease;
}
.content_header .nav-toggle:hover{
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.20);
}
.content_header .nav-toggle img{
  width:22px; height:22px; display:block;
  filter:none;                       /* SVG ist weiss — passt auf schwarzem Header */
  transition:filter .15s ease;
}
.content_header .nav-toggle .nav-toggle__close{
  font-size:18px; color:#fff;        /* ESM: weiss auf schwarzem Header (vorher var(--bk-ink), war unsichtbar) */
}


/* ==========================================================================
   3. NAV-OVERLAY  (Burger-Menue als Glass-Panel von rechts)
   Markup: lib/php/content/__navigation.php (<nav class="nav-overlay" id="nav-overlay">)
   Hinweis: ANOXA frontend.addon.php setzt aus DB:
     .nav-overlay { margin, width, background, font-family }
     .nav-overlay ul { max-width }
     .nav-overlay ul li a { padding, margin, background, color, font-size, line-height }
   Wir overriden Width und font-size mit !important, weil DB-Defaults grosszuegig sind.
   ========================================================================== */

#nav-overlay.nav-overlay{
  width:320px !important;
  max-width:90vw;
  margin:0 !important;              /* ESM: ANOXA-Base setzt aus DB margin (20px 20px 0 0) — wir wollen flush an top:80px right:0 */
  background:rgba(255,255,255,0.96) !important;
  -webkit-backdrop-filter:saturate(180%) blur(14px);
          backdrop-filter:saturate(180%) blur(14px);
  border-left:1px solid var(--bk-line);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,0.25);
  color:var(--bk-ink);
}
#nav-overlay ul{
  list-style:none; padding:20px 12px; margin:0 !important;
  max-width:none !important;
  display:flex; flex-direction:column; gap:1px;
}
#nav-overlay li{
  list-style:none; padding:0; margin:0;
  background:none; border:0;
}
#nav-overlay a{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px !important;
  margin:0 !important;
  font-family:standard, sans-serif;
  font-size:13px !important; font-weight:500;
  line-height:1.3 !important;
  color:var(--bk-ink-soft) !important;
  background:transparent !important;
  text-decoration:none;
  letter-spacing:-0.005em;
  border-radius:6px;
  transition:background .15s ease, color .15s ease;
}
#nav-overlay a:hover{
  background:var(--bk-surface-cool) !important;
  color:var(--bk-ink) !important;
}
#nav-overlay a.active,
#nav-overlay li.active > a,
#nav-overlay li.is-active > a{
  background:var(--bk-red-soft) !important;
  color:var(--bk-red-deep) !important;
  font-weight:600;
}

/* Logout (letzter Listeneintrag) — abgesetzt + rot-Hover */
#nav-overlay ul > li:last-child{
  margin-top:8px !important; padding-top:8px;
  border-top:1px solid var(--bk-line);
}
#nav-overlay ul > li:last-child > a{ color:var(--bk-muted) !important; }
#nav-overlay ul > li:last-child > a:hover{
  background:var(--bk-red-soft) !important;
  color:var(--bk-red) !important;
}


/* ==========================================================================
   4. MISC-RESET
   Kleine generische Helper, die in mehreren Modulen genutzt werden.
   ========================================================================== */

.videocontainer{ padding:1%; }
.addon_video{ width:100% !important; }

/* `.blue` — historischer Klassenname, genutzt in _mieternav.php fuer den
   Edit-Pencil. TODO: bei Refactor von _mieternav.php in semantische Klasse
   umbenennen (z.B. `.user-edit-trigger`). */
.blue{ color:var(--bk-red); cursor:pointer; }


/* ==========================================================================
   5. MIETER-NAV  (Topbar Pills + User-Card · Bold BIKINI-Rot · Stats)
   Markup: lib/php/module/_mieternav.php
   - .uebersicht                  Container (flex-column)
   - .mieter-topbar               horizontale Pill-Bar (mobile: hidden)
   - .mieter-pill                 einzelnes Modul
   - .user_daten                  rote vollbreite Card mit Logo + Infos + Stats
     ├ .user_edit                 Edit-Pencil top-right (vorher .blue)
     ├ .userBild img              Mieter-Logo (filter: brightness(0) invert(1))
     ├ .userinfos                 Name + Adresse + Kontakt (weisse Schrift)
     └ .user_stats                3 Counter (Mieterinfos · Umfragen · Angebote)
   ========================================================================== */

/* Container — flex-column, ueberschreibt Legacy width:98%/padding/float */
body .uebersicht{
  display:flex !important;
  flex-direction:column;
  gap:0;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  width:100% !important;
  border:0;
  box-shadow:none;
}

/* --- Topbar: horizontale Modul-Pills --------------------------------- */

.mieter-topbar{
  display:flex; flex-wrap:wrap; gap:0;
  padding:0;                              /* erste Pill klebt am linken Topbar-Rand */
  background:transparent;                 /* ESM: kein grauer Hintergrund */
  margin-top:20px;                        /* Abstand nach oben */
  margin-bottom:20px;
}
.mieter-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 0;                         /* horizontal padding raus — Magenta-Unterstrich schließt bündig mit Text ab */
  margin-right:24px;                      /* Abstand zwischen den Pills */
  border-radius:0;                  /* eckig wie BIKINI-Logo-Trägerfläche */
  color:var(--bk-ink-soft) !important;
  font-family:standard, sans-serif;
  font-size:11px; font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase;
  text-decoration:none; line-height:1;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.mieter-pill i{
  color:var(--bk-muted) !important;
  font-size:14px;
  flex-shrink:0;
  transition:color .15s ease;
}
.mieter-pill:hover{
  color:var(--bk-ink) !important;
  box-shadow:inset 0 -3px 0 #000;        /* schwarzer Unterstrich beim Hover */
}
.mieter-pill:hover i{ color:var(--bk-ink) !important; }
.mieter-pill.is-active{
  background:#fff;
  color:var(--bk-ink) !important;
  box-shadow:inset 0 -3px 0 var(--bk-red);                          /* Magenta-Unterstrich als ESM-Akzent (kein Layout-Shift) */
}
.mieter-pill.is-active i{ color:var(--bk-ink) !important; }

/* Mobile: Topbar weg — Burger/Overlay ist Ersatz.
   Schwelle 950px gewaehlt, weil bei 12 Pills + 11px Schrift darunter sonst
   3 Reihen wraps entstehen. */
@media (max-width:950px){
  .mieter-topbar{ display:none; }
}


/* --- User-Card · Modernes Rot mit Verlauf (IKTS-Pattern in BIKINI-Rot) -

   Base-Verlauf: dunkles Rot (#b71c1c, kein Burgundy) → BIKINI Warm Red (#d32f2f).
   Plus zwei radiale Glows fuer Tiefe analog IKTS:
     ::before  helles Korall oben rechts (Lebendigkeit)
     ::after   satter Rot-Akzent unten links (Tiefe ohne Braun)
   ---------------------------------------------------------------------- */

body .uebersicht .user_daten{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #E6197B 0%, #F46BCC 100%);     /* ESM-Magenta-Verlauf — Berliner Mall-Energie */
  color:#fff;
  padding:32px;
  margin:0;
  display:flex; align-items:center; gap:24px;
  flex-wrap:wrap;
  width:100%; height:auto;
  border:0; box-shadow:none; float:none;
  font-family:standard, sans-serif;
  font-size:14px; line-height:1.65;
}
body .uebersicht .user_daten::before,
body .uebersicht .user_daten::after{
  content:none;                                                     /* Glows raus — Magenta-Gradient ist Akzent genug */
}
/* Inhalts-Children ueber den Glows */
body .uebersicht .user_daten > *{ position:relative; z-index:1; }

/* --- Edit-Pill · unter den Stammdaten innerhalb .userinfos ----------- */
body .uebersicht .user_daten .user_edit{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  padding:6px 12px;
  background:#000;                                                  /* Schwarzer Pill — homogen zu Header + Logo-Kreis */
  color:#fff !important;
  font-family:standard, sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid #000;
  border-radius:0;
  transition:background .15s ease, border-color .15s ease;
  /* Reset alter abs.-Positionierung */
  position:static;
  top:auto; right:auto;
  width:auto; height:auto;
}
body .uebersicht .user_daten .user_edit i{
  color:#fff !important;
  font-size:11px;
  margin:0;
}
body .uebersicht .user_daten .user_edit:hover{
  background:#333;
  border-color:#333;
  text-decoration:none !important;
}

/* --- Membership Card · ganz rechts, klickbar als Ganzes ------------- */
body .uebersicht .user_daten .user_card{
  flex:0 0 auto;
  width:230px;
  margin-left:auto;
  align-self:center;
  display:block;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease;
}
body .uebersicht .user_daten .user_card img{
  width:100%;
  height:auto;
  display:block;
  box-shadow:0 8px 24px -10px rgba(0,0,0,0.45);
}

/* Download-Bar UNTER der Card, aber per negativem margin-top hochgezogen
   damit sie die abgerundeten unteren Bild-Ecken ueberlappt und verdeckt */
body .uebersicht .user_daten .user_card__download{
  position:relative;
  z-index:1;
  margin-top:-12px;     /* schiebt die Bar ueber die runden Ecken */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
  background:#fff;
  color:var(--bk-red-deep) !important;
  font-family:standard, sans-serif;
  font-size:10px;
  font-weight:700;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  transition:background .15s ease, color .15s ease;
}
body .uebersicht .user_daten .user_card__download i{
  color:var(--bk-red-deep) !important;
  font-size:11px;
}
body .uebersicht .user_daten .user_card:hover .user_card__download{
  background:#000;
  color:#fff !important;
}
body .uebersicht .user_daten .user_card:hover .user_card__download i{
  color:#fff !important;
}

/* (Mobile-Overrides fuer User-Card sind am Ende der Section gesammelt — siehe @media-Block weiter unten) */

/* (Edit-Pencil-Styling jetzt oben in Section 5 — Inline-Pill statt abs.-Position) */

/* Logo links — weisser runder Dot als Traegerflaeche fuer das SVG-Logo.
   Wichtig: SVG-Logos haben oft keine intrinsische Bitmap-Groesse, deshalb
   muss der Container width/height fest setzen UND das innere img seine
   max-Groesse explizit begrenzen, sonst ueberlaeuft es den Kreis. */
body .uebersicht .user_daten .userBild{
  flex-shrink:0;
  width:80px; height:80px;
  background:#000;                                                  /* Schwarzer Kreis als Brand-Anker auf hellem Hero */
  border-radius:50%;
  display:grid;
  place-items:center;       /* zentriert das innere img exakt mittig */
  overflow:hidden;          /* schneidet Logo am Kreis ab falls zu gross */
  box-shadow:none;
  border:0;
}
body .uebersicht .user_daten .userBild img{
  width:auto;
  height:auto;
  max-width:56px;           /* ~70% des Kreises = schoenes Padding */
  max-height:56px;
  object-fit:contain;
  display:block;
  filter:none;              /* schwarzer Kreis → ESM-Logos sind weiss, kein invert noetig */
  margin:0;
  padding:0;
}

/* Infos rechts neben dem Logo */
body .uebersicht .user_daten .userinfos{
  flex:1; min-width:0;
  font-size:12px; line-height:1.65;
  color:rgba(255,255,255,0.92);
}
body .uebersicht .user_daten .userinfos strong{
  display:block;
  font-size:18px; font-weight:600;
  letter-spacing:-0.015em;

  color:#fff; margin-bottom:4px;
}
body .uebersicht .user_daten .userinfos i{
  color:rgba(255,255,255,0.75);
  width:14px; font-size:12px;
  margin-right:6px;
}
body .uebersicht .user_daten .userinfos a{
  color:inherit; text-decoration:none;
    font-size:12px; line-height:1.65;
}
body .uebersicht .user_daten .userinfos a:hover{
  color:#fff; text-decoration:underline;
}


/* --- Stats: 3 Counter unten in der Card ------------------------------ */

body .uebersicht .user_daten .user_stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  flex-basis:100%;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.25);
}
body .uebersicht .user_daten .user_stats .stat{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 16px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.20);
  border-radius:10px;
  color:#fff;
  text-decoration:none;
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
}
body .uebersicht .user_daten .user_stats .stat:hover{
  background:rgba(255,255,255,0.22);
  border-color:rgba(255,255,255,0.45);
  transform:translateY(-1px);
}
body .uebersicht .user_daten .user_stats .stat strong{
  font-size:24px; font-weight:600;
  letter-spacing:-0.02em; line-height:1;
  color:#fff;
  font-family:inherit;
}
body .uebersicht .user_daten .user_stats .stat span{
  font-size:11px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.80);
}

/* Mobile: Card kompakter, Logo+Stammdaten+Bearbeiten weg, Card 50% */
@media (max-width:768px){
  body .uebersicht .user_daten{
    padding:24px; gap:16px;
  }
  /* Logo, Stammdaten + Bearbeiten-Pill (sitzt in .userinfos) ausblenden */
  body .uebersicht .user_daten .userBild,
  body .uebersicht .user_daten .userinfos{
    display:none;
  }
  /* Card halbe Breite, mittig zentriert */
  body .uebersicht .user_daten .user_card{
    width:50%;
    margin-left:auto;
    margin-right:auto;
  }
  body .uebersicht .user_daten .user_stats{
    grid-template-columns:repeat(2, 1fr);   /* 2x2 statt 4x1 auf Tablet */
    gap:8px;
  }
  body .uebersicht .user_daten .user_stats .stat{
    padding:12px 10px;
  }
  body .uebersicht .user_daten .user_stats .stat strong{
    font-size:20px;
  }
  body .uebersicht .user_daten .user_stats .stat span{
    font-size:10px;
  }
}
@media (max-width:480px){
  body .uebersicht .user_daten{
    padding:18px;
    gap:14px;
  }
  body .uebersicht .user_daten .user_stats{
    grid-template-columns:repeat(2, 1fr);   /* 2x2 statt 4x1 — Card kompakt */
    gap:6px;
  }
  body .uebersicht .user_daten .user_stats .stat{
    padding:10px 8px;
  }
  body .uebersicht .user_daten .user_stats .stat strong{
    font-size:16px;
  }
  body .uebersicht .user_daten .user_stats .stat span{
    font-size:9px;
    letter-spacing:0.04em;
  }
  /* Membership-Card etwas groesser auf schmalen Screens, sonst optisch verloren */
  body .uebersicht .user_daten .user_card{
    width:70%;
  }
}


/* ==========================================================================
   6. NEWS-CARDS  (.home_schreiben_overview · Mieterinfos / Umfragen / Archiv)
   Adaptiert vom IKTS-Pattern (lib/css/client_vorlage.css Section 2):
   - Grid-Layout mit auto-fill statt floats
   - Card weiss mit dezentem Border + Hover-Lift
   - Mini-Hero (~120px) mit 3 Mesh-Gradient-Varianten (nth-child rotation)
   - h2 als Pill oben-links, NEU-Badge als Pill oben-rechts
   - Grosse Nummer als transparentes Wasserzeichen via [data-nr]::before
   ========================================================================== */

body .home_schreiben_overview,
body .home_schreiben_overview_archiv{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:20px;
  padding:32px 0;       /* horizontales Padding kommt vom Slot-Wrapper */
  width:100%;
  max-width:none;
  margin:0;
  text-align:left;
  background:transparent;
}

body .home_schreiben{
  --card-accent: var(--bk-red);
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  border-radius:0;
  overflow:hidden;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  width:auto; height:auto;
  margin:0; float:none;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),
             box-shadow .25s ease,
             border-color .25s ease;
}
body .home_schreiben:hover{
  transform:translateY(-3px);
  border-color:var(--bk-red-soft);
  box-shadow:0 18px 36px -22px rgba(230,25,123,0.30);
}

/* --- Hero: dezenter hellgrauer Bereich (BIKINI ruhig + clean) --------- */
body .home_schreiben .home_img{
  position:relative;
  width:100%; padding:0;
  min-height:76px;
  height:auto;
  overflow:hidden;
  float:none;
  border-radius:0;
  background:#f5f5f5;
}

/* Echtes Bild (wenn vorhanden) ueberlagert den hellen Hero — ohne dunklen
   Shadow-Overlay, weil der Hero hell bleiben soll. */
body .home_schreiben .home_img img{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  object-fit:cover;
  display:block;
  margin:0;
  z-index:0;
  transform:none !important;
}
body .home_schreiben:hover .home_img img{
  transform:scale(1.03) !important;
  transition:transform .4s ease;
}

/* --- h2 als Warm-Red-Trägerfläche oben-links (BIKINI-Logo-Prinzip) ---- */
body .home_schreiben .home_img h2{
  position:absolute;
  top:14px; left:14px;
  /* Legacy h2 setzt right:0; bottom:0; width:100%; height:100% — neutralisieren */
  right:auto; bottom:auto;
  width:auto; height:auto;
  z-index:3;
  margin:0; padding:0;
  background:transparent;
  font-size:0;  /* h2-default neutralisieren */
}
body .home_schreiben .home_img h2 span{
  /* Legacy span: position:absolute; left:50%; transform; bottom:30px — neutralisieren */
  position:static; left:auto; right:auto; top:auto; bottom:auto;
  transform:none;
  display:inline-block;
  vertical-align:top;     /* gleiche Top-Linie wie .home_schreiben_ungelesen */
  padding:5px 10px;
  background:#000;
  color:#fff;
  font-family:standard, sans-serif;
  font-size:10px; font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border-radius:0;       /* eckig wie das BIKINI-Logo */
  line-height:1.3;
  white-space:nowrap;
}
/* Legacy span:after (110px weiße Trennlinie) neutralisieren */
body .home_schreiben .home_img h2 span:after{
  display:none;
}

/* --- NEU-Badge als Warm-Red-Trägerfläche oben-rechts ----------------- */
body .home_schreiben .home_schreiben_ungelesen{
  position:absolute;
  top:14px; right:14px;
  z-index:3;
  width:auto; height:auto;
  padding:5px 10px;
  background:var(--bk-red);
  color:#fff;
  font-family:standard, sans-serif;
  font-size:10px; font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border-radius:0;
  line-height:1.3;
  text-align:center;
  animation:none;
}

/* Wasserzeichen-Nummer ENTFERNT — ueberlagerte den NEU-Badge.
   Falls einzelne Cards data-nr setzen, wird trotzdem nichts gerendert. */
body .home_schreiben[data-nr]::before{
  content:none;
}

/* --- Body: Nr-Meta · Titel · Teaser ----------------------------------- */
body .home_schreiben .home_schreiben_nr,
body .home_schreiben .home_schreiben_titel,
body .home_schreiben .home_schreiben_text{
  padding-left:22px;
  padding-right:22px;
  width:auto;
  float:none;
  text-align:left;
  margin:0;
}

body .home_schreiben .home_schreiben_nr{
  padding-top:18px;
  padding-bottom:0;
  font-family:standard, sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--bk-muted);
  height:auto;
  margin-top:0;
}
/* inline color:#farbe vom span auf neutral muted ueberschreiben */
body .home_schreiben .home_schreiben_nr span{
  color:var(--bk-muted) !important;
}

body .home_schreiben .home_schreiben_titel{
  margin-top:8px;
  font-family:standard, sans-serif;
  font-size:16px;
  font-weight:600;
  letter-spacing:-0.005em;
  line-height:1.3;
  color:var(--bk-ink);
  text-transform:none;     /* Legacy uppercase neutralisieren */
  height:auto;             /* Legacy height:40px overflow:hidden raus */
  overflow:visible;
}

body .home_schreiben .home_schreiben_text{
  margin-top:10px;
  padding-bottom:22px;
  font-family:standard, sans-serif;
  font-size:13px;
  line-height:1.55;
  color:var(--bk-ink-soft);
  flex:1;
  display:flex; flex-direction:column;
}
body .home_schreiben .home_schreiben_text i{
  margin-top:auto;
  align-self:flex-end;
  font-size:12px;
  color:var(--bk-red) !important;  /* inline color:#farbe ueberschreiben */
  transition:transform .15s ease;
  padding-top:10px;
}
body .home_schreiben:hover .home_schreiben_text i{
  transform:translateX(3px);
}

/* Leer-Zustand */
body .home_schreiben_overview .no-items{
  grid-column:1 / -1;
  padding:60px 20px;
  text-align:center;
  color:var(--bk-muted);
  background:var(--bk-surface-cool);
  border:1px solid var(--bk-line);
}

/* Mobile: 1 Spalte ab schmaler Breite */
@media (max-width:640px){
  body .home_schreiben_overview,
  body .home_schreiben_overview_archiv{
    grid-template-columns:1fr;
    padding:20px 0;       /* horizontales Padding kommt vom Slot-Wrapper, kein doppelter Rand */
    gap:16px;
  }
  body .home_schreiben[data-nr]::before{
    font-size:54px;
  }
}


/* ==========================================================================
   7. DETAIL-VIEW  (#detailschreiben — AJAX-eingebettet im Grid)
   Adaptiert vom IKTS-Detail-Pattern in BIKINI Warm-Red.
   Markup: lib/php/module/__mieterinfo.detail.php
     <div class="detail_text">
       <div class="close_button">×</div>
       <div class="home_schreiben_nr"><h1>nr</h1><h2>subject</h2></div>
       <div class="schreiben_main_text">html-body</div>
       <div class="download_button_container"><a><div class="download_button">…
     </div>
   ========================================================================== */

/* Detail-Panel nimmt im Grid IMMER volle Breite ein, nicht 1/N als Cell */
body .home_schreiben_overview > #detailschreiben{
  grid-column:1 / -1;
  width:auto;
  max-width:none;
  margin:0;
  background:var(--bk-surface-cool);
  border-top:3px solid var(--bk-red);
  padding:40px 24px 56px;
}

/* --- Detail-Text-Container · Article-Card-Style ---------------------- */
body #detailschreiben .detail_text{
  position:relative;
  max-width:820px;
  margin:0 auto;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  padding:56px 64px 48px;
  box-shadow:0 12px 40px -18px rgba(0,0,0,0.15);
  width:auto;  /* legacy width:1200/1280 neutralisieren */
}

/* --- Close-Button · Icon-Pill oben-rechts ---------------------------- */
body #detailschreiben .detail_text .close_button{
  position:absolute;
  top:16px; right:16px;
  width:40px; height:40px;
  border-radius:10px;
  background:var(--bk-surface-cool);
  border:1px solid var(--bk-line);
  display:grid; place-items:center;
  cursor:pointer;
  color:var(--bk-ink-soft);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  /* Legacy Inline-Styles neutralisieren */
  float:none;
  padding:0;
  margin:0;
}
body #detailschreiben .detail_text .close_button:hover{
  background:var(--bk-red-soft);
  color:var(--bk-red-deep);
  border-color:var(--bk-red-soft);
}
body #detailschreiben .detail_text .close_button i{
  font-size:16px;
  color:inherit !important;
  margin:0;
  width:auto; height:auto;
  float:none;
}

/* --- Meta + Subject-Headline ----------------------------------------- */
body #detailschreiben .detail_text .home_schreiben_nr{
  margin:0 0 32px;
  padding:0;
  background:none;
  border:0;
  text-align:left;
  font-family:standard, sans-serif;
}
/* H1 = Meta-Caption (Nr + Datum), klein und dezent */
body #detailschreiben .detail_text .home_schreiben_nr h1{
  font-family:standard, sans-serif !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bk-muted) !important;  /* inline style="color:#farbe" killen */
  margin:0 0 14px !important;        /* !important schlaegt globale `main#wrapper > section h1` Regel */
  padding:0 !important;              /* globale Regel hat padding:48px 32px 36px !important -> hier killen */
  line-height:1;
  height:auto;
  text-shadow:none;
  background:none;
  border:0;
  float:none;
  width:auto;
}
body #detailschreiben .detail_text .home_schreiben_nr h1 span{
  background:none;
  padding:0;
  color:inherit !important;
}
/* H2 = Article-Subject, gross und ruhig */
body #detailschreiben .detail_text .home_schreiben_nr h2{
  font-family:medium, sans-serif;
  font-size:30px !important;
  font-weight:normal;
  letter-spacing:-0.015em;
  line-height:1.15;
  color:var(--bk-ink);
  margin:0;
  padding:0;
  background:none;
  text-transform:none;
  text-align:left;
  height:auto;
}
/* Dezente Trennlinie unter der Headline (BIKINI-Rot Akzent) */
body #detailschreiben .detail_text .home_schreiben_nr::after{
  content:'';
  display:block;
  width:48px;
  height:2px;
  background:var(--bk-red);
  margin-top:24px;
}

/* --- Artikel-Body ---------------------------------------------------- */
body #detailschreiben .detail_text .schreiben_main_text{
  font-family:standard, sans-serif;
  font-size:15px;
  line-height:1.7;
  color:var(--bk-ink-soft);
  text-align:left;
}
body #detailschreiben .detail_text .schreiben_main_text p{
  margin:0 0 16px;
}
body #detailschreiben .detail_text .schreiben_main_text p:last-child{
  margin-bottom:0;
}
body #detailschreiben .detail_text .schreiben_main_text h1,
body #detailschreiben .detail_text .schreiben_main_text h2,
body #detailschreiben .detail_text .schreiben_main_text h3,
body #detailschreiben .detail_text .schreiben_main_text h4{
  font-family:medium, sans-serif;
  color:var(--bk-ink);
  letter-spacing:-0.015em;
  margin:28px 0 12px;
  font-weight:normal;
  text-transform:none;
}
body #detailschreiben .detail_text .schreiben_main_text h2{ font-size:22px; }
body #detailschreiben .detail_text .schreiben_main_text h3{ font-size:18px; }
body #detailschreiben .detail_text .schreiben_main_text h4{ font-size:16px; }
body #detailschreiben .detail_text .schreiben_main_text strong{
  color:var(--bk-ink);
  font-weight:600;
}
/* Links — inline style="color:#farbe" ueberschreiben mit BIKINI-Rot */
body #detailschreiben .detail_text .schreiben_main_text a,
body #detailschreiben .detail_text .schreiben_main_text a[style]{
  color:var(--bk-red) !important;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .15s ease;
}
body #detailschreiben .detail_text .schreiben_main_text a:hover,
body #detailschreiben .detail_text .schreiben_main_text a[style]:hover{
  color:var(--bk-red-deep) !important;
}
body #detailschreiben .detail_text .schreiben_main_text ul,
body #detailschreiben .detail_text .schreiben_main_text ol{
  margin:0 0 16px;
  padding-left:22px;
}
body #detailschreiben .detail_text .schreiben_main_text li{
  margin-bottom:6px;
}
body #detailschreiben .detail_text .schreiben_main_text img{
  max-width:100%;
  height:auto;
  border-radius:0;
  margin:16px 0;
}

/* --- Download-Button ------------------------------------------------- */
body #detailschreiben .detail_text .download_button_container{
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid var(--bk-line);
}
body #detailschreiben .detail_text .download_button_container a{
  text-decoration:none;
  display:inline-block;
}
body #detailschreiben .detail_text .download_button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  /* inline style="background:#farbe" mit !important ueberschreiben */
  background:linear-gradient(135deg, var(--bk-red) 0%, var(--bk-red-deep) 100%) !important;
  color:#fff;
  font-family:standard, sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border-radius:0;  /* eckig wie BIKINI-Logo-Trägerflächen */
  box-shadow:0 4px 12px rgba(230,25,123,0.28);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
body #detailschreiben .detail_text .download_button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(230,25,123,0.35);
}
body #detailschreiben .detail_text .download_button i{
  font-size:14px;
  color:#fff !important;
  margin:0;
  width:auto; height:auto;
  float:none;
}

/* Mobile: weniger Innen-Padding, Body-Padding behalten,
   grauer Card-Hintergrund weg sodass Detail flush in der Liste sitzt */
@media (max-width:768px){
  body .home_schreiben_overview > #detailschreiben{
    background:transparent;
    padding:24px 0 32px;
  }
  body #detailschreiben .detail_text{
    padding:32px 16px 28px;
  }
  body #detailschreiben .detail_text .home_schreiben_nr h2{
    font-size:24px !important;
  }
}


/* ==========================================================================
   8. FORMS  (.formular · .mieter_felder · .saveit_button · .fehler_info)
   Markup-Vorbild: lib/php/module/_mieterdaten.php (Passwort-Form)
   - .formular         weisse Inner-Card auf hellgrauem ANOXA-Outer-Bereich
   - .data_info        Headline-Caption mit BIKINI-Rot Akzent-Strich
   - .mieter_felder    Clean Inputs mit Focus-Glow in Warm-Red
   - .saveit_button    Linear-gradient Trägerfläche (analog Download-Button)
   - .fehler_info      Alert-Pattern (Soft-Red Background, Rot-Border-Left)
   - meter             Passwort-Stärke mit BIKINI-Rot Gradient
   ========================================================================== */

body .formular{
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  margin:32px auto;
  padding:48px 56px;
  max-width:720px;
  width:auto;
  font-family:standard, sans-serif;
}
body .formular form{ display:block; }

/* --- data_info · Headline-Caption oben ------------------------------- */
body .formular .data_info{
  margin:0 0 28px;
  padding:0 0 20px;
  border-bottom:1px solid var(--bk-line);
  font-family:standard, sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--bk-ink-soft);
  text-align:left;
  width:auto;
  float:none;
}
body .formular .data_info::before{
  content:'';
  display:block;
  width:48px; height:2px;
  background:var(--bk-red);
  margin-bottom:16px;
}
body .formular .data_info span{
  color:inherit !important;
}

/* --- data_container · generischer Block (Save-Actions etc.) ---------- */
body .formular .data_container{
  margin:0 0 16px;
  width:auto;
  float:none;
  text-align:left;
}
body .formular .data_container.form-actions{
  margin:24px 0 0;
  padding-top:24px;
  border-top:1px solid var(--bk-line);
  text-align:right;
}

/* --- mieter_felder (Inputs) · clean BIKINI-Style --------------------- */
body .formular .mieter_felder{
  display:block;
  width:100%;
  padding:14px 16px;
  margin:0 0 12px;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  border-radius:0;
  font-family:standard, sans-serif;
  font-size:14px;
  line-height:1.4;
  color:var(--bk-ink);
  transition:border-color .15s ease, box-shadow .15s ease;
  height:auto;
  float:none;
  box-shadow:none;
}
body .formular .mieter_felder.half{
  display:inline-block;
  width:calc(50% - 6px);
  vertical-align:top;
}
body .formular .mieter_felder.half + .mieter_felder.half{
  margin-left:8px;
}
body .formular .mieter_felder:focus{
  outline:none;
  border-color:var(--bk-red);
  box-shadow:0 0 0 3px rgba(230,25,123,0.12);
}
body .formular .mieter_felder::placeholder{
  color:var(--bk-muted);
  opacity:1;
}

/* --- trenner · vertikaler Spacer ------------------------------------- */
body .formular .trenner{
  display:block;
  width:100%;
  height:6px;
  clear:both;
  background:none;
  border:0;
  margin:0;
}

/* --- saveit_button · BIKINI Warm-Red Trägerfläche -------------------- */
body .formular .saveit_button,
body .saveit_button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  background:linear-gradient(135deg, var(--bk-red) 0%, var(--bk-red-deep) 100%);
  color:#fff !important;
  font-family:standard, sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border:0;
  border-radius:0;
  box-shadow:0 4px 12px rgba(230,25,123,0.28);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  height:auto;
  line-height:1.3;
  width:auto;
  margin:0;
  text-decoration:none;
  -webkit-appearance:none; appearance:none;
}
body .formular .saveit_button:hover,
body .saveit_button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(230,25,123,0.35);
}

/* --- fehler_info · Alert-Pattern (Soft-Red Background) --------------- */
body .fehler_info{
  background:var(--bk-red-soft);
  border-left:3px solid var(--bk-red);
  padding:14px 18px;
  margin:0 auto 20px;
  max-width:720px;
  font-family:standard, sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--bk-red-deep);
  width:auto;
  float:none;
}
body .fehler_info span{ color:inherit !important; }
body .fehler_info p{ margin:0; }
body .fehler_info p + p{ margin-top:6px; }

/* --- login_eingabe · Passwort-Stärke-Container ----------------------- */
body .formular .login_eingabe{
  margin:6px 0 4px !important;
  width:100% !important;
  padding:0;
  float:none;
}

/* --- meter · Passwort-Stärke (Konvention: rot=schwach, gelb=mittel, gruen=stark) */
body .formular meter{
  width:100%;
  height:6px;
  border:0;
  border-radius:0;
  background:var(--bk-bg);
  appearance:none;
  -webkit-appearance:none;
  display:block;
  margin:0;
}
body .formular meter::-webkit-meter-bar{
  background:var(--bk-bg);
  border:0;
  border-radius:0;
  height:6px;
}
/* >75 = optimum → BIKINI-Gruen */
body .formular meter::-webkit-meter-optimum-value{
  background:linear-gradient(90deg, #8bb99a 0%, #5fa775 100%);
  border-radius:0;
}
/* 49-75 = suboptimum → BIKINI-Gelb */
body .formular meter::-webkit-meter-suboptimum-value{
  background:#f4da40;
  border-radius:0;
}
/* <49 = schwach → BIKINI-Rot (Warnsignal) */
body .formular meter::-webkit-meter-even-less-good-value{
  background:var(--bk-red);
  border-radius:0;
}
/* Firefox */
body .formular meter:-moz-meter-optimum::-moz-meter-bar{
  background:linear-gradient(90deg, #8bb99a 0%, #5fa775 100%);
}
body .formular meter:-moz-meter-sub-optimum::-moz-meter-bar{
  background:#f4da40;
}
body .formular meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{
  background:var(--bk-red);
}

/* Mobile */
@media (max-width:640px){
  body .formular{
    padding:24px 16px;
    margin:0;
  }
  body .formular .mieter_felder.half{
    width:100%;
    display:block;
  }
  body .formular .mieter_felder.half + .mieter_felder.half{
    margin-left:0;
  }
}


/* --- Wide-Modifier · breitere Form (Mieterprofil etc.) -------------- */
body .formular--wide{
  max-width:960px;
}

/* --- field-row · Icon-Box + Input nebeneinander -------------------- */
body .formular .field-row{
  display:flex;
  align-items:stretch;
  gap:12px;
  margin:0 0 12px;
}
body .formular .field-row .mieter_felder_info{
  flex:0 0 44px;
  width:44px; height:44px;
  display:grid;
  place-items:center;
  background:var(--bk-surface-cool);
  border:1px solid var(--bk-line);
  color:var(--bk-ink-soft);
  font-size:15px;
  margin:0;
  padding:0;
  float:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
body .formular .field-row:focus-within .mieter_felder_info{
  background:var(--bk-red-soft);
  color:var(--bk-red-deep);
  border-color:var(--bk-red);
}
body .formular .field-row .mieter_felder_info i{
  color:inherit !important;
  margin:0;
  font-size:inherit;
  width:auto; height:auto;
  float:none;
}
body .formular .field-row .mieter_felder{
  flex:1 1 auto;
  margin:0;
  width:auto;
}

/* --- field-row--editor · Icon links, TinyMCE-Editor rechts ---------
   Icon-Kaestchen bleibt 44x44 oben-links, Editor flex:1 fuellt den Rest */
body .formular .field-row--editor{
  align-items:flex-start;
}
body .formular .field-row--editor .tox-tinymce,
body .formular .field-row--editor .mieter_felder.fulleditor,
body .formular .field-row--editor textarea{
  flex:1 1 auto;
  width:auto;
  min-width:0;  /* fix flex-overflow bei langen Inhalten */
}

/* --- Readonly Inputs · gedimmt ------------------------------------- */
body .formular .mieter_felder.dis,
body .formular .mieter_felder[readonly]{
  background:var(--bk-surface-cool);
  color:var(--bk-ink-soft);
  cursor:not-allowed;
}
body .formular .mieter_felder.dis:focus,
body .formular .mieter_felder[readonly]:focus{
  border-color:var(--bk-line);
  box-shadow:none;
}

/* --- TinyMCE-Reset (.tox-tinymce) · BIKINI-konformes Editor-Frame -- */
body .formular .tox-tinymce{
  border:1px solid var(--bk-line) !important;
  border-radius:0 !important;
  font-family:standard, sans-serif !important;
}
body .formular .tox .tox-toolbar,
body .formular .tox .tox-toolbar__primary{
  background:var(--bk-surface-cool) !important;
  border-bottom:1px solid var(--bk-line) !important;
}
body .formular .tox .tox-tbtn{
  color:var(--bk-ink) !important;
}
body .formular .tox .tox-tbtn svg{ fill:var(--bk-ink) !important; }
body .formular .tox .tox-tbtn:hover{
  background:var(--bk-line) !important;
}
body .formular .tox .tox-tbtn--enabled,
body .formular .tox .tox-tbtn--enabled:hover{
  background:var(--bk-red-soft) !important;
  color:var(--bk-red-deep) !important;
}
body .formular .tox .tox-tbtn--enabled svg{ fill:var(--bk-red-deep) !important; }
body .formular .tox .tox-edit-area iframe{
  background:var(--bk-surface) !important;
}

/* --- Disabled Save-Button (z.B. "wird geprueft") ------------------- */
body .formular .saveit_button:disabled,
body .saveit_button:disabled{
  background:var(--bk-surface-cool) !important;
  color:var(--bk-muted) !important;
  cursor:not-allowed;
  box-shadow:none;
  border:1px solid var(--bk-line);
}
body .formular .saveit_button:disabled:hover,
body .saveit_button:disabled:hover{
  transform:none;
  box-shadow:none;
}


/* ==========================================================================
   9. STANDALONE  (.membershipcard · globaler .download_button)
   - .membershipcard         Wrapper für Karten-Bild + Download
   - .download_button        Generischer Action-Button (ausserhalb Forms)
   - .download_button_container   Wrapper mit Top-Margin
   ========================================================================== */

body .membershipcard{
  text-align:center;
  max-width:760px;
  margin:32px auto;
  padding:24px 16px;
}
body .membershipcard img{
  max-width:600px;
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  box-shadow:0 18px 48px -28px rgba(0,0,0,0.30);
}
body .membershipcard .download_button_container{
  margin-top:28px;
  text-align:center;
}

/* Globaler Download-Button — BIKINI Warm-Red Trägerfläche.
   Detail-View hat eigene hoeher-spezifizierte Regel (Section 7)
   und ueberschreibt diese dort — hier reicht der Default. */
body .download_button_container a{
  text-decoration:none;
  display:inline-block;
}
body .download_button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 24px;
  /* inline style="background:#farbe" mit !important ueberschreiben */
  background:linear-gradient(135deg, var(--bk-red) 0%, var(--bk-red-deep) 100%) !important;
  color:#fff !important;
  font-family:standard, sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border:0;
  border-radius:0;
  box-shadow:0 4px 12px rgba(230,25,123,0.28);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  width:auto;
  height:auto;
  line-height:1.3;
  margin:0;
  text-align:center;
}
body .download_button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(230,25,123,0.35);
}
body .download_button i{
  font-size:14px;
  color:#fff !important;
  margin:0;
  width:auto; height:auto;
  float:none;
}

/* Empty-State — falls keine Card vorhanden (Hinweis-Card) */
body .membershipcard--empty{
  padding:48px 24px;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  text-align:center;
  font-family:standard, sans-serif;
  font-size:14px;
  color:var(--bk-muted);
  max-width:600px;
  margin:32px auto;
}


/* ==========================================================================
   10. SUBUSER  (#subuser_uebersicht · .unteruser_container · Mitarbeiter-Cards)
   - Hinweis-Text + Anlegen-Button als Toolbar-Zeile oben
   - Cards-Grid 2-spaltig auf Desktop, Name als Headline-Font
   - Status-Pill: "lesen" neutral, "lesen/schreiben" BIKINI-Rot
   - Edit/Delete als Icon-Pills unten
   ========================================================================== */

body #subuser_uebersicht{
  padding:48px 32px;
  width:100%;
  max-width:none;
  margin:0;
}

/* Toolbar oben: Hinweis-Text links + Anlegen-Button rechts */
body #subuser_uebersicht > .data_container{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin:0 0 24px;
  padding:0 0 20px;
  border-bottom:1px solid var(--bk-line);
  background:none;
  width:auto;
  text-align:left;
  float:none;
}
body #subuser_uebersicht > .data_container .data_info{
  flex:1 1 auto;
  margin:0;
  padding:0;
  border:0;
  font-family:standard, sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--bk-ink-soft);
  width:auto;
  float:none;
}
body #subuser_uebersicht > .data_container .data_info::before{
  content:none;  /* Akzent-Strich hier nicht noetig */
}
body #subuser_uebersicht > .data_container .data_info span{
  color:inherit !important;
}
body #subuser_uebersicht > .data_container .saveit_button{
  flex:0 0 auto;
  margin:0;
}

/* Cards-Grid mit CSS Grid — sauberer als float/nth-of-type */
body #subuser_uebersicht::after{
  content:none;  /* Clearfix nicht mehr noetig bei Grid */
}
body #subuser_uebersicht{
  /* Toolbar bleibt block davor, Cards-Wrapper kommt extra */
}

/* Cards-Wrapper bekommt Grid-Display via PHP-Hook .subuser_grid;
   Fallback fuer den Fall dass das Markup noch unkonditioniert kommt */
body #subuser_uebersicht > .unteruser_container,
body .subuser_grid{
  /* Markus' Hook */
}
body .subuser_grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px 24px;
  margin:0;
}

body .unteruser_container{
  position:relative;
  width:auto;
  margin:0;
  padding:20px 22px;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  border-radius:0;
  font-family:standard, sans-serif;
  height:auto;
  overflow:visible;
  float:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

body .unteruser_container:hover{
  border-color:var(--bk-red-soft);
  box-shadow:0 8px 20px -16px rgba(0,0,0,0.20);
}

/* Mitarbeiter-Name */
body .unteruser_container h2{
  margin:0 0 6px;
  padding:0;
  font-family:standard, sans-serif;
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.005em;
  line-height:1.3;
  color:var(--bk-ink);
  text-transform:none;
  text-align:left;
  background:none;
  border:0;
  height:auto;
  width:auto;
  text-shadow:none;
  float:none;
}

/* Status-Pill: lesen=neutral, lesen/schreiben=BIKINI-Rot */
body .unteruser_container .role-pill{
  display:inline-block;
  padding:3px 10px;
  background:var(--bk-bg);
  color:var(--bk-ink-soft);
  font-family:standard, sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border-radius:0;
  margin:0 0 14px;
  line-height:1.4;
}
body .unteruser_container .role-pill.role-pill--write{
  background:var(--bk-red);
  color:#fff;
}

/* Action-Icons unten — Edit + Delete als Icon-Pills */
body .unteruser_container .actions{
  display:flex;
  gap:8px;
  margin-top:8px;
}
body .unteruser_container .actions i{
  width:36px; height:36px;
  display:grid; place-items:center;
  background:var(--bk-surface-cool);
  border:1px solid var(--bk-line);
  color:var(--bk-ink-soft) !important;
  font-size:14px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  margin:0 !important;
}
body .unteruser_container .actions i:hover{
  background:var(--bk-red-soft);
  color:var(--bk-red-deep) !important;
  border-color:var(--bk-red);
}
body .unteruser_container .actions i.fa-trash:hover{
  background:#fee;
  color:#c00 !important;
  border-color:#c00;
}

/* Mobile: 1 Spalte */
@media (max-width:768px){
  body #subuser_uebersicht{
    padding:32px 20px;
  }
  body .subuser_grid{
    grid-template-columns:1fr;
  }
}


/* --- Form-Sub-Captions (Sektions-Headlines innerhalb einer Form) ----- */
body .formular .form-section{
  margin:24px 0 14px;
  padding:0;
  font-family:standard, sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--bk-muted);
}
body .formular .form-section:first-child{
  margin-top:0;
}

/* --- Custom-Checkbox-Style fuer .css-checkbox + .css-label -----------
   ACHTUNG: frontend.css hat padding-left:50px + height:40px hard-coded
   auf den Selektor "input[type=checkbox].css-checkbox + label.css-label"
   und gleichermaßen fuer radio. Deshalb mit hoeherer Spezifitaet bzw.
   !important ueberschreiben. */

/* Native Inputs versteckt — frontend.css setzt evtl. display:none, wir
   brauchen sie als Tab-Stop, also opacity:0 + abs.-Position */
body .formular input[type="checkbox"].css-checkbox,
body .formular input[type="radio"].css-checkbox{
  position:absolute !important;
  opacity:0;
  pointer-events:none;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  display:inline-block !important;
}

/* Label als Pill — Padding und Hoehe von frontend.css zuruecksetzen */
body .formular input[type="checkbox"].css-checkbox + label.css-label,
body .formular input[type="radio"].css-checkbox + label.css-label{
  position:relative !important;
  display:inline-block !important;
  padding:8px 14px 8px 34px !important;  /* ueberschreibt padding-left:50px */
  height:auto !important;                /* ueberschreibt height:40px */
  margin:0 8px 6px 0 !important;
  background:var(--bk-surface-cool) !important;
  border:1px solid var(--bk-line) !important;
  border-radius:0 !important;
  font-family:standard, sans-serif !important;
  font-size:13px !important;
  line-height:1.2 !important;
  color:var(--bk-ink-soft) !important;
  cursor:pointer !important;
  user-select:none !important;
  white-space:nowrap !important;
  text-align:left !important;
  vertical-align:middle !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease !important;
}

/* Box: absolut positioniert links, vertikal zentriert */
body .formular input[type="checkbox"].css-checkbox + label.css-label::before,
body .formular input[type="radio"].css-checkbox + label.css-label::before{
  content:'' !important;
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:14px !important;
  height:14px !important;
  background:var(--bk-surface) !important;
  border:1px solid var(--bk-muted) !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body .formular input[type="radio"].css-checkbox + label.css-label::before{
  border-radius:50% !important;
}

/* Hover */
body .formular input[type="checkbox"].css-checkbox + label.css-label:hover,
body .formular input[type="radio"].css-checkbox + label.css-label:hover{
  background:var(--bk-surface) !important;
  border-color:var(--bk-muted) !important;
  color:var(--bk-ink) !important;
}

/* Checked-Container */
body .formular input[type="radio"].css-checkbox:checked + label.css-label,
body .formular input[type="checkbox"].css-checkbox:checked + label.css-label{
  background:var(--bk-red-soft) !important;
  border-color:var(--bk-red) !important;
  color:var(--bk-red-deep) !important;
}

/* Radio-Dot via inset shadow */
body .formular input[type="radio"].css-checkbox:checked + label.css-label::before{
  background:var(--bk-red) !important;
  border-color:var(--bk-red) !important;
  box-shadow:inset 0 0 0 3px #fff !important;
}

/* Checkbox-Fuellung */
body .formular input[type="checkbox"].css-checkbox:checked + label.css-label::before{
  background:var(--bk-red) !important;
  border-color:var(--bk-red) !important;
}

/* Checkbox-Haken via ::after */
body .formular input[type="checkbox"].css-checkbox:checked + label.css-label::after{
  content:'' !important;
  position:absolute !important;
  left:17px !important;
  top:50% !important;
  margin-top:-5px !important;
  width:4px !important;
  height:8px !important;
  border:solid #fff !important;
  border-width:0 2px 2px 0 !important;
  transform:rotate(45deg) !important;
  background:none !important;
  padding:0 !important;
}

/* Focus-Ring */
body .formular input[type="radio"].css-checkbox:focus + label.css-label,
body .formular input[type="checkbox"].css-checkbox:focus + label.css-label{
  box-shadow:0 0 0 3px rgba(230,25,123,0.18) !important;
}

/* --- Close-Pill fuer AJAX-Forms (z.B. Subuser-Detail) ---------------- */
body .formular .form-close{
  position:absolute;
  top:16px; right:16px;
  width:36px; height:36px;
  display:grid;
  place-items:center;
  background:var(--bk-surface-cool);
  border:1px solid var(--bk-line);
  color:var(--bk-ink-soft);
  cursor:pointer;
  font-size:14px;
  border-radius:0;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  margin:0; padding:0;
  -webkit-appearance:none; appearance:none;
  font-family:inherit;
}
body .formular .form-close:hover{
  background:var(--bk-red-soft);
  color:var(--bk-red-deep);
  border-color:var(--bk-red-soft);
}
body .formular{ position:relative; }


/* ==========================================================================
   ↓ LEGACY-BEREICH AB HIER — wird stufenweise konsolidiert ↓
   ==========================================================================

   ───── Modul-Header h1 (global) ─────────────────────────────────────────
   Markup: jedes Modul rendert via CMS-Wrapper ein <h1> oben.
   ANOXA-Frontend hat 70px header-slider-Font + margin:0 13.75px hard-coded —
   wir ueberschreiben mit dem BIKINI-Modul-Titel-Pattern. Statt durchgehender
   border-bottom: kurzer roter BIKINI-Akzentstrich unter dem Text (analog zu
   .data_info-Akzent in Forms), gibt visuelle Trennung zum Modul-Body ohne
   die Schwere einer Voll-Breite-Linie. */
body main#wrapper > section h1{
  position:relative;
  font-family:medium, sans-serif !important;
  font-size:36px !important;
  font-weight:normal !important;
  letter-spacing:-0.005em !important;
  line-height:1.1 !important;
  color:var(--bk-ink) !important;
  text-transform:uppercase !important;
  text-shadow:none !important;
  margin:0 !important;
  padding:48px 32px 36px !important;
  background:none !important;
  text-align:left !important;
  width:auto !important;
  height:auto !important;                  /* neutralisiert Legacy-Regel `.downloads h1 / .umfragen h1 / .mieterhandbuch h1 { height: 85px }` (Zeile ~3501) — sonst kollidiert ::after mit dem Text */
}
body main#wrapper > section h1::after{
  content:'';
  position:absolute;
  left:32px;
  bottom:18px;
  width:56px;
  height:3px;
  background:var(--bk-red);
}
/* Wenn h1 direkt im .slot sitzt (z.B. Werbung-Modul), uebernimmt der Slot
   das horizontale Padding — h1 hat dann padding-x:0 */
body main#wrapper > section > .row > .slot > h1{
  padding-left:0 !important;
  padding-right:0 !important;
}
body main#wrapper > section > .row > .slot > h1::after{
  left:0;
}
@media (max-width:768px){
  body main#wrapper > section h1{
    font-size:28px !important;
    padding:32px 20px 28px !important;
  }
  body main#wrapper > section h1::after{
    left:20px;
    bottom:14px;
    width:48px;
  }
  body main#wrapper > section > .row > .slot > h1{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  body main#wrapper > section > .row > .slot > h1::after{
    left:0;
  }
}

/* ───── Generisches Slot-Padding ─────────────────────────────────────────
   Jedes Modul rendert ueber den CMS-Wrapper eine .row > .slot Struktur.
   Wir geben dem Slot ein konsistentes horizontales Padding — damit Content
   auf allen Modul-Seiten den gleichen Rand zur Browser-Kante hat (statt
   pro Modul ein eigenes margin/padding auf den Childs).

   ABER: einige Sections haben im CMS-Backend ein eigenes 32px-Padding
   (Modul-Inhalt-Sections wie Angebote/Mieterinformationen). Das wuerde
   sich mit dem Slot-Padding zu 64px addieren. Wir nullen daher das
   Section-Padding generell — das einzige horizontale Padding kommt vom Slot.
   !important weil ANOXA frontend.css hard-coded padding:0 auf .slot setzt
   und Section-Padding aus CMS-config kommt. */
body main#wrapper > section{
  padding-left:0 !important;
  padding-right:0 !important;
}
body main#wrapper > section > .row > .slot{
  padding-left:32px !important;
  padding-right:32px !important;
  box-sizing:border-box;
}
@media (max-width:768px){
  body main#wrapper > section > .row > .slot{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}

/* ───── Module-Overview · gemeinsamer Container fuer Modul-Body ──────── */
body #subuser_uebersicht,
body #angebot_uebersicht{
  padding:48px 0;       /* horizontales Padding kommt vom Slot-Wrapper */
  width:100%;
  max-width:none;
  margin:0;
}
@media (max-width:768px){
  body #subuser_uebersicht,
  body #angebot_uebersicht{
    padding:32px 0;
  }
}

/* ───── Module-Toolbar · Hinweis-Text + Action-Button oben ──────────── */
body #angebot_uebersicht > .data_container{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin:0 0 24px;
  padding:0 0 20px;
  border-bottom:1px solid var(--bk-line);
  background:none;
  width:auto;
  text-align:left;
  float:none;
}
body #angebot_uebersicht > .data_container .data_info{
  flex:1 1 auto;
  margin:0;
  padding:0;
  border:0;
  font-family:standard, sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--bk-ink-soft);
  width:auto;
  float:none;
}
body #angebot_uebersicht > .data_container .data_info::before{
  content:none;
}
body #angebot_uebersicht > .data_container .data_info span{
  color:inherit !important;
}
body #angebot_uebersicht > .data_container .saveit_button{
  flex:0 0 auto;
  margin:0;
}

/* ===========================================================================
   11. ANGEBOTE  (.angebot_container · #angebot_uebersicht)
   - Listen-Zeile pro Angebot: Thumbnail + Headline + Datum + Status + Actions
   - Status-Icon: Aktiv = gruener fa-circle-check, Pending = gelber fa-clock
   - Hover: BIKINI-Rot Border-Akzent
   ========================================================================== */

body .angebot_container{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 16px;
  margin:0 0 12px;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  border-radius:0;
  font-family:standard, sans-serif;
  height:auto !important;        /* ueberschreibt frontend.css height:30px */
  min-height:0;
  overflow:visible;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body .angebot_container:hover{
  border-color:var(--bk-red-soft);
  box-shadow:0 8px 20px -16px rgba(0,0,0,0.20);
}

/* Thumbnail · 80x80 quadratisch, links */
body .angebot_container .angebot__thumb{
  flex:0 0 80px;
  width:80px; height:80px;
  background:var(--bk-bg);
  display:grid;
  place-items:center;
  overflow:hidden;
}
body .angebot_container .angebot__thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
body .angebot_container .angebot__thumb i{
  font-size:24px;
  color:var(--bk-muted);
  opacity:0.6;
}

/* Body · Titel + Datum-Range */
body .angebot_container .angebot__body{
  flex:1 1 auto;
  min-width:0;
}
body .angebot_container .angebot__body h2{
  margin:0 0 6px;
  padding:0;
  font-family:standard, sans-serif;
  font-size:16px;
  font-weight:600;
  letter-spacing:-0.005em;
  line-height:1.3;
  color:var(--bk-ink);
  text-transform:none;
  text-align:left;
  background:none;
  border:0;
  height:auto;
  width:auto;
  text-shadow:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body .angebot_container .angebot__meta{
  font-family:standard, sans-serif;
  font-size:12px;
  color:var(--bk-muted);
  letter-spacing:0;
}

/* Actions-Bereich rechts: Status + Edit + Delete */
body .angebot_container .actions{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  align-items:center;
}
body .angebot_container .actions .angebot__status{
  width:36px; height:36px;
  display:grid; place-items:center;
  font-size:14px;
}
body .angebot_container .actions .angebot__status.is-active{
  color:#2ecc71;
}
body .angebot_container .actions .angebot__status.is-pending{
  color:#f39c12;
}
body .angebot_container .actions i.fa-pen-to-square,
body .angebot_container .actions i.fa-trash{
  width:36px; height:36px;
  display:grid; place-items:center;
  background:var(--bk-surface-cool);
  border:1px solid var(--bk-line);
  color:var(--bk-ink-soft) !important;
  font-size:14px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  margin:0 !important;
}
body .angebot_container .actions i.fa-pen-to-square:hover{
  background:var(--bk-red-soft);
  color:var(--bk-red-deep) !important;
  border-color:var(--bk-red);
}
body .angebot_container .actions i.fa-trash:hover{
  background:#fee;
  color:#c00 !important;
  border-color:#c00;
}

/* Mobile · Listen-Card kompakter */
@media (max-width:640px){
  body .angebot_container{
    gap:12px;
    padding:12px 14px;
  }
  body .angebot_container .angebot__thumb{
    flex:0 0 60px;
    width:60px; height:60px;
  }
}


/* ==========================================================================
   ↓ RESTLICHER LEGACY-BEREICH AB HIER ↓
   ==========================================================================

   ───── User-Umfrage-Modal (BIKINI-Anpassungen) ──────────────────────────
   Modal-Basics (fixed overlay, scrollable Card, Klassennamen) leben in
   ANOXA frontend.css Section 18. Hier nur tenant-spezifische Anpassungen:
   - h1 in BIKINI-Headline mit rotem Akzentstrich
   - Buttons in BIKINI-Rot/Outline
   - Card-Surface eckig mit Schlagschatten
   - Custom Checkbox/Radio-Pills (analog zu .formular-Pattern) */

body .umfrage{
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  box-shadow:0 24px 60px -16px rgba(0, 0, 0, 0.5);
  font-family:standard, sans-serif;
}

/* Close-Pill mit BIKINI-Hover */
body .umfrage .umfrage-close,
body .umfrage .umfrage_close{
  background:var(--bk-surface-cool);
  border:1px solid var(--bk-line);
  color:var(--bk-ink-soft);
}
body .umfrage .umfrage-close:hover,
body .umfrage .umfrage_close:hover{
  background:var(--bk-red-soft);
  border-color:var(--bk-red);
  color:var(--bk-red-deep);
}

/* h1 mit BIKINI-Headline + Akzentstrich (zentriert) — Spezifitaet hoch
   genug um Module-Header-Override (body main#wrapper > section h1) zu schlagen */
body #updateumfrage .umfrage h1{
  position:relative;
  font-family:medium, sans-serif !important;
  font-size:32px !important;
  font-weight:normal !important;
  letter-spacing:-0.005em !important;
  color:var(--bk-ink) !important;
  text-transform:uppercase !important;
  text-shadow:none !important;
  text-align:center !important;
  padding:0 0 24px !important;
  margin:0 auto 32px !important;
  width:100% !important;
  max-width:640px !important;
  background:none !important;
}
body #updateumfrage .umfrage h1::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  width:56px;
  height:3px;
  background:var(--bk-red);
}

body .umfrage h2{
  font-family:medium, sans-serif;
  font-weight:normal;
  color:var(--bk-ink);
}

/* Einleitung als ruhiger Lese-Block */
body .umfrage .umfrage-einleitung,
body .umfrage .umfrage_einleitung{
  color:var(--bk-ink-soft);
  font-size:15px;
  line-height:1.7;
}

body .umfrage .umfrage-antworten,
body .umfrage .umfrage_antworten{
  color:var(--bk-ink);
}

/* Buttons: Start/Weiter = Rot Filled, Zurueck = Outline-grau */
body .umfrage .umfrage-start,
body .umfrage .umfrage_start,
body .umfrage .umfrage-next,
body .umfrage .umfrage_next{
  background:var(--bk-red);
  color:#fff;
  border:1px solid var(--bk-red);
  padding:14px 28px;
  font-family:standard, sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.14em;
}
body .umfrage .umfrage-start:hover,
body .umfrage .umfrage_start:hover,
body .umfrage .umfrage-next:hover,
body .umfrage .umfrage_next:hover{
  background:var(--bk-red-deep);
  border-color:var(--bk-red-deep);
}
body .umfrage .umfrage-back,
body .umfrage .umfrage_back{
  background:transparent;
  color:var(--bk-ink-soft);
  border:1px solid var(--bk-line);
  padding:14px 28px;
  font-family:standard, sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.14em;
}
body .umfrage .umfrage-back:hover,
body .umfrage .umfrage_back:hover{
  background:var(--bk-surface-cool);
  border-color:var(--bk-muted);
  color:var(--bk-ink);
}

/* Antwort-Pills (Radio/Checkbox) — vollbreite block-Pills wie bei Umfragen
   ueblich, BIKINI-Style. Pattern aehnlich .formular aber mit anderer Hoehe. */
body .umfrage input[type="radio"].css-checkbox,
body .umfrage input[type="checkbox"].css-checkbox{
  position:absolute !important;
  opacity:0;
  pointer-events:none;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
}
body .umfrage input[type="checkbox"].css-checkbox + label.css-label,
body .umfrage input[type="radio"].css-checkbox + label.css-label{
  position:relative !important;
  display:block !important;
  padding:14px 16px 14px 44px !important;
  height:auto !important;
  margin:0 0 4px !important;
  background:var(--bk-surface-cool) !important;
  border:1px solid var(--bk-line) !important;
  border-radius:0 !important;
  font-family:standard, sans-serif !important;
  font-size:14px !important;
  line-height:1.4 !important;
  color:var(--bk-ink) !important;
  cursor:pointer !important;
  user-select:none !important;
  text-align:left !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease !important;
}
/* <br>-Tags zwischen Antwort-Pills neutralisieren (kommen aus dem Legacy-PHP-Markup) */
body .umfrage .umfrage-antworten br,
body .umfrage .umfrage_antworten br{
  display:none;
}
body .umfrage input[type="checkbox"].css-checkbox + label.css-label::before,
body .umfrage input[type="radio"].css-checkbox + label.css-label::before{
  content:'' !important;
  position:absolute !important;
  left:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:16px !important;
  height:16px !important;
  background:var(--bk-surface) !important;
  border:1px solid var(--bk-muted) !important;
  margin:0 !important;
  padding:0 !important;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body .umfrage input[type="radio"].css-checkbox + label.css-label::before{
  border-radius:50% !important;
}
body .umfrage input[type="checkbox"].css-checkbox + label.css-label:hover,
body .umfrage input[type="radio"].css-checkbox + label.css-label:hover{
  background:var(--bk-surface) !important;
  border-color:var(--bk-muted) !important;
}
body .umfrage input[type="radio"].css-checkbox:checked + label.css-label,
body .umfrage input[type="checkbox"].css-checkbox:checked + label.css-label{
  background:var(--bk-red-soft) !important;
  border-color:var(--bk-red) !important;
  color:var(--bk-red-deep) !important;
}
body .umfrage input[type="radio"].css-checkbox:checked + label.css-label::before{
  background:var(--bk-red) !important;
  border-color:var(--bk-red) !important;
  box-shadow:inset 0 0 0 4px #fff !important;
}
body .umfrage input[type="checkbox"].css-checkbox:checked + label.css-label::before{
  background:var(--bk-red) !important;
  border-color:var(--bk-red) !important;
}
body .umfrage input[type="checkbox"].css-checkbox:checked + label.css-label::after{
  content:'' !important;
  position:absolute !important;
  left:21px !important;
  top:50% !important;
  margin-top:-5px !important;
  width:5px !important;
  height:9px !important;
  border:solid #fff !important;
  border-width:0 2px 2px 0 !important;
  transform:rotate(45deg) !important;
  background:none !important;
}

/* Free-Text-Inputs (textarea / kontakt-felder) */
body .umfrage textarea.kontakt-felder,
body .umfrage input.kontakt-felder{
  width:100%;
  padding:12px 14px;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  border-radius:0;
  font-family:standard, sans-serif;
  font-size:14px;
  color:var(--bk-ink);
  transition:border-color .15s ease;
}
body .umfrage textarea.kontakt-felder:focus,
body .umfrage input.kontakt-felder:focus{
  outline:none;
  border-color:var(--bk-red);
}


/* ===========================================================================
   12. WERBUNG  (.werbeflaechenview · .werbeflaechencontainer · .meine_buchungen)
   - Buchungs-Liste oben (".meine_buchungen") + Werbeflaechen-Grid darunter
   - Buchungs-Card: 4-Spalten-Zeile (Name · Zeitraum · Preis · Status)
   - Werbeflaechen-Card: Bild + Titel + Preis-Block + "Buchung anfragen"
   ========================================================================== */

/* Trenner-Distanz nach h1 reduzieren (h1 hat selbst Padding-bottom) */
body main#wrapper.werbung > section > .row > .slot > .trenner{
  height:0;
  margin:0 !important;
}

/* ───── Buchungs-Liste — eine Zeile pro Buchung, ausgewogene Spalten ───── */
body .meine_buchungen{
  display:grid;
  grid-template-columns:2fr 1fr 1fr auto;
  gap:24px;
  align-items:center;
  padding:16px 20px;
  margin:0 0 12px;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  border-radius:0;
  font-family:standard, sans-serif;
  height:auto !important;
  min-height:0;
  width:auto;
  box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body .meine_buchungen:hover{
  border-color:var(--bk-red-soft);
  box-shadow:0 8px 20px -16px rgba(0,0,0,0.20);
}
body .meine_buchungen .mybook_container{
  font-size:13px;
  color:var(--bk-ink-soft);
  line-height:1.4;
  padding:0;
    height:auto;
  margin:0;
  width:auto;
  float:none;
}
/* Spalte 1 (Name) links-buendig, Spalten 2-4 zentriert */
body .meine_buchungen .mybook_container:not(:first-child){
  text-align:center;
}
/* Erste Spalte: Buchungs-Titel — etwas groesser, schwarz, fett */
body .meine_buchungen .mybook_container:first-child strong{
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--bk-ink) !important;
  letter-spacing:-0.005em;
}
/* Status-Spalte: Icon hat eigenes Layout */
body .meine_buchungen .mybook_container i{
  font-size:14px;
  color:#f39c12;  /* "Anfrage" pending */
  margin-left:6px;
}
body .meine_buchungen .mybook_container span{
  display:inline;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--bk-muted);
  margin-right:6px;
}

@media (max-width:768px){
  body .meine_buchungen{
    grid-template-columns:1fr;
    gap:8px;
  }
}

/* ───── Werbeflaechen-Grid + Cards ───────────────────────────────────── */
body .werbeflaechenview{
  display:grid;
  /* auto-fit (nicht auto-fill): bei viel Platz skalieren existing Cards mit,
     statt leere Tracks zu erzeugen → 4 Cards nehmen volle Breite ein */
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
  width:auto;
  margin:0;
  padding:0;
  float:none;
  box-sizing:border-box;
}

body .werbeflaechencontainer{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  border-radius:0;
  overflow:hidden;
  cursor:pointer;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0;
  float:none !important;
  box-sizing:border-box;
  transition:border-color .25s ease, box-shadow .25s ease;
}
body .werbeflaechencontainer:hover{
  border-color:var(--bk-red);
  box-shadow:0 8px 20px -12px rgba(0,0,0,0.22);
}

/* Bild oben — fix-height fuer einheitliche Card-Hoehe */
body .werbeflaechencontainer img{
  width:100% !important;
  height:200px !important;
  object-fit:cover;
  display:block;
  margin:0;
  border-radius:0;
}

/* Titel: in BIKINI-Schwarz statt dynamischer Tenant-Farbe */
body .werbeflaechencontainer h2{
  margin:0;
  padding:18px 18px 12px;
  font-family:medium, sans-serif;
  font-size:18px;
  font-weight:normal;
  line-height:1.1;
  color:var(--bk-ink) !important;
  text-transform:uppercase;
  letter-spacing:-0.005em;
  text-shadow:none;
  background:none;
  border:0;
  height:auto;
  width:auto;
  text-align:left;
}

/* "Buchung anfragen" als BIKINI-Pill (statt UL/LI mit dynamischem Color-Icon) */
body .werbeflaechencontainer ul{
  list-style:none;
  margin:0;
  padding:0 18px 12px;
}
body .werbeflaechencontainer ul li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:transparent;
  border:1px solid var(--bk-line);
  font-family:standard, sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bk-ink-soft);
  width:auto;
  margin:0;
  list-style:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
body .werbeflaechencontainer:hover ul li{
  background:var(--bk-red);
  border-color:var(--bk-red);
  color:#fff;
}
body .werbeflaechencontainer ul li i{
  color:inherit !important;  /* dynamische Farbe aus PHP-style ueberschreiben */
  font-size:12px;
}

/* Preis-Block unten — 2-Spalten Grid sauber */
body .werbeflaechencontainer .werbeflaechen_preis{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 12px;
  margin:0;
  padding:14px 18px;
  border-top:1px solid var(--bk-line);
  background:var(--bk-surface-cool);
  font-family:standard, sans-serif;
  font-size:12px;
  line-height:1.3;
}
body .werbeflaechencontainer .werbeflaechen_preis_container{
  width:auto !important;
  text-align:left !important;
  color:var(--bk-ink-soft);
  padding:0;
  margin:0;
  float:none;
}
/* Jeder zweite Container ist die Preis-Spalte (rechts) */
body .werbeflaechencontainer .werbeflaechen_preis_container:nth-child(even){
  text-align:right !important;
  font-weight:600;
  color:var(--bk-ink);
}

/* Detail-View-Spezifika (innerhalb des AJAX-Buchungsformulars) */
body .formular .werbeflaechendetail{
  display:flex;
  gap:24px;
  margin:0 0 24px;
  padding:0;
}
body .formular .werbeflaechendetail .detailbild{
  flex:0 0 240px;
  width:240px;
  height:240px;
  object-fit:cover;
}
body .formular .werbeflaechendetail .werbeflaechendetail_text{
  flex:1 1 auto;
  min-width:0;
}
body .formular .werbeflaechendetail h2{
  margin:0 0 16px;
  padding:0;
  font-family:medium, sans-serif;
  font-size:24px;
  font-weight:normal;
  line-height:1.15;
  color:var(--bk-ink) !important;  /* dynamische Farbe ueberschreiben */
  text-transform:uppercase;
  letter-spacing:-0.005em;
  text-shadow:none;
  background:none;
  border:0;
  width:auto;
  height:auto;
  text-align:left;
}
body .formular .werbeflaechendetail .werbeflaechen_preis{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 12px;
  margin:0 0 16px;
  padding:12px 0;
  border-top:1px solid var(--bk-line);
  border-bottom:1px solid var(--bk-line);
  font-size:13px;
}
body .formular .werbeflaechendetail .werbeflaechen_preis_container{
  width:auto !important;
  text-align:left !important;
  padding:0;
  margin:0;
  color:var(--bk-ink-soft);
}
body .formular .werbeflaechendetail .werbeflaechen_preis_container:nth-child(even){
  text-align:right !important;
  font-weight:600;
  color:var(--bk-ink);
}
body .formular .werbeflaechen_info{
  font-size:14px;
  line-height:1.6;
  color:var(--bk-ink-soft);
}
body .formular .werbeflaechen_download a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  margin:4px 6px 0 0;
  border:1px solid var(--bk-line);
  font-family:standard, sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--bk-ink-soft);
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
body .formular .werbeflaechen_download a:hover{
  background:var(--bk-red-soft);
  border-color:var(--bk-red);
  color:var(--bk-red-deep);
}

@media (max-width:640px){
  body .formular .werbeflaechendetail{
    flex-direction:column;
  }
  body .formular .werbeflaechendetail .detailbild{
    flex:0 0 auto;
    width:100%;
    height:200px;
  }
}

/* ==========================================================================
   ↓ ANGEBOT-FORMULAR-DROPZONE / WEITERER LEGACY-BEREICH ↓
   ==========================================================================

   ───── Drag&Drop Dropzone (z.B. Angebot-Bild) ────────────────────────── */
body .formular .field-row--dropzone{
  align-items:flex-start;
}
body .formular .bild_dropzone{
  flex:1 1 auto;
  min-width:0;
  min-height:120px;
  padding:24px 20px;
  background:var(--bk-surface-cool);
  border:2px dashed var(--bk-line);
  border-radius:0;
  text-align:center;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
body .formular .bild_dropzone:hover,
body .formular .bild_dropzone.is-dragover{
  background:var(--bk-red-soft);
  border-color:var(--bk-red);
}
body .formular .bild_dropzone img{
  display:block;
  max-width:100%;
  max-height:280px;
  margin:0 auto;
  width:auto;
  height:auto;
}
body .formular .bild_dropzone #angebot_bild_preview{
  text-align:center;
}
body .formular .bild_dropzone .dropzone-hint{
  font-family:standard, sans-serif;
  font-size:13px;
  color:var(--bk-muted);
  line-height:1.6;
}
body .formular .bild_dropzone .dropzone-hint i{
  font-size:28px;
  color:var(--bk-muted);
  display:block;
  margin-bottom:8px;
}

/* Link-Action — kleine Pill statt blauer Link (z.B. "Bild entfernen") */
body .formular .link-action{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding:6px 12px;
  background:transparent;
  border:1px solid var(--bk-line);
  border-radius:0;
  font-family:standard, sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bk-ink-soft);
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
body .formular .link-action:hover{
  background:#fee;
  border-color:#c00;
  color:#c00;
}
body .formular .link-action i{
  font-size:11px;
}
body .formular .form-section-action{
  margin:8px 0 0;
  text-align:right;
}

/* Field-Row Editor-Variante — fuer hohe Boxen (TinyMCE, Dropzone) */
body .formular .field-row--editor{
  align-items:flex-start;
}
body .formular .field-row--editor .mieter_felder_info{
  margin-top:0;
}
body .formular .field-row--editor .tox-tinymce,
body .formular .field-row--editor textarea.fulleditor{
  flex:1 1 auto;
  min-width:0;
}

/* Datetime-Inputs: native Picker-Style minimal aufraeumen */
body .formular input[type="datetime-local"].mieter_felder{
  font-family:standard, sans-serif;
  font-size:14px;
  color:var(--bk-ink);
}


/* ##################################################################################Newsletter */
#newsletter {
  position: fixed;
  max-width: 560px;
  max-height: 400px;
  padding: 30px;
  top: 50%;
  margin-top: -200px;
  margin-left: -280px;
  left: 50%;
  width: 100%;
  background: #f9423a;
  color: #FFF;
  height: 100%;
  z-index: 80000;
}
.newsletter_kopf {
  position: relative;
  width: 100%;
  height: auto;
  font-family: header-slider;
  font-size: 72px;
  color: #FFF;
  line-height: 72px;
}
#container1352_1_658 .newsletter_kopf {
  color: #666;
}
#container1352_1_658 .newsletter_info {
  color: #151515;
}
#container1352_1_658 .newsletter_button, #container1352_1_658 .newsletter_feld {
  color: #fff;
  background: #ff3333;
}
.newsletter_info {
  font-size: 16px;
  color: #FFF;
  line-height: 20px;
  padding: 20px 0;
}
.newsletter_close {
  cursor: pointer;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 80002;
}
.newsletter_close img {
  width: 100% !important;
  height: auto;
}




/* ===========================================================================
   LOGIN — Auth-Card (.auth-card · .auth-form · .auth-field · .auth-actions)
   - Markup: lib/php/content/_login.php — Modern-Card mit 4-Step Reset-Flow
   - PHP behaelt Legacy-Klassen (.login_eingabe, .login_hinweis, .kontakt_felder)
     fuer JS-Kompatibilitaet mit auth.js, die werden hier neu gestylt.
   - Legacy-Selektoren (.login_info, #ssllogin, #sslhilfe, #passwort_change,
     freistehender meter) wurden hier entfernt — nicht mehr im Markup.
   ========================================================================== */

/* Login-Page Container — Layout NUR wenn .auth-card im DOM ist (also bei
   ungeloggtem User auf Login-Seite). Eingeloggter User hat dieselbe main#wrapper.home,
   das CSS darf da NICHT greifen. :has() matcht nur wenn .auth-card als Kind da ist. */
body main#wrapper.home:has(.auth-card){
  display:block;
  padding:120px 20px 40px;
}
body main#wrapper.home:has(.auth-card) > .inner{
  width:100%;
  max-width:480px;
  margin:0 auto;
}

/* Auth-Card: Container fuer Login UND Reset (eines aktiv, eines hidden) */
body .auth-card{
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  border-radius:0;
  overflow:hidden;
  box-shadow:0 12px 36px -8px rgba(0,0,0,0.10);
  width:100%;
  max-width:480px;
  margin:0 auto;
}

/* Welcome-Hero (DB-HTML aus $laender['login_guideportal']) — BIKINI-Stil */
body .auth-welcome{
  background:var(--bk-surface);
  color:var(--bk-ink);
  padding:36px 32px 28px;
  position:relative;
  border-bottom:1px solid var(--bk-line);
}
body .auth-welcome::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:var(--bk-red);
}
/* DB-Content Typo (h1/h3/p) im Welcome-Hero */
body .auth-welcome h1{
  margin:0 0 6px !important;
  padding:0 !important;
  font-family:standard, Arial, sans-serif;
  font-size:28px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  color:var(--bk-ink) !important;
  letter-spacing:0;
  text-align:left;
  text-transform:uppercase;
}
body .auth-welcome h1::after,
body .auth-welcome h3::after{
  display:none !important;
}
body .auth-welcome h3{
  margin:0 0 16px !important;
  padding:0 !important;
  font-family:standard, Arial, sans-serif;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  color:var(--bk-red) !important;
  letter-spacing:0.15em;
  text-align:left;
  text-transform:uppercase;
}
body .auth-welcome p{
  margin:0 0 10px;
  padding:0;
  font-size:13px;
  line-height:1.6;
  color:var(--bk-ink-soft);
  text-align:left;
}
body .auth-welcome p span{
  color:var(--bk-ink-soft) !important;
  font-size:13px !important;
}
body .auth-welcome h4{
  margin:18px 0 0 !important;
  padding:0 !important;
  text-align:left;
  display:block !important;
  background:transparent !important;
  border:0 !important;
  font-size:13px !important;
}
body .auth-welcome h4 a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 22px;
  background:var(--bk-red);
  color:#fff !important;
  border:0;
  border-radius:0;
  font-family:standard, Arial, sans-serif;
  font-size:12px !important;
  font-weight:600;
  line-height:1 !important;
  letter-spacing:0.1em;
  text-decoration:none;
  text-transform:uppercase;
  transition:background .15s ease;
}
body .auth-welcome h4 a:hover{
  background:#cc1f1f;
}

/* Form-Bereich (weiss, unter Welcome-Hero) */
body .auth-card .auth-form{
  padding:32px;
}
body .auth-card .auth-step{
  padding:32px;
  position:relative;
}
body .auth-card .auth-form-title{
  margin:0 0 20px !important;
  padding:0 !important;
  font-family:standard, Arial, sans-serif;
  font-size:20px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  color:var(--bk-ink) !important;
  letter-spacing:0;
  text-transform:uppercase;
  text-align:left;
  display:flex;
  align-items:center;
  gap:8px;
}
body .auth-card .auth-form-title::after{
  display:none !important;
}

/* Hint-Box (login_hinweis) — ueber dem Formular.
   .auth-hint-error: rot bei Login-Fehler.
   .auth-hint-info: neutraler Hinweis. */
body .auth-card .login_hinweis.auth-hint-error{
  margin:0 0 20px;
  padding:12px 16px;
  background:rgba(230,25,123,0.08);
  color:var(--bk-red);
  border:1px solid rgba(230,25,123,0.25);
  border-radius:0;
  font-family:standard, Arial, sans-serif;
  font-size:13px;
  line-height:1.5;
  text-align:left;
  text-transform:none;
}
body .auth-card .login_hinweis.auth-hint-error a{
  color:var(--bk-red) !important;
  text-decoration:underline;
}
body .auth-card .login_hinweis.auth-hint-info{
  margin:0 0 20px;
  padding:12px 16px;
  background:var(--bk-bg);
  color:var(--bk-ink-soft);
  border:1px solid var(--bk-line);
  border-radius:0;
  font-family:standard, Arial, sans-serif;
  font-size:13px;
  line-height:1.5;
  text-align:left;
  text-transform:none;
}
body .auth-card .login_hinweis.auth-hint-info a{
  color:var(--bk-red) !important;
  text-decoration:underline;
}
body .auth-card .auth-hint-small{
  margin:-12px 0 16px;
  padding:0;
  font-family:standard, Arial, sans-serif;
  font-size:12px;
  line-height:1.5;
  color:#999999;
}

/* Form-Field (auth-field) — login_eingabe wrapper */
body .auth-card .auth-field{
  display:block !important;
  width:100% !important;
  margin:0 0 16px !important;
  padding:0 !important;
  position:relative;
}
body .auth-card .auth-label{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 6px;
  font-family:standard, Arial, sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--bk-ink-soft);
  letter-spacing:0.1em;
  text-transform:uppercase;
}
body .auth-card .auth-label i{
  font-size:12px;
  color:#999999;
  position:static !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  left:auto !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  border-radius:0 !important;
  line-height:1 !important;
  cursor:inherit !important;
  text-shadow:none !important;
  transform:none !important;
}

/* Input-Felder (kontakt_felder) im Auth-Context */
body .auth-card .auth-field .kontakt_felder{
  width:100%;
  height:auto;
  margin:0;
  padding:12px 14px;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  border-radius:0;
  font-family:standard, Arial, sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  color:var(--bk-ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
body .auth-card .auth-field .kontakt_felder:hover{
  border-color:rgba(230,25,123,0.4);
  background:var(--bk-surface);
  color:var(--bk-ink);
}
body .auth-card .auth-field .kontakt_felder:focus{
  outline:none;
  border-color:var(--bk-red);
  background:var(--bk-surface);
  color:var(--bk-ink);
  box-shadow:0 0 0 3px rgba(230,25,123,0.12);
}
body .auth-card .auth-field .kontakt_felder::placeholder{
  color:#999999;
  font-weight:400;
}

/* Browser-Autofill Override (Chrome/Safari) — keinen Blauschimmer auf
   gespeicherten Login-Daten, BIKINI-Hintergrund + schwarzer Text */
body .auth-card .auth-field .kontakt_felder:-webkit-autofill,
body .auth-card .auth-field .kontakt_felder:-webkit-autofill:hover,
body .auth-card .auth-field .kontakt_felder:-webkit-autofill:focus,
body .auth-card .auth-field .kontakt_felder:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 100px var(--bk-surface) inset !important;
  box-shadow:0 0 0 100px var(--bk-surface) inset !important;
  -webkit-text-fill-color:var(--bk-ink) !important;
  caret-color:var(--bk-ink) !important;
  transition:background-color 5000s ease-in-out 0s;
}

/* Password-Field mit Toggle-Eye */
body .auth-card .auth-field-pw{
  position:relative;
}
body .auth-card .auth-field-pw .kontakt_felder{
  padding-right:48px;
}
body .auth-card .login_eingabe .toggle-pw,
body .auth-card .toggle-pw{
  position:absolute !important;
  right:8px !important;
  bottom:8px !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  width:36px !important;
  height:36px !important;
  display:grid !important;
  place-items:center;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  color:#999999;
  cursor:pointer;
  padding:0 !important;
  margin:0 !important;
  transition:background .15s ease, color .15s ease;
}
body .auth-card .toggle-pw:hover{
  background:var(--bk-bg);
  color:var(--bk-red);
}
body .auth-card .toggle-pw i{
  font-size:14px;
  color:inherit !important;
}

/* Password-Strength Meter im Auth-Context */
body .auth-card .auth-strength{
  margin:-8px 0 16px;
  padding:0;
}
body .auth-card .auth-strength meter{
  width:100%;
  height:6px;
  border-radius:0;
  border:0;
  background:var(--bk-line);
  overflow:hidden;
  margin:0;
  top:auto;
  appearance:none;
  -webkit-appearance:none;
  display:block;
}
body .auth-card .auth-strength meter::-webkit-meter-bar{
  background:var(--bk-line);
  border:0;
  border-radius:0;
}
body .auth-card .auth-strength meter::-webkit-meter-optimum-value{
  background:linear-gradient(90deg, #8bb99a 0%, #5fa775 100%);
  border-radius:0;
}
body .auth-card .auth-strength meter::-webkit-meter-suboptimum-value{
  background:#f4da40;
  border-radius:0;
}
body .auth-card .auth-strength meter::-webkit-meter-even-less-good-value{
  background:var(--bk-red);
  border-radius:0;
}

/* Actions-Bereich (Submit + Link) */
body .auth-card .auth-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:24px 0 0;
  padding:0;
}
body .auth-card .auth-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:48px;
  padding:0 24px;
  background:var(--bk-red);
  color:#fff;
  border:0;
  border-radius:0;
  font-family:standard, Arial, sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
body .auth-card .auth-submit:hover{
  background:#cc1f1f;
  transform:translateY(-1px);
}
body .auth-card .auth-submit i{
  font-size:14px;
}
body .auth-card .auth-link{
  display:block;
  width:100%;
  padding:8px 0;
  background:transparent;
  border:0;
  font-family:standard, Arial, sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--bk-ink-soft);
  text-align:center;
  cursor:pointer;
  text-decoration:none;
  transition:color .15s ease;
}
body .auth-card .auth-link:hover{
  color:var(--bk-red);
  text-decoration:underline;
}

/* Reset-Step Header (X-Close Button) */
body .auth-card .auth-reset-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 16px;
}
body .auth-card .auth-reset-header .auth-form-title{
  margin:0 !important;
  flex:1 1 auto;
}
body .auth-card .auth-close{
  flex:0 0 36px;
  width:36px !important;
  height:36px !important;
  display:grid;
  place-items:center;
  background:var(--bk-bg);
  border:1px solid var(--bk-line);
  border-radius:0;
  color:var(--bk-ink-soft);
  cursor:pointer;
  padding:0;
  margin:0;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
body .auth-card .auth-close:hover{
  background:var(--bk-surface);
  border-color:var(--bk-red);
  color:var(--bk-red);
}
body .auth-card .auth-close i{
  font-size:14px;
}

/* Reset-Message */
body .auth-card .auth-message{
  margin:0 0 16px;
  padding:0;
  font-family:standard, Arial, sans-serif;
  font-size:13px;
  line-height:1.5;
  color:var(--bk-ink-soft);
}

/* Login-Page: Hamburger zeigt nichts Sinnvolles auf der Login-Page —
   verstecken NUR wenn .auth-card im DOM ist. */
body:has(.auth-card) .nav-toggle{
  display:none !important;
}

/* Mobile Responsive */
@media (max-width: 540px) {
  body main#wrapper.home:has(.auth-card){
    padding:80px 16px 32px;
  }
  body .auth-card .auth-form,
  body .auth-card .auth-step{
    padding:24px 20px;
  }
  body .auth-welcome{
    padding:28px 20px 24px;
  }
  body .auth-welcome h1{
    font-size:24px !important;
  }
}
h1 {
  margin: 0 1% 0 1%;
}
/* ##################################################################################BUCHUNG */
.haus_hover {
  position: absolute;
  cursor: pointer;
  display: none;
  overflow: visible;
  opacity: 1;
  font-size: 8px !important;
  animation-name: iwanna;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.haus_hover img {
  min-width: 35px;
  height: auto;
  border: 2px solid #FF3333;
  border-radius: 50%;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.haus_hover:hover > img, .haus_hover.hover_effect > img {
  min-width: 50px;
  margin-top: -7.5px;
  margin-left: -7.5px;
}
.haus_hover:hover, .haus_hover.hover_effect {
  display: block;
}
.werbeflaechenview {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.werbeflaechencontainer {
  position: relative;
  width: 23%;
  float: left;
  margin: 1%;
  cursor: pointer;
  border: 1px solid #ccc;
  overflow: hidden;
}
.werbeflaechen .media_preview:after {
  position: absolute;
  top: 50%;
  left: 110%;
  content: 'Datenblatt & Details';
  transform: translateY(-50%);
  font-size: 12px;
}
.meine_buchungen {
  position: relative;
  width: 98%;
  padding: 10px;
  border: 1px solid #ccc;
  overflow: hidden;
  background: #fff;
  margin: 20px 1%;
}
.mybook_container {
  float: left;
  height: 50px;
  padding-right: 10px;
  line-height: 50px;
  width: 25%;
}
.mybook_container img {
  height: 50px !important;
  width: auto !important;
  float: left;
  margin-right: 10px;
}
.werbeflaechendetail {
  position: relative;
  width: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  background: #fff;
  margin-bottom: 50px;
}
.werbeflaechendetail .detailbild {
  position: relative;
  width: 50% !important;
  height: auto;
  float: left;
}
.werbeflaechendetail_text {
  position: relative;
  width: 50% !important;
  height: auto;
  float: left;
  padding: 20px;
}
.werbeflaechendetail_text h2 {
  text-align: left;
  padding-left: 10px;
}
.werbeflaechencontainer ul {
  list-style: none;
  max-width: 90%;
  padding: 0;
  margin: 10px auto;
}
.werbeflaechencontainer ul li {
  font-size: 14px;
  cursor: pointer;
  padding: 5px !important;
  margin: 0;
}
.werbeflaechencontainer ul li i {
  margin-right: 5px;
}
.werbeflaechencontainer ul li:hover {
  background: #efefef;
}
.werbeflaechencontainer h2 {
  text-align: center;
  margin: 20px auto;
}
.werbeflaechen_preis {
  font-weight: bold;
  font-size: 12px;
  padding: 10px;
}
.werbeflaechen_info {
  font-size: 12px;
  padding: 40px 10px 10px;
  height: 180px;
    overflow:scroll;
}
.werbeflaechen_download {
  font-size: 12px;
  padding: 10px 10px 10px;
}
.werbeflaechen_download h3, .werbeflaechen_download .media_details {
  display: none;
}
.werbeflaechen_download .mediaarchiv_download {
  background: transparent !important;
}
.werbeflaechen_preis_container {
  float: left;
  width: 50%;
}
@keyframes iwanna {
  0% {
    opacity: 0.2;
    -webkit-transition: opacity 500ms ease-out;
    -moz-transition: opacity 500ms ease-out;
    -o-transition: opacity 500ms ease-out;
    transition: opacity 500ms ease-out;
  }
  50% {
    opacity: 1;
    -webkit-transition: opacity 500ms ease-out;
    -moz-transition: opacity 500ms ease-out;
    -o-transition: opacity 500ms ease-out;
    transition: opacity 500ms ease-out;
  }
  100% {
    opacity: 0.2;
    -webkit-transition: opacity 500ms ease-out;
    -moz-transition: opacity 500ms ease-out;
    -o-transition: opacity 500ms ease-out;
    transition: opacity 500ms ease-out;
  }
}
/* ##################################################################################UMFRAGE */
.umfrage h1, .umfrage h2 {
  font-family: header;
}
.umfrage h2 {
  font-weight: normal;
}
.umfrage_einleitung {
  font-family: standard;
}
.umfrage_antworten {
  background: #efefef;
}
/* MIETERHANDBUCH — Markup + CSS komplett refaktoriert in Section 14
   (.wiki-overview · .wiki-gruppe · .wiki-row · #wikidetail .detail_text).
   Folgende Legacy-Klassen wurden entfernt:
     #wikisuche, .searchwiki, .wiki_felder, .wiki_felder_info  (Suchfeld raus)
     #wikisuchergebnis ul ul li (verschachtelte float-Liste)
     .treffer  (Such-Treffer-Anzeige raus, da Frontend-Suche entfernt)
   Markup-Refactor: lib/php/module/_wiki.php (Frontend-Suche entfernt — kuenftig
   ueber Chat-Assistent + JSON-LD Knowledge Base) */
/* ÜBERSICHT — Mieter-Nav komplett refaktoriert in Foundation Section 5
   (Topbar Pills + User-Card Bold + Stats). Folgende Legacy-Klassen sind
   nicht mehr gerendert und wurden hier entfernt:
     .uebersicht          (Container — jetzt Foundation: flex-column, full-width)
     .uebersicht .user_daten (war float:right width:31.33% — jetzt Bold-Card)
     .uebersicht .navi_left  (war width:20% float:left — jetzt .mieter-pill)
     .navi_left i, .menu_text (waren Icon+Label mit float — jetzt im Pill)
   Markup-Refactor: lib/php/module/_mieternav.php (29.04.2026) */
.home h1, .marketing_pr h1, .vermietung h1, .organisatorisches h1, .archiv h1, .mieterprofil h1, .downloads h1, .umfragen h1, .werbeflaechen h1, .mieterhandbuch h1 ,.mitarbeiterzugang h1{
  position: relative;
  width: 98%;
  height: 85px;
  margin-bottom: 20px;
}
.home h1 span, .marketing_pr h1 span, .vermietung h1 span, .organisatorisches h1 span, .archiv h1 span, .mieterprofil h1 span, .downloads h1 span, .umfragen h1 span, .werbeflaechen h1 span, .mieterhandbuch h1 span,.mitarbeiterzugang h1 span {
  font-family: header;
  position: relative;
  font-size: 72px;
  line-height: 80px;
  padding: 15px 0 15px 20px;
  color: #151515;
  float: right !important;
  text-transform: uppercase;
  text-align: left;
  font-weight: normal !important;
  z-index: 3;
}
.vermietung h1 span {
  color: #00acc3;
}
.organisatorisches h1 span {
  color: #ff3333;
}
.marketing_pr h1 span {
  color: #8bb99a;
}
.downloads h1 span, .archiv h1 span {
  color: #151515;
}
.archiv h2 {
  font-family: standard;
  color: rgba(59, 49, 113, 0.99);
  margin: 0 0 40px 15px;
}
.home h1:first-of-type span, .marketing_pr h1:first-of-type span, .vermietung h1:first-of-type span, .organisatorisches h1:first-of-type span, .archiv h1:first-of-type span, .mieterprofil h1:first-of-type span, .downloads h1:first-of-type span, .umfragen h1:first-of-type span {
  float: left !important;
  padding: 15px 20px 15px 0;
  color: #151515;
}
.login_info h1 {
  color: #FFF;
}
/* ===========================================================================
   13. DOWNLOADS / FILES  (.downloadcontainer · .file-gruppe · .file-row)
   - Modul fuer __addon.files.php (eingebunden ueber CMS-Containermodus)
   - Gruppen mit optionalem Hero-Bild + Datei-Liste darunter
   - File-Row: Icon + Filename + Groesse + Download-Pfeil
   ========================================================================== */

body .downloadcontainer{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:24px;
  padding:32px 0;
  width:100%;
}

body .file-gruppe{
  display:flex;
  flex-direction:column;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  border-radius:0;
  overflow:hidden;
}

/* Hero-Variante: Bild oben mit schwarzem Logo-Pill links unten */
body .file-gruppe__hero{
  position:relative;
  width:100%;
  height:160px;
  overflow:hidden;
}
body .file-gruppe__hero img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  margin:0;
}
body .file-gruppe__hero h2{
  position:absolute;
  bottom:14px;
  left:14px;
  margin:0;
  padding:0;
  background:transparent;
  font-size:0;
}
body .file-gruppe__hero h2 span{
  display:inline-block;
  padding:5px 10px;
  background:#000;
  color:#fff;
  font-family:standard, sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1.3;
  white-space:nowrap;
  border-radius:0;
}

/* Header-Variante (ohne Hero-Bild): nur Pill auf hellgrauem Streifen */
body .file-gruppe__header{
  padding:18px 18px 0;
  background:var(--bk-surface);
}
body .file-gruppe__header h2{
  margin:0;
  padding:0;
  font-size:0;
}
body .file-gruppe__header h2 span{
  display:inline-block;
  padding:5px 10px;
  background:#000;
  color:#fff;
  font-family:standard, sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1.3;
}

/* Datei-Liste */
body .file-gruppe__list{
  list-style:none;
  margin:0;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* Eine File-Zeile: Icon · Name · Groesse · Download-Pfeil */
body .file-row{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
}
body .file-row__link{
  display:grid;
  grid-template-columns:40px 1fr auto auto;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  background:transparent;
  border:1px solid transparent;
  border-radius:0;
  text-decoration:none;
  color:var(--bk-ink);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
body .file-row__link:hover{
  background:var(--bk-red-soft);
  border-color:var(--bk-red);
  color:var(--bk-red-deep);
}

/* PDF/Datei-Icon links — mit oder ohne Bild-Preview */
body .file-row__icon{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  background:var(--bk-surface-cool);
  border:1px solid var(--bk-line);
  background-size:cover;
  background-position:center;
  flex-shrink:0;
}
body .file-row__icon i{
  font-size:18px;
  color:var(--bk-ink-soft);
}
body .file-row__icon img{
  max-width:100%;
  max-height:100%;
  display:block;
}

body .file-row__name{
  font-family:standard, sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:inherit;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body .file-row__size{
  font-family:standard, sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--bk-muted);
  white-space:nowrap;
}
body .file-row__action{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  color:var(--bk-ink-soft);
  transition:color .15s ease;
}
body .file-row__link:hover .file-row__action{
  color:var(--bk-red);
}
body .file-row__action i{
  font-size:14px;
}

@media (max-width:480px){
  body .file-row__link{
    grid-template-columns:36px 1fr auto;
    gap:8px;
  }
  body .file-row__icon{
    width:36px; height:36px;
  }
  body .file-row__action{
    display:none;     /* auf Phone Pfeil weg, Größe reicht als Indikator */
  }
}

/* Legacy-Override: .downloads h3 { display:none } neutralisieren —
   im neuen Markup gibt's keinen h3 mehr, aber falls noch Reste rumliegen */
body .downloads h3{
  display:revert;
}

/* ===========================================================================
   14. WIKI / MIETERHANDBUCH  (.wiki-overview · .wiki-gruppe · .wiki-row)
   - Modul fuer lib/php/module/_wiki.php (Frontend-Suche entfernt — kuenftig
     ueber Chat-Assistent + JSON-LD Knowledge Base)
   - Gruppen-Card mit farbigem Hero-Streifen + Icon
   - Klickbare Wiki-Eintraege als Liste (Icon · Name · Pfeil)
   - Detail-View nutzt das Schreiben-Pattern aus Section 7 (siehe unten:
     #wikidetail .detail_text Override)
   ========================================================================== */

body .wiki-overview{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:24px;
  padding:32px 0;
  width:100%;
}

body .wiki-gruppe{
  display:flex;
  flex-direction:column;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  border-radius:0;
  overflow:hidden;
}

/* Hero: farbiger Streifen mit Icon + Gruppen-Name (BIKINI-Logo-Pill-Optik) */
body .wiki-gruppe__hero{
  --wiki-accent: var(--bk-red);
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 18px;
  background:var(--wiki-accent);
  color:#fff;
}
body .wiki-gruppe__hero i{
  font-size:18px;
  color:#fff;
  flex-shrink:0;
}
body .wiki-gruppe__hero .wiki-gruppe__name{
  font-family:standard, sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1.3;
  color:#fff;
}

body .wiki-gruppe__list{
  list-style:none;
  margin:0;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* Eine Wiki-Zeile: Icon · Name · Pfeil — Hover BIKINI-Soft-Red */
body .wiki-row{
  list-style:none;
  display:grid;
  grid-template-columns:40px 1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  color:var(--bk-ink);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
body .wiki-row:hover{
  background:var(--bk-red-soft);
  border-color:var(--bk-red);
  color:var(--bk-red-deep);
}

body .wiki-row__icon{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  background:var(--bk-surface-cool);
  border:1px solid var(--bk-line);
  flex-shrink:0;
  transition:background .15s ease, border-color .15s ease;
}
body .wiki-row__icon i{
  font-size:16px;
  color:var(--bk-ink-soft);
  transition:color .15s ease;
}
body .wiki-row:hover .wiki-row__icon{
  background:#fff;
  border-color:var(--bk-red);
}
body .wiki-row:hover .wiki-row__icon i{
  color:var(--bk-red);
}

body .wiki-row__name{
  font-family:standard, sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:inherit;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body .wiki-row__action{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  color:var(--bk-ink-soft);
  transition:color .15s ease, transform .15s ease;
}
body .wiki-row:hover .wiki-row__action{
  color:var(--bk-red);
  transform:translateX(2px);
}
body .wiki-row__action i{
  font-size:14px;
}

/* Detail-View — uebernimmt das Schreiben-Detail-Pattern aus Section 7
   ueber #wikidetail anstelle von #detailschreiben.
   Zwei Layer:
     #wikidetail        = voll-breit ueber Grid (grid-column 1 / -1),
                           hellgrauer Hintergrund, roter Top-Border
     .detail_text       = zentrierte 820px-Card auf weiss */
body .wiki-overview > #wikidetail{
  grid-column:1 / -1;
  width:auto;
  max-width:none;
  margin:0;
  background:var(--bk-surface-cool);
  border-top:3px solid var(--bk-red);
  padding:40px 24px 56px;
}
body #wikidetail .detail_text{
  position:relative;
  max-width:820px;
  margin:0 auto;
  background:var(--bk-surface);
  border:1px solid var(--bk-line);
  padding:56px 64px 48px;
  box-shadow:0 12px 40px -18px rgba(0,0,0,0.15);
  width:auto;
}
body #wikidetail .detail_text .close_button{
  position:absolute;
  top:16px; right:16px;
  width:40px; height:40px;
  border-radius:10px;
  background:var(--bk-surface-cool);
  border:1px solid var(--bk-line);
  display:grid; place-items:center;
  cursor:pointer;
  color:var(--bk-ink-soft);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  float:none; padding:0; margin:0;
}
body #wikidetail .detail_text .close_button:hover{
  background:var(--bk-red-soft);
  color:var(--bk-red-deep);
  border-color:var(--bk-red-soft);
}
body #wikidetail .detail_text .close_button i{
  font-size:16px;
  color:inherit !important;
  margin:0; width:auto; height:auto; float:none;
}
body #wikidetail .detail_text .home_schreiben_nr{
  margin:0 0 32px;
  padding:0;
  background:none;
  border:0;
  text-align:left;
}
body #wikidetail .detail_text .home_schreiben_nr h1{
  font-family:standard, sans-serif !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bk-muted) !important;
  margin:0 0 14px;
  padding:0;
  line-height:1;
  height:auto;
  text-shadow:none;
  background:none;
  border:0;
  float:none;
  width:auto;
}
body #wikidetail .detail_text .home_schreiben_nr h1 i{
  color:inherit !important;
  margin:0;
}
body #wikidetail .detail_text .home_schreiben_nr h2{
  font-family:medium, sans-serif;
  font-size:30px !important;
  font-weight:normal;
  letter-spacing:-0.015em;
  line-height:1.15;
  color:var(--bk-ink);
  margin:0;
  padding:0;
  background:none;
  text-transform:none;
  text-align:left;
  height:auto;
}
body #wikidetail .detail_text .home_schreiben_nr::after{
  content:'';
  display:block;
  width:48px;
  height:2px;
  background:var(--bk-red);
  margin-top:24px;
}
body #wikidetail .detail_text .schreiben_main_text{
  font-family:standard, sans-serif;
  font-size:15px;
  line-height:1.7;
  color:var(--bk-ink-soft);
  text-align:left;
}
body #wikidetail .detail_text .schreiben_main_text p{ margin:0 0 16px; }
body #wikidetail .detail_text .schreiben_main_text p:last-child{ margin-bottom:0; }
body #wikidetail .detail_text .schreiben_main_text h2,
body #wikidetail .detail_text .schreiben_main_text h4{
  font-family:medium, sans-serif;
  color:var(--bk-ink);
  letter-spacing:-0.015em;
  margin:28px 0 12px;
  font-weight:normal;
  text-transform:none;
}
body #wikidetail .detail_text .schreiben_main_text h2{ font-size:22px; }
body #wikidetail .detail_text .schreiben_main_text h4{ font-size:16px; }
body #wikidetail .detail_text .schreiben_main_text strong{
  color:var(--bk-ink);
  font-weight:600;
}
body #wikidetail .detail_text .schreiben_main_text a,
body #wikidetail .detail_text .schreiben_main_text a[style]{
  color:var(--bk-red) !important;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
body #wikidetail .detail_text .schreiben_main_text a:hover,
body #wikidetail .detail_text .schreiben_main_text a[style]:hover{
  color:var(--bk-red-deep) !important;
}
body #wikidetail .detail_text .schreiben_main_text ul,
body #wikidetail .detail_text .schreiben_main_text ol{
  margin:0 0 16px;
  padding-left:22px;
}
body #wikidetail .detail_text .schreiben_main_text li{ margin-bottom:6px; }
body #wikidetail .detail_text .schreiben_main_text img{
  max-width:100%;
  height:auto;
  margin:16px 0;
}

@media (max-width:768px){
  body .wiki-overview > #wikidetail{
    background:transparent;
    padding:24px 0 32px;
  }
  body #wikidetail .detail_text{
    padding:32px 16px 28px;
    margin:0 auto;
  }
  body #wikidetail .detail_text .home_schreiben_nr h2{
    font-size:24px !important;
  }
}

@media (max-width:480px){
  body .wiki-row{
    grid-template-columns:36px 1fr;
    gap:8px;
  }
  body .wiki-row__icon{
    width:36px; height:36px;
  }
  body .wiki-row__action{
    display:none;
  }
}
/* .home_schreiben_overview / .home_schreiben / .home_img / .home_schreiben_*
   komplett refaktoriert in Foundation Section 6 (29.04.2026).
   Folgende Legacy-Klassen sind entfernt — alle uebernommen in Section 6:
     .home_schreiben_overview     (war flex-row center — jetzt grid auto-fill)
     .home_schreiben              (war width:31.33% float:left — jetzt grid-cell)
     .home_img / .home_img img    (war Foto-Hero — jetzt Mesh-Gradient)
     .home_img h2 / span          (war fullscreen overlay — jetzt Pill oben links)
     .home_schreiben_ungelesen    (war pulsierender Kreis — jetzt Pill oben rechts)
     @keyframes einblenden        (war NEU-Badge-Animation — entfaellt)
     .home_schreiben_nr           (war 30px header — jetzt 11px uppercase meta)
     .home_schreiben_titel        (war uppercase 40px — jetzt 16px Titelfont)
     .home_schreiben_text         (war 14px center — jetzt 13px left mit Pfeil) */
.home_mehr_lesen {
  position: relative;
  margin: 60px 0 20px 0;
  display: table;
  color: #151515;
  padding: 0 30px 0 30px;
  font-size: 16px;
  height: 50px;
  font-weight: bold;
  line-height: 50px;
  text-align: left;
  cursor: pointer;
  border: 1px solid #979797;
  border-radius: 25px;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
}
.home_mehr_lesen:hover {
  border: 1px solid #8A58FD;
  color: #8A58FD;
}
#detailschreiben {
  position: relative;
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  height: auto;
}
.detail_text {
  position: relative;
  background: #eee;
  width: 98%;
  margin: 1%;
  padding: 80px 23% 80px 23%;
  text-align: left;
  overflow: hidden;
}
.detail_text .home_schreiben_nr, .detail_text h3 {
  margin: 10px 0 10px 0;
  font-size: 20px !important;
}
.detail_text .home_schreiben_nr h1 {
  margin: 10px 0 10px 0;
  font-size: 60px !important;
}
.detail_text .home_schreiben_nr h2 {
  margin: 0 0 10px 0;
  font-weight: normal;
  font-size: 34px !important;
}
.detail_text .home_schreiben_nr, .detail_text h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid #bec0c0;
}
.detail_text h3 {
  margin: 10px 0 0 0;
}
.detail_text .downloadcontainer {
  margin: 0 0 0 0;
}
.detail_text .mediaarchiv_download {
  background: transparent;
}
.detail_text .media_details {
  width: auto;
  font-family: standard;
  font-size: 14px;
  line-height: 50px;
}
.mediaarchiv_download .media_details h4{
    color:#151515 !important;
    font-size:16px !important;
    line-height:18px !important;
}
.schreiben_main_text {
  text-align: left !important;
  font-size: 14px;
  line-height: 21px;
  font-weight: lighter;
  font-family: standard;
  padding: 20px 0 0 0;
}
.schreiben_main_text p {
  width: 100%;
  margin-bottom: 15px;
}
.schreiben_main_text img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}
.schreiben_main_text ul {
  margin-left: 20px;
}
.download_button, .close_button {
  display: inline;
  color: #FFF;
  font-size: 16px;
  border-radius: 20px;
  margin-top: 15px;
  padding: 10px 20px 10px 20px;
  border: 0px solid;
  cursor: pointer;
}
.download_button_container {
  display: block;
  text-align: center;
  width: 100%;
  height: 40px;
  margin: 30px 0 30px 0;
}
.downline {
  background: #bec0c0;
  height: 1px;
  width: 100%;
  position: relative;
}
.download_button {
  display: block;
  border-radius: 5px;
  padding: 5px 20px 5px 20px;
}
.close_button {
  position: absolute;
  color: #bec0c0;
  top: 50px;
  right: 50px;
  width: 40px;
  height: 40px;
  padding: 0;
  line-height: 40px;
  margin: 0 0 10px 10px;
  text-align: center;
  border: 1px solid #979797;
  cursor: pointer;
}
.close_button:hover {
  background: #fff;
}
.download_button:hover {
  background: #000;
  color: #FFF;
}
.buttons-group {
  margin: 0 1% 0 1%;
}
.buttons-group .button.ar {
  float: left;
  cursor: pointer;
  font-family: standard;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 50px;
  margin-right: 20px;
}
.buttons-group i {
  width: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
  background: #efefef;
  height: 50px;
  margin-right: 20px;
  float: left;
  cursor: pointer;
}
.mieter_jahr {
  position: relative;
  display: inline;
  font-family: standard;
  font-size: 13px;
  padding: 10px 15px 10px 15px;
  margin-right: 10px;
  float: left;
  border: 1px solid #ccc;
  cursor: pointer;
}
.mieter_jahr.is-checked, .mieter_container_archiv_overview.is-checked {
  background: #FFF;
  border: 1px solid #FFF;
}
.saveit_button {
  position: relative;
  float: right;
  color: #FFF;
  margin-top: 0px;
  display: inline;
  font-size: 16px;
  padding: 10px 15px 10px 15px;
  margin: 0 0 10px 10px;
  text-align: center;
  background: #ff3333;
  border: 0px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
}
.saveit_button:hover {}
.mieter_felder, .mieter_felder_h_ind {
  background: transparent;
  padding: 2%;
  margin: 10px 0 10px 0;
  border: 1px solid #979797;
  border-radius: 5px;
  font-size: 16px;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
}
.mieter_felder.half {
  width: 49%;
  margin-right: 1%;
  float: left;
}
.mieter_felder.info {
  width: 90%;
  float: left;
}
.mieter_felder.full {
  width: 100%;
  float: none;
}
.mieter_felder.dis {
  border: 1px solid transparent;
}
.mieter_felder_info {
  background: transparent;
  float: left;
  padding: 2%;
  margin: 10px 0 10px 0;
  width: 9%;
  margin-right: 1%;
  font-size: 20px;
}
.mieter_felder:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px #FFF inset; /* Change the color to your own background color */
  -webkit-text-fill-color: #666;
}
.mieter_felder:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 50px #FFF inset;
  -webkit-text-fill-color: #666;
}
.mieter_felder::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #666;
}
.mieter_felder::-moz-placeholder { /* Firefox 19+ */
  color: #666;
}
.mieter_felder:-ms-input-placeholder { /* IE 10+ */
  color: #666;
}
.mieter_felder:-moz-placeholder { /* Firefox 18- */
  color: #666;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}
.formular, #unteruser_container {
  width: 98%;
  margin: 10px 1% 10px 1%;
  background: #eee;
  padding: 40px 12% 40px 20%;
}
.mieter_felder.half {
  width: 49%;
  margin-right: 1%;
  float: left;
}
.mieter_felder.info {
  width: 90%;
  float: left;
}
.mieter_felder.full {
  width: 100%;
  float: none;
}
.mieter_felder:hover, .mieter_felder_h_ind:hover {
  background: #fff;
}
.kontakt_fehler {
  font-size: 14px;
}
.kontakt_fehler p {
  margin-bottom: 18px;
}
.unteruser_container {
  position: relative;
  padding: 10px;
  width: 48%;
  margin: 0 1% 1% 1%;
  height: auto;
  float: left;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
  border: 1px solid #979797;
  border-radius: 5px;
}
.unteruser_container:hover {
  background: #fff;
  border-radius: 10px;
}
.unteruser_container i {
  float: left;
  font-size: 20px;
  margin: 5px;
}
input[type=checkbox].css-checkbox + label.css-label, input[type=radio].css-checkbox + label.css-label, .ui-timepicker-list li {
  font-size: 14px;
  color: #151515;
}
label.css-label {
  background-image: url(https://cloud.imexx.de/lib/userfiles/272/hauptlayout/checkbox.png);
}
.downloadcontainer {
  padding: 0;
}
#mieterdownloads {
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap; /* Safari */
  -webkit-flex-direction: row;
  flex-direction: row;
  height: auto;
  overflow: hidden;
}
.file_kategorie {
  position: relative;
  width: 24%;
  float: left;
  margin-right: 1%;
  margin-bottom: 20px;
}
.file_kategorie .home_img h2 {
  font-size: 22px;
}
.mediaarchiv_download {
  width: 100%;
  margin: 20px 0 0 0;
  min-height: 0 !important;
}
.mediaarchiv_download:hover {
  background: #fff;
}
.media_preview {
  width: 50px;
  float: left;
  background: transparent;
  padding: 0;
  height: 50px;
}
.media_preview i {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FFF;
  line-height: 50px;
  font-size: 25px;
  color: #333;
}
.media_details {
  margin: 0 0 0 10px !important;
  padding: 0 !important;
  position: relative !important;
  float: left !important;
  font-family: standard;
  width: 200px;
  height: auto;
  left: 0 !important;
  top: 0 !important;
  font-size: 14px;
}
.marketing_pr .media_preview {
  border-color: #01a89c;
}
.marketing_pr .media_preview i {
  color: #01a89c;
}
.organisatorisches .media_preview {
  border-color: #f06131;
}
.organisatorisches .media_preview i {
  color: #f06131;
}
.vermietung .media_preview {
  border-color: #e0017a;
}
.vermietung .media_preview i {
  color: #e0017a;
}
.mieter_link {
  width: 100%;
  padding: 2%;
}
.mieter_container:hover, .mieter_link:hover, .mieter_container_open_full:hover, .mieter_container_archiv_full:hover {
  background: #FFF;
}
.mieter_container_open img {
  width: 22% !important;
  padding: 2%;
  height: auto;
  float: left;
}
.mieter_container_open_right {
  width: 66.6%;
  margin-left: 3.4%;
  height: auto;
  float: left;
}
.mieter_container_open_titel {
  font-size: 25px;
  color: #333;
  font-family: standard;
}
.mieter_container_text {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 20px 5px 20px 0;
  font-size: 16px;
  color: #333;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  text-align: justify;
}
.mieter_container_text img {
  width: 100%;
  height: auto;
}
.mieter_container_text p {
  margin-top: 25px;
}
.mieter_container img, .mieter_container_kategorie img {
  width: 22% !important;
  padding: 2%;
  height: auto;
  float: left;
}
.mieter_container_titel {
  position: absolute;
  top: 43%;
  left: 26.3%;
  font-size: 25px;
  font-family: standard;
}
.legende_left, .legende_right {
  width: 75%;
  float: left;
  font-size: 18px;
  font-family: standard;
  text-align: left;
}
.legende_right {
  width: 25%;
  text-align: right;
}
.mieter_trenner {
  clear: left;
  border-top: 1px dotted #333;
  margin: 20px 0 20px 0;
}
/* ##################################################################################OLD */
.data_info, .fehler_info {
  position: relative;
  font-family: standard;
  text-align: justify;
  font-size: 18px;
  height: auto;
  overflow: hidden;
  padding-bottom: 15px;
}
.fehler_info {
  background: #ff3333;
  color: #FFF;
  padding: 40px;
  width: 98%;
  margin: 10px 1% 10px 1%;
}
.data_container {
  position: relative;
  margin: 10px 1% 10px 1%;
  width: 98%;
  font-size: 14px;
  height: auto;
  line-height: 20px;
  overflow: hidden;
}
.data_container .saveit_button {
  float: right;
  margin: 0 0 20px 20px;
}
.data_container .data_info {
  float: left !important;
}
.overlay_elem {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  z-index: 10;
  font-family: custom_font_bold;
  font-size: 22px;
  opacity: 0;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.media_preview .overlay_elem img {
  position: relative;
  width: 80px !important;
  height: auto;
  margin: 80px 0 30px 0;
}
.mydata_bez {
  float: left;
  font-size: 15px;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
  margin-bottom: 10px;
}
.mydata_data {
  float: left;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
}
.mydata_zeile:hover, .mydata_zeile:focus {
  background: #FFF;
}
/* ##################################################################################KONTAKT */
#kontakformular, #kontaktpost, #serviceformular, #servicepost {
  width: 100%;
  margin: 0 auto;
  padding: 2%;
}
#serviceformular, #servicepost {
  margin: 3% 1%;
  width: 98%;
  padding: 2%;
  background: #101010;
  border: 1px solid #666;
}
#serviceformular .line {
  position: relative;
  margin: 20.5px 0 20.5px 0;
  width: 100%;
  height: 1px;
  background: #666;
}
#serviceformular .line::after {
  content: "";
  display: table;
  clear: both;
}
#serviceformular .info {
  position: absolute;
  margin: auto;
  top: -10px;
  background: #101010;
  text-transform: uppercase;
  padding: 2px 10px 2px 0;
  color: #FFF;
  font-size: 18px;
}
.kontakt_felder, .kontakt_felder_h_ind {
  background: #FFF;
  padding: 2%;
  font-size: 14px;
}
.kontakt_felder.half {
  width: 49%;
  margin-right: 1%;
  float: left;
}
input[type=checkbox].css-checkbox + label.css-label, input[type=radio].css-checkbox + label.css-label, .ui-timepicker-list li {
  font-size: 14px;
}
.kontakt_button, .login_button {
  margin: 20px 0 40px 0;
  padding: 1%;
}
.kontakt_button, .kontakt_felder:hover, .kontakt_felder_h_ind:hover, .login_button:hover, .kontakt_button:hover {
  background: #CCC;
}
.kontakt_button, .login_button {
  background: #FFF;
  color: #000;
  font-size: 14px;
}
.kontakt_fehler {
  font-size: 14px;
}
.kontakt_fehler p {
  margin-bottom: 18px;
}

/* ===========================================================================
   FOOTER  (.site-footer · .footer-nav · .footer-aside · .footer-social)
   - Markup: lib/php/content/__footer.php
   - Hintergrund grau, Schrift schwarz, Icons schwarz → Hover BIKINI-Rot
   - Legacy-Selektoren (#footer, .menu_foot, .socialmedia, .footer_menu,
     #footer i, #footer i:hover) wurden hier entfernt — nicht mehr im Markup.
   ========================================================================== */

body footer {
  background: #000;
  color: #fff;
  border-top: 0;
  margin-top: 60px;
}

body .site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  width: 100%;
  max-width: none;
  margin: 0;
  font-family: standard, sans-serif;
  font-size: 12px;
  color: #fff;
}

/* --- Navigation (links) ------------------------------------------------- */
body .site-footer .footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}
body .site-footer .footer-nav li {
  margin: 0;
  padding: 0;
}
body .site-footer .footer-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color .15s ease;
}
body .site-footer .footer-nav a:hover {
  color: var(--bk-red);
}

/* --- Rechte Seite: Social + Copyright ----------------------------------- */
body .site-footer .footer-aside {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* --- Social-Icons ------------------------------------------------------- */
body .site-footer .footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: flex-end;    /* ESM: Icon rechts in der aside-Spalte, Copyright bleibt unverändert */
}
body .site-footer .footer-social a {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  text-decoration: none;
  transition: color .15s ease;
}
body .site-footer .footer-social a:hover {
  color: var(--bk-red);
}
body .site-footer .footer-social i {
  font-size: 18px;
  color: inherit;
}

/* --- Copyright ---------------------------------------------------------- */
body .site-footer .footer-copyright {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
}
body .site-footer .footer-copyright a {
  color: inherit;
  text-decoration: none;
  font-size: 11px;
  line-height: 1.4;
  transition: color .15s ease;
}
body .site-footer .footer-copyright a:hover {
  color: var(--bk-red);
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 768px) {
  body .site-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    gap: 18px;
  }
  body .site-footer .footer-nav ul {
    justify-content: center;
  }
  body .site-footer .footer-aside {
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  body .site-footer .footer-social {
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .werbeflaechencontainer {
    width: 31.333%;
    margin: 1%;
  }
  .detail_text, .formular, #unteruser_container {
    padding: 80px 18% 80px 18%;
  }
  .file_kategorie {
    width: 32.333%;
  }
  .mieter_jahr {
    font-size: 16px;
    padding: 10px 10px 10px 10px;
  }
  .buttons-group .button.ar {
    font-size: 16px;
    line-height: 40px;
    margin-right: 10px;
  }
  .buttons-group img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}
@media (max-width: 768px) {
  .detail_text, .formular, #unteruser_container {
    padding: 80px 15% 80px 15%;
  }
  .file_kategorie {
    width: 49%;
    margin-bottom: 20px;
  }
  .file_kategorie .home_img img {
    width: 100% !important;
    min-width: 100% !important;
  }
  .unteruser_container {
    width: 100%;
  }
  .mieter_jahr {
    font-size: 14px;
    padding: 10px 10px 10px 10px;
  }
  .buttons-group .button.ar {
    font-size: 14px;
  }
  .mybook_container span {
    display: none;
  }
}
@media (max-width: 675px) {
  .werbeflaechencontainer {
    width: 48%;
    margin: 1%;
  }

  .detail_text, .formular, #unteruser_container {
    padding: 40px 10% 40px 10%;
  }
  .mieter_jahr {
    font-size: 12px;
    padding: 10px 5px 10px 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    display: block;
  }
  .buttons-group .button.ar {
    font-size: 12px;
    line-height: 30px;
    margin-right: 5px;
  }
  .buttons-group img {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    margin-bottom: 5px;
  }
}
@media (max-width: 515px) {
  .mieter_jahr {
    display: none;
  }
  .buttons-group .button.ar {
    font-size: 12px;
    width: 100%;
    line-height: 30px;
    margin-right: 5px;
    margin-bottom: 5px;
  }
  .home h1 span, .marketing_pr h1 span, .vermietung h1 span, .organisatorisches h1 span, .archiv h1 span, .mieterprofil h1 span, .downloads h1 span , .mieterhandbuch h1 span {
    font-size: 24px;
  }
  .home h1:after, .marketing_pr h1:after, .vermietung h1:after, .organisatorisches h1:after, .archiv h1:after, .mieterprofil h1:after, .downloads h1:after {
    top: 30px;
  }
  .detail_text, .formular, #unteruser_container {
    padding: 40px 5% 40px 5%;
  }
  .close_button {
    top: 10px;
    right: 10px;
  }
  .file_kategorie {
    width: 100%;
    margin-right: 0;
  }
  .werbeflaechencontainer {
    width: 98%;
    margin: 1%;
  }
}


/* ==========================================================================
   KI-CHAT WIDGET — BIKINI-Branding
   Overrides fuer ANOXA-Base-CSS (frontend.css). Hell statt dark, Bikini-Rot,
   header-Font fuer Headlines, kantige Buttons, Ueber-CTAs als Gradient.
   ========================================================================== */

/* ── Panel: heller Hintergrund statt Dark-Mode ──────────────────────────── */
body #ki-chat-panel{
  background:var(--bk-surface) !important;
  color:var(--bk-ink) !important;
  border-radius:0 !important;
  box-shadow:0 -4px 24px rgba(0,0,0,0.12) !important;
}

/* ── Header: weiss mit roter Akzent-Linie unten ─────────────────────────── */
body #ki-chat-header{
  background:#fff !important;
  border-bottom:1px solid var(--bk-line) !important;
  padding:18px 20px !important;
}
body #ki-chat-header-name{
  font-family:medium,sans-serif !important;
  font-size:18px !important;
  font-weight:normal !important;
  letter-spacing:-0.01em !important;
  color:var(--bk-ink) !important;
  text-transform:none !important;
}
body #ki-status-text{
  font-family:standard,sans-serif !important;
  font-size:11px !important;
  color:var(--bk-muted) !important;
  text-transform:uppercase !important;
  letter-spacing:0.06em !important;
}
body #ki-chat-agent-avatar{
  border:1px solid var(--bk-line) !important;
  background-color:var(--bk-red) !important;
}
body .close_suche{
  color:var(--bk-ink) !important;
  background:transparent !important;
}
body .close_suche:hover{
  color:var(--bk-red) !important;
  background:var(--bk-red-soft) !important;
}

/* ── Disclaimer-Screen: heller Look ─────────────────────────────────────── */
body #ki-chat-disclaimer{
  background:var(--bk-bg) !important;
  padding:36px 28px !important;
  gap:18px !important;
}
body .ki-disclaimer-icon{
  background:var(--bk-red-soft) !important;
  color:var(--bk-red-deep) !important;
  width:64px !important;
  height:64px !important;
  font-size:26px !important;
}
body .ki-disclaimer-titel{
  font-family:medium,sans-serif !important;
  font-size:22px !important;
  font-weight:normal !important;
  letter-spacing:-0.015em !important;
  color:var(--bk-ink) !important;
  text-transform:none !important;
  position:relative !important;
  padding-bottom:16px !important;
}
/* roter BIKINI-Akzentstrich unter Headline */
body .ki-disclaimer-titel::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:40px;
  height:2px;
  background:var(--bk-red);
}
body .ki-disclaimer-text{
  font-family:standard,sans-serif !important;
  font-size:14px !important;
  line-height:1.6 !important;
  color:var(--bk-ink-soft) !important;
}
body .ki-disclaimer-links a{
  background:#fff !important;
  border:1px solid var(--bk-line) !important;
  border-radius:0 !important;
  color:var(--bk-ink) !important;
  font-family:standard,sans-serif !important;
  font-size:13px !important;
  padding:12px 16px !important;
}
body .ki-disclaimer-links a:hover,
body .ki-disclaimer-links a:focus-visible{
  background:var(--bk-red-soft) !important;
  border-color:var(--bk-red) !important;
  color:var(--bk-red-deep) !important;
}
body .ki-disclaimer-links a i{
  color:var(--bk-muted) !important;
}
body .ki-disclaimer-links a:hover i{
  color:var(--bk-red-deep) !important;
}

/* ── Start-Button: BIKINI-CTA mit Gradient + all-caps ──────────────────── */
body .ki-disclaimer-start{
  background:linear-gradient(135deg, var(--bk-red) 0%, var(--bk-red-deep) 100%) !important;
  color:#fff !important;
  font-family:standard,sans-serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:0.06em !important;
  text-transform:uppercase !important;
  padding:14px 32px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:0 4px 12px rgba(230,25,123,0.28) !important;
  margin-top:12px !important;
}
body .ki-disclaimer-start:hover{
  background:linear-gradient(135deg, var(--bk-red-deep) 0%, var(--bk-red) 100%) !important;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(230,25,123,0.35) !important;
}
body .ki-disclaimer-start:focus-visible{
  outline:2px solid var(--bk-red) !important;
  outline-offset:3px !important;
}

/* ── Permanenter Hinweisbanner: BIKINI fehler_info-Pattern ─────────────── */
body #ki-chat-banner{
  background:var(--bk-red-soft) !important;
  border-bottom:none !important;
  border-left:3px solid var(--bk-red) !important;
  color:var(--bk-red-deep) !important;
  font-family:standard,sans-serif !important;
  font-size:12px !important;
  padding:12px 18px !important;
}
body #ki-chat-banner i{
  color:var(--bk-red) !important;
}

/* ── Nachrichten-Area: heller Hintergrund ──────────────────────────────── */
body #ki-chat-messages{
  background:var(--bk-bg) !important;
  padding:20px !important;
}
body #ki-chat-messages::-webkit-scrollbar-thumb{
  background:var(--bk-line) !important;
}

/* ── Bubbles: kantig statt soft, Bikini-Farben ─────────────────────────── */
body .ki-bubble{
  border-radius:0 !important;
  font-family:standard,sans-serif !important;
  font-size:14px !important;
  line-height:1.55 !important;
}
/* Agent-Bubble: weiss mit dezenter Border */
body .ki-msg-row--agent .ki-bubble{
  background:#fff !important;
  border:1px solid var(--bk-line) !important;
  color:var(--bk-ink) !important;
}
/* User-Bubble: BIKINI-Rot Gradient */
body .ki-msg-row--user .ki-bubble{
  background:linear-gradient(135deg, var(--bk-red) 0%, var(--bk-red-deep) 100%) !important;
  color:#fff !important;
  border:0 !important;
}
/* Intro-Bubble: leichter roter Akzent */
body .ki-bubble--intro{
  border-left:3px solid var(--bk-red) !important;
}
body .ki-msg-avatar{
  border:1px solid var(--bk-line) !important;
  background-color:var(--bk-red) !important;
}

/* ── Typing-Indicator: rote Punkte statt weiss ─────────────────────────── */
body .ki-bubble--typing span{
  background:var(--bk-red) !important;
}

/* ── Form-Bereich: weisser Hintergrund mit Trennlinie ──────────────────── */
body #ki-chat-form{
  background:#fff !important;
  border-top:1px solid var(--bk-line) !important;
  padding:14px 18px !important;
}
body #ki-chat-input{
  background:var(--bk-bg) !important;
  border:1px solid var(--bk-line) !important;
  border-radius:0 !important;
  color:var(--bk-ink) !important;
  font-family:standard,sans-serif !important;
  font-size:14px !important;
  padding:10px 14px !important;
}
body #ki-chat-input::placeholder{
  color:var(--bk-muted) !important;
}
body #ki-chat-input:focus{
  border-color:var(--bk-red) !important;
  background:#fff !important;
}

/* ── Send-Button: BIKINI-Rot ────────────────────────────────────────────── */
body #ki-chat-send{
  background:var(--bk-red) !important;
  color:#fff !important;
  border-radius:0 !important;
  border:0 !important;
  width:42px !important;
  height:42px !important;
}
body #ki-chat-send:hover{
  background:var(--bk-red-deep) !important;
}
body #ki-chat-send:disabled{
  background:var(--bk-line) !important;
  color:var(--bk-muted) !important;
  cursor:not-allowed;
}

/* ── Link-Buttons in Antworten ─────────────────────────────────────────── */
body .ki-link-btn{
  background:var(--bk-red-soft) !important;
  color:var(--bk-red-deep) !important;
  border:1px solid var(--bk-red) !important;
  border-radius:0 !important;
  font-family:standard,sans-serif !important;
  text-transform:none !important;
}
body .ki-link-btn:hover{
  background:var(--bk-red) !important;
  color:#fff !important;
}

/* ── Floating Trigger-Button: BIKINI-rote Bubble mit weißem Icon ───────── */
body .nav-search{
  background:var(--bk-red) !important;
  box-shadow:0 4px 16px rgba(230,25,123,0.35) !important;
  top: 50vh !important;
  right: 20px !important;
}
body .nav-search i{
  color:#fff !important;
}
body .nav-search img{
  /* SVG-Logo auf rotem Grund — Padding damit das Logo sauber sitzt */
  width:32px !important;
  filter:brightness(0) invert(1);  /* falls Logo nicht weiß ist, in weiß umfärben */
}
body .nav-search:hover{
  background:var(--bk-red-deep) !important;
  box-shadow:0 6px 22px rgba(230,25,123,0.45) !important;
}
/* Pulse-Ringe in BIKINI-Rot statt currentColor */
body .nav-search::before,
body .nav-search::after{
  border-color:var(--bk-red) !important;
}