/* ========================================================================== 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; /* Fehlte bisher: contact setzte bislang nirgends --secl, das erst mit den [data-section]-Regeln fuer style="--sec:…;--secl:…" dazukam. Zwischen --c-contact und dessen eigenem --tint gewaehlt, wie bei den anderen Paaren. */ --cl-contact:#8D87E0; /* 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. */ /* --sec/--secl liefern auf denselben Selektoren dieselben Werte, die frueher einzeln per style="--sec:…;--secl:…" auf dem Element standen — noetig, wenn eine Seite mehrere Bereiche gleichzeitig zeigt (Hub, Mega-Menue) und darum nicht mit der einen geerbten --a auskommt. Das war der letzte Rest style="", der eine style-src ohne 'unsafe-inline' verhinderte. */ [data-section="offensive"] {--a:var(--c-offensive); --tint:#FBEBFC;--deep:#5C0F61; --sec:var(--c-offensive); --secl:var(--cl-offensive)} [data-section="defensive"] {--a:var(--c-defensive); --tint:#F0ECFB;--deep:#33246B; --sec:var(--c-defensive); --secl:var(--cl-defensive)} [data-section="forensics"] {--a:var(--c-forensics); --tint:#F8EEFF;--deep:#4F1673; --sec:var(--c-forensics); --secl:var(--cl-forensics)} [data-section="subs"] {--a:var(--c-subs); --tint:#EDF2FE;--deep:#123B8C; --sec:var(--c-subs); --secl:var(--cl-subs)} [data-section="surveillance"]{--a:var(--c-surveillance);--tint:#EAF5FA;--deep:#123F52; --sec:var(--c-surveillance);--secl:var(--cl-surveillance)} [data-section="products"] {--a:var(--c-products); --tint:#F4EFFE;--deep:#3F1A80; --sec:var(--c-products); --secl:var(--cl-products)} [data-section="company"] {--a:var(--c-company); --tint:#F0ECFB;--deep:#33246B; --sec:var(--c-company); --secl:var(--cl-company)} [data-section="contact"] {--a:var(--c-contact); --tint:#F1EFFE;--deep:#241C63; --sec:var(--c-contact); --secl:var(--cl-contact)} /* 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; --sec:var(--c-insight); --secl:var(--cl-insight)} [data-section="legal"] {--a:var(--c-legal); --tint:#F1F3F7;--deep:#20293A; --sec:var(--c-legal); --secl:var(--cl-legal)} .hub-bars span{background:var(--secl)} *,*::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:flex-end;gap:.15rem} .top-nav>li{position:relative;list-style:none} .top-nav a{ display:block;position:relative;padding:.62rem .82rem 1rem;border-radius:9px;text-decoration:none; font-size:.925rem;font-weight:500;color:var(--ink-2); /* Nicht umbrechen. Wird die Zeile eng, schrumpfen die Flex-Elemente, und das Chevron am Ende rutschte in eine zweite Zeile — der Menuepunkt wurde doppelt so hoch und riss die Leiste auseinander. */ white-space:nowrap; 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} /* Der Balken liegt ueber der Flaeche statt darin: Als Blockelement im Fluss machte er den aktiven Punkt hoeher als die uebrigen, und weil die Leiste ihre Elemente mittig ausrichtet, sprang seine Beschriftung dabei nach oben. Absolut gesetzt bleiben alle Punkte gleich hoch und stehen unten buendig. */ .top-nav .is-here>a::after{ content:"";position:absolute;left:.82rem;right:.82rem;bottom:.42rem; height:2px;border-radius:2px;background:var(--a) } /* Aufklappmenues, reines CSS ueber :hover und :focus-within — sie funktionieren damit ohne Skript. */ /* Der Chevron kommt als aus dem Sprite und hat ohne feste Groesse keine Ausdehnung, die der Browser kennt — er rendert dann in Standardgroesse und sprengt die Menuezeile. Breite und Hoehe sind darum Pflicht. */ .nav-caret{display:inline-block;width:10px;height:10px;flex:none; margin-left:.3rem;vertical-align:-1px;opacity:.5; fill:none;stroke:currentColor;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} .has-sub>ul,.has-mega>.mega{ position:absolute;top:calc(100% + .4rem);margin:0; background:#fff;border:1px solid var(--line);border-radius:12px; box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-5px); transition:opacity .16s,transform .16s,visibility .16s; } .has-sub>ul,.sub{left:0;min-width:15.5rem;padding:.42rem;list-style:none} .has-sub:hover>ul,.has-sub:focus-within>ul, .has-mega:hover>.mega,.has-mega:focus-within>.mega{opacity:1;visibility:visible;transform:none} .has-sub>ul a{font-weight:450;padding:.54rem .7rem} .has-sub>ul a::before{ content:"";display:inline-block;width:.42rem;height:.42rem;border-radius:50%; margin-right:.6rem;vertical-align:middle;background:var(--sec,var(--line)); } /* Mehrspaltiges Servicemenue. Je Spalte ein Bereich mit seinen Leistungs- seiten — vorher endete das Menue bei den vier Bereichsnamen. */ /* Mit .has-mega davor: die Regel weiter oben (.has-mega > .mega) hat zwei Klassen und schlaegt ein einzelnes .mega. Ohne diesen Vorsatz blieb die waagerechte Zentrierung im geschlossenen Zustand wirkungslos, das Menue ragte 50 Pixel ueber den rechten Fensterrand hinaus und jede Seite der Website liess sich seitlich scrollen. Im geoeffneten Zustand griff die Zentrierung — darum faellt es beim Aufklappen nicht auf. */ .has-mega>.mega{left:50%;transform:translate(-50%,-5px); width:min(58rem,calc(100vw - 3rem));padding:1.4rem} .has-mega:hover>.mega,.has-mega:focus-within>.mega{transform:translate(-50%,0)} .mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem} @media(max-width:1240px){.mega-cols{grid-template-columns:repeat(2,1fr)}} .mega-col{padding-left:.9rem;border-left:2px solid var(--secl,var(--sec))} /* Die Bereichsueberschrift traegt ihre Farbe und deutlich mehr Gewicht — vorher stand sie in derselben Staerke wie die Eintraege darunter und war als Ueberschrift nicht zu erkennen. */ /* Mit .mega davor, weil .top-nav a (0,1,1) sonst Gewicht und Farbe ueberschreibt — die Regel allein (0,1,0) verliert. */ .mega .mega-head{display:block;padding:0 0 .6rem;font-size:.94rem;font-weight:700; letter-spacing:-.01em;color:var(--sec)} .mega .mega-head:hover{color:var(--sec);background:none;text-decoration:underline; text-underline-offset:3px} /* Die Eintraege ruecken ein, damit die Hierarchie sichtbar wird. Der Einzug allein genuegt — eine zusaetzliche Linie doppelt den Farbbalken der Spalte. */ .mega-col ul{list-style:none;margin:0;padding:0 0 0 .9rem;display:grid;gap:.05rem} .mega-col ul a{padding:.3rem .4rem;font-size:.86rem;font-weight:450;color:var(--ink-3); border-radius:6px} .mega-col ul a:hover{color:var(--ink);background:var(--inset)} .mega-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem; margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line)} .mega-foot a{padding:0;font-size:.88rem;font-weight:550} .mega-foot a:hover{background:none;color:var(--a)} /* nowrap, weil die Karte daneben den Platz eng macht: ohne die Regel rutscht der Pfeil unter die Beschriftung. */ /* Mit .mega davor — dieselbe Falle wie bei .mega-head: .top-nav a (0,1,1) schlaegt .mega-all (0,1,0) und setzte display auf block zurueck. Der Pfeil stand darum nicht neben der Beschriftung, sondern darunter, und zwar schon bevor die Karte daneben stand. flex:none und nowrap halten die Zeile zusammen, wenn der Platz eng wird. */ .mega .mega-all{margin-left:auto;flex:none;display:inline-flex;align-items:center; gap:.4rem;white-space:nowrap;color:var(--a)} /* Der hervorgehobene Hinweis im Fuss des Mega-Menues. Workshops stand hier als schlichter Verweis in .88rem und ging neben vier vollen Spalten unter. Als Karte mit Symbol, Name, Zeile und Pfeil hat der Punkt eigenes Gewicht, ohne eine fuenfte Spalte zu erzwingen. Die Regeln brauchen .mega davor: .mega-foot a (0,1,1) wuerde Innenabstand und Schriftgroesse sonst zurueckdrehen. */ .mega .mega-tipp{flex:1 1 20rem;min-width:0;display:flex;align-items:center;gap:.9rem; padding:.72rem .9rem;border:1px solid var(--line); border-left:3px solid var(--secl,var(--sec));border-radius:10px; background:var(--inset);font-size:inherit;font-weight:inherit; transition:border-color .18s,background .18s} .mega .mega-tipp:hover{background:#fff;border-color:var(--sec); border-left-color:var(--sec);color:inherit} .mega-tipp-ic{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem; border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--sec)} .mega-tipp-ic .icon{width:1.15rem;height:1.15rem} .mega-tipp-txt{display:grid;gap:.12rem;min-width:0} .mega-tipp-txt strong{font-size:.92rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .mega-tipp-txt span{font-size:.8rem;font-weight:450;line-height:1.4;color:var(--ink-3)} .mega-tipp-pf{flex:none;margin-left:auto;width:1.05rem;height:1.05rem;color:var(--sec); transition:transform .18s} .mega .mega-tipp:hover .mega-tipp-pf{transform:translateX(3px)} /* Sprachumschalter: aktuelle Sprache sichtbar, die uebrigen aufklappbar. Drei Kuerzel nebeneinander lasen sich wie eine zweite Navigationsebene. Als
, damit es ohne Skript aufklappt — mit Tastatur wie mit dem Finger. nav.js schliesst es zusaetzlich beim Tippen daneben. */ .lang-switch{position:relative;flex:none;margin-left:.8rem} .lang-switch>summary{ display:flex;align-items:center;gap:.4rem; padding:.5rem .7rem;border:1px solid var(--line);border-radius:10px; font-size:.82rem;font-weight:600;letter-spacing:.03em;color:var(--ink-2); cursor:pointer;list-style:none;user-select:none; transition:border-color .18s,color .18s,background .18s; } /* Das Dreieck des Browsers weg — in beiden Schreibweisen, WebKit kennt nur die zweite. */ .lang-switch>summary::-webkit-details-marker{display:none} .lang-switch>summary::marker{content:""} .lang-switch>summary:hover{border-color:var(--ink);color:var(--ink);background:var(--inset)} .lang-switch[open]>summary{border-color:var(--ink);color:var(--ink)} .lang-globe{width:15px;height:15px;flex:none;opacity:.65;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Ohne feste Groesse rendert das Sprite-SVG in Standardgroesse — 300 x 150 — und sprengt die Kopfleiste. Dieselbe Falle wie bei .nav-caret. */ .lang-caret{width:9px;height:9px;flex:none;opacity:.55;fill:none;stroke:currentColor; stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round; transition:transform .18s} .lang-switch[open] .lang-caret{transform:rotate(180deg)} /* Das Kuerzel der aktuellen Sprache — der einzige Text im Aufklapper. */ .lang-now{line-height:1} .lang-switch>ul{ position:absolute;top:calc(100% + .4rem);right:0;z-index:60; min-width:10.5rem;margin:0;padding:.35rem;list-style:none; background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow); } .lang-switch>ul a,.lang-switch>ul span{ display:block;padding:.5rem .65rem;border-radius:8px; font-size:.875rem;font-weight:500;color:var(--ink-2);text-decoration:none; transition:color .16s,background .16s; } .lang-switch>ul a:hover{color:var(--ink);background:var(--inset)} .lang-switch>ul [aria-current]{color:var(--ink);font-weight:600;cursor:default} @media(max-width:520px){.lang-switch>summary{padding:.5rem .55rem}.lang-globe{display:none}} /* ── Werkzeugleiste der Insights-Uebersicht ──────────────────────────────── Eine Zeile: links der Zugang zu den Filtern und die Trefferzahl, rechts Seitengroesse und Ansicht. Vier Schalterreihen nebeneinander waren zu viel Bedienung fuer eine Liste, die man meistens nur liest — die Filter liegen darum hinter einem Symbol. Die Leiste ist bewusst Geschwister der Liste, nicht ihr Vorfahr: Die Listenansicht schaltet ueber .werkzeuge:has(#v-liste:checked) ~ .posts um, und ein Umschliessen haette diese Verbindung getrennt. */ .werkzeuge{ display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:0 0 .85rem; /* Die Kopfleiste klebt oben. Ohne diesen Abstand verschwaende der Anker die Leiste genau darunter, und man landete auf einer Auswahl, die man nicht sieht. */ scroll-margin-top:7rem } .werkzeuge-rechts{margin-left:auto;display:flex;align-items:center;gap:.5rem} /* Die Blaetterleiste steht zweimal: unter dem Filter und unter der Liste. Wer oben die Seitengroesse aendert, will nicht scrollen; wer unten angekommen ist, will nicht zurueck nach oben, um weiterzublaettern. Beide Male linksbuendig — sie gehoert zur Liste, nicht in die Mitte. */ .blaetterleiste{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem} .blaetterleiste--oben{margin:0 0 1.4rem;padding-bottom:1rem; border-bottom:1px solid var(--line);scroll-margin-top:7rem} .blaetterleiste--unten{scroll-margin-top:7rem} .blaetterleiste--unten{margin-top:1.8rem;padding-top:1.2rem; border-top:1px solid var(--line)} .blaetterleiste-zahl{margin:0;font-size:.82rem;color:var(--ink-2);white-space:nowrap} .blaetterleiste-zahl a{color:var(--a)} /* Segmentierter Schalter: aussen ein Rahmen, innen die Stufen buendig nebeneinander. Einzelne Pillen sahen aus wie mehrere Schalter — hier ist sichtbar, dass genau eine Wahl gilt. */ /* Feste Hoehe, nicht Mindesthoehe: Der Ansichtsumschalter enthaelt Symbole, der Filter nur Text — bei freier Hoehe wurden sie 36 und 39 Pixel hoch und standen sichtbar versetzt. */ .seg{display:inline-flex;align-items:center;height:2.4rem;box-sizing:border-box; padding:3px;gap:2px;border:1px solid var(--line);border-radius:999px;background:var(--paper)} .seg > a,.seg > label{height:100%} .seg > a,.seg > label{ display:inline-flex;align-items:center;justify-content:center;gap:.36rem; padding:.32rem .68rem;border-radius:999px; font-size:.82rem;font-weight:500;color:var(--ink-2);text-decoration:none; white-space:nowrap;cursor:pointer; transition:background .16s,color .16s } .seg > a:hover,.seg > label:hover{color:var(--ink);background:var(--inset)} .seg .is-an{background:var(--ink);color:#fff;font-weight:600} .seg .is-an:hover{background:var(--ink);color:#fff} .seg .is-an.seg--kritisch{background:#e5484d} .seg .is-an.seg--hoch{background:#f76b15} /* Ansicht: nur die Symbole. Die Beschriftung bleibt fuer Vorleseprogramme im Markup und erscheint beim Zeigen als Kurzhinweis des Browsers. */ /* Der Schalter ist der Bezugspunkt fuer die versteckten Radiofelder. Ohne position:relative haengen sie am Dokument — der Browser rollt beim Fokus zu ihrer Position, und die Seite sprang beim Umschalten. */ .ansicht{position:relative} .ansicht input{position:absolute;top:50%;left:0;width:1px;height:1px;opacity:0;pointer-events:none} .ansicht label{padding:.34rem .6rem} .ansicht label .icon{width:1.05rem;height:1.05rem} .ansicht input:checked + label{background:var(--ink);color:#fff} .ansicht input:focus-visible + label{outline:2px solid var(--a);outline-offset:2px} .nur-vorlesen{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0 } /* Der Zugang zu den Filtern. Ist eine Auswahl aktiv, faerbt sich der Schalter und traegt einen Punkt — sonst waere der Liste nicht anzusehen, dass sie gefiltert ist. */ .filterbox{position:relative;flex:none} .filterbox > summary{ display:inline-flex;align-items:center;gap:.45rem; /* Dieselbe Hoehe wie der segmentierte Schalter daneben: dessen 3 Pixel Innenrand plus .32rem Polsterung ergeben genau diesen Wert. Ohne die feste Hoehe standen Filter und Ansicht um zwei Pixel versetzt. */ height:2.4rem;box-sizing:border-box; padding:0 .82rem;border:1px solid var(--line);border-radius:999px; font-size:.82rem;font-weight:500;color:var(--ink-2); cursor:pointer;list-style:none;user-select:none; transition:border-color .16s,color .16s,background .16s } .filterbox > summary::-webkit-details-marker{display:none} .filterbox > summary::marker{content:""} .filterbox > summary:hover{border-color:var(--ink);color:var(--ink);background:var(--inset)} .filterbox[open] > summary{border-color:var(--ink);color:var(--ink)} .filterbox.is-aktiv > summary{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600} .filterbox.is-aktiv > summary::after{ content:"";width:6px;height:6px;border-radius:50%;background:var(--a); box-shadow:0 0 0 2px var(--ink) } .filter-icon{width:15px;height:15px;flex:none} .filter-panel{ position:absolute;top:calc(100% + .45rem);left:0;z-index:60; width:20rem;max-width:calc(100vw - 2.4rem);max-height:min(30rem,80vh);overflow:auto; padding:.9rem;background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:var(--shadow) } .filter-gruppe + .filter-gruppe{margin-top:1rem} .filter-h{ display:block;margin-bottom:.45rem;font-size:.7rem;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);opacity:.65 } .filter-zeit a{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.4rem .55rem;border-radius:8px; font-size:.85rem;font-weight:500;color:var(--ink-2);text-decoration:none; transition:color .16s,background .16s } .filter-zeit a:hover{color:var(--ink);background:var(--inset)} .filter-zeit a.is-an{color:var(--ink);font-weight:600;background:var(--inset)} /* Monate ruecken ein — sie gehoeren zum Jahr darueber. */ .filter-zeit a.ist-monat{padding-left:1.4rem;font-size:.81rem} .filter-zeit .n{font-size:.75rem;opacity:.55;font-variant-numeric:tabular-nums} .filter-fuss{margin:.9rem 0 0;padding-top:.7rem;border-top:1px solid var(--line); font-size:.82rem} .filter-fuss a{color:var(--a)} /* Das Suchfeld in der Werkzeugleiste. Es steht offen und nicht im Filterfeld: In einem Archiv ist die Suche die haeufigste Handlung. */ .suchbox{display:flex;align-items:center;gap:.3rem;height:2.4rem; padding:0 .3rem 0 .7rem;box-sizing:border-box; border:1px solid var(--line);border-radius:10px;background:#fff; transition:border-color .18s} .suchbox:focus-within{border-color:var(--a)} .suchbox input{width:11rem;max-width:38vw;border:0;background:none; font:inherit;font-size:.86rem;color:var(--ink)} .suchbox input:focus{outline:none} .suchbox button{display:grid;place-items:center;width:1.9rem;height:1.9rem; border:0;border-radius:8px;background:none;color:var(--ink-3);cursor:pointer; transition:color .16s,background .16s} .suchbox button:hover{color:var(--a);background:var(--inset)} .suchbox button .icon{width:1.05rem;height:1.05rem} /* ── Mein Stack ─────────────────────────────────────────────────────────── Die Produktliste im Filterfeld. Sie erbt das Aussehen der Zeitraumliste — es ist dieselbe Art Auswahl und soll nicht wie ein zweites Bedienkonzept aussehen. Eigene Hoehenbegrenzung, weil die Liste mit dem Archiv waechst: Ohne sie schoebe sie die Fusszeile des Feldes aus dem Bild. */ /* Eigene Klasse, damit sich die Gruppe getrennt ansprechen laesst — die Zeitraumliste soll nicht mitwandern, wenn hier etwas anders wird. */ .filter-stack{border-top:1px solid var(--line);padding-top:.9rem} .filter-hilfe{margin:0 0 .55rem;font-size:.78rem;line-height:1.45;color:var(--ink-3)} .filter-suche{ width:100%;margin-bottom:.5rem;padding:.42rem .6rem; border:1px solid var(--line);border-radius:8px;background:#fff; font:inherit;font-size:.83rem;color:var(--ink) } .filter-suche:focus{outline:2px solid var(--a);outline-offset:1px;border-color:var(--a)} .filter-liste{max-height:11rem;overflow:auto} .filter-liste a{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.4rem .55rem;border-radius:8px; font-size:.85rem;font-weight:500;color:var(--ink-2);text-decoration:none; transition:color .16s,background .16s } .filter-liste a:hover{color:var(--ink);background:var(--inset)} /* Gewaehlt: Haken statt Farbe allein — die Auswahl muss auch dann erkennbar sein, wenn jemand Farben nicht unterscheidet. */ .filter-liste a.is-an{color:var(--ink);font-weight:600;background:var(--inset)} .filter-liste a.is-an span:first-child::before{content:"✓ ";color:var(--a);font-weight:700} .filter-liste .n{font-size:.75rem;opacity:.55;font-variant-numeric:tabular-nums} .filter-leer{margin:.5rem .55rem 0;font-size:.82rem;color:var(--ink-3)} /* Die aktive Auswahl ueber der Werkzeugleiste. */ .stack-aktiv,.stack-merk{ display:flex;flex-wrap:wrap;align-items:center;gap:.5rem; margin-bottom:.9rem;padding:.6rem .8rem; border:1px solid var(--line);border-left:3px solid #5B4BE0; border-radius:12px;background:var(--inset) } .stack-h{font-size:.72rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#5B4BE0} .stack-pille{ display:inline-flex;align-items:center;gap:.4rem; padding:.24rem .6rem;border-radius:999px;background:#fff; border:1px solid var(--line);font-size:.82rem;font-weight:600; color:var(--ink);text-decoration:none;transition:border-color .16s,color .16s } .stack-pille span{opacity:.5;font-weight:400} .stack-pille:hover{border-color:#5B4BE0;color:#5B4BE0} .stack-pille:hover span{opacity:1} .stack-zahl{font-size:.82rem;font-weight:700;color:var(--ink)} .stack-an{font-size:.82rem;font-weight:600;color:#5B4BE0} .stack-weg{margin-left:auto;padding:0;border:0;background:none; font:inherit;font-size:.8rem;color:var(--ink-3);text-decoration:underline; text-underline-offset:3px;cursor:pointer} .stack-weg:hover{color:var(--ink)} @media(max-width:640px){ .werkzeuge-rechts{margin-left:0;width:100%;justify-content:space-between} } .blaettern{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem} .blaettern-w{ display:inline-flex;align-items:center;justify-content:center; min-width:2.3rem;padding:.45rem .7rem;border:1px solid var(--line);border-radius:9px; font-size:.87rem;font-weight:500;color:var(--ink-2);text-decoration:none; font-variant-numeric:tabular-nums; transition:border-color .16s,color .16s,background .16s } .blaettern-w:hover{border-color:var(--ink);color:var(--ink);background:var(--inset)} .blaettern-w.is-an{border-color:var(--ink);background:var(--ink);color:#fff;font-weight:600} .blaettern-aus{padding:0 .2rem;color:var(--ink-2);opacity:.5} .burger{display:none;margin-left:auto;background:none;border:1px solid var(--line); border-radius:10px;padding:.55rem .7rem;cursor:pointer} .burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px} .burger span+span{margin-top:4px} @media(max-width:1080px){ .top-nav{display:none} .burger{display:block} .top-nav.is-open{ display:block;position:absolute;top:100%;left:0;right:0;margin:0;padding:.7rem var(--gutter) 1.4rem; background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow); max-height:calc(100vh - 5.1rem);overflow:auto; } .top-nav.is-open .has-sub>ul, .top-nav.is-open .has-mega>.mega{position:static;opacity:1;visibility:visible;transform:none; width:auto;border:0;box-shadow:none;padding:0 0 .4rem 1rem} .top-nav.is-open .mega-cols{grid-template-columns:1fr;gap:.9rem} .top-nav.is-open .mega-foot{margin-top:.8rem} .lang-switch{margin-left:auto;margin-right:.6rem} } /* --------------------------------------------------------------- Bausteine */ .btn{ display:inline-flex;align-items:center;gap:.55rem;padding:.86rem 1.5rem; border-radius:11px;border:1px solid transparent;font-weight:600;font-size:.95rem; text-decoration:none;cursor:pointer;transition:transform .14s,box-shadow .16s,background .16s; } .btn--solid{background:var(--ink);color:#fff} .btn--solid:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(11,13,20,.6)} .btn--accent{background:var(--a,var(--c-company));color:#fff} .btn--accent:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px var(--a,var(--c-company))} /* Verlaufsknopf. Der Verlauf laeuft doppelt breit als Band durch den Knopf und wird beim Ueberfahren durchgeschoben — der Farbwechsel ist damit eine Bewegung statt eines Umschaltens. Ohne Pseudo-Ebene und ohne eigenen Stapelkontext: eine frueher hier eingesetzte ::after-Ebene mit negativem z-index hat am linken Rand einen Farbsaum stehen lassen. background-clip bleibt padding-box, sonst legt sich der Verlauf unter den 1px-Rand, den .btn transparent setzt, und blitzt an der Kante durch. */ .btn--grad{ color:#fff;border-color:transparent;background-color:var(--blue); background-image:linear-gradient(100deg,#5B4BE0 0%,#2E7BF0 26%,#22D3EE 50%,#2E7BF0 74%,#5B4BE0 100%); background-size:200% 100%;background-position:0 0; background-clip:padding-box; transition:background-position .55s ease,transform .16s,box-shadow .18s; } /* Beim Ueberfahren faellt der Verlauf auf ein ruhiges Blau zusammen — die Bewegung geht von viel Farbe zu einer Farbe, nicht umgekehrt. */ .btn--grad:hover{background-image:none;background-color:var(--blue-mid); transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(46,123,240,.85)} /* Umrissknopf. Beim Ueberfahren wird der Rand selbst zum Verlauf: die Flaeche bleibt der Seitengrund (padding-box), der Verlauf sitzt nur im Randbereich (border-box). Vorher lief das auf ein flaechiges Grau hinaus. */ .btn--ghost{border-color:var(--line);color:var(--ink);background:#fff; transition:transform .16s,box-shadow .18s,border-color .18s} .btn--ghost:hover{ border-color:transparent; background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; transform:translateY(-1px); box-shadow:0 12px 26px -14px rgba(91,75,224,.6); } .btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem} .arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:600; color:var(--a);text-decoration:none;font-size:.95rem} .arrow svg{transition:transform .16s} .arrow:hover svg{transform:translateX(3px)} section{padding-block:clamp(3.6rem,7vw,6.4rem)} .sec-head{max-width:52rem;margin-bottom:clamp(2.2rem,4vw,3.4rem)} .inset{background:var(--inset)} .dark{background:var(--ink);color:#fff} .dark .lede,.dark .muted{color:#A8AEC6} .dark .eyebrow{color:#fff} .dark .eyebrow::before{background:var(--a)} .grid{display:grid;gap:1.1rem} @media(min-width:700px){.g2{grid-template-columns:repeat(2,1fr)}} @media(min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}} @media(min-width:700px){.g4{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.g4{grid-template-columns:repeat(4,1fr)}} /* Karte. Die Akzentlinie oben traegt die Bereichsfarbe und ist der Hauptort, an dem die Farbcodierung sichtbar wird. */ .card{ position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:1.75rem 1.6rem;overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .18s; } .card::before{ content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--sec,var(--a)); transform:scaleX(0);transform-origin:left;transition:transform .28s ease; } .card:hover{border-color:#CFD4E4;box-shadow:var(--shadow);transform:translateY(-2px)} .card:hover::before{transform:scaleX(1)} .card h3{margin-bottom:.55rem} .card p{color:var(--ink-2);font-size:.95rem;margin-bottom:0} .card .arrow{margin-top:1.1rem} .card-num{display:block;font-size:.76rem;font-weight:700;letter-spacing:.13em; color:var(--sec,var(--a));margin-bottom:.85rem} /* Kachel mit eigenem Farbton und Zeichen. --dreh dreht den Bereichston je Kachel; die Farbe bleibt damit in der Familie, statt aus einer fremden Palette zu kommen. Das Zeichen sitzt in einem getoenten Feld, die Kennziffer daneben — vorher stand sie allein ueber dem Titel und das Gitter war neunmal derselbe Kasten. */ .card--tile .card-num{color:var(--ton,var(--sec,var(--a)));margin-bottom:0} .card--tile::before{background:var(--ton,var(--sec,var(--a)))} .card-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.95rem} .card-ico{ display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.85rem; color:var(--ton,var(--sec,var(--a))); background:color-mix(in srgb,var(--ton,var(--sec,var(--a))) 12%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ton,var(--sec,var(--a))) 22%,transparent); transition:background .28s ease,transform .28s ease; } .card-ico .icon{width:1.3rem;height:1.3rem} .card--tile:hover .card-ico{ background:color-mix(in srgb,var(--ton,var(--sec,var(--a))) 20%,transparent); transform:translateY(-1px); } /* Ohne Zeichen sitzt die Kennziffer wie bisher allein. */ .card-head:has(.card-num:only-child){margin-bottom:.85rem} /* Eine Person: Bild, Name, Rolle. Das Hochformat bleibt in seiner natuerlichen Groesse — hochgerechnet wuerde es weich, und ein weiches Portraet faellt staerker auf als ein kleines. */ .person{ margin:0 0 1.6rem;max-width:19rem; } .person img{ display:block;width:100%;height:auto;border-radius:var(--r); /* Der Verlauf am Fuss bindet das Bild an die Bereichsfarbe, ohne es einzufaerben — dieselbe Handschrift wie bei den Karten. */ box-shadow:0 1px 2px rgba(16,20,40,.06), 0 10px 30px rgba(16,20,40,.08); } .person figcaption{display:block;margin-top:.95rem} .person-name{ display:inline;font-weight:700;font-size:1.06rem;letter-spacing:-.01em; color:var(--ink); } /* Der Verweis sitzt in der Zeile des Namens. Als Flaeche, damit er auch mit dem Finger zu treffen ist — ein blankes Icon von 16 Pixeln ist es nicht. */ .person-in{ display:inline-grid;place-items:center;vertical-align:-.35em; width:1.85rem;height:1.85rem;margin-left:.5rem;border-radius:.55rem; color:var(--a); background:color-mix(in srgb,var(--a) 9%,transparent); transition:background .24s ease,transform .24s ease; } .person-in:hover{background:color-mix(in srgb,var(--a) 18%,transparent);transform:translateY(-1px)} .person-in .icon{width:1.05rem;height:1.05rem} .person-role{ display:block;margin-top:.16rem;font-size:.88rem;color:var(--ink-2); } /* Nachweis- und Partnerzeichen. Sie stehen in einer Reihe und wachsen nicht ueber ihre natuerliche Groesse hinaus — ein aufgeblasenes Siegel wirkt wie ein Werbebanner. Auf schmalen Geraeten umbricht die Reihe und bleibt zentriert. */ /* Ohne Kasten und ohne Tonflaeche: Die Zeichen stehen frei auf der Seite. Zuvor lagen sie auf einem leicht eingefaerbten Feld, damit die Bitkom- Wortmarke mit ihren weissen Flaechen nicht verschwindet — das uebernimmt jetzt das eigene weisse Feld der Wortmarken weiter unten, und die Reihe wirkt nicht mehr wie ein aufgesetzter Werbeblock. */ .badges, /* Mit .prose davor, weil „.prose ul“ sonst seinen Aufzaehlungseinzug durchsetzt — die Zeichenreihe stand dadurch um 1,2rem eingerueckt. */ .prose .badges{ list-style:none;margin:clamp(1.8rem,3.4vw,2.6rem) 0 0;padding:0; display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start; gap:clamp(1.4rem,3vw,2.6rem); } .badges img{ display:block;width:auto;height:clamp(62px,6.4vw,82px); object-fit:contain; /* Die Zeichen kommen aus fremden Quellen und sind unterschiedlich hell. Etwas zurueckgenommen fuegen sie sich in die Seite, beim Ueberfahren stehen sie voll da. */ opacity:.86;transition:opacity .28s ease,transform .28s ease; } .badges li:hover img{opacity:1;transform:translateY(-2px)} /* Die beiden Partnerzeichen tragen einen weissen Grund fest im Bild. Solange die Reihe auf einer Tonflaeche lag, brauchten sie ein eigenes weisses Feld, damit dieser Grund nicht als Kasten darauf stand. Ohne Tonflaeche gehen sie nahtlos in die Seite ueber — Feld und Schatten sind entfallen. */ .badges li.badge--wort{display:flex;align-items:center} .badges li.badge--wort img{height:clamp(30px,3vw,38px);opacity:1} /* Kompakte Bildmarken brauchen mehr Hoehe als breite Wortmarken, sonst wirken sie neben ihnen klein: das Zeichen der Allianz fuer Cyber-Sicherheit ist 2.6:1, die Bitkom-Wortmarke 4.2:1. Gleiche Hoehe ergibt darum sehr ungleiche Flaeche. */ .badges li.badge--block img{height:clamp(46px,4.6vw,58px);opacity:1} .badges li.badge--acs img{height:clamp(58px,5.9vw,73px);opacity:1} /* Aufzaehlung mit Haken in der Bereichsfarbe. */ .ticks{list-style:none;margin:0;padding:0;display:grid;gap:.72rem} .ticks li{position:relative;padding-left:1.85rem;color:var(--ink-2)} .ticks li::before{ content:"";position:absolute;left:0;top:.44em;width:1.05rem;height:1.05rem;border-radius:50%; background:var(--tint); } .ticks li::after{ content:"";position:absolute;left:.33rem;top:.72em;width:.38rem;height:.2rem; border-left:2px solid var(--a);border-bottom:2px solid var(--a); transform:rotate(-45deg); } .split{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center} @media(min-width:900px){.split{grid-template-columns:1fr 1fr}} .split figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--inset)} .split figure img{width:100%;aspect-ratio:4/3;object-fit:cover} .stats{display:grid;gap:1.4rem;list-style:none;margin:0;padding:0} @media(min-width:640px){.stats{grid-template-columns:repeat(3,1fr)}} .stats li{list-style:none} /* Wert und Beschriftung stehen uebereinander — als inline-Elemente liefen sie sonst in eine Zeile („seit 2012Cybersecurity aus Muenchen“). */ .stat-v{display:block;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:600;letter-spacing:-.03em; line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent} .stat-l{display:block;margin-top:.3rem;color:var(--ink-3);font-size:.9rem;line-height:1.4} .dark .stat-l{color:#8B93AE} /* ------------------------------------------------------------- Brotkrumen */ .crumbs{display:flex;flex-wrap:wrap;gap:.42rem;font-size:.83rem;color:var(--ink-3); list-style:none;margin:0 0 1.4rem;padding:0} .crumbs a{text-decoration:none;color:var(--ink-3)} .crumbs a:hover{color:var(--a)} /* Trenner als Pfeil: er zeigt die Richtung des Weges an, waehrend ein Schraegstrich nur zwei Dinge nebeneinanderstellt. Etwas dunkler als die fruehere Linienfarbe, sonst verschwindet er neben dem Text. */ .crumbs li+li::before{content:"›";margin-right:.42rem;color:var(--ink-3);opacity:.55} .crumbs [aria-current]{color:var(--ink-2)} /* ---------------------------------------------------------------- Seiten */ /* Seitenkopf. Der schmale Farbstreifen oben ist die zweite Stelle, an der der Bereich erkennbar wird — durchgaengig auf allen Unterseiten. */ /* Seitenkopf. Der Farbstreifen oben nennt den Bereich, der Verlauf im Hintergrund bindet die Unterseite an die Startseite — dort traegt ihn die Ueberschrift der Buehne. */ .page-head{position:relative;overflow:hidden; padding-block:clamp(3.4rem,7vw,6rem) clamp(2.6rem,4.5vw,4rem); background:linear-gradient(180deg,var(--tint) 0%,#fff 78%); border-bottom:1px solid var(--line)} .page-head::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--a)} /* Weicher Farbschimmer rechts oben — fuellt die Flaeche neben der Ueberschrift, die sonst leer bliebe. */ .page-head::after{content:"";position:absolute;top:-45%;right:-12%;width:52rem;height:52rem; border-radius:50%;pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--a) 26%,transparent) 0%,transparent 62%)} .page-head .wrap{position:relative;z-index:1} .page-head h1{max-width:20ch} .page-head h1 .grad-text{display:inline} .page-head .lede{margin-top:1.4rem;max-width:58ch;font-size:clamp(1.1rem,1.6vw,1.3rem)} .prose{max-width:44rem} .prose h2{margin:2.6rem 0 .9rem;font-size:clamp(1.5rem,2.4vw,1.95rem)} .prose h3{margin:2rem 0 .7rem} .prose ul,.prose ol{color:var(--ink-2);padding-left:1.2rem} .prose li{margin-bottom:.45rem} .prose a{color:var(--a);text-underline-offset:3px} .prose>*:first-child{margin-top:0} /* -------------------------------------------------------------- Formulare */ .field{margin-bottom:1.15rem} .field label{display:block;font-weight:550;font-size:.9rem;margin-bottom:.4rem} .field input,.field textarea,.field select{ width:100%;padding:.78rem .9rem;border:1px solid var(--line);border-radius:10px; font:inherit;font-size:.95rem;background:#fff;color:var(--ink); } .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--a);box-shadow:0 0 0 3px var(--tint) } .field textarea{resize:vertical;min-height:8rem} .field-check{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2)} .field-check input{width:auto;margin-top:.2rem;flex:none} .field-msg{color:#C2381F;font-size:.85rem;margin:.35rem 0 0} .alert{padding:.95rem 1.15rem;border-radius:10px;margin-bottom:1.4rem;font-size:.94rem} .alert-ok{background:#E9F7F1;border:1px solid #A7DEC8;color:#04563F} .alert-err{background:#FDF0EC;border:1px solid #F0BFB2;color:#8C2412} /* Honigtopf. Muss unsichtbar bleiben, ohne display:none — manche Bots ueberspringen ausgeblendete Felder. */ .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* ----------------------------------------------------------------- Fuss */ .foot{background:var(--ink);color:#A8AEC6;padding-block:clamp(3.2rem,6vw,4.6rem) 2rem} .foot a{color:#D3D7E6;text-decoration:none} .foot a:hover{color:#fff} .foot-grid{display:grid;gap:2.6rem} @media(min-width:760px){.foot-grid{grid-template-columns:1.4fr repeat(3,1fr)}} .foot h2{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#fff; margin-bottom:1.1rem;font-weight:600} .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.92rem} .foot-claim{color:#fff;font-size:1.05rem;margin:1.2rem 0 0} .foot-legal{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center; margin-top:3.2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.11);font-size:.85rem} .foot-legal ul{display:flex;flex-wrap:wrap;gap:1.2rem;margin-left:auto} /* Die Rechtsliste schiebt sich per margin-left:auto nach rechts; die Symbole folgen ihr direkt, sonst entstuende zwischen beiden eine zweite Luecke. */ .foot-legal .foot-social{margin-left:0;gap:.7rem} .foot-social a{ display:grid;place-items:center;width:2.05rem;height:2.05rem;border-radius:50%; border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.72); transition:color .2s ease,border-color .2s ease,background .2s ease; } .foot-social a:hover,.foot-social a:focus-visible{ color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.07); } .foot-social .icon{width:1.05rem;height:1.05rem} /* --------------------------------------------------------- Bewegung */ /* Einblenden ueber scroll-gesteuerte Animation statt ueber ein Skript. Nichts ist per Vorgabe versteckt: wo der Browser animation-timeline nicht kennt, steht der Inhalt einfach da. */ @supports (animation-timeline:view()){ @media(prefers-reduced-motion:no-preference){ .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 8% cover 26%} /* Rechtstexte bleiben unbewegt. Die Animation bindet die Deckkraft an die Scrollposition — auf einer langen Datenschutzerklaerung stand der Text am oberen Rand dauerhaft halb sichtbar da und wurde erst beim Weiterscrollen lesbar. Was man lesen koennen muss, darf nicht erst erscheinen. */ [data-section="legal"] .rise{animation:none} } } @keyframes rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}} @media print{.top,.foot,.btn-row{display:none}} /* ------------------------------------------------------------- Abschluss */ /* Der Eyebrow trug hier zuvor ein flaechiges Cyan. Auf dem dunklen Grund wirkte das als eigene Farbe neben der Marke; jetzt laeuft der Strich im Markenverlauf, wie Wortmarke, Icon und Kennzahlen. */ .cta .eyebrow::before{background:var(--grad)} .cta-in{display:grid;gap:2.6rem} @media(min-width:900px){.cta-in{grid-template-columns:1.25fr .75fr;align-items:center}} /* Knoepfe und Notfallnummer stehen rechtsbuendig unter sich. */ .cta-act{display:flex;flex-direction:column;align-items:flex-end;gap:.85rem;text-align:right} @media(max-width:899px){.cta-act{align-items:flex-start;text-align:left}} .cta-ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff; transition:transform .16s,box-shadow .18s,border-color .18s} .cta-ghost:hover{ border-color:transparent; background:linear-gradient(var(--ink),var(--ink)) padding-box, var(--grad) border-box; transform:translateY(-1px); box-shadow:0 12px 28px -14px rgba(34,211,238,.75); } .cta-phone{margin:.8rem 0 0;font-size:.95rem} .cta-phone a{color:#fff;font-weight:600;text-decoration:none;font-size:1.08rem} /* ----------------------------------------------------------------- Buehne */ .hero{padding:0;border-bottom:1px solid var(--line)} .hero-in{display:grid;gap:0;align-items:stretch;padding-inline:0;max-width:none} .hero-copy{padding:clamp(2.8rem,5vw,4.6rem) var(--gutter);align-self:center; max-width:calc(var(--wrap) * .56);margin-left:auto;width:100%} @media(max-width:999px){.hero-copy{max-width:var(--wrap);margin-inline:auto}} /* Das Bild traegt die Buehne, soll sie aber nicht besetzen: knapp 40 Prozent der Breite statt der Haelfte, und eine Hoehe, die mit dem Kopfbereich noch auf einen Bildschirm passt. Der Textblock haengt am Seitenraster statt an der Spaltenbreite — dadurch fluchtet die Ueberschrift mit dem Inhalt darunter, und ihre Zeilenlaenge bleibt gleich, wenn sich das Verhaeltnis der Spalten aendert. Waere sie an die Spalte gebunden, wanderte der Text bei jeder Aenderung nach rechts. */ @media(min-width:1000px){ .hero-in{grid-template-columns:1.2fr .8fr} .hero-copy{margin-left:0;margin-right:auto; padding-left:max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding-right:clamp(1.5rem,4vw,3.5rem); max-width:calc(max(var(--gutter), (100vw - var(--wrap)) / 2) + 38.5rem)} } .hero-shot{margin:0;overflow:hidden;background:var(--ink);min-height:26rem} .hero-shot img{width:100%;height:100%;object-fit:cover} @media(max-width:999px){.hero-shot{min-height:20rem}} /* ------------------------------------------------------- Bereichskacheln */ /* Der Farbbalken links ist der Anker der Farbcodierung: er nennt den Bereich, bevor die Ueberschrift gelesen wird, und kehrt auf jeder Unterseite als Streifen im Seitenkopf wieder. */ .areas{gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .area{ position:relative;display:block;padding:2.1rem 1.7rem 1.9rem;text-decoration:none; border-right:1px solid var(--line);background:#fff;transition:background .2s; } .area:last-child{border-right:0} @media(max-width:999px){ .area{border-right:0;border-bottom:1px solid var(--line)} .area:last-child{border-bottom:0} } .area::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--sec)} .area:hover{background:var(--inset)} .area-num{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em; color:var(--sec);margin-bottom:1rem} .area h3{margin-bottom:.6rem} .area p{color:var(--ink-2);font-size:.93rem} .area ul{list-style:none;margin:1.2rem 0 0;padding:1.1rem 0 0; border-top:1px solid var(--line);display:grid;gap:.42rem;font-size:.86rem;color:var(--ink-3)} .area ul li::before{content:"";display:inline-block;width:.3rem;height:.3rem;border-radius:50%; background:var(--sec);margin-right:.55rem;vertical-align:middle} .pack-list{font-size:1.02rem} .pack-list a{text-decoration:none;font-weight:550} .pack-list a:hover{color:var(--a)} /* --------------------------------------------------------- Formularseiten */ .form-layout{display:grid;gap:clamp(2rem,4vw,3.6rem)} @media(min-width:900px){.form-layout{grid-template-columns:.8fr 1.2fr}} .form-aside{align-self:start;padding:1.9rem 1.7rem;background:var(--inset); border-radius:var(--r);border:1px solid var(--line)} .h-aside{font-size:1.15rem;margin-bottom:.7rem} .aside-tel{font-weight:600;font-size:1.1rem;text-decoration:none;color:var(--a)} .aside-adr{font-style:normal;margin-top:1.8rem;padding-top:1.4rem; border-top:1px solid var(--line);font-size:.9rem;color:var(--ink-3)} /* Notfall: eigener Ton, weil hier Minuten zaehlen. */ .urgent{background:var(--ink);color:#fff;margin:-1.9rem -1.7rem 1.6rem; padding:1.9rem 1.7rem;border-radius:var(--r) var(--r) 0 0} .urgent h2{font-size:1.2rem;margin-bottom:.5rem} .urgent p{color:#A8AEC6;font-size:.93rem} .urgent-tel{display:inline-block;margin-top:.5rem;font-size:1.35rem;font-weight:600; color:#fff;text-decoration:none;letter-spacing:-.02em} .post-card time{display:block} /* ------------------------------------------------ Mehrstufiges Formular */ .field-row{display:grid;gap:0 1rem} @media(min-width:620px){.field-row{grid-template-columns:1fr 1fr}} .hint{margin:.4rem 0 0;font-size:.83rem;color:var(--ink-3);line-height:1.5} .wiz-step{border:0;margin:0 0 1.6rem;padding:0;min-width:0} .wiz-step legend{display:flex;align-items:baseline;gap:.7rem;padding:0;margin-bottom:1.4rem; font-size:1.2rem;font-weight:600;letter-spacing:-.02em} .wiz-n{font-size:.78rem;font-weight:700;letter-spacing:.13em;color:var(--a)} /* Fortschritt. Liegt im Markup mit `hidden` vor und wird erst vom Skript eingeblendet — ohne Skript gibt es keine Schritte, die er zaehlen koennte. */ .wiz-bar{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 2.2rem;padding:0; counter-reset:none} .wiz-bar li{display:flex;align-items:center;gap:.55rem;flex:1 1 8rem; padding:.6rem .8rem;border-radius:10px;background:var(--inset); font-size:.82rem;font-weight:550;color:var(--ink-3); border:1px solid transparent;transition:background .18s,color .18s,border-color .18s} .wiz-bar li span{display:grid;place-items:center;width:1.45rem;height:1.45rem;flex:none; border-radius:50%;background:#fff;border:1px solid var(--line); font-size:.75rem;font-weight:700;color:var(--ink-3)} .wiz-bar .is-done{color:var(--ink-2)} .wiz-bar .is-done span{background:var(--a);border-color:var(--a);color:#fff} .wiz-bar .is-at{background:var(--tint);border-color:var(--a);color:var(--ink)} .wiz-bar .is-at span{background:var(--a);border-color:var(--a);color:#fff} .wiz-nav{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center; margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)} .wiz-back:disabled{opacity:.4;cursor:not-allowed} .wiz-nav .wiz-send{margin-left:auto} /* Dateifelder: der Systemknopf sieht in jedem Browser anders aus, deshalb bekommt das ganze Feld einen Rahmen, damit es als Ablagefeld liest. */ .file-field input[type=file]{ width:100%;padding:.9rem;border:1px dashed var(--line);border-radius:10px; background:var(--inset);font:inherit;font-size:.9rem;cursor:pointer} .file-field input[type=file]:hover{border-color:var(--a);background:var(--tint)} .file-field input[type=file]::file-selector-button{ margin-right:.9rem;padding:.45rem .9rem;border:0;border-radius:8px; background:var(--ink);color:#fff;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer} .steps-list{margin:0;padding-left:1.15rem;display:grid;gap:.6rem; font-size:.9rem;color:var(--ink-2)} .steps-list li::marker{color:var(--a);font-weight:700} /* Ohne Skript stehen alle Schritte untereinander; die Trennlinie macht die Gliederung dann trotzdem sichtbar. */ .wizard .wiz-step + .wiz-step{padding-top:1.6rem;border-top:1px solid var(--line)} .wizard .wiz-step[hidden] + .wiz-step, .wizard .wiz-step:not([hidden]):first-of-type{border-top:0;padding-top:0} .wiz-next{order:2} /* ============================================================= Startseite */ /* ------------------------------------------------------ Produkte der Suite */ /* Produktfarben. Getrennt von den Bereichsfarben der Services, weil Produkte und Dienstleistungen zwei verschiedene Achsen sind — der Leser soll sie nicht verwechseln. Der Magentabereich (290–350°) bleibt frei, dort liegt ein eingetragener Farbmarkenschutz. */ :root{ /* Produktfarben der Suite. Eine Familie statt vier Signalfarben: alle vier liegen zwischen 222° und 297°, also im Blau-Violett-Feld. Sie unterscheiden sich ueber Helligkeit und Saettigung, nicht ueber den Farbton. Hinweis zu Talion (#DD68E3, 297°): das ist 32° von Telemagenta (RAL 4010, 329°) entfernt und damit der knappste Wert der Palette. --p-* die Farbe selbst, fuer Flaechen und Verlaeufe --pi-* abgedunkelt fuer Text auf Weiss, alle ueber 4.5:1 */ --p-sightadel:#E0AFFF; --g-sightadel:linear-gradient(105deg,#C77BFF 0%,#E0AFFF 100%); --p-strider:#C4D6FF; --g-strider:linear-gradient(105deg,#8FB4FF 0%,#C4D6FF 100%); --p-talion:#DD68E3; --g-talion:linear-gradient(105deg,#B93FC0 0%,#DD68E3 100%); --p-valar:#8866DE; --g-valar:linear-gradient(105deg,#6647C4 0%,#8866DE 100%); --pi-sightadel:#A839EF; --pi-strider:#2F6AEE; --pi-talion:#C225CA; --pi-valar:#7050D0; } .prod--sightadel{--pc:var(--p-sightadel);--pg:var(--g-sightadel);--pi:var(--pi-sightadel)} .prod--strider {--pc:var(--p-strider); --pg:var(--g-strider); --pi:var(--pi-strider)} .prod--talion {--pc:var(--p-talion); --pg:var(--g-talion); --pi:var(--pi-talion)} .prod--valar {--pc:var(--p-valar); --pg:var(--g-valar); --pi:var(--pi-valar)} .prods{gap:1.1rem} .prod{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s} .prod:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#CFD4E4} /* Der Verweis sitzt auf dem Produktnamen und wird ueber die ganze Kachel gezogen: die Maus trifft ueberall, Tastatur und Vorlesesoftware bekommen trotzdem nur einen Eintrag mit dem Produktnamen als Beschriftung. Die Kachel hob sich vorher beim Ueberfahren an, ohne irgendwohin zu fuehren. */ .prod-link{color:inherit;text-decoration:none} .prod-link::after{content:"";position:absolute;inset:0} .prod:hover .prod-link{color:var(--pi)} .prod:has(.prod-link:focus-visible){outline:2px solid var(--pi);outline-offset:3px} .prod-link:focus-visible{outline:none} .prod-shot{margin:0;position:relative;background:var(--ink)} .prod-shot img{width:100%;aspect-ratio:4/3;object-fit:cover} .prod-shot::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--pg)} .prod-body{padding:1.5rem 1.4rem 1.7rem;display:flex;flex-direction:column;flex:1} .prod-body h3{font-size:1.35rem;letter-spacing:-.025em} .prod-claim{margin:.5rem 0 0;font-weight:600;font-size:.95rem;color:var(--pc);line-height:1.4} .prod-sub{margin:.9rem 0 0;font-size:.88rem;font-weight:550;color:var(--ink)} .prod-text{margin:.6rem 0 0;font-size:.9rem;color:var(--ink-2)} /* margin-top:auto schiebt die Tags an den unteren Rand der Kachel. Ohne das sitzen sie direkt unter dem Text und stehen bei vier Kacheln mit unterschiedlich langer Beschreibung auf vier verschiedenen Hoehen. */ .tags{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none; margin:1.2rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--line)} .prod-body .tags,.ch-copy .tags{margin-top:auto} .tags li{padding:.24rem .62rem;border-radius:999px;background:var(--inset); font-size:.75rem;font-weight:600;color:var(--ink-2)} /* In den Produktkacheln tragen die Tags die Produktfarbe — nur Rahmen und Schrift, damit sie neben dem farbigen Balken am Bild nicht laut werden. */ .prod .tags li,.prod-sec .tags li{ background:transparent;border:1px solid color-mix(in srgb,var(--pi) 38%,transparent); color:var(--pi)} /* ------------------------------- Absatz mit Produktnamen als Farbpillen */ .say-grid{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center} @media(min-width:920px){.say-grid{grid-template-columns:1.35fr .65fr}} .say{margin:0;font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.5;font-weight:500; letter-spacing:-.018em;color:var(--ink)} /* Die Pillen sind Verweise auf das jeweilige Produkt. Sie tragen ihre Farbe schon als Flaeche, darum genuegt beim Ueberfahren ein leichtes Anheben statt einer weiteren Farbe. */ .pill{display:inline-block;padding:.05em .55em;border-radius:.5em;color:#fff;font-weight:600; white-space:nowrap;text-decoration:none; transition:filter .18s,box-shadow .18s} a.pill:hover{filter:brightness(.93);box-shadow:0 2px 10px rgb(17 20 33 / .18)} a.pill:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* Dunkle Schrift auf den Pillen: weisser Text erreicht auf diesen hellen Toenen nur 1.8–2.9:1 und waere nicht lesbar. */ .pill--sightadel{background:var(--g-sightadel);color:#4A1069} .pill--strider {background:var(--g-strider); color:#12336E} .pill--talion {background:var(--g-talion); color:#FFFFFF} .pill--valar {background:var(--g-valar); color:#FFFFFF} .key{list-style:none;margin:0;padding:0;display:grid;gap:.75rem} .key li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.2rem .75rem;align-items:baseline; padding-left:1rem;border-left:3px solid var(--pc);transition:border-width .18s} .key li b{font-size:.98rem} /* Wie bei den Kacheln: der Verweis liegt auf dem Namen und deckt die Zeile ab. Der Farbbalken links verbreitert sich beim Ueberfahren — er gehoert ohnehin zum Produkt und wird so zur Rueckmeldung. */ .key-link{color:inherit;text-decoration:none} .key-link::after{content:"";position:absolute;inset:0 0 0 -3px} .key li:hover{border-left-width:6px} .key li:hover .key-link{color:var(--pc)} .key li:has(.key-link:focus-visible){outline:2px solid var(--pc);outline-offset:3px} .key-link:focus-visible{outline:none} .key li span{grid-column:2;font-size:.86rem;color:var(--ink-3)} .key--sightadel{--pc:var(--p-sightadel)} .key--strider {--pc:var(--p-strider)} .key--talion {--pc:var(--p-talion)} .key--valar {--pc:var(--p-valar)} /* ------------------------------------------------- Servicequadranten */ /* Auf dunklem Grund; beim Ueberfahren nimmt der Quadrant seine Bereichsfarbe als Verlauf an. Der dritte Farbwert (--deep) sorgt dafuer, dass weisser Text auch am hellen Ende des Verlaufs noch ausreichend Kontrast hat. */ .svcs{gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12); border-radius:var(--r);overflow:hidden} .svc{position:relative;display:block;padding:2.2rem 1.9rem 2.6rem;text-decoration:none; background:var(--ink);color:#fff;transition:background .28s ease} .svc--offensive {--sa:var(--cl-offensive); --sd:#5C0F61} .svc--defensive {--sa:var(--cl-defensive); --sd:#33246B} .svc--forensics {--sa:var(--cl-forensics); --sd:#4F1673} .svc--subs {--sa:var(--cl-subs); --sd:#123B8C} .svc:hover{background:linear-gradient(135deg,var(--sd) 0%,var(--sa) 160%)} .svc h3{font-size:1.4rem;letter-spacing:-.025em} .svc-claim{margin:.55rem 0 0;font-size:.98rem;font-weight:550;color:var(--sa);transition:color .28s} .svc:hover .svc-claim{color:#fff} .svc-rows{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:.55rem} .svc-rows li{position:relative;padding-left:1.3rem;font-size:.93rem;color:#B6BCD2;transition:color .28s} .svc-rows li::before{content:"";position:absolute;left:0;top:.58em;width:.4rem;height:.4rem; border-radius:50%;background:var(--sa);transition:background .28s} .svc:hover .svc-rows li{color:rgba(255,255,255,.92)} .svc:hover .svc-rows li::before{background:#fff} .svc-go{position:absolute;right:1.7rem;bottom:1.9rem;display:grid;place-items:center; width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid rgba(255,255,255,.25); color:#fff;transition:transform .24s,background .24s,border-color .24s} .svc:hover .svc-go{background:rgba(255,255,255,.16);border-color:transparent;transform:translateX(4px)} /* ------------------------------------------------------------- Schlusszitat */ /* Weisser Grund, die betonten Woerter tragen den Markenverlauf. */ /* Zitat links, Beisatz rechts daneben auf gleicher Grundlinie — so stand es im abgestimmten Entwurf. Untereinander verliert der Beisatz seine Wirkung als Antwort auf das Zitat. */ .pull{padding-block:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .pull .wrap{padding-block:clamp(4.5rem,9vw,8rem);display:grid;gap:2.6rem} @media(min-width:1000px){ .pull .wrap{grid-template-columns:1.55fr .45fr;align-items:end;gap:4rem} } .quote{max-width:20ch;margin:0;font-size:clamp(2.1rem,4.6vw,4rem);font-weight:600; line-height:1.14;letter-spacing:-.03em} .quote em{font-style:normal;background:var(--grad);-webkit-background-clip:text; background-clip:text;color:transparent} /* Der Akzentstrich sitzt rechts, weil der Text rechtsbuendig steht — links waere er von seinem Text abgeschnitten. */ .quote-by{margin:0;padding-right:1.6rem;text-align:right;font-size:1.05rem;color:var(--ink-3); border-right:3px solid transparent; border-image:linear-gradient(180deg,#5B4BE0,#22D3EE) 1} .quote-by b{display:block;color:var(--ink);font-weight:600;font-size:1.25rem;margin-bottom:.35rem} @media(max-width:999px){ .quote-by{text-align:left;padding-right:0;padding-left:1.6rem; border-right:0;border-left:3px solid transparent; border-image:linear-gradient(180deg,#5B4BE0,#22D3EE) 1} } /* Icon im Fuss statt der Wortmarke — der Markenname steht direkt darunter im Claim und stuende sonst zweimal. */ .foot-icon{width:46px;height:46px} /* --------------------------------------------------------- Objektschutz */ /* Vollbreites Bildband. Der einzige Abschnitt der Startseite, der von einem Bild getragen wird — dadurch hebt er sich vom Spaltenraster der uebrigen Bloecke ab, statt wie ein weiteres Kapitel zu wirken. */ .obj{position:relative;padding:0;overflow:hidden;background:var(--ink);isolation:isolate} .obj-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:28% 50%;z-index:0} /* Doppelter Schleier: einer von rechts, damit der Text steht, einer von unten, damit die Kante zum naechsten Abschnitt nicht hart abreisst. Ohne den ersten laege weisse Schrift bei 66/255 Grundhelligkeit auf Kante. */ .obj::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(265deg,rgba(6,8,14,.94) 0%,rgba(6,8,14,.86) 30%, rgba(6,8,14,.42) 58%,rgba(6,8,14,.12) 100%)} .obj-in{position:relative;z-index:2;display:grid; padding-block:clamp(4.5rem,10vw,9rem);justify-items:end} .obj-copy{max-width:34rem;color:#fff;text-align:right} @media(max-width:899px){ .obj-in{justify-items:start} .obj-copy{text-align:left;max-width:none} .obj::before{background:linear-gradient(180deg,rgba(6,8,14,.62) 0%,rgba(6,8,14,.93) 62%)} .obj-bg{object-position:36% 40%} } .obj .eyebrow{color:#fff;justify-content:flex-end} @media(max-width:899px){.obj .eyebrow{justify-content:flex-start}} .obj .eyebrow::before{background:var(--grad)} .obj h2{max-width:18ch;margin-left:auto} @media(max-width:899px){.obj h2{margin-left:0}} .obj .lede{margin-top:1.2rem;color:#C3C9DD;max-width:44ch;margin-left:auto} @media(max-width:899px){.obj .lede{margin-left:0}} /* Die beiden Weiterfuehrungen als Zeilen mit Trennlinie statt als Knoepfe — Knoepfe gaebe es auf der Seite schon dreimal. */ .obj-links{margin-top:2.4rem;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.2)} .obj-link{display:flex;align-items:center;justify-content:flex-end;gap:1rem; padding:1rem 0;text-decoration:none;color:#fff;font-weight:600;font-size:1.05rem; border-bottom:1px solid rgba(255,255,255,.2);transition:gap .2s,color .2s} .obj-link svg{flex:none;transition:transform .2s} .obj-link:hover{color:var(--cyan)} .obj-link:hover svg{transform:translateX(4px)} @media(max-width:899px){.obj-link{justify-content:space-between}} /* ========================================================== Kapitel ==== */ /* Jeder Abschnitt einer Unterseite bekommt ein Layout, das zur Form seines Inhalts passt. Kein Abschnitt nutzt nur die halbe Breite: entweder traegt die zweite Spalte etwas, oder der Abschnitt laeuft ueber die volle Breite. */ .ch{padding-block:clamp(3.4rem,6.5vw,6rem)} .ch + .ch.inset,.ch.inset + .ch{border-top:1px solid var(--line)} /* Laufende Nummer. Der Verlauf ist der Faden, der die Unterseiten mit der Startseite verbindet — dort tragen ihn Wortmarke, Kennzahlen und Zitat. */ .ch-n{display:block;margin-bottom:1rem;font-size:.82rem;font-weight:700; letter-spacing:.16em;background:var(--grad); -webkit-background-clip:text;background-clip:text;color:transparent} .ch-head{max-width:54rem;margin-bottom:clamp(2rem,3.6vw,3rem)} /* Ueberschrift stehend links, Inhalt rechts daneben. Genau hier stand vorher eine schmale Textspalte mit leerer Flaeche daneben. */ .ch-aside{display:grid;gap:2.2rem} @media(min-width:940px){ .ch-aside{grid-template-columns:minmax(15rem,.85fr) 1.15fr;gap:clamp(2.5rem,5vw,5rem)} .ch-stick{position:sticky;top:7rem;align-self:start} } .ch-stick h2{font-size:clamp(1.6rem,2.6vw,2.2rem)} .prose--sm{font-size:.95rem} .prose--sm p{color:var(--ink-2)} /* Bild und Text */ .ch-split{display:grid;gap:clamp(2rem,4vw,3.6rem);align-items:center} @media(min-width:940px){.ch-split{grid-template-columns:1fr 1fr}} @media(min-width:940px){ .ch-split--flip .ch-copy{order:2} .ch-split--flip .ch-shot{order:1} } .ch-shot{margin:0;border-radius:var(--r);overflow:hidden;background:var(--inset); position:relative} .ch-shot img{width:100%;aspect-ratio:4/3;object-fit:cover} /* Verlaufskante am unteren Bildrand, wie bei den Produktkacheln. */ .ch-shot::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--grad)} /* Kachelraster aus Aufzaehlungen */ .tiles{gap:1rem} .tile{position:relative;padding:1.6rem 1.4rem;background:#fff;border:1px solid var(--line); border-radius:var(--r);transition:border-color .18s,box-shadow .18s,transform .18s} .inset .tile{background:#fff} .tile:hover{border-color:#CFD4E4;box-shadow:var(--shadow);transform:translateY(-2px)} .tile-n{display:block;margin-bottom:.8rem;font-size:.72rem;font-weight:700;letter-spacing:.14em; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .tile h3{font-size:1.05rem;margin-bottom:.45rem} .tile p{margin:0;font-size:.92rem;color:var(--ink-2)} .tile-solo{font-size:.98rem;color:var(--ink)} /* Ablauf mit grossen Ziffern */ /* Zwischen Kapitelueberschrift und Text gehoert Luft. Die globale Regel setzt h2 auf margin:0, was in Kartenkoepfen richtig ist — im Fliesstext klebte der erste Absatz danach unmittelbar an der Ueberschrift. */ .ch-copy > h2 + .prose, .ch-copy > .prose, .ch-head + .prose{margin-top:1.1rem} .ch-copy h2{margin-bottom:1.1rem} /* Auch der Kapitelkopf braucht Luft nach unten: gemessen standen Kachelreihen und Listen mit 0 Pixeln Abstand unter ihrer Ueberschrift. Die Einleitung steht im Kapitelkopf, nicht darunter — eine Regel „.ch-head > h2 { margin-bottom:0 }“ hat den Abstand darum vorher aktiv beseitigt statt ihn nur nicht zu setzen. */ .ch-head{margin-bottom:1.6rem} .ch-head > h2 + .prose, .ch-head > h2 + p{margin-top:1.2rem} .ch-head > h2:last-child{margin-bottom:0} /* Der stehende Kapitelkopf (ch-stick) hatte dasselbe Problem, dazu klebten die Absaetze darin aneinander. */ .ch-stick > h2 + .prose{margin-top:1.3rem} .ch-stick .prose > * + *{margin-top:1.1em} .ch-stick .prose h3{margin-top:1.8em} /* Jedes zweite Kachelkapitel ohne Karten — nur Ziffer, Titel, Text in Spalten. So unterscheiden sich aufeinanderfolgende Kapitel sichtbar, ohne dass der Inhalt anders sein muesste. */ .tiles--flat > *{background:none;border:0;border-radius:0;padding:0 1.4rem 0 0; border-left:2px solid color-mix(in srgb,var(--a) 30%,var(--line));padding-left:1.1rem} .tiles--flat > *::before{display:none} .tiles--flat .tile-n{font-size:.8rem;letter-spacing:.06em;color:var(--a); background:none;-webkit-text-fill-color:currentColor} .tiles--flat h3,.tiles--flat h4{margin-top:.35rem} .steps{list-style:none;margin:0;padding:0;counter-reset:none} .steps li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem; padding:1.3rem 0;border-top:1px solid var(--line)} .steps li:first-child{border-top:0;padding-top:0} /* Die Zahl traegt die Bereichsfarbe, nicht den blauen Markenverlauf: auf einer Seite der Offensive Services standen die Ziffern blau neben magentafarbenen Ueberschriften. --a wird von [data-section] am body gesetzt. */ .step-n{font-size:1.5rem;font-weight:700;line-height:1;letter-spacing:-.03em; color:var(--a)} .steps h3{font-size:1.05rem;margin-bottom:.35rem} .steps p{margin:0;font-size:.94rem;color:var(--ink-2)} /* Zwei Spalten fuer lange Listen. Zwoelf Punkte einspaltig sind eine Wand; nebeneinander bleibt die Reihenfolge lesbar und der Abschnitt endlich. */ .steps--grid{display:grid;gap:0 clamp(1.6rem,3vw,2.8rem)} @media(min-width:860px){ .steps--grid{grid-template-columns:1fr 1fr} /* Die obere Linie gehoert an den Anfang jeder Spalte, nicht nur an das erste Feld — sonst haengt die zweite Spalte oben in der Luft. */ .steps--grid li:nth-child(2){border-top:0;padding-top:0} } /* Getoente Zeilen fuer jede zweite kurze Liste. Die Ziffern nehmen nacheinander die Stuetzstellen des Markenverlaufs auf; --ton setzt das Markup je Zeile. */ .steps--hue li{ border-top:0;padding:1rem 1.15rem;border-radius:.9rem;align-items:start; background:color-mix(in srgb,var(--ton,var(--a)) 6%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ton,var(--a)) 14%,transparent); } .steps--hue{display:grid;gap:.7rem} .steps--hue li:first-child{padding-top:1rem} .steps--hue .step-n{color:var(--ton,var(--a))} /* Zweispaltige Unterabschnitte */ /* Flexverbund statt Raster: ein Raster haelt seine Spalten stur ein, und bei zehn Kacheln in drei Spalten stand in der letzten Reihe eine einzelne und rechts daneben blieben 749 Pixel leer. Im Verbund teilen sich die Kacheln der letzten Reihe die Restbreite. Gilt fuer alle Kachelreihen der Seiten, nicht nur hier — dieselbe Falle steckte schon in der Stellenliste. */ .duo,.grid.tiles,.grid:has(>.card),.grid:has(>.prod-case){display:flex;flex-wrap:wrap;gap:1.2rem} .duo>*,.grid.tiles>*,.grid:has(>.card)>*,.grid:has(>.prod-case)>*{ flex:1 1 17rem;min-width:min(17rem,100%)} /* Der Flexverbund ignorierte die angegebene Spaltenzahl. Bei vier Kacheln passten drei in die Reihe und die vierte lief ueber die volle Breite — auf der vCISO-Seite stand die Zielgruppe deshalb als 3 + 1. Die Regel greift nur bei genau vier Kacheln. Erst dort entsteht die einzelne Zeile; bei einer oder zwei ist der Verbund von sich aus richtig, und eine halbbreite Einzelkachel wuerde rechts Flaeche frei lassen. */ @media(min-width:700px){ .grid.tiles:has(>:nth-child(4)):not(:has(>:nth-child(5)))>*{ flex:1 1 calc(50% - .6rem);max-width:calc(50% - .6rem)} } /* Die Leistungskacheln auf den Bereichsseiten. Vorher schlichte Textkaesten ohne Rahmen und ohne Farbe — an der Stelle, an der sich der Besucher fuer eine Leistung entscheidet. Jetzt mit Kennziffer in der Bereichsfarbe, einer Haarlinie im Verlauf und, wo es die Seite gibt, einem Verweis darauf. */ .duo-cell{position:relative;overflow:hidden;padding:1.5rem 1.5rem 1.4rem; background:#fff;border:1px solid var(--line);border-radius:var(--r); transition:transform .2s,box-shadow .2s,border-color .2s} .duo-cell::before{content:"";position:absolute;inset:0 0 auto;height:3px; background:var(--sec,var(--a));opacity:.8} .duo-n{position:absolute;top:.5rem;right:1rem;font-size:2.6rem;font-weight:700; line-height:1;letter-spacing:-.04em;color:var(--sec,var(--a));opacity:.14} .duo-cell--link:hover{transform:translateY(-3px);box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--sec,var(--a)) 40%,var(--line))} .duo-link{color:inherit;text-decoration:none} .duo-link::after{content:"";position:absolute;inset:0} .duo-cell--link:hover .duo-link{color:var(--sec,var(--a))} .duo-cell:has(.duo-link:focus-visible){outline:2px solid var(--sec,var(--a));outline-offset:3px} .duo-link:focus-visible{outline:none} .duo-go{display:inline-flex;margin-top:.9rem;color:var(--sec,var(--a))} .duo-go svg{width:18px;height:18px;transition:transform .2s} .duo-cell--link:hover .duo-go svg{transform:translateX(4px)} /* Keine Trennlinie mehr unter der Ueberschrift: der Farbbalken am oberen Rand der Kachel uebernimmt diese Aufgabe, zwei Linien waeren eine zu viel. Der rechte Innenabstand haelt die Kennziffer frei. */ .duo-cell h3{font-size:1.1rem;margin-bottom:.6rem;padding-right:2.8rem} /* Zwischenruf ueber die volle Breite */ .ch--say{padding-block:clamp(3rem,5.5vw,5rem)} .say-big{max-width:26ch;margin:0;font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:600; line-height:1.2;letter-spacing:-.025em; padding-left:clamp(1.2rem,2.4vw,2rem); border-left:4px solid transparent; border-image:linear-gradient(180deg,#5B4BE0,#2E7BF0,#22D3EE) 1} /* FAQ als
— klappt ohne Skript auf. */ .faq details{border-bottom:1px solid var(--line)} .faq details:first-child{border-top:1px solid var(--line)} .faq summary{display:flex;align-items:flex-start;gap:1rem;padding:1.15rem 0;cursor:pointer; font-weight:600;font-size:1.02rem;list-style:none;transition:color .16s} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";flex:none;width:.7rem;height:.7rem;margin-left:auto;margin-top:.42rem; border-right:2px solid var(--a);border-bottom:2px solid var(--a); transform:rotate(45deg);transition:transform .22s} .faq details[open] summary::after{transform:rotate(-135deg)} .faq summary:hover{color:var(--a)} .faq details p{margin:0 0 1.25rem;max-width:62ch;color:var(--ink-2);font-size:.95rem} /* ------------------------------------------------------ Produktuebersicht */ /* Je Produkt: Bild und Text nebeneinander, darunter die vier Kernpunkte als Kachelreihe. Der Farbbalken am Bild traegt die Produktfarbe statt des Markenverlaufs — hier ist das Produkt die Ordnung, nicht der Bereich. */ .prod-sec[data-prod="sightadel"]{--pc:var(--p-sightadel);--pg:var(--g-sightadel);--pi:var(--pi-sightadel)} .prod-sec[data-prod="strider"] {--pc:var(--p-strider); --pg:var(--g-strider); --pi:var(--pi-strider)} .prod-sec[data-prod="talion"] {--pc:var(--p-talion); --pg:var(--g-talion); --pi:var(--pi-talion)} .prod-sec[data-prod="valar"] {--pc:var(--p-valar); --pg:var(--g-valar); --pi:var(--pi-valar)} .prod-sec .ch-shot::after{background:var(--pg)} .prod-sec .ch-n{background:var(--pg);-webkit-background-clip:text;background-clip:text} .prod-sec .tile-n{background:var(--pg);-webkit-background-clip:text;background-clip:text} .prod-sec h2{font-size:clamp(1.9rem,3.2vw,2.6rem)} .prod-sec .btn--grad{background-image:var(--pg);background-size:100% 100%} .prod-sec .btn--grad:hover{background-size:140% 100%;background-position:50% 0} .gains-h{margin:clamp(2.4rem,4vw,3.4rem) 0 1.4rem;font-size:.78rem;font-weight:700; letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)} .tile h4{font-size:1rem;margin:0 0 .45rem} /* Bewerbungs-Baustein am Fuss der Karriereseite. */ .apply-band{display:grid;gap:1.8rem;align-items:center} @media(min-width:860px){.apply-band{grid-template-columns:1fr auto;gap:3rem}} .apply-band h2{font-size:clamp(1.5rem,2.6vw,2.1rem);max-width:22ch} /* Beitragskachel — als ganzer Block anklickbar. */ .post-card{display:flex;flex-direction:column;text-decoration:none} .post-card time{display:block} .post-card h2,.post-card h3{margin-bottom:.5rem} .post-card .arrow{margin-top:auto;padding-top:1.1rem} /* Umrissknopf mit Verlauf in Rahmen und Schrift. Zwei Hintergrundebenen: die erste fuellt nur die Innenflaeche (padding-box), die zweite liegt darunter bis zur Aussenkante (border-box) und wird dort sichtbar, wo der transparente Rand sitzt. Die Schrift traegt den Verlauf ueber ein eigenes
— 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} /* Das Band der Querschnittsleistung unter den vier Bereichen. Es sieht bewusst anders aus als eine .hub-row: gerahmt statt in der Reihe, mit Tonflaeche und ohne laufende Nummer. Wer die vier Zeilen gelesen hat, soll hier merken, dass etwas Eigenes folgt und nicht die fuenfte Zeile. */ .hub-quer{position:relative;display:grid;gap:1.2rem 2rem;align-items:start; margin-top:1.8rem;padding:1.6rem 1.5rem;border:1px solid var(--line); border-left:4px solid var(--sec);border-radius:16px;background:#fff} /* Ab 940px drei Spalten in der ersten Zeile — Symbol, Text, Knopf — und die Formatliste darunter ueber Text- und Knopfspalte hinweg. So endet die Zeile am rechten Rand statt in einer leeren Flaeche neben dem Knopf. */ @media(min-width:940px){ .hub-quer{grid-template-columns:auto 1fr auto;gap:.9rem 2rem} .hub-quer-ic{grid-column:1;grid-row:1;align-self:start;margin-top:.2rem} .hub-quer-txt{grid-column:2;grid-row:1} .hub-quer-cta{grid-column:3;grid-row:1;align-self:center} .hub-quer .hub-chips{grid-column:2/-1;grid-row:2} } .hub-quer-ic{display:grid;place-items:center;width:3.2rem;height:3.2rem;flex:none; border-radius:16px;background:var(--inset);color:var(--sec); transition:background .22s,transform .22s} .hub-quer-ic svg{width:1.6rem;height:1.6rem} .hub-quer:hover .hub-quer-ic{background:var(--secl,var(--sec));transform:scale(1.06)} /* min-width:0, damit lange Formatnamen die mittlere Spalte nicht aufblaehen und den Knopf aus dem Rahmen druecken — Grid-Spalten wachsen sonst mit ihrem laengsten unteilbaren Inhalt. */ .hub-quer-txt{min-width:0} /* Die Augenbraue traegt sonst die Seitenfarbe (--a) und stand als einziges Element des Bandes in einem anderen Ton als Rahmen, Symbol und Pillen. */ .hub-quer .eyebrow{margin-bottom:.55rem;color:var(--sec)} .hub-quer .eyebrow::before{background:var(--sec)} .hub-quer h3{margin:.15rem 0 0;font-size:1.25rem} .hub-quer-p{margin:.5rem 0 0;font-size:.92rem;line-height:1.6;color:var(--ink-3); max-width:70ch} .hub-quer .hub-chips{margin-top:.35rem} /* justify-self:start, sonst zieht ihn das Raster im schmalen Fenster ueber die volle Breite — ein Knopf so breit wie der Kasten wirkt wie eine Werbeflaeche, nicht wie ein Verweis. */ .hub-quer-cta{justify-self:start;display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap; padding:.7rem 1.15rem;border-radius:10px;background:var(--sec);color:#fff; font-size:.9rem;font-weight:600;text-decoration:none; transition:filter .18s,transform .18s} .hub-quer-cta:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff} .hub-quer-cta .icon{width:1.05em;height:1.05em} /* ------------------------------------------------------ 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. */ /* display:none would also work for a -referenced sprite in every browser that matters here, but this is the rule the inline style="" it replaces actually enforced, so it stays exact rather than "equivalent". */ .sprite{position:absolute;width:0;height:0;overflow:hidden} .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} /* ── Newsletter ─────────────────────────────────────────────────────────── Formular links, was man bekommt rechts. Die Aufzaehlung steht neben dem Formular und nicht darunter: Wer die Adresse eintippt, soll die Zusage im Blick haben, nicht erst nach dem Scrollen finden. */ .nl-grid{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:start} @media(min-width:880px){.nl-grid{grid-template-columns:minmax(0,1fr) 20rem}} .nl-form{max-width:34rem;display:grid;gap:1.4rem} .nl-form .feld{display:grid;gap:.4rem} .nl-form label,.nl-form legend{font-weight:600;font-size:.92rem} .nl-form input[type=email]{ padding:.7rem .85rem;border:1px solid var(--line);border-radius:9px; font:inherit;background:#fff;width:100%; } .nl-form input[type=email]:focus{outline:none;border-color:var(--a); box-shadow:0 0 0 3px var(--tint)} .nl-form fieldset{border:0;padding:0;margin:0;display:grid;gap:.5rem} /* Mit .nl-form davor, weil „.nl-form label“ sonst seine 600 durchsetzt und jede Auswahlzeile fett steht — die Beschriftung eines Feldes ist etwas anderes als die Beschriftung einer Option. */ .nl-form .nl-wahl{display:flex;align-items:center;gap:.6rem;font-weight:400; cursor:pointer;font-size:.95rem} .nl-form .nl-consent{display:flex;align-items:flex-start;gap:.6rem;font-weight:400; font-size:.9rem;line-height:1.5;color:var(--ink-2);cursor:pointer} .nl-consent input{margin-top:.25rem;flex:none} .feld-err{color:#B3261E;font-size:.85rem;font-weight:500} .form-err{background:#FDF0EC;border:1px solid #F0BFB2;color:#8C2412; padding:.8rem 1rem;border-radius:9px;font-size:.92rem} .nl-daten{font-size:.84rem;color:var(--ink-3);margin:0} .nl-info{background:var(--inset);border-radius:var(--r);padding:1.5rem 1.6rem} .nl-info h2{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-2);margin:0 0 1rem} /* Der Weg zum Abo von der Meldungsuebersicht aus. Rechtsbuendig ueber der Liste — dort endet der Blick nach dem Einleitungstext. */ .nl-anstoss{display:flex;justify-content:flex-end;margin-bottom:1.4rem} /* ── Impressum ──────────────────────────────────────────────────────────── Zwei Spalten: Bezeichnung links, Angabe rechts. Auf schmalen Anzeigen untereinander. Bewusst ohne Kapitelnummern und ohne Karten — Pflichtangaben sollen schnell auffindbar sein, nicht gestaltet wirken. */ .impressum{ max-width:46rem;margin:0;display:grid;grid-template-columns:14rem 1fr; gap:0;border-top:1px solid var(--line); } .impressum dt, .impressum dd{ padding:1.15rem 0;border-bottom:1px solid var(--line);margin:0; } .impressum dt{ font-size:.82rem;letter-spacing:.04em;color:var(--ink-2);font-weight:600; padding-right:1.5rem; } .impressum dd{line-height:1.65} .impressum dd a{color:var(--a);text-decoration:none;border-bottom:1px solid transparent} .impressum dd a:hover, .impressum dd a:focus-visible{border-bottom-color:currentColor} /* Der Rechtsverweis gehoert zur Angabe, tritt aber zurueck. */ .impressum-fuss{ display:block;margin-top:.3rem;font-size:.8rem;color:var(--ink-2); } .impressum-hinweis{max-width:46rem;margin-top:3rem} /* Die Zeichenreihe schliesst die Seite ab und steht durch die Trennlinie sichtbar ausserhalb der Pflichtangaben. */ .impressum-zeichen{ max-width:46rem;margin-top:3.4rem;padding-top:2.2rem; border-top:1px solid var(--line); } .impressum-hinweis h2{font-size:1.15rem;margin-bottom:.5rem} .impressum-hinweis p{color:var(--ink-2)} @media(max-width:700px){ .impressum{grid-template-columns:1fr} .impressum dt{padding-bottom:.2rem;border-bottom:0} .impressum dd{padding-top:0} } /* ── 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} /* ── Wochenbericht als eigener Block auf der Insight-Uebersicht ──────────── Er stand vorher als erste Karte im selben Raster wie die Meldungen — optisch nicht von ihnen zu unterscheiden, dabei ist er ihre Zusammenfassung und keine von ihnen. Eigener Kopf mit Verweis ins Archiv, eigene Kartenbreite, und die Trennlinie danach markiert, wo die eigentliche Meldungsliste beginnt. */ .wochenbericht-featured{margin-bottom:1.75rem} .wochenbericht-featured-kopf{ display:flex;align-items:center;justify-content:space-between;gap:1rem; margin-bottom:.7rem; } .wochenbericht-featured-kopf .eyebrow{margin:0} .wochenbericht-featured-kopf a{ display:inline-flex;align-items:center;gap:.4rem;flex:none; font-size:.85rem;font-weight:600;color:var(--a);text-decoration:none; } .wochenbericht-featured-kopf a:hover{text-decoration:underline} .wochenbericht-featured .lage-card{padding-top:1.5rem;padding-bottom:1.5rem} .insight-trenner{ display:flex;align-items:center;gap:.85rem; margin:0 0 1.25rem;color:var(--ink-3); font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; } .insight-trenner::before,.insight-trenner::after{content:"";flex:1;height:1px;background:var(--line)} /* ── Wochenbericht-Karte ─────────────────────────────────────────────────── Dieselbe dunkle Buehne wie die Meldungskarte, aber ohne Schweregrad: Die Kante traegt die Bereichsfarbe von Insight statt Rot/Orange, und statt des Schimmers steht rechts gross die Kalenderwoche. Ohne eigene Gestalt blieb die Karte weiss und leer — bei kurzem Anriss und der vollen Kartenbreite der Galerie blieb mehr als die Haelfte der Karte ungenutzte Flaeche, waehrend die Meldungskarten daneben ihre Flaeche mit dem Schimmer fuellen. */ .lage-card{ position:relative;overflow:hidden;isolation:isolate; background:#0B0B0D;border-color:rgba(255,255,255,.1); padding-left:1.85rem;padding-right:6.5rem; } .lage-card::before{ content:"";position:absolute;inset:0 auto 0 0;width:7px;z-index:2; background:var(--a); } .lage-card::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.5;transition:opacity .28s ease; background: radial-gradient(42% 50% at 88% 22%, #80A8FF 0%, transparent 70%), radial-gradient(30% 38% at 96% 88%, #CEB5FF 0%, transparent 72%); } .lage-card:hover::after{opacity:.68} .lage-card > *{position:relative;z-index:1} .lage-card h2{color:#fff} .lage-card p{color:#C3C9D4} .lage-card .card-num{color:#8F98A6} .lage-card .arrow{color:#fff} /* Grosse, blasse Kalenderwoche als Grafik statt als Information — die Zahl steht bereits in der Ueberschrift und wird hier nicht ein zweites Mal vorgelesen. */ .lage-kw{ position:absolute;top:1.1rem;right:1.25rem;z-index:1; text-align:right;line-height:1;pointer-events:none; color:rgba(255,255,255,.9); } .lage-kw strong{display:block;font-size:2.1rem;font-weight:800} .lage-kw small{display:block;margin-top:.15rem;font-size:.7rem; letter-spacing:.06em;color:rgba(255,255,255,.5)} /* Listenansicht: dieselbe schlichte Zeile wie jede andere Karte, die Grafik hat darin keinen Platz und die Farbe kommt nicht mehr vom Schweregrad. */ .werkzeuge:has(#v-liste:checked) ~ .posts .lage-card{ background:var(--paper);border-color:var(--line);padding-right:1.15rem; } .werkzeuge:has(#v-liste:checked) ~ .posts .lage-card::after{display:none} .werkzeuge:has(#v-liste:checked) ~ .posts .lage-card h2{color:var(--ink)} .werkzeuge:has(#v-liste:checked) ~ .posts .lage-card .card-num{color:var(--ink-3)} .werkzeuge:has(#v-liste:checked) ~ .posts .lage-card .arrow{color:var(--a)} .werkzeuge:has(#v-liste:checked) ~ .posts .lage-kw{display:none} /* ── 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. */ /* Der alte Block des Ansichtsumschalters stand hier noch: eigener Rahmen, eigener Abstand, rechtsbuendig als eigene Zeile. Er kam nach den neuen Regeln und gewann darum — sein margin-bottom von 1.5rem machte den Umschalter 24 Pixel hoeher als den Filter daneben, und beide standen sichtbar versetzt. Die Gestalt kommt jetzt aus .seg weiter oben. */ /* Listenansicht. display:contents loest den Kartenkopf auf, damit Datum und Schweregrad zu eigenen Spalten der Zeile werden statt zu einem Block. */ .werkzeuge:has(#v-liste:checked) ~ .posts{display:block} .werkzeuge:has(#v-liste:checked) ~ .posts .post-card{ display:grid;grid-template-columns:6rem 6.2rem 1fr 6.5rem auto; align-items:center;gap:1rem;padding:.85rem 1.15rem;margin-bottom:.5rem; } /* In der Liste kein dunkler Grund. Als Kachel traegt er die Meldung — zwanzig dunkle Balken untereinander wirken dagegen wie eine Sperrzone, und der Schimmer hat auf 60 Pixel Hoehe ohnehin keinen Platz. Die Farbe kommt hier allein aus dem Schweregrad: kritische Meldungen bekommen einen Hauch Rot, alles andere bleibt weiss. */ .werkzeuge:has(#v-liste:checked) ~ .posts .alert-card{ background:var(--paper);border-color:var(--line); } .werkzeuge:has(#v-liste:checked) ~ .posts .alert-card::after{display:none} .werkzeuge:has(#v-liste:checked) ~ .posts .alert-card h2, .werkzeuge:has(#v-liste:checked) ~ .posts .alert-card h3{color:var(--ink)} .werkzeuge:has(#v-liste:checked) ~ .posts .alert-card .card-num{color:var(--ink-3)} .werkzeuge:has(#v-liste:checked) ~ .posts .alert-card .arrow{color:var(--a)} /* Nur „kritisch“ bekommt Farbe. „Hoch“ ebenfalls einzufaerben lag nahe, ist aber falsch: Von einundzwanzig Meldungen sind zwanzig „hoch“ — die Liste waere durchgehend getoent und die Hervorhebung damit wertlos. Ein Signal, das fast immer leuchtet, ist keins. */ .werkzeuge:has(#v-liste:checked) ~ .posts .alert-card:has(.sev--kritisch){ background:#FEF4F3;border-color:#F0C4BF; } .werkzeuge: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. */ .werkzeuge:has(#v-liste:checked) ~ .posts .sev{justify-self:start} .werkzeuge:has(#v-liste:checked) ~ .posts .post-card h2{ font-size:1rem!important;margin:0;line-height:1.35; } /* Feste Spalten statt Zaehlung nach Reihenfolge: Der Wochenbericht hat keine Schweregrad-Marke, eine Meldung ohne erzeugtes Bild kein .card-bild — ohne diese Zuweisung ruecken die uebrigen Elemente in die luecke gewordene Spalte nach, und Ueberschrift und Bild tauschen ihre Breite. */ .werkzeuge:has(#v-liste:checked) ~ .posts .card-num{grid-column:1} .werkzeuge:has(#v-liste:checked) ~ .posts .sev{grid-column:2} .werkzeuge:has(#v-liste:checked) ~ .posts .post-card h2{grid-column:3} .werkzeuge:has(#v-liste:checked) ~ .posts .card-bild{grid-column:4} .werkzeuge:has(#v-liste:checked) ~ .posts .post-card .arrow{grid-column:5} /* Anriss und Quelle entfallen: In einer Zeile ist die Uebersicht der Zweck, die Einzelheiten stehen einen Klick weiter. */ .werkzeuge:has(#v-liste:checked) ~ .posts .post-card > p{display:none} .werkzeuge:has(#v-liste:checked) ~ .posts .post-card .arrow{ margin:0;padding:0;white-space:nowrap; } /* Das Bild rechts vor dem Pfeil. Ohne dieses Bild blieb die Zeile bei einer kurzen Ueberschrift und einer breiten 1fr-Spalte grossteils weiss — der Text stand links, der Rest der Zeile trug nichts. Fuer Meldungen ist es das ohnehin schon erzeugte Vorschaubild (dasselbe wie in der Galerie und im sozialen Kanal); fuer den Wochenbericht, der kein solches Bild hat, die Kalenderwoche als kleine Marke — siehe .card-bild--lage. */ .card-bild{display:none;width:100%;height:3.6rem;border-radius:.5rem;overflow:hidden} .werkzeuge:has(#v-liste:checked) ~ .posts .card-bild{display:block} .werkzeuge:has(#v-liste:checked) ~ .posts img.card-bild{object-fit:cover} .werkzeuge:has(#v-liste:checked) ~ .posts span.card-bild{ display:flex;flex-direction:column;align-items:center;justify-content:center; background:linear-gradient(135deg, var(--a), #241C63);color:#fff;line-height:1; } .card-bild strong{font-size:1.05rem;font-weight:800} .card-bild small{display:block;margin-top:.15rem;font-size:.6rem;letter-spacing:.05em;opacity:.75} @media(max-width:760px){ .werkzeuge:has(#v-liste:checked) ~ .posts .post-card{ grid-template-columns:auto 1fr;gap:.5rem .8rem; } .werkzeuge:has(#v-liste:checked) ~ .posts .post-card h2{grid-column:1/-1} .werkzeuge:has(#v-liste:checked) ~ .posts .post-card .arrow{grid-column:1/-1} /* Auf schmalen Bildschirmen ist die Zeile ohnehin schon zweizeilig — ein Bild dazu waere die dritte Zeile fuer etwas rein Dekoratives. Ausdruecklich fuer img und span: .card-bild allein waere weniger spezifisch als die Regeln, die es hier abschalten soll, und verloere gegen sie — Reihenfolge entscheidet nur bei gleicher Spezifitaet. */ .werkzeuge:has(#v-liste:checked) ~ .posts img.card-bild, .werkzeuge:has(#v-liste:checked) ~ .posts span.card-bild{display:none} } /* Die Einordnung — der Absatz, der sagt, was die Meldung fuer den Leser bedeutet. Abgesetzt und mit Symbol, weil er nicht aus der Quelle stammt, sondern von uns: Wer den Text ueberfliegt, soll die eine Stelle finden, die anderswo nicht steht. Bewusst ohne Warnfarbe — der Schweregrad steht schon oben, und ein zweiter roter Kasten liest sich wie Panik. */ /* Kante und Symbol tragen das Hausviolett, nicht die Bereichsfarbe. Auf Meldungsseiten ist --a das gedeckte Schiefergrau #475569 des Bereichs „Insights“ — als Kante auf heller Flaeche praktisch unsichtbar. Und inhaltlich stimmt das Violett besser: Hier spricht neonotu, nicht die Quelle und nicht der Bereich. */ .einordnung{display:flex;gap:1rem;align-items:flex-start;max-width:52rem; padding:1.3rem 1.4rem;border:1px solid var(--line);border-left:3px solid #5B4BE0; border-radius:14px;background:var(--inset)} .einordnung-ic{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem; border-radius:10px;background:#fff;border:1px solid var(--line);color:#5B4BE0} .einordnung-ic svg{width:1.25rem;height:1.25rem} .einordnung .eyebrow{margin-bottom:.4rem;color:#5B4BE0} .einordnung .eyebrow::before{background:#5B4BE0} .einordnung p:last-child{margin:0;font-size:1rem;line-height:1.65;color:var(--ink-2)} /* Der Faktenblock: Angriffsweg, Rechte, Patch-Stand, CVSS. Bewusst ohne Farbkante und ohne Symbol wie die Einordnung — das hier sind abgelesene Werte, keine Einschaetzung von uns, und soll auch nicht danach aussehen. */ .fakten{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;max-width:52rem;margin:0; padding:1rem 1.3rem;border:1px solid var(--line);border-radius:14px;background:var(--inset)} .fakten-zeile{display:flex;flex-direction:column;gap:.15rem} .fakten-zeile dt{margin:0;font-size:.8rem;color:var(--ink-3)} .fakten-zeile dd{margin:0;font-size:.95rem;font-weight:600;color:var(--ink)} /* Produktarchiv: die Meldungen einer Software als schlichte Zeitleiste. Keine Karten — hier zaehlt die Reihe, nicht das einzelne Bild, und vierzig Karten untereinander waeren eine Wand. */ .prod-liste{list-style:none;margin:0;padding:0;max-width:56rem; border-top:1px solid var(--line)} .prod-liste li{border-bottom:1px solid var(--line)} .prod-liste a{display:grid;gap:.2rem .9rem;align-items:baseline; padding:.85rem .2rem;text-decoration:none;color:var(--ink); transition:background .16s,padding-left .16s} @media(min-width:720px){ .prod-liste a{grid-template-columns:6.5rem 6.5rem 1fr} } .prod-liste a:hover{background:var(--inset);padding-left:.7rem} .prod-datum{font-size:.82rem;color:var(--ink-3);font-variant-numeric:tabular-nums} .prod-titel{font-size:1rem;font-weight:600;line-height:1.45} .prod-fuss{margin:1.4rem 0 0;font-size:.92rem} .prod-hinweis{margin:0 0 1.2rem;font-size:.92rem} .quelle-box{border-top:1px solid var(--line,rgba(255,255,255,.14));padding-top:1.4rem;max-width:52rem} /* --------------------------------------------------------------------------- Presse- und Investorenbereich Beide Bereiche kommen mit den vorhandenen Bausteinen aus — Karte, Feld, Schaltflaeche, Pille. Hier steht nur, was zusaetzlich noetig ist: die Leiste innerhalb des Bereichs, die Listen und die Vorschau der Mediathek. --------------------------------------------------------------------------- */ /* Leiste unterhalb des Kopfes. Sie erscheint erst nach der Anmeldung und traegt die Bereichsfarbe, damit man sieht, worin man sich befindet. */ .pr-leiste{border-bottom:1px solid var(--line);background:var(--inset)} .pr-leiste-in{display:flex;flex-wrap:wrap;gap:.2rem 1.3rem;align-items:center; padding-top:.7rem;padding-bottom:.7rem;font-size:.93rem} .pr-leiste a{color:var(--ink-2);text-decoration:none;padding:.25rem 0;border-bottom:2px solid transparent} .pr-leiste a:hover{color:var(--ink)} .pr-leiste a.is-hier{color:var(--ink);border-bottom-color:var(--a)} .pr-leiste-weg{margin-left:auto} /* Rueckmeldung nach dem Absenden. Zwei Toene reichen: erledigt und Achtung. */ .pr-hinweis{margin:1.4rem 0 0;padding:.85rem 1.1rem;border-radius:var(--r); border:1px solid var(--line);font-size:.95rem} .pr-hinweis--ok{border-color:#B7E4C7;background:#F0FBF4;color:#186A3B} .pr-hinweis--warn{border-color:#F3C9A6;background:#FDF5EE;color:#8A4B12} /* padding-block und nicht die Kurzform: .wrap traegt den seitlichen Abstand, und eine Kurzform mit 0 nimmt ihn wieder weg — der Inhalt klebte dann am Bildschirmrand. */ .pr-sec{padding-block:clamp(2rem,4vw,3.2rem)} .pr-schmal{max-width:48rem} .pr-karten{display:grid;gap:1.1rem;grid-template-columns:1fr} @media (min-width:48rem){.pr-karten{grid-template-columns:1fr 1fr}} .pr-zwei{display:grid;gap:1.25rem;grid-template-columns:1fr;align-items:start} /* Die Karten tragen hier Datenblöcke und keine drei Zeilen Text — mit dem Standardabstand klebte alles am Rand. */ .pr-sec .card{padding:1.9rem 1.8rem} .pr-sec .card > h2:first-child,.pr-sec .card > .eyebrow:first-child{margin-top:0} /* In einer Karte ist h2 nicht die Seitenueberschrift, sondern der Name des Blocks — in der Groesse des Fliesstextes plus ein Stueck, sonst sprengt „Schreibweisen und Namensnennung“ die Karte auf zwei Zeilen. */ .pr-sec .card h2{margin-bottom:1rem;font-size:1.25rem;line-height:1.3} .pr-sec .card h3{font-size:1.05rem} @media (min-width:56rem){.pr-zwei{grid-template-columns:1fr 1fr}} /* Liste der Meldungen. Datum klein darueber, Titel als Verweis, Anriss darunter — mehr braucht eine Uebersicht nicht. */ .pr-liste{list-style:none;margin:0;padding:0;display:grid;gap:1rem} .pr-eintrag h2,.pr-eintrag h3{margin:.3rem 0 .5rem;font-size:1.15rem;line-height:1.35} .pr-eintrag h2 a,.pr-eintrag h3 a{color:inherit;text-decoration:none} .pr-eintrag h2 a:hover,.pr-eintrag h3 a:hover{color:var(--a)} .pr-datum{margin:0;font-size:.82rem;color:var(--ink-3);letter-spacing:.02em} .pr-unterzeile{margin:0 0 .4rem;color:var(--a);font-size:.95rem} .pr-schloss{margin:.8rem 0 0;font-size:.82rem;color:var(--ink-3)} .crumbs-zurueck{margin:0 0 1rem;font-size:.9rem} .pr-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem} .pr-pill-an{border-color:var(--a);color:var(--a)} /* Formulare im Bereich. Die Felder selbst kommen aus .field; hier steht nur der Abstand innerhalb der Karte. */ .pr-form{display:grid;gap:1.1rem} .pr-form h2{margin:.4rem 0 0;font-size:1.15rem} .pr-form .btn-row{margin-top:.4rem} .pr-regeln{margin:.2rem 0 0;padding-left:1.2rem;color:var(--ink-2);font-size:.95rem; display:grid;gap:.9rem} .pr-regeln li{line-height:1.6;padding-left:.2rem} .pr-regeln li::marker{color:var(--a)} .pr-boiler{margin-top:1.25rem} .pr-boiler h2,.pr-boiler h3{margin-bottom:.5rem} .pr-boiler h3{margin-top:2.4rem;font-size:1.05rem} .pr-boiler .hint{margin-bottom:1.1rem} /* Absatz zum Abschreiben: etwas groesser gesetzt und mit ruhiger Zeilenhoehe, weil er wirklich gelesen und nicht nur ueberflogen wird. */ .pr-absatz{margin:0;font-size:1rem;line-height:1.75;max-width:60ch} /* Mediathek. Das Karomuster laesst helle wie dunkle Logos mit Transparenz erkennen — auf weissem Grund verschwindet ein weisses Logo. */ .pr-medien{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))} .pr-medium{display:flex;flex-direction:column} .pr-medium h3{font-size:1rem;margin:.9rem 0 .3rem} .pr-medium .btn{margin-top:auto;align-self:flex-start} .pr-vorschau{display:flex;align-items:center;justify-content:center;height:9rem; border-radius:calc(var(--r) - .3rem);background:var(--inset);border:1px solid var(--line)} .pr-vorschau--bild{ background-color:#c9ced8; background-image:linear-gradient(45deg,#b6bcc9 25%,transparent 25%,transparent 75%,#b6bcc9 75%), linear-gradient(45deg,#b6bcc9 25%,transparent 25%,transparent 75%,#b6bcc9 75%); background-size:18px 18px;background-position:0 0,9px 9px; } .pr-vorschau img{max-height:7.4rem;max-width:82%;object-fit:contain} .pr-typ{font-size:1.3rem;font-weight:600;color:var(--ink-3);letter-spacing:.06em} .pr-meta{margin:0 0 .6rem;font-size:.8rem;color:var(--ink-3)} .pr-kit,.pr-kontaktkarte,.pr-lizenz{display:flex;flex-wrap:wrap;gap:1rem 1.6rem; align-items:center;justify-content:space-between} .pr-kit h2,.pr-kontaktkarte h2{margin-bottom:.3rem;font-size:1.15rem} .pr-lizenz{display:block;margin-top:1.6rem} .pr-kontakt{margin-top:2rem} .pr-kontakt-name{margin-bottom:.6rem} /* Verwaltung im Bereich: eine schlichte Tabelle, kein zweites Design. */ .pr-tabelle{width:100%;border-collapse:collapse;font-size:.93rem} .pr-tabelle th,.pr-tabelle td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line); vertical-align:top} .pr-tabelle th{color:var(--ink-3);font-weight:500;white-space:nowrap} .pr-tabelle .btn{padding:.35rem .7rem;font-size:.85rem} .pr-werkzeug{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1.2rem} .pr-marke{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.78rem; border:1px solid var(--line);color:var(--ink-3)} .pr-marke--live{border-color:#B7E4C7;background:#F0FBF4;color:#186A3B} .pr-sprachfeld{border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;margin-bottom:1rem} .pr-sprachfeld > h3{margin:0 0 .9rem;font-size:1rem} /* --- Redaktion: Uebersicht mit Vorschau und Werkzeugzeichen --------------- Vorher standen alle Dateien als ausgeklappte Formulare untereinander. Wer ein Bild suchte, scrollte durch Eingabefelder. Jetzt traegt die Uebersicht Vorschau, Name und drei kleine Schaltflaechen; bearbeitet wird auf einer eigenen Seite. */ .pr-verw-kopf{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center; justify-content:space-between;margin-bottom:1.2rem} .pr-verw-kopf h2{margin:0;font-size:1.25rem} .pr-verw-kopf .btn{padding:.55rem 1rem;font-size:.92rem} .pr-verw-kopf .btn .icon{width:1rem;height:1rem;margin-right:.35rem;vertical-align:-2px} .pr-verw-medien{display:grid;gap:.9rem;grid-template-columns:1fr} @media (min-width:40rem){.pr-verw-medien{grid-template-columns:1fr 1fr}} @media (min-width:68rem){.pr-verw-medien{grid-template-columns:1fr 1fr 1fr}} .pr-verw-karte{display:flex;align-items:center;gap:.9rem;padding:.7rem; border:1px solid var(--line);border-radius:var(--r);background:#fff} .pr-verw-karte--aus{opacity:.55} .pr-verw-bild{flex:0 0 4.5rem;height:4.5rem;display:flex;align-items:center; justify-content:center;border-radius:calc(var(--r) - .4rem);overflow:hidden; background:var(--inset);border:1px solid var(--line)} /* Reihenfolge zaehlt: .pr-verw-bild steht in dieser Datei hinter dem Karomuster und wuerde es mit seiner Kurzform sonst ueberschreiben. Ein weisses Logo waere auf hellem Grund unsichtbar — und genau davon gibt es mehrere. */ .pr-verw-bild.pr-vorschau--bild{ background-color:#c9ced8; background-image:linear-gradient(45deg,#b6bcc9 25%,transparent 25%,transparent 75%,#b6bcc9 75%), linear-gradient(45deg,#b6bcc9 25%,transparent 25%,transparent 75%,#b6bcc9 75%); background-size:12px 12px;background-position:0 0,6px 6px; } .pr-verw-bild img{padding:.3rem} .pr-verw-bild img{max-width:100%;max-height:100%;object-fit:contain} .pr-verw-text{min-width:0;flex:1} .pr-verw-titel{display:block;font-weight:600;font-size:.95rem;color:var(--ink); text-decoration:none;overflow-wrap:anywhere} .pr-verw-titel:hover{color:var(--a)} .pr-verw-text .pr-meta{margin:.2rem 0 0} /* Werkzeugzeichen. 2rem im Quadrat — gross genug fuer den Finger, klein genug, dass drei davon neben einem Namen Platz haben. */ .pr-ikonen{display:flex;align-items:center;gap:.3rem;flex:0 0 auto} .pr-ikon-form{display:inline;margin:0} .pr-ikon{display:inline-flex;align-items:center;justify-content:center; width:2rem;height:2rem;padding:0;border:1px solid var(--line);border-radius:8px; background:#fff;color:var(--ink-2);cursor:pointer;text-decoration:none; transition:border-color .15s,color .15s,background-color .15s} .pr-ikon:hover{border-color:var(--a);color:var(--a);background:var(--inset)} .pr-ikon .icon{width:1.05rem;height:1.05rem} .pr-ikon--weg:hover{border-color:#C2453C;color:#C2453C;background:#FDF3F2} .pr-nowrap{white-space:nowrap} .pr-rechts{text-align:right} .pr-tabelle .pr-ikonen{justify-content:flex-end} /* Vorschau in der Bearbeitungsmaske: zeigt, welche Datei man vor sich hat. */ .pr-verw-vorschau{display:flex;align-items:center;gap:1rem;padding:.8rem; border:1px solid var(--line);border-radius:var(--r);background:var(--inset)} .pr-verw-vorschau img{max-width:8rem;max-height:5rem;object-fit:contain} .pr-verw-vorschau .pr-meta{margin:0} /* Loeschen steht abgesetzt unter dem Formular, nicht daneben: Es ist die einzige Aktion, die sich nicht widerrufen laesst. */ .pr-weg{margin-top:1.2rem} /* --- Texteditor in der Redaktion ----------------------------------------- Dieselben Klassennamen wie unter /neoadm/, damit neoadm/editor.js unverändert an beiden Orten arbeitet: eine Datei, zwei Einsatzorte. Die Regeln stehen hier trotzdem noch einmal, weil neoadm.css eine eigene Grundgestaltung mitbringt, die auf der Website nichts zu suchen hat. */ .a-editor{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff} .a-editor:focus-within{border-color:var(--a);box-shadow:0 0 0 3px rgb(112 80 208 / .12)} .a-werkzeuge{display:flex;flex-wrap:wrap;gap:.2rem;padding:.4rem; background:var(--inset);border-bottom:1px solid var(--line)} .a-wz{min-width:2rem;height:1.9rem;padding:0 .5rem;border:1px solid transparent;border-radius:6px; background:transparent;color:var(--ink-2);font:inherit;font-size:.85rem;line-height:1;cursor:pointer} .a-wz:hover{background:#fff;border-color:var(--line);color:var(--ink)} .a-flaeche{min-height:14rem;padding:1rem 1.1rem;font-size:.97rem;line-height:1.65;color:var(--ink); overflow-wrap:anywhere} .a-flaeche:focus{outline:none} .a-flaeche > :first-child{margin-top:0} .a-flaeche h2{font-size:1.15rem;margin:1.2rem 0 .5rem} .a-flaeche h3{font-size:1rem;margin:1rem 0 .4rem} .a-flaeche blockquote{margin:1rem 0;padding-left:.9rem;border-left:3px solid var(--a);color:var(--ink-2)} .a-flaeche ul,.a-flaeche ol{padding-left:1.3rem} .a-flaeche mark{background:var(--ink);color:#fff;border-radius:3px;padding:0 .18em} /* Das rohe Feld bleibt sichtbar, solange das Skript nicht gelaufen ist — dann tippt man HTML von Hand, statt vor einem toten Kasten zu sitzen. */ .a-roh{width:100%;margin-top:.6rem;font-size:.85rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} /* --- Beschriftungsspalte fuer Kontaktangaben ------------------------------ Zwei Spalten: links die Beschriftung in Grau, rechts der Wert. Auf engen Schirmen untereinander, weil zwei Spalten dort beide zu schmal werden. */ /* Die Marke oben in der Karte („PRESSEKONTAKT“, „UNTERNEHMEN“) ist eine Bereichsangabe und kein Vorspann des Namens — sie braucht Abstand nach unten, sonst klebt der Name daran. */ .pr-sec .card > .eyebrow{margin-bottom:1.5rem} .pr-name{margin:0 0 .5rem;font-size:1.3rem;line-height:1.3} /* Der Vorspann der Karte — Rolle, Agentur oder Anschrift. Er braucht sichtbar mehr Abstand zur Datenliste als die Zeilen untereinander, sonst liest sich die erste Beschriftung wie seine Fortsetzung. */ .pr-rolle{margin:0 0 1.8rem;color:var(--ink-2);font-size:.95rem;line-height:1.6} /* Getrennt wird durch Abstand, nicht durch Linien: Linien zerlegen eine Angabe von zwei Zeilen in zwei Kaesten, und bei zwölf Zeilen sieht die Karte aus wie eine Rechnung. */ .pr-daten{margin:.4rem 0 0;padding:0;display:grid;gap:1.15rem} .pr-daten-zeile{display:grid;grid-template-columns:1fr;gap:.15rem} @media (min-width:34rem){ .pr-daten-zeile{grid-template-columns:10rem 1fr;gap:1.2rem;align-items:baseline} } .pr-daten dt{color:var(--ink-3);font-size:.85rem;line-height:1.5} .pr-daten dd{margin:0;font-size:.95rem;line-height:1.6;overflow-wrap:anywhere} /* Das Factsheet traegt laengere Werte — mehr Luft zwischen den Zeilen. */ .pr-daten--weit{gap:1.35rem} /* Die Schaltflaeche unter der Datenliste braucht deutlich mehr Abstand als die Zeilen untereinander — dreifach: Sie beendet den Block und gehoert nicht zur letzten Angabe. */ .pr-daten + .btn-row{margin-top:3.4rem} /* --- Band über der Redaktion --------------------------------------------- Der Bereich sieht im Bearbeiten genauso aus wie im Lesen — dieselben Farben, dasselbe Raster. Deshalb dieses Band: Es nennt den Zustand, trägt die Unterpunkte und liegt farbig genug, dass man es nicht übersieht. */ .pr-modus{background:var(--ink);color:#fff} .pr-modus-in{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center; justify-content:space-between;padding-top:.7rem;padding-bottom:.7rem} .pr-modus-marke{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.9rem} .pr-modus-marke .icon{width:1.05rem;height:1.05rem;opacity:.85} .pr-modus-text{color:rgba(255,255,255,.62);font-size:.85rem} @media (max-width:52rem){.pr-modus-text{display:none}} .pr-verw-nav{display:flex;flex-wrap:wrap;gap:.15rem;align-items:center;font-size:.9rem} .pr-verw-nav a{color:rgba(255,255,255,.72);text-decoration:none;padding:.3rem .7rem;border-radius:999px} .pr-verw-nav a:hover{color:#fff;background:rgba(255,255,255,.12)} .pr-verw-nav a.is-hier{color:var(--ink);background:#fff} .pr-verw-raus{margin-left:.6rem;border:1px solid rgba(255,255,255,.28)} /* Kachel als Verweis auf den Unterpunkt: Zahl groß, Beschriftung darunter. */ .card--tile .stat-v{display:block;font-size:2rem;font-weight:650;line-height:1.1;color:var(--ink)} .card--tile .stat-l{display:block;margin-top:.3rem;font-size:.88rem;color:var(--ink-3)} a.card--tile{text-decoration:none} /* Zeile für betreuende Sitzungen: die Einstiege, die Besucher sehen. */ .pr-besucher{margin:1rem 0 0;font-size:.85rem;line-height:1.6;color:var(--ink-3)} .pr-besucher a{color:var(--a)} /* Anmeldefenster der geschützten Bereiche. Ein : Rand, Innenabstand und Hintergrund kommen vom Browser und müssen zurückgesetzt werden, sonst sitzt das Formular in einem zweiten, fremden Kasten. */ .dlg{ border:0;padding:0;background:#fff;color:var(--ink); border-radius:var(--r);box-shadow:var(--shadow); width:min(26rem,calc(100vw - 2rem));max-width:none } .dlg::backdrop{background:rgba(11,13,20,.55)} .dlg-form{padding:1.75rem 1.6rem} .dlg-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem} .dlg-form h2{margin:0;font-size:1.15rem} .dlg-form .hint{margin:0} .dlg-zu{ flex:0 0 auto;width:2rem;height:2rem;margin:-.35rem -.4rem 0 0; border:0;border-radius:8px;background:none;color:var(--ink-3); font-size:1.5rem;line-height:1;cursor:pointer } .dlg-zu:hover{background:var(--line);color:var(--ink)} /* ========================================================================== Utilities — replace inline style="" attributes so style-src can drop 'unsafe-inline'. Each one maps to an existing spacing/type value already used somewhere as a literal; keep reusing these instead of a new literal. ========================================================================== */ .mt-08{margin-top:.8rem} .mt-11{margin-top:1.1rem} .mt-12{margin-top:1.2rem} .mt-13{margin-top:1.3rem} .mt-14{margin-top:1.4rem} .mt-16{margin-top:1.6rem} .mt-18{margin-top:1.8rem} .mt-20{margin-top:2rem} .fs-09{font-size:.9rem} .fs-12{font-size:1.2rem} .fs-125{font-size:1.25rem} .fs-13{font-size:1.3rem} .fs-16{font-size:1.6rem} .mw-44{max-width:44ch} .mw-46{max-width:46ch} .mw-52{max-width:52ch} .mw-56{max-width:56ch} .mw-60{max-width:60ch} .tone-ink-2{color:var(--ink-2)} /* Passt eine Zeile ohne Icon optisch an ihre Nachbarn mit Icon an — die einzige Stelle, die das braucht (products.php). */ .pl-icon{padding-left:clamp(1.2rem,2.4vw,2rem)} /* Fuenf Stuetzstellen des Markenverlaufs, reihum je Kachel/Schritt statt style="--ton:…" auf jedem Element einzeln. Dieselbe Folge wie $toene in page.php und blocks.php — dort aendern, wenn sich die Folge hier aendert. */ .grid>.card--tile:nth-child(5n+1), .steps>li:nth-child(5n+1){--ton:#5B4BE0} .grid>.card--tile:nth-child(5n+2), .steps>li:nth-child(5n+2){--ton:#4A63E8} .grid>.card--tile:nth-child(5n+3), .steps>li:nth-child(5n+3){--ton:#2E7BF0} .grid>.card--tile:nth-child(5n+4), .steps>li:nth-child(5n+4){--ton:#26A6EF} .grid>.card--tile:nth-child(5n+5), .steps>li:nth-child(5n+5){--ton:#22D3EE} /* Die Grafikpalette, in der festen Reihenfolge der vier Kreislauf-Schritte (hub.php) statt style="--t:…". Immer genau vier Schritte, siehe content/services-hub.php — kein nth-child(4n+…) noetig. */ .cycle-list>li:nth-child(1){--t:var(--g-lavender)} .cycle-list>li:nth-child(2){--t:var(--g-periwinkle)} .cycle-list>li:nth-child(3){--t:var(--g-cornflower)} .cycle-list>li:nth-child(4){--t:var(--g-powder)} /* ------------------------------------------------------ Sichere Übergabe */ /* Die Dateiliste auf der Abrufseite: Name, Größe, Knopf in einer Zeile, untereinander sobald der Platz nicht reicht. */ .st-dateien{list-style:none;margin:0;padding:0;display:grid;gap:.7rem} .st-dateien li{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center; padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:10px;background:var(--inset)} .st-dateien .hint{margin:0;flex:1} /* Link und Passwort nach dem Anlegen: Sie werden abgeschrieben oder kopiert, darum dieselbe Schrift wie im Terminal und Umbruch statt Abschneiden. */ .st-geheim input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}