@font-face{font-family:'Petrona';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/petrona-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2BBD-2BBC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Petrona';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/petrona-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2BBD-2BBC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Petrona';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/petrona-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2BBD-2BBC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Petrona';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/petrona-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Petrona';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/petrona-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Petrona';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/petrona-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair Display SC';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/playfair-display-sc-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2BBD-2BBC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display SC';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/playfair-display-sc-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2BBD-2BBC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display SC';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/playfair-display-sc-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair Display SC';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/playfair-display-sc-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* neue-sexgeschichten.de — own tokens from brand/theme.json (never --brand-*) */
:root {
  --ns-bg: #020115;
  --ns-surface: #131225;
  --ns-text: #ececec;
  --ns-primary: #ebb8c7;
  --ns-accent: #7b5776;
  --ns-line: #241f3d;
  --ns-muted: #a79fc0;
  --ns-grad: linear-gradient(90deg, #430f3b, #561789);
  --ns-font-head: "Playfair Display SC", serif;
  --ns-font-body: "Petrona", serif;
}

* { box-sizing: border-box; }

html { background: var(--ns-bg); overflow-x: clip; }

body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--ns-bg);
  color: var(--ns-text);
  font-family: var(--ns-font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--ns-font-head); font-weight: 700; line-height: 1.2; color: var(--ns-primary); overflow-wrap: break-word; }
h1 { font-size: clamp(1.6rem, 6vw, 2.3rem); margin: 0 0 0.4em; letter-spacing: 0.01em; }
h2 { font-size: 1.5rem; margin: 2.2em 0 0.6em; }
h3 { font-size: 1.2rem; margin: 1.8em 0 0.5em; }

a { color: var(--ns-primary); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

.wrap { max-width: 920px; margin: 0 auto; padding: 0 20px; }

/* header: one bar, lockup left, 5 plain links right, not sticky */
.kopf { border-bottom: 3px solid transparent; border-image: var(--ns-grad) 1; }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 16px; }
.kopf img.lockup { height: 44px; width: auto; display: block; }
.kopf nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.kopf nav a { color: var(--ns-text); font-size: 1rem; padding: 8px 2px; display: inline-block; }
.kopf nav a:hover, .kopf nav a:focus-visible { color: var(--ns-primary); }
.menueknopf { display: none; }

/* footer: compact topic map */
.fuss { margin-top: 72px; background: var(--ns-grad); padding: 28px 0; }
.fuss .wrap { display: block; }
.fuss p { margin: 6px 0; font-size: 0.95rem; }
.fuss a { color: #fff; margin-right: 18px; }
.fuss .klein { color: #d9cfe6; font-size: 0.85rem; }

/* library table: full width, hairline rows */
.regal { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.regal th { text-align: left; font-family: var(--ns-font-body); font-weight: 600; font-size: 0.85rem; color: var(--ns-muted); border-bottom: 1px solid var(--ns-line); padding: 8px 10px 8px 0; }
.regal td { border-bottom: 1px solid var(--ns-line); padding: 10px 10px 10px 0; vertical-align: top; }
.regal td.titel a { color: var(--ns-text); }
.regal td.titel a:hover, .regal td.titel a:focus-visible { color: var(--ns-primary); }
.regal td.motiv { color: var(--ns-muted); white-space: nowrap; font-size: 0.95rem; }
.regal td.dauer { color: var(--ns-muted); white-space: nowrap; font-size: 0.95rem; text-align: right; }
.regal td.klang { text-align: right; white-space: nowrap; }

/* search */
.suche { margin: 1.4em 0 1.8em; }
.suche input {
  width: 100%; padding: 14px 16px; font-size: 1.05rem; font-family: var(--ns-font-body);
  background: var(--ns-surface); color: var(--ns-text); border: 1px solid var(--ns-line); border-radius: 6px;
}
.suche input::placeholder { color: var(--ns-muted); }
.suchhinweis { color: var(--ns-muted); font-size: 0.95rem; margin: 0.2em 0 0; }

/* theme row: plain linked nouns with counts (flex wrap: an inline row's line-end margin overflows a 320px viewport) */
.motive { margin: 1em 0 0.5em; line-height: 2.1; display: flex; flex-wrap: wrap; align-items: baseline; }
.motive a { color: var(--ns-text); margin-right: 8px; }
.motive a:hover, .motive a:focus-visible { color: var(--ns-primary); }
.motive .zahl { color: var(--ns-muted); font-size: 0.85rem; margin-right: 16px; }

/* story page */
.fadenspule { height: 3px; background: var(--ns-primary); width: 0; }
.geschichte { font-size: 19px; max-width: 66ch; }
.geschichte p { margin: 0 0 1.15em; }
.angaben { color: var(--ns-muted); font-size: 0.95rem; margin: 0.3em 0 0.8em; }
audio { width: 100%; margin: 0.5em 0 0.3em; display: block; }
.stimme { color: var(--ns-muted); font-size: 0.9rem; margin: 0.2em 0 0.2em; }
.tempo { display: inline-flex; gap: 6px; margin: 0.3em 0 1em; }
.tempo button {
  font-family: var(--ns-font-body); font-size: 0.9rem; color: var(--ns-text);
  background: var(--ns-surface); border: 1px solid var(--ns-line); border-radius: 6px; padding: 8px 12px; cursor: pointer; min-height: 40px;
}
.tempo button.an { background: var(--ns-accent); color: #fff; border-color: var(--ns-accent); }

/* breadcrumbs */
.spur { font-size: 0.9rem; color: var(--ns-muted); margin: 0 0 1em; }
.spur a { color: var(--ns-muted); }
.spur a:hover, .spur a:focus-visible { color: var(--ns-primary); }

/* 18+ gate (class carries "eintritt" for adult_check X2) */
.eintritt-shirm {
  position: fixed; inset: 0; z-index: 60; background: var(--ns-bg);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px;
}
.eintritt-shirm .box { max-width: 420px; }
.eintritt-marke { font-family: var(--ns-font-head); font-weight: 700; font-size: 1.8rem; color: var(--ns-primary); margin: 0 0 0.4em; }
.eintritt-shirm p { color: var(--ns-text); }
.eintritt-knope { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.eintritt-knope button, .eintritt-knope a {
  font-family: var(--ns-font-body); font-size: 1.05rem; padding: 14px 22px; border-radius: 6px; cursor: pointer; min-height: 44px;
  border: 1px solid var(--ns-line); display: inline-block;
}
.eintritt-knope .ja { background: var(--ns-accent); color: #fff; border-color: var(--ns-accent); }
.eintritt-knope .weg { background: transparent; color: var(--ns-text); }

/* misc */
.zahllein { color: var(--ns-muted); font-size: 0.95rem; }
.abschnitt { margin-bottom: 64px; }
.zuletzt { font-size: 0.95rem; color: var(--ns-muted); margin: 0.6em 0 0; }
.zuletzt a { color: var(--ns-primary); }