/* =====================================================================
   Template "schneewinkl" – Grundschule Schönau am Königssee
   Einzige CSS-Datei des Templates. Farben und Schriften wie bisher:
   blau #0096e7, hellblau #89cdf1, gelb #ffc250, grau #737477
   ===================================================================== */

/* ---------- Schriften (lokal, keine Verbindung zu Google) ---------- */
@font-face {
  font-family: 'Kumbh Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kumbh-sans-v1-latin-regular.woff2') format('woff2'),
       url('../fonts/kumbh-sans-v1-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'),
       url('../fonts/roboto-v20-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-v16-latin-regular.woff2') format('woff2'),
       url('../fonts/lato-v16-latin-regular.woff') format('woff');
}

:root {
  --blau: #0096e7;
  --hellblau: #89cdf1;
  --gelb: #ffc250;
  --grau: #737477;
  --grau-hell: #ebebeb;
  --menue-sub: #eceef1;
  --text: #232323;
  --link-hover: #716d6d;
  --rahmen: #dcdcdc;
  --breite: 1170px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Grundgröße 18px; das Screenreader-Plugin skaliert den body prozentual darauf */
html { font-size: 112.5%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Lato', Verdana, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  background: #fff;
}

img { max-width: 100%; height: auto; }

a { color: var(--blau); text-decoration: none; }
a:hover, a:focus { color: var(--link-hover); text-decoration: underline; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: 'Kumbh Sans', Geneva, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--blau);
  margin: 0 0 .6em;
}
h1 { font-size: 28px; letter-spacing: 2px; text-transform: uppercase; }
h2 { font-size: 24px; }
h3 { font-size: 21px; }
h4 { font-size: 15px; }
h5 { font-size: 12px; }
h6 { font-size: 11px; }

p { margin: 0 0 1em; }

table { border-collapse: collapse; }
tbody td { vertical-align: top; text-align: left; padding: 5px; }
.schultab td { padding: 10px; }
.tabhg-blau td { background-color: var(--blau); color: #fff; }
.tabhg-blau td h2 { color: #fff; }

.container {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 15px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 15px; top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--blau);
  color: #fff;
  font-weight: bold;
}
.skip-link:focus { top: 10px; color: #fff; }

/* ---------- Kontaktzeile oben ---------- */
.bereich-topbar { background: #fff; padding: 20px 0 10px; }
.bereich-topbar p { margin: 0; text-align: right; }
.bereich-topbar a { color: var(--blau); }
.nur-mobil { display: none; }

/* ---------- Blauer Titelbalken ---------- */
.grundschultitel { background: var(--blau); color: #fff; }
.grundschultitel .container { min-height: 83px; display: flex; align-items: center; }
.grundschultitel h1,
.grundschultitel h2,
.grundschultitel .seitenname {
  margin: 0;
  padding: 18px 0;
  font-family: 'Kumbh Sans', Geneva, sans-serif;
  font-size: 31px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
}
.grundschultitel a { color: #fff; }

/* ---------- Hauptmenü ---------- */
.hauptnavigation { background: #fff; position: relative; z-index: 50; }
.hauptnavigation .container { position: relative; }
.hauptnavigation .container::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--blau);
}
.menu-schalter { display: none; }

.hauptmenue ul { list-style: none; margin: 0; padding: 0; }
.hauptmenue > ul.mod-menu,
.hauptmenue > .mod-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.hauptmenue .mod-menu > li { position: relative; display: flex; align-items: center; }
.hauptmenue .mod-menu > li > a,
.hauptmenue .mod-menu > li > span {
  display: block;
  padding: 24px 15px 24px 0;
  margin-right: 15px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: #191717;
}
.hauptmenue .mod-menu > li > a .fa,
.hauptmenue .mod-menu > li > a [class*='fa-'] { padding: 0 4px 0 0 !important; }
.hauptmenue .mod-menu > li:hover > a,
.hauptmenue .mod-menu > li.active > a,
.hauptmenue .mod-menu > li > a:focus {
  color: var(--blau);
  text-decoration: none;
}

/* Pfeil-Schalter für Untermenüs (kommt vom Joomla-Menümodul) */
.hauptmenue .mod-menu__toggle-sub {
  background: none;
  border: 0;
  padding: 4px;
  margin-left: -26px;
  margin-right: 10px;
  color: #191717;
  cursor: pointer;
  font-size: 11px;
}
.hauptmenue .mod-menu__toggle-sub:hover { color: var(--blau); }

.hauptmenue .mod-menu__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  padding: 6px 0;
  background: var(--menue-sub);
  border: 1px solid var(--menue-sub);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
  font-size: 15px;
}
.hauptmenue .mod-menu > li:hover > .mod-menu__sub,
.hauptmenue .mod-menu > li:focus-within > .mod-menu__sub,
.hauptmenue .mod-menu__sub.show-menu { display: block; }

.hauptmenue .mod-menu__sub a {
  display: block;
  padding: 9px 20px;
  color: #191717;
  font-family: 'Roboto', Arial, sans-serif;
}
.hauptmenue .mod-menu__sub a:hover,
.hauptmenue .mod-menu__sub a:focus,
.hauptmenue .mod-menu__sub li.current > a,
.hauptmenue .mod-menu__sub li.active > a {
  background: #fff;
  color: var(--blau);
  text-decoration: none;
}

/* ---------- Kacheln auf der Startseite ---------- */
.bereich-homebloecke { background: var(--grau-hell); padding: 15px 0; }
.home-bloecke {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 15px 0;
}
.home-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  text-align: center;
}
.home-kontakt, .home-aktuelles { background: var(--hellblau); }
.home-termine, .home-schulleben { background: var(--gelb); }
.home-block h2 { margin: 0; padding: 20px; font-size: 45px; font-weight: 700; }
.home-block a {
  display: block;
  color: var(--blau) !important;
  font-family: 'Kumbh Sans', Geneva, sans-serif;
  font-size: 45px;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 1px 1px #fff;
}
.home-block a:hover, .home-block a:focus { text-decoration: none; opacity: .85; }

/* ---------- Seitenbanner (Termine / Aktuelles) ---------- */
.seitenbanner-container { display: none; }
.page-termine .seitenbanner-container,
.page-aktuelles .seitenbanner-container { display: block; }
.seitenbanner {
  height: 250px;
  background: url('../../../../../images/layoutdateien/sonnenuhr1140.jpg') center center / cover no-repeat;
}

/* ---------- Inhaltsbereich ---------- */
.bereich-inhalt { padding: 35px 0 20px; }
.bereich-inhalt:focus { outline: none; }

.inhalt-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}
.mit-rechts .inhalt-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mit-links .inhalt-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.mit-links.mit-rechts .inhalt-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 2fr); }

