.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#box {
   transform-origin: 150px 50px;
   margin-left:20px;
   margin-top:30px;
   position: fixed;
   top:30px; 
   right:5px;
   z-index:5000000;
    cursor: pointer;
}

@media (max-width: 1200px) {
	.box-wrapper {
		display:none;
	}
}


@keyframes winken {
    0%   { transform: rotate(0deg); }
    16%  { transform: rotate(10deg); }
    33%  { transform: rotate(0deg); }
    50%  { transform: rotate(10deg); }
    66%  { transform: rotate(0deg); }
    83%  { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

#box.winken {
    animation: winken 0.6s linear;
}


:root {
/* Autoren- & AEO-Elemente */
/* Fund 2026-08-30: fester, kräftiger Rotton als sitewide Fallback - auf jedem Design
   ohne eigene --farbe-autorenbox-*-Definition (die meisten der 41 main{N}.css) schlug
   dieser Rotton unabhängig vom jeweiligen Designthema durch und wirkte "knallig"/
   deplatziert. Neutraler Übergangs-Fallback bis jedes main{N}.css seine eigene, aus der
   Designfarbe abgeleitete Definition bekommt (wie main1/2/3 es bereits vormachen). */
--farbe-autorenbox-hintergrund: #f5f4f1;
--farbe-autorenbox-linie:        #ddd7cf;
--farbe-autorenbox-akzent:       #706a5f;
--farbe-autorenbox-icon:         #706a5f;
--farbe-autorenbox-icon-text:    #ffffff;
--farbe-autorenbox-text:         #4a453e;
--farbe-autorenbox-text-stark:   #2a2621;

--farbe-aeo-hintergrund:         #fff7f7;
--farbe-aeo-linie:               #a93d4a;
--farbe-aeo-text:                #47262b;


  



  /* Farben */
  --color-primary:       #e10816;
  --color-primary-dark:  #b8060f;
  --color-primary-light: #efefef;
  --color-secondary:     #ff6b6b;
  --color-success:       #22c55e;
  --color-warning:       #f59e0b;
  --color-text:          #0f172a;
  --color-text-muted:    #475569;
  --color-border:        #e2e8f0;
  --color-bg:            #f6f7fb;
  --color-white:         #ffffff;
  --color-card:          #ffffff;
  --color-sidebar-bg:    #f8f9fc;
 

  --font-size-xs:  0.75rem;   /* 12px */
  --font-size-sm:  0.875rem;  /* 14px */
  --font-size-md:  1rem;      /* 16px */
  --font-size-lg:  1.125rem;  /* 18px */
  --font-size-xl:  1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  /* Abstände */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Rahmen */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);

  /* Navigation */
  --nav-height: 96px;

  /* Übergänge */
  --transition: 0.2s ease;
  
}



.welcome-video__media {
  position: relative;
}

.welcome-video__frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
 
  
box-shadow: 0 8px 24px rgba(120, 120, 120, 0.52);
  
  border: 2px solid #ababab;
  background: #000;
}

.welcome-video__frame video {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70vh;
}

.welcome-video__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}




.autoren-box {
  background: var(--farbe-autorenbox-hintergrund);
  border: 1px solid var(--farbe-autorenbox-linie);
  border-left: 4px solid var(--farbe-autorenbox-akzent);
  border-radius: 0 12px 12px 0;
  padding: 1.2rem 1.5rem;
  margin: 2rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.autoren-box-ueberschrift {
	font-weight:bold;
	margin-bottom:10px;
	font-size:19px;
}

.autoren-box-icon {
  width: 44px;
  height: 44px;
  background: var(--farbe-autorenbox-icon);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-autorenbox-icon-text);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.autoren-box-text {
  font-size: 0.88rem;
  color: var(--farbe-autorenbox-text);
  line-height:170%;
}

.autoren-box-text strong {
  color: var(--farbe-autorenbox-text-stark);
}

/* Fund 2026-08-26 (digitalisierung.html, mehrere Designs): in den <li> der
   "Wichtigste auf einen Blick"-Liste erschien sowohl der Browser-Standard-Punkt als auch
   der eigentlich gewollte Marker (Haekchen/Pfeil aus dem jeweiligen main{N}.css). Ursache: das
   <ul> hier ist bewusst klassenlos, viele Designs haben aber eine generische
   "main ul:not([class]) { list-style: disc !important; ... }"-Regel fuer redaktionelle
   CMS-Freitext-Listen, die dadurch auch hier greift. Direkt auf dem <li> (nicht dem <ul>)
   gesetzt, damit es JEDE geerbte list-style-Regel aus main{N}.css schlaegt, unabhaengig von
   deren Spezifitaet/!important - eine explizit auf das Element selbst gesetzte Eigenschaft
   gewinnt immer gegen einen geerbten Wert. */
.autoren-box-text ul li {
  list-style: none;
}


.aeo-abstract {
  background: var(--farbe-aeo-hintergrund);
  border-left: 4px solid var(--farbe-aeo-linie);
  padding: 1.4rem 1.8rem;
  border-radius: 0 12px 12px 0;
  margin-bottom: 2rem;
}

.aeo-abstract p {
  font-size: 1.05rem;
  color: var(--farbe-aeo-text);
  font-weight: 400;
  line-height: 1.7;
  margin: 0;
}




.credential-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}


