/* ========================================================================== Design-Varianten zum Ausprobieren Aktiv über . Das Standard-Design "warm" steht in style.css. Schriften werden vom Browser nur geladen, wenn ein Design sie wirklich nutzt. ========================================================================== */ @font-face { font-family: "Bebas Neue"; src: url("/assets/fonts/bebas-neue.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display.woff2") format("woff2"); font-weight: 400 900; font-display: swap; } @font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } /* ────────────────────────────────────────────────────────────── 2) LATIN NIGHT – dunkel, Neon, Party-Atmosphäre ────────────────────────────────────────────────────────────── */ [data-design="nacht"] { color-scheme: dark; --creme: #0f0a0d; --creme-2: #181015; --papier: #20161c; --tinte: #fbefe9; --tinte-2: #cbb6be; --linie: #3a2a33; --primär: #ff3d6e; --primär-dunkel: #ff86a6; --gold: #ffd23f; --salsa: #ff3b3b; --bachata: #ff4fa3; --kizomba: #ffd23f; --kizomba-text: #ffd23f; --auf-primär: #14070b; --kopf-bg: rgb(15 10 13 / 0.85); --fuss-bg: #07050a; --fuss-text: #cbb6be; --fuss-hell: #fbefe9; --cta-bg: #ff3d6e; --cta-text: #14070b; --eingabe-fokus: #2a1d24; --blend: screen; --font-titel: "Bebas Neue", Impact, "Arial Narrow", sans-serif; --titel-gewicht: 400; --titel-spacing: 0.02em; --titel-zeilen: 0.95; --schatten: 0 0 0 1px #3a2a33, 0 12px 40px -12px rgb(255 61 110 / 0.35); font-synthesis: none; } [data-design="nacht"] h1 { font-size: clamp(3rem, 2rem + 5vw, 6rem); text-shadow: 0 0 40px rgb(255 61 110 / 0.45); } [data-design="nacht"] h2 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); } [data-design="nacht"] h3 { font-size: 1.6rem; } [data-design="nacht"] .kicker { color: var(--gold); } [data-design="nacht"] .btn { box-shadow: 0 0 24px -4px rgb(255 61 110 / 0.7); } [data-design="nacht"] .btn--ghost { box-shadow: none; } [data-design="nacht"] .hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 61 110 / 0.25), transparent 65%); pointer-events: none; } [data-design="nacht"] .blob { filter: blur(2px); } [data-design="nacht"] .pill { background: #0f0a0d; box-shadow: 0 0 0 1px currentColor, 0 0 20px -2px currentColor; } [data-design="nacht"] .stilkarte { background: var(--papier); color: var(--tinte); border-top: 6px solid var(--farbe); box-shadow: 0 20px 50px -25px var(--farbe); } [data-design="nacht"] .stilkarte h3 { color: var(--farbe); font-size: 3rem; } [data-design="nacht"] .stilkarte:hover { color: var(--tinte); } [data-design="nacht"] .stilkarte::after { background: radial-gradient(circle, var(--farbe), transparent 70%); opacity: 0.25; } [data-design="nacht"] .badge-bald { background: var(--farbe, var(--tinte)); color: #0f0a0d; } [data-design="nacht"] .stil__marke { color: #0f0a0d; font-style: normal; box-shadow: 0 0 80px -20px var(--farbe); } [data-design="nacht"] .vorteile li::before { color: var(--gold); } [data-design="nacht"] .tag--mix { background: var(--tinte); color: #0f0a0d; } [data-design="nacht"] .tag--party, [data-design="nacht"] .tag--workshop, [data-design="nacht"] .tag--special, [data-design="nacht"] .tag--kursstart { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px currentColor; } [data-design="nacht"] .stufe__nr { color: #0f0a0d; } [data-design="nacht"] .preistabelle thead th { background: #07050a; color: var(--gold); } [data-design="nacht"] .formular__danke { background: #0f2e1c; color: #bbf7d0; } /* ────────────────────────────────────────────────────────────── 3) ELEGANT – Ballsaal: Elfenbein, Bordeaux, Serifen, feine Linien ────────────────────────────────────────────────────────────── */ [data-design="elegant"] { --creme: #faf7f2; --creme-2: #f2ece2; --papier: #ffffff; --tinte: #1c1714; --tinte-2: #5f564e; --linie: #e0d5c6; --primär: #7a1f2b; --primär-dunkel: #5a1520; --gold: #b08d57; --salsa: #a3242f; --bachata: #a02c65; --kizomba: #d4ac2b; --kizomba-text: #8a6d12; --kopf-bg: rgb(250 247 242 / 0.92); --fuss-bg: #1c1714; --fuss-text: #cfc3b5; --fuss-hell: #faf7f2; --cta-bg: #1c1714; --cta-text: #faf7f2; --font-titel: "Playfair Display", Georgia, serif; --titel-gewicht: 500; --titel-spacing: -0.01em; --radius: 0.25rem; --radius-pill: 0.25rem; --schatten: 0 1px 0 var(--linie); } [data-design="elegant"] h1 { font-weight: 500; font-style: italic; } [data-design="elegant"] .kicker { color: var(--gold); letter-spacing: 0.3em; } [data-design="elegant"] .kicker::before { content: ""; display: inline-block; width: 2rem; height: 1px; margin-right: 0.75rem; background: currentColor; vertical-align: middle; } [data-design="elegant"] .btn { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; padding-inline: 1.75rem; } [data-design="elegant"] .btn:hover { transform: none; } [data-design="elegant"] .blob { border-radius: 50%; animation: none; opacity: 0.78; mix-blend-mode: normal; } [data-design="elegant"] .blob--1 { inset: 4% 4% 38% 38%; } /* Salsa – oben rechts */ [data-design="elegant"] .blob--3 { inset: 22% 42% 20% 0; } /* Bachata – links */ [data-design="elegant"] .blob--2 { inset: 40% 8% 2% 34%; } /* Kizomba – unten rechts */ [data-design="elegant"] .pill { font-style: italic; box-shadow: 0 0 0 1px var(--linie); } [data-design="elegant"] .stilkarte, [data-design="elegant"] .stilkarte:hover { background: var(--papier); color: var(--tinte); border: 1px solid var(--linie); border-top: 4px solid var(--farbe); transform: none; } [data-design="elegant"] .stilkarte h3 { color: var(--farbe); font-style: italic; } [data-design="elegant"] .stilkarte::after { display: none; } [data-design="elegant"] .badge-bald { background: transparent; color: var(--tinte-2); box-shadow: inset 0 0 0 1px var(--linie); } [data-design="elegant"] .stil__marke { border-radius: 50%; aspect-ratio: 1; background: var(--farbe); } [data-design="elegant"] .vorteile li, [data-design="elegant"] .plan__tag, [data-design="elegant"] .event, [data-design="elegant"] .stufe, [data-design="elegant"] .preis, [data-design="elegant"] .faq details, [data-design="elegant"] .formular, [data-design="elegant"] .tabelle-wrap { border: 1px solid var(--linie); box-shadow: none; } [data-design="elegant"] .vorteile li::before { color: var(--gold); font-style: italic; font-weight: 400; } [data-design="elegant"] .sektion--warm { background: var(--creme-2); } [data-design="elegant"] .preistabelle thead th { background: transparent; color: var(--tinte-2); border-bottom: 2px solid var(--tinte); } /* ────────────────────────────────────────────────────────────── 4) POSTER – knallig, dicke Linien, harte Schatten, jung ────────────────────────────────────────────────────────────── */ [data-design="poster"] { --creme: #fff8e7; --creme-2: #ffe066; --papier: #ffffff; --tinte: #111111; --tinte-2: #333333; --linie: #111111; --primär: #ff3b30; --primär-dunkel: #c81e1e; --gold: #ffd000; --salsa: #ff3b30; --bachata: #ff4fa3; --kizomba: #ffd000; --kizomba-text: #111111; --auf-primär: #111111; --kopf-bg: #fff8e7; --fuss-bg: #111111; --fuss-text: #e5e5e5; --fuss-hell: #ffd000; --cta-bg: #111111; --cta-text: #ffd000; --font-titel: "Bricolage Grotesque", "Arial Black", sans-serif; --titel-gewicht: 800; --titel-spacing: -0.035em; --titel-zeilen: 1; --radius: 0.9rem; --schatten: 5px 5px 0 #111111; } [data-design="poster"] .kopf { border-bottom: 3px solid #111; } [data-design="poster"] .btn { border: 3px solid #111; box-shadow: 4px 4px 0 #111; } [data-design="poster"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #111; color: #111; } [data-design="poster"] .btn--ghost { background: #fff; color: #111; } [data-design="poster"] .btn--hell { background: var(--gold); color: #111; border-color: var(--gold); box-shadow: 4px 4px 0 #ff3b30; } [data-design="poster"] .nav a[aria-current="page"] { background: var(--gold); color: #111; box-shadow: inset 0 0 0 2px #111; } [data-design="poster"] .blob { border: 3px solid #111; mix-blend-mode: normal; opacity: 1; } [data-design="poster"] .blob--1 { transform: rotate(-6deg); } [data-design="poster"] .pill { border: 3px solid #111; box-shadow: 4px 4px 0 #111; transform: rotate(-4deg); color: #111; } [data-design="poster"] .stilkarte, [data-design="poster"] .vorteile li, [data-design="poster"] .plan__tag, [data-design="poster"] .event, [data-design="poster"] .stufe, [data-design="poster"] .preis, [data-design="poster"] .faq details, [data-design="poster"] .formular, [data-design="poster"] .tabelle-wrap, [data-design="poster"] .person__foto, [data-design="poster"] .galerie__platzhalter, [data-design="poster"] .karte { border: 3px solid #111; box-shadow: var(--schatten); } [data-design="poster"] .stilkarte:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 8px 8px 0 #111; } [data-design="poster"] .stilkarte h3 { font-size: 2.6rem; } [data-design="poster"] .stilkarte--bachata, [data-design="poster"] .stilkarte--bachata:hover { color: #111; } [data-design="poster"] .stilkarte::after { background: rgb(255 255 255 / 0.35); } [data-design="poster"] .badge-bald { background: #111; color: var(--gold); } [data-design="poster"] .tag { border: 2px solid #111; } [data-design="poster"] .stil__marke { border: 3px solid #111; box-shadow: 8px 8px 0 #111; color: #111; font-style: normal; } [data-design="poster"] .stufe__nr { border: 3px solid #111; color: #111; } [data-design="poster"] .vorteile li:nth-child(1)::before { color: var(--salsa); } [data-design="poster"] .vorteile li:nth-child(2)::before { color: var(--bachata); } [data-design="poster"] .vorteile li:nth-child(3)::before { color: #111; -webkit-text-stroke: 0; } [data-design="poster"] .sektion--warm { border-block: 3px solid #111; } [data-design="poster"] .preis--top { border-color: #111; } [data-design="poster"] .preistabelle td:last-child { color: #111; } /* ────────────────────────────────────────────────────────────── 5) MINIMAL – hell, klar, viel Weißraum, moderne Grotesk ────────────────────────────────────────────────────────────── */ [data-design="minimal"] { --creme: #ffffff; --creme-2: #f5f5f4; --papier: #fafaf9; --tinte: #0c0a09; --tinte-2: #57534e; --linie: #e7e5e4; --primär: #e11d48; --primär-dunkel: #be123c; --gold: #f59e0b; --salsa: #e11d48; --bachata: #db2777; --kizomba: #facc15; --kizomba-text: #a16207; --kopf-bg: rgb(255 255 255 / 0.85); --fuss-bg: #f5f5f4; --fuss-text: #57534e; --fuss-hell: #0c0a09; --cta-bg: #0c0a09; --cta-text: #ffffff; --font-titel: "Figtree", system-ui, sans-serif; --titel-gewicht: 800; --titel-spacing: -0.04em; --titel-zeilen: 1.02; --radius: 0.75rem; --schatten: none; } [data-design="minimal"] .kicker { color: var(--tinte-2); } [data-design="minimal"] .btn:hover { transform: none; box-shadow: none; } [data-design="minimal"] .blob { border-radius: 2rem; animation: none; opacity: 0.9; } [data-design="minimal"] .blob--1 { inset: 5% 5% 40% 35%; transform: rotate(6deg); } /* Salsa – oben rechts */ [data-design="minimal"] .blob--3 { inset: 25% 40% 18% 3%; transform: rotate(-6deg); } /* Bachata – links */ [data-design="minimal"] .blob--2 { inset: 48% 10% 4% 36%; transform: rotate(-3deg); } /* Kizomba – unten rechts */ [data-design="minimal"] .pill { box-shadow: 0 0 0 1px var(--linie); font-family: var(--font-text); font-weight: 700; } [data-design="minimal"] .stilkarte:hover { transform: translateY(-2px); box-shadow: none; } [data-design="minimal"] .stilkarte::after { display: none; } [data-design="minimal"] .vorteile li::before { color: var(--linie); font-size: 3.5rem; } [data-design="minimal"] .plan__tag, [data-design="minimal"] .event, [data-design="minimal"] .faq details, [data-design="minimal"] .formular, [data-design="minimal"] .tabelle-wrap { box-shadow: 0 0 0 1px var(--linie); } [data-design="minimal"] .stil__marke { border-radius: var(--radius); font-style: normal; } [data-design="minimal"] .fuss { border-top: 1px solid var(--linie); } [data-design="minimal"] .fuss__copy { border-top-color: var(--linie); } [data-design="minimal"] .preistabelle thead th { background: var(--creme-2); color: var(--tinte-2); } /* ────────────────────────────────────────────────────────────── Design-Umschalter (nur solange design_auswahl in site.yaml aktiv ist) ────────────────────────────────────────────────────────────── */ .design-wahl { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; font-family: "Figtree", system-ui, sans-serif; font-size: 0.9rem; color: #111; } .design-wahl__knopf { display: flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.5rem 1rem; border: 0; border-radius: 999px; background: #111; color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.35), 0 8px 24px -6px rgb(0 0 0 / 0.4); } .design-wahl__liste { position: absolute; right: 0; bottom: calc(100% + 0.5rem); width: min(17rem, calc(100vw - 2rem)); margin: 0; padding: 0.5rem; list-style: none; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 16px 40px -8px rgb(0 0 0 / 0.35); } .design-wahl__liste button { display: grid; grid-template-columns: auto 1fr; gap: 0 0.75rem; align-items: center; width: 100%; padding: 0.6rem 0.7rem; border: 0; border-radius: 0.6rem; background: none; color: #111; font: inherit; text-align: left; cursor: pointer; } .design-wahl__liste button:hover { background: #f4f4f5; } .design-wahl__liste button[aria-pressed="true"] { background: #111; color: #fff; } .design-wahl__liste small { grid-column: 2; opacity: 0.7; } .design-wahl__farben { grid-row: span 2; display: flex; } .design-wahl__farben i { width: 0.9rem; height: 1.8rem; } .design-wahl__farben i:first-child { border-radius: 0.3rem 0 0 0.3rem; } .design-wahl__farben i:last-child { border-radius: 0 0.3rem 0.3rem 0; }