/* ==========================================================================
   neuelinse.de – Augenzentrum Stralsund
   Responsives Layout: Seitenraster, Kopfzeile, Menü-Navigation.

   Diese Datei wird nach stil.css geladen und bestimmt allein, wie sich
   Kopfzeile und Menü auf Telefon, Tablet und Desktop verhalten.
   Inhalte, Texte und Funktionen bleiben davon unberuehrt.

   Haltepunkte (bewusst in px, damit sie von der gewaehlten Schriftgroesse
   unabhaengig bleiben):
     bis  719 px   Telefon        – Menü als aufklappbare Leiste
     720–1099 px   Tablet         – dieselbe Leiste, Liste zweispaltig
     ab  1100 px   Desktop        – Menü als feste Spalte links

   Bedienelemente (Schriftschalter, Menü) wachsen mit der
   Schriftgroesse mit, aber gedeckelt: sonst sprengen sie auf dem Telefon
   die Zeile. Der eigentliche Lesetext waechst weiterhin unbegrenzt.
   ========================================================================== */

/* --- 1. Seitenraster ---------------------------------------------------- */

body {
  padding-left: 0;
  min-height: 100vh;
}

/* Desktop: Kopfzeile ueber die volle Breite, darunter Menüspalte und
   Inhalt nebeneinander. Die Rasterbereiche machen die Reihenfolge im
   Quelltext unerheblich. */
@media (min-width: 1100px) {
  body {
    /* Ein Wert fuer beide Kacheln – so beginnen und enden sie buendig. */
    --spalten-oben: 2.2rem;
    --spalten-unten: 3rem;
    display: grid;
    grid-template-columns: clamp(200px, 13rem, 300px) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "kopf kopf"
      "nav  main"
      "fuss fuss";
  }

  .kopf     { grid-area: kopf; }
  .menue { grid-area: nav; }
  .fuss     { grid-area: fuss; }

  /* align-self: sonst wuerde die weisse Inhaltskachel auf kurzen Seiten bis
     zur Fusszeile gedehnt. min-width: sonst koennte sehr breiter Inhalt die
     Kachel ueber ihre Rasterspalte hinaus aufdruecken. */
  main.bahn {
    grid-area: main;
    align-self: start;
    /* min-width und width: sonst koennte sehr breiter Inhalt die Kachel
       ueber ihre Rasterspalte hinaus aufdruecken. */
    min-width: 0;
    width: 100%;
    margin-top: var(--spalten-oben);
    margin-bottom: var(--spalten-unten);
  }
}

/* --- 2. Kopfzeile ------------------------------------------------------- */

