:root{--teal:#009b8d;--news:#1b839b;--date:#5bcdd8;--grau:#f8f8f8;--text:#4a4a4a;--r:3px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"PT Sans","Segoe UI",Arial,sans-serif;color:var(--text);line-height:1.6;background:#fff;font-size:15px}
img{max-width:100%;display:block}
a{color:var(--teal)}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px}
section{padding:70px 0;text-align:center}
section.alt{background:var(--grau)}
h2{font-weight:400;font-size:2rem;color:#555;margin:0 0 1.2em}
h3{font-weight:400;font-size:1.6rem;color:#555;margin:0 0 .6em}

/* Header */
header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.bar{display:flex;align-items:center;justify-content:space-between;height:56px;max-width:1020px}
.logo img{height:56px;width:auto}
nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
nav li{position:relative}
nav a{text-decoration:none;color:#555;display:block;padding:8px 14px;font-size:.78rem;text-transform:uppercase;letter-spacing:.02em}
nav>ul>li>a:hover,nav>ul>li:focus-within>a,nav>ul>li.active>a{color:var(--teal)}
nav ul ul{display:none;position:absolute;left:0;top:100%;min-width:220px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.15);padding:6px 0;list-style:none;margin:0}
nav li:hover>ul,nav li:focus-within>ul,nav li.open>ul{display:block}
nav ul ul a{text-transform:none;font-size:.9rem;padding:7px 18px}
nav ul ul a:hover{background:var(--grau);color:var(--teal)}
nav ul ul .sub{font-weight:700;font-size:.8rem;color:#888;padding:8px 18px 2px}
.toggle{display:none;background:none;border:1px solid #bbb;padding:6px 12px;font:inherit;cursor:pointer;color:#555}

/* Hero (Bild hier einsetzen: --hero-bild) */
.hero{
  --hero-bild:none;
  color:#fff;text-align:center;padding:120px 0;min-height:400px;display:flex;align-items:center;
  background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),var(--hero-bild),
    radial-gradient(circle at 20% 90%,#e0457b 0,transparent 22%),
    radial-gradient(circle at 55% 95%,#9ad13c 0,transparent 20%),
    radial-gradient(circle at 80% 85%,#3b7ddd 0,transparent 20%),
    radial-gradient(circle at 5% 50%,#c4682a 0,transparent 25%),
    #0a0a10;
  background-size:cover;background-position:center}
.hero .wrap{width:100%}
.hero h1{font-weight:400;font-size:clamp(1.9rem,3.4vw,2.8rem);margin:0 0 .2em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.hero p{margin:0;font-size:1.4rem;font-weight:400;text-shadow:0 2px 8px rgba(0,0,0,.7)}

/* News */
#aktuelles{text-align:left;padding-bottom:40px}
#aktuelles h2{font-size:2rem}
.news{display:flex;flex-direction:column;gap:1px}
.news a{display:flex;text-decoration:none;color:#fff;background:var(--news)}
.news a:hover{filter:brightness(1.08)}
.date{flex:0 0 112px;background:var(--date);text-align:center;padding:14px 0;line-height:1.1}
.date b{display:block;font-size:2rem;font-weight:400}
.date small{font-size:.7rem;text-transform:uppercase;font-weight:700}
.news .txt{padding:14px 20px;display:flex;flex-direction:column;justify-content:center}
.news h3{font-size:1.1rem;font-weight:700;color:#fff;margin:0 0 .2em}
.news p{margin:0;font-size:.8rem}
.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;padding:5px 14px;border-radius:var(--r);font-size:.78rem;font-weight:700}
.btn:hover,.btn:focus-visible{filter:brightness(1.12)}
.btn.news-more{background:var(--date);margin-top:60px}

/* Standorte */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.card{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.12);display:flex;flex-direction:column}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card div{padding:14px 12px 14px}
.card h4{font-weight:400;font-size:1rem;margin:0 0 .4em;color:#333}
.card p{margin:0 0 10px;font-size:.8rem}

/* Mittagstisch */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split p{font-size:.8rem;margin:0 0 2.6em}
.split img{border-radius:50%/40%;width:100%;aspect-ratio:3/2;object-fit:cover}

/* Team */
.person img{width:100%;max-width:220px;aspect-ratio:5/6;object-fit:cover;border-radius:50%;margin:0 auto 14px}
.person h4{font-weight:400;font-size:1rem;margin:0 0 1.4em;color:#222}
.person p{margin:0 0 .8em;font-size:.8rem}
.icons{display:flex;gap:14px;justify-content:center}
.icons a{color:#6f8a8a;text-decoration:none;display:inline-flex;line-height:0;padding:10px;border-radius:50%;background:rgba(0,0,0,.03);transition:background .15s,color .15s}
.icons a:hover{background:rgba(0,155,141,.12)}
.icons a:hover{color:var(--teal)}

/* Footer */
.foot{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:40px 0;text-align:left}
.foot img{max-width:260px;margin:0 auto}
.adresse{background:var(--grau);padding:24px 28px;font-size:.78rem}
.adresse h3{font-size:1.2rem;border-bottom:1px solid #6dd0c8;padding-bottom:10px;border-left:6px solid var(--teal);padding-left:10px;margin-bottom:1.2em}
.adresse table{border-collapse:collapse}
.adresse td{padding:3px 20px 10px 0;vertical-align:top}
.unten{background:var(--grau);text-align:center;font-size:.72rem;padding:28px 0 40px}
.unten a{color:#666;text-decoration:none}
.unten p{margin:0 0 20px}

.top{position:fixed;right:10px;bottom:20px;width:26px;height:26px;background:var(--teal);color:#fff;text-decoration:none;text-align:center;line-height:26px;border-radius:2px;font-weight:700}
:focus-visible{outline:3px solid var(--date);outline-offset:2px}

@media(max-width:900px){
  .toggle{display:block}
  nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 8px 16px rgba(0,0,0,.15);max-height:80vh;overflow:auto}
  nav.show{display:block}
  nav>ul{flex-direction:column;padding:10px 20px}
  nav ul ul{position:static;display:none;box-shadow:none;padding-left:12px}
  nav li:hover>ul{display:none}
  nav li.open>ul{display:block}
  .split,.foot{grid-template-columns:1fr}
  .date{flex-basis:80px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Unterseiten */
.subhero{background:linear-gradient(135deg,#0a3a47,var(--news));color:#fff;padding:48px 0;text-align:center}
.subhero h1{font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);margin:0;color:#fff}
section.content{text-align:left;padding:30px 0 70px}
.crumbs{font-size:.78rem;color:#888;margin-bottom:30px}
.crumbs a{color:var(--teal);text-decoration:none}
.stub{background:var(--grau);border-left:5px solid var(--date);padding:20px 24px;max-width:640px}
.stub p{margin:0 0 .6em}
.content .grid3{text-align:center}
.hinweis{font-size:.78rem;color:#888;margin-top:20px}

/* Unterseiten (Bild-Hero, Titelbox, Bild-Footer) */
.t-gruen{--fb:linear-gradient(160deg,#b8d86a,#5fa21e 55%,#8cc63f)}
.t-kirche{--fb:radial-gradient(circle at 30% 40%,#3a52d6,transparent 25%),radial-gradient(circle at 70% 60%,#c2412d,transparent 25%),#14101c}
.t-zahn{--fb:linear-gradient(160deg,#2a2a8a,#3a6fd8 70%,#59c4e8)}
.t-quality{--fb:linear-gradient(90deg,#1f78c1,#d43380,#f05a28,#9ad4e4,#f0c4b8,#8bb04a,#f7cf50)}
.t-frage{--fb:radial-gradient(circle at 70% 30%,#12b7ff,transparent 22%),#2a2a2a}
.t-haende{--fb:linear-gradient(120deg,#f2b48c,#e8896a 40%,#f7d94a 60%,#e8453c)}
.t-stifte,.t-stifte2{--fb:linear-gradient(120deg,#3aa6d8,#7a50c8 35%,#e0338a 65%,#d62839)}
.t-notizen{--fb:linear-gradient(120deg,#a259e6,#f0557d 35%,#9ff04a 55%,#4fc3f7 75%,#d98fa4)}
.t-kreide{--fb:radial-gradient(circle at 20% 90%,#e0457b,transparent 22%),radial-gradient(circle at 55% 95%,#9ad13c,transparent 20%),radial-gradient(circle at 80% 85%,#3b7ddd,transparent 20%),#0a0a10}
.pagehero,.pagefoot{--bild:none;background:var(--bild),var(--fb,#555);background-size:cover;background-position:center}
.pagehero{padding:100px 0 90px}
.titlebox{background:rgba(255,255,255,.82);padding:44px 20px;text-align:center}
.titlebox h1{margin:0;font-weight:400;font-size:clamp(1.6rem,3.2vw,2.6rem);color:#555}
.wrap.narrow{max-width:900px}
section.content{padding:70px 0 90px;line-height:1.55;font-size:1rem}
.content h2{text-align:left;font-size:1.5rem;margin:1em 0 .8em}
.content h2.cyan{color:#27c0ee;font-weight:700}
.content h2.grau{color:#555}
.content h4{font-size:1rem;margin:1.2em 0 .4em;color:#111}
.content h4.blau,.content a.blau{color:#5b8fe0}
.content h5{font-size:1rem;margin:1em 0 .2em 24px;color:#555}
.content p{margin:0 0 1em}
.content a{color:#5b8fe0;text-decoration:none}
.content a:hover{text-decoration:underline}
.content ul{margin:0 0 1em;padding-left:24px}
.content ul.plain a{color:inherit}
.content li{margin:.15em 0}
.eintrag{border-bottom:1px solid #eee;padding:0 0 .6em;margin-bottom:1em}
.lehr{width:100%;border-collapse:collapse;max-width:720px;margin:0 auto;font-size:.95rem}
.lehr th{text-align:left;padding:8px 0;border-bottom:3px solid #e6e6e6}
.lehr td{padding:7px 0;border-bottom:1px solid #eee}
.lehr td:first-child{width:38%}
.pagefoot{padding:50px 0}
.adrbox{background:rgba(255,255,255,.82);padding:28px 32px;max-width:600px;color:#444}
.adrbox h3{font-size:1.2rem;font-weight:700;margin:0 0 .8em;color:#555}
.adrbox .adr{font-size:1.3rem;margin:0 0 .8em;line-height:1.3}
.adrbox table{font-size:.85rem;border-collapse:collapse}
.adrbox td{padding:3px 14px 3px 0}
.subfoot .unten{margin-top:0}

/* Organisation: Hero ohne Titelbox, Kontaktblöcke */
.t-smiley{--fb:radial-gradient(circle at 25% 60%,#e6e32a,transparent 30%),radial-gradient(circle at 70% 55%,#d9d62a,transparent 30%),#b5c0c8}
.pagehero.plain{padding:150px 0 130px;text-align:center;color:#fff}
.pagehero.plain h1{margin:0 0 .2em;font-weight:400;font-size:clamp(1.9rem,3.4vw,2.8rem);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.pagehero.plain p{margin:0;font-size:1.4rem;font-weight:400;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.kontakte{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:40px;margin-top:60px}
.kontakt{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:start}
.kontakt.nofoto{grid-template-columns:1fr}
.kontakt img{width:100%;aspect-ratio:5/6;object-fit:cover}
.kontakt .name{font-size:1.1rem;margin-bottom:1.6em}
.kontakt .klein{font-size:.85rem}
.adrbox .note{padding-top:12px;font-size:.85rem}
.adrbox small{font-size:.75rem;line-height:1.5;display:block;margin-top:8px}
@media(max-width:600px){.kontakt{grid-template-columns:1fr}}

/* News-Artikel und Impressum */
.artbild{max-width:100%;height:auto;margin:0 0 1.4em;border-radius:3px}
.content h3{font-size:1.25rem;font-weight:700;color:#444;margin:1.4em 0 .5em;text-align:left}
.content .klein{font-size:.85rem;color:#777}
.content .gross{font-size:2.4rem;font-weight:700;color:#333;margin:.2em 0}
.news .date b{font-size:2rem}
section.impressum{text-align:center;padding:70px 0 80px}
section.impressum h2{text-align:center;font-weight:400;font-size:2rem;color:#555;margin:1.6em 0 .8em}
section.impressum p{font-size:1rem;line-height:1.7;margin:0 0 .8em}
section.impressum a{color:#5b8fe0;text-decoration:none}

/* Bilder für Hero (Titelbild) und Footer */
.hero{--hero-bild:url("images/startbild.jpg")}
.t-kreide .pagehero,.t-kreide .pagefoot{--bild:url("images/startbild.jpg")}
.t-gruen .pagehero,.t-gruen .pagefoot{--bild:url("images/vereine-gras.jpg")}
.t-kirche .pagehero,.t-kirche .pagefoot{--bild:url("images/religion-buntglas.jpg")}
.t-zahn .pagehero,.t-zahn .pagefoot{--bild:url("images/zahnbuerste.jpg")}
.t-quality .pagehero,.t-quality .pagefoot{--bild:url("images/qualitaet.jpg")}
.t-frage .pagehero,.t-frage .pagefoot{--bild:url("images/informationen.jpg")}
.t-haende .pagehero,.t-haende .pagefoot{--bild:url("images/beratung-haende.jpg")}
.t-stifte .pagehero,.t-stifte .pagefoot{--bild:url("images/buntstifte.jpg")}
.t-stifte2 .pagehero,.t-stifte2 .pagefoot{--bild:url("images/stifte-tuerkis.jpg")}
.t-notizen .pagehero,.t-notizen .pagefoot{--bild:url("images/notizen.jpg")}
.t-smiley .pagehero,.t-smiley .pagefoot{--bild:url("images/smiley.jpg")}
.t-lernen .pagehero,.t-lernen .pagefoot{--bild:url("images/lernen.jpg")}
.t-herbst .pagehero,.t-herbst .pagefoot{--bild:url("images/tagesstrukturen.jpg")}
.t-lernen,.t-herbst{--fb:#8a7a6a}
.pagefoot{background-position:center 75%}
.mit-bild{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
.mit-bild .rund{width:100%;max-width:340px;border-radius:50%;margin:30px auto 0}
@media(max-width:700px){.mit-bild{grid-template-columns:1fr}}

/* Kinderzeichnungen */
.mit-bild .maennli{align-self:center;justify-self:center;max-height:380px;width:auto;max-width:100%}
.maennli-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:end;justify-items:center;margin-top:70px}
.maennli-reihe img{max-height:300px;width:auto;max-width:100%}
@media(max-width:600px){.maennli-reihe{grid-template-columns:1fr}}

/* Team-Fotos der Lehrpersonen */
.content .teamfoto{display:block;width:100%;height:auto;margin:0 auto 60px}
@media(min-width:1000px){.content .teamfoto{width:1020px;max-width:none;margin-left:calc(50% - 510px)}}
.content span.blau{color:#5b8fe0}

/* News-Zeilen auf Unterseiten wie auf der Startseite */
.content .news a{color:#fff;text-decoration:none}
.content .news a:hover{text-decoration:none;filter:brightness(1.08)}
.content .news h3{font-size:1.1rem;font-weight:700;color:#fff;margin:0 0 .2em;text-align:left}
.content .news p{margin:0;font-size:.8rem;color:#fff}
@media(min-width:1000px){.content .news{width:980px;margin-left:calc(50% - 490px)}}
.lehr td:first-child a{color:#1b839b;text-decoration:none}
.lehr td:first-child a:hover{text-decoration:underline}

/* Mega-Menü «Angebote / Links» (wie Originalseite): 4 Spalten, volle Breite */
nav li.mega .grp>ul{display:block;position:static;box-shadow:none;padding:0;margin:0;min-width:0;list-style:none}
nav li.mega .grp .sub{display:block;font-weight:700;font-size:1rem;text-transform:uppercase;color:#666;padding:6px 18px 4px;margin:0}
nav li.mega .grp ul a{font-size:1rem;color:#777;padding:7px 18px}
nav li.mega .grp ul a:hover{background:none;color:var(--teal)}
@media(min-width:901px){
  nav li.mega{position:static}
  nav li.mega>ul{left:0;right:0;top:100%;min-width:0;border-top:4px solid #8fd6cd;box-shadow:0 8px 18px rgba(0,0,0,.12);padding:30px max(24px,calc(50% - 510px)) 26px;grid-template-columns:repeat(4,1fr);gap:20px}
  nav li.mega>ul::before{content:"";position:absolute;left:0;right:0;top:-30px;height:30px}
  nav li.mega:hover>ul,nav li.mega:focus-within>ul,nav li.mega.open>ul{display:grid}
}
@media(max-width:900px){nav li.mega .grp{margin-bottom:8px}}

/* Standort-Beschreibungsseiten */
.mit-bild.standort{align-items:start;grid-template-columns:2fr 1fr;gap:50px;text-align:left}
.mit-bild.standort p{font-size:1.15rem;line-height:1.55;margin:0 0 1em}
.mit-bild.standort img.maennli{width:100%;max-width:none;height:auto;max-height:none;object-fit:contain;align-self:center}
@media(max-width:700px){.mit-bild.standort{grid-template-columns:1fr}.mit-bild.standort img.maennli{width:auto;max-width:100%;max-height:380px;margin:0 auto}}
.galerie{padding:50px 0;background:#fff}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal-grid a{display:block;aspect-ratio:4/3;overflow:hidden;background:#eee}
.gal-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.gal-grid a:hover img{transform:scale(1.04)}
@media(max-width:900px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.gal-grid{grid-template-columns:1fr}}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.lightbox img{max-width:94vw;max-height:92vh}
.t-schulhaus-boezen .pagehero,.t-schulhaus-boezen .pagefoot{--bild:url("images/schulhaus-boezen-gross.jpg")}
.t-schulhaus-effingen .pagehero,.t-schulhaus-effingen .pagefoot{--bild:url("images/schulhaus-effingen-gross.jpg")}
.t-schulhaus-hornussen .pagehero,.t-schulhaus-hornussen .pagefoot{--bild:url("images/schulhaus-hornussen-gross.jpg")}
.kontakt .klein{white-space:nowrap}
.kontakte{grid-template-columns:auto auto;justify-content:space-between}
@media(max-width:1100px){.kontakte{grid-template-columns:1fr}}

/* Responsive-Feinschliff */
.adrbox td:first-child{padding-right:12px}
@media(max-width:600px){
  .kontakt img{max-width:200px}
  .adrbox{padding:22px 20px}
  .adrbox td{padding-right:8px}
  .adresse{padding:20px}
}
@media(min-width:1000px) and (max-width:1060px){.content .teamfoto{width:100%;margin-left:0}}
@media(max-width:400px){.kontakt .klein{white-space:normal}}
@media(max-width:340px){.adresse{padding:16px}.adresse td{padding-right:8px}.adrbox{padding:18px 14px}}
@media(max-width:400px){h2,section.impressum h2{font-size:1.7rem;overflow-wrap:break-word}}


.karte{background:#fff;padding:0 0 40px}
.karte iframe{display:block;width:100%;height:420px;border:0;background:#eee}
@media(max-width:600px){.karte iframe{height:320px}}