/*
  Minion KIDS – Stylesheet der Website (minionkids.de)
  Modern, minimalistisch, vollständig responsiv. Keine Frameworks –
  natives CSS (Grid/Flexbox/Custom Properties) und Vanilla JS.
*/

/* =========================================================
   1. CSS-VARIABLEN (DESIGN-TOKENS)
   ========================================================= */
:root {
  /* Farben – abgeleitet vom Logo (Blau, Gelb, Weiß), dezent eingesetzt */
  --color-ink: #24313F;          /* Haupttextfarbe, kein reines Schwarz */
  --color-ink-soft: #5C6B78;     /* gedämpfter Text / Meta-Infos */
  --color-harbor: #2C5F8A;       /* Primärblau */
  --color-harbor-deep: #1D4160;  /* dunkleres Blau (Hover, Footer) */
  --color-harbor-pale: #EAF1F7;  /* sehr helles Blau für Flächen */
  --color-sunshine: #F6B93B;     /* Akzentgelb – sparsam einsetzen */
  --color-sunshine-deep: #9A6300; /* dunkles Gelb/Ocker für Text auf hellem Grund (WCAG AA, ~5:1) */
  --color-paper: #FFFFFF;        /* Basis-Hintergrund */
  --color-cloud: #F4F7FA;        /* alternierender Sektionshintergrund */
  --color-border: #E1E8EE;       /* dezente Trennlinien */

  /* Typografie – klassisch & extrem gut lesbar, keine Web-Font-Ladezeit */
  --font-heading: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fluid Type Scale */
  --fs-sm:   clamp(0.85rem, 0.81rem + 0.2vw, 0.95rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-md:   clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-lg:   clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  --fs-xl:   clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  --fs-2xl:  clamp(2.3rem, 1.7rem + 2.4vw, 3.5rem);

  /* Abstände */
  --space-2xs: 0.4rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: clamp(2.5rem, 2rem + 2vw, 4rem);
  --space-xl: clamp(4rem, 3rem + 4vw, 7rem);

  /* Layout */
  --container-width: 1200px;
  --container-narrow: 800px;
  --gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem);

  /* Sonstiges */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(29, 65, 96, 0.08);
  --shadow-md: 0 10px 30px rgba(29, 65, 96, 0.12);
  --transition: 180ms ease;
}

/* =========================================================
   2. RESET & GRUNDLAGEN
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-harbor-deep);
  margin: 0 0 var(--space-sm);
  /* Deutsche Komposita sind laenger als ein Telefondisplay: "Betreuungsvertrag"
     brauchte 357 von 328 verfuegbaren Pixeln und schob die ganze Seite auf.
     Getrennt wird nach den Regeln der Seitensprache (lang="de"). */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-harbor); text-underline-offset: 3px; transition: color var(--transition); }
a:hover { color: var(--color-harbor-deep); }

ul, ol { padding-left: 1.2em; }

address { font-style: normal; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Sichtbarer Fokus-Zustand – Barrierefreiheit geht vor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-sunshine);
  outline-offset: 2px;
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screenreader-Only / Skip-Link */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  top: -50px;
  left: var(--space-sm);
  background: var(--color-harbor-deep);
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition);
}
.skip-link:focus {
  top: var(--space-sm);
  clip: auto;
  width: auto;
  height: auto;
}

/* =========================================================
   3. LAYOUT-HELFER
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.entry-content--narrow,
.container.entry-content--narrow {
  max-width: var(--container-narrow);
}

.mx-auto { margin-inline: auto; }

section { padding-block: var(--space-lg); }

.bg-cloud { background: var(--color-cloud); }

/* =========================================================
   4. BUTTONS
   ========================================================= */
/* ---- [hidden] durchsetzen ----
   Der Browser versteckt Elemente mit diesem Merkmal ueber display: none -
   aber aus seinem eigenen Blatt, und jede Regel hier schlaegt es. Ein
   .btn mit display: inline-block blieb deshalb sichtbar, obwohl das
   Skript ihn versteckt hatte. Dreimal auf dasselbe hereingefallen: bei
   der Unterschrift hinter der Klappe, beim Knopf zum Leeren der Filter
   und beim Aktualisieren der Mailvorschau.

   !important ist hier die Ausnahme, die die Regel bestaetigt: "nicht
   darstellen" ist keine Gestaltungsfrage, ueber die sich streiten
   liesse. */
[hidden] { display: none !important; }

.btn {
  display: inline-block;
  font-weight: 600;
  padding: 0.85em 1.8em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
}
.btn--primary {
  background: var(--color-harbor);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-harbor-deep);
  color: #fff;
}
.btn--outline {
  background: transparent;
  border-color: var(--color-paper);
  color: var(--color-paper);
}
.btn--outline:hover {
  background: var(--color-paper);
  color: var(--color-harbor-deep);
}

/* =========================================================
   5. HEADER & NAVIGATION
   ========================================================= */
.site-header {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 500;
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  padding-block: 0.9em;
}
/* Die Reiter sitzen links neben dem Logo statt am aeusseren Rand: Mit dem
   hoeheren Logo klaffte dazwischen sonst eine grosse Luecke. */
.site-header__inner .main-navigation { margin-right: auto; }
.site-header__inner .menu-toggle { margin-left: auto; }

.site-branding .site-title-link { text-decoration: none; display: block; }
.site-branding .site-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-harbor-deep);
}
/* Das neue Logo ist deutlich hoeher als breit gebaut (1,43:1 statt 3:1).
   Bei der alten Hoehe waere die Unterzeile „KINDERTAGESPFLEGE" nicht mehr
   lesbar gewesen, deshalb steht es jetzt groesser. */
.site-logo { height: 96px; width: auto; }
@media (max-width: 780px) {
  .site-logo { height: 68px; }
}
@media (max-width: 420px) {
  .site-logo { height: 56px; }
}

.main-navigation .primary-menu {
  list-style: none;
  display: flex;
  gap: clamp(1rem, 0.5rem + 2vw, 2.2rem);
  margin: 0;
  padding: 0;
}
.main-navigation .primary-menu a {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  padding: 0.4em 0;
  border-bottom: 2px solid transparent;
}
.main-navigation .primary-menu a:hover,
.main-navigation .primary-menu li.current_page_item > a {
  color: var(--color-harbor);
  border-bottom-color: var(--color-sunshine);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.menu-toggle__bar {
  display: block;
  height: 2px;
  width: 26px;
  background: var(--color-harbor-deep);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 780px) {
  .menu-toggle { display: flex; }
  .main-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .main-navigation.is-open { max-height: 500px; }
  .main-navigation .primary-menu {
    flex-direction: column;
    gap: 0;
    padding: var(--space-xs) var(--gutter) var(--space-sm);
  }
  .main-navigation .primary-menu a { display: block; padding: 0.7em 0; }
}

/* =========================================================
   6. HERO (STARTSEITE)
   ========================================================= */
.hero {
  background: linear-gradient(180deg, var(--color-harbor-pale) 0%, var(--color-paper) 100%);
  text-align: center;
  padding-block: var(--space-xl);
}
.hero__title { margin-bottom: var(--space-2xs); }
.hero__motto {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-harbor);
  margin-bottom: var(--space-md);
}
.hero__inner { max-width: 720px; margin-inline: auto; }

/* ---- Google-Bewertung (dezentes Vertrauenssignal) ---- */
.google-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* auf sehr schmalen Displays lieber umbrechen als kürzen */
  gap: 0.5em;
  max-width: 100%;
  margin-top: var(--space-sm);
  padding: 0.5em 1.1em;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm);
  color: var(--color-ink);
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.google-rating:hover {
  color: var(--color-ink);
  border-color: var(--color-harbor);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.google-rating__stars {
  color: var(--color-sunshine);
  letter-spacing: 0.08em;
  line-height: 1;
}
.google-rating__wert { font-weight: 700; }
.google-rating__meta { color: var(--color-ink-soft); }
.hero__media { margin-top: var(--space-lg); }
.hero__media picture { display: block; }
.hero__image {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* =========================================================
   7. BANNER „FREIE PLÄTZE“ – das eine auffällige Element
   ========================================================= */
.banner-freie-plaetze {
  background: var(--color-sunshine);
  color: var(--color-harbor-deep);
}
.banner-freie-plaetze .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding-block: 0.9em;
  text-align: center;
}
.banner-freie-plaetze p {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-base);
}
.banner-freie-plaetze__icon { font-size: 1.2em; }

/* =========================================================
   7b. SEKTIONS-ÜBERSCHRIFT MIT GELBEM AKZENT
   ========================================================= */
.section-title { text-align: center; }
.section-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background: var(--color-sunshine);
  border-radius: 2px;
  margin: 0.35em auto 0;
}

/* =========================================================
   7c. VORTEILE (STARTSEITE)
   ========================================================= */
.section-intro {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-ink-soft);
}
.vorteile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.vorteil { text-align: center; }
.vorteil__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-harbor);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-xs);
}
.vorteil__icon svg { width: 30px; height: 30px; }
.vorteil h3 { font-size: var(--fs-md); margin-bottom: 0.3em; }
.vorteil p { color: var(--color-ink-soft); font-size: var(--fs-sm); margin: 0; }

/* =========================================================
   7d. TEAM-TEASER (STARTSEITE)
   ========================================================= */
.team-teaser { text-align: center; }
.team-teaser__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-block: var(--space-md);
}
.team-teaser__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-harbor-pale);
  margin-inline: auto;
  box-shadow: var(--shadow-sm);
}
.team-teaser__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-teaser__photo .team-card__placeholder { width: 100%; height: 100%; }
.team-teaser__name {
  margin: 0.6em 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-harbor-deep);
}
.team-teaser__cta { margin: 0; }

/* =========================================================
   8. TEASER-GRID (STARTSEITE)
   ========================================================= */
/* Flexbox statt Grid: bei fünf Kacheln bleibt sonst eine allein links in der
   zweiten Reihe hängen. So werden angebrochene Reihen mittig ausgerichtet,
   und die Kacheln bleiben breit genug für zweizeilige Überschriften. */
.teaser-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}
.teaser-grid > * {
  flex: 1 1 300px;
  /* begrenzt die Breite, damit eine angebrochene Reihe nicht überdehnt wirkt */
  max-width: 380px;
}
@media (max-width: 700px) {
  /* Auf schmalen Schirmen sollen die Kacheln die volle Breite nutzen */
  .teaser-grid > * { max-width: none; }
}
.teaser-card {
  display: block;
  background: var(--color-cloud);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-decoration: none;
  color: var(--color-ink);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.teaser-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-harbor);
}
.teaser-card h2 {
  font-size: var(--fs-md);
  color: var(--color-harbor-deep);
  margin-bottom: 0.3em;
}
.teaser-card p { color: var(--color-ink-soft); margin: 0; font-size: var(--fs-sm); }

/* =========================================================
   9. PAGE HERO (UNTERSEITEN)
   ========================================================= */
.page-hero {
  background: var(--color-harbor-pale);
  padding-block: var(--space-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.page-hero h1 { margin: 0; }

.entry-content { padding-block: var(--space-lg); }
.entry-content :where(h2, h3) { margin-top: var(--space-md); }
.page-featured-image { margin-bottom: var(--space-md); border-radius: var(--radius-md); overflow: hidden; }

/* =========================================================
   10. TEAM (ÜBER UNS)
   ========================================================= */
.team-section { padding-block: var(--space-lg); }
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 900px;
  margin-inline: auto;
}
.team-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-md);
  align-items: start;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.team-card__photo {
  width: 140px; height: 140px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-harbor-pale);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__placeholder { width: 100%; height: 100%; background: var(--color-harbor-pale); }
.team-card__name { margin: 0 0 0.2em; font-size: var(--fs-md); }
.team-card__position {
  color: var(--color-sunshine-deep);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-xs);
}
.team-card__bio { color: var(--color-ink-soft); font-size: var(--fs-sm); }
.team-card__bio p { margin-bottom: 0.8em; }
.team-card__bio p:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .team-card { grid-template-columns: 1fr; text-align: center; }
  .team-card__photo { margin-inline: auto; }
  .team-card__bio { text-align: left; }
}

/* =========================================================
   11. GALERIE (RÄUMLICHKEITEN & UMGEBUNG)
   ========================================================= */
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-xs);
  margin-block: var(--space-md);
}
.galerie-grid figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.galerie-grid img {
  transition: transform 320ms ease;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.galerie-grid figure:hover img { transform: scale(1.04); }
.galerie-grid figcaption {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  padding: 0.5em 0.6em;
}
.galerie-grid__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.galerie-grid__zoom:focus-visible {
  outline: 3px solid var(--color-sunshine);
  outline-offset: -3px;
}

/* ---- Lightbox (großes Bild als Overlay) ---- */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(94vw, 1100px);
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(29, 65, 96, 0.75);
  backdrop-filter: blur(6px);
}
.lightbox[open] { animation: lightbox-in 240ms ease; }
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox__figure { margin: 0; }
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  margin-inline: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.lightbox__caption {
  color: #fff;
  font-size: var(--fs-base);
  text-align: center;
  padding-top: 0.8em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.lightbox__close,
.lightbox__nav {
  position: fixed;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.08);
}
.lightbox__close {
  top: 1rem;
  right: 1rem;
  font-size: 1.7rem;
}
.lightbox__nav { top: calc(50% - 1.375rem); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }

@media (max-width: 620px) {
  .lightbox__nav { top: auto; bottom: 1rem; }
  .lightbox__nav--prev { left: calc(50% - 3.5rem); }
  .lightbox__nav--next { right: calc(50% - 3.5rem); }
}

/* =========================================================
   11b. FAQ (HÄUFIGE FRAGEN)
   ========================================================= */