.kopf-innen {
  max-width: none;
  margin: 0;
  padding: 0.7rem clamp(0.9rem, 2.5vw, 1.8rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
}

.marke {
  display: block;
  flex: 0 0 auto;
  margin: 0;
}

/* Waechst mit der Schriftgroesse, aber nur bis zu einer sinnvollen Grenze. */
.marke-logo {
  display: block;
  width: clamp(112px, 8rem, 190px);
  height: auto;
}

.kopf-rechts {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* Schriftschalter als geschlossene Pille – auf dem Telefon fielen die drei
   einzelnen Kaesten sonst auseinander. */
.schriftwahl {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  padding: 0.22em 0.3em 0.22em 0.7em;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 999px;
  /* Gedeckelt, damit die Bedienleiste nicht die Zeile sprengt. */
  font-size: min(1rem, 23px);
}

.schriftwahl-titel {
  margin: 0 0.1em 0 0;
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1;
  color: var(--tinte-leise);
  white-space: nowrap;
}

.schriftwahl button {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bewusst in rem statt em: sonst richtete sich die Knopfgroesse nach dem
     jeweiligen Buchstaben und die drei Knoepfe waeren verschieden gross. */
  min-width: min(2.15rem, 48px);
  min-height: min(2.15rem, 48px);
  padding: 0;
  background: var(--papier);
  color: var(--blau-dunkel);
  border: 1.5px solid rgba(8, 42, 66, 0.28);
  border-radius: 999px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.schriftwahl button::-moz-focus-inner,
.menue-toggle::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.schriftwahl button:hover {
  background: var(--blau-flaeche);
  border-color: var(--blau);
}

.schriftwahl button[aria-pressed="true"] {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}

.schriftwahl .s1 { font-size: 0.8em; }
.schriftwahl .s2 { font-size: 1.05em; }
.schriftwahl .s3 { font-size: 1.3em; }

/* --- 3. Menü: Telefon und Tablet ------------------------------------ */

/* Die Leiste liegt direkt unter der Kopfzeile und bleibt beim Scrollen
   oben stehen. Die Liste klappt darueber auf, ohne den Inhalt zu
   verschieben. */
.menue {
  position: -webkit-sticky;   /* aelteres iOS */
  position: sticky;
  top: 0;
  /* Ueber dem Seiteninhalt, aber unter Sprunglink (100) und dem
     Eingangs-Hinweis (200). */
  z-index: 90;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 2px 10px rgba(8, 42, 66, 0.06);
  font-size: min(0.88rem, 20px);
}

.menue-toggle {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  min-height: 3em;
  margin: 0;
  padding: 0.6em clamp(0.9rem, 2.5vw, 1.8rem);
  border: 0;
  background: transparent;
  color: var(--blau-dunkel);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.menue-toggle:hover { background: var(--blau-flaeche); }

.menue-toggle-text { flex: 1 1 auto; }

.menue-balken,
.menue-pfeil {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menue-balken { width: 1.5em; height: 1.5em; color: var(--blau-hell); }
.menue-pfeil  { width: 1.15em; height: 1.15em; }

.menue.offen .menue-pfeil { transform: rotate(180deg); }

.menue-links {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 3.4em);
  max-height: calc(100dvh - 3.4em);
  overflow-y: auto;
  padding: 0.5em clamp(0.6rem, 2vw, 1.2rem) 0.8em;
  background: var(--papier);
  border-bottom: 4px solid var(--tuerkis-flaeche);
  box-shadow: 0 14px 28px rgba(8, 42, 66, 0.18);
}

.menue.offen .menue-links {
  display: grid;
  gap: 0.1em;
}

/* Tablet: die Liste passt zweispaltig auf einen Blick. */
@media (min-width: 560px) {
  .menue.offen .menue-links {
    grid-template-columns: 1fr 1fr;
    gap: 0.1em 0.9em;
  }
  .menue-oben { grid-column: 1 / -1; }
}

/* Sprungziele (z. B. „Zum Inhalt springen“) duerfen nicht unter der
   klebenden Menüleiste verschwinden. */
@media (max-width: 1099px) {
  html { scroll-padding-top: 80px; }
}

/* --- 4. Menü: gemeinsames Aussehen der Eintraege --------------------- */

.menue a {
  display: flex;
  align-items: center;
  gap: 0.7em;
  min-height: 2.7em;
  padding: 0.45em 0.6em;
  border-radius: 0.6em;
  color: var(--blau);
  text-decoration: none;
  line-height: 1.25;
}

.menue a:hover,
.menue a:focus-visible {
  background: var(--blau-flaeche);
  color: var(--blau-dunkel);
}

/* Aktive Menü im Marineblau der Kopf- und Fusszeile, das Symbol im
   Tuerkis-Akzent der Praxis. */
.menue a.aktiv {
  background: linear-gradient(135deg, var(--blau), var(--blau-tief));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(8, 42, 66, 0.18);
}

.menue a.aktiv:hover {
  background: linear-gradient(135deg, var(--blau-tief), var(--blau-dunkel));
  color: #fff;
}

.menue-icon {
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 1.5em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--blau-hell);
}

.menue a.aktiv .menue-icon { color: var(--tuerkis-hell); }

.menue-icon-iol { width: 1.6em; height: 1.6em; flex-basis: 1.6em; }

.menue-text {
  min-width: 0;
  overflow-wrap: break-word;
}

.menue-oben {
  margin-top: 0.35em;
  padding-top: 0.75em;
  border-top: 1px solid var(--linie);
  font-weight: 700;
}

/* --- 5. Menü: Desktop als feste Spalte ------------------------------ */

@media (min-width: 1100px) {
  /* Die Rasterzelle wird zur unsichtbaren Schiene: Sie reicht genau so weit
     wie die Inhaltskachel. Die eigentliche Menuekachel klebt darin und kann
     deshalb nie ueber das Ende des Inhalts hinaus in die Fusszeile laufen. */
  .menue {
    /* Die Schiene selbst steht fest – sonst wandert sie mit dem Scrollen
       und die Kachel darin haette keine Begrenzung. */
    position: static;
    align-self: stretch;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-size: min(0.88rem, 20px);
  }

  .menue-karte {
    position: -webkit-sticky;
    position: sticky;
    top: var(--spalten-oben);
    /* Oben derselbe Abstand wie bei der Inhaltskachel, damit beide Kacheln
       auf gleicher Hoehe beginnen; unten derselbe wie ihr Aussenabstand,
       damit die Kachel genau mit ihr endet. */
    margin: var(--spalten-oben) 0.2rem var(--spalten-unten) 1rem;
    max-height: calc(100vh - 2 * var(--spalten-oben));
    max-height: calc(100dvh - 2 * var(--spalten-oben));
    overflow-y: auto;
    padding: 0.85em 0.7em 1em;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten);
  }

  .menue-toggle {
    min-height: 0;
    margin: 0 0 0.55em;
    padding: 0.1em 0.5em 0.5em;
    border-bottom: 2px solid var(--tuerkis-flaeche);
    font-size: 1.05em;
    cursor: default;
  }

  .menue-toggle:hover { background: transparent; }

  .menue-balken,
  .menue-pfeil { display: none; }

  .menue .menue-links {
    display: grid;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    gap: 0.1em;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .menue a { min-height: 2.5em; }
}

/* --- 6. Feinheiten fuer schmale Bildschirme ----------------------------- */

/* Ueberschriften: gross genug zum Lesen, aber ohne Zeilensalat auf dem
   Telefon. Waechst weiterhin mit dem Schriftschalter. */
h1 { font-size: clamp(1.9rem, 6.5vw, 2.8rem); }

/* Lange deutsche Komposita und Adressen sprengen sonst schmale Spalten. */
h1, h2, h3, h4,
.kachel-titel, .wahlkarte-titel, .paket-kopf h3 {
  overflow-wrap: break-word;
}

p, li, label, td, th, a, figcaption { overflow-wrap: break-word; }

.schritt-nav { flex-wrap: wrap; }

/* Bei vergroesserter Schrift werden die Zeilen so kurz, dass auch normale
   Woerter nicht mehr hineinpassen – dann wird getrennt. Bei normaler
   Schrift bleibt der Satz unveraendert. Gilt fuer jede Bildschirmbreite,
   denn grosse Schrift macht die Textspalte ueberall schmal. */
html[data-schrift="mittel"] main.bahn,
html[data-schrift="gross"]  main.bahn {
  -webkit-hyphens: auto;
  hyphens: auto;
}

html[data-schrift="gross"] legend.schritt-anzeige { padding: 0.5rem 0.7rem; }
html[data-schrift="gross"] .kassenwahl-knoepfe .knopf {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

/* Feste Mindestbreiten in Rastern duerfen die Spalte nicht sprengen. */
.dokument-felder { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.unterschriften  { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }

@media (max-width: 719px) {
  /* Ueberschriften und Kartentitel zusaetzlich mit Trennstrich statt hartem
     Umbruch (das lang="de" der Seiten liefert die Trennstellen). */
  h1, h2, h3, h4,
  .kachel-titel, .wahlkarte-titel, .paket-kopf h3,
  th, td, figcaption {
    -webkit-hyphens: auto;   /* Safari (macOS und iOS) */
    hyphens: auto;
  }

  /* In flexiblen Zeilen (Ankreuzliste, Auswahlkarten) darf ein sehr langes
     Wort notfalls auch ohne Trennstelle umbrechen. */
  .ankreuzliste label,
  .wahlkarte-titel,
  .kachel-titel,
  .kachel-text {
    word-break: break-word;      /* aeltere Safari-Versionen */
    overflow-wrap: anywhere;
  }


  .kopf-innen {
    padding: 0.5rem 0.7rem;
    gap: 0.4rem 0.5rem;
  }

  .marke-logo { width: clamp(92px, 5rem, 112px); }

  .kopf-rechts {
    flex: 0 1 auto;
    justify-content: flex-end;
  }

  .schriftwahl {
    padding: 0.2em 0.26em 0.2em 0.55em;
    gap: 0.24em;
  }

  .schriftwahl-titel { font-size: 0.66em; }

  main.bahn {
    margin: 1.1rem auto 2rem;
    padding: 1.5rem min(1rem, 20px) 2.2rem;
    border-radius: var(--radius-m);
  }

  /* Seitliche Abstaende duerfen auf dem Telefon nicht mitwachsen – der
     Bildschirm wird ja nicht breiter. Sonst bleibt bei sehr grosser Schrift
     kaum noch Platz fuer den Text selbst. */
  .dokument       { padding-left: min(1.6rem, 22px); padding-right: min(1.6rem, 22px); }
  .kasten         { padding-left: min(1.4rem, 20px); padding-right: min(1.4rem, 20px); }
  .paket-kopf,
  .paket-koerper  { padding-left: min(1.3rem, 18px); padding-right: min(1.3rem, 18px); }
  .kachel         { padding-left: min(1.2rem, 17px); padding-right: min(1.2rem, 17px); }
  .wahlkarte      { padding-left: min(1.1rem, 16px); padding-right: min(1.1rem, 16px); }
}

/* Sehr schmale Geraete: der Schriftschalter kommt ohne Beschriftung aus,
   die Knoepfe sind ueber ihre Vorlesetexte weiterhin beschriftet. */
@media (max-width: 359px) {
  .schriftwahl-titel { display: none; }
  .schriftwahl { padding: 0.2em 0.26em; }
}

/* --- 7. Druck ----------------------------------------------------------- */

@media print {
  body {
    display: block;
    padding: 0;
    min-height: 0;
  }
  .menue { display: none !important; }
}