/* Shine your Light — Komponenten- und Layoutschicht
   Baut auf den Design-Tokens aus Claude Design auf (tokens/styles.css).
   Übersetzt die JSX-Komponenten des Handoffs (Button, Card, Badge, Input)
   in reines CSS, damit die Seite ohne Build-Schritt läuft. */

*{box-sizing:border-box}
::selection{background:var(--syl-blush-200)}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--syl-cream-100);color:var(--syl-text-body);
  font-family:var(--syl-font-sans);font-size:var(--syl-text-md);
  line-height:var(--syl-leading-body);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

/* ---------- Layout ---------- */
.wrap{max-width:var(--syl-container);margin-inline:auto;padding-inline:var(--syl-gutter)}
.wrap-narrow{max-width:var(--syl-container-narrow);margin-inline:auto;padding-inline:var(--syl-gutter)}
section{padding-block:var(--syl-section-y)}
.bg-cream{background:var(--syl-cream-100)}
.bg-surface{background:var(--syl-cream-50)}
.bg-alt{background:var(--syl-cream-200)}
.bg-glow{background:radial-gradient(110% 80% at 15% 0%, var(--syl-apricot-100) 0%, transparent 50%), var(--syl-cream-200)}
.bg-ink{background:var(--syl-ink-900);color:var(--syl-cream-200)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--syl-space-8);align-items:center}
.split-rev{grid-template-columns:.9fr 1.1fr}
@media(max-width:860px){.split,.split-rev{grid-template-columns:1fr;gap:var(--syl-space-6)}}

/* ---------- Typografie ---------- */
.eyebrow{display:block;font-size:12.5px;font-weight:var(--syl-w-semibold);
  letter-spacing:var(--syl-tracking-caps);text-transform:uppercase;color:var(--syl-gold-500)}
h1,h2,h3{font-family:var(--syl-font-serif);font-weight:var(--syl-w-semibold);
  color:var(--syl-ink-900);margin:0;text-wrap:balance}
h1{font-size:var(--syl-display-xl);line-height:1.08}
h2{font-size:var(--syl-display-l);line-height:1.15;margin-top:12px}
/* Abstand zwischen Ueberschrift und Fliesstext. p hat oben 0, dadurch klebte der
   erste Absatz an der h2. 28.08.2026. */
h2 + p, h2 + ul, h2 + ol, h2 + blockquote,
h3 + p, h3 + ul, h3 + ol{margin-top:24px}
h3{font-size:var(--syl-display-s);line-height:1.2}
.lead{font-size:var(--syl-text-lg);line-height:1.6;color:var(--syl-text-body);margin:22px 0 0;max-width:34em}
.lead>p:last-child{margin-bottom:0}
p{margin:0 0 1rem;max-width:36em}
section p:last-child{margin-bottom:0}
.center{text-align:center}
.center .eyebrow{text-align:center}
.center p{margin-inline:auto}
.head{max-width:620px;margin:0 auto 48px}
.script{font-family:var(--syl-font-script);font-size:2rem;color:var(--syl-gold-500);line-height:1}