.faq-liste { margin-block: var(--space-md); }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  margin-bottom: var(--space-xs);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item[open] {
  border-color: var(--color-harbor);
  box-shadow: var(--shadow-sm);
}
.faq-item__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 0.9em 1.1em;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-harbor-deep);
  cursor: pointer;
  list-style: none; /* Standard-Dreieck ausblenden */
}
.faq-item__frage::-webkit-details-marker { display: none; }
.faq-item__frage:focus-visible {
  outline: 3px solid var(--color-sunshine);
  outline-offset: -3px;
  border-radius: var(--radius-md);
}
/* Eigenes Plus-Zeichen, das sich beim Öffnen zum Minus dreht */
.faq-item__frage::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.4em;
  line-height: 1;
  color: var(--color-harbor);
  transition: transform var(--transition);
}
.faq-item[open] .faq-item__frage::after { transform: rotate(45deg); }
.faq-item__antwort {
  padding: 0 1.1em 1.1em;
  color: var(--color-ink-soft);
}

/* =========================================================
   12. TABELLE (BETREUUNGSZEITEN)
   ========================================================= */
table.betreuungszeiten {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-md);
  font-size: var(--fs-base);
}
table.betreuungszeiten th,
table.betreuungszeiten td {
  padding: 0.9em 1em;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
table.betreuungszeiten thead th {
  background: var(--color-harbor);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
}
table.betreuungszeiten tbody tr:nth-child(even) { background: var(--color-cloud); }

@media (max-width: 620px) {
  table.betreuungszeiten thead { display: none; }
  table.betreuungszeiten tr { display: block; border-bottom: 2px solid var(--color-border); }
  table.betreuungszeiten td {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    border-bottom: 1px dashed var(--color-border);
  }
  table.betreuungszeiten td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--color-harbor-deep);
  }
}

/* =========================================================
   13. KONTAKTSEITE
   ========================================================= */
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  align-items: start;
}
@media (max-width: 860px) {
  .kontakt-grid { grid-template-columns: 1fr; }
}
.kontakt-address { display: block; margin-block: var(--space-sm); line-height: 1.8; }
.kontakt-map { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); margin-top: var(--space-sm); }
.kontakt-map iframe { display: block; }
.kontakt-map--placeholder {
  background: var(--color-harbor-pale);
  border: 1px dashed var(--color-harbor);
  box-shadow: none;
  padding: var(--space-md);
  text-align: center;
}
.kontakt-map__titel { margin-bottom: 0.3em; color: var(--color-harbor-deep); }
.kontakt-map__hinweis {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  max-width: 420px;
  margin-inline: auto;
}
.kontakt-map__profil {
  font-size: var(--fs-sm);
  margin-top: var(--space-2xs);
}

.kontakt-form {
  background: var(--color-cloud);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.form-row { margin-bottom: var(--space-sm); display: flex; flex-direction: column; gap: 0.35em; }
.form-row label { font-weight: 600; font-size: var(--fs-sm); }
.form-row input,
.form-row select,
.form-row textarea {
  padding: 0.7em 0.85em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { border-color: var(--color-harbor); }
.form-row--hidden { position: absolute; left: -9999px; }

.form-message {
  padding: 0.9em 1.1em;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  font-weight: 600;
}
.form-message--success { background: #E4F3E7; color: #276238; }
.form-message--error { background: #FBE7E7; color: #8A2A2A; }
.form-message--hinweis {
  background: var(--color-harbor-pale);
  color: var(--color-harbor-deep);
  font-weight: 400;
}
.form-message ul { margin: 0.5em 0 0; padding-left: 1.2em; }

/* =========================================================
   13c. BETREUUNGSVERTRAG (ONLINE-FORMULAR)
   ========================================================= */
.vertrag-form { background: var(--color-paper); padding: 0; border: 0; }

.vertrag-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  /* Die Beschriftung ragt zur Haelfte ueber die obere Linie hinaus. Der
     uebliche Abstand allein liess ihr nur zwei Pixel Luft – sie klebte am
     Element darueber. Deshalb: normaler Abstand plus die halbe Beschriftung. */
  margin-block: calc(var(--space-sm) + 1.1em) var(--space-md);
  background: var(--color-paper);
  /* fieldset schrumpft von Haus aus nicht unter seine Inhaltsbreite –
     ohne min-width laeuft die Seite auf schmalen Displays seitlich ueber */
  min-width: 0;
}
/* Beschriftung eines Rahmens: sitzt als Kasten auf der oberen Linie.
   Sie wird absolut positioniert und damit aus dem Textfluss genommen – so
   belegt sie keine Hoehe und kann den Rahmen nicht nach unten druecken.
   Die obere Linie laeuft durchgehend; der Hintergrund der Beschriftung
   deckt sie genau dort ab, wo der Text steht. translateY(-50%) legt sie
   mittig auf die Linie, unabhaengig davon, wie hoch sie ausfaellt. */
.vertrag-block,
.admin-vorgaben { position: relative; }

.vertrag-block > legend,
.admin-vorgaben > legend {
  position: absolute;
  top: 0;
  inset-inline-start: 1.1em;
  transform: translateY(-50%);
  max-width: calc(100% - 2.2em);
  margin: 0;
  padding: 0.1em 0.75em 0.2em;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-harbor-deep);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-paper);
}
.vertrag-block > legend { font-size: var(--fs-md); }

@media (max-width: 520px) {
  .vertrag-block > legend,
  .admin-vorgaben > legend {
    inset-inline-start: 0.8em;
    padding-inline: 0.55em;
    font-size: var(--fs-base);
  }
}

/* Bloecke aus kurzen Feldern stehen ab Tablet in zwei Spalten. Untereinander
   ergaben sechs Zeilen fuer eine Anschrift eine unnoetige Scrollstrecke.
   Am Telefon bleibt es bei einer Spalte – nebeneinander waeren beide zu eng. */
@media (min-width: 700px) {
  .vertrag-block--paare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-md);
    align-items: start;
  }
  /* Erklaerungen, Haken und alles andere laufen ueber beide Spalten */
  .vertrag-block--paare > :not(.form-row),
  .vertrag-block--paare > .form-row--check,
  .vertrag-block--paare > .form-row--breit { grid-column: 1 / -1; }
  .vertrag-block--paare > .form-row { min-width: 0; }
}

/* Die Beschriftung liegt auf der Linie – ihre Flaeche muss daher zu der
   des Rahmens passen, sonst blitzt die Seitenfarbe durch. */
.vertrag-block--fest > legend { background: var(--color-cloud); }
.vertrag-block--abschluss > legend { border-color: var(--color-harbor); }
.vertrag-block--fest { background: var(--color-cloud); }
.vertrag-block--abschluss { border-color: var(--color-harbor); }

.vertrag-fest { line-height: 1.7; }
.vertrag-hinweis {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  font-weight: 400;
}

.vertrag-person {
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-xs);
  margin-top: var(--space-sm);
}
/* Der erste Block braucht weder Linie noch den Abstand dafuer – sonst
   steht er unnoetig weit unter dem Hinweis. */
.vertrag-person:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
/* Der Abstand kommt vom Block, nicht von der Ueberschrift – sonst schob
   der Vorgabewert aus dem Fliesstext den ersten Personenblock nach unten. */
.vertrag-person h3,
.vertrag-block h3 { font-size: var(--fs-base); margin-top: 0; margin-bottom: 0.4em; }

/* Ankreuzfelder: Kästchen links, Text daneben – nicht untereinander.
   Bewusst kein Grid: Enthält die Beschriftung ausgezeichneten Text (etwa
   ein <strong> vor dem Fließtext), zählt jeder Teil als eigenes Grid-Element
   und die Spalten geraten durcheinander. Mit hängendem Einzug fließt der
   Text unabhängig von seiner Auszeichnung sauber um das Kästchen. */
.form-row--check { display: block; }
.form-row--check label {
  display: block;
  position: relative;
  padding-left: 1.9em;
  font-weight: 400;
  cursor: pointer;
}
.form-row--check input {
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.1em;
  height: 1.1em;
}

