/* =====================================================================
   Praxis Julia Krebber – gemeinsame Gestaltung für ALLE Seiten
   ---------------------------------------------------------------------
   Inhalt dieser Datei:
     1. Farben und Schriften (hier zentral ändern!)
     2. Schriften laden (lokal aus dem Ordner fonts/)
     3. Grundeinstellungen
     4. Seitenleiste (Navigation am Computer)
     5. Kopfleiste und Menü am Handy
     6. Inhaltsbereich und Seitenfarben
     7. Überschriften, Texte, Links, Trennlinien
     8. Buttons
     9. Bausteine einzelner Seiten (Start, Therapie, Kosten, …)
    10. Anpassungen für Handy und Tablet
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. FARBEN UND SCHRIFTEN
   Ändern Sie hier einen Farbwert, ändert er sich auf der ganzen Website.
   --------------------------------------------------------------------- */
:root {
  /* Bereichsfarben (Hintergrund der Seiten und Punkte im Menü) */
  --farbe-start:      #B9A3D6;  /* Flieder     – Startseite */
  --farbe-therapie:   #3E6B50;  /* Waldgrün    – Therapie */
  --farbe-kosten:     #E9C98F;  /* Ocker       – Kosten */
  --farbe-ueber-mich: #C8603A;  /* Terrakotta  – Über mich */
  --farbe-kontakt:    #4A2E4F;  /* Pflaume     – Kontakt */
  --farbe-papier:     #FAF5EA;  /* Papierweiß  – Seitenleiste, Impressum, Datenschutz */

  /* Schriftfarben */
  --text-dunkel: #1a1208;        /* dunkle Schrift auf hellen Flächen */
  --text-hell:   #FAF5EA;        /* helle Schrift auf dunklen Flächen */
  --text-grau:   #5c534a;        /* gedämpfte Schrift (Seitenleiste, Rechtliches) */

  /* Akzentfarben */
  --farbe-rost:       #7A3523;   /* Button und Akzente auf der Startseite */
  --farbe-flieder-akzent: #B9A3D6; /* Aufzählungspunkte und Ziffern auf Grün */
  --farbe-kasten-ocker: #D8B77E; /* Kästen auf der Kosten-Seite */
  --farbe-preis-ocker:  #D3AF7D; /* Preiszeilen Paartherapie */
  --farbe-linie-papier: #E8E2D7; /* feine Linien auf Papierweiß */

  /* Schriften */
  --schrift: "Albert Sans", Helvetica, Arial, sans-serif;

  /* Maße */
  --breite-seitenleiste: 256px;
  --breite-text: 512px;          /* Breite der Textspalte */
}


/* ---------------------------------------------------------------------
   2. SCHRIFTEN LADEN – liegen lokal im Ordner fonts/ (kein Google-Server)
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/albert-sans-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/albert-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Albert Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/albert-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/albert-sans-latin-500-normal.woff2") format("woff2");
}


/* ---------------------------------------------------------------------
   3. GRUNDEINSTELLUNGEN
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-dunkel);
  background: var(--farbe-papier);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* Sprungmarken nicht unter der Handy-Kopfleiste verstecken */
[id] {
  scroll-margin-top: 80px;
}


/* ---------------------------------------------------------------------
   4. SEITENLEISTE (Navigation am Computer)
   --------------------------------------------------------------------- */
.seitenleiste {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--breite-seitenleiste);
  padding: 44px 32px 36px;
  background: var(--farbe-papier);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

/* Name und Untertitel oben links */
.praxisname {
  display: block;
  color: var(--text-dunkel);
  text-decoration: none;
  font-size: 17px;
  line-height: 1.3;
}
.praxisname-zusatz {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text-grau);
}

/* Liste der Menüpunkte */
.menue {
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
}
.menue > li {
  position: relative;
}
.menue a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  color: #4a4038;
  text-decoration: none;
  font-size: 15.5px;
}
.menue > li > a:hover {
  color: var(--text-dunkel);
}

/* Farbiger Punkt vor jedem Menüpunkt */
.punkt {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
}
.punkt-start      { color: var(--farbe-start); }
.punkt-therapie   { color: var(--farbe-therapie); }
.punkt-kosten     { color: var(--farbe-kosten); }
.punkt-ueber-mich { color: var(--farbe-ueber-mich); }
.punkt-kontakt    { color: var(--farbe-kontakt); }

