/* Farben aus dem GSV-Logo. Die aufsteigenden Punkte des Logos sind die einzige auffällige Form der Seite. */
@font-face { font-family: "Rokkitt"; font-weight: 100 900; font-display: swap; src: url("../fonts/rokkitt-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "Rokkitt"; font-weight: 100 900; font-display: swap; src: url("../fonts/rokkitt-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }

:root {
  --aubergine: #6a2f5c;
  --magenta: #c5146f;
  --punkt: #d61d7d;
  --rosa: #e794b4;
  --altrosa: #ceafbb;
  --hauch: #fbf1f6;
  --schwarz: #1a1919;
  --schiefer: #4f5f66;
  --grund: #fff;
  --text: #1a1919;
  --titel: #6a2f5c;
  --link: #6a2f5c;
  --linkhover: #c5146f;
  --leise: #4f5f66;
  --linie: #ceafbb;
  --flaeche: #fbf1f6;
  --knopf: #6a2f5c;
  --knopfhover: #c5146f;
  --kontur: #6a2f5c;
  --leiste: #6a2f5c;
  --fussgrund: #6a2f5c;
  --kette4: #6a2f5c;
  --spalte: 46rem;
  --breit: 68rem;
  --rand: clamp(1.1rem, 4vw, 2.5rem);
  --kopfschrift: "Rokkitt", Rockwell, "Roboto Slab", Georgia, serif;
  --textschrift: "Atkinson Hyperlegible", Verdana, "Segoe UI", sans-serif;
}

/* Dunkel: ruhiger, fast neutraler Grund. Beiträge sind eigene Flächen, Magenta bleibt Knöpfen und Punkten vorbehalten. */
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) {
    color-scheme: dark;
    --grund: #1d1720;
    --text: #e9e3ea;
    --titel: #fff;
    --link: #f2b8d3;
    --linkhover: #fff;
    --leise: #c4b9c6;
    --linie: #453a4a;
    --flaeche: #2b2230;
    --knopf: #c5146f;
    --knopfhover: #a50f5c;
    --kontur: #fff;
    --leiste: #2b2230;
    --fussgrund: #141016;
    --kette4: #f3aecf;
  }
  :root:not([data-modus="hell"]) .gsv-hauch:has(.beitragsliste) { background: var(--grund); }
  :root:not([data-modus="hell"]) .beitrag-zeile { background: var(--flaeche); padding: 0.9rem 1.1rem 1rem; border-radius: 0.35rem; }
  :root:not([data-modus="hell"]) .beitragsliste, :root:not([data-modus="hell"]) .gsv-hauch .beitragsliste { gap: 1rem 1.25rem; }
  :root:not([data-modus="hell"]) .logo-dunkel { display: none !important; }
  :root:not([data-modus="hell"]) .logo-hell { display: block !important; }
}
:root[data-modus="dunkel"] {
  color-scheme: dark;
  --grund: #1d1720;
  --text: #e9e3ea;
  --titel: #fff;
  --link: #f2b8d3;
  --linkhover: #fff;
  --leise: #c4b9c6;
  --linie: #453a4a;
  --flaeche: #2b2230;
  --knopf: #c5146f;
  --knopfhover: #a50f5c;
  --kontur: #fff;
  --leiste: #2b2230;
  --fussgrund: #141016;
  --kette4: #f3aecf;
}
:root[data-modus="dunkel"] .gsv-hauch:has(.beitragsliste) { background: var(--grund); }
:root[data-modus="dunkel"] .beitrag-zeile { background: var(--flaeche); padding: 0.9rem 1.1rem 1rem; border-radius: 0.35rem; }
:root[data-modus="dunkel"] .beitragsliste, :root[data-modus="dunkel"] .gsv-hauch .beitragsliste { gap: 1rem 1.25rem; }
:root[data-modus="dunkel"] .logo-dunkel { display: none !important; }
:root[data-modus="dunkel"] .logo-hell { display: block !important; }

* { box-sizing: border-box; }
html.gross { font-size: 120%; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--textschrift); font-size: 1.125rem; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--linkhover); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--kopfschrift); font-weight: 600; line-height: 1.12; color: var(--titel); text-wrap: balance; margin: 1.8em 0 0.45em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.45rem; }
p, ul, ol, figure, table { margin-top: 0; margin-bottom: 1.1rem; }
li { margin-bottom: 0.4rem; }