/* Die abschließende Erklärung soll auffallen */
.vertrag-erklaerung {
  background: var(--color-harbor-pale);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.vertrag-erklaerung label { font-size: var(--fs-base); }

/* ---- Schrittführung ---- */
.schritt-anzeige {
  display: flex;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0 0 var(--space-2xs);
  padding: 0;
}
.schritt-anzeige li { flex: 1 1 0; display: flex; }
.schritt-anzeige__knopf {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.7em;
  border: 0;
  border-bottom: 3px solid var(--color-border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-cloud);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.schritt-anzeige__knopf:hover { background: var(--color-harbor-pale); }
.schritt-anzeige li.ist-aktiv .schritt-anzeige__knopf {
  background: var(--color-harbor-pale);
  color: var(--color-harbor-deep);
  border-bottom-color: var(--color-harbor);
  font-weight: 700;
}
.schritt-anzeige li.ist-fertig .schritt-anzeige__knopf { border-bottom-color: #4E9A6A; }
.schritt-anzeige li.ist-unvollstaendig .schritt-anzeige__knopf { border-bottom-color: var(--color-sunshine); }

.schritt-anzeige__nr {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-paper);
  border: 1px solid currentColor;
  font-size: 0.85em;
}
.schritt-anzeige__status {
  margin-left: auto;
  font-weight: 700;
  flex-shrink: 0;
}
.schritt-anzeige li.ist-fertig .schritt-anzeige__status { color: #4E9A6A; }
.schritt-anzeige li.ist-unvollstaendig .schritt-anzeige__status { color: var(--color-sunshine-deep); }

/* Fehler direkt am Feld */
.feld-fehler {
  display: block;
  margin-top: 0.3em;
  padding-left: 0.7em;
  border-left: 3px solid #8A2A2A;
  color: #8A2A2A;
  font-size: var(--fs-sm);
  font-weight: 600;
}
[aria-invalid="true"] {
  border-color: #8A2A2A !important;
  background: #FFF7F7;
}
[aria-invalid="true"]:focus { outline-color: #8A2A2A; }

/* Fehlerübersicht mit Sprunglinks */
.fehler-uebersicht a { color: inherit; }
.fehler-uebersicht a:hover { text-decoration: none; }
.fehler-uebersicht:focus-visible { outline: 3px solid #8A2A2A; outline-offset: 3px; }

/* Zwischenspeicher-Hinweis */
.entwurf-hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8em;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  background: var(--color-cloud);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.8em;
  margin-bottom: var(--space-sm);
}

/* Hinweis auf fehlende Pflichtangaben */
.form-message--warnung {
  background: #FFF4D6;
  color: #7A5200;
  font-weight: 400;
}
.form-message--warnung strong { display: block; margin-bottom: 0.2em; }
@media (max-width: 560px) {
  /* Auf schmalen Displays nur die Nummern – die Namen brechen sonst um */
  .schritt-anzeige__name { display: none; }
  .schritt-anzeige li { justify-content: center; }
}

.schritt-zaehler {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-sm);
}

.schritt-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: flex-end;
  margin-top: var(--space-sm);
}
.btn--zurueck {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-ink-soft);
}
.btn--zurueck:hover {
  border-color: var(--color-harbor);
  color: var(--color-harbor-deep);
}

/* ---- Optionale Blöcke (zweite Person, weitere Kontaktpersonen) ---- */
.ist-verborgen { display: none !important; }

.btn-hinzu {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: transparent;
  border: 1px dashed var(--color-harbor);
  color: var(--color-harbor);
  border-radius: var(--radius-sm);
  padding: 0.6em 1.1em;
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-hinzu:hover { background: var(--color-harbor-pale); }
.btn-hinzu span { font-size: 1.25em; line-height: 1; }

.btn-entfernen {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: var(--space-2xs);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
}
.btn-entfernen:hover { color: var(--color-harbor-deep); }

.optional-hinzu { margin-bottom: var(--space-md); }

/* Von uns festgelegt (Modus b) bzw. errechnet (Modus c/d) – beide nicht
   editierbar, optisch aber unterscheidbar von normalen Eingabefeldern */
.ist-gesperrt,
.ist-berechnet {
  background: var(--color-cloud);
  color: var(--color-ink-soft);
  cursor: not-allowed;
}
.ist-berechnet {
  font-weight: 700;
  color: var(--color-harbor-deep);
}
.ist-gesperrt:focus,
.ist-berechnet:focus { border-color: var(--color-border); }

/* Mailto-Verweis in der Überschreitungs-Warnung */
.warnung-mail {
  display: inline-block;
  margin-top: 0.5em;
  color: inherit;
  font-weight: 700;
}

/* Dateiauswahl: auf dem Handy sonst zu gedrängt */
input[type="file"] {
  width: 100%;
  padding: 0.5em;
  background: var(--color-paper);
  border: 1px dashed var(--color-harbor);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

/* Feld, das durch einen Haken stillgelegt wurde */
textarea:disabled,
input:disabled {
  background: var(--color-cloud);
  color: var(--color-ink-soft);
  cursor: not-allowed;
}

/* Auch die zugehörige Beschriftung tritt zurück */
.form-row:has(input:disabled) label,
.form-row:has(textarea:disabled) label {
  color: var(--color-ink-soft);
}

.vertrag-zeiten input { width: 100%; max-width: 10em; }

/* Aufklappbarer Hinweis hinter einem Infozeichen.
   Bewusst <details> statt Skript: Das funktioniert ohne JavaScript, laesst
   sich mit der Tastatur bedienen und von Vorleseprogrammen ankuendigen. */
.info-klapp {
  margin: 0 0 var(--space-sm);
}
.info-klapp__knopf {
  display: flex;
  align-items: center;
  gap: 0.5em;
  /* Am Telefon eine ganze Zeile zum Tippen, nicht nur das Zeichen.
     44px ist das uebliche Mindestmass fuer einen Daumen. */
  min-height: 44px;
  padding: 0.35em 0;
  color: var(--color-harbor);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.info-klapp__knopf::-webkit-details-marker { display: none; }
.info-klapp__knopf:hover { color: var(--color-harbor-deep); }
.info-klapp__knopf:focus-visible {
  outline: 3px solid var(--color-sunshine);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Das Zeichen selbst: rundes i, gross genug zum Treffen */
.info-klapp__zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 0.95em;
  line-height: 1;
}

/* Beim Aufklappen dreht sich nichts – stattdessen sagt der Text es */
.info-klapp[open] .info-klapp__knopf { margin-bottom: 0.2em; }

.info-klapp__inhalt {
  padding: 0.1em 0 0.2em 0.9em;
  border-inline-start: 3px solid var(--color-border);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
}
.info-klapp__inhalt p { margin-bottom: 0.6em; }
.info-klapp__inhalt p:last-child { margin-bottom: 0; }

/* Abgesprochene Sonderregelung im Vertragsformular: Anzeige, kein Feld.
   Deshalb bewusst wie ein Zitat gesetzt und nicht wie eine Eingabe. */
.vertrag-absprache {
  margin: 0.35em 0 0;
  padding: 0.5em 0.75em;
  border-inline-start: 3px solid var(--color-harbor);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-cloud);
}

/* Bestaetigte Masernschutz-Sichtung: gruen, weil sie erledigt ist – die
   offenen Faelle stehen daneben in der warnenden Farbe. */
/* Statusmarken in der Uebersicht.
   Keine Pille: In einer 190 Pixel schmalen Spalte bricht der Text auf drei
   Zeilen um, und ein Radius von 999px macht daraus eine Ellipse. Ein
   farbiger Balken links traegt dieselbe Aussage und bleibt bei jeder
   Zeilenzahl ruhig. */
.status-inhalt .marke-gesichtet,
.status-inhalt .stammdaten-warnung {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.35em;
  padding: 0.2em 0.5em;
  border: 0;
  border-inline-start: 3px solid currentColor;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}
.status-inhalt .marke-gesichtet {
  background: #E4F3E7;
  color: #276238;
}
.status-inhalt .stammdaten-warnung {
  background: #FFF4D6;
  color: var(--color-sunshine-deep);
}

/* Ausserhalb der Uebersicht bleibt die Marke eine Pille (Rollenliste) */
.marke-gesichtet {
  display: inline-block;
  margin-top: 0.25em;
  padding: 0.1em 0.6em;
  border: 1px solid #4E9A6A;
  border-radius: 999px;
  background: #E4F3E7;
  color: #276238;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.5;
}

/* Fehlerprotokoll im Admin-Panel: lange Zeilen sollen umbrechen statt die
   Seite seitlich aufzuschieben. */
.fehlerprotokoll {
  max-height: 22em;
  overflow: auto;
  margin: 0 0 var(--space-sm);
  padding: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-cloud);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.8em;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Kleines Kreuz neben dem Wochentag: leert beide Zeiten dieses Tages.
   Zurueckhaltend gestaltet – es loescht etwas, soll aber nicht drohen. */
.tag-leeren {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  margin-inline-start: 0.5em;
  padding: 0;
  vertical-align: middle;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.tag-leeren svg {
  width: 0.85em;
  height: 0.85em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.tag-leeren:hover { background: #FBE7E7; color: #8A2A2A; }
.tag-leeren:focus-visible { outline: 3px solid var(--color-sunshine); outline-offset: 2px; }

@media (max-width: 620px) {
  /* Am Telefon gross genug zum Treffen */
  .tag-leeren { width: 2.4em; height: 2.4em; }
  .tag-leeren svg { width: 1.05em; height: 1.05em; }
}

/* Zeitfeld mit eigener Viertelstunden-Auswahl. Die Liste baut das Skript,
   weil die Browser bei step="900" verschieden reagieren – Firefox bietet zu
   Zeitfeldern gar keine an. */
.zeitfeld {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.3em;
  max-width: 10em;
}
/* Genug Platz fuer "HH:MM" samt der Uhr, die der Browser selbst hineinsetzt */
.zeitfeld input { flex: 1 1 auto; min-width: 5.5em; }

.zeitfeld__knopf {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-harbor);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.zeitfeld__knopf svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zeitfeld__knopf:hover { background: var(--color-harbor-pale); border-color: var(--color-harbor); }
.zeitfeld__knopf:focus-visible { outline: 3px solid var(--color-sunshine); outline-offset: 2px; }
.zeitfeld__knopf[aria-expanded="true"] {
  background: var(--color-harbor);
  border-color: var(--color-harbor);
  color: #fff;
}

.zeitfeld__liste {
  position: absolute;
  top: calc(100% + 0.25em);
  inset-inline-start: 0;
  z-index: 30;
  width: 7.5em;
  max-height: 13em;
  overflow-y: auto;
  margin: 0;
  padding: 0.25em;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.zeitfeld__liste li {
  padding: 0.45em 0.7em;
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.zeitfeld__liste li:hover { background: var(--color-harbor-pale); }
.zeitfeld__liste li[aria-selected="true"] {
  background: var(--color-harbor);
  color: #fff;
  font-weight: 600;
}

@media (max-width: 620px) {
  /* Am Telefon groesser: der Knopf steht neben einem Feld, das den Daumen
     schon fordert, und die Eintraege wollen getroffen werden. */
  .zeitfeld { max-width: none; }
  .zeitfeld__knopf { width: 2.6em; height: 2.6em; }
  .zeitfeld__liste { width: 8.5em; max-height: 15em; }
  .zeitfeld__liste li { padding: 0.6em 0.8em; }
}

@media (max-width: 560px) {
  /* Zeitenraster: Beschriftung über dem Feld statt daneben */
  .vertrag-zeiten input { max-width: none; }
  .vertrag-block { padding-inline: var(--space-sm); }
  .schritt-nav .btn { flex: 1 1 100%; text-align: center; }
}
.vertrag-zeiten td { vertical-align: middle; }
.vertrag-zeiten label { font-weight: 600; }

/* =========================================================
   13b. SOCIAL-LINK (INSTAGRAM)
   ========================================================= */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: var(--space-xs);
  font-weight: 600;
  text-decoration: none;
}
.social-link:hover span { text-decoration: underline; }
.social-link__icon { width: 20px; height: 20px; flex-shrink: 0; }

/* =========================================================
   14. FOOTER
   ========================================================= */
.site-footer { background: var(--color-harbor-deep); color: #E9EFF4; }
.site-footer a { color: #fff; }
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  padding-block: var(--space-lg);
}
.footer-heading {
  font-family: var(--font-heading);
  color: #fff;
  font-size: var(--fs-md);
  margin-bottom: 0.5em;
}
.footer-logo { width: min(170px, 100%); height: auto; margin-bottom: var(--space-xs); }
.footer-col--brand p { color: var(--color-sunshine); font-style: italic; font-family: var(--font-heading); }
.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin-bottom: 0.4em; }
.footer-menu a { text-decoration: none; }
.footer-menu a:hover { text-decoration: underline; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-block: var(--space-xs);
}
.site-footer__bottom p { margin: 0; font-size: var(--fs-sm); color: #C9D6E0; }
.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  justify-content: space-between;
}
/* Teamzugang: sichtbar fuer den, der ihn sucht, ohne den Eltern
   aufzufallen. */
.footer-admin {
  font-size: var(--fs-sm);
  color: #C9D6E0;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.9em;
}
.footer-admin:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
}

/* =========================================================
   15. ADMIN-BEREICH (intern, nicht für Eltern)
   ========================================================= */
.admin-body { background: var(--color-cloud); }

.admin-kopf {
  background: var(--color-harbor-deep);
  color: #fff;
}
.admin-kopf__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-block: 0.9em;
}
.admin-kopf__marke {
  display: flex;
  align-items: center;
  gap: 0.7em;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
}
/* Ohne eigene Regel greift a:hover mit dem dunklen Blau – und das ist
   genau die Farbe des Kopfbereichs. Der Text verschwand beim Zeigen. */
.admin-kopf__marke:hover { color: #fff; text-decoration: underline; }
.admin-kopf__logo { height: 42px; width: auto; }
@media (max-width: 560px) {
  .admin-kopf__logo { height: 34px; }
}
.admin-nav { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
.admin-nav a { color: #E9EFF4; text-decoration: none; font-size: var(--fs-sm); }
.admin-nav a:hover { color: #fff; text-decoration: underline; }

/* Wer gerade angemeldet ist – hebt sich vom Rest der Leiste ab, damit auf
   einen Blick klar ist, unter welchem Zugang gearbeitet wird. */
.admin-nav__konto {
  border: 1px solid rgba(233, 239, 244, 0.35);
  border-radius: 999px;
  padding: 0.15em 0.7em;
}

/* Aktionen je Zeile der Stammdatenliste: gleich aussehende, kleine
   Schaltflaechen. Vorher stand hier ein Link neben einem Knopf – zwei
   verschiedene Erscheinungsbilder, die die Spalte auseinanderzogen. */
.zeilenaktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.btn-klein {
  display: inline-block;
  padding: 0.35em 0.85em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-harbor);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
a.btn-klein { text-decoration: none; }
.btn-klein:hover {
  background: var(--color-harbor-pale);
  border-color: var(--color-harbor);
  color: var(--color-harbor-deep);
}

/* Schaltfläche, die wie ein Link aussieht (Zugang einrichten) */
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-harbor);
  font: inherit;
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: var(--color-ink); }
.admin-inline-form { display: inline; }

/* Einladungslink: soll vollständig lesbar sein, auch wenn er lang ist */
.admin-einladung__url code {
  display: block;
  word-break: break-all;
  padding: var(--space-xs) 0;
}

/* So breit wie die Kopfzeile darueber. Vorher standen hier 900px, waehrend
   die Navigation auf 1200px lief - der Inhalt sprang also gegenueber dem
   Menue nach links ein, und Tabellen wie der Bestand mussten sich auf drei
   Viertel der Flaeche draengen. Das Dashboard zeigt Listen und Raster, und
   die leben von der Breite. Der Wert bleibt eine Obergrenze: Auf schmalen
   Geraeten greift wie zuvor die volle Breite abzueglich Rand. */
.admin-inhalt {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-block: var(--space-md);
  max-width: var(--container-width);
}
.admin-inhalt h1 { font-size: var(--fs-lg); }
.admin-inhalt h2 {
  font-size: var(--fs-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}
.admin-inhalt h2:first-of-type { border-top: 0; padding-top: 0; }

/* Formulare nicht ueber die ganze Breite ziehen. Der Inhalt darf 1200px
   nutzen, weil Listen und Raster davon leben - ein Eingabefeld wird davon
   nur unhandlich, und der Blick muss weit wandern. Zwei Spalten Felder
   plus Beschriftung kommen mit gut der Haelfte aus. */
.admin-inhalt .kontakt-form { max-width: 62rem; }

/* Anmeldung und aehnliche kurze Masken: Der Kasten richtet sich nach
   dem Inhalt. Auf 1200 Pixeln stand ein Formular von 420 Pixeln
   verloren in einer weiten weissen Flaeche. */
.admin-inhalt--schmal { max-width: 34rem; }

.admin-login { max-width: 420px; }

/* Der Weg zum vergessenen Passwort steht unter dem Knopf, nicht
   daneben: Man sucht ihn erst, wenn das Anmelden nicht klappt. */
.anmelde-hilfe {
  margin: var(--space-xs) 0 0;
  font-size: var(--fs-sm);
}
.admin-linkform { background: var(--color-cloud); }
/* Aufklappbare Liste der Blanko-Vertraege */
.admin-blanko {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.8em 1.1em;
  margin-bottom: var(--space-md);
  background: var(--color-paper);
}
.admin-blanko summary {
  font-weight: 700;
  color: var(--color-harbor-deep);
  cursor: pointer;
}
.admin-blanko__liste-alt {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.2em;
}
.admin-blanko__liste-alt a { font-size: var(--fs-sm); }

/* Auffangnetz: sollte der Inhalt doch einmal breiter werden, scrollt die
   Tabelle in ihrem eigenen Kasten statt die Seite zu sprengen. */
.admin-tabelle-rahmen {
  overflow-x: auto;
  margin-bottom: var(--space-md);
}
.admin-tabelle { font-size: var(--fs-sm); }
.admin-tabelle th:last-child,
.admin-tabelle td:last-child { white-space: nowrap; }

/* ---- Admin-Bereich am Telefon ----
   Unterhalb von 620px wird aus jeder Tabellenzeile eine Karte (siehe
   table.betreuungszeiten weiter oben). Ohne die folgenden Regeln schob die
   Spalte "Aktionen" die Seite seitlich auf: Sie steht auf nowrap, damit am
   Bildschirm die Schaltflaechen nebeneinander bleiben – auf 375px Breite
   passt das nicht mehr. */
@media (max-width: 620px) {
  .admin-inhalt {
    /* Rahmen und Innenabstand frassen ein Viertel der Bildschirmbreite */
    padding: var(--space-sm);
    margin-block: var(--space-sm);
  }

  .admin-tabelle th:last-child,
  .admin-tabelle td:last-child { white-space: normal; }

  /* Drei geschachtelte Innenabstaende – Inhalt, Formular, Block – nahmen
     auf 375px zusammen 144 Pixel weg, also knapp vierzig Prozent der
     Breite. Am Telefon reicht je ein knapper Abstand; nur der Admin-
     Bereich ist gemeint, das Kontaktformular der Website bleibt, wie es
     ist. Der Innenabstand oben bleibt dem Block erhalten: Dort ragt die
     Beschriftung in die Linie hinein. */
  .admin-inhalt .kontakt-form { padding: var(--space-sm); }
  .admin-inhalt .vertrag-block,
  .admin-inhalt .admin-vorgaben { padding: var(--space-sm) 0.65em 0.9em; }

  /* Die Kopfzeile faellt weg – ihre Beschriftungen stehen ab hier in
     jeder Zelle selbst. Ohne diese drei Regeln blieb die Tabelle eine
     Tabelle: Die Spalten der Kopfzeile hielten ihre Breite, und auf
     375px schob sich die Seite seitlich auf.

     Ausgenommen ist das Stundenraster: Dort ist das Nebeneinander von
     Woche und Wochentag der Inhalt und nicht die Darstellung. Es steht
     deshalb in einem seitlich rollenden Rahmen und bleibt eine Tabelle. */
  table.admin-tabelle:not(.raster-tabelle) thead { display: none; }
  table.admin-tabelle:not(.raster-tabelle) tr {
    display: block;
    border-bottom: 2px solid var(--color-border);
  }
  table.admin-tabelle:not(.raster-tabelle) td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--color-harbor-deep);
  }

  /* Beschriftung links, Inhalt rechts – beides umbruchfaehig.
     Der Selektor nennt bewusst auch das Element: table.betreuungszeiten td
     weiter oben stellt hier auf flex um und waere sonst staerker. */
  table.admin-tabelle:not(.raster-tabelle) td {
    display: grid;
    grid-template-columns: minmax(5.5em, 7.5em) 1fr;
    gap: 0.2em 0.8em;
    align-items: start;
    /* Seitlich braucht die Karte keinen Abstand, sie hat keinen Rahmen */
    padding: 0.5em 0.25em;
    /* Lange Benutzernamen und Adressen duerfen notfalls im Wort brechen */
    overflow-wrap: anywhere;
  }

  /* Zellen ohne Beschriftung (reine Aktionsspalte) nehmen die ganze Breite,
     sonst bleibt links eine leere Spalte stehen */
  table.admin-tabelle:not(.raster-tabelle) td[data-label=""] { grid-template-columns: 1fr; }
  table.admin-tabelle:not(.raster-tabelle) td[data-label=""]::before { display: none; }

  /* Schaltflaechen einer Zeile untereinander, wenn sie nebeneinander
     nicht mehr passen – und dann bitte gross genug zum Tippen */
  .zeilenaktionen { gap: 0.5em; }
  .zeilenaktionen .btn-klein { padding: 0.5em 0.9em; }

  /* Der Kopierknopf richtet sich nach der Hoehe des Feldes – am Telefon
     waere das ein Ziel von 27 Pixeln. Mit dem Daumen trifft man das nicht. */
  .linkkopie .admin-linkfeld { padding: 0.55em 0.6em; }
  .linkkopie__knopf { width: 2.9em; min-height: 2.6em; }
  .linkkopie__zeichen { width: 1.3em; height: 1.3em; }
}

/* Kopfzeile über der Linkliste: Archiv-Umschalter und Export */
.admin-listenkopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.admin-listenkopf .btn { font-size: var(--fs-sm); padding: 0.5em 1em; }

/* Aktionen je Zeile */
/* Aktionen einer Zeile untereinander statt nebeneinander. Als umbrechende
   Reihe ergaben fuenf Textlinks und ein Datumsfeld eine unruhige Flaeche,
   in der nicht mehr zu erkennen war, was zusammengehoert. */
.admin-aktionen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35em;
}
/* Was zusammen bedient wird, bleibt nebeneinander */
.aktion-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
}

/* Auswahllisten sind so breit wie ihre laengste Option. Im Raster sprengte
   die Leistungsart damit am Telefon die Seite. */
.admin-raster > .form-row { min-width: 0; }
.admin-raster select,
.admin-raster input { width: 100%; min-width: 0; }

/* Kleiner Link direkt an einer Statusangabe – fuehrt zur Ansicht, aendert
   nichts. Deshalb bewusst anders als die Aktionen daneben. */
.status-link {
  display: inline-block;
  margin-inline-start: 0.4em;
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
}
.admin-aktion {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--color-harbor);
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
}
.admin-aktion:hover { color: var(--color-harbor-deep); }
.admin-aktion--loeschen { color: #8A2A2A; }
.admin-aktion--loeschen:hover { color: #6B1F1F; }

/* Vorbelegung beim Erzeugen eines Vertragslinks */
.admin-vorgaben {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  /* Gleiche Rechnung wie bei .vertrag-block: normaler Abstand plus die
     halbe Beschriftung, die ueber die Rahmenlinie hinausragt. */
  margin-block: calc(var(--space-sm) + 1.1em) var(--space-sm);
  background: var(--color-paper);
  min-width: 0;
}
/* Beschriftung siehe .vertrag-block legend weiter oben */
/* Zwei Spalten ab Tablet, darunter eine. Die Felder sind kurz – untereinander
   ergab das ein Formular, durch das man scrollen musste, statt es zu ueberblicken. */
.admin-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs) var(--space-md);
  align-items: start;
}
@media (min-width: 700px) {
  /* Genau zwei Spalten, nicht so viele wie hineinpassen: Bei drei wurde die
     Auswahl der Leistungsart zu schmal fuer ihren Text. */
  .admin-raster { grid-template-columns: 1fr 1fr; }
  /* Der Name braucht mehr Platz als die Gueltigkeitsdauer */
  .admin-raster--kopf { grid-template-columns: 2fr 1fr; }
}
.admin-vorgabe {
  min-width: 0;
}
/* Ein Satz, der die ganze Breite braucht */
.admin-vorgabe--breit { grid-column: 1 / -1; }

/* Im Raster tragen Abstand und Ausrichtung die Gliederung – das Feld und
   sein Haken gehoeren enger zusammen als zwei Felder nebeneinander. */
.admin-raster .form-row { margin-bottom: 0.35em; }

/* Beschriftung links, „gesperrt" rechts – beide in einer Zeile ueber dem Feld */
.admin-vorgabe__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em;
}
.admin-vorgabe__kopf .admin-sperre { flex: none; }
.admin-sperre {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  font-weight: 400;
  cursor: pointer;
}
.admin-sperre input { width: 1.05em; height: 1.05em; }
/* Vertragslink: Feld und Kopierknopf gehoeren zusammen */
.linkkopie {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.4em;
  min-width: 0;
}
.linkkopie .admin-linkfeld { flex: 1 1 auto; }

.linkkopie__knopf {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-harbor);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.linkkopie__knopf:hover {
  background: var(--color-harbor-pale);
  border-color: var(--color-harbor);
  color: var(--color-harbor-deep);
}
.linkkopie__knopf:focus-visible {
  outline: 3px solid var(--color-sunshine);
  outline-offset: 2px;
}

.linkkopie__zeichen {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Das Haekchen erscheint erst, wenn kopiert wurde – vorher die zwei Blaetter */
.linkkopie__zeichen--fertig { display: none; }
.linkkopie__knopf.ist-kopiert .linkkopie__zeichen--kopie { display: none; }
.linkkopie__knopf.ist-kopiert .linkkopie__zeichen--fertig { display: block; }
.linkkopie__knopf.ist-kopiert {
  background: var(--color-harbor);
  border-color: var(--color-harbor);
  color: #fff;
}

/* Blase ueber dem Knopf: bestaetigt kurz, dass der Link in der
   Zwischenablage liegt. Ohne sie bliebe offen, ob der Klick ankam. */
.linkkopie__blase {
  position: absolute;
  bottom: calc(100% + 0.4em);
  inset-inline-end: 0;
  z-index: 2;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  background: var(--color-harbor-deep);
  color: #fff;
  font-size: var(--fs-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.3em);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.linkkopie__blase::after {
  /* kleine Spitze zum Knopf hin */
  content: "";
  position: absolute;
  top: 100%;
  inset-inline-end: 0.9em;
  border: 0.35em solid transparent;
  border-top-color: var(--color-harbor-deep);
}
.linkkopie.ist-kopiert .linkkopie__blase {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .linkkopie__blase { transition: none; }
}

.admin-linkfeld {
  width: 100%;
  /* Keine Mindestbreite: sie hat die ganze Tabelle ueber den Inhaltsbereich
     hinausgeschoben. Das Feld darf mitschrumpfen, der Text laesst sich
     weiterhin per Klick markieren. */
  min-width: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.85em;
  padding: 0.35em 0.5em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-cloud);
}

.admin-fuss {
  padding-block: var(--space-sm);
  text-align: center;
}
.admin-fuss p { font-size: var(--fs-sm); color: var(--color-ink-soft); margin: 0; }

/* =========================================================
   16. 404
   ========================================================= */
.error-404 { text-align: center; padding-block: var(--space-xl); }

/* ---- Konto: zweiter Faktor, Wiederherstellungscodes, Passkeys ---- */
.konto-block {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
  margin-top: var(--space-md);
}
.konto-block > h2 { margin-top: 0; }

/* Geheimnis und Adresse muessen fehlerfrei abzulesen sein */
.konto-geheimnis code {
  display: block;
  background: var(--color-cloud);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  word-break: break-all;
  user-select: all;
}
.konto-geheimnis--klein code { font-size: var(--fs-sm); letter-spacing: 0; }

.konto-codes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.4em;
}
.konto-codes code { font-size: 1.05rem; letter-spacing: 0.05em; user-select: all; }

.konto-passkeys { list-style: none; padding: 0; }
.konto-passkeys li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  margin-bottom: 0.5em;
}
.konto-passkeys .vertrag-hinweis { display: block; }

/* Anmelden mit Passkey – gleichwertige Alternative zum Passwort, deshalb
   sichtbar, aber ruhiger als die Hauptschaltflaeche. */
.btn--passkey {
  background: var(--color-paper);
  color: var(--color-harbor);
  border-color: var(--color-harbor);
}
.btn--passkey:hover {
  background: var(--color-harbor-pale);
  color: var(--color-harbor-deep);
}
.passkey-anmeldung { margin-top: var(--space-sm); }

/* Trennung zwischen den beiden Anmeldewegen */
.zwei-faktor-oder {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
}
.zwei-faktor-oder::before,
.zwei-faktor-oder::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border);
}

