/* Akzentfarbe: siehe die ausführliche Erklärung in style.css (gleicher Mechanismus, gleiche Variablennamen — nur ein zweites Stylesheet, weil Marketing-Seiten/Admin-Bereich und Dashboard/Editor je ihr eigenes laden). --p-primary ist die einzige Stellschraube; alles andere hier ist per color-mix() daraus abgeleitet. */ :root{--site-max:1440px; --p-primary:#0a0a0a;--p-primary-hover:#2a2a2a;--p-on-primary:#fff;--p-accent:#4f46e5;--p-accent-text:var(--p-accent);--p-primary-light:color-mix(in srgb,var(--p-primary) 8%,white);--p-primary-lighter:color-mix(in srgb,var(--p-primary) 16%,white);--p-primary-border:color-mix(in srgb,var(--p-primary) 32%,white);--p-primary-ink:color-mix(in srgb,var(--p-primary) 60%,black);--p-accent-2:var(--p-primary); --p-bg:#fff;--p-surface:#fff;--p-border:#e5e5e5;--p-border-strong:#d4d4d4; --p-text:#0a0a0a;--p-text-muted:#525252;--p-text-subtle:#5e5e5e; --p-success:#16a34a;--p-success-ink:#15803d;--p-danger:#dc2626; --p-radius:16px;--p-radius-sm:10px; --p-shadow-sm:0 1px 2px rgba(0,0,0,.06); --p-shadow-md:0 8px 24px -6px rgba(0,0,0,.14),0 2px 6px -2px rgba(0,0,0,.08); --p-shadow-lg:0 20px 45px -12px rgba(0,0,0,.22),0 6px 16px -4px rgba(0,0,0,.1); --p-ease:cubic-bezier(.4,0,.2,1); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } *{box-sizing:border-box} /* Long German compound words (e.g. "Bildungseinrichtungen", "Datenschutzerklärung") don't contain natural break points and can overflow a narrow mobile container at heading font sizes without this — found via a systematic mobile overflow check across the whole site, see README. A single, low-risk safety net rather than patching each heading that happens to contain a long word individually. */ h1,h2,h3{overflow-wrap:break-word} body{margin:0;background:var(--p-bg);color:var(--p-text);line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .15s ease,color .15s ease} [data-theme="dark"]{ --p-success-ink:#4ade80; --p-bg:#0a0a0a;--p-surface:#161616;--p-border:#262626;--p-border-strong:#3a3a3a; --p-text:#ededed;--p-text-muted:#a3a3a3;--p-text-subtle:#8f8f8f; --p-primary-light:color-mix(in srgb,var(--p-primary) 9%,var(--p-bg)); --p-primary-lighter:color-mix(in srgb,var(--p-primary) 16%,var(--p-bg)); --p-primary-border:color-mix(in srgb,var(--p-primary) 34%,var(--p-bg)); --p-primary-ink:color-mix(in srgb,var(--p-primary) 55%,white); --p-primary:#f5f5f5;--p-primary-hover:#d4d4d4;--p-on-primary:#0a0a0a;--p-accent-text:color-mix(in srgb,var(--p-accent) 55%,white); color-scheme:dark; } [data-theme="dark"] .site-nav{background:rgba(10,10,10,.9)} [data-theme="dark"] .site-footer{background:#000} [data-theme="dark"] .hero-visual{background:linear-gradient(160deg,#161616,var(--p-surface))} [data-theme="dark"] .legal-notice{background:#3a2f0f;color:#fbbf24;border-color:#5a4a1f} [data-theme="dark"] .btn:not(.primary){color:var(--p-text)} [data-theme="dark"] .cookie-switch-track{background:var(--p-border-strong)} [data-theme="dark"] .cookie-overlay{background:rgba(0,0,0,.7)} /* Light/Dark-Umschalter: eine schwebende Blase unten links in der Ecke, unterhalb des Accessibility-Icons (siehe accessibility-widget.css: dessen Blase liegt jetzt 52px+12px darüber, gleiche horizontale Position) — auf Wunsch getauscht, der Theme-Umschalter sitzt jetzt an der Position, die vorher das Accessibility-Icon hatte. Hintergrund immer die Akzentfarbe (var(--p-primary)), unabhängig vom aktuellen Farbschema, statt einer hellen/neutralen Blase. */ .theme-toggle-float{position:fixed;bottom:20px;left:20px;z-index:2147483000;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:none;background:var(--p-primary);color:var(--p-on-primary);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .15s ease} .theme-toggle-float:hover{transform:scale(1.07)} .theme-toggle-float:focus-visible{outline:3px solid var(--p-accent-text);outline-offset:3px} .theme-toggle-float svg{width:22px;height:22px} [data-theme="dark"] .theme-toggle-float .icon-sun{display:block} [data-theme="dark"] .theme-toggle-float .icon-moon{display:none} .theme-toggle-float .icon-sun{display:none} .theme-toggle-float .icon-moon{display:block} @media(max-width:480px){.theme-toggle-float{left:12px;bottom:12px}} a{color:inherit} img{max-width:100%;display:block} /* Single source of truth for the site's content width — the nav bar, every section's .container, and any page-specific "shell" wrapper (contact, institutions, …) all use this same value, so the visible content column doesn't shift width between the nav and the sections below it, or between one page and the next. Previously the homepage's hero alone overrode this to 1320px while the nav (and everything else) stayed at 1120px — the most visible case of the inconsistency this was raised about. Picked 1320 (the widest value already in use) rather than narrower, in line with a general "full width" preference over a tighter, more constrained layout. */ .container{max-width:var(--site-max,1440px);margin:0 auto;padding:0 24px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--p-radius-sm);font-weight:650;font-size:.9375rem;text-decoration:none;border:1px solid var(--p-border);background:var(--p-surface);color:var(--p-text);cursor:pointer;transition:background-color .15s var(--p-ease),border-color .15s var(--p-ease),box-shadow .15s var(--p-ease),transform .1s var(--p-ease)} .btn:hover{border-color:var(--p-border-strong);background:#fafafa} .btn.primary{background:var(--p-primary);border-color:var(--p-primary);color:var(--p-on-primary);box-shadow:var(--p-shadow-sm)} .btn.primary:hover{background:var(--p-primary-hover);box-shadow:var(--p-shadow-md);transform:translateY(-1px)} .btn.large{padding:15px 28px;font-size:1rem} .btn.block{width:100%} /* Icons in Buttons bewegen sich beim Hover mit ("lebendige" Icons statt starrer Symbole), statt nur die Button-Fläche selbst zu animieren. Skalierung als generischer Basisfall für alle Icons; das Raketen-Icon (Haupt-CTAs) bekommt zusätzlich eine kleine "Start"-Rotation + Hub, damit es wirklich nach Abheben aussieht, statt nur größer zu werden. */ .btn svg{transition:transform .2s var(--p-ease)} .btn:hover svg{transform:scale(1.15)} .btn:active svg{transform:scale(.95)} .btn.primary:hover svg{transform:rotate(-8deg) translate(1px,-2px) scale(1.15)} /* Shared consent-checkbox row for every marketing-page form (contact, institutions, …) — a plain flex row here shrinks the long legal text to 0 width instead of wrapping once the row sits inside a narrower column (flexbox hands almost the whole shrink deficit to whichever child has the larger content-based basis, and with min-width:0 that child is allowed to actually hit zero). CSS grid with an explicit minmax(0,...) track doesn't have that failure mode: the checkbox stays a fixed size and the text reliably gets "whatever's left" to wrap into. Centralized here (was previously duplicated per-page) so every form gets the fix, not just the one page it was first found on. */ .consent-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:flex-start;font-weight:400} .consent-row input{margin-top:3px} .consent-row span{font-weight:400;font-size:.8438rem;color:var(--p-text-muted);overflow-wrap:break-word} .site-nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);border-bottom:1px solid var(--p-border)} /* Weichzeichner auf einem Pseudo-Element: backdrop-filter direkt an .site-nav würde die fixed-Mega-Menüs einfangen. */ .site-nav::before{content:'';position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none} .site-nav-inner{position:relative;max-width:var(--site-max,1440px);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:16px} .site-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--p-text);font-weight:750;font-size:1.05rem;letter-spacing:-.3px} .site-brand-mark{width:30px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--p-primary),var(--p-primary));flex-shrink:0} .site-nav-links{display:flex;align-items:center;gap:22px;font-size:.9375rem;font-weight:600} /* Klassisches Dreier-Layout auf breiten Bildschirmen: Logo links, Menüpunkte exakt in der Mitte der Leiste, Konto-Icon + CTA rechts — per position:absolute + left:50%/translateX(-50%), unabhängig von der Breite von Logo bzw. Icon+Button links/rechts davon. Nur ab 1240px, weil das zentrierte Menü bei schmaleren Fenstern (zwischen dem Hamburger-Umbruch bei 700px und ~1220px) sonst mit Logo bzw. Konto-Icon überlappt; darunter bleibt es beim normalen Fluss direkt neben dem Logo (siehe .nav-user-wrap margin-left:auto weiter unten, das Icon+Button in dem Fall nach rechts schiebt). */ @media(min-width:1480px){ /* Teil 251: ohne transform zentriert – transform (wie backdrop-filter) macht die Leiste sonst zum Bezugsrahmen der position:fixed-Mega-Menüs, die dann nur so breit wie die Menüleiste wären. */ .site-nav-links{position:absolute;inset:0;margin:auto;width:max-content;height:max-content} } /* Nutzt den sitewide Button-Radius (var(--p-radius-sm)) statt eines eigenen Pill-Werts, damit derselbe Button überall gleich aussieht (Design-Konsistenz) — nur das Padding bleibt nav-spezifisch etwas kompakter. */ .site-nav-actions .btn.primary{padding:11px 24px} /* Hover/active zeigt jetzt eine animierte Unterstreichung (statt einer Hintergrund-Pille) plus dunklerer Text. Die Linie ist ein ::after, standardmäßig auf 0 skaliert und wächst beim Hover von der Mitte aus; bei .active bleibt sie dauerhaft ausgefahren. */ .site-nav-links a{position:relative;text-decoration:none;color:var(--p-text-muted);padding:7px 0;transition:color .15s var(--p-ease)} .site-nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:1px;background:var(--p-primary);transform:scaleX(0);transition:transform .2s var(--p-ease)} .site-nav-links a:hover{color:var(--p-primary)} .site-nav-links a:hover::after{transform:scaleX(1)} /* Current-page marker, set by initNavActiveState() in marketing.js (a plain multi-page site has no router to hook into, so it just compares location.pathname against each link's href on load). */ .site-nav-links a.active{color:var(--p-primary)} .site-nav-links a.active::after{transform:scaleX(1)} .site-nav-actions{display:flex;align-items:center;gap:10px} .nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer} .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:'';display:block;width:22px;height:2px;background:var(--p-text);position:relative;transition:transform .15s var(--p-ease)} .nav-toggle span::before{position:absolute;top:-7px} .nav-toggle span::after{position:absolute;top:7px} .hero{padding:64px 0 48px;border-bottom:1px solid var(--p-border)} .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .eyebrow-pill{display:inline-flex;align-items:center;gap:6px;background:var(--p-primary-light);color:var(--p-primary);font-size:.8125rem;font-weight:650;padding:6px 14px;border-radius:999px;margin-bottom:18px} .hero h1{font-size:2.75rem;line-height:1.08;letter-spacing:-1.2px;margin:0 0 18px;font-weight:800} .hero h1 .grad{color:var(--p-accent-text)} .hero p.lead{font-size:1.125rem;color:var(--p-text-muted);margin:0 0 28px;max-width:520px} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px} .hero-trust-row{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:16px} .hero-trust-row span{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--p-text-muted)} .hero-trust-row svg{width:16px;height:16px;color:var(--p-primary);flex-shrink:0} .hero-rating{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--p-text-muted)} .hero-rating[hidden]{display:none} /* Teil 671 */ .hero-rating strong{color:var(--p-text)} .stars{color:#f59e0b;letter-spacing:1px} /* max-width hält die Karte (inkl. Verlaufs-Hintergrund) bei einer festen, zur Bildproportion (3:4, siehe hero-preview.svg) passenden Größe, statt sie auf die volle, viel breitere Grid-Spalte zu strecken — genau das hatte das Bild vorher unnötig in die Höhe gezogen. Zentriert innerhalb der Spalte statt links ausgerichtet. */ .hero-visual-wrap{position:relative;max-width:380px;margin:0 auto} .hero-visual{background:linear-gradient(160deg,var(--p-primary-light),#fff);border-radius:24px;padding:24px;box-shadow:var(--p-shadow-lg);border:1px solid var(--p-border)} .hero-float-badge{position:absolute;display:inline-flex;align-items:center;gap:7px;background:var(--p-surface);color:var(--p-text);font-size:.8125rem;font-weight:650;padding:9px 16px 9px 12px;border-radius:999px;box-shadow:var(--p-shadow-lg);border:1px solid var(--p-border);white-space:nowrap} .hero-float-badge svg{width:16px;height:16px;color:var(--p-primary);flex-shrink:0} .hero-float-badge-1{top:-14px;right:12%} .hero-float-badge-2{bottom:22%;left:-28px} .hero-float-badge-3{bottom:-16px;right:8%} @media(max-width:900px){.hero-float-badge{position:static;margin:8px 6px 0 0}.hero-visual-wrap{display:flex;flex-direction:column}} .hero-visual img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:var(--p-shadow-md)} .section{padding:64px 0} .section-head{text-align:center;max-width:640px;margin:0 auto 44px} .section-head h1,.section-head h2{font-size:2rem;letter-spacing:-.6px;margin:0 0 12px} .section-head p{color:var(--p-text-muted);margin:0;font-size:1.0625rem} .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px} .feature-card{background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius);padding:28px;transition:box-shadow .18s var(--p-ease),transform .18s var(--p-ease)} .feature-card:hover{box-shadow:var(--p-shadow-md);transform:translateY(-3px)} .feature-icon{width:44px;height:44px;border-radius:12px;background:var(--p-primary-light);color:var(--p-primary);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .feature-card h3{margin:0 0 8px;font-size:1.0625rem} .feature-card p{margin:0;color:var(--p-text-muted);font-size:.9375rem} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .step{text-align:center} .step-num{width:40px;height:40px;border-radius:50%;background:var(--p-primary);color:var(--p-on-primary);display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 16px} .step h3{margin:0 0 8px;font-size:1.0625rem} .step p{margin:0;color:var(--p-text-muted);font-size:.9375rem} .testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px} .testimonial-card{background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius);padding:22px} .testimonial-card .stars{display:block;margin-bottom:10px} .testimonial-card p{margin:0 0 14px;color:var(--p-text);font-size:.9375rem} .testimonial-meta{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--p-text-muted)} .pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;max-width:960px;margin:0 auto} .price-card{background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius);padding:32px 28px;position:relative;display:flex;flex-direction:column} .price-card.featured{border-color:var(--p-primary);box-shadow:var(--p-shadow-lg)} .price-card .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--p-primary);color:var(--p-on-primary);font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:999px} .price-card h3{margin:0 0 6px;font-size:1.0625rem} .price-amount{font-size:2.25rem;font-weight:800;letter-spacing:-1px;margin:12px 0 4px} .price-amount span{font-size:.9rem;font-weight:500;color:var(--p-text-muted)} .price-list{list-style:none;margin:20px 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.875rem;flex:1} .price-list li{display:flex;gap:8px;align-items:flex-start} .price-list li::before{content:'✓';color:var(--p-success);font-weight:700} .pay-options{display:flex;flex-direction:column;gap:8px;margin-top:12px} #paypal-button-container{min-height:45px} /* /ratgeber (Übersichtsseite): Intro-Hero + groß hervorgehobener neuester Beitrag + darunter eine zwischen Grid- und Listen-Ansicht umschaltbare Übersicht aller Beiträge. Struktur an eine vom Nutzer vorgeschlagene Referenz angelehnt (Hero-Banner, ein hervorgehobener neuester Artikel, darunter alle weiteren Artikel), aber in der bestehenden hellen Markenoptik dieser Seite (Verlauf/Karten/Primärfarbe wie auf /bildungseinrichtungen, /produktstufen, …) statt im dunklen Referenz-Farbschema, damit sich die Seite weiter wie derselbe Auftritt anfühlt wie jede andere Unterseite. Auf "Trending"/"Popular"-Abschnitte wie im Referenzdesign wurde bewusst verzichtet, da es dafür keine echten Daten gibt (keine Aufrufzahlen, keine manuelle Kennzeichnung) – erfundene Platzierungen hätten nur eine Popularität vorgetäuscht, die es nicht gibt. Stattdessen: ein hervorgehobener neuester Beitrag plus eine einzige, aber umschaltbare Übersicht aller übrigen Beiträge. */ .guide-list-hero{padding:56px 0 44px;border-bottom:1px solid var(--p-border);background:linear-gradient(160deg,var(--p-primary-light),var(--p-bg));text-align:center} .guide-list-hero h1{font-size:2.25rem;margin:0 0 10px;letter-spacing:-.5px} .guide-list-hero p{color:var(--p-text-muted);margin:0;font-size:1.0625rem} .guide-featured{display:grid;grid-template-columns:1.1fr 1fr;background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius);overflow:hidden;box-shadow:var(--p-shadow-sm);text-decoration:none;color:inherit;transition:box-shadow .18s var(--p-ease),transform .18s var(--p-ease)} .guide-featured:hover{box-shadow:var(--p-shadow-lg);transform:translateY(-3px)} .guide-featured-image{aspect-ratio:4/3;overflow:hidden;background:var(--p-bg)} .guide-featured-image img{width:100%;height:100%;object-fit:cover;display:block} .guide-featured-body{padding:36px 40px;display:flex;flex-direction:column;justify-content:center;gap:14px} .guide-featured-eyebrow{font-size:.8125rem;font-weight:650;color:var(--p-primary);text-transform:uppercase;letter-spacing:.03em} .guide-featured-body h2{margin:0;font-size:1.75rem;letter-spacing:-.5px;line-height:1.25} .guide-featured-body p{margin:0;color:var(--p-text-muted);font-size:1rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} @media(max-width:760px){.guide-featured{grid-template-columns:1fr}.guide-featured-body{padding:26px}} /* Überschrift + Grid/Listen-Umschalter über der restlichen Beitragsliste */ .guide-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:56px 0 24px} .guide-toolbar h2{margin:0;font-size:1.375rem} .view-switch{display:inline-flex;border:1px solid var(--p-border);border-radius:10px;padding:3px;gap:2px;background:var(--p-surface);flex-shrink:0} .view-switch button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;width:34px;height:30px;border-radius:7px;color:var(--p-text-muted);transition:color .15s var(--p-ease),background-color .15s var(--p-ease)} .view-switch button svg{width:17px;height:17px} .view-switch button:hover{color:var(--p-text)} .view-switch button[aria-pressed="true"]{background:var(--p-primary-light);color:var(--p-primary)} .guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px} .guide-card{display:block;text-decoration:none;color:inherit;background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius);overflow:hidden;transition:box-shadow .18s var(--p-ease),transform .18s var(--p-ease)} .guide-card-image{aspect-ratio:16/9;overflow:hidden;background:var(--p-bg)} .guide-card-image img{width:100%;height:100%;object-fit:cover;display:block} .guide-card:hover{box-shadow:var(--p-shadow-md);transform:translateY(-3px)} .guide-card-body{padding:22px} .guide-card h3{margin:0 0 8px;font-size:1.0625rem} .guide-card p{margin:0;color:var(--p-text-muted);font-size:.9375rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .guide-date{font-size:.75rem;color:var(--p-text-subtle);margin-top:10px;display:block} .guide-card-link{display:inline-flex;align-items:center;gap:5px;color:var(--p-primary);font-weight:650;font-size:.875rem;margin-top:12px} .guide-card-link svg{width:14px;height:14px;transition:transform .15s var(--p-ease)} .guide-card:hover .guide-card-link svg{transform:translateX(3px)} /* Listen-Ansicht: horizontale Zeilen statt Kachel-Raster, umgeschaltet über .guide-grid.view-list (siehe initGuideView() in guide-list.html); Auswahl wird in localStorage gemerkt, ähnlich wie das Hell/Dunkel-Thema. */ .guide-grid.view-list{display:flex;flex-direction:column;gap:16px} .guide-grid.view-list .guide-card{display:grid;grid-template-columns:220px 1fr} .guide-grid.view-list .guide-card-image{aspect-ratio:auto;height:100%} .guide-grid.view-list .guide-card-body{display:flex;flex-direction:column;justify-content:center} @media(max-width:560px){.guide-grid.view-list .guide-card{grid-template-columns:1fr}.guide-grid.view-list .guide-card-image{aspect-ratio:16/9}} article.guide-article{max-width:720px;margin:0 auto;padding:48px 24px} .guide-hero{position:relative;margin-bottom:8px} .guide-hero-badge{position:absolute;top:20px;left:20px;z-index:1;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);color:#fff;font-size:.75rem;font-weight:650;padding:6px 14px;border-radius:999px} .guide-hero:not(.has-image){padding:56px 24px 8px;background:var(--p-primary-light)} .guide-hero:not(.has-image) .guide-hero-text{position:static;color:inherit;padding:0} .guide-hero:not(.has-image) h1{color:var(--p-text)} .guide-hero:not(.has-image) .guide-meta{color:var(--p-text-muted)} .guide-hero.has-image .guide-hero-media{position:relative;width:100%;aspect-ratio:21/8;overflow:hidden;background:var(--p-bg)} .guide-hero.has-image .guide-hero-media img{width:100%;height:100%;object-fit:cover;display:block} .guide-hero.has-image .guide-hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0) 65%)} .guide-hero.has-image .guide-hero-text{position:absolute;left:0;right:0;bottom:0;padding:28px 24px;color:#fff} .guide-hero.has-image h1{color:#fff} .guide-hero.has-image .guide-meta{color:rgba(255,255,255,.85)} .guide-hero-text{max-width:720px} .guide-hero h1{font-size:2.25rem;letter-spacing:-.8px;margin:0 0 8px} .guide-hero .guide-meta{font-size:.875rem} /* The 21/8 image ratio only leaves ~130px of height at phone widths — not enough for a two-line title plus the reading-time badge without the two overlapping. A taller ratio and a smaller heading on narrow screens keep both readable. */ @media(max-width:600px){.guide-hero.has-image .guide-hero-media{aspect-ratio:4/3}.guide-hero h1{font-size:1.625rem}} article.guide-article .guide-content{font-size:1.0625rem;line-height:1.75;color:var(--p-text)} article.guide-article .guide-content p{margin:0 0 20px} article.guide-article .guide-content h2{font-size:1.375rem;margin:32px 0 14px} article.guide-article .guide-content h3{font-size:1.1875rem;margin:26px 0 12px} article.guide-article .guide-content ul,article.guide-article .guide-content ol{margin:0 0 20px;padding-left:26px} article.guide-article .guide-content li{margin-bottom:8px} /* Hervorgehobene Zitat-Karte statt eines schmalen Rand-Strichs — an die vom Nutzer vorgeschlagene Referenz angelehnt (dort ein auffälliges, getöntes Zitat-Feld statt einer schlichten Randlinie). */ article.guide-article .guide-content blockquote{position:relative;margin:0 0 28px;padding:26px 28px 26px 60px;background:var(--p-primary-light);border-radius:14px;color:var(--p-text);font-style:normal;font-size:1.0625rem;line-height:1.65} article.guide-article .guide-content blockquote::before{content:'\201C';position:absolute;left:22px;top:8px;font-size:2.75rem;line-height:1;color:var(--p-primary);font-family:Georgia,'Times New Roman',serif} article.guide-article .guide-content blockquote p{margin:0} article.guide-article .guide-content blockquote p+p{margin-top:12px} article.guide-article .guide-content table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:.9375rem} article.guide-article .guide-content td,article.guide-article .guide-content th{border:1px solid var(--p-border);padding:9px 12px;text-align:left} article.guide-article .guide-content img{max-width:100%;height:auto;border-radius:12px;display:block;margin:0 0 20px} article.guide-article .guide-content iframe{max-width:100%;border-radius:12px;margin:0 0 20px;aspect-ratio:560/315;width:100%;height:auto} article.guide-article .guide-content video,article.guide-article .guide-content audio{max-width:100%;margin:0 0 20px;display:block} article.guide-article .guide-content a{color:var(--p-accent-text);text-decoration:underline} .legal-page{max-width:var(--site-max,1440px);margin:0 auto;padding:56px 24px 80px} /* Teil 729 (Tims Wunsch): Rechtstexte in voller Inhaltsbreite statt 760 px */ .legal-page h1{font-size:2rem;margin:0 0 8px} .legal-page .legal-updated{color:var(--p-text-muted);font-size:.875rem;margin-bottom:32px} .legal-page h2{font-size:1.25rem;margin:32px 0 12px} .legal-page p,.legal-page li{color:#333333;line-height:1.7} .legal-notice{background:#fef3c7;border:1px solid #fde68a;color:#92400e;border-radius:var(--p-radius-sm);padding:16px 18px;font-size:.875rem;margin-bottom:32px} .legal-placeholder{background:var(--p-primary-light);color:var(--p-primary);padding:2px 6px;border-radius:4px;font-weight:600} .cta-band{background:linear-gradient(135deg,var(--p-primary),var(--p-primary));border-radius:24px;padding:48px;text-align:center;color:var(--p-on-primary)} .cta-band h2{margin:0 0 12px;font-size:1.75rem} .cta-band p{margin:0 0 24px;opacity:.9} .cta-band .btn{background:var(--p-surface);color:var(--p-primary);border-color:#fff} .cta-band .btn:hover{background:#f2f2f2} .site-footer{background:#0a0a0a;color:#d4d4d4;padding:56px 0 28px;margin-top:40px} .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;margin-bottom:40px} .footer-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;margin-bottom:12px} .footer-grid p{color:#999999;font-size:.875rem;max-width:280px} .footer-col h2,.footer-col h4{font-weight:700;line-height:1.3;color:#fff;font-size:.8125rem;text-transform:uppercase;letter-spacing:.6px;margin:0 0 14px} .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .footer-col a{color:#999999;text-decoration:none;font-size:.875rem} .footer-col a:hover{color:#fff} .footer-bottom{border-top:1px solid #1c1c1c;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8125rem;color:#a3adbd} .lang-switch{position:relative;display:inline-flex;align-items:center;margin-right:8px} .lang-switch-btn{display:flex;align-items:center;gap:5px;border:1px solid var(--p-border);background:var(--p-surface);border-radius:999px;padding:7px 10px;font-size:1.0625rem;cursor:pointer;line-height:1} .lang-switch-btn svg{color:var(--p-text-muted);flex-shrink:0} .lang-switch-status{position:absolute;top:calc(100% + 6px);right:0;font-size:.75rem;color:var(--p-text-muted);background:var(--p-surface);border:1px solid var(--p-border);border-radius:8px;padding:3px 8px;white-space:nowrap} .lang-switch-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--p-surface);border:1px solid var(--p-border);border-radius:var(--p-radius-sm);box-shadow:var(--p-shadow-md);padding:6px;min-width:180px;max-height:320px;overflow-y:auto;z-index:60} .lang-switch-option{display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:8px;font-size:.875rem;cursor:pointer;color:var(--p-text)} .lang-switch-option:hover{background:var(--p-primary-light)} body.cookie-modal-open{overflow:hidden} /* Strictly above the floating theme-toggle/accessibility buttons (both use z-index:2147483000) so the backdrop always wins the stacking order, regardless of which of those gets appended to the DOM first. */ .cookie-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:20px} .cookie-modal{width:100%;max-width:640px;max-height:calc(100dvh - 40px);overflow-y:auto;background:var(--p-surface);border-radius:var(--p-radius);box-shadow:var(--p-shadow-lg);padding:24px 28px 28px} .cookie-modal-head{display:flex;align-items:center;margin-bottom:18px} .cookie-modal-brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:1rem;letter-spacing:-.3px;color:var(--p-text)} .cookie-modal-brand .site-brand-mark{width:26px;height:31px} .cookie-tabs{display:flex;gap:4px;border-bottom:1px solid var(--p-border);margin-bottom:18px} .cookie-tab{padding:10px 6px;margin-right:20px;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--p-text-muted);font-weight:650;font-size:.875rem;cursor:pointer;transition:color .15s var(--p-ease),border-color .15s var(--p-ease)} .cookie-tab:hover{color:var(--p-text)} .cookie-tab.active{color:var(--p-primary);border-bottom-color:var(--p-primary)} .cookie-tab-panel{min-height:120px} .cookie-tab-panel p{margin:0 0 18px;font-size:.875rem;line-height:1.6;color:var(--p-text-muted)} .cookie-tab-panel p a{color:var(--p-primary);font-weight:600;text-decoration:none} .cookie-tab-panel p a:hover{text-decoration:underline} .cookie-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;border:1px solid var(--p-border);border-radius:14px;overflow:hidden} .cookie-cat{padding:16px 12px;text-align:center;border-right:1px solid var(--p-border);display:flex;flex-direction:column;align-items:center;gap:12px} .cookie-cat:last-child{border-right:0} .cookie-cat-label{font-size:.8125rem;font-weight:650;color:var(--p-text)} .cookie-switch{position:relative;display:inline-block;width:42px;height:24px;cursor:pointer} .cookie-switch.locked{cursor:default} .cookie-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:inherit} .cookie-switch-track{position:absolute;inset:0;background:#d4d4d4;border-radius:999px;transition:background-color .15s var(--p-ease)} .cookie-switch-track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s var(--p-ease)} .cookie-switch input:checked+.cookie-switch-track{background:var(--p-primary)} .cookie-switch input:checked+.cookie-switch-track::after{transform:translateX(18px)} .cookie-switch input:disabled+.cookie-switch-track{opacity:.65} .cookie-switch input:focus-visible+.cookie-switch-track{outline:2px solid var(--p-accent-text);outline-offset:2px} .cookie-details-list{display:flex;flex-direction:column;gap:14px;margin-bottom:6px} .cookie-details-row{display:flex;flex-direction:column;gap:4px;padding-bottom:14px;border-bottom:1px solid var(--p-border)} .cookie-details-row:last-child{border-bottom:0;padding-bottom:0} .cookie-details-row strong{font-size:.8438rem} .cookie-details-row span{font-size:.8125rem;color:var(--p-text-muted);line-height:1.55} .cookie-modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px -28px -28px;padding:14px 28px 28px;position:sticky;bottom:-28px;z-index:1;background:var(--p-surface);border-top:1px solid var(--p-border);border-radius:0 0 var(--p-radius) var(--p-radius)} /* Teil 572: Knöpfe bleiben sichtbar, auch wenn der Dialog auf kleinen Bildschirmen scrollt */ .cookie-modal-actions .btn{flex:1;min-width:140px} @media(max-width:560px){.cookie-cat-grid{grid-template-columns:repeat(2,1fr)}.cookie-cat{border-bottom:1px solid var(--p-border)}.cookie-cat:nth-last-child(-n+2){border-bottom:0}.cookie-cat:nth-child(2n){border-right:0}.cookie-modal-actions .btn{min-width:100%}} @media(max-width:560px){.cookie-tab{margin-right:0;flex:1 1 auto;padding:10px 4px}.cookie-tabs{gap:2px}.cookie-modal{padding:18px 18px 20px}.cookie-modal-actions{margin:16px -18px -20px;padding:12px 18px 16px;bottom:-20px;gap:8px}.cookie-modal-actions .btn{min-height:42px;padding-top:9px;padding-bottom:9px}} @media(max-width:860px){ .hero-inner{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr} } /* War vorher max-width:700px — bei ca. 701-971px (u.a. "Laptop im halben Bildschirm") lief die Menüleiste dadurch aus dem sichtbaren Bereich hinaus, weil Logo + alle Menüpunkte + Konto-Icon + der "Kostenlos starten"-Button in ihrer vollen Breite (braucht ~972px) dort noch nicht ins mobile Menü umgeschaltet haben, aber schon nicht mehr in die schmalere Leiste passten. 1024px liegt mit Puffer über diesem tatsächlichen Platzbedarf. */ @media(max-width:1024px){ .site-nav-links{position:fixed;top:68px;left:0;right:0;background:var(--p-surface);border-bottom:1px solid var(--p-border);flex-direction:column;align-items:flex-start;padding:16px 24px;gap:16px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .15s var(--p-ease),transform .15s var(--p-ease)} .site-nav-links.open{opacity:1;pointer-events:auto;transform:translateY(0)} .nav-toggle{display:block} /* Der "Kostenlos starten"-Button passt neben Konto-Icon und Hamburger-Button auf schmaleren Bildschirmen nicht mehr (trieb die ganze Seite in horizontales Überlaufen) — jede Seite hat bereits einen eigenen Inline-CTA weiter oben, und das Hamburger-Menü selbst führt zu /app, daher geht hier nichts verloren. */ .site-nav-actions{display:none} } /* Diese beiden Anpassungen gehören nicht zum Menüleisten-Umbruch oben, sondern greifen weiterhin erst bei "echter" Mobile-Breite. */ @media(max-width:700px){ .hero h1{font-size:2rem} .footer-grid{grid-template-columns:1fr} } /* Barrierefreiheit: Skip-Link, sichtbar nur bei Tastaturfokus */ .skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--p-primary,#4f46e5);color:var(--p-on-primary,#fff);padding:12px 20px;border-radius:0 0 8px 0;font-weight:700;font-size:.875rem;text-decoration:none} .skip-link:focus{left:0} /* Barrierefreiheit: sichtbarer Tastaturfokus (fehlte bisher komplett) */ button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--p-accent-text);outline-offset:2px} /* Scroll-Reveal-System: Elemente blenden beim Scrollen sanft ein, statt die ganze Seite auf einmal zu zeigen. .reveal-group versetzt die Kind-Elemente zeitlich gestaffelt (per nth-child), damit eine Kartenreihe nacheinander statt gleichzeitig erscheint. */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)} .reveal.is-visible{opacity:1;transform:translateY(0)} .reveal-group.is-visible>*{opacity:1;transform:translateY(0)} .reveal-group>*{opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)} .reveal-group>*:nth-child(1){transition-delay:0ms} .reveal-group>*:nth-child(2){transition-delay:90ms} .reveal-group>*:nth-child(3){transition-delay:180ms} .reveal-group>*:nth-child(4){transition-delay:270ms} .reveal-group>*:nth-child(5){transition-delay:360ms} .reveal-group>*:nth-child(6){transition-delay:450ms} .reveal-group>*:nth-child(n+7){transition-delay:520ms} /* Zusätzliche Hover-/Interaktionsanimationen für sonst statische Elemente */ .testimonial-card{transition:box-shadow .2s var(--p-ease),transform .2s var(--p-ease)} .testimonial-card:hover{box-shadow:var(--p-shadow-md);transform:translateY(-3px)} .step{transition:transform .2s var(--p-ease)} .step:hover{transform:translateY(-3px)} .step-num{transition:transform .3s cubic-bezier(.34,1.56,.64,1),background-color .2s var(--p-ease)} .step:hover .step-num{transform:scale(1.1) rotate(-6deg)} .eyebrow-pill{transition:transform .2s var(--p-ease)} .hero-rating .stars{display:inline-block;animation:starPop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:.15s} @keyframes starPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}} .hero-visual img{transition:transform .4s var(--p-ease)} .hero-visual:hover img{transform:translateY(-4px)} /* Wer Bewegung reduziert eingestellt hat, bekommt alles sofort ohne Übergang statt der Animation — Barrierefreiheit geht vor Effekt. */ @media (prefers-reduced-motion: reduce) { .reveal,.reveal-group>*{opacity:1;transform:none;transition:none} .testimonial-card,.step,.step-num,.hero-visual img{transition:none} .hero-rating .stars{animation:none} } /* Permanentes User-Icon in der Navigation, links neben dem Hell/Dunkel- Umschalter — zeigt eine Person-Silhouette, solange niemand angemeldet ist (führt zu /login), und nach der Anmeldung die Initialen als runder Avatar (führt zu /konto), analog zum Avatar im Admin-Panel. */ /* Jetzt ein