/* Schwimmschule Mantarochen — Premium-Design des Relaunchs. CD-Basis der Alt-Site (Dunkelblau #0a4d88, Hellblau #1376b7), veredelt: Tiefwasser-Hero mit Wellen & Luftblasen, Glas-Header, Scroll-Reveals. Keine externen Fonts/Ressourcen (DSGVO); alle Effekte respektieren prefers-reduced-motion. */ :root { --blau: #0a4d88; --blau-hell: #1376b7; --tiefe: #052642; --blau-wasser: #e8f3fb; --tinte: #10222f; --grau: #5c6b77; --linie: #dfe7ee; --weiss: #ffffff; --akzent: #ffb020; --schatten: 0 18px 50px rgba(5, 38, 66, 0.16); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Das hidden-Attribut muss immer gewinnen. Eigene Regeln wie `.knopf { display: inline-block }` überstimmen sonst die Browser-Vorgabe `[hidden] { display: none }`, und ausgeblendete Elemente blieben sichtbar. */ [hidden] { display: none !important; } /* Manrope Variable, selbst gehostet (SIL OFL) — ein File, alle Gewichte */ @font-face { font-family: "Manrope"; src: url("/schriften/manrope-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "Manrope"; src: url("/schriften/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; } html { scroll-behavior: smooth; } body { font-family: "Manrope", -apple-system, "Segoe UI", Arial, sans-serif; font-size: 17px; line-height: 1.7; color: var(--tinte); background: var(--weiss); } ::selection { background: var(--blau-hell); color: var(--weiss); } :focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 6px; } img { max-width: 100%; height: auto; display: block; } /* Dunkles Markenblau für Links: Das Hellblau erreicht auf den hellblauen Flächen (Kästen, Wechselzeilen, Wasserabschnitte) nur 4,3:1 und verfehlt die 4,5:1 der WCAG. Das dunkle Blau besteht auf jedem hellen Untergrund der Seite. */ a { color: var(--blau); } /* Überschriften brauchen einen eigenen Zeilenabstand. Ohne diese Zeile erben sie die 1,7 des Fließtexts, und zweizeilige Überschriften fallen weit auseinander. `text-wrap: balance` verteilt die Wörter gleichmäßig, statt ein einzelnes Wort in die zweite Zeile zu schieben („Über die Schwimmschule / Mantarochen!"). */ h1, h2, h3, h4 { letter-spacing: -0.015em; overflow-wrap: break-word; line-height: 1.22; text-wrap: balance; } /* Nur auf sehr schmalen Geräten trennen: Dort sprengen lange deutsche Komposita („Rettungsschwimmen") sonst die Überschrift. Breiter wäre die Trennung unnötig und würde Wörter wie „erfahrene" mitten im Satz zerlegen. */ /* Silbentrennung erst ab 360 Pixeln abwärts. Bei 390 zerlegte sie zusammen mit `text-wrap: balance` sogar den Markennamen („Schwimm-schule"); nötig ist sie nur dort, wo lange Komposita wie „Rettungsschwimmen" sonst nicht mehr hineinpassen. */ @media (max-width: 360px) { h1, h2, h3, h4 { hyphens: auto; } } /* ---------- Kopf: Glas über dem Wasser ---------- */ .kopf { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(223, 231, 238, 0.7); transition: box-shadow 0.3s; } .kopf.getaucht { box-shadow: 0 8px 30px rgba(5, 38, 66, 0.10); } .kopf-innen { max-width: 1160px; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* Das Logo darf nie schrumpfen. Als Flex-Element würde es sonst in einer vollen Kopfzeile schmaler gedrückt, während die Höhe bleibt, und wäre gestaucht. */ .logo { flex: 0 0 auto; } .logo img { height: 96px; width: auto; } /* flex-wrap bewusst NICHT gesetzt: Bricht das Menü um, soll die Generalprobe es als Fehler melden, statt dass es still zweizeilig wird (so geschehen am 01.09., als Logo und FAQ-Punkt zusammen die Zeile sprengten). */ .nav { display: flex; gap: 2px; flex-wrap: nowrap; } .sozial { display: flex; gap: 10px; } .sozial a { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--weiss); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, filter 0.2s; } .sozial a.ig { background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%); box-shadow: 0 6px 16px rgba(238, 42, 123, 0.35); } .sozial a.fb { background: linear-gradient(180deg, #2b88ff, #1665d8); box-shadow: 0 6px 16px rgba(24, 119, 242, 0.35); } .sozial a:hover { transform: translateY(-2px) scale(1.06); filter: brightness(1.06); } .sozial a.ig:hover { box-shadow: 0 10px 24px rgba(238, 42, 123, 0.5); } .sozial a.fb:hover { box-shadow: 0 10px 24px rgba(24, 119, 242, 0.5); } .sozial svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .nav a { color: var(--tinte); text-decoration: none; font-weight: 600; padding: 9px 11px; border-radius: 999px; font-size: 15.5px; white-space: nowrap; transition: background 0.2s, color 0.2s; } .nav a:hover, .nav a[aria-current="page"] { background: var(--blau); color: var(--weiss); } /* Rechte Gruppe: Aufruf, Soziales, Menü. Das Menü sitzt ganz rechts außen, weil es dort mit dem Daumen am leichtesten zu erreichen ist (Chef-Wunsch 28.08.). */ .kopf-rechts { display: flex; align-items: center; gap: 12px; } .nav-schalter { display: none; background: var(--weiss); border: 1px solid var(--linie); border-radius: 13px; width: 46px; height: 46px; padding: 0; cursor: pointer; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; } .nav-schalter:hover { background: var(--blau-wasser); border-color: var(--blau-hell); } /* Drei Striche, die sich beim Öffnen zum Kreuz drehen */ .burger, .burger::before, .burger::after { display: block; width: 21px; height: 2.2px; border-radius: 2px; background: var(--blau); transition: transform 0.28s ease, opacity 0.2s ease; } .burger { position: relative; } .burger::before, .burger::after { content: ""; position: absolute; left: 0; } .burger::before { top: -7px; } .burger::after { top: 7px; } .nav-schalter[aria-expanded="true"] .burger { background: transparent; } .nav-schalter[aria-expanded="true"] .burger::before { transform: translateY(7px) rotate(45deg); } .nav-schalter[aria-expanded="true"] .burger::after { transform: translateY(-7px) rotate(-45deg); } /* Zwischen 901 und 1180 Pixeln wird die Kopfzeile eng: sieben Menüpunkte, Aufruf und zwei Sozialknöpfe. Statt das Logo zu quetschen, wird hier alles etwas kompakter. */ @media (max-width: 1180px) and (min-width: 1001px) { .logo img { height: 76px; } .nav a { padding: 8px 8px; font-size: 14px; } .kopf-rechts { gap: 8px; } .kopf-cta { padding: 8px 12px; font-size: 0.86rem; } .sozial { gap: 7px; } .sozial a { width: 38px; height: 38px; } .kopf-innen { gap: 10px; } } @media (max-width: 1000px) { .nav-schalter { display: flex; } .nav { display: none; width: 100%; flex-direction: column; padding-bottom: 12px; order: 10; } .nav.offen { display: flex; } .kopf-innen { flex-wrap: wrap; padding: 8px 14px; gap: 10px; } .logo img { height: 58px; } .kopf-rechts { margin-left: auto; gap: 9px; } .sozial a { width: 40px; height: 40px; border-radius: 12px; } .sozial svg { width: 18px; height: 18px; } .nav-schalter { width: 44px; height: 44px; } } @media (max-width: 380px) { .kopf-rechts { gap: 7px; } .sozial { gap: 7px; } .sozial a { width: 37px; height: 37px; } .nav-schalter { width: 41px; height: 41px; } } /* ---------- Held: Tiefwasser mit Wellen & Luftblasen ---------- */ .held { position: relative; overflow: hidden; background: linear-gradient(168deg, var(--tiefe) 0%, var(--blau) 46%, var(--blau-hell) 100%); color: var(--weiss); } /* Keine volle Bildschirmhöhe mehr: Auf hohen Monitoren entstand darunter ein leerer blauer Streifen von mehreren hundert Pixeln (Chef-Hinweis 29.08.). Die Höhe ergibt sich jetzt aus dem Inhalt und ist nach oben gedeckelt. */ .held-innen { position: relative; z-index: 3; max-width: 1160px; margin: 0 auto; /* Unten so viel Luft, dass die Wellen den Inhalt nicht überdecken */ padding: 32px 20px 110px; display: grid; grid-template-columns: 1.08fr 0.92fr; grid-template-rows: auto auto auto; grid-template-areas: "kopf bild" "text bild" "quali bild"; align-content: center; column-gap: 48px; row-gap: 0; align-items: center; min-height: 0; } /* Standardmäßig wirkungslos: Markenzeile und Text bleiben eigene Rasterfelder, genau wie vor dem 31.08. Erst ab 1200 Pixeln wird die Hülle zum Feld „links". */ .held-links { display: contents; } .held-kopf { grid-area: kopf; } .held-text { grid-area: text; } .held-quali { grid-area: quali; } /* Die Höhe des Heldes wird vom Porträt bestimmt. Es zu begrenzen ist der richtige Hebel; ein max-height auf dem Abschnitt würde bei „overflow: hidden" Inhalt abschneiden (auf dem Telefon fehlte damit die ganze Zusatzzeile). */ /* NUR grid-area, kein zusätzliches grid-row: Der benannte Bereich „bild" deckt die Zeilen bereits ab. Ein hartes `grid-row: 1 / 4` stand hier bis zum 01.09. und überstimmte in JEDEM Umbruch die Zeilenzuweisung des jeweiligen Rasters — auf dem Telefon schob es das Porträt in die Kopfzeile, Andreas' Kopf lag über dem Google-Siegel. */ .held-bild { grid-area: bild; max-width: 440px; margin-left: auto; align-self: center; } /* Markenname im Held. Das Logo steht schon in der Kopfzeile darüber; zweimal dasselbe Logo untereinander wirkte auf dem Blau unruhig (Chef-Entscheid 29.08.). */ /* Markenname im Held als gestaffelter Schriftzug (Chef-Wunsch 01.09.: „noch größer, direkt groß gesehen"). Einzeilig ließe sich der Name nicht weiter vergrößern: „Schwimmschule Mantarochen" ist 25 Zeichen breit und stieße in der Textspalte an. Deshalb zwei Zeilen wie ein Wortmarken-Lockup: oben klein und weit gesperrt „Schwimmschule", darunter groß „Mantarochen". Für Screenreader bleibt es EIN Absatz mit dem vollständigen Namen. */ .held-marke { display: flex; flex-direction: column; color: var(--weiss); text-transform: uppercase; margin-bottom: 18px !important; } .marke-oben { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.34em; opacity: 0.88; /* KEIN negativer Randausgleich für die Sperrung hinter dem letzten Buchstaben: Bei linksbündigem Text ist er unsichtbar, und ein negativer Rand ließe den Inhalt über die Elementbox hinausragen — die Überlaufprüfung der Generalprobe meldet das zu Recht als herauslaufenden Text. */ } .marke-unten { font-size: clamp(1.9rem, 2.3vw + 1rem, 2.5rem); font-weight: 800; letter-spacing: 0.045em; line-height: 1.12; } /* Google-Gütesiegel: gestaltete Glasplakette statt bloßer Textzeile. Sie trägt den stärksten Vertrauensbeweis und darf entsprechend aussehen. */ .held-guetesiegel { display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px; margin-bottom: 26px; border-radius: 999px; line-height: 1; white-space: nowrap; color: var(--weiss); text-decoration: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.09)); border: 1px solid rgba(255, 255, 255, 0.32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 28px rgba(2, 20, 38, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .gs-sterne { color: var(--akzent); letter-spacing: 2.5px; font-size: 1rem; text-shadow: 0 0 14px rgba(255, 176, 32, 0.6); } .gs-teiler { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.3); flex: 0 0 auto; } .gs-text { font-size: 0.92rem; } .gs-text strong { font-size: 1.12rem; font-weight: 800; margin-right: 2px; } /* Als Verweis aufs Google-Profil bekommt das Siegel ein Pfeilchen und hebt beim Zeigen ab */ .gs-verweis { transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .gs-verweis:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 14px 34px rgba(2, 20, 38, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .gs-pfeil { font-weight: 800; opacity: 0.75; } .held h1 { font-size: clamp(2.1rem, 4.8vw, 3.5rem); line-height: 1.08; font-weight: 800; margin-bottom: 18px; text-wrap: balance; } .held-versprechen { font-size: 1.18rem; opacity: 0.94; margin-bottom: 14px !important; max-width: 34rem; } .held-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; } /* Andreas' Qualifikationen als Reihe unter den Knöpfen. Frei schwebend neben der Person stießen sie bei rund 1440 Pixeln an die Überschrift (Chef-Hinweis 29.08.). */ .held-quali { list-style: none; margin: 26px 0 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; max-width: 40rem; } .held-quali li { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; line-height: 1.2; white-space: nowrap; background: rgba(5, 38, 66, 0.45); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; padding: 6px 14px 6px 6px; } .quali-icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 176, 32, 0.18); border: 1px solid rgba(255, 176, 32, 0.45); color: var(--akzent); display: flex; align-items: center; justify-content: center; } .quali-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Vertrauensleiste unter dem Held ---------- */ .vertrauensleiste { background: var(--blau-wasser); border-bottom: 1px solid var(--linie); } .vertrauensleiste ul { max-width: 1160px; margin: 0 auto !important; padding: 14px 20px !important; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 26px; font-size: 0.95rem; font-weight: 700; color: var(--blau); } .vertrauensleiste li { display: flex; align-items: center; gap: 10px; margin: 0; } /* Trennpunkte zwischen den Angaben, aber nicht vor der ersten */ .vertrauensleiste li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blau-hell); opacity: 0.5; flex: 0 0 auto; } @media (max-width: 760px) { /* Untereinander gestapelt: Die Trennpunkte stünden am Zeilenanfang und sähen aus wie Aufzählungszeichen. */ .vertrauensleiste ul { flex-direction: column; gap: 5px; padding: 12px 16px !important; font-size: 0.85rem; } .vertrauensleiste li + li::before { display: none; } } /* Andreas im Held: freigestellt, ohne Bildkachel. Er steht direkt im Wasser, ein weicher Lichtschein dahinter hebt ihn vom Verlauf ab, ein Schlagschatten unter ihm erdet ihn, damit er nicht aufgeklebt wirkt. */ .held-bild { position: relative; margin: 0; z-index: 2; } .held-bild img { width: 100%; display: block; /* KEIN drop-shadow: Andreas' Arme und Haare berühren die Bildkanten, deshalb warf der Schatten dort gerade Linien und es entstand wieder ein Kästchen. Er hebt sich auch ohne Schatten deutlich vom Wasser ab. */ /* Das Originalfoto endet an der Hüfte. Statt einer harten Schnittkante läuft die Person nach unten weich aus, als stünde sie im Wasser. */ -webkit-mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0.55) 92%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0.55) 92%, transparent 100%); } /* Namenszeile: eigenes Rasterelement, damit sie auf dem Telefon neben statt über der Person stehen kann. Bewusst ohne Kasten, nur mit senkrechtem Strich. */ .held-person { position: absolute; z-index: 3; left: 57%; bottom: 16%; display: flex; flex-direction: column; line-height: 1.35; margin: 0 !important; padding-left: 13px; border-left: 3px solid var(--akzent); text-shadow: 0 2px 14px rgba(2, 20, 38, 0.85), 0 1px 3px rgba(2, 20, 38, 0.7); } .held-person strong { font-size: 1.06rem; font-weight: 800; } .held-person span { font-size: 0.86rem; opacity: 0.92; } /* Breite Bildschirme: Plaketten direkt neben Andreas (Kundenwunsch 31.08.). Vorher standen sie als Reihe unter den Knöpfen; neben ihm blieb Fläche leer. Eigene, dritte Spalte zwischen Text und Porträt — genau das, was am 29.08. noch schiefging, als sie frei schwebten und bei 1440 an die Überschrift stießen. Feste Breiten für Plaketten und Porträt, damit die Geometrie ab 1200 Pixeln konstant bleibt und die Überschrift verlässlich Platz behält. Erst ab 1200 Pixeln: Darunter wird der Text zu schmal und die Überschrift bräche vierzeilig um. */ @media (min-width: 1200px) { /* EINE Zeile, drei Spalten. Entscheidend ist die eine Zeile: Sobald Plaketten oder Porträt mehrere Zeilen überspannen, verteilt das Raster ihre Höhe auf diese Zeilen und reißt eine Lücke zwischen Markenname und Überschrift. */ .held-innen { grid-template-columns: 1fr 200px 380px; grid-template-areas: "links quali bild"; grid-template-rows: auto; column-gap: 28px; } .held-links { display: flex; flex-direction: column; grid-area: links; align-self: center; } .held-bild { max-width: 380px; margin-left: 0; } .held-quali { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; margin: 0 !important; max-width: none; } .held-quali li { /* Neben dem Porträt ist die Spalte schmal: Umbruch und Trennung erlauben, sonst wächst die Plakette über die Spalte hinaus (siehe 31.08.). */ font-size: 0.78rem; white-space: normal; min-width: 0; hyphens: auto; overflow-wrap: break-word; } /* Die Namenszeile gehört zum Porträt. Statt sie per Prozentwert über den Held zu legen — was bei jeder Höhenänderung neu wandert — sitzt sie hier im selben Rasterfeld wie das Bild und wird an dessen unteren Rand gestellt. */ .held-person { position: static; grid-area: bild; align-self: end; justify-self: start; margin: 0 0 10px !important; } } /* Der Held bricht erst bei 760 Pixeln um, nicht schon bei 900. Zwischen 760 und 900 ist noch genug Platz für zwei Spalten; würde dort schon gestapelt, bliebe die halbe Fläche neben dem Porträt leer. Die Kopfzeile klappt davon unabhängig bei 900 um. */ @media (max-width: 900px) and (min-width: 761px) { .held-innen { column-gap: 32px; padding: 48px 20px 110px; } } @media (max-width: 760px) { /* Gestapelt: zuerst Marke und Gesicht, dann Versprechen und Knöpfe. */ .held-innen { /* Porträt links, rechts daneben Name und Qualifikationen, darunter der Textblock. Die Plaketten kosten so keine zusätzliche Höhe (Chef-Wunsch 30.08.). */ grid-template-columns: minmax(0, auto) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "kopf kopf" "bild person" "bild quali" "text text"; align-content: start; /* Oben Platz für das Bewertungs-Siegel, das frei über dem Held sitzt. Die Höhen sind so gestaffelt, dass Marke, Porträt, Überschrift und der Buchungsknopf gemeinsam auf den ersten Bildschirm passen. */ padding: 26px 18px 88px; min-height: 0; row-gap: 12px; column-gap: 0; } /* Das Porträt behält im gestapelten Layout seine Hochformat-Proportion. Ohne Maximalbreite zöge es sich über die volle Seitenbreite und der Beschnitt schnitte Andreas quer durchs Gesicht. */ .held-bild { margin: 0; max-width: 300px; } /* Auf dem Telefon ist neben Andreas kein Platz. Die Qualifikationen rücken unter das Porträt und bleiben damit unmittelbar bei ihm. */ .held-person { position: static; grid-area: person; margin: 0 0 10px 12px !important; align-self: end; text-shadow: none; } .held-quali { grid-area: quali; margin: 0 0 0 12px !important; align-self: start; /* `minmax(0, 1fr)` statt `1fr`: Ein Rasterfeld ist von Haus aus mindestens so breit wie der Inhalt es verlangt und schrumpft sonst nicht darunter. Mit „Fachsportleiter Schwimmen" wurden die Plaketten dadurch 178 Pixel breit, obwohl die Spalte nur 136 hergab, und liefen rechts aus dem Held. */ display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; max-width: none; } /* Umbruch innerhalb der Plakette erlauben. Oben steht `white-space: nowrap`; seit „Fachsportleiter Schwimmen" (Kundenwunsch 31.08.) passt die längste Bezeichnung neben dem Porträt nicht mehr in eine Zeile und lief rechts aus dem Held heraus. Das fiel nicht als Seitenüberlauf auf, weil `.held` `overflow: hidden` hat — der Text war einfach abgeschnitten. */ .held-quali li { font-size: 0.72rem; padding: 4px 10px 4px 4px; gap: 7px; /* `min-width: 0` aus demselben Grund wie oben, hier für das Feld selbst. */ white-space: normal; min-width: 0; } .quali-icon { width: 22px; height: 22px; } .quali-icon svg { width: 12px; height: 12px; } /* Auf dem Telefon bewusst groß (Chef-Wunsch 01.09.: „noch viel zu klein"): „MANTAROCHEN" füllt damit fast die Zeilenbreite. Die Deckelung übernehmen die Höhenstaffeln weiter unten — auf kurzen Telefonen (iPhone SE und ähnliche) bleibt der Schriftzug kompakter, sonst rutschte der Buchungsknopf unter die Falz. Die Generalprobe prüft das auf acht Größen. */ /* „MANTAROCHEN" füllt die Bildschirmbreite (Chef-Wunsch 01.09., dritte Runde: „passend zum Screen"). 10,6vw ergeben auf allen gängigen Breiten rund 95 % der verfügbaren Zeile; die Obergrenze verhindert, dass breite Telefone ins Groteske wachsen. Nachgemessen auf 320 bis 430 Pixeln. */ .held-marke { margin-bottom: 12px !important; } /* Vierte Runde (Chef 01.09.): beide Zeilen noch einen Tick groesser. „Schwimmschule" laeuft jetzt fast auf Zeilenbreite mit, „Mantarochen" nutzt sie ganz aus. Nachgemessen auf 320 bis 430 Pixeln. */ .marke-oben { font-size: 1.05rem; letter-spacing: 0.29em; } .marke-unten { font-size: clamp(2.05rem, 10.8vw, 2.75rem); } .held-guetesiegel { margin-bottom: 0; padding: 8px 15px; gap: 10px; } .gs-text { font-size: 0.86rem; } .gs-text strong { font-size: 1.04rem; } .held-text { padding-top: 0; display: flex; flex-direction: column; } .held h1 { order: 1; } .held-knoepfe { order: 2; margin-bottom: 0; } .held-versprechen { order: 3; } .held-zusatz { order: 4; } } @media (max-width: 640px) { /* Knapp bemessen, damit Marke, Porträt, Überschrift und der Buchungsknopf gemeinsam auf den ersten Bildschirm eines Telefons passen. Das freigestellte Porträt ist höher als ein Beschnitt, deshalb schmaler. */ .held-bild { max-width: 176px; } .held-person strong { font-size: 0.94rem; } .held-person span { font-size: 0.78rem; } .held-quali li { font-size: 0.8rem; } /* Auf schmalen Telefonen skaliert die Überschrift mit der Breite statt fix 2,1 rem: Die Zeile „Schwimmen lernen mit Vertrauen, Sicherheit und Freude." (14.09.) brach bei 360 Pixeln sonst in eine vierte Zeile um und drückte den Buchungsknopf unter die Falz. Die Höhenstufen weiter unten (820/720/620 px) überschreiben das auf kurzen Geräten wie gehabt. */ .held h1 { font-size: clamp(1.66rem, 8vw, 2.1rem); } } /* Schmale Telefone: Neben dem Porträt bleiben der Plakettenspalte nur rund 140 Pixel. Seit „Fachsportleiter Schwimmen" (Kundenwunsch 31.08.) umbricht die längste Bezeichnung dort zweizeilig; bei 0,8 rem wurde die Spalte dadurch höher als das Porträt und schob den Buchungsknopf unter die Falz. Kleiner gesetzt passt wieder alles auf den ersten Bildschirm. Steht hinter dem 640er-Block, sonst gewänne dessen 0,8 rem. */ @media (max-width: 420px) { .held-quali { gap: 4px; } .held-quali li { font-size: 0.66rem; padding: 3px 9px 3px 3px; gap: 6px; /* Einzelne lange Wörter („Leistungsschwimmer") sind breiter als die Spalte und liefen sonst aus der Plakette heraus. `hyphens` trennt sie sauber nach deutschen Regeln (die Seite ist `lang="de"`), `overflow-wrap` fängt die Fälle ab, für die der Browser keine Trennstelle kennt. */ hyphens: auto; overflow-wrap: break-word; } .quali-icon { width: 20px; height: 20px; } .quali-icon svg { width: 11px; height: 11px; } } /* Erst wenn wirklich kein Platz mehr ist, gehen die Knöpfe über die volle Breite */ @media (max-width: 480px) { .held-knoepfe .knopf { flex: 1 1 100%; text-align: center; } } /* Kurze Telefone (iPhone SE und ähnliche): Porträt kleiner, damit Marke, Gesicht, Überschrift und Buchungsknopf gemeinsam über der Aktionsleiste bleiben. */ /* Mittelhohe Telefone (Galaxy A und ähnliche, um 800 Pixel): Der bildschirm- breite Schriftzug kostet hier die letzten Pixel des Budgets — Abstände einen Tick enger, damit der Buchungsknopf über der Falz bleibt. */ @media (max-width: 640px) and (max-height: 820px) { .held-innen { row-gap: 10px; } .held-marke { margin-bottom: 7px !important; } .marke-oben { font-size: 0.78rem; } .held h1 { margin-bottom: 12px; } } @media (max-width: 640px) and (max-height: 720px) { .held-innen { padding-top: 20px; row-gap: 9px; } /* Der zweizeilige Schriftzug (01.09.) kostet gegenüber der alten einzeiligen Marke rund 30 Pixel; auf kurzen Telefonen müssen sie hier wieder rein, sonst rutscht der Buchungsknopf unter die Falz. */ .marke-oben { font-size: 0.6rem; letter-spacing: 0.22em; } .marke-unten { font-size: 1.28rem; } .held-marke { margin-bottom: 6px !important; } .held-bild { max-width: 146px; } .held-quali { gap: 3px; margin-left: 10px !important; } .held-quali li { font-size: 0.66rem; padding: 2px 9px 2px 2px; } .quali-icon { width: 19px; height: 19px; } .quali-icon svg { width: 11px; height: 11px; } .held h1 { font-size: 1.58rem; margin-bottom: 7px; } /* Aktionsleiste etwas flacher, damit der Hero mehr Raum bekommt */ .handleiste { padding: 7px 11px calc(7px + env(safe-area-inset-bottom)); } .handleiste a { min-height: 44px; font-size: 0.68rem; } } /* Sehr kurze Geräte (iPhone SE der ersten Generation, 568 Pixel hoch): Hier zählt jeder Pixel. Aktionsleiste flacher, Porträt und Überschrift kleiner. */ @media (max-width: 640px) and (max-height: 620px) { /* Auf 568 Pixeln Höhe passen Marke, Gesicht, Qualifikationen, Überschrift UND Buchungsknopf nicht gemeinsam über die Aktionsleiste. Der Knopf liegt hier bewusst knapp darunter; die Leiste bietet „Kursplatz sichern" ohnehin durchgehend an, der Buchungsweg geht also nicht verloren. */ .held-innen { padding-top: 14px; row-gap: 7px; } .held-bild { max-width: 126px; } .held-quali { gap: 3px; margin-left: 8px !important; } .held-quali li { font-size: 0.6rem; padding: 2px 7px 2px 2px; } .quali-icon { width: 17px; height: 17px; } .quali-icon svg { width: 10px; height: 10px; } .held-person strong { font-size: 0.88rem; } .held-person span { font-size: 0.74rem; } /* 1,3 rem statt 1,4: Die Überschrift „Schwimmen lernen mit Vertrauen, Sicherheit und Freude" (14.09.) ist länger als ihre Vorgängerin und bräuchte bei 1,4 rem auf 320 Pixeln eine dritte Zeile, die sie unter die Falz drückt. */ .held h1 { font-size: 1.3rem; margin-bottom: 7px; } .held-knoepfe { margin-bottom: 12px; } .handleiste { padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); gap: 6px; } .handleiste a { min-height: 42px; padding: 5px 8px; font-size: 0.66rem; } .handleiste-haupt { font-size: 0.9rem !important; } .handleiste svg { width: 17px; height: 17px; } .fuss-zeile { padding-bottom: 70px; } } /* Luftblasen steigen auf */ .blasen { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .blase { position: absolute; bottom: -60px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0.06) 62%); animation: aufsteigen linear infinite; } @keyframes aufsteigen { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; } 8% { opacity: 0.7; } 92% { opacity: 0.5; } 100% { transform: translateY(-115vh) translateX(40px) scale(1.15); opacity: 0; } } /* Echtzeit-Wasser (Shader-Leinwand) hinter allem im Held */ .wasser-shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* Die Mantarochen leben jetzt IM Wasser-Shader (Textur-Sprites in derselben Leinwand) — kein DOM-Bild mehr, damit ist jeder Compositing-Kasten ausgeschlossen. Siehe wasserShaderScript() in build.js. */ /* Wellen am Grund des Helden. Im Held liegen sie ÜBER dem freigestellten Andreas, damit er aus dem Wasser auftaucht statt unten hart abgeschnitten zu werden. */ .wellen { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 2; pointer-events: none; } .held > .wellen { z-index: 4; } .wellen svg { display: block; width: 200%; height: 110px; } .welle-hinten { animation: wogen 18s linear infinite; opacity: 0.45; } .welle-vorne { animation: wogen 11s linear infinite reverse; position: absolute; bottom: 0; } @keyframes wogen { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Knöpfe ---------- */ .knopf { display: inline-block; text-decoration: none; font-weight: 700; padding: 14px 28px; border-radius: 999px; font-size: 1.03rem; transition: transform 0.2s, box-shadow 0.2s, filter 0.2s; } .knopf:hover { transform: translateY(-2px); } .knopf-voll { background: linear-gradient(180deg, #ffc24d, #ffab00); color: #201400; box-shadow: 0 10px 26px rgba(255, 176, 32, 0.35); } .knopf-voll:hover { filter: brightness(1.05); box-shadow: 0 14px 32px rgba(255, 176, 32, 0.45); } .knopf-rand { border: 2px solid rgba(255,255,255,0.85); color: var(--weiss); margin-left: 10px; } .knopf-rand:hover { background: rgba(255,255,255,0.12); } .knopf-blau { background: var(--blau); color: var(--weiss); box-shadow: 0 8px 22px rgba(10, 77, 136, 0.28); } .knopf-klein { padding: 9px 18px; font-size: 0.92rem; } .knopf-rand-blau { border: 1.5px solid var(--blau-hell); color: var(--blau); background: var(--weiss); } .knopf-rand-blau:hover { background: var(--blau-wasser); } /* Kopfzeilen-Aufruf: der Buchungsweg ist auf jeder Seite einen Klick entfernt */ .kopf-cta { display: none; } @media (min-width: 1001px) { .kopf-cta { display: inline-block; white-space: nowrap; } } /* Nur für Screenreader (Tabellenspalte ohne sichtbare Überschrift) */ .sr-nur { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Seitenkopf für Unterseiten ---------- */ .seitenkopf { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--tiefe) 0%, var(--blau) 60%, var(--blau-hell) 100%); color: var(--weiss); } .seitenkopf-innen { max-width: 1160px; margin: 0 auto; padding: 54px 20px 78px; position: relative; z-index: 3; } .seitenkopf h1 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); font-weight: 800; line-height: 1.15; } .seitenkopf .krumen, .seitenkopf .krumen a { color: rgba(255, 255, 255, 0.75); } .seitenkopf .wellen svg { height: 70px; } /* ---------- Abschnitte ---------- */ .abschnitt { max-width: 1160px; margin: 0 auto; padding: 60px 20px; } .abschnitt-wasser { background: var(--blau-wasser); } .abschnitt-wasser > .abschnitt-innen { max-width: 1160px; margin: 0 auto; padding: 60px 20px; } .abschnitt h2, .abschnitt-innen h2 { color: var(--blau); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; margin-bottom: 18px; } .abschnitt h3, .abschnitt-innen h3 { color: var(--blau); font-size: 1.3rem; font-weight: 700; margin: 30px 0 10px; } .abschnitt p, .abschnitt-innen p { margin-bottom: 14px; } .abschnitt ul, .abschnitt ol, .abschnitt-innen ul, .abschnitt-innen ol { margin: 0 0 14px 22px; } .abschnitt li { margin-bottom: 6px; } .einleitung { font-size: 1.15rem; color: var(--grau); max-width: 800px; } /* ---------- Karten ---------- */ .karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; margin-top: 30px; } .karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s, transform 0.3s; } .karte:hover { box-shadow: var(--schatten); transform: translateY(-5px); } .karte img { aspect-ratio: 3/2; object-fit: cover; transition: transform 0.5s ease; } .karte:hover img { transform: scale(1.06); } .karte-text { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; align-items: flex-start; } .karte-text > * { width: 100%; } /* Die Marke soll nur so breit sein wie ihr Text, nicht wie die ganze Karte */ .karte-text .ort-marke { width: auto; } .karte h2, .karte h3 { margin: 0 0 8px !important; color: var(--blau); font-size: 1.18rem; font-weight: 700; } .karte p { color: var(--grau); font-size: 0.99rem; flex: 1; margin-bottom: 12px; } .karte a.weiter { font-weight: 700; text-decoration: none; } .karte a.weiter:hover { text-decoration: underline; } /* Standortkarte: Bad benennen und zwei klare Wege anbieten (ansehen oder buchen) */ .karte-bad { flex: 0 0 auto !important; margin-bottom: 6px !important; font-weight: 600; color: var(--blau-hell) !important; font-size: 0.92rem !important; } .karte-knoepfe { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; } .karte-knoepfe .knopf { flex: 1 1 auto; text-align: center; } /* ---------- Vertrauens-Kacheln (Qualifikationen) ---------- */ /* Desktop: alle fünf bündig in einer Reihe; unterwegs: elegante Wischleiste */ .vorteile { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 18px; margin-top: 28px; } @media (max-width: 1020px) { .vorteile { overflow-x: auto; grid-auto-columns: min(300px, 82vw); scroll-snap-type: x mandatory; padding: 4px 4px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .vorteil-k { scroll-snap-align: center; } } .vorteil-k { border: 1px solid var(--linie); border-radius: 18px; padding: 22px 20px; background: var(--weiss); transition: box-shadow 0.3s, transform 0.3s; } .vorteil-k:hover { box-shadow: var(--schatten); transform: translateY(-4px); } .vorteil-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--blau-wasser); color: var(--blau-hell); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .vorteil-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .vorteil-k h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--blau); } .vorteil-k p { color: var(--grau); font-size: 0.95rem; margin: 0; } /* ---------- Kontaktwege ---------- */ .kontaktwege { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 24px 0; } .kontaktweg { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; text-decoration: none; border: 1px solid var(--linie); background: var(--weiss); color: var(--tinte); transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s; } .kontaktweg:hover { box-shadow: var(--schatten); transform: translateY(-3px); border-color: var(--blau-hell); } .kontaktweg > span:last-child { display: flex; flex-direction: column; min-width: 0; } .kontaktweg strong { color: var(--blau); font-size: 1.05rem; } .kontaktweg span span { color: var(--grau); font-size: 0.9rem; overflow-wrap: anywhere; } .kontaktweg-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--blau-wasser); color: var(--blau-hell); } .kontaktweg-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .kw-wa .kontaktweg-icon { background: #e7f7ec; color: #1faa53; } /* ---------- Wassersicherheits-Check ---------- */ .wc-zitat { margin: 0 0 34px; padding: 26px 30px; background: linear-gradient(150deg, var(--tiefe), var(--blau)); color: var(--weiss); border-radius: 20px; box-shadow: var(--schatten); } .wc-zitat blockquote { margin: 0 0 10px; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800; line-height: 1.35; text-wrap: balance; } .wc-zitat blockquote::before { content: "„"; } .wc-zitat blockquote::after { content: "“"; } .wc-zitat figcaption { font-size: 0.9rem; opacity: 0.85; } .wc-test { border: 1.5px solid var(--blau-hell); border-radius: 20px; padding: 26px 28px; margin-bottom: 34px; background: linear-gradient(180deg, var(--blau-wasser), #f4faff); } .wc-fortschritt { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blau-hell); margin-bottom: 14px !important; } .wc-frage { border: 0; padding: 0; margin: 0; } .wc-frage legend { font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 800; color: var(--blau); line-height: 1.3; padding: 0; margin-bottom: 8px; } .wc-hinweis { color: var(--grau); font-size: 0.95rem; margin-bottom: 16px !important; } .wc-antworten { display: grid; gap: 10px; } .wc-antwort { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; cursor: pointer; background: var(--weiss); border: 1.5px solid var(--linie); font-weight: 600; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .wc-antwort:hover { border-color: var(--blau-hell); transform: translateY(-2px); } .wc-antwort input { width: 20px; height: 20px; accent-color: var(--blau); flex: 0 0 auto; } .wc-antwort:has(input:checked) { border-color: var(--blau); box-shadow: 0 0 0 2px var(--blau) inset; } .wc-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .wc-knoepfe .knopf { border: 0; font: inherit; font-weight: 700; cursor: pointer; } .wc-knoepfe .knopf:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .wc-knoepfe .knopf-rand-blau { border: 1.5px solid var(--blau-hell); } /* Ergebnisse. Ohne JavaScript stehen alle untereinander und erklären die Stufen. */ .wc-ergebnis { border: 1px solid var(--linie); border-left: 5px solid var(--blau-hell); border-radius: 0 18px 18px 0; padding: 24px 26px; margin-bottom: 16px; background: var(--weiss); } .wc-ergebnis.wc-achtung { border-left-color: var(--akzent); background: #fffaf0; } .wc-ergebnis.wc-gut { border-left-color: #2e9e5b; } .wc-ergebnis.wc-start { border-left-color: var(--blau-hell); } .wc-stufe { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blau); background: var(--blau-wasser); border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; } .wc-achtung .wc-stufe { background: #ffefd0; color: #8a5a00; } .wc-ergebnis h3 { margin: 0 0 10px !important; } .wc-empfehlung { color: var(--tinte) !important; } .wc-ergebnis-titel:focus { outline: none; } @media (max-width: 640px) { .wc-test { padding: 20px 18px; border-radius: 16px; } .wc-zitat { padding: 20px 20px; } .wc-ergebnis { padding: 20px 18px; } .wc-knoepfe .knopf { flex: 1 1 100%; text-align: center; } } /* ---------- Ratgeber ---------- */ .ratgeber-karte .karte-text { padding-top: 24px; } .ratgeber-icon { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 14px; background: var(--blau-wasser); color: var(--blau); display: flex; align-items: center; justify-content: center; } .ratgeber-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Platz-Alarm ---------- */ .platz-alarm { margin: 14px 0 0 !important; padding-top: 13px; border-top: 1px dashed rgba(10, 77, 136, 0.28); font-size: 0.92rem; color: var(--grau); } .platz-alarm a { font-weight: 700; } /* ---------- Personen-Vorstellung (Über uns) ---------- */ .person { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; margin-bottom: 8px; } .person-bild img { border-radius: 18px; box-shadow: var(--schatten); width: 100%; } .person-text h2 { margin-top: 0 !important; } .person-rolle { color: var(--grau); font-weight: 600; margin-top: -8px !important; margin-bottom: 16px !important; } .quali-liste { list-style: none; margin: 18px 0 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; } .quali-liste li { display: flex; align-items: center; gap: 7px; font-size: 0.9rem; font-weight: 600; color: var(--blau); background: var(--blau-wasser); border: 1px solid var(--linie); padding: 7px 14px 7px 11px; border-radius: 999px; } .quali-liste li::before { content: "✓"; flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; background: var(--blau-hell); color: var(--weiss); font-size: 0.68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } /* Teamkarten. Noch ungenutzt: Sie erscheinen automatisch, sobald der Kunde Fotos, Qualifikationen und die Einwilligungen liefert und `team` in daten.js gefüllt ist. */ .team { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin: 22px 0; } .team-karte { margin: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px; overflow: hidden; } .team-karte img { aspect-ratio: 3/4; object-fit: cover; width: 100%; } .team-karte figcaption { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; } .team-karte strong { color: var(--blau); font-size: 1.05rem; } .team-rolle { color: var(--grau); font-size: 0.9rem; } .team-karte ul { list-style: none; margin: 8px 0 0 !important; padding: 0 !important; } .team-karte li { font-size: 0.85rem; color: var(--grau); margin-bottom: 3px; } @media (max-width: 760px) { .person { grid-template-columns: 1fr; gap: 22px; } .person-bild { max-width: 300px; } } /* ---------- Kursfinder: der Lernweg vom Nichtschwimmer bis Gold ---------- */ .kf-weg { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 28px; } .kf-weg-extra { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .kf-zwischen { margin-top: 42px !important; } .kf-karte { position: relative; border: 1px solid var(--linie); border-radius: 18px; padding: 22px 20px 20px; background: var(--weiss); display: flex; flex-direction: column; transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s; } .kf-karte:hover { box-shadow: var(--schatten); transform: translateY(-4px); border-color: var(--blau-hell); } /* Verbindungspfeil zwischen den Stufen: der Weg wird sichtbar */ .kf-weg .kf-karte[data-stufe]:not(:last-child)::after { content: "→"; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); z-index: 2; color: var(--blau-hell); font-size: 1.3rem; font-weight: 700; } .kf-stufe { display: inline-block; align-self: flex-start; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: var(--blau); color: var(--weiss); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; } .kf-stufe-extra { background: var(--blau-wasser); color: var(--blau); } .kf-karte h3 { margin: 0 0 12px !important; color: var(--blau); font-size: 1.14rem; } .kf-fakten { margin: 0 0 16px; font-size: 0.93rem; flex: 1; } .kf-fakten dt { font-size: 0.71rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--blau-hell); margin-top: 10px; } .kf-fakten dt:first-child { margin-top: 0; } .kf-fakten dd { margin: 2px 0 0; color: var(--grau); line-height: 1.5; } .kf-karte .weiter { font-weight: 700; text-decoration: none; } .kf-karte .weiter:hover { text-decoration: underline; } .kf-hinweis { margin-top: 26px !important; color: var(--grau); } @media (max-width: 900px) { .kf-weg .kf-karte[data-stufe]::after { display: none; } } /* ---------- Elternstimmen ---------- */ .stimmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; } .stimme { margin: 0; padding: 24px 24px 20px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px; display: flex; flex-direction: column; transition: box-shadow 0.3s, transform 0.3s; } .stimme:hover { box-shadow: var(--schatten); transform: translateY(-4px); } .stimme-sterne { color: var(--akzent); letter-spacing: 2px; font-size: 1rem; margin-bottom: 12px; } .stimme blockquote { margin: 0 0 14px; flex: 1; font-size: 1.02rem; line-height: 1.65; color: var(--tinte); } .stimme blockquote::before { content: "„"; } .stimme blockquote::after { content: "“"; } .stimme figcaption { font-weight: 700; color: var(--blau); font-size: 0.95rem; } /* ---------- Abschluss-Aufruf ---------- */ .schluss-cta { background: linear-gradient(150deg, var(--tiefe) 0%, var(--blau) 100%); color: var(--weiss); } .schluss-cta-innen { max-width: 780px; margin: 0 auto; padding: 56px 20px; text-align: center; } .schluss-cta h2 { color: var(--weiss); font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; margin-bottom: 12px; } .schluss-cta p { opacity: 0.94; margin-bottom: 22px; } .schluss-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .schluss-direkt { font-size: 0.95rem; opacity: 0.85; margin: 22px 0 0 !important; } .schluss-direkt a { color: var(--weiss); font-weight: 600; } /* ---------- Zahlenband ---------- */ .zahlenband { background: var(--blau-wasser); } .zahlenband-innen { max-width: 1160px; margin: 0 auto; padding: 34px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; text-align: center; } .zb-zahl { display: block; font-size: 2.1rem; font-weight: 800; color: var(--blau); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .zb-text { display: block; color: var(--grau); font-size: 0.95rem; } /* ---------- Icon-Liste (statt Punkte/Haken) ---------- */ .icon-liste { list-style: none; margin: 12px 0 0 !important; padding: 0 !important; } .icon-liste li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .icon-liste .li-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--weiss); color: var(--blau-hell); border: 1px solid var(--linie); display: flex; align-items: center; justify-content: center; } .icon-liste .li-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Warum Mantarochen ---------- */ .warum { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: center; } @media (max-width: 860px) { .warum { grid-template-columns: 1fr; } } .check-liste { list-style: none; margin: 18px 0 0 !important; padding: 0 !important; } .check-liste li { padding-left: 32px; position: relative; margin-bottom: 10px; } .check-liste li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--blau-hell); color: var(--weiss); font-size: 0.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .warum-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .mini-kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; padding: 22px 18px; text-align: center; box-shadow: 0 8px 24px rgba(10, 77, 136, 0.07); } /* ---------- Partnerband (Kinderkrebsstiftung) ---------- */ .herzband { background: linear-gradient(150deg, var(--tiefe) 0%, var(--blau) 90%); color: var(--weiss); } .herzband-innen { max-width: 1160px; margin: 0 auto; padding: 46px 20px; display: flex; gap: 26px; align-items: center; } .herzband-text { flex: 1 1 auto; } .herz-icon { flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; } .herz-icon svg { width: 34px; height: 34px; fill: none; stroke: #ffb0c0; stroke-width: 1.8; stroke-linejoin: round; } .herzband h2 { color: var(--weiss); margin-bottom: 8px; font-size: 1.5rem; } .herzband p { opacity: 0.92; margin: 0; } /* Partnerschild: weiße Fläche, wie sie Logoleitfäden für Fremdlogos verlangen. Ohne Logodatei steht hier der Partnername gesetzt, damit nichts leer wirkt. */ .partner-schild { flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 210px; max-width: 260px; background: var(--weiss); border-radius: 18px; padding: 18px 22px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22); } .partner-vorzeile { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau); } .partner-schild img { max-height: 78px; width: auto; } /* Stiftungslogo nach Marken-Handbuch (01.09.): grüne Fassung nur auf Weiß, Schutzzone eine halbe Logobreite ringsum — deshalb 70px Innenabstand bei 140px Logobreite. Keine Effekte, keine Formen am Logo selbst; der weiche Schatten liegt auf der Karte, nicht auf dem Logo. */ .partner-seite { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; } .partner-seite .partner-vorzeile { color: rgba(255, 255, 255, 0.85); } .partner-schild.mit-logo { min-width: 0; max-width: none; padding: 70px; } .partner-schild.mit-logo img { width: 140px; height: auto; max-height: none; } .partner-info { font-size: 0.92rem; opacity: 0.85; margin-top: 8px !important; max-width: 44rem; } .partner-schild a { display: block; } .partner-name { color: var(--blau); font-weight: 800; font-size: 1.06rem; line-height: 1.3; text-align: center; text-wrap: balance; } @media (max-width: 860px) { .herzband-innen { flex-wrap: wrap; } .partner-schild { align-self: auto; margin-left: 94px; } } @media (max-width: 640px) { .herzband-innen { flex-direction: column; text-align: center; gap: 20px; } .partner-schild { margin-left: 0; width: 100%; max-width: 300px; } .partner-seite { width: 100%; } /* Schutzzone bleibt gewahrt: kleineres Logo, entsprechend kleinerer Abstand */ .partner-schild.mit-logo { width: auto; padding: 55px; } .partner-schild.mit-logo img { width: 110px; } } /* ---------- Standort-Filter ---------- */ .filter-leiste { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; } .filter-leiste button { border: 1.5px solid var(--blau-hell); background: var(--weiss); color: var(--blau); font: inherit; font-weight: 600; font-size: 0.93rem; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: background 0.2s, color 0.2s; } .filter-leiste button:hover { background: var(--blau-wasser); } .filter-leiste button.aktiv { background: var(--blau); border-color: var(--blau); color: var(--weiss); } /* Dunkles Markenblau statt Hellblau: Hellblau auf Wasserblau erreicht nur 4,3:1 und verfehlt damit die 4,5:1 der WCAG für kleine Schrift. */ .ort-marke { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blau); background: var(--blau-wasser); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; } /* ---------- Tabellen ---------- */ table.zeiten { border-collapse: collapse; width: 100%; font-size: 0.98rem; } table.zeiten th { background: var(--blau); color: var(--weiss); text-align: left; padding: 10px 14px; } table.zeiten td { padding: 10px 14px; border-bottom: 1px solid var(--linie); } table.zeiten tr:nth-child(even) td { background: var(--blau-wasser); } table.zeiten { margin: 16px 0; } .kurs-tabelle .td-knopf { text-align: right; white-space: nowrap; } /* Auf schmalen Fenstern wird die Kurstabelle zu gestapelten Karten. Eine vierspaltige Tabelle mit Fließtext braucht rund 660 Pixel; darunter liefe sie sonst aus dem Rahmen und ist auch mit Seitwärtsscrollen nicht bedienbar. */ @media (max-width: 760px) { .kurs-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .kurs-tabelle, .kurs-tabelle tbody, .kurs-tabelle tr, .kurs-tabelle td { display: block; width: auto; } .kurs-tabelle tr { border: 1px solid var(--linie); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; background: var(--weiss); } .kurs-tabelle tr:nth-child(even) td { background: none; } .kurs-tabelle td { border: 0; padding: 3px 0; } .kurs-tabelle td[data-spalte]:not([data-spalte=""])::before { content: attr(data-spalte) ": "; font-weight: 700; color: var(--blau-hell); font-size: 0.83rem; } .kurs-tabelle td[data-spalte="Kurs"] { font-size: 1.08rem; margin-bottom: 4px; } .kurs-tabelle td[data-spalte="Kurs"]::before { display: none; } .kurs-tabelle .td-knopf { text-align: left; padding-top: 12px; } .kurs-tabelle .td-knopf .knopf { display: block; text-align: center; } } /* ---------- Kästen ---------- */ .kasten { background: var(--blau-wasser); border-left: 4px solid var(--blau-hell); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 20px 0; } .buchung { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 15px 20px; margin: 10px 0; flex-wrap: wrap; } .buchung strong { color: var(--blau); } /* Varianten des Kastens. MÜSSEN hinter .kasten stehen: gleiche Spezifität, die spätere Regel gewinnt. Davor waren sie wirkungslos und der Warnkasten erschien in Blau statt in Rot. */ .kasten-hinweis { border-left-color: var(--akzent); background: #fffaf0; } .kasten-warnung { border-left-color: #d1495b; background: #fdf2f3; } .kasten-warnung strong, .kasten-hinweis strong { display: block; margin-bottom: 6px; } .kasten-zitat { font-size: 1.08rem; font-style: italic; } /* ---------- Yolawo-Buchung (Zwei-Klick, DSGVO) ---------- Ein Feld je Kurs mit den Kurstagen zur Auswahl statt eines Stapels gleich aussehender Kästen. Der Kalender erscheint darunter im gemeinsamen Rahmen. */ .buchung-feld { border: 1.5px solid var(--blau-hell); border-radius: 16px; padding: 18px 20px; margin: 16px 0; background: linear-gradient(180deg, var(--blau-wasser), #f4faff); } .buchung-frage { margin-bottom: 12px !important; } .buchung-tage { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; } .buchung-tag { font: inherit; font-weight: 700; font-size: 0.95rem; border: 1.5px solid var(--blau); background: var(--weiss); color: var(--blau); padding: 10px 20px; border-radius: 999px; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s; } .buchung-tag:hover { background: var(--blau); color: var(--weiss); transform: translateY(-2px); } .buchung-tag.aktiv { background: var(--blau); color: var(--weiss); } .buchung-tag.aktiv::after { content: " ✓"; } .buchung-tag-breit { background: var(--blau); color: var(--weiss); } .buchung-tag-breit:hover { filter: brightness(1.08); } .widget-hinweis { font-size: 0.86rem; color: var(--grau); margin-bottom: 0 !important; } .buchung-rahmen:not(:empty) { margin-top: 14px; } .yolawo-rahmen { width: 100%; height: 680px; border: 1px solid var(--linie); border-radius: 16px; background: var(--weiss); } /* ---------- Häufige Fragen & Standort-Verlinkung ---------- */ details.faq { border: 1px solid var(--linie); border-radius: 14px; padding: 14px 20px; margin: 10px 0; background: var(--weiss); } details.faq summary { font-weight: 700; color: var(--blau); cursor: pointer; } details.faq[open] { box-shadow: 0 8px 24px rgba(10, 77, 136, 0.08); } details.faq p { margin-top: 10px; color: var(--grau); } /* Aufzählung in einer Antwort (Gruppengrößen je Kursart) */ details.faq ul { margin: 10px 0 0 20px; color: var(--grau); } details.faq li { margin: 4px 0; } /* Sprungleiste der FAQ-Seite. Bei 15 Abschnitten wäre die Seite sonst eine endlose Rolle; so steht das Inhaltsverzeichnis über allem. */ .faq-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; padding-bottom: 26px; border-bottom: 1px solid var(--linie); } .faq-sprung a { text-decoration: none; font-weight: 600; font-size: 0.9rem; background: var(--blau-wasser); color: var(--blau); padding: 8px 15px; border-radius: 999px; transition: background 0.2s, color 0.2s; } .faq-sprung a:hover { background: var(--blau); color: var(--weiss); } /* Vorlauf für ALLE Sprungziele: Die klebende Kopfzeile ist auf breiten Schirmen 113 Pixel hoch (kompakt 93, auf dem Telefon 75). Ohne Vorlauf landet die Überschrift eines angesprungenen Abschnitts dahinter — so geschehen erst bei den FAQ, dann fast noch einmal bei #alle-kurse (Schnellbuchung 01.09.). Deshalb global statt je Abschnitt; `npm run pruefung-browser` misst nach. */ [id] { scroll-margin-top: 144px; } .faq-gruppe + .faq-gruppe { margin-top: 40px; } .faq-gruppe h2 { margin-bottom: 14px; } .standort-links { display: flex; flex-wrap: wrap; gap: 10px; } .standort-links a { text-decoration: none; font-weight: 600; font-size: 0.95rem; border: 1.5px solid var(--blau-hell); color: var(--blau); padding: 8px 16px; border-radius: 999px; transition: background 0.2s, color 0.2s; } .standort-links a:hover { background: var(--blau); color: var(--weiss); } /* Knopfreihe „Alle Schwimmkurse " (Kundenwunsch 31.08.) */ /* Schnellbuchungsleiste unter der Vertrauensleiste (Kundenmeldung 01.09.: schnellerer Weg zum Buchen). Heller Streifen, damit sie als Werkzeug wirkt und nicht mit dem Inhalt konkurriert. */ .schnellbuchung { background: var(--blau-wasser); border-bottom: 1px solid var(--linie); } .schnellbuchung-innen { max-width: 1160px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; } .schnellbuchung-titel { font-weight: 700; color: var(--tiefe); margin: 0; } .schnellbuchung .standort-links { margin: 0; } .schnellbuchung .standort-links a { background: var(--weiss); } .schnellbuchung .standort-links a:hover { background: var(--blau); } .alle-kurse-band { margin-top: 30px; } .alle-kurse-titel { font-weight: 700; color: var(--blau); margin-bottom: 12px; } /* ---------- Scroll-Reveals ---------- */ .zeigen { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } .zeigen.da { opacity: 1; transform: none; } .karten .zeigen:nth-child(2) { transition-delay: 0.08s; } .karten .zeigen:nth-child(3) { transition-delay: 0.16s; } .karten .zeigen:nth-child(4) { transition-delay: 0.24s; } /* ---------- Fuß: zurück in die Tiefe ---------- */ .fuss-welle { margin-top: 64px; } .fuss-welle svg { display: block; width: 100%; height: 64px; } .fuss-logo { height: 60px; width: auto; margin-bottom: 12px; background: var(--weiss); border-radius: 12px; padding: 6px 10px; } .fuss { background: linear-gradient(180deg, var(--blau) 0%, var(--tiefe) 100%); color: var(--weiss); margin-top: 0; } .fuss-innen { max-width: 1160px; margin: 0 auto; padding: 50px 20px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; } .fuss h2 { margin-bottom: 12px; font-size: 1.05rem; font-weight: 700; } .fuss a { color: var(--weiss); text-decoration: none; opacity: 0.9; } .fuss a:hover { opacity: 1; text-decoration: underline; } .fuss ul { list-style: none; } .fuss li { margin-bottom: 8px; } /* Bildungskarten-Plakette, klein und unten (Kundenwunsch 31.08.: „nicht zu präsent, besser irgendwo klein unten"). Vorher stand sie 320 Pixel breit im Kopf jeder Standortseite. Der Innenabstand sitzt auf der Hülle, nicht auf dem Bild: Polster direkt auf einem verschiebt auf schmalen Geräten sein Seitenverhältnis. */ .fuss-bildungskarte { padding: 10px 20px 0; } .fuss-bildungskarte img { /* `margin-inline: auto`, nicht `text-align: center` auf der Hülle: Ganz oben gilt `img { display: block }`, und ein Blockelement zentriert man über die Ränder, nicht über die Textausrichtung. Größe: erst 320px im Kopf jeder Standortseite (zu präsent, Andreas 31.08.), dann 150px halbtransparent in der Fußzeile (zu versteckt, Chef 01.09.). Jetzt 230px voll deckend: klein genug für „unten", groß genug zum Lesen. */ width: 230px; max-width: 75%; height: auto; margin-inline: auto; border-radius: 10px; } .fuss-zeile { border-top: 1px solid rgba(255, 255, 255, 0.22); text-align: center; padding: 18px 20px; font-size: 0.92rem; opacity: 0.8; margin-top: 14px; } /* ---------- Feste Aktionsleiste auf Telefonen ---------- Buchen, WhatsApp und Anrufen bleiben immer in Daumenreichweite, egal wie weit die Eltern gescrollt haben (Kundenwunsch Punkt 9). Auf Desktop ausgeblendet. */ .handleiste { display: none; } @media (max-width: 900px) { .handleiste { display: flex; align-items: stretch; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--linie); box-shadow: 0 -6px 24px rgba(5, 38, 66, 0.12); } .handleiste a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; font-weight: 700; font-size: 0.72rem; border-radius: 13px; padding: 8px 10px; color: var(--blau); background: var(--blau-wasser); min-width: 62px; min-height: 48px; } .handleiste svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .handleiste-haupt { flex: 1; flex-direction: row !important; gap: 8px !important; font-size: 0.98rem !important; background: linear-gradient(180deg, #ffc24d, #ffab00) !important; color: #201400 !important; box-shadow: 0 6px 18px rgba(255, 176, 32, 0.35); } /* Fußzeile freihalten, damit die Leiste nichts verdeckt */ .fuss-zeile { padding-bottom: 84px; } } /* ---------- Brotkrumen ---------- */ .krumen { font-size: 0.9rem; color: var(--grau); margin-bottom: 14px; } .krumen a { color: var(--grau); } /* ---------- Ruhe für Bewegungsempfindliche ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .blase, .welle-hinten, .welle-vorne { animation: none; } .wasser-shader { display: none; } .zeigen { opacity: 1; transform: none; transition: none; } .karte, .knopf, .karte img { transition: none; } } /* Videoschleifen in Kurskarten: verhalten sich wie das Kartenfoto darunter. `height: auto` ist bei