/* Sentimental (ab 0.14.0; Kennung „sentimental“). Das Design von SentimentalFramework als
 * gemeinsame Grundlage und Standard-Theme neuer Installationen: ruhig und hell, Serife („Source
 * Serif 4“, liegt bei Publisher) für Überschriften und Lesetext, Systemgrotesk für kleine
 * Beschriftungen, Knöpfe und Angaben; eine Akzentfarbe für Wege und Hervorhebungen, feine Linien
 * statt Flächen, Karten mit versetztem Schatten. Hell und dunkel nach der Einstellung des Geräts
 * (prefers-color-scheme). Wie „Blatt“ ohne Skript: keine Skripte, nichts im Browser gespeichert.
 *
 * Alle Farben kommen aus dem Farbschema (Vorgabe „klar“: Weiß, Schiefer, Petrol) und werden in
 * basis.css gemischt; die dunkle Darstellung ersetzt nur Hintergrund und Text und hellt den
 * Akzent auf. Keine fremden Quellen. Begründungen in docs/THEME-SENTIMENTAL.md. */
.theme-sentimental {
  --t-schrift: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sf-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-gewicht-kopf: 600;
  --t-laufweite-kopf: -0.018em;
  --t-rund-knopf: 6px;
  --t-rund-gross: 6px;
  --t-rund-mittel: 4px;
  --t-nav-transform: none;
  --t-nav-laufweite: 0;
  --t-nav-groesse: 16px;
  --t-marke-gewicht: 650;
  --t-kopflinie: 1px solid var(--f-n200);
  --breite: 1160px;
  --rand: clamp(20px, 3.4vw, 56px);
  --sf-linie: var(--f-n200);
  --sf-karte: var(--f-bg);
  --sf-versatz: color-mix(in srgb, var(--f-fg) 6%, var(--f-bg));
  --sf-gedaempft: var(--f-n700);
  --gr-h1: clamp(2.25rem, 1.5rem + 2.9vw, 3.5rem);
  --gr-h2: clamp(1.625rem, 1.32rem + 1.2vw, 2.125rem);
  --gr-text: clamp(1rem, .97rem + .14vw, 1.0625rem);
}

/* ---------------------------------------------------------- Hell und dunkel
   Dunkel nach der Einstellung des Geräts. Ersetzt werden Hintergrund und Text; der Akzent behält
   seinen Farbton und wird aufgehellt (Helligkeit 0,8 in OKLCH, ältere Browser mischen ihn mit
   Weiß), damit er auf dem dunklen Grund 4,5 : 1 erreicht. Diese Datei lädt nur, wenn das Theme
   gilt; :root genügt deshalb. */