/* Beim Darüberfahren mit der Maus wird der Punkt größer */
.punkt {
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .menue > li:hover > a .punkt {
    transform: scale(1.6);
  }
  .menue > li.aktiv:hover > a .punkt {
    transform: none;           /* aktueller Bereich ist schon groß */
  }
}

/* Aktueller Bereich: großer Punkt und fette Schrift */
.menue .aktiv > a {
  color: var(--text-dunkel);
  font-weight: 500;
  gap: 12px;
  padding: 4px 0;
}
.menue .aktiv > a .punkt {
  width: 22px;
  height: 22px;
}

/* Untermenü: klappt am Computer beim Darüberfahren seitlich aus */
.untermenue {
  display: block;
  visibility: hidden;          /* unsichtbar, bis man darüberfährt */
  opacity: 0;
  /* Beim Verlassen bleibt das Menü noch kurz stehen,
     damit man es mit der Maus sicher erreicht */
  transition: opacity 0.15s ease, visibility 0s linear 0.3s;
  position: absolute;
  left: 200px;
  top: -2px;
  min-width: 218px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: var(--farbe-papier);
  border-left: 3px solid var(--bereichsfarbe, var(--farbe-therapie));
  box-shadow: 0 6px 22px rgba(26, 18, 8, 0.12);
}
.untermenue a {
  display: block;
  padding: 8px 18px;
  font-size: 14.5px;
  line-height: 1.4;
  color: #4a4038;
}
.untermenue a:hover,
.untermenue a[aria-current="page"] {
  background: #EFEAE0;
  color: var(--text-dunkel);
}
.menue > li:hover > .untermenue,
.menue > li:focus-within > .untermenue {
  visibility: visible;
  opacity: 1;
  /* öffnet mit kurzer Verzögerung, damit beim schrägen Hinüberfahren
     nicht versehentlich das Untermenü des Nachbarpunkts aufgeht */
  transition-delay: 0.12s, 0.12s;
}
.menue > li:hover {
  z-index: 2;                  /* aktuelles Untermenü liegt immer oben */
}
/* Unsichtbare „Brücke“ links vom Untermenü: schließt die Lücke zum
   Menüpunkt, damit das Untermenü beim Hinüberfahren offen bleibt */
.untermenue::before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  right: 100%;
  width: 60px;
}
.mit-untermenue-therapie { --bereichsfarbe: var(--farbe-therapie); }
.mit-untermenue-kosten   { --bereichsfarbe: var(--farbe-kosten); }

/* Auf-/Zuklapp-Pfeil im Menü – nur am Handy sichtbar */
.untermenue-schalter {
  display: none;
}

/* Impressum, Datenschutz und © unten in der Seitenleiste */
.seitenleiste-fuss {
  margin-top: auto;
  font-size: 12.5px;
  color: var(--text-grau);
}
.seitenleiste-fuss a {
  display: block;
  color: var(--text-grau);
  text-decoration: none;
  line-height: 1.6;
}
.seitenleiste-fuss a:hover {
  color: var(--text-dunkel);
}
.seitenleiste-fuss p {
  margin: 14px 0 0;
}


/* ---------------------------------------------------------------------
   5. KOPFLEISTE AM HANDY (am Computer ausgeblendet)
   --------------------------------------------------------------------- */
.kopfleiste {
  display: none;
}


/* ---------------------------------------------------------------------
   6. INHALTSBEREICH UND SEITENFARBEN
   --------------------------------------------------------------------- */
.inhalt {
  margin-left: var(--breite-seitenleiste);
  min-height: 100vh;
  padding: 62px 80px 110px;
}

/* Jede Seite bekommt über die Klasse am <body> ihre Farbe */
.seite-start      .inhalt { background: var(--farbe-start);      color: var(--text-dunkel); }
.seite-therapie   .inhalt { background: var(--farbe-therapie);   color: var(--text-hell); }
.seite-kosten     .inhalt { background: var(--farbe-kosten);     color: var(--text-dunkel); }
.seite-ueber-mich .inhalt { background: var(--farbe-ueber-mich); color: var(--text-dunkel); }
.seite-kontakt    .inhalt { background: var(--farbe-kontakt);    color: var(--text-hell); }
.seite-papier     .inhalt { background: var(--farbe-papier);     color: var(--text-grau); }

/* Auf Papierweiß trennt eine feine Linie Seitenleiste und Inhalt */
.seite-papier .seitenleiste {
  border-right: 1px solid var(--farbe-linie-papier);
}

/* Textspalte */
.spalte {
  max-width: var(--breite-text);
}
.spalte-breit {
  max-width: 864px;
}