/* Papiervorlagen: je Tagespflegeperson eine Schaltflaeche statt einer
   Linkliste – so ist auf einen Blick zu sehen, was zur Auswahl steht. */
.admin-vorlagen {
  list-style: none;
  padding: 0;
  margin: var(--space-xs) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}
.admin-vorlagen a {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-harbor-deep);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.admin-vorlagen a:hover {
  background: var(--color-harbor-pale);
  border-color: var(--color-harbor);
}
.admin-vorlagen a::before {
  content: "PDF";
  font-size: 0.7em;
  letter-spacing: 0.06em;
  padding: 0.2em 0.45em;
  border-radius: 3px;
  background: var(--color-harbor);
  color: #fff;
}
.admin-vorlagen li.ist-neutral a { color: var(--color-ink-soft); }
.admin-vorlagen li.ist-neutral a::before { background: var(--color-ink-soft); }

/* ---- Rollen ---- */
.rollen-marke {
  display: inline-block;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.5;
  padding: 0.1em 0.6em;
  margin: 0 0.2em 0.2em 0;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-ink-soft);
  white-space: nowrap;
}
/* Nur die Rolle mit echten Rechten faellt farblich auf */
.rollen-marke--admin {
  background: var(--color-harbor);
  border-color: var(--color-harbor);
  color: #fff;
}
.rollen-marke--vertreter { border-color: var(--color-sunshine); }

.rollen-feld { margin-block: var(--space-sm); }

.admin-nav__rolle {
  display: inline-block;
  margin-left: 0.45em;
  padding: 0 0.45em;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  font-size: 0.8em;
}

/* Fehlende Stammdaten – auffaellig, aber nicht schreiend */
.stammdaten-warnung {
  display: inline-block;
  font-size: 0.78em;
  font-weight: 600;
  padding: 0.1em 0.6em;
  margin-top: 0.2em;
  border-radius: 999px;
  background: #FFF4D6;
  border: 1px solid var(--color-sunshine);
  color: var(--color-sunshine-deep);
  white-space: nowrap;
  cursor: help;
}
.stammdaten-luecken { margin: 0.4em 0 0; padding-left: 1.2em; }
.stammdaten-luecken li { margin-bottom: 0.2em; }

/* ---- Formulare zum Anlegen: eingeklappt hinter einer Schaltflaeche ----
   Uebersicht und Stammdatenliste sollen auf den ersten Blick zeigen, was da
   ist. Das Anlegen ist der seltenere Vorgang und oeffnet sich erst auf
   Klick. Die Schaltflaeche ist bewusst kleiner als eine Hauptschaltflaeche
   auf der Website - im Verwaltungsbereich sind es Werkzeuge, keine Aufrufe. */
.admin-anlegen {
  margin-bottom: var(--space-md);
}
.admin-anlegen__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 1.1em;
  border-radius: var(--radius-sm);
  background: var(--color-harbor);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background var(--transition);
}
.admin-anlegen__knopf::-webkit-details-marker { display: none; }
.admin-anlegen__knopf:hover { background: var(--color-harbor-deep); }
.admin-anlegen__knopf:focus-visible {
  outline: 3px solid var(--color-sunshine);
  outline-offset: 2px;
}
.admin-anlegen__zeichen {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  transition: transform var(--transition);
}
.admin-anlegen[open] .admin-anlegen__zeichen { transform: rotate(45deg); }
.admin-anlegen[open] .admin-anlegen__knopf { margin-bottom: var(--space-sm); }

