/* ================================================================
   FORUS — Custom CSS (seitenweit)
   Zentrale Regeln ueber alle Module und Templates hinweg.
   Brand Guide V0.3: grosse Marken- und Kapitelueberschriften in
   Versalien. Schrift und Farben kommen aus dem Theme.

   Solange es noch kein FORUS-Theme gibt, liefert diese Datei auch
   die Typo-Skala (h1-h6 + Display-Groessen), auf die sich die
   Groessen-Auswahl in den Modulen bezieht.
   ================================================================ */

/* ---------- Ueberschriften: Versalien ---------- */
h1,
h2,
.h1,
.h2,
.display,
.display-1,
.display-2,
.display-3,
.display-4 {
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.04;
}

/* ---------- Typo-Skala ----------
   Elementregeln (h1-h6) = Standardgroesse nach HTML-Ebene.
   Gleichnamige Klassen (.h1-.h6) + .display-* = frei waehlbare Optik
   in den Modulen ("Groesse (Optik)"), unabhaengig vom HTML-Tag. */
h1, .h1 { font-size: clamp(2.4rem, 5vw, 4rem);    font-weight: 800; }
h2, .h2 { font-size: clamp(2rem, 4vw, 3.2rem);    font-weight: 800; }
h3, .h3 { font-size: clamp(1.6rem, 3vw, 2.4rem);  font-weight: 700; }
h4, .h4 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 700; }
h5, .h5 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700; }
h6, .h6 { font-size: 1rem;                        font-weight: 700; }

/* Display = grosse Marken-Headlines ueber H1-Groesse hinaus.
   .display bleibt als allgemeine Klasse bestehen. */
.display,
.display-1,
.display-2,
.display-3,
.display-4 {
  font-weight: 800;
  line-height: 1.02;
}
.display-1 { font-size: clamp(3rem, 8vw, 7rem); }     /* XXXL */
.display-2 { font-size: clamp(2.6rem, 6.5vw, 5.5rem); } /* XXL  */
.display-3 { font-size: clamp(2.2rem, 5.5vw, 4.5rem); } /* XL   */
.display-4 { font-size: clamp(1.9rem, 4.5vw, 3.6rem); } /* L    */

/* Klassenvariante .p fuer die Optik-Auswahl "P" */
.p { font-size: 1rem; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ---------- Ausrichtung ---------- */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ---------- Papier-Hintergrund ----------
   Geknittertes Papier als Hintergrund. Klasse einfach auf eine Sektion
   oder ein Modul setzen:  class="papier"
   Zusatz:  class="papier papier--fixiert"  -> Papier steht, Inhalt scrollt.
   Bilddatei liegt im Dateimanager unter brand/papier.webp */
.papier {
  background-color: #f1eeed;
  background-image: url("https://148851400.fs1.hubspotusercontent-eu1.net/hubfs/148851400/brand/papier.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* "fixiert" nur auf dem Desktop -- auf dem iPhone ruckelt background-attachment: fixed */
@media (min-width: 900px) and (hover: hover) {
  .papier--fixiert { background-attachment: fixed; }
}
/* Im Druck kein Papier, damit Texte sauber drucken */
@media print {
  .papier { background-image: none; }
}

/* ---------- Cookie-Banner: Hoehe auf schmalen Geraeten begrenzen ----------
   Der HubSpot-Consent-Dialog ist fest positioniert und belegt auf 375 px
   gemessene 727 von 812 px, also 89 Prozent der Bildhoehe -- er verdeckt damit
   die gesamte Startbuehne. HubSpot bietet dafuer keine Einstellung, die Groesse
   laesst sich nur hier begrenzen.
   Aufbau: Der Dialog liegt an der Unterkante und ist auf 62 Prozent der
   Bildhoehe gedeckelt. Darin scrollt NUR der lange Erklaertext; Hinweiszeile
   und Schaltflaechen bleiben stehen und sind ohne Scrollen erreichbar.
   Zustimmen und Ablehnen liegen weiterhin gleichrangig nebeneinander. */
@media (max-width: 767px) {
  #hs-eu-cookie-confirmation {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 62vh !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overscroll-behavior: contain;
  }
  #hs-eu-cookie-confirmation-inner {
    display: flex !important;
    flex-direction: column;
    max-height: 62vh;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Der lange Erklaertext ist das Einzige, was scrollt. */
  #hs-eu-policy-wording {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Hinweiszeile und Schaltflaechen bleiben immer im Bild. */
  #hs-eu-cookie-disclaimer,
  #hs-eu-cookie-confirmation-buttons-area {
    flex: 0 0 auto;
  }
}