/* Selbstgehostete Fonts (woff2), relativ zu diesem CSS unter ../Fonts/.
Space Grotesk = Headlines/Zahlen/Labels; Hanken Grotesk = Fliesstext/UI. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../Fonts/SpaceGrotesk-400.woff2") format("woff2");}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../Fonts/SpaceGrotesk-500.woff2") format("woff2");}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("../Fonts/SpaceGrotesk-600.woff2") format("woff2");}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../Fonts/SpaceGrotesk-700.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../Fonts/HankenGrotesk-400.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../Fonts/HankenGrotesk-500.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("../Fonts/HankenGrotesk-600.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../Fonts/HankenGrotesk-700.woff2") format("woff2");}
/* ==========================================================================
speaker-search Startseite – Redesign
Token-basiertes, framework-freies CSS. Klassen entsprechen den Fluid-Partials.
========================================================================== */
:root {
/* Farben */
--ss-ink: #1c1a17;
--ss-dark: #211d18;
--ss-dark-card: #2c2720;
--ss-dark-border: #3d382f;
--ss-paper: #fbf8f3;
--ss-alt: #f5efe6;
--ss-white: #ffffff;
--ss-line: #ece5da;
--ss-line-2: #f0ece5;
--ss-muted: #6f6862;
--ss-label: #8a8178;
--ss-accent: #F49C27;
--ss-accent-link: #e08a12;
--ss-accent-hover: #b76c08;
--ss-on-dark: #c8bfb2;
--ss-on-dark-2: #cdc5ba;
--ss-on-dark-muted: #9a9184;
--ss-wave-off-dark: #6b6355;
--ss-wave-off-light: #e0d6c6;
/* Typo */
--ss-font-display: "Space Grotesk", system-ui, sans-serif;
--ss-font-body: "Hanken Grotesk", system-ui, sans-serif;
/* Form */
--ss-radius-card: 16px;
--ss-radius-panel: 20px;
--ss-maxw: 1200px;
--ss-pad-x: 40px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ss-paper); color: var(--ss-ink); font-family: var(--ss-font-body); }
img { max-width: 100%; display: block; }
a { color: var(--ss-accent-link); text-decoration: none; }
a:hover { color: var(--ss-accent-hover); }
/* Layout ------------------------------------------------------------------ */
.ss-container { max-width: var(--ss-maxw); margin: 0 auto; padding-left: var(--ss-pad-x); padding-right: var(--ss-pad-x); }
.ss-section { padding-top: 80px; padding-bottom: 60px; }
.ss-section--alt { background: var(--ss-alt); }
.ss-h2 { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(26px, 4.6vw, 34px); letter-spacing: -0.01em; margin: 0 0 8px; }
.ss-lead { color: var(--ss-muted); font-size: 17px; line-height: 1.55; margin: 0 0 40px; }
.ss-center { text-align: center; }
.ss-center .ss-lead { margin-left: auto; margin-right: auto; }
/* Buttons / Pills --------------------------------------------------------- */
.ss-btn { display: inline-block; border-radius: 999px; font-weight: 700; font-size: 16px; padding: 15px 26px; cursor: pointer; border: 0; line-height: 1; text-align: center; }
.ss-btn--sm { font-size: 14px; padding: 11px 20px; }
.ss-btn--primary { background: var(--ss-accent); color: var(--ss-ink); }
.ss-btn--primary:hover { color: var(--ss-ink); filter: brightness(0.97); }
.ss-btn--dark { background: var(--ss-ink); color: var(--ss-paper); }
.ss-btn--dark:hover { color: var(--ss-paper); }
.ss-btn--light { background: var(--ss-paper); color: var(--ss-ink); }
.ss-btn--outline { border: 1.5px solid var(--ss-ink); color: var(--ss-ink); background: transparent; font-weight: 600; }
.ss-btn--outline-dark { border: 1px solid var(--ss-dark-border); color: var(--ss-paper); background: transparent; font-weight: 600; }
.ss-link-arrow { font-weight: 600; color: var(--ss-accent-link); }
/* Logo dots motif --------------------------------------------------------- */
.ss-dots { display: inline-flex; gap: 8px; margin-bottom: 26px; }
.ss-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--ss-accent); }
.ss-dot--o { background: transparent; border: 2px solid var(--ss-accent); }
/* Topbar / Header --------------------------------------------------------- */
.ss-topbar { background: var(--ss-dark); color: var(--ss-on-dark-2); font-size: 13px; }
.ss-topbar__inner { display: flex; justify-content: flex-end; gap: 20px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.ss-header { background: var(--ss-paper); border-bottom: 1px solid var(--ss-line); position: sticky; top: 0; z-index: 50; }
.ss-header__inner { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.ss-header__inner > a:first-child { flex: 0 1 286px; min-width: 0; }
/* Logo-PNG ist 330x30 (11:1). Breite vorgeben, Hoehe folgt - so bleibt das
Seitenverhaeltnis erhalten, auch wenn die Nav den Platz knapp macht. */
.ss-logo { width: 286px; height: auto; max-width: 100%; }
.ss-nav { display: flex; align-items: center; gap: 20px; font-weight: 500; font-size: 15px; color: #3b3630; }
.ss-nav__link { color: #3b3630; }
.ss-nav__link:hover { color: var(--ss-accent-hover); }
.ss-burger { display: none; width: 46px; height: 46px; border: 1px solid #e0d8cc; border-radius: 12px; align-items: center; justify-content: center; cursor: pointer; font-size: 22px; color: var(--ss-ink); background: transparent; }
.ss-mobilenav { display: none; flex-direction: column; gap: 4px; padding: 8px 0 22px; border-top: 1px solid var(--ss-line-2); }
.ss-mobilenav.is-open { display: flex; }
.ss-mobilenav__link { padding: 13px 4px; font-weight: 600; font-size: 17px; color: var(--ss-ink); border-bottom: 1px solid var(--ss-alt); }
/* Hero -------------------------------------------------------------------- */
.ss-hero { background: var(--ss-dark); color: var(--ss-paper); }
.ss-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding-top: 76px; padding-bottom: 84px; }
.ss-hero__title { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(34px, 7.5vw, 58px); line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 22px; }
.ss-hero__lead { font-size: clamp(17px, 2.4vw, 20px); line-height: 1.55; color: var(--ss-on-dark); margin: 0 0 34px; max-width: 480px; }
.ss-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* Player card ------------------------------------------------------------- */
.ss-player { background: var(--ss-dark-card); border: 1px solid var(--ss-dark-border); border-radius: var(--ss-radius-panel); padding: 24px; }
.ss-player--onlight { background: transparent; border: 0; padding: 0; }
.ss-player__row { display: flex; align-items: center; gap: 16px; }
.ss-player__thumb { width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0; background: repeating-linear-gradient(45deg,#3a342b,#3a342b 6px,#332e26 6px,#332e26 12px); }
.ss-player__meta { flex: 1; min-width: 0; }
.ss-player__name { font-family: var(--ss-font-display); font-weight: 700; font-size: 19px; }
.ss-player__sub { font-size: 14px; color: var(--ss-on-dark-muted); }
.ss-player__btn { width: 50px; height: 50px; border-radius: 50%; background: var(--ss-accent); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ss-player__btn::before { content: ""; width: 0; height: 0; border-left: 14px solid var(--ss-ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 3px; }
.ss-player__btn.is-playing::before { border: 0; width: 14px; height: 14px; margin: 0; background:
linear-gradient(var(--ss-ink),var(--ss-ink)) left/4px 100% no-repeat,
linear-gradient(var(--ss-ink),var(--ss-ink)) right/4px 100% no-repeat; }
.ss-wave { display: flex; align-items: center; gap: 3px; height: 44px; margin: 24px 2px 8px; }
.ss-wave__bar { flex: 1; border-radius: 2px; background: var(--ss-wave-off-dark); }
.ss-wave__bar--on { background: var(--ss-accent); }
.ss-player__time { display: flex; justify-content: space-between; font-size: 12px; color: var(--ss-on-dark-muted); }
/* Fortschritts-Ring um den Play-Button */
.ss-player__wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.ss-ring { position: absolute; top: -5px; left: -5px; transform: rotate(-90deg); pointer-events: none; }
.ss-ring__track { stroke: rgba(244,156,39,0.25); }
.ss-ring__bar { stroke: var(--ss-accent); stroke-linecap: round; stroke-dashoffset: 999; transition: stroke-dashoffset 0.12s linear; }
/* Live-Waveform (Equalizer während der Wiedergabe) */
@keyframes ssEq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.ss-wave.is-live > .ss-wave__bar { transform-origin: center bottom; animation: ssEq 0.9s ease-in-out infinite; }
.ss-wave.is-live > .ss-wave__bar:nth-child(2n) { animation-duration: 0.7s; }
.ss-wave.is-live > .ss-wave__bar:nth-child(3n) { animation-duration: 1.15s; }
.ss-wave.is-live > .ss-wave__bar:nth-child(4n) { animation-duration: 0.85s; }
/* Audio-reaktiv: JS steuert die Balken aus den echten Frequenzen -> CSS-Loop aus,
weiche Uebergaenge. (is-audio wird beim Abspielen per JS gesetzt.) */
.ss-wave.is-audio > .ss-wave__bar { animation: none; transform-origin: center bottom; transition: transform 0.07s linear; }
/* „Mehr hören?"-Hinweis am Ende der Probe */
.ss-card__hint { display: none; margin-top: 12px; align-items: center; gap: 8px; font-size: 12px; color: var(--ss-label); }
.ss-card__hint.is-visible { display: flex; }
.ss-card__hint b { background: var(--ss-accent); color: var(--ss-ink); font-weight: 700; padding: 4px 10px; border-radius: 999px; }
/* Trust bar --------------------------------------------------------------- */
.ss-trust { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ss-paper); border-bottom: 1px solid var(--ss-line); }
.ss-trust__item { padding: 30px; text-align: center; border-right: 1px solid var(--ss-line); }
.ss-trust__item:last-child { border-right: 0; }
.ss-trust__num { font-family: var(--ss-font-display); font-weight: 700; font-size: 32px; }
.ss-trust__label { font-size: 14px; color: var(--ss-label); margin-top: 2px; }
/* Generic auto-fit card grid --------------------------------------------- */
.ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--ss-grid-min, 230px), 1fr)); gap: 18px; }
.ss-grid--steps { --ss-grid-min: 260px; gap: 22px; }
.ss-grid--blog { --ss-grid-min: 280px; gap: 22px; }
/* Steps ------------------------------------------------------------------- */
.ss-step { background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: var(--ss-radius-card); padding: 32px; }
.ss-step--dark { background: var(--ss-dark); color: var(--ss-paper); border: 0; }
.ss-step__num { font-family: var(--ss-font-display); font-weight: 700; color: var(--ss-accent); font-size: 15px; }
.ss-step__title { font-family: var(--ss-font-display); font-weight: 700; font-size: 21px; margin: 8px 0 10px; }
.ss-step__text { margin: 0; color: var(--ss-muted); font-size: 15px; line-height: 1.6; }
.ss-step--dark .ss-step__text { color: var(--ss-on-dark-2); margin-bottom: 18px; }
/* FAQ --------------------------------------------------------------------- */
.ss-faq { background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: var(--ss-radius-card); padding: 6px 28px; max-width: 900px; margin: 0 auto; }
.ss-faq__item { border-bottom: 1px solid var(--ss-line-2); }
.ss-faq__item:last-child { border-bottom: 0; }
.ss-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 2px; cursor: pointer; width: 100%; background: transparent; border: 0; text-align: left; font-family: var(--ss-font-display); font-weight: 600; font-size: 18px; color: var(--ss-ink); }
.ss-faq__icon { font-size: 26px; line-height: 1; color: #b5aa9c; flex-shrink: 0; }
.ss-faq__item.is-open .ss-faq__icon { color: var(--ss-accent); }
.ss-faq__item.is-open .ss-faq__icon::before { content: "–"; }
.ss-faq__icon::before { content: "+"; }
.ss-faq__a { margin: 0; padding: 0 2px 24px; color: var(--ss-muted); font-size: 16px; line-height: 1.65; display: none; }
.ss-faq__item.is-open .ss-faq__a { display: block; }
/* Services ---------------------------------------------------------------- */
.ss-service { border: 1px solid var(--ss-line); border-radius: var(--ss-radius-card); padding: 32px; background: var(--ss-white); }
.ss-service__title { font-family: var(--ss-font-display); font-weight: 700; font-size: 21px; margin-bottom: 10px; }
.ss-service__text { margin: 0 0 16px; color: var(--ss-muted); font-size: 15px; line-height: 1.6; }
/* Media placeholder (ersetzen durch echte Bilder) ------------------------- */
.ss-ph { background: repeating-linear-gradient(45deg,#efe7db,#efe7db 9px,#e7ded0 9px,#e7ded0 18px); display: flex; align-items: flex-end; padding: 12px; }
.ss-ph--square { aspect-ratio: 1 / 1; }
.ss-ph--16x9 { aspect-ratio: 16 / 9; }
.ss-ph__label { font-family: ui-monospace, monospace; font-size: 11px; color: #a89a86; }
/* Speaker card ------------------------------------------------------------ */
.ss-card { background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: var(--ss-radius-card); overflow: hidden; color: inherit; }
.ss-card[data-href]:not([data-href=""]) { cursor: pointer; }
.ss-card__body { padding: 16px 16px 18px; }
.ss-card__name { font-family: var(--ss-font-display); font-weight: 700; font-size: 17px; }
.ss-card__namelink { color: inherit; text-decoration: none; }
.ss-card__namelink:hover { text-decoration: underline; }
.ss-card__meta { font-size: 13px; color: var(--ss-label); margin-bottom: 14px; }
.ss-card__player { display: flex; align-items: center; gap: 12px; }
.ss-card .ss-player__btn { width: 38px; height: 38px; }
.ss-card .ss-player__btn::before { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; margin-left: 2px; }
.ss-card .ss-wave { flex: 1; min-width: 0; height: 22px; margin: 0; gap: 2px; }
.ss-card .ss-wave__bar { background: var(--ss-wave-off-light); }
.ss-card .ss-wave__bar--on { background: var(--ss-accent); }
/* Merkliste: Herz-Button auf den Karten ----------------------------------- */
.ss-card__media { position: relative; }
.ss-fav { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(251,248,243,0.94); cursor: pointer; box-shadow: 0 2px 8px rgba(28,26,23,0.2); background-repeat: no-repeat; background-position: center; background-size: 17px 17px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231c1a17' stroke-width='2'%3E%3Cpath d='M12 21s-7.5-4.8-9.7-9.2C.9 8.6 2.3 5.5 5.3 5.1 7.2 4.8 9 5.9 12 8.6c3-2.7 4.8-3.8 6.7-3.5 3 .4 4.4 3.5 3 6.7C19.5 16.2 12 21 12 21z'/%3E%3C/svg%3E"); }
.ss-fav.is-saved { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23F49C27'%3E%3Cpath d='M12 21s-7.5-4.8-9.7-9.2C.9 8.6 2.3 5.5 5.3 5.1 7.2 4.8 9 5.9 12 8.6c3-2.7 4.8-3.8 6.7-3.5 3 .4 4.4 3.5 3 6.7C19.5 16.2 12 21 12 21z'/%3E%3C/svg%3E"); }
/* Schwebende Widgets (Merkliste + Kontakt) -------------------------------- */
.ss-fab { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.ss-fab__btn { display: flex; align-items: center; gap: 10px; width: 190px; box-sizing: border-box; font-family: var(--ss-font-body); font-weight: 700; font-size: 15px; padding: 14px 20px; border-radius: 999px; cursor: pointer; text-decoration: none; }
.ss-fab__btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.ss-fab__merk { border: 1px solid #e0d8cc; background: var(--ss-paper); color: var(--ss-ink); box-shadow: 0 10px 24px -14px rgba(28,26,23,0.22); }
.ss-fab__merk svg { fill: var(--ss-accent); stroke: var(--ss-accent); }
.ss-fab__contact { border: 1px solid transparent; background: var(--ss-accent); color: var(--ss-ink); box-shadow: 0 10px 24px -14px rgba(244,156,39,0.4); }
.ss-fab__count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ss-ink); color: var(--ss-paper); font-size: 12px; font-weight: 700; display: none; align-items: center; justify-content: center; }
.ss-fab__count.is-visible { display: inline-flex; }
/* Map --------------------------------------------------------------------- */
.ss-map { position: relative; border-radius: var(--ss-radius-panel); overflow: hidden; border: 1px solid var(--ss-line); background: #eef2f4; min-height: 460px; background-image: linear-gradient(#e4e9ec 1px, transparent 1px), linear-gradient(90deg, #e4e9ec 1px, transparent 1px); background-size: 46px 46px; }
.ss-map__land { position: absolute; inset: 0; background: radial-gradient(60% 70% at 42% 45%, #e7e2d6 0, #e7e2d6 55%, transparent 58%), radial-gradient(30% 40% at 68% 60%, #e7e2d6 0, #e7e2d6 60%, transparent 63%); }
.ss-map__search { position: absolute; top: 22px; left: 22px; z-index: 3; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e6ded1; border-radius: 999px; padding: 10px 18px; box-shadow: 0 10px 24px -16px rgba(28,26,23,.5); color: #9a9084; font-size: 14px; }
.ss-map__callout { position: absolute; left: 46%; top: 30%; z-index: 3; transform: translate(-50%, -140%); background: #fff; border: 1px solid #e6ded1; border-radius: 12px; padding: 10px 14px; box-shadow: 0 12px 28px -14px rgba(28,26,23,.55); white-space: nowrap; }
.ss-map__callout b { font-family: var(--ss-font-display); font-size: 14px; display: block; }
.ss-map__callout span { font-size: 12px; color: var(--ss-label); }
.ss-map__pin { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: var(--ss-accent); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25); z-index: 2; }
.ss-map__consent { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; background: rgba(33,29,24,.9); color: var(--ss-paper); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; flex-wrap: wrap; }
.ss-map__consent small { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; color: #f0d9b8; }
.ss-map__attr { position: absolute; bottom: 60px; left: 12px; z-index: 5; font-size: 11px; color: var(--ss-label); }
.ss-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 6; }
/* Uses -------------------------------------------------------------------- */
.ss-uses { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 20px; }
.ss-use { background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: var(--ss-radius-card); padding: 34px; display: flex; flex-direction: column; justify-content: space-between; }
.ss-use--feature { background: var(--ss-dark); color: var(--ss-paper); border: 0; min-height: 220px; }
.ss-use__title { font-family: var(--ss-font-display); font-weight: 700; font-size: 21px; margin-bottom: 10px; }
.ss-use--feature .ss-use__title { font-size: 24px; }
.ss-use__text { margin: 0; color: var(--ss-muted); font-size: 15px; line-height: 1.6; }
.ss-use--feature .ss-use__text { color: var(--ss-on-dark); max-width: 460px; }
/* Blog -------------------------------------------------------------------- */
.ss-post { background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: var(--ss-radius-card); overflow: hidden; }
.ss-post__body { padding: 22px; }
.ss-post__meta { font-size: 13px; color: var(--ss-label); margin-bottom: 8px; }
.ss-post__title { font-family: var(--ss-font-display); font-weight: 700; font-size: 19px; margin-bottom: 10px; }
.ss-post__excerpt { margin: 0 0 14px; color: var(--ss-muted); font-size: 15px; line-height: 1.6; }
/* Known voices eyebrow ---------------------------------------------------- */
.ss-eyebrow { font-family: var(--ss-font-display); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-accent); margin-bottom: 10px; }
/* Contact CTA ------------------------------------------------------------- */
.ss-cta { background: var(--ss-accent); border-radius: var(--ss-radius-panel); padding: clamp(32px, 5vw, 52px); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.ss-cta__title { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(24px, 4vw, 30px); color: var(--ss-ink); margin-bottom: 8px; }
.ss-cta__text { margin: 0; color: #4a3a1a; font-size: 17px; line-height: 1.5; max-width: 520px; }
.ss-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* Footer ------------------------------------------------------------------ */
.ss-footer { background: var(--ss-dark); color: var(--ss-on-dark-2); }
.ss-footer__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-top: 60px; padding-bottom: 40px; }
.ss-footer__logo { height: 24px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.ss-footer address { font-style: normal; margin: 20px 0 0; font-size: 14px; line-height: 1.7; }
.ss-footer address a { color: var(--ss-on-dark-2); }
.ss-footer address a:hover { color: var(--ss-paper); }
.ss-social { display: flex; gap: 10px; margin-top: 20px; }
.ss-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ss-dark-border); display: inline-flex; align-items: center; justify-content: center; color: var(--ss-on-dark-2); transition: color .15s, border-color .15s; }
.ss-social a:hover { color: var(--ss-accent); border-color: var(--ss-accent); }
.ss-social svg { width: 17px; height: 17px; }
.ss-foot__title { font-family: var(--ss-font-display); font-weight: 600; color: var(--ss-paper); font-size: 15px; margin-bottom: 16px; }
.ss-foot__title a { color: inherit; }
.ss-foot__title a:hover { color: var(--ss-accent); }
.ss-foot__links { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.ss-foot__links a { color: var(--ss-on-dark-2); }
.ss-foot__links a:hover { color: var(--ss-paper); }
/* Sprecher nach Sprache: eine Zeile ueber dem Copyright, damit die Spalten
oben schlank bleiben. Vollstaendige Liste liegt auf der Uebersichtsseite. */
.ss-footlang { border-top: 1px solid #35302a; }
.ss-footlang__inner { padding-top: 26px; padding-bottom: 26px; }
.ss-footlang__list { display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: 13.5px; }
.ss-footlang__link { color: var(--ss-label); border: 1px solid var(--ss-dark-border); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.ss-footlang__link:hover { color: var(--ss-paper); border-color: var(--ss-paper); }
.ss-footlang__all { color: var(--ss-accent); padding: 4px 2px; white-space: nowrap; }
.ss-footlang__all:hover { text-decoration: underline; }
.ss-copy { border-top: 1px solid #35302a; }
.ss-copy__inner { padding-top: 20px; padding-bottom: 20px; font-size: 13px; color: var(--ss-label); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.ss-copy__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ss-copy__meta a { color: var(--ss-label); }
.ss-copy__meta a:hover { color: var(--ss-paper); }
/* Login-Modal (felogin) -----------------------------------------------------
Das felogin-Template bringt neutrales Markup (fieldset/legend/label) plus
Bootstrap-Klassen mit, die im Redesign nicht geladen werden - deshalb hier
eigene Regeln statt Anpassungen am felogin-Template. */
.ss-login fieldset { border: 0; margin: 0; padding: 0; }
.ss-login legend { display: none; }
.ss-login label { display: block; font-size: 14px; color: var(--ss-muted); margin-bottom: 14px; }
.ss-login input[type="text"],
.ss-login input[type="email"],
.ss-login input[type="password"] { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid var(--ss-line); border-radius: 10px; font: inherit; font-size: 15px; background: var(--ss-paper); color: var(--ss-ink); }
.ss-login input:focus { outline: 2px solid var(--ss-accent); outline-offset: 1px; border-color: transparent; }
.ss-login button[type="submit"],
.ss-login input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border: 0; border-radius: 999px; background: var(--ss-accent); color: var(--ss-ink); font: inherit; font-weight: 600; cursor: pointer; }
.ss-login button[type="submit"]:hover,
.ss-login input[type="submit"]:hover { filter: brightness(1.05); }
.ss-login a { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--ss-muted); text-decoration: underline; }
.ss-login a:hover { color: var(--ss-ink); }
/* Fallback fuer noch nicht migrierte Seiten ---------------------------------
Greift ueber .ss-legacy auf alles, was in der Redesign-Huelle mit Alt-Markup
oder roher Plugin-Ausgabe landet: Ueberschriften, Fliesstext, Listen,
Tabellen und Formularfelder bekommen die Redesign-Typografie statt des
Browser-Defaults.
Nur fuer ROHES Alt-Markup: Elemente mit eigener ss-/ce-Klasse und alles
innerhalb einer Redesign-Komponente (Element mit ss-Klasse innerhalb der
Huelle) sind ausgenommen. Dazu :where() -> Spezifitaet 0,0,1, jede
Komponenten-Regel gewinnt. Sonst ueberschreibt der Fallback Hintergruende,
Unterstreichungen, Textfarben auf dunklen Heros usw. (25.09.2026). */
.ss-legacy { color: var(--ss-ink); }
:where(.ss-legacy) h1:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; margin: 0 0 18px; }
:where(.ss-legacy) h2:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(21px, 3vw, 27px); line-height: 1.25; margin: 34px 0 14px; }
:where(.ss-legacy) h3:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) { font-family: var(--ss-font-display); font-weight: 600; font-size: 19px; margin: 26px 0 10px; }
:where(.ss-legacy) p:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) { margin: 0 0 16px; line-height: 1.7; color: var(--ss-muted); }
:where(.ss-legacy) ul:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)), :where(.ss-legacy) ol:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) { margin: 0 0 18px; padding-left: 22px; line-height: 1.7; color: var(--ss-muted); }
:where(.ss-legacy) li:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) { margin-bottom: 7px; }
:where(.ss-legacy) a:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) { color: #b4670c; text-decoration: underline; text-underline-offset: 2px; }
:where(.ss-legacy) a:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)):hover { text-decoration: none; }
:where(.ss-legacy) img:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) { max-width: 100%; height: auto; }
:where(.ss-legacy) table:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
:where(.ss-legacy) th:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)), :where(.ss-legacy) td:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--ss-line); }
:where(.ss-legacy) th:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) { font-weight: 600; }
:where(.ss-legacy) input[type="text"]:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)), :where(.ss-legacy) input[type="email"]:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)), :where(.ss-legacy) input[type="tel"]:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)), :where(.ss-legacy) input[type="password"]:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)), :where(.ss-legacy) textarea:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)), :where(.ss-legacy) select:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) {
padding: 10px 12px; border: 1px solid var(--ss-line); border-radius: 10px; font: inherit;
font-size: 15px; background: var(--ss-paper); color: var(--ss-ink); max-width: 100%; }
:where(.ss-legacy) button:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)), :where(.ss-legacy) input[type="submit"]:where(:not([class*="ss-"], [class*="ce-"], .ss-legacy [class*="ss-"]:not(.ss-legacy, .ss-section, [class="ss-container"]) *)) {
padding: 10px 20px; border: 0; border-radius: 999px; background: var(--ss-accent);
color: var(--ss-ink); font: inherit; font-weight: 600; cursor: pointer; }
/* Sprecherliste (HTML-Sitemap ueber alle aktiven Sprecher) ------------------- */
.ss-artistlist { columns: 4; column-gap: 30px; margin-top: 6px; }
.ss-artistlist a { display: block; break-inside: avoid; padding: 5px 0; font-size: 15px; color: var(--ss-ink); text-decoration: none; }
.ss-artistlist a:hover { color: var(--ss-accent-dark, #b4670c); text-decoration: underline; text-underline-offset: 2px; }
.ss-artistlist__count { color: var(--ss-label); font-size: 14px; margin-bottom: 22px; }
/* Responsive -------------------------------------------------------------- */
@media (max-width: 1100px) {
.ss-nav { gap: 18px; font-size: 14px; }
}
@media (max-width: 960px) {
.ss-artistlist { columns: 3; }
.ss-nav { display: none; }
.ss-burger { display: inline-flex; }
.ss-hero__inner { grid-template-columns: 1fr; padding-top: 44px; padding-bottom: 52px; gap: 30px; }
.ss-uses { grid-template-columns: 1fr 1fr; }
.ss-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
}
@media (max-width: 720px) {
.ss-artistlist { columns: 2; }
.ss-trust { grid-template-columns: repeat(2, 1fr); }
.ss-uses { grid-template-columns: 1fr; }
.ss-footer__inner { grid-template-columns: 1fr 1fr; }
.ss-foot__brand { grid-column: 1 / -1; }
.ss-copy__inner { justify-content: flex-start; }
.ss-cta { flex-direction: column; align-items: flex-start; }
.ss-cta__btns { width: 100%; }
.ss-section { padding-top: 52px; padding-bottom: 48px; }
}
@media (max-width: 600px) {
:root { --ss-pad-x: 20px; }
.ss-topbar { display: none; }
.ss-map__callout { display: none; }
}
@media (max-width: 440px) {
.ss-artistlist { columns: 1; }
.ss-trust { grid-template-columns: 1fr; }
}
/* Sprecher-/Stimmen-Fotos einheitlich schwarz-weiss (Redesign-Editorial-Look). */
.ss-card img.ss-ph--square { filter: grayscale(1); }
.ss-player__thumb { filter: grayscale(1); }
/* === Kategorie-/Einsatzzweck-Seiten (Konsistenz-Handoff) === */
/* Breadcrumb ------------------------------------------------------------- */
.ss-breadcrumb { font-size: 13px; color: #9a9184; margin-bottom: 18px; }
.ss-breadcrumb a { color: #9a9184; }
.ss-breadcrumb span { color: var(--ss-paper); }
/* Kategorie-Karten (Einsatzzwecke-Übersicht) ----------------------------- */
.ss-grid--cats { --ss-grid-min: 240px; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ss-cat { background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; color: var(--ss-ink); transition: transform .15s, box-shadow .15s, border-color .15s; }
.ss-cat:hover { border-color: #e0d8cc; box-shadow: 0 18px 40px -24px rgba(28,26,23,0.45); transform: translateY(-2px); }
.ss-cat--feature { grid-column: span 2; background: var(--ss-dark); color: var(--ss-paper); border-color: var(--ss-dark); justify-content: space-between; min-height: 260px; padding: 34px; }
.ss-cat__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--ss-dark-card); border: 1px solid var(--ss-dark-border); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #f0d9b8; margin-bottom: 16px; }
.ss-cat__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--ss-alt); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.ss-cat__title { font-family: var(--ss-font-display); font-weight: 700; font-size: 19px; margin-bottom: 8px; }
.ss-cat__title--lg { font-size: 26px; margin-bottom: 10px; }
.ss-cat__text { margin: 0 0 18px; color: var(--ss-muted); font-size: 15px; line-height: 1.6; }
.ss-cat--feature .ss-cat__text { color: var(--ss-on-dark); max-width: 560px; }
/* Kategorie-Detail: Filterleiste + Ergebnis-Zeilenkarten ------------------ */
.ss-filterbar-wrap { background: var(--ss-paper); border-bottom: 1px solid var(--ss-line); position: sticky; top: 75px; z-index: 40; }
.ss-filterbar { display: flex; align-items: center; gap: 12px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
.ss-filterbar__count { font-family: var(--ss-font-display); font-weight: 700; font-size: 16px; }
.ss-select { border: 1px solid #e6ded1; border-radius: 10px; padding: 10px 14px; font-size: 14px; background: #fff; cursor: pointer; }
.ss-seg { display: flex; gap: 4px; background: #fff; border: 1px solid #e6ded1; border-radius: 10px; padding: 3px; }
.ss-seg__item { font-size: 14px; padding: 7px 14px; border-radius: 8px; color: #3b3630; cursor: pointer; }
.ss-seg__item.is-active { background: var(--ss-ink); color: var(--ss-paper); }
.ss-results { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ss-card--row { display: flex; }
.ss-card--row .ss-card__photo { width: 132px; flex-shrink: 0; position: relative; display: flex; align-items: flex-end; padding: 12px; background: repeating-linear-gradient(45deg,#efe7db,#efe7db 9px,#e7ded0 9px,#e7ded0 18px); }
.ss-fav--onphoto { position: absolute; top: 10px; left: 10px; width: 32px; height: 32px; }
.ss-card__row-body { flex: 1; min-width: 0; padding: 16px 18px; }
.ss-card__bio { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--ss-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ss-card__sample { font-size: 12px; color: #b5aa9c; white-space: nowrap; }
.ss-loadmore__count { font-size: 13px; color: var(--ss-label); margin-bottom: 12px; }
.ss-loadmore-wrap { display: flex; justify-content: center; margin: 34px 0 8px; }
.ss-loadmore-btn { font-family: var(--ss-font-display); font-weight: 700; font-size: 15px; color: var(--ss-ink); background: var(--ss-white); border: 1px solid #e0d8cc; border-radius: 999px; padding: 13px 34px; cursor: pointer; transition: background .15s, border-color .15s, transform .05s; }
.ss-loadmore-btn:hover { background: var(--ss-alt); border-color: #d3c8b8; }
.ss-loadmore-btn:active { transform: translateY(1px); }
.ss-loadmore.is-loading:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--ss-label); padding: 13px 0; }
.ss-loadmore[hidden] { display: none; }
.ss-loadmore__dots { display: inline-flex; gap: 5px; }
.ss-loadmore__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--ss-accent); animation: ssLoadDot 1s infinite ease-in-out both; }
.ss-loadmore__dots span:nth-child(2) { animation-delay: .16s; }
.ss-loadmore__dots span:nth-child(3) { animation-delay: .32s; }
@keyframes ssLoadDot { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.ss-sentinel { height: 1px; width: 100%; }
@media (max-width: 760px) { .ss-results { grid-template-columns: 1fr; } .ss-grid--cats { grid-template-columns: 1fr 1fr; } .ss-cat--feature { grid-column: span 2; } }
@media (max-width: 560px) { .ss-grid--cats { grid-template-columns: 1fr; } .ss-cat--feature { grid-column: span 1; } .ss-card--row { flex-direction: column; } .ss-card--row .ss-card__photo { width: 100%; aspect-ratio: 16/10; } }
/* === Navigations-Dropdowns (Redesign, wie echte Seite) === */
.ss-nav__item--sub { position: relative; display: inline-flex; align-items: center; }
.ss-nav__item--sub > .ss-nav__link { display: inline-flex; align-items: center; gap: 6px; }
.ss-nav__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .65; transition: transform .15s; }
.ss-nav__item--sub:hover .ss-nav__caret, .ss-nav__item--sub:focus-within .ss-nav__caret { transform: rotate(180deg); }
.ss-submenu { position: absolute; top: 100%; left: 0; min-width: 210px; background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: 12px; box-shadow: 0 18px 40px -20px rgba(28,26,23,.35); padding: 8px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; }
.ss-nav__item--sub:hover .ss-submenu, .ss-nav__item--sub:focus-within .ss-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.ss-submenu__link { padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #3b3630; white-space: nowrap; text-decoration: none; }
.ss-submenu__link:hover, .ss-submenu__link.is-active { background: var(--ss-alt); color: var(--ss-ink); }
.ss-nav__item--sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }
/* Mobile-Dropdowns (Accordion) */
.ss-mobilenav__group { border-bottom: 1px solid var(--ss-alt); }
.ss-mobilenav__row { display: flex; align-items: center; justify-content: space-between; }
.ss-mobilenav__group .ss-mobilenav__link { flex: 1; border-bottom: 0; }
.ss-mobilenav__toggle { width: 44px; height: 44px; flex-shrink: 0; background: transparent; border: 0; cursor: pointer; position: relative; }
.ss-mobilenav__toggle::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--ss-ink); transition: transform .15s; }
.ss-mobilenav__toggle[aria-expanded="true"]::before { transform: rotate(180deg); }
.ss-mobilenav__sub { display: none; flex-direction: column; padding: 2px 0 10px 14px; }
.ss-mobilenav__sub.is-open { display: flex; }
.ss-mobilenav__sublink { padding: 10px 4px; font-size: 15px; color: #4a443c; text-decoration: none; }
.ss-mobilenav__sublink:hover, .ss-mobilenav__sublink.is-active { color: var(--ss-accent-hover); }
/* === Merkliste-Icon im Header (Design-Referenz) === */
.ss-iconbtn { position: relative; width: 42px; height: 42px; border: 1px solid #e0d8cc; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--ss-ink); background: transparent; transition: background .15s; flex-shrink: 0; }
.ss-iconbtn:hover { background: #f2ede6; }
.ss-iconbtn svg { width: 19px; height: 19px; }
.ss-iconbtn__count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--ss-accent); color: var(--ss-ink); font-size: 11px; font-weight: 700; display: none; align-items: center; justify-content: center; }
.ss-iconbtn__count.is-visible { display: inline-flex; }
/* === Kontakt-Modal (weiches Einblenden) === */
.ss-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 20px 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.ss-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.ss-modal__overlay { position: absolute; inset: 0; background: rgba(28,26,23,0.55); }
.ss-modal__card { position: relative; width: 100%; max-width: 460px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -25px rgba(0,0,0,0.55); max-height: 88vh; overflow-y: auto; transform: translateY(12px) scale(.985); transition: transform .24s cubic-bezier(.2,.7,.3,1); }
.ss-modal.is-open .ss-modal__card { transform: none; }
.ss-modal__head { background: var(--ss-accent); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; }
.ss-modal__title { font-family: var(--ss-font-display); font-weight: 700; font-size: 20px; color: var(--ss-ink); }
.ss-modal__close { background: transparent; border: 0; cursor: pointer; color: var(--ss-ink); font-size: 20px; line-height: 1; padding: 0; }
.ss-modal__body { padding: 24px; }
.ss-contact__row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--ss-line); border-radius: 12px; padding: 15px 18px; color: var(--ss-ink); margin-bottom: 12px; text-decoration: none; }
.ss-contact__row--phone { border-color: var(--ss-accent); }
.ss-contact__row small { color: #6f6862; font-size: 14px; }
.ss-contact__row b { font-family: var(--ss-font-display); font-size: 16px; }
.ss-contact__icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ss-contact__icon--accent { background: var(--ss-accent); }
.ss-contact__icon--dark { background: #211d18; }
.ss-contact__form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ss-contact__form input, .ss-contact__form textarea { border: 1px solid #e6ded1; border-radius: 10px; padding: 13px 14px; font-size: 15px; font-family: var(--ss-font-body); color: var(--ss-ink); }
.ss-contact__form textarea { resize: vertical; }
.ss-contact__consent { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: #6f6862; line-height: 1.5; margin: 2px 0; }
.ss-contact__submit { width: 100%; margin-top: 4px; }
body.ss-modal-open { overflow: hidden; }
/* === Section-Badge (Pill, wie Design – nicht klickbar) === */
.ss-tag { display: inline-block; background: var(--ss-accent); color: var(--ss-ink); font-weight: 700; font-size: 13px; line-height: 1; padding: 6px 14px; border-radius: 999px; }
/* Nav einzeilig halten (kein Umbruch bei "Für Sprecher") */
.ss-nav__link { white-space: nowrap; }
/* === Sprecher-Detailseite: Profil-Hero (Redesign) === */
.ss-psection { padding-top: 28px; padding-bottom: 48px; }
.ss-breadcrumb--light, .ss-breadcrumb--light a { color: var(--ss-label); }
.ss-breadcrumb--light span { color: var(--ss-ink); }
.ss-legacy-crumb { margin: 0 0 22px; }
.ss-legacy-crumb a { text-decoration: none; }
.ss-legacy-crumb a:hover { color: var(--ss-ink); }
.ss-crumbsep { font-style: normal; margin: 0 7px; color: var(--ss-label); }
/* Seiten mit eigenem Hero-Brotkrumen (z.B. Online-Bewerbung) -> Alt-Ersatz ausblenden */
.ss-container:has(> .ss-legacy-crumb):has([class*="crumb"]:not(.ss-legacy-crumb, .ss-legacy-crumb *)) > .ss-legacy-crumb { display: none; }
.ss-phero { display: grid; grid-template-columns: 340px 1fr; gap: 44px; align-items: start; }
.ss-phero__photo { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--ss-line); aspect-ratio: 1/1; }
.ss-phero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-fav--lg { top: 14px; right: 14px; width: 40px; height: 40px; }
.ss-phero__actions { display: flex; gap: 10px; margin-top: 14px; }
.ss-phero__actions .ss-btn { flex: 1; padding: 14px; font-size: 15px; }
.ss-phero__save { cursor: pointer; }
.ss-phero__badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ss-badge { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; line-height: 1; }
.ss-badge--dark { background: var(--ss-dark); color: var(--ss-paper); }
.ss-badge--soft { background: var(--ss-alt); color: var(--ss-muted); font-weight: 600; }
.ss-phero__name { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(32px, 5vw, 46px); letter-spacing: -0.02em; margin: 0 0 6px; }
.ss-phero__lead { font-size: 18px; color: var(--ss-muted); line-height: 1.55; margin: 0 0 26px; max-width: 620px; }
.ss-pmeta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ss-line); border: 1px solid var(--ss-line); border-radius: 14px; overflow: hidden; }
.ss-pmeta__item { background: #fff; padding: 18px 20px; }
.ss-pmeta__label { font-size: 12px; color: var(--ss-label); text-transform: uppercase; letter-spacing: .06em; }
.ss-pmeta__val { font-family: var(--ss-font-display); font-weight: 700; font-size: 17px; margin-top: 3px; }
/* "Passt zu" – distinkte Sprachproben-Kategorien im Profil-Hero */
.ss-ptags { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.ss-ptags__label { color: var(--ss-label); font-size: 15px; padding-top: 9px; flex: 0 0 auto; }
.ss-ptags__list { display: flex; flex-wrap: wrap; gap: 12px; }
.ss-ptag { display: inline-block; background: var(--ss-paper); border: 1px solid var(--ss-line); color: var(--ss-ink); font-family: var(--ss-font-display); font-size: 16px; line-height: 1; padding: 11px 20px; border-radius: 999px; }
/* Sprachumschalter (Topbar) – wie echte Seite, aktive Sprache markiert */
.ss-lang { color: var(--ss-accent); text-decoration: none; }
.ss-lang:hover { color: var(--ss-accent-hover); text-decoration: underline; }
.ss-lang--active { color: var(--ss-on-dark); font-weight: 600; }
/* Hörproben – dunkle Sektion nach reference/Sprecherprofil.dc.html */
.ss-samplesec { background: #211d18; color: #fbf8f3; }
.ss-samplesec .ss-container { padding-top: 76px; padding-bottom: 56px; }
.ss-samplesec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ss-samplesec__title { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(24px, 4vw, 30px); margin: 0; }
.ss-samplesec__count { font-size: 14px; color: #9a9184; }
.ss-samplesec__sub { color: #c8bfb2; font-size: 15px; margin: 0 0 22px; max-width: 560px; }
.ss-samplefilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ss-samplepill { font-family: inherit; font-size: 14px; padding: 8px 16px; border-radius: 999px; background: transparent; border: 1px solid #4a443b; color: #cdc5ba; cursor: pointer; }
.ss-samplepill:hover { border-color: #6a6154; color: #fbf8f3; }
.ss-samplepill.is-active { background: var(--ss-accent); color: #1c1a17; font-weight: 700; border-color: var(--ss-accent); }
.ss-samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.ss-samples--init > .ss-samplecard:nth-child(n+7) { display: none; }
.ss-samplecard { background: #2c2720; border: 1px solid #3d382f; border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 16px; }
.ss-samplecard[hidden] { display: none; }
.ss-samplecard .ss-player__wrap { flex-shrink: 0; }
.ss-samplecard .ss-ring { top: -7px; left: -7px; }
.ss-samplecard .ss-ring__track { stroke: rgba(244,156,39,0.28); }
.ss-samplecard .ss-player__btn { width: 46px; height: 46px; }
.ss-samplecard__text { flex: 1; min-width: 0; }
.ss-samplecard__title { font-family: var(--ss-font-display); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-samplecard__sub { font-size: 13px; color: #9a9184; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ss-samplecard .ss-wave { flex: 1; min-width: 0; height: 28px; margin: 0; gap: 3px; }
.ss-samplecard .ss-wave__bar { background: #5c554a; }
.ss-samplecard .ss-wave__bar--on { background: var(--ss-accent); }
.ss-samplecard__dur { font-size: 13px; color: #9a9184; white-space: nowrap; flex-shrink: 0; min-width: 30px; text-align: right; }
.ss-fav.ss-samplecard__fav { position: static; flex-shrink: 0; width: 36px; height: 36px; box-shadow: none; border: 1px solid #3d382f; background-color: transparent; background-size: 16px 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cdc5ba' stroke-width='2'%3E%3Cpath d='M12 21s-7.5-4.8-9.7-9.2C.9 8.6 2.3 5.5 5.3 5.1 7.2 4.8 9 5.9 12 8.6c3-2.7 4.8-3.8 6.7-3.5 3 .4 4.4 3.5 3 6.7C19.5 16.2 12 21 12 21z'/%3E%3C/svg%3E"); }
.ss-fav.ss-samplecard__fav.is-saved { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23F49C27'%3E%3Cpath d='M12 21s-7.5-4.8-9.7-9.2C.9 8.6 2.3 5.5 5.3 5.1 7.2 4.8 9 5.9 12 8.6c3-2.7 4.8-3.8 6.7-3.5 3 .4 4.4 3.5 3 6.7C19.5 16.2 12 21 12 21z'/%3E%3C/svg%3E"); }
.ss-samplemore { text-align: center; margin-top: 26px; }
.ss-samplemore__btn { font-family: inherit; border: 1px solid #4a443b; color: #fbf8f3; font-weight: 600; font-size: 15px; padding: 13px 26px; border-radius: 999px; background: transparent; cursor: pointer; }
.ss-samplemore__btn:hover { border-color: #6a6154; }
/* "Über"-Sektion (Profiltext + Bekannte-Synchronstimme-Chips) */
.ss-bio-sec { padding-top: 52px; padding-bottom: 44px; }
.ss-bio { max-width: 780px; }
.ss-bio__title { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(22px, 3.4vw, 28px); margin: 0 0 14px; letter-spacing: -0.01em; }
.ss-bio__text p { font-size: 17px; line-height: 1.7; color: #4a443c; margin: 0 0 16px; }
.ss-bio__text p:last-child { margin-bottom: 0; }
.ss-bio__text a { color: var(--ss-accent-hover); text-decoration: underline; }
.ss-bio__dublabel { font-size: 13px; color: #8a8178; margin: 22px 0 10px; }
.ss-bio__dubs { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-dubchip { font-size: 14px; padding: 7px 15px; border: 1px solid #e6ded1; border-radius: 999px; color: #3b3630; font-weight: 500; text-decoration: none; }
.ss-dubchip:hover { border-color: var(--ss-accent); color: var(--ss-accent-hover); }
/* "Verfügbar / Karte" (Aufnahme-Karte + consent-gated Google Map) */
.ss-avail-sec { padding-bottom: 44px; }
.ss-avail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.ss-avail__card { background: #fff; border: 1px solid #ece5da; border-radius: 18px; padding: 32px; }
.ss-avail__eyebrow { font-size: 13px; color: #8a8178; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.ss-avail__title { font-family: var(--ss-font-display); font-weight: 700; font-size: 23px; margin: 0 0 20px; letter-spacing: -0.01em; }
.ss-avail__row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid #f0ece5; }
.ss-avail__icon { width: 44px; height: 44px; border-radius: 12px; background: #f5efe6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ss-avail__rowtitle { font-family: var(--ss-font-display); font-weight: 700; font-size: 16px; }
.ss-avail__rowtext { color: #6f6862; font-size: 14px; line-height: 1.5; }
.ss-avail__foot { padding-top: 16px; border-top: 1px solid #f0ece5; font-size: 14px; color: #6f6862; }
.ss-avail__foot b { color: #1c1a17; }
.ss-map { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid #ece5da; min-height: 260px; background: #eef2f4; background-image: linear-gradient(#e4e9ec 1px, transparent 1px), linear-gradient(90deg, #e4e9ec 1px, transparent 1px); background-size: 42px 42px; }
.ss-map__radial { position: absolute; inset: 0; background: radial-gradient(52% 62% at 50% 48%, #e7e2d6 0, #e7e2d6 58%, transparent 61%); }
.ss-map__pin { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--ss-accent); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
.ss-map__tip { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -150%); background: #fff; border: 1px solid #e6ded1; border-radius: 10px; padding: 8px 13px; box-shadow: 0 12px 28px -14px rgba(28,26,23,0.5); white-space: nowrap; text-align: center; }
.ss-map__tip b { font-family: var(--ss-font-display); font-size: 14px; }
.ss-map__tip span { font-size: 12px; color: #8a8178; }
.ss-map__bar { position: absolute; left: 16px; bottom: 16px; right: 16px; background: #fff; border: 1px solid #ece5da; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; box-shadow: 0 12px 28px -16px rgba(28,26,23,0.45); }
.ss-map__hint { font-size: 13px; color: #6f6862; }
.ss-map__load { background: var(--ss-accent); color: #1c1a17; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 999px; white-space: nowrap; cursor: pointer; }
.ss-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ss-map__canvas { position: absolute; inset: 0; display: none; }
.ss-map__towns { display: none; }
.ss-map--note { display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.ss-map__noteinner { max-width: 280px; }
.ss-map__noteinner b { display: block; font-family: var(--ss-font-display); font-size: 18px; color: #1c1a17; margin-bottom: 6px; }
.ss-map__noteinner span { font-size: 14px; color: #6f6862; line-height: 1.5; }
@media (max-width: 760px) { .ss-avail { grid-template-columns: 1fr; } }
/* "Weiter zur passenden Besetzung": Suchwidget + Rueckruf */
.ss-tools-sec { background: #f5efe6; }
.ss-tools-head { padding-top: 56px; padding-bottom: 8px; }
.ss-tools-head__title { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(22px, 3.4vw, 28px); margin: 0 0 6px; letter-spacing: -0.01em; }
.ss-tools-head__sub { margin: 0; color: #6f6862; font-size: 16px; max-width: 640px; }
.ss-tools { padding-top: 24px; padding-bottom: 56px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; }
.ss-swcard { background: #fff; border: 1px solid #ece5da; border-radius: 18px; padding: 30px; display: flex; flex-direction: column; }
.ss-swcard__badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; background: #f5efe6; color: #6f6862; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.ss-swcard__title { font-family: var(--ss-font-display); font-weight: 700; font-size: 20px; margin: 0 0 20px; }
.ss-swgroup__label { font-size: 13px; font-weight: 600; color: #8a8178; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.ss-swchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ss-swchip { font-size: 14px; padding: 7px 15px; border-radius: 999px; background: #fbf8f3; border: 1px solid #e6ded1; color: #3b3630; }
.ss-swchip.is-on { background: #211d18; color: #fbf8f3; border-color: #211d18; }
.ss-swchip { cursor: pointer; user-select: none; }
.ss-swchip:hover { border-color: #d9cdb9; }
.ss-swseg__opt { cursor: pointer; user-select: none; }
.ss-swseg { display: flex; gap: 8px; margin-bottom: 20px; }
.ss-swseg__opt { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; white-space: nowrap; text-align: center; font-size: 14px; padding: 9px; border-radius: 10px; background: #fbf8f3; border: 1px solid #e6ded1; color: #3b3630; }
.ss-swseg__opt.is-on { background: #1c1a17; color: #fbf8f3; border-color: #1c1a17; }
.ss-swsliders { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.ss-swslider__label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: #8a8178; margin-bottom: 10px; }
.ss-swslider__track { position: relative; height: 6px; background: #ece5da; border-radius: 999px; }
.ss-swslider__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ss-accent); border-radius: 999px; }
.ss-swslider__thumb { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ss-accent); }
.ss-swslider__ends { display: flex; justify-content: space-between; font-size: 12px; color: #8a8178; margin-top: 6px; }
/* Doppel-Range-Slider (Stimmenhoehe/Timbre -> "min,max") */
.ss-range { position: relative; height: 18px; margin: 4px 0; }
.ss-range__rail { position: absolute; top: 50%; left: 0; right: 0; height: 6px; transform: translateY(-50%); background: #f0e8dd; border-radius: 999px; }
.ss-range__fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #F49C27; border-radius: 999px; }
.ss-range__in { position: absolute; top: 0; left: 0; width: 100%; height: 18px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.ss-range__in:focus { outline: none; }
.ss-range__in::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; height: 18px; border: 0; }
.ss-range__in::-moz-range-track { background: transparent; height: 18px; border: 0; }
.ss-range__in::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ss-accent); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ss-range__in::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ss-accent); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
/* Umkreis: Ort-Feld + Radius-Slider */
.ss-swradius__input { border: 0; background: transparent; font-family: inherit; font-size: 15px; color: #1c1a17; width: 100%; min-width: 0; outline: none; padding: 0; }
.ss-swradius__input::placeholder { color: #8a8178; }
.ss-georadius { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: #ece5da; margin: 8px 0 22px; outline: none; cursor: pointer; }
.ss-georadius::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ss-accent); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ss-georadius::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ss-accent); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ss-swradius { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ss-swradius__city { flex: 1; display: flex; align-items: center; gap: 8px; background: #fbf8f3; border: 1px solid #e6ded1; border-radius: 10px; padding: 11px 14px; font-size: 15px; color: #1c1a17; }
.ss-swradius__km { font-size: 14px; font-weight: 700; color: #1c1a17; white-space: nowrap; }
.ss-swradius__track { margin-bottom: 22px; }
.ss-swsubmit { display: block; width: 100%; text-align: center; background: var(--ss-accent); color: #1c1a17; font-family: inherit; font-weight: 700; font-size: 16px; padding: 15px; border: 0; border-radius: 12px; cursor: pointer; margin-top: auto; text-decoration: none; }
.ss-swsubmit:hover { filter: brightness(0.97); }
/* Rueckruf */
.ss-tools__right { display: flex; flex-direction: column; }
.ss-callback { background: #211d18; color: #fbf8f3; border-radius: 18px; padding: 26px; }
.ss-callback__title { font-family: var(--ss-font-display); font-weight: 700; font-size: 18px; margin: 0 0 6px; }
.ss-callback__text { margin: 0 0 16px; color: #c8bfb2; font-size: 14px; line-height: 1.55; }
.ss-callback__phone { display: flex; align-items: center; gap: 12px; background: #2c2720; border: 1px solid #3d382f; border-radius: 12px; padding: 13px 16px; margin-bottom: 16px; color: #fbf8f3; text-decoration: none; }
.ss-callback__phoneicon { width: 36px; height: 36px; border-radius: 50%; background: var(--ss-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ss-callback__phone b { font-family: var(--ss-font-display); font-size: 16px; }
.ss-callback__phonesub { color: #9a9184; font-size: 13px; }
.ss-callback__or { display: flex; align-items: center; gap: 12px; color: #9a9184; font-size: 12px; margin-bottom: 16px; }
.ss-callback__or span { flex: 1; height: 1px; background: #3d382f; }
.ss-callback__form { display: flex; flex-direction: column; gap: 10px; }
.ss-callback__row { display: flex; gap: 10px; }
.ss-callback__input { flex: 1; min-width: 0; width: 100%; background: #2c2720; border: 1px solid #3d382f; border-radius: 10px; padding: 13px 14px; color: #fbf8f3; font-family: inherit; font-size: 15px; }
.ss-callback__input::placeholder { color: #8a8178; }
.ss-callback__consent { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: #9a9184; line-height: 1.5; margin-top: 2px; }
.ss-callback__consent input { margin-top: 2px; }
.ss-callback__submit { text-align: center; background: var(--ss-accent); color: #1c1a17; font-family: inherit; font-weight: 700; font-size: 15px; padding: 14px; border: 0; border-radius: 10px; cursor: pointer; margin-top: 4px; }
.ss-callback__hp { position: absolute !important; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
@media (max-width: 860px) { .ss-tools { grid-template-columns: 1fr; } }
/* Buchen-CTA */
.ss-buchen-sec { padding-top: 60px; padding-bottom: 60px; }
.ss-buchen { background: var(--ss-accent); border-radius: 20px; padding: clamp(32px, 5vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.ss-buchen__title { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(22px, 4vw, 28px); color: #1c1a17; margin-bottom: 6px; }
.ss-buchen__sub { margin: 0; color: #4a3a1a; font-size: 16px; line-height: 1.5; max-width: 520px; }
.ss-buchen__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ss-buchen__btn { font-family: inherit; font-weight: 700; font-size: 16px; padding: 15px 26px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; display: inline-block; }
.ss-buchen__btn--dark { background: #1c1a17; color: #fbf8f3; }
.ss-buchen__btn--light { background: #fbf8f3; color: #1c1a17; }
.ss-buchen__btn:hover { filter: brightness(0.95); }
/* Ähnliche Stimmen */
.ss-related-sec { padding-top: 10px; padding-bottom: 70px; }
.ss-related__title { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(24px, 4vw, 30px); margin: 0 0 26px; }
.ss-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ss-relcard { display: block; background: #fff; border: 1px solid #ece5da; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.ss-relcard:hover { border-color: #dccfbd; transform: translateY(-2px); }
.ss-relcard__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #efe7db; }
.ss-relcard__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
.ss-relcard__media .ss-ph { position: absolute; inset: 0; }
.ss-relcard__body { padding: 16px 16px 18px; }
.ss-relcard__name { font-family: var(--ss-font-display); font-weight: 700; font-size: 17px; color: #1c1a17; }
.ss-relcard__lang { font-size: 13px; color: #8a8178; margin-bottom: 12px; }
.ss-relcard__link { font-weight: 600; color: var(--ss-accent-hover); font-size: 14px; }
@media (max-width: 900px) { .ss-related { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ss-related { grid-template-columns: 1fr; } }
/* Suchergebnisse (Redesign) */
.ss-results-sec { padding-top: 30px; padding-bottom: 60px; }
.ss-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.ss-results__title { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(24px, 4vw, 32px); letter-spacing: -0.02em; margin: 0; }
.ss-results__count { color: var(--ss-accent); }
.ss-results__refine { font-weight: 600; color: var(--ss-accent-hover); font-size: 15px; text-decoration: none; white-space: nowrap; }
.ss-results__refine:hover { text-decoration: underline; }
.ss-results__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ss-results__filters:empty { display: none; }
.ss-fchip { font-size: 13px; padding: 6px 13px; border-radius: 999px; background: var(--ss-alt); color: var(--ss-muted); font-weight: 600; }
.ss-noresults { background: #fff; border: 1px solid var(--ss-line); border-radius: 16px; padding: 60px 30px; text-align: center; }
.ss-noresults__title { font-family: var(--ss-font-display); font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.ss-noresults__text { color: var(--ss-muted); margin: 0 0 18px; }
/* === Suchergebnis-Seite: 2-Spalten (Filter-Rail + Ergebnisse) === */
.ss-results-layout { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
.ss-results-main { min-width: 0; }
.ss-results__sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ss-muted); }
.ss-results__sort label { font-size: 14px; }
.ss-sortselect { border: 1px solid #e6ded1; border-radius: 10px; padding: 9px 30px 9px 12px; font-size: 14px; font-weight: 600; color: var(--ss-ink); background: #fff url("data:image/svg+xml;utf8,") no-repeat right 10px center; -webkit-appearance: none; appearance: none; cursor: pointer; }
/* Filter-Rail */
/* Filter-Rail ohne inneren Scrollbereich: alle Optionen stehen im normalen Seitenfluss,
die Aktionsleiste (Trefferzahl + Button) klebt unten im Viewport (sticky). */
.ss-rail { display: flex; flex-direction: column; }
.ss-namecard { flex: 0 0 auto; background: #fff; border: 1px solid #ece5da; border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.ss-namecard .ss-namesearch__hint { margin-top: 0; }
.ss-filtercard { flex: 1 1 auto; min-height: 0; background: #fff; border: 1px solid #ece5da; border-radius: 18px; padding: 0; display: flex; flex-direction: column; }
.ss-railform { display: flex; flex-direction: column; min-height: 0; }
.ss-railselect { width: 100%; border: 1px solid #e6ded1; border-radius: 10px; padding: 11px 32px 11px 12px; font-size: 15px; background: #fff url("data:image/svg+xml;utf8,") no-repeat right 12px center; -webkit-appearance: none; appearance: none; cursor: pointer; color: var(--ss-ink); }
.ss-rail__group { margin-bottom: 18px; }
.ss-rail__group--top { padding-top: 18px; border-top: 1px solid #f0ece5; }
.ss-rail__group--sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ss-rail__label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a8178; margin-bottom: 10px; }
.ss-rail__section { font-family: var(--ss-font-display); font-weight: 700; font-size: 15px; color: var(--ss-ink); margin: 4px 0 14px; }
.ss-rail__section--top { padding-top: 18px; border-top: 1px solid #f0ece5; }
.ss-charsliders { display: flex; flex-direction: column; gap: 18px; }
.ss-charslider__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: #6f6862; margin-bottom: 9px; }
.ss-charslider__head b { font-weight: 700; color: var(--ss-ink); font-size: 13px; }
.ss-range--char { margin-bottom: 2px; }
/* Lade-Overlay beim Abschicken einer Suche */
.ss-loadingoverlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(251,248,243,0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; }
.ss-loadingoverlay.is-on { opacity: 1; visibility: visible; }
.ss-loadingoverlay__box { display: flex; flex-direction: column; align-items: center; gap: 16px; background: #fff; border: 1px solid #ece5da; border-radius: 18px; padding: 30px 40px; box-shadow: 0 24px 60px -24px rgba(28,26,23,.4); }
.ss-loadingoverlay__spin { width: 40px; height: 40px; border: 4px solid #ece5da; border-top-color: var(--ss-accent); border-radius: 50%; animation: ssSpin .8s linear infinite; }
.ss-loadingoverlay__text { font-family: var(--ss-font-display); font-weight: 700; font-size: 16px; color: var(--ss-ink); }
/* === Sprachen-Uebersicht === */
.ss-langhero { background: #211d18; color: var(--ss-paper); padding: 30px 0 52px; margin-bottom: 44px; }
.ss-langhero__crumb { font-size: 13px; color: #9a9184; margin-bottom: 18px; }
.ss-langhero__crumb a { color: #9a9184; }
.ss-langhero__crumb a:hover { color: var(--ss-paper); }
.ss-langhero__crumb span { margin: 0 4px; }
.ss-langhero__title { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(30px, 5vw, 46px); letter-spacing: -0.02em; margin: 0 0 16px; max-width: 820px; color: var(--ss-paper); }
.ss-langhero__lead { font-size: 18px; line-height: 1.6; color: #c8bfb2; margin: 0 0 14px; max-width: 720px; }
.ss-langhero__sub { font-size: 16px; line-height: 1.6; color: #9a9184; margin: 0; max-width: 720px; }
.ss-langhero__sub b { color: var(--ss-paper); }
.ss-langsec { padding-bottom: 10px; }
.ss-langsearch { display: flex; align-items: center; gap: 10px; border: 1px solid #e6ded1; background: #fff; border-radius: 12px; padding: 2px 16px; max-width: 460px; margin-bottom: 40px; }
.ss-langsearch__input { flex: 1; border: 0; outline: none; padding: 14px 0; font-size: 16px; background: transparent; color: var(--ss-ink); }
.ss-langsec__title { font-family: var(--ss-font-display); font-weight: 700; font-size: clamp(22px, 3.4vw, 28px); margin: 0 0 20px; letter-spacing: -0.01em; }
.ss-langsec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.ss-langsec__head .ss-langsec__title { margin: 0; }
.ss-langsec__meta { font-size: 14px; color: #8a8178; }
.ss-langtop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 48px; }
.ss-langtopcard { background: #fff; border: 1px solid #ece5da; border-radius: 16px; padding: 22px; color: var(--ss-ink); display: flex; flex-direction: column; gap: 8px; transition: border-color .12s, box-shadow .12s; }
.ss-langtopcard:hover { border-color: #d9cfc0; box-shadow: 0 14px 30px -20px rgba(28,26,23,.4); color: var(--ss-ink); }
.ss-langtopcard__name { font-family: var(--ss-font-display); font-weight: 700; font-size: 20px; }
.ss-langtopcard__count { font-size: 13px; color: #8a8178; }
.ss-langgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ss-langlink { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid #ece5da; border-radius: 11px; padding: 13px 16px; color: var(--ss-ink); transition: background .12s, border-color .12s; }
.ss-langlink:hover { background: var(--ss-alt); border-color: #e0d8cc; color: var(--ss-ink); }
.ss-langlink__name { font-weight: 500; }
.ss-langlink__count { font-size: 13px; color: #8a8178; background: #f5efe6; padding: 3px 10px; border-radius: 999px; }
.ss-langempty { background: #fff; border: 1px solid #ece5da; border-radius: 16px; padding: 40px; text-align: center; color: var(--ss-muted); }
.ss-langempty__reset, .ss-langempty__contact { border: 0; background: none; padding: 0; font: inherit; color: var(--ss-accent-hover); font-weight: 600; cursor: pointer; }
.ss-langseo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 44px; padding-bottom: 10px; }
.ss-langseo__title { font-family: var(--ss-font-display); font-weight: 700; font-size: 24px; margin: 0 0 14px; letter-spacing: -0.01em; }
.ss-langseo__col p { font-size: 16px; line-height: 1.7; color: #4a443c; margin: 0 0 14px; }
/* Aufklapp-FAQ als / (Sprachen-Uebersicht). Auf details/summary
beschraenkt - die Startseiten-FAQ (Partials/Faq.html) nutzt