/* Datumsfeld neben der Schaltflaeche "Betreuung beendet" */
.beendet-feld input {
  padding: 0.2em 0.4em;
  font-size: var(--fs-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------
   Vertretungsantrag (AS-43)
   ------------------------------------------------------------------ */

/* Stundenraster: sieben Wochentage plus Summe. Am Telefon passt das nicht
   nebeneinander – dort scrollt die Tabelle waagerecht im eigenen Rahmen,
   statt die Seite zu sprengen. Deshalb hier bewusst kein Umbau in
   Kartenform wie bei den anderen Admin-Tabellen: Ein Raster verliert
   seinen Sinn, wenn die Wochentage untereinander stehen. */
.raster-tabelle { min-width: 34rem; }

.raster-tabelle th,
.raster-tabelle td {
  text-align: center;
  padding: 0.3em 0.2em;
}

.raster-tabelle th[scope="row"] { text-align: left; white-space: nowrap; }

.raster-feld {
  width: 100%;
  min-width: 2.6rem;
  padding: 0.25em 0.1em;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.raster-tabelle small {
  display: block;
  margin-top: 0.15em;
  font-size: 0.72em;
  color: var(--color-ink-soft);
}

/* Tage ausserhalb des Zeitraums: sichtbar vorhanden, aber nicht nutzbar */
.raster-aus { color: var(--color-border); }

/* Beendete Betreuungen bleiben in der Liste, treten aber zurueck */
.ist-inaktiv td { color: var(--color-ink-soft); }

.admin-warnung { color: #8A2A2A; font-weight: 600; }

/* Im Projekt kommen beide Schreibweisen vor; --ok verhielt sich bisher
   wie eine Meldung ganz ohne Farbe. */
.form-message--ok { background: #E4F3E7; color: #276238; }

/* Angaben, die sich aus einer anderen Auswahl ergeben und deshalb kein
   Eingabefeld sind – sie sollen wie ein ausgefuelltes Feld aussehen, aber
   erkennbar nicht bedienbar sein. */
.feld-abgeleitet {
  margin: 0;
  padding: 0.55em 0.7em;
  background: var(--color-cloud);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Zweitrangiger Knopf auf hellem Grund.
   Nicht btn--outline nehmen: Der ist weiss auf transparent und fuer den
   dunklen Banner gedacht - im Admin-Bereich waere er unsichtbar. */
.btn--sekundaer {
  background: var(--color-paper);
  border-color: var(--color-harbor);
  color: var(--color-harbor);
}
.btn--sekundaer:hover {
  background: var(--color-harbor-pale);
  color: var(--color-harbor-deep);
}

/* ------------------------------------------------------------------
   Archiv, Auswahl und NEU-Marke
   ------------------------------------------------------------------ */


/* Frisch dazugekommen. Verschwindet nach zwei Seitenaufrufen von selbst –
   deshalb darf sie auffallen, ohne zu stoeren.

   Die Grundform gilt dort, wo kein Bild danebensteht – etwa in der Liste
   der Betreuungsvertraege. */
.neu-marke {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.05em 0.4em;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
  color: #7A4B00;
  background: var(--color-sunshine);
  border-radius: var(--radius-sm);
}

/* Abgelaufen: Das Skript setzt die Klasse, wenn die Zeit um ist. Sanft
   ausblenden statt hart wegnehmen – ein Element, das mitten im Lesen
   verschwindet, irritiert mehr, als es nuetzt. */
.neu-marke--verbraucht {
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .neu-marke--verbraucht { transition: none; }
}

/* Huelle um das Profilbild. Sie ist genau so gross wie das Bild – daran
   kann das NEU-Zeichen sich ausrichten. */
.person__bild {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

/* Schraeg ueber der oberen linken Ecke des Bildes, wie ein aufgeklebter
   Zettel. Hinter dem Namen ging es unter: Dort liest man es erst, wenn
   man den Namen schon gelesen hat – und dann sucht man nichts mehr. */
.person__bild .neu-marke {
  position: absolute;
  top: -0.5em;
  left: -0.85em;
  z-index: 1;
  margin: 0;
  padding: 0.1em 0.4em;
  /* Feste Groesse statt em: Die Huelle erbt je nach Liste eine andere
     Schriftgroesse, das Zeichen soll aber ueberall gleich aussehen. */
  font-size: 0.62rem;
  transform: rotate(-14deg);
  box-shadow: 0 1px 3px rgb(36 49 63 / 28%);
}

/* Knopfzeile unter einer Tabelle mit Auswahlfeldern */
.auswahl-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  align-items: center;
  margin-top: 1em;
}


/* Nur fuer Screenreader – etwa die Ueberschrift der Auswahlspalte */
.ist-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Dashboard: Knopfgroessen, Untermenue, Symbole
   ------------------------------------------------------------------ */

/* Die Knoepfe der Website sind fuer grosse Aktionsflaechen gemacht. Im
   Dashboard stehen viele davon nebeneinander – dort sind sie zu wuchtig.
   Die Mindesthoehe bleibt bei 40px, damit sie am Telefon gut zu treffen
   sind. */
.admin-inhalt .btn {
  padding: 0.5em 1.1em;
  font-size: var(--fs-sm);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  border-width: 1px;
}

/* Am Telefon fuellen Knopfzeilen die Breite, statt zu zerfasern */
@media (max-width: 30rem) {
  .auswahl-aktionen { flex-direction: column; align-items: stretch; }
  .auswahl-aktionen .btn,
  .auswahl-aktionen .btn-link { width: 100%; }
}

/* Klappmenue in der Kopfzeile.
   Oeffnet beim Darueberfahren - reines CSS, kein Skript. :focus-within
   deckt die Tastatur ab. Am Telefon gibt es kein Hover; dort steht die
   Klappe eingerueckt darunter (siehe Medienabfrage weiter unten). */
.admin-nav__menue { position: relative; display: inline-flex; align-items: center; }

.admin-nav__haupt { display: inline-flex; align-items: center; gap: 0.3em; }

/* Zeichen, das die Unterebene ankuendigt */
.admin-nav__haupt::after {
  content: "";
  width: 0.36em;
  height: 0.36em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  transition: transform var(--transition);
}
.admin-nav__menue:hover .admin-nav__haupt::after,
.admin-nav__menue:focus-within .admin-nav__haupt::after {
  transform: rotate(-135deg) translateY(0.05em);
}

.admin-nav__klappe {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;

  /* Schlicht aus- und einblenden. Ein Uebergang ueber visibility waere
     huebscher, ist aber empfindlich – und ein Menue, das manchmal nicht
     aufgeht, ist schlechter als eines ohne Animation. */
  display: none;
  flex-direction: column;
  min-width: 11rem;
  padding: 0.4em 0;
  margin-top: 0.5em;
  background: var(--color-paper);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* Die Luecke zwischen Punkt und Klappe ueberbruecken - sonst schliesst
   das Menue, sobald der Zeiger sie durchquert. */
.admin-nav__klappe::before {
  content: "";
  position: absolute;
  top: -0.6em;
  left: 0;
  right: 0;
  height: 0.6em;
}

.admin-nav__menue:hover .admin-nav__klappe,
.admin-nav__menue:focus-within .admin-nav__klappe {
  display: flex;
}

.admin-nav__klappe a {
  padding: 0.55em 1em;
  color: var(--color-ink);
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
}
.admin-nav__klappe a:hover {
  background: var(--color-harbor-pale);
  color: var(--color-harbor-deep);
  text-decoration: none;
}

/* Am Telefon gibt es kein Darueberfahren: Die Unterpunkte stehen
   eingerueckt unter dem Hauptpunkt und sind immer erreichbar. */
@media (max-width: 40rem) {
  .admin-nav__menue { flex-direction: column; align-items: flex-start; }
  .admin-nav__haupt::after { display: none; }
  .admin-nav__klappe {
    position: static;
    display: flex;
    min-width: 0;
    margin: 0.2em 0 0 0.9em;
    padding: 0;
    background: none;
    box-shadow: none;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
  }
  .admin-nav__klappe::before { display: none; }
  .admin-nav__klappe a { padding: 0.25em 0.7em; color: #E9EFF4; font-size: 0.82em; }
  .admin-nav__klappe a:hover { background: none; color: #fff; text-decoration: underline; }
}

/* Bestandslisten auf der Uebersicht: aufklappbar, weil man sie nicht bei
   jedem Besuch braucht. */
.bestand {
  margin-bottom: 0.6rem;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.bestand__kopf {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.7em 1em;
  font-weight: 600;
  cursor: pointer;
}
.bestand__zahl {
  padding: 0.05em 0.55em;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-harbor-deep);
  background: var(--color-harbor-pale);
  border-radius: 999px;
}
/* Als Raster statt als Aufzaehlung: Ein Bestand von zwanzig Kindern ist
   untereinander eine lange Rolle, nebeneinander ein Blick.

   Fuenf je Zeile, alles Weitere rutscht in die naechste. Feste Zahl statt
   auto-fill, damit die Reihe bei fuenf Personen nicht anders aussieht als
   bei sieben - auf schmaleren Schirmen wird sie schrittweise kleiner. */
.bestand__liste {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.1em 0.6em;
  margin: 0;
  padding: 0.4em 1em 1.2em;
  list-style: none;
}
@media (max-width: 1000px) {
  .bestand__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .bestand__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Der Name etwas kleiner als der Fliesstext: "Hasmik Khachatryan" braucht
   in Grundgroesse 160 Pixel und damit mehr, als die Kachel hat - er brach
   auf zwei Zeilen um. Eine Stufe kleiner passt er in eine. */
.bestand__liste .person > span {
  font-size: var(--fs-sm);
  line-height: 1.3;
  /* Nur umbrechen, wenn ein einzelnes Wort wirklich nicht passt - und
     dann an der Wortgrenze. Mitten im Nachnamen zu trennen sieht aus wie
     ein Fehler. */
  overflow-wrap: break-word;
}
.bestand__liste small {
  display: block;
  margin-top: 0.15em;
  color: var(--color-ink-soft);
  font-size: 0.8rem;
  line-height: 1.35;
}
.bestand > p { padding: 0 1em 0.9em; }

/* Symbol-Link, etwa zum Herunterladen eines Antrags. Der Text bleibt fuer
   Screenreader stehen; sichtbar ist nur das Zeichen. Die Flaeche ist
   bewusst 40px gross – darunter trifft man am Telefon daneben. */
.symbol-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--color-harbor);
  text-decoration: none;
}
.symbol-link:hover {
  background: var(--color-harbor-pale);
  color: var(--color-harbor-deep);
}
.symbol-link svg { width: 20px; height: 20px; }

/* Mehrere Symbole nebeneinander in einer Tabellenzelle */
.symbol-reihe { display: inline-flex; gap: 0.2em; flex-wrap: wrap; }

/* Schnellzugriff auf der Uebersicht: der Einstieg ins Dashboard */
.schnellzugriff {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin: 0 0 1.8rem;
}
@media (min-width: 34rem) {
  .schnellzugriff { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

.schnellzugriff__kachel {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding: 0.8em 1em;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-harbor);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-ink);
  transition: background var(--transition), border-color var(--transition);
}
.schnellzugriff__kachel:hover {
  background: var(--color-harbor-pale);
  border-left-color: var(--color-harbor-deep);
}
.schnellzugriff__titel { font-weight: 600; }
.schnellzugriff__zahl { font-size: var(--fs-sm); color: var(--color-ink-soft); }

/* Auswahl des Ausfallgrundes: ein fieldset, damit die Radios als Gruppe
   angesagt werden - aber ohne den Rahmen, den ein fieldset mitbringt. */
.grund-auswahl {
  margin: 0 0 var(--space-sm);
  padding: 0;
  border: 0;
}
.grund-auswahl > legend {
  padding: 0;
  margin-bottom: 0.4em;
  font-weight: 600;
  font-size: var(--fs-sm);
}
.grund-auswahl .form-row--check { margin-bottom: 0.25em; }

/* Das Freitextfeld gehoert sichtbar zu "Sonstiges" - eingerueckt wie die
   Beschriftung darueber. */
.grund-freitext {
  margin: 0.15em 0 0.5em 1.9em;
}
.grund-freitext textarea { width: 100%; }

/* ------------------------------------------------------------------
   Profilbilder
   ------------------------------------------------------------------ */

/* Rund beschnitten, feste Groesse. object-fit deckt den Fall ab, dass ein
   hochgeladenes Bild doch einmal nicht quadratisch ist. */
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--color-cloud);
}
/* In Tabellen: gross genug, um das Gesicht zu erkennen, klein genug, dass
   die Zeile nicht auseinandergeht. */
.avatar--klein { width: 40px; height: 40px; }
/* In der Vorschau steht das Bild fuer sich und darf groesser sein. */
.avatar--gross { width: 64px; height: 64px; }

/* Rueckfall ohne Bild: die Initialen auf farbigem Grund. Besser als ein
   leeres Feld - man erkennt die Person trotzdem. */
.avatar--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.avatar--klein.avatar--text { font-size: 0.72em; }

/* Bild oben, Name darunter. Gestapelt bleibt bei vielen Personen
   nebeneinander eine ruhige Reihe - nebeneinandergesetzte Zeilen mit Bild
   links geraten dagegen schnell unruhig, weil jeder Name anders lang ist. */
.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
  text-align: center;
}
.person > span {
  min-width: 0;
  /* Lange Nachnamen duerfen in der schmalen Spalte notfalls brechen */
  overflow-wrap: anywhere;
}

/* Auf der Uebersicht darf das Bild gross sein: Dort sucht man Personen,
   dort ist Platz. In den Tabellen bleibt es klein, sonst schiebt es die
   Zeilen unnoetig auseinander. */
.bestand__liste .avatar { width: 72px; height: 72px; }
.bestand__liste .avatar--text { font-size: 1.3em; }
.bestand__liste a { text-decoration: none; }
.bestand__liste a:hover { text-decoration: underline; }

/* Kleiner Knopf mit Zeichen davor. inline-flex statt inline-block, damit
   Zeichen und Text auf einer Grundlinie sitzen. */
.btn-klein--symbol {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.btn-klein--symbol svg {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}

/* Erledigt – kein Knopf, kein Verweis, nur eine Feststellung. */
.erledigt-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #276238;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.erledigt-marke svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

/* ---- PDF-Vorschau im Fenster ----
   Ein natives <dialog>: Escape, Fokusfalle und Hintergrund kommen vom
   Browser. Gross genug, dass eine DIN-A4-Seite lesbar bleibt, aber mit
   Abstand zum Rand, damit klar ist, dass etwas darunter liegt. */
.pdf-schau {
  width: min(92vw, 60rem);
  height: min(90vh, 55rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: 0 12px 40px rgb(36 49 63 / 35%);
  overflow: hidden;
}
.pdf-schau::backdrop { background: rgb(36 49 63 / 55%); }

.pdf-schau__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.6em 0.9em;
  border-bottom: 1px solid var(--color-border);
}
.pdf-schau__titel {
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-schau__aktionen {
  display: flex;
  gap: 0.4em;
  flex: 0 0 auto;
}

/* Spalte statt calc: Kopfzeile und Fuss nehmen sich, was sie brauchen,
   der Rahmen bekommt den Rest. Mit calc muesste man beide Hoehen kennen –
   und der Fuss ist mal da und mal nicht. */
.pdf-schau {
  display: flex;
  flex-direction: column;
}

/* Ohne diese Zeile bleibt das geschlossene Fenster sichtbar: Der Browser
   setzt bei einem <dialog> ohne [open] zwar display:none, aber das steht
   in seinem eigenen Stylesheet – und jede Autorenregel sticht das aus.
   Das display:flex oben galt damit auch im geschlossenen Zustand, und das
   Fenster stand als gewoehnlicher Block am Seitenende. */
dialog.pdf-schau:not([open]) { display: none; }
.pdf-schau__kopf { flex: 0 0 auto; }
.pdf-schau__rahmen {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  background: var(--color-cloud);
}

/* Der Fuss ist im Ruhezustand nur ein Knopf – erst beim Klick klappt
   der Bogen auf. Vorher nahm er dauerhaft ein Drittel der Flaeche weg,
   auch wenn man nur lesen wollte. */
.pdf-schau__fuss {
  flex: 0 0 auto;
  border-top: 1px solid var(--color-border);
  background: var(--color-cloud);
}
.pdf-schau__klappe {
  display: block;
  width: 100%;
  padding: 0.55em 0.9em;
  border: 0;
  background: transparent;
  color: var(--color-harbor-deep);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.pdf-schau__klappe:hover { background: var(--color-harbor-pale); }

/* Der Winkel zeigt nach unten, solange zugeklappt ist, und dreht sich
   beim Oeffnen. Gezeichnet statt als Sonderzeichen: Ein Glyph sieht in
   jeder Schrift anders aus, fehlt manchmal ganz – und hier war er durch
   eine verunglueckte Escape-Sequenz ohnehin nur ein kaputtes Byte. */
.pdf-schau__klappe {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.pdf-schau__winkel {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  transition: transform var(--transition);
}
.pdf-schau__klappe[aria-expanded="true"] .pdf-schau__winkel {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .pdf-schau__winkel { transition: none; }
}

/* Aufgeklappt gedeckelt: Das Dokument soll sichtbar bleiben, nicht der
   Bogen. */
.pdf-schau__bogen {
  max-height: 42vh;
  overflow-y: auto;
}
.pdf-schau__form {
  margin: 0;
  padding: 0.7em 0.9em;
  background: transparent;
  border: 0;
  max-width: none;
}
.pdf-schau__form .form-row { margin-bottom: 0.35em; }
.pdf-schau__form canvas { max-width: 24rem; }
.pdf-schau__form .unterschrift-vorschau { margin: 0 0 0.4em; }
/* Ein leiser Hinweis, solange die Vorschau nachzieht. Ueber dem Rahmen
   und nicht darin, damit die alte Fassung stehen bleibt, bis die neue da
   ist - ein leeres Feld waere unruhiger als ein kurzer Satz. */
.vorschau-stand {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

/* ---- Zustand und Aktionen in einer Spalte ----
   Zwei Spalten trugen dieselbe Sache und nahmen doppelt Platz - der
   Zustand ist ja meist der Grund fuer die naechste Aktion. Alles als
   Zeichen: Ausgeschrieben brauchte die Spalte mehr Raum als der Rest der
   Zeile zusammen. Was sie bedeuten, sagt der Titel beim Darueberfahren
   und die versteckte Beschriftung dem Vorleseprogramm. */
.symbol-reihe--stand,
.symbol-reihe--tun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em;
}

/* Zustand: nur ablesbar, nichts zum Draufdruecken. Deshalb ohne Rahmen
   und ohne Zeigefinger. */
.zustand {
  display: inline-flex;
  align-items: center;
  color: var(--color-ink-soft);
}
.zustand svg { width: 1.1em; height: 1.1em; }
.zustand--gut { color: #276238; }
.zustand--offen { color: #9A6300; }
.zustand--zu { color: var(--color-ink-soft); }

/* Aktionen: ein Feld, in das man treffen kann - 32 Pixel sind das
   Mindestmass, das sich mit dem Finger zuverlaessig bedienen laesst. */
.symbol-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-harbor-deep);
  cursor: pointer;
  list-style: none;
}
.symbol-knopf svg { width: 1.05em; height: 1.05em; }
.symbol-knopf:hover {
  background: var(--color-harbor-pale);
  border-color: var(--color-harbor);
}
.symbol-knopf--betont {
  background: var(--color-harbor-pale);
  border-color: var(--color-harbor);
}
.symbol-knopf--gefahr:hover {
  background: #FDF2F2;
  border-color: #B03030;
  color: #B03030;
}
.symbol-knopf.ist-erledigt { color: var(--color-ink-soft); }

/* Das Betreuungsende braucht ein Datumsfeld - deshalb hinter einer
   Klappe. Zugeklappt ist es ein Zeichen wie die anderen. */
.aktion-klappe { position: relative; }
.aktion-klappe summary::-webkit-details-marker { display: none; }
.aktion-klappe__feld {
  position: absolute;
  z-index: 20;
  inset-inline-end: 0;
  margin-top: 0.3em;
  /* Untereinander: Mit dem Haken sind es drei Dinge, nebeneinander
     waere die Blase breiter als die halbe Tabelle. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45em;
  padding: 0.6em;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgb(36 49 63 / 18%);
  white-space: nowrap;
}
.klappe-haken {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.klappe-haken input { margin: 0; flex: 0 0 auto; }
.aktion-klappe__feld input[type="date"] {
  width: auto;
  font-size: var(--fs-sm);
  padding: 0.2em 0.4em;
}

/* Ein Strich teilt die Aktionsreihe: links das Dokument (ansehen,
   herunterladen), rechts der Vorgang. Ohne ihn steht dort eine Reihe
   gleich aussehender Zeichen, in der man jedes einzeln lesen muss. */
.symbol-reihe__trenner {
  width: 1px;
  align-self: stretch;
  min-height: 1.4em;
  margin: 0 0.2em;
  background: var(--color-border);
}

/* Mindestbreiten fuer Zustand und Handlung.

   Ohne sie geht es schief: Eine Tabelle misst eine Spalte an ihrem
   schmalsten moeglichen Inhalt, und weil beide Reihen umbrechen duerfen,
   ist das ein einzelnes Zeichen. Die Spalten schnurrten auf 32 Pixel
   zusammen, die Zeichen standen untereinander, und den gewonnenen Platz
   bekamen Spalten, die ihn nicht brauchen.

   Vier Zeichen beim Zustand, bis zu sieben bei den Handlungen - dort
   kommen Dokument, Trenner und Vorgang zusammen. */
@media (min-width: 621px) {
  .admin-tabelle th.spalte-status,
  .admin-tabelle td.spalte-status { min-width: 6rem; }
  .admin-tabelle th.spalte-aktion,
  .admin-tabelle td.spalte-aktion { min-width: 16.5rem; }
  /* Wo hoechstens vier Zeichen stehen, waeren 16.5rem verschenkter
     Platz - den brauchen die Namen daneben. */
  .admin-tabelle th.spalte-aktion--knapp,
  .admin-tabelle td.spalte-aktion--knapp { min-width: 10rem; }
}
@media (max-width: 620px) {
  /* Am Telefon ist die Zeile eine Karte - dort duerfen die Zeichen
     nebeneinander in einer Reihe stehen. */
  .aktion-klappe__feld { inset-inline-end: auto; inset-inline-start: 0; }
}

/* ---- Vorschau auf ein Kind ----
   Alle Angaben auf einer Flaeche: Kind, Eltern, Unterschrift. Sie steht
   ohne Skript als Abschnitt auf der Seite und mit Skript im Dialog -
   deshalb traegt sie ihre Gestaltung selbst und nicht der Dialog. */
.kind-schau__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.kind-schau__name { margin: 0; font-size: var(--fs-lg); }
.kind-schau__stand { margin: 0.15em 0 0; color: var(--color-ink-soft); font-size: var(--fs-sm); }

/* Zwei Spalten, solange Platz ist: Kind links, Eltern rechts. Sie gehoeren
   zusammen und stehen untereinander unnoetig weit auseinander. */
.kind-schau__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-xs) var(--space-md);
}
.kind-schau__titel {
  margin: var(--space-xs) 0 0.4em;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-harbor);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.3em;
}

/* Beschriftung und Wert nebeneinander. Die Beschriftungsspalte richtet
   sich nach dem laengsten Wort und bleibt dann stehen - so stehen die
   Werte auf einer Kante. */
.kind-schau__liste {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35em var(--space-xs);
  margin: 0;
}
.kind-schau__liste dt {
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.kind-schau__liste dd { margin: 0; font-weight: 600; }

.kind-schau__vermerk { margin: 0 0 0.5em; font-size: var(--fs-sm); color: var(--color-ink-soft); }

/* ---- Die Unterschrift hinter einer Klappe ----
   Zugeklappt ein Knopf mit Zeichen und Wort, aufgeklappt das Bild
   darunter. Der Pfeil, den der Browser von sich aus vor ein summary
   setzt, muss weg - sonst steht er neben dem Zeichen und sagt
   dasselbe zweimal. */
.unterschrift-klappe { margin: 0.2em 0 0; }
.symbol-knopf-text {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-harbor-deep);
  font-size: var(--fs-sm);
  cursor: pointer;
  list-style: none;
}
.symbol-knopf-text::-webkit-details-marker { display: none; }
.symbol-knopf-text svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.symbol-knopf-text:hover { background: var(--color-harbor-pale); border-color: var(--color-harbor); }
.unterschrift-klappe[open] .symbol-knopf-text { margin-bottom: 0.5em; }
/* Ausdruecklich verstecken und nicht dem Browser ueberlassen: Das
   display: block am Bild kommt aus dem Autorenblatt und schlaegt die
   Regel, mit der aeltere Browser den Inhalt einer zugeklappten
   details verbergen. Die Unterschrift stand offen da. */
.unterschrift-klappe:not([open]) .kind-schau__unterschrift { display: none; }
/* Aufgeklappt sagt der Knopf, was der naechste Klick tut. Zwei Woerter,
   eines je Zustand - das kommt ohne Skript aus und laesst beide sauber
   uebersetzen. */
.unterschrift-klappe .ist-auf { display: none; }
.unterschrift-klappe[open] .ist-zu { display: none; }
.unterschrift-klappe[open] .ist-auf { display: inline; }

/* Die Unterschrift auf hellem Grund mit Rahmen: Ohne ihn schwebt ein
   freigestelltes Bild ohne erkennbare Kante im Nichts. */
.kind-schau__unterschrift {
  display: block;
  max-width: 100%;
  width: 16rem;
  height: auto;
  padding: 0.5em;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.kind-schau__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  margin: var(--space-sm) 0 0;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
}
.kind-schau__fuss .btn { margin: 0; }

/* ---- Der Dialog darum ----
   Dieselbe Bauart wie die PDF-Vorschau: Kopfzeile mit Titel und
   Schliessen, darunter der Inhalt. */
dialog.kind-schau-dialog {
  width: min(46rem, 94vw);
  max-height: 90vh;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink);
  overflow: hidden;
}
/* Ohne das bliebe der geschlossene Dialog stehen: Die eigene Regel
   ueberschriebe sonst die des Browsers fuer dialog:not([open]). */
dialog.kind-schau-dialog:not([open]) { display: none; }
dialog.kind-schau-dialog::backdrop { background: rgb(36 49 63 / 55%); }

.kind-schau-dialog__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 0.7em 1em;
  background: var(--color-harbor-pale);
  border-bottom: 1px solid var(--color-border);
}
.kind-schau-dialog__titel { color: var(--color-harbor-deep); }
.kind-schau-dialog__inhalt {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  overflow-y: auto;
  max-height: calc(90vh - 3.4em);
}
/* Im Dialog braucht der Bogen keine eigene Klappe mehr - man ist ja
   schon drin. */
.kind-schau-dialog__inhalt details.admin-anlegen { border: 0; padding: 0; }
.kind-schau-dialog__inhalt details.admin-anlegen > summary { display: none; }

/* Die Ueberschriften des Bogens sind fuer eine Seite gemacht, auf der
   ein h1 darueber steht und Platz nach rechts ist. Im Dialog waren sie
   mit 44 Pixeln groesser als alles andere darin - hier bekommen sie
   dieselbe Form wie die Titel der Vorschau. */
.kind-schau-dialog__inhalt h2 {
  margin: var(--space-sm) 0 0.4em;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-harbor);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.3em;
}
.kind-schau-dialog__inhalt h2:first-child { margin-top: 0; }

@media (max-width: 620px) {
  /* Kein randloser Vollbildkasten: Der Browser setzt Dialogen von sich
     aus eine Hoechstbreite, gegen die 100vw nichts ausrichtet - es
     blieben Raender, und dazu passen eckige Kanten nicht. Also die
     Karte behalten und nur enger polstern. */
  dialog.kind-schau-dialog { max-height: 92vh; }
  .kind-schau-dialog__inhalt { padding: var(--space-sm); max-height: calc(92vh - 3.4em); }
}
/* ---- Ordnen und einschraenken neben der Ueberschrift ----
   Nebeneinander und nicht darunter: Die Liste beginnt sonst erst nach
   zwei Bloecken, und man rollt, bevor man etwas sieht. */
.listen-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-sm);
}
.listen-kopf__titel { flex: 0 0 auto; }

/* Die Leiste selbst: erst wonach, dann in welche Richtung, dann welche
   Werte. Umbrechen darf sie, denn die Werteliste kann lang werden. */
/* ---- Jahr im Vertretungsarchiv ----
   Kein Filter, sondern der Ausschnitt: Das Jahr entscheidet, welche
   Zeilen ueberhaupt geholt werden. Deshalb steht es fuer sich und in
   einer Zeile, nicht in der Leiste daneben. */
.archiv-jahr {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-sm);
}
.archiv-jahr select { width: auto; font-size: var(--fs-sm); padding: 0.25em 0.4em; }

/* ---- Systemstand ----
   Der Bericht lebt von seinen Spalten - Migrationsname links, Zustand
   rechts. Deshalb feste Zeichenbreite und kein Umbruch; auf schmalen
   Schirmen rollt der Kasten lieber seitlich, als die Ausrichtung zu
   verlieren. */
.stand-bericht {
  overflow-x: auto;
  margin: 0;
  padding: var(--space-sm);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: pre;
}

/* ---- Filterleiste ----
   Bis zu drei Steckplaetze nebeneinander, dahinter der Knopf zum Leeren.
   Jeder Steckplatz ist ein Kriterium und eine Klappe mit den Werten dazu.

   Am Telefon ist das dieselbe Leiste, nur untereinander: Drei
   Auswahlfelder nebeneinander waeren dort je zwei Zentimeter breit, und
   die schwebende Werteliste haette keinen Platz, in den sie schweben
   koennte. */
.listen-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.5em;
  margin: 0;
  padding: 0.4em 0.6em;
  /* Eigene Schriftgroesse: Die Leiste steht in der Ueberschrift und
     erbte deren 21,6 Pixel. Damit wuchsen alle Abstaende mit, die in
     em gerechnet sind - die Leiste war halb so hoch wie die
     Ueberschrift selbst. */
  font-size: var(--fs-sm);
  line-height: 1.3;
  background: var(--color-cloud);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-width: none;
  flex: 1 1 26rem;
  font-weight: 400;
}
.listen-filter__platz {
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.listen-filter select {
  font-size: var(--fs-sm);
  padding: 0.25em 0.4em;
  width: auto;
  max-width: 10rem;
}
.listen-filter__leeren { flex: 0 0 auto; }
/* [hidden] ausdruecklich durchsetzen: Das display der Knopfregel kommt
   aus dem Autorenblatt und schlaegt die Browservorgabe - der Knopf zum
   Leeren stand sonst auch da, wenn nichts zu leeren war. */
.listen-filter__leeren[hidden] { display: none; }

/* Die Werte stecken in einer Klappe: zugeklappt eine Zeile, aufgeklappt
   eine schwebende Liste. Nebeneinander gestellt nahmen sie der
   Ueberschrift den Platz weg. */
.listen-filter__klappe { position: relative; }
.listen-filter__klappe summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 0.25em 0.6em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  white-space: nowrap;
  list-style: none;
}
.listen-filter__klappe summary::-webkit-details-marker { display: none; }
.listen-filter__klappe[open] summary {
  background: var(--color-harbor-pale);
  border-color: var(--color-harbor);
}