/* Beitrag in einem Kasten wie bisher (nicht auf der Startseite) */
body:not(.ist-startseite) .inhalt-box {
  padding: 28px 20px 30px;
  border: 1px solid var(--rahmen);
  border-radius: 4px;
}
.page-header h1, .page-header h2, .com-content-article > h1 { margin-bottom: .6em; }

/* Startseite: Beitragsübersicht */
.blog-featured .item-title,
.blog-featured h2 { font-size: 21px; margin-bottom: .4em; }
.blog-featured .item-title a,
.blog-featured h2 a { color: var(--blau); }

/* Beitrags-Werkzeuge (Bearbeiten-Symbol für angemeldete Benutzer) */
.icons { float: right; position: relative; font-size: 15px; }

/* Frontend-Bearbeitung: Modul-Bearbeiten-Knöpfe und Hinweise */
.jmoddiv { position: relative; }
.jmodedit {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 60;
  padding: 3px 7px;
  font-size: 13px;
  line-height: 1;
}
[role='tooltip'] {
  display: none;
  position: absolute;
  z-index: 70;
  max-width: 260px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
  background: #333;
  border-radius: 4px;
}
a:hover + [role='tooltip'],
a:focus + [role='tooltip'],
[role='tooltip'].show { display: block; }

/* ---------- Modulkästen (rechte Spalte, unter dem Inhalt) ---------- */
.modul-box {
  margin-top: 50px;
  padding: 15px;
  border: 1px solid var(--blau);
  border-radius: 5px;
}
.spalte-rechts .modul-box { margin-top: 0; margin-bottom: 30px; }
.spalte-haupt .modul-box + .modul-box { margin-top: 30px; }
.modul-box > h2,
.modul-box > h3 {
  margin: 0 0 21px;
  padding: 11px 0;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--blau);
}
.modul-box .mod-custom > :last-child,
.modul-box .mod-custom > :last-child > :last-child { margin-bottom: 0; }