/* ---------------------------------------------------------------------
   7. ÜBERSCHRIFTEN, TEXTE, LINKS, TRENNLINIEN
   --------------------------------------------------------------------- */

/* Kleine Zeile über der Hauptüberschrift, z. B. „KOSTEN“ */
.dachzeile {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}
.seite-start .dachzeile { color: var(--farbe-rost); opacity: 1; }

/* Hauptüberschrift der Seite */
h1 {
  margin: 34px 0 40px;
  font-size: 50px;
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.seite-papier h1 { color: var(--text-dunkel); }

/* Abschnittsüberschrift */
h2 {
  margin: 52px 0 18px;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
}
.seite-papier h2 { color: var(--text-dunkel); }

/* Kleine Zwischenüberschrift */
h3 {
  margin: 26px 0 10px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
}

p {
  margin: 0 0 16px;
}

/* Etwas kleinere Schrift für bestimmte Abschnitte */
.klein p,
.klein li,
p.klein {
  font-size: 15px;
  line-height: 1.55;
}

/* Einleitungssatz unter der Überschrift */
.einleitung {
  font-size: 17.5px;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Links zu anderen Websites (öffnen in neuem Fenster) mit Pfeil ↗ kennzeichnen */
a[target="_blank"]::after {
  content: "\00a0↗";
  text-decoration: none;
  display: inline-block;
}

/* Nummerierte Liste im Impressum */
.rechtliches-liste {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.55;
}

/* Trennlinie */
hr {
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.18;
  margin: 40px 0;
}
.seite-papier hr { border-top-color: var(--farbe-linie-papier); opacity: 1; }

/* Aufzählung mit fliederfarbenen Punkten */
.liste-punkte {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.liste-punkte li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 16.5px;
}
.liste-punkte li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--farbe-flieder-akzent);
}

/* Aufzählung ohne Punkte (Striche stehen im Text) */
.liste-schlicht {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.liste-schlicht li {
  font-size: 15px;
  margin-bottom: 4px;
}


/* ---------------------------------------------------------------------
   8. BUTTONS
   --------------------------------------------------------------------- */
.button {
  display: inline-block;
  padding: 11px 28px;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  border: 0;
  border-radius: 0;
}
.button-rost   { background: var(--farbe-rost);       color: var(--text-hell); }
.button-dunkel { background: var(--text-dunkel);      color: var(--text-hell); }
.button-ocker   { background: var(--farbe-kosten);    color: var(--text-dunkel); }
.button-gruen  { background: var(--farbe-therapie);   color: var(--text-hell); border-radius: 3px; }
.button:hover  { filter: brightness(1.12); }

/* Kleine grüne Download-Buttons */
.button-klein {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
}

/* Gruppe mehrerer Buttons nebeneinander */
.button-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* ---------------------------------------------------------------------
   9. BAUSTEINE EINZELNER SEITEN
   --------------------------------------------------------------------- */

/* ---- Startseite ---- */
.start-titel {
  margin: 40px 0 44px;
  font-size: 48px;
  line-height: 1.25;
  font-weight: 300;
}
.start-linie {
  margin: 96px 0 34px;
  opacity: 0.3;
}
.start-unten {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.start-unten p {
  max-width: 400px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}
.pfeil-link {
  flex: none;
  color: var(--farbe-rost);
  text-decoration: none;
  border-bottom: 2px solid var(--farbe-rost);
  padding-bottom: 1px;
}
/* Platz für das Logo (quadratisch) – wird erst sichtbar,
   wenn es in index.html eingefügt wird */
.logo-start {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 40px;
}

/* ---- Therapie: nummerierte Schritte (Ablauf) ---- */
.dachzeile-akzent {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--farbe-flieder-akzent);
}
.dachzeile-akzent + h2 {
  margin-top: 4px;
}
.schritte {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
}
.schritte li {
  margin-bottom: 30px;
}
.schritt-nummer {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--farbe-flieder-akzent);
}
.schritte h3 {
  margin: 4px 0 10px;
}
.schritte p {
  font-size: 15px;
  line-height: 1.53;
}

/* ---- Kosten-Seite: Trennung zwischen den vier Abschnitten ---- */
.abschnitt-trenner {
  margin: 90px 0 70px;
  opacity: 0.25;
}
h1.abschnitt-titel {
  margin-top: 0;
}
/* Letzter Abschnitt füllt den Bildschirm, damit der Sprung
   dorthin die Überschrift ganz oben zeigt */