@media (prefers-color-scheme: dark) {
  :root {
    --f-bg: #11191c;
    --f-fg: #e5eeef;
    --f-akzent: color-mix(in oklch, var(--farbe-akzent, #006b73) 52%, #ffffff);
    --f-akzent: oklch(from var(--farbe-akzent, #006b73) .8 calc(c + .02) h);
    --f-knopf: var(--f-a700);
    --f-knopf-hover: var(--f-a800);
    --f-tief: #11191c;
    --f-hell: #e5eeef;
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------- Grundlagen */
.theme-sentimental { font-feature-settings: "kern", "liga"; }
.theme-sentimental :focus-visible { outline: 3px solid var(--f-akzent); outline-offset: 3px; }
.theme-sentimental .kicker, .theme-sentimental .beitrag-meta, .theme-sentimental .begriffe-titel, .theme-sentimental .knopf,
.theme-sentimental .index-zeile time, .theme-sentimental .abbildung figcaption, .theme-sentimental .zitat figcaption,
.theme-sentimental .tabelle, .theme-sentimental .schutz-form, .theme-sentimental .stichworte a, .theme-sentimental .sprachwahl {
  font-family: var(--sf-ui);
}
/* Die Rubrik über Titeln: klein, gesperrt, in Versalien, mit einem Punkt in der Akzentfarbe. */
.theme-sentimental .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--f-a800); }
.theme-sentimental .kicker::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.theme-sentimental h1, .theme-sentimental h2, .theme-sentimental h3 { font-family: var(--t-schrift); }
.theme-sentimental .titel-gross, .theme-sentimental .block h1.titel { font-size: var(--gr-h1); line-height: 1.08; letter-spacing: -0.025em; }
.theme-sentimental .titel { font-size: var(--gr-h2); line-height: 1.15; }
.theme-sentimental .lead { color: var(--f-n800); }
.theme-sentimental .knopf { padding: 11px 18px; font-size: 15px; font-weight: 600; letter-spacing: .005em; }
.theme-sentimental .leer { font-style: normal; color: var(--sf-gedaempft); }

/* ---------------------------------------------------------- Kopf: Marke links, Wege rechts */
.theme-sentimental .sf-kopf { position: relative; z-index: 50; background: var(--f-bg); }
.theme-sentimental .sf-kopf-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 40px; width: 100%; max-width: var(--breite); margin: 0 auto; padding: 22px var(--rand) 20px; }
.theme-sentimental .sf-kopf .marke { flex: 0 1 auto; }
/* Die zweizeilige Wortmarke: aufrecht, darunter kursiv in der Akzentfarbe. */
.theme-sentimental .sf-wortmarke { display: inline-flex; flex-direction: column; align-items: flex-start; font-family: var(--t-schrift); font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); line-height: .92; letter-spacing: -0.02em; color: var(--f-fg); text-decoration: none; }
.theme-sentimental .sf-wort-eins { font-weight: 650; }
.theme-sentimental .sf-wort-zwei { font-style: italic; font-weight: 450; color: var(--f-a800); letter-spacing: -0.01em; padding-left: .02em; }
.theme-sentimental .sf-einzeilig { line-height: 1.15; }
.theme-sentimental .sf-wortmarke:hover { color: var(--f-fg); }
.theme-sentimental .marke.mit-logo { flex-direction: row; align-items: center; }
.theme-sentimental .sf-navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 28px; min-width: 0; }
.theme-sentimental .sf-navigation .hauptnavigation ul { gap: 0 26px; justify-content: flex-end; }
.theme-sentimental .sf-navigation .hauptnavigation a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border-bottom: 2px solid transparent; color: var(--f-fg); font-size: var(--t-nav-groesse); line-height: 1.3; }
.theme-sentimental .sf-navigation .hauptnavigation a:hover { color: var(--f-fg); border-bottom-color: var(--f-n300); }
.theme-sentimental .sf-navigation .hauptnavigation a[aria-current="page"] { color: var(--f-a800); border-bottom-color: var(--f-akzent); }
.theme-sentimental .sf-navigation .hauptnavigation .untermenue { top: calc(100% - 4px); border-radius: var(--t-rund-mittel); }
@media (hover: hover) and (min-width: 600px) {
  .theme-sentimental .sf-navigation .hauptnavigation .untermenue { box-shadow: var(--schatten-panel); }
}
.theme-sentimental .sf-navigation .hauptnavigation .untermenue a { min-height: 36px; font-size: 15px; }
.theme-sentimental .sprachwahl ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.theme-sentimental .sprachwahl a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0 6px; border-radius: var(--t-rund-mittel); color: var(--sf-gedaempft); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.theme-sentimental .sprachwahl a:hover { color: var(--f-fg); background: var(--f-flaeche); }
.theme-sentimental .sprachwahl a[aria-current="true"] { color: var(--f-a800); box-shadow: inset 0 -2px 0 var(--f-akzent); }

/* ---------------------------------------------------------- Inhalt */
.theme-sentimental .sf-inhalt { max-width: var(--breite); padding-bottom: clamp(24px, 4vw, 56px); }
.theme-sentimental .block { padding: clamp(36px, 5vw, 64px) var(--rand); }
.theme-sentimental .block + .block { padding-top: 0; }
.theme-sentimental .lesespalte { max-width: 66ch; }
.theme-sentimental .aufmacher-text { gap: 20px; }
.theme-sentimental .aufmacher-text .lead { max-width: 36em; }
.theme-sentimental .bild, .theme-sentimental .kachel-bild, .theme-sentimental .teaser-bild { border-radius: var(--t-rund-mittel); }
.theme-sentimental .bild-platz { background: linear-gradient(135deg in srgb, var(--f-a100), var(--f-flaeche) 70%); border: 1px solid var(--sf-linie); }

