/* Psychiatrie Kapfenberg – Farben und Schrift aus der Canva-Vorlage
   („Schwarz und Weiß, Elegant und Einfach“): Dunkelblau, Creme, Rosé-Beige, Montserrat. */

:root {
  --blau: #0c1c4b;
  --blau-hell: #142a6b;
  --blau-linie: rgba(12, 28, 75, 0.18);
  --creme: #e8e1cf;
  --rose: #e6ddd9;
  --weiss: #ffffff;
  --text-auf-blau: #f3efe4;
  --offen: #2f7a55;
  --fehler: #9b2c2c;

  --schrift: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --breite: 1120px;
  --rand: clamp(16px, 4vw, 48px);
}

/* Montserrat, selbst gehostet (SIL Open Font License). Eine variable Datei für
   alle Gewichte, auf Latin gesubsettet – kein Aufruf bei Google. */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .status-punkt::after { animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--blau);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 300; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); margin-bottom: clamp(28px, 4vw, 48px); }
h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 16px; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blau-hell); }
:focus-visible { outline: 2px solid var(--blau-hell); outline-offset: 3px; }
.hero :focus-visible, .fuss :focus-visible { outline-color: var(--creme); }

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

/* ===== Kopfzeile ===== */
.kopf {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px var(--rand);
  background: var(--blau); color: var(--text-auf-blau);
  border-bottom: 1px solid rgba(232, 225, 207, 0.18);
}
.kopf :focus-visible { outline-color: var(--creme); }
.marke { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.marke:hover { color: var(--creme); }
/* Nur das Gehirn-Symbol: die Wortmarke im Logo wäre bei dieser Höhe 5 px klein. */
.marke-symbol { display: block; height: 48px; width: auto; }
.marke-text { font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; }
.navigation { display: flex; gap: clamp(16px, 3vw, 36px); }
.navigation a { text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.navigation a:hover { text-decoration: underline; color: var(--creme); }

/* Burger-Knopf: nur auf schmalen Bildschirmen sichtbar */
.menue-knopf {
  display: none; position: relative; width: 44px; height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-auf-blau);
}
.menue-balken, .menue-balken::before, .menue-balken::after {
  content: ""; position: absolute; left: 10px; width: 24px; height: 2px;
  background: currentColor; transition: transform .2s, opacity .2s;
}
.menue-balken { top: 21px; }
.menue-balken::before { top: -7px; left: 0; }
.menue-balken::after { top: 7px; left: 0; }
.menue-knopf[aria-expanded="true"] .menue-balken { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-balken::before { transform: translateY(7px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-balken::after { transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero { background: var(--blau); color: var(--text-auf-blau); }
.hero-inhalt {
  max-width: var(--breite); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--rand);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "kopf bild" "rest bild";
  column-gap: clamp(32px, 6vw, 96px); row-gap: 0;
  align-items: start;
}
.hero-kopf { grid-area: kopf; }
.hero-bild { grid-area: bild; margin: 0; }
.hero-rest { grid-area: rest; }
.hero-fach { font-size: 1rem; font-weight: 400; margin-bottom: 12px; opacity: 0.85; }
.hero-kassen { font-size: 1.05rem; margin: 20px 0 36px; max-width: 34em; opacity: 0.9; }
.hero a:hover { color: var(--creme); }

/* Live-Status: das Element, das die Seite prägt */
.status {
  background: var(--creme); color: var(--blau);
  padding: 24px 28px; border-radius: 6px;
  margin-bottom: 32px;
}
.status-zeile { display: flex; align-items: center; gap: 12px; }
.status-punkt {
  position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--blau-linie);
}
.status[data-zustand="offen"] .status-punkt { background: var(--offen); }
.status[data-zustand="offen"] .status-punkt::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--offen); opacity: 0;
  animation: puls 2.4s ease-out infinite;
}
@keyframes puls { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
.status[data-zustand="geschlossen"] .status-punkt { background: var(--blau-hell); }
.status-titel { font-size: 1.35rem; font-weight: 500; margin: 0; }
.status-detail { margin: 6px 0 18px 24px; opacity: 0.85; }
.status-aktion { margin-left: 24px; }
.status-aktion .knopf { display: none; }
.status[data-zustand="offen"] .knopf-anruf,
.status[data-zustand="geschlossen"] .knopf-formular { display: inline-block; }

.knopf {
  display: inline-block; padding: 12px 22px; border-radius: 4px;
  font: inherit; font-weight: 500; font-size: 1rem; text-decoration: none;
  cursor: pointer; border: 1px solid var(--blau); transition: background-color .15s, color .15s;
}
.knopf-anruf, .knopf-senden { background: var(--blau); color: var(--weiss); }
.knopf-anruf:hover, .knopf-senden:hover { background: var(--blau-hell); color: var(--weiss); }
.knopf-formular { background: transparent; color: var(--blau); }
.knopf-formular:hover { background: var(--blau); color: var(--weiss); }

.zeiten { border-collapse: collapse; width: 100%; max-width: 30em; font-size: 1rem; }
.zeiten caption { text-align: left; font-weight: 500; padding-bottom: 8px; }
.zeiten th, .zeiten td { padding: 7px 0; text-align: left; border-top: 1px solid rgba(232, 225, 207, 0.25); font-weight: 400; }
.zeiten th { padding-right: 24px; white-space: nowrap; }
.zeiten .und { opacity: 0.6; margin: 0 4px; }
.zeiten tr.heute th, .zeiten tr.heute td { font-weight: 600; }
.zeiten tr.heute th::after { content: " (heute)"; font-weight: 400; opacity: 0.7; }
.zeiten-ausnahme { margin: 14px 0 0; padding-left: 14px; border-left: 2px solid var(--creme); font-size: 0.95rem; max-width: 30em; }

/* ===== Platzhalter für Bilder ===== */
.platzhalter {
  display: grid; place-items: center; text-align: center;
  background: var(--rose); border: 1px dashed var(--blau-linie);
  color: var(--blau-hell); font-size: 0.85rem; line-height: 1.4;
}
.platzhalter-portrait { aspect-ratio: 3 / 4; width: 100%; }
.platzhalter-klein { max-width: 220px; }
.platzhalter-foto { aspect-ratio: 4 / 3; }
.hero .platzhalter { border-color: rgba(232, 225, 207, 0.4); background: var(--blau-hell); color: var(--creme); }
.platzhalter.hat-bild { border: 0; background: none; }
.platzhalter.hat-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.platzhalter.hat-bild span { display: none; }

/* ===== Abschnitte ===== */
.abschnitt { padding: clamp(56px, 8vw, 112px) 0; }
.abschnitt-creme { background: var(--creme); }
.abschnitt-rose { background: var(--rose); }

.zwei-spalten { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(32px, 6vw, 96px); }
.fliesstext { max-width: 60ch; }
.fliesstext-breit { max-width: 68ch; }
.hinweis { padding-left: 16px; border-left: 2px solid var(--blau); font-size: 0.95rem; }

.liste-erkrankungen { list-style: none; margin: 0; padding: 0; }
.liste-erkrankungen li { padding: 10px 0; border-top: 1px solid var(--blau-linie); }
.liste-erkrankungen li:last-child { border-bottom: 1px solid var(--blau-linie); }

/* Zeitleiste */
.zwei-spalten-lebenslauf { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.zeitleiste { list-style: none; margin: 0; padding: 0; max-width: 64ch; }
.zeitleiste li {
  display: grid; grid-template-columns: 8.5em 1fr; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--blau-linie);
}
.zeitleiste li:last-child { border-bottom: 1px solid var(--blau-linie); }
.jahre { font-weight: 500; white-space: nowrap; }
.diplome ul { margin: 0; padding-left: 1.1em; }
.diplome li { margin-bottom: 6px; }

/* Praxis */
.praxis-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: clamp(40px, 6vw, 72px); }
.team { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.team-name { font-size: 1.35rem; font-weight: 300; margin-bottom: 8px; }
.adresse { font-style: normal; margin-top: 16px; line-height: 1.7; }

/* ===== Formular ===== */
.zwei-spalten-kontakt { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
.kontakt-text h2 { margin-bottom: 24px; }
.formular { background: var(--weiss); padding: clamp(24px, 3vw, 40px); border-radius: 6px; }
.feld { margin-bottom: 22px; }
.feld label, .feld legend { display: block; padding: 0; font-weight: 500; font-size: 0.95rem; margin-bottom: 6px; }
.feld input[type="text"], .feld input[type="tel"], .feld input[type="date"], .feld textarea {
  width: 100%; padding: 11px 14px;
  font: inherit; color: var(--blau);
  border: 1px solid var(--blau-linie); border-radius: 4px; background: var(--weiss);
}
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--blau-hell); outline-offset: 0; border-color: var(--blau-hell); }
.feld input[type="date"] { min-height: 46px; -webkit-appearance: none; appearance: none; }
.feld textarea { resize: vertical; min-height: 130px; }
.feld ::placeholder { color: rgba(12, 28, 75, 0.45); }
.feld-hinweis { font-size: 0.85rem; opacity: 0.75; margin: 6px 0 0; }
.zaehler { text-align: right; }
.zaehler.voll { opacity: 1; font-weight: 500; }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: var(--fehler); }
.fehler { color: var(--fehler); font-size: 0.875rem; margin: 6px 0 0; min-height: 0; }
.fehler:empty { display: none; }

