/*
  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
   ========================================================= */
.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);
}
.vertrag-person:first-of-type { border-top: 0; }
.vertrag-person h3,
.vertrag-block h3 { font-size: var(--fs-base); 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; }

/* Bestaetigte Masernschutz-Sichtung: gruen, weil sie erledigt ist – die
   offenen Faelle stehen daneben in der warnenden Farbe. */
.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;
}

.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: 900px;
}
.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; }

.admin-login { max-width: 420px; }
.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; }

  /* 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 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 td[data-label=""] { grid-template-columns: 1fr; }
  table.admin-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);
}