/* Psychiatrie Kapfenberg – nach dem Canva-Entwurf „Schwarz und Weiß, Elegant und
   Einfach": gestapelte, randlose Farbbänder (Rosé-Beige / Dunkelblau), dazwischen
   vollflächige Praxisfotos, Open Sans fett in Versalien für Überschriften.
   Jeder Abschnitt ist auf Desktop höchstens eine Bildschirmhöhe hoch. */

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/opensans-var-latin.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --blau: #0c1c4b;
  --blau-hell: #142a6b;
  --rose: #e6ddd9;
  --creme: #e8e1cf;
  --weiss: #ffffff;
  --text-auf-blau: #f3efe4;
  --linie-hell: rgba(12, 28, 75, 0.16);
  --linie-dunkel: rgba(232, 225, 207, 0.22);
  --offen: #2f7a55;
  --fehler: #9b2c2c;
  --schrift: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --breite: 1180px;
  --rand: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0; font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.65;
  color: var(--blau); background: var(--rose); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: clamp(20px, 2.5vw, 32px); }
h3 { font-size: 1.15rem; text-transform: none; font-weight: 700; margin-bottom: 14px; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
img { display: block; max-width: 100%; }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.band { padding: clamp(40px, 5vw, 64px) 0; }
.band-blau { background: var(--blau); color: var(--text-auf-blau); }
.band-blau h2 { color: var(--creme); }
.band-rose { background: var(--rose); }
.band-weiss { background: var(--weiss); }
.fliesstext { max-width: 68ch; }

/* ===== 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(--rose); border-bottom: 1px solid var(--linie-hell);
}
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marke-symbol { height: 44px; width: auto; }
.marke-text { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; }
.navigation { display: flex; align-items: center; }
.navigation a { text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 6px 14px; }
.navigation a + a { border-left: 1px solid var(--blau); }   /* die Trennstriche des Entwurfs */
.navigation a:hover { text-decoration: underline; }
.menue-knopf {
  display: none; position: relative; width: 44px; height: 44px; flex: none;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--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: Text links auf Rosé, Portrait rechts randlos ===== */
/* 70/30: Text links, Foto rechts. Der Hero endet spätestens an der unteren
   Bildschirmkante (Viewport minus Kopfzeile), das Foto wird darauf zugeschnitten. */
.hero {
  display: grid; grid-template-columns: 7fr 3fr; background: var(--rose);
  max-height: calc(100svh - 69px); min-height: 520px;
}
.hero-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vw, 80px) var(--rand);
  overflow: hidden;
}
.hero-logo { width: min(360px, 80%); height: auto; margin-bottom: clamp(28px, 4vw, 48px); }
.hero-fach { font-weight: 600; font-size: 1.15rem; margin: 18px 0 0; }
.hero-kassen { font-weight: 700; font-size: 1.35rem; margin: clamp(28px, 4vw, 48px) 0 0; }
.hero-bild { margin: 0; min-height: 0; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ===== Ordinationszeiten: zentriert wie im Entwurf, plus Live-Status ===== */
.zeiten-band { text-align: center; }
.zeiten-band h2 { margin-bottom: 24px; }

.zeiten { margin: 0 auto; border-collapse: collapse; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.zeiten caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.zeiten th, .zeiten td { padding: 4px 8px; font-weight: 400; text-align: left; white-space: nowrap; }
.zeiten th { text-align: right; }
.zeiten .und { opacity: 0.7; margin: 0 4px; }
.zeiten-ausnahme { margin: 20px auto 0; max-width: 34em; font-weight: 600; }
.zeiten-hinweis { font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.35; margin: 32px auto 0; max-width: 26em; }
.zeiten-hinweis a { color: var(--creme); }

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

/* ===== Vollflächige Fotos zwischen den Bändern ===== */
.foto-band { margin: 0; height: clamp(260px, 50vh, 600px); background: var(--creme); }
.foto-band img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Kontakt: Text links, Portrait rechts randlos ===== */
.split { display: grid; grid-template-columns: 7fr 3fr; }
.split-text { padding: clamp(40px, 5vw, 64px) var(--rand); display: flex; flex-direction: column; justify-content: center; }
.split-bild { margin: 0; position: relative; min-height: 420px; }
.split-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.kontakt-block { font-size: 1.15rem; line-height: 1.7; }
.kontakt-block strong { display: block; }
.kontakt-block a { font-weight: 600; }
.kontakt-formular-link { display: inline-block; margin-top: 28px; font-weight: 800; font-size: 1.25rem; }
.kontakt-formular-link::after { content: "↓"; display: inline-block; margin-left: 8px; text-decoration: none; }

/* ===== Standort: Kartenvorschau, echte Karte erst auf Klick ===== */
.karte-band.band { padding: clamp(24px, 3vw, 40px) 0; }
.karte { position: relative; height: clamp(280px, 46vh, 440px); overflow: hidden; border: 1.5px solid var(--blau); }
.karte-vorschau { width: 100%; height: 100%; object-fit: cover; }
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte-hinweis {
  position: absolute; left: 20px; bottom: 20px; max-width: 400px;
  background: var(--weiss); color: var(--blau); padding: 18px 20px; border: 1.5px solid var(--blau);
}
.karte-hinweis p { margin: 0 0 6px; }
.karte-klein { font-size: 0.85rem; opacity: 0.8; }
.karte-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.karte-knoepfe .knopf { width: auto; padding: 9px 16px; font-size: 0.95rem; }
.knopf-hell { background: var(--weiss); color: var(--blau); }
.knopf-hell:hover { background: var(--blau); color: var(--weiss); }
.karte.geladen .karte-vorschau, .karte.geladen .karte-hinweis { display: none; }
.adresse-link { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.adresse-link:hover { text-decoration: underline; }

/* ===== Formular ===== */
.formular-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.formular-einleitung { margin-bottom: 20px; }
.formular-band.band { padding: clamp(24px, 3vw, 40px) 0; }
.formular { border: 1.5px solid var(--blau); padding: clamp(16px, 2vw, 24px); background: var(--weiss); }
.felder-raster { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
.felder-raster .feld-breit { grid-column: span 2; }
.feld { margin-bottom: 12px; }
.feld-folge { margin-top: -6px; }
.feld-folge[hidden] { display: none; }
.feld label, .feld legend { display: block; padding: 0; font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; }
.feld input[type="text"], .feld input[type="tel"], .feld input[type="email"], .feld input[type="date"], .feld textarea {
  width: 100%; padding: 11px 14px; font: inherit; color: var(--blau); border: 1.5px solid var(--linie-hell); 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="text"], .feld input[type="tel"], .feld input[type="email"], .feld input[type="date"] { min-height: 46px; -webkit-appearance: none; appearance: none; }
.feld textarea { resize: vertical; min-height: 72px; }
.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: 700; }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: var(--fehler); }
.fehler { color: var(--fehler); font-size: 0.875rem; margin: 6px 0 0; }
.fehler:empty { display: none; }
/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */
.feld-website { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
fieldset.feld { border: 0; padding: 0; margin: 0 0 12px; min-inline-size: 0; }
.auswahl { display: flex; flex-wrap: wrap; gap: 10px; }
.auswahl label { margin: 0; font-weight: 600; cursor: pointer; }
.auswahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.auswahl span { display: inline-block; padding: 7px 16px; border: 1.5px solid var(--blau); transition: background-color .15s, color .15s; }
.auswahl input:checked + span { background: var(--blau); color: var(--weiss); }
.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%; border-radius: 0; }
.formular-meldung { margin: 16px 0 0; font-size: 0.95rem; }
.formular-meldung:empty { display: none; }
.formular-meldung.erfolg { padding: 14px 16px; background: var(--creme); border-left: 3px solid var(--offen); font-weight: 500; outline: none; }
.hinweis { padding-left: 16px; border-left: 3px solid currentColor; font-size: 0.95rem; }

/* ===== Leistungen ===== */
.leistungen-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(32px, 6vw, 96px); }
.liste-erkrankungen { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 32px; font-size: 1.1rem; }
.liste-erkrankungen li { break-inside: avoid; margin-bottom: 8px; }

/* ===== Ausbildung ===== */
.ausbildung-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.zeitleiste { list-style: none; margin: 0; padding: 0; }
.zeitleiste { font-size: 1rem; }
.zeitleiste li { display: grid; grid-template-columns: 8em 1fr; gap: 16px; padding: 5px 0; border-top: 1px solid var(--linie-hell); }
.zeitleiste li:last-child { border-bottom: 1px solid var(--linie-hell); }
.jahre { font-weight: 700; white-space: nowrap; }
.diplome ul { margin: 0; padding-left: 1.2em; }
.diplome li { margin-bottom: 6px; }

/* ===== Links / Podcasts ===== */
.links-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.liste-links { list-style: none; margin: 0 0 20px; padding: 0; }
.liste-links li { margin-bottom: 8px; }
.liste-links a { font-weight: 700; }
.liste-links span { display: block; font-size: 0.9rem; opacity: 0.75; }
.links-bild { min-height: 480px; }

/* ===== Rechtstexte ===== */
.rechtstext { max-height: none !important; }
.rechtstext h2 { hyphens: manual; }
.rechtstext h3 { margin-top: 36px; }
.rechtstext h3:first-child { margin-top: 0; }
.rechtstext ul { padding-left: 1.2em; margin: 0 0 1em; }
.rechtstext-zurueck { margin-top: 40px; }

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

/* ===== Desktop: jeder Abschnitt höchstens eine Bildschirmhöhe ===== */
@media (min-width: 861px) {
  .band, .split, .karte-band { max-height: 100svh; }
  .band { overflow-y: auto; }
  /* Das Formular ist mit Adresse zu hoch für kleine Laptops – lieber ein längerer Abschnitt
     als ein Formular, das in sich scrollt. */
  .formular-band.band { max-height: none; overflow: visible; }
}

/* ===== Mobil ===== */
@media (max-width: 860px) {
  .hero, .split, .leistungen-raster, .ausbildung-raster, .formular-raster, .felder-raster, .links-spalten { grid-template-columns: 1fr; }
  .felder-raster .feld-breit { grid-column: auto; }
  .split-bild { position: static; min-height: 0; }
  .split-bild img { position: static; }
  .hero { max-height: none; min-height: 0; }
  .hero-bild { aspect-ratio: 4 / 5; }
  .split-bild { aspect-ratio: 4 / 5; }
  .links-bild { aspect-ratio: 1; }
  .liste-erkrankungen { columns: 1; }
}
@media (max-width: 720px) {
  h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  h2 { font-size: clamp(1.5rem, 6.8vw, 1.9rem); hyphens: manual; }   /* nur an ­-Stellen trennen, sonst ganze Wörter umbrechen */
  .kopf { flex-wrap: wrap; }
  .marke { flex: 1 1 0; min-width: 0; gap: 10px; }
  .marke-symbol { height: 38px; flex: none; }
  .marke-text { font-size: 0.8rem; line-height: 1.25; }
  .menue-knopf { display: block; }
  .navigation { display: none; flex-direction: column; align-items: stretch; width: 100%; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--linie-hell); }
  .navigation.offen { display: flex; }
  .navigation a { padding: 12px 0; font-size: 1.05rem; border-bottom: 1px solid var(--linie-hell); }
  .navigation a + a { border-left: 0; }
  .navigation a:last-child { border-bottom: 0; }
  .zeiten th, .zeiten td { display: block; text-align: center; padding: 2px 0; white-space: normal; }
  .zeiten th { font-weight: 700; padding-top: 12px; }
  .zeitleiste li { grid-template-columns: 1fr; gap: 2px; }
}