/* Karten: weiße Fläche, feine Linie, ein versetzter Schatten statt Weichzeichner. */
.theme-sentimental .karte, .theme-sentimental .schutz, .theme-sentimental .aufruf, .theme-sentimental .kontaktformular {
  background: var(--sf-karte); border: 1px solid var(--sf-linie); border-radius: var(--t-rund-mittel); box-shadow: 8px 8px 0 var(--sf-versatz);
}
.theme-sentimental .karte { padding: clamp(20px, 2.4vw, 28px); gap: 12px; }
.theme-sentimental .karten { gap: clamp(20px, 2.6vw, 32px); }
.theme-sentimental .karte-titel { font-family: var(--t-schrift); font-weight: 600; }
.theme-sentimental .kontaktformular { padding: clamp(24px, 3vw, 36px); }
.theme-sentimental .aufruf { color: var(--f-fg); text-align: left; align-items: flex-start; padding: clamp(28px, 4vw, 44px); }
.theme-sentimental .aufruf p { color: var(--f-n800); }
/* Der Infokasten: eine Linie in der Akzentfarbe links, sonst ruhig. */
.theme-sentimental .infokasten { padding: 4px 0 4px 18px; border-left: 2px solid var(--f-akzent); border-radius: 0; background: transparent; color: var(--f-fg); }
/* Zitat: groß in der Serife, zwischen zwei feinen Linien. */
.theme-sentimental .block-zitat { background: transparent; }
.theme-sentimental .zitat { max-width: 40ch; margin: 0; padding: 28px 0; border-top: 1px solid var(--sf-linie); border-bottom: 1px solid var(--sf-linie); text-align: left; }
.theme-sentimental .zitat blockquote { font-style: normal; font-weight: 450; letter-spacing: -0.012em; }
.theme-sentimental .zitat figcaption { font-size: 13px; color: var(--sf-gedaempft); }
.theme-sentimental .schritte > li::before { border-radius: 50%; background: transparent; border: 1px solid var(--f-akzent); color: var(--f-a800); font-family: var(--sf-ui); }
.theme-sentimental .tabelle { font-size: 15px; }
.theme-sentimental .tabelle th { border-bottom: 1px solid var(--f-fg); font-size: 13px; letter-spacing: .03em; color: var(--sf-gedaempft); }
.theme-sentimental .tabelle td { border-bottom-color: var(--sf-linie); }
.theme-sentimental .umbruch { background: var(--sf-linie); }
.theme-sentimental .abbildung figcaption { font-size: 13px; color: var(--sf-gedaempft); }
.theme-sentimental .kachel-titel { font-family: var(--t-schrift); }
.theme-sentimental .kachel-link:hover .kachel-titel { color: var(--f-a800); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.theme-sentimental .kontakt-weg { font-size: var(--gr-text); }

/* ---------------------------------------------------------- Textlisten
   „liste“ als Zeitleiste wie im Entwicklungsstand von SentimentalFramework: eine feine Linie links,
   je Text ein Ring in der Akzentfarbe; die übrigen Layouts wie in basis.css, nur ruhiger. */
.theme-sentimental .teaser-titel { font-family: var(--t-schrift); font-weight: 600; letter-spacing: -0.01em; }
.theme-sentimental .anriss { color: var(--f-n800); }
.theme-sentimental .teaser-liste { position: relative; gap: 0; padding-left: 30px; }
.theme-sentimental .teaser-liste::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: var(--sf-linie); }
.theme-sentimental .teaser-liste > .teaser-zeile { position: relative; padding: 0 0 clamp(28px, 4vw, 40px); }
.theme-sentimental .teaser-liste > .teaser-zeile::before { content: ""; position: absolute; left: -30px; top: .45em; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--f-akzent); background: var(--f-bg); box-shadow: inset 0 0 0 2.5px var(--f-bg), inset 0 0 0 7px var(--f-akzent); }
.theme-sentimental .teaser-liste > .teaser-zeile:last-child { padding-bottom: 0; }
.theme-sentimental .teaser-text { gap: 8px; }
.theme-sentimental .teaser-rest > .teaser { border-top-color: var(--sf-linie); }
.theme-sentimental .index-zeile { border-top-color: var(--sf-linie); }
.theme-sentimental .index-zeile:last-child { border-bottom-color: var(--sf-linie); }
.theme-sentimental .index-zeile time { font-size: 13px; }
.theme-sentimental .mehr a { font-family: var(--sf-ui); font-size: 14px; font-weight: 600; text-decoration: none; }
.theme-sentimental .mehr a::after { content: " →"; }
.theme-sentimental .mehr a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- Texte */
.theme-sentimental .beitrag { max-width: calc(68ch + 2 * var(--rand)); }
.theme-sentimental .beitrag-kopf { gap: 16px; padding-bottom: clamp(24px, 3vw, 32px); border-bottom: 1px solid var(--sf-linie); }
.theme-sentimental .beitrag-meta { font-size: 13px; color: var(--sf-gedaempft); }
.theme-sentimental .beitrag-text { font-size: calc(var(--gr-text) * 1.06); line-height: 1.72; }
.theme-sentimental .beitrag-text h2 { font-weight: 600; letter-spacing: -0.015em; }
.theme-sentimental .beitrag-text blockquote { border-left: 2px solid var(--f-akzent); font-style: normal; color: var(--f-n800); }
.theme-sentimental .beitrag-text code { font-size: .9em; padding: .1em .35em; border-radius: 3px; background: var(--f-flaeche); }
.theme-sentimental .beitrag-fuss { border-top-color: var(--sf-linie); }
.theme-sentimental .begriffe-titel { font-size: 11.5px; letter-spacing: .12em; }
.theme-sentimental .stichworte a { border-radius: 999px; border-color: var(--sf-linie); font-size: 13px; }
.theme-sentimental .angaben { font-family: var(--sf-ui); font-size: 14px; }

