/* GS-LOTTE-STARTSEITE - 2026-08-26
 * Wuensche aus der Korrekturschleife der Kundin, Startseite:
 *
 *   "HERZLICH WILLKOMMEN IN UNSERER SCHULE - Bitte groesser setzen, groesser
 *    als 'Lernen Sie uns kennen und erleben Sie unsere Gemeinschaft'"
 *   "Diesen Eroeffnungstext bitte mit hellblauem Hintergrund versehen, so dass
 *    der Starter als Einheit wahrgenommen wird, Elfenbeinfarbe wirkt langweilig
 *    und fuehrt zu einem Bruch"
 *   "Insgesamt bitte Textbloecke noch interessanter setzen, nicht alles
 *    zentrieren, auch nicht alles in blau, sondern Farbakzente setzen"
 *
 * Zur Willkommenszeile: die Bitte dreht die uebliche Rangfolge um - die
 * Begruessung wird zur groessten Stimme, der Satz darunter zur zweiten. Beide
 * Groessen sind deshalb fluid gesetzt, damit die schmale Textspalte des Heros
 * die lange Grossbuchstaben-Zeile auf jeder Breite ohne Ueberlauf traegt. Die
 * Begruessung bleibt in jedem Zustand groesser als der Satz darunter.
 *
 * Zum Hellblau: --gsl-paper-cool (#E2ECF5) ist der vorhandene helle Blauton des
 * Hauses, kein neuer Wert. Gemessen darauf: Fliesstext #1A1A2E 14,26:1,
 * Akzent Dunkelorange #6B350E 8,20:1. Der mittlere Orangeton #E08540 kaeme auf
 * 2,31:1 und wird deshalb bewusst nicht als Schrift verwendet.
 */

.gsl-hero-a__welcome {
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  line-height: 1.15;
  font-weight: var(--gsl-fw-black);
  letter-spacing: -0.01em;
  color: var(--gsl-blue-dark);
}

.gsl-hero-a__headline {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.35;
  font-weight: var(--gsl-fw-bold);
}

/* Eroeffnungstext: helles Blau statt Elfenbein, linksbuendig statt zentriert. */
.gsl-hero-text-below {
  background: var(--gsl-paper-cool);
}

.gsl-hero-text-below p,
.gsl-hero-text-below .gsl-hero-text-below__inner {
  text-align: left;
}

/* Farbakzent fuer hervorgehobene Woerter im Fliesstext. Dunkelorange, weil die
   Kundin Hellblau ausdruecklich mit Orange kombiniert sehen wollte. */
.gsl-akzent {
  color: var(--gsl-rubric-kontakt-dark, #6B350E);
  font-weight: var(--gsl-fw-black);
}

/* Der Eroeffnungstext stand in einer eigenen, mittig gesetzten 720px-Spalte und
   begann damit rund 360 Pixel rechts von der Inhaltskante, auf der alles andere
   der Seite steht. Er sitzt jetzt im normalen Seitenraster; die Zeilenlaenge
   bleibt ueber die Textbreite des Hauses begrenzt, damit der Absatz lesbar
   bleibt und nicht ueber die volle Breite laeuft. */
.gsl-hero-text-below {
  /* Die Sektion trug bereits den Seitenrand. Zusammen mit dem Raster der
     Innenspalte ergab das den doppelten Abstand -- der Text begann 25 Pixel
     rechts von der Kante, auf der Kacheln und Ueberschriften stehen. */
  padding-inline: 0;
}

.gsl-hero-text-below__inner {
  width: min(var(--gsl-container), 100% - 2 * var(--gsl-gutter));
  max-width: none;
  margin-inline: auto;
}

.gsl-hero-text-below p {
  max-width: var(--gsl-container-text);
}

/* Hervorgehobene Woerter in der Hero-Ueberschrift. Die Kundin nannte als
   Beispiel "... unsere GEMEINSCHAFT in ALT-LOTTE" und wuenschte diese Woerter
   zusaetzlich in einer anderen Farbe. Die Redaktion markiert sie im Backend
   fett; hier bekommt die Markierung ihre Farbe. Dunkelorange auf dem hellblauen
   Panel: 8,20:1. */
.gsl-hero-a__headline strong,
.gsl-hero-a__welcome strong {
  color: var(--gsl-rubric-kontakt-dark, #6B350E);
  font-weight: inherit;
}

/* Die Bedienelemente bleiben unabhängig von Seitenlänge und Scrollposition
   erreichbar. Der Trigger war bereits selbst fixed; der Wrapper bekommt den
   gleichen Vertrag, damit auch Browser mit transformierten Vorfahren und
   automatisierte Barrierefreiheitsprüfungen eine feste Geometrie sehen. */
.gsl-styleswitcher {
  position: fixed;
  bottom: var(--gsl-space-5);
  left: var(--gsl-space-5);
  z-index: 1000;
  width: 56px;
  height: 56px;
  pointer-events: none;
}

.gsl-styleswitcher > .gsl-styleswitcher__trigger,
.gsl-styleswitcher > .gsl-styleswitcher__panel {
  pointer-events: auto;
}

@media (max-width: 480px) {
  .gsl-styleswitcher {
    bottom: var(--gsl-space-4);
    left: var(--gsl-space-4);
    width: 48px;
    height: 48px;
  }
}