/* ---------- Button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--syl-font-sans);font-weight:var(--syl-w-semibold);font-size:15px;
  padding:13px 26px;border-radius:var(--syl-radius-pill);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:all var(--syl-dur) var(--syl-ease);
  background:var(--syl-gold-400);color:var(--syl-white)}
.btn:hover{background:var(--syl-gold-500);transform:translateY(-1px);box-shadow:var(--syl-shadow-md)}
.btn:focus-visible{outline:none;box-shadow:var(--syl-focus-shadow)}
.btn.lg{padding:16px 32px;font-size:16px}
.btn.sm{padding:9px 18px;font-size:14px}
.btn.secondary{background:transparent;color:var(--syl-ink-900);border-color:var(--syl-border-strong)}
.btn.secondary:hover{background:var(--syl-cream-200);border-color:var(--syl-gold-400)}
.btn.link{background:none;padding:0;color:var(--syl-gold-500);border:0;font-weight:var(--syl-w-semibold)}
.btn.link:hover{background:none;transform:none;box-shadow:none;color:var(--syl-gold-400)}
.btn-row{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

/* ---------- Badge ---------- */
.badges{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.badge{display:inline-block;font-size:12.5px;font-weight:var(--syl-w-medium);
  padding:6px 14px;border-radius:var(--syl-radius-pill);
  background:var(--syl-cream-200);color:var(--syl-ink-700);border:1px solid var(--syl-border)}
.badge.gold{background:var(--syl-apricot-200);color:var(--syl-ink-900);border-color:var(--syl-apricot-300)}
a.badge{text-decoration:none;transition:all var(--syl-dur) var(--syl-ease)}
a.badge:hover{border-color:var(--syl-gold-400);color:var(--syl-ink-900)}
a.badge:focus-visible{outline:none;box-shadow:var(--syl-focus-shadow)}

/* ---------- Card ---------- */
.card{background:var(--syl-white);border:1px solid var(--syl-border);
  border-radius:var(--syl-radius-lg);padding:var(--syl-space-5);box-shadow:var(--syl-shadow-card)}
.card.lg{padding:var(--syl-space-6)}
.card.flat{box-shadow:none;background:var(--syl-cream-50)}
.grid{display:grid;gap:var(--syl-space-4)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.grid-4,.grid-2,.grid-3{grid-template-columns:1fr}}
.card-svc{display:flex;flex-direction:column;gap:10px}
.card-svc h3{margin:0}
.card-svc p{font-size:var(--syl-text-sm);margin:0}
/* Nur der letzte Absatz waechst, damit die Links aller Karten unten auf einer Linie
   stehen. Vorher wuchs jeder Absatz — bei zwei Absaetzen klaffte dazwischen eine
   Luecke von der halben Kartenhoehe. 28.08.2026. */
.card-svc p:last-of-type{flex:1}
.karte-zusatz{display:flex;flex-direction:column;gap:8px}
.card-svc .karte-zusatz p{font-size:var(--syl-text-sm);color:var(--syl-ink-500)}
.icon{color:var(--syl-gold-500);display:flex}

/* ---------- Trust-Leiste ---------- */
.strip{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding-block:18px}
.strip .sep{color:var(--syl-gold-400)}
/* Schmuck, der auf schmalen Bildschirmen mehr Platz kostet als er bringt.
   Derselbe Umbruch wie bei der Navigation. */
@media(max-width:900px){.nur-desktop{display:none}
  /* Faellt das Bild weg, soll der Text nicht in einer halben Spalte stehen
     bleiben. Der Umbruch von .split selbst liegt bei 860. */
  .split-ohne-bild{grid-template-columns:1fr}}

/* ---------- Ablauf-Schritte ---------- */
.steps{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.steps li{padding-left:22px;border-left:2px solid var(--syl-apricot-200);max-width:36em}
.steps b{display:block;font-family:var(--syl-font-sans);font-size:13px;font-weight:var(--syl-w-semibold);
  letter-spacing:.12em;text-transform:uppercase;color:var(--syl-gold-500);margin-bottom:4px}
.steps span{color:var(--syl-text-body);font-size:var(--syl-text-sm)}

/* ---------- FAQ ---------- */
.faq{margin-top:24px;max-width:44em}
.faq details{border-bottom:1px solid var(--syl-border);padding:16px 0}
.faq summary{cursor:pointer;list-style:none;font-weight:var(--syl-w-semibold);
  color:var(--syl-ink-900);display:flex;gap:14px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"✦";color:var(--syl-gold-400);font-size:13px}
.faq details[open] summary{color:var(--syl-gold-500)}
.faq details p{margin:12px 0 0 28px;font-size:var(--syl-text-sm)}
.faq summary:focus-visible{outline:2px solid var(--syl-gold-400);outline-offset:4px;border-radius:4px}

/* ---------- Tabelle ---------- */
.tw{overflow-x:auto;margin:24px 0}
table{border-collapse:collapse;width:100%;min-width:22rem;font-size:var(--syl-text-sm)}
caption{text-align:left;font-size:var(--syl-text-xs);color:var(--syl-text-muted);padding-bottom:8px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--syl-border)}
thead th{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--syl-ink-500);
  font-weight:var(--syl-w-semibold);border-bottom-color:var(--syl-border-strong)}
td:last-child,th:last-child{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}

/* ---------- Formular ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13px;font-weight:var(--syl-w-medium);color:var(--syl-ink-700)}
.field input,.field textarea,.field select{
  font-family:var(--syl-font-sans);font-size:15px;color:var(--syl-ink-900);
  padding:12px 14px;border:1px solid var(--syl-border-strong);border-radius:var(--syl-radius-md);
  background:var(--syl-white);transition:all var(--syl-dur-fast) var(--syl-ease)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--syl-gold-400);box-shadow:var(--syl-focus-shadow)}
.field textarea{resize:vertical;min-height:120px}

/* Zustimmungskaestchen: Haken links, Satz daneben — nicht untereinander wie .field.
   Der Hinweis darunter ist verborgen und erscheint erst, wenn ohne Haken
   abgeschickt wird. Die Blase des Browsers bleibt dafuer aus (siehe skripte.njk). */