fieldset.feld { border: 0; padding: 0; margin: 0 0 22px; min-inline-size: 0; }
.auswahl { display: flex; flex-wrap: wrap; gap: 10px; }
.auswahl label { margin: 0; font-weight: 400; cursor: pointer; }
.auswahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.auswahl span {
  display: inline-block; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--blau-linie); transition: background-color .15s, color .15s;
}
.auswahl input:checked + span { background: var(--blau); color: var(--weiss); border-color: var(--blau); }
.auswahl input:focus-visible + span { outline: 2px solid var(--blau-hell); outline-offset: 2px; }

.zustimmung { display: flex; gap: 12px; align-items: flex-start; font-weight: 400 !important; font-size: 0.9rem !important; cursor: pointer; }
.zustimmung input { margin-top: 4px; flex: none; accent-color: var(--blau); }

.knopf-senden { width: 100%; }
.formular-meldung { margin: 16px 0 0; font-size: 0.95rem; }
.formular-meldung:empty { display: none; }

/* Links */
.liste-links { list-style: none; margin: 0; padding: 0; }
.liste-links li { display: flex; flex-direction: column; padding: 10px 0; border-top: 1px solid var(--blau-linie); }
.liste-links li:last-child { border-bottom: 1px solid var(--blau-linie); }
.liste-links a { font-weight: 500; }
.liste-links span { font-size: 0.875rem; opacity: 0.7; }

