/* Designsystem der Website des Kinderschutzbundes Xanten/Sonsbeck.
   Vier Farben: DKSB-Blau trägt alles, was handelt, Dunkelblau den Text,
   Sand den Hintergrund, Weiß die Karten. Bewusst keine fünfte Farbe. */

/* Schriften liegen im Projekt, nicht bei Google: eingebundene Google Fonts
   übertragen die IP-Adresse der Besucher in die USA und sind abmahnbar. */
@font-face {
  font-family: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caprasimo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caprasimo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blau: #0063af;
  --dunkelblau: #00375f;
  --sand: #faf3ea;
  --weiss: #ffffff;

  /* Abgeleitete Werte, keine eigenen Farben: Aufhellungen und Transparenzen
     derselben vier Töne. */
  --blau-dunkel: #00518f;
  --linie: rgba(0, 55, 95, 0.16);
  --linie-stark: rgba(0, 55, 95, 0.3);
  --gedaempft: rgba(0, 55, 95, 0.72);
  --leise: rgba(0, 55, 95, 0.55);
  --sand-tief: #f2e8da;

  --font-titel: 'Caprasimo', Georgia, serif;
  --font-text: 'Figtree', system-ui, -apple-system, sans-serif;

  --radius: 8px;
  --radius-gross: 12px;
  --schatten: 0 1px 2px rgba(0, 55, 95, 0.09);

  --breite: 1160px;
  --rand: clamp(20px, 4vw, 40px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Muss vor allen Klassenregeln stehen und gewinnen: sonst überschreibt eine
   Klasse mit display-Angabe das hidden-Attribut, und ausgeblendete Elemente
   sind trotzdem sichtbar. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--dunkelblau);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-titel);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

h1 {
  font-size: clamp(30px, 4.4vw, 44px);
}
h2 {
  font-size: clamp(24px, 3vw, 31px);
}
h3 {
  font-size: clamp(19px, 2.2vw, 23px);
}
h4 {
  font-size: 18px;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--blau);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--blau-dunkel);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sprungmarke: erste Tabulatortaste führt direkt zum Inhalt. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--weiss);
  color: var(--blau);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

.huelle {
  max-width: var(--breite);
  margin: 0 auto;
  padding-left: var(--rand);
  padding-right: var(--rand);
}

.abschnitt {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.abschnitt-eng {
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(28px, 4vw, 44px);
}

.leise {
  color: var(--leise);
}

.gedaempft {
  color: var(--gedaempft);
}

.kicker {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blau);
  margin-bottom: 8px;
}

/* — Kopfbereich — */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blau);
  color: var(--weiss);
}

.kopf-innen {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

.marke {
  display: flex;
  align-items: center;
  margin-right: auto;
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 6px 12px;
  text-decoration: none;
  color: var(--blau);
}

/* Die Wortmarke steckt bereits im Logo. Ein zweites Mal danebengeschrieben
   sähe nach Versehen aus. */
.marke img {
  height: 40px;
  width: auto;
}

/* Im blauen Fußbereich wird dasselbe Logo weiß ausgegeben. Das Original
   besteht aus genau einer Farbe auf Transparenz, deshalb genügt hier ein
   Filter — eine zweite Bilddatei, die beim nächsten Logowechsel vergessen
   wird, braucht es nicht. */
.logo-negativ {
  height: 46px;
  width: auto;
  margin-bottom: 14px;
  filter: brightness(0) invert(1);
}

.nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}

.nav a {
  color: var(--weiss);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 8px 6px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav a:hover {
  color: var(--weiss);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.nav a[aria-current='page'] {
  border-bottom-color: var(--weiss);
}

.kopf-telefon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--weiss);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.16);
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.kopf-telefon:hover {
  color: var(--weiss);
  background: rgba(255, 255, 255, 0.26);
}

/* Der Spenden-Knopf ist das einzige gefüllte Element im blauen Balken und
   braucht deshalb keine eigene Farbe: Weiß auf Blau ist der stärkste
   Kontrast, den die Palette hergibt. */
.kopf-spenden {
  background: var(--weiss);
  color: var(--blau);
  font-family: var(--font-titel);
  font-size: 15px;
  padding: 9px 20px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

.kopf-spenden:hover {
  color: var(--blau-dunkel);
}

.nav-schalter {
  display: none;
}

/* — Knöpfe — */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-titel);
  font-size: 16px;
  line-height: 1.2;
  padding: 13px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
}

.knopf-haupt {
  background: var(--blau);
  color: var(--weiss);
}

.knopf-haupt:hover {
  background: var(--blau-dunkel);
  color: var(--weiss);
}

.knopf-rand {
  background: transparent;
  color: var(--blau);
  border-color: var(--linie-stark);
}

.knopf-rand:hover {
  border-color: var(--blau);
}