/* ---------------------------------------------------------- Schutz, Wartung, Formulare */
.theme-sentimental .schutz { gap: 16px; }
.theme-sentimental .schutz-form input, .theme-sentimental .kontaktformular input, .theme-sentimental .kontaktformular textarea, .theme-sentimental .kontaktformular select { border-color: var(--f-n300); border-radius: var(--t-rund-mittel); background: var(--f-bg); }
.theme-sentimental .wartung-name::after { width: 32px; }

/* ---------------------------------------------------------- Fuß */
.theme-sentimental .sf-fuss { margin-top: clamp(24px, 4vw, 56px); border-top: 0; color: var(--sf-gedaempft); font-size: 14px; }
.theme-sentimental .sf-fuss-zeile, .theme-sentimental .sf-fuss-unten { width: 100%; max-width: var(--breite); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }
/* Die Linie über dem Fuß reicht nur so weit wie der Inhalt (nicht über den Außenrand). */
.theme-sentimental .sf-fuss-zeile { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 36px; padding-top: 26px; padding-bottom: 22px; }
.theme-sentimental .sf-fuss-zeile::before { content: ""; position: absolute; top: 0; left: var(--rand); right: var(--rand); height: 1px; background: var(--sf-linie); }
.theme-sentimental .sf-fuss-marke .sf-wortmarke { font-size: 1.125rem; }
.theme-sentimental .sf-fuss-marke .logo { max-height: 40px; }
.theme-sentimental .sf-fuss-wege { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 22px; margin-left: auto; }
.theme-sentimental .sf-fuss-wege ul { gap: 6px 22px; }
.theme-sentimental .sf-fuss-wege a { display: inline-flex; align-items: center; min-height: 32px; color: var(--f-a800); font-size: 14px; text-decoration: none; }
.theme-sentimental .sf-fuss-wege a:hover, .theme-sentimental .sf-fuss-wege a[aria-current="page"] { color: var(--f-a900); text-decoration: underline; }
.theme-sentimental .sf-fuss-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 4px; padding-bottom: 28px; font-family: var(--sf-ui); font-size: 13px; }
.theme-sentimental .sf-fuss-unten .fuss-kontakt { flex: 1 1 100%; order: -1; margin-bottom: 8px; }
.theme-sentimental .sf-fuss-unten .fuss-kontakt-titel { font-family: var(--t-schrift); font-size: 15px; }
.theme-sentimental .sf-fuss-unten .fuss-name { flex: 1 1 auto; }
.theme-sentimental .sf-fuss-unten .anmelden, .theme-sentimental .sf-fuss-unten .publisher-hinweis { display: inline-flex; align-items: center; min-height: 24px; color: var(--sf-gedaempft); }
.theme-sentimental .sf-fuss-unten .anmelden:hover, .theme-sentimental .sf-fuss-unten .publisher-hinweis:hover { color: var(--f-fg); }

