/* Theme-CSS der Ganztagsgrundschule Wallhalben (Contao 5.7).
   Bis Contao 4.13 als interne Stylesheets "basic", "layout" und "print" gepflegt;
   Oktober 2026 leicht modernisiert: abgerundete Seitenbox, scharfer Header, Handy-Ansicht unter 920px. */

:root {
  --gsw-text: #333;
  --gsw-green: #2e7d32;
  --gsw-green-dark: #1b5e20;
  --gsw-yellow: #fc0;
  --gsw-yellow-light: rgba(255, 204, 0, .15);
  --gsw-yellow-hover: rgba(255, 204, 0, .4);
  --gsw-line: rgba(51, 51, 51, .1);
}

/* Grundlayout */
body { min-width: 920px; color: var(--gsw-text); font: 13px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
#top { background-image: url("/tl_files/gs-wallhalben/theme/background.png"); background-repeat: repeat-x; }
#wrapper { margin-top: 24px; margin-bottom: 24px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .18); }
#header {
  background-color: #fff;
  background-image: url("/tl_files/gs-wallhalben/theme/header-2x.jpg");
  background-image: image-set(url("/tl_files/gs-wallhalben/theme/header-2x.webp") type("image/webp"), url("/tl_files/gs-wallhalben/theme/header-2x.jpg") type("image/jpeg"));
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#container { background-color: #fff; }
#left { height: 100%; min-height: 220px; padding-top: 15px; padding-bottom: 15px; padding-left: 10px; }
#main .inside { padding: 20px 15px 20px 25px; }
#startseite { padding-left: 20px; }

/* Text */
h1 { font-size: 1.6em; }
#main h1 { line-height: 1.25; color: var(--gsw-text); }
#main a { color: var(--gsw-green-dark); text-decoration: underline; text-decoration-color: rgba(27, 94, 32, .4); text-underline-offset: 2px; }
#main a:hover { text-decoration-color: currentColor; }
/* Tabellen aus dem alten Editor: feste Hoehen aufheben, Absaetze in Zellen ohne Extra-Abstand,
   damit alle Zellen einer Zeile oben buendig stehen */
#main table[style*="height"] { height: auto !important; }
#main td { vertical-align: top; padding: 3px 12px 3px 0; }
#main td > p, #main td > h1, #main td > h2, #main td > h3, #main td > h4, #main td > h5, #main td > h6 { margin: 0; }
#main td > * + * { margin-top: .3em; }

/* Bilder, Galerien, Downloads */
#main figure { margin: 10px 30px; }
#main figure img { border-radius: 8px; }
.content-gallery > ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 16px 0; }
.content-gallery--cols-3 > ul { grid-template-columns: repeat(3, 1fr); }
.content-gallery--cols-4 > ul { grid-template-columns: repeat(4, 1fr); }
.content-gallery > ul li { float: none; text-align: center; }
#main .content-gallery figure { margin: 0; }
#main .content-download .size { color: #666; }
.content-download a::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; background: url("/assets/contao/images/iconPDF.svg") no-repeat center / contain; }
.content-download:not(.ext-pdf) a::before { display: none; }

/* Formulare: Beschriftung ueber dem Feld, alle Felder gleich breit */
#main .widget { margin: 0 0 14px; }
#main .widget > label { display: block; margin-bottom: 4px; font-weight: 600; }
#main .widget > label .mandatory { color: #c00; }
#main .widget input[type="text"], #main .widget input[type="email"], #main .widget input[type="tel"], #main .widget textarea {
  box-sizing: border-box; width: 100%; max-width: 520px; padding: 8px 10px;
  border: 1px solid #bbb; border-radius: 6px; font: inherit; color: inherit; background: #fff;
}
#main .widget textarea { resize: vertical; }
#main .widget input:focus, #main .widget textarea:focus { outline: 2px solid var(--gsw-green); outline-offset: 0; border-color: var(--gsw-green); }
#main .widget-submit button { padding: 9px 22px; border: 0; border-radius: 6px; background: var(--gsw-yellow); color: var(--gsw-text); font: inherit; font-weight: 600; cursor: pointer; }
#main .widget-submit button:hover { background: #e6b800; }
#main .widget-explanation td { padding-bottom: 6px; }

