/* Lorenz-Fries-Schule: Navigation und wiederkehrende Bausteine.
   Farben und Schriften folgen dem Design "Klar und Zugewandt". */

:root {
  --lfs-blau: #003264;
  --lfs-gold: #FFBD0E;
  --lfs-gelb: #FFD25A;
  --lfs-gelb-hell: #FFF6DE;
  --lfs-tinte: #0F1B2D;
  --lfs-grund: #F4F6FA;
  --lfs-flaeche: #FFFFFF;
  --lfs-gedaempft: #4E5F76;
  --lfs-linie: #DCE3ED;
  --lfs-blau-linie: #1B4A79;
}

body { background: var(--lfs-flaeche); }

.lfs-kopfzeile { position: relative; }

/* ---------------------------------------------------------------- Navigation */

.lfs-nav { width: 100%; }

.lfs-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
}

.lfs-nav__list li { position: relative; }

.lfs-nav__icon {
  display: block;
  width: 26px;
  height: 22px;
  flex: 0 0 auto;
}

body .lfs-nav__list > li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 10px 9px;
  border-bottom: 3px solid transparent;
  color: #FFFFFF;
  font-family: Outfit, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

body .lfs-nav__list > li > a:hover,
body .lfs-nav__list > li > a:focus-visible { border-bottom-color: var(--lfs-gelb); color: #FFFFFF; }

body .lfs-nav__list > li.current-menu-item > a,
body .lfs-nav__list > li.current-menu-ancestor > a,
body .lfs-nav__list > li.current-page-ancestor > a,
body .lfs-nav__list > li.current-menu-parent > a { border-bottom-color: var(--lfs-gelb); }

/* Untermenue */
.lfs-nav__list ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 90;
  display: none;
  min-width: 300px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--lfs-flaeche);
  border: 1px solid var(--lfs-linie);
  border-top: 0;
  border-radius: 0 0 16px 16px;
}

.lfs-nav__list > li:hover > ul,
.lfs-nav__list > li:focus-within > ul { display: block; }

body .lfs-nav__list ul a {
  display: block;
  padding: 9px 20px;
  border-left: 3px solid transparent;
  color: var(--lfs-tinte);
  font-family: "Source Sans 3", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  white-space: normal;
}

body .lfs-nav__list ul a:hover,
body .lfs-nav__list ul a:focus-visible { border-left-color: var(--lfs-gelb); background: var(--lfs-grund); color: var(--lfs-tinte); }
body .lfs-nav__list ul li.current-menu-item > a { border-left-color: var(--lfs-gelb); font-weight: 600; }

/* Schalter fuer kleine Bildschirme */
.lfs-nav__toggle { display: none; }

.lfs-nav__burger { display: block; width: 22px; height: 2px; background: #FFFFFF; position: relative; }
.lfs-nav__burger::before,
.lfs-nav__burger::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #FFFFFF; }
.lfs-nav__burger::before { top: -7px; }
.lfs-nav__burger::after { top: 7px; }
.lfs-nav.is-open .lfs-nav__burger { background: transparent; }
.lfs-nav.is-open .lfs-nav__burger::before { top: 0; transform: rotate(45deg); }
.lfs-nav.is-open .lfs-nav__burger::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1149px) {
  body .lfs-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 4px;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    font-family: Outfit, sans-serif;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
  }

  body .lfs-nav__toggle:focus-visible { outline: 3px solid var(--lfs-gelb); outline-offset: 2px; }

  /* Elementor setzt Widgets auf position: relative. Fuer das ausklappbare
     Menue muss die Kopfzeile der Bezugspunkt sein. */
  body .lfs-kopfzeile .elementor-widget-shortcode { position: static; }

  .lfs-nav__list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 120;
    display: none;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6px 24px 22px;
    background: var(--lfs-flaeche);
    border-bottom: 1px solid var(--lfs-linie);
  }

  .lfs-nav.is-open .lfs-nav__list { display: flex; }

  body .lfs-nav__list > li > a {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--lfs-linie);
    color: var(--lfs-blau);
    font-size: 19px;
  }

  body .lfs-nav__list > li > a:hover { border-bottom-color: var(--lfs-gelb); color: var(--lfs-blau); }

  .lfs-nav__list ul {
    position: static;
    display: block;
    min-width: 0;
    padding: 4px 0 10px 16px;
    border: 0;
    border-radius: 0;
  }

  body .lfs-nav__list ul a { padding: 9px 4px; font-size: 17px; }
}