.zustimmung{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  margin:4px 0 20px}
.zustimmung input[type=checkbox]{width:17px;height:17px;margin:2px 0 0;
  accent-color:var(--syl-gold-500)}
.zustimmung input[type=checkbox]:focus-visible{outline:none;box-shadow:var(--syl-focus-shadow);
  border-radius:var(--syl-radius-sm)}
.zustimmung label{font-size:13px;color:var(--syl-ink-700);line-height:var(--syl-leading-body)}
.feldhinweis{grid-column:1/-1;margin:2px 0 0;font-size:var(--syl-text-xs);
  color:var(--syl-ink-700);background:var(--syl-blush-100);
  border-left:3px solid var(--syl-blush-400);
  border-radius:0 var(--syl-radius-sm) var(--syl-radius-sm) 0;padding:10px 14px}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--syl-cream-50) 86%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--syl-border)}
/* Der Kopf bekommt einen breiteren Rahmen als der Rest der Seite (1180),
   damit die acht Menuepunkte und der Knopf in eine Zeile passen. Reicht der
   Platz nicht, rutscht der Knopf nach unten und bleibt dort rechtsbuendig.
   Die 3 Bildpunkte unten sind Luft zwischen Knopf und naechstem Block. */
.nav-in{max-width:1280px;margin-inline:auto;padding-inline:var(--syl-gutter);padding-bottom:3px;
  min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;text-decoration:none;padding-block:12px}
.brand .name{font-family:var(--syl-font-script);font-size:30px;color:var(--syl-gold-500);line-height:1}
.brand .sub{font-size:10.5px;letter-spacing:var(--syl-tracking-caps);text-transform:uppercase;
  color:var(--syl-ink-500);margin-top:2px}
.nav nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav nav a{padding:8px 14px;font-size:15px;font-weight:var(--syl-w-medium);
  color:var(--syl-ink-700);text-decoration:none;border-radius:var(--syl-radius-pill);
  transition:background var(--syl-dur-fast) var(--syl-ease)}
.nav nav a:hover{background:var(--syl-cream-200)}
.nav nav a[aria-current="page"]{color:var(--syl-gold-500);font-weight:var(--syl-w-semibold)}
.nav nav .btn{margin-left:auto}   /* Knopf immer ganz rechts */

/* ---------- Footer ---------- */
footer.site{background:var(--syl-ink-900);color:var(--syl-cream-200)}
footer.site .cols{display:flex;justify-content:space-between;align-items:flex-start;
  gap:32px;flex-wrap:wrap;padding-block:48px 30px}
footer.site .brand .name{color:var(--syl-gold-300)}
footer.site .brand .sub{color:var(--syl-cream-300)}
footer.site .fcol{display:flex;flex-direction:column;gap:8px;font-size:14px}
footer.site .fcol b{color:var(--syl-cream-50);font-weight:var(--syl-w-semibold);font-family:var(--syl-font-sans)}
footer.site .fcol a,footer.site .fcol span{color:var(--syl-cream-200);opacity:.8;text-decoration:none}
footer.site .fcol a:hover{opacity:1;color:var(--syl-gold-300)}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px var(--syl-gutter);
  text-align:center;font-size:12.5px;color:var(--syl-cream-300)}

/* ---------- Bildfläche mit Sunburst, solange kein Foto da ist ---------- */
.ph{position:relative;overflow:hidden;background:var(--syl-gradient-warm);
  border-radius:var(--syl-radius-xl);aspect-ratio:4/4.6;box-shadow:var(--syl-shadow-card);
  display:flex;align-items:flex-end;justify-content:center;padding:22px}
.ph.square{aspect-ratio:1/1.08}
.ph::before{content:"";position:absolute;inset:0;
  background:url('assets/logo-full.png') no-repeat center 42%/58% auto;opacity:.5}
.ph span{position:relative;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--syl-ink-400);background:rgba(255,255,255,.55);padding:5px 12px;
  border-radius:var(--syl-radius-pill);backdrop-filter:blur(3px)}

/* ---------- Redaktionsmarke (nur Vorschau) ---------- */
.todo{background:var(--syl-blush-100);border-left:3px solid var(--syl-blush-400);
  border-radius:0 var(--syl-radius-sm) var(--syl-radius-sm) 0;
  padding:14px 18px;margin:24px 0;font-size:13.5px;color:var(--syl-ink-700);max-width:36em}