/* Formulare zum Drucken / Elternbriefe: Pfeil-Liste */
.modulformulare ul { padding-left: 30px; margin: 0; }
.modulformulare ul li {
  padding-left: 10px;
  line-height: 1.8em;
  list-style-image: url('../../../../../images/layoutdateien/pfeil1.png');
}

/* Untermenü rechts */
.spalte-rechts ul.mod-menu,
.menu-sidemenu { list-style: none; margin: -8px 0; padding: 0; }
.spalte-rechts ul.mod-menu li a {
  display: block;
  padding: 5px 0;
  font-size: 18px;
  line-height: 1.53;
  color: var(--blau);
}
.spalte-rechts ul.mod-menu li.current > a,
.spalte-rechts ul.mod-menu li.active > a { font-weight: bold; }
.spalte-rechts ul.mod-menu ul { list-style: none; padding-left: 15px; }
.spalte-rechts .mod-menu__toggle-sub { display: none; }
.spalte-rechts .mod-menu__sub { display: block !important; }

/* Anmeldung */
.mod-login .form-group, .mod-login .control-group, .mod-login__username, .mod-login__password { margin-bottom: 12px; }
.mod-login label { display: block; margin-bottom: 4px; font-size: 16px; }
.mod-login input[type='text'],
.mod-login input[type='password'],
.mod-login input[type='email'] {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
  border: 1px solid var(--rahmen);
  border-radius: 4px;
}
.mod-login .input-group { display: flex; }
.mod-login .input-group-text, .mod-login .input-password-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: var(--grau-hell);
  border: 1px solid var(--rahmen);
}
.mod-login ul, .mod-login__options { list-style: none; padding: 0; margin: 12px 0 0; font-size: 16px; }

