/** * WB-Akademie Seiten — Design-System (v0.2.0) * Konsolidiert aus den freigegebenen Entwürfen: * Homepage v3, Seminare v1.1, Über-uns v2, FAQ v2, Hairmodel v1. */ :root { color-scheme: light; /* verhindert Auto-Dark-Umfaerbung durch Browser/WebViews */ --gruen: #99C9A7; --flieder: #BAAACD; --beige: #CFC6A7; --schwarz: #131110; --weiss: #FFFFFF; --offwhite:#FAF9F6; --wbsfont: 'Libre Franklin', 'Franklin Gothic Medium', -apple-system, 'Helvetica Neue', system-ui, sans-serif; --notch: 18px; } .wbs-body { margin: 0; background-color: var(--offwhite); background-image: linear-gradient(var(--offwhite), var(--offwhite)); color: var(--schwarz); font-family: var(--wbsfont); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .wbs-body * { box-sizing: border-box; } .container { max-width: 1100px; margin: 0 auto; padding: 0 22px; position: relative; } .grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ===== Topbar (Platzhalter bis Header-Projekt) ===== */ .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; } .topbar--dark { color: var(--weiss); } .topbar--light { color: var(--schwarz); } .topbar .logo { font-weight: 800; font-size: 1rem; letter-spacing: 0.02em; } .topbar--dark .logo span { color: var(--gruen); } .topbar--light .logo span { color: var(--weiss); } .topbar .hint { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.45; } /* ===== Typo-Bausteine ===== */ .kicker { margin: 0 0 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--flieder); } .skicker { margin: 0 0 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(19,17,16,0.42); } .wbs-body h2 { margin: 0 0 16px; font-weight: 800; letter-spacing: -0.025em; font-size: clamp(2.1rem, 7.5vw, 3.6rem); line-height: 1.04; } .copy { max-width: 580px; color: rgba(19,17,16,0.72); margin: 0 0 26px; } .wbs-section { padding: 84px 0; position: relative; } /* ===== Buttons ===== */ .btn { display: inline-block; padding: 16px 34px; background: var(--gruen); color: var(--schwarz); border: 0; cursor: pointer; text-decoration: none; font-family: var(--wbsfont); font-weight: 800; font-size: 0.95rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease; } .btn:active, .btn:hover { background: var(--flieder); color: var(--schwarz); transform: translateY(-2px); } .btn--dark { background: var(--schwarz); color: var(--weiss); } .btn--dark:active, .btn--dark:hover { background: var(--flieder); color: var(--schwarz); } .btn--ghost { background: transparent; color: var(--schwarz); box-shadow: inset 0 0 0 2px var(--schwarz); } .btn--ghost:active, .btn--ghost:hover { background: var(--schwarz); color: var(--weiss); } /* ===== Dunkler Seitenkopf ===== */ .head { position: relative; background: var(--schwarz); color: var(--weiss); padding: 96px 0 58px; overflow: hidden; } .head h1 { margin: 0 0 14px; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(2.8rem, 12vw, 5.6rem); line-height: 0.98; text-transform: uppercase; } .head h1 em { font-style: normal; color: var(--gruen); } .head .sub { max-width: 520px; margin: 0; color: rgba(255,255,255,0.65); font-size: 1.05rem; } .hairline { position: absolute; right: -14%; top: -6%; width: 82%; max-width: 580px; pointer-events: none; opacity: 0.85; } /* ===== Voll-Hero (Homepage) ===== */ .hero { position: relative; background: var(--schwarz); color: var(--weiss); min-height: 100svh; display: flex; align-items: center; padding: 110px 0 120px; overflow: hidden; } .hero .hairline { right: -12%; top: 4%; width: 95%; max-width: 720px; } /* * Der Hero ist ein Flex-Container. Ohne diese Zeile schrumpft die * Textspalte auf ihren Inhalt und rutscht in die Mitte: die Überschrift * steht dann nicht mehr auf derselben Kante wie der Rest der Seite und * hat weniger Platz, als eigentlich da wäre. */ .hero > .container { width: 100%; flex: 0 1 100%; } /* * Hero-Überschrift: so groß wie die Zeile es zulässt. * * Die Zeilen bestehen aus einzelnen langen Wörtern („Weiterbildung,", * „Hairmodel.") — die können nicht umbrechen. War die Schrift breiter * als die Spalte, hat der Deckel der Zeilenanimation (.h1-line, * overflow: hidden) den Rest abgeschnitten. Genau so fehlte auf * schmalen Handys das „G," von Weiterbildung. * * Die Größe rechnet deshalb rückwärts aus der verfügbaren Breite: * --wbs-h1-em ist die Breite der längsten Zeile in em. Der Wert deckt * die breiteste der drei möglichen Schriften ab (ITC Franklin Gothic * aus dem Elementor-Kit, Arial als Ersatz, Libre Franklin) plus etwas * Sicherheit. Ein neuer Hero-Text braucht also nur einen neuen Wert * für --wbs-h1-em — abgeschnitten werden kann nichts mehr. * * body.wbs-body davor, weil Elementor über sein Kit * (.elementor-kit-… h1) sonst mit höherer Spezifität gewinnt und die * Überschrift auf feste 40 px setzt. */ body.wbs-body .hero h1 { --wbs-h1-em: 6.75; /* „HAIRMODEL." */ margin: 0 0 26px; font-weight: 800; letter-spacing: -0.035em; font-size: clamp(2.8rem, 11vw, 7.5rem); /* Rückfallebene für alte Browser */ font-size: min(calc((100vw - 44px) / var(--wbs-h1-em)), 7.5rem); line-height: 0.98; text-transform: uppercase; } .h1-line { display: block; overflow: hidden; padding-bottom: 0.06em; } .h1-line > span { display: inline-block; } .accent { color: var(--gruen); } .hero .sub { max-width: 480px; margin: 0 0 38px; font-size: 1.06rem; color: rgba(255,255,255,0.66); } .scroll-hint { position: absolute; left: 22px; bottom: 34px; display: flex; align-items: center; gap: 10px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); } .scroll-hint::before { content: ''; width: 34px; height: 2px; background: var(--flieder); animation: wbs-pulse 1.6s ease-in-out infinite; } @keyframes wbs-pulse { 0%,100% { opacity: 0.4; transform: scaleX(0.6); } 50% { opacity: 1; transform: scaleX(1); } } /* ===== Scheren-Bühne ===== */ .scissor-stage { position: relative; height: 100svh; overflow: hidden; } .stage-bg { position: absolute; inset: 0; background: var(--offwhite); display: flex; align-items: center; justify-content: center; text-align: center; } .claim { padding: 0 26px; } .claim .skicker { color: rgba(19,17,16,0.42); } .claim h2 { font-size: clamp(2rem, 8.6vw, 4rem); margin: 0; } .panel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--schwarz); z-index: 2; } .panel--top { top: 0; transform: translateY(-101%); } .panel--bottom { bottom: 0; transform: translateY(101%); } .stage-fx { position: absolute; inset: 0; z-index: 3; opacity: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .stage-kicker { position: absolute; top: 12%; left: 0; right: 0; text-align: center; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .scissors { width: min(86vw, 620px); height: auto; overflow: visible; } .cutline { position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; background: var(--flieder); transform: scaleX(0); transform-origin: center; box-shadow: 0 0 14px rgba(186,170,205,0.8); } /* ===== Intro-Worte mit Farbmarkern ===== */ .triple h2 { display: flex; flex-direction: column; gap: 4px; font-size: clamp(2.6rem, 11vw, 5rem); } /* Jedes Wort ist ein eigener Block mit fester Zeilenhoehe. Frueher hing das Stapeln allein am flex-Container der Ueberschrift — kippte der weg, landeten die Zeilen uebereinander. */ .word { position: relative; display: block; width: max-content; max-width: 100%; padding-right: 8px; line-height: 1.04; } .word--mitte { margin-left: auto; margin-right: auto; } .zeile { display: block; line-height: 1.04; } .word i { position: absolute; left: -1%; right: -1%; bottom: 0.07em; height: 0.26em; z-index: 0; transform-origin: left center; opacity: 0.9; } .word span { position: relative; z-index: 1; } .word--1 i { background: var(--gruen); } .word--2 i { background: var(--flieder); } .word--3 i { background: var(--beige); } /* ===== Handwerk + Riesen-Wort + Laufband ===== */ .craft { background: var(--weiss); overflow: hidden; } .giant { position: absolute; top: 26px; left: 0; white-space: nowrap; font-size: clamp(6rem, 26vw, 16rem); font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(19,17,16,0.10); text-transform: uppercase; pointer-events: none; user-select: none; } .craft .container { padding-top: clamp(60px, 14vw, 130px); } .craft-grid { display: grid; gap: 18px; margin-top: 36px; } .craft-item { position: relative; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); min-height: 320px; display: flex; align-items: flex-end; } /* Das Bild fuellt die Kachel. Die Hoehe MUSS ausgeschrieben werden: Elementors globales `img { height: auto }` haette sonst Vorrang vor der aus top/bottom abgeleiteten Hoehe — dann sitzt das Foto in Originalgroesse in der Kachel statt sie zu fuellen. */ .craft-item picture { display: contents; } .craft-item .ph, .craft-item .ph-img { position: absolute !important; top: -12% !important; bottom: -12% !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 124% !important; max-width: none !important; object-fit: cover !important; } .ph--1 { background: linear-gradient(150deg, #201c1a 0%, #4a423d 55%, #7a6c60 100%); } .ph--2 { background: linear-gradient(150deg, var(--gruen) 0%, #5e9573 100%); } .ph--3 { background: linear-gradient(150deg, var(--flieder) 0%, #83709f 100%); } .ph--4 { background: linear-gradient(150deg, var(--beige) 0%, #9c8d5e 100%); } .craft-item figcaption { position: relative; z-index: 1; margin: 0; padding: 18px; width: 100%; color: var(--weiss); font-size: 0.9rem; font-weight: 700; background: linear-gradient(transparent, rgba(19,17,16,0.6)); } .craft-item figcaption small { display: block; font-weight: 400; opacity: 0.75; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px; } .marquees { padding: 0; background: var(--weiss); } .marquee { overflow: hidden; white-space: nowrap; padding: 13px 0; border-top: 1px solid rgba(19,17,16,0.09); } .marquee:last-child { border-bottom: 1px solid rgba(19,17,16,0.09); } .mt { display: inline-block; } .mt--l { animation: wbs-slideL 30s linear infinite; } .mt--r { animation: wbs-slideR 34s linear infinite; } .marquee span { font-size: 1.6rem; font-weight: 800; margin-right: 36px; color: transparent; -webkit-text-stroke: 1px rgba(19,17,16,0.38); } .marquee--fill span { color: var(--flieder); -webkit-text-stroke: 0; } @keyframes wbs-slideL { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes wbs-slideR { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* ===== Zahlen ===== */ .stats-grid { display: grid; gap: 14px; } .stat { background: var(--weiss); border: 1px solid rgba(19,17,16,0.1); padding: 26px 22px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); } .stat b { display: block; font-size: clamp(2.4rem, 9vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .stat b em { font-style: normal; color: var(--flieder); } .stat span { font-size: 0.86rem; color: rgba(19,17,16,0.6); } .stats-note { margin-top: 14px; font-size: 0.72rem; color: rgba(19,17,16,0.4); } /* ===== Testimonial ===== */ .quote-block { position: relative; background: var(--flieder); padding: 46px 26px 34px; max-width: 700px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); } .quote-block::before { content: '„'; position: absolute; top: -10px; left: 20px; font-size: 6rem; font-weight: 800; color: var(--schwarz); opacity: 0.25; line-height: 1; } .quote-block p { margin: 20px 0 16px; font-size: 1.3rem; font-weight: 700; line-height: 1.4; } .quote-block cite { font-style: normal; font-size: 0.88rem; color: rgba(19,17,16,0.6); } /* ===== Seminarkarten (v0.5 — abgerundet, ruhige Typo) ===== */ :root { --r-s: 10px; /* Chips, kleine Flaechen */ --r-m: 14px; /* Buttons, Panels */ --r-l: 20px; /* Karten, Filterleiste */ --r-pill: 999px; --linie: rgba(19,17,16,0.10); --gedimmt: rgba(19,17,16,0.58); } .cards { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 22px 20px; margin: 26px -22px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .cards::-webkit-scrollbar { display: none; } .cards--list { grid-auto-flow: row; grid-auto-columns: unset; overflow: visible; margin: 24px 0 0; padding: 0; gap: 20px; } .card { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-l); overflow: hidden; box-shadow: 0 1px 2px rgba(19,17,16,0.04), 0 18px 34px -28px rgba(19,17,16,0.30); transition: transform 0.22s ease, box-shadow 0.22s ease; } .card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(19,17,16,0.05), 0 26px 44px -26px rgba(19,17,16,0.34); } /* --- Bildbereich --- Quadratisch, weil die Seminarbilder quadratisch hochgeladen werden. Vorher war der Ausschnitt 16:10 breit, und von einem quadratischen Bild fielen oben und unten je gut ein Fünftel weg — genau deshalb war auf der Karte der Kopf abgeschnitten. Passt ein Bild trotzdem nicht ins Quadrat, greift der Ausschnitt in der oberen Hälfte zu (25 % von oben). Ganz oben an der Kante wäre zu hart, Bildmitte schneidet bei Hochformaten wieder den Kopf ab. */ .card-img { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--offwhite); } .card-img .ph { position: absolute; inset: 0; } .card-img .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .card.is-full .card-img .ph-img, .card.is-full .card-img .ph { filter: grayscale(0.7) brightness(0.92); } .card-art, .card-land, .card-voll { position: absolute; z-index: 2; font-size: 0.72rem; font-weight: 700; line-height: 1; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,0.94); color: var(--schwarz); backdrop-filter: blur(6px); box-shadow: 0 2px 8px -4px rgba(19,17,16,0.4); } .card-art { top: 12px; left: 12px; } .card-art--online { background: var(--flieder); } .card-land { top: 12px; right: 12px; letter-spacing: 0.06em; } .card-voll { bottom: 12px; right: 12px; background: var(--schwarz); color: var(--weiss); } /* Marken-Plakette: das Logo ist das Wiedererkennungsmerkmal der Karte. */ /* Der Kasten waechst mit dem Logo. Wichtig: width/height des Bildes fest vorgeben und Elementors globales `img { max-width: 100% }` neutralisieren. Sonst kann das Bild in diesem schrumpfenden Flex-Kasten mit 0 Breite einfliessen — auf iOS-Safari passierte genau das, der Kasten blieb ein schmaler Streifen und das Logo ragte rechts heraus. */ .card-logo { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: inline-flex; align-items: center; justify-content: center; width: max-content; max-width: calc(100% - 24px); min-height: 38px; padding: 7px 12px; background: var(--weiss); border-radius: var(--r-s); box-shadow: 0 4px 14px -6px rgba(19,17,16,0.45); } .card-logo img { display: block; flex: none; height: 24px !important; width: auto !important; min-width: 0; max-height: none !important; max-width: 150px !important; object-fit: contain; } .card-logo--text { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } /* --- Textkoerper --- */ .card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; } /* Titel: gross und fett. Laeuft ueber mehrere Zeilen weiter, statt abgeschnitten zu werden — die Zeilenhoehe ist explizit gesetzt und wird auch an den Link vererbt, damit Theme-Regeln sie nicht kippen. */ .wbs-body .card-title { margin: 0; font-size: 1.36rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.26; overflow-wrap: break-word; } .wbs-body .card-title a { color: var(--schwarz); text-decoration: none; font-size: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; } .wbs-body .card-title a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Die Icons bekommen genau eine Textzeile als Hoehe (1.45em) und zentrieren sich darin selbst — dadurch sitzen Kalender-, Orts- und Trainer-Icon auf exakt derselben Linie wie ihr Text, unabhaengig von Schriftstaerke oder Umbruch. */ .meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .meta li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; line-height: 1.45; color: var(--gedimmt); } .meta svg { width: 16px; height: 1.45em; flex: none; stroke: var(--schwarz); opacity: 0.45; } .meta b, .meta span { line-height: inherit; } .meta b { color: var(--schwarz); font-weight: 700; } .tagrow { display: flex; flex-wrap: wrap; gap: 6px; } .tag { display: inline-block; font-size: 0.76rem; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; padding: 8px 13px; border-radius: var(--r-pill); border: 1px solid var(--linie); color: var(--gedimmt); } .card-hint { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--schwarz); display: flex; align-items: center; gap: 7px; } .card-hint::before { content: '●'; color: #C9885F; font-size: 0.7rem; } /* --- Fuss --- */ .card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 12px; } .card-preisblock { display: flex; flex-direction: column; gap: 3px; } /* Preis und Steuerhinweis bleiben in einer Zeile. */ .card-preis { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 6px; white-space: nowrap; font-size: 1.24rem; font-weight: 800; line-height: 1.1; } .card-preis .woocommerce-Price-amount { font-size: inherit; } .card-preis small, .card-preis .woocommerce-price-suffix { font-size: 0.66rem; font-weight: 600; color: var(--gedimmt); white-space: nowrap; } .card-preis--voll { color: var(--schwarz); } .card-punkte { display: flex; align-items: baseline; gap: 5px; font-size: 0.86rem; font-weight: 700; color: var(--schwarz); } .card-punkte__oder { font-weight: 600; color: var(--gedimmt); } .card-punkte--voll { font-weight: 500; color: var(--gedimmt); } .wbs-body .card-cta { display: block; text-align: center; padding: 13px 20px; border-radius: var(--r-m); background: var(--gruen); color: var(--schwarz); font-weight: 800; font-size: 0.9rem; text-decoration: none; white-space: nowrap; transition: background 0.18s ease, color 0.18s ease; } .wbs-body .card-cta:hover, .wbs-body .card-cta:focus-visible { background: var(--flieder); color: var(--schwarz); } .wbs-body .card-cta--ghost { background: transparent; color: var(--schwarz); box-shadow: inset 0 0 0 1.5px var(--schwarz); } .wbs-body .card-cta--ghost:hover { background: var(--schwarz); color: var(--weiss); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .card, .wbs-body .card-cta { transition: none; } .card:hover { transform: none; } } /* ===== Dunkler CTA-Block ===== */ .cta { background: var(--schwarz); color: var(--weiss); padding: 96px 0; position: relative; overflow: hidden; clip-path: polygon(0 7vw, 100% 0, 100% 100%, 0 100%); margin-top: -1px; } /* Dunkler Abschnitt: Theme- oder Elementor-Regeln duerfen die Schrift nicht auf Schwarz zuruecksetzen, sonst steht dunkel auf dunkel. */ .cta h2 { color: var(--weiss) !important; max-width: 620px; font-size: clamp(2.2rem, 8.5vw, 4rem); text-shadow: 0 2px 24px rgba(19,17,16,0.45); } .cta .copy { color: rgba(255,255,255,0.68) !important; } .cta .skicker { color: var(--gruen) !important; } .cta .btn { color: var(--schwarz) !important; } .cta-deco { position: absolute; right: -130px; bottom: -130px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--flieder), transparent 70%); opacity: 0.55; pointer-events: none; } /* ===== Rundgang (Über uns) ===== */ .tour { position: relative; background: var(--schwarz); } .station { position: relative; height: 78svh; min-height: 420px; overflow: hidden; } .station .ph, .station .ph-img { position: absolute; inset: 0; width: 100%; object-fit: cover; } .sph--1 { background: linear-gradient(140deg, #221e1c 0%, #514842 50%, #83766b 100%); } .sph--2 { background: linear-gradient(140deg, var(--gruen) 0%, #4f8a66 100%); } .sph--3 { background: linear-gradient(140deg, var(--flieder) 0%, #77639a 100%); } .sph--4 { background: linear-gradient(140deg, var(--beige) 0%, #9c8d5e 100%); } .station .edge { position: absolute; top: -6%; bottom: -6%; left: -26px; width: 34px; background: var(--flieder); transform: skewX(-7deg); box-shadow: 0 0 26px rgba(186,170,205,0.65); display: none; } .station .plate { position: absolute; left: 22px; bottom: 26px; right: 22px; color: var(--weiss); } .station .plate .no { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; color: var(--gruen); text-transform: uppercase; } .station .plate h3 { margin: 4px 0 4px; font-size: clamp(1.6rem, 7vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(19,17,16,0.5); } .station .plate p { margin: 0; max-width: 480px; font-size: 0.92rem; color: rgba(255,255,255,0.85); text-shadow: 0 1px 12px rgba(19,17,16,0.5); } .tour.js-tour { height: 100svh; } .tour.js-tour .station { position: absolute; inset: 0; height: auto; min-height: 0; } .tour.js-tour .station .edge { display: block; } .tour-progress { position: absolute; top: 18px; left: 22px; z-index: 6; display: none; gap: 8px; } .tour.js-tour .tour-progress { display: flex; } .tour-progress span { width: 16px; height: 16px; background: transparent; border: 2px solid rgba(255,255,255,0.7); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); } /* ===== Über uns: Gruppenbild, Team ===== */ .groupshot { position: relative; margin-top: 28px; min-height: 320px; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); } .groupshot .ph { position: absolute; inset: -10% 0; background: linear-gradient(140deg, #2a2422 0%, #6b5c50 55%, #a08b76 100%); } .groupshot figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 16px 18px; color: var(--weiss); font-size: 0.88rem; font-weight: 700; background: linear-gradient(transparent, rgba(19,17,16,0.6)); } .groupshot figcaption small { display: block; font-weight: 400; opacity: 0.75; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; } .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; } .member { background: var(--offwhite); border: 1px solid rgba(19,17,16,0.1); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); } .member .photo { position: relative; padding-top: 105%; overflow: hidden; } .member .photo .ph { position: absolute; inset: 0; background: linear-gradient(160deg, #2a2624, #5c5149); } .member .photo::after { content: ''; position: absolute; inset: 0; background: var(--ac, var(--gruen)); opacity: 0; transition: opacity 0.25s; mix-blend-mode: multiply; } .member:hover .photo::after, .member:active .photo::after { opacity: 0.5; } .member .info { padding: 12px 14px 16px; } .member .info b { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; } .member .info span { font-size: 0.78rem; color: rgba(19,17,16,0.55); } .member .bar { height: 5px; background: var(--ac, var(--gruen)); } /* ===== FAQ ===== */ .faq-group { padding: 26px 0 8px; } .faq-group h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.5rem, 5.4vw, 2.1rem); } .faq-group h2::before { content: ''; width: 22px; height: 22px; flex: none; background: var(--gc, var(--gruen)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); } .wbs-body details { background: var(--weiss); border: 1px solid rgba(19,17,16,0.12); margin-bottom: 10px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); } .wbs-body summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px; font-weight: 700; font-size: 0.98rem; } .wbs-body summary::-webkit-details-marker { display: none; } .wbs-body summary .plus { flex: none; width: 22px; height: 22px; position: relative; } .wbs-body summary .plus::before, .wbs-body summary .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; background: var(--schwarz); transform: translate(-50%, -50%); transition: transform 0.25s; } .wbs-body summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); } .wbs-body details[open] summary .plus::after { transform: translate(-50%, -50%) rotate(0deg); } .wbs-body details[open] { border-color: var(--gc, var(--gruen)); } .answer { padding: 0 18px 18px; color: rgba(19,17,16,0.72); font-size: 0.94rem; } .answer p { margin: 0 0 10px; } .contact-row { display: flex; flex-direction: column; gap: 10px; } .contact-row a { display: inline-flex; align-items: center; gap: 10px; color: var(--weiss); text-decoration: none; font-weight: 700; } .contact-row a b { border-bottom: 2px solid var(--flieder); padding-bottom: 2px; } .contact-row svg { width: 17px; height: 17px; stroke: var(--gruen); flex: none; } /* ===== Hairmodel ===== */ .hero--flieder { background: var(--flieder); color: var(--schwarz); min-height: 0; padding: 118px 0 96px; } .hero--flieder .kicker { color: var(--schwarz); font-weight: 800; } .hero--flieder .sub { color: rgba(19,17,16,0.75); } .hero--flieder .out { color: transparent; -webkit-text-stroke: 2px var(--schwarz); } .hero-deco { position: absolute; right: -120px; top: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--weiss), transparent 70%); opacity: 0.5; pointer-events: none; } .topic-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .topic { padding: 12px 18px; font-weight: 800; font-size: 0.9rem; background: var(--offwhite); border: 1px solid rgba(19,17,16,0.14); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); } .steps-wrap { position: relative; margin-top: 34px; padding-left: 44px; } .steps-line { position: absolute; left: 15px; top: 8px; bottom: 8px; width: 3px; } .steps-line svg { width: 3px; height: 100%; overflow: visible; } .step { position: relative; padding: 0 0 34px; } .step:last-child { padding-bottom: 0; } .step::before { content: ''; position: absolute; left: -44px; top: 2px; width: 30px; height: 30px; background: var(--sc, var(--gruen)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); } .step .num { position: absolute; left: -44px; top: 2px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; z-index: 1; } .step h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; } .step p { margin: 0; color: rgba(19,17,16,0.7); font-size: 0.95rem; max-width: 560px; } .formbox { margin-top: 26px; padding: 30px 22px; background: var(--offwhite); border: 1px solid rgba(19,17,16,0.12); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); } /* ===== Footer-Platzhalter & Utility ===== */ .foot { padding: 28px 0 44px; font-size: 0.76rem; color: rgba(19,17,16,0.42); } .reveal { will-change: transform, opacity; } /* ===== Desktop ===== */ @media (min-width: 820px) { .topbar { padding: 24px 36px; } .craft-grid { grid-template-columns: 1.5fr 1fr 1fr; } .craft-item:first-child { min-height: 460px; } .craft-item:nth-child(2) { margin-top: 60px; } .craft-item:nth-child(3) { margin-top: 30px; } .stats-grid { grid-template-columns: repeat(3, 1fr); } .cards { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 36px 0 0; padding: 0; } .cards--list { margin: 26px 0 0; } .team-grid { grid-template-columns: repeat(5, 1fr); } .station .plate { left: 36px; bottom: 36px; } .groupshot { min-height: 460px; } .hero--flieder { padding: 140px 0 120px; } } @media (prefers-reduced-motion: reduce) { .mt--l, .mt--r, .scroll-hint::before { animation: none; } } /* ============================================================ KONTRAST-HÄRTUNG (v0.2.1) a) Gradient-Panzerung: helle Flaechen zusaetzlich als background-image — Auto-Dark-Filter (App-Vorschauen, manche Android-Browser) fassen Gradients nicht an. b) Dunkle Bereiche erzwingen helle Schrift, nichts erbt versehentlich Schwarz. Gewollte Akzente werden danach explizit wiederhergestellt. ============================================================ */ .bg-white { background-color: var(--weiss); background-image: linear-gradient(var(--weiss), var(--weiss)); } .bg-off { background-color: var(--offwhite); background-image: linear-gradient(var(--offwhite), var(--offwhite)); } .card, .stat, .wbs-body details, .trainer-card, .mcard { background-color: var(--weiss); background-image: linear-gradient(var(--weiss), var(--weiss)); } .member, .tag, .formbox, .topic { background-color: var(--offwhite); background-image: linear-gradient(var(--offwhite), var(--offwhite)); } .craft, .marquees, .team { background-color: var(--weiss); background-image: linear-gradient(var(--weiss), var(--weiss)); } /* b) Dunkle Bereiche: helle Schrift erzwingen */ .head h1, .head h2, .head h3, .head p, .head div, .head span, .head b, .hero h1, .hero h2, .hero h3, .hero p, .hero div, .hero span, .hero b, .cta h1, .cta h2, .cta h3, .cta p, .cta div, .cta span, .cta b, .cta cite, .cta__nix, .station .plate h3, .station .plate p, .station .plate span, .contact-row a, .contact-row a b { color: var(--weiss); } /* Gewollte Akzente wiederherstellen. Mit !important, weil Theme- und Elementor-Regeln die Schrift sonst auf Schwarz zuruecksetzen — dann steht dunkel auf dunkel. */ .wbs-body .head h1, .wbs-body .head h2, .wbs-body .head h3 { color: var(--weiss) !important; } .wbs-body .head .kicker, .wbs-body .hero .kicker { color: var(--flieder) !important; } .wbs-body .head h1 em, .wbs-body .hero h1 em, .wbs-body .hero .accent { color: var(--gruen) !important; } .wbs-body .head .sub, .wbs-body .hero .sub { color: rgba(255,255,255,0.72) !important; } .wbs-body .hero--hell h1, .wbs-body .hero--hell h2 { color: var(--schwarz) !important; } .cta .skicker { color: var(--gruen); } .cta .copy { color: rgba(255,255,255,0.6); } .station .plate .no { color: var(--gruen); } .cta .btn, .head .btn, .hero .btn { color: var(--schwarz); } .cta .btn--dark, .head .btn--dark, .hero .btn--dark { color: var(--weiss); } .topbar--dark .logo, .topbar--dark .hint { color: var(--weiss); } .topbar--dark .logo span { color: var(--gruen); } /* Flieder-Hero (Hairmodel) ist HELL — dunkle Schrift gilt dort */ .hero--flieder h1, .hero--flieder h2, .hero--flieder h3, .hero--flieder p, .hero--flieder div, .hero--flieder span, .hero--flieder b { color: var(--schwarz); } .hero--flieder .kicker { color: var(--schwarz); } .hero--flieder .sub { color: rgba(19,17,16,0.75); } .hero--flieder .out { color: transparent; -webkit-text-stroke: 2px var(--schwarz); } .hero--flieder .btn--dark { color: var(--weiss); } /* =================================================================== * Katalog-Layout + Filter-Sidebar (v0.6) * * Links eine einklappbare, mitscrollende Filterspalte, rechts das * Kartenraster: aufgeklappt zwei Karten pro Reihe, eingeklappt drei. * Die Filtergruppen sind
-Elemente und klappen an ihrer * Stelle auf. * ================================================================ */ /* position: sticky funktioniert nicht, wenn ein Vorfahre overflow-x: hidden hat — clip erfuellt denselben Zweck ohne Scroll-Kontext. */ .wbs-body.wbs-katalog { overflow-x: clip; } .wbs-layout { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; margin-top: 22px; } /* --- Ein-/Ausklappen --- */ .wbs-side__schalter { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: var(--r-pill); border: 1px solid var(--linie); background: var(--weiss); font: inherit; font-weight: 700; font-size: 0.86rem; color: var(--schwarz); cursor: pointer; transition: border-color 0.15s ease; } .wbs-side__schalter:hover { border-color: var(--schwarz); } .wbs-side__schalter:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 2px; } .wbs-side__schalter svg { width: 17px; height: 17px; flex: none; } .wbs-side__inhalt { margin-top: 12px; } /* Das Einklappen der Spalte gilt nur am Desktop — auf dem Handy ist der Filter ein Bottom-Sheet und darf davon nicht versteckt werden. */ @media (min-width: 1024px) { .wbs-layout.is-zu .wbs-side__inhalt { display: none; } } /* --- Filterkarte --- */ .wbs-filter { background: var(--weiss); background-image: linear-gradient(var(--weiss), var(--weiss)); border: 1px solid var(--linie); border-radius: var(--r-l); padding: 14px; margin: 0; box-shadow: 0 1px 2px rgba(19,17,16,0.04), 0 18px 36px -32px rgba(19,17,16,0.35); } .wbs-suche { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px; background: var(--offwhite); border: 1.5px solid transparent; border-radius: var(--r-pill); } .wbs-suche:focus-within { border-color: var(--schwarz); background: var(--weiss); } .wbs-suche svg { width: 16px; height: 16px; flex: none; color: var(--gedimmt); } /* Nur die Hülle (mit Lupe) trägt den Rahmen. Das Eingabefeld darin muss nackt bleiben — Themes geben Formularfeldern sonst einen zweiten, schwarzen Rahmen mitten in der Suchleiste. */ .wbs-suche input { flex: 1; min-width: 0; appearance: none !important; -webkit-appearance: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; background-image: none !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; outline: none !important; font: inherit; font-size: 0.9rem; color: var(--schwarz); outline: none; padding: 10px 0; border-radius: 0; } .wbs-suche input::-webkit-search-cancel-button { -webkit-appearance: none; } .wbs-suche input::placeholder { color: rgba(19,17,16,0.42); } /* --- Filtergruppen --- WICHTIG: Die FAQ-Akkordeons nutzen ebenfalls
und setzen dort Rahmen, Hintergrund und ein clip-path. Ein clip-path wuerde aufgeklappte Inhalte abschneiden. Diese Regeln heben das fuer die Filtergruppen gezielt auf — deshalb die hoehere Spezifitaet. */ .wbs-gruppen { margin-top: 10px; display: flex; flex-direction: column; } .wbs-body .wbs-gruppen .wbs-drop { position: relative; margin: 0; padding: 0; border: 0; border-radius: 0; border-top: 1px solid var(--linie); background: transparent; background-image: none; clip-path: none; } .wbs-body .wbs-gruppen .wbs-drop:first-child { border-top: 0; } .wbs-body .wbs-gruppen .wbs-drop > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 12px 8px; margin: 0; background: transparent; border: 0; border-radius: var(--r-s); font: inherit; font-size: 0.86rem; font-weight: 400; line-height: 1.3; user-select: none; } .wbs-body .wbs-gruppen .wbs-drop > summary::-webkit-details-marker { display: none; } .wbs-body .wbs-gruppen .wbs-drop > summary::marker { content: ''; } .wbs-body .wbs-gruppen .wbs-drop > summary:hover { background: var(--offwhite); } .wbs-body .wbs-gruppen .wbs-drop > summary:focus-visible { outline: 2px solid var(--schwarz); outline-offset: -2px; } .wbs-body .wbs-gruppen .wbs-drop.is-aktiv > summary { background: rgba(153,201,167,0.18); } .wbs-drop__label { font-weight: 700; flex: none; } .wbs-drop__wert { margin-left: auto; text-align: right; font-size: 0.82rem; color: var(--gedimmt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wbs-body .wbs-gruppen .wbs-drop.is-aktiv .wbs-drop__wert { color: var(--schwarz); font-weight: 700; } .wbs-drop__chev { width: 10px; height: 7px; flex: none; opacity: 0.55; transition: transform 0.18s ease; } .wbs-body .wbs-gruppen .wbs-drop[open] .wbs-drop__chev { transform: rotate(180deg); } /* --- Panel (klappt an seiner Stelle auf) --- */ .wbs-body .wbs-drop__panel { position: static; padding: 0 4px 12px; max-height: 268px; overflow-y: auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; min-width: 0; max-width: none; } .wbs-body .wbs-drop__panel--polster { padding: 6px 8px 16px; overflow: visible; max-height: none; } .wbs-body .wbs-opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-s); font-size: 0.86rem; font-weight: 500; line-height: 1.3; color: var(--schwarz); cursor: pointer; } .wbs-body .wbs-opt:hover { background: var(--offwhite); } .wbs-body .wbs-opt span { font-weight: 500; font-size: inherit; } .wbs-body .wbs-opt input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--schwarz); cursor: pointer; } /* --- Zeitraum --- */ .wbs-datum { display: flex; flex-direction: column; gap: 10px; } .wbs-datum label { display: flex; flex-direction: column; gap: 5px; font-size: 0.74rem; font-weight: 700; color: var(--gedimmt); } .wbs-datum input { appearance: none; -webkit-appearance: none; width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid rgba(19,17,16,0.2); border-radius: var(--r-s); background: var(--offwhite); font: inherit; font-size: 0.86rem; color: var(--schwarz); } .wbs-datum input:focus { outline: 2px solid var(--schwarz); outline-offset: 1px; } /* --- Preis-Schieberegler (zwei Griffe) --- Die beiden Regler sind echte Formularfelder und werden serverseitig mit ihren Werten gerendert — der Regler funktioniert also auch ohne JavaScript. */ .wbs-range__ausgabe { display: flex; justify-content: space-between; font-size: 0.88rem; font-weight: 800; margin-bottom: 12px; } .wbs-range__bahn { position: relative; height: 26px; } .wbs-range__bahn::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: var(--r-pill); background: rgba(19,17,16,0.14); } .wbs-range__fuellung { position: absolute; top: 11px; height: 4px; border-radius: var(--r-pill); background: var(--gruen); } /* Die beiden Regler liegen deckungsgleich uebereinander. Sie MUESSEN vollstaendig unsichtbar sein (kein Hintergrund, kein Rahmen) — sonst verdeckt der obere den Griff des unteren, und man sieht nur noch einen Kreis. Themes und Elementor stylen Formularfelder gern global mit hoher Spezifitaet, deshalb hier bewusst !important. */ .wbs-range__bahn .wbs-range__in { position: absolute !important; left: 0 !important; right: auto !important; top: 0 !important; display: block !important; float: none !important; transform: none !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 26px !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; appearance: none !important; -webkit-appearance: none !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: none; } /* Feste Stapelreihenfolge, damit die Griffe nicht zufaellig tauschen. filter.js hebt den Min-Griff auf 5, wenn beide oben am Anschlag stehen. */ .wbs-range__in--min { z-index: 3; } .wbs-range__in--max { z-index: 4; } .wbs-range__in:focus { outline: none !important; } .wbs-range__in::-webkit-slider-runnable-track { background: transparent; border: 0; height: 26px; } .wbs-range__in::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--schwarz); cursor: grab; box-shadow: 0 2px 6px -1px rgba(19,17,16,0.4); } .wbs-range__in::-moz-range-track { background: transparent; border: 0; height: 26px; } .wbs-range__in::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--schwarz); cursor: grab; } .wbs-range__in:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--flieder); outline-offset: 2px; } /* --- Fuss der Filterkarte --- */ .wbs-filter__fuss { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); } .wbs-filter__go { flex: 1; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-pill); cursor: pointer; background: var(--schwarz); color: var(--weiss); font: inherit; font-weight: 800; font-size: 0.88rem; transition: background 0.18s ease, color 0.18s ease; } .wbs-filter__go:hover { background: var(--flieder); color: var(--schwarz); } .wbs-filter.is-live .wbs-filter__go { display: none; } .wbs-filter.is-live .wbs-filter__fuss { margin-top: 8px; padding-top: 10px; justify-content: flex-end; } .wbs-body .wbs-filter__reset { font-size: 0.82rem; font-weight: 600; color: var(--gedimmt); text-decoration: underline; text-underline-offset: 3px; } .wbs-body .wbs-filter__reset:hover { color: var(--schwarz); } .wbs-filter__reset[hidden] { display: none; } /* --- Ergebnisraster --- */ #wbs-grid { transition: opacity 0.18s ease; } #wbs-grid.is-loading { opacity: 0.45; pointer-events: none; } .wbs-mehr-wrap { display: flex; justify-content: center; margin: 30px 0 6px; } .wbs-body .wbs-mehr { display: inline-block; padding: 15px 40px; border-radius: var(--r-pill); background: var(--gruen); color: var(--schwarz); font-weight: 800; font-size: 0.92rem; text-decoration: none; border: 0; cursor: pointer; transition: background 0.18s ease; } .wbs-body .wbs-mehr:hover, .wbs-body .wbs-mehr:focus-visible { background: var(--flieder); color: var(--schwarz); } /* --- Neu geladene Karten blenden sanft ein --- */ @keyframes wbs-auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .card.is-neu { animation: wbs-auf 0.4s ease both; } /* --- Spaltenzahl --- */ @media (min-width: 820px) and (max-width: 1023px) { .wbs-ergebnisse .cards--list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .wbs-layout { grid-template-columns: 274px minmax(0, 1fr); gap: 30px; } .wbs-layout.is-zu { grid-template-columns: auto minmax(0, 1fr); } /* Abstand zur Oberkante — sonst klebt die Spalte direkt unter dem Seitenkopf und wirkt angeschnitten. */ .wbs-side { position: sticky; top: 112px; } .wbs-side__inhalt { max-height: calc(100vh - 148px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } .wbs-side__inhalt::-webkit-scrollbar { width: 6px; } .wbs-side__inhalt::-webkit-scrollbar-thumb { background: rgba(19,17,16,0.18); border-radius: var(--r-pill); } /* Drei Karten pro Zeile als Standard (Filter offen wie geschlossen) — dafuer nutzt .wbs-katalog-haupt .container weiter unten mehr Breite. */ .wbs-ergebnisse .cards--list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wbs-layout.is-zu .wbs-side__schalter { padding: 12px; } .wbs-layout.is-zu .wbs-side__schalter-text { display: none; } } @media (prefers-reduced-motion: reduce) { #wbs-grid, .wbs-drop__chev, .wbs-filter__go, .wbs-body .wbs-mehr, .wbs-side__schalter { transition: none; } .card.is-neu { animation: none; } } /* ===================================================================== Hero „Bewegte Fotowand" (v0.7.0) Dunkler Seitenkopf, hinter dem sechs Fotospalten langsam gegenlaeufig durchlaufen. Bewegung ist reines CSS (keyframes + transform) — kein JavaScript, kein GSAP noetig. Markup: templates/parts/hero-fotowand.php ===================================================================== */ .head--wand { display: flex; align-items: flex-end; min-height: min(88svh, 800px); padding: clamp(140px, 20vw, 220px) 0 clamp(70px, 9vw, 110px); background: var(--schwarz); isolation: isolate; } /* --- Bildflaeche --------------------------------------------------- */ .fotowand { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--schwarz); } /* Die Buehne ist groesser als der Header und leicht gedreht, damit an den Raendern keine Spaltenkanten sichtbar auslaufen. */ .fotowand__buehne { position: absolute; top: 50%; left: 50%; width: 130%; height: 168%; transform: translate(-50%, -50%) rotate(-6deg); display: flex; justify-content: center; gap: clamp(7px, 0.8vw, 12px); } .fotowand__spalte { flex: 1 1 0; min-width: 0; overflow: hidden; } .fotowand__zug { animation: fotowand-lauf var(--wand-dauer, 80s) linear infinite; will-change: transform; } /* Gegenlaeufige Spalten: gleiche Keyframes, nur rueckwaerts abgespielt. */ .fotowand__spalte--ab .fotowand__zug { animation-direction: reverse; } /* Wichtig fuer den nahtlosen Loop: KEIN gap zwischen den Bildern — der Abstand steckt im margin-bottom jedes Bildes. Nur dann ist ein Bildersatz exakt die Haelfte des Zugs und -50% springt unsichtbar. */ .fotowand__satz picture { display: block; margin: 0 0 clamp(7px, 0.8vw, 12px); } .fotowand__satz img { display: block; width: 100%; height: auto; filter: saturate(0.92) contrast(1.04); } @keyframes fotowand-lauf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } } /* --- Schleier: dunkler Lichtkegel unten links, damit der Text sitzt --- */ .fotowand__schleier { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(19,17,16,0.72) 0%, rgba(19,17,16,0) 22%), linear-gradient(to top, rgba(19,17,16,0.82) 0%, rgba(19,17,16,0) 20%), linear-gradient(100deg, rgba(19,17,16,0.58) 0%, rgba(19,17,16,0.34) 48%, rgba(19,17,16,0.30) 100%); } /* --- Textebene ------------------------------------------------------ */ .fotowand__inhalt { position: relative; z-index: 2; width: 100%; } /* Zweiter, weicher Schatten direkt hinter dem Textblock. Er wandert mit dem Container mit — auf breiten Monitoren steht die Schrift sonst mitten im Bild und wird unleserlich. */ .fotowand__inhalt::before { content: ''; position: absolute; z-index: -1; left: -34vw; right: -10vw; top: -22%; bottom: -70%; pointer-events: none; background: radial-gradient(58% 58% at 34% 48%, rgba(19,17,16,0.90) 0%, rgba(19,17,16,0.74) 42%, rgba(19,17,16,0.36) 72%, rgba(19,17,16,0) 100%); } /* Die Schrift liegt hier auf Fotos — Theme- oder Elementor-Regeln duerfen die Farbe nicht umbiegen, sonst steht schwarz auf dunkel. */ .head--wand h1 { max-width: 11ch; color: var(--weiss) !important; text-shadow: 0 2px 34px rgba(19,17,16,0.7); } .head--wand h1 em { color: var(--gruen) !important; font-style: normal; } .head--wand .kicker { color: var(--flieder) !important; } .head--wand .sub { max-width: 460px; color: rgba(255,255,255,0.82) !important; text-shadow: 0 1px 18px rgba(19,17,16,0.75); } .fotowand__btn { margin-top: 26px; } /* --- Spaltenzahl je Bildschirmbreite -------------------------------- */ @media (max-width: 1199px) { .fotowand__spalte:nth-child(n + 5) { display: none; } /* 4 Spalten */ .fotowand__buehne { width: 138%; } } @media (max-width: 767px) { .fotowand__spalte:nth-child(n + 4) { display: none; } /* 3 Spalten */ .fotowand__buehne { width: 152%; height: 150%; } .head--wand { min-height: min(80svh, 640px); } .head--wand h1 { max-width: none; } } /* --- Ruhiger Modus --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .fotowand__zug { animation: none; } } /* Anker-Sprung aus dem Hero: Ziel nicht unter der Topbar kleben lassen. */ #wbs-layout { scroll-margin-top: 90px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ===================================================================== Filter auf dem Handy: kompakte Glastafel über dem Knopf (v0.29.0) --------------------------------------------------------------------- Unter 1024 px verlaesst die Filterspalte den Textfluss und wird zu einer Tafel, die aus dem schwebenden Knopf unten links aufsteigt — spiegelbildlich zum Menue unten rechts. Sie ist nur so breit wie noetig, damit der Blick auf die Ergebnisse frei bleibt. Auf- und Zuklappen laeuft ueber eine versteckte Checkbox (#wbs-sheet-schalter) und