.todo b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--syl-blush-400);margin-bottom:4px}
.preview-bar{background:var(--syl-ink-900);color:var(--syl-cream-200);font-size:12.5px;
  text-align:center;padding:8px var(--syl-gutter);letter-spacing:.04em}
.preview-bar b{color:var(--syl-gold-300)}

/* ---------- Variantenschalter (nur Vorschau, fliegt vor dem Livegang raus) ---------- */
.pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 26px}
.pick .pick-label{font-size:11px;font-weight:var(--syl-w-semibold);letter-spacing:.14em;
  text-transform:uppercase;color:var(--syl-blush-400);margin-right:4px}
.pick button{font-family:var(--syl-font-sans);font-size:13px;font-weight:var(--syl-w-medium);
  padding:7px 16px;border:1px solid var(--syl-border-strong);background:transparent;
  color:var(--syl-ink-500);border-radius:var(--syl-radius-pill);cursor:pointer;
  transition:all var(--syl-dur-fast) var(--syl-ease)}
.pick button:hover{color:var(--syl-ink-900);border-color:var(--syl-gold-400)}
.pick button[aria-pressed="true"]{background:var(--syl-gold-400);border-color:var(--syl-gold-400);
  color:var(--syl-white);font-weight:var(--syl-w-semibold)}
.pick button:focus-visible{outline:none;box-shadow:var(--syl-focus-shadow)}
.variant{display:none}
.variant.on{display:block}

/* ---------- Bilder ---------- */
.portrait{width:100%;border-radius:var(--syl-radius-xl);box-shadow:var(--syl-shadow-lg);
  object-fit:cover;aspect-ratio:4/4.6}
.portrait.square{aspect-ratio:1/1.08;box-shadow:var(--syl-shadow-card)}
.logo{height:70px;width:auto}
@media(max-width:640px){.logo{height:56px}}

/* ---------- Vorschau-Leiste mit Schalter für Redaktionsmarken ---------- */
.preview-bar{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.preview-bar button{font-family:var(--syl-font-sans);font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--syl-cream-200);
  border-radius:var(--syl-radius-pill);transition:all var(--syl-dur-fast) var(--syl-ease)}
.preview-bar button:hover{border-color:var(--syl-gold-300);color:var(--syl-gold-300)}
body.clean .todo{display:none}
body.clean .pick{display:none}
.footer-logo{height:88px}
@media(max-width:640px){.footer-logo{height:72px}}

/* ---------- Bildband für Querformat-Motive ---------- */
.band{margin:0 auto;padding:0;max-width:920px}
.band img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--syl-radius-lg);box-shadow:var(--syl-shadow-md)}
.band figcaption{margin-top:14px;font-size:var(--syl-text-xs);color:var(--syl-ink-400);
  letter-spacing:.04em;text-align:center;max-width:34em;margin-inline:auto}
.hero-text{max-width:36em}
section.tight{padding-block:0 var(--syl-section-y)}

/* Hero, dem ein Bildband folgt: unten enger, damit Text und Bild zusammen wirken */
section.hero-lead{padding-block:var(--syl-section-y) clamp(1.75rem,3.5vw,2.75rem)}

/* ---------- Hero mit Bild daneben (3:2, gleiche Proportion wie das Band) ---------- */
.hero-split{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--syl-space-8);
  align-items:center}
.hero-split .hero-text{max-width:none}
.hero-split figure{margin:0}
.hero-split img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--syl-radius-lg);box-shadow:var(--syl-shadow-md)}
.hero-split figcaption{margin-top:12px;font-size:9px;color:var(--syl-ink-400);
  letter-spacing:.04em;text-align:right}
@media(max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:var(--syl-space-6)}
  .hero-split figure{order:2}
}

/* ---------- Mobile Navigation ---------- */
.nav-toggle{display:none;align-items:center;gap:10px;background:transparent;cursor:pointer;
  border:1px solid var(--syl-border-strong);border-radius:var(--syl-radius-pill);
  padding:9px 16px;font-family:var(--syl-font-sans);font-size:14px;font-weight:var(--syl-w-medium);
  color:var(--syl-ink-700);transition:all var(--syl-dur-fast) var(--syl-ease)}