.listen-filter__werte {
  position: absolute;
  z-index: 20;
  inset-inline-start: 0;
  margin-top: 0.3em;
  min-width: 12rem;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.5em 0.7em;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgb(36 49 63 / 18%);
}
.listen-filter__werte label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.2em 0;
  white-space: nowrap;
  cursor: pointer;
}
.listen-filter__werte label:hover { color: var(--color-harbor-deep); }

/* ---- Am Telefon ----
   Untereinander und mit groesseren Flaechen. Ein Auswahlfeld, das man
   mit dem Finger treffen soll, braucht die 44 Pixel, die auch sonst das
   Mass sind - und die Werteliste schwebt nicht, sondern steht einfach
   darunter und nimmt die ganze Breite. */
@media (max-width: 620px) {
  .listen-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
    padding: 0.7em;
  }
  .listen-filter__platz { flex-direction: column; align-items: stretch; gap: 0.3em; }
  .listen-filter select {
    max-width: none;
    width: 100%;
    font-size: 1rem;
    min-height: 2.75rem;
  }
  .listen-filter__klappe summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    font-size: 1rem;
  }
  /* Kein Schweben: Auf einem schmalen Schirm liegt die Liste sonst halb
     ausserhalb, und darunter ist ohnehin Platz. */
  .listen-filter__werte {
    position: static;
    min-width: 0;
    max-height: 50vh;
    box-shadow: none;
    border-top: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }
  .listen-filter__werte label {
    min-height: 2.75rem;
    white-space: normal;
    border-bottom: 1px solid var(--color-border);
  }
  .listen-filter__werte label:last-child { border-bottom: 0; }
  .listen-filter__werte input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
  .listen-filter__leeren { align-self: flex-start; }
}

