/* =====================================================
   Satzwandel – EINHEITLICHE GESAMT-CSS (Index-Ready)
   ===================================================== */

/* Tokens */
:root{
  --beige:#E4D6C6;
  --beige-dark:#D2BEA9;
  --card:#FFF8F0;
  --accent:#EA7A29;
  --bg:#fffaf5;
  --ink:#2c2a29;
  --muted:#6f675f;
  --sidebar:280px;

  --card-bg:#fbf6ee;
  --card-border:rgba(0,0,0,.10);
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0;min-height:100%;
  background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial
}
body{overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* Sidebar */
.sidebar{
  position:fixed; top:0; left:0; width:var(--sidebar);
  height:100vh; background:var(--beige); color:black;
  padding:28px 22px; display:flex; flex-direction:column; align-items:flex-start;
  z-index:100;
}
.sidebar img{
  width:200px; height:200px; object-fit:cover; border-radius:50%;
  border:0; box-shadow:0 6px 20px rgba(0,0,0,.12);
  margin:0 auto 10px; display:block;
}
.sidebar h2{font-weight:700;font-size:18px;margin:6px 0 4px}
.sidebar p,.sidebar a{font-size:15px;line-height:1.35;margin:2px 0;color:black}
.sidebar a:hover{text-decoration:underline}
.vfll-link{ color:var(--accent) !important; text-decoration:underline !important; }

/* Page */
.page{ min-height:100%; position:relative; display:flex; flex-direction:column; margin-left:var(--sidebar); }
.container{ width:calc(100vw - var(--sidebar)); padding:0 24px 32px 24px; } /* unten enger: Footer näher am Zitat */

/* Rail */
.rail{ padding-left:4.5cm; padding-right:4.5cm; }
.rail p, .rail li{ text-align:justify; hyphens:auto; }

/* Header */
header.top-hero{
  position:relative; padding:24px 0 10px; display:flex; gap:20px; align-items:flex-start;
}
header.top-hero .titleblock{flex:1; text-align:left;}
/* H1-Größe wie Korrektoratsseite (ruhig/groß) + zentriert */
header.top-hero h1{
  font-size:clamp(28px,3.5vw,42px);
  font-weight:800; margin:0; color:var(--beige-dark); line-height:1.15;
  text-align:center;
}

/* Topnav */
.topnav{
  margin-top:12px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}
.topnav a{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:var(--beige); color:#333; font-size:14px; font-weight:700;
  border:1px solid rgba(0,0,0,.08);
}
.topnav a:hover{background:#d1bea9}

/* Buttons */
.simple-button {
  display:inline-block; background:var(--accent); color:#fff; font-size:16px; padding:10px 16px; border-radius:30px; font-weight:700;
}
.simple-button:hover{ background:#c96520; }
.btn-wrap{ text-align:center; margin-top:10px; }
.btn-wrap .simple-button{ transform:none; }
.simple-button-priority{ font-size:18px; padding:11px 22px; }

/* Gärtchen */
.gaertchen-mini{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.gaertchen-mini img{
  width:96px; height:96px; border-radius:50%; object-fit:cover; border:0; box-shadow:0 8px 24px rgba(0,0,0,.12);
  transform:translateX(-6px);
}
.gaertchen-mini .caption{ font-size:13px; font-weight:800; color:var(--accent); margin-top:-6px; }
.quicklinks{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.quicklinks .pill{
  display:inline-block; padding:6px 12px; border-radius:999px; background:var(--beige); color:#333;
  font-size:14px; font-weight:700; border:1px solid rgba(0,0,0,.08); text-align:center;
}
.quicklinks .pill:hover{ background:#d1bea9; }

/* Fließtext-Links */
.rail a{ color:var(--accent); font-weight:700; text-decoration:none; }
/* Button-Schrift sicher weiß */
.rail a.simple-button, .btnrow a.simple-button, .btn-wrap a.simple-button{ color:#ffffff !important; text-decoration:none !important; }

/* Sections & Grids */
section{margin-top:48px}
section h2{font-size:35px;margin:0 0 12px}
#lv-h2.centered{ text-align:center; }

.grid-two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }

/* Karten */
.list-card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px;
  padding:14px 16px; box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.list-card h3{ margin:0 0 10px; font-size:20px; }
.list-card ul{ margin:0; padding-left:22px; }
.list-card li{ margin:6px 0; }

/* Button-Reihen in Karten – auf einer Linie, kein Umbruch */
.list-card .btnrow{
  display:flex; gap:10px; flex-wrap:nowrap; align-items:center;
}
.list-card .btnrow a.simple-button{
  white-space:nowrap; padding:10px 16px;
}

/* Utilities */
.muted{ color:var(--muted); }

/* Zitat zentriert, näher am Footer */
.prefooter-quote{
  text-align:center;
  margin-top:48px;   /* angenehm weit vom Content */
  margin-bottom:0;   /* direkt vor dem Footer */
}

/* Footer näher ans Zitat */
#footer-impressum{
  text-align:center;
  margin: 0 0 28px;  /* kein Abstand nach oben */
}
#footer-impressum .footer-inner{
  display:inline-block; padding:10px 18px 18px 18px;
}
#footer-impressum a{ color:inherit; }

footer{ text-align:left; }
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.btnrow.right{justify-content:flex-end}

/* Responsive */
@media (max-width:1200px){
  header.top-hero h1{font-size:clamp(26px,3.2vw,38px)}
  section { margin-block-start: 40px; }
}
@media (max-width:980px){
  .sidebar{
    position:relative; width:100%; height:auto; left:auto; top:auto;
    padding:18px 16px;
    display:flex; flex-direction:row; align-items:center; gap:14px; flex-wrap:wrap;
  }
  .sidebar img{ width:84px; height:84px; margin:0; box-shadow:0 4px 12px rgba(0,0,0,.12); }
  .sidebar h2{font-size:16px;margin:0}
  .sidebar p,.sidebar a{font-size:14px}

  .page{ margin-left:0; }
  .container{ width:100vw; padding:0 16px 32px 16px; } /* unten ebenfalls enger */

  header.top-hero{ padding:16px 0 8px; flex-direction:column; gap:12px; align-items:stretch; }
  .topnav{ gap:10px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; margin-bottom:2px; justify-content:flex-start; }
  .topnav a{flex:0 0 auto}

  .grid-two{ grid-template-columns:1fr; }
  .list-card .btnrow{ flex-wrap:wrap; } /* mobil darf umbrechen */
  .list-card .btnrow a.simple-button{ white-space:normal; }

  .rail{ padding-left:16px; padding-right:16px; }
}
@media (max-width:720px){
  .list-card{padding:18px 18px}
  section { margin-block-start: 28px; }
}
@media (max-width:520px){
  .topnav{gap:8px}
  .topnav a{font-size:13px; padding:6px 10px}
  .gaertchen-mini img{width:80px;height:80px}
  .list-card h3{font-size:18px}
  section { margin-block-start: 24px; }
}

/* A11y */
:focus-visible { outline: 3px solid ; outline-color: var(--accent); outline-offset: 2px; border-radius: 6px; }
/* === Mini-Patch 2025-10-12: Buttons • Zitat • Grundtext === */

/* 1) Grundtext (wie Korrektoratsseite): etwas größer + entspannte Zeilenhöhe */
.rail{
  font-size: 21px;
  line-height: 1.68;
}
.rail p, .rail li{
  line-height: 1.68;
}

/* 2) Drei Buttons rechts auf EINER Linie (kein Umbruch auf Desktop) */
.list-card .btnrow{
  display: flex;
  flex-wrap: wrap;         
  gap: 10px;
  align-items: center;
}
.list-card .btnrow .simple-button{
  white-space: nowrap;        /* Labels nicht umbrechen */
  padding: 10px 14px;         /* etwas kompakter für 3 Buttons nebeneinander */
}

/* Mobil darf es umbrechen */
@media (max-width: 980px){
  .list-card .btnrow{ flex-wrap: wrap; }
  .list-card .btnrow .simple-button{ white-space: normal; }
}

/* 3) Zitat wirklich mittig + nah am Footer (overridet Justify im Rail) */
.rail p.prefooter-quote,
.prefooter-quote{
  text-align: center !important;
  margin-top: 70px;     /* näher an den Content als zuvor */
  margin-bottom: 2px;   /* direkt an den Footer heran */
}

/* Footer ohne zusätzliche Luft – rückt an das Zitat */
#footer-impressum{
  margin-top: 0;        /* entfernt „Luftschicht“ über dem Footer */
}
/* === Balken/Sidebar: Button-Schrift weiß + Abstände VFLL/Sedcard === */

/* Button im Balken: Schrift sicher weiß, mehr Abstand nach oben (vor „Sedcard ansehen“) */
.sidebar .simple-button{
  color: #ffffff !important;
  margin-top: 18px;     /* größerer Abstand vor der Sedcard-Schaltfläche */
}

/* VFLL-Link: mehr Luft davor und danach */
.sidebar .vfll-link{
  display: inline-block; /* macht margin wirksam */
  margin-top: 12px;      /* mehr Abstand vor dem Link */
  margin-bottom: 14px;   /* mehr Abstand nach dem Link */
}
/* === Grundtextgrößen-Anpassung (Index) === */
.rail {
  font-size: 20px;
  line-height: 1.7;
}

.rail p,
.rail li {
  font-size: 20px;
  line-height: 1.7;
}
/* Grundtext auch dann auf 20px, wenn Sektionen versehentlich außerhalb .rail stehen */
.section-block,
.section-block p,
.section-block li,
.section-block details,
.section-block summary {
  font-size: 20px;
  line-height: 1.7;
}
/* === H2 unten zentrieren (alle H2 im Contentbereich) === */
.rail h2 { 
  text-align: center; 
}

/* === Balken (Sidebar) in Card-Farbe + dezente Kante === */
.sidebar{
  background: var(--card-bg);           /* gleiche Farbe wie Cards */
  border-right: 1px solid var(--card-border);
}

/* Kontrast sicherstellen: VFLL-Link bleibt orange, Button bleibt weiß auf orange */
.sidebar .vfll-link { color: var(--accent) !important; }
.sidebar .simple-button { color: #fff !important; }
/* === Sidebar: ursprüngliches Beige, feine Trennung, dezenter Schatten === */
.sidebar{
  background: var(--beige);                       /* vertrauter Beige-Ton */
  border-right: 1px solid rgba(0,0,0,.06);        /* zarte Kante rechts */
  box-shadow: 0 8px 24px rgba(0,0,0,.06);         /* sehr dezenter Tiefenwurf */
  color: #000;                                    /* Lesbarkeit im Balken */
}

/* Sicherheit: VFLL-Link & Button-Farbe im Balken */
.sidebar .vfll-link { color: var(--accent) !important; }
.sidebar .simple-button { color: #fff !important; }
/* === TOPBAR: Navi oben, eine Zeile; Sprachgärtchen rechts klein === */
.topbar{
  display: grid;
  grid-template-columns: 1fr auto 48px; /* links Platz, Mitte Navi, rechts Bild */
  align-items: center;
  gap: 12px;
  padding: 6px 0 8px;
}

/* Navi mittig, ohne Umbruch; bei Platzmangel: horizontales Scrollen nur für die Navi */
.topbar-center.topnav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Buttons (Pills) in der Topbar – helles Beige, ruhiger Hover */
.topbar-center.topnav a{
  background: var(--beige) !important;
  color: #333 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-weight: 700;
  white-space: nowrap; /* kein Umbruch in den Labels */
}
.topbar-center.topnav a:hover,
.topbar-center.topnav a:focus-visible{
  background: #d1bea9 !important; /* halbe Nuance dunkler */
  text-decoration: none;
}

/* Sprachgärtchen rechts klein */
.topbar .gaertchen-mini{
  display: inline-block;
  width: 44px; height: 44px;
}
.topbar .gaertchen-mini img{ width: 44px; height: 44px; }

/* H1 bleibt zentriert, mit etwas Luft nach der Topbar */
header.top-hero .titleblock h1{
  text-align: center;
  margin-top: 6px;
}

/* Mobile: Navi bleibt einzeilig scollbar, Bild rechts fix */
@media (max-width: 980px){
  .topbar{
    grid-template-columns: 1fr auto 44px;
    gap: 10px;
  }
  .topbar-center.topnav{ gap: 10px; }
}

/* Sicherheitsnetz: alte Navi-Styles hier neutralisieren, falls vorhanden */
header.top-hero .topnav{
  margin-top: 0 !important;
}


/* 1) H1 auf dieser Seite ausblenden */
header.top-hero .titleblock h1{ display: none !important; }

/* 2) Header: NAVI oben (zentriert) • CTA darunter */
header.top-hero{
  display: grid !important;
  grid-template-areas:
    "topbar"
    "cta";
  row-gap: 10px;
}
/* Button bleibt zentriert unter der Navi */
header.top-hero .titleblock{ display: contents !important; }
header.top-hero .titleblock .btn-wrap{
  grid-area: cta;
  justify-self: center;
  text-align: center;
  margin-top: 0;
}
header.top-hero .btn-wrap .simple-button{ transform: none !important; }

/* 3) Topbar: Navi GEOMETRISCH zentriert, Sprachgärtchen rechts */
:root{ --topbar-side: 72px; } /* Spiegelbreite = rechte Spalte; bei Bedarf feinjustieren */

header.top-hero .topbar{
  grid-area: topbar;
  display: grid !important;
  grid-template-columns: var(--topbar-side) minmax(0,1fr) var(--topbar-side) !important;
  align-items: center;
  gap: 12px;
  padding: 6px 0 8px;
}

/* Navi in die MITTLERE Spalte – zentriert & einzeilig */
header.top-hero .topbar .topnav{
  grid-column: 2 / 3 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin: 0 auto;                 /* exakt mittig */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  width: fit-content;             /* kompakt, kein „Restbreite“-Zug */
}

/* Sprachgärtchen RECHTS – Bild größer + etwas nach links eingerückt */
header.top-hero .topbar .gaertchen-mini{
  grid-column: 3 / 4 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: var(--topbar-side);
  transform: translateX(-40px);    /* rückt leicht nach links, damit Titel gut drunter passt */
}
header.top-hero .topbar .gaertchen-mini img{
  width: 56px; height: 56px;
  border-radius: 50%; object-fit: cover;
}

/* Untertitel zurück – ORANGE & kräftiger */
header.top-hero .topbar .gaertchen-mini::after{
  content: "Sprachgärtchenpoesie";
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--accent);           /* orange */
  text-align: center;
  white-space: nowrap;
}

/* Mobil kompakter */
@media (max-width: 980px){
  :root{ --topbar-side: 60px; }
  header.top-hero .topbar{ gap: 10px; }
  header.top-hero .topbar .gaertchen-mini img{ width: 52px; height: 52px; }
}

section#reviews h2 { text-align: center !important; }



/* v8.38 – Hotfix (gezielt, ohne Seiteneffekte) */

/* Sidebar-Porträt zentrieren – gewinnt gegen Grid/Flex/Float */
.sidebar a[rel="home"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.sidebar a[rel="home"] > img {
  float: none !important;
  margin: 0 !important;
  display: block !important;
}

/* Alle H2 im Inhaltsbereich (inkl. „Bewertungen“) mittig ausrichten */
#content-start h2,
#ratings-title {
  text-align: center !important;
}
/* Hintergrund global an die Navi-Farbe (Index-v17: #FFFFFF) angleichen */
html, body {
  background: #FFFFFF !important;
}

/* Sidebar (linker Balken) auf #FFFBF7 */
.sidebar{
  background: #FFFBF7 !important;
}

/* ===== Soft-Beige-Palette (nahe Weiß) – EIN Schalter ===== */
:root{
  /* → HIER NUR DIESEN WERT ändern, um alle zu testen */
  --tone-soft: #FFFBF7;        /* aktueller Favorit (fast weiß, warm) */
  --hairline-warm: #E6DED3;    /* feine, warme Kante */
}

/* Sidebar (linker Balken) */
.sidebar{
  background: var(--tone-soft) !important;
  border-right: 1px solid var(--hairline-warm) !important; /* optional */
}

/* Cards */
.container .rail :is(.list-card, .card){
  background: var(--tone-soft) !important;
  border: 1px solid var(--hairline-warm) !important;
  box-shadow: none !important;
}

.stars{
  color: #E88100;              /* dein Akzent-Orange */
  letter-spacing: 2px;         /* etwas Luft zwischen den Sternen */
  font-size: 1.1em;            /* minimal größer als Text */
  vertical-align: middle;
  margin-right: .4em;          /* Abstand zum Wort „Bewertungen“ */
}
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}
/* Nur der H2 bleibt fett – der folgende Text nicht */
#ratings-title { font-weight: 700; }
#ratings-title .stars { font-weight: 700; }       /* Sterne wie H2 */
#ratings-title + p { font-weight: 400; }          /* erster Absatz danach normal */


/* 1) H2 wieder exakt mittig – ohne seitliche Verschiebung */
#content-start h2,
.rail h2{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;      /* evtl. alte Verschiebung neutralisieren */
}

/* 2) Nur der H2 bleibt fett – Absatz darunter normal */
#ratings-title{ font-weight: 700 !important; }
#bewertungen p{ font-weight: 400 !important; }    /* Text unter H2 NICHT fett */

/* Sidebar: Sedcard-Button schwarze Schrift */
.sidebar .simple-button{
  color: #000 !important;
}


/* Akzent minimal dunkler → Weiß darauf ist AA-konform */
:root { --accent: #A85700; }

/* Textbereich-Buttons + CTA oben links: Weiß auf Orange */
#content-start .simple-button,
.topbar-left .simple-button.simple-button-priority {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}

/* Sidebar-Button (Sedcard): auch wieder Weiß statt Schwarz */
.sidebar .simple-button {
  color: #fff !important;
}

/* Sterne (falls genutzt): in Akzentfarbe */
.stars { color: var(--accent) !important; }
/* FINAL-PATCH: Text-Buttons wieder mit weißer Schrift auf Orange */
#content-start .simple-button{
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}