/* Felten & Klages Sprachtherapie — Basis-Styles.
   Schriften werden lokal ausgeliefert. Es wird keine Verbindung zu Google Fonts
   oder einem anderen externen Schriftserver aufgebaut (DSGVO).
   Solange die Dateien Fraunces und Inter nicht auf dem Server liegen, greifen
   die unten definierten System-Fallbacks mit identischer Anmutung. */

:root {
  --primary: #17605C;
  --primary-dark: #0E3E3B;
  --primary-light: #E4F0EE;
  --accent: #B4531F;
  --accent-light: #F5E3D6;
  --page: #FCFBF8;
  --surface: #FFFFFF;
  --ink: #1C2422;
  --muted: #525E5B;
  --line: #DBE4E1;
  --font-serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: 400;
  padding-bottom: 72px; /* Platz fuer die feste Kontaktleiste auf Mobilgeraeten */
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  font-variation-settings: 'SOFT' 40, 'WONK' 0;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.2; }
h3 { font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.35; font-weight: 600; }
h4 { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; }

p, li { font-size: 1.125rem; line-height: 1.7; }
small, .meta { font-size: 1rem; line-height: 1.6; color: var(--muted); }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: #8f4118; }

/* Sichtbarer Fokus auf allen interaktiven Elementen */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.on-dark a:focus-visible,
.on-dark button:focus-visible,
.on-dark summary:focus-visible {
  outline-color: #F5E3D6;
}

/* Skip-Link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  background: var(--surface);
  color: var(--primary-dark);
  border: 2px solid var(--primary);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease-in-out;
}
.skip-link:focus { top: 1rem; }

/* Layout */
.container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) {
  .container { padding-inline: 2rem; }
}

.section { padding-block: 3.5rem; }
@media (min-width: 768px) {
  .section { padding-block: 5rem; }
}

.prose-narrow { max-width: 68ch; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  min-width: 48px;
  padding: 0.75rem 1.4rem;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

.btn-outline { background: transparent; color: var(--primary-dark); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary-light); color: var(--primary-dark); }

.btn-light { background: #fff; color: var(--primary-dark); border-color: #fff; }
.btn-light:hover { background: var(--accent-light); color: var(--primary-dark); border-color: var(--accent-light); }

.btn[disabled] { opacity: 0.65; cursor: progress; }

/* Karten */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(28, 36, 34, 0.05);
}
.card-link { display: block; text-decoration: none; color: var(--ink); }
.card-link:hover { border-color: var(--primary); color: var(--ink); }
.card h3 { margin-bottom: 0.35rem; }

/* Badge fuer den Aufnahmestatus */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 1rem;
}

.tile { background: var(--primary-light); border-radius: 16px; padding: 1.5rem; }

/* Formulare */
label { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 0.35rem; }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: 1rem; }

input[type='text'],
input[type='email'],
input[type='tel'],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #9AA8A5;
  border-radius: 12px;
}
textarea { min-height: 150px; line-height: 1.6; }

input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] { border-color: #A02D0F; border-width: 2px; }

.field-error {
  display: none;
  color: #8f2b10;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.35rem;
}
.field-error.is-visible { display: block; }

.form-status { border-radius: 12px; padding: 1rem 1.15rem; font-size: 1.0625rem; }
.form-status--error { background: #FBE7E1; color: #7d2a10; border: 1px solid #E0A793; }
.form-status--success { background: var(--primary-light); color: var(--primary-dark); border: 1px solid #B6D3CE; }

/* Ladeanzeige */
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spinner { animation-duration: 2s; }
  * { transition-duration: 0.01ms !important; }
}

/* FAQ-Akkordeon */
details.faq {
  border-bottom: 1px solid var(--line);
  padding: 0.35rem 0;
}
details.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2.5rem 1rem 0;
  font-weight: 600;
  font-size: 1.125rem;
  position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--primary);
}
details.faq[open] summary::after { content: '–'; }
details.faq .faq-body { padding: 0 0 1.15rem; max-width: 68ch; }

/* Navigation */
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.0625rem;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--primary); border-bottom-color: var(--primary); }
.nav-link[aria-current='page'] { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.mobile-link {
  display: block;
  padding: 0.85rem 0;
  min-height: 48px;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-link[aria-current='page'] { color: var(--primary); font-weight: 600; }

.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 2px rgba(28, 36, 34, 0.06); }

/* Feste Kontaktleiste auf Mobilgeraeten */
.mobile-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  background: #fff;
}
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  color: var(--primary-dark);
}
.mobile-bar a + a { border-left: 1px solid var(--line); }
@media (min-width: 768px) {
  .mobile-bar { display: none; }
}

/* Fussbereich */
.site-footer { background: var(--primary-dark); color: #fff; }
.site-footer a { color: #F3E9E1; }
.site-footer a:hover { color: #fff; }

/* Tabellen (Sprechzeiten, Leistungsuebersicht) */
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td {
  text-align: left;
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
}
table.data th { font-weight: 600; }

/* Karte mit Zwei-Klick-Loesung */
.map-consent {
  background: var(--primary-light);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
}
.map-frame { width: 100%; height: 380px; border: 0; border-radius: 16px; }

/* Druckansicht — vor allem fuer die Leistungsuebersicht der Zuweiser:innen */
@media print {
  .site-header, .mobile-bar, .site-footer, .no-print { display: none !important; }
  body { background: #fff; font-size: 11pt; padding-bottom: 0; }
  a { color: #000; text-decoration: none; }
  .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .section { padding-block: 0.75rem; }
}