/* Ergaenzt theme.json um das, was dort nicht ausdrueckbar ist. */ :root { --sw-radius-karte: 14px; --sw-radius-pille: 999px; --sw-radius-bild: 22px; --sw-schatten-weich: 0 2px 8px rgba(14, 58, 86, .08); --sw-schatten-hoch: 0 8px 24px rgba(14, 58, 86, .10); --sw-welle-hoehe: clamp(44px, 7vw, 96px); } /* --- Wellenkanten --- Die Welle liegt IM Zielabschnitt und ragt per bottom:100% nach oben ueber den vorherigen hinaus. Das ist der entscheidende Punkt: Ihr durchsichtiger Teil zeigt dadurch den Abschnitt darueber. Als Geschwisterelement zwischen den Abschnitten ging das nicht. Dort zeigte der durchsichtige Teil den Seitenhintergrund, also Weiss. Bei einem blauen Abschnitt darueber entstand so ein weisser Streifen. Drei Ebenen erzeugen Tiefe: unten die deckende Kante in der Farbe des Abschnitts, darueber zwei hellblaue Schaumkronen. */ .sw-welle { position: absolute; left: 0; right: 0; bottom: 100%; /* Ohne max-width:none erbt die Welle die Breitenbegrenzung des Abschnitts und endet mitten auf der Seite. */ max-width: none; height: var(--sw-welle-hoehe); line-height: 0; pointer-events: none; z-index: 1; } /* Der Abschnitt mit der Welle muss den vorherigen beruehren. WordPress setzt zwischen Geschwisterelementen 24px Abstand, und in diesem Streifen scheint der Seitenhintergrund durch. Genau dort entstand der weisse Rand unter einem blauen Abschnitt. position:relative ist die Bezugsgroesse fuer die absolut gesetzte Welle. WordPress-Gruppen sind das ohnehin schon, aber darauf soll sich die Welle nicht blind verlassen. */ :has(> .sw-welle) { position: relative; margin-block-start: 0; } .wp-site-blocks > footer { margin-block-start: 0; } .sw-welle svg { display: block; width: 100%; height: 100%; } /* Die Welle ist absolut positioniert und nimmt keinen Platz ein. WordPress zaehlt sie trotzdem als Geschwisterelement und schiebt das folgende Element um 24px nach unten. Dadurch saessen Abschnitte mit Welle tiefer als solche ohne. */ .sw-welle + * { margin-block-start: 0; } .sw-welle__vorn { fill: var(--sw-welle-farbe, var(--wp--preset--color--nebel)); } .sw-welle__mitte { fill: var(--wp--preset--color--himmel); opacity: .26; } .sw-welle__hinten { fill: var(--wp--preset--color--himmel); opacity: .14; } /* Sanfte Bewegung, nur auf den beiden Schaumebenen. Die deckende Kante bleibt ruhig, sonst entstuende an ihrer Unterkante ein Spalt. */ @media (prefers-reduced-motion: no-preference) { .sw-welle__hinten { animation: sw-duenung 11s ease-in-out infinite alternate; } .sw-welle__mitte { animation: sw-duenung 7.5s ease-in-out infinite alternate; animation-delay: -2.5s; } } @keyframes sw-duenung { from { transform: translateY(0); } to { transform: translateY(5px); } } /* --- Karten --- */ .sw-karte { position: relative; background: var(--wp--preset--color--grund); border: 1px solid var(--wp--preset--color--linie); border-radius: var(--sw-radius-karte); box-shadow: var(--sw-schatten-weich); overflow: hidden; height: 100%; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); } .sw-karte > * { margin-block: 0; } /* Das Bild sitzt buendig an der Kartenkante. Die Karte kappt den Ueberstand per overflow:hidden, deshalb braucht das Bild selbst keinen Radius. */ .sw-karte > .sw-bild--karte { width: calc(100% + 2 * var(--wp--preset--spacing--40)); max-width: none; margin: calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--40)) 0; border-radius: 0; } .sw-karte > .sw-bild--karte img { border-radius: 0; width: 100%; } /* Der letzte Textblock schiebt sich nach unten, damit alle Karten trotz unterschiedlich langer Texte unten buendig abschliessen. */ .sw-karte > :last-child { margin-top: auto; } /* --- Pille / Label --- */ .sw-pille { display: inline-block; border-radius: var(--sw-radius-pille); background: var(--wp--preset--color--dunst); color: var(--wp--preset--color--marine); font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .04em; padding: 4px 12px; } /* In einer Karte sitzt die Pille als Bubble im Bild, nicht darunter. Sie liegt ausserhalb des Flusses, dadurch ruecken die Texte nach oben und die Karte wird flacher. */ .sw-karte > .sw-pille { position: absolute; top: 12px; left: 12px; z-index: 1; margin: 0; background: rgba(255, 255, 255, .93); color: var(--wp--preset--color--marine); box-shadow: 0 1px 4px rgba(14, 58, 86, .18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 5px 13px; } /* --- Hero-Platzhalter, bis die neuen Fotos da sind --- */ .sw-hero-platzhalter { border-radius: var(--sw-radius-bild); overflow: hidden; aspect-ratio: 4 / 3; background: var(--wp--preset--color--grund); } .sw-hero-platzhalter svg { display: block; width: 100%; height: 100%; } /* --- Datenliste auf Kursart-Seiten --- Als Tabellen-Block statt als HTML: So laesst sie sich im Editor bearbeiten, ohne dass dort Code auftaucht. Die Gestaltung nimmt der Tabelle das Tabellenhafte und laesst sie wie eine Datenliste wirken: erste Spalte schmal und gedaempft, feine Trennlinien, keine Rahmen. */ .sw-datenliste { margin-block: var(--wp--preset--spacing--40); } .sw-datenliste table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--wp--preset--color--linie); } .sw-datenliste td { padding-block: 9px; padding-inline: 0; border: 0; border-bottom: 1px solid var(--wp--preset--color--linie); line-height: 1.45; vertical-align: top; word-break: normal; } .sw-datenliste td:first-child { width: 1%; white-space: nowrap; padding-right: var(--wp--preset--spacing--50); color: var(--wp--preset--color--text-weich); font-weight: 600; } .sw-datenliste td:last-child { color: var(--wp--preset--color--tinte); } @media (max-width: 34rem) { .sw-datenliste tr, .sw-datenliste td { display: block; width: auto; } /* width muss hier noch einmal stehen. Die Regel darueber setzt zwar width:auto, aber .sw-datenliste td:first-child ist spezifischer als .sw-datenliste td und behaelt die 1% aus der Tabellenansicht. Als display:block sind 1% keine Mindestbreite mehr, sondern eine feste: rund drei Pixel. Der Text bricht dann an jeder Luecke um, in der schmalen Eckdatenkarte sogar zwischen den Buchstaben. */ .sw-datenliste td:first-child { width: auto; padding-bottom: 0; border-bottom: 0; white-space: normal; font-size: var(--wp--preset--font-size--s); } .sw-datenliste td:last-child { padding-top: 2px; } } /* --- Bedienbarkeit --- */ :where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible { outline: 2px solid var(--wp--preset--color--blau); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Nichts darf die Seite seitlich schieben. */ html, body { overflow-x: clip; } /* --- Kutego-Einbettung --- */ .sw-kutego { margin-block: var(--wp--preset--spacing--60); } .sw-kutego__hinweis { color: var(--wp--preset--color--text-weich); margin-block: 8px var(--wp--preset--spacing--35); } .sw-kutego__rahmen { border: 1px solid var(--wp--preset--color--linie); border-radius: var(--sw-radius-karte); overflow: hidden; background: var(--wp--preset--color--nebel); } .sw-kutego__frame { display: block; width: 100%; border: 0; } /* Die Mindesthoehe kommt als Variable aus dem Block. Normalerweise passt das Skript von kurs.software die Hoehe an den Inhalt an; diese Werte greifen nur, solange es nicht geladen hat oder ausfaellt. Schmal braucht dieselbe Kursliste deutlich mehr Hoehe, weil jede Zeile umbricht. Mit der Vorgabe fuer breite Schirme wurde der Inhalt mobil mitten im Satz abgeschnitten. */ .sw-kutego__rahmen { min-height: var(--sw-kutego-hoehe, 640px); } .sw-kutego__leer { border: 1px dashed var(--wp--preset--color--linie); border-radius: var(--sw-radius-karte); padding: var(--wp--preset--spacing--40); color: var(--wp--preset--color--text-weich); } /* --- Newsletter --- */ .sw-nl__form { display: grid; gap: 16px; max-width: 30rem; } .sw-nl__feld { display: grid; gap: 6px; margin: 0; } .sw-nl__feld--haken { grid-template-columns: auto 1fr; align-items: start; gap: 10px; } .sw-nl__feld label { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--text-weich); } .sw-nl__feld input[type="email"] { border: 1px solid var(--wp--preset--color--linie); border-radius: var(--sw-radius-karte); padding: 10px 14px; font: inherit; background: var(--wp--preset--color--grund); color: var(--wp--preset--color--tinte); } .sw-nl__hinweis { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-weich); margin: 0; } .sw-nl__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sw-nl__meldung { border-radius: var(--sw-radius-karte); padding: 12px 16px; margin-bottom: 16px; } .sw-nl__meldung--erfolg { background: var(--wp--preset--color--dunst); color: var(--wp--preset--color--marine); } .sw-nl__meldung--fehler { background: #FDECEC; color: #8A1C1C; } /* --- Fussbereich --- Auf der Marine-Flaeche erreicht das Primaerblau nur 2,1:1 und waere unlesbar. Links sind dort weiss (11,94:1). Siehe DESIGN.md. */ .has-marine-background-color a, .has-marine-background-color a:visited { color: var(--wp--preset--color--grund); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, .45); } .has-marine-background-color a:hover, .has-marine-background-color a:focus-visible { text-decoration-color: currentColor; } .has-marine-background-color a:focus-visible { outline-color: var(--wp--preset--color--grund); } .has-marine-background-color .wp-block-separator { border-color: rgba(255, 255, 255, .22); background: transparent; opacity: 1; } .has-marine-background-color strong { font-weight: 700; } /* --- Kartenraster --- auto-fit statt fester Spaltenzahl: Das Raster richtet sich nach dem tatsaechlich verfuegbaren Platz, nicht nach der Fensterbreite. Auf der Startseite steht es in voller Breite und ergibt drei Spalten, im schmaleren Inhaltsbereich von /kurse/ automatisch zwei. Mit festen Media Queries waeren die Karten dort auf 218px gequetscht worden. WordPress gibt in einem Flow-Layout jedem Geschwisterelement ausser dem ersten margin-block-start. In einem Raster schiebt das alle Karten ausser der ersten nach unten, deshalb hier zuruecksetzen. Den Abstand macht gap. */ .sw-raster { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: stretch; } .sw-raster > * { margin-block-start: 0; margin-block-end: 0; } /* --- Teamraster --- */ .sw-team-raster { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; } @media (min-width: 48rem) { .sw-team-raster { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 64rem) { .sw-team-raster { grid-template-columns: repeat(5, 1fr); } } .sw-team-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; } .sw-team-person img, .sw-team-person__leer { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top; border-radius: var(--sw-radius-pille); margin-bottom: 12px; background: var(--wp--preset--color--dunst); } .sw-team-person strong { font-family: var(--wp--preset--font-family--nunito); font-weight: 700; color: var(--wp--preset--color--marine); font-size: var(--wp--preset--font-size--m); line-height: 1.25; } .sw-team-person span { color: var(--wp--preset--color--text-weich); font-size: var(--wp--preset--font-size--s); line-height: 1.3; } /* --- Lange deutsche Komposita --- „Kleinkinderschwimmen" und „Erwachsenenschwimmen" sprengen die dreispaltige Karte. Die Ueberschrift in Karten laeuft deshalb eine Stufe kleiner und darf sauber trennen. Die Silbentrennung braucht lang="de" am html-Element, sonst greift das englische Woerterbuch. */ .sw-karte h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .sw-team-person strong { hyphens: auto; -webkit-hyphens: auto; } /* --- Bilder --- */ .sw-bild { margin: 0; border-radius: var(--sw-radius-bild); overflow: hidden; } .sw-bild img { display: block; width: 100%; height: auto; aspect-ratio: var(--sw-ar, 3 / 2); object-fit: cover; } .sw-bild--gross { box-shadow: var(--sw-schatten-hoch); } /* --- Kein weisser Streifen unter der Menueleiste --- .wp-site-blocks ist ein Flow-Layout und setzt zwischen Kopfbereich und main einen Abstand von 24px. Der erzeugt einen weissen Streifen ueber dem eingefaerbten Hero. */ .wp-site-blocks > main { margin-block-start: 0; } .wp-site-blocks > main > :first-child { margin-block-start: 0; } /* --- Menueleiste auf schmalen Schirmen --- Bei 390px passen Titel, Menueknopf und Schaltflaeche nicht nebeneinander, die Reihe bricht auf zwei Zeilen um. Deshalb: Titel kleiner, Beschriftung kuerzer, Abstaende enger. Ab 30rem steht wieder der volle Text. */ .sw-kopfreihe { flex-wrap: nowrap; gap: 12px; align-items: center; } .sw-ab-breit { display: none; } @media (min-width: 30rem) { .sw-ab-breit { display: inline; } } @media (max-width: 48rem) { .sw-kopfreihe .wp-block-site-title { font-size: 1.0625rem; line-height: 1.2; } .sw-kopfreihe .wp-block-button__link { padding-inline: 14px; padding-block: 9px; font-size: 0.8125rem; white-space: nowrap; } .sw-kopfreihe .wp-block-navigation__responsive-container-open { padding: 0; } } @media (max-width: 24rem) { .sw-kopfreihe .wp-block-site-title { font-size: 0.9375rem; } .sw-kopfreihe { gap: 8px; } } /* Der Markenname darf in der Leiste nicht umbrechen. */ .sw-kopfreihe .wp-block-site-title, .sw-kopfreihe .wp-block-site-title a { white-space: nowrap; } /* --- Flacher auf schmalen Schirmen --- Die Startseite war mobil rund 12.000 Pixel hoch. Zwei Stellschrauben: die Abschnittsabstaende und die Bildhoehe in den Karten. Die Abstaende werden ueber die Preset-Variablen gedreht, damit die Inline-Styles der Patterns automatisch mitziehen. */ @media (max-width: 48rem) { :root { --wp--preset--spacing--60: 36px; --wp--preset--spacing--70: 44px; --wp--preset--spacing--80: 64px; } .sw-karte > .sw-bild--karte img { --sw-ar: 5 / 2; } .sw-bild--gross img { --sw-ar: 3 / 2; } .sw-karte { gap: var(--wp--preset--spacing--25); } } /* --- Warum die Schwimmerei --- */ .sw-gruende { display: grid; gap: var(--wp--preset--spacing--40); /* 13rem statt 15rem: bei einem 1040er Fenster bleiben 992px nutzbare Breite, und darin passen mit 15rem nur drei Kacheln. Die vierte stand dann allein in der zweiten Zeile. */ grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); list-style: none; margin: 0; padding: 0; } .sw-grund { background: var(--wp--preset--color--grund); border: 1px solid var(--wp--preset--color--linie); border-radius: var(--sw-radius-karte); box-shadow: var(--sw-schatten-weich); padding: var(--wp--preset--spacing--40); height: 100%; } .sw-grund > * { margin-block: 0; } /* h2 gilt gleichermassen: Auf der Kontaktseite steht ueber den Kacheln nur die h1 der Seite, die Kartenueberschriften sind dort also h2. Ohne diese Regel greift die h2-Groesse aus der theme.json, und „Telefon" stuende in Titelgroesse in der Kachel. */ .sw-grund h2, .sw-grund h3 { font-family: var(--wp--preset--font-family--nunito); font-weight: 700; font-size: var(--wp--preset--font-size--l); line-height: 1.25; color: var(--wp--preset--color--marine); text-wrap: balance; margin-bottom: 6px; } .sw-grund p { color: var(--wp--preset--color--text-weich); font-size: var(--wp--preset--font-size--s); line-height: 1.5; } /* --- Newsletter mittig --- Das Formular steht zentriert unter der Ueberschrift. Die Beschriftungen bleiben linksbuendig, weil zentrierte Formularlabels schwer zu scannen sind und das Auge den Anfang der naechsten Zeile verliert. */ .sw-nl--mittig { display: flex; justify-content: center; } .sw-nl--mittig .sw-nl { width: 100%; max-width: 30rem; } .sw-nl--mittig .sw-nl__form { margin-inline: auto; } .sw-nl--mittig .sw-nl__form > p:last-child { display: flex; justify-content: center; } /* --- Einblenden beim Scrollen --- Die verbergende Regel haengt an .sw-anim am html-Element. Diese Klasse setzt erst das Skript, und nur wenn der Besucher keine reduzierte Bewegung eingestellt hat. Ohne JavaScript ist damit alles sichtbar. */ .sw-anim .sw-reveal { opacity: 0; transform: translate3d(0, 18px, 0); will-change: opacity, transform; } .sw-anim .sw-reveal.sw-sichtbar { opacity: 1; transform: none; transition: opacity .62s cubic-bezier(.22, .61, .36, 1) var(--sw-verzug, 0ms), transform .62s cubic-bezier(.22, .61, .36, 1) var(--sw-verzug, 0ms); } /* Bilder kommen zusaetzlich aus einer leichten Vergroesserung heran. Der Rahmen kappt den Ueberstand, dadurch wirkt es wie eine Kamerafahrt statt wie ein verrutschtes Bild. */ .sw-anim .sw-bild--gross.sw-reveal img { transform: scale(1.04); transition: transform 1.1s cubic-bezier(.22, .61, .36, 1); } .sw-anim .sw-bild--gross.sw-reveal.sw-sichtbar img { transform: none; } /* --- Hover auf Karten --- */ .sw-karte, .sw-grund { transition: transform .28s ease, box-shadow .28s ease; } @media (hover: hover) { .sw-karte:hover, .sw-grund:hover { transform: translateY(-4px); box-shadow: var(--sw-schatten-hoch); } .sw-karte:hover .sw-bild--karte img { transform: scale(1.05); } } .sw-karte .sw-bild--karte img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); } /* Tastaturbedienung darf denselben Effekt ausloesen. */ .sw-karte:focus-within { transform: translateY(-4px); box-shadow: var(--sw-schatten-hoch); } @media (prefers-reduced-motion: reduce) { .sw-karte, .sw-grund, .sw-karte .sw-bild--karte img { transition: none; } .sw-karte:hover, .sw-grund:hover, .sw-karte:focus-within { transform: none; } } /* --- Bäder-Abschnitte --- Bild und Text nebeneinander, bei jedem zweiten Bad seitenverkehrt. Auf schmalen Schirmen steht das Bild oben, unabhaengig von der Reihenfolge im Markup. */ .sw-bad { display: grid; gap: var(--wp--preset--spacing--60); align-items: center; grid-template-columns: 1fr; } @media (min-width: 52rem) { .sw-bad { grid-template-columns: 1fr 1fr; } .sw-bad--gedreht .sw-bad__bild { order: 2; } } .sw-bad__bild { border-radius: var(--sw-radius-bild); overflow: hidden; box-shadow: var(--sw-schatten-hoch); } .sw-bad__bild img, .sw-bad__leer { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--wp--preset--color--dunst); } .sw-bad__text > * { margin-block: 0; } .sw-bad__text .sw-pille { margin-bottom: 12px; } .sw-bad__text h2 { font-family: var(--wp--preset--font-family--nunito); font-weight: 700; font-size: var(--wp--preset--font-size--xxl); line-height: 1.15; color: var(--wp--preset--color--marine); text-wrap: balance; margin-bottom: 12px; } .sw-bad__beschreibung { color: var(--wp--preset--color--text-weich); margin-bottom: var(--wp--preset--spacing--35); } .sw-bad .sw-datenliste { margin-block: 0 var(--wp--preset--spacing--35); column-gap: var(--wp--preset--spacing--40); } .sw-bad__karte { font-size: var(--wp--preset--font-size--s); } @media (max-width: 34rem) { .sw-bad { gap: var(--wp--preset--spacing--40); } } /* --- Logo in der Menueleiste --- Der Schriftzug bleibt als Rueckfallebene im Markup stehen und wird nur ausgeblendet, wenn das Logo tatsaechlich geladen wurde. Faellt das Bild weg, steht wieder der Name da statt einer leeren Ecke. */ .sw-kopfreihe .sw-logo img { display: block; height: auto; /* 56px, damit der Schriftzug im Logo lesbar bleibt. Bei 40px war er nur noch 93px breit und nicht mehr zu entziffern. */ max-height: 56px; width: auto; } .sw-kopfreihe .sw-logo + .sw-logo-ersatz { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 48rem) { .sw-kopfreihe .sw-logo img { max-height: 34px; } } /* --- Trennlinie unter der Menueleiste --- Bewusst hier statt ueber die Block-Rahmeneigenschaft: Setzt man dort nur den unteren Rand, ergaenzt WordPress border-style solid auf allen vier Seiten. Oben, links und rechts entstand dadurch ein 3px breiter Rahmen in der Textfarbe. */ .sw-kopf { border-bottom: 1px solid var(--wp--preset--color--linie); } /* --- Abschnitte und ihr Abstand zur Welle --- Der Innenabstand steht bewusst hier und nicht als Inline-Style im Pattern. Nur so laesst er sich fuer Abschnitte vor einer Welle erhoehen: Inline-Styles schlagen jede CSS-Regel. Ohne diesen Zuschlag reicht die Welle weiter nach oben als der Abstand unter dem Inhalt, und die Schaumkronen beruehren die Unterkante der Karten. */ .sw-abschnitt { padding-block: var(--wp--preset--spacing--70); } .sw-abschnitt--schmal { padding-block: var(--wp--preset--spacing--60); } /* Gilt fuer jedes Element vor einer Welle, nicht nur fuer Abschnitte. Auf der Ueber-uns-Seite steht dort ein Absatz, und die Welle deckte dessen letzte Zeile ab. */ :has(+ * > .sw-welle) { padding-bottom: calc(var(--wp--preset--spacing--50) + var(--sw-welle-hoehe)); } /* Der Fussbereich traegt ebenfalls eine Welle, steht aber nicht im selben Elternelement wie der letzte Abschnitt. Deshalb bekommt main unten den Platz fuer sie. */ .wp-site-blocks > main { padding-bottom: var(--sw-welle-hoehe); } /* --- Symbole der Warum-Kacheln --- Als Hintergrundbild statt als Inline-SVG im Inhalt. Dadurch bestehen die Kacheln aus normalen Bloecken und lassen sich im Editor bearbeiten, ohne dass dort Code auftaucht. Das Symbol waehlt man ueber die Zusatzklasse der Gruppe. */ .sw-grund--thermometer::before { background-image: url('data:image/svg+xml,'); } .sw-grund--gruppe::before { background-image: url('data:image/svg+xml,'); } .sw-grund--sonne::before { background-image: url('data:image/svg+xml,'); } .sw-grund--herz::before { background-image: url('data:image/svg+xml,'); } /* Gemeinsame Form aller Symbolflaechen. */ .sw-grund::before { content: ""; display: block; width: 52px; height: 52px; border-radius: var(--sw-radius-pille); background-color: var(--wp--preset--color--dunst); background-repeat: no-repeat; background-position: center; background-size: 28px 28px; margin-bottom: 12px; } /* --- Seitenverhaeltnis ueber Klassen --- Vorher stand es als Inline-Variable am img. Das verletzte aber die erwartete Form des Bild-Blocks, und der Editor meldete ungueltigen Inhalt. Als Klasse an der figure bleibt das Markup kanonisch. */ .sw-ar-3-2 { --sw-ar: 3 / 2; } .sw-ar-4-3 { --sw-ar: 4 / 3; } .sw-ar-16-9 { --sw-ar: 16 / 9; } /* ========================================================================== Kursseiten mit Hero (page-kursart-gross) ========================================================================== Die Kursseiten bestanden aus einer einzigen weissen Textspalte. Die Bausteine hier zerlegen sie in Abschnitte, die zwischen grund, nebel und dunst wechseln, damit die Wellenkante ueberhaupt etwas zu trennen hat. Alle Klassen sind bewusst kursartunabhaengig benannt. Die uebrigen acht Kursseiten koennen sie uebernehmen, ohne dass hier etwas dazukommt. */ /* Die Gruende standen bisher nur als
  • in patterns/warum.php, und dort vergibt WordPress keine Flussabstaende. Im Seiteninhalt sind es Gruppen- bloecke, und die bekommen margin-block-start. Ohne diesen Ausgleich sitzt die erste Kachel hoeher als die uebrigen, genau wie bei .sw-raster. */ .sw-gruende > * { margin-block-start: 0; margin-block-end: 0; } /* --- Ablauf einer Kursstunde --- Auf schmalen Schirmen steht die Nummer links neben dem Text, auf breiten darueber. Jeder Schritt ist deshalb selbst ein Raster: Die Nummer wechselt nur ihre Zelle, das Markup bleibt in beiden Faellen dasselbe. Die Ziffer kommt aus einem CSS-Zaehler und nicht als Zeichen im Text. Wer im Editor einen Schritt einfuegt oder verschiebt, muss dadurch nicht von Hand nachzaehlen. */ .sw-ablauf { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); counter-reset: sw-schritt; } .sw-ablauf > * { margin-block-start: 0; margin-block-end: 0; } .sw-schritt { position: relative; counter-increment: sw-schritt; display: grid; grid-template-columns: 48px 1fr; column-gap: var(--wp--preset--spacing--35); row-gap: 4px; align-items: start; } .sw-schritt > * { grid-column: 2; margin-block: 0; } .sw-schritt::before { content: counter(sw-schritt); grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--sw-radius-pille); background: var(--wp--preset--color--blau); color: var(--wp--preset--color--grund); font-family: var(--wp--preset--font-family--nunito); font-weight: 800; font-size: 1.25rem; line-height: 1; position: relative; z-index: 1; } /* Die Verbindungslinie laeuft vom Kreis zum naechsten Schritt und macht aus vier Kacheln eine Abfolge. Der letzte Schritt fuehrt nirgendwohin. */ .sw-schritt::after { content: ""; position: absolute; left: 23px; top: 56px; bottom: calc(-1 * var(--wp--preset--spacing--50) + 8px); width: 2px; background: var(--wp--preset--color--linie); } .sw-schritt:last-child::after { display: none; } .sw-schritt h3 { font-family: var(--wp--preset--font-family--nunito); font-weight: 700; font-size: var(--wp--preset--font-size--l); line-height: 1.25; color: var(--wp--preset--color--marine); text-wrap: balance; } .sw-schritt p { color: var(--wp--preset--color--text-weich); font-size: var(--wp--preset--font-size--s); line-height: 1.5; } @media (min-width: 52rem) { .sw-ablauf { grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--40); } .sw-schritt { grid-template-columns: 1fr; } .sw-schritt > * { grid-column: 1; } .sw-schritt::before { grid-row: auto; margin-bottom: 14px; } /* Aus der senkrechten Linie wird eine waagerechte auf Hoehe der Kreismitte. Sie laeuft bis in den Rasterabstand hinein und trifft dort auf den naechsten Kreis. */ .sw-schritt::after { left: 56px; right: calc(-1 * var(--wp--preset--spacing--40)); top: 23px; bottom: auto; width: auto; height: 2px; } } /* --- Haeufige Fragen als Karten --- Der Details-Block bringt von Haus aus ein graues Dreieck und keinerlei Flaeche mit. Auf einer eingefaerbten Abschnittsflaeche sieht das nach vergessenem Inhalt aus. Als weisse Karten mit Haken werden daraus erkennbar anklickbare Zeilen. */ .sw-faq { display: grid; gap: var(--wp--preset--spacing--30); } .sw-faq > * { margin-block-start: 0; margin-block-end: 0; } .sw-faq .wp-block-details { background: var(--wp--preset--color--grund); border: 1px solid var(--wp--preset--color--linie); border-radius: var(--sw-radius-karte); box-shadow: var(--sw-schatten-weich); overflow: hidden; } .sw-faq summary { position: relative; cursor: pointer; list-style: none; padding: 15px var(--wp--preset--spacing--70) 15px var(--wp--preset--spacing--40); font-family: var(--wp--preset--font-family--nunito); font-weight: 700; color: var(--wp--preset--color--marine); } .sw-faq summary::-webkit-details-marker { display: none; } /* Der Haken besteht aus zwei Rahmenkanten, um 45 Grad gedreht. Beim Aufklappen dreht er weiter, statt gegen ein zweites Zeichen getauscht zu werden. Nur so laesst sich der Wechsel weich animieren. */ .sw-faq summary::after { content: ""; position: absolute; right: var(--wp--preset--spacing--40); top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--wp--preset--color--blau); border-bottom: 2px solid var(--wp--preset--color--blau); transform: translateY(-70%) rotate(45deg); transition: transform .25s ease; } .sw-faq details[open] summary::after { transform: translateY(-25%) rotate(225deg); } .sw-faq details > :not(summary) { margin-block: 0; padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--35); color: var(--wp--preset--color--text-weich); } @media (hover: hover) { .sw-faq summary:hover { background: var(--wp--preset--color--nebel); } } @media (prefers-reduced-motion: reduce) { .sw-faq summary::after { transition: none; } } /* --- Eckdaten als Karte --- Die Datenliste stand frei im Text und verschwand dort zwischen zwei Absaetzen. In einer weissen Karte auf der Flaeche dunst wird sie zu dem Nachschlagewerk, als das sie gemeint ist. */ .sw-faktenkarte { background: var(--wp--preset--color--grund); border: 1px solid var(--wp--preset--color--linie); border-radius: var(--sw-radius-karte); box-shadow: var(--sw-schatten-weich); padding: var(--wp--preset--spacing--50); } /* Die Datenliste bringt eigene Aussenabstaende mit. In der Karte kommt der Abstand vom blockGap der Gruppe, sonst summiert sich beides. */ .sw-faktenkarte .sw-datenliste { margin-block: 0; } .sw-preis { font-family: var(--wp--preset--font-family--nunito); font-weight: 800; font-size: var(--wp--preset--font-size--xl); line-height: 1.1; color: var(--wp--preset--color--marine); } /* Der Kutego-Block bringt seine Ueberschrift selbst mit. Im Anmelde- abschnitt der Kursseite steht sie mittig wie jede andere Abschnitts- ueberschrift. Die Regel haengt an der Abschnittsklasse, damit die Einbettungen auf den uebrigen Seiten unveraendert bleiben. */ .sw-anmeldung .sw-kutego__titel, .sw-anmeldung .sw-kutego__hinweis { text-align: center; } .sw-anmeldung .sw-kutego { margin-block: 0; } /* Foto und Eckdatenkarte stehen nebeneinander und sind unterschiedlich hoch. Zentriert ausgerichtet stand das Foto verloren neben der Karte. Deshalb streckt es sich auf deren Hoehe. Der Umbruchpunkt ist 782px, weil WordPress seine Spalten genau dort untereinander stellt. Ein eigener Wert wuerde entweder ein gestrecktes Bild im gestapelten Zustand erzeugen oder eine Luecke daneben. */ @media (min-width: 782px) { .sw-fakten > .wp-block-column { display: flex; flex-direction: column; justify-content: center; /* Bezugsgroesse fuer cqw weiter unten. */ container-type: inline-size; } .sw-fakten .sw-bild { height: 100%; /* Aber hoechstens quadratisch. Eine Karte mit Preis, fuenf Datenzeilen und Schaltflaeche wird deutlich hoeher als das Foto breit ist. Ohne Deckel zieht die Streckung das Foto ins Hochformat, und object-fit beschneidet es seitlich so stark, dass aus der Kursszene eine Nahaufnahme wird. 100cqw ist die Breite der Spalte, in der das Foto steht. Die Deckelung waechst also mit, statt an einem festen Pixelwert zu haengen. Bleibt Platz uebrig, verteilt ihn justify-content gleichmaessig ueber und unter das Foto. */ max-height: 100cqw; } /* aspect-ratio muss weichen, sonst rechnet der Browser die Hoehe aus der Breite und ignoriert die gestreckte Zelle. */ .sw-fakten .sw-bild img { height: 100%; aspect-ratio: auto; } } /* Vier weitere Symbole fuer die Kursseiten. Gleiche Bauart wie die vier darueber: 28er Flaeche, Strichstaerke 1,6, Farbe blau. */ .sw-grund--uhr::before { background-image: url('data:image/svg+xml,'); } .sw-grund--abzeichen::before { background-image: url('data:image/svg+xml,'); } .sw-grund--welle::before { background-image: url('data:image/svg+xml,'); } .sw-grund--person::before { background-image: url('data:image/svg+xml,'); } /* --- Lange Kursnamen in der Hero-Ueberschrift --- „Erwachsenenschwimmen" und „Kleinkinderschwimmen" sind breiter als die Hero-Spalte und brachen mitten im Wort um, ohne Trennstrich. Dieselbe Falle wie bei den Kartenueberschriften, nur eine Schriftgroesse hoeher. Die Silbentrennung braucht lang="de" am html-Element, sonst greift das englische Woerterbuch. Siehe Abschnitt „Sprache der Website". */ .sw-abschnitt h1 { hyphens: auto; -webkit-hyphens: auto; text-wrap: balance; } /* --- Kursvarianten als Karten --- Eigene Spaltenbreite statt der 16rem von .sw-raster: Die vier Stufen des Seepferdchenkurses passten bei einem 1040er Fenster nicht nebeneinander und brachen 3 + 1 um. Die vierte Karte stand dann allein. 13rem lassen vier Spalten zu und ergeben bei drei oder zwei Karten weiterhin genau so viele Spalten, wie Karten da sind. */ .sw-stufen { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } /* Drei Symbole fuer die Kontaktseite. Gleiche Bauart wie die acht darueber: 28er Flaeche, Strichstaerke 1,6, Farbe blau. */ .sw-grund--telefon::before { background-image: url('data:image/svg+xml,'); } .sw-grund--brief::before { background-image: url('data:image/svg+xml,'); } .sw-grund--sprechblase::before { background-image: url('data:image/svg+xml,'); } /* --- Kennzahlen im Seiteneinstieg --- Der Einstieg von „Ueber uns" darf bewusst nicht aussehen wie der einer Kursseite. Statt Text links und Foto rechts steht dort eine mittige Ueberschrift ueber einer Reihe nackter Zahlen: kein Rahmen, keine Schatten, nur Wert und Beschriftung. Bewusst als zwei Absaetze statt Ueberschrift plus Absatz. Eine Zahl ist keine Ueberschrift, und ein H3 mit dem Inhalt „2014" waere in der Gliederung eines Screenreaders sinnlos. */ .sw-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--wp--preset--spacing--50); } .sw-kennzahlen > * { margin-block-start: 0; margin-block-end: 0; } .sw-kennzahl { text-align: center; } .sw-kennzahl > * { margin-block: 0; } /* Erst ab 48rem stehen die Zahlen wirklich nebeneinander. Darunter stapeln sie, und eine linke Trennlinie liefe ins Leere. */ @media (min-width: 48rem) { .sw-kennzahl + .sw-kennzahl { border-left: 1px solid rgba(14, 58, 86, .14); } } .sw-kennzahl__wert { font-family: var(--wp--preset--font-family--nunito); font-weight: 800; font-size: var(--wp--preset--font-size--xxl); line-height: 1; color: var(--wp--preset--color--marine); } /* Steht bewusst nach .sw-kennzahl > *, sonst gewinnt dort margin-block: 0 bei gleicher Spezifitaet. */ .sw-kennzahl__text { margin-top: 8px; color: var(--wp--preset--color--text-weich); font-size: var(--wp--preset--font-size--s); line-height: 1.35; } /* Breites Bildband. Auf schmalen Schirmen greift die bestehende Regel fuer .sw-bild--gross und macht daraus wieder 3:2, weil 21:9 dort nur noch ein Streifen waere. */ .sw-ar-21-9 { --sw-ar: 21 / 9; } /* --- Lange Adressen im Fließtext --- In der Datenschutzerklärung stehen Links mit 77 Zeichen am Stück, etwa die Privacy-Shield-Adressen samt Parametern. Ein Wort ohne Leerzeichen bekommt vom Browser standardmäßig keine Umbruchstelle: Es ragt aus der Spalte hinaus. Sichtbar wäre das noch das kleinere Übel. Weil html und body auf overflow-x: clip stehen, damit nichts die Seite seitlich schiebt, wird der Überhang stattdessen still abgeschnitten. Bei 390 Pixeln fehlte so die halbe Adresse. break-word statt anywhere: Es bricht nur, wenn die Zeile sonst überliefe. Normale Wörter und die Silbentrennung bleiben unberührt. :where() gibt der Regel Spezifität null. Sie ist ein Sicherheitsnetz und soll nichts überschreiben, was ein Block selbst setzt. */ :where(p, li, dd, dt, td, figcaption, summary, address) { overflow-wrap: break-word; } /* Die Kachelüberschriften brauchen dieselbe Silbentrennung wie die Kartenüberschriften. „Tageslichtdurchflutete" ist 22 Zeichen lang und passt in einer zweispaltigen Kachelreihe nicht in eine Zeile. */ .sw-grund h2, .sw-grund h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }