/* ── Schriften, selbst gehostet ───────────────────────────────────────────── Vorher lud der ein Stylesheet von fonts.googleapis.com, das seinerseits Dateien von fonts.gstatic.com nachlud: zwei Fremd-Hosts im kritischen Pfad und die IP jedes Besuchers an Google (DSG Art. 16 f., Auslandbekanntgabe). Nunito und Space Grotesk sind Variable Fonts — eine Datei deckt alle Schnitte, deshalb steht dort ein Gewichtsbereich statt einzelner Gewichte. IBM Plex Mono ist statisch und braucht je Schnitt eine Datei. Nur Latein. Kyrillisch, Griechisch und Vietnamesisch lud Google mit, diese Seite braucht sie nicht. Ein deutschsprachiger Besucher lädt am Ende die vier latin-Dateien, rund 80 KB — aber von leonly.ch, ohne Fremdverbindung. */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/SpaceGrotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url('fonts/Nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexMono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/SpaceGrotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url('fonts/Nunito-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexMono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* ════════════════════════════════════════════════════════════════ LEONLY — Stylesheet Corporate Identity: The Zone Media GmbH, Brand Guidelines 2025 Ultraviolet #4A24AA Akzent: Buttons, Links, Eyebrow, Logo-Punkt It's Black #020A18 dunkle Flächen Dark Violet #201547 Karten auf dunklem Grund Not So White #E9E9E9 zweite Fläche Space Grotesk Headlines · Nunito Fliesstext · IBM Plex Mono Labels Bewusst NICHT übernommen: Zone Orange (kollidiert mit kollabo #F56038) und die Zone-Tonalität. Leonly bleibt in der Sie-Form. ════════════════════════════════════════════════════════════════ */ :root{ --violet:#4A24AA; --violet-deep:#3A1C87; --violet-soft:#AB92E1; --violet-tint:#EDE8FA; --black:#020A18; --dark-violet:#201547; --paper:#FFFFFF; --paper-2:#F4F4F5; --paper-3:#E9E9E9; --ink:#020A18; --ink-soft:#2A3242; --muted:#5E6470; --line:#DEDEE1; --line-2:#EDEDEF; --line-dark:#33294F; --muted-dark:#B6AECD; --green:#0E7C57; --green-tint:#E2F3EB; --amber:#8A5A00; --amber-tint:#FCEFD4; --r:14px; --shadow:0 8px 26px rgba(2,10,24,.07), 0 2px 5px rgba(2,10,24,.05); --shadow-lg:0 22px 54px rgba(2,10,24,.13), 0 4px 10px rgba(2,10,24,.06); --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --body:"Nunito",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; --grid:repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 60px), repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 60px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;font-family:var(--body);color:var(--ink);background:var(--paper); font-size:clamp(1rem,.97rem + .16vw,1.06rem);line-height:1.66; -webkit-font-smoothing:antialiased;overflow-x:hidden; } h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.025em;margin:0} p{margin:0} a{color:inherit} img{max-width:100%;display:block} :focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:4px} .wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto} .wrap--narrow{width:min(760px,100% - 2.5rem);margin-inline:auto} .section{padding:clamp(3.5rem,8vw,6.5rem) 0} .section--tight{padding:clamp(2.5rem,5vw,4rem) 0} .section--mist{background:var(--paper-2)} .section--dark{background:var(--black);color:#fff;position:relative} .section--dark::before{content:"";position:absolute;inset:0;background:var(--grid);pointer-events:none} .section--dark > *{position:relative;z-index:1} .section--dark h2,.section--dark h3{color:#fff} .eyebrow{ font-family:var(--display);font-weight:500;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--violet);margin-bottom:1.15rem; } .section--dark .eyebrow{color:var(--violet-soft)} h1{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);text-wrap:balance} h2{font-size:clamp(1.7rem,1.15rem + 2.3vw,2.7rem);text-wrap:balance} h3{font-size:1.25rem;text-wrap:balance} .lead{font-size:clamp(1.05rem,1rem + .35vw,1.18rem);color:var(--muted);max-width:62ch} .section--dark .lead{color:var(--muted-dark)} /* Platzhalter — im Build ersetzen. Bewusst sichtbar. Kein white-space:nowrap: kurze Marken wie [DATUM] enthalten ohnehin keine Leerzeichen und brechen nicht, lange Hinweistexte müssen aber umbrechen dürfen. */ .ph{ background:var(--amber-tint);color:var(--amber); border-bottom:1.5px dotted currentColor;border-radius:3px; padding:0 .18em;font-weight:700; } /* ── Buttons und Links ── */ .btn{ display:inline-flex;align-items:center;gap:.6rem;border:0;cursor:pointer; font-family:var(--display);font-weight:700;font-size:.98rem;text-decoration:none; padding:1.05rem 1.9rem;border-radius:10px; transition:transform .16s ease,background .16s ease; } .btn--primary{background:var(--violet);color:#fff;box-shadow:0 2px 0 var(--violet-deep)} .btn--primary:hover{background:var(--violet-deep);transform:translateY(-1px)} .btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)} .btn--ghost:hover{background:var(--paper-2)} .section--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)} .section--dark .btn--ghost:hover{background:rgba(255,255,255,.1)} .btn--block{width:100%;justify-content:center} .btn__arrow{transition:transform .16s ease} .btn:hover .btn__arrow{transform:translateX(3px)} .microcopy{font-size:.87rem;color:var(--muted);margin-top:.85rem} .section--dark .microcopy{color:var(--muted-dark)} .textlink{ display:inline-flex;align-items:center;gap:.4rem;color:var(--violet); font-weight:700;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .16s; } .textlink:hover{border-color:var(--violet)} .section--dark .textlink{color:var(--violet-soft)} /* ── Zone-Koordinatenbadge ── */ .coords{ display:inline-flex;align-items:center;gap:.6rem;background:var(--violet);color:#fff; border-radius:999px;padding:.42rem 1.05rem; font-family:var(--mono);font-size:.68rem;letter-spacing:.09em; } .coords em{font-style:normal;opacity:.72} .coords--quiet{background:transparent;border:1px solid rgba(255,255,255,.22);color:#9AA1B0} /* ── Topbar, Navigation ── */ .topbar{background:var(--black);color:#9AA1B0;font-size:.82rem;padding:.55rem 0} .topbar__in{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} .topbar a{color:#fff;text-decoration:none} .topbar a:hover{text-decoration:underline} .topbar__region{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;font-size:.7rem} .nav{ position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93); backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line); } .nav__in{display:flex;align-items:center;gap:2rem;padding:.9rem 0} .logo{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.05em;text-decoration:none;color:var(--ink)} .logo span{color:var(--violet)} .nav__links{display:flex;gap:1.7rem;margin-left:auto} .nav__links a{text-decoration:none;font-weight:600;font-size:.94rem;color:var(--ink);opacity:.76;transition:opacity .15s} .nav__links a:hover,.nav__links a[aria-current="page"]{opacity:1;color:var(--violet)} .nav .btn{padding:.75rem 1.4rem;font-size:.92rem} /* ── Mobilmenü ── Der Umschalter ist auf Desktop unsichtbar. Ohne JavaScript bleiben die Links sichtbar und umbrechen — die Navigation funktioniert also auch dann, wenn das Skript nicht lädt. Erst die Klasse .js auf aktiviert das Aufklappen. */ .nav__toggle{ display:none;margin-left:auto;background:transparent;border:1.5px solid var(--line); border-radius:9px;padding:.6rem .7rem;cursor:pointer;color:var(--ink); align-items:center;justify-content:center; } .nav__toggle:hover{background:var(--paper-2)} .nav__toggle svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;display:block} .nav__toggle .icon-close{display:none} .nav__toggle[aria-expanded="true"] .icon-open{display:none} .nav__toggle[aria-expanded="true"] .icon-close{display:block} @media(max-width:960px){ .nav__in{flex-wrap:wrap;gap:.75rem} .nav__toggle{display:inline-flex} .nav .btn{order:3} /* Ohne JS: Links stapeln sich sichtbar unter der Leiste. */ .nav__links{ order:4;flex-basis:100%;margin-left:0;flex-direction:column;gap:0; border-top:1px solid var(--line); } .nav__links a{padding:.95rem .25rem;font-size:1rem;opacity:1;border-bottom:1px solid var(--line-2)} .nav__links a:last-child{border-bottom:0} /* Mit JS: standardmässig zu, per Umschalter auf. */ .js .nav__links{display:none} .js .nav__links.is-open{display:flex} } @media(min-width:961px){ .nav__links{display:flex!important} } /* ── Seitenkopf für Unterseiten ── */ .pagehead{background:var(--paper-2);border-bottom:1px solid var(--line);padding:clamp(2.5rem,5vw,4.5rem) 0} .pagehead h1{margin-bottom:1rem} .crumb{font-size:.85rem;color:var(--muted);margin-bottom:1.2rem} .crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--violet)} /* ── Fliesstext ── */ .prose{display:grid;gap:1.15rem;max-width:66ch} .prose p{color:var(--muted);font-size:1.04rem} .prose h2{margin-top:1.6rem} .prose h3{margin-top:1.2rem;font-size:1.15rem} .prose ul,.prose ol{margin:0;padding-left:1.3rem;color:var(--muted);display:grid;gap:.5rem} .prose strong{color:var(--ink)} .prose a{color:var(--violet);font-weight:700} .source{font-size:.83rem;color:var(--muted);margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--line);max-width:66ch} /* ── Tabellen (Löhne) ── */ .tablewrap{overflow-x:auto;margin:2rem 0;border:1px solid var(--line);border-radius:var(--r)} table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem} thead th{ background:var(--paper-2);text-align:left;padding:.9rem 1rem;font-family:var(--display); font-weight:700;font-size:.85rem;letter-spacing:-.01em;border-bottom:1px solid var(--line);white-space:nowrap; } tbody td{padding:.85rem 1rem;border-bottom:1px solid var(--line-2);vertical-align:top} tbody tr:last-child td{border-bottom:0} tbody tr:nth-child(even){background:rgba(244,244,245,.5)} td.num,th.num{text-align:right;font-family:var(--mono);font-size:.9rem;white-space:nowrap} caption{caption-side:bottom;padding:.9rem 1rem;font-size:.82rem;color:var(--muted);text-align:left} /* ── Karten ── */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem} .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.6rem;box-shadow:var(--shadow)} .card h3{margin-bottom:.6rem;font-size:1.1rem} .card p{color:var(--muted);font-size:.97rem} /* ── Profilkarten (Pool) ── */ .pcard{ background:var(--paper);color:var(--ink);border:1px solid var(--line); border-radius:var(--r);padding:1.15rem 1.3rem;box-shadow:var(--shadow);display:grid;gap:.5rem; } .pcard__top{display:flex;justify-content:space-between;align-items:center;gap:.75rem} .pcard__id{font-family:var(--mono);font-size:.74rem;color:var(--violet);font-weight:600;letter-spacing:.06em} .pcard__checked{ display:inline-flex;align-items:center;gap:.4rem;font-size:.73rem;font-weight:700; background:var(--green-tint);color:var(--green);padding:.3rem .7rem;border-radius:999px;white-space:nowrap; } .pcard__checked .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .pcard__role{font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.02em} .pcard__meta{display:flex;flex-wrap:wrap;gap:.4rem} .chip{font-size:.77rem;background:var(--paper-3);color:var(--muted);padding:.24rem .65rem;border-radius:6px;white-space:nowrap} .pcard__foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.79rem;color:var(--muted);border-top:1px solid var(--line-2);padding-top:.6rem} .pcard__foot b{color:var(--ink);font-weight:700} .poolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem} .stamp-line{ display:inline-flex;align-items:center;gap:.6rem; background:var(--paper);border:1px solid var(--line);border-radius:999px; padding:.6rem 1.2rem;font-size:.87rem;color:var(--muted); } .stamp-line .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 0 4px var(--green-tint)} /* ── Zahlenleiste ── */ .stats{background:var(--paper-3);padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stats__in{display:grid;grid-template-columns:repeat(3,1fr)} @media(max-width:700px){.stats__in{grid-template-columns:1fr}} .stat{padding:2rem 1.4rem;border-right:1px solid var(--line);text-align:center} .stat:last-child{border-right:0} @media(max-width:700px){.stat{border-right:0;border-bottom:1px solid var(--line);padding:1.5rem 1rem}.stat:last-child{border-bottom:0}} .stat__num{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,1.15rem + 1.2vw,2rem);letter-spacing:-.035em;line-height:1;color:var(--violet)} .stat__lab{font-size:.84rem;color:var(--muted);margin-top:.5rem} /* ── Herkunftsnachweis: Kampagnen der The Zone Media ── Bewusst nicht «Referenzen» genannt. Leonly hat noch keine Platzierung; das hier sind belegte Kampagnen der Muttergesellschaft. Jede Karte trägt den Link zur öffentlichen Case Study, damit die Zahl nachprüfbar bleibt. */ .track{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1rem;margin-top:2.2rem} .track__i{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:1.4rem 1.5rem 1.2rem;box-shadow:var(--shadow); /* Flex statt Grid, damit die Quellenzeile per margin-top:auto am Fuss klebt — sonst rutscht sie je nach Textlänge auf ungleiche Höhen. */ display:flex;flex-direction:column;gap:.4rem; } .track__firma{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;line-height:1.25} .track__ort{font-size:.78rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase} .track__zahl{ font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.035em; font-size:clamp(1.55rem,1.2rem + 1.3vw,2.05rem);color:var(--violet);margin-top:.5rem; } .track__was{font-size:.93rem;color:var(--muted);line-height:1.5} .track__q{font-size:.78rem;margin-top:auto;padding-top:.7rem;border-top:1px solid var(--line)} .track__q:first-child{margin-top:.6rem} .track__q a{color:var(--muted);text-decoration:underline;text-underline-offset:2px} .track__q a:hover{color:var(--violet)} /* ── Nummerierte Schritte ── */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:2.5rem} .step{position:relative;padding-top:2.6rem} .step__n{position:absolute;top:0;left:0;width:2.1rem;height:2.1rem;border-radius:8px;background:var(--violet-tint);color:var(--violet);display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:.88rem} .step h3{font-size:1.12rem;margin-bottom:.55rem} .step p{color:var(--muted);font-size:.97rem} /* ── Hervorgehobener Kasten ── */ .callout{ border-left:4px solid var(--violet);background:var(--paper); border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line); padding:clamp(1.5rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem); border-radius:0 var(--r) var(--r) 0;max-width:74ch;box-shadow:var(--shadow); } .callout h2,.callout h3{margin-bottom:.8rem} .callout p{color:var(--muted)} .callout p + p{margin-top:.9rem} .callout strong{color:var(--ink)} /* ── Formular ── */ .form{display:grid;gap:1.2rem;max-width:560px} .field{display:grid;gap:.4rem} .field label{font-family:var(--display);font-weight:700;font-size:.92rem} .field .hint{font-size:.82rem;color:var(--muted)} .field input,.field select,.field textarea{ font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--paper); border:1.5px solid var(--muted);border-radius:9px;padding:.85rem 1rem;width:100%; } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet);outline:none;box-shadow:0 0 0 3px var(--violet-tint)} .field textarea{min-height:120px;resize:vertical} .consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--muted)} .consent input{width:20px;height:20px;flex:none;margin-top:.2rem;accent-color:var(--violet)} .formnote{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1rem} /* ── FAQ ── */ .faq{max-width:820px;border-top:1px solid var(--line)} details{border-bottom:1px solid var(--line)} summary{cursor:pointer;list-style:none;padding:1.35rem 2.5rem 1.35rem 0;position:relative;font-family:var(--display);font-weight:700;font-size:1.04rem;letter-spacing:-.02em} summary::-webkit-details-marker{display:none} summary::after{content:"";position:absolute;right:.4rem;top:50%;width:10px;height:10px;border-right:2.4px solid var(--violet);border-bottom:2.4px solid var(--violet);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease} details[open] summary::after{transform:translateY(-20%) rotate(-135deg)} details .prose{padding:0 0 1.5rem} /* ── Inhaltsverzeichnis (Lohnseite) ── */ .toc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.6rem;margin:2rem 0} .toc h2{font-size:.8rem;font-family:var(--display);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem} .toc ol{margin:0;padding-left:1.2rem;display:grid;gap:.45rem;font-size:.96rem} .toc a{color:var(--violet);font-weight:600;text-decoration:none} .toc a:hover{text-decoration:underline} /* ── Abschluss-Sektion in Ultraviolet ── */ .closing{text-align:center;background:var(--violet);color:#fff;position:relative;overflow:hidden} .closing::before{content:"";position:absolute;inset:0;background:var(--grid);pointer-events:none} .closing > *{position:relative;z-index:1} .closing h2{color:#fff;max-width:30ch;margin:0 auto 1.2rem} .closing .lead{color:rgba(255,255,255,.85);margin:0 auto 2.4rem;text-align:center} .closing__label{font-family:var(--display);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:1.4rem} .closing blockquote{ margin:0 auto 3rem;max-width:34ch;font-family:var(--display);font-weight:700; font-size:clamp(1.35rem,1rem + 1.9vw,2.15rem);line-height:1.26;letter-spacing:-.03em;color:#fff; position:relative;padding-top:2.2rem; } .closing blockquote::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:44px;height:3px;border-radius:2px;background:#fff;opacity:.6} .closing .btn--primary{background:#fff;color:var(--violet);box-shadow:0 2px 0 rgba(0,0,0,.18)} .closing .btn--primary:hover{background:#F1EDFB;color:var(--violet-deep)} .closing .microcopy{color:rgba(255,255,255,.8)} .closing .microcopy a{color:#fff} @media(max-width:640px){.closing h2 br{display:none}} /* ── Footer ── */ .footer{background:var(--black);color:#9AA1B0;padding:4rem 0 2rem;font-size:.93rem;position:relative} .footer::before{content:"";position:absolute;inset:0;background:var(--grid);pointer-events:none} .footer > *{position:relative;z-index:1} .footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.13)} @media(max-width:820px){.footer__grid{grid-template-columns:1fr;gap:2rem}} /* Ebene h2, nicht h4: der Inhalt darüber endet bei h2, ein Sprung auf h4 bricht die Gliederung für Screenreader und Suchmaschinen. Die Optik bleibt. */ .footer__h{font-size:.76rem;font-family:var(--display);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:1.1rem} .footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem} .footer a{text-decoration:none;color:#9AA1B0;transition:color .15s} .footer a:hover{color:#fff} .footer .logo{color:#fff;font-size:1.75rem;display:inline-block;margin-bottom:1rem} .footer__legal{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:1.6rem;font-size:.85rem;align-items:center} .footer__legal ul{display:flex;gap:1.4rem;flex-wrap:wrap} /* ── Bau-Hinweis, vor Livegang entfernen ── */ .buildnote{background:var(--amber-tint);color:var(--amber);font-size:.86rem;padding:.7rem 0;border-bottom:1px solid rgba(138,90,0,.25)} .buildnote strong{font-weight:800} /* ── Kampagnen-Landingpage: navigationslos, ein CTA ── */ .lp{background:var(--paper)} .lp__bar{background:var(--black);color:#fff;padding:1rem 0} .lp__bar .logo{color:#fff;font-size:1.35rem} .lp__hero{padding:clamp(2.5rem,6vw,4.5rem) 0} .lp__hero h1{font-size:clamp(1.9rem,1.3rem + 3vw,3rem);margin-bottom:1.2rem} .sticky-cta{ position:sticky;bottom:0;z-index:50;background:rgba(255,255,255,.96); backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:.85rem 0; } .sticky-cta__in{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} @media print{.nav,.topbar,.buildnote,.sticky-cta,.closing{display:none}} /* ════════════════════════════════════════════════════════════════ Startseiten-Komponenten ════════════════════════════════════════════════════════════════ */ /* ── Hero ── */ .hero{background:var(--paper);color:var(--ink);padding:clamp(3.5rem,7vw,6rem) 0 clamp(4rem,7vw,6rem);position:relative;overflow:hidden} .hero::after{ content:"";position:absolute;inset:auto -12% -70% 52%;height:90%; background:radial-gradient(closest-side,var(--violet-tint),transparent 72%);pointer-events:none; } .hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;position:relative;z-index:1} @media(max-width:980px){.hero__grid{grid-template-columns:1fr;gap:3rem}} .hero h1{font-size:clamp(2.15rem,1.25rem + 4vw,3.9rem);color:var(--ink);margin-bottom:1.4rem;text-wrap:balance} .hero__sub{font-size:clamp(1.05rem,1rem + .4vw,1.2rem);color:var(--muted);max-width:54ch;margin-bottom:2rem} .hero .microcopy a{color:var(--ink);font-weight:700} .checks{list-style:none;padding:0;margin:0 0 2.2rem;display:grid;gap:.85rem} .checks li{display:flex;gap:.8rem;align-items:flex-start;font-size:1.01rem;color:var(--ink-soft)} .tick{flex:0 0 22px;width:22px;height:22px;margin-top:.2rem;border-radius:50%;background:var(--violet);display:grid;place-items:center} .tick svg{width:12px;height:12px;stroke:#fff;stroke-width:3.2;fill:none;display:block} .hero__cards{position:relative;display:grid;gap:1rem} .hero__cards .pcard{box-shadow:var(--shadow-lg)} .hero__cards .pcard:nth-child(2){margin-left:clamp(0px,3vw,2.5rem)} .hero__cards .pcard:nth-child(4){margin-left:clamp(0px,5vw,4rem)} .poolbadge{ display:inline-flex;align-items:center;gap:.6rem;background:var(--paper);color:var(--ink); border:1px solid var(--line);border-radius:999px;padding:.6rem 1.1rem;font-weight:700;font-size:.9rem; box-shadow:var(--shadow);width:max-content;margin-bottom:.25rem; } .poolbadge .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-tint)} .poolbadge .stamp{font-family:var(--mono);font-size:.72rem;color:var(--violet);letter-spacing:.04em} /* ── Problem-Sektion ── */ .punch{display:grid;gap:.9rem;margin:2.2rem 0 2.6rem;max-width:60ch} .punch p{font-family:var(--display);font-weight:700;font-size:clamp(1.08rem,1rem + .7vw,1.38rem);line-height:1.34;letter-spacing:-.02em;padding-left:1.2rem;border-left:3px solid var(--violet)} /* ── Pool-Sektion ── */ .pool__head{display:grid;gap:1.2rem;max-width:64ch;margin-bottom:3rem} .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} @media(max-width:900px){.cards3{grid-template-columns:1fr}} .pool__note{margin-top:2.2rem;font-size:1.04rem;max-width:60ch;font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.42} .stamp-line{margin-top:1.6rem} /* ── Die ehrliche Absage ── */ .honest{padding-top:0} .honest__box{ border-left:4px solid var(--violet);background:var(--paper); border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line); padding:clamp(1.8rem,4vw,2.8rem) clamp(1.5rem,4vw,3rem); border-radius:0 var(--r) var(--r) 0;max-width:74ch;box-shadow:var(--shadow); } .honest__box h2{margin-bottom:1rem} .honest__why{margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--muted);max-width:62ch} .honest__why strong{color:var(--ink)} /* ── Honorar ── */ .money{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:start} @media(max-width:900px){.money{grid-template-columns:1fr}} .money__big{font-family:var(--display);font-weight:700;letter-spacing:-.045em;font-size:clamp(3rem,2rem + 5vw,4.8rem);line-height:1;color:#fff} .money__big small{font-size:.3em;font-weight:700;letter-spacing:-.015em;color:var(--violet-soft);display:block;margin-top:.7rem} .nolist{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.7rem} .nolist li{display:flex;gap:.75rem;align-items:center;color:var(--muted-dark);font-size:1.01rem} .nolist .x{flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-dark);display:grid;place-items:center;font-size:.7rem} .calcbox{background:var(--dark-violet);border:1px solid var(--line-dark);border-radius:var(--r);padding:1.6rem 1.7rem;display:grid;gap:.9rem} .calcbox h3{font-size:1rem;letter-spacing:-.015em} .calcrow{display:flex;justify-content:space-between;gap:1rem;font-size:.96rem;color:var(--muted-dark)} .calcrow strong{color:#fff;font-family:var(--mono);font-weight:600;white-space:nowrap} .calcrow--total{border-top:1px solid var(--line-dark);padding-top:.9rem;margin-top:.2rem;font-weight:700;color:#fff} .calcrow--total strong{color:var(--violet-soft);font-size:1.18rem} .guarantee{margin-top:2.4rem;padding:1.4rem 1.6rem;border-radius:var(--r);background:rgba(171,146,225,.13);border:1px solid rgba(171,146,225,.3);color:var(--muted-dark);max-width:62ch} .guarantee strong{color:#fff} /* ── Über / Portrait ── */ .about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center} @media(max-width:900px){.about{grid-template-columns:1fr}} .portrait{margin:0} .portrait__slot{ aspect-ratio:4/5;border-radius:var(--r); background:repeating-linear-gradient(45deg,var(--paper-3),var(--paper-3) 12px,#DFDFE1 12px,#DFDFE1 24px); border:2px dashed var(--violet-soft);display:grid;place-items:center;text-align:center;padding:2rem; } .portrait__slot p{font-family:var(--mono);font-size:.77rem;line-height:1.7;color:var(--violet);max-width:26ch} .portrait__slot b{display:block;font-size:.88rem;margin-bottom:.6rem;letter-spacing:.08em;text-transform:uppercase} .portrait figcaption{margin-top:.9rem;font-size:.9rem;color:var(--muted)} .portrait figcaption b{color:var(--ink);display:block;font-family:var(--display);font-weight:700;font-size:1.04rem;letter-spacing:-.02em} .anti{list-style:none;padding:0;margin:1.6rem 0 1.8rem;display:grid;gap:.55rem} .anti li{display:flex;gap:.7rem;align-items:center;font-family:var(--display);font-weight:700;font-size:1.04rem;letter-spacing:-.02em} .anti .x{color:var(--violet);font-size:1.1rem} /* Fliesstext-Seiten: Abstand für Überschriften ausserhalb von .prose */ .wrap--narrow > h2{margin-top:3.2rem;margin-bottom:1.1rem} .wrap--narrow > h2:first-of-type{margin-top:2.4rem} /* ════════════════════════════════════════════════════════════════ BEWEGUNG UND HERO-GESTALTUNG Haltung: ruhig und solide, nicht spielerisch. Der Zielkunde ist ein Elektromeister mit zwei Agentur-Enttäuschungen — Bewegung darf Qualität signalisieren, aber nie nach Verkaufstrick aussehen. Regeln: kurze Dauer (0,2–0,6 s), eine Richtung (von unten), kein Parallax, kein Scroll-Jacking, keine Endlosschleifen ausser einem sehr leisen Puls. Alles wird bei prefers-reduced-motion vollständig abgeschaltet. ════════════════════════════════════════════════════════════════ */ @keyframes riseIn{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } @keyframes cardIn{ from{opacity:0;transform:translateY(22px) scale(.985)} to{opacity:1;transform:none} } @keyframes drift{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} } @keyframes pulseRing{ 0%{box-shadow:0 0 0 0 rgba(14,124,87,.35)} 70%{box-shadow:0 0 0 9px rgba(14,124,87,0)} 100%{box-shadow:0 0 0 0 rgba(14,124,87,0)} } /* ── Hero: Zone-Raster und Akzentform auf hellem Grund ── */ .hero{isolation:isolate} .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: repeating-linear-gradient(0deg,rgba(2,10,24,.045) 0 1px,transparent 1px 60px), repeating-linear-gradient(90deg,rgba(2,10,24,.045) 0 1px,transparent 1px 60px); -webkit-mask-image:radial-gradient(120% 90% at 70% 0%,#000 35%,transparent 78%); mask-image:radial-gradient(120% 90% at 70% 0%,#000 35%,transparent 78%); } /* Violette Akzentfläche, die schräg aus der oberen rechten Ecke läuft. */ .hero::after{ inset:-25% -20% auto 42%;height:135%; background: radial-gradient(closest-side,rgba(74,36,170,.16),transparent 72%), radial-gradient(closest-side at 30% 70%,rgba(171,146,225,.22),transparent 70%); transform:rotate(-8deg); } /* Gestaffelter Auftritt. Ohne JS greift das genauso — reine CSS-Animation. */ .hero__grid > div > *{animation:riseIn .55s cubic-bezier(.4,0,.2,1) both} .hero__grid > div > *:nth-child(1){animation-delay:.05s} .hero__grid > div > *:nth-child(2){animation-delay:.12s} .hero__grid > div > *:nth-child(3){animation-delay:.19s} .hero__grid > div > *:nth-child(4){animation-delay:.26s} .hero__grid > div > *:nth-child(5){animation-delay:.33s} .hero__grid > div > *:nth-child(6){animation-delay:.40s} .hero__grid > div > *:nth-child(7){animation-delay:.47s} .hero__cards > *{animation:cardIn .6s cubic-bezier(.4,0,.2,1) both} .hero__cards > *:nth-child(1){animation-delay:.30s} .hero__cards > *:nth-child(2){animation-delay:.42s} .hero__cards > *:nth-child(3){animation-delay:.52s} .hero__cards > *:nth-child(4){animation-delay:.62s} /* Sehr leises Schweben, versetzt — die Karten wirken lebendig, nicht animiert. */ .hero__cards .pcard{animation:cardIn .6s cubic-bezier(.4,0,.2,1) both, drift 7s ease-in-out infinite} .hero__cards .pcard:nth-child(2){animation-delay:.42s, 0s} .hero__cards .pcard:nth-child(3){animation-delay:.52s, 1.1s} .hero__cards .pcard:nth-child(4){animation-delay:.62s, 2.2s} .hero__cards .pcard:hover{animation-play-state:paused} .poolbadge .dot{animation:pulseRing 2.6s ease-out infinite} /* ── Karten reagieren auf Zeigerkontakt ── */ .pcard,.card{transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s cubic-bezier(.4,0,.2,1)} .pcard:hover,.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} /* ── Seitenkopf der Unterseiten: nicht mehr nur ein grauer Block ── */ .pagehead{position:relative;overflow:hidden;isolation:isolate} .pagehead::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: repeating-linear-gradient(0deg,rgba(2,10,24,.04) 0 1px,transparent 1px 56px), repeating-linear-gradient(90deg,rgba(2,10,24,.04) 0 1px,transparent 1px 56px); -webkit-mask-image:linear-gradient(100deg,#000 8%,transparent 62%); mask-image:linear-gradient(100deg,#000 8%,transparent 62%); } .pagehead::after{ content:"";position:absolute;z-index:0;pointer-events:none; inset:-60% -12% auto 58%;height:220%; background:radial-gradient(closest-side,rgba(74,36,170,.13),transparent 70%); transform:rotate(-10deg); } .pagehead > *{position:relative;z-index:1} /* Schmaler Violett-Balken links, greift die Absage-Sektion auf. */ .pagehead .crumb{position:relative;padding-left:1rem} .pagehead .crumb::before{ content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:3px; border-radius:2px;background:var(--violet); } .pagehead > .wrap > *,.pagehead > .wrap--narrow > *{animation:riseIn .5s cubic-bezier(.4,0,.2,1) both} .pagehead > .wrap > *:nth-child(1),.pagehead > .wrap--narrow > *:nth-child(1){animation-delay:.04s} .pagehead > .wrap > *:nth-child(2),.pagehead > .wrap--narrow > *:nth-child(2){animation-delay:.11s} .pagehead > .wrap > *:nth-child(3),.pagehead > .wrap--narrow > *:nth-child(3){animation-delay:.18s} .pagehead > .wrap > *:nth-child(4),.pagehead > .wrap--narrow > *:nth-child(4){animation-delay:.25s} /* Kein Scroll-Reveal. Bewusst entfernt: Ein Effekt, der Inhalt per JavaScript versteckt und darauf angewiesen ist, dass ein IntersectionObserver ihn wieder einblendet, macht die Seite unlesbar, sobald irgendetwas daran scheitert. Der Gewinn ist eine Einblendung, das Risiko ist unsichtbarer Inhalt. Das steht in keinem Verhältnis. Die Auftrittsanimationen von Hero und Seitenkopf sind reines CSS und laufen beim Laden — die können nicht fehlschlagen. */ /* ── Abschaltung ── */ @media(prefers-reduced-motion:reduce){ .hero__grid > div > *,.hero__cards > *,.hero__cards .pcard, .pagehead > .wrap > *,.pagehead > .wrap--narrow > *,.poolbadge .dot{animation:none!important} .pcard:hover,.card:hover{transform:none} } /* ════════════════════════════════════════════════════════════════ HERO v2 — mehr Substanz Das Problem der ersten Fassung: weisse Karten auf weissem Grund. Sie hatten nichts, worauf sie liegen, und der Hero wirkte leer. glow-careers löst das mit einem grossen Medienelement und überlappenden Kacheln darauf; Leonly hat kein Foto, kann aber dasselbe über eine dunkle Fläche erreichen — und die kommt ohnehin aus der CI (It's Black plus Raster). ════════════════════════════════════════════════════════════════ */ .hero{padding:clamp(2.5rem,5vw,4rem) 0 0} .hero__grid{ grid-template-columns:1.02fr .98fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; padding-bottom:clamp(2.5rem,5vw,4rem); } @media(max-width:1040px){.hero__grid{grid-template-columns:1fr;gap:2.5rem}} /* Pille über der Headline */ .pill{ display:inline-flex;align-items:center;gap:.5rem; background:var(--violet-tint);color:var(--violet-deep); border:1px solid rgba(74,36,170,.18);border-radius:999px; padding:.42rem 1rem;margin-bottom:1.4rem; font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.02em; } .pill::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--violet);flex:none; } /* Markierung in der Headline — gibt der Zeile optisches Gewicht. */ .hero h1 mark{ background:none;color:inherit;position:relative;white-space:nowrap; padding:0 .06em; } .hero h1 mark::after{ content:"";position:absolute;left:0;right:0;bottom:.08em;height:.34em;z-index:-1; background:linear-gradient(90deg,var(--violet-soft),rgba(171,146,225,.45)); border-radius:3px; } .hero h1{position:relative;z-index:1;margin-bottom:1.2rem} .hero__sub{margin-bottom:1.8rem} .checks{margin-bottom:2rem} .hero__cta{display:flex;gap:.85rem;flex-wrap:wrap;align-items:center} .hero__cta .btn--ghost{border-color:rgba(2,10,24,.18)} /* ── Das dunkle Panel ── */ .hero__panel{ position:relative;isolation:isolate;overflow:hidden; background:var(--black);color:#fff; border-radius:calc(var(--r) + 6px); padding:1.4rem 1.4rem 1.2rem; box-shadow:0 30px 70px rgba(2,10,24,.28), 0 6px 16px rgba(2,10,24,.14); } .hero__panel::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--grid); } .hero__panel::after{ content:"";position:absolute;z-index:0;pointer-events:none; inset:-40% -30% auto 30%;height:150%; background:radial-gradient(closest-side,rgba(171,146,225,.22),transparent 70%); transform:rotate(-12deg); } .hero__panel > *{position:relative;z-index:1} .hero__panel-head{ display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.12); } .hero__panel-title{ font-family:var(--display);font-weight:500;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--violet-soft); } .hero__panel .poolbadge{ margin-bottom:0;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16); color:#fff;box-shadow:none;font-size:.84rem;padding:.45rem .9rem; } .hero__panel .poolbadge .stamp{color:var(--violet-soft)} .hero__panel-foot{ margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.12); font-size:.84rem;color:var(--muted-dark); display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; } .hero__panel-foot a{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap} .hero__panel-foot a:hover{color:var(--violet-soft)} /* Karten im Panel: enger gestapelt, kein Versatz mehr — das Panel trägt die Form. */ .hero__cards{gap:.7rem} .hero__panel .pcard{margin-left:0!important;box-shadow:0 10px 24px rgba(0,0,0,.28)} /* ── Faktenleiste als Sockel ── */ .hero__facts{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .hero__facts-in{display:grid;grid-template-columns:repeat(4,1fr)} @media(max-width:820px){.hero__facts-in{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.hero__facts-in{grid-template-columns:1fr}} .fact{padding:1.5rem 1rem;text-align:center;border-right:1px solid var(--line)} .fact:last-child{border-right:0} @media(max-width:820px){ .fact:nth-child(2n){border-right:0} .fact:nth-child(-n+2){border-bottom:1px solid var(--line)} } @media(max-width:460px){ .fact{border-right:0;border-bottom:1px solid var(--line)} .fact:last-child{border-bottom:0} } .fact b{ display:block;font-family:var(--display);font-weight:700;color:var(--violet); font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);letter-spacing:-.035em;line-height:1; } .fact span{display:block;font-size:.82rem;color:var(--muted);margin-top:.45rem} /* Auftritt: Panel und Faktenleiste einbeziehen */ .hero__text > *{animation:riseIn .55s cubic-bezier(.4,0,.2,1) both} .hero__text > *:nth-child(1){animation-delay:.05s} .hero__text > *:nth-child(2){animation-delay:.12s} .hero__text > *:nth-child(3){animation-delay:.19s} .hero__text > *:nth-child(4){animation-delay:.26s} .hero__text > *:nth-child(5){animation-delay:.33s} .hero__text > *:nth-child(6){animation-delay:.40s} .hero__panel{animation:cardIn .65s cubic-bezier(.4,0,.2,1) .22s both} .hero__panel .pcard{animation:riseIn .5s cubic-bezier(.4,0,.2,1) both} .hero__panel .pcard:nth-child(1){animation-delay:.42s} .hero__panel .pcard:nth-child(2){animation-delay:.50s} .hero__panel .pcard:nth-child(3){animation-delay:.58s} .hero__facts .fact{animation:riseIn .5s cubic-bezier(.4,0,.2,1) both} .hero__facts .fact:nth-child(1){animation-delay:.55s} .hero__facts .fact:nth-child(2){animation-delay:.62s} .hero__facts .fact:nth-child(3){animation-delay:.69s} .hero__facts .fact:nth-child(4){animation-delay:.76s} @media(prefers-reduced-motion:reduce){ .hero__text > *,.hero__panel,.hero__panel .pcard,.hero__facts .fact{animation:none!important} } /* ════════════════════════════════════════════════════════════════ SEITENKÖPFE v2 — zweispaltig mit Faktenpanel Bisher: grauer Balken, Titel, ein Satz. Zu dünn. Jetzt bekommt jeder Seitenkopf rechts ein kompaktes dunkles Panel mit den Zahlen, die auf der jeweiligen Seite zählen — dieselbe Mechanik wie im Home-Hero, nur kleiner. Die Rechtsseiten behalten bewusst den schlichten Kopf. ════════════════════════════════════════════════════════════════ */ .pagehead--split{padding-bottom:0} .pagehead__grid{ display:grid;grid-template-columns:1.15fr .85fr; gap:clamp(1.8rem,4vw,3.5rem);align-items:center; padding-bottom:clamp(2.5rem,5vw,4rem); } @media(max-width:940px){.pagehead__grid{grid-template-columns:1fr;gap:2rem}} .pagehead__main > * + *{margin-top:1rem} .pagehead__main .lead{margin-top:1.1rem} .pagehead__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem!important} /* Kompaktes dunkles Panel */ .pagehead__aside{ position:relative;isolation:isolate;overflow:hidden; background:var(--black);color:#fff; border-radius:calc(var(--r) + 4px); padding:1.3rem 1.4rem; box-shadow:0 24px 56px rgba(2,10,24,.24), 0 5px 14px rgba(2,10,24,.12); } .pagehead__aside::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--grid); } .pagehead__aside::after{ content:"";position:absolute;z-index:0;pointer-events:none; inset:-45% -30% auto 35%;height:160%; background:radial-gradient(closest-side,rgba(171,146,225,.2),transparent 70%); transform:rotate(-12deg); } .pagehead__aside > *{position:relative;z-index:1} .pagehead__aside-title{ font-family:var(--display);font-weight:500;font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;color:var(--violet-soft); padding-bottom:.85rem;margin-bottom:.2rem;border-bottom:1px solid rgba(255,255,255,.12); } .pagehead__aside-foot{ margin-top:1rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.12); font-size:.82rem;color:var(--muted-dark); } .pagehead__aside-foot a{color:#fff;font-weight:700;text-decoration:none} .pagehead__aside-foot a:hover{color:var(--violet-soft)} /* Faktenliste im Panel */ .minifacts{list-style:none;padding:0;margin:0;display:grid} .minifacts li{ display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding:.72rem 0;border-bottom:1px solid rgba(255,255,255,.08); } .minifacts li:last-child{border-bottom:0;padding-bottom:0} .minifacts b{ font-family:var(--display);font-weight:700;font-size:1.28rem;letter-spacing:-.03em; color:#fff;white-space:nowrap;line-height:1.1; } .minifacts b.is-accent{color:var(--violet-soft)} .minifacts span{font-size:.86rem;color:var(--muted-dark);text-align:right} /* Panel-Variante mit einer grossen Zahl (Lohnseite) */ .bigfact{text-align:center;padding:.4rem 0 .2rem} .bigfact b{ display:block;font-family:var(--display);font-weight:700;color:#fff; font-size:clamp(2.2rem,1.6rem + 2.4vw,3rem);letter-spacing:-.045em;line-height:1; } .bigfact small{display:block;margin-top:.6rem;font-size:.86rem;color:var(--muted-dark)} .bigfact + .minifacts{margin-top:1rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.12)} /* Kontaktblock im Panel (Vakanz melden) */ .panelcall{display:grid;gap:.75rem;padding-top:.9rem} .panelcall .btn{width:100%;justify-content:center} .panelcall .btn--ghost{color:#fff;border-color:rgba(255,255,255,.28)} .panelcall .btn--ghost:hover{background:rgba(255,255,255,.1)} .panelcall p{font-size:.82rem;color:var(--muted-dark);text-align:center} /* Auftritt */ .pagehead__main > *{animation:riseIn .5s cubic-bezier(.4,0,.2,1) both} .pagehead__main > *:nth-child(1){animation-delay:.04s} .pagehead__main > *:nth-child(2){animation-delay:.11s} .pagehead__main > *:nth-child(3){animation-delay:.18s} .pagehead__main > *:nth-child(4){animation-delay:.25s} .pagehead__aside{animation:cardIn .6s cubic-bezier(.4,0,.2,1) .18s both} @media(prefers-reduced-motion:reduce){ .pagehead__main > *,.pagehead__aside{animation:none!important} } /* ── Bilder ── aus build.py. aspect-ratio wird inline gesetzt und reserviert den Platz, damit beim Laden nichts springt. */ .bild{display:block;overflow:hidden;border-radius:var(--r);background:var(--paper-3)} .bild img{width:100%;height:100%;object-fit:cover;display:block} .bild--rund{border-radius:999px} .bild--rahmen{border:1px solid var(--line);box-shadow:var(--shadow)} figure .bild{margin-bottom:0} /* ── Hero-Panel mit Foto im Grund ── Das Bild liegt hinter den Karten und wird stark abgedunkelt. Es liefert Textur und Tiefe, tritt aber nie mit dem Inhalt in Konkurrenz. */ .hero__panel--foto{padding-top:0} .hero__panel-bg{ position:absolute;inset:0;z-index:0;border-radius:inherit; opacity:.28; } .hero__panel-bg img{width:100%;height:100%;object-fit:cover} .hero__panel--foto::before{ /* Raster bleibt, zusätzlich ein Verlauf, damit die Karten lesbar bleiben */ background: linear-gradient(165deg,rgba(2,10,24,.55) 0%,rgba(2,10,24,.88) 55%,rgba(2,10,24,.96) 100%), var(--grid); z-index:1; } .hero__panel--foto > *:not(.hero__panel-bg){position:relative;z-index:2} .hero__panel--foto .hero__panel-head{padding-top:1.4rem}