.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%);
  /* Zugeklappt stand die Liste frueher auf right:-100px - also 100 Pixel RECHTS
     neben der Leiste und damit ausserhalb der Seite. `visibility:hidden` macht
     sie unsichtbar, nimmt ihr aber nicht den Platz: auf einem 320 Pixel breiten
     Schirm war die Seite dadurch 407 Pixel breit und liess sich waagerecht
     schieben (Fund 16.09.2026). Sie faehrt jetzt aus derselben Richtung ein,
     bleibt dabei aber innerhalb der Seite. */
  right: calc(100% - 14px);
  opacity: 0;
  visibility: hidden;
  transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease,
              visibility 0s linear 0.3s;
}

.sprache-details[open] > .sprache-liste {
  right: 100%;
  opacity: 1;
  visibility: visible;
  transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease,
              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.
   ========================================================================== */

.bewertungen-karussell {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

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

.bewertungen-karussell-slide {
  display: none;
  text-align: center;
  padding: 0 1rem;
}

.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); }
}

.bewertungen-karussell-quote {
  font-size: 1.8rem;
  color: var(--farbe-accent, #0ea5e9);
  opacity: 0.5;
  display: block;
  margin-bottom: 0.5rem;
}

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

.bewertungen-karussell-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--farbe-text, #333);
  margin: 0 0 1rem;
}

.bewertungen-karussell-name {
  font-weight: 600;
  color: var(--farbe-muted, #666);
  margin: 0;
}

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

.bewertungen-karussell-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--farbe-border, #ddd);
  cursor: pointer;
  padding: 0;
}

.bewertungen-karussell-dot.aktiv {
  background: var(--farbe-accent, #0ea5e9);
}

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