.autor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {


  .autor-grid {
    grid-template-columns: 1fr;
  }
}



/* ------------------------------------------------------------
   8. Grid-Systeme
   ------------------------------------------------------------ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: stretch;
  gap: var(--space-6);
}


/* ------------------------------------------------------------
   9. Sidebar-Layout
   ------------------------------------------------------------ */
.layout-sidebar {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-8);
  align-items: start;
}

.layout-sidebar > * {
  min-width: 0;
}

.layout-sidebar--right {
  grid-template-columns: 1fr 280px;
}

.sidebar {
  background: var(--color-sidebar-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
}

.sidebar__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
}

.sidebar__nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.sidebar__nav a:hover,
.sidebar__nav a.is-active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  text-decoration: none;
}

.sidebar__nav a .fa {
  width: 16px;
  color: var(--color-primary);
}

.sidebar__section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* Scrollbare Sidebar-Liste: scrollt ab mehr als ~5 Einträgen */
.sidebar__nav--scroll ul {
  max-height: 230px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) #f1e8e9;
}

.sidebar__nav--scroll ul::-webkit-scrollbar {
  width: 6px;
}

.sidebar__nav--scroll ul::-webkit-scrollbar-track {
  background: #f1e8e9;
  border-radius: 3px;
}

.sidebar__nav--scroll ul::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 3px;
}


/* ------------------------------------------------------------
   Autoren-Profil
   ------------------------------------------------------------ */
.autor-profile {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-10);
  align-items: start;
}

.autor-profile__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.autor-profile__avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-lg);
}

.autor-profile__initials {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
}

.autor-profile__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.autor-social-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition);
}

.autor-social-link:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}

.autor-profile__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.autor-profile__name {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-2);
}

.autor-profile__role {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  font-weight: 500;
}

.autor-profile__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.credential-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.autor-profile__list {
  list-style: disc;
  padding-left: var(--space-5);

  line-height: 1.8;
  color: var(--color-text);
}

/* Fund 2026-08-26: Qualifikationen/Themengebiete/Veroeffentlichungen standen bisher als
   nackter Text direkt auf dem Section-Hintergrund, waehrend der "Ueber..."-Block darueber
   als klar abgesetzte Karte (.summary-box) gestaltet ist - wirkte inkonsistent ("oben ja,
   unten nein"). .autor-block gibt den unteren Abschnitten dieselbe Karten-Optik, bewusst
   dezenter als .summary-box (kein Farbverlauf/kein linker Farbbalken), damit die Seite nicht
   dreimal denselben betonten Blockstil wiederholt. */
.autor-block {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
}



/* ------------------------------------------------------------
   11. Summary-Box (AEO: Direct-to-Answer)
   ------------------------------------------------------------ */
.summary-box {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #ffffff 100%);
  border: 1px solid rgba(225,8,22,0.2);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-8);
}

.summary-box__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.summary-box__icon {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

.summary-box__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.summary-box__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.summary-box__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  
  color: var(--color-text);
  line-height: 1.5;
}

.summary-box__list li::before {
  content: '\f00c';
  font-family: 'FontAwesome';
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  margin-top: 3px;
  flex-shrink: 0;
}


/* Artikel-Teaser-Karte */
.article-teaser-card {
  display: block;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition);
  margin-bottom: 20px;
}

.article-teaser-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.article-teaser-card__tag {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article-teaser-card__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}


.sitemap ul {
    list-style: disc !important;
    margin: 0 0 0 1.5rem !important;
    padding: 0 !important;
}

.sitemap li {
    margin: 0.35rem 0 !important;
    padding: 0 !important;
}

.sitemap ul ul {
    margin-top: 0.4rem !important;
    margin-left: 1.5rem !important;
    list-style: circle !important;
}

.sitemap ul ul ul {
    list-style: square !important;
}

.sitemap a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.sitemap a:hover {
    color: var(--farbe-gold) !important;
    padding-left: 4px;
}