.sprung { position: absolute; left: -999px; top: 0; background: var(--aubergine); color: #fff; padding: 0.6rem 1rem; z-index: 10; }
.sprung:focus { left: 0; color: #fff; }

.kopf-leiste { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 8; background: var(--grund); transition: transform 0.2s ease; }
.kopf-leiste.weg { transform: translateY(-110%); }
.eilmeldung { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: center; justify-content: center; background: #c5146f; color: #fff; padding: 0.6rem var(--rand); font-weight: 700; }
.eilmeldung p { margin: 0; }
.eilmeldung a { color: #fff; }
.eilmeldung a:hover { color: #fff; text-decoration-thickness: 2px; }
.eilmeldung-zu { font: inherit; font-size: 0.95rem; font-weight: 400; color: #fff; background: transparent; border: 1.5px solid #fff; border-radius: 0.3rem; padding: 0.1rem 0.6rem; cursor: pointer; }
.termin-leiste { display: block; background: var(--leiste); color: #fff; text-align: center; padding: 0.3rem var(--rand); font-size: 0.95rem; font-weight: 700; text-decoration: none; }
.termin-leiste:hover { color: #fff; background: #8f3d6c; }
.kopf { max-width: var(--breit); margin: 0 auto; padding: 1rem var(--rand); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; justify-content: space-between; }
.kopf-logo { display: block; flex: none; }
.kopf-logo img { display: block; width: 11.5rem; height: auto; }
.kopf-logo .logo-hell { display: none; }
.menue-knopf { font: inherit; font-weight: 700; color: var(--link); background: var(--grund); border: 2px solid var(--link); padding: 0.35rem 0.9rem; cursor: pointer; }
.hauptmenue.zu { display: none; }
.hauptmenue ul { list-style: none; margin: 0; padding: 0; }
.hauptmenue > ul, .hauptmenue > .menu > ul { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; }
.hauptmenue li { position: relative; margin: 0; }
.hauptmenue a { display: block; padding: 0.3rem 0; font-weight: 700; color: var(--text); text-decoration: none; }
.hauptmenue a:hover, .hauptmenue .current-menu-item > a { color: var(--linkhover); }
.hauptmenue .sub-menu { display: none; position: absolute; left: -0.9rem; top: 100%; z-index: 5; min-width: 15rem; background: var(--grund); border: 2px solid var(--link); padding: 0.4rem 0.9rem; }
.hauptmenue li:hover > .sub-menu, .hauptmenue li:focus-within > .sub-menu { display: block; }
.hauptmenue .sub-menu a { font-weight: 400; }

.kopf-werkzeuge { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: center; justify-content: flex-end; font-size: 1rem; margin-top: 0.15rem; }
.kopf-werkzeuge form { display: flex; gap: 0.3rem; align-items: center; }
.kopf-werkzeuge label { position: absolute; left: -999px; }
.kopf-werkzeuge input { font: inherit; width: 11rem; color: var(--text); background: var(--grund); padding: 0.15rem 0.5rem; border: 1.5px solid var(--leise); border-radius: 0.3rem; }
.kopf-werkzeuge button, .link-knopf, .teilen button { font: inherit; font-size: 1rem; color: var(--link); background: transparent; border: 1.5px solid var(--link); border-radius: 0.3rem; padding: 0.15rem 0.6rem; cursor: pointer; }
.schrift-knopf[aria-pressed="true"] { background: var(--link); color: var(--grund); }
.haeufig { columns: 2; column-gap: 2.5rem; }
.haeufig li { break-inside: avoid; }
.inhalt { padding: 0 var(--rand) 3.5rem; }
.inhalt > * { max-width: var(--spalte); margin-inline: auto; }
.inhalt > .alignwide, .inhalt > .gsv-breit, .inhalt > .gsv-zweispaltig { max-width: var(--breit); }
.inhalt > .gsv-band { max-width: none; margin-inline: calc(-1 * var(--rand)); padding: clamp(2.5rem, 6vw, 4.5rem) var(--rand); }
.inhalt > .gsv-band > * { max-width: calc(var(--breit) - 2 * var(--rand)); margin-inline: auto; }
.home .inhalt { padding-bottom: 0; }
.gsv-band h2:first-child, .gsv-spalte > h2:first-child { margin-top: 0; }
.seitentitel { margin-top: 1.2em; }
.gsv-lead { font-size: 1.3rem; line-height: 1.5; }
.gsv-hauch { background: var(--flaeche); }
.gsv-aubergine { background: var(--aubergine); color: #fff; }
.gsv-aubergine h2 { color: #fff; }
.gsv-aubergine .wp-block-button__link { background: #fff; color: var(--aubergine); }
.gsv-aubergine .wp-block-button__link:hover { background: var(--hauch); color: var(--aubergine); }

.gsv-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; padding-top: clamp(1.5rem, 4vw, 3rem) !important; }
.gsv-hero > * { max-width: none !important; margin-inline: 0 !important; width: 100%; }
.gsv-hero h1 { margin-top: 0; }
.gsv-hero-text > p { font-size: 1.25rem; line-height: 1.5; }
.inhalt > .gsv-band.gsv-hero { padding-inline: max(var(--rand), calc((100vw - var(--breit)) / 2 + var(--rand))); }
.gsv-kreis { position: relative; margin: 0; padding: 3rem 0 0 3rem; }
.gsv-kreis img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
/* Die Punktkette aus dem Logo, ein Element mit mehreren Schatten. */
.gsv-kreis::before { content: ""; position: absolute; left: 1.1rem; top: 0.35rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--altrosa); box-shadow: 0.7rem 2.5rem 0 0.25rem var(--rosa), 2.2rem 5.5rem 0 0.6rem #8f3d6c, 3.6rem 9.2rem 0 1.15rem var(--punkt); }

.gsv-zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.gsv-band.gsv-zweispaltig > * { max-width: none; margin: 0; width: 100%; }
.inhalt > .gsv-band.gsv-zweispaltig { padding-inline: max(var(--rand), calc((100vw - var(--breit)) / 2 + var(--rand))); }
.gsv-eng { align-items: center; }
.gsv-foto-hoch img { display: block; width: 100%; max-height: 32rem; object-fit: cover; object-position: center 40%; }
.gsv-foto-klein { max-width: 22rem !important; margin-inline: 0 auto !important; }
figcaption { font-size: 0.95rem; color: var(--leise); margin-top: 0.4rem; }

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.1rem; }
.wp-block-button__link { display: inline-block; font-weight: 700; text-decoration: none; background: var(--knopf); color: #fff; padding: 0.65rem 1.25rem; border: 2px solid var(--knopf); border-radius: 0.3rem; }
.wp-block-button__link:hover { background: var(--knopfhover); border-color: var(--knopfhover); color: #fff; }
.is-style-outline .wp-block-button__link { background: transparent; color: var(--kontur); border-color: var(--kontur); }

.beitragsliste { display: grid; gap: 1.6rem; margin-bottom: 1.2rem; }
.gsv-hauch .beitragsliste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 3rem; }
.beitrag-zeile h2 { font-size: 1.5rem; margin: 0.1rem 0 0.3rem; }
.beitrag-zeile h2 a { color: var(--titel); text-decoration: none; }
.beitrag-zeile h2 a:hover { text-decoration: underline; }
.beitrag-zeile p { margin-bottom: 0; }
.beitrag-daten { color: var(--leise); font-size: 1rem; margin-bottom: 0.2rem; }
.single .beitrag-daten { margin-bottom: 1.5rem; }
.blog-einleitung { font-size: 1.2rem; }
.kategorie-filter { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-bottom: 2rem; }
.kategorie-filter li { margin: 0; }
.kategorie-filter a[aria-current] { font-weight: 700; }
.pagination { margin-top: 2rem; }
.nav-links { display: flex; gap: 1rem; }

.terminliste { list-style: none; padding: 0; }
.terminliste li { margin-bottom: 0.9rem; }
.termin-wann { display: block; color: var(--leise); font-size: 1rem; }
.termin-hinweis, .alt-hinweis, .gsv-hinweis { background: var(--flaeche); padding: 1rem 1.25rem; }
.termin-hinweis { font-weight: 700; color: var(--titel); }
.alt-hinweis { margin-bottom: 1.5rem; }
.teilen { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center; margin-top: 2rem; }
.kalender { display: block; font-size: 1rem; }
.gsv-hinweis > :first-child { margin-top: 0; }
.gsv-hinweis > :last-child { margin-bottom: 0; }

/* Aufbau der GSV: die Kette wächst wie im Logo, von Schule zu Gremium. */
ol.gsv-kette { list-style: none; padding: 0; counter-reset: k; }
ol.gsv-kette li { position: relative; padding: 0 0 1.3rem 3.6rem; margin: 0; }
ol.gsv-kette li::before { content: ""; position: absolute; left: 1.4rem; top: 0.25rem; width: 1.1rem; height: 1.1rem; transform: translateX(-50%); border-radius: 50%; background: var(--rosa); }
ol.gsv-kette li:nth-child(2)::before { width: 1.7rem; height: 1.7rem; background: #8f3d6c; }
ol.gsv-kette li:nth-child(3)::before { width: 2.3rem; height: 2.3rem; background: var(--punkt); }
ol.gsv-kette li:nth-child(4)::before { width: 2.8rem; height: 2.8rem; background: var(--kette4); }
ul.gsv-zeitleiste { list-style: none; padding: 0 0 0 1.5rem; border-left: 3px solid var(--linie); }
ul.gsv-zeitleiste li { position: relative; margin-bottom: 0.9rem; }
ul.gsv-zeitleiste li::before { content: ""; position: absolute; left: calc(-1.5rem - 0.56rem); top: 0.42em; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--punkt); }

.wp-block-table { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
.wp-block-table table, .wp-block-table thead, .wp-block-table th, .wp-block-table td { border: 0; }
.wp-block-table th, .wp-block-table td, th, td { text-align: left; vertical-align: top; padding: 0.5rem 1rem 0.5rem 0; border-bottom: 1px solid var(--linie); }

.rechte-suche { display: grid; gap: 0.3rem; margin-top: 2rem; }
.rechte-suche label { font-weight: 700; }
.rechte-suche input { width: 100%; font: inherit; color: var(--text); background: var(--grund); padding: 0.6rem 0.8rem; border: 2px solid var(--link); border-radius: 0.3rem; }
.rechte-themen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.rechte-themen button { font: inherit; font-size: 1rem; color: var(--link); background: transparent; border: 1.5px solid var(--link); border-radius: 0.3rem; padding: 0.2rem 0.6rem; cursor: pointer; }
.rechte-themen button[aria-pressed="true"] { background: var(--link); color: var(--grund); }
.rechte-treffer { color: var(--leise); margin-top: 0.7rem; }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.6rem 0; cursor: pointer; font-weight: 700; }
.frage summary:hover { color: var(--titel); }
.kurz { flex: none; font-family: var(--kopfschrift); font-size: 1.2rem; color: var(--titel); }
.antwort { padding-bottom: 0.6rem; }
.beleg { font-size: 1rem; color: var(--leise); }
.stufe { font-weight: 700; color: var(--titel); }
.stufe-einschaetzung, .stufe-offen, .stufe-zweitquelle { color: var(--link); text-decoration: underline dotted; }
[hidden] { display: none !important; }

.fuss { background: var(--fussgrund); color: #fff; }
.fuss-innen { max-width: var(--breit); margin: 0 auto; padding: 2.5rem var(--rand); display: flex; flex-wrap: wrap; gap: 1.5rem 4rem; justify-content: space-between; }
.fuss a { color: #fff; }
.fuss a:hover { color: var(--rosa); }
.fuss-name { font-family: var(--kopfschrift); font-size: 1.4rem; font-weight: 600; margin-bottom: 0.4rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }

@media (max-width: 60rem) {
  .hauptmenue { width: 100%; }
  .kopf-werkzeuge { justify-content: flex-start; margin-top: 0.6rem; }
  .haeufig { columns: 1; }
  .hauptmenue > ul, .hauptmenue > .menu > ul { display: block; }
  .hauptmenue .sub-menu { display: block; position: static; border: 0; padding: 0 0 0 1rem; min-width: 0; }
}
@media (max-width: 46rem) {
  .gsv-hero, .gsv-zweispaltig, .gsv-hauch .beitragsliste { grid-template-columns: minmax(0, 1fr); }
  .gsv-kreis { max-width: 22rem; }
  .inhalt > .gsv-band.gsv-zweispaltig { padding-inline: var(--rand); }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .kopf-leiste { transition: none; } }