/* ========================================================================== Smile Akademie — Designsystem CI-Werte stehen alle in :root. Sobald Logo und Live-Screenshot vorliegen, werden nur diese Variablen getauscht — der Rest bleibt unverändert. ========================================================================== */ :root{ /* --- Markenfarben, ausgelesen aus dem Sommerschule-Plakat 2026 --- */ --brand: #056065; /* Petrol, Hausfarbe */ --brand-dark: #03474b; /* dunkler, für Hover und Textlinks */ --brand-mid: #49b3b4; /* helles Türkis, Zweitfarbe */ --brand-light: #e4f1f1; /* sehr helle Fläche */ --accent: #e6c542; /* Gelb, Sonne und Auszeichnungen */ --accent-dark: #b89613; /* Gelb für Text auf Weiß, kontraststark */ /* --- Neutrale Töne --- */ --ink: #1c2426; --ink-2: #4a5457; --ink-3: #78827f; --line: #e2e6e6; --bg: #ffffff; --bg-soft: #f0efed; /* warmes Cremeweiß aus der CI */ /* --- Maße --- */ --wrap: 1120px; --radius: 12px; --gap: clamp(1.5rem, 4vw, 3rem); --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; } *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100% } body{ margin:0; font-family:var(--font); font-size:clamp(16px, 1rem + .15vw, 17.5px); line-height:1.65; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto; display:block } a{ color:var(--brand-dark) } a:hover{ color:var(--brand) } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem) } .skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--brand); color:#fff; padding:.75rem 1.25rem; } .skip:focus{ left:0 } /* ------------------------------- Kopfbereich ----------------------------- Animierter Kopf (AB#936). Aufbau: .sc-head klebt oben, traegt Hoehe und Container-Kontext .sc-head__clip beschneidet die Grafik (Band, Glanz, Sternchen) .sc-head__inner Marke links, Navigation rechts .sc-mobile Burger-Panel, faehrt unter dem Kopf auf Der Ablauf der Einblendung steckt in CSS-Animationen. Die Startzeitpunkte kommen als --d-*-Variablen aus site.json; build.py schreibt sie in das style-Attribut des
. Nur das Band wird pro Bild gerechnet, das macht /sc-header.js. WICHTIG — warum der Startzustand nicht in der Grundregel steht: Alles ist von Haus aus SICHTBAR. Den unsichtbaren Startzustand schaltet erst die Klasse .sc-intro auf ein, die ein kurzes Skript im setzt — und zwar nur beim ersten Aufruf je Browsersitzung und nur ohne "Bewegung reduzieren". Ohne JavaScript wird sie nie gesetzt: dann steht der Kopf sofort fertig da, statt unsichtbar zu bleiben. .sc-force-motion ist der Gegenschalter fuer eine spaetere Editor-Vorschau und wird auf der Website NIE gesetzt. */ .sc-head{ /* Hoehe. Signet, Trennstrich, Wortmarke und Slogan haengen ueber calc() daran und wachsen mit. Die Navigation NICHT — deren Polsterung steht unten in festen Pixeln und muss bei einer Aenderung hier von Hand nachgezogen werden (Andreas 15.08.2026: 88px statt 104px). */ --sc-head-h:88px; --sc-gutter:34px; /* Voreinstellungen der Einblendung. build.py ueberschreibt sie aus site.json ("headerAnimation") im style-Attribut des Elements. */ --sc-tempo:.80; --sc-tip-angle:-9deg; --sc-tip-origin:86% 88%; --sc-tip-shift:-3%; --d-bg:0s; --d-sym:.30s; --d-hat:.62s; --d-rule:1.16s; --d-mark:1.58s; --d-slogan:2.02s; --d-nav:1.08s; --d-shine:1.76s; --d-tip:1.64s; --d-sp1:1.20s; --d-sp2:1.42s; --d-sp3:1.64s; --d-sp4:1.86s; --d-sp5:2.08s; --d-sp6:2.30s; position:sticky; top:0; z-index:50; height:var(--sc-head-h); container-type:inline-size; color:#fff; font:15px/1.2 var(--font); } /* Clip nur fuer die Grafik, damit die Ausklappmenues herausragen duerfen */ .sc-head__clip{ position:absolute; inset:0; overflow:hidden; isolation:isolate } .sc-head__bg{ position:absolute; inset:0; background:var(--brand) } .sc-head__band{ position:absolute; inset:0; width:100%; height:100%; display:block } .sc-head__shine{ position:absolute; inset:0; opacity:0; pointer-events:none; -webkit-mask-image:linear-gradient(100deg,transparent 44%,rgba(0,0,0,.45) 48%,#000 50%,rgba(0,0,0,.45) 52%,transparent 56%); mask-image:linear-gradient(100deg,transparent 44%,rgba(0,0,0,.45) 48%,#000 50%,rgba(0,0,0,.45) 52%,transparent 56%); -webkit-mask-size:230% 100%; mask-size:230% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:100% 0; mask-position:100% 0; } .sc-head__shine svg{ width:100%; height:100%; display:block } /* Sternchen — Position setzt /sc-header.js, sie reiten auf dem Band mit. Die Groesse ist je Marke einstellbar (--sc-spark-size, Vorgabe in site.json, AB#952). Das negative margin ist die HALBE Groesse: /sc-header.js setzt left/top auf den Bandpunkt, und erst diese Verschiebung legt die Mitte des Sternchens darauf. Deshalb muss es mitrechnen — sonst rutschte das Sternchen bei jeder anderen Groesse vom Band weg. */ .sc-spark{ position:absolute; width:var(--sc-spark-size, 24px); aspect-ratio:1; margin:calc(var(--sc-spark-size, 24px) / -2) 0 0 calc(var(--sc-spark-size, 24px) / -2); /* Schein waechst mit: 7px bei 24px Groesse. Fest verdrahtet wirkte er an einem kleinen Sternchen wie ein Klecks. Bei 24px unveraendert. */ filter:drop-shadow(0 0 calc(var(--sc-spark-size, 24px) * .2917) rgba(255,255,255,.5)); opacity:0; pointer-events:none; mix-blend-mode:screen; will-change:transform,opacity; } .sc-spark svg{ width:100%; height:100%; display:block } /* ---- Marke ------------------------------------------------------------- */ /* Der tuerkise Balken laeuft randlos ueber die volle Fensterbreite — sein INHALT sitzt aber im selben Raster wie der Text darunter (--wrap, siehe .wrap). Sonst stehen Signet und Anfrage-Knopf weiter aussen als die Textspalte, und die Kanten passen nicht zusammen (Andreas 2026-08-15). Bewusst nicht die Textspalte verbreitert: Sie ist auf Lesbarkeit ausgelegt, auf grossen Schirmen wuerden die Zeilen sonst unangenehm lang. Die Umbruchpunkte fuer Slogan und Burger haengen an der CONTAINERbreite von .sc-head, nicht am Fenster — sie bleiben davon unberuehrt. */ .sc-head__inner{ position:relative; z-index:2; height:100%; width:100%; max-width:var(--wrap); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 var(--sc-gutter); } .sc-brand{ display:flex; align-items:center; gap:18px; text-decoration:none; color:inherit; min-width:0 } /* Nur das Signet steht inline im HTML — die Einblendung spricht das S und den Hut getrennt an (#sc-s, #sc-hat). Wortmarke und Slogan werden als Ganzes eingeblendet und sind deshalb Bilder; sie liegen in einer weissen Fassung vor, weil fill="currentColor" bei nicht greift. */ .sc-brand__sym{ display:block; height:calc(var(--sc-head-h) * .58); flex:none } .sc-brand__sym svg{ height:100%; width:auto; display:block; color:#fff } .sc-brand__rule{ width:1px; height:calc(var(--sc-head-h) * .42); background:rgba(255,255,255,.42); flex:none } .sc-brand__mark{ display:block; height:calc(var(--sc-head-h) * .50); width:auto; flex:none } /* Höhe .1928 statt .145: Die Claim-Grafiken benutzen seit AB#944 ein festes 1-em-Fenster (viewBox-Höhe 50, Grundlinie bei 38) statt einer auf die Tinte beschnittenen Box. Das ist nötig, weil „Entdecke die Magie in dir." mit dem g eine Unterlänge hat und „Wo Lernen Freude macht." nicht — bei zwei auf die Tinte beschnittenen Boxen stellte dieselbe CSS-Höhe die beiden Claims unterschiedlich groß dar. Die Kehrseite: In der neuen Box füllt die Schrift nur 75,2 % der Höhe. Ohne diese Korrektur wäre der Claim der Akademie auf drei Viertel geschrumpft, ohne dass jemand am Design etwas ändern wollte. Nachgerechnet über das Breitenverhältnis beider Fassungen desselben Textes (2809/621): Mit .1928 ist der Claim bei 88 px Kopfhöhe exakt 210,7 px breit — auf den Zehntel derselbe Wert wie vorher. */ .sc-brand__slogan{ display:none; height:calc(var(--sc-head-h) * .1928); width:auto; margin-left:12px; padding-left:20px; border-left:1px solid rgba(255,255,255,.28); flex:none; opacity:.88; } @container (min-width:1180px){ .sc-brand__slogan{ display:block } } /* ---- Navigation -------------------------------------------------------- */ .sc-nav{ display:flex; align-items:center; gap:4px; flex:none } .sc-nav__item{ position:relative } /* Die Menuepunkte tragen dieselbe Pillenform wie der Anfrage-Knopf, nur als Umriss statt gefuellt (Andreas 2026-08-15). border-radius:999px statt 8px — derselbe Wert wie .sc-cta, damit die Formen zusammenpassen. Der Rahmen ist von Anfang an sichtbar (Andreas 2026-08-15) — die Punkte sollen auch im Ruhezustand als Pillen erkennbar sein. Deckkraft bewusst niedrig (.38): kraeftiger gezogen wuerden fuenf gleichwertige Umrisse mit dem gefuellten Anfrage-Knopf konkurrieren, der als einziger Handlungsaufruf hervorstechen soll. Bei Beruehrung zieht der Rahmen nach und die Fuellung kommt dazu. */ .sc-nav__link{ display:inline-flex; align-items:center; gap:6px; color:rgba(255,255,255,.94); text-decoration:none; /* Haengt bewusst NICHT an --sc-head-h: bei 88px Kopfhoehe baut die Zeile mit 8px sonst zu hoch. Wer die Hoehe aendert, zieht hier nach. */ padding:8px 14px; border-radius:999px; white-space:nowrap; border:1px solid rgba(255,255,255,.38); transition:background .16s, border-color .16s, color .16s; } .sc-nav__link:hover, .sc-nav__item:hover > .sc-nav__link{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.55); color:#fff; } /* Geoeffnet oder aktuelle Seite: halbdurchsichtig gefuellt, voller Rahmen und REIN WEISSE Schrift. Vorher wurde der aktive Punkt blasser statt kraeftiger — genau verkehrt herum. */ .sc-nav__link[aria-current="page"], .sc-nav__link[aria-expanded="true"], .sc-nav__item:hover > .sc-nav__link{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.85); color:#fff; } .sc-nav__link[aria-current="page"]{ font-weight:600 } .sc-nav__caret{ opacity:.75; font-size:.62em; transition:transform .18s, opacity .16s } /* Der Pfeil zieht beim aktiven Punkt mit auf volle Deckkraft — sonst bleibt ausgerechnet er blass, waehrend die Schrift daneben kraeftiger wird. */ .sc-nav__item:hover .sc-nav__caret{ transform:rotate(180deg); opacity:1 } .sc-nav__link[aria-expanded="true"] .sc-nav__caret{ opacity:1 } .sc-menu{ position:absolute; top:calc(100% + 6px); left:0; min-width:268px; background:#fff; color:var(--ink); border-radius:14px; box-shadow:0 18px 44px rgba(5,96,101,.22), 0 2px 6px rgba(5,96,101,.10); padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s, transform .18s, visibility .18s; z-index:30; } .sc-nav__item:hover .sc-menu, .sc-nav__item:focus-within .sc-menu{ opacity:1; visibility:visible; transform:none } .sc-menu a{ display:block; padding:9px 14px; border-radius:9px; color:var(--ink); text-decoration:none; font-size:14.5px; white-space:nowrap } .sc-menu a:hover{ background:var(--brand-light); color:var(--brand-dark) } .sc-cta{ margin-left:12px; background:#fff; color:var(--brand-dark); font-weight:600; text-decoration:none; padding:10px 24px; border-radius:999px; white-space:nowrap; transition:background .16s; } .sc-cta:hover{ background:var(--brand-light); color:var(--brand-dark) } .sc-burger{ display:none; flex:none; background:none; border:0; color:#fff; padding:10px; cursor:pointer } .sc-burger svg{ display:block } @container (max-width:1100px){ .sc-head{ font-size:14px } .sc-nav{ gap:1px } .sc-nav__link{ padding:7px 9px } .sc-cta{ margin-left:8px; padding:9px 18px } .sc-brand{ gap:14px } } @container (max-width:940px){ .sc-nav{ display:none } .sc-burger{ display:block } } @container (max-width:640px){ .sc-head{ --sc-gutter:16px } } /* ---- Burger-Panel ------------------------------------------------------ */ .sc-mobile{ position:absolute; top:100%; left:0; right:0; display:none; background:#fff; color:var(--ink); box-shadow:0 20px 46px rgba(5,96,101,.24); border-top:1px solid var(--line); max-height:calc(100vh - var(--sc-head-h)); overflow:auto; padding:8px 10px 16px; z-index:35; } .sc-head.is-menu-open .sc-mobile{ display:block } .sc-mobile details{ border-bottom:1px solid var(--line) } .sc-mobile summary{ list-style:none; cursor:pointer; padding:14px 12px; font-size:16px; font-weight:600; color:var(--brand-dark); display:flex; align-items:center; justify-content:space-between; } .sc-mobile summary::-webkit-details-marker{ display:none } .sc-mobile summary::after{ content:"▾"; font-size:.8em; opacity:.6; transition:transform .18s } .sc-mobile details[open] summary::after{ transform:rotate(180deg) } .sc-mobile details a{ display:block; padding:11px 12px 11px 24px; font-size:15px } .sc-mobile a{ color:var(--ink); text-decoration:none; border-radius:9px } .sc-mobile a:hover{ background:var(--brand-light); color:var(--brand-dark) } .sc-mobile__link{ display:block; padding:14px 12px; font-size:16px; font-weight:600; color:var(--brand-dark)!important; border-bottom:1px solid var(--line); } .sc-mobile__cta{ display:block; margin:16px 12px 4px; padding:14px; background:var(--brand); color:#fff!important; text-align:center; font-weight:600; border-radius:999px; } .sc-mobile__cta:hover{ background:var(--brand-dark); color:#fff!important } /* ---- Einblendung ------------------------------------------------------- */ /* Jeder Baustein hat seine eigene Klasse auf (AB#938): .sc-a-bg .sc-a-band .sc-a-sym .sc-a-hatin .sc-a-hattip .sc-a-rule .sc-a-mark .sc-a-slogan .sc-a-nav .sc-a-shine .sc-a-sparks Beim vollen Aufbau setzt das Skript im alle, beim Seitenwechsel nur die, die in der Redaktion angehakt sind. Entscheidend ist, dass auch der STARTZUSTAND (opacity:0) an der jeweiligen Bausteinklasse hängt und nicht mehr an .sc-intro. Sonst würde beim Seitenwechsel alles ausgeblendet und nur ein Teil wieder eingeblendet — der Kopf wäre kurz leer und der Rest poppte hinterher. Was nicht angehakt ist, steht dadurch von der ersten Bildschirmaktualisierung an fertig da. .sc-intro bleibt als Sammelklasse: Sie sagt „irgendetwas läuft gerade" und trägt den Endzustand (.is-done) sowie die Rücknahme bei reduzierter Bewegung. */ .sc-a-bg .sc-head__bg, .sc-a-band .sc-head__band, .sc-a-sym .sc-brand__sym, .sc-a-mark .sc-brand__mark, .sc-a-slogan .sc-brand__slogan, .sc-a-nav .sc-nav > *{ opacity:0 } .sc-a-rule .sc-brand__rule{ transform:scaleY(0); opacity:0 } #sc-hat{ transform-box:fill-box; transform-origin:var(--sc-tip-origin); will-change:transform } @keyframes sc-fade { from{opacity:0} to{opacity:1} } @keyframes sc-rule { from{transform:scaleY(0);opacity:0} to{transform:scaleY(1);opacity:1} } @keyframes sc-s-in { from{opacity:0;transform:scale(.86)} to{opacity:1;transform:none} } @keyframes sc-hat-in { from{opacity:0;transform:translateY(-34%) rotate(-11deg)} to{opacity:1;transform:none} } @keyframes sc-mark-in { from{opacity:0;filter:blur(9px);transform:scale(1.04)} to{opacity:1;filter:blur(0);transform:none} } @keyframes sc-slogan-in { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:none} } @keyframes sc-nav-in { from{opacity:0;transform:translateY(-7px)} to{opacity:1;transform:none} } @keyframes sc-shine{ 0% {opacity:0; -webkit-mask-position:100% 0; mask-position:100% 0} 22% {opacity:.8} 76% {opacity:.6} 100%{opacity:0; -webkit-mask-position:0% 0; mask-position:0% 0} } @keyframes sc-spark{ 0% {opacity:0; transform:scale(.15) rotate(-30deg)} 32% {opacity:1; transform:scale(1.1) rotate(0deg)} 58% {opacity:.85;transform:scale(.9) rotate(7deg)} 100%{opacity:0; transform:scale(.3) rotate(18deg)} } @keyframes sc-hat-tip{ 0% { transform:none } 26% { transform:translate(var(--sc-tip-shift), -13%) rotate(var(--sc-tip-angle)) } 58% { transform:translate(var(--sc-tip-shift), -13%) rotate(var(--sc-tip-angle)) } 100%{ transform:none } } /* Ablauf. Bewusst Einzeleigenschaften statt der animation-Kurzform: sollte ein Browser die Division durch --sc-tempo nicht rechnen, faellt nur die Zeit aus — die Einblendung selbst laeuft und endet im sichtbaren Zustand. Mit der Kurzform waere die ganze Regel ungueltig und der Kopf bliebe leer. */ .sc-a-bg .sc-head__bg, .sc-a-sym .sc-brand__sym, .sc-a-rule .sc-brand__rule, .sc-a-mark .sc-brand__mark, .sc-a-slogan .sc-brand__slogan, .sc-a-nav .sc-nav > *, .sc-a-shine .sc-head__shine, .sc-a-sparks .sc-spark, .sc-a-sym #sc-s{ animation-fill-mode:both } .sc-a-bg .sc-head__bg{ animation-name:sc-fade; animation-duration:calc(.70s / var(--sc-tempo)); animation-delay:calc(var(--d-bg) / var(--sc-tempo)); animation-timing-function:cubic-bezier(.4,0,.2,1); } .sc-a-sym .sc-brand__sym{ animation-name:sc-fade; animation-duration:.01s; animation-delay:calc(var(--d-sym) / var(--sc-tempo)); animation-timing-function:linear; } .sc-a-sym #sc-s{ animation-name:sc-s-in; animation-duration:calc(.80s / var(--sc-tempo)); animation-delay:calc(var(--d-sym) / var(--sc-tempo)); animation-timing-function:cubic-bezier(.22,.7,.3,1); } /* Hut: zwei Bewegungen, die frueher fest aneinanderhingen (ein Selektor mit zwei animation-names). Getrennt, weil beim Seitenwechsel meist NUR der Gruss gewuenscht ist — der Hut soll dann nicht noch einmal hereinfallen. Die dritte Regel ist noetig, weil CSS pro Selektor nur EINE animation-name-Liste kennt: Sind beide Klassen gesetzt, gaebe es sonst einen Gewinner statt beider Bewegungen. Zwei Klassen im Selektor haben die hoehere Spezifitaet und stechen die Einzelregeln. */ .sc-a-hatin #sc-hat{ animation-name:sc-hat-in; animation-duration:calc(.70s / var(--sc-tempo)); animation-delay:calc(var(--d-hat) / var(--sc-tempo)); animation-timing-function:cubic-bezier(.24,.9,.32,1); animation-fill-mode:both; } .sc-a-hattip #sc-hat{ animation-name:sc-hat-tip; animation-duration:calc(.95s / var(--sc-tempo)); animation-delay:calc(var(--d-tip) / var(--sc-tempo)); animation-timing-function:cubic-bezier(.35,0,.25,1); animation-fill-mode:both; } .sc-a-hatin.sc-a-hattip #sc-hat{ animation-name:sc-hat-in, sc-hat-tip; animation-duration:calc(.70s / var(--sc-tempo)), calc(.95s / var(--sc-tempo)); animation-delay:calc(var(--d-hat) / var(--sc-tempo)), calc(var(--d-tip) / var(--sc-tempo)); animation-timing-function:cubic-bezier(.24,.9,.32,1), cubic-bezier(.35,0,.25,1); animation-fill-mode:both, both; } .sc-a-rule .sc-brand__rule{ animation-name:sc-rule; animation-duration:calc(.45s / var(--sc-tempo)); animation-delay:calc(var(--d-rule) / var(--sc-tempo)); animation-timing-function:cubic-bezier(.3,.8,.3,1); } .sc-a-mark .sc-brand__mark{ animation-name:sc-mark-in; animation-duration:calc(.80s / var(--sc-tempo)); animation-delay:calc(var(--d-mark) / var(--sc-tempo)); animation-timing-function:cubic-bezier(.22,.61,.36,1); } .sc-a-slogan .sc-brand__slogan{ animation-name:sc-slogan-in; animation-duration:calc(.70s / var(--sc-tempo)); animation-delay:calc(var(--d-slogan) / var(--sc-tempo)); animation-timing-function:cubic-bezier(.22,.7,.3,1); } .sc-a-nav .sc-nav > *{ animation-name:sc-nav-in; animation-duration:calc(.55s / var(--sc-tempo)); animation-timing-function:cubic-bezier(.22,.7,.3,1); animation-delay:calc(var(--d-nav) / var(--sc-tempo)); } .sc-a-nav .sc-nav > :nth-child(2){ animation-delay:calc((var(--d-nav) + .08s) / var(--sc-tempo)) } .sc-a-nav .sc-nav > :nth-child(3){ animation-delay:calc((var(--d-nav) + .16s) / var(--sc-tempo)) } .sc-a-nav .sc-nav > :nth-child(4){ animation-delay:calc((var(--d-nav) + .24s) / var(--sc-tempo)) } .sc-a-nav .sc-nav > :nth-child(5){ animation-delay:calc((var(--d-nav) + .34s) / var(--sc-tempo)) } .sc-a-shine .sc-head__shine{ animation-name:sc-shine; animation-duration:calc(1.55s / var(--sc-tempo)); animation-delay:calc(var(--d-shine) / var(--sc-tempo)); animation-timing-function:cubic-bezier(.35,.05,.3,1); } .sc-a-sparks .sc-spark{ animation-name:sc-spark; animation-duration:calc(.90s / var(--sc-tempo)); animation-timing-function:ease-out; animation-delay:calc(var(--d-sp1) / var(--sc-tempo)); } .sc-a-sparks .sc-spark:nth-of-type(2){ animation-delay:calc(var(--d-sp2) / var(--sc-tempo)) } .sc-a-sparks .sc-spark:nth-of-type(3){ animation-delay:calc(var(--d-sp3) / var(--sc-tempo)) } /* Vier bis sechs: Der Regler laesst sechs zu. Ohne eigene Verzoegerung blitzten sie gemeinsam mit dem ersten auf (AB#937). */ .sc-a-sparks .sc-spark:nth-of-type(4){ animation-delay:calc(var(--d-sp4) / var(--sc-tempo)) } .sc-a-sparks .sc-spark:nth-of-type(5){ animation-delay:calc(var(--d-sp5) / var(--sc-tempo)) } .sc-a-sparks .sc-spark:nth-of-type(6){ animation-delay:calc(var(--d-sp6) / var(--sc-tempo)) } /* Lichtstreifen und Funken sind nur waehrend ihrer Bewegung zu sehen. Laeuft der Baustein nicht mit, bleiben sie unsichtbar — sonst staende der Lichtstreifen beim Seitenwechsel starr im Balken. */ .sc-head__shine, .sc-spark{ opacity:0 } /* Endzustand — /sc-header.js setzt .is-done, wenn die Einblendung fertig ist oder der Besucher sie mit Klick bzw. Scrollen abbricht. */ .sc-intro .sc-head.is-done .sc-head__bg, .sc-intro .sc-head.is-done .sc-head__band, .sc-intro .sc-head.is-done .sc-brand__sym, .sc-intro .sc-head.is-done .sc-brand__mark, .sc-intro .sc-head.is-done .sc-brand__slogan, .sc-intro .sc-head.is-done .sc-nav > *{ animation:none; opacity:1; filter:none; transform:none } .sc-intro .sc-head.is-done .sc-brand__rule{ animation:none; opacity:1; transform:scaleY(1) } .sc-intro .sc-head.is-done #sc-s, .sc-intro .sc-head.is-done #sc-hat{ animation:none; opacity:1; transform:none } .sc-intro .sc-head.is-done .sc-head__shine, .sc-intro .sc-head.is-done .sc-spark{ animation:none; opacity:0 } /* Bewegung reduzieren: .sc-intro wird dann gar nicht erst gesetzt. Diese Regeln fangen den Fall ab, dass die Einstellung waehrend der Sitzung umgestellt wird. */ @media (prefers-reduced-motion:reduce){ html:not(.sc-force-motion).sc-intro .sc-head__bg, html:not(.sc-force-motion).sc-intro .sc-head__band, html:not(.sc-force-motion).sc-intro .sc-brand__sym, html:not(.sc-force-motion).sc-intro .sc-brand__mark, html:not(.sc-force-motion).sc-intro .sc-brand__slogan, html:not(.sc-force-motion).sc-intro .sc-nav > *{ animation:none; opacity:1; filter:none; transform:none } html:not(.sc-force-motion).sc-intro .sc-brand__rule{ animation:none; opacity:1; transform:scaleY(1) } html:not(.sc-force-motion).sc-intro #sc-s, html:not(.sc-force-motion).sc-intro #sc-hat{ animation:none; opacity:1; transform:none } html:not(.sc-force-motion) .sc-head__shine, html:not(.sc-force-motion) .sc-spark{ display:none } } .btn{ display:inline-block; background:var(--brand); color:#fff; padding:.7rem 1.35rem; border-radius:999px; text-decoration:none; font-weight:600; font-size:.97rem; line-height:1.3; transition:background .15s ease; } .btn:hover{ background:var(--brand-dark); color:#fff } .btn-ghost{ background:transparent; color:var(--brand-dark); box-shadow:inset 0 0 0 1.5px var(--brand); } .btn-ghost:hover{ background:var(--brand-light); color:var(--brand-dark) } /* --------------------------------- Hero ---------------------------------- */ .hero{ background:linear-gradient(180deg, var(--brand-light) 0%, #fff 100%); padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(1.5rem,4vw,2.5rem); } .hero h1{ margin:0 0 .6rem; font-size:clamp(1.85rem, 1.2rem + 2.6vw, 3rem); line-height:1.15; letter-spacing:-.02em; max-width:20ch; } .hero .lead{ margin:0; font-size:clamp(1.05rem,1rem + .5vw,1.3rem); color:var(--ink-2); max-width:60ch; } .hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin:1.6rem 0 0 } /* -------------------------------- Inhalt --------------------------------- */ .prose{ padding-block:clamp(2rem,5vw,3.5rem) } .prose > *{ max-width:70ch } .prose h2{ margin:2.6rem 0 .8rem; font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem); line-height:1.25; letter-spacing:-.01em; } .prose h3{ margin:2rem 0 .5rem; font-size:1.18rem; line-height:1.3 } .prose h4{ margin:1.5rem 0 .4rem; font-size:1.03rem; color:var(--ink-2) } .prose p{ margin:0 0 1.1rem } .prose ul{ margin:0 0 1.2rem; padding-left:1.3rem } .prose li{ margin-bottom:.45rem } .prose > h2:first-child{ margin-top:0 } /* Karten-Raster für Leistungsübersichten */ .cardgrid{ display:grid; gap:1rem; max-width:none; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); margin:1.5rem 0 2rem; } .card{ position:relative; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.4rem; transition:border-color .15s ease, box-shadow .15s ease; } .card:hover{ border-color:var(--brand-mid); box-shadow:0 6px 20px rgba(5,96,101,.10) } .card h3{ margin:0 0 .4rem; font-size:1.1rem; line-height:1.3 } .card h3 a{ text-decoration:none; color:var(--ink) } .card h3 a::after{ content:''; position:absolute; inset:0 } .card:hover h3 a{ color:var(--brand-dark) } .card p{ margin:0; color:var(--ink-2); font-size:.97rem } /* Hinweisblock */ .infobox{ max-width:none; background:var(--brand-light); border-left:3px solid var(--brand); border-radius:0 var(--radius) var(--radius) 0; padding:1.15rem 1.35rem; margin:1.75rem 0; } .infobox p:last-child{ margin-bottom:0 } /* Handlungsaufforderung */ .cta{ max-width:none; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.5rem,4vw,2.25rem); margin:2.5rem 0 .5rem; text-align:center; } .cta h2{ margin-top:0 } .cta p{ margin-inline:auto; max-width:52ch; color:var(--ink-2) } /* Standort-Raster */ .locationgrid{ display:grid; gap:1rem; max-width:none; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:1.5rem 0; } /* -------------------------------- Fußbereich ----------------------------- */ .site-footer{ margin-top:clamp(3rem,7vw,5rem); background:var(--ink); color:#cfd8d6; padding:clamp(2.5rem,6vw,4rem) 0 1.5rem; font-size:.95rem; } .site-footer a{ color:#fff; text-decoration:none } .site-footer a:hover{ text-decoration:underline; color:#fff } .footer-top{ display:grid; gap:2.5rem } @media (min-width:820px){ .footer-top{ grid-template-columns:1fr 1.35fr; gap:3.5rem } } .claim{ color:#fff; font-size:1.2rem; font-weight:600; line-height:1.35; margin:0 0 1.25rem } .contact{ margin:0 0 1.25rem; line-height:1.9 } .hours{ margin:0 0 1.25rem; color:#a9b5b2; font-size:.9rem } .hours strong{ color:#cfd8d6; font-weight:600 } .social{ display:flex; gap:1.25rem; margin:0 } .footer-locs{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); } .loc{ display:flex; flex-direction:column; gap:.15rem } .loc strong{ color:#fff; margin-bottom:.25rem } .loc-note{ color:var(--accent); font-size:.87rem; margin-top:.35rem; line-height:1.5 } .footer-bottom{ display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.14); font-size:.88rem; color:#8e9a97; } @media print{ .sc-head,.site-footer,.hero-actions{ display:none } body{ font-size:11pt } } /* ========================================================================== Bilder, Bildstrecken und Bewegung beim Scrollen ========================================================================== */ .fig{ margin:0; overflow:hidden; border-radius:var(--radius); background:var(--bg-soft); } .fig img{ width:100%; height:100%; object-fit:cover } /* Hero mit Bild: Text links, Bild rechts, am Handy untereinander */ .hero-split{ padding-bottom:0 } .hero-inner{ display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center } .hero-split .hero-inner{ padding-bottom:clamp(2rem,5vw,3.5rem) } .hero-fig{ aspect-ratio:4/3; max-height:min(52vh,460px); box-shadow:0 18px 50px rgba(5,96,101,.18); } .hero-fig img{ transform:scale(1.04); transition:transform 1.2s cubic-bezier(.2,.7,.3,1) } .hero-split:hover .hero-fig img{ transform:scale(1) } @media (min-width:900px){ .hero-split .hero-inner{ grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem) } .hero-fig{ aspect-ratio:5/4 } } /* Wechselnde Bild-Text-Abschnitte */ .media{ max-width:none; display:grid; gap:clamp(1.25rem,3vw,2.5rem); align-items:center; margin:clamp(2.5rem,6vw,4rem) 0; } .media .fig{ aspect-ratio:4/3 } .media .fig img{ transition:transform .9s cubic-bezier(.2,.7,.3,1) } .media:hover .fig img{ transform:scale(1.045) } .media-body > :first-child{ margin-top:0 } .media-body > :last-child{ margin-bottom:0 } @media (min-width:820px){ .media{ grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem) } .media-reverse .fig{ order:2 } .media .fig{ aspect-ratio:1/1 } } /* Vollbreiter Farbstreifen zum Rhythmisieren langer Seiten */ .band{ max-width:none; background:var(--brand-light); border-radius:var(--radius); padding:clamp(1.75rem,5vw,3rem) clamp(1.25rem,4vw,2.5rem); margin:clamp(2.5rem,6vw,4rem) 0; } .band > :first-child{ margin-top:0 } .band > :last-child{ margin-bottom:0 } /* --- Einblenden beim Scrollen ------------------------------------------- Die Startposition wird nur gesetzt, wenn JavaScript aktiv ist und keine Bewegungsreduktion gewünscht wird. Ohne JS sind alle Inhalte sofort da — für Google und für Textbrowser ändert sich also nichts. */ .reveal-on [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); will-change:opacity, transform; } .reveal-on [data-reveal].is-in{ opacity:1; transform:none } /* Karten im Raster leicht versetzt einblenden */ .reveal-on .cardgrid.is-in .card{ animation:cardin .55s cubic-bezier(.2,.7,.3,1) backwards; } .reveal-on .cardgrid.is-in .card:nth-child(2){ animation-delay:.07s } .reveal-on .cardgrid.is-in .card:nth-child(3){ animation-delay:.14s } .reveal-on .cardgrid.is-in .card:nth-child(4){ animation-delay:.21s } .reveal-on .cardgrid.is-in .card:nth-child(5){ animation-delay:.28s } .reveal-on .cardgrid.is-in .card:nth-child(6){ animation-delay:.35s } @keyframes cardin{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important } } /* --- Ergänzungen zur echten CI ------------------------------------------- */ /* Gelber Akzentstrich unter Hauptüberschriften — Anlehnung an den Plakatstil */ .hero h1::after{ content:""; display:block; width:64px; height:5px; border-radius:3px; background:var(--accent); margin-top:1rem; } .hero{ background:linear-gradient(180deg, var(--brand-light) 0%, #fff 92%) } /* Fußbereich in der Hausfarbe — GENAU dieselbe wie im Kopfbereich. Vorher stand hier --brand-dark, wodurch der untere Teil jeder Seite eine Spur dunkler war als der Balken oben (Andreas 2026-08-15). Beide Flächen tragen dieselbe Marke und sollen deshalb denselben Ton haben. Sobald die Hausfarbe je Marke aus der Datenbank kommt (AB#943), wirkt sie dadurch automatisch auf beide Enden der Seite. */ .site-footer{ background:var(--brand); color:rgba(255,255,255,.82) } .footer-logo{ margin:0 0 1.25rem } .footer-logo img{ height:52px; width:auto } /* Textfarben im Fußbereich: Weiß mit Transparenz statt fester Grautöne. Die bisherigen Werte (#c3d6d7, #dbe8e8, #8fabad) waren bläuliche Grautöne, passend zum Petrol der Akademie ausgesucht. Auf einer anderen Hausfarbe sind sie ein sichtbarer Bruch — auf dem Weinrot von Smile Music (#541219) wirken kühle Blaugrautöne schlicht falsch. Weiß mit Alpha löst das grundsätzlich: Der Hintergrund scheint durch, der Text nimmt von selbst einen Hauch der jeweiligen Hausfarbe an und bleibt auf jeder dunklen Marke lesbar. Für die Akademie ändert sich dadurch praktisch nichts (.82 auf #056065 ergibt fast genau das bisherige #c3d6d7) — es ist also kein Umfärben, sondern dieselbe Wirkung ohne die Bindung an eine bestimmte Marke. */ .site-footer .hours{ color:rgba(255,255,255,.62) } .site-footer .hours strong{ color:rgba(255,255,255,.95) } .site-footer .claim{ color:#fff } .loc-note{ color:var(--accent) } .footer-bottom{ color:rgba(255,255,255,.62); border-top-color:rgba(255,255,255,.16) } /* Sekundärer Knopf auf farbigem Grund */ .btn-ghost{ box-shadow:inset 0 0 0 1.5px var(--brand-mid) } /* --- Standorte mit Anfahrtsskizze ---------------------------------------- */ .standorte{ max-width:none; display:grid; gap:1.25rem; margin:1.75rem 0 2.5rem } .standort{ display:grid; gap:1.25rem; align-items:center; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; } @media (min-width:760px){ .standort{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) } } .standort-skizze{ aspect-ratio:16/9; background:#f0efed; border:1px solid var(--line) } .standort-skizze img{ object-fit:contain } .standort-text h3{ margin:0 0 .35rem; font-size:1.15rem } .standort-adr{ margin:0 0 .7rem; color:var(--ink-2); font-weight:600 } .standort-text p{ margin:0 0 .8rem; font-size:.97rem; color:var(--ink-2) } .standort-text p:last-child{ margin-bottom:0 } /* Routenlink im Fußbereich */ .loc-route{ display:inline-block; margin-top:.5rem; font-size:.88rem; font-weight:600; border-bottom:1px solid rgba(255,255,255,.35); text-decoration:none !important; } .loc-route:hover{ border-bottom-color:#fff } /* --- Schnell-Links (Anfrage, Termine, Portal) ---------------------------- */ .schnelllinks{ max-width:none; margin:clamp(1rem,2.5vw,1.75rem) 0 } .schnelllinks ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem } .schnelllinks li a{ display:inline-flex; align-items:center; gap:.35rem; background:var(--bg-soft); color:var(--brand-dark); border:1.5px solid var(--brand-mid); border-radius:999px; padding:.5rem 1.15rem; text-decoration:none; font-weight:600; font-size:.93rem; transition:background .15s, color .15s, border-color .15s; } .schnelllinks li a:hover{ background:var(--brand); color:#fff; border-color:var(--brand) } /* --- Offene Kurse auf der Homepage -------------------------------------- */ .kurs-section{ max-width:none; margin:clamp(2rem,5vw,3rem) 0 } .kurs-section > h2{ margin-top:0; margin-bottom:1.1rem } .kurs-alle{ max-width:none !important; margin-top:2rem } .kurs-grid{ display:grid; gap:.9rem; max-width:none; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } .kurs-card{ display:flex; flex-direction:column; gap:.4rem; background:var(--kc-bg, var(--brand-light)); color:var(--kc-fg, var(--ink)); border-radius:var(--radius); padding:1.15rem 1.25rem; text-decoration:none; transition:box-shadow .15s, transform .15s; } .kurs-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.13); transform:translateY(-2px) } .kurs-card-sub{ font-size:.76rem; font-weight:700; opacity:.65; text-transform:uppercase; letter-spacing:.06em; } .kurs-card-name{ font-size:1.03rem; font-weight:700; line-height:1.3; color:inherit } .kurs-card-dates{ font-size:.87rem; opacity:.8 } .kurs-card-spots{ font-size:.76rem; font-weight:700; margin-top:.3rem; align-self:flex-start; background:rgba(0,0,0,.12); border-radius:999px; padding:.18rem .6rem; } /* --- Sommerschule-Popup ------------------------------------------------- */ .popup-overlay{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:1rem; animation:popup-in .22s ease; } @keyframes popup-in{ from{opacity:0} to{opacity:1} } .popup-dialog{ position:relative; max-width:min(500px,95vw); border-radius:var(--radius); overflow:hidden; box-shadow:0 28px 70px rgba(0,0,0,.42); } .popup-close{ position:absolute; top:.55rem; right:.55rem; z-index:1; width:34px; height:34px; background:rgba(0,0,0,.52); color:#fff; border:none; border-radius:50%; cursor:pointer; font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .12s; } .popup-close:hover{ background:rgba(0,0,0,.82) } .popup-link{ display:block; line-height:0 } .popup-link img{ width:100%; height:auto; display:block } /* --- Akkordeon (Förderpartner etc.) ------------------------------------- */ .accordion{ margin:1.5rem 0 } .accordion-item{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:.6rem; overflow:hidden; } .accordion-item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.25rem; font-weight:600; font-size:1.02rem; background:var(--bg-soft); transition:background .15s; } .accordion-item summary::-webkit-details-marker{ display:none } .accordion-item summary:hover{ background:var(--brand-light) } .accordion-item summary:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px } .accordion-item[open] summary{ background:var(--brand-light) } /* Überschrift und Teaser stehen untereinander in der Kopfzeile. */ .accordion-titel{ display:flex; flex-direction:column; gap:.25rem; min-width:0 } .accordion-teaser{ font-weight:400; font-size:.88rem; line-height:1.45; color:var(--ink-2) } /* Aufgeklappt steht der ausführliche Text direkt darunter — dann wäre der Teaser eine Dopplung. */ .accordion-item[open] .accordion-teaser{ display:none } /* Richtungspfeil statt Plus-Zeichen: zeigt zugeklappt nach unten, dreht beim Aufklappen nach oben. */ .accordion-chevron{ flex-shrink:0; color:var(--brand); transition:transform .25s cubic-bezier(.2,.7,.3,1); } .accordion-item[open] .accordion-chevron{ transform:rotate(180deg) } .accordion-body{ padding:.85rem 1.25rem 1.1rem; border-top:1px solid var(--line); } .accordion-body p{ margin:.6rem 0 } .accordion-body p:first-child{ margin-top:0 } .accordion-body p:last-child{ margin-bottom:0 } /* ---------------- Kopfbereich in der Hausfarbe (animiertes Logo) ----------- */ /* Smile Music (Andreas 2026-08-17): Das animierte Logo sitzt rechts neben der Ueberschrift und bringt KEINE eigene Flaeche mit — es steht direkt auf dem Weinrot, das damit ohne Kante an den Kopfbalken anschliesst. Der weisse Bereich beginnt erst beim ersten Textabschnitt darunter. */ .hero--marke{ background:var(--brand); color:#fff; padding-bottom:clamp(2rem,5vw,3.25rem); } .hero--marke.hero-split{ padding-bottom:clamp(2rem,5vw,3.25rem) } .hero--marke.hero-split .hero-inner{ padding-bottom:0 } .hero--marke h1{ color:#fff } .hero--marke h1::after{ background:var(--brand-mid) } .hero--marke .lead{ color:rgba(255,255,255,.88) } .hero--marke .btn{ background:#fff; color:var(--brand) } .hero--marke .btn:hover{ background:var(--brand-light); color:var(--brand-dark) } .hero--marke .btn-ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); } .hero--marke .btn-ghost:hover{ background:rgba(255,255,255,.14); color:#fff } .hero-logo{ display:flex; align-items:center; justify-content:center } .hero-logo .sc-logo{ display:block; width:100%; max-width:620px; height:auto; cursor:pointer; } /* Das bisherige Bild rutscht unter den Kopfbereich — mit Abstand zum Logo, aber noch auf der Markenflaeche. */ .hero-nachbild{ margin-top:clamp(2rem,5vw,3.5rem) } .hero-nachbild .hero-fig{ aspect-ratio:16/9; max-height:min(48vh,440px); margin:0; box-shadow:0 22px 60px rgba(0,0,0,.32); } @media (min-width:900px){ .hero-nachbild .hero-fig{ aspect-ratio:21/9 } } /* Hoeherer Kopf (Seiten mit Markenlogo): Signet, Wortmarke und Claim haengen ueber calc() an --sc-head-h und wuerden mitwachsen. Der Claim braucht dann zu viel Platz und stiesse an die erste Navigationspille — deshalb wird sein Faktor so nachgezogen, dass er absolut etwas kleiner bleibt als bisher (118 x .138 = 16,3 px statt 88 x .1928 = 17,0 px). */ .sc-head--hoch .sc-brand__slogan{ height:calc(var(--sc-head-h) * .138) }