/* Navigation: gelbe Kaesten, aktuelle Seite weiss mit gruenem Balken */
nav { margin-right: 30px; margin-left: 5px; }
#left a { color: var(--gsw-text); text-decoration: none; }
#left ul { margin: 0; padding: 0; list-style-type: none; }
#left li { border-top: 1px solid var(--gsw-line); }
#left .mod_navigation > ul > li:first-child { border-top: 0; }
#left .inside .mod_navigation { margin: 15px 15px 10px 0; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
#left .inside .mod_navigation h1 { margin: 0; padding: 10px 0; font-size: 1.15em; text-align: center; color: var(--gsw-text); background-color: var(--gsw-yellow); }
#left .inside .mod_navigation .level_1 { line-height: 1.35; background-color: var(--gsw-yellow-light); }
#left li a, #left li strong { display: block; padding: 6px 12px; }
#left .level_2 a, #left .level_2 strong { padding-left: 28px; }
#left .level_3 a, #left .level_3 strong { padding-left: 42px; }
#left li a:hover { background: var(--gsw-yellow-hover); }
#left li strong.active { background: #fff; color: var(--gsw-green); box-shadow: inset 4px 0 0 var(--gsw-green); font-weight: 600; }
#left li.trail > a { font-weight: bold; }

/* Menue-Button (wird von mobile-nav.js eingefuegt), nur in der Handy-Ansicht sichtbar */
.nav-toggle { display: none; }

/* Handy und Tablet: einspaltig, Header skaliert mit, Menue zum Ausklappen */
@media screen and (max-width: 919px) {
  body { min-width: 0; }
  #wrapper { width: auto !important; margin: 0; border-radius: 0; box-shadow: none; }
  #header { height: auto !important; aspect-ratio: 920 / 280; }
  #container { padding-left: 0 !important; display: flex; flex-direction: column; }
  #main, #left { float: none; width: auto !important; right: auto !important; margin-left: 0; position: static; }
  #left { order: -1; height: auto; min-height: 0; padding: 12px; }
  #left .inside > *:not(.mod_navigation) { display: none; }
  #left .inside .mod_navigation { margin: 0 0 12px; }
  #main .inside { padding: 16px; }
  #main figure { margin: 10px 0; }
  #main iframe, #main video { max-width: 100%; height: auto; }
  #main table { display: block; overflow-x: auto; }
  .content-gallery > ul { gap: 8px; }

  .nav-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid rgba(51, 51, 51, .15); background: #fff8d6; color: var(--gsw-text); font: 600 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-align: left; cursor: pointer; }
  .nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 22px; height: 2px; border-radius: 1px; background: var(--gsw-text); transition: transform .2s, background-color .2s; }
  .nav-toggle-icon { position: relative; }
  .nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-icon::before { top: -7px; }
  .nav-toggle-icon::after { top: 7px; }
  .nav-open .nav-toggle-icon { background: transparent; }
  .nav-open .nav-toggle-icon::before { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle-icon::after { transform: translateY(-7px) rotate(-45deg); }
  .has-nav-toggle body:not(.nav-open) #left { display: none; }
}

/* Druck: nur der Inhalt, Schulname als Kopfzeile, schwarz auf weiss */
@media print {
  @page { margin: 15mm 15mm 18mm; }

  #header, #left, .nav-toggle, .back, video, .video_container, .content-player, .widget:not(.widget-explanation) { display: none !important; }

  html, body, #top, #wrapper, #container { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  body { min-width: 0; font-size: 10.5pt; line-height: 1.45; }
  #wrapper { width: auto !important; margin: 0; border-radius: 0; overflow: visible; }
  #container { padding-left: 0 !important; }
  #main { float: none; width: auto; }
  #main .inside { padding: 0; }
  #main a, #main h1, #main td { color: #000 !important; }
  #main a { text-decoration: none; }

  #wrapper::before {
    content: "Ganztagsgrundschule Wallhalben";
    display: block; margin-bottom: 8mm; padding-bottom: 2mm; border-bottom: 1px solid #000;
    font: bold 12pt system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .05em;
  }

  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  img, figure, table, li { break-inside: avoid; page-break-inside: avoid; }
  #main figure { margin: 3mm 0; }
  #main figure img { border-radius: 0; max-width: 100%; height: auto; }

  /* Galerien kompakt in drei Spalten */
  .content-gallery > ul, .content-gallery--cols-4 > ul { grid-template-columns: repeat(3, 1fr); gap: 4mm; }
  .content-gallery img { max-height: 55mm; width: auto; }
  .content-download a::before { display: none; }

  /* etwas kompakter, damit typische Seiten (Personal, Speiseplan) auf ein Blatt passen */
  #main td { padding-top: 1px; padding-bottom: 1px; }
  #main .rte img { max-height: 35mm; width: auto; }
  #main .mod_article > :last-child, #main .rte > :last-child { margin-bottom: 0; }
}