.nav-toggle:hover{border-color:var(--syl-gold-400);color:var(--syl-ink-900)}
.nav-toggle:focus-visible{outline:none;box-shadow:var(--syl-focus-shadow)}
.nav-toggle .bars{display:grid;gap:4px;width:18px}
.nav-toggle .bars i{display:block;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform var(--syl-dur) var(--syl-ease), opacity var(--syl-dur-fast) var(--syl-ease)}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media(max-width:900px){
  .nav-in{min-height:72px;flex-wrap:nowrap}
  .nav-toggle{display:inline-flex}
  .nav-in > nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--syl-cream-50);border-bottom:1px solid var(--syl-border);
    box-shadow:var(--syl-shadow-md);
    padding:var(--syl-space-2) var(--syl-gutter) var(--syl-space-5);
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height var(--syl-dur) var(--syl-ease), opacity var(--syl-dur-fast) var(--syl-ease),
               visibility 0s linear var(--syl-dur)}
  .nav.open .nav-in > nav{max-height:min(78vh,640px);overflow-y:auto;opacity:1;visibility:visible;
    transition:max-height var(--syl-dur) var(--syl-ease), opacity var(--syl-dur-fast) var(--syl-ease),
               visibility 0s}
  .nav-in > nav a{padding:14px 4px;border-radius:0;border-bottom:1px solid var(--syl-border);
    font-size:16px}
  .nav-in > nav a:last-of-type{border-bottom:0}
  .nav-in > nav a:hover{background:transparent;color:var(--syl-gold-500)}
  .nav-in > nav .btn{margin:var(--syl-space-4) 0 0;width:100%}
  .nav{position:sticky}
  .nav-in{position:relative}
}
@media(prefers-reduced-motion:reduce){
  .nav-in > nav{transition:none}
  .nav-toggle .bars i{transition:none}
}

/* Falle für Maschinen im Kontaktformular — für Menschen unsichtbar. */
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Ausnahme Startseite: die Ueberschrift soll drei Zeilen haben, nicht vier.
   Bei 56 Bildpunkten Schrift bricht sie in der 536 Bildpunkte breiten Spalte
   vierzeilig. Deckel auf 46 statt 56 Bildpunkte — das mitwachsende Verhalten
   auf schmalen Bildschirmen bleibt unangetastet. Gemessen am 27.08.2026. */
.seite-startseite main h1{font-size:clamp(2.25rem, 4.4vw, 2.875rem)}

/* ---------- Kundenstimmen ----------
   Seitwärts blätternde Bahn statt Raster. Angelegt am 05.09.2026, als die
   ersten sechs echten Zuschriften vorlagen. Grund für die Bahn: Die Texte sind
   lang (bis 95 Wörter). Untereinander ergäben sie eine Wand, nebeneinander
   steht keine allein.
   Gescrollt wird von Hand. Kein Selbstlauf — einen langen Text kann niemand
   lesen, während er wegläuft. */
.stimmen{position:relative}
.stimmen-bahn{
  display:flex;gap:var(--syl-space-4);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* Damit die erste und letzte Karte am Rand des Textkastens einrasten und
     der Schatten nicht abgeschnitten wird. */
  padding:6px 2px 20px;
  scrollbar-width:none;
}
.stimmen-bahn::-webkit-scrollbar{display:none}
.stimmen-bahn:focus-visible{outline:2px solid var(--syl-gold-500);outline-offset:6px;border-radius:var(--syl-radius-lg,14px)}

.stimme{
  flex:0 0 min(86vw, 30rem);
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:14px;
  margin:0;padding:var(--syl-space-5, 28px);
  background:var(--syl-white);
  border:1px solid var(--syl-border);
  border-radius:var(--syl-radius-lg, 14px);
  box-shadow:var(--syl-shadow-sm);
}
.stimme-thema{
  align-self:flex-start;
  font-size:11.5px;font-weight:var(--syl-w-semibold);letter-spacing:.09em;
  text-transform:uppercase;color:var(--syl-gold-500);
  background:var(--syl-cream-100);
  border-radius:var(--syl-radius-pill);padding:4px 11px;
}
.stimme blockquote{margin:0;border:0;padding:0}
.stimme blockquote p{
  margin:0 0 12px;
  /* Serifenschrift, heller als der Fliesstext. Der Schriftwechsel trennt
     staerker als jede Groessenaenderung: Die Karte liest sich als Zitat eines
     anderen Menschen, nicht als Seiteninhalt. Bei Playfair wieder 15 Punkt,
     weil eine Serifenschrift bei gleicher Punktzahl kleiner wirkt.
     Angepasst am 05.09.2026. */
  font-family:var(--syl-font-serif);
  font-size:15px;line-height:1.68;color:var(--syl-ink-500);
}
.stimme blockquote p:last-child{margin-bottom:0}
.stimme blockquote p:first-child::before{content:"„"}
.stimme blockquote p:last-child::after{content:"“"}
.stimme figcaption{
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--syl-border);
  /* Versalien: Der Name ist kurz genug dafuer und setzt sich damit vom Zitat
     ab. Im Zitat selbst waeren Versalien bei neunzig Woertern unlesbar. */
  font-size:12px;font-weight:var(--syl-w-semibold);color:var(--syl-ink-900);
  text-transform:uppercase;letter-spacing:.1em;
}
.stimme-kontext{
  display:block;margin-top:5px;
  font-weight:400;font-size:12.5px;color:var(--syl-ink-500);
  text-transform:none;letter-spacing:0;
}

