/* ========================================================================== neonotu — Grundlagen ========================================================================== */ :root{ /* Marke */ --ink:#0B0D14; --ink-2:#3A4056; --ink-3:#6B7290; --line:#E3E6EF; --paper:#FFFFFF; --inset:#F5F6FA; --blue:#5B4BE0; --blue-mid:#2E7BF0; --cyan:#22D3EE; --grad:linear-gradient(100deg,#5B4BE0 0%,#2E7BF0 48%,#22D3EE 100%); /* Bereichsfarben. --a traegt Text auf Weiss und muss darum dunkel genug sein; --tint ist der flaechige Einsatz, --deep der Grund bei Umkehr. Die --c-* stehen zusaetzlich einzeln bereit, damit ein Element die Farbe eines fremden Bereichs zeigen kann — etwa die Punkte im Aufklappmenue oder eine Karte, die auf einen anderen Bereich verweist. */ /* Bereichsfarben. Dieselbe Palette wie bei den Produkten, damit Startseite und Services- Uebersicht nicht zwei Farbwelten zeigen. Alle liegen zwischen 222° und 297°, unterscheiden sich also ueber Helligkeit und Saettigung, nicht ueber den Farbton. --c-* abgedunkelt, traegt Text auf Weiss (alle ueber 4.5:1) --cl-* die Palettenfarbe selbst, fuer Flaechen, Icons und Grafiken */ --c-offensive:#C225CA; --c-defensive:#7050D0; --c-forensics:#A839EF; --c-subs:#2F6AEE; --c-surveillance:#2F7DA0; --c-products:#A839EF; --c-company:#7050D0; --c-insight:#475569; --c-legal:#475569; --c-contact:#4A44C4; --cl-offensive:#DD68E3; --cl-defensive:#8866DE; --cl-forensics:#E0AFFF; --cl-subs:#C4D6FF; --cl-surveillance:#8EC1DE; --cl-products:#E0AFFF; --cl-company:#8866DE; --cl-insight:#94A3B8; --cl-legal:#94A3B8; /* Grafikpalette. Vier Pastelltoene zwischen 202° und 260°, also im Blau-Violett-Feld der Marke. Sie tragen keinen Text — auf Weiss kommen sie nur auf 1.4–2.3:1 — und codieren auch keine Bereiche, weil sie zu nah beieinanderliegen. Ihr Platz sind Verlaeufe, Flaechen und Grafiken, wo Stimmung zaehlt. */ --g-lavender:#CEB5FF; --g-periwinkle:#D3D3FF; --g-cornflower:#80A8FF; --g-powder:#8EC1DE; --g-ramp:linear-gradient(120deg,#CEB5FF 0%,#D3D3FF 34%,#80A8FF 68%,#8EC1DE 100%); --a:#5B4BE0; --tint:#F1EFFE; --deep:#241C63; --space:clamp(1rem,2.5vw,1.75rem); --gutter:clamp(1.25rem,5vw,4.5rem); --wrap:78rem; --r:14px; --shadow:0 1px 2px rgba(11,13,20,.05),0 12px 28px -18px rgba(11,13,20,.28); } /* Bereichsfarben. Jede Seite setzt data-section im ; die Unterseiten erben ueber section_of() die Farbe ihres Bereichs, damit beim Blaettern spuerbar bleibt, wo man sich befindet. Der Einsatz ist bewusst zurueck- haltend: Akzentlinie, Eyebrow, Rahmen im Hover — keine Farbflaechen. */ [data-section="offensive"] {--a:var(--c-offensive); --tint:#FBEBFC;--deep:#5C0F61} [data-section="defensive"] {--a:var(--c-defensive); --tint:#F0ECFB;--deep:#33246B} [data-section="forensics"] {--a:var(--c-forensics); --tint:#F8EEFF;--deep:#4F1673} [data-section="subs"] {--a:var(--c-subs); --tint:#EDF2FE;--deep:#123B8C} [data-section="surveillance"]{--a:var(--c-surveillance);--tint:#EAF5FA;--deep:#123F52} [data-section="products"] {--a:var(--c-products); --tint:#F4EFFE;--deep:#3F1A80} [data-section="company"] {--a:var(--c-company); --tint:#F0ECFB;--deep:#33246B} [data-section="contact"] {--a:var(--c-contact); --tint:#F1EFFE;--deep:#241C63} /* Insights traegt als einziger Bereich keine eigene Farbe, sondern ein neutrales Schiefergrau: Die Meldungen bringen ihre eigene Farbcodierung mit (rot, orange, gelb je Schweregrad). Ein gelber Bereichston lief dagegen und liess jede Seite nach Warnung aussehen, auch die harmlosen. */ [data-section="insight"] {--a:var(--c-insight); --tint:#F1F3F7;--deep:#20293A} [data-section="legal"] {--a:var(--c-legal); --tint:#F1F3F7;--deep:#20293A} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font:400 1rem/1.62 "Inter","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit} :focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:3px} /* Das hidden-Attribut muss jede eigene Anzeigeart schlagen. Der Browser setzt dafuer nur [hidden]{display:none} ohne Klasse — jede Klasse mit eigenem display gewinnt dagegen. Im Bewerbungsformular blieben so „Weiter“ und „Absenden“ gleichzeitig sichtbar, obwohl das Skript sie korrekt aus- und einblendete. */ [hidden]{display:none !important} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .skip{position:absolute;left:-9999px} .skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:#fff; padding:.7rem 1.1rem;border-radius:8px;position:fixed} /* -------------------------------------------------------------- Typografie */ h1,h2,h3,h4{margin:0;line-height:1.13;letter-spacing:-.022em;font-weight:600} h1{font-size:clamp(2.4rem,5.4vw,4.1rem)} h2{font-size:clamp(1.85rem,3.6vw,2.85rem)} h3{font-size:clamp(1.15rem,1.7vw,1.4rem)} p{margin:0 0 1.1em} .lede{font-size:clamp(1.06rem,1.5vw,1.22rem);color:var(--ink-2);line-height:1.6} .muted{color:var(--ink-3)} /* Eyebrow: kurze Bereichsmarke ueber der Ueberschrift. Auf der alten Seite steckte dieser Text im selben

wie die Ueberschrift — dadurch las jede Ueberschrift „services Ausgewaehlte Leistungsangebote“. Hier ist er ein eigenes Element und damit aus der Ueberschrift heraus. / .eyebrow{ display:flex;align-items:center;gap:.7rem;margin:0 0 1rem; font-size:.735rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase; color:var(--a); } .eyebrow::before{content:"";width:1.9rem;height:2px;background:var(--a);flex:none} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} / ------------------------------------------------------------------ Kopf / .top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88); backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .top-in{display:flex;align-items:center;gap:2rem;min-height:5.1rem} .top-logo{display:flex;align-items:center;gap:.62rem;text-decoration:none;flex:none} / Das Icon fuellt seinen viewBox vollstaendig — es gibt keinen Leerraum, den man einrechnen muesste. Bei 34px stand es darum fast doppelt so hoch wie die Wortmarke und ragte oben wie unten deutlich darueber hinaus. / / Das Zeichen steht nicht mehr im Kopfbereich — die Wortmarke traegt den Verlauf selbst. Die Regel bleibt fuer den Fussbereich, wo das Zeichen weiterhin verwendet wird. / .top-icon{width:24px;height:24px} / Etwas groesser als zuvor: ohne das Zeichen davor wirkte die Marke bei 19px verloren. / .top-word{width:auto;height:26px} .top-nav{margin-left:auto;display:flex;align-items:center;gap:.15rem} .top-nav>li{position:relative;list-style:none} .top-nav a{ display:block;padding:.62rem .82rem;border-radius:9px;text-decoration:none; font-size:.925rem;font-weight:500;color:var(--ink-2); transition:color .16s,background .16s; } .top-nav a:hover{color:var(--ink);background:var(--inset)} .top-nav .is-here>a{color:var(--ink);font-weight:600} .top-nav .is-here>a::after{ content:"";display:block;height:2px;margin-top:.34rem;border-radius:2px;background:var(--a) } / Aufklappmenues, reines CSS ueber :hover und :focus-within — sie funktionieren damit ohne Skript. / / Der Chevron kommt als — auf demselben Element ginge das nicht, weil background-clip nicht gleichzeitig text und border sein kann. / .btn--outline{ border-color:transparent; background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; transition:transform .16s,box-shadow .18s,background .22s; } .btn--outline span{ background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent;transition:none; } / Beim Ueberfahren laeuft der Verlauf in die Flaeche und die Schrift wird weiss — der andere Knopf geht den umgekehrten Weg, zu einer flachen Farbe. / .btn--outline:hover{ background:var(--grad) padding-box, var(--grad) border-box; transform:translateY(-1px); box-shadow:0 12px 26px -14px rgba(91,75,224,.75); } .btn--outline:hover span{ background:none;color:#fff;-webkit-text-fill-color:#fff; } .foot-adr{font-style:normal;margin-top:1.6rem;font-size:.92rem;line-height:1.7} / Zweite Ueberschrift einer Footer-Spalte: doppelter Abstand nach oben, damit die Gruppen als getrennt lesbar bleiben. / .foot-h2--gap{margin-top:2.4rem} / ================================================ Services-Uebersicht === / / Dunkle Buehne mit den vier Bereichsfarben als Band. Die Startseite hat eine helle, bildgetragene Buehne — beide duerfen nicht wie dieselbe Seite wirken. / .hub-head{position:relative;background:var(--ink);color:#fff;overflow:hidden; padding-block:clamp(3.4rem,7vw,6rem) clamp(3.4rem,6vw,5rem)} .hub-head::after{content:"";position:absolute;top:-40%;right:-8%;width:46rem;height:46rem; border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(91,75,224,.4) 0%,rgba(34,211,238,.14) 45%,transparent 68%)} .hub-head .wrap{position:relative;z-index:1} .hub-head .eyebrow{color:#fff} .hub-head .eyebrow::before{background:var(--grad)} .hub-head h1{max-width:16ch} .hub-head .lede{margin-top:1.4rem;max-width:56ch;color:#A8AEC6} .hub-head .crumbs,.hub-head .crumbs a{color:#7D849E} .hub-head .crumbs a:hover{color:#fff} .hub-head .crumbs [aria-current]{color:#A8AEC6} / Sprungmarken zu den vier Bereichen. / .hub-jump{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:2.2rem 0 0;padding:0} .hub-jump a{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem; border:1px solid rgba(255,255,255,.2);border-radius:999px;text-decoration:none; font-size:.86rem;font-weight:550;color:#D3D7E6;transition:border-color .18s,color .18s,background .18s} .hub-jump a::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--secl,var(--sec))} .hub-jump a:hover{border-color:var(--sec);color:#fff;background:rgba(255,255,255,.06)} .hub-bars{display:flex;position:absolute;inset:auto 0 0;height:4px} .hub-bars span{flex:1} / Einleitung: Text und Kennzahlen nebeneinander. / .hub-intro{display:grid;gap:clamp(2rem,4vw,3.4rem)} @media(min-width:940px){.hub-intro{grid-template-columns:1.25fr .75fr;align-items:start}} / Ueberschrift und Einfuehrung nebeneinander — vorher stand die Ueberschrift allein in der linken Ecke und rechts blieb die Flaeche leer. / .hub-areas-head{display:grid;gap:1.4rem 3rem;margin-bottom:clamp(2rem,3.6vw,3rem)} @media(min-width:940px){ .hub-areas-head{grid-template-columns:1fr 1fr;align-items:end} .hub-areas-head p{margin:0;padding-bottom:.4rem} } .hub-areas-head p{color:var(--ink-2)} / Branchenliste als Abschluss der Arbeitsweise. / .hub-sectors{margin-top:clamp(2.4rem,4vw,3.4rem);padding-top:1.8rem;border-top:1px solid var(--line)} .hub-sectors h3{font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase; color:var(--ink-3);margin-bottom:1.1rem} .hub-sectors ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0} .hub-sectors li{padding:.4rem .9rem;border:1px solid var(--line);border-radius:999px; font-size:.88rem;font-weight:550;color:var(--ink-2)} / Bild neben der Einleitung — steht dort, wo vorher die Kennzahlen standen. / .hub-shot{margin:0;border-radius:var(--r);overflow:hidden;position:relative;background:var(--inset)} .hub-shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3} .hub-shot::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--grad)} .hub-shot--wide img{aspect-ratio:16/7} / Bereiche als volle Zeilen statt als Kacheln. Als Kacheln wiederholten sie das Quadrantenbild der Startseite; als Zeile bekommt jeder Bereich die ganze Breite und seine Leistungen Platz. / .hub-rows{display:grid;gap:0;border-top:1px solid var(--line)} .hub-row{position:relative;display:grid;gap:1rem 2.4rem;align-items:start; padding:1.8rem 1.4rem;border-bottom:1px solid var(--line); transition:background .22s,padding-left .22s} @media(min-width:940px){.hub-row{grid-template-columns:minmax(16rem,.9fr) 1.1fr}} .hub-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--secl,var(--sec));transition:width .22s} .hub-row:hover{background:#fff;padding-left:1.9rem} .hub-row:hover::before{width:7px} .hub-row-id{display:flex;gap:1rem;align-items:flex-start} .hub-icon{display:grid;place-items:center;width:2.9rem;height:2.9rem;flex:none;border-radius:14px; background:color-mix(in srgb,var(--secl,var(--sec)) 30%,transparent);color:var(--sec); transition:background .22s,color .22s,transform .22s} .hub-icon svg{width:1.45rem;height:1.45rem} .hub-row:hover .hub-icon{background:var(--secl,var(--sec));color:var(--sec);transform:scale(1.06)} .hub-n{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--sec); margin-bottom:.3rem} .hub-row h3{font-size:1.25rem} / Der Bereichsname traegt den Verweis auf die Bereichsseite — vorher war die ganze Zeile ein Link, was die einzelnen Leistungen unklickbar machte. / .hub-title{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:inherit} .hub-title .icon{color:var(--sec);opacity:.45;transition:opacity .2s,transform .2s} .hub-title:hover{color:var(--sec)} .hub-row:hover .hub-title .icon{opacity:1;transform:translateX(3px)} .hub-claim{margin:.35rem 0 0;font-size:.92rem;color:var(--ink-2)} / Leistungen als anklickbare Marken in der Bereichsfarbe. / .hub-chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0;align-self:center} .hub-chips li{display:flex} .hub-chips a,.hub-chips span{display:inline-block;padding:.34rem .8rem;border-radius:999px; font-size:.85rem;font-weight:550;text-decoration:none; border:1px solid color-mix(in srgb,var(--sec) 32%,transparent); color:color-mix(in srgb,var(--sec) 82%,#000); background:color-mix(in srgb,var(--sec) 6%,transparent); transition:background .18s,border-color .18s,transform .18s,color .18s} .hub-row:hover .hub-chips a,.hub-row:hover .hub-chips span{ background:color-mix(in srgb,var(--sec) 12%,transparent); border-color:color-mix(in srgb,var(--sec) 48%,transparent)} / Nur verlinkte Marken heben sich einzeln hervor; unverlinkte bleiben ruhig, damit nicht der Eindruck entsteht, dort fuehre etwas hin. / .hub-chips a:hover{background:var(--sec);border-color:var(--sec);color:#fff; transform:translateY(-1px)} .hub-chips span{cursor:default} / ------------------------------------------------------ Kreislaufgrafik / / Vier gebogene Pfeile, die im Kreis aufeinander zeigen. Die Grafik steht links, die Erlaeuterung rechts — nebeneinander, damit sie nicht die halbe Bildschirmhoehe einnimmt. / .steps-sec{position:relative;overflow:hidden} .steps-sec::before{content:"";position:absolute;top:-28%;right:-8%; width:38rem;height:38rem;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(206,181,255,.45) 0%,rgba(128,168,255,.2) 45%,transparent 70%)} .steps-sec>.wrap{position:relative;z-index:1} .cycle-wrap{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center} @media(min-width:900px){.cycle-wrap{grid-template-columns:auto 1fr}} / Feste Obergrenze: ohne sie zieht das Quadrat die Grafik auf die volle Spaltenbreite und der Abschnitt wird unverhaeltnismaessig hoch. / .cycle{margin:0;flex:none} .cycle svg{display:block;width:min(19rem,72vw);height:auto} .cycle-label{font:700 12.5px/1 "Inter",sans-serif;fill:#241C4A;letter-spacing:.08em} .cycle-mid{font:600 17px/1 "Inter",sans-serif;fill:var(--ink);letter-spacing:-.02em} .cycle-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem} @media(min-width:620px){.cycle-list{grid-template-columns:1fr 1fr;gap:1rem 1.8rem}} .cycle-list li{padding-left:1rem;border-left:3px solid var(--t)} .cycle-list h3{font-size:1.02rem;margin-bottom:.3rem} .cycle-list p{margin:0;font-size:.91rem;color:var(--ink-2)} / Icons aus dem Sprite. Die Groesse kommt vom umgebenden Element, damit ein Icon neben Text automatisch mitwaechst. / .sprite{display:none} .icon{width:1em;height:1em;flex:none;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .arrow .icon,.hub-go .icon,.obj-link .icon,.mega-all .icon{width:1.05em;height:1.05em} .lang-globe{width:15px;height:15px;flex:none;opacity:.65;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} / --------------------------------------------------- Einwilligungsbanner / / Unten angeheftet, nicht als Sperrschicht ueber der Seite: der Inhalt bleibt lesbar, auch solange nicht entschieden ist. / .cookie{position:fixed;inset:auto 0 0;z-index:60;background:var(--ink);color:#D3D7E6; border-top:3px solid transparent; border-image:linear-gradient(90deg,#5B4BE0,#2E7BF0,#22D3EE) 1; box-shadow:0 -12px 40px -18px rgba(11,13,20,.6)} .cookie[hidden]{display:none} .cookie-in{display:grid;gap:1.2rem;padding-block:1.4rem} @media(min-width:820px){.cookie-in{grid-template-columns:1fr auto;align-items:center;gap:2.4rem}} .cookie h2{font-size:1.02rem;color:#fff;margin-bottom:.35rem} .cookie p{margin:0;font-size:.9rem;line-height:1.55;max-width:70ch} .cookie a{color:#fff;text-underline-offset:3px} .cookie-act{display:flex;flex-wrap:wrap;gap:.7rem} .cookie-act .btn{padding:.7rem 1.2rem;font-size:.9rem} .cookie-act .btn--ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff} .cookie-act .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff} / Verzeichnis der Unterabschnitte in der stehenden Spalte. Ohne es steht dort eine Ueberschrift und darunter bis zu 1500 Pixel Leere — der Fliesstext wirkt dann an den rechten Rand gedraengt. / .ch-index{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line)} .ch-index-h{margin:0 0 .8rem;font-size:.72rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-3)} .ch-index ol{list-style:none;margin:0;padding:0;counter-reset:ci;display:grid;gap:.1rem} .ch-index li{counter-increment:ci} .ch-index a{display:grid;grid-template-columns:1.6rem 1fr;gap:.2rem; padding:.34rem .5rem .34rem 0;border-radius:7px; font-size:.88rem;line-height:1.45;color:var(--ink-3);text-decoration:none; transition:color .16s,background .16s} .ch-index a::before{content:counter(ci,decimal-leading-zero); font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--a);opacity:.6; padding-top:.15rem} .ch-index a:hover{color:var(--ink);background:var(--inset)} .ch-index a:hover::before{opacity:1} / Weiche Landung beim Sprung, damit die Ueberschrift nicht unter der angehefteten Kopfzeile verschwindet. / :where(h2,h3,h4)[id]{scroll-margin-top:7rem} / Produktabschnitte werden von der Startseite direkt angesprungen. Der Wert muss ueber der Hoehe des festen Kopfbereichs liegen (84px) — bei 5rem lag die Oberkante genau dahinter. / .prod-sec[id]{scroll-margin-top:6.5rem} / Seitenkopf zweispaltig. Die Zeilenlaenge der Ueberschrift bleibt begrenzt — das ist typografisch richtig. Vorher blieben daneben aber rund 520 Pixel leer, weil dort nichts stand. Jetzt tragen Handlungsaufforderung und Kurzueberblick diese Flaeche. / .page-head-grid{display:grid;gap:2rem} @media(min-width:1000px){ .page-head-grid{grid-template-columns:1.25fr .75fr;gap:clamp(2.5rem,5vw,4.5rem); align-items:start} / Bleibt die Spalte rechts leer — auf Kontakt, Team und Unternehmen gibt es weder Knoepfe noch Kurzueberblick —, dann darf es sie auch nicht geben. Gemessen standen dort 387 Pixel reines Weiss. Ohne zweite Spalte bekommt der Text die volle Breite und die Zeilenlaenge regelt die Ueberschrift selbst. / .page-head-grid:not(:has(.page-head-side > )){grid-template-columns:1fr} .page-head-grid:not(:has(.page-head-side > )) .lede{max-width:74ch} } .page-head-side{display:grid;gap:1.6rem;align-content:start} @media(min-width:1000px){.page-head-side{padding-top:2.4rem}} .page-head-side .btn-row{margin-top:0;flex-direction:column;align-items:stretch} .page-head-side .btn{justify-content:center} / Kurzueberblick: der schnellste Weg in den Text. / .page-toc{padding:1.2rem 1.3rem;border:1px solid var(--line);border-radius:var(--r); background:rgba(255,255,255,.6);backdrop-filter:blur(6px)} .page-toc-h{margin:0 0 .7rem;font-size:.72rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-3)} .page-toc ol{list-style:none;margin:0;padding:0;counter-reset:pt;display:grid;gap:.1rem} .page-toc li{counter-increment:pt} .page-toc a{display:grid;grid-template-columns:1.5rem 1fr;gap:.2rem; padding:.32rem .4rem .32rem 0;border-radius:7px;text-decoration:none; font-size:.88rem;line-height:1.4;color:var(--ink-2);transition:color .16s,background .16s} .page-toc a::before{content:counter(pt,decimal-leading-zero); font-size:.68rem;font-weight:700;color:var(--a);opacity:.6;padding-top:.2rem} .page-toc a:hover{color:var(--ink);background:var(--inset)} .page-toc a:hover::before{opacity:1} / Bild in der stehenden Spalte langer Kapitel. Es steht dort unter der Ueberschrift, statt allein in einer meterhohen zweiten Spalte zu schweben. / .ch-shot--side{margin-top:1.4rem} .ch-shot--side img{aspect-ratio:4/3} / Vorspann ueber die volle Breite, in lesbarer Zeilenlaenge. / .ch-lead{max-width:62rem;margin-bottom:clamp(1.8rem,3vw,2.6rem)} / Bild in der stehenden Spalte langer Kapitel — dort steht es unter der Ueberschrift, statt allein in einer meterhohen zweiten Spalte zu schweben. / .ch-shot--side{margin-top:1.4rem} .ch-shot--side img{aspect-ratio:4/3} / Vorspann ueber die volle Breite, in lesbarer Zeilenlaenge. / .ch-lead{max-width:62rem;margin-bottom:clamp(1.8rem,3vw,2.6rem)} / ------------------------------------------------- Stellenanzeigen / / Die Liste zeigt nur Titel und Kurzbeschreibung — der Rest gehoert auf die Detailseite. Karten statt Tabelle, weil die Eintraege unterschiedlich lang sind und eine Tabelle bei zwei Zeilen Text auseinanderfaellt. / / Umschalter Kacheln / Liste. / .job-toggle{display:flex;align-items:center;gap:.7rem;margin-bottom:1.3rem} .job-toggle-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em; font-weight:700;color:var(--ink-3)} .job-toggle-set{display:flex;gap:.2rem;padding:.2rem;background:var(--inset);border-radius:9px} .job-toggle-set button{display:inline-flex;align-items:center;gap:.4rem; padding:.4rem .75rem;border:0;border-radius:7px;background:transparent; color:var(--ink-2);font:inherit;font-size:.84rem;font-weight:600;cursor:pointer} .job-toggle-set button svg{width:14px;height:14px;fill:currentColor} .job-toggle-set button:hover{color:var(--ink)} .job-toggle-set button[aria-pressed="true"]{background:#fff;color:var(--ink); box-shadow:0 1px 3px rgb(17 20 33 / .12)} .job-toggle-set button:focus-visible{outline:2px solid var(--a);outline-offset:1px} .job-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem} / Kacheln als Flexverbund, nicht als Raster. Ein Raster haelt seine Spalten stur ein: bei sieben Anzeigen in drei Spalten stand in der letzten Reihe eine einzelne Kachel und rechts daneben blieben 747 Pixel leer. Im Flexverbund teilen sich die Kacheln der letzten Reihe die Restbreite unter sich auf, und rechts bleibt nichts uebrig. / .job-list[data-ansicht="kacheln"]{display:flex;flex-wrap:wrap;gap:1rem} .job-list[data-ansicht="kacheln"] .job-card{flex:1 1 20rem;min-width:min(20rem,100%)} .job-card{position:relative;display:flex;flex-direction:column; background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:1.5rem 1.5rem 1.4rem; transition:transform .2s,box-shadow .2s,border-color .2s} .job-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#CFD4E4} .job-card h3{font-size:1.2rem;letter-spacing:-.02em} / Wie bei den Produktkacheln: ein Verweis auf dem Titel, ueber die ganze Karte gezogen — ein Ziel fuer die Maus, ein Eintrag fuer die Tastatur. / .job-link{color:inherit;text-decoration:none} .job-link::after{content:"";position:absolute;inset:0;border-radius:inherit} .job-card:hover .job-link{color:var(--a)} .job-card:has(.job-link:focus-visible){outline:2px solid var(--a);outline-offset:3px} .job-link:focus-visible{outline:none} .job-teaser{margin:.7rem 0 0;color:var(--ink-2);font-size:.95rem} .job-meta{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:1rem 0 0;padding:0} .job-meta li{padding:.2rem .6rem;border-radius:999px;background:var(--inset); font-size:.76rem;font-weight:600;color:var(--ink-2)} .job-more{margin-top:auto;padding-top:1.1rem;font-size:.88rem} / Listendarstellung: eine Zeile je Stelle ueber die volle Breite. Titel und Kurzbeschreibung links, Rahmen und Weg nach rechts — so laesst sich eine laengere Liste von oben nach unten ueberfliegen, was bei Kacheln nicht geht. / .job-list[data-ansicht="liste"]{grid-template-columns:1fr;gap:0} .job-list[data-ansicht="liste"] .job-card{ display:grid;grid-template-columns:1fr auto;align-items:center; column-gap:2rem;row-gap:.5rem; border-radius:0;border-width:0 0 1px;padding:1.3rem .4rem} .job-list[data-ansicht="liste"] .job-card:first-child{border-top:1px solid var(--line)} .job-list[data-ansicht="liste"] .job-card:hover{transform:none;box-shadow:none; background:var(--inset);border-color:var(--line)} .job-list[data-ansicht="liste"] h3{grid-column:1;font-size:1.08rem} .job-list[data-ansicht="liste"] .job-teaser{grid-column:1;margin:.3rem 0 0; max-width:70ch;font-size:.92rem} .job-list[data-ansicht="liste"] .job-meta{grid-column:2;grid-row:1 / span 2; margin:0;justify-content:flex-end;max-width:20rem} .job-list[data-ansicht="liste"] .job-more{grid-column:2;grid-row:3; margin:0;padding:0;justify-self:end} @media(max-width:700px){ .job-list[data-ansicht="liste"] .job-card{grid-template-columns:1fr} .job-list[data-ansicht="liste"] .job-meta{grid-column:1;grid-row:auto; justify-content:flex-start;margin-top:.7rem} .job-list[data-ansicht="liste"] .job-more{grid-column:1;grid-row:auto;justify-self:start;padding-top:.6rem} } .job-count{margin:1.1rem 0 0;font-size:.86rem;color:var(--ink-3)} .job-hint{margin:1rem 0 0;font-size:.83rem;color:var(--ink-3);max-width:34ch} / Detailseite: Text und Eckdaten nebeneinander, die Eckdaten laufen mit. / .job-body{display:grid;gap:clamp(2rem,4vw,3.2rem);align-items:start} @media(min-width:900px){.job-body{grid-template-columns:1fr 17rem}} .job-text{max-width:70ch} .job-text h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-bottom:1.2rem} .job-text p{margin:0 0 1.1em;color:var(--ink-2)} .job-text ul,.job-text ol{margin:0 0 1.3em;padding-left:1.4rem;color:var(--ink-2)} .job-text li{margin-bottom:.4em} .job-text a{color:var(--a);text-underline-offset:.18em} .job-text strong{color:var(--ink)} @media(min-width:900px){.job-facts{position:sticky;top:7rem}} .job-facts{background:var(--inset);border-radius:var(--r);padding:1.4rem} .job-fact + .job-fact{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)} .job-fact h3{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em; color:var(--ink-3);font-weight:700} .job-fact ul{list-style:none;margin:.4rem 0 0;padding:0} .job-fact li,.job-fact p{margin:.15rem 0 0;font-size:.95rem;font-weight:550;color:var(--ink)} .job-facts-cta{margin-top:1.5rem;width:100%;justify-content:center} / Bezug auf eine ausgeschriebene Stelle im Bewerbungsformular. / .job-ref{background:var(--inset);border-left:3px solid var(--a); border-radius:0 var(--r) var(--r) 0;padding:1rem 1.2rem;margin-bottom:1.8rem} .job-ref-h{margin:0;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em; font-weight:700;color:var(--ink-3)} .job-ref-t{margin:.3rem 0 0;font-size:1.06rem;font-weight:650} .job-ref-t a{color:var(--ink);text-underline-offset:.18em} .job-ref-t a:hover{color:var(--a)} .job-ref-p{margin:.45rem 0 0;font-size:.85rem;color:var(--ink-3);max-width:62ch} / ------------------------------------------------ Produktdetailseiten / / Jede Seite traegt die Farbe ihres Produkts. Sie haengt an data-prod, damit ein einzelnes Attribut am Abschnitt genuegt und nicht jede Regel viermal dasteht. / [data-prod="sightadel"]{--pc:var(--p-sightadel);--pg:var(--g-sightadel);--pi:var(--pi-sightadel)} [data-prod="strider"] {--pc:var(--p-strider); --pg:var(--g-strider); --pi:var(--pi-strider)} [data-prod="talion"] {--pc:var(--p-talion); --pg:var(--g-talion); --pi:var(--pi-talion)} [data-prod="valar"] {--pc:var(--p-valar); --pg:var(--g-valar); --pi:var(--pi-valar)} .prod-head h1{font-size:clamp(2.8rem,6vw,4.6rem);letter-spacing:-.03em} .prod-sub-big{margin:.9rem 0 0;font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:600;color:var(--pi)} .prod-claim-big{margin-top:1.3rem;font-weight:500} .prod-intro{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center} @media(min-width:900px){.prod-intro:has(.prod-shot-big){grid-template-columns:1fr 1.05fr}} .prod-lede{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.55;color:var(--ink);max-width:34ch} .prod-shot-big{margin:0} .prod-shot-big img{width:100%;border-radius:var(--r);background:var(--ink)} .prod-shot-big figcaption{margin-top:.8rem;font-size:.84rem;color:var(--ink-3)} .prod-tiles .tile-n{background:var(--pg);-webkit-background-clip:text;background-clip:text} / Vier Schritte, zweispaltig. Die Kennziffer steht gross und blass dahinter — sie ordnet, ohne sich vorzudraengen. / .prod-steps{gap:1.6rem} .prod-step{position:relative;padding:1.6rem 1.6rem 1.5rem;background:#fff; border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .prod-step-n{position:absolute;top:.4rem;right:1rem;font-size:3.4rem;font-weight:700; line-height:1;letter-spacing:-.04em;color:var(--pi);opacity:.13} .prod-step h3{font-size:1.12rem;padding-right:3rem} .prod-step p{margin:.7rem 0 0;color:var(--ink-2);font-size:.95rem} / Tabellen. Sie laufen auf schmalen Schirmen in einem eigenen Rahmen, damit die Seite selbst nie waagerecht scrollt. / .tab-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff} .prod-tab{width:100%;border-collapse:collapse;font-size:.94rem;min-width:34rem} .prod-tab th,.prod-tab td{padding:.9rem 1.1rem;text-align:left;vertical-align:top; border-bottom:1px solid var(--line)} .prod-tab thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.055em; color:var(--ink-3);background:var(--inset);font-weight:700;white-space:nowrap} .prod-tab tbody th{font-weight:650;color:var(--ink);white-space:nowrap} .prod-tab td{color:var(--ink-2)} .prod-tab tbody tr:last-child th,.prod-tab tbody tr:last-child td{border-bottom:0} / Die eigene Spalte im Marktvergleich: sie ist der Grund fuer die Tabelle. / .prod-tab--cmp thead th.is-eigen{color:var(--pi);background:color-mix(in srgb,var(--pi) 9%,#fff)} .prod-tab--cmp td.is-eigen{color:var(--ink);font-weight:600; background:color-mix(in srgb,var(--pi) 5%,#fff)} / Valar: die Modelltabelle ist bei diesem Produkt das Kernstueck und wird darum zu Kacheln mit Geraetebild statt zu Zeilen. / .valar-modelle{display:grid;gap:1.2rem} @media(min-width:760px){.valar-modelle{grid-template-columns:repeat(2,1fr)}} .valar-modell{display:flex;flex-direction:column;background:#fff; border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .valar-modell figure{margin:0;background:var(--ink)} .valar-modell img{width:100%;aspect-ratio:16/9;object-fit:cover} .valar-text{padding:1.3rem 1.4rem 1.5rem} .valar-text h3{font-size:1.2rem} .valar-text h3 span{font-weight:500;color:var(--ink-3)} .valar-geraet{margin:.3rem 0 0;font-size:.86rem;font-weight:600;color:var(--pi)} .valar-text dl{margin:1rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem} .valar-text dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em; color:var(--ink-3);font-weight:700;padding-top:.15rem} .valar-text dd{margin:0;font-size:.92rem;color:var(--ink-2)} .prod-cases .prod-case{position:relative;background:#fff;border:1px solid var(--line); border-radius:var(--r);padding:1.5rem} .prod-cases .card-num{color:var(--pi)} .prod-case h3{font-size:1.05rem;margin-top:.6rem} .prod-case p{margin:.7rem 0 0;font-size:.93rem;color:var(--ink-2)} .prod-close{display:grid;gap:clamp(2rem,4vw,3rem);align-items:start} @media(min-width:900px){.prod-close{grid-template-columns:1.25fr .75fr}} .prod-status{background:var(--inset);border-radius:var(--r);padding:1.6rem} @media(min-width:900px){.prod-status{position:sticky;top:7rem}} .prod-status-h{margin:0;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em; font-weight:700;color:var(--ink-3)} .prod-status-t{margin:.4rem 0 1.4rem;font-size:1.05rem;font-weight:600;color:var(--pi)} .prod-status h3{font-size:.95rem;padding-top:1.2rem;border-top:1px solid var(--line)} .prod-status p{margin:.6rem 0 1.3rem;font-size:.9rem;color:var(--ink-2)} .prod-status .btn{width:100%;justify-content:center} / --------------------------------------- Produktseiten: Farbe und Grafik / / Zurueckhaltend gehalten: die Farbe erscheint an wenigen, immer denselben Stellen — Kennziffern, Haarlinien, das eigene Feld im Vergleich. Ein flaechig eingefaerbter Abschnitt waere lauter, ohne mehr zu sagen. / / Ein weicher Schein hinter dem Seitenkopf, in der Produktfarbe. Er sitzt hinter dem Text und laeuft nach unten aus, damit die Kante zum naechsten Abschnitt unsichtbar bleibt. / .prod-head{position:relative;overflow:hidden} .prod-head::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:130%; background:radial-gradient(60% 55% at 22% 30%, color-mix(in srgb,var(--pi) 16%,transparent) 0%, transparent 70%); pointer-events:none} .prod-head>.wrap{position:relative} / Feine Linie unter dem Produktnamen, im Verlauf des Produkts. / .prod-head h1::after{content:"";display:block;width:3.4rem;height:3px;border-radius:2px; margin-top:.9rem;background:var(--pg)} / Die Einstiegsgrafik. Beim Screenshot ein Rahmen, bei der gezeichneten Grafik keiner — eine Zeichnung braucht keinen Bilderrahmen. / .prod-shot-big img{box-shadow:0 18px 44px rgb(17 20 33 / .13)} .prod-shot-svg{display:flex;flex-direction:column} .prod-svg{width:100%;height:auto;color:var(--pi); background:linear-gradient(155deg, color-mix(in srgb,var(--pi) 7%,#fff) 0%, color-mix(in srgb,var(--pi) 2%,#fff) 55%, #fff 100%); border:1px solid var(--line);border-radius:var(--r)} / Haarlinie im Produktverlauf ueber jeder Nutzenkachel. / .prod-tiles .tile{position:relative;overflow:hidden} .prod-tiles .tile::before{content:"";position:absolute;inset:0 0 auto;height:3px; background:var(--pg);opacity:.75} / Die vier Schritte: der Rahmen nimmt beim Ueberfahren die Produktfarbe an. / .prod-step{transition:border-color .2s,box-shadow .2s,transform .2s} .prod-step:hover{border-color:color-mix(in srgb,var(--pi) 42%,var(--line)); box-shadow:0 10px 26px rgb(17 20 33 / .07);transform:translateY(-2px)} .prod-status{position:relative;overflow:hidden} .prod-status::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--pg)} / Der Abschlussblock mit den uebrigen Produkten. / .prod-card{position:relative;overflow:hidden;padding-top:1.6rem; transition:border-color .2s,box-shadow .2s,transform .2s} .prod-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--pg)} .prod-card:hover{transform:translateY(-3px);box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--pi) 38%,var(--line))} .prod-card-mark{display:inline-flex;align-items:center;justify-content:center; width:2.9rem;height:2.9rem;border-radius:11px;margin-bottom:.9rem; color:var(--pi);background:color-mix(in srgb,var(--pi) 11%,#fff)} .prod-card-icon{width:22px;height:22px} .prod-card h3{font-size:1.15rem} .prod-card .arrow{color:var(--pi)} / ------------------------------------------- Stilmittel im Fliesstext / / Norm-Pille: fuer Standards und Verfahren (OSSTMM, ISO 27001, OSCP). Bewusst zurueckhaltender als die Produktpillen — sie sollen den Satz gliedern, nicht ihn uebertoenen. Es koennen mehrere in einem Absatz stehen; vier bunte Flaechen in drei Zeilen waeren zu viel. / / Als Verweis gesetzt, schlaegt eine Regel wie „.job-text a“ (0,1,1) die Pillenfarbe (0,1,0) — die Schrift stand dann in der Bereichsfarbe der Seite auf dem hellen Produktverlauf, magenta auf Hellblau. Mit vorangestelltem a bekommt die Regel dasselbe Gewicht und steht spaeter. / a.pill--sightadel{color:#4A1069} a.pill--strider {color:#12336E} a.pill--talion {color:#FFFFFF} a.pill--valar {color:#FFFFFF} / Eine Pille, kein Kasten: voll gerundet, getoente Flaeche in der Bereichsfarbe, kein Rahmen. Die erste Fassung hatte 7px Radius und eine graue Umrandung und las sich als Kasten — ein Stilmittel, das es auf dieser Website sonst nirgends gibt. / .pill--norm{border-radius:999px;padding:.12em .7em;font-weight:650;font-size:.9em; background:color-mix(in srgb,var(--a) 12%,#fff); color:color-mix(in srgb,var(--a) 78%,#000); border:0;white-space:nowrap} .dark .pill--norm{background:rgb(255 255 255 / .12);color:#fff} / Eckdaten: eine Zahl, eine Zeile Erklaerung. Fuer Angaben, die im Absatz untergehen — Dauern, Fristen, Stueckzahlen. Als Flexverbund, damit die letzte Reihe die Restbreite aufteilt und rechts nichts leer bleibt. / .facts{display:flex;flex-wrap:wrap;gap:1rem;margin:1.8rem 0;padding:0} .facts > div{flex:1 1 11rem;min-width:min(11rem,100%); padding:1.1rem 1.2rem;background:#fff;border:1px solid var(--line); border-radius:var(--r);position:relative;overflow:hidden} .facts > div::before{content:"";position:absolute;inset:0 0 auto;height:3px; background:var(--sec,var(--a));opacity:.55} / Rueckfall auf --a, nicht auf --ink: --sec wird nur in der Navigation je Eintrag gesetzt, im Inhalt traegt der Bereich seine Farbe ueber --a. Mit --ink standen die Zahlen fast schwarz da. / .facts dt{font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:700; letter-spacing:-.03em;line-height:1.1;color:var(--sec,var(--a))} .facts dd{margin:.4rem 0 0;font-size:.86rem;color:var(--ink-3);line-height:1.45} / Auf dunklem Grund umgekehrt. / .dark .facts > div{background:rgb(255 255 255 / .05);border-color:rgb(255 255 255 / .12)} .dark .facts dd{color:rgb(255 255 255 / .62)} / Zwischenruf mit Marke daneben. Der Satz stand vorher allein links und liess rechts 552 Pixel leer. / .say-grid2{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center} @media(min-width:820px){.say-grid2{grid-template-columns:1.5fr .5fr}} .say-mark{color:var(--a);justify-self:end;width:min(19rem,100%)} .say-mark svg{width:100%;height:auto;display:block} @media(max-width:819px){.say-mark{display:none}} / Satzfortsetzung statt Aufzaehlung: die Punkte vervollstaendigen den Satz davor („…im Ernstfall, um: Datenverluste zu minimieren, …“). Sie stehen darum als Reihe farbiger Pillen im Textfluss, nicht als Kaesten mit Aufzaehlungszeichen — fuenf Kaesten fuer fuenf Halbsaetze lesen sich falsch. / .tiles--flow{display:flex!important;flex-wrap:wrap;gap:.6rem; background:none;border:0;padding:0} .tiles--flow > {flex:0 1 auto!important;min-width:0!important; background:color-mix(in srgb,var(--a) 11%,#fff); border:0;border-radius:999px;padding:.5rem 1.1rem; font-size:.95rem;font-weight:600; color:color-mix(in srgb,var(--a) 80%,#000)} .tiles--flow > ::before{display:none} .tiles--flow .tile-n{display:none} / Nicht den Absatz ausblenden: bei Eintraegen ohne „Titel: Text“-Trennung steht der ganze Inhalt in ihm — die Pillen waren dadurch leer. Beide Elemente laufen stattdessen in einer Zeile. / .tiles--flow h3,.tiles--flow h4,.tiles--flow p{ display:inline;font-size:inherit;font-weight:inherit;margin:0;color:inherit} .tiles--flow h3::after,.tiles--flow h4::after{content:" "} .dark .tiles--flow > {background:rgb(255 255 255 / .12);color:#fff} /* Farbige Kaesten fuer kurze Fachbegriffe. Jeder Kasten traegt einen anderen Ton aus der Grafikpalette, die Armin fuer die Suite ausgewaehlt hat. Fuenf Toene, damit sich bei fuenf Eintraegen keiner wiederholt. Hintergrund stark aufgehellt, Schrift und Ziffer im abgedunkelten Ton — die reinen Palettenfarben traegen als Text auf Weiss keine 4.5:1. / .tiles--hue > { background:color-mix(in srgb,var(--ton) 16%,#fff)!important; border:1px solid color-mix(in srgb,var(--ton) 34%,#fff)!important; border-radius:var(--r);padding:1.3rem 1.3rem 1.4rem} .tiles--hue > ::before{display:none} .tiles--hue .tile-n{font-size:.78rem;letter-spacing:.08em;font-weight:700; color:color-mix(in srgb,var(--ton) 72%,#000); background:none;-webkit-text-fill-color:currentColor} .tiles--hue h3,.tiles--hue h4,.tiles--hue .tile-solo{ margin:.5rem 0 0;font-size:1rem;font-weight:650;line-height:1.35; color:color-mix(in srgb,var(--ton) 76%,#000)} .tiles--hue p:not(.tile-solo){margin:.45rem 0 0;font-size:.9rem;color:var(--ink-2)} .tiles--hue > :nth-child(5n+1){--ton:#8866DE} .tiles--hue > :nth-child(5n+2){--ton:#2F6AEE} .tiles--hue > :nth-child(5n+3){--ton:#A839EF} .tiles--hue > :nth-child(5n+4){--ton:#2F7DA0} .tiles--hue > :nth-child(5n+5){--ton:#C225CA} /* Getoente Kacheln fuer erklaerende Eintraege. Anders als --hue bleibt der Fliesstext in der Lesefarbe: hier stehen ganze Saetze, keine Fachbegriffe, und eine ganze Kachel in Tonfarbe liest sich schlecht. Farbe tragen der Grund, der Rand und die Ziffer. / / Merkmalkacheln: getoente Karte wie .tiles--tint, aber ohne laufende Ziffer. Steht eine Aufzaehlung neben einem Ablauf, waere die Ziffer eine zweite Reihenfolge, die es gar nicht gibt — an ihrer Stelle sitzt ein Punkt. / .tiles--merkmal > { background:color-mix(in srgb,var(--ton) 10%,#fff); border:1px solid color-mix(in srgb,var(--ton) 32%,#fff); border-radius:var(--r);padding:1.4rem; transition:border-color .28s ease,transform .28s ease; } .tiles--merkmal > ::before{display:none} .tiles--merkmal > :hover{ border-color:color-mix(in srgb,var(--ton) 44%,#fff); transform:translateY(-2px); } .tile-dot{ display:block;width:.62rem;height:.62rem;border-radius:50%; margin:.15rem 0 .95rem; background:color-mix(in srgb,var(--ton) 68%,#fff); box-shadow:0 0 0 .3rem color-mix(in srgb,var(--ton) 16%,#fff); } .tiles--merkmal h3,.tiles--merkmal h4{ margin:0 0 .4rem;font-size:1rem;font-weight:650;line-height:1.35; color:color-mix(in srgb,var(--ton) 74%,#000)} .tiles--merkmal p{margin:0;font-size:.94rem;color:var(--ink-2)} .tiles--merkmal > :nth-child(5n+1){--ton:#8866DE} .tiles--merkmal > :nth-child(5n+2){--ton:#2F6AEE} .tiles--merkmal > :nth-child(5n+3){--ton:#2F7DA0} .tiles--merkmal > :nth-child(5n+4){--ton:#4A63E8} .tiles--merkmal > :nth-child(5n+5){--ton:#26A6EF} .tiles--tint > { background:color-mix(in srgb,var(--ton) 10%,#fff); border:1px solid color-mix(in srgb,var(--ton) 32%,#fff); border-radius:var(--r);padding:1.4rem; transition:border-color .28s ease,transform .28s ease; } .tiles--tint > ::before{display:none} .tiles--tint > :hover{ border-color:color-mix(in srgb,var(--ton) 44%,#fff); transform:translateY(-2px); } /* Die Ziffer sitzt in einem runden Feld — sie ersetzt das Zeichen, das sich fuer beliebige Aufzaehlungen nicht sinnvoll waehlen laesst. / .tiles--tint .tile-n{ display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%; margin-bottom:.85rem;font-size:.8rem;font-weight:700;letter-spacing:.02em; color:color-mix(in srgb,var(--ton) 74%,#000); background:color-mix(in srgb,var(--ton) 22%,#fff); -webkit-text-fill-color:currentColor; } .tiles--tint h3,.tiles--tint h4{ margin:0 0 .4rem;font-size:1rem;font-weight:650;line-height:1.35; color:color-mix(in srgb,var(--ton) 74%,#000)} .tiles--tint p{margin:0;font-size:.94rem;color:var(--ink-2)} .tiles--tint > :nth-child(5n+1){--ton:#8866DE} .tiles--tint > :nth-child(5n+2){--ton:#2F6AEE} .tiles--tint > :nth-child(5n+3){--ton:#A839EF} .tiles--tint > :nth-child(5n+4){--ton:#2F7DA0} .tiles--tint > :nth-child(5n+5){--ton:#2F7DA0} /* ── Alarmkanal ─────────────────────────────────────────────────────────── Schweregrad als farbige Marke auf der Karte und im Meldungskopf. Die vier Farben sind bewusst nicht die Markenfarben: Sie sollen als Warnstufe gelesen werden, nicht als Gestaltung. / .card-kopf { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } .sev { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; padding: .2rem .6rem; border-radius: .3rem; color: #0b0b0d; white-space: nowrap; } .sev--kritisch { background: #e5484d; color: #fff; } .sev--hoch { background: #f76b15; } .sev--mittel { background: #ffb224; } .sev--niedrig { background: #8b8d98; color: #fff; } .sev--unbekannt { background: #4a4a52; color: #fff; } .card-quelle { font-size: .72rem; letter-spacing: .08em; opacity: .6; margin-top: .4rem; } .sev-cve{font-size:.72rem;letter-spacing:.08em;opacity:.6} / ── Meldungskarte in der Galerie ───────────────────────────────────────── Dasselbe Aussehen wie das erzeugte Vorschaubild: dunkler Grund, farbige Kante nach Schweregrad, weicher Schimmer aus der Grafikpalette. Der Text bleibt echter Text — markierbar, durchsuchbar, in jeder Groesse scharf und ohne zusaetzliche Bilddatei. Vier Varianten, dieselben wie im Bild. / .alert-card{ position:relative;overflow:hidden;isolation:isolate; background:#0B0B0D;border-color:rgba(255,255,255,.1); padding-left:1.85rem; } .alert-card::before{ content:"";position:absolute;inset:0 auto 0 0;width:7px;z-index:2; background:#8B8D98; } / Die Kante liest den Schweregrad aus der Marke in der Karte, statt ihn ein zweites Mal ins Markup zu schreiben — eine Quelle, keine zwei. / .alert-card:has(.sev--kritisch)::before { background:#e5484d } .alert-card:has(.sev--hoch)::before { background:#f76b15 } .alert-card:has(.sev--mittel)::before { background:#ffb224 } .alert-card:has(.sev--niedrig)::before { background:#8b8d98 } .alert-card:has(.sev--unbekannt)::before { background:#4a4a52 } / Der Schimmer. Zwei radiale Verlaeufe, deren Lage die Variante bestimmt. pointer-events:none, damit die ganze Karte anklickbar bleibt. / .alert-card::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.5;transition:opacity .28s ease; } .alert-card[data-variante="0"]::after{ background: radial-gradient(38% 46% at 82% 12%, #80A8FF 0%, transparent 70%), radial-gradient(30% 38% at 96% 84%, #8EC1DE 0%, transparent 72%); } .alert-card[data-variante="1"]::after{ background: radial-gradient(40% 48% at 90% 78%, #8EC1DE 0%, transparent 70%), radial-gradient(26% 34% at 74% 8%, #CEB5FF 0%, transparent 72%); } .alert-card[data-variante="2"]::after{ background: radial-gradient(44% 52% at 84% 46%, #CEB5FF 0%, transparent 70%), radial-gradient(24% 30% at 97% 96%, #D3D3FF 0%, transparent 72%); } .alert-card[data-variante="3"]::after{ background: radial-gradient(34% 42% at 94% 20%, #D3D3FF 0%, transparent 70%), radial-gradient(32% 40% at 80% 90%, #80A8FF 0%, transparent 72%); } .alert-card:hover::after{opacity:.68} / Alles Textliche ueber den Schimmer heben. / .alert-card > {position:relative;z-index:1} .alert-card h2,.alert-card h3{color:#fff} .alert-card p{color:#C3C9D4} .alert-card .card-num{color:#8F98A6} .alert-card .card-quelle{color:#fff;opacity:.55} .alert-card .arrow{color:#fff} /* ── Umschalter Galerie/Liste ───────────────────────────────────────────── Der Zustand steckt in zwei Radiofeldern, nicht in einer Klasse: So schaltet die Ansicht auch ohne JavaScript um, und es gibt kein Aufblitzen der falschen Ansicht beim Laden. / .ansicht{display:flex;justify-content:flex-end;gap:.4rem;margin-bottom:1.5rem} .ansicht input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .ansicht label{ display:inline-flex;align-items:center;gap:.45rem;cursor:pointer; padding:.42rem .85rem;border:1px solid var(--line);border-radius:999px; font-size:.84rem;color:var(--ink-2); transition:background .18s ease,border-color .18s ease,color .18s ease; } .ansicht label .icon{width:1rem;height:1rem} .ansicht label:hover{border-color:var(--a);color:var(--ink)} .ansicht input:checked + label{background:var(--tint);border-color:var(--a);color:var(--ink)} .ansicht input:focus-visible + label{outline:2px solid var(--a);outline-offset:2px} / Listenansicht. display:contents loest den Kartenkopf auf, damit Datum und Schweregrad zu eigenen Spalten der Zeile werden statt zu einem Block. / .ansicht:has(#v-liste:checked) ~ .posts{display:block} .ansicht:has(#v-liste:checked) ~ .posts .post-card{ display:grid;grid-template-columns:6rem 6.2rem 1fr auto; align-items:center;gap:1rem;padding:.85rem 1.15rem;margin-bottom:.5rem; } .ansicht:has(#v-liste:checked) ~ .posts .card-kopf{display:contents} / Ohne das zieht die Marke sich auf die volle Spaltenbreite — als Rasterfeld streckt sie sich sonst, statt ihre eigene Breite zu behalten. / .ansicht:has(#v-liste:checked) ~ .posts .sev{justify-self:start} .ansicht:has(#v-liste:checked) ~ .posts .post-card h2{ font-size:1rem!important;margin:0;line-height:1.35; } / Anriss und Quelle entfallen: In einer Zeile ist die Uebersicht der Zweck, die Einzelheiten stehen einen Klick weiter. */ .ansicht:has(#v-liste:checked) ~ .posts .post-card > p{display:none} .ansicht:has(#v-liste:checked) ~ .posts .post-card .arrow{ margin:0;padding:0;white-space:nowrap; } @media(max-width:760px){ .ansicht:has(#v-liste:checked) ~ .posts .post-card{ grid-template-columns:auto 1fr;gap:.5rem .8rem; } .ansicht:has(#v-liste:checked) ~ .posts .post-card h2{grid-column:1/-1} .ansicht:has(#v-liste:checked) ~ .posts .post-card .arrow{grid-column:1/-1} } .quelle-box{border-top:1px solid var(--line,rgba(255,255,255,.14));padding-top:1.4rem;max-width:52rem}