.knopf-hell {
  background: var(--weiss);
  color: var(--blau);
}

.knopf-klein {
  font-size: 14px;
  padding: 9px 16px;
}

/* — Karten — */

.karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--weiss);
  border-radius: var(--radius-gross);
  padding: 20px;
  box-shadow: var(--schatten);
}

.karte-titel {
  font-family: var(--font-titel);
  font-size: 18px;
  line-height: 1.2;
}

.karte-text {
  margin: 0;
  font-size: 15px;
  color: var(--gedaempft);
  flex: 1;
}

a.karte {
  text-decoration: none;
  color: inherit;
}

a.karte:hover {
  box-shadow: 0 2px 10px rgba(0, 55, 95, 0.14);
}

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.raster-zwei {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(260px, 0.9fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

/* — Plaketten — */

.plakette {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--linie);
  color: var(--gedaempft);
}

.plakette-frei {
  background: var(--blau);
  color: var(--weiss);
  border-color: var(--blau);
}

/* — Blaue Vollflächen — */

.blaufeld {
  background: var(--blau);
  color: var(--weiss);
  border-radius: var(--radius-gross);
  padding: clamp(20px, 3vw, 28px);
}

.blaufeld a {
  color: var(--weiss);
}

.blaufeld h2,
.blaufeld h3 {
  color: var(--weiss);
}

.blaustreifen {
  background: var(--blau);
  color: var(--weiss);
}

.blaustreifen h2,
.blaustreifen h3 {
  color: var(--weiss);
}

.blaustreifen a:not(.knopf) {
  color: var(--weiss);
}

/* Der Hilfe-Kasten ist das auffälligste Element der Seite. Bewusst kein Rot:
   wer in einer Krise hier landet, soll beruhigt werden, nicht alarmiert. */
.hilfe {
  background: var(--blau);
  color: var(--weiss);
  border-radius: var(--radius-gross);
  padding: 20px 22px;
  max-width: 52ch;
}

.hilfe-titel {
  font-family: var(--font-titel);
  font-size: 18px;
  margin-bottom: 6px;
}

.hilfe p {
  margin: 0 0 6px;
  font-size: 15px;
}

.hilfe a {
  color: var(--weiss);
  font-weight: 600;
}

.hilfe-nummern {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 10px;
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding-top: 10px;
}

/* — Bilder — */

.bild-rahmen {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--sand-tief);
}

.bild-rahmen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bild-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--leise);
  font-size: 14px;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-gross);
}

.portrait {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sand-tief);
}

/* — Tabellen — */

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.tabelle th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leise);
  padding: 8px 10px;
  border-bottom: 1px solid var(--linie);
}

.tabelle td {
  padding: 10px;
  border-bottom: 1px solid var(--linie);
}

/* — Formulare — */

.feld {
  display: block;
  margin-bottom: 16px;
}

.feld > label {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
  color: var(--gedaempft);
}

.feld-hinweis {
  font-size: 13px;
  color: var(--leise);
  margin-top: 4px;
}

.eingabe {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--dunkelblau);
  background: var(--weiss);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
}

.eingabe:focus-visible {
  border-color: var(--blau);
}

textarea.eingabe {
  min-height: 140px;
  resize: vertical;
}

/* Dateiauswahl. Ohne eigene Regeln zeigt der Browser hier den Knopf des
   Betriebssystems — grau, eckig und in jedem System anders. */
input[type='file'].eingabe {
  padding: 8px 10px 8px 8px;
  cursor: pointer;
  line-height: 1.6;
  color: var(--gedaempft);
  font-size: 15px;
}

input[type='file'].eingabe::file-selector-button {
  font-family: var(--font-titel);
  font-size: 15px;
  color: var(--weiss);
  background: var(--blau);
  border: none;
  border-radius: var(--radius);
  padding: 9px 18px;
  margin-right: 14px;
  cursor: pointer;
}

input[type='file'].eingabe:hover::file-selector-button {
  background: var(--blau-dunkel);
}

input[type='file'].eingabe:focus-visible {
  border-color: var(--blau);
}

/* Ankreuzfelder in der Vereinsfarbe statt im Systemblau. */
input[type='checkbox'] {
  accent-color: var(--blau);
}

select.eingabe {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--blau) 50%),
    linear-gradient(135deg, var(--blau) 50%, transparent 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.honigtopf {
  position: absolute;
  left: -9999px;
}

.meldung {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 15px;
}

.meldung-success {
  background: var(--blau);
  color: var(--weiss);
}

.meldung-error {
  background: var(--weiss);
  color: var(--dunkelblau);
  border: 1px solid var(--linie-stark);
  border-left: 4px solid var(--blau);
}

/* — Fußbereich — */

.fuss {
  background: var(--blau);
  color: var(--weiss);
  margin-top: clamp(40px, 6vw, 72px);
}

.fuss-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
  padding-top: clamp(36px, 5vw, 56px);
  padding-bottom: 28px;
}