.stimmen-steuerung{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.stimmen-pfeil{
  width:44px;height:44px;display:grid;place-items:center;
  background:var(--syl-white);color:var(--syl-ink-700);
  border:1px solid var(--syl-border);border-radius:var(--syl-radius-pill);
  cursor:pointer;transition:background .15s, color .15s, border-color .15s;
}
.stimmen-pfeil svg{width:20px;height:20px}
.stimmen-pfeil:hover{background:var(--syl-cream-100);color:var(--syl-gold-500)}
.stimmen-pfeil:focus-visible{outline:2px solid var(--syl-gold-500);outline-offset:3px}
.stimmen-pfeil[disabled]{opacity:.35;cursor:default}
.stimmen-pfeil[disabled]:hover{background:var(--syl-white);color:var(--syl-ink-700)}

@media(prefers-reduced-motion:reduce){
  .stimmen-bahn{scroll-behavior:auto}
  .stimmen-pfeil{transition:none}
}


/* ---------- Links im Fliesstext ---------- 05.09.2026 ----------
   Es gab keine Regel fuer Links im Inhalt. Sie standen deshalb in Browserblau
   mit Unterstrich — auf einer Seite in Creme und Kupfer ein Fremdkoerper.
   Ausgezeichnet wird jetzt wie in den Kacheln von "Vier Wege": Kupfer und
   halbfett, ohne Unterstrich. Die Fettung ist Absicht, damit die Erkennbarkeit
   nicht allein an der Farbe haengt. */
main p a:not(.btn):not(.badge),
main li a:not(.btn):not(.badge),
main blockquote a:not(.btn):not(.badge){
  color:var(--syl-gold-500);font-weight:var(--syl-w-semibold);text-decoration:none;
}
main p a:not(.btn):not(.badge):hover,
main li a:not(.btn):not(.badge):hover{color:var(--syl-gold-400)}

/* Unterste Footerzeile: Impressum und Datenschutz standen ebenfalls in
   Browserblau, weil die Regel darueber nur fuer die Spalten galt. */
footer.site .bottom a{color:var(--syl-cream-300);text-decoration:none}
footer.site .bottom a:hover{color:var(--syl-gold-300)}

/* Ist eine ganze Kachel ein Link, faerbte der Browser Ueberschrift und Text
   blau ein — zu sehen auf "Termin vereinbaren". Die Kachel erbt jetzt die
   normalen Textfarben, der Pfeil darunter bleibt das Linksignal. */
a.card{color:var(--syl-ink-900)}
a.card h3{color:var(--syl-ink-900)}
a.card p,a.card .karte-zusatz{color:var(--syl-text-body)}

/* Kontaktseite: Der linke Bereich stand mittig zum Formular und begann damit
   deutlich tiefer als dieses. Oben ausrichten. ".split" zentriert sonst zu
   Recht — bei Bild und Text nebeneinander ist das richtig, hier nicht. */
.seite-kontakt .split{align-items:start}

/* Disclaimer im Footer, 05.09.2026. Steht über der Copyright-Zeile und damit auf
   jeder Seite. Bewusst heller als die Fusszeile darunter, damit er nicht wie
   Kleingedrucktes wirkt — er ist das Gegenmittel zum offenen Risiko bei der
   Bezeichnung "Paartherapie", nicht eine Formalie. */
footer.site .disclaimer{border-top:1px solid rgba(255,255,255,.12);
  padding:22px var(--syl-gutter) 4px}
footer.site .disclaimer p{max-width:64ch;margin:0 auto;text-align:center;
  font-size:13px;line-height:1.65;color:var(--syl-cream-200);opacity:.85}