/* ---------- Formulare und Schaltflächen allgemein ---------- */
.btn, button.btn, input[type='submit'] {
  display: inline-block;
  padding: 8px 18px;
  font: inherit;
  font-size: 16px;
  color: #fff;
  background: var(--blau);
  border: 1px solid var(--blau);
  border-radius: 4px;
  cursor: pointer;
}
.btn:hover, .btn:focus { background: var(--grau); border-color: var(--grau); color: #fff; text-decoration: none; }
.btn-secondary, .btn-light { background: #fff; color: var(--blau); }

.alert, joomla-alert {
  display: block;
  margin-bottom: 20px;
  padding: 12px 16px;
  color: #fff;
  background: var(--hellblau);
  border-radius: 4px;
}

/* Frontend-Bearbeitung: Editor-Formular */
.edit.item-page fieldset { border: 0; padding: 0; }
.edit.item-page input[type='text'], .edit.item-page select { font: inherit; padding: 6px 8px; }

/* ---------- JEvents-Kalender (Theme "flat") in Schulblau wie bisher ----------
   "body" vorangestellt, weil die JEvents-CSS nach dieser Datei geladen wird */
body #jevents_body .nav-items > div { border: 1px solid var(--blau); }
body #jevents_body .nav-items > div:first-child { border-left: 1px solid var(--blau); }
body #jevents_body .nav-items > div:last-child { border-right: 1px solid var(--blau); }
body #jevents_body .nav-items > div a:hover { border-left: 1px solid var(--blau); }
body #jevents_body .nav-items div.active a,
body #jevents_body .jev_header2 .active a { background-color: var(--blau); }
body #jevents_body .nav-items div.active a:hover,
body #jevents_body .jev_header2 .active a:hover { border-left: 1px solid var(--blau); }
body #jevents_body .cal_today a.cal_daylink { background-color: var(--blau); }
body #jevents_body .cal_today a.cal_daylink:hover { border: 1px solid var(--blau); color: var(--blau); }
body #jevents_body .jev_toprow div.previousmonth,
body #jevents_body .jev_toprow div.nextmonth { background-color: var(--blau); border: 1px solid var(--blau); }
body #jevents_body .jev_toprow div.currentmonth { border-top: 1px solid var(--blau); border-bottom: 1px solid var(--blau); }
/* Auf schmalen Bildschirmen scrollt nur der Kalender, nicht die ganze Seite */
#jevents_body { max-width: 100%; overflow-x: auto; }

/* ---------- Termine (Ersatz-Beitrag, nicht mehr verwendet) ---------- */
table.termine { width: 100%; margin-top: 10px; }
table.termine th {
  padding: 10px;
  text-align: left;
  color: #fff;
  background: var(--blau);
  font-weight: normal;
}
table.termine td { padding: 10px; border-bottom: 1px solid var(--rahmen); }
table.termine td:first-child { white-space: nowrap; width: 35%; }

/* ---------- Galerie und Schulbilder ---------- */
.galerie { display: grid; grid-template-columns: 1fr; gap: 15px; }
.galerie img { display: block; width: 100%; }
.galerie a:focus img, .galerie a:hover img { opacity: .85; }

.bereich-bilder { padding: 20px 0 0; }
.bilder-schule {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.bilder-schule img { display: block; width: 100%; margin-bottom: 25px; }

/* ---------- Kontaktbereich unten ---------- */
.bereichbottom {
  margin-top: 50px;
  padding: 40px 0;
  background: var(--hellblau);
  color: #000;
}
.bottom-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}
.bereichbottom h2, .bereichbottom h3 { color: #000; }
.bereichbottom h2 { font-size: 24px; }
.bereichbottom h3 { font-size: 21px; }
.bereichbottom p { font-size: 16px; }
.bereichbottom a { color: #000; font-weight: bolder; }

/* ---------- Footer ---------- */
.bereich-footer { padding: 10px 0; background: #fff; }
.bereich-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.bereich-footer a {
  font-weight: 600;
  letter-spacing: .3px;
  color: #222;
}
.bereich-footer a:hover, .bereich-footer a:focus { color: var(--blau); }

.nach-oben {
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 40;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grau);
  color: #fff;
  opacity: .8;
}
.nach-oben:hover, .nach-oben:focus { background: #667481; color: #fff; text-decoration: none; opacity: 1; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1280px) and (min-width: 1024px) {
  .hauptmenue .mod-menu > li > a { margin-right: 10px; }
}

@media (max-width: 1024px) {
  .grundschultitel h1, .grundschultitel h2, .grundschultitel .seitenname { font-size: 25px; }
  .hauptmenue .mod-menu > li > a { padding: 15px 10px 15px 0; font-size: 15px; }
  .home-block a { font-size: 36px; }
}

@media (max-width: 991px) {
  .mit-rechts .inhalt-raster,
  .mit-links .inhalt-raster,
  .mit-links.mit-rechts .inhalt-raster { grid-template-columns: minmax(0, 1fr); }
  .spalte-rechts { margin-top: 20px; }
}

@media (max-width: 767px) {
  html { font-size: 106.25%; }
  h1 { font-size: 24px; }
  h2 { font-size: 22px; }
  h3 { font-size: 20px; }

  .nur-desktop { display: none; }
  .nur-mobil { display: block; }
  .bereich-topbar p { text-align: left; }

  .grundschultitel h1, .grundschultitel h2, .grundschultitel .seitenname { font-size: 20px; letter-spacing: 1px; }

  /* Menü einklappbar */
  .menu-schalter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 8px 12px;
    font: inherit;
    font-size: 18px;
    background: #fff;
    color: #000;
    border: 1px solid var(--rahmen);
    border-radius: 4px;
    cursor: pointer;
  }
  .menu-schalter .fa { font-size: 26px; }
  .hauptmenue { display: none; padding-bottom: 10px; }
  .hauptmenue.offen { display: block; }
  .hauptmenue > ul.mod-menu, .hauptmenue > .mod-menu { display: block; }
  .hauptmenue .mod-menu > li { display: flex; flex-wrap: wrap; border-top: 1px solid var(--grau-hell); }
  .hauptmenue .mod-menu > li > a { flex: 1; padding: 12px 0; margin: 0; }
  .hauptmenue .mod-menu__toggle-sub { margin: 0; padding: 12px; font-size: 14px; }
  .hauptmenue .mod-menu__sub {
    position: static;
    width: 100%;
    box-shadow: none;
  }
  .hauptmenue .mod-menu > li:hover > .mod-menu__sub { display: none; }
  .hauptmenue .mod-menu > li:focus-within > .mod-menu__sub { display: none; }
  .hauptmenue .mod-menu__sub.show-menu { display: block; }

  .home-bloecke { grid-template-columns: 1fr; gap: 15px; }
  .home-block { min-height: 110px; }
  .home-block a { font-size: 30px; }

  .seitenbanner { height: 140px; }

  body:not(.ist-startseite) .inhalt-box { padding: 20px 15px; }

  .bilder-schule { grid-template-columns: 1fr; gap: 0; }

  .nach-oben { bottom: 80px; right: 12px; }
}