/* Theme Name: JMS Yellow Theme URI: https://jugendmusikschulen.de/ Author: Jugendmusikschule St. Georgen-Furtwangen Description: Warmes, barrierearmes WordPress-Theme für die Jugendmusikschule. Version: 0.36.0 Text Domain: jms-yellow Tags: accessibility-ready */ /* Schriften, Farben und Schriftgroessen stehen in theme.json. Sie sind dadurch unter "Design > Editor > Stile" einstellbar. Wuerden sie hier zusaetzlich stehen, gewaenne bei gleicher Spezifitaet die spaeter geladene Regel -- und die Einstellung in der Oberflaeche bliebe folgenlos. */ :root { --jms-yellow: var(--wp--preset--color--jms-yellow, #ffcd13); --jms-yellow-dark: var(--wp--preset--color--jms-yellow-dark, #b58d00); --jms-yellow-soft: var(--wp--preset--color--jms-yellow-soft, #f7f3e8); --jms-ink: var(--wp--preset--color--jms-ink, #13263a); --jms-blue: var(--wp--preset--color--jms-blue, #173f62); --jms-cream: var(--wp--preset--color--jms-cream, #faf8f1); --jms-white: var(--wp--preset--color--jms-white, #ffffff); --jms-green: var(--wp--preset--color--jms-green, #244a3d); --jms-footer: var(--wp--preset--color--jms-footer, #102f49); --jms-red: var(--wp--preset--color--jms-red, #a62f37); --jms-border: var(--wp--preset--color--jms-border, #ddd3b8); --jms-shadow: 0 12px 34px rgba(19, 38, 58, 0.08); --jms-radius: 6px; --jms-content: 1220px; /* Hoehe des klebenden Kopfbereichs plus Platz fuer den Fokusrahmen. Gemessen: 97px bei 1440px Breite. Darunter stehen alle Abstaende, die verhindern, dass etwas hinter dem Kopf landet. */ --jms-kopf-hoehe: 104px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; } img { max-width: 100%; height: auto; } a { text-underline-offset: 0.17em; } a:hover { color: var(--jms-ink); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { /* Zweifarbig, weil ein einfarbiger Ring ueber einem Foto nicht zu retten ist: Jede Farbe trifft irgendwo auf eine gleich helle Bildstelle. Blau lag in der Fusszeile bei 1,26:1 und auf den Hero-Knoepfen zwischen 1,00 und 4,04, je nach Bildausschnitt. Gelb und Tinte stehen mit 10,24:1 zueinander -- unabhaengig davon, was darunter liegt. */ outline: 3px solid var(--jms-yellow); outline-offset: 2px; box-shadow: 0 0 0 6px var(--jms-ink); } h1, h2, h3, h4 { text-wrap: balance; } h1 { letter-spacing: -0.03em; } h2 { letter-spacing: -0.02em; } h3 { letter-spacing: -0.01em; } p { max-width: 72ch; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { top: 10px; left: 10px; z-index: 9999; width: auto; height: auto; padding: 12px 18px; clip: auto; background: var(--jms-white); } .jms-container { width: min(calc(100% - 36px), var(--jms-content)); margin-inline: auto; } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid var(--jms-border); backdrop-filter: blur(14px); } .jms-header-inner { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .jms-brand { display: inline-flex; align-items: center; gap: 14px; color: var(--jms-ink); text-decoration: none; font-family: "Montserrat JMS", Montserrat, Arial, sans-serif; font-weight: 700; line-height: 1.15; } .jms-brand-mark { width: 212px; /* Seitenverhaeltnis der Wortmarke; object-fit haelt ein abweichendes Custom-Logo unverzerrt in derselben Flaeche. */ aspect-ratio: 2400 / 724; display: grid; place-items: center; flex: 0 0 auto; } .jms-brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; } .jms-main-nav ul, .jms-language-nav { display: flex; align-items: center; gap: 22px; list-style: none; padding: 0; margin: 0; } /* 12px statt 22px in der obersten Ebene: Die Zeile war ueberfuellt, und was ueberfuellt ist, wird von Flexbox gestaucht -- siehe die Regel darunter. */ .jms-main-nav > ul { gap: 12px; } .jms-main-nav li { position: relative; } /* Der Punkt und sein Pfeilchen stehen **nebeneinander**, und der Punkt wird nicht gestaucht. Gemessen am 9. September 2026: Die Menuezeile wollte 770px und bekam 701. Flexbox verteilte den Mangel auf die Punkte -- die drei mit Pfeil verloren genau die 23px des Pfeils, der daraufhin in eine zweite Zeile rutschte. Weil die Zeile ihre Punkte mittig ausrichtet, sassen "Unterricht", "Musikschule" und "Service" dadurch 19px hoeher als ihre Nachbarn: der Zickzack, den der Nutzer gemeldet hat. `flex: 0 0 auto` verbietet das Stauchen, `display: flex` haelt Pfeil und Beschriftung in einer Zeile. Damit die Zeile trotzdem passt, beginnt das Klappmenue frueher -- siehe die Mediengrenze weiter unten. */ .jms-main-nav > ul > li { display: flex; align-items: center; flex: 0 0 auto; } .jms-main-nav a { color: var(--jms-ink); font-family: "Montserrat JMS", Montserrat, Arial, sans-serif; font-size: 0.82rem; font-weight: 600; text-decoration: none; } /* Kein Umbruch mitten in einem Menuepunkt der obersten Ebene: Ein zweizeiliger Punkt ist hoeher als seine Nachbarn, und weil die Zeile ihre Punkte mittig ausrichtet, verrutschen dadurch alle. Gemessen am 9. September 2026: "Chöre, Ensembles & Orchester" war 56px hoch, die Nachbarn 28px. Die Unterpunkte im Klappmenue duerfen weiter umbrechen -- dort steht jeder Punkt in eigener Zeile. */ .jms-main-nav > ul > li > a { white-space: nowrap; } .jms-main-nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--jms-yellow-dark); } .jms-main-nav .jms-menu-cta a { display: inline-flex; min-height: 40px; padding: 8px 14px; align-items: center; border: 1px solid var(--jms-ink); background: var(--jms-yellow); text-decoration: none; } .jms-main-nav .jms-menu-cta a:hover { background: var(--jms-ink); color: var(--jms-white); } .jms-submenu-toggle { display: inline-flex; margin-left: 2px; padding: 4px 2px; border: 0; background: transparent; color: var(--jms-ink); font: inherit; line-height: 1; cursor: pointer; } /* WCAG 2.5.8 verlangt 24 x 24 Pixel. Gemessen war der Pfeil 13,64 x 24 px. Der sichtbare Pfeil bleibt, wie er ist -- nur die Trefferflaeche waechst nach rechts in den 12 px breiten Abstand zum naechsten Menuepunkt hinein. Nach links waechst sie bewusst nicht: dort liegt der Elternlink, der anklickbar bleiben muss. Nachgemessen: Trefferflaeche 24,64 x 24 px, die sichtbare Breite unveraendert 13,64 px. */ .jms-submenu-toggle { position: relative; } .jms-submenu-toggle::before { content: ""; position: absolute; inset: 0 -10.36px 0 0; } .jms-main-nav .sub-menu { position: absolute; z-index: 120; top: calc(100% + 18px); left: -18px; display: none; min-width: 280px; padding: 10px; border: 1px solid var(--jms-border); background: var(--jms-white); box-shadow: var(--jms-shadow); } .jms-main-nav .sub-menu::before { content: ""; position: absolute; inset: -19px 0 auto; height: 19px; } .jms-main-nav .sub-menu li { width: 100%; } .jms-main-nav .sub-menu a { display: block; padding: 11px 12px; line-height: 1.35; } .jms-main-nav .menu-item-has-children:hover > .sub-menu, .jms-main-nav .menu-item-has-children:focus-within > .sub-menu, .jms-main-nav .menu-item-has-children.is-submenu-open > .sub-menu { display: block; } .jms-language-nav { gap: 6px; } .jms-language-nav a { display: inline-flex; min-width: 38px; min-height: 38px; align-items: center; justify-content: center; border: 1px solid var(--jms-border); border-radius: 3px; color: var(--jms-ink); font-size: 0.75rem; font-weight: 800; text-decoration: none; background: var(--jms-white); } .jms-language-nav a:hover { background: var(--jms-yellow); border-color: var(--jms-yellow-dark); } /* Polylang liefert die Sprachkürzel klein; die Gestaltung sieht Versalien vor. */ .jms-language-nav a:not(.jms-easy-switch) { text-transform: uppercase; } /* Ausgeschriebener Wechsel in die Leichte Sprache: breiter als die quadratischen Sprachkürzel und ohne Grossbuchstaben-Sperrung. */ .jms-language-nav a.jms-easy-switch { min-width: 0; padding-inline: 12px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; } .jms-menu-toggle { display: none; border: 1px solid var(--jms-ink); border-radius: 3px; padding: 10px 14px; background: var(--jms-yellow); color: var(--jms-ink); font-family: "Montserrat JMS", Montserrat, Arial, sans-serif; font-weight: 700; } .jms-hero { position: relative; overflow: hidden; padding: clamp(58px, 7vw, 92px) 0 clamp(65px, 8vw, 105px); background: linear-gradient(90deg, var(--jms-yellow) 0 9px, var(--jms-cream) 9px 100%); border-bottom: 1px solid var(--jms-border); } .jms-hero::before, .jms-hero::after { display: none; } .jms-hero-grid { display: grid; grid-template-columns: minmax(300px, 0.8fr) minmax(480px, 1.2fr); align-items: center; gap: clamp(42px, 6vw, 86px); } .jms-eyebrow, .jms-card-kicker { margin: 0 0 11px; color: var(--jms-blue); font-family: "Montserrat JMS", Montserrat, Arial, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .jms-hero h1 { max-width: 700px; margin: 0 0 23px; font-size: clamp(2.05rem, 3.1vw, 2.8rem); } .jms-highlight { position: relative; white-space: nowrap; } .jms-highlight::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em; height: 0.12em; background: var(--jms-yellow); z-index: -1; } .jms-hero-copy { font-size: clamp(1rem, 1.5vw, 1.17rem); } .jms-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .wp-element-button, .jms-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 21px; border: 1px solid var(--jms-ink); border-radius: 3px; background: var(--jms-yellow); color: var(--jms-ink); font-family: "Montserrat JMS", Montserrat, Arial, sans-serif; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: none; transition: background-color 160ms ease, color 160ms ease; } .wp-element-button:hover, .jms-button:hover { background: var(--jms-ink); color: var(--jms-white); } /* Die helle Zweitvariante braucht einen eigenen Hover. Ohne ihn gewann .jms-button.secondary (gleiche Spezifitaet, spaeter notiert) beim Hover den weissen Hintergrund, waehrend die Schrift aus der :hover-Regel weiss blieb -- der Knopf wurde beim Ueberfahren unsichtbar. Deshalb hier beide Eigenschaften gemeinsam setzen und die Schrift dunkel halten: #13263a auf #ffcd13 ergibt 10,4:1. */ .jms-button.secondary { background: var(--jms-white); color: var(--jms-ink); } .wp-element-button.secondary:hover, .jms-button.secondary:hover { background: var(--jms-yellow); color: var(--jms-ink); } .jms-hero-slider { position: relative; min-width: 0; } .jms-hero-slides { position: relative; } .jms-hero-media { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 550ms ease; } .jms-hero-media.is-active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; } .jms-hero-media::before { content: ""; position: absolute; z-index: 1; inset: -10px auto 18px -10px; width: 10px; background: var(--jms-yellow); } .jms-hero-media img { display: block; width: 100%; min-height: 390px; max-height: 510px; object-fit: cover; border-radius: var(--jms-radius); box-shadow: var(--jms-shadow); } .jms-hero-media figcaption { position: absolute; z-index: 2; bottom: 12px; left: 12px; max-width: 55%; padding: 6px 9px; background: rgba(36, 74, 61, 0.88); color: var(--jms-white); font-size: 0.65rem; line-height: 1.4; } .jms-hero-building img { object-position: center 72%; filter: brightness(1.08) saturate(0.9) contrast(0.96); } /* Hero ueber die volle Fensterbreite. Der Text liegt als Overlay auf dem Bild. Damit er lesbar bleibt, liegt ein Verlauf darunter, dessen Staerke im Block einstellbar ist: helle Fotos brauchen mehr, dunkle weniger. Ohne diesen Verlauf ist Text auf Fotos je nach Bildstelle mal lesbar und mal nicht -- und damit nicht barrierefrei. */ .jms-hero-wide { position: relative; overflow: hidden; background: var(--jms-ink); } .jms-hero-wide .jms-hero-slider { position: relative; } .jms-hero-wide .jms-hero-slides { position: relative; height: 100%; } .jms-hero-wide .jms-hero-media { position: absolute; inset: 0; margin: 0; } .jms-hero-wide .jms-hero-media::before { display: none; } .jms-hero-wide .jms-hero-media img { width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: cover; border-radius: 0; box-shadow: none; } .jms-hero-wide .jms-hero-media figcaption { position: absolute; z-index: 3; right: 12px; bottom: 12px; left: auto; max-width: 42%; } .jms-hero-wide--klein .jms-hero-slider { height: clamp(260px, 34vh, 360px); } .jms-hero-wide--mittel .jms-hero-slider { height: clamp(340px, 48vh, 500px); } .jms-hero-wide--gross .jms-hero-slider { height: clamp(420px, 64vh, 660px); } /* Der Verlauf beginnt bei mindestens 0,7 und haelt den Wert bis 44 % der Breite, statt sofort abzufallen. Vorher stand die gelbe Vorzeile im schlechtesten Fall bei Median 4,30:1 mit 84 % der Glyphenflaeche unter der Schwelle. Nicht die Form des Verlaufs war das Problem, sondern die Staerke: ein gleichmaessiger Verlauf bei 0,55 laesst immer noch 43 % darunter. Nachher ist der kleinste Wert 4,84:1 ueber alle Breiten und alle Bilder. */ .jms-hero-wide .jms-hero-media::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, rgba(21, 32, 28, max(var(--jms-hero-scrim, 0.55), 0.75)) 0%, rgba(21, 32, 28, max(var(--jms-hero-scrim, 0.55), 0.75)) 44%, rgba(21, 32, 28, calc(max(var(--jms-hero-scrim, 0.55), 0.75) * 0.55)) 76%, rgba(21, 32, 28, calc(max(var(--jms-hero-scrim, 0.55), 0.75) * 0.2)) 100%); } .jms-hero-wide-overlay--right .jms-hero-media::after, .jms-hero-wide--right .jms-hero-media::after { background: linear-gradient(270deg, rgba(21, 32, 28, var(--jms-hero-scrim, 0.55)) 0%, rgba(21, 32, 28, calc(var(--jms-hero-scrim, 0.55) * 0.2)) 100%); } .jms-hero-wide-overlay { position: absolute; z-index: 4; inset: 0; display: flex; align-items: center; pointer-events: none; } .jms-hero-wide-overlay .jms-container { width: min(calc(100% - 36px), var(--jms-content)); } .jms-hero-wide-copy { max-width: 620px; color: var(--jms-white); pointer-events: auto; } .jms-hero-wide-overlay--center .jms-hero-wide-copy { margin-inline: auto; text-align: center; } .jms-hero-wide-overlay--right .jms-hero-wide-copy { margin-left: auto; } .jms-hero-wide-copy h1, .jms-hero-wide-copy h2 { margin: 0 0 18px; color: var(--jms-white); } .jms-hero-wide-copy .jms-eyebrow { color: var(--jms-yellow); } .jms-hero-wide-copy .jms-hero-copy { color: var(--jms-white); } /* Zweitknopf in der Vollbreiten-Hero. Hier stand zuvor nur eine Umfaerbung der Schrift auf Weiss -- der weisse Hintergrund aus der Grundregel blieb stehen, also weisse Schrift auf weissem Grund. Der Knopf war unlesbar, bis man mit der Maus darueberfuhr. Jetzt vollstaendig eigen definiert: dunkle, weitgehend deckende Flaeche mit weissem Rand. Das Foto scheint nur schwach durch, damit der Kontrast nicht vom jeweiligen Bildausschnitt abhaengt -- Weiss auf #15201c ergibt 15,7:1, selbst mit 22 Prozent durchscheinendem Foto bleibt es weit ueber der Anforderung. */ .jms-hero-wide-copy .jms-button.secondary { border-color: var(--jms-white); background: rgba(21, 32, 28, 0.78); color: var(--jms-white); } .jms-hero-wide-copy .jms-button.secondary:hover, .jms-hero-wide-copy .jms-button.secondary:focus-visible { background: var(--jms-yellow); color: var(--jms-ink); border-color: var(--jms-ink); } .jms-hero-wide .jms-hero-slider-controls { z-index: 5; } /* Die Handlungsaufforderung ist eine Station wie ein Bild und liegt deshalb im selben Durchlauf. Ohne Bild steht sie auf gelbem Grund. */ .jms-hero-cta { display: flex; align-items: center; justify-content: center; background: var(--jms-yellow); } .jms-hero-cta-body { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 520px; padding: 24px; text-align: center; } .jms-hero-cta-text { margin: 0; font-family: "Montserrat JMS", Montserrat, Arial, sans-serif; font-size: clamp(1.05rem, 1.9vw, 1.5rem); font-weight: 700; line-height: 1.3; } .jms-hero-cta img + .jms-hero-cta-body { color: var(--jms-white); } .jms-hero-cta img ~ .jms-hero-cta-body::before { content: ""; position: absolute; z-index: -1; inset: -18px -24px; background: rgba(21, 32, 28, 0.62); } /* `opacity` auf der Gruppe bleichte die Glyphen mit, nicht nur den Untergrund: gemessen Median 3,93-3,98:1 bei 86-90 % der Flaeche unter 4,5. Eine dichtere Flaeche allein tut das nicht und laesst das Foto weiter durchscheinen. Nachher 11,50-12,09:1. Das hebt zugleich den Rand der Laufpunkte von 3,52 auf rund 10,5:1 -- ihre weisse Fuellung allein traegt nur 1,75:1. */ .jms-hero-slider-controls { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: flex; min-height: 0; padding: 3px; align-items: center; gap: 3px; border: 0; background: rgba(250, 248, 241, 0.86); backdrop-filter: blur(8px); opacity: 1; transition: background-color 160ms ease; } .jms-hero-slider-controls:hover, .jms-hero-slider-controls:focus-within { opacity: 1; } .jms-hero-slider-controls > button { min-width: 27px; height: 27px; padding: 0 5px; border: 0; border-radius: 1px; background: transparent; color: var(--jms-ink); font: 700 0.7rem/1 "Montserrat JMS", Montserrat, Arial, sans-serif; cursor: pointer; } .jms-hero-slider-controls > button:hover { background: var(--jms-cream); opacity: 1; } .jms-hero-slider-controls .jms-hero-pause { width: 28px; margin-left: 2px; } .jms-hero-pause span { font-size: 0; } .jms-hero-pause::before { content: "Ⅱ"; font-size: 0.7rem; } .jms-hero-pause[aria-pressed="true"]::before { content: "▶"; } /* Der einzige Punkt von B3, bei dem sich das Aussehen aendern muss: Zwei 8-px-Ziele mit 13 px Mittenabstand koennen 2.5.8 nicht erfuellen, egal wie man die Trefferflaeche legt -- die 24-px-Kreise benachbarter Punkte schneiden sich zwangslaeufig. Der Knopf wird deshalb 24 x 24 px; der sichtbare Punkt bleibt 8 px und wird als ::before gezeichnet. */ .jms-hero-dots { display: inline-flex; gap: 0; padding-inline: 2px; } .jms-hero-dots button { display: inline-flex; width: 24px; height: 24px; padding: 0; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent; cursor: pointer; } .jms-hero-dots button::before { content: ""; width: 8px; height: 8px; border: 1px solid var(--jms-ink); border-radius: 50%; background: var(--jms-white); } .jms-hero-dots button.is-active::before { background: var(--jms-ink); } .jms-quick-section { padding: 46px 0 52px; border-bottom: 1px solid var(--jms-border); background: var(--jms-white); } .jms-quick-section h2 { margin: 0 0 25px; font-size: clamp(1.45rem, 2.2vw, 2rem); } /* Der Schnelleinstieg zaehlt seine Kacheln nicht. `repeat(4, ...)` stimmte solange es vier waren; mit der fuenften (Preise & Bedingungen) haette die letzte allein in einer zweiten Zeile gestanden. `auto-fit` mit Mindestbreite verteilt, was da ist -- fuenf oder sechs in einer Zeile. Bei sieben Kacheln waere wieder eine allein; dann gehoert die Mindestbreite gesenkt. Die Mindestbreite ist 170px und nicht 196px, weil 196px bei 1220px Breite genau fuenf Spuren ergibt: Eine sechste Kachel stuende sofort allein. */ .jms-quick-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; } /* Auf der Blockseite steckt der Abschnitt in einem `is-layout-constrained`, das seine Kinder bei 840px (contentSize) abschneidet -- die Kacheln waren dort nur 200px breit und die fuenfte stand allein darunter. Die Rueckfallvorlage setzt denselben Abschnitt in `.jms-container` und damit auf 1220px. Dieselbe Sektion war je nach Vorlage verschieden breit; hier wird die Blockseite der Vorlage nachgezogen. Aufgezaehlt statt `> *`: Ein Absatz, den das Buero dazuschreibt, soll seine lesbare Zeilenlaenge behalten. */ .jms-quick-section > .jms-eyebrow, .jms-quick-section > h2, .jms-quick-section > .jms-quick-nav { max-width: var(--jms-content); } /* Nur die Rueckfallvorlage: Dort ist die Kachel selbst der Verweis (