/* ===== Fußzeile ===== */
.fuss { background: var(--blau); color: var(--text-auf-blau); padding: 48px 0; font-size: 0.95rem; }
.fuss-innen { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.fuss p { margin: 0; }
.fuss-logo { display: block; width: 320px; max-width: 100%; height: auto; margin-bottom: 20px; }
.fuss-name { font-weight: 500; margin-bottom: 6px !important; }
.fuss nav { display: flex; gap: 24px; }
.fuss-zeile {
  display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(232, 225, 207, 0.18);
  font-size: 0.875rem; opacity: 0.85;
}

/* Rechtstexte (Impressum, Datenschutz) */
.rechtstext h3 { margin-top: 40px; }
.rechtstext h3:first-child { margin-top: 0; }
.rechtstext ul { padding-left: 1.2em; margin: 0 0 1em; }
.rechtstext li { margin-bottom: 6px; }
.rechtstext-zurueck { margin-top: 48px; }
.fuss a:hover { color: var(--creme); }

/* ===== Mobil ===== */
@media (max-width: 860px) {
  .hero-inhalt, .zwei-spalten, .zwei-spalten-lebenslauf, .zwei-spalten-kontakt { grid-template-columns: 1fr; }
  .hero-inhalt { grid-template-areas: "kopf" "bild" "rest"; }
  .hero-bild { margin: 28px 0 32px; }
  .hero .platzhalter-portrait { max-width: 320px; }
  .praxis-fotos { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .kopf { flex-wrap: wrap; }
  /* Marke darf schrumpfen und die Wortmarke umbrechen — der Burger bleibt in der Zeile. */
  .marke { flex: 1 1 0; min-width: 0; gap: 10px; }
  .marke-symbol { height: 40px; flex: none; }
  .marke-text { font-size: 0.75rem; line-height: 1.25; }
  .menue-knopf { display: block; flex: none; }
  .navigation {
    display: none; flex-direction: column; gap: 0;
    width: 100%; padding-top: 10px; border-top: 1px solid rgba(232, 225, 207, 0.18); margin-top: 8px;
  }
  .navigation.offen { display: flex; }
  .navigation a { padding: 12px 0; font-size: 1.05rem; border-bottom: 1px solid rgba(232, 225, 207, 0.18); }
  .navigation a:last-child { border-bottom: 0; }
}
@media (max-width: 600px) {
  .status { padding: 20px; }
  .status-detail, .status-aktion { margin-left: 0; }
  .zeitleiste li { grid-template-columns: 1fr; gap: 2px; }
  .knopf-mail { font-size: 0.9rem; }
}