/* =========================================================== Schule wird Staat — Vertriebsseite Leitmotiv: modern & bunt, Farben aus der echten Schulfassade (Grün / Lila / Mint), Cassadonien-Wappen als Logo-Badge. =========================================================== */ /* Schriften selbst gehostet statt per @import von Google geladen: das dynamische Nachladen uebertraegt sonst bei jedem Seitenaufruf die IP-Adresse des Besuchers an Google-Server in den USA, wofuer das LG Muenchen (Urteil vom 20.01.2022, Az. 3 O 17493/20) einem Websitebetreiber Schadensersatz auferlegt hat -- unabhaengig davon, dass die Schriftlizenz (SIL OFL 1.1) Einbettung/Selbsthosting ausdruecklich erlaubt. Beide Familien sind Variable Fonts: jeweils eine einzige Datei deckt den kompletten auf dieser Seite genutzten Schnittbereich ab (400-800 bzw. 400-700), Google liefert unter jedem einzelnen font-weight-Wert nur verschiedene @font-face-Eintraege auf dieselbe Datei. Nur der "latin"- Zeichensatz ist eingebunden (deckt alle auf dieser Seite tatsaechlich vorkommenden Zeichen ab, inkl. äöüß/–—„‚/€) -- die zusaetzlichen "vietnamese"/"latin-ext"-Dateien, die Google fuer denselben Import mitschickt, luden Browser fuer diese Seite ohnehin nie (unicode-range schliesst sie fuer rein deutschen Text aus). */ @font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:400 800; font-display:swap; src:url('assets/fonts/bricolage-grotesque-variable.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:'Public Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url('assets/fonts/public-sans-variable.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; } :root{ --green: #2E8B57; --green-deep: #1F6B41; --green-tint: #E7F5EC; --purple: #7C5CD8; --purple-deep:#5F3FBD; --purple-tint:#EFEAFB; --mint: #57C99A; --mint-deep: #1E8E67; --mint-tint: #E4FAF1; --ink: #191A2B; --ink-soft: #56596E; --paper: #FFFFFF; --surface: #F7F6FC; --line: rgba(25,26,43,0.10); --shadow: 0 24px 60px -24px rgba(93,63,189,0.28); --shadow-sm: 0 10px 26px -14px rgba(25,26,43,0.22); --radius: 18px; --radius-sm: 12px; --wrap: 1280px; --topbar-h: 73px; } *{box-sizing:border-box;} html{scroll-behavior:smooth; scroll-padding-top:var(--topbar-h);} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Public Sans', system-ui, sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3,.display{ font-family:'Bricolage Grotesque', 'Public Sans', sans-serif; font-weight:700; color:var(--ink); letter-spacing:-0.015em; margin:0; } a{color:inherit;} img{max-width:100%;display:block;} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;} ::selection{background:var(--purple);color:#fff;} /* --- top bar: fixed overlay so the video shows through from y=0, with a subtle permanent vignette (not fully invisible), solid once scrolled past the hero. Uses `fixed` rather than `sticky` — sticky only floats once its resting position has scrolled past, leaving a white gap at the very top otherwise, which was the earlier bug. --- */ .topbar{ position:fixed; top:0; left:0; right:0; z-index:100; background:linear-gradient(180deg, rgba(8,11,20,0.38) 0%, rgba(8,11,20,0.14) 65%, rgba(8,11,20,0) 100%); backdrop-filter:blur(8px) saturate(1.3); -webkit-backdrop-filter:blur(8px) saturate(1.3); border-bottom:1px solid rgba(255,255,255,0.1); transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease; } .topbar.scrolled{ background:rgba(255,255,255,0.86); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border-bottom-color:var(--line); } .topbar .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; } .brand{display:flex; align-items:center; gap:11px; text-decoration:none;} .brand .word{ font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:21px;color:#fff; transition:color .25s ease; text-shadow:0 1px 8px rgba(0,0,0,0.35); } .topbar.scrolled .brand .word{color:var(--ink); text-shadow:none;} .topbar nav{display:flex;align-items:center;gap:8px; position:relative;} /* Scroll-Fortschritt unter der Button-Reihe (Konzept bis Kontakt), nicht pauschal 0-100% der Seite, sondern abschnittsbezogen -- siehe JS: der Balken wandert zwischen den Positionen der jeweils aktuell relevanten Nav-Buttons, statt sich nur an der reinen Pixel-Scrollstrecke zu orientieren. Der Verlauf selbst bleibt dabei ortsfest ueber die volle Balkenbreite -- clip-path deckt nur den noch nicht erreichten Teil ab, statt die Fuellung per transform:scaleX zusammenzustauchen (das wuerde den Verlauf bei niedrigem Fortschritt komplett durch den sichtbaren Ausschnitt jagen). */ .nav-progress{ position:absolute; left:0; right:0; bottom:-9px; height:3px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,0.35); pointer-events:none; opacity:0; transition:opacity .3s ease; } .topbar.scrolled .nav-progress{background:rgba(25,26,43,0.15);} .nav-progress__fill{ display:block; height:100%; width:100%; background:linear-gradient(90deg, var(--mint), var(--purple)); clip-path:inset(0 100% 0 0); will-change:clip-path; } .scroll-progress-mobile{display:none;} .topbar nav a{ color:rgba(255,255,255,0.92);text-decoration:none;font-size:14.5px;font-weight:600; padding:9px 15px;border-radius:999px;transition:background .18s ease, color .18s ease, border-color .18s ease; text-shadow:0 1px 8px rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.07); } .topbar nav a:hover{background:rgba(255,255,255,0.18);} .topbar.scrolled nav a{color:var(--ink-soft); text-shadow:none; border-color:var(--line); background:transparent;} .topbar.scrolled nav a:hover{background:var(--purple-tint);color:var(--purple-deep); border-color:transparent;} .topbar .nav-cta{ background:#fff; color:var(--ink) !important; margin-left:2px; text-shadow:none; border-color:#fff; } .topbar .nav-cta:hover{background:var(--mint) !important;} .topbar.scrolled .nav-cta{background:var(--ink); color:#fff !important; border-color:var(--ink);} .topbar.scrolled .nav-cta:hover{background:var(--purple-deep) !important;} /* Drei echte -Elemente statt einem Span + ::before/::after mit manuellem top-Versatz -- dadurch garantiert gleich dicke Striche, statt dass abweichende Rundung bei der absoluten Positionierung eine Linie optisch duenner/dicker wirken laesst. */ .burger{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; cursor:pointer; flex-direction:column; gap:5px; } .burger span{ display:block; width:18px; height:2px; border-radius:1px; background:var(--ink); transition:transform .2s ease, opacity .2s ease; } .mobile-nav{ display:none; position:fixed; z-index:99; top:calc(var(--topbar-h) + 10px); left:16px; right:16px; max-height:75vh; background:rgba(255,255,255,0.72); backdrop-filter:blur(26px) saturate(1.6); -webkit-backdrop-filter:blur(26px) saturate(1.6); border:1px solid rgba(255,255,255,0.5); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px; overflow-y:auto; } .mobile-nav a{ display:block; padding:14px 12px; font-size:17px; font-weight:600; color:var(--ink); text-decoration:none; border-radius:var(--radius-sm); transition:background .15s ease; } .mobile-nav a:hover, .mobile-nav a:active{background:rgba(124,92,216,0.14);} .mobile-nav.open{display:block;} .mobile-nav-scrim{ display:none; position:fixed; inset:0; z-index:98; background:rgba(10,12,22,0.25); } .mobile-nav-scrim.open{display:block;} /* --- hero: full-bleed video/photo cover, fits one screen on desktop. Height is the FULL viewport now (not minus topbar) because the topbar is `position:fixed` and overlays the hero from y=0 — the video must reach all the way up so it shows through the transparent bar immediately, instead of a flow gap showing the white body background. --- */ .hero{ position:relative; overflow:hidden; height:100vh; min-height:560px; color:#fff; } .hero-bg{position:absolute; inset:0; z-index:0; background:var(--ink);} .hero-video, .hero-poster-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .hero-tint{ position:absolute; inset:0; background:linear-gradient(135deg, var(--mint) 0%, transparent 50%, var(--purple) 100%); mix-blend-mode:color; opacity:0.62; } .hero-poster-fallback{display:none;} @media (prefers-reduced-motion: reduce){ .hero-video{display:none;} .hero-poster-fallback{display:block;} } .hero-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,12,22,0.55) 0%, rgba(10,12,22,0.32) 30%, rgba(10,12,22,0.68) 78%, rgba(10,12,22,0.88) 100%); } .hero-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; padding-top:calc(var(--topbar-h) + 4px); padding-bottom:30px; } .hero-top-row{display:flex; align-items:flex-start; justify-content:flex-end; gap:20px; flex-wrap:wrap;} .hero-badges{display:flex; align-items:center; gap:12px; flex-wrap:wrap;} .support-badge{ background:#fff; border-radius:14px; padding:12px 24px 12px 14px; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:14px; } .support-badge img{height:56px;width:auto;flex-shrink:0;} .support-badge .txt{font-size:12.5px; font-weight:600; color:var(--ink-soft); line-height:1.35;} .support-badge--lg img{height:64px;} .hero-bottom{margin-top:10px;} .hero h1{ font-size:clamp(30px, 3.6vw, 48px); line-height:1.08; margin-bottom:14px; max-width:22ch; color:#fff; } .hero h1 .hl{ background:linear-gradient(100deg, #7BE0A8 0%, #C4AFFF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero .lede{font-size:16.5px; line-height:1.55; color:rgba(255,255,255,0.82); max-width:60ch; margin-bottom:22px;} /* --- keyword marquee: continuously scrolling, repeated, one word per row, varying size, muted grey — echoes the Sichtungsexemplar cover, but in motion --- */ .hero-marquee{ flex:1 1 auto; min-height:0; display:grid; grid-template-rows:repeat(4, minmax(0,1fr)); row-gap:0; margin-top:34px; overflow:hidden; user-select:none; } /* Garantiert der Laufschrift auf Desktop-Breiten einen Mindestanteil an Hoehe, damit sie nicht durch einen laengeren H1-Zeilenumbruch bei bestimmten Fensterbreiten unnoetig klein gequetscht wird. */ @media (min-width: 881px){ .hero-marquee{min-height:150px;} } .kw-row{ display:flex; overflow:hidden; width:100%; min-height:0; /* Macht die eigene Boxhoehe als "cqh" fuer die Schriftgroesse abfragbar, siehe .kw-track span unten — dadurch passt sich der Text IMMER an die tatsaechlich verfuegbare Zeilenhoehe an, egal wie eng das Fenster ist, statt zu ueberlappen oder (bei abgeschnittenen Zeilen) zu verschwinden. */ container-type:size; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .kw-track{display:flex; flex-shrink:0; align-items:center; height:100%; will-change:transform;} .kw-track--left{animation:marquee-left linear infinite;} .kw-track--right{animation:marquee-right linear infinite;} .kw-track span{ display:inline-block; flex-shrink:0; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; line-height:1; white-space:nowrap; color:rgba(255,255,255,0.3); padding:0 0.18em; } /* Zwei Grenzen zugleich: die bisherige, breiten-basierte clamp() fuers gewohnte Aussehen, gedeckelt durch einen Prozentsatz der eigenen Zeilenhoehe (cqh) als harte Obergrenze gegen Ueberlauf. */ .kw-row--xl .kw-track span{font-size:min(clamp(30px,5.2vw,66px), 84cqh);} .kw-row--md .kw-track span{font-size:min(clamp(20px,3.4vw,44px), 70cqh);} .kw-row--xxl .kw-track span{font-size:min(clamp(36px,6.6vw,86px), 92cqh);} .kw-row--lg .kw-track span{font-size:min(clamp(24px,4vw,52px), 77cqh);} /* Sehr langsam und gleichmäßig — soll beruhigend wirken, nicht wie ein Ticker. */ .kw-row--xl .kw-track{animation-duration:260s;} .kw-row--md .kw-track{animation-duration:220s;} .kw-row--xxl .kw-track{animation-duration:310s;} .kw-row--lg .kw-track{animation-duration:240s;} @keyframes marquee-left{ from{transform:translateX(0);} to{transform:translateX(-100%);} } @keyframes marquee-right{ from{transform:translateX(-100%);} to{transform:translateX(0);} } @media (prefers-reduced-motion: reduce){ .kw-track--left, .kw-track--right{animation:none;} } .cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;} .btn{ display:inline-flex; align-items:center; gap:9px; font-family:'Public Sans',sans-serif; font-weight:700; font-size:15.5px; padding:15px 26px; text-decoration:none; border-radius:12px; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; border:1.5px solid transparent; cursor:pointer; } .btn:hover{transform:translateY(-2px);} .btn-primary{background:var(--ink);color:#fff;} .btn-primary:hover{box-shadow:var(--shadow-sm); background:var(--purple-deep);} .btn-ghost{border-color:var(--line); color:var(--ink); background:#fff;} .btn-ghost:hover{border-color:var(--purple); color:var(--purple-deep); box-shadow:var(--shadow-sm);} /* Durchsichtige Hero-Buttons im Glas-Stil der Kopfzeilen-Buttons (.topbar nav a): gleiche Fuellung, gleicher feiner Rand, gleicher Textschatten, gleiches Hover. Die Kopfzeile bekommt ihre Unschaerfe von der Leiste selbst; hier sitzt sie deshalb direkt am Button (backdrop-filter wie bei .topbar). Rand 1px statt 1.5px wie bei der Kopfzeile, das Padding gleicht die 0,5px aus, damit die Hoehe zum dunklen Button daneben passt. */ .hero .btn-ghost{ color:rgba(255,255,255,0.92); text-shadow:0 1px 8px rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.07); padding:15.5px 26.5px; backdrop-filter:blur(8px) saturate(1.3); -webkit-backdrop-filter:blur(8px) saturate(1.3); } .hero .btn-ghost:hover{ color:#fff; border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.18); box-shadow:none; } .btn svg{width:16px;height:16px;flex-shrink:0;} /* --- fact strip (Kurzübersicht) --- */ /* Durchgehende Leiste direkt unter dem Vollbild-Video (kein Overlap mehr -- das schnitt die Karten beim ersten Laden am Bildschirmrand ab). "Modern" heisst hier: farbige Icon-Badges statt reinem Text, dezente statt harte Trennlinien, aber als EINE zusammenhaengende Flaeche statt einzelner schwebender Karten. */ .facts{background:var(--surface); padding:0;} .facts-row{display:flex; flex-wrap:wrap;} .fact{ flex:1 1 240px; display:flex; align-items:center; gap:14px; text-align:left; padding:28px 30px; border-right:1px solid var(--line); } .fact:last-child{border-right:none;} .fact-icon{ flex-shrink:0; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; } .fact-icon svg{width:22px; height:22px;} .fact-text{display:flex; flex-direction:column; gap:2px;} .fact .label{ font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-soft); } .fact .value{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:15px; color:var(--ink); line-height:1.25; } @media (max-width:880px){ .fact{flex:1 1 50%; border-bottom:1px solid var(--line);} .fact:nth-child(2n){border-right:none;} } @media (max-width:560px){ .fact{flex:1 1 100%; border-right:none !important;} .fact:last-child{border-bottom:none;} } /* --- section shell --- */ section{padding:104px 0;} .section-head{max-width:640px; margin-bottom:52px;} .section-head h2{font-size:clamp(28px,3.6vw,40px); margin-bottom:14px;} .section-head p{color:var(--ink-soft); font-size:17px;} /* --- kurzbeschreibung / editorial --- */ .editorial{background:var(--paper);} /* Die Zitatspalte etwas breiter als der Fliesstext: nur so bleibt neben Richards Foto genug Zeilenbreite, damit das Zitat nicht hoeher wird als er. */ .editorial .grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start;} .editorial p{font-size:17.5px; color:var(--ink); margin:0 0 20px;} /* Fächerverbindender Ansatz: interaktives Kreisdiagramm (alle Fächer gleichwertig). Die Liste .wheel-data im HTML ist die Datenquelle; ohne JavaScript bleibt sie als Kartenraster sichtbar, mit JavaScript wird das Diagramm daraus gebaut. */ .editorial .subject-links{ grid-column:1 / -1; margin-top:-20px; padding-top:40px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:56px; align-items:center; scroll-margin-top:90px; } .editorial .subject-links-title{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(24px,2.8vw,32px); line-height:1.15; margin:0 0 16px; } .editorial .subject-links-lead{font-size:17px; line-height:1.6; margin:0 0 16px;} .editorial .subject-links-hint{ font-size:14.5px; font-weight:600; color:var(--purple-deep); margin:0 0 16px; padding:10px 14px; background:var(--purple-tint); border-radius:var(--radius-sm); } .subject-links-hint .hint-touch{display:none;} @media (hover:none){ .subject-links-hint .hint-hover{display:none;} .subject-links-hint .hint-touch{display:inline;} } .editorial .subject-links-note{font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin:0;} .wheel-data{ grid-column:1 / -1; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; } .wheel-data li{padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:#fff;} .wheel-data strong{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:15.5px; margin-bottom:4px;} .wheel-data span{font-size:13.5px; line-height:1.5; color:var(--ink-soft);} .subject-links.js-wheel .wheel-data{display:none;} .subject-links:not(.js-wheel) .wheel-stage{display:none;} .wheel-stage{position:relative; width:100%; max-width:540px; margin:0 auto;} .subject-wheel{position:relative; width:100%; aspect-ratio:1 / 1;} .wheel-ring{position:absolute; inset:0; width:100%; height:100%;} .wheel-ring circle{ fill:none; stroke:var(--purple); stroke-opacity:0.28; stroke-width:0.35; stroke-dasharray:1.2 1.2; } .wheel-hub{ position:absolute; left:50%; top:50%; width:36%; aspect-ratio:1 / 1; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; text-align:center; border-radius:50%; background:linear-gradient(135deg, var(--mint-tint), var(--purple-tint)); border:1.5px solid rgba(95,63,189,0.18); transition:opacity .2s ease; } .wheel-hub strong{font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(14px,1.7vw,18px); line-height:1.25; color:var(--ink);} .subject-wheel.has-active .wheel-hub{opacity:0;} .wheel-node{ position:absolute; transform:translate(-50%,-50%); width:clamp(34px,10.2%,56px); aspect-ratio:1 / 1; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; border-radius:50%; border:1.5px solid transparent; background:#fff; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; } .wheel-node svg{width:46%; height:46%;} .wheel-node--mint{background:var(--mint-tint); color:var(--mint-deep); border-color:rgba(30,142,103,0.3);} .wheel-node--purple{background:var(--purple-tint); color:var(--purple-deep); border-color:rgba(95,63,189,0.3);} .wheel-node--green{background:var(--green-tint); color:var(--green-deep); border-color:rgba(46,139,87,0.3);} .wheel-node:hover, .wheel-node.is-active{ transform:translate(-50%,-50%) scale(1.18); background:var(--purple-deep); color:#fff; border-color:var(--purple-deep); box-shadow:0 14px 26px -12px rgba(95,63,189,0.6); z-index:2; } .wheel-node:focus-visible{outline:3px solid var(--purple); outline-offset:3px;} .wheel-node-name{ font-family:'Public Sans',sans-serif; position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:6px; white-space:nowrap; font-size:11.5px; font-weight:700; color:var(--ink); background:#fff; padding:2px 8px; border-radius:999px; box-shadow:var(--shadow-sm); opacity:0; pointer-events:none; transition:opacity .15s ease; } .wheel-node:hover .wheel-node-name{opacity:1;} .wheel-pop{ position:absolute; left:50%; top:50%; width:58%; transform:translate(-50%,-46%) scale(.96); padding:16px 18px; border-radius:var(--radius); background:#fff; border:1.5px solid rgba(95,63,189,0.25); box-shadow:0 24px 50px -22px rgba(95,63,189,0.55); opacity:0; pointer-events:none; z-index:3; transition:opacity .18s ease, transform .18s ease; } .wheel-pop.open{opacity:1; transform:translate(-50%,-50%) scale(1);} .wheel-pop-head{display:flex; align-items:center; gap:10px; margin-bottom:8px;} .wheel-pop-icon{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--purple-tint); color:var(--purple-deep); flex-shrink:0; } .wheel-pop-icon svg{width:18px; height:18px;} .wheel-pop strong{font-family:'Bricolage Grotesque',sans-serif; font-size:17px;} .editorial .wheel-pop p{font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:0;} .wheel-pop-hint{display:none;} .wheel-pop .hint-touch{display:none;} a.fact--link{color:inherit; text-decoration:none; transition:background-color .2s ease;} a.fact--link:hover{background:#fff;} a.fact--link:focus-visible{outline:2px solid var(--purple); outline-offset:-2px;} @media (max-width:900px){ .editorial .subject-links{grid-template-columns:minmax(0,1fr); gap:28px;} } /* Mobil: das Fenster liegt unter dem Kreis (fester Platz, kein Springen) */ @media (max-width:640px){ .wheel-pop{ position:static; width:auto; transform:none !important; opacity:1; margin-top:16px; min-height:150px; pointer-events:auto; } .wheel-pop-hint{display:block; margin:0; text-align:center; color:var(--ink-soft); font-size:14px; padding-top:44px;} .wheel-node-name{display:none;} .subject-wheel.has-active .wheel-hub{opacity:1;} } @media (hover:none){ .wheel-pop .hint-hover{display:none;} .wheel-pop .hint-touch{display:inline;} } .pull-card{position:relative;} /* Bewusst "“" (oeffnendes, oben sitzendes Anfuehrungszeichen) statt des deutschen „ (das haengt typografisch nah an der Grundlinie wie ein Komma und sass deshalb je nach Geraet/Schrift-Rendering unterschiedlich weit oben -- auf Mobile sichtbar anders als Desktop). Times New Roman passt das obere Zeichen sauber und ueberall gleich an den Kartenrand. */ .pull-card .quote-mark{ position:absolute; top:-45px; left:-20px; z-index:0; font-family:'Times New Roman', Times, serif; font-weight:700; font-size:220px; line-height:1; opacity:0.4; color:var(--mint-deep); user-select:none; pointer-events:none; } /* Echter Glaslook wie bei der Topbar ueber dem Video: keine eigene Farbe, nur eine sehr helle, halbtransparente Flaeche mit Weichzeichner -- was dahinter liegt (das grosse Zitat-Icon) schimmert leicht durch. display:flow-root macht die Karte zum Block-Formatting-Context, damit sie Richards Float einrechnet. Rechts/unten kein Padding: so liegt sein Foto ohne negative Margins direkt an der Kartenkante (negative Margins wuerden die Referenzbox der shape-outside-Form verzerren). Den Textabstand nach rechts/unten setzen stattdessen Zitat und Namenszeile selbst. clip-path statt overflow:hidden: es schneidet rechts/unten sauber entlang der abgerundeten Ecke, laesst oben aber offen, damit sein Kopf ueber die Kante ragen darf (3D-Effekt). */ .pull-card-inner{ position:relative; z-index:1; display:flow-root; background:linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.22)); backdrop-filter:blur(10px) saturate(1.3); -webkit-backdrop-filter:blur(10px) saturate(1.3); border:1px solid rgba(20,22,38,0.07); border-radius:var(--radius); padding:20px 0 0 32px; clip-path:inset(-130px 0 0 0 round var(--radius)); box-shadow:0 28px 56px -26px rgba(31,107,65,0.18), 0 16px 32px -18px rgba(95,63,189,0.12), inset 0 1px 0 rgba(255,255,255,0.6); } /* Der Zitattext laeuft eng um Richards Silhouette, nicht um ein Rechteck. Bewusst ein polygon() statt shape-outside:url(): die Bild-Variante liest die Alphakanaele des PNGs aus und liefert je nach Browser/Umgebung gar keine Ausschlussflaeche -- dann laeuft der Text quer ueber sein Gesicht (genau das war hier reproduzierbar der Fall). Das Polygon ist reine Geometrie und damit ueberall verlaesslich. Die Punkte sind aus der Alphamaske von richard-ringeis-cutout-wide.png abgeleitet (Prozent = Anteil der Bildbreite/-hoehe, also unabhaengig von der Anzeigegroesse). Wird das Foto neu zugeschnitten, muss das Polygon neu erzeugt werden. content-box als Referenzbox ist wichtig: die Form bezieht sich damit immer genau auf das Bild. Weder der negative obere Margin (Desktop, laesst den Kopf herausragen) noch das padding-top, mit dem das Skript ihn schmalen Karten an die Unterkante schiebt, verzerren sie dadurch. */ .pull-card-portrait{ float:right; width:200px; shape-outside:polygon(100% 0%, 100% 3.8%, 100% 7.7%, 42.7% 11.5%, 33.2% 15.4%, 28.6% 19.2%, 26.9% 23.1%, 25.8% 26.9%, 26.1% 30.8%, 27.2% 34.6%, 27.5% 38.5%, 27.9% 42.3%, 28.6% 46.2%, 30.8% 50%, 32.1% 53.8%, 33.3% 57.7%, 33.7% 61.5%, 32.1% 65.4%, 25.5% 69.2%, 19.1% 73.1%, 13% 76.9%, 8.7% 80.8%, 6.5% 84.6%, 5.5% 88.5%, 4.7% 92.3%, 4.1% 96.2%, 3.5% 100%, 100% 100%) content-box; shape-margin:12px; } .pull-card-portrait img{width:100%; height:auto; display:block;} /* padding-right ersetzt hier das fehlende Karten-Padding (siehe oben): es haelt die Zeilen, die unterhalb des Fotos ueber die volle Breite laufen, von der Kartenkante weg. Die Zeilen neben Richard begrenzt ohnehin die shape-outside-Form. */ .editorial .pull-card-quote{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:18px; color:var(--ink); line-height:1.55; margin:0 0 26px; padding-right:32px; } .pull-card-byline{ padding:0 32px 20px 0; } .pull-card-byline cite{ display:block; font-style:normal; font-size:14px; font-weight:700; color:var(--ink); } .pull-card-byline cite span{ display:block; font-weight:600; font-size:12.5px; color:var(--ink-soft); margin-top:2px; } .pull-card-byline cite a, .testi-attribution cite a{ color:inherit; text-decoration:underline; text-decoration-color:rgba(86,89,110,0.35); text-underline-offset:2px; } .pull-card-byline cite a:hover, .testi-attribution cite a:hover{text-decoration-color:currentColor;} /* Echte Fotos der Schule statt nur Text/Zitat -- Luftaufnahme etwas breiter als die Schulhof-Ansicht, damit die Reihe nicht stur symmetrisch wirkt. */ .editorial-photos{ display:grid; grid-template-columns:1.3fr 1fr; gap:20px; margin-top:48px; } .editorial-photos img{ width:100%; height:280px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-sm); display:block; } .editorial-photos-caption{ grid-column:1 / -1; margin:14px 0 0; font-size:13.5px; color:var(--ink-soft); } .editorial-photos-caption a{color:var(--purple-deep); text-decoration:underline; text-decoration-color:rgba(95,63,189,0.35);} .editorial-photos-caption a:hover{text-decoration-color:var(--purple-deep);} /* Zitat der Justizministerin: bewusst als eigener, hervorgehobener Block (nicht mehr als schlichte Randnotiz) -- echter Glaslook wie bei den Zitat-Karten oben, nur mit einem violetten Unterton statt neutralem Weiss, damit der besondere Charakter (Amtsträgerin, offizieller Besuch) auch optisch erkennbar bleibt, ohne wie ein generischer KI-Hinweiskasten auszusehen. */ .minister-feature{ grid-column:1 / -1; margin-top:40px; display:grid; grid-template-columns:1.5fr 1fr; gap:28px; align-items:stretch; } /* Wie .pull-card/.testi: Anfuehrungszeichen ist ein Geschwister-Element hinter der Glasbox (z-index:0 vs. 1), mit negativem top/left ragt es an der linken oberen Ecke sichtbar hinter der Box hervor, statt (wie vorher) als Kind-Element der Box durch deren overflow:hidden abgeschnitten zu werden. */ .minister-quote{position:relative;} .minister-quote > .quote-mark{ position:absolute; top:-48px; left:-14px; z-index:0; font-family:'Times New Roman', Times, serif; font-weight:700; font-size:250px; line-height:1; opacity:0.4; color:var(--purple-deep); user-select:none; pointer-events:none; } .minister-quote-box{ position:relative; z-index:1; padding:36px 40px 32px 40px; background:linear-gradient(135deg, rgba(239,234,251,0.5), rgba(239,234,251,0.16)); backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4); border:1px solid rgba(95,63,189,0.18); border-radius:var(--radius); box-shadow:0 28px 56px -30px rgba(95,63,189,0.35), 0 14px 28px -18px rgba(95,63,189,0.18), inset 0 1px 0 rgba(255,255,255,0.6); } .minister-quote-box blockquote{ margin:0 0 18px; font-size:18px; line-height:1.6; color:var(--ink); font-weight:500; } .minister-quote-box cite{ display:block; font-style:normal; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:15px; color:var(--ink); } .minister-quote-box cite span{ display:block; font-weight:600; font-size:13px; color:var(--purple-deep); margin-top:2px; } .minister-quote-box cite a{color:var(--purple-deep); text-decoration:underline; text-decoration-color:rgba(95,63,189,0.35); font-weight:600;} .minister-quote-box cite a:hover{text-decoration-color:var(--purple-deep);} .minister-photos{display:flex; flex-direction:column; height:100%;} /* Bildunterschrift als editorielle Overlay-Blende statt Text darunter -- das Foto traegt seine Beschriftung direkt, wie bei einer Magazin- Bildunterschrift. Die Quellenangabe sitzt bewusst kleiner/blasser in der gleichen Blende, statt als gleichwertige zweite Zeile. */ .minister-photo-frame{ position:relative; flex:1 1 0; min-height:0; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-sm); } .minister-photo-frame img{width:100%; height:100%; object-fit:cover; display:block;} .minister-photo-caption{ position:absolute; left:0; right:0; bottom:0; padding:34px 18px 14px; background:linear-gradient(to top, rgba(18,12,32,0.82), rgba(18,12,32,0.32) 60%, transparent); } .minister-photo-caption p{margin:0; font-size:13.5px; font-weight:600; color:#fff; line-height:1.4;} .minister-photo-caption span{ display:block; margin-top:4px; font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.55); } @media (max-width:880px){ .minister-feature{grid-template-columns:1fr; margin-top:28px;} .minister-quote-box{padding:30px 26px 26px 26px;} .minister-quote-box blockquote{font-size:16.5px;} .minister-photos{height:320px;} } /* Ab 1280px ist die Karte breit genug, dass das Zitat vollstaendig neben Richard passt -- dann reicht er ueber die ganze Kartenhoehe: Kopf ragt oben heraus, unten schliesst er buendig mit der Kartenkante ab. */ @media (min-width:1280px){ /* Kein negativer margin-bottom: die Karte braucht wegen des langen Zitats ohnehin mehr Hoehe als das Foto (auch mit Margin-Trick) erreicht -- ein negativer margin-bottom haette daher am oberen Ende nichts bewirkt, aber die shape-outside-Ausschlussflaeche am unteren Bildrand verkuerzt und so das Risiko geschaffen, dass die Namenszeile ins Foto hineinlaeuft. Kein negativer margin-right: das verschiebt den Float horizontal und verzerrt dadurch nachweislich das Textumfluss-Polygon (siehe Warnung oben bei .pull-card-inner). */ .pull-card-portrait{width:355px; margin-top:-65px;} } /* Darunter reicht die Breite dafuer nicht: das Zitat braucht mehr Zeilen als das Foto hoch ist. Er kann dort also nicht ueber die ganze Kartenhoehe stehen -- stattdessen schiebt ihn das Skript (siehe index.html) per padding-top so weit nach unten, dass er unten buendig abschliesst; der Text laeuft weiterhin um ihn herum. Klappt das Skript nicht, blendet die Maske seinen unteren Bildrand weich aus, damit keine harte Brustkante mitten in der Karte schwebt. */ @media (max-width:1279px){ .pull-card-portrait{ width:250px; shape-margin:16px; -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 99%); mask-image:linear-gradient(to bottom, #000 72%, transparent 99%); } .pull-card-inner.portrait-pinned .pull-card-portrait{ -webkit-mask-image:none; mask-image:none; } } @media (max-width:640px){ .editorial .grid{grid-template-columns:1fr; gap:32px;} .editorial .pull-card-quote{font-size:17px;} .pull-card-portrait{width:230px;} .editorial-photos{grid-template-columns:1fr; margin-top:32px;} .editorial-photos img{height:200px;} } /* --- testimonials --- */ .testimonials{background:var(--surface);} .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} .testi{position:relative; padding-top:26px;} /* Grosses Anfuehrungszeichen liegt als Sibling VOR der Karte im DOM und damit optisch dahinter -- lugt links oben hinter der Karte hervor, statt (wie zuvor) als blasses Wasserzeichen unter dem Text zu verschwinden. Die Karte selbst bekommt einen weichen, farbigen Schwebeschatten wie die Kontaktbox, nur dezenter dosiert. */ .testi .quote-mark{ position:absolute; top:-10px; left:-18px; z-index:0; font-family:'Times New Roman', Times, serif; font-weight:700; font-size:220px; line-height:1; opacity:0.4; user-select:none; pointer-events:none; } .testi:nth-child(1) .quote-mark{color:var(--green-deep);} .testi:nth-child(2) .quote-mark{color:var(--purple-deep);} .testi:nth-child(3) .quote-mark{color:var(--mint-deep);} /* Echter Glaslook wie bei der Topbar ueber dem Video: keine eigene Farbe, nur eine sehr helle, halbtransparente Flaeche mit Weichzeichner -- das Zitat-Icon dahinter schimmert dadurch leicht durch die Karte hindurch. */ .testi-card{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.22)); backdrop-filter:blur(10px) saturate(1.3); -webkit-backdrop-filter:blur(10px) saturate(1.3); border:1px solid rgba(255,255,255,0.7); border-radius:var(--radius); padding:26px 26px 24px; box-shadow:0 28px 56px -26px rgba(31,107,65,0.18), 0 16px 32px -18px rgba(95,63,189,0.12), inset 0 1px 0 rgba(255,255,255,0.6); } .testi blockquote{margin:0 0 20px; font-size:16.5px; line-height:1.55; color:var(--ink);} .testi cite{display:block; font-style:normal; font-size:13px; font-weight:700; color:var(--ink-soft); line-height:1.35;} /* Fuer Zitate mit Einverstaendnis zu Namen + Foto -- Karten ohne Foto (noch anonym) bleiben unveraendert, dadurch koennen beide Varianten nebeneinander stehen, bis alle Einverstaendnisse vorliegen. */ .testi-attribution{display:flex; align-items:center; gap:12px;} .testi-avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:var(--shadow-sm); } .testi-attribution cite{font-size:14px; color:var(--ink);} .testi-attribution cite span{display:block; font-weight:600; font-size:12.5px; color:var(--ink-soft); margin-top:2px;} /* --- table of contents --- */ /* Bewusst KEINE Mindesthoehe/Zentrierung mehr: die Sektion war frueher mindestens bildschirmhoch und zentrierte ihren Inhalt darin -- auf hohen Fenstern entstand dadurch ueber und unter dem Verzeichnis ein grosser weisser Leerraum. Unten kein Innenabstand: den Abstand zur naechsten Sektion regelt .toc + .pricing (beide sind weiss, sonst wirkt der Uebergang wie eine einzige Leere). */ .toc{background:var(--paper); padding:38px 0 0;} .toc .wrap{width:100%; display:flex; flex-direction:column; gap:32px;} /* Ueberschrift in voller Breite (eine Zeile statt Umbruch bei 640px), der Einleitungstext bleibt schmal. */ .toc .section-head{margin-bottom:24px; max-width:none;} .toc .section-head p{max-width:640px;} .toc .section-head h2{line-height:1.15;} .toc + .pricing{padding-top:88px;} .toc-chapters{display:flex; flex-direction:column; gap:8px;} .toc-chapter{ position:relative; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:0 22px; } .toc-chapter-head{ display:flex; align-items:center; gap:16px; width:100%; background:none; border:none; text-align:left; cursor:pointer; padding:13px 0; } .toc-chapter--static .toc-chapter-head{cursor:default;} .toc-icon{ flex-shrink:0; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; position:relative; } .toc-icon svg{width:19px; height:19px; position:relative; z-index:1;} .toc-chapter-title{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:16px; color:var(--ink); flex:1; } .toc-chapter-page{font-size:13.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums;} .toc-chapter-page::before{content:"S. ";} /* Caret optisch an den Zeilenanfang, noch vor das Icon -- fällt beim Überfliegen sofort auf, statt hinter der Seitenzahl unterzugehen. */ .toc-caret{ order:-1; font-family:'Public Sans', system-ui, sans-serif; font-size:20px; font-weight:400; line-height:1; color:var(--purple); width:20px; text-align:center; transition:transform .25s ease; } .toc-chapter-head[aria-expanded="true"] .toc-caret{transform:rotate(45deg);} /* Deutlich helleres Grau statt --ink-soft -- muss auf den ersten Blick klar von den lila "+" unterscheidbar sein, sonst wirkt es wie ein Fehler statt wie "nicht klickbar". */ .toc-caret--static{color:rgba(25,26,43,0.25);} .toc-chapter-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease;} .toc-chapter-inner{overflow:hidden;} .toc-chapter.open .toc-chapter-body{grid-template-rows:1fr;} .toc-row{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-top:1px solid var(--line); } .toc-row .t{font-size:14.5px;color:var(--ink);} .toc-row .fill{flex:1; border-bottom:1.5px dotted var(--line); margin:0 2px 3px; min-width:12px;} .toc-row .p{font-size:12.5px;color:var(--ink-soft); font-variant-numeric:tabular-nums;} .toc-row.l2{font-weight:600;} .toc-row.l3{padding-left:20px;} .toc-row.l3 .t{color:var(--ink-soft); font-size:13.5px;} .toc-chapter-inner{padding-bottom:12px;} /* Negativer Rand hebt den .wrap-gap (32px) teilweise auf: die Fussnote soll eng am Verzeichnis haengen, nicht wie ein eigener Block dahinter. */ .toc-note{margin:-14px 0 0; font-size:13px; color:var(--ink-soft);} /* --- pricing --- */ /* Feste, komfortable Groessen statt Anpassung an die Fensterhoehe -- frueher gab es hier den Versuch, die Sektion exakt auf eine Bildschirmhoehe zu pressen (min-height:100vh + Verdichtung je nach Fensterhoehe). Das fuehrte je nach echtem Browser-Fenster (Tabs/Adressleiste/Zoom variieren stark) immer wieder zu unerwarteten Ergebnissen -- mal zu viel Leerraum, mal zu kleine Karten. Jetzt: eine einzige, angenehm lesbare Groesse fuer alle Fenster, die Sektion ist so lang wie sie sein muss, normales Scrollen. */ .price-grid{display:grid; grid-template-columns:0.82fr 0.82fr 1.36fr; gap:18px; align-items:stretch;} .price-card{ background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); padding:26px 24px; display:flex; flex-direction:column; position:relative; } .price-card.free{background:var(--ink); border-color:var(--ink);} /* Nummerierte Stufen-Marker statt Hervorhebungs-Badges ("Most Popular" o.ae.) -- die vier Karten sind kein Vergleich zwischen gleichwertigen Alternativen, sondern ein Stufenpaket, das aufeinander aufbaut. Keine Karte wird optisch bevorzugt (gleiche Rahmen, gleiche Button-Optik), die Zahl zeigt nur die Reihenfolge. */ .price-card .n{ width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque',sans-serif; font-size:13px; color:#fff; font-weight:700; margin-bottom:12px; } .price-card:nth-child(1) .n{background:var(--mint); color:var(--green-deep);} .price-card:nth-child(2) .n{background:var(--green-deep);} .price-card:nth-child(3) .n{background:var(--purple-deep);} .price-card .name{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:18px; margin-bottom:8px;} .price-card.free .name{color:#fff;} .price-block{margin-bottom:6px;} .price-credit{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-top:4px; line-height:1.35; } .price-card.free .price-credit{color:rgba(255,255,255,0.65);} .price-lead{font-size:13px; color:var(--ink-soft); margin:14px 0 18px;} .price-card ul{list-style:none; margin:14px 0 18px; padding:0; flex-grow:1;} .price-card li{ padding:3px 0 3px 22px; position:relative; font-size:14px; line-height:1.2; color:var(--ink-soft); } .price-card.free li{color:rgba(255,255,255,0.8);} .price-card li::before{ content:"✓"; position:absolute; left:0; top:3px; color:var(--green); font-weight:700; font-size:12px; } .price-card.free li::before{color:var(--mint);} .price-card .btn{justify-content:center; width:100%; padding:11px 20px; font-size:14px;} .price-card.free .btn-primary{background:#fff;color:var(--ink);} .price-card.free .btn-primary:hover{background:var(--mint);color:var(--green-deep);} /* Hinweisbox ueber den Lizenzkarten: Lizenzierung startet erst spaeter, bis dahin nur unverbindliche Anfrage (Merkliste). */ .pricing-notice{ background:var(--purple-tint); border:1px solid rgba(95,63,189,0.25); border-radius:var(--radius); padding:12px 18px; margin:0 0 20px; font-size:13px; color:var(--purple-deep); line-height:1.4; } .pricing-notice a{color:var(--purple-deep); font-weight:700; text-decoration:underline;} /* --- software --- */ /* Beschreibung: Hero-Karte (kompakter Text links, grosse Bankkarte rechts) plus sechs kleine Feature-Boxen mit Icon. Ersetzt den frueheren reinen Fliesstext mit Mini-Kartenstapel und Chip-Gruppen. */ .software-hero{ position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:20px; align-items:center; padding:40px 48px; border-radius:var(--radius); overflow:hidden; background:linear-gradient(135deg, var(--mint-tint) 0%, var(--purple-tint) 100%); border:1px solid rgba(95,63,189,0.14); } .software-eyebrow{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--purple-deep); background:rgba(255,255,255,0.75); padding:5px 12px; border-radius:999px; margin-bottom:16px; } .software-hero h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(24px,2.8vw,32px); line-height:1.15; margin:0 0 14px; color:var(--ink); } .software-hero p{font-size:16px; line-height:1.6; color:var(--ink); margin:0; max-width:46ch;} /* Bankkarte gross auf einer "Buehne" mit weichen Farbflecken (Website-Lila und -Mint) -- Vorder-/Rueckseite wie im FAQ (gleiche Bildquellen, eine visuelle Identitaet). Beim Ueberfahren wendet sich die Karte per 3D-Flip; bis dahin schwankt sie leicht hin und her. */ .software-stage{position:relative; min-height:270px; display:flex; align-items:center; justify-content:center;} .software-stage::before, .software-stage::after{content:""; position:absolute; border-radius:50%; pointer-events:none;} .software-stage::before{ width:300px; height:300px; left:6%; top:-8%; background:radial-gradient(circle, rgba(124,92,216,0.30), rgba(124,92,216,0) 68%); } .software-stage::after{ width:260px; height:260px; right:2%; bottom:-12%; background:radial-gradient(circle, rgba(87,201,154,0.40), rgba(87,201,154,0) 68%); } .software-stage{outline:none;} .software-stage:focus-visible{outline:2px solid var(--purple); outline-offset:4px; border-radius:var(--radius);} .software-card-flip{ position:relative; z-index:1; width:min(340px, 80%); aspect-ratio:1057 / 685; perspective:1200px; } /* Ebene 1: Neigung zum Mauszeiger. --tilt-x/--tilt-y setzt das Skript an der Buehne (je Achse hoechstens +-15deg); die Transition glaettet die Zeigerbewegung. */ .software-card-tilt{ width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition:transform .22s ease-out; } /* Ebene 2: Dauer-Schwanken. Zeigt schon im Ruhezustand, dass sich die Karte bewegen laesst. Die Staerke steckt in --sway-amp (1 = voll, 0 = ruhig). Sobald sich die Karte wendet (Hover, Fokus, Tipp), stoppt das Schwanken praktisch sofort (0,1 s statt eines harten Sprungs) und bleibt waehrend des ganzen Wendens aus -- auch beim Zurueckdrehen: erst nach Ende der Drehung (Delay = Dauer des Wendens) schwingt es wieder ein. Ohne @property-Unterstuetzung springt der Wert, der Effekt bleibt derselbe. */ @property --sway-amp{syntax:''; inherits:false; initial-value:1;} .software-card-sway{ --sway-amp:1; width:100%; height:100%; transform-style:preserve-3d; animation:software-card-sway 6s ease-in-out infinite; transition:--sway-amp .6s ease .85s; } @keyframes software-card-sway{ 0%, 100%{transform:rotateY(calc(var(--sway-amp) * -13deg)) rotateX(calc(var(--sway-amp) * 5deg)) rotateZ(calc(var(--sway-amp) * -1.5deg)) translateY(0);} 50%{transform:rotateY(calc(var(--sway-amp) * 13deg)) rotateX(calc(var(--sway-amp) * -3deg)) rotateZ(calc(var(--sway-amp) * 1.5deg)) translateY(calc(var(--sway-amp) * -7px));} } /* Ebene 2: das eigentliche Wenden (Vorderseite -> Rueckseite). Leichtes Ueberschwingen in der Easing-Kurve, damit es federnd wirkt. */ .software-card-flip-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .85s cubic-bezier(.25,1.15,.4,1); } .software-card-flip-inner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:14px; box-shadow:0 26px 44px -20px rgba(25,26,43,0.5), 0 10px 20px -10px rgba(25,26,43,0.3); backface-visibility:hidden; -webkit-backface-visibility:hidden; -webkit-user-drag:none; user-select:none; } .software-card-flip-inner img:nth-child(2){transform:rotateY(180deg);} /* Ausloeser ist die ruhende Buehne, nicht die pendelnde Karte: sonst flackert der Hover, sobald die Kartenkante unter dem Zeiger wegschwingt. Touch-Geraete (kein Hover) wenden per Tipp (Klasse .is-flipped, siehe JS). */ @media (hover:hover){ .software-stage:hover .software-card-flip-inner{transform:rotateY(180deg);} .software-stage:hover .software-card-sway{--sway-amp:0; transition:--sway-amp .1s ease-out;} } .software-stage:focus-visible .software-card-flip-inner, .software-stage.is-flipped .software-card-flip-inner{transform:rotateY(180deg);} .software-stage:focus-visible .software-card-sway, .software-stage.is-flipped .software-card-sway{--sway-amp:0; transition:--sway-amp .1s ease-out;} @media (prefers-reduced-motion:reduce){ .software-card-sway{animation:none;} .software-card-tilt{transition:none;} .software-card-flip-inner{transition-duration:.01s;} } /* Kleine Feature-Boxen: Icon-Badge in den Website-Tints wie bei .fact-icon, Titel + Einzeiler, optional ein Status-Tag ("In Entwicklung", lila). */ .software-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0 32px;} .software-tile{ display:flex; align-items:flex-start; gap:14px; padding:18px 18px 18px 16px; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .software-tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:rgba(95,63,189,0.3);} .software-tile > div{min-width:0;} .software-tile-icon{ flex-shrink:0; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; } .software-tile-icon svg{width:22px; height:22px;} .software-tile-icon--mint{background:var(--mint-tint); color:var(--mint-deep);} .software-tile-icon--purple{background:var(--purple-tint); color:var(--purple-deep);} .software-tile-icon--green{background:var(--green-tint); color:var(--green-deep);} .software-tile strong{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:15.5px; line-height:1.25; color:var(--ink); margin:2px 0 4px; } .software-tile p{margin:0; font-size:13.5px; line-height:1.5; color:var(--ink-soft);} .software-tile-tag{ font-family:'Public Sans',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:0.03em; padding:2px 8px; border-radius:999px; background:var(--purple-tint); color:var(--purple-deep); } @media (max-width:900px){ .software-hero{grid-template-columns:1fr; gap:6px; padding:32px 28px 8px;} .software-tiles{grid-template-columns:1fr 1fr;} } @media (max-width:640px){ .software-hero{padding:28px 22px 4px;} .software-stage{min-height:210px;} .software-card-flip{width:min(290px, 84%);} .software-tiles{grid-template-columns:1fr;} } /* Drei gleich breite Bausteine statt des 0.82/0.82/1.36fr-Stufenpakets bei .price-grid -- hier gibt es keine Reihenfolge, nur Basis + zwei optionale Erweiterungen. Karten selbst sind bewusst wieder .price-card: gleiche Optik (Rahmen, Preis, Haekchen-Liste) wie bei den Lizenzen. */ .software-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; margin-top:36px;} .software-tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.02em; padding:4px 11px; border-radius:999px; margin-bottom:12px; background:var(--surface); color:var(--ink-soft); } .software-tag--base{background:var(--mint-tint); color:var(--mint-deep);} @media (max-width:1080px){ .software-grid{grid-template-columns:1fr 1fr; } .software-grid .price-card:first-child{grid-column:1 / -1;} } @media (max-width:640px){ .software-grid{grid-template-columns:1fr;} .software-grid .price-card:first-child{grid-column:auto;} } /* Finanzierungshinweise: dunkle Karte statt grauer Liste (wie .price-card.free bei den Lizenzen) -- sonst waere die ganze Software-Sektion nur weiss/hell. Titel + Beschreibung stehen bewusst in getrennten Elementen (nicht wie vorher Fliesstext direkt hinter ): so kann nie mehr ein Komma oder Gedankenstrich einen Absatz eroeffnen, wenn der Titel umbricht. */ .software-funding{ margin-top:56px; padding:48px 44px; border-radius:var(--radius); background:var(--ink); } .software-funding-intro{max-width:620px; margin:0 0 32px;} .software-funding h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:22px; color:#fff; margin:0 0 12px; } .software-funding-intro p{font-size:15.5px; line-height:1.6; color:rgba(255,255,255,0.72); margin:0;} .software-funding-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; } .software-funding-item{ padding:20px 20px 22px; border-radius:var(--radius-sm); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease; } .software-funding-item:hover{ transform:translateY(-3px); background:rgba(255,255,255,0.09); box-shadow:0 20px 36px -20px rgba(0,0,0,0.6); } .software-funding-icon{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; margin-bottom:14px; } .software-funding-icon svg{width:19px; height:19px;} .software-funding-icon--mint{background:rgba(87,201,154,0.16); color:var(--mint); border:1px solid rgba(87,201,154,0.4);} .software-funding-icon--purple{background:rgba(124,92,216,0.2); color:#b9a4ff; border:1px solid rgba(124,92,216,0.45);} .software-funding-item strong{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:15px; color:#fff; margin-bottom:5px; } .software-funding-item p{font-size:13.5px; line-height:1.5; color:rgba(255,255,255,0.68); margin:0;} .software-funding-note{margin:28px 0 0; font-size:12px; line-height:1.55; color:rgba(255,255,255,0.5); max-width:620px;} @media (max-width:640px){ .software-funding{padding:36px 24px;} } /* Datenschutz bei der Software: nur noch ein kleiner Hinweis. */ .software-privacy{ display:flex; align-items:flex-start; gap:12px; margin:0 0 32px; padding:14px 18px; border-radius:var(--radius-sm); background:var(--mint-tint); border:1px solid rgba(30,142,103,0.22); font-size:13.5px; line-height:1.55; color:var(--ink); scroll-margin-top:96px; } .software-privacy svg{flex-shrink:0; width:18px; height:18px; margin-top:2px; color:var(--mint-deep);} .software-privacy a{color:var(--purple-deep); font-weight:700; text-decoration:underline;} /* --- materials: kuratierte Vorschau, in drei inhaltliche Kategorien gruppiert (Konzepte/Dokumente/Folien), jede mit eigenem Seitenverhaeltnis passend zum echten Format -- Folien im Querformat, Deckblaetter/Dokumente im Hochformat, damit nichts mit weissen Raendern zugeschnitten wirkt. Jede Gruppe faechert beim Hover sanft auf (siehe .material-fan). */ .materials{background:var(--surface); padding:64px 0;} .materials .section-head{text-align:center; margin:0 auto 44px;} .materials .section-head h3{font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(22px,2.6vw,28px); margin:0 0 10px;} .materials .section-head p{color:var(--ink-soft); font-size:15.5px; line-height:1.55; margin:0;} .material-categories{display:flex; justify-content:center; align-items:flex-start; gap:64px; flex-wrap:wrap;} .material-category{display:flex; flex-direction:column; align-items:center; gap:20px;} .material-category-label{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:13px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; } .material-fan{position:relative; display:flex; align-items:center; justify-content:center;} .material-fan__item{ position:absolute; object-fit:cover; border-radius:4px; box-shadow:var(--shadow-sm); transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; transform-origin:bottom center; -webkit-user-drag:none; user-select:none; } .material-fan:hover .material-fan__item{box-shadow:var(--shadow);} /* Konzepte: 2 Deckblaetter, Hochformat (echtes Verhaeltnis ~547:773) */ .material-fan--concepts{width:280px; height:200px;} .material-fan--concepts .material-fan__item{width:112px; aspect-ratio:547/773;} .material-fan--concepts .material-fan__item:nth-child(1){transform:rotate(-8deg) translate(-16px, 4px);} .material-fan--concepts .material-fan__item:nth-child(2){transform:rotate(0deg) translate(0, -6px); z-index:1;} .material-fan--concepts .material-fan__item:nth-child(3){transform:rotate(8deg) translate(16px, 4px);} .material-fan--concepts:hover .material-fan__item:nth-child(1){transform:rotate(-14deg) translate(-64px, -8px);} .material-fan--concepts:hover .material-fan__item:nth-child(2){transform:rotate(0deg) translate(0, -18px);} .material-fan--concepts:hover .material-fan__item:nth-child(3){transform:rotate(14deg) translate(64px, -8px);} /* Dokumente: 3 Formulare/Urkunden, Hochformat (echtes Verhaeltnis ~2:3) */ .material-fan--docs{width:280px; height:200px;} .material-fan--docs .material-fan__item{width:112px; aspect-ratio:2/3;} .material-fan--docs .material-fan__item:nth-child(1){transform:rotate(-8deg) translate(-16px, 4px);} .material-fan--docs .material-fan__item:nth-child(2){transform:rotate(0deg) translate(0, -6px); z-index:1;} .material-fan--docs .material-fan__item:nth-child(3){transform:rotate(8deg) translate(16px, 4px);} .material-fan--docs:hover .material-fan__item:nth-child(1){transform:rotate(-16deg) translate(-84px, -10px);} .material-fan--docs:hover .material-fan__item:nth-child(2){transform:rotate(0deg) translate(0, -22px);} .material-fan--docs:hover .material-fan__item:nth-child(3){transform:rotate(16deg) translate(84px, -10px);} /* PowerPoint-Folien: 3 Folien im echten Querformat (~16:9) statt hochkant mit grossen weissen Raendern. */ .material-fan--ppt{width:360px; height:200px;} .material-fan--ppt .material-fan__item{width:190px; aspect-ratio:16/9;} .material-fan--ppt .material-fan__item:nth-child(1){transform:rotate(-7deg) translate(-20px, 4px);} .material-fan--ppt .material-fan__item:nth-child(2){transform:rotate(0deg) translate(0, -6px); z-index:1;} .material-fan--ppt .material-fan__item:nth-child(3){transform:rotate(7deg) translate(20px, 4px);} .material-fan--ppt:hover .material-fan__item:nth-child(1){transform:rotate(-14deg) translate(-96px, -10px);} .material-fan--ppt:hover .material-fan__item:nth-child(2){transform:rotate(0deg) translate(0, -22px);} .material-fan--ppt:hover .material-fan__item:nth-child(3){transform:rotate(14deg) translate(96px, -10px);} @media (max-width:880px){ .material-categories{gap:48px;} } /* --- process --- */ .process{background:var(--paper);} .process-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;} .process-step{background:var(--surface); border-radius:var(--radius); padding:32px;} .process-step .n{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque',sans-serif; font-size:17px; color:#fff; font-weight:700; margin-bottom:18px; } .process-step:nth-child(1) .n{background:var(--green);} .process-step:nth-child(2) .n{background:var(--purple);} .process-step:nth-child(3) .n{background:var(--ink);} .process-step h3{font-size:18.5px;margin-bottom:10px;} .process-step p{font-size:15px; color:var(--ink-soft); margin:0;} /* --- faq --- */ .faq{background:var(--surface);} .faq-list{max-width:800px; display:flex; flex-direction:column; gap:12px;} .faq-item{ background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:0 24px; } .faq-q{ display:block; width:100%; text-align:left; background:none; border:none; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:16.5px; color:var(--ink); padding:18px 30px 18px 0; cursor:pointer; position:relative; } .faq-q::after{ content:"+"; position:absolute; right:0; top:18px; font-size:22px; font-weight:400; color:var(--purple); transition:transform .25s ease; } .faq-q[aria-expanded="true"]::after{transform:rotate(45deg);} /* Grid-Trick fuers sanfte Auf-/Zuklappen: 0fr->1fr ist (anders als height) direkt animierbar, .faq-a-inner mit overflow:hidden schneidet den Inhalt waehrend der Animation sauber ab. */ .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; } /* visibility:hidden nimmt Links in zugeklappten Antworten aus der Tab-Reihenfolge; beim Zuklappen erst nach der Animation (Delay .3s). */ .faq-a-inner{overflow:hidden; visibility:hidden; transition:visibility 0s linear .3s;} .faq-item.open .faq-a{grid-template-rows:1fr;} .faq-item.open .faq-a-inner{visibility:visible; transition-delay:0s;} .faq-item p{font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0 0 20px;} .faq-item p a{color:var(--purple-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px;} /* Zwischenueberschriften der FAQ-Liste (Konzept / Software) */ .faq-group{ margin:0; padding:0 4px; font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--purple-deep); } .faq-group:not(:first-child){margin-top:24px;} /* Kleiner Kartenstapel (Vorder-/Rueckseite) statt einer grossen Einzelkarte -- faechert beim Aufklappen der FAQ-Antwort senkrecht auf. Bewusst kompakt gehalten: .faq-a-inner braucht overflow:hidden fuer die Accordion-Animation, ein zu hoher Fluss-Stapel wuerde sonst am unteren Rand abgeschnitten, sobald er ueber die Textzeilen hinausragt. */ .faq-card-fan{ float:right; position:relative; width:96px; height:112px; margin:4px 0 14px 20px; } .faq-card-fan img{ position:absolute; top:32px; left:10px; width:76px; height:auto; border-radius:6px; box-shadow:var(--shadow-sm); transition:transform .5s cubic-bezier(.22,1,.36,1); -webkit-user-drag:none; user-select:none; } .faq-card-fan img:nth-child(1){transform:rotate(-4deg) translateY(-5px); z-index:2;} .faq-card-fan img:nth-child(2){transform:rotate(4deg) translateY(5px); z-index:1;} .faq-item.open .faq-card-fan img:nth-child(1){transform:rotate(-8deg) translateY(-24px);} .faq-item.open .faq-card-fan img:nth-child(2){transform:rotate(8deg) translateY(24px);} @media (max-width:640px){ .faq-card-fan{float:none; width:120px; height:130px; margin:0 auto 16px;} } /* --- contact --- */ /* Die Box hatte vertikal null Abstand zu FAQ/Verlag und sass dadurch flach zwischen den Nachbarsektionen statt freizuschweben. Jetzt ragt sie bewusst leicht in beide Nachbarbereiche hinein (negativer Aussenabstand + Schatten + hoeherer z-index), wirkt dadurch wie eine ueber dem Seitenfluss liegende Karte statt wie ein einfacher Block im Raster. */ .contact{ background:linear-gradient(120deg, var(--green-deep), var(--purple-deep)); color:#fff; text-align:center; border-radius:32px; margin:0 40px; padding:80px 40px; max-width:calc(var(--wrap) - 80px); /* Zwei farbige, weite Schatten fuer die Tiefe plus ein enger, dunkler Kontaktschatten -- erst der laesst die Karte sichtbar "abheben", die farbigen allein verlaufen auf dem weissen Grund zu schwach. */ box-shadow:0 60px 110px -30px rgba(31,107,65,0.5), 0 34px 64px -24px rgba(95,63,189,0.42), 0 12px 26px -12px rgba(25,26,43,0.24); } .contact-wrap{ max-width:var(--wrap); margin:-64px auto -36px; padding:0 40px; position:relative; z-index:2; } .contact h2{color:#fff; font-size:clamp(28px,4vw,40px); margin-bottom:16px;} .contact p{color:rgba(255,255,255,0.85); max-width:52ch; margin:0 auto 32px; font-size:16.5px;} .contact .btn-primary{background:#fff;color:var(--ink);} .contact .btn-primary:hover{background:var(--mint);color:var(--purple-deep);} /* --- publisher: about DemokratieMedia, its own section + nav destination --- */ /* Vorher wie .faq ebenfalls --surface -- dadurch verschwamm die Grenze zwischen beiden Sektionen zu einer einzigen, gleichfarbigen Flaeche mit grossem, unmotiviertem Leerraum dazwischen. --paper setzt den ueberall sonst auf der Seite etablierten Hell/Dunkel-Wechsel fort und macht den Sektionswechsel wieder sichtbar. */ .publisher{background:var(--paper);} .publisher-inner{max-width:760px;} .publisher p{font-size:16.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px;} .publisher p strong{color:var(--ink);} .publisher .placeholder-block{margin-top:22px; font-size:14px;} .publisher-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--purple-deep); text-decoration:none; margin-top:4px; transition:gap .18s ease; } .publisher-link svg{width:16px; height:16px;} .publisher-link:hover{gap:12px;} /* --- footer --- */ /* .wrap/.flinks/.copy bleiben fuer die einfachen Rechtsseiten (Impressum, Datenschutz) erhalten -- die Startseite bekommt zusaetzlich die ausgebauten .footer-* Klassen fuer Marke/Sektions-Nav/Rechtliches. */ /* padding-top deutlich groesser als der Overlap der Kontaktbox (-64px, siehe .contact-wrap) -- sonst rutscht deren Farbflaeche (z-index:2) ueber den Anfang des Fusszeilen-Inhalts und verdeckt ihn. */ footer{background:var(--paper); padding:68px 0 36px; border-top:1px solid var(--line);} footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;} footer .flinks{display:flex; gap:26px; font-size:13.5px;} footer .flinks a{text-decoration:none; color:var(--ink-soft);} footer .flinks a:hover{color:var(--purple-deep);} footer .copy{font-size:12.5px; color:var(--ink-soft);} footer .footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:36px; align-items:flex-start; } .footer-brand{max-width:280px;} .footer-brand .word{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:19px; color:var(--ink); margin-bottom:8px;} .footer-brand p{font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0;} .footer-nav, .footer-legal{display:flex; flex-direction:column; gap:10px;} .footer-nav a, .footer-legal a{text-decoration:none; color:var(--ink-soft); font-size:14.5px; transition:color .18s ease;} .footer-nav a{font-weight:600;} .footer-nav a:hover, .footer-legal a:hover{color:var(--purple-deep);} footer .footer-bottom{ border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:flex-start; } @media (max-width:640px){ footer .footer-grid{flex-direction:column; gap:28px;} } .placeholder{color:var(--purple-deep); font-style:italic;} /* --- simple legal page --- */ .legal{background:var(--paper); padding:calc(var(--topbar-h) + 40px) 0 100px;} .legal .wrap{max-width:760px;} .legal h1{font-size:36px;margin-bottom:8px;} .legal .updated{font-size:13.5px;color:var(--ink-soft);margin-bottom:44px;} .legal h2{font-size:20px;margin:40px 0 12px;} .legal p, .legal li{font-size:16px;color:var(--ink);} .legal ul{padding-left:20px;} mark.ph{background:var(--purple-tint);color:var(--purple-deep);font-style:italic;padding:1px 6px;border-radius:5px;} /* --- discover-cta: laedt auf der Verlagsseite zum Produkt ein, statt sich wie ein blosser "Zurueck"-Pfeil anzufuehlen -- die Seite soll fuer sich stehen, nicht wie eine Unterseite der Produktseite wirken. */ .discover-cta{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:linear-gradient(120deg, var(--green-tint), var(--purple-tint)); border:1px solid var(--line); border-radius:var(--radius); padding:28px 32px; margin:32px 0 8px; } .discover-cta-text h3{font-family:'Bricolage Grotesque',sans-serif; font-size:19px; margin:0 0 6px; color:var(--ink);} .discover-cta-text p{font-size:14.5px; color:var(--ink-soft); margin:0; max-width:44ch;} .discover-cta .btn{flex-shrink:0;} @media (max-width:640px){ .discover-cta{padding:22px 24px;} } /* --- responsive --- */ /* Kurze Desktop-Fenster (z.B. 1280x680 im Browser ohne Vollbild): Hero-Innenabstände und Typografie verdichten, damit der CTA-Button innerhalb der festen Hero-Höhe bleibt und nicht vom overflow:hidden abgeschnitten wird. */ @media (max-height: 760px) and (min-width: 881px){ .hero-content{padding-top:14px; padding-bottom:16px;} .support-badge img{height:40px;} .hero-bottom{margin-top:10px;} .hero-marquee{margin-top:6px;} .hero h1{font-size:clamp(22px,2.6vw,32px); margin-bottom:6px;} .hero .lede{display:none;} .cta-row{gap:10px;} .hero .btn{padding:11px 20px; font-size:14px;} } /* Inhaltsverzeichnis-Sektion: eigener, unveraenderter Schwellenwert (820px). Frueher teilte sie sich diese Stufe mit .pricing -- als deren Schwellenwert wegen der gewachsenen Praxislizenz auf 1100px angehoben wurde, verdichtete sich das Inhaltsverzeichnis dadurch unbeabsichtigt mit, obwohl es dafuer nie zu hoch war. Ergebnis: viel toter Leerraum ueber und unter dem eigentlich kurzen Inhalt, statt die verfuegbare Screen-Hoehe zu nutzen. Die Ueberschrift wird hier bewusst NICHT verkleinert: sie soll so gross bleiben wie die aller anderen Sektionen (frueher schrumpfte sie auf 26px). */ @media (max-height: 820px) and (min-width: 881px){ .toc .section-head{margin-bottom:14px;} .toc .section-head h2{margin-bottom:6px;} .toc .section-head p{display:none;} .toc-chapter-head{padding:10px 0;} .toc-icon{width:30px; height:30px; border-radius:9px;} .toc-icon svg{width:15px; height:15px;} .toc-chapter-title{font-size:14px;} .toc-note{display:none;} } @media (max-width: 1080px){ .price-grid{grid-template-columns:repeat(2,1fr);} } /* Below 881px the "fits one screen" rule relaxes: mobile viewports vary too much in height to guarantee no-scroll without crushing text/readability. */ @media (max-width: 880px){ .hero{height:auto; min-height:100vh; padding-bottom:40px;} /* height:auto (statt 100%) laesst den Block auf seine eigene Inhaltshoehe schrumpfen -- ohne justify-content:center wuerde er dabei oben an der Topbar kleben und jede uebrige Hoehe (auf hohen Handy-Screens durchaus 100px+) komplett hinter der Laufschrift verpuffen, statt gleichmaessig verteilt zu wirken. */ .hero-content{height:auto; justify-content:center;} /* Schulverein-Banner wandert unter die CTA-Buttons statt über die Titelzeile. */ .hero-top-row{display:contents;} .hero-bottom{order:2; margin-top:22px;} .hero-badges{order:3; margin-top:20px;} /* Mobile darf scrollen (siehe Kommentar oben), deshalb braucht die Laufschrift hier keine Hoehen-Deckelung per Container-Query — die wuerde ohne eine vom Grid vorgegebene definierte Hoehe ohnehin auf 0 kollabieren. Stattdessen: normale, inhaltsbasierte Zeilenhoehe. */ .hero-marquee{ order:4; margin-top:26px; display:flex; flex-direction:column; flex:none; row-gap:10px; } .kw-row{container-type:normal;} .kw-row--xl .kw-track span{font-size:clamp(18px,3vw,32px);} .kw-row--md .kw-track span{font-size:clamp(14px,2.2vw,24px);} .kw-row--xxl .kw-track span{font-size:clamp(22px,3.8vw,40px);} .kw-row--lg .kw-track span{font-size:clamp(16px,2.6vw,28px);} .testi-grid{grid-template-columns:1fr;} .process-grid{grid-template-columns:1fr;gap:20px;} .topbar nav{display:none;} .burger{display:flex;} /* Ohne sichtbare Button-Reihe (Hamburger-Menue statt Nav) macht der abschnittsbezogene Balken hier keinen Sinn -- stattdessen ein simpler Gesamt-Fortschritt ueber die ganze Seite, unter der Topbar. */ .scroll-progress-mobile{ display:block; position:absolute; left:12px; right:12px; bottom:6px; height:3px; border-radius:999px; background:rgba(255,255,255,0.18); overflow:hidden; } .topbar.scrolled .scroll-progress-mobile{background:rgba(25,26,43,0.08);} .scroll-progress-mobile__fill{ display:block; height:100%; width:100%; background:linear-gradient(90deg, var(--mint), var(--purple)); clip-path:inset(0 100% 0 0); } .contact{margin:0 20px; padding:56px 24px; border-radius:22px;} .contact-wrap{margin:-32px auto -18px;} section{padding:72px 0;} .toc + .pricing{padding-top:64px;} footer{padding:64px 0 32px;} } @media (max-width: 640px){ .wrap{padding:0 22px;} .price-grid{grid-template-columns:1fr;} .hero-badges{gap:8px;} .support-badge{padding:10px 16px 10px 10px; gap:10px;} .support-badge .txt{font-size:11px;} .support-badge img{height:40px;} .contact-wrap{padding:0 20px;} /* Der Button enthaelt die volle E-Mail-Adresse ohne Umbruchstellen (kein Leerzeichen) -- bei knappem Platz lief er dadurch rechts ueber den Rand hinaus statt umzubrechen, was wie "nicht mittig" aussah. */ .contact .btn-primary{width:100%; justify-content:center; padding:15px 14px; font-size:13.5px;} /* mix-blend-mode ueber dem