/* ============================================================ RESET Mobility — Relaunch Aufbau übernommen von heizmann-box.de, Farben auf RESET gedreht. Zum Ändern: Farben ganz oben unter :root ============================================================ */ /* ---------- Farbwelt ---------- Standard ist HELL — Weiß, warmes Grau, Orange aus dem Logo. Der Schalter oben rechts stellt auf Dunkel um (setzt data-theme="dark" am ). Das Grau ist bewusst warm (leicht ins Sandfarbene), damit das Orange nicht kalt und schrill wirkt. -------------------------------------------------------------- */ :root{ color-scheme: light; --bg: #ffffff; /* Grundfläche */ --bg-soft: #f7f5f1; /* abgesetzte Sektionen */ --surface: #ffffff; /* Karten, Formulare */ --panel: #17181c; /* dunkle Bänder, Schluss-CTA */ --line: #eae6de; --nav-bg: rgba(255,255,255,.82); --ink: #1a1b1f; --ink-soft: #46443e; --muted: #7b766c; --panel-ink: #ffffff; --panel-sub: #a7a29a; /* Orange aus dem Logo — von Rot-Orange bis Gelb */ --o1: #ff3d00; /* dunkles Orange */ --o2: #ff8a00; /* Logo-Orange */ --o3: #ffc21e; /* helles Gelb */ --accent: #d1500a; /* Orange als Text auf Hell — dunkel genug zum Lesen */ --accent-ink: #c2470a; --grad: linear-gradient(100deg, var(--o1) 0%, var(--o2) 46%, var(--o3) 100%); /* Bild-Platzhalter */ --ph1:#efe9e0; --ph2:#f6f2ec; --ph-bg:rgba(255,255,255,.82); --ph-ink:#a49c8f; --glow: .16; /* Stärke der Orange-Schleier */ --num-op: .22; /* Deckkraft der großen Ziffern */ --sh-card: 0 16px 44px rgba(60,40,10,.10); --sh-nav: 0 2px 20px rgba(0,0,0,.05); --nav-h: 76px; --max: 1180px; --r: 16px; } :root[data-theme="dark"]{ color-scheme: dark; --bg:#141317; --bg-soft:#1a191e; --surface:#1f1e24; --panel:#232128; --line:#312e38; --nav-bg:rgba(20,19,23,.82); --ink:#faf8f5; --ink-soft:#cfc9c0; --muted:#948d83; --panel-ink:#ffffff; --panel-sub:#a7a29a; --accent:#ff9838; --accent-ink:#ff9838; --ph1:#232128; --ph2:#2a2830; --ph-bg:rgba(0,0,0,.45); --ph-ink:#9a938a; --glow:.22; --num-op:.34; --sh-card:0 14px 40px rgba(0,0,0,.45); --sh-nav: 0 2px 20px rgba(0,0,0,.35); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 12px); } body{ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; } /* ---------- Typo ---------- */ h1,h2,h3,h4{ line-height:1.08; letter-spacing:-0.02em; font-weight:800; } h2{ font-size:clamp(30px, 4.2vw, 50px); } h3{ font-size:clamp(19px, 2vw, 23px); letter-spacing:-0.01em; } .kicker{ font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; } .lead{ font-size:clamp(16px,1.5vw,18.5px); color:var(--ink-soft); max-width:62ch; } .muted{ color:var(--muted); } .grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px; font-weight:650; font-size:15.5px; border:0; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space:nowrap; } .btn .arw{ transition:transform .18s ease; } .btn:hover .arw{ transform:translateX(4px); } .btn-dark{ background:var(--ink); color:var(--bg); box-shadow:0 6px 22px rgba(23,25,28,.18); } .btn-dark:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(23,25,28,.26); } .btn-grad{ background:var(--grad); color:#1c1005; box-shadow:0 6px 22px rgba(255,138,0,.36); } .btn-grad:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(255,138,0,.48); } .btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); } .btn-ghost:hover{ border-color:var(--ink); } .btn-sm{ padding:11px 20px; font-size:14.5px; } .btn-lg{ padding:19px 34px; font-size:17.5px; } @media (max-width:600px){ .btn-lg{ width:100%; justify-content:center; } } /* ---------- Navigation ---------- */ header{ position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h); background:var(--nav-bg); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease; } header.scrolled{ border-bottom-color:var(--line); box-shadow:var(--sh-nav); } .nav{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; } .logo{ display:flex; align-items:center; gap:12px; font-weight:800; font-size:17px; letter-spacing:-.02em; } /* Das Logo ist freigestellt (transparent) und funktioniert auf hell wie dunkel. */ .logo-img{ height:42px; width:auto; flex:none; } .foot-logo{ height:52px; width:auto; } .logo span.sub{ font-weight:500; color:var(--muted); font-size:15px; letter-spacing:0; } .nav-links{ display:flex; align-items:center; gap:6px; margin-left:auto; } .nav-links a{ position:relative; padding:9px 15px; border-radius:8px; font-size:14.5px; font-weight:560; color:var(--ink-soft); transition:color .16s ease, background .16s ease; } .nav-links a:hover{ color:var(--ink); background:var(--bg-soft); } .nav-links a.active{ color:var(--ink); font-weight:680; } .nav-links a.active::after{ content:""; position:absolute; left:15px; right:15px; bottom:2px; height:2.5px; border-radius:2px; background:var(--grad); } .nav-cta{ margin-left:14px; } .theme-btn{ width:40px; height:40px; flex:none; margin-left:12px; border:1.5px solid var(--line); border-radius:11px; background:transparent; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .18s ease, transform .18s ease; } .theme-btn:hover{ border-color:var(--ink); transform:translateY(-1px); } /* Hell ist Standard → Mond zeigen (Klick wechselt auf Dunkel) */ .theme-btn .sun{ display:none; } .theme-btn .moon{ display:block; } :root[data-theme="dark"] .theme-btn .sun{ display:block; } :root[data-theme="dark"] .theme-btn .moon{ display:none; } .burger{ display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; } .burger span{ display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.25s ease; } .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger.open span:nth-child(2){ opacity:0; } .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .mobile-menu{ position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99; background:var(--bg); border-bottom:1px solid var(--line); padding:14px 28px 26px; display:none; flex-direction:column; gap:2px; box-shadow:var(--sh-card); } .mobile-menu.open{ display:flex; } .mobile-menu a{ padding:14px 4px; font-size:18px; font-weight:650; border-bottom:1px solid var(--line); } .mobile-menu .btn{ margin-top:18px; justify-content:center; } /* ---------- Bild-Platzhalter ---------- */ .ph{ position:relative; border-radius:var(--r); overflow:hidden; background: repeating-linear-gradient(135deg, var(--ph1) 0 12px, var(--ph2) 12px 24px); display:flex; align-items:center; justify-content:center; text-align:center; } .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .ph.has-img::after{ content:none; } .ph::after{ content:attr(data-label); font-size:12.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ph-ink); padding:10px 16px; background:var(--ph-bg); border-radius:999px; max-width:80%; } /* ---------- HERO ---------- */ .hero{ padding: calc(var(--nav-h) + 54px) 0 0; position:relative; overflow:hidden; } .hero::before{ content:""; position:absolute; top:-320px; right:-220px; width:820px; height:820px; background:radial-gradient(circle, rgba(255,138,0,var(--glow)) 0%, rgba(255,138,0,0) 62%); pointer-events:none; } .hero-word{ font-size:clamp(72px, 15.5vw, 220px); font-weight:900; line-height:.86; letter-spacing:.02em; margin-bottom:6px; white-space:nowrap; } .hero-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); gap:48px; align-items:end; } .hero-copy h1{ font-size:clamp(28px, 3.6vw, 44px); margin-bottom:18px; text-wrap:balance; } .hero-copy .lead{ margin-bottom:30px; } .hero-img{ aspect-ratio:4/3.1; align-self:end; } /* Die 7-Stufen-Grafik ist eine Zeichnung, kein Foto — die darf nicht angeschnitten werden, sonst fehlen oben oder unten Stufen. */ .hero-figure{ align-self:center; } .hero-figure img{ width:100%; height:auto; border-radius:var(--r); } .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .hero-note{ font-size:13.5px; color:var(--muted); margin-top:16px; } /* Stats-Band */ .stats{ border-top:1px solid var(--line); margin-top:64px; } .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); } .stat{ padding:30px 8px 30px 0; } .stat b{ display:block; font-size:clamp(26px,3vw,36px); font-weight:850; letter-spacing:-.03em; } .stat span{ font-size:14px; color:var(--muted); } /* ---------- Sections ---------- */ section{ padding:104px 0; } .sec-soft{ background:var(--bg-soft); } .sec-head{ max-width:720px; margin-bottom:52px; } .sec-head h2{ margin-bottom:16px; } /* Feature-Karten */ .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:32px 28px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover{ transform:translateY(-4px); box-shadow:var(--sh-card); border-color:transparent; } .card h3{ margin:18px 0 10px; } .card p{ color:var(--muted); font-size:15.5px; } .ic{ width:46px; height:46px; border-radius:12px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; } /* „Coming soon"-Kennzeichen auf Karten */ .bald{ display:inline-block; padding:5px 13px; border-radius:999px; font-size:12.5px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; background:rgba(255,138,0,.18); color:var(--accent-ink); } /* Themen-Zeile */ .skills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:38px; } .pill{ padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); font-weight:620; font-size:14.5px; background:var(--surface); } /* Einstieg / Schritte */ .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:s; } .step{ background:var(--surface); border-radius:var(--r); padding:34px 30px 32px; border:1px solid var(--line); position:relative; overflow:hidden; } .step::before{ counter-increment:s; content:"0" counter(s); position:absolute; top:14px; right:20px; font-size:74px; font-weight:900; letter-spacing:-.05em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; opacity:var(--num-op); } .step h3{ margin-bottom:10px; position:relative; } .step p{ color:var(--muted); font-size:15.5px; position:relative; } .step .tag{ display:inline-block; margin-bottom:14px; padding:5px 13px; border-radius:999px; font-size:12.5px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; background:rgba(255,138,0,.18); color:var(--accent-ink); } /* Dunkles Band */ .band{ background:var(--panel); color:var(--panel-ink); border-radius:20px; padding:44px 46px; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; } .band h3{ font-size:clamp(22px,2.4vw,29px); margin-bottom:8px; } .band p{ color:var(--panel-sub); font-size:15.5px; max-width:52ch; } .band .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.28); } .band .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.07); } /* Programme / Preise */ .prices{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; } .price{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:36px 32px 34px; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; } .price:hover{ transform:translateY(-4px); box-shadow:var(--sh-card); } .price.hl{ border:0; box-shadow:0 18px 50px rgba(255,138,0,.26); position:relative; } .price.hl::before{ content:""; position:absolute; inset:0; border-radius:18px; padding:2px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .price .badge{ position:absolute; top:-13px; left:32px; padding:5px 15px; border-radius:999px; background:var(--grad); color:#1c1005; font-size:12px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; } .price .name{ font-size:14px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .price .amt{ display:flex; align-items:baseline; gap:6px; margin:14px 0 22px; } .price .amt b{ font-size:52px; font-weight:850; letter-spacing:-.04em; line-height:1; } .price .amt span{ color:var(--muted); font-size:15px; font-weight:560; } .price ul{ list-style:none; display:flex; flex-direction:column; gap:13px; margin-bottom:28px; } .price li{ display:flex; gap:11px; font-size:15.5px; color:var(--ink-soft); align-items:flex-start; } .price li svg{ flex:none; margin-top:4px; stroke:var(--accent); } .price .btn{ margin-top:auto; justify-content:center; } .price-note{ margin-top:26px; font-size:14.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px 26px; } .price-note b{ color:var(--ink-soft); font-weight:650; } /* Split / Über mich */ .split{ display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; } .split .ph{ aspect-ratio:4/3.3; } .checks{ list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:28px; } .checks li{ display:flex; gap:13px; align-items:flex-start; font-size:16px; color:var(--ink-soft); } .checks svg{ flex:none; margin-top:4px; stroke:var(--accent); } /* ---------- Blog-Übersicht als Karten ---------- */ .beitraege{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .beitrag{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .beitrag:hover{ transform:translateY(-4px); box-shadow:var(--sh-card); border-color:transparent; } .beitrag-bild{ aspect-ratio:16/10; background:var(--ph1); overflow:hidden; } .beitrag-bild img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; } .beitrag:hover .beitrag-bild img{ transform:scale(1.04); } .beitrag-text{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; } .beitrag-datum{ font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .beitrag h3{ font-size:19.5px; margin-bottom:10px; text-wrap:balance; } .beitrag:hover h3{ color:var(--accent); } .beitrag p{ font-size:15px; color:var(--muted); flex:1; } .beitrag .weiter{ margin-top:18px; font-size:14.5px; font-weight:680; color:var(--accent); display:flex; align-items:center; gap:7px; } .beitrag:hover .weiter span{ transform:translateX(4px); } .beitrag .weiter span{ transition:transform .18s ease; } @media (max-width:1000px){ .beitraege{ grid-template-columns:repeat(2,1fr); } } @media (max-width:680px){ .beitraege{ grid-template-columns:1fr; } } /* ---------- Einzelner Artikel ---------- */ .artikel{ max-width:760px; margin:0 auto; } .artikel .zurueck{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:650; color:var(--muted); margin-bottom:26px; } .artikel .zurueck:hover{ color:var(--accent); } .artikel h1{ font-size:clamp(30px,4vw,44px); margin-bottom:18px; text-wrap:balance; } .artikel .meta{ font-size:13.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; } .artikel-inhalt{ font-size:17.5px; line-height:1.72; color:var(--ink-soft); } .artikel-inhalt > *{ margin-bottom:22px; } .artikel-inhalt h2{ font-size:clamp(24px,2.8vw,31px); color:var(--ink); margin:44px 0 16px; } .artikel-inhalt h3{ font-size:21px; color:var(--ink); margin:36px 0 12px; } .artikel-inhalt h4{ font-size:17.5px; font-weight:750; color:var(--ink); margin:28px 0 10px; } .artikel-inhalt a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .artikel-inhalt strong, .artikel-inhalt b{ color:var(--ink); font-weight:700; } .artikel-inhalt ul, .artikel-inhalt ol{ margin-left:24px; } .artikel-inhalt li{ margin-bottom:10px; } .artikel-inhalt img{ border-radius:var(--r); margin:8px auto; height:auto; } .artikel-inhalt figure{ margin:32px 0; } .artikel-inhalt figcaption{ font-size:14px; color:var(--muted); text-align:center; margin-top:10px; } .artikel-inhalt blockquote{ border-left:3px solid var(--o2); padding:4px 0 4px 22px; margin:32px 0; font-size:19px; font-style:italic; color:var(--ink); } .artikel-inhalt iframe, .artikel-inhalt video{ width:100%; aspect-ratio:16/9; border:0; border-radius:var(--r); } /* Videos laden erst auf Klick — vorher geht nichts an YouTube raus */ .video{ position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; margin:32px 0; } .video-start{ position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:26px; text-align:center; font:inherit; color:#fff; background:linear-gradient(150deg, #201d24 0%, #2c2229 55%, #3a2618 100%); transition:filter .2s ease; } .video-start:hover{ filter:brightness(1.12); } .video-play{ width:66px; height:66px; border-radius:50%; background:var(--grad); flex:none; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(255,138,0,.4); transition:transform .2s ease; } .video-play::after{ content:""; width:0; height:0; margin-left:5px; border-left:20px solid #1c1005; border-top:12px solid transparent; border-bottom:12px solid transparent; } .video-start:hover .video-play{ transform:scale(1.07); } .video-titel{ font-size:16.5px; font-weight:700; letter-spacing:-.01em; } .video-start small{ font-size:13px; line-height:1.5; color:rgba(255,255,255,.72); max-width:44ch; } .video-start small a{ color:var(--o3); text-decoration:underline; } .video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .artikel-inhalt table{ width:100%; border-collapse:collapse; font-size:15.5px; } .artikel-inhalt td, .artikel-inhalt th{ border:1px solid var(--line); padding:10px 12px; text-align:left; } .artikel-fuss{ margin-top:56px; padding-top:32px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; } /* ============================================================ DER PFAD — Programme als Reise Eine senkrechte Linie verbindet die Stationen. Jede Station ist ein Programm. Die Linie zeigt die empfohlene Reihenfolge, das Kennzeichen „Einstieg möglich" sagt: du darfst überall anfangen. ============================================================ */ .pfad{ position:relative; max-width:900px; margin:0 auto; } /* Die Linie selbst — liegt hinter den Stationen */ .pfad::before{ content:""; position:absolute; left:39px; top:26px; bottom:120px; width:3px; background:linear-gradient(180deg, var(--o1) 0%, var(--o2) 50%, var(--o3) 100%); border-radius:2px; opacity:.55; } @media (max-width:700px){ .pfad::before{ left:23px; } } .station{ position:relative; padding-left:100px; margin-bottom:34px; } @media (max-width:700px){ .station{ padding-left:62px; } } /* Der Punkt auf der Linie */ .marke{ position:absolute; left:0; top:0; width:80px; height:80px; border-radius:50%; background:var(--grad); color:#1c1005; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:900; line-height:1; flex:none; box-shadow:0 8px 26px rgba(255,138,0,.4); border:4px solid var(--bg); } .marke b{ font-size:26px; letter-spacing:-.03em; } .marke span{ font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-top:2px; } @media (max-width:700px){ .marke{ width:46px; height:46px; border-width:3px; } .marke b{ font-size:17px; } .marke span{ display:none; } } /* Die Karte neben dem Punkt */ .station-karte{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px 32px 28px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .station:hover .station-karte{ transform:translateY(-3px); box-shadow:var(--sh-card); border-color:transparent; } /* Text links, Produktbild rechts — auf schmalen Schirmen untereinander */ .station-medien{ display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center; } .station-bild{ margin:0; } .station-bild img{ width:100%; height:auto; display:block; } @media (max-width:860px){ .station-medien{ grid-template-columns:1fr; gap:22px; } .station-bild{ max-width:420px; } } .station-kopf{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:baseline; margin-bottom:6px; } .station h3{ font-size:clamp(21px,2.6vw,27px); } .station .programm{ font-size:13px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .station .quest{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; } .station p{ color:var(--ink-soft); font-size:16px; margin-bottom:16px; } .station .beute{ list-style:none; display:flex; flex-direction:column; gap:9px; margin:0 0 20px; } .station .beute li{ display:flex; gap:11px; align-items:flex-start; font-size:15.5px; color:var(--ink-soft); } .station .beute svg{ flex:none; margin-top:4px; stroke:var(--accent); } .station-fuss{ display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; } .station .preis{ font-size:27px; font-weight:850; letter-spacing:-.04em; } .station .preis small{ font-size:14px; font-weight:560; color:var(--muted); letter-spacing:0; } /* „Hier kannst du auch anfangen" */ .einstieg{ display:inline-flex; align-items:center; gap:7px; padding:5px 13px; border-radius:999px; font-size:12.5px; font-weight:700; border:1.5px dashed var(--line); color:var(--muted); background:transparent; } .einstieg::before{ content:"▸"; color:var(--accent); font-size:14px; } /* Tutorial — der kostenlose Einstieg vor Stufe I */ /* Deckende Fläche, damit die Pfadlinie nicht durch den Kreis scheint */ .station.tutorial .marke{ background:var(--bg); color:var(--accent); border:3px solid var(--o2); box-shadow:none; } .station.tutorial .marke b{ font-size:22px; } .station.tutorial .station-karte{ background:var(--bg-soft); } /* Nebenquest — abgesetzt, gestrichelt */ .station.neben{ margin-top:52px; } .station.neben .marke{ background:var(--surface); color:var(--accent); border:3px dashed var(--o2); box-shadow:none; } .station.neben .marke b{ font-size:30px; } .station.neben .station-karte{ border-style:dashed; background:var(--bg-soft); } /* ---------- Verkaufsseite eines Programms ---------- */ .prog-hero{ display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center; } .prog-hero h1{ font-size:clamp(32px,4.6vw,52px); margin:14px 0 16px; text-wrap:balance; } .prog-hero .lead{ margin-bottom:28px; } /* Das Produktbild ist eine breite Mockup-Montage. Ohne Deckel wird es im Verhältnis zum Text zu wuchtig — deshalb begrenzt und rechtsbündig. */ .prog-hero figure{ margin:0; max-width:400px; margin-left:auto; } .prog-hero img{ width:100%; height:auto; } @media (max-width:900px){ .prog-hero{ grid-template-columns:1fr; gap:26px; } .prog-hero figure{ max-width:340px; margin:0 auto; } } /* Preis-Kasten */ .kaufen{ background:var(--surface); border:0; border-radius:20px; padding:40px 40px 36px; max-width:640px; margin:0 auto; position:relative; box-shadow:0 18px 50px rgba(255,138,0,.24); } .kaufen::before{ content:""; position:absolute; inset:0; border-radius:20px; padding:2px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .kaufen h3{ font-size:clamp(22px,2.6vw,28px); } .kaufen .amt{ display:flex; align-items:baseline; gap:10px; margin:12px 0 4px; } .kaufen .amt b{ font-size:56px; font-weight:850; letter-spacing:-.04em; line-height:1; } .kaufen .amt span{ color:var(--muted); font-size:16px; font-weight:560; } .kaufen .hinweis{ font-size:14.5px; color:var(--muted); margin-bottom:24px; } .kaufen ul{ list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:30px; } .kaufen li{ display:flex; gap:11px; font-size:16px; color:var(--ink-soft); align-items:flex-start; } .kaufen li svg{ flex:none; margin-top:4px; stroke:var(--accent); } .kaufen .btn{ width:100%; justify-content:center; } @media (max-width:560px){ .kaufen{ padding:30px 24px 28px; } } /* Bonus-Kacheln */ .bonus{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .bonus article{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; } .bonus .nr{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; } .bonus h3{ margin-bottom:8px; } .bonus .wert{ font-size:14px; font-weight:750; color:var(--muted); margin-bottom:10px; } .bonus p{ color:var(--ink-soft); font-size:15.5px; } @media (max-width:760px){ .bonus{ grid-template-columns:1fr; } } /* ---------- Danke-Seiten nach dem Kauf ---------- */ .danke{ max-width:760px; margin:0 auto; text-align:center; } .danke .haken{ width:78px; height:78px; margin:0 auto 26px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 34px rgba(255,138,0,.4); } .danke h1{ font-size:clamp(30px,4.4vw,48px); margin-bottom:16px; text-wrap:balance; } .danke .lead{ margin:0 auto 8px; } .danke-box{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:34px 36px; text-align:left; margin-top:44px; } .danke-box h2{ font-size:clamp(20px,2.2vw,25px); margin-bottom:18px; } .danke-box p{ color:var(--ink-soft); font-size:16.5px; margin-bottom:14px; } .danke-box ol{ margin:0 0 14px 22px; color:var(--ink-soft); font-size:16.5px; } .danke-box li{ margin-bottom:9px; } .danke-box a{ color:var(--accent); text-decoration:underline; } .danke-box .warn{ background:rgba(255,138,0,.12); border-radius:12px; padding:16px 18px; font-size:15.5px; color:var(--ink-soft); margin-top:20px; } @media (max-width:560px){ .danke-box{ padding:26px 22px; } } /* Kundenstimmen */ .stimmen{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .stimmen blockquote{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; margin:0; display:flex; flex-direction:column; } .stimmen blockquote::before{ content:"„"; font-size:56px; line-height:.6; font-weight:900; color:var(--accent); opacity:.55; margin-bottom:8px; } .stimmen p{ color:var(--ink-soft); font-size:16px; flex:1; } .stimmen cite{ font-style:normal; font-size:14.5px; font-weight:700; color:var(--muted); margin-top:18px; } @media (max-width:860px){ .stimmen{ grid-template-columns:1fr; } } /* Häufige Fragen — reines HTML, kein Skript nötig */ .fragen{ max-width:820px; margin:0 auto; } .fragen details{ border-bottom:1px solid var(--line); padding:4px 0; } .fragen summary{ cursor:pointer; list-style:none; padding:20px 34px 20px 0; position:relative; font-size:17.5px; font-weight:700; letter-spacing:-.01em; } .fragen summary::-webkit-details-marker{ display:none; } .fragen summary::after{ content:"+"; position:absolute; right:4px; top:16px; font-size:26px; font-weight:400; color:var(--accent); transition:transform .2s ease; } .fragen details[open] summary::after{ content:"–"; } .fragen summary:hover{ color:var(--accent); } .fragen details p{ padding:0 0 22px; color:var(--ink-soft); font-size:16px; line-height:1.7; } .fragen details p a{ color:var(--accent); text-decoration:underline; } /* Blog-Liste (kompakt, für weitere Übersichten) */ .posts{ display:flex; flex-direction:column; border-top:1px solid var(--line); } .post{ display:grid; grid-template-columns:190px 1fr 24px; gap:20px; align-items:baseline; padding:24px 4px; border-bottom:1px solid var(--line); transition:background .16s ease, padding .16s ease; } .post:hover{ background:var(--bg-soft); padding-left:14px; padding-right:14px; } .post-date{ font-size:13.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .post-title{ font-size:clamp(17px,1.8vw,20px); font-weight:700; letter-spacing:-.015em; } .post:hover .post-title{ color:var(--accent); } .post-arw{ color:var(--muted); transition:transform .16s ease; justify-self:end; } .post:hover .post-arw{ transform:translateX(4px); color:var(--accent); } @media (max-width:700px){ .post{ grid-template-columns:1fr 24px; gap:4px 14px; } .post-date{ grid-column:1 / -1; } } /* Zitat */ .quote{ max-width:820px; margin:0 auto; text-align:center; } .quote p{ font-size:clamp(21px,2.6vw,30px); font-weight:700; line-height:1.35; letter-spacing:-.02em; margin-bottom:20px; text-wrap:balance; } .quote cite{ font-style:normal; font-size:15px; font-weight:650; color:var(--muted); } /* Kontakt */ .contact{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:start; } .info-list{ list-style:none; display:flex; flex-direction:column; gap:24px; margin:32px 0 34px; } .info-list li{ display:flex; gap:16px; align-items:flex-start; } .info-list .ic{ width:42px; height:42px; border-radius:11px; } .info-list b{ display:block; font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:3px; } .info-list a, .info-list span{ font-size:16.5px; font-weight:600; } .info-list a:hover{ color:var(--accent); } form{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:34px 32px; } .field{ margin-bottom:18px; } label{ display:block; font-size:13.5px; font-weight:680; margin-bottom:7px; } input, select, textarea{ width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:10px; font:inherit; font-size:15.5px; background:var(--bg); color:var(--ink); transition:border-color .16s ease, box-shadow .16s ease; } input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--o2); box-shadow:0 0 0 4px rgba(255,138,0,.20); } textarea{ resize:vertical; min-height:110px; } .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } form .btn{ width:100%; justify-content:center; margin-top:6px; } .form-hint{ font-size:13px; color:var(--muted); margin-top:14px; text-align:center; } .form-ok, .form-err{ display:none; margin-top:16px; padding:14px 16px; border-radius:10px; background:rgba(255,138,0,.16); color:var(--accent-ink); font-size:15px; font-weight:600; } .form-err a{ color:inherit; text-decoration:underline; } /* Einwilligung Datenschutz */ .consent label{ display:flex; gap:11px; align-items:flex-start; font-weight:500; font-size:14px; line-height:1.5; color:var(--ink-soft); } .consent input{ width:auto; flex:none; margin-top:2px; accent-color:var(--o2); } .consent a{ color:var(--accent); text-decoration:underline; } /* Honigtopf gegen Spam-Bots — für Menschen unsichtbar, für Bots ein normales Feld */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* Rechtstexte (Impressum, Datenschutz) */ .legal{ max-width:760px; } .legal h3{ font-size:21px; margin:38px 0 12px; } .legal h4{ font-size:16px; margin:26px 0 8px; color:var(--ink); } .legal p, .legal li{ font-size:16px; line-height:1.7; color:var(--ink-soft); } .legal p{ margin-bottom:14px; } .legal ul{ margin:0 0 14px 20px; } .legal li{ margin-bottom:7px; } .legal a{ color:var(--accent); text-decoration:underline; } .legal .adr{ font-style:normal; margin-bottom:14px; line-height:1.7; } .legal .stand{ font-size:13.5px; color:var(--muted); margin-top:40px; } /* CTA Schlussband */ .final{ padding:0 0 104px; } .final-inner{ background:var(--panel); border-radius:24px; padding:74px 56px; text-align:center; position:relative; overflow:hidden; } .final-inner::before{ content:""; position:absolute; bottom:-260px; left:50%; transform:translateX(-50%); width:900px; height:520px; background:radial-gradient(ellipse, rgba(255,138,0,.5) 0%, rgba(255,138,0,0) 68%); } .final-inner > *{ position:relative; } .final h2{ color:var(--panel-ink); margin-bottom:16px; } .final p{ color:var(--panel-sub); font-size:17px; max-width:54ch; margin:0 auto 32px; } /* Footer */ footer{ border-top:1px solid var(--line); padding:52px 0 40px; } .foot{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:center; } .foot-links{ display:flex; gap:26px; flex-wrap:wrap; font-size:14.5px; color:var(--muted); } .foot-links a:hover{ color:var(--ink); } .socials{ display:flex; gap:10px; } .socials a{ width:40px; height:40px; border-radius:11px; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:.18s ease; } .socials a:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-2px); } .copy{ font-size:13.5px; color:var(--muted); margin-top:26px; } /* Einblend-Animation */ .rv{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; } .rv.in{ opacity:1; transform:none; } /* ---------- Responsive ---------- */ @media (max-width:1200px){ .nav-links{ gap:2px; } .nav-links a{ padding:9px 10px; font-size:13.8px; } .nav-links a.active::after{ left:10px; right:10px; } } @media (max-width:1080px){ .hero-grid{ gap:34px; } } @media (max-width:900px){ .mc-grid{ grid-template-columns:1fr !important; gap:28px !important; } .nav-links, .nav-cta{ display:none; } .burger{ display:flex; } .hero-grid{ grid-template-columns:1fr; } .hero-word{ font-size:clamp(58px,17vw,120px); } .hero-img{ aspect-ratio:16/10; } .hero-figure{ max-width:520px; margin:0 auto; } .cards, .steps, .prices{ grid-template-columns:1fr; } .split, .contact{ grid-template-columns:1fr; gap:38px; } .stats-grid{ grid-template-columns:1fr 1fr; } section{ padding:76px 0; } .final-inner{ padding:56px 26px; } .band{ padding:34px 30px; } } @media (max-width:560px){ .wrap{ padding:0 20px; } .row2{ grid-template-columns:1fr; } .price .amt b{ font-size:44px; } form{ padding:26px 22px; } }