@media (max-width: 600px) {
  .lfs-nav__list { padding-left: 20px; padding-right: 20px; }
}

/* ---------------------------------------------------------------- Fliesstext */

.lfs-richtext {
  color: var(--lfs-tinte);
  font-family: "Source Sans 3", sans-serif;
  font-size: 19px;
  line-height: 1.75;
}

.lfs-richtext p { margin: 0 0 16px; }
.lfs-richtext p:last-child { margin-bottom: 0; }
.lfs-richtext ul, .lfs-richtext ol { margin: 0 0 18px; padding-left: 26px; }
.lfs-richtext li { margin-bottom: 10px; }
.lfs-richtext li::marker { color: var(--lfs-blau); }
body .lfs-richtext a { color: var(--lfs-blau); text-decoration: underline; text-underline-offset: 3px; }
body .lfs-richtext a:hover { color: var(--lfs-tinte); }
.lfs-richtext strong { font-weight: 700; }
.lfs-richtext h2, .lfs-richtext h3 {
  margin: 28px 0 12px;
  color: var(--lfs-blau);
  font-family: Outfit, sans-serif;
  font-weight: 700;
  line-height: 1.2;
}
.lfs-richtext h2 { font-size: 26px; }
.lfs-richtext h3 { font-size: 22px; }
.lfs-richtext h2:first-child, .lfs-richtext h3:first-child { margin-top: 0; }

.lfs-richtext--gross { font-size: 21px; line-height: 1.8; }
.lfs-richtext--gross li { margin-bottom: 12px; }

.lfs-richtext img,
.lfs-richtext .lfs-bild {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 22px 0 10px;
  border-radius: 16px;
  border: 1px solid var(--lfs-linie);
}

.lfs-richtext--gross img { margin-top: 8px; }

/* ---------------------------------------------------------------- mehr Infos */

.lfs-toggle { max-width: 820px; }

.lfs-toggle .elementor-toggle-item {
  margin-bottom: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}

/* Die gelbe Leiste ist das Erkennungszeichen der alten Website. */
body .lfs-toggle .elementor-tab-title {
  padding: 16px 24px;
  border: 0;
  background: var(--lfs-gelb);
  color: var(--lfs-tinte);
  font-family: Outfit, sans-serif;
  font-size: 19px;
  font-weight: 700;
}

body .lfs-toggle .elementor-tab-title:hover { background: var(--lfs-gold); }
body .lfs-toggle .elementor-tab-title.elementor-active { background: var(--lfs-gold); }
body .lfs-toggle .elementor-tab-title .elementor-toggle-icon { color: var(--lfs-tinte); }

body .lfs-toggle .elementor-tab-content {
  padding: 26px 24px 28px;
  border: 1px solid var(--lfs-linie);
  border-top: 0;
  background: var(--lfs-flaeche);
}

/* ---------------------------------------------------------------- Galerie */

.lfs-galerie .gallery-item { margin-top: 0 !important; vertical-align: top; }
.lfs-galerie .gallery-item img {
  border: 1px solid var(--lfs-linie) !important;
  border-radius: 16px;
  background: var(--lfs-flaeche);
}
body .lfs-galerie .gallery-item .gallery-caption {
  margin: 8px 0 0;
  color: var(--lfs-gedaempft);
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  font-style: normal;
  line-height: 1.4;
}

/* ---------------------------------------------------------------- Fusszeile */

.lfs-fusszeile .s-fuss-zeichen,
.lfs-fusszeile .s-fuss-zeichen img { filter: brightness(0) invert(1); }
.s-b1-bild, .s-b1-bild img { filter: brightness(0) invert(1); }

.lfs-fussnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: flex-end;
}