/* Ganz oben in dein CSS einfügen */
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

/* Und diese Schriftart exakt für deine Flaggen definieren */
.aktuelle-flagge, .sprache-liste a {
  font-family: 'Noto Color Emoji', -apple-system, sans-serif;
}

/* Verpasst den Bildern eine feste, saubere Größe */
.sprache-label img,
.sprache-liste img {
  width: 15px;
  height: auto;
  border-radius: 2px; /* Leicht abgerundete Ecken für die Flagge */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Minimaler Schatten, damit weiße Flaggen (wie Japan) Ränder haben */
  display: block;
}


.sprungbrett-sidebar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Richtet Icon und Flagge vertikal untereinander aus */
.sprache-label {
  background-color: #34495e;
  color: #ffffff;
  padding: 8px 0; /* Oben und unten etwas Platz */
  width: 34px;    /* Schmale, feste Breite */
  min-height: 45px; /* Genug Höhe für beide Elemente untereinander */
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column; /* Hier passiert die Magie: untereinander statt nebeneinander */
  align-items: center;
  justify-content: center;
  gap: 4px; /* Abstand zwischen Icon (oben) und Flagge (unten) */
  box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease;
  list-style: none; /* entfernt den nativen <summary>-Aufklapp-Pfeil */
}

.sprache-label::-webkit-details-marker,
.sprache-label::marker {
  display: none;
}

.sprache-label:hover {
  background-color: #2c3e50;
}

/* Das FontAwesome Icon (oben) */
.sprache-label i {
  font-size: 14px;
  line-height: 1;
}

/* Die Flagge (unten) */
.sprache-label .aktuelle-flagge {
  font-size: 16px;
  line-height: 1;
}



/* Die ausklappbare Liste */
.sprache-liste {
  list-style: none;
  padding: 6px;
  margin: 0;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px 0 0 4px;
  box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -100px;
  visibility: hidden;
  transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.3s;
}

.sprache-details[open] > .sprache-liste {
  right: 100%;
  visibility: visible;
  transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0s;
}

.sprache-liste a {
  text-decoration: none;
  font-size: 18px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.15s;
}

.sprache-liste a:hover {
  background-color: #f5f6fa;
}

.sprache-liste a.aktiv {
  background-color: #ebf5fb;
  border: 1px solid #3498db;
  box-sizing: border-box;
}




/* Footermenü: zentriert, Links nebeneinander mit Zeilenumbruch (nur Layout, keine Farben) */
.footernav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 0.4em;
}

.footernav li {
  display: flex;
  align-items: center;
}

.footernav li:not(:last-child)::after {
  content: "\2022";
  margin: 0 0.6em;
}

.footernav a {
  white-space: nowrap;
}

.footer-nav {
	padding-top:20px;
	padding-bottom:20px;
}

/* Leeres Footermenue komplett ausblenden (Nutzerwunsch 2026-08-31, global
   fuer alle 41 Designs).
   Ausgangslage: {footer_menue} wird in show_inc/global_geruest_inc.php nur
   befuellt, wenn Seiten mit parentID='-3' und freischaltung='ja' existieren.
   Ist die Liste leer, blieb aber der WRAPPER im jeweiligen
   tpl/include_footer*.tpl.htm stehen - und der bringt je nach Design eine
   eigene Trennlinie (border-top) plus Padding mit. Ergebnis: eine sichtbar
   leere Leiste unter dem Copyright-Balken (Live-Fund
   varianten.dentalspezialisten.de, Design 25).
   Loesung bewusst per CSS in global.css statt in den 11 Footer-Templates:
   die Wrapper heissen je Design unterschiedlich (.footer-bottom +
   .footer-bottom-inner / .footer-menue / .fN-fussnav) und tragen teils
   Inline-Styles - eine zentrale Regel ist wartbarer als 11 Template-Edits.
   Kriterium ist "hat keine Element-Kinder" (:not(:has(*))) und NICHT :empty,
   weil im Wrapper immer noch Whitespace/Zeilenumbrueche aus dem Template
   stehen - :empty wuerde daher nie greifen.
   Der Copyright-Balken nutzt in mehreren Designs dieselbe .footer-bottom-
   Klasse (Design 9/17/18/19/26/zzam + Standard-Footer), enthaelt aber immer
   <span>/<a> und wird deshalb nicht getroffen. Das befuellte Footermenue
   enthaelt <nav>/<ul>/<a> und bleibt ebenfalls sichtbar.
   Wichtig: NICHT ".footer-bottom:has(> .footer-bottom-inner:not(:has(*)))"
   schreiben - :has() darf laut Spec nicht in :has() verschachtelt werden,
   der Selektor ist dann komplett ungueltig (im Browser verifiziert). */