.theme-sentimental .sprung:focus { z-index: 60; }

@media (prefers-reduced-motion: no-preference) {
  .theme-sentimental .sf-navigation .hauptnavigation a { transition: border-color .15s, color .15s; }
}

/* ---------------------------------------------------------- Unter 820 px
   Ohne Skript: Die Navigation steht unter der Marke, linksbündig, mit Punkten von 44 px Höhe;
   Untermenüs stehen eingerückt unter ihrem Elternpunkt (basis.css). */
@media (max-width: 819px) {
  .theme-sentimental .sf-kopf-innen { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 16px; padding-bottom: 8px; }
  .theme-sentimental .sf-navigation, .theme-sentimental .sf-navigation .hauptnavigation ul { justify-content: flex-start; }
  .theme-sentimental .sf-navigation { width: 100%; gap: 0 20px; }
  .theme-sentimental .sf-navigation .hauptnavigation ul { gap: 0 20px; }
  /* Unterpunkte stehen in derselben Zeile hinter ihrem Elternpunkt, kleiner und mit einem Pfeil
     (statt eingerückt unter ihm, was die Zeile auseinanderreißt). */
  .theme-sentimental .sf-navigation .hauptnavigation .hat-untermenue, .theme-sentimental .sf-navigation .hauptnavigation .untermenue { display: contents; }
  .theme-sentimental .sf-navigation .hauptnavigation .untermenue a { font-size: 14px; color: var(--sf-gedaempft); }
  .theme-sentimental .sf-navigation .hauptnavigation .untermenue a::before { content: "↳\00a0"; color: var(--f-n500); }
  .theme-sentimental .sf-fuss-zeile { align-items: flex-start; }
  .theme-sentimental .sf-fuss-wege { justify-content: flex-start; margin-left: 0; flex: 1 1 100%; }
  .theme-sentimental .sf-fuss-wege a { min-height: 44px; }
  .theme-sentimental .sf-fuss-unten .sozial a { width: 44px; height: 44px; }
}

/* ---------------------------------------------------------- Smartphone */
@media (max-width: 599px) {
  .theme-sentimental .karte, .theme-sentimental .schutz, .theme-sentimental .aufruf, .theme-sentimental .kontaktformular { box-shadow: 5px 5px 0 var(--sf-versatz); }
  .theme-sentimental .teaser-liste { padding-left: 26px; }
  .theme-sentimental .teaser-liste > .teaser-zeile::before { left: -26px; }
  .theme-sentimental .sf-fuss-unten { flex-direction: column; align-items: flex-start; }
  .theme-sentimental .sf-fuss-unten .sozial { align-self: flex-start; margin-left: -6px; }
}

@media print {
  .theme-sentimental .sf-navigation { display: none; }
  .theme-sentimental .karte, .theme-sentimental .aufruf { box-shadow: none; }
}