body .lfs-fussnav__list a {
  color: #8FA9C4;
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

body .lfs-fusszeile a { color: #D5E0EE; text-decoration: none; border-bottom: 2px solid transparent; }
body .lfs-fusszeile a:hover,
body .lfs-fusszeile a:focus-visible { color: #FFFFFF; border-bottom-color: var(--lfs-gelb); }
body .lfs-fusszeile .elementor-widget-shortcode { width: 100%; }

.lfs-fusszeile a:focus-visible,
.lfs-kopfzeile a:focus-visible { outline: 3px solid var(--lfs-gelb); outline-offset: 3px; }

@media (max-width: 767px) {
  body .lfs-fussnav__list { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- Kontaktseite */

.s-k-schule-bild img,
.s-k-sozial-bild img,
.s-k-frueh-bild img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
}

/* ---------------------------------------------------------------- Kleinigkeiten */

body .lfs-kopfzeile a { text-decoration: none; }
body .lfs-kopfzeile .s-kopf-marke a:hover,
body .lfs-kopfzeile .s-kopf-draht a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .lfs-richtext { font-size: 18px; }
  .lfs-richtext--gross { font-size: 20px; }
}

/* Das Plus steht wie auf der alten Website rechts in der gelben Leiste. */
body .lfs-toggle .elementor-tab-title { display: flex; align-items: center; gap: 12px; }
body .lfs-toggle .elementor-tab-title .elementor-toggle-icon { order: 2; margin-left: auto; float: none; font-size: 18px; }
body .lfs-toggle .elementor-tab-title .elementor-toggle-title { order: 1; }

/* ---------------------------------------------------------------- Kleine Bildschirme */

/* Lange Woerter, E-Mail-Adressen und Links duerfen umbrechen. */
.lfs-richtext,
.lfs-richtext p,
.lfs-richtext li,
.lfs-richtext a { overflow-wrap: break-word; }

/* Die Basisgalerie wird auf kleinen Bildschirmen zu einem Raster,
   damit die Bilder nicht briefmarkengross werden. */
@media (max-width: 1024px) {
  body .lfs-galerie .gallery { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; align-items: start; }
  body .lfs-galerie .gallery-item { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; }
  body .lfs-galerie .gallery-item img { width: 100%; }
}

@media (max-width: 767px) {
  body .lfs-galerie .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }

  /* Sehr lange Fachwoerter in Ueberschriften duerfen brechen. */
  .lfs-kopfzeile .s-kopf-name,
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
}


/* === lfs-hover-block =============================================
   Der Elementor-Kit setzt global  a:hover { color: #0F1B2D }  und
   ueberschreibt damit die eigene Farbe von Knoepfen und von Links,
   die ihre Farbe erben (all: unset). Das wird hier korrigiert.
   ================================================================ */

/* 1. Knoepfe: einheitlich dunkle Flaeche mit weisser Schrift. */
body .elementor a.e-button-base:hover,
body .elementor a.e-button-base:focus-visible,
body .elementor button.e-button-base:hover,
body .elementor button.e-button-base:focus-visible,
body .elementor .elementor-button:hover,
body .elementor .elementor-button:focus-visible {
  background-color: var(--lfs-tinte);
  border-color: var(--lfs-tinte);
  color: #FFFFFF;
}

/* 2. Atomare Links erben ihre Farbe. Beim Hover muessen sie das
      ebenfalls tun, sonst werden weisse Links auf dunklem Grund
      unlesbar. Rueckmeldung gibt stattdessen die Unterstreichung. */
body .elementor a.e-paragraph-link-base:hover,
body .elementor a.e-paragraph-link-base:focus-visible,
body .elementor a.e-heading-link-base:hover,
body .elementor a.e-heading-link-base:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* 3. Sichtbare Tastatur-Markierung fuer alle anklickbaren Elemente. */
body .elementor a.e-button-base:focus-visible,
body .elementor button.e-button-base:focus-visible,
body .elementor a.e-paragraph-link-base:focus-visible,
body .elementor a.e-heading-link-base:focus-visible,
body .elementor a.e-image-link-base:focus-visible,
body .elementor a.e-flexbox-base:focus-visible {
  outline: 3px solid var(--lfs-gelb);
  outline-offset: 3px;
}

/* 4. Die Fusszeile behaelt ihre eigene Hover-Zeichnung. */
body .lfs-fusszeile a.e-paragraph-link-base:hover,
body .lfs-fusszeile a.e-paragraph-link-base:focus-visible,
body .lfs-fusszeile a.e-heading-link-base:hover,
body .lfs-fusszeile a.e-heading-link-base:focus-visible {
  color: #FFFFFF;
  text-decoration: none;
  border-bottom-color: var(--lfs-gelb);
}

/* 5. Der Schriftzug in der Kopfzeile behaelt sein Gold. */
body .lfs-kopfzeile a.e-heading-link-base:hover,
body .lfs-kopfzeile a.e-paragraph-link-base:hover {
  color: inherit;
}
/* === Ende lfs-hover-block ======================================= */


/* === lfs-kopf-dunkel ============================================
   Die Kopfzeile steht auf demselben Blau wie die Menueleiste und
   wird von ihr durch eine weisse Linie getrennt.
   ================================================================ */

body .lfs-kopfzeile .s-kopf-aussen {
  border-bottom: 3px solid #FFFFFF;
}

/* Das Monogramm ist eine schwarze Zeichnung auf transparentem Grund.
   Auf dem dunklen Blau wird es weiss gefaerbt. */
body .lfs-kopfzeile img.s-kopf-zeichen,
body .lfs-kopfzeile .s-kopf-zeichen img {
  filter: brightness(0) invert(1);
}

/* Der Schriftzug traegt jetzt Gold auf Blau: Kontrast 7,6 zu 1. */
body .lfs-kopfzeile a:focus-visible {
  outline-color: #FFFFFF;
}
/* === Ende lfs-kopf-dunkel ====================================== */


/* === lfs-menue-mobil-blau =======================================
   Mobile Browser legen beim Antippen eine eigene Farbe ueber Links,
   auf Android haeufig ein Orangerot. Diese Farbe wird durch das
   Schulblau ersetzt, und das Klappmenue bekommt eine eigene, klar
   dunkelblaue Markierung fuer den angetippten Eintrag.
   ================================================================ */

html {
  -webkit-tap-highlight-color: rgba(0, 50, 100, 0.30);
}

@media (max-width: 1149px) {

  /* Etwas Innenabstand, damit die Flaeche den Text umschliesst.
     Der negative Aussenabstand haelt die Textkante an ihrem Platz. */
  body .lfs-nav__list > li > a {
    padding-inline: 10px;
    margin-inline: -10px;
    border-radius: 8px 8px 0 0;
  }

  body .lfs-nav__list > li > a:hover,
  body .lfs-nav__list > li > a:focus-visible,
  body .lfs-nav__list > li > a:active {
    background: var(--lfs-blau);
    border-bottom-color: var(--lfs-gelb);
    color: #FFFFFF;
  }

  body .lfs-nav__list ul a:hover,
  body .lfs-nav__list ul a:focus-visible,
  body .lfs-nav__list ul a:active {
    background: var(--lfs-blau);
    border-left-color: var(--lfs-gelb);
    color: #FFFFFF;
  }

  body .lfs-nav__toggle:hover,
  body .lfs-nav__toggle:active {
    color: #FFFFFF;
  }
}
/* === Ende lfs-menue-mobil-blau ================================== */


/* === lfs-sprung-link ============================================
   Elementor laedt nach dem Theme eine eigene Regel, die ".screen-
   reader-text" dauerhaft bei top:-10000em haelt und dabei die
   :focus-Regel des Theme ueberschreibt (gleiche Rangfolge, aber
   spaeter geladen). Dadurch blieb der Sprunglink 'Zum Inhalt
   springen' bei Tastaturbedienung unsichtbar. Hier wird die
   Sichtbarkeit bei Fokus mit hoeherer Rangfolge erzwungen.
   ================================================================ */

body a.skip-link.screen-reader-text:focus {
  top: 5px;
  left: 5px;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 24px;
  background-color: var(--lfs-blau);
  color: #FFFFFF;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: 17px;
  border-radius: 8px;
  z-index: 100000;
  outline: 3px solid var(--lfs-gelb);
  outline-offset: 2px;
}
/* === Ende lfs-sprung-link ======================================= */


/* === lfs-chip-tapflaeche ========================================
   Auf mehreren Unterseiten stehen kurze Direktlinks als Kachel mit
   Rahmen und Hintergrund (z.B. die Uebersichtsliste auf Leitbild,
   Grundstufe, Hauptstufe, Inklusion, Schulregeln, Ueber die Schule).
   Das Elementor-Absatz-Widget legt den Link aber nur um den Text,
   nicht um die gepolsterte Flaeche. Dadurch war nur der Text in der
   Mitte der Kachel antippbar (rund 23px hoch), nicht die sichtbare
   Flaeche (bis zu 53px hoch). Hier wird die ganze Kachel antippbar
   gemacht, ohne das Aussehen zu veraendern.
   ================================================================ */

.elementor p.e-paragraph-base {
  position: relative;
}

.elementor p.e-paragraph-base > a.e-paragraph-link-base:only-child::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* === Ende lfs-chip-tapflaeche =================================== */