/* Sonnenstrahl refresh – purposefully buildless; no third-party fonts/assets. */
:root {
    --sun-ink: #19364a;
    --sun-accent: #d94a5d;
    --sun-mist: #f8faf8;
    --sun-line: rgba(34, 64, 78, .12);
    --sun-shadow: 0 16px 48px rgba(27, 53, 71, .075);
}

html { scroll-padding-top: 5.5rem; }
body { color: var(--sun-ink); background: #fffdf8; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, #galwrap:focus-visible {
    outline: 3px solid #0284c7;
    outline-offset: 4px;
}
.skip-link {
    position: fixed; z-index: 200; top: -5rem; left: 1rem;
    padding: .75rem 1rem; border-radius: .8rem;
    background: #fff; color: var(--sun-ink); font-weight: 700;
    box-shadow: var(--sun-shadow);
}
.skip-link:focus { top: .75rem; }

.site-header {
    background: rgba(255, 253, 248, .94);
    border-color: var(--sun-line);
    box-shadow: 0 5px 20px rgba(33, 57, 69, .04);
}
.site-header .brand-link { color: #18354a; }
.site-header .brand-link > div:first-child { transform: rotate(-7deg); background: #ffe299; }
.site-header nav a:not(.bg-rose-600) {
    color: #34516a; transition: color .18s ease;
}
.site-header nav a:not(.bg-rose-600):hover { color: #ba3b50; }
.site-header nav a.bg-rose-600 { background: #cc4055; }
#mobileMenu { padding-top: .6rem; border-top: 1px solid var(--sun-line); }
#mobileMenu a { padding: .65rem .6rem; border-radius: .7rem; }
#mobileMenu a:hover { background: #fff2e7; }

.hero-section { min-height: 680px; isolation: isolate; }
.hero-section > img { filter: brightness(.8) saturate(.92); }
.hero-section > div:nth-child(2) > div:first-child {
    background: linear-gradient(90deg, rgba(9, 30, 42, .44), rgba(9, 30, 42, .05));
}
.hero-glass {
    background: rgba(15, 44, 58, .73);
    box-shadow: 0 25px 70px rgba(4, 20, 30, .2);
    border: 1px solid rgba(255, 255, 255, .25);
    max-width: 43rem;
}
.hero-eyebrow {
    font-size: .73rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 800;
    color: #ffdb91;
    margin-bottom: 1rem;
}
.hero-glass h1 { letter-spacing: -.045em; line-height: 1.08; }
.hero-glass h1 span { background: #ffdc7b; box-decoration-break: clone; }
.hero-glass a { font-weight: 700; }
.hero-glass a.bg-rose-600 { background: var(--sun-accent); }
.hero-scroll { letter-spacing: .06em; }

section[id]:not(#home) { scroll-margin-top: 4.5rem; }
section:not(.hero-section) h2 {
    color: #15374a; letter-spacing: -.035em; line-height: 1.15;
}
section:not(.hero-section) h2 + p { font-size: 1.05rem; line-height: 1.65; }
#angebote { background: #fffdf8; }
#paedagogik { background: #eaf4f3; }
#alltag { background: #fcf2e5; }
#einblicke { background: #f1f6fd; }
#faq { background: #edf5ed; }
#termine { background: #fff0ec; }
#infos { background: #fff7df; }

#angebote .mt-10.grid > div,
#paedagogik .rounded-3xl.bg-white,
#faq aside,
#termine article,
#termine aside,
#infos .rounded-3xl.bg-white,
#faq details {
    border: 1px solid var(--sun-line);
    box-shadow: var(--sun-shadow);
}
#angebote .mt-10.grid > div {
    padding: 1.75rem;
    border-radius: 1.5rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
#angebote .mt-10.grid > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 55px rgba(27, 53, 71, .12);
}
#angebote .mt-10.grid > div > div:first-child { border-radius: 1.1rem; }
#angebote .mt-10.grid h3 { color: #213b4b; margin-top: .2rem; }
#angebote .mt-10.grid p { line-height: 1.65; }
#paedagogik dl > div { border-radius: 1rem; padding: 1.25rem; }
#alltag ol { border-color: #f3c9b8; }
#alltag li { padding-left: .3rem; }
#alltag li h3 { color: #23445a; font-size: 1.05rem; }
#alltag li p { margin-top: .4rem; line-height: 1.7; }

#galwrap { scroll-snap-type: x mandatory; scrollbar-width: thin; padding: .45rem .2rem 1.5rem; }
#gal > div { width: min(80vw, 24rem); aspect-ratio: 4 / 3; scroll-snap-align: start; border-radius: 1.4rem; }
#gal img { transition: transform .35s ease; }
#gal > div:hover img { transform: scale(1.035); }
.gallery-button { width: 3rem; height: 3rem; background: #fff; font-weight: 700; font-size: 1.25rem; }
.gallery-button:hover { background: #f7e9d7; }

#faq details { padding: 1.2rem 1.4rem; background: #fff; }
#faq summary { list-style: none; gap: 1rem; }
#faq summary::-webkit-details-marker { display: none; }
#faq details[open] { border-color: rgba(11, 113, 103, .28); }
#faq details > div { line-height: 1.7; }
#faq aside a { transition: background .18s ease, border-color .18s ease; }
#faq aside a:hover { border-color: #7bd3b2; background: #f1fbf5; }
#termine ul { display: grid; gap: .85rem; }
#termine li { flex-wrap: wrap; padding-bottom: .65rem; border-bottom: 1px solid #edf0ed; }
#termine li:last-child { border-bottom: 0; }
#termine li > span:first-child { color: #2c5868; font-weight: 700; }

.map-card { overflow: hidden; }
.map-shell { position: relative; height: 320px; border-radius: 1.15rem; overflow: hidden; background: #e7f1eb; }
.map-placeholder, #map { width: 100%; height: 100%; }
.map-placeholder {
    display: grid; place-items: center; padding: 1.5rem;
    background:
      radial-gradient(circle at 80% 12%, rgba(255, 217, 128, .62) 0 12%, transparent 35%),
      linear-gradient(125deg, #d9eee9, #eff8f4 52%, #f5efdf);
    text-align: center;
}
.map-placeholder::after {
    content: ''; position: absolute; inset: 0; opacity: .2; pointer-events: none;
    background: repeating-linear-gradient(45deg, transparent 0 34px, #85afa6 35px, transparent 37px);
}
.map-placeholder-content { z-index: 1; max-width: 25rem; display: grid; justify-items: center; gap: .6rem; }
.map-symbol { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: white; color: #aa4350; font-size: 2.4rem; box-shadow: var(--sun-shadow); }
.map-placeholder-content strong { font-size: 1.15rem; color: #183c4f; }
.map-placeholder-content p { font-size: .88rem; color: #3c5964; line-height: 1.45; }
.map-placeholder-content small { color: #526c75; font-size: .73rem; line-height: 1.4; }
.map-load-button {
    margin: .25rem 0; background: #234b58; color: #fff;
    border-radius: 999px; padding: .75rem 1.35rem; font-size: .87rem; font-weight: 800;
    box-shadow: 0 8px 20px rgba(21, 55, 74, .16);
}
.map-load-button:hover { background: #173947; }
#map { background: #e5e9e4; }
#map[hidden], #mapPlaceholder[hidden], #mapError[hidden] { display: none !important; }
.map-error { margin-top: .8rem; padding: .8rem 1rem; font-size: .82rem; border-radius: .7rem; color: #7f2a34; background: #fff0ef; }
.map-external-link { display: inline-block; margin-top: 1rem; font-weight: 750; font-size: .88rem; color: #ad3851; text-decoration: underline; text-underline-offset: 3px; }
.map-external-link:hover { color: #7b1e33; }
.leaflet-container { font-family: inherit; }

footer { background: #fdfdfb; }
footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wrap { max-width: 72rem; }
.card { box-shadow: var(--sun-shadow); }

@media (max-width: 640px) {
    .site-header .brand-link span { font-size: 1rem; }
    .hero-section { min-height: 610px; }
    .hero-section > img { object-position: 54% center; }
    .hero-section > .relative { align-items: center; padding-bottom: 3rem; }
    .hero-glass { padding: 1.5rem; }
    .hero-glass h1 { font-size: clamp(2.45rem, 9vw, 3.7rem); }
    .hero-eyebrow { font-size: .63rem; letter-spacing: .1em; }
    .hero-scroll { display: none; }
    #infos dl { grid-template-columns: 1fr; }
    .map-shell { height: 310px; }
    .map-placeholder { padding: 1rem; }
    .map-placeholder-content { gap: .45rem; }
    #faq aside a { flex-wrap: wrap; gap: .3rem; }
    #faq aside a > span:first-child { white-space: normal; overflow-wrap: anywhere; }
    #faq aside a > span:last-child { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}