.footer-menue:not(:has(*)),
.f2-fussnav:not(:has(*)),
.f7-fussnav:not(:has(*)),
.f23-fussnav:not(:has(*)),
.footer-bottom:not(:has(a)):not(:has(span)):not(:has(nav)):not(:has(ul)) {
  display: none;
}

/* ==========================================================================
   VERWANDTE THEMEN (AEO-Feature 2026-08-29, H8) - bewusst hier statt in
   main{N}.css: soll ohne design-eigene Anpassung auf jedem der 41 Designs
   sofort nutzbar sein, sobald admin-seitig verwandteIDs gepflegt wird. Nutzt
   die designeigenen --farbe-*-Variablen mit neutralen Fallbacks, damit es
   sich in jedes Farbschema einfuegt, aber nie unstyled bleibt.
   ========================================================================== */
.verwandte-themen-section {
  padding: 4rem 0;
}
.verwandte-themen-section .section-header {
  /* Kein text-align:center mehr erzwungen - jedes Design bringt ueber seine
     eigene main{N}.css bereits eine .section-header-Konvention mit (zentriert
     oder linksbuendig); das hier hat sie bislang immer uebersteuert. */
  margin-bottom: 2.5rem;
}
.verwandte-themen-section .section-header h2 {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  margin: 0;
}
.verwandte-themen-grid {
  /* Kein eigenes max-width/margin/padding mehr - das Markup steckt bereits in
     einem .container (siehe include_cms_inc.php), das uebernimmt Breite und
     Innenabstand schon. Die alte Fassung hat dadurch ein zweites Mal
     eingerueckt (doppeltes Padding). */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.verwandte-themen-karte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--farbe-rahmen-gold, var(--farbe-primaer, #ccc));
  border-radius: var(--radius-m, var(--radius-s, 8px));
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.verwandte-themen-karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}
.verwandte-themen-titel {
  font-weight: 600;
}
.verwandte-themen-karte i {
  flex-shrink: 0;
  opacity: 0.7;
}
@media (max-width: 600px) {
  .verwandte-themen-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Bewertungen-Feature (2026-08-30, I4 aus aeo_analyse2.txt)
   Nutzt generische --farbe-accent/--farbe-text/--farbe-bg-light/--farbe-border-
   Variablen mit Fallback-Werten (var(...,fallback)), damit die Komponente ohne
   Aenderung an allen 41 main{N}.css-Dateien ueberall vernuenftig aussieht.
   ========================================================================== */

.bewertungen-summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--farbe-bg-light, #f7f7f9);
  border: 1px solid var(--farbe-border, #e5e5ea);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2.5rem;
}

.bewertungen-summary-zahl {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--farbe-accent, #0ea5e9);
  flex-shrink: 0;
}

.bewertungen-summary-details p {
  margin: 0.4rem 0 0.8rem;
  color: var(--farbe-muted, #666);
  font-size: 0.95rem;
}

.bewertung-sterne {
  display: inline-flex;
  gap: 0.15rem;
  color: var(--farbe-accent, #f5a623);
  font-size: 1.1rem;
}

.bewertungen-summary-zahl + .bewertungen-summary-details .bewertung-sterne {
  font-size: 1.3rem;
}

.bewertungen-google-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bewertungen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.bewertung-karte {
  background: var(--farbe-bg-light, #fff);
  border: 1px solid var(--farbe-border, #e5e5ea);
  border-radius: 14px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.bewertung-kopf {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.bewertung-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.bewertung-avatar-initiale {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--farbe-accent, #0ea5e9);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}

.bewertung-kopf-text {
  min-width: 0;
}

.bewertung-name {
  font-weight: 600;
  color: var(--farbe-text, #222);
}

.bewertung-text {
  color: var(--farbe-text, #333);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.bewertung-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.8rem;
  color: var(--farbe-muted, #888);
  margin-top: auto;
}

.bewertung-quelle {
  text-decoration: none;
  color: var(--farbe-muted, #888);
  border: 1px solid var(--farbe-border, #e5e5ea);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
}
a.bewertung-quelle:hover {
  color: var(--farbe-accent, #0ea5e9);
}

.bewertung-antwort {
  background: var(--farbe-bg, #f2f2f5);
  border-left: 3px solid var(--farbe-accent, #0ea5e9);
  border-radius: 0 10px 10px 0;
  padding: 0.8rem 1rem;
  font-size: 0.88rem;
}
.bewertung-antwort strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--farbe-text, #222);
}
.bewertung-antwort p {
  margin: 0;
  color: var(--farbe-muted, #555);
}

@media (max-width: 600px) {
  .bewertungen-summary {
    flex-direction: column;
    text-align: center;
  }
  .bewertungen-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Bewertungen-Karussell (2026-08-30) - Startseiten-Block, immer neutraler
   Hintergrund (.textblock-section), daher keine Kollision mit den
   Farbrhythmus-Regeln fuer knallige Bloecke.
   ========================================================================== */

/* --karussell-akzent: EIN Einstiegspunkt fuer die Akzentfarbe des jeweiligen
   Designs. Einen einheitlichen Variablennamen gibt es im Projekt nicht - die
   41 Designs nennen ihren Akzent sehr unterschiedlich. Die Kette wurde
   mechanisch ermittelt (Akzent = Farbe des Primaer-Buttons je main{N}.css)
   und deckt alle 41 Designs ab; die Reihenfolge ist wichtig, wo ein Design
   mehrere der Namen fuehrt (z.B. main2 hat petrol UND mint -> petrol zuerst,
   main39 jade UND mint -> jade zuerst). Letzter Fallback ist currentColor,
   also die Textfarbe des Designs - damit kann hier nie wieder eine
   designfremde Farbe erscheinen. */
.bewertungen-karussell {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  --karussell-akzent:
    var(--farbe-akzent,
    var(--farbe-accent,
    var(--farbe-primaer,
    var(--farbe-gold,
    var(--farbe-tuerkis,
    var(--farbe-petrol,
    var(--farbe-terra,
    var(--farbe-azur,
    var(--farbe-jade,
    var(--farbe-oliv,
    var(--farbe-burgund,
    var(--farbe-cyan,
    var(--farbe-salbei-dunkel,
    var(--farbe-mint, currentColor))))))))))))));
}

.bewertungen-karussell-track {
  position: relative;
  min-height: 220px;
}

/* Bugfix 2026-08-31 (Nutzer-Fund an Design 35: "auch kein Design? kein
   Rahmen um die Bewertung"). Der Block hatte gar keine Kartenflaeche - die
   Bewertung stand als nackter, zentrierter Text im Abschnitt.
   Rahmen/Flaeche bewusst aus currentColor gemischt statt aus einer
   Design-Variablen: currentColor ist in JEDEM der 41 Designs die dort
   gueltige Textfarbe, dadurch passt die Karte automatisch zu hellen wie zu
   dunklen Abschnitten, ohne dass 41 main{N}.css angefasst werden muessen.
   (Zu den Farb-Variablen siehe Kommentar bei .bewertungen-karussell-quote.) */
.bewertungen-karussell-slide {
  display: none;
  text-align: center;
  padding: 2.25rem 1.75rem;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--radius-m, var(--radius-s, 10px));
  background: color-mix(in srgb, currentColor 3%, transparent);
}

.bewertungen-karussell-slide.karussell-slide-aktiv {
  display: block;
  animation: bewertungenKarussellFade 0.5s ease;
}

@keyframes bewertungenKarussellFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bugfix 2026-08-31: dieser Block war auf --farbe-accent/--farbe-text/
   --farbe-muted/--farbe-border verdrahtet. Diese Namen gibt es aber in den
   wenigsten Designs (geprueft ueber alle 41 main*.css: --farbe-accent in 9,
   --farbe-muted in 3, --farbe-border in 6). In allen uebrigen Designs griff
   deshalb der hartcodierte Fallback - das Karussell erschien in Himmelblau
   #0ea5e9 und Orange #f5a623 statt in der Designfarbe. Ein einheitlicher
   Variablenname existiert nicht: die Designs heissen ihren Akzent
   --farbe-akzent, --farbe-primaer, --farbe-tuerkis, --farbe-gold, aber auch
   --farbe-petrol/-jade/-oliv/-burgund/-azur/-terra usw.
   Loesung: kurze Kette ueber die drei verbreiteten Namen, danach
   currentColor als letzter Fallback - dadurch nie mehr eine designfremde
   Farbe, schlimmstenfalls die Textfarbe des Designs. */
.bewertungen-karussell-quote {
  font-size: 1.8rem;
  color: var(--karussell-akzent, currentColor);
  opacity: 0.5;
  display: block;
  margin-bottom: 0.5rem;
}

/* Sterne bleiben bewusst goldfarben statt in der Designfarbe - Sterne sind
   ein etabliertes Bewertungs-Symbol, ein tuerkiser oder burgunderroter Stern
   liest sich schlechter als Bewertung. --farbe-gold nutzen die Designs, die
   ohnehin eine Goldfarbe fuehren. */
.bewertungen-karussell .bewertung-sterne,
.bewertung-sterne {
  color: var(--farbe-gold, #d99a1e);
}

.bewertungen-karussell .bewertung-sterne {
  display: inline-flex;
  gap: 0.15rem;
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
}

/* color:inherit statt --farbe-text: uebernimmt die Textfarbe des jeweiligen
   Abschnitts und funktioniert damit auch auf dunklen Flaechen. */
.bewertungen-karussell-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: inherit;
  margin: 0 0 1rem;
}

.bewertungen-karussell-name {
  font-weight: 600;
  color: inherit;
  opacity: 0.7;
  margin: 0;
}

.bewertungen-karussell-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* Kontrast der Punkte (Bedienelemente, WCAG 1.4.11 fordert 3:1):
   Die Akzentfarbe allein reicht dafuer bei vielen Designs nicht - gemessen
   ueber alle 41 Designs lagen 22 unter 3:1 gegen ihre Abschnittsfarbe
   (schlechteste: Design 10 mit 1.17:1, Design 24 mit 1.27:1). Das galt
   schon vor dem Umbau, damals mit dem hartcodierten #0ea5e9 (2.9:1 auf
   Weiss). Da die Akzentfarbe je Design frei waehlbar ist, laesst sich das
   ueber die Farbe allein nicht loesen. Deshalb bekommt der aktive Punkt
   zusaetzlich einen Ring aus currentColor - das ist in jedem Design die
   Textfarbe des Abschnitts und damit garantiert kontraststark. */
.bewertungen-karussell-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: currentColor;
  opacity: 0.3;
  cursor: pointer;
  padding: 0;
}

.bewertungen-karussell-dot.aktiv {
  background: var(--karussell-akzent, currentColor);
  opacity: 1;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, currentColor 65%, transparent);
}

@media (max-width: 600px) {
  .bewertungen-karussell-track {
    min-height: 260px;
  }
}

/* ==========================================================================
   SUCHE (2026-09-02)

   Zwei Teile: der Klapp-Knopf in der rechten Randleiste (auf jeder Seite, ueber
   dem Sprachumschalter) und die Trefferliste auf suche.html.

   Bewusst hier in der geteilten global.css und nicht in den 41 main{N}.css:
   die Suche soll ueberall gleich funktionieren und aussehen. Farben kommen aus
   den Design-Variablen, wo vorhanden - mit Rueckfallwerten, weil nicht jedes
   Design dieselben Variablennamen definiert.
   ========================================================================== */

/* ---- Klapp-Suche in der rechten Randleiste ---- */

/* Die Leiste trug bisher genau ein Element (den Sprachumschalter) und war
   deshalb eine Zeile. Jetzt stehen Suche und Sprachen untereinander.
   main16.css verankert die Leiste unten statt mittig - das bleibt gueltig,
   hier wird nur die Laufrichtung gesetzt. */
.sprungbrett-sidebar {
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* Die Randleiste liegt fest am rechten Bildrand, der rechte Slider-Pfeil sitzt
   in fast allen Designs 1,5rem vom selben Rand entfernt - beide ueberlappten sich
   dadurch um rund 10 Pixel. Der Pfeil war am aeusseren Rand verdeckt und dort
   nicht anklickbar.

   Das ist kein neues Problem und kam nicht von der Suche: es bestand schon mit
   dem Sprachumschalter allein. Wie viele Designs betroffen sind, haengt von der
   Fensterhoehe ab - die Leiste ist im Viewport mittig, der Pfeil im Slider. Bei
   1280x620 waren es 6 Designs, bei 1280x800 mindestens 9 andere. Ein Fix je
   Design haette deshalb nur die jeweils gemessene Fenstergroesse abgedeckt.

   Stattdessen ruecken alle rechten Slider-Pfeile um die Leistenbreite (34px) nach
   innen. Form, Groesse und Farbe der Pfeile bleiben unberuehrt, nur die Position
   verschiebt sich - dafuer stimmt es bei jeder Fenstergroesse und in jedem Design.
   main16.css enthaelt einen aelteren Loesungsversuch fuer denselben Fall (Leiste
   nach unten verankert), der bei anderen Fensterhoehen nicht mehr griff. */
.slider-pfeil-rechts { margin-right: 34px; }

/* Bezugspunkt fuer die aufklappenden Teile: bisher war das die Leiste selbst
   (mit nur einem Kind gleichbedeutend), jetzt haengt jedes Panel an seinem
   eigenen Knopf - sonst klappte die Sprachliste auf halber Leistenhoehe auf. */
.suche-details,
.sprache-details { position: relative; }

/* Der Knopf uebernimmt bewusst das Aussehen von .sprache-label darunter,
   damit beide als eine Einheit wirken. */
.suche-label {
  background-color: #34495e;
  color: #ffffff;
  width: 34px;
  min-height: 38px;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease;
  list-style: none;
}
.suche-label::-webkit-details-marker,
.suche-label::marker { display: none; }
.suche-label:hover { background-color: #2c3e50; }
.suche-details[open] > .suche-label { background-color: #2c3e50; }
.suche-label i { font-size: 14px; line-height: 1; }
.suche-label:focus-visible {
  outline: 3px solid #f0b429;
  outline-offset: 2px;
}

/* Klappt nach links auf, gleiche Bewegung wie die Sprachliste darunter.
   Breite begrenzt auf den verfuegbaren Platz, damit auf schmalen Geraeten
   kein Querscroll entsteht. */
.suche-panel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -400px;
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: 0;
  width: min(270px, calc(100vw - 56px));
  padding: 6px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px 0 0 4px;
  box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.08);
  transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.3s;
}
.suche-details[open] > .suche-panel {
  right: 100%;
  visibility: visible;
  transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0s;
}

.suche-panel-label,
.suche-panel button span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.suche-panel input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 0.9rem;
  line-height: 1.3;
  border: 1px solid #d6d6d6;
  border-right: 0;
  border-radius: 3px 0 0 3px;
  background: #ffffff;
  color: #222222;
}
.suche-panel input[type="search"]::placeholder { color: #6b6b6b; opacity: 1; }

.suche-panel button {
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 0.9rem;
  line-height: 1.3;
  border: 1px solid #34495e;
  border-radius: 0 3px 3px 0;
  background-color: #34495e;
  color: #ffffff;
  cursor: pointer;
}
.suche-panel button:hover { background-color: #2c3e50; }

.suche-panel input[type="search"]:focus-visible,
.suche-panel button:focus-visible {
  outline: 3px solid #f0b429;
  outline-offset: 1px;
}

/* ---- Trefferliste auf suche.html ---- */
.suche-section { padding: 2rem 0 3rem; }

/* Eigene Ueberschrift der Suchseite. Absichtlich zurueckhaltend: die Designs
   bringen ihre eigene h1-Gestaltung mit, hier wird nur der Abstand gesetzt. */
.suche-h1 { margin-bottom: 1.2rem; }

/* Der gesuchte Begriff. Frueher in deutschen Anfuehrungszeichen - die standen
   dann auch im englischen, tuerkischen und niederlaendischen Text. */
.suche-begriff { font-style: italic; }

.suche-nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.suche-seitenform { display: flex; gap: 0; margin-bottom: 1.6rem; max-width: 560px; }
.suche-seitenform input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 14px;
  font-size: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 0;
  border-radius: 6px 0 0 6px;
}
.suche-seitenform button {
  padding: 11px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: var(--farbe-akzent, var(--farbe-primaer, #333));
  color: #fff;
  cursor: pointer;
}
.suche-anzahl, .suche-hinweis { margin-bottom: 1.4rem; font-size: 0.95rem; }

.suche-trefferliste { list-style: none; margin: 0; padding: 0; }
.suche-treffer {
  padding: 1.1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.suche-treffer-art {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.7;
}
.suche-treffer-titel { margin: 0 0 0.4rem; font-size: 1.15rem; }
.suche-treffer-text { margin: 0 0 0.4rem; line-height: 1.55; }
.suche-treffer-text mark {
  background: rgba(255, 213, 79, 0.5);
  color: inherit;
  padding: 0 2px;
}
.suche-treffer-mehr { margin: 0; font-size: 0.88rem; font-weight: 600; }

@media (max-width: 560px) {
  .suche-seitenform { flex-wrap: wrap; }
  .suche-seitenform input[type="search"] { border-right: 1px solid rgba(0,0,0,0.2); border-radius: 6px; }
  .suche-seitenform button { border-radius: 6px; margin-top: 0.6rem; width: 100%; }
}

/* ==========================================================================
   POPUP-HINWEIS (2026-09-02)

   Wird ueber "Popup benutzen" in den Stammdaten geschaltet und einmal je Besuch
   gezeigt. Der Mechanismus war seit langem verdrahtet ({popup} im Geruest,
   Auswertung in global_geruest_inc.php), aber tpl/include_popup.tpl.htm fehlte
   physisch - bei "ja" waere nichts erschienen. Gestaltung liegt hier in der
   geteilten Datei, damit der Hinweis in allen 41 Designs gleich aussieht;
   Farben ueber Design-Variablen mit Rueckfallwerten, weil nicht jedes Design
   dieselben Namen definiert.
   ========================================================================== */
.popup-overlay {
  position: fixed;
  inset: 0;
  /* ueber dem Cookie-Hinweis (z-index 100000). Der Hinweis blieb sonst darueber
     liegen und verdeckte auf schmalen Geraeten den "Verstanden"-Knopf. Sobald
     das Fenster geschlossen ist, ist der Cookie-Hinweis wieder frei bedienbar. */
  z-index: 100100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background-color: rgba(12, 16, 20, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: popup-overlay-auf 0.25s ease both;
}
.popup-overlay[hidden] { display: none; }

.popup-karte {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: #ffffff;
  color: #23282c;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  padding: 2rem 2rem 1.25rem;
  animation: popup-karte-auf 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Ein schmaler Streifen in der Akzentfarbe des jeweiligen Designs - genug,
   damit das Fenster zur Seite gehoert, ohne dass der Text darauf liegt. */
.popup-karte::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 10px 10px 0 0;
  background-color: var(--farbe-akzent, var(--farbe-primaer, #0d5c63));
}

.popup-schliessen {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: #5a6570;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.popup-schliessen:hover { background-color: #eef1f3; color: #23282c; }

.popup-inhalt { margin-top: 0.4rem; }

/* Der Inhalt kommt aus dem Editor und bringt eigenes Markup mit. Hier nur
   Grundabstaende, damit er in jedem Design lesbar bleibt - die Designs stylen
   h2/h3/p unterschiedlich, das soll erhalten bleiben. */
.popup-inhalt > *:first-child { margin-top: 0; }
.popup-inhalt > *:last-child { margin-bottom: 0; }
/* Schrift und Anmutung kommen weiter aus dem jeweiligen Design, die Farbe nicht:
   viele Designs setzen Ueberschriften, <strong> und Links in ihrer Akzentfarbe.
   Mehrere dieser Akzentfarben sind helle Goldtoene, die auf der weissen Karte
   kaum lesbar waeren. Innerhalb des Fensters gilt deshalb die dunkle Textfarbe. */
.popup-inhalt h1,
.popup-inhalt h2,
.popup-inhalt h3 {
  margin: 0 0 0.7rem;
  font-size: 1.3rem;
  line-height: 1.3;
  padding-right: 2.2rem; /* Platz fuer den Schliessen-Knopf */
  color: #23282c;
}
.popup-inhalt strong,
.popup-inhalt b { color: inherit; }
/* Auch die Fliesstext-Farbe muss gesetzt werden, nicht nur die der Ueberschrift:
   gemessen auf Design 29 kam der Absatztext sonst auf 2,2:1 gegen die weisse
   Karte, weil das Design seine <p> fuer einen dunklen Untergrund einfaerbt. */
.popup-inhalt,
.popup-inhalt p,
.popup-inhalt li,
.popup-inhalt span,
.popup-inhalt div { color: #23282c; }

.popup-inhalt p { margin: 0 0 0.9rem; line-height: 1.6; }
.popup-inhalt ul,
.popup-inhalt ol { margin: 0 0 0.9rem; padding-left: 1.3rem; }
.popup-inhalt li { margin-bottom: 0.35rem; line-height: 1.55; }
.popup-inhalt img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0.9rem 0;
}
.popup-inhalt a {
  color: #23282c;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.popup-fuss {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid #e6e9ec;
  display: flex;
  justify-content: flex-end;
}

/* Bewusst dunkel statt in der Akzentfarbe: mehrere Designs haben helle
   Goldtoene als Akzent, weisse Schrift darauf kaeme auf rund 1,8:1 und waere
   unlesbar. Die Design-Zugehoerigkeit traegt der Streifen oben an der Karte. */
.popup-ok {
  padding: 0.65rem 1.6rem;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  color: #ffffff;
  background-color: #23282c;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.popup-ok:hover { background-color: #3a4248; }

.popup-karte:focus { outline: none; }

.popup-schliessen:focus-visible,
.popup-ok:focus-visible {
  outline: 3px solid #f0b429;
  outline-offset: 2px;
}

/* Verhindert, dass die Seite hinter dem Fenster mitscrollt. */
body.popup-offen { overflow: hidden; }

@keyframes popup-overlay-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popup-karte-auf {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  /* mittig statt unten angedockt: unten sitzt auf vielen Seiten der
     Cookie-Hinweis, die Karte lag sonst genau darauf */
  .popup-overlay { padding: 0.75rem; }
  .popup-karte {
    padding: 1.5rem 1.25rem 1rem;
    max-height: calc(100vh - 1.5rem);
  }
  .popup-fuss { justify-content: stretch; }
  .popup-ok { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .popup-overlay,
  .popup-karte { animation: none; }
}