#paartherapie-kosten {
  min-height: calc(100vh - 140px);
}

/* ---- Kostenerstattung: vier Kästen nebeneinander ---- */
.kaesten-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 864px;
}
.kasten {
  background: var(--farbe-kasten-ocker);
  border: 1px solid rgba(26, 18, 8, 0.08);
  border-radius: 3px;
  padding: 24px 24px 26px;
}
.kasten .kasten-nummer {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}
.kasten .kasten-titel {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 500;
}
.kasten p {
  font-size: 15px;
  line-height: 1.53;
  margin-bottom: 0;
}

/* Hinweiskasten */
.hinweis {
  background: var(--farbe-kasten-ocker);
  border: 1px solid rgba(26, 18, 8, 0.08);
  border-radius: 3px;
  padding: 24px 24px 22px;
  margin: 40px 0;
}
.hinweis p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Zitatkasten „So können Sie es formulieren“ */
.zitat {
  background: var(--farbe-kasten-ocker);
  border: 1px solid rgba(26, 18, 8, 0.08);
  border-radius: 3px;
  padding: 16px 16px 18px;
  margin: 16px 32px 20px 0;
}
.zitat-titel {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.zitat blockquote {
  margin: 0;
  font-style: italic;
  font-size: 15px;
  line-height: 1.53;
}

/* Aufklappbare Abschnitte (Schritte und Häufige Fragen) */
.aufklapp {
  border-top: 1px solid rgba(26, 18, 8, 0.14);
}
.aufklapp:last-child {
  border-bottom: 1px solid rgba(26, 18, 8, 0.14);
}
.aufklapp summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  font-size: 17px;
}
.aufklapp summary::-webkit-details-marker {
  display: none;
}
/* Das + wird beim Öffnen zum × */
.aufklapp summary::after {
  content: "+";
  flex: none;
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
}
.aufklapp[open] summary::after {
  content: "×";
}
.aufklapp-inhalt {
  padding: 0 0 4px;
}
.aufklapp-inhalt p {
  font-size: 15px;
  line-height: 1.55;
}
/* Fragen-Liste: etwas kleinere, kräftigere Fragen */
.fragen .aufklapp summary {
  padding: 18px 0;
  font-size: 15px;
  font-weight: 500;
}
.fragen .aufklapp summary::after {
  font-weight: 500;
}
.fragen .aufklapp-inhalt p {
  font-size: 15px;
}

/* Zwei Checklisten-Kästen */
.kaesten-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 672px;
}
.kaesten-2 .kasten {
  padding: 28px 28px 28px;
}
.kasten-buchstabe {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 500;
}
.kasten-gedaempft {
  opacity: 0.72;
}
.kaesten-2 .kasten p {
  margin-bottom: 0;
}
/* Buttons in beiden Kästen auf gleicher Höhe (immer ganz unten) */
.kaesten-2 .kasten {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.kaesten-2 .button {
  margin-top: auto;
}
.kaesten-2 .kasten p:last-of-type {
  margin-bottom: 22px;
}

/* Liste „Unterlagen für Ihren Antrag“ */
.unterlagen {
  list-style: none;
  margin: 0;
  padding: 0;
}
.unterlagen li {
  border-top: 1px solid rgba(26, 18, 8, 0.14);
  padding: 22px 0 22px;
}
.unterlagen li:last-child {
  border-bottom: 1px solid rgba(26, 18, 8, 0.14);
}
.unterlagen-titel {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 500;
}
.unterlagen p {
  font-size: 15px;
  margin-bottom: 8px;
}
.unterlagen .button-reihe {
  margin-top: 10px;
}

/* ---- Kosten Paartherapie: Preiszeilen ---- */
.preise {
  max-width: 672px;
  margin: 40px 0;
}
.preis-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--farbe-preis-ocker);
  padding: 16px 24px;
  margin-bottom: 12px;
  font-size: 15px;
}
.preis-zeile strong {
  font-weight: 400;
  font-size: 17px;
}