/* Spaltentitel als Schaltflaeche: sieht aus wie der Titel, verhaelt sich
   wie ein Knopf. Der Pfeil erscheint erst, wenn danach geordnet wird -
   fuenf Pfeile nebeneinander sagten nichts. */
/* Der Spaltentitel ist ein Verweis, damit er auch ohne Skript ordnet -
   sehen soll er aber wie eine Ueberschrift aussehen und nicht wie ein
   Link. Deshalb Farbe und Unterstreichung ausdruecklich zuruecknehmen;
   erst beim Zeigen darauf wird er als anklickbar kenntlich. */
.spalte-sortier {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.spalte-sortier:hover,
.spalte-sortier:focus-visible { text-decoration: underline; }
/* Der Pfeil steht an jedem Titel, nach dem sich ordnen laesst - blass,
   solange er nicht dran ist. Nur an der aktiven Spalte einen zu zeigen
   hiess, dass man die uebrigen ausprobieren muss, um zu sehen, dass sie
   ueberhaupt gehen. */
.spalte-sortier__pfeil {
  width: 0.7em;
  font-size: 0.85em;
  opacity: 0.4;
}
.spalte-sortier__pfeil::before { content: "↕"; }
.spalte-sortier:hover .spalte-sortier__pfeil { opacity: 0.75; }
.spalte-sortier.ist-sortiert .spalte-sortier__pfeil { opacity: 1; }
.spalte-sortier.ist-sortiert .spalte-sortier__pfeil::before { content: "↓"; }
.spalte-sortier.ist-sortiert.ist-aufsteigend .spalte-sortier__pfeil::before { content: "↑"; }

/* Ein Zeichen fuer den Gesamtstand, damit sich die Liste ueberfliegen
   laesst. Gruen fuer erledigt, gedeckt fuer abgeschlossen - ein rotes
   Kreuz laese sich als Fehler, und beendet ist kein Fehler. */
.stand-marke {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 0.35em;
}
.stand-marke svg { width: 1.05em; height: 1.05em; }
.stand-marke--zu { color: var(--color-ink-soft); }

/* ---- Vertrag versenden ----
   Links steht, was hinausgeht – rechts, wie es aussieht. Nebeneinander,
   damit man die Empfaenger im Blick hat, waehrend man die Nachricht liest. */
.versand-spalten {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-sm) var(--space-md);
  align-items: start;
}
.versand-teil > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.versand-liste {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
}
.versand-liste li {
  padding: 0.5em 0;
  border-bottom: 1px solid var(--color-border);
}
.versand-liste li:last-child { border-bottom: 0; }
.versand-adresse {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  overflow-wrap: anywhere;
}

/* Die Knopfreihe unter dem Bogen: Vorschau und Senden nebeneinander,
   Abbrechen daneben. */
.versand-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  margin: var(--space-sm) 0 0;
}

/* Im Baukasten stehen Formular und Listen untereinander in einer Spalte -
   der Kasten drumherum wuerde sie voneinander abschneiden. */
.versand-teil .kontakt-form {
  max-width: none;
  margin-bottom: var(--space-sm);
}
.versand-teil textarea { resize: vertical; }

/* Die Vorschau bekommt einen eigenen Grund, damit klar ist: Das ist die
   Nachricht, nicht die Seite. Feste Hoehe, denn eine Mail waechst sonst
   ueber jedes Mass. */
.mail-vorschau {
  display: block;
  width: 100%;
  height: 40rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-cloud);
}

@media (max-width: 860px) {
  /* Am Telefon untereinander: Zwei Spalten liessen der Vorschau nichts. */
  .versand-spalten { grid-template-columns: 1fr; }
  .mail-vorschau { height: 28rem; }
}

/* ---- Profilbearbeitung ----
   Bild und Unterschrift nebeneinander. Beides gehoert zum Profil und
   beides ist kurz – untereinander war die Seite doppelt so lang, ohne
   dass mehr daraufstand.

   align-items:start, damit der kuerzere Teil nicht auf die Hoehe des
   laengeren gezogen wird. */
.profil-spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-md);
  align-items: start;
}

/* Die erste Ueberschrift einer Spalte traegt sonst den Trennstrich der
   vorigen Zeile mit sich – hier faengt jede Spalte fuer sich an. */
.profil-teil > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Im halben Raum wirken die Formulare sonst wie Kaesten in Kaesten. */
.profil-teil .kontakt-form {
  max-width: none;
  padding: var(--space-sm);
}
.profil-teil .avatar-gitter { gap: 0.35em; }
.profil-teil .avatar-wahl img { width: 52px; height: 52px; }

@media (max-width: 860px) {
  /* Am Telefon untereinander – zwei Spalten liessen weder dem
     Vorlagenraster noch der Unterschrift genug Platz. */
  .profil-spalten { grid-template-columns: 1fr; }
}
/* Eine Auswahl, die es gibt, aber gerade nicht geht: abgeblendet statt
   ausgeblendet. Verschwindet sie, sucht man sie – steht sie blass da,
   sagt der Zusatz daneben, warum. */
.ist-abgeblendet { opacity: 0.55; }
.ist-abgeblendet label { cursor: not-allowed; }

/* ---- Unterschrift zeichnen ----
   Ein Feld zum Unterschreiben mit Maus oder Finger. touch-action:none ist
   entscheidend: Ohne das rollt der Browser am Telefon die Seite, statt den
   Strich zu zeichnen. */
.zeichenfeld {
  display: inline-block;
  max-width: 100%;
}
.zeichenfeld canvas {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  touch-action: none;
  background: var(--color-paper);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  cursor: crosshair;
}
.zeichenfeld .btn-klein { margin-top: 0.4em; }

/* Die hinterlegte Unterschrift zur Ansicht – auf hellem Grund, damit eine
   dunkle Linie zu sehen ist. */
.unterschrift-vorschau {
  margin: 0 0 var(--space-sm);
  padding: 0.5em 0.8em;
  display: inline-block;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.unterschrift-vorschau img { display: block; }

/* Im Unterschriftsformular genuegt ein Daumennagel: Man will sehen, dass
   es die richtige ist, nicht die Feinheiten der Linie. Zwei Zentimeter
   entsprechen etwa der Breite, in der sie spaeter auf dem Blatt steht. */
.unterschrift-vorschau--klein { padding: 0.3em 0.5em; }
.unterschrift-vorschau--klein img { width: 2cm; height: auto; }
/* ---- Namensspalten ----
   Ein Name gehoert in eine Zeile. Die Spaltenbreite richtet sich in einer
   Tabelle nach dem Inhalt, und neben Spalten mit gestapelten Schaltflaechen
   blieb fuer "Diana Barseghyan" zu wenig uebrig - der Name brach um,
   obwohl daneben Platz war.

   nowrap sagt der Tabelle, wie breit die Spalte mindestens sein muss; die
   uebrigen Spalten geben den Platz her. Notfalls rollt die Tabelle in
   ihrem Rahmen, statt den Namen zu zerreissen. */
/* Das Alter steht in Kurzform da und soll nicht umbrechen - "2 J." und
   "5 M." gehoeren zusammen. */
.admin-tabelle .spalte-alter { white-space: nowrap; }

@media (min-width: 621px) {
  .admin-tabelle td.spalte-name,
  .admin-tabelle th.spalte-name { white-space: nowrap; }
}
/* ---- Werkzeugleiste ueber der Liste ----
   Erzeugen, Blanko-Vorlagen und Archiv nebeneinander. Untereinander war
   das dreimal ein Kasten ueber die volle Breite und dreimal Rollweg,
   bevor die eigentliche Liste anfing.

   Eine aufgeklappte Klappe nimmt sich die ganze Zeile: Das Formular
   darin braucht die Breite, zusammengequetscht neben zwei Knoepfen waere
   es unbrauchbar. */
.werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2xs) var(--space-xs);
  margin-bottom: var(--space-sm);
}
.werkzeugleiste > details[open] { flex: 1 1 100%; }
.werkzeugleiste > .admin-anlegen,
.werkzeugleiste > .admin-blanko { margin-bottom: 0; }
.werkzeugleiste > .btn { margin: 0; }

