/* ================================================================ targeting360 · Website-Stylesheet ---------------------------------------------------------------- Die Komponentenregeln sind 1:1 aus dem Redesign-Konzept übernommen (Artifact „Redesign-Konzept Startseite") und von der Mockup-Ebene auf die echte, mehrseitige Website übertragen. Reihenfolge im : fokus.css → site.css ================================================================ */ /* ---- Schriften (lokal) ---------------------------------------- */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/spacegrotesk.woff2') format('woff2');} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/plexsans.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/plexmono-400.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500 600;font-display:swap; src:url('../fonts/plexmono-500.woff2') format('woff2');} /* ---- Basis ----------------------------------------------------- */ *{box-sizing:border-box;} html,body{margin:0;padding:0;} html{scroll-behavior:smooth;} body{ background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection{background:var(--signal);color:var(--ink);} a{color:inherit;text-decoration:none;} h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:0.005em;} p{margin:0;} img{display:block;max-width:100%;} .mono{font-family:var(--mono);} .tabular{font-variant-numeric:tabular-nums;} :focus-visible{outline:2px solid var(--signal);outline-offset:3px;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;} .skip{position:absolute;left:-9999px;} .skip:focus{left:16px;top:16px;z-index:200;background:var(--ink);color:var(--paper); padding:10px 18px;border-radius:3px;} /* ---- Eyebrows -------------------------------------------------- */ /* auf Dunkel */ .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--mono);font-size:12.5px;letter-spacing:0.14em; text-transform:uppercase;color:var(--signal-2); } .eyebrow::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--hit); box-shadow:0 0 0 3px rgba(255,90,54,0.18); } /* auf Hell */ .eyebrow-paper{ font-family:var(--mono);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase; color:var(--gold);display:flex;align-items:center;gap:8px;margin-bottom:14px; } .eyebrow-paper::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hit);} /* ---- Buttons --------------------------------------------------- */ .btn-solid{ background:var(--signal);color:var(--btn-ink);font-weight:600;font-size:14px; padding:14px 24px;border-radius:3px;display:inline-block;border:0;cursor:pointer; font-family:var(--body);transition:filter .2s; } .btn-solid:hover{filter:brightness(1.1);} .btn-ghost{ border:1px solid var(--line-strong);color:var(--paper);font-weight:500;font-size:14px; padding:13px 24px;border-radius:3px;display:inline-block;transition:border-color .2s,color .2s; } .btn-ghost:hover{border-color:var(--signal-2);color:var(--signal-2);} /* Ghost-Variante auf hellem Grund */ .btn-ghost-paper{ border:1px solid var(--line-paper-2);color:var(--ink);font-weight:500;font-size:14px; padding:13px 24px;border-radius:3px;display:inline-block;transition:border-color .2s; } .btn-ghost-paper:hover{border-color:var(--ink);} /* ================================================================ NAVIGATION — hell ================================================================ */ .site-nav{ position:sticky;top:0;z-index:50; background:var(--paper); border-bottom:1px solid var(--line-paper); } .site-nav .inner{ display:flex;align-items:center;justify-content:space-between; padding:18px 40px;max-width:var(--maxw);margin:0 auto;gap:24px; } /* Logo: Originaldatei. Helle Variante auf Paper, invertierte auf Ink. */ .logo{display:inline-flex;align-items:center;flex:none;} .logo img{height:26px;width:auto;display:block;} .site-footer .logo img{height:24px;} .navlinks{display:flex;gap:30px;font-size:13px;color:var(--on-paper-2);font-weight:500;} .navlinks a{transition:color .2s;} .navlinks a:hover{color:var(--ink);} .navlinks a[aria-current="page"]{color:var(--signal);} .nav-cta{ font-family:var(--mono);font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase; background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:3px; } .menu-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px;} /* Untermenü */ .navlinks .has-sub{position:relative;} .navlinks .submenu{ position:absolute;top:100%;left:-14px;min-width:230px;padding:8px; background:var(--paper);border:1px solid var(--line-paper-2);border-radius:6px; box-shadow:0 20px 40px -20px rgba(0,0,0,.35); display:flex;flex-direction:column;gap:2px; opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .16s,transform .16s,visibility .16s; } .navlinks .has-sub:hover .submenu, .navlinks .has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0);} .navlinks .submenu a{padding:9px 12px;border-radius:4px;font-size:13px;} .navlinks .submenu a:hover{background:var(--paper-dim);color:var(--signal);} /* ================================================================ HERO — dunkel ================================================================ */ .hero{ position:relative; background:var(--hero-bg); color:var(--paper); padding:96px 0 80px; overflow:hidden; } .hero .wrap{position:relative;z-index:1;} .hero .eyebrow{margin-bottom:22px;} .hero h1{ font-size:clamp(34px,4.6vw,58px);font-weight:800;text-transform:uppercase; line-height:1.04;max-width:14ch;color:var(--paper); } .hero h1 span{color:var(--signal-2);} .hero .sub{margin-top:22px;max-width:46ch;color:var(--steel);font-size:15.5px;} .hero .ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;} /* ---- Radar (Startseite) — animiert ----------------------------- Sweep, pulsierende Blips und leuchtender Kern. Farben aus dem Konzept. Bei prefers-reduced-motion steht alles still. */ .radar{ position:absolute;top:50%;right:7%;transform:translateY(-50%); width:350px;height:350px;pointer-events:none; } .radar .r-ring{ position:absolute;inset:0;margin:auto;border-radius:50%; border:1px solid var(--line-strong); } .radar .r2{inset:14%;} .radar .r3{inset:30%;} .radar .r4{inset:47%;border-color:var(--signal);opacity:.55;} /* Fadenkreuz */ .radar .r-cross::before,.radar .r-cross::after{ content:"";position:absolute;background:var(--line); } .radar .r-cross::before{left:0;right:0;top:50%;height:1px;} .radar .r-cross::after{top:0;bottom:0;left:50%;width:1px;} .radar .r-cross{position:absolute;inset:0;} /* rotierender Sweep */ .radar .r-sweep{ position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 0deg, rgba(44,123,229,.42), rgba(44,123,229,.10) 18%, transparent 34%); -webkit-mask:radial-gradient(closest-side,transparent 28%,#000 29%); mask:radial-gradient(closest-side,transparent 28%,#000 29%); animation:radar-sweep 7s linear infinite; } /* Kern */ .radar .r-core{ position:absolute;inset:0;margin:auto;width:10px;height:10px;border-radius:50%; background:var(--hit); box-shadow:0 0 0 4px rgba(255,90,54,.16), 0 0 18px rgba(255,90,54,.55); animation:radar-core 3.2s ease-in-out infinite; } /* Blips */ .radar .r-blip{ position:absolute;width:7px;height:7px;border-radius:50%; background:var(--signal-2);box-shadow:0 0 9px var(--signal-2); animation:radar-blip 7s ease-out infinite;opacity:0; } .radar .b1{top:24%;left:66%;animation-delay:.6s;} .radar .b2{top:61%;left:31%;animation-delay:2.9s;} .radar .b3{top:41%;left:78%;animation-delay:5.0s;} @keyframes radar-sweep{to{transform:rotate(360deg);}} @keyframes radar-core{0%,100%{opacity:.85;}50%{opacity:1;}} @keyframes radar-blip{ 0% {opacity:0;transform:scale(.4);} 6% {opacity:1;transform:scale(1);} 38% {opacity:.55;} 70%,100%{opacity:0;transform:scale(1.5);} } @media (prefers-reduced-motion: reduce){ .radar .r-sweep,.radar .r-core,.radar .r-blip{animation:none;} .radar .r-blip{opacity:.8;} } @media (max-width:900px){ .radar{width:230px;height:230px;right:-30px;opacity:.55;} } /* Radar-Ringe (Unterseiten, ruhig) */ .rings{position:absolute;top:50%;right:6%;transform:translateY(-50%); width:520px;height:520px;pointer-events:none;} .rings svg{width:100%;height:100%;} .rings circle{fill:none;stroke:var(--line-strong);stroke-width:1;} .rings .c1{stroke:var(--signal);opacity:0.55;} .rings .c-hit{fill:var(--hit);} @media (prefers-reduced-motion: no-preference){ .rings .spin{animation:spin 90s linear infinite;transform-origin:260px 260px;} .rings .spin-rev{animation:spin-rev 130s linear infinite;transform-origin:260px 260px;} } @keyframes spin{to{transform:rotate(360deg);}} @keyframes spin-rev{to{transform:rotate(-360deg);}} /* ================================================================ KENNZAHLEN-LEISTE — dunkel ================================================================ */ .signal-strip{ display:flex;background:var(--ink-strip); border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .signal-strip .inner{display:flex;width:100%;max-width:var(--maxw);margin:0 auto;} .signal-item{flex:1;padding:22px 28px;border-right:1px solid var(--line);} .signal-item:last-child{border-right:none;} .signal-item .val{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--signal-2);} .signal-item .lbl{font-family:var(--mono);font-size:10.5px;color:var(--steel); letter-spacing:0.08em;text-transform:uppercase;margin-top:6px;} /* ================================================================ INHALTSSEKTIONEN — hell ================================================================ */ .section{padding:72px 0;background:var(--paper);color:var(--ink);} .section.alt{background:var(--paper-dim);} .section.dark{background:var(--ink);color:var(--paper);} .section.dark .lede{color:var(--steel);} .h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,32px); text-transform:uppercase;max-width:20ch;} .lede{max-width:56ch;color:var(--on-paper);font-size:15px;margin-top:14px;} /* Seitenkopf der Unterseiten — dunkel */ .pagehead{ background:var(--hero-bg);color:var(--paper);padding:76px 0 60px; border-bottom:1px solid var(--line); } .pagehead h1{font-size:clamp(28px,4vw,50px);font-weight:800;text-transform:uppercase; line-height:1.05;max-width:18ch;margin-top:20px;} .pagehead p{margin-top:20px;max-width:52ch;color:var(--steel);font-size:16px;} /* ================================================================ KARTEN — hell, eine dunkel hervorgehoben ================================================================ */ .cards{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:1px; background:var(--line-paper);margin-top:36px;border:1px solid var(--line-paper);} .cards-3{grid-template-columns:repeat(3,1fr);} .cards-2{grid-template-columns:repeat(2,1fr);} .card{background:var(--paper);padding:28px 26px;} .section.alt .card{background:var(--paper-dim);} .card.emph{background:var(--ink);color:var(--paper);} .card .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em; text-transform:uppercase;color:var(--hit);} .card.emph .tag{color:var(--signal-2);} .card h4{font-size:19px;margin:12px 0 10px;text-transform:uppercase;} .card p{font-size:13.5px;color:var(--on-paper);} .card.emph p{color:var(--steel);} .card .more{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:11px; letter-spacing:0.08em;text-transform:uppercase;color:var(--signal);} .card.emph .more{color:var(--signal-2);} /* Säulen (dunkel, 3-spaltig) */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:2px;overflow:hidden;} .pillar{background:var(--ink);padding:32px 28px;} .pillar .num{font-family:var(--mono);font-size:12px;color:var(--hit);letter-spacing:0.1em;} .pillar h3{font-size:22px;text-transform:uppercase;margin:14px 0 12px;color:var(--paper);} .pillar p{color:var(--steel);font-size:14.5px;} .pillar .proof{margin-top:16px;padding-top:16px;border-top:1px solid var(--line); font-family:var(--mono);font-size:12px;color:var(--signal-2);letter-spacing:0.02em;} /* ================================================================ TECHNIK-ZWEISPALTER ================================================================ */ .tech-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;} .tech-visual{position:relative;aspect-ratio:1/1;} .tech-visual svg{width:100%;height:100%;} .tech-list{list-style:none;padding:0;margin:26px 0 0;} .tech-list li{padding:18px 0;border-top:1px solid var(--line-paper);display:flex;gap:16px;} .section.dark .tech-list li{border-top-color:var(--line);} .tech-list .k{font-family:var(--mono);font-size:12px;color:var(--signal);flex:none;width:30px;} .section.dark .tech-list .k{color:var(--signal-2);} .tech-list b{font-family:var(--display);font-weight:700;font-size:15px; text-transform:uppercase;display:block;margin-bottom:4px;} .tech-list p{font-size:13.5px;color:var(--on-paper);} .section.dark .tech-list p{color:var(--steel);} /* ================================================================ ZITAT — dunkel ================================================================ */ .quote-block{background:var(--ink);color:var(--paper);padding:72px 0;} .quote-block blockquote{font-family:var(--display);font-weight:700; font-size:clamp(20px,2.6vw,30px);max-width:30ch;line-height:1.25;margin:0;} .quote-block .attr{margin-top:22px;font-family:var(--mono);font-size:12.5px;color:var(--steel);} .quote-block .attr b{color:var(--signal-2);} /* ================================================================ REFERENZEN — hell ================================================================ */ .ref-strip{background:var(--paper);padding:44px 0 60px;} .ref-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;} .ref-chip{font-family:var(--mono);font-size:11.5px;letter-spacing:0.04em; border:1px solid var(--line-paper-2);color:var(--on-paper);padding:8px 14px;border-radius:20px;} /* ================================================================ ABSCHLUSS-CTA — dunkel ================================================================ */ .close-cta{background:var(--cta-bg);padding:64px 0;border-top:1px solid var(--line); color:var(--paper);} .close-cta h3{font-size:clamp(22px,2.8vw,30px);text-transform:uppercase; max-width:18ch;color:var(--paper);} .close-cta .ctas{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;} /* ================================================================ WEITERE BAUSTEINE (im Konzept-Stil ergänzt) ================================================================ */ /* FAQ */ .faq-cat{font-family:var(--mono);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase; color:var(--gold);margin:44px 0 16px;display:flex;align-items:center;gap:12px;} .faq-cat::after{content:"";flex:1;height:1px;background:var(--line-paper);} .faq-cat:first-of-type{margin-top:0;} details.faq{border:1px solid var(--line-paper);background:var(--paper);margin-bottom:-1px;} details.faq summary{cursor:pointer;list-style:none;padding:18px 22px; font-family:var(--display);font-weight:700;font-size:15px;text-transform:uppercase; display:flex;justify-content:space-between;gap:18px;align-items:flex-start;} details.faq summary::-webkit-details-marker{display:none;} details.faq summary:hover{color:var(--signal);} details.faq summary::after{content:"+";font-family:var(--mono);font-size:18px; color:var(--hit);line-height:1;flex:none;} details.faq[open] summary::after{content:"–";} details.faq .ans{padding:0 22px 20px;color:var(--on-paper);font-size:14px;} /* Team */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--line-paper);border:1px solid var(--line-paper);} .member{background:var(--paper);padding:22px 20px;} .section.alt .member{background:var(--paper-dim);} .member .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center; background:var(--ink);color:var(--signal-2);font-family:var(--mono);font-size:13px; font-weight:600;margin-bottom:14px;} .member .nm{font-family:var(--display);font-weight:700;font-size:14px;text-transform:uppercase; line-height:1.25;} .member .rl{font-family:var(--mono);font-size:10.5px;color:var(--on-paper);margin-top:6px; letter-spacing:0.04em;} /* Markenfamilie */ .brands{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-paper); border:1px solid var(--line-paper);margin-top:28px;} .brand{background:var(--paper);padding:24px 22px;} .section.alt .brand{background:var(--paper-dim);} .brand h4{font-size:15px;text-transform:uppercase;} .brand p{font-size:13px;color:var(--on-paper);margin-top:8px;} .brand.is-self{background:var(--ink);color:var(--paper);} .brand.is-self p{color:var(--steel);} /* Werbemittel-Formate */ .formats{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;padding:30px; border:1px solid var(--line-paper);background:var(--paper);margin-top:28px;} .section.alt .formats{background:var(--paper-dim);} .fmt{display:flex;flex-direction:column;gap:8px;align-items:center;} .fmt .box{border:1px solid var(--signal);background:rgba(44,123,229,0.10);} .fmt .lbl{font-family:var(--mono);font-size:11px;color:var(--on-paper); font-variant-numeric:tabular-nums;} .note{font-family:var(--mono);font-size:11.5px;letter-spacing:0.04em;color:var(--on-paper-3); margin-top:16px;} .section.dark .note{color:var(--steel-dim);} /* Stellenanzeigen */ .job{border:1px solid var(--line-paper);background:var(--paper);padding:30px 28px; margin-bottom:-1px;} .job h3{font-size:19px;text-transform:uppercase;} .job .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;} .job .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase; padding:6px 12px;border:1px solid var(--line-paper-2);color:var(--on-paper);border-radius:20px;} .job ul{margin:16px 0 0;padding-left:20px;color:var(--on-paper);font-size:14px;} .job ul li{margin-bottom:7px;} /* Formular */ .form{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .field{display:flex;flex-direction:column;gap:8px;} .field.full{grid-column:1/-1;} .field label{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em; text-transform:uppercase;color:var(--on-paper);} .field input,.field textarea,.field select{ font-family:var(--body);font-size:15px;color:var(--ink);background:var(--paper); border:1px solid var(--line-paper-2);border-radius:3px;padding:13px 15px; transition:border-color .2s;} .field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--signal);outline:none;} .field textarea{resize:vertical;min-height:130px;} .form-note{grid-column:1/-1;font-size:12.5px;color:var(--on-paper);} /* Kontaktdaten */ .contact-info{display:flex;flex-direction:column;gap:16px;margin-top:20px;} .contact-info .row{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;} .contact-info .row svg{width:18px;height:18px;color:var(--signal);flex:none;margin-top:3px;} .contact-info .row span{color:var(--on-paper);} /* Bild-Platzhalter */ .imgslot{border:1px dashed var(--line-paper-2);background:var(--paper-dim); display:grid;place-items:center;text-align:center;padding:34px;min-height:220px;} .imgslot .ic{width:38px;height:38px;color:var(--signal);opacity:.6;margin:0 auto 12px;} .imgslot .t{font-family:var(--display);font-weight:700;font-size:15px;text-transform:uppercase;} .imgslot .s{font-size:13.5px;color:var(--on-paper);margin-top:6px;max-width:38ch;} /* ================================================================ FUSSZEILE — dunkel ================================================================ */ .site-footer{background:var(--ink);color:var(--steel);padding:60px 0 36px;} .foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;} .site-footer .logo{color:var(--paper);margin-bottom:16px;} .site-footer address{font-style:normal;color:var(--steel);font-size:13.5px;line-height:1.9;} .foot h5{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase; color:var(--steel);margin:0 0 14px;} .foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:13.5px;} .foot ul a{color:var(--paper);opacity:.85;transition:color .2s,opacity .2s;} .foot ul a:hover{color:var(--signal-2);opacity:1;} .foot-btm{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:44px; padding-top:26px;border-top:1px solid var(--line); font-family:var(--mono);font-size:12px;color:var(--steel-dim);} /* ================================================================ RESPONSIV ================================================================ */ @media (max-width:900px){ .wrap{padding:0 20px;} .site-nav .inner{padding:16px 20px;} .navlinks{ display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0; background:var(--paper);border-bottom:1px solid var(--line-paper);padding:8px 20px 18px; box-shadow:0 20px 40px -20px rgba(0,0,0,.3); } .navlinks.open{display:flex;} .navlinks a{padding:13px 0;border-bottom:1px solid var(--line-paper);font-size:15px;} .navlinks .submenu{position:static;opacity:1;visibility:visible;transform:none; border:0;box-shadow:none;background:transparent;padding:0 0 0 14px;min-width:0;} .menu-toggle{display:grid;place-items:center;} .nav-cta{display:none;} .hero{padding:60px 0 56px;} .rings{width:340px;height:340px;right:-40px;opacity:0.6;} .cards,.cards-3,.cards-2,.pillars{grid-template-columns:1fr;} .tech-wrap{grid-template-columns:1fr;gap:32px;} .signal-strip .inner{flex-wrap:wrap;} .signal-item{flex:1 1 50%;border-bottom:1px solid var(--line);} .team-grid{grid-template-columns:1fr 1fr;} .brands{grid-template-columns:1fr;} .foot{grid-template-columns:1fr 1fr;} .form{grid-template-columns:1fr;} .section{padding:56px 0;} } @media (max-width:560px){ .team-grid{grid-template-columns:1fr;} .signal-item{flex:1 1 100%;} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important;} } /* ================================================================ KAMPAGNEN-KONSOLE (Produkte-Seite) Produktvorschau der Steuerungsoberfläche. Farben ausschließlich aus dem Konzept — Cyan trägt Chart, Balken und Deltas. ================================================================ */ .console{ border:1px solid var(--line);border-radius:16px;overflow:hidden; background:linear-gradient(180deg,var(--ink-2),#0D1424); box-shadow:0 40px 100px -40px rgba(0,0,0,.7); margin-top:32px; } .console-bar{ display:flex;align-items:center;gap:12px;padding:16px 20px; border-bottom:1px solid var(--line); } .console-bar .dots{display:flex;gap:7px;flex:none;} .console-bar .dots i{width:11px;height:11px;border-radius:50%;display:block;} .console-bar .t{font-family:var(--mono);font-size:13px;color:var(--steel);letter-spacing:.04em;} .console-bar .live{ margin-left:auto;display:inline-flex;align-items:center;gap:8px; font-family:var(--mono);font-size:12px;color:var(--signal-2);letter-spacing:.12em; } .console-bar .live i{ width:8px;height:8px;border-radius:50%;background:var(--signal-2); box-shadow:0 0 10px var(--signal-2);animation:console-blink 1.9s ease-in-out infinite; } @keyframes console-blink{0%,100%{opacity:1;}50%{opacity:.32;}} @media (prefers-reduced-motion:reduce){.console-bar .live i{animation:none;}} .console-body{padding:22px;display:grid;gap:16px;} .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .kpi{border:1px solid var(--line);border-radius:12px;padding:20px 22px; background:rgba(255,255,255,.022);} .kpi .k-l{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--steel);} .kpi .k-v{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,34px); color:var(--paper);margin-top:12px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;} .kpi .k-d{font-family:var(--mono);font-size:12.5px;color:var(--signal-2);margin-top:8px;} .kpi .k-d.plain{color:var(--steel);} .console-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;} .cpanel{border:1px solid var(--line);border-radius:12px;padding:20px; background:rgba(255,255,255,.022);} .cpanel .ph{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono); font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel); margin-bottom:18px;} .cpanel svg{width:100%;height:auto;display:block;} .regions .r{display:grid;grid-template-columns:78px 1fr 32px;gap:12px;align-items:center; font-family:var(--mono);font-size:13px;margin-bottom:16px;} .regions .r:last-child{margin-bottom:0;} .regions .rn{color:var(--paper);} .regions .rb{height:7px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden;} .regions .rb i{display:block;height:100%;border-radius:4px; background:linear-gradient(90deg,var(--signal),var(--signal-2));} .regions .rv{text-align:right;color:var(--paper);font-variant-numeric:tabular-nums;} .console-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em; color:var(--steel-dim);margin-top:14px;} @media (max-width:900px){ .kpis{grid-template-columns:1fr;} .console-grid{grid-template-columns:1fr;} .console-body{padding:16px;} } /* ================================================================ LOGO-RASTER (Kunden & Partner) Zellen im Konzept-Stil: Haarlinien-Gitter, Logo zentriert. ================================================================ */ .logos{ display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px;background:var(--line-paper);border:1px solid var(--line-paper);margin-top:26px; } .logos .cell{ background:var(--paper);display:grid;place-items:center; padding:26px 20px;min-height:112px; } .section.alt .logos .cell{background:var(--paper-dim);} .logos img{ max-width:100%;width:auto;height:auto;max-height:34px;object-fit:contain; transition:opacity .2s; } .logos .cell:hover img{opacity:.65;} /* Zertifikats-Badges dürfen höher stehen */ .logos.badges .cell{min-height:150px;} .logos.badges img{max-height:78px;} @media (max-width:900px){ .logos{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));} .logos .cell{min-height:92px;padding:18px 14px;} .logos img{max-height:26px;} .logos.badges .cell{min-height:120px;} .logos.badges img{max-height:62px;} } /* ================================================================ PRODUKT-MODULE (Startseite + Produktseiten) Technische Karten: Mono-Kopf, KPI, Sparkline, Details. Cyan = --signal-2, Blau = --signal (Konzeptfarben). ================================================================ */ .h2.tc{text-transform:none;} .h2 .hl{color:var(--signal-2);} .modules{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;} .module{ border:1px solid var(--line);border-radius:14px;overflow:hidden; background:rgba(255,255,255,.022);display:flex;flex-direction:column; transition:border-color .25s,transform .25s; } .module:hover{border-color:rgba(111,214,255,.40);transform:translateY(-4px);} .module .m-head{ display:flex;justify-content:space-between;gap:12px;padding:15px 22px; border-bottom:1px solid var(--line); font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--steel); } .module .m-body{padding:24px 22px 22px;display:flex;flex-direction:column;flex:1;} .module .m-title{font-family:var(--display);font-weight:700;font-size:23px;color:var(--paper);} .module .m-desc{color:var(--steel);font-size:15px;margin-top:12px;line-height:1.5;} .module .m-kpi{margin-top:auto;padding-top:26px;font-family:var(--mono);font-size:14px;color:var(--steel);} .module .m-kpi b{font-family:var(--display);font-weight:700;font-size:26px;color:var(--signal-2); letter-spacing:-.01em;margin-right:9px;font-variant-numeric:tabular-nums;} .module .m-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;} .module .m-foot .spark{width:120px;height:34px;flex:none;} .module .m-more{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--signal);white-space:nowrap;transition:color .2s;} .module .m-more:hover{color:var(--signal-2);} .modules-note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--steel-dim);margin-top:16px;} /* Einzel-Modul auf den Produktseiten */ .module-solo{max-width:440px;} @media (max-width:900px){ .modules{grid-template-columns:1fr;} .module-solo{max-width:none;} }