/* ========================================================================== Hautguide by Schlennart — Landing Page hautguide.schlennart.net (B-039) Design: dieselbe Familie wie `website/` und wie §5.1 der Plattform — dieselben Farben, dieselbe Typo, derselbe Radius, dieselbe Kurve. Gedreht auf dark. Ohne die paper-*-Szenerie. Der Sprung von hier nach `kurs.schlennart.net/kaufen` darf nicht wie zwei Produkte aussehen. Deshalb: nichts hier erfindet ein Token neu. ========================================================================== */ /* -------------------------------------------------------------------------- Schriften — selbst gehostet, kein Google-CDN, kein unpkg. LATER.md W2 / §2.3.1: beides sind US-CDN-Aufrufe, die die Besucher-IP ohne Einwilligung uebertragen. Die Content-Security-Policy im macht den Rueckfall unmoeglich, nicht nur unerwuenscht. Beide Dateien sind Variable Fonts — ein Gewichtsbereich, eine Datei. -------------------------------------------------------------------------- */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url('fonts/bricolage-grotesque-v9-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url('fonts/bricolage-grotesque-v9-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/hanken-grotesk-v12-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/hanken-grotesk-v12-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- Tokens -------------------------------------------------------------------------- */ :root { /* Die Palette aus §5.1 / website/, unveraendert. Nur die Rollen sind gedreht. */ --cream: #F0EDE1; --cream-card: #F8F6EE; --ink: #211E18; --sun: #E2A23A; --clay: #C1512E; --sage: #6E7956; /* Dunkle Rollen, alle aus der Palette gemischt — keine neue Farbe. */ --grund: var(--ink); /* Seite */ --flaeche: color-mix(in srgb, var(--cream) 7%, var(--ink)); /* gehobene Flaeche */ --flaeche-hoch: color-mix(in srgb, var(--cream) 11%, var(--ink)); --text: var(--cream); /* Ueberschriften */ --text-weich: #C2BFB5; /* Fliesstext auf ink — 9,0:1, deutlich ueber AA */ --text-still: #939087; /* Tertiaer, Labels — 5,2:1 */ --sage-hell: #9FA58B; /* sage ist auf ink nur 3,6:1 und faellt durch AA */ --linie: color-mix(in srgb, var(--cream) 15%, transparent); --linie-stark: color-mix(in srgb, var(--cream) 28%, transparent); /* Aktionsfarbe. --clay bleibt die Kauffarbe, genau wie auf `/kaufen` (§5.1: clay = Aktion). Auf dunklem Grund nur als FLAECHE, nie als Text: clay auf ink ist 3,55:1 und faellt durch AA. Die Schrift darauf ist WEISS, nicht cream — weiss/clay = 4,68:1, cream/clay = 3,95:1 (INPUTS B-002, Barrierefreiheits- Untergrenze, keine Geschmacksfrage). --sun ist der Akzent fuer Typo auf dunklem Grund (7,5:1), so wie in der dunklen Sektion und im Footer von website/. */ --aktion: var(--clay); --aktion-hover: #D45C34; --aktion-schrift: #FFFFFF; --akzent: var(--sun); --maxw: 1240px; --pad: clamp(1.25rem, 4vw, 2.5rem); --radius: 18px; /* ein Regler treibt die ganze Skala */ --r-lg: calc(var(--radius) * 1.78); --r-md: var(--radius); --r-sm: calc(var(--radius) * .56); --disp: 'Bricolage Grotesque', sans-serif; --body: 'Hanken Grotesk', sans-serif; --ease: cubic-bezier(.16, 1, .3, 1); } /* -------------------------------------------------------------------------- Grundlagen -------------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } * { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .22) transparent; } html, body { overscroll-behavior: none; } html { scroll-behavior: smooth; } /* Kein Lenis: das ist ein unpkg-Aufruf (W2). Natives smooth scroll reicht. */ /* Die Leinwand, nicht nur der Body. `body` traegt einen Verlauf, und ein Verlauf deckt nur die Box, die er ausmisst — auf einer Seite, die kuerzer ist als das Fenster, blieb darunter ein weisser Streifen stehen. Auf der langen Startseite faellt das nie auf, auf 404.html und den vier Rechtsseiten sofort. Reine Farbe, kein Layout: das hier kann nichts verschieben. */ html { background: var(--grund); } body { background: linear-gradient(180deg, #2B2720 0%, var(--grund) 22%, var(--grund) 100%); color: var(--text-weich); font-family: var(--body); font-size: clamp(1rem, .96rem + .25vw, 1.125rem); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; min-height: 100svh; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--sun); color: var(--ink); } /* Filmkorn — auf dunklem Grund hebt `screen` das Korn, `multiply` (hell) waere hier unsichtbar. Fest positioniert, nie auf einem Scroll-Container. */ .korn { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } h1, h2, h3, h4 { font-family: var(--disp); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; color: var(--text); } p { text-wrap: pretty; } .em { color: var(--sun); } /* Ueberschriften-Hervorhebung: gleiche Familie, Akzentfarbe */ .kicker { font-family: var(--body); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sun); display: inline-flex; align-items: center; gap: .6rem; } .kicker::before { content: ""; width: 26px; height: 2px; background: var(--sun); border-radius: 2px; } .lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--text-weich); max-width: 52ch; line-height: 1.55; } .nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Platzhalter — sichtbar, greifbar, unmoeglich zu uebersehen Jeder Platzhalter traegt `data-ph=""`. Der Text darin ist die Anweisung in eckigen Klammern, kein Blindtext: Blindtext geht versehentlich live, eine Anweisung nicht. `./pruefe-platzhalter.sh` zaehlt sie und blockiert das Deploy. -------------------------------------------------------------------------- */ [data-ph] { position: relative; outline: 1px dashed color-mix(in srgb, var(--sun) 55%, transparent); outline-offset: 6px; border-radius: 3px; } [data-ph]::after { content: attr(data-ph); position: absolute; left: 0; top: -.45rem; transform: translateY(-100%); font-family: var(--body); font-weight: 600; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1; white-space: nowrap; pointer-events: none; color: var(--ink); background: var(--sun); padding: .25rem .45rem; border-radius: 3px; opacity: .92; z-index: 5; } .ph-text { color: var(--text-still); font-style: normal; } /* Die Marke braucht Luft ueber dem Element. In dicht gesetzten Listen, Karten und im FAQ ueberlagert sie sonst die Zeile darueber. `:has()` haengt diese Luft an die ANWESENHEIT eines Platzhalters — sie verschwindet von selbst, sobald der Text ersetzt ist. Das Enddesign bleibt damit unangetastet; es gibt keinen zweiten Satz Abstaende zum Zurueckbauen. */ .wen-spalte ul:has([data-ph]) { gap: 2.6rem; } .lern-grid:has([data-ph]) { gap: 2.4rem 1rem; } .lern-karte:has([data-ph]) { gap: 1.9rem; } .faq details:has([data-ph]) summary { padding-top: 2.8rem; } .faq details:has([data-ph]) .faq-antwort { padding-top: 1rem; } .head:has([data-ph]) h2 { margin-top: 1.6rem; } .hero-copy:has([data-ph]) h1 { margin-top: 2.2rem; } .head:has([data-ph]) .lead, .hero-copy:has([data-ph]) .lead { margin-top: 1.5rem; } .foot-unten:has([data-ph]) { padding-top: 3rem; } .kauf-block:has([data-ph]) { gap: 2rem; } .warteliste:has([data-ph]) { gap: 1.9rem; } .va-hinweis[data-ph] { margin-top: 2rem; } /* -------------------------------------------------------------------------- Knoepfe -------------------------------------------------------------------------- */ .btn { font-family: var(--body); font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.6rem; border-radius: 999px; cursor: pointer; transition: transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); border: 1.5px solid transparent; text-align: left; } .btn .arr { transition: transform .3s var(--ease); } .btn:hover .arr { transform: translateX(4px); } .btn:active { transform: scale(.96); } .btn-primaer { background: var(--aktion); color: var(--aktion-schrift); } .btn-primaer:hover { background: var(--aktion-hover); } .btn-geist { border-color: var(--linie-stark); color: var(--text); background: transparent; } .btn-geist:hover { border-color: var(--sun); color: var(--sun); } .btn-gross { font-size: 1.05rem; padding: 1.05rem 2rem; } /* -------------------------------------------------------------------------- Kopfzeile -------------------------------------------------------------------------- */ header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease); } header.gescrollt { border-bottom-color: var(--linie); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 72px; } .marke { font-family: var(--disp); font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; color: var(--text); } .marke b { color: var(--sun); font-weight: 800; } nav ul { list-style: none; display: flex; gap: 1.9rem; } nav ul a { font-size: .95rem; font-weight: 500; color: var(--text-weich); position: relative; padding-block: .3rem; transition: color .25s var(--ease); } nav ul a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--sun); border-radius: 2px; transition: width .28s var(--ease); } nav ul a:hover, nav ul a.aktiv { color: var(--text); } nav ul a:hover::after, nav ul a.aktiv::after { width: 100%; } .nav-rechts { display: flex; align-items: center; gap: .8rem; } .nav-schalter { display: none; background: none; border: 1.5px solid var(--linie-stark); color: var(--text); border-radius: 999px; padding: .5rem 1rem; font-family: var(--body); font-weight: 600; font-size: .85rem; cursor: pointer; } /* -------------------------------------------------------------------------- Abschnitts-Huelle -------------------------------------------------------------------------- */ section.block { padding-block: clamp(3rem, 6vw, 5.5rem); } .head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .head h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin: .55rem 0 1rem; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); } .hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .hero-copy h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); margin: 1.3rem 0 1.5rem; letter-spacing: -.035em; max-width: 15ch; } .hero-copy .lead { margin-bottom: 2rem; } .hero-aktionen { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; } /* VSL — 16:9-Rahmen. Solange kein Video da ist, ist das ein markierter Platz, keine Attrappe: es gibt kein Poster, kein Standbild, keinen Fake-Player. */ .vsl { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--sage) 26%, transparent), transparent 62%), var(--flaeche); border: 1px solid var(--linie); box-shadow: 0 40px 70px -34px rgb(0 0 0 / .75); display: grid; place-items: center; gap: .9rem; align-content: center; padding: 1.5rem; } .vsl-play { width: 68px; height: 68px; border-radius: 50%; background: color-mix(in srgb, var(--sun) 92%, transparent); display: grid; place-items: center; } .vsl-play svg { width: 24px; height: 24px; translate: 3px 0; } .vsl-text { font-family: var(--body); font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-still); text-align: center; } /* -------------------------------------------------------------------------- CTA-Baender zwischen den Abschnitten Jedes fuehrt zur letzten Sektion (#platz-sichern), nicht direkt zum Kauf: die Kaufentscheidung faellt dort, wo der Platzzaehler steht. -------------------------------------------------------------------------- */ .cta-band { padding-block: clamp(1.6rem, 3.5vw, 2.6rem); } .cta-band-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; background: linear-gradient(112deg, color-mix(in srgb, var(--sage) 20%, var(--flaeche)), var(--flaeche)); border: 1px solid var(--linie); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.4rem, 3.5vw, 2.6rem); } .cta-band p { font-family: var(--disp); font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.15; letter-spacing: -.02em; color: var(--text); max-width: 34ch; } /* -------------------------------------------------------------------------- Vorher / Nachher -------------------------------------------------------------------------- */ /* Deckel auf der Breite: ohne ihn wird das Bildpaar auf 1440 px zu je 600 x 750 px und schluckt den Rest des Abschnitts. */ .va-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); max-width: 900px; } .va-karte { display: flex; flex-direction: column; gap: .9rem; } .va-label { font-family: var(--body); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; } .va-karte.vorher .va-label { color: var(--text-still); } .va-karte.nachher .va-label { color: var(--sun); } .va-rahmen { aspect-ratio: 4 / 5; border-radius: 28px 140px 28px 140px; overflow: hidden; background: var(--flaeche); border: 1px solid var(--linie); display: grid; place-items: center; padding: 1.5rem; text-align: center; box-shadow: 0 36px 60px -34px rgb(0 0 0 / .7); } .va-karte.nachher .va-rahmen { border-radius: 140px 28px 140px 28px; } .va-rahmen img { width: 100%; height: 100%; object-fit: cover; } .va-hinweis { font-size: .95rem; color: var(--text-still); max-width: 40ch; } /* -------------------------------------------------------------------------- Kursbeschreibung — was du lernst -------------------------------------------------------------------------- */ .lern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .lern-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .6rem; transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .lern-karte:hover { transform: translateY(-4px); border-color: var(--linie-stark); background: var(--flaeche-hoch); } .lern-nr { font-family: var(--disp); font-weight: 700; font-size: 1.5rem; color: var(--sage-hell); line-height: 1; } .lern-karte h3 { font-size: 1.2rem; } .lern-karte p { font-size: .96rem; color: var(--text-weich); } /* -------------------------------------------------------------------------- Fuer wen / Fuer wen nicht -------------------------------------------------------------------------- */ .wen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); } .wen-spalte { border-radius: var(--r-lg); padding: clamp(1.5rem, 3.2vw, 2.3rem); border: 1px solid var(--linie); background: var(--flaeche); display: flex; flex-direction: column; gap: 1.1rem; } .wen-spalte.ja { border-color: color-mix(in srgb, var(--sage) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--sage) 18%, var(--flaeche)), var(--flaeche)); } .wen-spalte.nein { border-color: color-mix(in srgb, var(--clay) 45%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--clay) 14%, var(--flaeche)), var(--flaeche)); } .wen-spalte h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); } .wen-spalte ul { list-style: none; display: flex; flex-direction: column; gap: .85rem; } .wen-spalte li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem; align-items: start; font-size: .98rem; } .wen-zeichen { font-family: var(--disp); font-weight: 800; line-height: 1.5; } .wen-spalte.ja .wen-zeichen { color: var(--sage-hell); } .wen-spalte.nein .wen-zeichen { color: var(--sun); } /* -------------------------------------------------------------------------- FAQ —
/, damit es ohne eine Zeile JavaScript funktioniert -------------------------------------------------------------------------- */ .faq { display: flex; flex-direction: column; border-top: 1px solid var(--linie); max-width: 76ch; } .faq details { border-bottom: 1px solid var(--linie); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem .2rem; cursor: pointer; list-style: none; font-family: var(--disp); font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.25rem); letter-spacing: -.01em; color: var(--text); transition: color .25s var(--ease); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--sun); } .faq-zeichen { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--linie-stark); position: relative; transition: border-color .25s var(--ease), transform .35s var(--ease); } .faq-zeichen::before, .faq-zeichen::after { content: ""; position: absolute; inset: 50% 25%; height: 1.5px; background: currentColor; translate: 0 -50%; border-radius: 2px; } .faq-zeichen::after { rotate: 90deg; transition: opacity .25s var(--ease); } .faq details[open] .faq-zeichen { border-color: var(--sun); transform: rotate(180deg); } .faq details[open] .faq-zeichen::after { opacity: 0; } .faq-antwort { padding: 0 .2rem 1.5rem; } .faq-antwort p { color: var(--text-weich); max-width: 62ch; } /* -------------------------------------------------------------------------- Letzte Sektion — Platz sichern -------------------------------------------------------------------------- */ .abschluss { background: linear-gradient(170deg, color-mix(in srgb, var(--sage) 16%, var(--flaeche)), var(--flaeche) 55%); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); } .abschluss h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); max-width: 16ch; } .abschluss-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } .kauf-block { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; } /* Platzzaehler. Standard ist `hidden` — die Zahl kommt vom Server oder gar nicht. Es gibt bewusst keinen vorgerenderten Startwert: eine Zahl im HTML waere eine Behauptung ueber die Platzzahl, die niemand belegen kann. */ .zaehler { display: inline-flex; align-items: center; gap: .7rem; padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sun) 45%, transparent); background: color-mix(in srgb, var(--sun) 10%, transparent); font-size: .95rem; color: var(--text); } .zaehler[hidden] { display: none; } .zaehler-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--sun); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sun) 70%, transparent); animation: puls 2.4s var(--ease) infinite; } @keyframes puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sun) 60%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .zaehler b { font-family: var(--disp); font-weight: 800; font-size: 1.15rem; color: var(--sun); } .zaehler.wenig { border-color: color-mix(in srgb, var(--clay) 60%, transparent); background: color-mix(in srgb, var(--clay) 14%, transparent); } .zaehler.wenig .zaehler-punkt, .zaehler.wenig b { color: var(--clay); background-color: var(--clay); } .zaehler.wenig b { background: none; color: #E8734C; } .kauf-hinweis { font-size: .92rem; color: var(--text-still); max-width: 44ch; } /* Warteliste */ .warteliste { background: var(--grund); border: 1px solid var(--linie); border-radius: var(--r-lg); padding: clamp(1.5rem, 3.2vw, 2.2rem); display: flex; flex-direction: column; gap: 1rem; } .warteliste h3 { font-size: 1.35rem; } .warteliste p { font-size: .96rem; color: var(--text-weich); } .wl-form { display: flex; flex-wrap: wrap; gap: .6rem; } .wl-form[hidden] { display: none; } .wl-form input[type="email"] { flex: 1 1 15rem; min-width: 0; font-family: var(--body); font-size: 1rem; color: var(--text); background: var(--flaeche); border: 1.5px solid var(--linie-stark); border-radius: 999px; padding: .8rem 1.2rem; transition: border-color .25s var(--ease); } .wl-form input[type="email"]::placeholder { color: var(--text-still); } .wl-form input[type="email"]:focus { outline: none; border-color: var(--sun); } .wl-form button:disabled { opacity: .55; cursor: progress; } .wl-meldung { font-size: .93rem; line-height: 1.5; min-height: 1.4em; } .wl-meldung:empty { display: none; } .wl-meldung.gut { color: var(--sage-hell); } .wl-meldung.schlecht { color: #E8734C; } .wl-klein { font-size: .82rem; color: var(--text-still); } /* -------------------------------------------------------------------------- Fusszeile -------------------------------------------------------------------------- */ footer { background: var(--grund); padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; border-top: 1px solid var(--linie); } .foot-cols { display: flex; gap: clamp(2.5rem, 6vw, 5rem); flex-wrap: wrap; padding-bottom: 2.5rem; } .foot-col h4 { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sun); font-family: var(--body); font-weight: 600; margin-bottom: 1.1rem; } .foot-col ul { list-style: none; display: flex; flex-direction: column; gap: .7rem; } .foot-col a, .foot-col li { color: var(--text-weich); font-size: .96rem; transition: color .25s var(--ease); } .foot-col a:hover { color: var(--sun); } .foot-unten { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--text-still); border-top: 1px solid var(--linie); padding-top: 1.8rem; } /* -------------------------------------------------------------------------- Fortschrittsbalken -------------------------------------------------------------------------- */ .fortschritt { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; background: linear-gradient(90deg, var(--clay), var(--sun)); transform: scaleX(var(--scroll, 0)); transform-origin: 0 50%; will-change: transform; } /* -------------------------------------------------------------------------- Fokus — sichtbar, immer -------------------------------------------------------------------------- */ a:focus-visible, .btn:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; border-radius: 6px; } /* -------------------------------------------------------------------------- Bewegung — dieselbe eine Konfiguration wie in website/: 26 px hoch, einblenden, entschaerfen, .6 s. Konsistenz ist, was sauber wirkt. Ohne JavaScript ist alles sichtbar; `html.js` schaltet die Animation erst ein. -------------------------------------------------------------------------- */ html.js .zeig { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); } html.js .zeig.drin { opacity: 1; transform: none; filter: none; } html.js [data-staffel] > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); } html.js [data-staffel].drin > * { opacity: 1; transform: none; } [data-staffel].drin > *:nth-child(2) { transition-delay: .07s; } [data-staffel].drin > *:nth-child(3) { transition-delay: .14s; } [data-staffel].drin > *:nth-child(4) { transition-delay: .21s; } [data-staffel].drin > *:nth-child(5) { transition-delay: .28s; } [data-staffel].drin > *:nth-child(6) { transition-delay: .35s; } /* Wort-Staffel in Ueberschriften: jedes Wort steigt aus seiner eigenen Blende */ html.js .sw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; /* Platz fuer Unterlaengen */ } html.js .sw > i { display: inline-block; font-style: normal; transform: translateY(115%); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease); } html.js [data-teilen].drin .sw > i { transform: none; opacity: 1; } /* -------------------------------------------------------------------------- Diagnose-Banner — nur fuer den Betreiber, nie fuer den Besucher. Erscheint auf localhost oder mit #diagnose. Siehe README. -------------------------------------------------------------------------- */ .diagnose { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--clay); color: #fff; font-family: var(--body); font-size: .85rem; line-height: 1.45; padding: .9rem clamp(1rem, 4vw, 2rem); display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; } .diagnose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; } .diagnose button { background: none; border: 1px solid #fff8; color: #fff; border-radius: 999px; padding: .2rem .7rem; cursor: pointer; flex: none; } /* -------------------------------------------------------------------------- Rechtstext-Platzhalterseiten -------------------------------------------------------------------------- */ .rechts-seite { max-width: 68ch; padding-block: clamp(3rem, 8vw, 6rem); } .rechts-seite h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1.5rem; } .rechts-seite p { margin-bottom: 1.1rem; } .rechts-zurueck { margin-top: 2.5rem; } /* -------------------------------------------------------------------------- Umbrueche -------------------------------------------------------------------------- */ @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } .abschluss-grid { grid-template-columns: 1fr; gap: 2.5rem; } .va-grid { grid-template-columns: 1fr; } .wen-grid { grid-template-columns: 1fr; } .cta-band-innen { flex-direction: column; align-items: flex-start; } } @media (max-width: 680px) { nav ul { position: fixed; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--grund); border-bottom: 1px solid var(--linie); max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } nav ul.offen { max-height: 340px; } nav ul li { border-top: 1px solid var(--linie); } nav ul a { display: block; padding: 1rem var(--pad); } nav ul a::after { display: none; } .nav-schalter { display: block; } .nav-cta { display: none; } /* die CTA-Baender uebernehmen auf klein */ .va-rahmen { aspect-ratio: 1 / 1; } .btn { width: 100%; justify-content: center; } .wl-form button { width: 100%; } /* Auf 390 px passt eine lange Marke nicht in eine Zeile und laeuft sonst ueber den rechten Rand hinaus. */ [data-ph]::after { font-size: .52rem; white-space: normal; max-width: 100%; line-height: 1.35; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .zeig, html.js [data-staffel] > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } html.js .sw > i { transform: none !important; opacity: 1 !important; transition: none !important; } .btn, .lern-karte { transition: none !important; } .btn:active, .lern-karte:hover { transform: none !important; } .zaehler-punkt { animation: none !important; } .fortschritt { display: none; } .faq details[open] .faq-zeichen { transition: none !important; } }