/* =============================================================================
   Blaue Vollseite — Rechtstext-Seiten (ACF: acf/full-blue-site)
   -----------------------------------------------------------------------------
   Rechtstext-Seiten (Impressum, Datenschutz): die ganze Seite ist blau, der Text
   weiss, das Layout zweispaltig (breite Textspalte links, schmale Infospalte
   rechts) und — anders als alle Startseiten-Bloecke — GERADE.

   Layout: 60% Textspalte / 30% Infospalte, mit Grid statt Floats umgesetzt
   (60/30 mit Lücke statt 60+30+10 Rest).
   Flaeche und Schriftfarbe kommen aus `.section-blue` (styles/layout.css), der
   Block setzt sie nicht selbst.
   ========================================================================== */

@scope (.full-blue-site) {
  /* Der Block ist der einzige Inhalt der Seite: negative margin zieht die blaue
     Flaeche unter die fixierte Kopfleiste (sonst blitzt deren 60px-Padding weiss
     durch), das gleich grosse padding gibt dem Text den Platz zurueck. Unten
     deckt das Padding die 8.75vw-Schräge des Footer-::before ab, damit dessen
     Dreieck nicht in die letzten Textzeilen laeuft. */
  :scope {
    margin-block-start: -60px;
    padding-block: calc(25px + var(--space-block)) calc(var(--space-block) + 5vw);
  }

  /* Zusaetzlicher Abstand unter der Kopfleiste, damit der Titel nicht direkt
     daran klebt. */
  .inner {
    margin-block-start: 3.125rem; /* 50px */
  }

  /* Spaltenbreiten 60% / 30%, die restlichen 10% sind die Luecke. Bewusst
     Prozent + gap:0 statt `60fr 30fr` mit fr-Gap: Letzteres verteilte den Platz
     erst nach Abzug des Gaps und ergab spuerbar falsche Breiten. */
  .grid {
    display: grid;
    grid-template-columns: 60% 30%;
    justify-content: space-between;
    gap: 0;
    align-items: start;
  }

  /* Bezugsrahmen fuer das absolut positionierte Wasserzeichen. */
  .aside {
    position: relative;
  }

  /* Logo-Wasserzeichen: dekorativ, hinter dem Inhalt, faengt keine Klicks. In
     voller Naturgroesse (556x611px) ragt es bewusst ueber die 306px schmale
     Spalte hinaus nach links in den Rechtstext, daher kein max-inline-size:100%. */
  .watermark {
    position: absolute;
    z-index: 0;
    inset-block-start: 270px;
    inset-inline-end: 0;
    inline-size: auto;
    max-inline-size: none;
    /* Haelt das Seitenverhaeltnis, sobald max-inline-size die Breite begrenzt. */
    block-size: auto;
    opacity: 0.1;
    pointer-events: none;
  }

  /* Text der Infospalte ueber dem Wasserzeichen. */
  .aside-body {
    position: relative;
    z-index: 1;
  }

  /* Letztes Element jeder Spalte ohne Abstand nach unten. */
  .content > :last-child,
  .aside-body > :last-child {
    margin-block-end: 0;
  }

  /* Der Rechtstext nutzt <p><strong>…</strong> statt echter Überschriften;
     fettgedruckter Zeilenanfang bekommt daher etwas Luft nach oben, ausser beim
     ersten Absatz direkt unter dem Titel. */
  .content p:has(> strong:first-child) + p,
  .content p + p:has(> strong:first-child) {
    margin-block-start: 1.5rem;
  }

  /* Überschriften der Infospalte: die Farbe kommt aus .section-blue, hier nur
     der Abstand zum folgenden Text. */
  .aside-body :is(h2, h3, h4) {
    margin-block-end: 1rem;
  }

  /* Kompakter Adressblock statt Lesetext: der globale Absatzabstand (34px)
     reisst Adresse, Telefon und E-Mail sonst zu einzelnen Inseln auseinander. */
  .aside-body p {
    margin-block-end: 0.75rem;
  }

  /* E-Mail/Domain sind laenger als die schmale Spalte; ohne Umbruchregel bliebe
     "E-Mail:" allein in der ersten Zeile. */
  .aside-body a {
    overflow-wrap: anywhere;
  }

  /* Sprechzeiten-Tabelle: Tag-Spalte schmal, Zeiten daneben (Redakteur markiert
     die Tag-Spalte mit <td class="day">). Bewusst lokal statt in
     styles/layout.css: .two-column-text hat eine eigene aeltere Fassung dieser
     Regeln fuer <th scope="row">, die unveraendert bleiben soll. */
  table {
    border-collapse: collapse;
    margin-block-end: 1.25rem; /* 20px */
  }

  /* Bewusst kleiner als der uebrige Text: nur so passt die Uhrzeitspanne in der
     schmalen Spalte in eine Zeile, statt umzubrechen. */
  td {
    vertical-align: baseline;
    font-size: 1.25rem; /* 20px */
    line-height: 1.875rem; /* 30px */
  }

  /* Tag-Spalte nur so breit wie "Mo"/"Do" plus Wortabstand; 1% statt fester
     Breite erzwingt die kleinstmoegliche Spalte, der Rest geht an die Zeiten. */
  td.day {
    inline-size: 1%;
    padding-inline-end: 0.5em;
    font-weight: var(--font-weight-medium);
    text-align: start;
    white-space: nowrap;
  }

  /* Ein Absatz direkt nach der Tabelle schliesst ohne zusaetzliche Leerzeile an. */
  table + p {
    margin-block-start: 0;
  }

  /* Links stehen als volle URLs im Text und sind auch ohne staendige
     Unterstreichung erkennbar. */
  a {
    color: currentColor;
    text-decoration: none;

    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }

  /* Schmale Screens: Spalten untereinander, das Wasserzeichen bleibt innerhalb
     der Spalte, nur kleiner. */
  @media (width <= 767px) {
    .grid {
      grid-template-columns: 1fr;
      gap: var(--space-block);
    }

    /* Grid-Items schrumpfen implizit nicht unter ihr laengstes unumbrechbares
       Wort (lange Mail-/URL-Strings) — min-inline-size:0 erlaubt das Schrumpfen,
       overflow-wrap bricht die Strings dann innerhalb der Zeile um. */
    .content {
      min-inline-size: 0;
    }

    .content :is(p, li, a) {
      overflow-wrap: anywhere;
    }

    /* Auf Spaltenbreite begrenzt, sonst waere das 556px-Logo breiter als das
       Viewport. Nach oben gezogen, da es sonst unten aus der Aside-Spalte
       heraushaengt und kurz vor dem Footer angeschnitten wirkt. */
    .watermark {
      inset-block-start: -160px;
      max-inline-size: 100%;
    }
  }
}