/* ============================================================
   digitales Pflegebistro – zentrales Stylesheet
   Einfache Website ohne CMS.
   Aufbau und Bedienung wie wir-pflegen-sh.de, Farben aus dem
   Pflegebistro-Logo, Fußbereich in der Vereinsfarbe.
   ============================================================ */

:root {
  --tuerkis: #0f9d8c;
  --tuerkis-dunkel: #0a7365;
  --blau: #1a5fa8;
  --blau-dunkel: #14497f;
  --rot: #d40f2c;
  --creme: #fdf5e8;
  --sand: #eef6f4;
  --text: #33403f;
  --grau: #64726f;
  --hell: #ffffff;
  --rand: #e5e2da;
  --fuss: #26697a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  line-height: 1.65;
  background: var(--hell);
  font-size: 1.05rem;
}

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

a { color: var(--tuerkis-dunkel); }
a:hover { color: var(--blau); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--rot); color: #fff;
  padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; color: #fff; }

/* ---------- Kopfbereich ---------- */
header {
  background: var(--hell);
  border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 50;
}
.kopf {
  max-width: 1200px; margin: 0 auto;
  padding: .1rem 1.2rem .55rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.logo { display: block; }
.logo img { height: 68px; width: auto; }

nav ul {
  list-style: none; display: flex; gap: 1.1rem;
  flex-wrap: wrap; align-items: center; justify-content: flex-end;
}
nav a {
  text-decoration: none; color: var(--text);
  font-weight: 500; font-size: .98rem;
  padding: .4rem 0; border-bottom: 3px solid transparent; white-space: nowrap;
}
nav a:hover, nav a[aria-current="page"] {
  color: var(--tuerkis-dunkel); border-bottom-color: var(--tuerkis);
}

.topleiste {
  max-width: 1200px; margin: 0 auto;
  padding: .45rem 1.2rem 0;
  display: flex; justify-content: flex-end; align-items: center; gap: .9rem;
}
.topleiste .textlink {
  text-decoration: none; color: var(--text);
  font-weight: 500; margin-right: .5rem; white-space: nowrap;
}
.topleiste .textlink:hover, .topleiste .textlink[aria-current="page"] { color: var(--tuerkis-dunkel); }

.kreis {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
}
.kreis-voll { background: var(--tuerkis); color: #fff; border: none; }
.kreis-voll:hover { background: var(--tuerkis-dunkel); color: #fff; }
.kreis-rand { border: 1.5px solid #c9c5bc; color: var(--text); background: #fff; }
.kreis-rand:hover { border-color: var(--tuerkis); color: var(--tuerkis-dunkel); }

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

/* Barrierefreiheits-Leiste */
.a11y-panel {
  background: var(--tuerkis-dunkel); color: #fff;
  display: flex; justify-content: flex-end; align-items: center;
  gap: .7rem; flex-wrap: wrap; padding: .6rem 1.2rem;
}
.a11y-panel[hidden] { display: none; }
.a11y-titel { font-weight: 600; }
.a11y-panel button {
  font: inherit; padding: .4rem 1rem; border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,.7);
  background: transparent; color: #fff; cursor: pointer;
}
.a11y-panel button:hover { background: rgba(255,255,255,.15); }

html.schrift-gross { font-size: 122%; }

html.hoher-kontrast body { background: #fff; color: #000; }
html.hoher-kontrast h1, html.hoher-kontrast h2, html.hoher-kontrast h3 { color: #000; }
html.hoher-kontrast p.unterzeile, html.hoher-kontrast .einleitung,
html.hoher-kontrast .meldung-datum, html.hoher-kontrast .termin .ort { color: #000; }
html.hoher-kontrast a { color: #0000c8; }
html.hoher-kontrast nav a, html.hoher-kontrast .topleiste .textlink { color: #000; }
html.hoher-kontrast nav a:hover, html.hoher-kontrast nav a[aria-current="page"] {
  color: #0000c8; border-bottom-color: #0000c8;
}
html.hoher-kontrast .buehne, html.hoher-kontrast .kachel, html.hoher-kontrast .termin,
html.hoher-kontrast .sandflaeche, html.hoher-kontrast .hinweis,
html.hoher-kontrast .datei { background: #fff; }
html.hoher-kontrast .kachel, html.hoher-kontrast .termin, html.hoher-kontrast .hinweis,
html.hoher-kontrast .datei { border: 2px solid #000; }
html.hoher-kontrast .knopf, html.hoher-kontrast .knopf-blau { background: #000; color: #fff; }
html.hoher-kontrast .knopf-rand { background: #fff; color: #000; border-color: #000; }
html.hoher-kontrast footer { background: #000; }
html.hoher-kontrast .kreis-voll, html.hoher-kontrast .a11y-panel { background: #000; }
html.hoher-kontrast .untermenue { background: #fff; border-color: #000; }
html.hoher-kontrast .untermenue a { color: #000; }

/* Mobiles Menü */
.menu-toggle { display: none; }
.menu-label {
  display: none; cursor: pointer; font-size: 1.9rem; line-height: 1;
  padding: .3rem .6rem; border: 1px solid var(--rand); border-radius: 6px;
}
@media (max-width: 980px) {
  .kopf { flex-wrap: wrap; }
  .menu-label { display: block; margin-left: auto; }
  nav { width: 100%; display: none; }
  .menu-toggle:checked ~ nav { display: block; }
  /* Menü auf dem Handy: alle Einträge gleich groß, mittig, über die
     volle Breite. Auch die Einträge des Untermenüs. */
  nav ul { flex-direction: column; gap: 0; padding: .5rem 0; align-items: stretch; }
  nav li { border-top: 1px solid var(--rand); }
  nav a {
    display: block; padding: .85rem .6rem; border-bottom: none;
    text-align: center; font-size: 1.05rem;
  }
  .logo img { height: 54px; }
  .topleiste { gap: .55rem; }
  .topleiste .textlink { font-size: .92rem; margin-right: 0; }
  .kreis { width: 32px; height: 32px; }
}

/* Untermenü */
.hat-untermenue { position: relative; }
.hat-untermenue > a::after { content: "\25BE"; font-size: .75em; margin-left: .3em; vertical-align: middle; }
.aktiv-abschnitt > a { color: var(--tuerkis-dunkel); }
.untermenue {
  list-style: none; margin: 0; padding: .3rem 0;
  position: absolute; top: 100%; left: 0; min-width: 230px;
  background: var(--hell); border: 1px solid var(--rand);
  border-top: 3px solid var(--tuerkis);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  display: none; flex-direction: column; gap: 0; z-index: 60;
}
.hat-untermenue:hover > .untermenue,
.hat-untermenue:focus-within > .untermenue { display: flex; }
.untermenue li { border: none; }
.untermenue a { display: block; padding: .55rem 1.1rem; border-bottom: none; white-space: nowrap; }
.untermenue a:hover, .untermenue a[aria-current="page"] {
  color: var(--tuerkis-dunkel); background: var(--sand); border-bottom: none;
}
@media (max-width: 980px) {
  .hat-untermenue { position: static; }
  .hat-untermenue > a::after { content: ""; margin: 0; }
  .untermenue {
    position: static; display: flex; min-width: 0;
    border: none; box-shadow: none; background: transparent; padding: 0;
  }
  .untermenue li { border-top: 1px solid var(--rand); }
  .untermenue a { padding: .85rem .6rem; text-align: center; font-size: 1.05rem; }
}

/* ---------- Bühne ---------- */
.buehne { background: var(--creme); overflow: hidden; }
.buehne-inhalt {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch; gap: 0;
}
/* Rechts genug Platz lassen, damit kein Text unter die schräge Bildkante
   läuft. Der Abstand steht in Pixeln, weil auch die Bildkante in Pixeln
   sitzt. So bleibt er gleich, wenn Besucherinnen und Besucher die Schrift
   vergrößern. */
.buehne-text { max-width: 720px; margin-left: auto; padding: 3.4rem 80px 3.4rem 1.2rem; align-self: center; }
.buehne-text h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 400;
  color: var(--blau-dunkel); line-height: 1.2; margin-bottom: 1rem;
  text-wrap: balance;
}
.buehne-text h1 .akzent { color: var(--tuerkis-dunkel); }
.buehne-text p.unterzeile { font-size: 1.25rem; color: var(--grau); margin-bottom: 1.4rem; }
/* Das Bild füllt seine Spalte über absolute Positionierung. Safari rechnet
   prozentuale Höhen in Rasterzellen anders als Chrome, mit dieser Bauweise
   sieht es in allen Browsern gleich aus. */
.buehne-bild {
  position: relative;
  overflow: hidden;
  align-self: stretch;
  min-height: 420px;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -70px;
}
.buehne-bild img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
@media (max-width: 860px) {
  .buehne-inhalt { grid-template-columns: 1fr; }
  .buehne-bild {
    order: -1; margin: 0; min-height: 0;
    height: 46vw; max-height: 340px;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  }
  .buehne-bild img { object-position: 55% 30%; }
  /* Auf dem Handy ist die untere Bildkante schräg beschnitten.
     Der Hinweis rutscht deshalb nach oben, sonst wird er abgeschnitten. */
  .buehne-bild .ki-hinweis { bottom: 15%; }
  .buehne-text { padding: 2.5rem 1.2rem; margin: 0; max-width: none; }
}

/* ---------- Inhalt ---------- */
main { display: block; }
.abschnitt { max-width: 900px; margin: 0 auto; padding: 2.5rem 1.2rem; }
.abschnitt-breit { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.2rem; }
.sandflaeche { background: var(--sand); }

h1, h2, h3 { color: var(--blau-dunkel); font-weight: 500; line-height: 1.25; }
h1 { font-size: 2.2rem; margin-bottom: 1.2rem; }
h2 { font-size: 1.6rem; margin: 2rem 0 .8rem; }
h2:first-child, .abschnitt-breit > h2:first-child { margin-top: 0; }
h3 { font-size: 1.25rem; margin: 1.5rem 0 .6rem; }
p { margin-bottom: 1rem; }
ul, ol { margin: 0 0 1rem 1.4rem; }
li { margin-bottom: .4rem; }
hr { border: none; border-top: 1px solid var(--rand); margin: 2rem 0; }
.einleitung { font-size: 1.2rem; color: var(--grau); }

/* Kacheln */
.kacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem; margin-top: 1.5rem;
}
.kachel {
  border: 1px solid var(--rand); border-radius: 4px; padding: 1.7rem;
  background: var(--hell); display: flex; flex-direction: column; align-items: flex-start;
}
.kachel h3 { margin-top: 0; }
.kachel p { margin-bottom: 1.1rem; }
.kachel .knopf { margin-top: auto; }
.kachel-symbol {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--sand); color: var(--tuerkis-dunkel);
  display: flex; align-items: center; justify-content: center; margin-bottom: .9rem;
}

/* Knöpfe */
.knopf {
  display: inline-block; background: var(--tuerkis); color: #fff;
  text-decoration: none; padding: .7rem 1.5rem; border-radius: 4px;
  font-weight: 600; border: none; font-size: 1rem; cursor: pointer;
}
.knopf:hover { background: var(--tuerkis-dunkel); color: #fff; }
.knopf-blau { background: var(--blau); }
.knopf-blau:hover { background: var(--blau-dunkel); }
.knopf-rand { background: transparent; color: var(--blau-dunkel); border: 1.5px solid var(--blau); }
.knopf-rand:hover { background: var(--blau); color: #fff; }

/* Termine */
.termine { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.termin {
  background: var(--hell); border: 1px solid var(--rand);
  border-left: 5px solid var(--tuerkis); border-radius: 0 4px 4px 0;
  padding: 1.5rem; display: flex; flex-direction: column;
}
.termin .datum { color: var(--tuerkis-dunkel); font-weight: 600; margin-bottom: .3rem; }
.termin .ort { color: var(--grau); font-size: .95rem; margin-bottom: .8rem; }
.termin h3 { margin: 0 0 .5rem; }
.termin .knopf { align-self: flex-start; }
.termin-liste .termin { margin-bottom: 1.5rem; }
.abschluss { margin-top: 1.8rem; }

/* Anmeldung ausklappbar */
details.anmeldung {
  margin-top: 1rem; border-top: 1px solid var(--rand); padding-top: .8rem;
}
details.anmeldung > summary {
  cursor: pointer; font-weight: 600; color: var(--tuerkis-dunkel);
  list-style-position: inside;
}
details.anmeldung[open] > summary { margin-bottom: 1rem; }

/* Anmeldung über Zoom */
.anmeldung-zoom { margin-top: 1rem; border-top: 1px solid var(--rand); padding-top: 1.1rem; }
.anmeldung-zoom p { margin-bottom: .7rem; }
.hinweis-klein { font-size: .95rem; color: var(--grau); margin-bottom: 0; }
html.hoher-kontrast .hinweis-klein { color: #000; }

/* Meldungen */
.meldungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.meldungen .meldung { border-top: 3px solid var(--rand); border-bottom: none; padding: 1.1rem 0 0; margin: 0; }
.meldung { border-bottom: 1px solid var(--rand); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.meldung:last-of-type { border-bottom: none; }
.meldung h2 { margin-top: .1rem; }
.meldung h3 { margin-top: 0; margin-bottom: .5rem; }
.meldung-datum { color: var(--grau); font-size: .95rem; margin-bottom: .2rem; }
.blaettern { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; }

/* Hinweiskasten */
.hinweis {
  background: var(--creme); border-left: 5px solid var(--tuerkis);
  padding: 1.2rem 1.4rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0;
}

/* Downloadliste */
.dateien { list-style: none; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.datei {
  border: 1px solid var(--rand); border-radius: 4px; padding: 1.1rem 1.3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.datei .titel { font-weight: 600; color: var(--blau-dunkel); }
.datei .art { color: var(--grau); font-size: .92rem; }

/* Förderhinweis im Fußbereich */
.fuss-foerderung {
  font-size: .92rem;
  border-top: 1px solid rgba(255,255,255,.25);
  padding-top: .9rem;
  margin-top: 1.2rem;
  margin-bottom: 0;
}

/* ---------- Kennzeichnung KI-erzeugter Bilder ----------
   Pflicht nach Art. 50 Abs. 4 VO (EU) 2024/1689 für fotorealistische,
   künstlich erzeugte Bilder. Der Hinweis steht als echter Text im HTML,
   nicht in der Bilddatei, damit Screenreader ihn vorlesen.

   Verwendung bei einem einzelnen Bild:
     <span class="bild-ki">
       <img src="..." alt="...">
       <span class="ki-hinweis">Mit KI erzeugtes Bild</span>
     </span>
   Bei Bildern, die schon in einem Element mit position: relative stecken,
   genügt der Hinweis allein. */
.bild-ki { position: relative; display: block; }
.ki-hinweis {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  z-index: 2;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35;
  padding: .18rem .45rem;
  border-radius: 3px;
  white-space: nowrap;
}
html.hoher-kontrast .ki-hinweis { background: #000; color: #fff; }

/* Hinweisbanner, zum Beispiel Woche der pflegenden Angehörigen */
.banner {
  background: var(--fuss); color: #fff; border-radius: 4px;
  padding: 2rem; display: grid; grid-template-columns: 1fr 260px;
  gap: 2rem; align-items: center;
}
@media (max-width: 800px) { .banner { grid-template-columns: 1fr; padding: 1.6rem; } }
.banner h2 { color: #fff; margin: 0 0 .5rem; font-size: 1.7rem; }
.banner p { margin-bottom: .8rem; }
.banner .datum { font-size: 1.15rem; font-weight: 600; }
.banner .knopf { background: #fff; color: var(--fuss); margin-top: .4rem; }
.banner .knopf:hover { background: var(--creme); color: var(--fuss); }
.banner-bild { background: #fff; border-radius: 4px; padding: .9rem; }
.banner-bild img { width: 100%; height: auto; }
html.hoher-kontrast .banner { background: #fff; color: #000; border: 2px solid #000; }
html.hoher-kontrast .banner h2 { color: #000; }
html.hoher-kontrast .banner .knopf { background: #000; color: #fff; }

/* Logos im Fußbereich, auf weißer Fläche damit sie lesbar bleiben */
.fuss-logo {
  background: #fff; border-radius: 4px; padding: .7rem .9rem;
  max-width: 230px; height: auto;
}
.fuss-logo-land { max-width: 260px; margin-top: .3rem; }

/* ---------- Formulare ---------- */
form .feld { margin-bottom: 1.2rem; }
label { display: block; font-weight: 600; margin-bottom: .3rem; }
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; padding: .7rem; border: 1px solid var(--grau);
  border-radius: 4px; font: inherit; background: #fff;
}
textarea { min-height: 160px; resize: vertical; }
.feld-wahl { display: flex; gap: .6rem; align-items: flex-start; }
.feld-wahl input { margin-top: .45rem; }
.feld-wahl label { font-weight: 400; margin: 0; }
.pflicht { color: var(--rot); }
.honigtopf { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.meldung-ok, .meldung-fehler { padding: 1rem 1.2rem; border-radius: 4px; margin-bottom: 1.5rem; }
.meldung-ok { background: #e7f2ec; border: 1px solid var(--tuerkis-dunkel); }
.meldung-fehler { background: #fbe9ec; border: 1px solid var(--rot); }

.kontaktspalten { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 800px) { .kontaktspalten { grid-template-columns: 1fr; } }

/* ---------- Fußbereich ---------- */
footer { background: var(--fuss); color: #fff; margin-top: 0; }
.fuss {
  max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.2rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem;
}
footer h2 { color: #fff; font-size: 1.15rem; margin: 0 0 .8rem; }
footer a { color: #fff; }
footer a:hover { color: var(--creme); }
footer ul { list-style: none; margin: 0; }
.fuss .knopf-rand { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.75); }
.fuss .knopf-rand:hover { background: rgba(255,255,255,.15); color: #fff; }
.fuss-leiste {
  border-top: 1px solid rgba(255,255,255,.25);
  text-align: center; padding: 1rem; font-size: .95rem;
}

/* Druckansicht */
@media print {
  header, footer, .buehne-bild, .a11y-panel, .logoleiste { display: none; }
  body { font-size: 11pt; }
  /* Wird ein KI-Bild gedruckt, steht der Hinweis als Zeile darunter,
     schwarz auf weiß. Das Bild der Bühne wird nicht gedruckt. */
  .ki-hinweis {
    position: static;
    display: block;
    background: none;
    color: #000;
    padding: .15rem 0 0;
    font-size: 9pt;
    white-space: normal;
  }
}