/* Der Blanko-Kasten steht jetzt neben einem Knopf und soll nicht wie ein
   Block wirken, solange er zu ist. */
.werkzeugleiste > .admin-blanko { padding: 0.45em 0.9em; }
.werkzeugleiste > .admin-blanko[open] { padding: 0.6em 1.1em 0.9em; }

@media (max-width: 620px) {
  /* Am Telefon untereinander – nebeneinander bliebe von jedem Knopf ein
     Streifen uebrig. */
  .werkzeugleiste > * { flex: 1 1 100%; }
}
/* ---- Dringender Handlungsbedarf ----
   Rot und nicht nur gelb: Ein fehlender Masernnachweis bei laufender
   Betreuung ist keine Erinnerung, sondern ein Zustand, der abgestellt
   werden muss. Deshalb faellt er auch in der Zeile auf, nicht nur in
   der einen Zelle. */
.zeile-dringend > td { background: #FDF2F2; }
.zeile-dringend > td:first-child { box-shadow: inset 3px 0 0 #B03030; }

.dringend-marke {
  display: inline-block;
  margin-top: 0.25em;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  background: #B03030;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Der Kasten auf der Uebersicht steht ueber allem anderen. */
.dringend-kasten { border-left: 4px solid #B03030; }
.dringend-liste {
  margin: 0.4em 0 0.6em;
  padding-left: 1.2em;
  font-size: var(--fs-sm);
}
.dringend-liste li { margin-bottom: 0.2em; }

/* Fuss einer Liste: Was danach kommt, bezieht sich auf das Ganze -
   etwa der Export. Abgesetzt, damit es nicht wie eine weitere Zeile
   der Liste wirkt. */
.listen-fuss {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* ---- Archivflaeche unten auf der Vertretungsseite ----
   Abgesetzt vom Rest der Seite: Was darin steht, ist erledigt und soll
   die laufende Liste darueber nicht zudecken. Zugeklappt als <details>,
   damit es ohne Skript funktioniert. */
.archiv-flaeche {
  margin-top: var(--space-lg);
  background: var(--color-cloud);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.archiv-flaeche__kopf {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8em 1.1em;
  font-family: var(--font-heading);
  font-weight: 700;
  cursor: pointer;
}
.archiv-flaeche__kopf:hover { color: var(--color-harbor-deep); }
.archiv-flaeche__inhalt { padding: 0 1.1em 1.1em; }

/* Der Filter steht schon in der Flaeche – ein zweiter Rahmen darin waere
   eine Schachtel in der Schachtel. */

@media (max-width: 620px) {
  .archiv-flaeche__kopf { padding: 0.7em 0.7em; }
  .archiv-flaeche__inhalt { padding: 0 0.6em 0.9em; }
}

/* ---- Anstehende Geburtstage ----
   Offen und ohne Klappe: Eine Erinnerung, die man erst aufklappen muss,
   erinnert an nichts. Als Raster, damit bei mehreren Geburtstagen in einer
   Woche nicht eine lange Spalte entsteht. */
.geburtstage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.65em;
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}

.geburtstag {
  display: grid;
  /* Bild – Name – Zeitangabe. Der Hinweis darunter greift ueber zwei
     Spalten, damit er nicht am Bild ausgerichtet einrueckt. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25em 0.7em;
  padding: 0.65em 0.85em;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.geburtstag .avatar { align-self: start; }
.geburtstag__wer { min-width: 0; }
.geburtstag__wer .person__name {
  font-size: var(--fs-sm);
  line-height: 1.25;
  overflow-wrap: break-word;
}
.geburtstag__wer small {
  display: block;
  color: var(--color-ink-soft);
  font-size: 0.8rem;
}

/* Die Zeitangabe als Pille – „heute" und „morgen" sollen ins Auge fallen,
   ohne dass man das Datum erst umrechnet. */
.geburtstag__wann {
  padding: 0.2em 0.65em;
  border-radius: 999px;
  background: var(--color-harbor-pale);
  color: var(--color-harbor-deep);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Heute: der einzige Tag, an dem es zu spaet zum Vorbereiten ist. */
.geburtstag--heute {
  border-color: var(--color-sunshine);
  background: #FFF8EA;
  box-shadow: inset 3px 0 0 var(--color-sunshine);
}
.geburtstag--heute .geburtstag__wann {
  background: var(--color-sunshine);
  color: #3A2600;
}

/* Samstag und Sonntag: An dem Tag findet keine Betreuung statt, gefeiert
   wird also vorher. */
.geburtstag__hinweis {
  grid-column: 2 / -1;
  margin-top: 0.15em;
  color: var(--color-sunshine-deep);
  font-size: 0.78rem;
  font-weight: 600;
}

@media (max-width: 620px) {
  /* Eine Karte je Zeile – zwei nebeneinander liessen weder dem Namen noch
     der Zeitangabe genug Platz. */
  .geburtstage { grid-template-columns: 1fr; }
}

/* ---- Meldung direkt am Feld ----
   Der Kasten ganz oben sagt zwar dasselbe, steht beim langen Antrag aber
   ausserhalb des Bildes. Diese Meldung steht bei den Feldern, um die es
   geht, und faellt mit Farbe und Balken auf, ohne zu schreien. */
.feld-fehler {
  margin: 0.15em 0 0.6em;
  padding: 0.5em 0.75em;
  border-inline-start: 3px solid #8A2A2A;
  border-radius: var(--radius-sm);
  /* Dieselben Farben wie der Kasten oben – es ist dieselbe Art Meldung,
     nur an einem anderen Platz. */
  background: #FBE7E7;
  color: #8A2A2A;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Das Feld selbst bekommt einen roten Rahmen. aria-invalid statt einer
   eigenen Klasse: Dieselbe Angabe traegt schon die Barrierefreiheit, und
   zwei Quellen fuer denselben Zustand laufen frueher oder spaeter
   auseinander. */
.form-row input[aria-invalid="true"],
.form-row select[aria-invalid="true"] {
  border-color: #8A2A2A;
  outline: 1px solid #8A2A2A;
}

/* ---- Antragsformular in Spalten ----
   Ein Vertretungsantrag hat viele kurze Angaben. Alles untereinander
   ergab eine Rollstrecke von ueber 1400 Pixeln, obwohl rechts die halbe
   Breite frei blieb. Nebeneinander passt der erste Schritt auf einen
   Blick.

   align-items:start, damit der kuerzere Block nicht auf die Hoehe des
   laengeren gezogen wird. */
.antrag-spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-md);
  align-items: start;
}
/* Im Kindblock traegt links nur die Auswahl, rechts der laengere
   Erlaeuterungstext - halbe/halbe waere hier verschenkt. */
.antrag-spalten--kopf { grid-template-columns: minmax(0, 18rem) 1fr; }
.antrag-spalten--kopf .vertrag-hinweis { margin: 0; }

@media (max-width: 860px) {
  /* Am Telefon untereinander: Zwei Spalten waeren hier schmaler als die
     Auswahllisten, die darin stehen. */
  .antrag-spalten,
  .antrag-spalten--kopf { grid-template-columns: 1fr; }
}

/* ---- Kompakte Listen ----
   Die Polster stammen von der Betreuungszeiten-Tabelle der Website, wo
   sie fuer wenige Zeilen Fliesstext gedacht sind. In einer Verwaltungs-
   liste zaehlt dagegen, wie viele Zeilen auf den Schirm passen: Eine
   Zeile war 140 Pixel hoch, bei fuenf Personen also schon der halbe
   Bildschirm. */
table.admin-tabelle th,
table.admin-tabelle td { padding: 0.5em 0.65em; }

/* Der Name eine Stufe kleiner als der Fliesstext. In Grundgroesse
   brauchte "Hasmik Khachatryan" 160 Pixel und die Zelle bot 135 - er
   brach um, obwohl daneben Platz war. */
table.admin-tabelle .person > span {
  font-size: var(--fs-sm);
  line-height: 1.25;
}

/* Eigene Zeile fuer den Namen, damit das NEU-Zeichen darunter sitzt und
   ihn nicht vor sich herschiebt. */
.person__name { display: block; }

/* In der Tabelle bleibt der Name zusammen. Ohne das griff das
   overflow-wrap:anywhere von .person > span: Es sagt der Tabelle, die
   Spalte duerfe beliebig schmal werden, sie bekam 144 Pixel zugeteilt -
   und der Name brach um, obwohl die Tabelle Platz gehabt haette. */
table.admin-tabelle .person__name { white-space: nowrap; }

/* Enger gestapelt als auf der Uebersicht: In der Liste steht das Bild
   zur Wiedererkennung, nicht als Bildnis. */
table.admin-tabelle .person { gap: 0.3em; }

/* ---- Bearbeiten mitten in der Liste ----
   Die eingeschobene Zeile traegt den Bogen zu genau der Person darueber.
   Ein farbiger Streifen links und ein abgesetzter Grund halten beides
   zusammen - sonst sieht man nicht, wozu das Formular gehoert. */
table.admin-tabelle tr.bearbeiten-zeile > td {
  padding: 0;
  background: var(--color-cloud);
  border-left: 3px solid var(--color-harbor);
  /* Die Aktionsspalte laeuft auf nowrap, damit ihre Schaltflaechen
     nebeneinander bleiben. Diese Zelle ist als einzige ihrer Zeile
     ebenfalls die letzte und erbte das - der gesamte Formulartext stand
     dann auf einer Zeile, und die Tabelle wuchs auf 1600 Pixel. */
  white-space: normal;
}
.bearbeiten-zeile .admin-anlegen {
  margin: 0;
  border: 0;
  background: transparent;
}
/* Die Ueberschrift des Bogens waere hier doppelt: Der Name steht in der
   Zeile darueber. Gilt fuer beide Bauarten - die Klappe bei den
   Tagespflegepersonen und die Ueberschrift bei den Kindern. */
.bearbeiten-zeile .admin-anlegen__knopf { display: none; }
.bearbeiten-zeile > td > div > h2:first-child { display: none; }

.bearbeiten-zeile > td > div { padding: 0.9em 1em 1.2em; }
.bearbeiten-zeile h2 { margin-top: var(--space-md); }

/* Der geoeffnete Stift bleibt sichtbar gedrueckt */
.symbol-link.ist-offen {
  color: var(--color-harbor-deep);
  background: var(--color-harbor-pale);
}

/* ---- Personen am Telefon ----
   Unter 620px wird aus jeder Tabellenzeile eine Karte: links die
   Beschriftung, rechts der Inhalt. In dieser schmalen rechten Spalte
   gehoert das Bild neben den Namen und nicht darueber - gestapelt stuende
   es sonst allein neben der Beschriftung "Kind" und riss die Zeile auf.
   Die Uebersicht bleibt dagegen gestapelt, sie hat die volle Breite. */
@media (max-width: 620px) {
  table.admin-tabelle .person {
    flex-direction: row;
    align-items: center;
    gap: 0.6em;
    text-align: left;
  }

  /* Die Bearbeiten-Zeile ist keine Karte mit Beschriftung, sondern ein
     Formular ueber die volle Breite. Ohne diese Ausnahme haette sie die
     leere Beschriftungsspalte der Karten geerbt und das Formular in das
     rechte Drittel gedraengt.

     Der Selektor nennt Tabelle und Zeile mit, sonst gewinnt die
     Kartenregel oben: Sie bringt zwei Klassen mit, eine kurze Fassung
     hier nur eine. */
  table.admin-tabelle tr.bearbeiten-zeile > td {
    display: block;
    padding: 0;
  }
  table.admin-tabelle tr.bearbeiten-zeile > td::before { content: none; }
  .bearbeiten-zeile > td > div { padding: 0.8em 0.6em 1em; }

  /* Schmalere Kacheln, damit auch auf 375px zwei nebeneinander stehen */
  .bestand__liste {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    padding: 0.4em 0.6em 1em;
    gap: 1em 0.4em;
  }
  .bestand__liste .avatar { width: 60px; height: 60px; }
  .bestand__liste .avatar--text { font-size: 1.1em; }

  /* Ein Name ist ein Tippziel - unter 44px trifft man ihn mit dem Daumen
     nicht zuverlaessig. */
  .bestand__liste a {
    display: inline-block;
    padding: 0.2em 0;
    min-height: 1.4em;
  }
}

/* Das aktuelle Bild ueber der Auswahl */
.avatar-jetzt {
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}
.avatar-jetzt .avatar { width: 64px; height: 64px; font-size: 1.1em; }

/* Auswahl der Vorlagen */
.avatar-auswahl {
  margin: 0 0 var(--space-sm);
  padding: 0;
  border: 0;
}
.avatar-auswahl > legend {
  padding: 0;
  margin-bottom: 0.5em;
  font-weight: 600;
  font-size: var(--fs-sm);
}
.avatar-gitter { display: flex; flex-wrap: wrap; gap: 0.5em; }

/* Das Auswahlfeld selbst bleibt fuer die Tastatur da, sichtbar ist das
   Bild: Ein Rahmen zeigt, was gewaehlt ist. */
.avatar-wahl { cursor: pointer; }
.avatar-wahl input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.avatar-wahl img {
  display: block;
  border-radius: 50%;
  border: 3px solid transparent;
  background: var(--color-cloud);
  transition: border-color var(--transition);
}
.avatar-wahl:hover img { border-color: var(--color-border); }
.avatar-wahl input:checked + img { border-color: var(--color-harbor); }
.avatar-wahl input:focus-visible + img { outline: 2px solid var(--color-harbor); outline-offset: 2px; }