.fuss h2 {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}

.fuss a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 15px;
}

.fuss a:hover {
  color: var(--weiss);
  text-decoration: underline;
}

.fuss-liste {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.fuss-schluss {
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  padding: 16px var(--rand);
  text-align: center;
  font-size: 13px;
  opacity: 0.8;
}

/* — Beiträge und Termine — */

.beitrag-text {
  max-width: 68ch;
  font-size: 17px;
}

.beitrag-text p {
  margin-bottom: 1.1rem;
}

.termin {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.termin-datum {
  flex: none;
  width: 62px;
  text-align: center;
  background: var(--blau);
  color: var(--weiss);
  border-radius: var(--radius);
  padding: 8px 4px;
  line-height: 1.1;
}

.termin-tag {
  font-family: var(--font-titel);
  font-size: 22px;
  display: block;
}

.termin-monat {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* — Rubrikenfilter — */

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--linie-stark);
  color: var(--dunkelblau);
  text-decoration: none;
  background: var(--weiss);
}

.filter:hover {
  border-color: var(--blau);
  color: var(--blau);
}

.filter-aktiv,
.filter-aktiv:hover {
  background: var(--blau);
  border-color: var(--blau);
  color: var(--weiss);
}

/* — Bildergalerie — */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
  /* Ohne diese Zeile wären alle Kacheln so hoch wie die höchste, und Bilder
     ohne Bildunterschrift bekämen unten einen weißen Streifen. */
  align-items: start;
}

.galerie-bild {
  margin: 0;
  background: var(--weiss);
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten);
}

.galerie-bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.galerie-bild a:hover img {
  opacity: 0.92;
}

.galerie-bild figcaption {
  padding: 10px 14px 14px;
  font-size: 14px;
  color: var(--gedaempft);
}

/* — Brotkrumen — */

.brotkrumen {
  margin-bottom: 14px;
}

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--leise);
}

.brotkrumen li + li::before {
  content: '›';
  margin-right: 6px;
  color: var(--leise);
}

.brotkrumen a {
  color: var(--leise);
  text-decoration: none;
}

.brotkrumen a:hover {
  color: var(--blau);
  text-decoration: underline;
}

/* — Ratgeber — */

.inhalt-uebersicht {
  background: var(--weiss);
  border-radius: var(--radius-gross);
  padding: 18px 22px;
  max-width: 52ch;
  box-shadow: var(--schatten);
}

.inhalt-uebersicht ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 15px;
}

/* Hinweiskasten im Fließtext. Bewusst kein Rot, auch bei Warnungen:
   die Absätze, in denen er vorkommt, sind für Leser ohnehin belastend. */
.hinweis {
  background: var(--weiss);
  border-left: 4px solid var(--blau);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  margin: 1.4rem 0;
  font-size: 16px;
}

.hinweis p:last-child {
  margin-bottom: 0;
}

/* — Fragen — */

.fragen {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.frage {
  background: var(--weiss);
  border-radius: var(--radius-gross);
  padding: 4px 20px;
  box-shadow: var(--schatten);
}

.frage summary {
  font-family: var(--font-titel);
  font-size: 17px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary::after {
  content: '+';
  font-family: var(--font-text);
  font-size: 22px;
  color: var(--blau);
  flex: none;
}

.frage[open] summary::after {
  content: '–';
}

.frage p {
  font-size: 16px;
  color: var(--gedaempft);
}

.frage p:last-child {
  padding-bottom: 12px;
}

/* — Chat — */

.chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.chat-knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blau);
  color: var(--weiss);
  border: none;
  border-radius: 999px;
  font-family: var(--font-titel);
  font-size: 16px;
  padding: 14px 22px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 55, 95, 0.24);
}

.chat-knopf:hover {
  background: var(--blau-dunkel);
}

.chat-fenster {
  width: min(360px, calc(100vw - 40px));
  background: var(--weiss);
  border-radius: var(--radius-gross);
  box-shadow: 0 8px 30px rgba(0, 55, 95, 0.24);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(560px, calc(100vh - 120px));
}

.chat-kopf {
  background: var(--blau);
  color: var(--weiss);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-titel {
  font-family: var(--font-titel);
  font-size: 17px;
  margin: 0;
}

.chat-status {
  margin: 2px 0 0;
  font-size: 13px;
  opacity: 0.85;
}

.chat-schliessen {
  background: none;
  border: none;
  color: var(--weiss);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
}

.chat-hinweis {
  padding: 14px 18px;
  border-bottom: 1px solid var(--linie);
  background: var(--sand);
}

.chat-hinweis p {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--gedaempft);
}