/* ---- Über mich: Porträt und Lebenslauf ---- */
.portraet {
  width: 320px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin: 0 0 44px;
  background: #B85A3B;
}
.lebenslauf {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.lebenslauf li {
  border-left: 2px solid rgba(26, 18, 8, 0.28);
  padding: 0 0 0 20px;
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.35;
}
.lebenslauf-zeit {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  text-transform: uppercase;
  opacity: 0.68;
}
.lebenslauf-titel {
  display: block;
}
.lebenslauf-text {
  display: block;
  margin-top: 8px;
  opacity: 0.72;
}

/* ---- Kontakt: Zeilen mit Symbolen ---- */
.kontakt-liste {
  list-style: none;
  margin: 50px 0 0;
  padding: 0;
}
.kontakt-liste li {
  display: grid;
  grid-template-columns: 32px 1fr;
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.5;
}
.kontakt-liste svg {
  width: 17px;
  height: 17px;
  margin-top: 2px;
}
.kontakt-liste a {
  text-decoration: none;
}
.kontakt-liste a:hover {
  text-decoration: underline;
}
.kontakt-zusatz {
  opacity: 0.92;
}
.seite-kontakt hr {
  border-top-color: var(--farbe-ueber-mich);
  opacity: 0.45;
}
.notfall {
  font-size: 13px;
  line-height: 1.5;
}

/* ---- Impressum und Datenschutz ---- */
.rechtliches h2 {
  margin-top: 0;
  font-size: 21px;
}
.rechtliches p {
  font-size: 15px;
  line-height: 1.55;
}


/* ---------------------------------------------------------------------
   10. HANDY UND TABLET (Bildschirme schmaler als 900 Pixel)
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .kaesten-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {

  /* Kopfleiste mit Name und Menü-Knopf */
  .kopfleiste {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 30;
    height: 62px;
    padding: 0 22px;
    background: var(--farbe-papier);
    border-bottom: 1px solid var(--farbe-linie-papier);
  }
  .kopfleiste .praxisname {
    font-size: 17px;
  }
  .menue-knopf {
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dunkel);
  }
  .menue-knopf svg {
    width: 22px;
    height: 22px;
  }
  .symbol-zu { display: none; }
  .menue-offen .symbol-auf { display: none; }
  .menue-offen .symbol-zu  { display: block; }

  /* Die Seitenleiste wird zum Vollbild-Menü unter der Kopfleiste */
  .seitenleiste {
    display: none;
    top: 62px;
    width: 100%;
    padding: 24px 22px 32px;
    overflow-y: auto;
    border-right: 0;
  }
  .menue-offen .seitenleiste {
    display: flex;
  }
  .menue-offen {
    overflow: hidden;   /* Seite dahinter nicht mitscrollen */
  }
  .seitenleiste .praxisname,
  .seitenleiste .praxisname-zusatz {
    display: none;
  }

  .menue {
    margin-top: 8px;
  }
  .menue > li > a {
    font-size: 24px;
    padding: 10px 0;
    gap: 18px;
  }
  .menue .aktiv > a {
    font-weight: 400;
    padding: 10px 0;
    gap: 18px;
  }
  .menue .aktiv > a .punkt,
  .punkt {
    width: 13px;
    height: 13px;
  }

  /* Untermenü am Handy: aufklappbar unter dem Menüpunkt */
  .untermenue {
    position: static;
    display: none;
    visibility: visible;
    opacity: 1;
    transition: none;
    min-width: 0;
    padding: 0 0 8px 46px;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .menue > li:hover > .untermenue,
  .menue > li:focus-within > .untermenue {
    display: none;
  }
  .menue > li.offen > .untermenue {
    display: block;
  }
  .untermenue::before {
    display: none;
  }
  .untermenue a {
    padding: 10px 0;
    font-size: 17px;
  }
  .untermenue a:hover,
  .untermenue a[aria-current="page"] {
    background: none;
    color: var(--text-dunkel);
  }
  .untermenue-schalter {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -8px;
    top: 6px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: #4a4038;
    cursor: pointer;
  }
  .untermenue-schalter svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s;
  }
  .offen > .untermenue-schalter svg {
    transform: rotate(180deg);
  }
  .seitenleiste-fuss {
    margin-top: 40px;
    font-size: 15px;
  }

  /* Inhalt über die volle Breite */
  .inhalt {
    margin-left: 0;
    min-height: calc(100vh - 62px);
    padding: 50px 24px 80px;
  }
  .seite-papier .seitenleiste {
    border-right: 0;
  }

  h1 {
    margin: 30px 0 34px;
    font-size: 40px;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .start-titel {
    font-size: 40px;
  }
  h2 {
    font-size: 22px;
  }
  .start-linie {
    margin-top: 64px;
  }
  .start-unten {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }


  .kaesten-4,
  .kaesten-2 {
    grid-template-columns: 1fr;
  }

  .zitat {
    margin-right: 0;
  }

  .portraet {
    width: 100%;
    max-width: 360px;
  }
}