.chat-datenschutz {
  font-size: 13px !important;
  color: var(--leise) !important;
  margin-bottom: 0 !important;
}

.chat-verlauf {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 120px;
}

.chat-zeile {
  display: flex;
  flex-direction: column;
  max-width: 85%;
}

.chat-besucher {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-team {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-blase {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-gross);
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-besucher .chat-blase {
  background: var(--blau);
  color: var(--weiss);
  border-bottom-right-radius: 4px;
}

.chat-team .chat-blase {
  background: var(--sand-tief);
  color: var(--dunkelblau);
  border-bottom-left-radius: 4px;
}

.chat-zeit {
  font-size: 12px;
  color: var(--leise);
  margin-top: 3px;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--linie);
  align-items: flex-end;
}

.chat-form textarea {
  flex: 1;
  font: inherit;
  font-size: 15px;
  color: var(--dunkelblau);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  padding: 9px 12px;
  resize: none;
  min-height: 44px;
}

.chat-fuss {
  margin: 0;
  padding: 0 18px 14px;
  font-size: 13px;
  color: var(--leise);
}

@media (max-width: 520px) {
  .chat {
    right: 12px;
    bottom: 12px;
    left: 12px;
    align-items: flex-end;
  }

  /* Der Knopf bleibt schmal, damit er nicht dauerhaft eine ganze Textzeile
     verdeckt. Erst das geöffnete Fenster nimmt die volle Breite. */
  .chat-knopf {
    font-size: 15px;
    padding: 12px 18px;
  }

  .chat-fenster {
    width: 100%;
  }
}

/* — Redaktionsbereich — */

.admin-kopf {
  background: var(--dunkelblau);
  color: var(--weiss);
}

.admin-kopf .nav a[aria-current='page'] {
  border-bottom-color: var(--weiss);
}

.admin-marke {
  font-family: var(--font-titel);
  font-size: 17px;
  color: var(--weiss);
  text-decoration: none;
  margin-right: auto;
}

.admin-flaeche {
  background: var(--weiss);
  border-radius: var(--radius-gross);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--schatten);
}

.admin-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.admin-liste {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.admin-liste th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leise);
  padding: 10px;
  border-bottom: 1px solid var(--linie);
}

.admin-liste td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}

.admin-liste tr:hover td {
  background: var(--sand);
}

.admin-aktionen {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.textknopf {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--blau);
  cursor: pointer;
  text-decoration: underline;
}

.status-an,
.status-aus {
  font-size: 13px;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.status-an {
  background: var(--blau);
  color: var(--weiss);
}

.status-aus {
  border: 1px solid var(--linie-stark);
  color: var(--leise);
}

.kennzahl {
  background: var(--weiss);
  border-radius: var(--radius-gross);
  padding: 18px 20px;
  box-shadow: var(--schatten);
}

.kennzahl-wert {
  font-family: var(--font-titel);
  font-size: 30px;
  line-height: 1.1;
}

.kennzahl-name {
  font-size: 14px;
  color: var(--leise);
}

.schalter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  cursor: pointer;
}

.schalter input {
  width: 20px;
  height: 20px;
  accent-color: var(--blau);
}

/* — Schmale Bildschirme — */

@media (max-width: 900px) {
  .raster-zwei {
    grid-template-columns: 1fr;
  }
}

/* Sieben Menüpunkte, Telefonnummer und Spenden-Knopf brauchen neben dem Logo
   rund 1050 px. Der Inhaltsbereich ist auf 1160 px begrenzt, deshalb liegt die
   Grenze bei etwa 1120 px Fensterbreite. Darunter wird das Menü aufklappbar,
   statt in zwei unruhige Zeilen zu brechen. */
@media (max-width: 1120px) {
  .kopf-innen {
    gap: 10px;
  }

  /* Reihenfolge in der schmalen Kopfzeile: erst das Menü, dann die
     Telefonnummer, dann Spenden. Das Wichtigste für Hilfesuchende steht
     damit vor dem Spendenknopf. */
  .kopf-telefon {
    order: 3;
  }

  .kopf-spenden {
    order: 4;
  }

  /* Ohne JavaScript aufklappbare Navigation. */
  .nav-schalter {
    display: block;
    order: 2;
    background: rgba(255, 255, 255, 0.16);
    color: var(--weiss);
    border: none;
    border-radius: var(--radius);
    font: inherit;
    font-size: 15px;
    padding: 9px 14px;
    cursor: pointer;
  }

  .nav {
    order: 5;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    display: none;
    padding-bottom: 8px;
  }

  .nav a {
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .nav a[aria-current='page'] {
    border-bottom-color: var(--weiss);
  }

  .nav-umschalter:checked ~ .nav {
    display: flex;
  }

  .termin {
    gap: 12px;
  }
}

@media print {
  .kopf,
  .fuss,
  .knopf {
    display: none;
  }
}