/* Theme Name: Strategion Theme URI: https://strategion.de Author: Strategion GmbH Description: Corporate-Theme für strategion.de. KI-Managementberatung. Enthält Seitentemplates für Startseite, Leistungen mit Beratung, Umsetzung und Betrieb, Lösungen, StrategionChat, Referenzen, Excellence, Ordnungsrahmen, Wissen, Veranstaltungen, Kontakt, Strategion GmbH, Presse, Karriere, Impressum und Datenschutz. Version: 2.0.9.7 Requires at least: 6.0 Requires PHP: 7.4 License: proprietär Text Domain: strategion */ /* ════ Aufbau ════ Das einzige Stylesheet der Website (seit 26.09.2026, vorher 17 Dateien). Die Teile stehen in der bisherigen Kaskadenfolge: Grundlage, Hover, Vorlagen (alle auf body.sg-vorlage begrenzt), neu, Startseite (auf body.home begrenzt), v3, farben. Angaben, die nirgends mehr wirkten, sind entfernt, ebenso !important und verdoppelte Klassen (.x.x.x), wo sie nichts entschieden (geprueft an den berechneten Stilen aller Seiten bei 390, 1024 und 1440 px). Farben nur ueber die Tokens unten. Neue Regeln an die Stelle des Bauteils schreiben, keine weitere Ueberschreib-Schicht anlegen. */ /* ════ Farben ════ Die acht Werte des Regelwerks (Design-Regeln, 25.09.2026), jeder mit genau einer Aufgabe. Alle Regeln verweisen auf diese Tokens; die Schreibweise mit -rgb dient Transparenzen: rgb(var(--anthrazit-rgb) / .74). */ :root{--weiss:#FFFFFF;--grund:#F5F5F5;--linie:#DDDDDD;--anthrazit:#2C2C2B;--grau:#444443;--magenta:#B50063;--violett:#571763;--gold:#BC9E78;--weiss-rgb:255 255 255;--grund-rgb:245 245 245;--linie-rgb:221 221 221;--anthrazit-rgb:44 44 43;--grau-rgb:68 68 67;--magenta-rgb:181 0 99;--violett-rgb:87 23 99;--gold-rgb:188 158 120;} /* ════ Teil Grundlage (bis 2.0.3: style.css) ════ */ :root{ --sg-magenta:var(--magenta); --sg-magenta-hell:var(--magenta); /* nur noch das echte Magenta, siehe .sg-exp-lead in assets/neu.css */ --sg-violett:var(--violett); --sg-gold:var(--gold); } @keyframes logoslide{from{transform:translateX(0)}to{transform:translateX(-50%)}} *{box-sizing:border-box} .sg-auswahl{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23444443' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;padding-right:38px !important;cursor:pointer} html{-webkit-text-size-adjust:100%} body{ margin:0; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto} html,body{max-width:100%} @supports (overflow:clip){html,body{overflow-x:clip}} a{color:var(--sg-magenta);text-decoration:none} a:hover{color:var(--sg-violett)} /* Im Hauptinhalt bleibt ein Textlink beim Ueberfahren in der Handlungsfarbe (Violett ordnet nur, 26.09.2026) */ .sg-main a:hover{color:var(--sg-magenta)} h1,h2,h3,h4,p{margin:0} /* Links mitten im Fließtext brauchen mehr als die Farbe, um erkennbar zu sein (WCAG 1.4.1) — der Kontrast von Magenta zu Anthrazit reicht dafür allein nicht. Buttons/CTAs stehen nie in einem

, bleiben also unberührt. */ p a{text-decoration:underline;text-underline-offset:2px} .sg-shell{max-width:1280px;margin:0 auto} .sg-main{max-width:1280px;margin:0 auto} /* Porträts, Schleier bis zum Überfahren */ .sg-portrait{position:relative;overflow:hidden} .sg-portrait .sg-img img{filter:grayscale(100%) contrast(1.03);transition:filter .5s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)} .sg-portrait::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgb(var(--weiss-rgb) / .62);transition:opacity .5s cubic-bezier(.2,.7,.3,1)} .sg-portrait:hover .sg-img img, .sg-portrait:focus-within .sg-img img{filter:none;transform:scale(1.02)} .sg-portrait:hover::after, .sg-portrait:focus-within::after{opacity:0} @media (prefers-reduced-motion:reduce){.sg-portrait .sg-img img{transition:none}} /* Sprunglink und sichtbarer Tastaturfokus */ .sg-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--f-dunkel, var(--anthrazit));color:var(--weiss);padding:12px 20px;font-size:15px} .sg-skip:focus{left:0;color:var(--weiss)} :focus-visible{outline:3px solid var(--magenta);outline-offset:2px} [role="button"]:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--magenta);outline-offset:3px} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto} } /* Kopfbereich der Startseite */ .sg-hero{position:relative;height:calc(100vh - 105px);height:calc(100svh - 105px);min-height:620px;max-height:1000px;overflow:hidden;background:var(--f-dunkel, var(--anthrazit));width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 !important} .admin-bar .sg-hero{height:calc(100vh - 137px);height:calc(100svh - 137px)} .sg-hero-folie{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.4,0,.2,1)} .sg-hero-folie.is-active{opacity:1;pointer-events:auto} .sg-hero-schleier{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgb(var(--anthrazit-rgb) / .82) 0%,rgb(var(--anthrazit-rgb) / .56) 32%,rgb(var(--anthrazit-rgb) / .20) 62%,rgb(var(--anthrazit-rgb) / .06) 100%)} .sg-hero .sg-img{padding:0;background:var(--f-dunkel, var(--anthrazit))} .sg-hero-text{position:absolute;left:calc(max(40px, (100vw - 1280px) / 2 + 40px));right:40px;bottom:120px;max-width:1000px} .sg-hero-leiste{position:absolute;bottom:38px;left:calc(max(40px, (100vw - 1280px) / 2 + 40px));display:flex;align-items:flex-end;gap:38px;flex-wrap:wrap} .sg-hero-reiter{position:relative;padding:0 0 10px;cursor:pointer;background:transparent;font-size:16.5px;font-weight:500;letter-spacing:-.01em;color:var(--linie);border:0;border-bottom:2px solid transparent} .sg-hero-reiter:hover,.sg-hero-reiter:focus-visible{color:var(--linie);border-bottom-color:rgb(var(--magenta-rgb) / .65)} .sg-hero-reiter.is-active{color:var(--weiss);font-weight:700;border-bottom-color:var(--magenta)} .sg-hero-steuer{position:absolute;bottom:32px;right:calc(max(40px, (100vw - 1280px) / 2 + 40px));display:flex;align-items:center;gap:12px} .sg-hero-knopf{width:46px;height:46px;padding:0;border:1px solid rgb(var(--magenta-rgb) / .28);background:rgb(var(--magenta-rgb) / .14);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--weiss);font:inherit;font-size:17px;line-height:1;border-radius:12px} .sg-hero-knopf:hover,.sg-hero-knopf:focus-visible{background:var(--magenta);border-color:var(--magenta)} .sg-hero-pause{width:3px;height:13px;background:currentColor} .sg-hero-play{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px;display:none} .sg-hero-knopf.is-paused .sg-hero-pause{display:none} .sg-hero-knopf.is-paused .sg-hero-play{display:block} @media (prefers-reduced-motion:reduce){.sg-hero-folie{transition:none}} /* Alle Schaltflächen und Verweise wechseln die Farbe im selben Tempo */ a,button,[role="button"],.sg-quick-chip,.sg-cta,.sg-card,.sg-mega-card,.sg-hero-reiter,.sg-hero-knopf,[class^="sgh"],[class*=" sgh"]{transition:background-color .25s ease,border-color .25s ease,color .25s ease} /* Vor-/Zurück- und Pause-Knöpfe blenden beim Hover deutlich langsamer in ein helles Pink über */ .sg-hero-knopf{transition:background-color .45s ease,border-color .45s ease} /* Der Hauptknopf. Es gab dafuer nie eine Grundregel, nur die Hover-Regel darunter — deshalb war der Knopf ueberall nur magentafarbener Text. Masse wie beim Zweitknopf .sg-st-zweit, damit beide nebeneinander auf einer Linie stehen. */ .sg-cta{cursor:pointer} .sg-cta:hover,.sg-cta:focus-visible{background:var(--f-violett-flaeche, var(--violett));color:var(--weiss) !important} /* Auf den dunklen Baendern verschwindet das Violett im Untergrund, dort wechselt der Knopf deshalb auf Weiss. */ .sg-band .sg-cta:hover,.sg-band .sg-cta:focus-visible, .sg-abschluss .sg-cta:hover,.sg-abschluss .sg-cta:focus-visible{background:var(--f-weiss, var(--weiss)) !important;color:var(--sg-tinte) !important} /* Großer Kopfbereich einer Bereichsseite */ .sg-bhero{position:relative;height:620px;background:var(--f-violett-flaeche, var(--violett));width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overflow:hidden;padding:0 !important} .sg-bhero-bild{position:absolute;inset:0} .sg-bhero-bild .sg-img{width:100%;height:100%;padding:0;background:var(--f-violett-flaeche, var(--violett))} .sg-bhero-bild img{width:100%;height:100%;object-fit:cover;display:block} .sg-bhero-schleier{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgb(var(--anthrazit-rgb) / .88) 0%,rgb(var(--anthrazit-rgb) / .60) 34%,rgb(var(--anthrazit-rgb) / .20) 66%,rgb(var(--anthrazit-rgb) / .05) 100%)} .sg-bhero-text{position:absolute;left:calc(max(40px, (100vw - 1280px) / 2 + 40px));right:40px;bottom:146px;max-width:900px} .sg-bhero-reiter{position:absolute;left:calc(max(40px, (100vw - 1280px) / 2 + 40px));right:40px;bottom:38px;display:flex;gap:38px;flex-wrap:wrap;align-items:flex-end} .sg-bhero-reiter a{padding:0 0 10px;border-bottom:2px solid transparent;color:var(--linie);font-size:16.5px;font-weight:500;letter-spacing:-.01em;text-decoration:none} .sg-bhero-reiter a:hover,.sg-bhero-reiter a:focus-visible{color:var(--weiss);border-bottom-color:var(--magenta)} /* Referenzen */ .sg-ref-bild{position:relative;height:440px;overflow:hidden;background:var(--f-sand-tief, var(--grund))} .sg-ref-bild .sg-img{position:absolute;inset:0;width:100%;height:100%;padding:0} .sg-ref-bild img{width:100%;height:100%;object-fit:cover;display:block} .sg-ref-fokus{background:var(--f-sand, var(--grund));display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch;margin-top:0} .sg-ref-fokus-bild{position:relative;min-height:460px;background:var(--f-sand-tief, var(--grund))} .sg-ref-fokus-bild .sg-img{position:absolute;inset:0;width:100%;height:100%;padding:0} .sg-ref-fokus-bild img{width:100%;height:100%;object-fit:cover;display:block} .sg-ref-fokus-text{padding:56px;display:flex;flex-direction:column;justify-content:center} .sg-ref-marke{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--f-grau, var(--grau));border:1px solid var(--f-linie, var(--linie));padding:4px 10px} /* Ansprechpartner */ .sg-ap{background:var(--f-sand, var(--grund));display:grid;grid-template-columns:280px minmax(0,1fr);gap:0;align-items:stretch;margin-top:36px} .sg-ap-bild{position:relative;min-width:0} .sg-ap-bild .sg-img{position:absolute;inset:0;width:100%;height:100%;padding:0} .sg-ap-bild img{width:100%;height:100%;object-fit:cover;display:block} .sg-ap-text{padding:44px 48px 48px} /* Pfad über dem Seitentitel */ .sg-krume{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--f-grau, var(--grau));padding-bottom:26px} .sg-krume a{color:var(--f-grau, var(--grau));text-decoration:none} .sg-krume a:hover,.sg-krume a:focus-visible{color:var(--magenta)} .sg-krume-teiler{color:var(--linie)} .sg-krume-hier{color:var(--anthrazit);font-weight:700} /* Aktueller Unterpunkt im Menü */ .sg-mega-card.ist-hier > div:first-child{color:var(--magenta)} .sg-mega-card.ist-hier > div:first-child::after{content:"";display:inline-block;width:5px;height:5px;background:var(--magenta);border-radius:50%;margin-left:8px;vertical-align:middle} .sg-mob-kind.ist-hier .sg-mob-kind-titel{color:var(--magenta)} /* Kopfbereich, Kategorie und verlinkter Titel */ .sg-hero-marke{display:inline-flex;align-items:center;gap:12px} .sg-hero-strich{width:34px;height:3px;background:var(--gold);flex:0 0 34px} .sg-hero-kicker{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--linie)} .sg-hero-titel{font-weight:700;font-size:58px;line-height:1.04;letter-spacing:-.04em;color:var(--weiss);margin:22px 0 0;max-width:20ch;text-wrap:pretty} .sg-hero-titel a{color:var(--weiss);text-decoration:none;transition:color .3s ease} .sg-hero-titel a:hover,.sg-hero-titel a:focus-visible{color:var(--linie)} .sg-hero-pfeil{display:inline-block;margin-left:.28em;font-size:.5em;color:var(--weiss);opacity:.55;transition:opacity .3s ease} .sg-hero-titel a:hover .sg-hero-pfeil,.sg-hero-titel a:focus-visible .sg-hero-pfeil{opacity:1} /* Karriere */ .sg-kar-hero{position:relative;height:600px;overflow:hidden;background:var(--f-violett-flaeche, var(--violett));width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 !important} .sg-kar-hero-bild{position:absolute;inset:0} .sg-kar-hero-bild .sg-img{width:100%;height:100%;padding:0;background:var(--f-violett-flaeche, var(--violett))} .sg-kar-hero-bild img{width:100%;height:100%;object-fit:cover;display:block} .sg-kar-hero-schleier{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgb(var(--anthrazit-rgb) / .90) 0%,rgb(var(--anthrazit-rgb) / .62) 34%,rgb(var(--anthrazit-rgb) / .22) 66%,rgb(var(--anthrazit-rgb) / .06) 100%)} .sg-kar-hero-text{position:absolute;left:calc(max(40px, (100vw - 1280px) / 2 + 40px));right:40px;bottom:56px;max-width:900px} .sg-kar-bewerbung{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start;border-top:1px solid var(--f-linie, var(--linie));padding-top:40px} .sg-kar-bewerbung-frage{grid-column:1 / -1} .sg-kar-frage{background:var(--f-sand, var(--grund));padding:32px 36px 34px;margin-top:36px} .sg-kar-person{display:flex;gap:12px;align-items:flex-start;margin-top:26px;padding-top:24px;border-top:1px solid var(--f-linie, var(--linie))} .sg-kar-filter{display:flex;align-items:flex-end;gap:2px;margin-top:30px;flex-wrap:wrap} .sg-kar-feld{position:relative;display:block;flex:1 1 200px;min-width:0;background:var(--f-sand, var(--grund));border-bottom:2px solid var(--linie);padding:12px 16px 11px;cursor:pointer;transition:background-color .25s ease,border-color .25s ease} .sg-kar-feld.ist-aktiv{background:var(--f-sand, var(--grund));border-bottom-color:var(--magenta)} .sg-kar-feld-titel{display:block;} .sg-kar-feld.ist-aktiv .sg-kar-feld-titel{color:var(--magenta)} .sg-kar-knopf{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:6px;border:0;background:transparent;padding:0;font:inherit;font-size:16px;font-weight:700;letter-spacing:-.015em;color:var(--anthrazit);cursor:pointer;text-align:left} .sg-kar-knopf:is(:hover,:focus-visible){color:var(--sg-magenta)} .sg-kar-feld-pfeil{display:inline-block;width:10px;height:10px;flex:0 0 10px;color:var(--f-grau, var(--grau));transform-origin:center;backface-visibility:hidden;will-change:transform;transition:transform .22s cubic-bezier(.32,.72,0,1)} .sg-kar-feld.ist-offen .sg-kar-feld-pfeil{transform:rotate(180deg);color:var(--magenta)} .sg-kar-liste{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:20;background:var(--f-weiss, var(--weiss));border:1px solid var(--f-linie, var(--linie));box-shadow:0 14px 34px rgb(var(--anthrazit-rgb) / .14);padding:6px 0;max-height:320px;overflow:auto} .sg-kar-liste button{width:100%;border:0;background:transparent;padding:11px 18px;font:inherit;font-size:15.5px;color:var(--anthrazit);text-align:left;cursor:pointer;transition:background-color .18s ease,color .18s ease} .sg-kar-liste button:hover,.sg-kar-liste button:focus-visible{background:var(--f-sand, var(--grund));color:var(--magenta);outline:none} .sg-kar-liste button.ist-gewaehlt{color:var(--magenta);font-weight:700;background:var(--f-sand, var(--grund))} .sg-kar-reset{border:0;background:transparent;padding:0;font:inherit;font-size:14px;font-weight:700;color:var(--magenta);cursor:pointer} .sg-kar-reset:hover{color:var(--magenta)} .sg-kar-zeile{border-top:1px solid var(--f-linie, var(--linie));padding:30px 0 32px;display:grid;grid-template-columns:minmax(0,1fr) 250px 44px;gap:32px;align-items:center;text-decoration:none;transition:background-color .25s ease} .sg-kar-zeile:hover{background:var(--f-sand, var(--grund))} .sg-kar-leer{border-top:1px solid var(--f-linie, var(--linie));text-align:center} .sg-kar-stimmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:48px;align-items:start} .sg-kar-stimme{min-width:0;display:flex;flex-direction:column} .sg-kar-stimme-bild{position:relative;height:300px;overflow:hidden;background:var(--f-violett-flaeche, var(--violett))} .sg-kar-stimme-bild .sg-img{position:absolute;inset:0;width:100%;height:100%;padding:0;background:var(--f-violett-flaeche, var(--violett))} .sg-kar-stimme-bild img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block} .sg-kar-zitat{font-size:17px;line-height:1.6;color:var(--grund);margin:22px 0 0;letter-spacing:-.01em;text-wrap:pretty} .sg-kar-stimme-name{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:14px;color:var(--weiss)} .sg-kar-stimme-strich{width:22px;height:2px;background:var(--gold);flex:0 0 22px;margin-top:9px} .sg-kar-zus{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start;margin-top:56px;padding:44px 0 92px;border-top:1px solid var(--grau)} .sg-kar-gruende{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin-top:36px} .sg-kar-grund{background:var(--f-sand, var(--grund));padding:36px 40px 40px;display:flex;gap:24px;align-items:flex-start} .sg-kar-kununu{background:var(--f-sand, var(--grund));padding:48px 52px 52px;display:grid;grid-template-columns:.72fr 1.28fr;gap:64px;align-items:center} .sg-kar-kununu-werte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 44px} .sg-kar-kontakt{background:var(--f-sand, var(--grund));display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:stretch} .sg-kar-kontakt-bild{position:relative;min-width:0;min-height:420px} .sg-kar-kontakt-bild .sg-img{position:absolute;inset:0;width:100%;height:100%;padding:0} .sg-kar-kontakt-bild img{width:100%;height:100%;object-fit:cover;display:block} .sg-kar-kontakt-text{padding:52px 56px 56px;display:flex;flex-direction:column;justify-content:center} /* Footer */ /* ── Footer ────────────────────────────────────────────────────────────── Der Abschluss der Seite traegt die Seitenkarte. Sie folgt der Hauptnavigation, damit es keine zweite Pflegestelle gibt. Oben steht das Magenta-Band aus dem Seitenkopf: die Unterseiten schliessen ihren Kopf damit, der Footer oeffnet damit. Die Spaltenueberschriften tragen den Magenta-Strich, den auch die Abschnitte auf den Seiten tragen - so gehoert der Footer sichtbar zum Haus und wirkt nicht wie ein angesetztes Modul. */ .sg-fuss{position:relative;overflow:hidden;} .sg-fuss-inner{position:relative;padding-top:88px} /* Marke und Seitenkarte nebeneinander. Die Marke bekommt mehr Luft als eine Linkspalte, weil dort der Satz und der LinkedIn-Knopf stehen. */ .sg-fuss-oben{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,3fr);gap:72px;align-items:start;padding-bottom:56px} .sg-fuss-logo{margin-top:-6px} /* Der Satz gehoert zum Logo, nicht zur Spalte: Beide stehen in einem Block, der nur so breit ist wie das Logo. Dadurch sitzt der Satz mittig darunter. */ .sg-fuss-marke-kopf{display:inline-block} .sg-fuss-satz{font-size:14.5px;line-height:1.5;color:var(--linie);margin:14px 0 0;text-align:center;text-wrap:pretty} /* Telefon, E-Mail und LinkedIn stehen als drei gleichrangige Zeilen unter dem Satz. LinkedIn ist einer von drei Wegen, kein Aufruf - deshalb kein Knopf. */ .sg-fuss-kontakt{margin-top:26px} .sg-fuss-zeile{align-items:center;transition:color .2s ease} .sg-fuss-zeile:hover,.sg-fuss-zeile:focus-visible{color:var(--sg-gold)} .sg-fuss-icon{width:18px;height:18px;flex:0 0 18px;color:var(--sg-gold);transition:color .2s ease} .sg-fuss-zeile:hover .sg-fuss-icon,.sg-fuss-zeile:focus-visible .sg-fuss-icon{color:var(--sg-gold)} .sg-fuss-karte{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px} .sg-fuss-kopf{display:block;font-weight:700;color:var(--weiss);transition:color .22s ease} .sg-fuss-kopf:hover,.sg-fuss-kopf:focus-visible{color:var(--sg-gold)} .sg-fuss-kopf-still{cursor:default} .sg-fuss-strich{display:block;width:32px;height:3px;background:var(--sg-magenta);margin-bottom:14px} .sg-fuss-liste a{display:block;padding:5px 0;transition:color .2s ease} .sg-fuss-liste a:hover,.sg-fuss-liste a:focus-visible{color:var(--weiss)} /* Hier finden Sie uns. Dasselbe Raster wie oben: links die Ueberschrift in der Breite der Markenspalte, rechts vier Spalten wie die Seitenkarte. So steht jeder Ort genau unter einer Spalte der Seitenkarte. */ .sg-fuss-orte{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,3fr);gap:72px;align-items:start;padding:40px 0 44px;border-top:1px solid var(--grau);border-bottom:1px solid var(--grau)} .sg-fuss-orte-reihe{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px} .sg-fuss-ort-stadt{align-items:center;gap:8px;} .sg-fuss-ort-haus{color:var(--weiss);font-size:15.5px} .sg-fuss-ort-weg{display:inline-block;transition:color .2s ease} .sg-fuss-ort-weg:hover,.sg-fuss-ort-weg:focus-visible{color:var(--sg-gold)} .sg-fuss-li{width:13px;height:13px;flex:0 0 13px;margin-top:-2px} .sg-fuss-at::before{content:"@"} .sg-fuss a:focus-visible{outline:2px solid var(--sg-gold);outline-offset:3px} .sg-fuss-link{display:block;color:var(--weiss);text-decoration:none;transition:color .2s ease} .sg-fuss-link:hover,.sg-fuss-link:focus-visible{color:var(--sg-gold)} .sg-fuss-unten{align-items:center;justify-content:space-between;} .sg-fuss-recht a,.sg-menu-legal a{transition:color .2s ease} .sg-fuss-recht a:hover,.sg-menu-legal a:hover{color:var(--weiss)} /* Die Seitenkarte faltet sich mit der Breite: vier Spalten, zwei, eine. Auf dem Telefon steht sie einspaltig - das ist lang, aber lesbar, und Ueberschrift und Liste bleiben beieinander. */ @media (max-width:1180px){ .sg-fuss-oben{grid-template-columns:minmax(0,1fr);gap:52px} .sg-fuss-karte{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px} .sg-fuss-orte{grid-template-columns:minmax(0,1fr);gap:26px} .sg-fuss-orte-reihe{gap:32px} } @media (max-width:900px){ .sg-fuss-karte{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px} .sg-fuss-orte-reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 32px} } @media (max-width:620px){ .sg-fuss-orte{padding:32px 0 36px} } @media (max-width:330px){ .sg-fuss-orte-reihe{grid-template-columns:minmax(0,1fr)} } .sg-menu-legal{display:flex;gap:28px;list-style:none;margin:0;padding:0} /* Volle Breite aus der Inhaltsspalte heraus */ .sg-voll{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} /* Kopfbereich einer Unterseite. Gebaut wie der Umschlag eines Strategion Reports: dunkle Flaeche, weisse Schrift, darunter das Magenta-Band. Das Band nennt die Seite beim Namen und oeffnet auch den Footer, so beginnt und endet jede Seite mit derselben Figur. */ .sg-seitenkopf{background:var(--f-violett-flaeche, var(--violett));width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:88px 0 84px !important} .sg-seitenkopf-inner{max-width:1280px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:start} .sg-seitenkopf .sg-kopf-titel{font-weight:700;font-size:54px;line-height:1.04;letter-spacing:-.04em;color:var(--weiss);margin:0;max-width:20ch;text-wrap:pretty} .sg-kopf-absaetze{padding-top:6px} .sg-seitenkopf .sg-kopf-absaetze p{font-size:18px;line-height:1.7;color:var(--linie);margin:0;max-width:50ch;text-wrap:pretty} .sg-seitenkopf .sg-kopf-absaetze p + p{margin-top:18px} .sg-seitenkopf .sg-kopf-absaetze a{color:var(--weiss)} .sg-seitenkopf .sg-kopf-absaetze strong{color:var(--weiss)} .sg-kopf-band{display:block;background:var(--sg-magenta);color:var(--weiss);width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} .sg-kopf-band-inner{max-width:1280px;margin:0 auto;padding:17px 40px;min-height:56px;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:15px;font-weight:700;line-height:1.4;letter-spacing:-.005em} .sg-kopf-band a{color:var(--weiss);text-decoration:none;transition:color .2s ease} .sg-kopf-band a:hover,.sg-kopf-band a:focus-visible{color:var(--weiss);text-decoration:underline;text-underline-offset:4px} .sg-kopf-band a:focus-visible{outline:2px solid var(--f-weiss, var(--weiss));outline-offset:4px} .sg-kopf-band-teiler{color:var(--weiss);font-weight:400} /* Im Footer steht das Band an der Oberkante, rechts nur der Weg nach oben */ .sg-fuss-leiste{width:auto;max-width:none;margin:0 -40px;padding:0 40px} .sg-fuss-leiste .sg-kopf-band-inner{justify-content:flex-end;padding-left:0;padding-right:0} .sg-fuss-leiste .sg-fuss-hoch{color:var(--weiss)} /* Dunkles Zwischenband auf Unterseiten */ .sg-band{background:var(--f-violett-flaeche, var(--violett));width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:var(--sg-abschnitt);padding:0 !important} .sg-band-inner{max-width:1280px;margin:0 auto;padding:var(--sg-abschnitt) 40px} /* Abschlussband am Seitenende, wie das Kontaktband der Startseite */ .sg-abschluss{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);display:flex;align-items:center;overflow:hidden;padding:0 !important} .sg-abschluss-bild{position:absolute;inset:0} .sg-abschluss-bild .sg-img{width:100%;height:100%;padding:0;background:var(--f-violett-flaeche, var(--violett))} .sg-abschluss-bild img{width:100%;height:100%;object-fit:cover;display:block} .sg-abschluss-inner{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:var(--sg-abschnitt) 40px} /* Ansprechpartner als Abschlussband, im Mass der Abschluesse aus den Vorlagen */ .sg-kb-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);} .sg-kb-grid > *{min-width:0} .sg-kb-titel{margin:0;} .sg-kb-text{margin:20px 0 0;text-wrap:pretty} /* Mit Portraet: das Bild steht buendig links in der Karte, hochkant und ohne Rahmen, daneben Name und Funktion, darunter die beiden Wege. */ .sg-kb-person{grid-area:person;min-width:0} .sg-kb-name{letter-spacing:-.02em;line-height:1.3;text-wrap:balance} .sg-kb-wege{grid-area:wege;} @media (max-width:520px){ .sg-kb-karte.mit-bild{grid-template-columns:104px minmax(0,1fr);grid-template-areas:"bild person" "wege wege";grid-template-rows:auto auto} .sg-kb-portraet{min-height:130px} .sg-kb-karte.mit-bild .sg-kb-person{padding:18px 18px 16px;align-self:center} .sg-kb-karte.mit-bild .sg-kb-wege{padding:18px;border-top:1px solid var(--grau)} } .sg-kb-tel{font-size:15px;text-decoration:none;transition:color .2s ease} .sg-kb-tel:hover,.sg-kb-tel:focus-visible{color:var(--sg-gold)} @media (max-width:1023px){.sg-kb-grid{grid-template-columns:minmax(0,1fr)}} /* Kartenband, dunkel wie Hero und Kontaktband */ .sg-karten{background:var(--f-violett-flaeche, var(--violett));width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:var(--sg-abschnitt);padding:var(--sg-abschnitt) 0 var(--sg-abschnitt) !important} /* Kopf des Leistungsbandes: Ueberschrift links, Einleitung rechts daneben. Untereinander blieb die rechte Haelfte des Bandes leer. */ .sg-karten-kopf{max-width:1280px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(28px,3.4vw,56px);align-items:start} .sg-karten-einleitung .sg-karten-text:first-child{margin-top:0} .sg-karten-steuer{align-self:end} .sg-karten-band{width:100%;max-width:none;margin:0;padding:44px 0 0;overflow:hidden;mask-image:linear-gradient(90deg,rgb(var(--anthrazit-rgb) / 0) 0,#000 4%,#000 94%,rgb(var(--anthrazit-rgb) / 0) 100%);-webkit-mask-image:linear-gradient(90deg,rgb(var(--anthrazit-rgb) / 0) 0,#000 4%,#000 94%,rgb(var(--anthrazit-rgb) / 0) 100%)} .sg-karten-band > div{padding-left:calc(max(40px, (100vw - 1280px) / 2 + 40px));padding-bottom:0} .sg-karte-motiv{position:relative;height:420px;overflow:hidden;background:var(--f-violett-flaeche, var(--violett))} .sg-karten .sg-img{padding:0;background:var(--f-violett-flaeche, var(--violett))} .sg-karte-schleier{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgb(var(--anthrazit-rgb) / .92) 0%,rgb(var(--anthrazit-rgb) / .68) 36%,rgb(var(--anthrazit-rgb) / .20) 68%,rgb(var(--anthrazit-rgb) / .02) 100%)} .sg-karte-text{position:absolute;left:28px;right:28px;bottom:28px} .sg-card:hover .sg-karte-link,.sg-card:focus-visible .sg-karte-link{color:var(--weiss)} /* Kontaktband und Quicklinks am Fuß der Startseite */ .sg-quick{background:var(--f-weiss, var(--weiss));border-top:1px solid var(--f-linie, var(--linie));width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:72px 0 78px !important} .sg-quick-inner{max-width:1280px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start} .sg-quick-chip{display:inline-block;} .sg-quick-chip:hover,.sg-quick-chip:focus-visible{background:var(--magenta);border-color:var(--magenta);color:var(--weiss)} /* Logo im Kopf, senkrechte Fassung steht bis an den Rand */ .sg-logo-link{flex:0 0 auto;display:block;line-height:0} /* Der Negativabstand darf nie groesser sein als der Platz links neben dem Container, sonst wird das Logo bei mittlerer Fensterbreite angeschnitten. */ .sg-logo-kopf{margin-left:calc(-1 * min(44px, max(0px, (100vw - 1280px) / 2)));width:auto;max-width:none;flex:0 0 auto} .sg-fuss-marke{flex-direction:column;align-items:flex-start} /* Hero, Schrift und Bild passen sich der Breite an */ .sg-hero-text h1,.sg-hero-text h2{font-size:clamp(30px,4.1vw,58px) !important} .sg-img img{object-position:center} /* Auf der Startseite stehen sieben Leistungsfelder, vier Expertisen und die Produkte dicht nebeneinander. Mit ihren Bereichsfarben braechte das Gruen, Blau und weitere Toene ins Bild, die nicht zum Erscheinungsbild gehoeren. Hier gilt deshalb ein einziger Akzent, und das ist Gold. */ .sg-exp-feld,.sg-prod-buehne{--sg-akzent:var(--sg-gold)} /* Bildnachweis, überall gleich */ .sg-credit{position:absolute;right:8px;bottom:8px;z-index:3;max-width:70%;padding:3px 7px;font-size:10.5px;line-height:1.3;letter-spacing:.01em;color:rgb(var(--weiss-rgb) / .92);background:rgb(var(--anthrazit-rgb) / .6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box} /* Karte, die auf eine Unterseite fuehrt. Sie liest sich wie die uebrigen Karten, hebt sich beim Ueberfahren aber sichtbar an. */ a.sg-st-karte.ist-verweis{display:block;text-decoration:none;transition:background-color .22s ease,transform .22s ease} a.sg-st-karte.ist-verweis:hover,a.sg-st-karte.ist-verweis:focus-visible{background:var(--f-weiss, var(--weiss));transform:translateY(-2px)} a.sg-st-karte.ist-verweis:hover .sg-st-karte-titel, a.sg-st-karte.ist-verweis:focus-visible .sg-st-karte-titel{color:var(--sg-gold)} @media (prefers-reduced-motion:reduce){a.sg-st-karte.ist-verweis{transition:none}} /* Abbildung im Fliesstext eines Beitrags. Die Insights tragen je ein Schaubild, das die Aussage des Textes stuetzt. Es steht in voller Spaltenbreite, darunter die Bildunterschrift in der ruhigen Schriftgroesse der Randangaben. */ .sg-abbildung{margin:clamp(28px,3vw,44px) 0;padding:0} .sg-abbildung img{display:block;width:100%;height:auto;background:var(--f-weiss, var(--weiss))} .sg-abbildung figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--f-grau, var(--grau));text-wrap:pretty} /* Kennzeichnung fuer mit KI erzeugte Bilder. Eine Fussnote, kein Aufkleber: sehr klein, ohne Kasten, unten in der Ecke und nur bei genauem Hinsehen zu bemerken. Der Wortlaut steht als echter Text im Quelltext, wird also auch von Vorlesewerkzeugen und Auswertungen gefunden, unabhaengig davon, wie leise er dargestellt ist. Steht dort schon ein Bildnachweis, rueckt die Kennzeichnung eine Zeile hoeher. */ .sg-ki-marke{position:absolute;right:9px;bottom:7px;z-index:3;font-size:7.5px;font-weight:400;letter-spacing:.14em;line-height:1.2;text-transform:uppercase;color:rgb(var(--weiss-rgb) / .26);text-shadow:0 1px 1.5px rgb(var(--anthrazit-rgb) / .26);white-space:nowrap;pointer-events:none} .sg-ki-marke.ist-ueber{bottom:27px} /* Bildfeld, solange kein Bild gesetzt ist */ .sg-img{ width:100%; background: var(--sg-sand); display:flex;align-items:center;justify-content:center; color:var(--grau);font-size:13px;text-align:center;line-height:1.5; } /* Ordnungsrahmen-Akkordeon */ .sg-acc-panel{display:none} .sg-acc-panel.is-open{display:block} /* Logo-Laufband */ .sg-logo-track{animation-name:logoslide;animation-timing-function:linear;animation-iteration-count:infinite} .sg-logo-track:hover{animation-play-state:paused} @media (prefers-reduced-motion:reduce){.sg-logo-track{animation:none}} /* Fließtext auf Unterseiten (Stellen, Beiträge unter Wissen, Projekte) */ .sg-prosa h2{color:var(--anthrazit);margin:34px 0 10px;} .sg-prosa h3{font-size:20px;font-weight:700;color:var(--anthrazit);margin:26px 0 8px} .sg-prosa p{margin:0 0 16px} .sg-prosa ul,.sg-prosa ol{margin:0 0 18px;padding-left:22px} .sg-prosa li{margin:0 0 8px} .sg-prosa img{max-width:100%;height:auto} /* Filter und Karussell auf der Seite Wissen */ .sg-track{scrollbar-width:thin;scrollbar-color:var(--linie) transparent} .sg-track::-webkit-scrollbar{height:6px} .sg-track::-webkit-scrollbar-thumb{background:var(--linie)} .sg-track::-webkit-scrollbar-track{background:transparent} /* Kartenkarussell */ .sg-karten-spur{transition:transform .5s cubic-bezier(.2,.7,.3,1)} .sg-lkarte{transition:transform .4s cubic-bezier(.2,.7,.3,1)} .sg-lkarte:hover{transform:translateY(-4px)} @media (prefers-reduced-motion:reduce){.sg-karten-spur,.sg-lkarte{transition:none}} /* Menü, auch für die von WordPress erzeugten Listen */ ul.sg-menu, ul.sg-menu-mobile, ul.sg-menu-legal{list-style:none;margin:0;padding:0;display:flex} ul.sg-menu{gap:32px;align-items:center} ul.sg-menu-legal{gap:28px} ul.sg-menu-legal a{color:var(--grau)} ul.sg-menu-legal a:hover{color:var(--weiss)} ul.sg-menu-mobile{flex-direction:column;gap:0;width:100%} ul.sg-menu-mobile a{display:block;padding:12px 0;font-size:17px} /* Untermenüs in der Hauptnavigation */ .sg-mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--f-weiss, var(--weiss));border-bottom:1px solid var(--f-linie, var(--linie));box-shadow:0 20px 36px rgb(var(--anthrazit-rgb) / .08);z-index:70;opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s cubic-bezier(.32,.72,0,1)} .sg-hassub.is-open > .sg-mega{display:block;opacity:1;transform:translateY(0)} .sg-mega-card{transition:background .18s ease} .sg-mega-card:hover{background:var(--f-sand-tief, var(--grund))} .sg-mega a{text-decoration:none} .sg-mega .sg-mega-card:hover div:first-child{color:var(--sg-magenta)} .sg-sub{display:none} .sg-hassub:hover > .sg-sub,.sg-hassub:focus-within > .sg-sub{display:block} .sg-sub a{color:var(--sg-anthrazit);text-decoration:none} .sg-sub a:hover{color:var(--sg-magenta)} ul.sg-menu li{position:relative;display:flex;align-items:center} ul.sg-menu .sub-menu{display:none;list-style:none;margin:0;position:absolute;top:100%;left:-20px;min-width:216px;background:var(--f-weiss, var(--weiss));border:1px solid var(--f-linie, var(--linie));padding:8px 0;z-index:60;flex-direction:column} ul.sg-menu li.is-open > .sub-menu{display:flex} ul.sg-menu .sub-menu a{display:block;padding:10px 20px;font-size:14.5px;font-weight:500} ul.sg-menu-mobile .sub-menu{list-style:none;margin:0;padding:0 0 0 18px;display:flex;flex-direction:column} ul.sg-menu-mobile .sub-menu a{font-size:15.5px;padding:9px 0;color:var(--f-grau, var(--grau))} .sg-nav .current-menu-item > a, .sg-nav .current_page_item > a{color:var(--sg-magenta);font-weight:700;border-bottom:2px solid var(--sg-magenta);padding-bottom:3px} /* Menü */ .sg-nav a{color:var(--sg-anthrazit)} .sg-nav a:hover{color:var(--sg-magenta)} .sg-nav .is-active{color:var(--sg-magenta);font-weight:700} /* Schmale Zeile über der Hauptnavigation. Sie trägt, was kein Thema des Angebots ist: Karriere, Kontakt, Suche. Getrennt wird mit Haarlinien statt Zeichen, damit die Zeile ruhig bleibt. */ .sg-metazeile{background:var(--sg-sand);border-bottom:1px solid var(--sg-linie)} /* Die Metazeile steht rechts oben; darin zuerst die Suche, dann Kontakt, dann Karriere. */ .sg-metazeile-inner{display:flex;justify-content:flex-end;align-items:center;gap:0;height:38px;padding:0 40px} .sg-metalinks{display:flex;align-items:center;height:38px} .sg-metalink{position:relative;display:inline-flex;align-items:center;height:38px;padding:0 18px;font-size:12.5px;font-weight:500;letter-spacing:.015em;color:var(--f-grau, var(--grau));text-decoration:none;transition:color .2s ease} .sg-metalink::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--sg-linie)} .sg-metalink:first-child::before{display:none} .sg-metalink::after{content:"";position:absolute;left:18px;right:18px;bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.32,.72,0,1)} .sg-metalink:hover,.sg-metalink.is-active{color:var(--sg-magenta)} .sg-metalink:hover::after,.sg-metalink.is-active::after{transform:scaleX(1)} .sg-metalink.ist-letzter{color:var(--sg-tinte);font-weight:700} .sg-metalink.ist-letzter:hover{color:var(--sg-magenta)} /* Suche: die Lupe steht, das Feld wächst bei Annäherung aus ihr heraus. */ .sg-suche{position:relative;display:flex;align-items:center;height:38px} .sg-suche-form{display:flex;align-items:center;gap:0} .sg-suche-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Das Feld steht links neben der Lupe und waechst nach links in den leeren Teil der Zeile. Weil die Zeile rechtsbuendig ist, bleiben Briefumschlag und Karriere dabei stehen. */ .sg-suche-feld{width:0;padding:0;border:0;background:transparent;font:inherit;font-size:12.5px;color:var(--sg-tinte);opacity:0;transition:width .3s cubic-bezier(.32,.72,0,1),opacity .2s ease,padding .3s cubic-bezier(.32,.72,0,1)} .sg-suche-feld::placeholder{color:var(--grau)} .sg-suche-feld:focus{outline:none} .sg-suche:hover .sg-suche-feld,.sg-suche:focus-within .sg-suche-feld{width:208px;padding:0 6px 0 10px;opacity:1;border-bottom:1px solid var(--grau)} /* Kein natives (blaues) Kreuz zum Leeren */ .sg-suche-feld::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} /* Kontakt als Briefumschlag: dezent, gleiche Hoehe wie die Lupe. */ .sg-metabrief{display:inline-flex;align-items:center;justify-content:center;width:34px;height:38px;margin-left:10px;color:var(--f-grau, var(--grau));text-decoration:none;transition:color .2s ease} .sg-metabrief svg{width:17px;height:13px} .sg-metabrief:hover,.sg-metabrief:focus-visible,.sg-metabrief.is-active{color:var(--sg-magenta)} /* Karriere hervorgehoben: ein helles Feld mit feiner Kante in der Sandzeile. */ .sg-metachip{display:inline-flex;align-items:center;height:24px;margin-left:12px;padding:0 13px;background:var(--f-weiss, var(--weiss));border:1px solid var(--sg-linie);font-size:12.5px;font-weight:700;letter-spacing:.015em;color:var(--sg-tinte);text-decoration:none;transition:color .2s ease,border-color .2s ease,background .2s ease} .sg-metachip:hover,.sg-metachip:focus-visible,.sg-metachip.is-active{color:var(--sg-magenta);border-color:var(--sg-magenta)} .sg-metalink{margin-left:4px} .sg-suche-knopf{display:inline-flex;align-items:center;justify-content:center;width:34px;height:38px;padding:0;border:0;background:none;color:var(--f-grau, var(--grau));cursor:pointer;transition:color .2s ease} .sg-suche-knopf svg{width:16px;height:16px} .sg-suche:hover .sg-suche-knopf,.sg-suche:focus-within .sg-suche-knopf,.sg-suche-knopf:hover{color:var(--sg-magenta)} .sg-suche-knopf:focus-visible{outline:2px solid var(--sg-magenta);outline-offset:-4px} @media (prefers-reduced-motion:reduce){ .sg-metalink,.sg-metalink::after,.sg-suche-feld,.sg-suche-knopf,.sg-metabrief,.sg-metachip{transition:none} } @media (max-width:1023px){.sg-metazeile{display:none}} .sg-mobile-meta{display:flex;flex-wrap:wrap;border-top:1px solid var(--sg-linie);margin-top:8px} .sg-mobile-meta a{font-size:15px;font-weight:500;color:var(--f-grau, var(--grau));text-decoration:none;} .sg-mobile-meta a:hover{color:var(--sg-magenta)} .sg-mobile-suche{display:flex;gap:8px} .sg-mobile-suche input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--sg-linie);background:var(--f-weiss, var(--weiss));font:inherit;} .sg-mobile-suche button{height:44px;padding:0 16px;border:0;background:var(--sg-tinte);color:var(--weiss);font:inherit;font-size:15px;font-weight:700;cursor:pointer} /* Das siebte Leistungsfeld liegt quer zu den sechs anderen. Deshalb steht es als Band unter den Spalten, in Warmgold statt Magenta. */ .sg-mega-band{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;margin-top:2px;padding:22px 26px;background:linear-gradient(90deg,rgb(var(--gold-rgb) / .10),rgb(var(--gold-rgb) / .03));border-top:2px solid var(--sg-gold);text-decoration:none;transition:background .24s ease} .sg-mega-band:hover{background:linear-gradient(90deg,rgb(var(--gold-rgb) / .20),rgb(var(--gold-rgb) / .07))} .sg-mega-band-titel{grid-row:1;font-size:19px;font-weight:700;letter-spacing:-.022em;color:var(--sg-tinte)} .sg-mega-band-text{grid-row:1;font-size:14.5px;line-height:1.55;color:var(--f-grau, var(--grau));text-wrap:pretty} .sg-mega-band-pfeil{grid-row:1;font-size:17px;color:var(--sg-gold);transition:transform .24s cubic-bezier(.32,.72,0,1)} .sg-mega-band:hover .sg-mega-band-pfeil{transform:translateX(5px)} @media (prefers-reduced-motion:reduce){.sg-mega-band,.sg-mega-band-pfeil{transition:none}} @media (max-width:1279px){ .sg-mega-band{grid-template-columns:1fr auto;gap:8px 20px} .sg-mega-band-titel{grid-row:1;grid-column:1} .sg-mega-band-text{grid-row:2;grid-column:1/-1} .sg-mega-band-pfeil{grid-row:1;grid-column:2} } .sg-fr-kurz{font-size:14.5px;line-height:1.62;color:var(--f-grau, var(--grau));margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty} .sg-fr-jahr{display:flex;align-items:baseline;gap:12px;text-transform:uppercase;color:var(--sg-tinte);margin:56px 0 22px;padding-bottom:10px;border-bottom:1px solid var(--sg-linie)} .sg-fr-jahr:first-of-type{margin-top:36px} .sg-fr-jahr span{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--f-grau, var(--grau))} @media (max-width:600px){.sg-fr-jahr{margin:40px 0 18px}} .sg-ans-expertise{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px} .sg-ans-expertise-titel{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--f-grau, var(--grau))} .sg-ans-chip{display:inline-flex;align-items:center;min-height:36px;padding:7px 15px;border:1px solid var(--sg-linie);font-size:14.5px;font-weight:500;color:var(--sg-tinte);text-decoration:none;transition:border-color .2s ease,color .2s ease} .sg-ans-chip:hover{border-color:var(--sg-magenta);color:var(--sg-magenta)} @media (prefers-reduced-motion:reduce){.sg-ans-chip{transition:none}} /* Startseite, die zehn Bausteine */ .sg-st{padding:var(--sg-abschnitt) 40px 0} .sg-st-kopf{max-width:24ch} /* Eine Skala fuer alle Abschnittsueberschriften, hell wie dunkel. Die Regel haengt bewusst nur an der Klasse und nicht am umgebenden Abschnitt: sonst faellt jeder neue Abschnittstyp auf die Browservorgabe von 24px zurueck. Auf dunklem Grund setzt das Markup die Schriftfarbe. */ h2.sg-st-titel{color:var(--sg-tinte);margin:0;} .sg-st-text{font-size:18px;line-height:1.72;color:var(--sg-anthrazit);margin:20px 0 0;max-width:62ch;text-wrap:pretty} /* Abschnittskopf der Startseite: Ueberschrift links, Einleitung rechts. Eine Regel fuer alle sechs Abschnitte, damit sie nicht auseinanderlaufen. */ .sg-akopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:start} /* Im zweispaltigen Kopf begrenzt schon die Spalte die Zeilenlaenge. Eine zusaetzliche Breite von 19 Zeichen hat die Ueberschrift frueher umbrechen lassen, als noetig, und die halbe Spalte leer gelassen. */ .sg-akopf-text > :first-child{margin-top:0} @media (max-width:1023px){ .sg-akopf{grid-template-columns:minmax(0,1fr);gap:18px} } .sg-st-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:44px} .sg-st-raster.ist-zwei{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))} .sg-st-karte{display:block;text-decoration:none;background:var(--sg-sand);padding:30px 30px 32px;} a.sg-st-karte{transition:background .22s ease} a.sg-st-karte:hover{background:var(--f-sand-tief, var(--grund))} .sg-st-karte-titel{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--sg-tinte);line-height:1.22} .sg-st-karte-sub{font-size:15.5px;font-weight:700;color:var(--sg-magenta);margin-top:8px;line-height:1.45} .sg-st-karte-text{font-size:15.5px;line-height:1.65;color:var(--f-grau, var(--grau));margin-top:10px;text-wrap:pretty} .sg-st-karte-cta{font-size:15px;font-weight:700;color:var(--sg-magenta);margin-top:16px;display:inline-block} .sg-st-quad{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;margin-top:40px} .sg-st-quad > div{background:transparent;padding:26px 26px 28px} .sg-st-quad-titel{font-size:18px;font-weight:700;color:var(--weiss);letter-spacing:-.015em} .sg-st-quad-text{font-size:15.5px;line-height:1.6;color:var(--linie);margin-top:8px} .sg-st-pfad{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px} .sg-st-pfad span{font-size:14.5px;color:var(--linie);background:var(--grau);padding:8px 14px} .sg-st-schluss{font-size:17px;line-height:1.7;color:var(--sg-anthrazit);margin:30px 0 0;max-width:62ch} .sg-st-band-schluss{font-size:18px;line-height:1.72;color:var(--linie);margin:20px 0 0;max-width:62ch;text-wrap:pretty} .sg-st-knopfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} .sg-st-zweit{color:var(--sg-tinte);} .sg-st-zweit:hover{border-color:var(--sg-magenta);color:var(--sg-magenta)} .sg-st-klammer{display:flex;flex-wrap:wrap;gap:10px;padding:64px 40px 0} @media (max-width:600px){.sg-st{padding-left:16px;padding-right:16px}.sg-st-klammer{padding:40px 16px 0}.sg-st-raster{gap:22px;margin-top:32px}} /* Kontaktseite */ .sg-kon-epost{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:32px} .sg-kon-mail{font-size:30px;font-weight:700;letter-spacing:-.022em;color:var(--sg-magenta);text-decoration:none} .sg-kon-mail:hover{text-decoration:underline} .sg-kon-zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px;margin-top:44px;padding-top:32px;border-top:1px solid var(--sg-linie)} .sg-kon-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--f-grau, var(--grau))} .sg-kon-ruf{display:inline-block;font-size:22px;font-weight:700;color:var(--sg-tinte);text-decoration:none;margin-top:10px} .sg-kon-ruf:hover{color:var(--sg-magenta)} .sg-kon-adresse{font-style:normal;font-size:17px;line-height:1.75;color:var(--f-grau, var(--grau));margin-top:10px} .sg-kon-form{margin-top:36px;max-width:720px} .sg-kon-hinweis{font-size:14.5px;line-height:1.65;color:var(--f-grau, var(--grau));margin:20px 0 0;max-width:62ch} @media (max-width:600px){.sg-kon-mail{font-size:22px}.sg-kon-zwei{gap:26px;margin-top:32px}} /* Trefferliste der Suche */ .sg-tr-form{display:flex;gap:12px;flex-wrap:wrap;max-width:620px} .sg-tr-form input{flex:1;min-width:220px;height:50px;padding:0 16px;border:1px solid var(--sg-linie);background:var(--f-weiss, var(--weiss));font:inherit;font-size:17px;color:var(--sg-tinte)} /* Fokus zeigt der Rahmen aus assets/v3.css; Gold ist kein Zustand */ .sg-tr-liste{list-style:none;margin:48px 0 0;padding:0;} .sg-tr{border-bottom:1px solid var(--sg-linie)} .sg-tr-link{display:grid;grid-template-columns:150px 1fr;gap:4px 28px;padding:24px 0;text-decoration:none;transition:background .2s ease} .sg-tr-link:hover{background:var(--sg-sand)} .sg-tr-rubrik{grid-row:1;grid-column:1;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding-top:5px} .sg-tr-titel{grid-row:1;grid-column:2;font-size:20px;font-weight:700;letter-spacing:-.022em;color:var(--sg-tinte);line-height:1.3} .sg-tr-text{grid-row:2;grid-column:2;font-size:15.5px;line-height:1.65;color:var(--f-grau, var(--grau));text-wrap:pretty} .sg-tr-leer{margin-top:44px;padding:40px 0;border-top:1px solid var(--sg-linie);font-size:17px;line-height:1.7;color:var(--f-grau, var(--grau));max-width:60ch} .sg-tr-leer a{color:var(--sg-magenta)} .sg-tr-blaettern{margin-top:36px} .sg-tr-blaettern .page-numbers{display:inline-block;padding:10px 14px;font-size:15px;color:var(--sg-tinte);text-decoration:none} .sg-tr-blaettern .page-numbers.current{font-weight:700} .sg-tr-blaettern a.page-numbers:is(:hover,:focus-visible){color:var(--sg-magenta)} @media (max-width:600px){.sg-tr-link{grid-template-columns:1fr;gap:6px}.sg-tr-rubrik{grid-row:1;grid-column:1;padding-top:0}.sg-tr-titel{grid-row:2;grid-column:1;font-size:18px}.sg-tr-text{grid-row:3;grid-column:1}} /* Leistungsfelder als laufende Kartenreihe im dunklen Band. Die Nummer ist keine Zierde: die sieben Felder haben eine feste Reihenfolge. */ .sg-karten-titel{font-size:clamp(28px,2.9vw,42px);font-weight:700;letter-spacing:-.036em;color:var(--weiss);margin:0;line-height:1.08;max-width:22ch;text-wrap:pretty} .sg-karten-text{font-size:18px;line-height:1.72;color:var(--linie);margin:20px 0 0;max-width:58ch;text-wrap:pretty} .sg-karten-steuer{display:flex;gap:12px;padding-bottom:6px;flex:0 0 auto} .sg-lkarte{flex:0 0 clamp(260px,25vw,340px);width:clamp(260px,25vw,340px);display:block;text-decoration:none} .sg-lkarte .sg-karte-motiv{height:clamp(320px,34vw,420px)} .sg-lkarte-strich{width:34px;height:3px} .sg-lkarte-nr{font-size:11.5px;font-weight:700;letter-spacing:.18em;color:var(--linie);margin-top:14px} .sg-lkarte-titel{font-size:clamp(18px,1.4vw,22px);font-weight:700;color:var(--weiss);letter-spacing:-.022em;line-height:1.24;margin-top:6px} .sg-lkarte-text{font-size:14.5px;line-height:1.6;color:var(--linie);margin:10px 0 0;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .sg-lkarte:hover .sg-lkarte-titel{color:var(--sg-gold)} .sg-karten-fuss{max-width:1280px;margin:0 auto;padding:clamp(26px,3vw,38px) var(--sg-rand) 0} .sg-karten-alle{font-size:15px;font-weight:700;color:var(--sg-gold);text-decoration:none} .sg-karten-alle:hover{color:var(--weiss)} @media (max-width:900px){.sg-karten-kopf{grid-template-columns:minmax(0,1fr);gap:20px}.sg-karten-steuer{align-self:start;padding-bottom:0}} .sg-burger{display:none;background:none;border:1px solid var(--f-linie, var(--linie));width:46px;height:44px;align-items:center;justify-content:center;cursor:pointer;padding:0} /* Burger-Symbol */ .sg-burger-icon{display:block;width:20px;height:14px;position:relative} .sg-burger-icon span{position:absolute;left:0;right:0;height:2px;background:var(--sg-anthrazit);transition:transform .26s cubic-bezier(.32,.72,0,1),opacity .18s ease} .sg-burger-icon span:nth-child(1){top:0} .sg-burger-icon span:nth-child(2){top:6px} .sg-burger-icon span:nth-child(3){top:12px} .sg-burger[aria-expanded="true"] .sg-burger-icon span:nth-child(1){transform:translateY(6px) rotate(45deg)} .sg-burger[aria-expanded="true"] .sg-burger-icon span:nth-child(2){opacity:0} .sg-burger[aria-expanded="true"] .sg-burger-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* Menü auf kleinen Bildschirmen */ .sg-mobile{display:none} .sg-mobile[hidden]{display:none} .sg-mobile-kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border-bottom:1px solid var(--f-linie, var(--linie));min-height:68px;box-sizing:border-box} .sg-mobile-zu{background:none;border:1px solid var(--f-linie, var(--linie));padding:11px 16px;font:inherit;font-size:14.5px;color:var(--sg-anthrazit);cursor:pointer;min-height:44px} .sg-mobile-liste{-webkit-overflow-scrolling:touch} .sg-mob-block{border-bottom:1px solid var(--f-linie, var(--linie))} .sg-mob-top{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:0;padding:19px 20px;font:inherit;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--anthrazit);text-align:left;cursor:pointer;min-height:60px;text-decoration:none;box-sizing:border-box} .sg-mob-top.is-active{color:var(--sg-magenta)} .sg-mob-plus{position:relative;flex:0 0 16px;width:16px;height:16px} .sg-mob-plus::before,.sg-mob-plus::after{content:"";position:absolute;background:var(--sg-magenta);transition:transform .26s cubic-bezier(.32,.72,0,1),opacity .18s ease} .sg-mob-plus::before{left:0;right:0;top:7px;height:2px} .sg-mob-plus::after{top:0;bottom:0;left:7px;width:2px} .sg-mob-top[aria-expanded="true"]{color:var(--sg-magenta)} .sg-mob-top[aria-expanded="true"] .sg-mob-plus::after{transform:rotate(90deg);opacity:0} .sg-mob-panel{display:none;padding:0 20px 12px;background:var(--f-sand, var(--grund))} .sg-mob-top[aria-expanded="true"] + .sg-mob-panel{display:block} .sg-mob-uebersicht{display:block;padding:14px 0;font-size:15px;font-weight:700;color:var(--sg-magenta);border-bottom:1px solid var(--f-linie, var(--linie));min-height:44px;box-sizing:border-box} .sg-mob-kind{display:flex;flex-direction:column;gap:4px;padding:15px 0;border-bottom:1px solid var(--f-linie, var(--linie));text-decoration:none;min-height:44px} .sg-mob-kind:last-child{border-bottom:0} .sg-mob-kind-titel{font-size:17px;font-weight:700;color:var(--anthrazit);letter-spacing:-.018em} .sg-mob-kind-text{font-size:14.5px;line-height:1.55;color:var(--f-grau, var(--grau))} .sg-mobile-fuss{border-top:1px solid var(--f-linie, var(--linie));display:flex;flex-direction:column;background:var(--f-weiss, var(--weiss))} .sg-mobile-cta{display:block;background:var(--sg-magenta);color:var(--weiss);text-align:center;padding:16px 24px;font-size:16px;font-weight:700;text-decoration:none;min-height:44px;box-sizing:border-box} .sg-mobile-cta:hover{color:var(--weiss)} .sg-mobile-kontakt{display:flex;font-size:15px;color:var(--f-grau, var(--grau))} .sg-mobile-kontakt a{color:var(--f-grau, var(--grau))} body.sg-menue-offen{overflow:hidden} @media (prefers-reduced-motion:reduce){.sg-burger-icon span,.sg-mob-plus::before,.sg-mob-plus::after{transition:none}} /* Unterstreichung, die von links aufläuft */ .sg-navtop{display:inline-flex;background:none;border:0;padding:0;margin:0;font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;transition:color .2s ease} .sg-navtop::after,.sg-nav-links > div > a::after,.sg-nav-links > a.sg-navlink::after{transform-origin:left center;} .sg-navtop:hover,.sg-navtop:focus-visible,.sg-nav-links > div > a:hover,.sg-nav-links > div > a:focus-visible,.sg-nav-links > a.sg-navlink:hover{color:var(--violett)} .sg-navtop:hover::after,.sg-navtop:focus-visible::after,.sg-nav-links > div > a:hover::after,.sg-nav-links > div > a:focus-visible::after,.sg-nav-links > a.sg-navlink:hover::after{transform:scaleX(1)} .sg-navtop[aria-expanded="true"]{color:var(--violett)} .sg-navtop[aria-expanded="true"]::after{transform:scaleX(1)} .sg-nav-links .is-active::after{transform:scaleX(1)} .sg-navtop .sg-navpfeil{display:inline-block;width:10px;height:10px;flex:0 0 10px;color:currentColor;transform-origin:center;backface-visibility:hidden;will-change:transform;transition:transform .26s cubic-bezier(.32,.72,0,1)} .sg-navtop[aria-expanded="true"] .sg-navpfeil{transform:rotate(180deg)} @media (prefers-reduced-motion:reduce){.sg-navtop::after,.sg-nav-links > div > a::after,.sg-navtop .sg-navpfeil,.sg-mega{transition:none}} /* ───────────── Tablet ───────────── */ @media (max-width:1279px){ .sg-main > div{padding-left:28px !important;padding-right:28px !important} .sg-main > .sg-karten,.sg-main > .sg-seitenkopf,.sg-main > .sg-band,.sg-main > .sg-abschluss,.sg-main > .sg-bhero,.sg-main > .sg-sandband{padding-left:0 !important;padding-right:0 !important} .sg-bhero{height:auto;min-height:520px} .sg-bhero-text{left:28px !important;right:28px;bottom:132px;max-width:none} .sg-bhero-text h1{font-size:38px !important} .sg-hero-titel{font-size:38px !important} .sg-bhero-reiter{left:28px !important;right:28px;gap:24px} .sg-zwei{grid-template-columns:1fr !important;gap:26px !important} .sg-ap{grid-template-columns:1fr} .sg-ap-bild{height:320px} .sg-ap-text{padding:32px 28px 36px} .sg-seitenkopf-inner{grid-template-columns:1fr;gap:26px;padding:0 28px} .sg-seitenkopf{padding:60px 0 66px !important} .sg-seitenkopf h1{font-size:38px !important} .sg-band-inner,.sg-abschluss-inner,.sg-sandband-inner{padding-left:28px;padding-right:28px} .sg-karten-kopf{padding-left:28px;padding-right:28px} .sg-karten-band > div{padding-left:28px} header .sg-shell{padding-left:28px !important;padding-right:28px !important} .sg-logo-kopf{margin-left:0} } /* Absicherung fuer den Bereich, in dem der Container schon an der Kante steht. Greift auch dann, wenn min() in calc() nicht unterstuetzt wird. */ @media (min-width:1280px) and (max-width:1367px){ .sg-logo-kopf{margin-left:0} } /* ───────────── Mobil ───────────── */ @media (max-width:1023px){ .sg-nav-links{display:none !important} .sg-burger{display:flex} .sg-mobile:not([hidden]){display:flex;flex-direction:column;position:fixed;inset:0;z-index:200;background:var(--f-weiss, var(--weiss))} header .sg-shell{padding-left:20px !important;padding-right:20px !important;height:68px !important} .sg-logo-kopf{margin-left:0} /* Raster immer einspaltig */ .sg-main [style*="grid-template-columns"]{grid-template-columns:1fr !important} .sg-main .sg-logogitter{grid-template-columns:repeat(2,minmax(0,1fr)) !important} .sg-main [style*="display:grid"]{gap:20px !important} .sg-main [style*="gap:2px"]{gap:2px !important} /* Seitenränder und Abstände */ .sg-main > div{padding-left:20px !important;padding-right:20px !important} .sg-main [style*="padding-bottom:140px"]{padding-bottom:64px !important} /* Typografie */ .sg-main h1{font-size:32px;} .sg-main h3{font-size:25px !important;letter-spacing:-.025em !important} .sg-main p{font-size:16.5px !important;line-height:1.65 !important} .sg-main [style*="font-size:64px"]{font-size:44px !important} .sg-main [style*="font-size:54px"], .sg-main [style*="font-size:52px"], .sg-main [style*="font-size:50px"]{font-size:31px !important} .sg-main [style*="font-size:36px"], .sg-main [style*="font-size:32px"]{font-size:24px !important} .sg-main [style*="font-size:30px"], .sg-main [style*="font-size:26px"], .sg-main [style*="font-size:24px"]{font-size:21px !important} /* Innenabstände der Kästen, nur innerhalb eines Abschnitts */ .sg-main > div [style*="padding:3"], .sg-main > div [style*="padding:4"], .sg-main > div [style*="padding:5"], .sg-main > div [style*="padding:6"]{padding:24px 20px 28px !important} .sg-main > div [style*="padding:28px"], .sg-main > div [style*="padding:26px"], .sg-main > div [style*="padding:22px"]{padding:22px 20px 26px !important} .sg-main > div [style*="padding:9px 18px"]{padding:9px 16px !important} .sg-main > div a[style*="padding:1"]{padding:14px 22px !important} /* Bildflächen niedriger */ .sg-main [style*="height:460px"], .sg-main [style*="height:420px"], .sg-main [style*="height:400px"], .sg-main [style*="height:380px"], .sg-main [style*="height:360px"]{height:240px !important} .sg-main [style*="height:320px"], .sg-main [style*="height:300px"], .sg-main [style*="height:260px"]{height:220px !important} .sg-main [style*="height:196px"]{height:170px !important} .sg-main [style*="height:132px"]{height:110px !important} /* Kopfbereich der Startseite */ .sg-hero{height:calc(100vh - 68px);height:calc(100svh - 68px);min-height:560px} .admin-bar .sg-hero{height:calc(100vh - 114px);height:calc(100svh - 114px)} .sg-hero-text{left:20px !important;right:20px;bottom:190px;max-width:none} .sg-hero-leiste{left:20px;right:20px;bottom:96px;gap:22px} .sg-hero-reiter{font-size:15px} .sg-hero-steuer{right:20px;bottom:30px} /* Kontaktband und Quicklinks */ .sg-fuss-leiste{margin:0 -20px;padding:0 20px} .sg-fuss-inner{padding-top:72px} .sg-fuss-oben{grid-template-columns:minmax(0,1fr);gap:44px;padding-bottom:40px} .sg-fuss-unten{flex-direction:column;align-items:flex-start;} .sg-kar-hero{height:auto;min-height:540px} .sg-kar-hero-text{left:28px !important;right:28px;bottom:48px;max-width:none} .sg-kar-hero-text h1{font-size:36px !important} .sg-kar-bewerbung{grid-template-columns:1fr;gap:24px} .sg-kar-frage{padding:26px 24px 28px;margin-top:24px} .sg-ref-bild{height:260px} .sg-ref-fokus{grid-template-columns:1fr} .sg-ref-fokus-bild{min-height:240px} .sg-ref-fokus-text{padding:32px 28px 36px} .sg-kar-filter{gap:8px} .sg-kar-feld{flex:1 1 46%} .sg-kar-zeile{grid-template-columns:1fr;gap:14px} .sg-kar-zeile > div:last-child{display:none} .sg-kar-stimmen{grid-template-columns:1fr;gap:36px} .sg-kar-stimme-bild{height:260px} .sg-kar-zus{grid-template-columns:1fr;gap:24px} .sg-kar-gruende{grid-template-columns:1fr} .sg-kar-kununu{grid-template-columns:1fr;gap:36px;padding:32px 28px 36px} .sg-kar-kununu-werte{grid-template-columns:1fr} .sg-kar-kontakt{grid-template-columns:1fr} .sg-kar-kontakt-bild{min-height:280px} .sg-kar-kontakt-text{padding:32px 28px 36px} .sg-credit{right:6px;bottom:6px;padding:2px 6px;font-size:9.5px;max-width:60%} .sg-ki-marke{right:7px;bottom:6px;font-size:7px;letter-spacing:.1em} .sg-ki-marke.ist-ueber{bottom:22px} .sg-quick{padding:56px 0 62px !important} .sg-quick-inner{grid-template-columns:1fr;gap:36px;padding:0 20px} /* Einwilligungshinweis */ .sg-cc-grid{grid-template-columns:1fr !important;gap:20px !important} /* Logoband */ .sg-logo-track > div{width:200px !important;height:110px !important} .sg-logo-track img{max-height:48px !important;max-width:150px !important} /* Karussell auf der Seite Wissen */ .sg-track > a{flex:0 0 82vw !important;width:82vw !important} /* Terminliste */ .sg-main a[style*="grid-template-columns:200px"]{gap:10px !important;padding:22px 20px !important} /* Footer */ /* Oben kein Innenabstand: der Footer beginnt mit dem Magenta-Band */ footer [style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:32px !important} footer .sg-shell > div:last-child{flex-direction:column !important;align-items:flex-start !important;gap:14px !important} ul.sg-menu-legal{gap:20px} } @media (max-width:600px){ .sg-main > div{padding-left:16px !important;padding-right:16px !important} .sg-hero{min-height:520px} .sg-main [style*="padding:0 56px 0 40px"]{padding:0 16px 76px !important} .sg-logo-track > div{width:170px !important;height:100px !important} .sg-main > div [style*="padding:3"], .sg-main > div [style*="padding:4"], .sg-main > div [style*="padding:5"], .sg-main > div [style*="padding:6"]{padding:22px 18px 26px !important} header .sg-shell{padding-left:16px !important;padding-right:16px !important} /* Pauschale fuer alte, per style-Attribut gesetzte Ueberschriften. Die Abschnittsueberschriften haben eine eigene fliessende Skala und sind hier ausgenommen, sonst greift der clamp auf Telefonen nie. */ .sg-main h1:not(.sg-hero-titel):not(.sg-st-titel):not(.sg-karten-titel), .sg-main h2:not(.sg-st-titel):not(.sg-karten-titel):not(.sg-presse-buehne-titel){font-size:27px !important} .sg-main h3{font-size:22px !important} .sg-track > a{flex:0 0 86vw !important;width:86vw !important} .sg-main [style*="font-size:54px"], .sg-main [style*="font-size:52px"], .sg-main [style*="font-size:50px"]{font-size:27px !important} .sg-fuss-leiste{margin:0 -16px;padding:0 16px} } /* Der Kopfbereich der Startseite bleibt in jeder Breite randlos */ .sg-main > div.sg-hero{padding-left:0 !important;padding-right:0 !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important} .sg-main > div.sg-quick{padding-left:0 !important;padding-right:0 !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important} /* Hervorgehobenes Projekt auf den Leistungsseiten */ .sg-projekt-haupt{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);background:var(--f-sand, var(--grund));text-decoration:none;margin-top:32px} .sg-projekt-haupt-bild{position:relative;min-height:420px;overflow:hidden;background:var(--f-sand-tief, var(--grund))} .sg-projekt-haupt-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .sg-projekt-haupt-text{padding:52px 52px 56px;display:flex;flex-direction:column;justify-content:center} @media (max-width:900px){ .sg-projekt-haupt{grid-template-columns:1fr} .sg-projekt-haupt-bild{min-height:260px} .sg-projekt-haupt-text{padding:32px 26px 36px} } /* ─────────── Unterseiten: Abstandsraster und Komposition ─────────── Ein dokumentiertes Raster statt wiederholter Einzelwerte. Die Stufen sind bewusst ungleich verteilt, damit eng und weit einen Rhythmus ergeben. */ :root{ --sg-r1:12px; /* innerhalb einer Gruppe */ --sg-r2:22px; --sg-r3:44px; /* zwischen Gruppen */ --sg-r4:72px; --sg-r5:112px; /* zwischen Abschnitten */ --sg-rand:40px; /* Abstand zwischen zwei Abschnitten der Startseite. Vorher standen dafuer 96px und 104px nebeneinander. */ --sg-abschnitt:clamp(72px,7vw,112px); } /* ─────────── Leistungs- und Expertiseseiten ─────────── Das Motiv ruht links, die Bausteine ziehen rechts daran vorbei. Ohne Behaelter: Groessensprung und Weissraum ordnen, nicht Rahmen. */ .sg-arb{display:grid;gap:72px; padding:104px 40px 0;align-items:start} .sg-arb-motiv{position:sticky;top:96px;height:clamp(420px,52vh,640px)} .sg-arb-motiv .sg-img{position:absolute;inset:0;padding:0} .sg-arb-motiv img{width:100%;height:100%;object-fit:cover;display:block} .sg-arb-vorspann p{font-size:20px;line-height:1.68;color:var(--sg-tinte);margin:0;max-width:48ch;text-wrap:pretty} .sg-arb-vorspann p + p{margin-top:20px;font-size:17.5px;color:var(--f-grau, var(--grau))} .sg-arb-liste{list-style:none;margin:64px 0 0;padding:0} .sg-arb-liste li{margin-top:52px} .sg-arb-liste li:first-child{margin-top:0} .sg-arb-liste h3{font-size:26px;font-weight:500;letter-spacing:-.026em;color:var(--sg-tinte); margin:0;line-height:1.25;max-width:24ch} .sg-arb-satz{font-size:17px !important;color:var(--sg-tinte) !important;margin-top:10px !important} .sg-arb-liste p{font-size:16.5px;line-height:1.78;color:var(--f-grau, var(--grau));margin:12px 0 0;max-width:56ch;text-wrap:pretty} /* Überschrift und Merksatz im Textblock unter dem Motiv */ .sg-arb-ueber{font-size:32px;font-weight:700;line-height:1.16;letter-spacing:-.03em;color:var(--sg-tinte);margin:0 0 26px;max-width:26ch;text-wrap:pretty} .sg-arb-merksatz{margin-top:26px !important;padding-left:20px;border-left:3px solid;font-size:17.5px !important;line-height:1.68 !important;color:var(--sg-tinte) !important} /* Der Ansatz eines Leistungsfelds mit seiner Wirkung */ .sg-ans{padding:104px 40px 0;max-width:1360px;margin:0 auto} .sg-ans-titel{font-size:38px;font-weight:700;line-height:1.14;letter-spacing:-.032em;color:var(--sg-tinte);margin:0;max-width:24ch;text-wrap:pretty} .sg-ans-text{font-size:18px;line-height:1.72;color:var(--f-grau, var(--grau));margin:20px 0 0;max-width:62ch;text-wrap:pretty} .sg-ans-kette{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;margin:34px 0 0;padding:0;counter-reset:none} .sg-ans-kette li{font-size:14.5px;font-weight:700;color:var(--sg-tinte);letter-spacing:-.01em; padding:9px 16px;background:var(--f-sand, var(--grund));white-space:nowrap} .sg-ans-kette li + li::before{content:"";display:inline-block;width:16px;height:1px;background:var(--linie); vertical-align:middle;margin:0 16px 0 -16px} .sg-ans-kette li + li{margin-left:32px;position:relative} .sg-ans-kette li + li::before{position:absolute;left:-24px;top:50%;margin:0} .sg-ans-wirkung{margin-top:56px;padding-top:28px;border-top:2px solid;display:grid; grid-template-columns:repeat(4,minmax(0,1fr));gap:36px} .sg-ans-punkt-titel{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--f-grau, var(--grau))} .sg-ans-punkt p{font-size:15.5px;line-height:1.7;color:var(--anthrazit);margin:10px 0 0;text-wrap:pretty} .sg-arb-belege{margin-top:72px;padding-top:28px;border-top:2px solid;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} .sg-arb-beleg-titel{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--f-grau, var(--grau))} .sg-arb-beleg p{font-size:15px;line-height:1.66;color:var(--anthrazit);margin:10px 0 0;text-wrap:pretty} /* Referenzen: Bild und Titel, sonst nichts */ .sg-fr{padding:112px 40px 0} .sg-fr-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:32px; padding-bottom:22px;border-bottom:1px solid var(--sg-linie)} .sg-fr-kopf h2{color:var(--sg-tinte);margin:0;} .sg-fr-alle{font-size:15px;font-weight:700;color:var(--anthrazit);white-space:nowrap} .sg-fr-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:36px} /* News: Filter nach Jahr wie auf der Seite Referenzen (29.09.2026) */ .sg-fr-filter-zeile{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-top:28px} .sg-fr-filter-zeile .sg-kar-filter{margin-top:0} .sg-fr-filter-stand{display:flex;align-items:center;gap:18px;min-height:44px} .sg-fr-zaehler{font-size:15px;color:var(--grau)} .sg-fr-fall{display:block;} .sg-fr-bild{position:relative;overflow:hidden;background:var(--sg-sand)} .sg-fr-bild img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .7s cubic-bezier(.2,.7,.3,1)} .sg-fr-fall:hover .sg-fr-bild img{transform:scale(1.03)} .sg-fr-bild .sg-img{position:absolute;inset:0;padding:0} .sg-fr-fall:hover .sg-fr-titel{color:var(--sg-magenta)} .sg-fr-kunde{text-transform:uppercase;} /* Motiv noch nicht gesetzt */ .sg-img{position:relative} .sg-img:not(:has(img)){background: repeating-linear-gradient(135deg,transparent 0 15px,rgb(var(--anthrazit-rgb) / .05) 15px 16px),var(--sg-sand)} /* Leere Bildflaechen tragen keine Beschriftung. */ @media (prefers-reduced-motion:reduce){.sg-fr-bild img{transition:none}} @media (max-width:1023px){ .sg-arb{gap:40px;padding:72px 40px 0} .sg-arb-motiv{position:static;height:300px} .sg-arb-belege{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px} .sg-arb-ueber{font-size:27px} .sg-ans{padding:80px 40px 0} .sg-ans-titel{font-size:31px} .sg-ans-wirkung{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px} .sg-fr-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px} } @media (max-width:600px){ .sg-arb{padding:56px 16px 0;gap:28px} .sg-arb-motiv{height:220px} .sg-arb-liste{margin-top:44px} .sg-arb-liste li{margin-top:38px} .sg-arb-belege{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:52px} .sg-arb-ueber{font-size:24px;margin-bottom:20px} .sg-ans{padding:64px 16px 0} .sg-ans-titel{font-size:26px} .sg-ans-kette li{white-space:normal} .sg-ans-wirkung{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:44px} .sg-fr{padding:72px 16px 0} .sg-fr-raster{grid-template-columns:minmax(0,1fr);gap:26px} } /* Karten unter Wissen und Presse: gleiche Behandlung wie die Referenzen */ .sg-mk{display:block;text-decoration:none} .sg-mk-bild{position:relative;height:220px;overflow:hidden;background:var(--sg-sand)} .sg-mk-bild img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .7s cubic-bezier(.2,.7,.3,1)} .sg-mk:hover .sg-mk-bild img{transform:scale(1.03)} /* Whitepaper und Reports: das Titelblatt ist ein A4-Blatt; es steht ganz und hochkant, nie beschnitten (29.09.2026) */ .sg-mk:is([data-kat="whitepaper"], [data-kat="report"]):not(.hat-titelbild) .sg-mk-bild{height:auto;aspect-ratio:210 / 297} .sg-mk:is([data-kat="whitepaper"], [data-kat="report"]):not(.hat-titelbild) .sg-mk-bild img{object-fit:contain} .sg-mk-bild .sg-img{position:absolute;inset:0;padding:0} .sg-mk-zeile{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:16px} .sg-mk-kat{text-transform:uppercase;} .sg-mk-titel{color:var(--sg-tinte); margin-top:8px;} .sg-mk:hover .sg-mk-titel{color:var(--sg-magenta)} .sg-mk-text{color:var(--f-grau, var(--grau));margin:9px 0 0;text-wrap:pretty} .sg-mk-fuss{margin-top:12px} @media (prefers-reduced-motion:reduce){.sg-mk-bild img{transition:none}} @media (max-width:600px){.sg-mk-bild{height:190px}} /* ── Kundenleiste ──────────────────────────────────────────────────────────── Hoechstens zehn Logos, zwei Runden hintereinander, damit der Durchlauf ohne Sprung wiederholt. Angehalten wird ueber das ruhende Fenster, nicht ueber das laufende Band: liegt der Auslöser auf dem bewegten Element, verliert der Zeiger beim Anhalten kurz den Kontakt und die Bewegung stockt. Die Maske blendet die Raender in festen Pixeln aus, nicht in Prozent — sonst frisst sie bei kurzer Leiste halbe Logos weg. */ .sg-logobar{padding:clamp(56px,5.6vw,80px) 0 clamp(8px,1.4vw,16px);overflow:hidden} .sg-logobar-kopf{max-width:1280px;margin:0 auto clamp(38px,4vw,58px);padding:0 var(--sg-rand);display:flex;align-items:center;gap:14px} .sg-logobar-strich{width:32px;height:3px;background:var(--sg-gold);flex:0 0 32px} .sg-logobar-kicker{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;} /* Die Raender werden mit zwei aufgelegten Verlaeufen ausgeblendet, nicht mit einer Maske: eine Maske zwingt den Browser, die Flaeche in jedem Bild neu zu zeichnen, statt das laufende Band der Grafikkarte zu ueberlassen — daher das Flackern. */ .sg-logobar-fenster{position:relative;width:100%;overflow:hidden;background:var(--sg-flaeche, var(--grund));-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(40px,6vw,88px),#000 calc(100% - clamp(40px,6vw,88px)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 clamp(40px,6vw,88px),#000 calc(100% - clamp(40px,6vw,88px)),transparent 100%)} .sg-logobar-fenster::before,.sg-logobar-fenster::after{content:"";position:absolute;top:0;bottom:0;width:clamp(40px,6vw,88px);z-index:2;pointer-events:none} .sg-logobar-fenster::before{left:0;background:none} .sg-logobar-fenster::after{right:0;background:none} /* Der Abstand haengt am Feld, nicht am Band. Mit gap waere die Haelfte des Bandes nicht genau eine Runde — es fehlte ein halber Abstand, und bei jedem Durchlauf sprang die Reihe um diesen Rest. */ .sg-logobar-band{display:flex;align-items:center;width:max-content; transform:translate3d(0,0,0);backface-visibility:hidden;will-change:transform; animation-name:sg-logolauf;animation-timing-function:linear;animation-iteration-count:infinite} .sg-logobar-fenster:hover .sg-logobar-band, .sg-logobar-fenster:focus-within .sg-logobar-band{animation-play-state:paused} /* Jedes Logo bekommt dasselbe Feld und wird darin eingepasst, nicht auf gleiche Hoehe gezogen: sonst wirkt ein breites Wortlogo riesig und ein quadratisches winzig. object-fit:contain haelt dabei das Seitenverhaeltnis. */ .sg-logobar-feld{flex:0 0 auto;width:clamp(122px,11vw,156px);height:62px;display:flex;align-items:center;justify-content:center;margin-right:clamp(40px,4vw,60px);background:var(--sg-flaeche, var(--grund))} /* Ruhezustand grau, beim Darueberfahren zeigt das einzelne Logo seine Farbe. */ /* width und height auf 100 Prozent fuellen das Feld aus, contain haelt das Seitenverhaeltnis. Mit max-width allein blieben kleine Dateien klein: das VW-Zeichen liegt als 40er SVG vor und waere nicht mitgewachsen. */ .sg-logobar-feld img{width:100%;height:100%;object-fit:contain;opacity:.72;filter:grayscale(1);mix-blend-mode:multiply;transition:opacity .25s ease,filter .25s ease} .sg-logobar-feld img:hover{opacity:1;filter:grayscale(0)} @keyframes sg-logolauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @media (prefers-reduced-motion:reduce){.sg-logobar-band{animation:none;flex-wrap:wrap;justify-content:center;gap:40px 0;width:auto}.sg-logobar-feld.ist-wiederholung{display:none}} @media (max-width:600px){ .sg-logobar-kopf{padding-left:16px;padding-right:16px} .sg-logobar-feld{margin-right:36px} .sg-logobar-feld{width:112px;height:48px} } /* ── Startseite, Abschnitt Expertise ───────────────────────────────────────── Branche, Methode und Technologie wirken zusammen. Deshalb stehen die drei Motive als ein durchgehendes Bildband mit den hausueblichen 2px Fugen, und die Texte laufen in denselben Spalten weiter. Keine Striche ueber dem Text, keine Pfeile: die Bilder tragen den Abschnitt. */ .sg-exp-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:clamp(40px,4.4vw,64px)} .sg-exp-feld{display:flex;flex-direction:column;text-decoration:none;background:var(--f-dunkel, var(--anthrazit));overflow:hidden} /* Wie der Leistungsblock: gerundet werden nur die vier aeusseren Ecken des Blocks, die inneren bleiben eckig. */ .sg-exp-trio{--sg-blockecke:16px} .sg-exp-trio > .sg-exp-feld:first-child{border-top-left-radius:var(--sg-blockecke);border-bottom-left-radius:var(--sg-blockecke)} .sg-exp-trio > .sg-exp-feld:last-child{border-top-right-radius:var(--sg-blockecke);border-bottom-right-radius:var(--sg-blockecke)} .sg-exp-inhalt{--sg-exp-rand:clamp(24px,2.4vw,34px);flex:1 1 auto;display:flex;flex-direction:column;padding:clamp(22px,2.2vw,30px) var(--sg-exp-rand) clamp(26px,2.6vw,36px)} /* Der Fuss der Karte: ein Glied der Kette Aufgabe, Methode, Technologie. Die drei Saetze stehen auf einer gemeinsamen Linie, die vom ersten Satz durch alle Karten bis zum letzten laeuft. Sie verbindet die Glieder, ohne wie ein Verweis auszusehen. */ .sg-exp-inhalt > .sg-exp-text{margin-bottom:clamp(26px,2.4vw,34px)} .sg-exp-fuss{position:relative;margin:auto 0 0;padding-top:clamp(18px,1.6vw,22px);font-size:clamp(16.5px,1.25vw,18px);font-weight:700;line-height:1.4;letter-spacing:-.014em;color:var(--weiss);text-wrap:pretty} .sg-exp-fuss::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--grau)} .sg-exp-trio > .sg-exp-feld:not(:last-child) .sg-exp-fuss::before{right:calc(-1 * var(--sg-exp-rand))} .sg-exp-trio > .sg-exp-feld:not(:first-child) .sg-exp-fuss::before{left:calc(-1 * var(--sg-exp-rand))} /* Dezenter Verlauf am unteren Bildrand, wie bei den Leistungsfeldern. Er haelt Bildnachweis und Kennzeichnung lesbar und fuehrt in den Textgrund. */ .sg-exp-motiv::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgb(var(--anthrazit-rgb) / .62) 0,rgb(var(--anthrazit-rgb) / .3) 15%,rgb(var(--anthrazit-rgb) / 0) 36%)} /* Magenta-Schleier wie bei den Leistungsfeldern, er weicht beim Ueberfahren dem vollen Foto. Er liegt unter dem Verlauf und unter Bildnachweis und Kennzeichnung. */ .sg-exp-motiv::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--sg-magenta);opacity:.36;transition:opacity .4s cubic-bezier(.2,.7,.3,1)} .sg-exp-feld:hover .sg-exp-motiv::before,.sg-exp-feld:focus-visible .sg-exp-motiv::before{opacity:0} .sg-exp-motiv{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--f-sand-tief, var(--grund))} .sg-exp-motiv .sg-img{padding:0;height:100%} .sg-exp-motiv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .sg-exp-feld:hover .sg-exp-motiv img,.sg-exp-feld:focus-visible .sg-exp-motiv img{transform:scale(1.03)} .sg-exp-strich{display:block;width:46px;height:4px;background:var(--sg-magenta);margin-top:0;transition:width .28s cubic-bezier(.4,0,.2,1)} .sg-exp-feld:hover .sg-exp-strich,.sg-exp-feld:focus-visible .sg-exp-strich{width:76px} .sg-exp-titel{font-size:clamp(20px,1.6vw,24px);font-weight:700;letter-spacing:-.022em;color:var(--weiss);line-height:1.2;margin:14px 0 0;transition:color .22s ease} .sg-exp-feld:hover .sg-exp-titel,.sg-exp-feld:focus-visible .sg-exp-titel{color:var(--sg-akzent,var(--magenta))} .sg-exp-lead{font-size:16px;font-weight:700;line-height:1.45;color:var(--sg-magenta-hell);margin:9px 0 0;text-wrap:pretty} .sg-exp-text{font-size:15.5px;line-height:1.7;color:var(--linie);margin:13px 0 0;max-width:42ch;text-wrap:pretty} /* Der Schlusssatz ist eine Kette: Aufgabe, Methode, Technologie. Jeder Teilsatz steht unter der Spalte, die er benennt, alle drei auf einer gemeinsamen Grundlinie. Die Ausrichtung traegt den Satz, nicht ein Kasten. */ .sg-exp-claim{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:clamp(40px,4vw,62px) 0 0} .sg-exp-claim span{display:block;font-size:clamp(17.5px,1.4vw,20px);font-weight:500;line-height:1.4;letter-spacing:-.016em;color:var(--sg-tinte);text-wrap:pretty} @media (prefers-reduced-motion:reduce){.sg-exp-motiv img,.sg-exp-titel,.sg-exp-strich,.sg-exp-motiv::before{transition:none}} @media (max-width:1023px){ /* Untereinander bleibt es ein Block: schmale Fuge, oben und unten gerundet */ .sg-exp-trio{grid-template-columns:minmax(0,1fr);gap:2px} /* Untereinander steht jede Linie in ihrer Karte */ .sg-exp-trio > .sg-exp-feld:not(:first-child) .sg-exp-fuss::before, .sg-exp-trio > .sg-exp-feld:not(:last-child) .sg-exp-fuss::before{left:0;right:0} .sg-exp-trio > .sg-exp-feld:first-child{border-radius:var(--sg-blockecke) var(--sg-blockecke) 0 0} .sg-exp-trio > .sg-exp-feld:last-child{border-radius:0 0 var(--sg-blockecke) var(--sg-blockecke)} .sg-exp-claim{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:clamp(32px,4vw,40px)} .sg-exp-text{max-width:60ch} } /* ── Startseite, Abschnitt Produkte ────────────────────────────────────────── Zwei Produkte sind ein Verzeichnis, keine Kachelreihe: Name links, Beschreibung rechts, Haarlinie dazwischen. */ /* Jedes Produkt steht auf einer eigenen Sandflaeche, und sein Bild liegt vorn darauf: es ragt ueber die Kante der Flaeche hinaus, beim ersten Produkt nach links, beim zweiten nach rechts. Das ist der einzige Bruch im sonst streng bündigen Raster der Seite — und er gilt der Sache: hier wird gezeigt, nicht aufgezaehlt. Die Bilder werden vollstaendig gezeigt, nichts beschnitten. */ /* Produkte (Vorlage Runde 3, 26.09.2026): zwei gleich grosse Kacheln, oben das Bild gross und ohne Rahmen oder Schatten, darunter Name, Versprechen, Text und Verweis. Kein Ueberstand, keine Zierlinie. */ .sg-prod-buehnen{margin-top:clamp(40px,4vw,64px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,56px)} .sg-prod-buehne{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none} .sg-prod-bild{aspect-ratio:16 / 10;overflow:hidden;background:var(--anthrazit)} .sg-prod-bild .sg-img{padding:0;height:100%} .sg-prod-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .sg-prod-buehne:is(:hover,:focus-visible) .sg-prod-bild img{transform:scale(1.025)} .sg-prod-wort{padding-top:clamp(22px,2.2vw,32px)} .sg-prod-name{font-size:clamp(28px,2.9vw,44px);letter-spacing:-.035em;line-height:1.04;color:var(--weiss);margin:0;transition:color .22s ease} .sg-prod-lead{font-size:clamp(17px,1.35vw,20px);font-weight:700;line-height:1.4;letter-spacing:-.012em;color:var(--weiss);margin:14px 0 0;text-wrap:pretty} .sg-prod-text{color:var(--linie);margin:12px 0 0;max-width:52ch;text-wrap:pretty} .sg-prod-cta{margin-top:18px;font-size:15px;font-weight:700;color:var(--weiss);text-decoration:none} /* Der Abschnitt steht auf dem dunklen Band, die Buehnen bleiben hell. Einleitung und Notiz bekommen deshalb helle Schrift. */ .sg-prod .sg-st-text{color:var(--linie)} .sg-prod-notiz{margin:clamp(40px,4vw,64px) 0 0;padding-left:0;border-left:0;color:var(--linie);} @media (prefers-reduced-motion:reduce){.sg-prod-name,.sg-prod-bild img{transition:none}} @media (max-width:900px){.sg-prod-buehnen{grid-template-columns:minmax(0,1fr)}} /* Helles Zwischenband. Drei helle Abschnitte lagen bisher am Stueck, der Wechsel hell/dunkel brach in der Seitenmitte ab. Die Referenzen stehen deshalb auf Sand — eine dritte Stufe, kein viertes dunkles Band. */ .sg-sandband{background:var(--sg-sand);width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0} .sg-sandband-inner{max-width:1280px;margin:0 auto;padding:var(--sg-abschnitt) var(--sg-rand)} /* Stossen zwei randlose Baender aneinander, faellt der Abstand dazwischen weg: ein weisser Streifen zwischen zwei Farbflaechen zerschneidet den Uebergang. Die Innenabstaende der beiden Baender bleiben. */ :is(.sg-band,.sg-sandband,.sg-abschluss,.sg-karten,.sg-seitenkopf) + :is(.sg-band,.sg-sandband,.sg-abschluss,.sg-karten){margin-top:0} /* ── Startseite, vier Referenzen in einer Reihe ────────────────────────── Kopf wie in den uebrigen Abschnitten: Ueberschrift links, Einleitung rechts daneben. */ /* Die Karten selbst ──────────────────────────── */ .sg-ref-vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(32px,3.4vw,44px)} @media (max-width:1100px){.sg-ref-vier{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:600px){.sg-ref-vier{grid-template-columns:minmax(0,1fr);}} /* ── Startseite, Abschnitt News und Wissen ─────────────────────────────────── Arbeitsliste 10.1 bis 10.6, Vorlage 07_NEWS_WISSEN (28.09.2026): das Whitepaper ist das Hauptangebot, Cover 340 px links, rechts Kennzeile, Titel, Beschreibung, Umfang und gleich darunter der Verweis. Publikationen, Insights und News folgen nachgeordnet als drei Spalten mit Haarlinie. */ .sg-main .sg-wis h2.sg-st-titel{max-width:16ch} .sg-wis-lead{display:grid;grid-template-columns:340px minmax(0,1fr);gap:56px;align-items:start;margin:72px 0 0;padding-top:40px;border-top:1px solid var(--linie)} .sg-wis-lead-bild{background:var(--grund)} .sg-wis-lead-bild img{display:block;width:100%;height:auto} .sg-main .sg-wis-lead .sg-kennzeile{margin-bottom:18px} .sg-main .sg-wis-lead-titel{margin:0;font-size:clamp(26px,2.6vw,38px) !important;font-weight:700 !important;line-height:1.1 !important;letter-spacing:-.028em !important;color:var(--anthrazit);text-wrap:balance} .sg-main .sg-wis-lead-teaser{margin:18px 0 0;max-width:52ch;font-size:19px !important;line-height:1.62 !important;color:var(--anthrazit);text-wrap:pretty} .sg-main .sg-wis-lead-meta{margin:14px 0 0;font-size:15px !important;font-weight:700;color:var(--grau);font-variant-numeric:tabular-nums} .sg-main a.sg-wis-lead-cta{margin-top:10px} .sg-wis-rubriken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:37px;margin:64px 0 0} .sg-wis-rubrik{display:block;min-width:0;padding-top:20px;border-top:1px solid var(--linie);text-decoration:none;color:inherit} .sg-wis-rubrik-titel{display:block;font-size:19px;font-weight:700;letter-spacing:-.018em;color:var(--anthrazit);transition:color 240ms cubic-bezier(.2, 0, 0, 1)} .sg-wis-rubrik-text{display:block;margin-top:8px;font-size:16px;line-height:1.6;color:var(--grau)} .sg-wis-rubrik:is(:hover, :focus-visible) .sg-wis-rubrik-titel{color:var(--magenta)} .sg-wis-rubrik:focus-visible{outline:2px solid var(--magenta);outline-offset:4px} .sg-main .sg-wis .sg-wis-ende{margin-top:48px} @media (prefers-reduced-motion:reduce){.sg-wis-rubrik-titel{transition:none}} @media (max-width:1023px){ .sg-wis-lead{grid-template-columns:minmax(0,1fr);gap:28px} .sg-wis-lead-bild{max-width:280px} .sg-wis-rubriken{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:48px} } /* ── Startseite, Unternehmen und Karriere ──────────────────────────────────── Arbeitsliste 12.1 bis 12.6, Vorlage 09_UNTERNEHMEN_KARRIERE: Kopf wie in den übrigen Abschnitten, der Verweis unter den Absätzen; darunter der weiße Karriere-Einschub, links die Überschrift, rechts Text und Verweis. */ .sg-main .sg-unt h2.sg-start-h2{max-width:15ch} .sg-unt .sg-akopf-text a.sg-pfeil{margin-top:22px} .sg-unt-motiv{margin-top:56px;aspect-ratio:16/9;overflow:hidden;background:var(--grund)} .sg-unt-motiv .sg-img{padding:0;height:100%} .sg-unt-motiv img{width:100%;height:100%;object-fit:cover;display:block} .sg-unt-karriere{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:49px;align-items:center;margin:56px 0 0;padding:48px 56px;background:var(--weiss)} .sg-main .sg-unt-karriere-titel{margin:0;font-size:clamp(22px,2.2vw,30px) !important;font-weight:700;line-height:1.15 !important;letter-spacing:-.025em;color:var(--anthrazit);text-wrap:balance} .sg-main .sg-unt-karriere-text{margin:0;font-size:17px !important;line-height:1.65 !important;color:var(--grau);text-wrap:pretty} .sg-unt-karriere a.sg-pfeil{margin-top:14px} @media (max-width:1023px){ .sg-unt-karriere{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:40px;padding:32px 24px} } /* ── Dunkles Band mit Motiv ────────────────────────────────────────────────── Wie das Abschlussband: ein Bild ueber die volle Breite, darueber ein Verlauf, der zur Textseite hin dicht wird. Auf schmalen Fenstern laeuft der Verlauf von unten nach oben, weil der Text dort unter dem Motiv sitzt. */ .sg-bandbild{position:relative;overflow:hidden} .sg-band-bild .sg-img{padding:0;background:var(--f-violett-flaeche, var(--violett))} /* Das Motiv ist nach rechts geschoben: von der linken Kante aus vergroessert, damit die Leinwand aus der dichten Zone hinter dem Text herauswandert. */ .sg-band-bild img{display:block;transform-origin:left 32%} .sg-band-schleier{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgb(var(--anthrazit-rgb) / .97) 0%,rgb(var(--anthrazit-rgb) / .93) 34%,rgb(var(--anthrazit-rgb) / .58) 62%,rgb(var(--anthrazit-rgb) / .26) 100%)} .sg-bandbild .sg-band-inner{position:relative;z-index:2} @media (max-width:900px){ .sg-band-schleier{background:linear-gradient(0deg,rgb(var(--anthrazit-rgb) / .97) 0%,rgb(var(--anthrazit-rgb) / .92) 52%,rgb(var(--anthrazit-rgb) / .62) 100%)} /* Im Hochformat traegt das Verschieben nicht: dort wird der Ausschnitt stattdessen auf die Leinwand gelegt. */ .sg-band-bild img{object-position:36% center} } /* ── Bildregel ─────────────────────────────────────────────────────────────── Zwei Faelle, mehr nicht. Ein Motiv, das selbst die Flaeche bildet — im Bildband, in der Motivspalte, im Bandhintergrund, in einer Projektkarte — steht ohne Rahmen; es traegt sich selbst. Ein Abzug, der auf einer Flaeche liegt, etwa ein Bildschirmabzug auf der Sandbuehne der Produkte, bekommt eine Haarlinie und einen weichen Schatten, sonst verliert er seine Kante und verschwimmt mit dem Untergrund. */ .sg-bild-flaeche img{border:0;box-shadow:none} .sg-bild-abzug img{border:1px solid var(--sg-linie);box-shadow:0 18px 44px rgb(var(--anthrazit-rgb) / .13)} .sg-bild-abzug:hover img,.sg-bild-abzug:focus-visible img, a:hover .sg-bild-abzug img,a:focus-visible .sg-bild-abzug img{box-shadow:0 26px 56px rgb(var(--anthrazit-rgb) / .18)} @media (max-width:900px){.sg-bild-abzug img{box-shadow:0 10px 26px rgb(var(--anthrazit-rgb) / .12)}} /* Gefilterte Eintraege: Das Attribut hidden allein reicht nicht, weil die Karten eine eigene Anzeige setzen und es damit ueberstimmen. */ [data-stellen] [data-eintrag][hidden]{display:none !important} /* Seitenkopf und Magenta-Band auf schmalen Schirmen. Steht am Ende, damit es die allgemeinen Randangaben fuer die Inhaltsspalte uebersteuert. */ @media (max-width:1279px){ .sg-kopf-band-inner{padding:16px 28px} } @media (max-width:760px){ .sg-seitenkopf{padding:52px 0 56px !important} .sg-seitenkopf-inner{padding:0 20px;gap:22px} .sg-kopf-absaetze{padding-top:0} .sg-kopf-band-inner{padding:14px 20px;min-height:0;font-size:14px} .sg-abschluss-inner{padding-left:20px;padding-right:20px} } @media (max-width:420px){ .sg-seitenkopf-inner{padding:0 16px} .sg-kopf-band-inner{padding:13px 16px} .sg-abschluss-inner{padding-left:16px;padding-right:16px} } /* Auf den Seiten aus den Vorlagen laeuft der Seitenrand fliessend mit. Kopf und Band nehmen denselben Rand, damit sie mit dem Inhalt darunter fluchten. */ body.sg-vorlage .sg-main .sg-seitenkopf-inner, body.sg-vorlage .sg-main .sg-kopf-band-inner, body.sg-vorlage .sg-main .sg-abschluss-inner{padding-left:var(--sg-rand);padding-right:var(--sg-rand)} /* ── Anfrage im Fenster ────────────────────────────────────────────────── "Gespraech vereinbaren" oeffnet das Formular ueber der Seite. Oben das Magenta-Band aus Seitenkopf und Footer, darunter das Formular im Mass der Kontaktseite. Auf dem Telefon fuellt das Fenster den Schirm. */ .sg-anfrage{border:0;padding:0;margin:auto;width:min(680px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);background:var(--f-weiss, var(--weiss));color:var(--sg-tinte);box-shadow:0 30px 80px rgb(var(--anthrazit-rgb) / .35);overflow:auto;overscroll-behavior:contain} .sg-anfrage::backdrop{background:rgb(var(--anthrazit-rgb) / .64)} .sg-anfrage[open]{animation:sg-anfrage-auf .24s ease-out} @keyframes sg-anfrage-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} html:has(.sg-anfrage[open]){overflow:hidden} .sg-anfrage-kopf{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--sg-magenta);color:var(--weiss);padding:10px 12px 10px 36px;min-height:60px} .sg-anfrage-titel{margin:0;font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--weiss)} .sg-anfrage-zu{flex:0 0 44px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;color:var(--weiss);cursor:pointer;transition:background-color .2s ease} .sg-anfrage-zu:hover{background:rgb(var(--weiss-rgb) / .16)} .sg-anfrage-zu:focus-visible{outline:2px solid var(--f-weiss, var(--weiss));outline-offset:-4px} .sg-anfrage-koerper{padding:30px 36px 34px} .sg-anfrage-person{display:flex;align-items:center;gap:16px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--f-linie, var(--linie))} .sg-anfrage-person[hidden]{display:none} .sg-anfrage-person img{width:64px;height:64px;flex:0 0 64px;object-fit:cover;object-position:50% 22%;background:var(--f-sand-tief, var(--grund))} .sg-anfrage-person img[hidden]{display:none} .sg-anfrage-person-name{font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--sg-tinte)} .sg-anfrage-person-rolle{font-size:14px;color:var(--f-grau, var(--grau));margin-top:2px} .sg-anfrage-intro{font-size:16.5px;line-height:1.6;color:var(--anthrazit);margin:0;max-width:52ch} .sg-anfrage-reihe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 24px;margin-top:26px} .sg-anfrage-label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--f-grau, var(--grau))} .sg-anfrage input[type="text"],.sg-anfrage input[type="email"]{display:block;width:100%;height:42px;margin-top:6px;padding:0 2px;border:0;border-bottom:1px solid var(--linie);background:transparent;font:inherit;font-size:16px;color:var(--sg-tinte)} .sg-anfrage textarea{display:block;width:100%;min-height:128px;margin-top:8px;padding:12px 14px;border:1px solid var(--linie);background:transparent;font:inherit;font-size:16px;line-height:1.6;color:var(--sg-tinte);resize:vertical} .sg-anfrage input:focus-visible,.sg-anfrage textarea:focus-visible{outline:2px solid var(--sg-magenta);outline-offset:2px;border-color:var(--sg-magenta)} .sg-anfrage-feld{margin-top:26px} .sg-anfrage-rechnung{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:24px;font-size:16px} .sg-anfrage-rechnung[hidden]{display:none} .sg-anfrage .sg-anfrage-rechnung input{width:90px;margin-top:0;height:36px} .sg-anfrage-ok{display:flex;gap:12px;align-items:flex-start;margin-top:24px;font-size:14px;line-height:1.6;color:var(--f-grau, var(--grau));cursor:pointer} .sg-anfrage-ok input{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--sg-magenta)} .sg-anfrage-ok a{color:var(--sg-magenta)} .sg-anfrage-fehler{border-left:3px solid var(--sg-magenta);background:var(--f-sand, var(--grund));padding:12px 16px;margin-top:22px;font-size:15px;line-height:1.6;color:var(--magenta)} .sg-anfrage-fehler[hidden]{display:none} .sg-anfrage-fuss{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin-top:28px} .sg-anfrage-fuss .sg-cta[disabled]{opacity:.6;cursor:progress} .sg-anfrage-alt{font-size:14.5px;color:var(--f-grau, var(--grau));text-underline-offset:3px} .sg-anfrage-alt:hover,.sg-anfrage-alt:focus-visible{color:var(--sg-magenta)} .sg-anfrage-danke[hidden],.sg-anfrage-form[hidden]{display:none} .sg-anfrage-danke-titel{font-size:26px;font-weight:700;letter-spacing:-.028em;line-height:1.15;color:var(--sg-violett)} .sg-anfrage-danke p{font-size:16.5px;line-height:1.65;color:var(--anthrazit);margin:12px 0 26px;max-width:52ch} .sg-anfrage-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .sg-anfrage-still{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (max-width:640px){ .sg-anfrage{width:100vw;height:100dvh;max-height:100dvh;margin:0} .sg-anfrage-kopf{padding-left:20px} .sg-anfrage-koerper{padding:24px 20px 32px} .sg-anfrage-reihe{grid-template-columns:minmax(0,1fr);gap:18px} .sg-anfrage-fuss{flex-direction:column;align-items:stretch} .sg-anfrage-fuss .sg-cta{width:100%} .sg-anfrage-alt{text-align:center} } /* Leistungsbild am Anfang der Detailseite, dasselbe Motiv wie im Raster der Startseite. Breit und ruhig, ohne Schleier: hier soll man es ganz sehen. */ .sg-leistungsbild{margin-top:clamp(48px,5vw,72px)} .sg-main .sg-leistungsbild .sg-img{position:relative;display:block;width:100%;height:auto;aspect-ratio:12/5;padding:0;overflow:hidden;background:var(--f-sand-tief, var(--grund))} .sg-leistungsbild .sg-img img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block} @media (max-width:760px){.sg-main .sg-leistungsbild .sg-img{aspect-ratio:3/2}} /* Das Band unter dem Seitenkopf gehoert zum Kopf. Die Unternehmensvorlagen setzen zwischen alle Abschnitte einen Abstand, der hier einen weissen Streifen zwischen Kopf und Band aufriss. */ body.sg-vorlage.sg-vorlage .sg-main > .sg-kopf-band.sg-kopf-band{margin-top:0} /* Navigation mit Glas beim Scrollen (Wunsch 26.09.2026). In Ruhe oben sieht der Kopf aus wie bisher; nach dem ersten Scrollen bleibt er stehen und wird zu mattem Glas. Ohne backdrop-filter oder bei reduzierter Transparenz bleibt er deckend weiss. v3.js setzt html.sg-gescrollt. */ html body{overflow-x:clip} /* header.php setzt inline position:relative; nur das !important schlaegt einen Inline-Stil */ header[role="banner"]{position:sticky !important;top:0;z-index:90} .admin-bar header[role="banner"]{top:32px} @media (max-width:782px){.admin-bar header[role="banner"]{top:46px}} @media (max-width:600px){.admin-bar header[role="banner"]{top:0}} /* Sprungziele (Zum Inhalt, Anker, Filter) nicht unter dem klebenden Kopf verstecken: Kopfhoehe plus 16 px, am Ziel gesetzt, nicht als scroll-padding am html */ :is(main, main [id], .sg-wis-filter){scroll-margin-top:160px} @media (max-width:1023px){:is(main, main [id], .sg-wis-filter){scroll-margin-top:85px}} header[role="banner"]::before{transition:background-color .4s ease, box-shadow .4s ease} header[role="banner"] :is(.sg-navlink, .sg-navtop, .sg-metalink, .sg-metabrief, .sg-suche-knopf, .sg-metachip, .sg-navplus){transition:color .4s ease, background-color .4s ease, border-color .4s ease} /* Glas: echte Unschaerfe, getoente Flaeche, feine Lichtkante oben, leichte Abhebung. Die Schrift bleibt deckend. Ohne backdrop-filter eine deckende Flaeche. */ /* Die Glasflaeche selbst: auf der Startseite zeichnet start-3d/buehne.css sie, auf den Unterseiten fehlte sie, der Kopf war beim Scrollen durchsichtig */ html.sg-gescrollt header[role="banner"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none} html.sg-gescrollt header[role="banner"]::before{background:rgb(var(--weiss-rgb) / .97) !important;box-shadow:inset 0 1px 0 rgb(var(--weiss-rgb) / .9), 0 1px 0 rgb(var(--anthrazit-rgb) / .08), 0 12px 32px rgb(var(--anthrazit-rgb) / .08)} html.sg-gescrollt header[role="banner"] .sg-metazeile{background:transparent !important;box-shadow:none !important} @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ html.sg-gescrollt header[role="banner"]::before{background:rgb(var(--weiss-rgb) / .72) !important;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)} html.sg-gescrollt.sg-nav-foto header[role="banner"]::before{background:rgb(var(--weiss-rgb) / .86) !important} html.sg-gescrollt.sg-nav-dunkel header[role="banner"]::before{background:rgb(var(--anthrazit-rgb) / .74) !important;box-shadow:inset 0 1px 0 rgb(var(--weiss-rgb) / .14), 0 1px 0 rgb(var(--weiss-rgb) / .06), 0 12px 32px rgba(0,0,0,.22)} } @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ html.sg-gescrollt.sg-nav-dunkel header[role="banner"]::before{background:rgb(var(--anthrazit-rgb) / .97) !important} } /* Ueber dunklen Flaechen: helle Schrift und Zeichen, helles Logo (v3.js tauscht die Datei) */ html.sg-gescrollt.sg-nav-dunkel header[role="banner"] :is(.sg-navlink, .sg-navtop, .sg-navtop *, .sg-metalink, .sg-metabrief, .sg-suche-knopf, .sg-navplus, .sg-burger){color:var(--weiss) !important} html.sg-gescrollt.sg-nav-dunkel header[role="banner"] .sg-navplus :is(span, i)::before, html.sg-gescrollt.sg-nav-dunkel header[role="banner"] .sg-burger-icon span{background:var(--weiss) !important} html.sg-gescrollt.sg-nav-dunkel header[role="banner"] .sg-metachip{background:transparent !important;color:var(--weiss) !important;border-color:rgb(var(--weiss-rgb) / .5) !important} html.sg-gescrollt.sg-nav-dunkel header[role="banner"] :is(.sg-navlink, .sg-navtop, .sg-metalink, .sg-metabrief, .sg-metachip, .sg-logo-link, .sg-suche-knopf, .sg-suche-feld):focus-visible{outline-color:var(--weiss)} /* Suchfeld auf dunklem Glas lesbar; feine Linien dort in #444443 statt hell */ html.sg-gescrollt.sg-nav-dunkel header[role="banner"] .sg-suche-feld{color:var(--weiss) !important;border-bottom-color:var(--linie) !important} html.sg-gescrollt.sg-nav-dunkel header[role="banner"] .sg-suche-feld::placeholder{color:var(--linie) !important} html.sg-gescrollt.sg-nav-dunkel header[role="banner"], html.sg-gescrollt.sg-nav-dunkel header[role="banner"] .sg-metazeile{border-bottom-color:var(--grau) !important} @media (prefers-reduced-transparency:reduce){ html.sg-gescrollt header[role="banner"]::before{background:var(--weiss) !important;-webkit-backdrop-filter:none;backdrop-filter:none} html.sg-gescrollt.sg-nav-dunkel header[role="banner"]::before{background:var(--anthrazit) !important} } /* ── Startseite nach Vorlage Runde 3 (26.09.2026) ───────────────────────── Eigene Klassen, damit die alten Kachelregeln nicht mitwirken. */ /* Leistungsfelder: offenes, nummeriertes Raster mit Leistungsbild */ .sg-lf{list-style:none;margin:clamp(48px,5vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(44px,4.4vw,72px) clamp(20px,2.2vw,32px)} .sg-lf-modul{margin:0;min-width:0} .sg-lf-link{display:block;color:inherit;text-decoration:none} .sg-lf-bild{aspect-ratio:4 / 3;overflow:hidden;background:var(--anthrazit)} /* Mit der Liste davor, damit die Bildflaeche auch auf Seiten mit Vorlage (dort hat .sg-img einen Innenabstand) randlos bleibt */ .sg-lf .sg-lf-bild .sg-img{padding:0;height:100%} .sg-lf-bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .sg-lf-link:is(:hover,:focus-visible) .sg-lf-bild img{transform:scale(1.03)} /* Kleine violette Nummer 01–07 (Vorlage 04_STARTSEITE/03_LEISTUNGEN, 29.09.2026) */ .sg-lf-nr{display:block;margin-top:clamp(18px,1.6vw,22px);font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.1em;color:var(--violett);font-variant-numeric:tabular-nums} .sg-main .sg-lf-titel{margin:14px 0 0;font-size:clamp(20px,1.5vw,24px) !important;font-weight:700 !important;letter-spacing:-.02em !important;line-height:1.2;color:var(--anthrazit) !important;max-width:none} .sg-lf-link:is(:hover,:focus-visible) .sg-lf-titel{color:var(--magenta) !important} .sg-lf-text{margin:10px 0 0;color:var(--grau)} .sg-lf-link:focus-visible{outline:2px solid var(--magenta);outline-offset:6px} @media (max-width:1279px){.sg-lf{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:900px){.sg-lf{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.sg-lf{grid-template-columns:minmax(0,1fr)}} /* Expertise: drei gleichrangige Bild-Text-Module auf Hell */ .sg-ex3{margin-top:clamp(48px,5vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,40px)} .sg-ex3-modul{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none} .sg-ex3-bild{aspect-ratio:4 / 3;overflow:hidden;background:var(--anthrazit)} .sg-ex3-bild .sg-img{padding:0;height:100%} .sg-ex3-bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .sg-ex3-modul:is(:hover,:focus-visible) .sg-ex3-bild img{transform:scale(1.03)} .sg-main .sg-ex3-titel{margin:clamp(22px,2.2vw,30px) 0 0;font-size:clamp(26px,2.3vw,36px) !important;font-weight:700 !important;letter-spacing:-.03em !important;line-height:1.08;color:var(--anthrazit) !important} .sg-ex3-modul:is(:hover,:focus-visible) .sg-ex3-titel{color:var(--magenta) !important} /* Nutzenzeile mit Rang: Titel 33 / 700, Nutzen 19 / 700, Beschreibung 17 / 400 (Arbeitsliste 8.3) */ .sg-ex3-lead{margin:16px 0 0;font-size:19px;font-weight:700;line-height:1.4;letter-spacing:-.012em;color:var(--anthrazit);text-wrap:balance} .sg-ex3-text{margin:10px 0 clamp(18px,2vw,26px);color:var(--grau);max-width:46ch} .sg-ex3-fuss{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--linie);font-size:16px;font-weight:700;line-height:1.45;color:var(--anthrazit)} .sg-ex3-modul:focus-visible{outline:2px solid var(--magenta);outline-offset:6px} @media (max-width:1023px){.sg-ex3{grid-template-columns:minmax(0,1fr)}} /* Warum Strategion: sechs Gründe in drei Spalten, je mit Warmgold-Haarlinie (Register E-054, Vorlage 04_STARTSEITE/04_WARUM_STRATEGION, 29.09.2026) */ .sg-gruende-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px} .sg-gruende-eintrag{min-width:0;margin:0;padding:22px 0 0;border-top:1px solid var(--gold)} .sg-gruende-nr{display:block;margin-bottom:10px;font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.1em;color:var(--violett);font-variant-numeric:tabular-nums} .sg-main .sg-gruende-titel{margin:0 0 14px;font-size:clamp(20px,2.1vw,26px) !important;font-weight:900 !important;letter-spacing:-.02em !important;line-height:1.15;color:var(--anthrazit) !important} .sg-main .sg-gruende-text{margin:0;font-size:19px !important;line-height:1.5 !important;color:var(--anthrazit);text-wrap:pretty} @media (max-width:1000px){.sg-gruende-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}} @media (max-width:700px){.sg-gruende-liste{grid-template-columns:minmax(0,1fr);gap:36px}} .sg-main .sg-gruende .sg-st-titel{max-width:none !important} html.sg-gescrollt header[role="banner"]:has(.is-open)::before{background:rgb(var(--weiss-rgb) / .96) !important} /* Grund #F5F5F5 wie die Pause davor (Arbeitsliste, Reihenfolge der Abschnitte), vor Smart Enterprise (Anthrazit) */ .sg-main > .sg-gruende{padding-bottom:120px} .sg-main > .sg-gruende + *{margin-top:0} @media (max-width:900px){.sg-main > .sg-gruende{padding-bottom:72px}} /* ════ Teil Hover-Zustände (bis 2.0.3: assets/hover.css) ════ */ .sgh1:hover{background:var(--f-violett-flaeche, var(--violett)) !important} .sgh2:hover{border-color:var(--magenta) !important;color:var(--magenta) !important} .sgh3:hover{border-color:var(--magenta) !important;color:var(--magenta) !important} .sgh4:hover{animation-play-state:paused !important} .sgh5:hover{transform:scale(1.09) !important} .sgh6:hover{transform:scale(1.09) !important} .sgh7:hover{transform:scale(1.09) !important} .sgh8:hover{transform:scale(1.09) !important} .sgh9:hover{transform:scale(1.09) !important} .sgh10:hover{transform:scale(1.09) !important} .sgh11:hover{transform:scale(1.09) !important} .sgh12:hover{transform:scale(1.09) !important} .sgh13:hover{border-color:var(--magenta) !important;color:var(--magenta) !important} .sgh14:hover{border-color:var(--magenta) !important;color:var(--magenta) !important} .sgh15:hover{color:var(--magenta) !important} .sgh16:hover{background:var(--f-sand, var(--grund)) !important} .sgh17:hover{background:var(--f-sand, var(--grund)) !important} .sgh18:hover{background:var(--f-weiss, var(--weiss)) !important} .sgh19:hover{border-color:var(--anthrazit) !important} .sgh20:hover{background:var(--f-violett-flaeche, var(--violett)) !important} .sgh21:hover{color:var(--magenta) !important} .sgh22:hover{background:var(--f-violett-flaeche, var(--violett)) !important} .sgh23:hover{color:var(--magenta) !important} .sgh24:hover{background:var(--f-violett-flaeche, var(--violett)) !important} .sgh25:hover{background:var(--f-sand, var(--grund)) !important} .sgh26:hover{background:var(--f-sand, var(--grund)) !important} .sgh27:hover{background:var(--magenta) !important} .sgh28:hover{background:var(--f-violett-flaeche, var(--violett)) !important} .sgh29:hover{background:var(--f-violett-flaeche, var(--violett)) !important} .sgh30:hover{background:var(--f-sand, var(--grund)) !important} .sgh31:hover{background:var(--f-sand, var(--grund)) !important} .sgh32:hover{background:var(--f-sand, var(--grund)) !important} .sgh33:hover{background:var(--f-sand, var(--grund)) !important} .sgh34:hover{color:var(--magenta) !important} .sgh35:hover{background:var(--f-sand, var(--grund)) !important} .sgh36:hover{background:var(--f-weiss, var(--weiss)) !important} /* ════ Teil Vorlagen · Basis (bis 2.0.3: assets/vorlagen/basis.css) ════ */ /* Vorlagen · Masse der Theme-Fassung 1.56 fuer die Bausteine der Vorlagen. Erzeugt aus Technik/Theme/Arbeitskopie/strategion/style.css. */ body.sg-vorlage .sg-main{--sg-rand: clamp(16px, 0.3427rem + 2.6966vw, 40px);--sg-rand-kopf: clamp(16px, 0.3427rem + 2.6966vw, 40px);--sg-t-hero: clamp(30px, 1.1081rem + 3.1461vw, 58px);--sg-t-h1: clamp(27px, 0.9480rem + 3.0337vw, 54px);--sg-t-h2-gross: clamp(27px, 1.1671rem + 2.1348vw, 46px);--sg-t-h2: clamp(27px, 1.3862rem + 1.2360vw, 38px);--sg-t-cta: clamp(27px, 1.2219rem + 1.9101vw, 44px);--sg-t-prosa: clamp(16.5px, 0.9902rem + 0.1685vw, 18px);--sg-t-prosa-lang: clamp(17px, 1.0077rem + 0.2247vw, 19px);--sg-t-xl: clamp(34px, 1.3034rem + 3.3708vw, 64px);--sg-t-h3: clamp(21px, 0.9017rem + 1.6854vw, 36px);--sg-t-h4: clamp(18px, 0.7963rem + 1.3483vw, 30px)} body.sg-vorlage .sg-main{max-width:1280px;margin:0 auto} body.sg-vorlage .sg-main > div{padding-left:var(--sg-rand) !important; padding-right:var(--sg-rand) !important} body.sg-vorlage .sg-main > .sg-band, body.sg-vorlage .sg-main > .sg-abschluss{padding-left:0 !important;padding-right:0 !important} body.sg-vorlage .sg-quick-chip, body.sg-vorlage .sg-cta{transition:background-color .25s ease,border-color .25s ease,color .25s ease} body.sg-vorlage .sg-cta:hover, body.sg-vorlage .sg-cta:focus-visible{background:var(--f-violett-flaeche, var(--violett)) !important;color:var(--weiss) !important} body.sg-vorlage .sg-band{background:var(--f-violett-flaeche, var(--violett));width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 !important} body.sg-vorlage .sg-band-inner{max-width:1280px;margin:0 auto;padding:120px 40px} body.sg-vorlage .sg-abschluss{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);display:flex;align-items:center;overflow:hidden;padding:0 !important} body.sg-vorlage .sg-abschluss-schleier{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgb(var(--anthrazit-rgb) / .94) 0%,rgb(var(--anthrazit-rgb) / .82) 44%,rgb(var(--anthrazit-rgb) / .34) 76%,rgb(var(--anthrazit-rgb) / .12) 100%)} body.sg-vorlage .sg-abschluss-inner{position:relative;width:100%;max-width:1280px;margin:0 auto;} body.sg-vorlage .sg-quick-chip{background:var(--f-weiss, var(--weiss));border:1px solid var(--linie);color:var(--anthrazit);padding:11px 20px;font-size:15px;font-weight:700;display:inline-block;text-decoration:none} body.sg-vorlage .sg-quick-chip:hover, body.sg-vorlage .sg-quick-chip:focus-visible{background:var(--magenta);border-color:var(--magenta);color:var(--weiss)} body.sg-vorlage .sg-img img{object-position:center} body.sg-vorlage .sg-img{position:relative; width:100%;height:100%; background: var(--sg-sand); display:flex;align-items:center;justify-content:center; color:var(--grau);font-size:13px;text-align:center;padding:16px;line-height:1.5;} body.sg-vorlage .sg-img img{width:100%;height:100%;object-fit:cover;display:block} body.sg-vorlage .sg-prosa h2{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--anthrazit);margin:34px 0 10px;line-height:1.25} body.sg-vorlage .sg-prosa h3{font-size:20px;font-weight:700;color:var(--anthrazit);margin:26px 0 8px} body.sg-vorlage .sg-prosa ul, body.sg-vorlage .sg-prosa ol{margin:0 0 18px;padding-left:22px} body.sg-vorlage .sg-prosa li{margin:0 0 8px} body.sg-vorlage .sg-prosa img{max-width:100%;height:auto} @media (max-width:760px){body.sg-vorlage .sg-band-inner{padding-top:72px;padding-bottom:72px}} /* ════ Teil Vorlagen · gemeinsam (bis 2.0.3: assets/vorlagen/vorlage.css) ════ */ /* Vorlagen · preview.css aus Technik/Preview, Geltungsbereich body.sg-vorlage. */ body.sg-vorlage.sg-vorlage .sg-main > div{padding:0 40px} body.sg-vorlage .sg-kopf-text{padding-top:8px} body.sg-vorlage .sg-kopf-text p{font-size:var(--sg-t-prosa);line-height:1.7;color:var(--linie);margin:0 0 18px;max-width:50ch;text-wrap:pretty} body.sg-vorlage .sg-kopf-text p:last-child{margin-bottom:0} body.sg-vorlage .sg-kopf-text strong{color:var(--weiss);font-weight:700} body.sg-vorlage .sg-erklaer h2{color:var(--anthrazit);} body.sg-vorlage .sg-erklaer-kopf{padding-top:0} body.sg-vorlage .sg-erklaer .sg-prosa p{color:var(--anthrazit);margin:0 0 18px;} body.sg-vorlage .sg-erklaer .sg-prosa p:last-child{margin-bottom:0} body.sg-vorlage .sg-erklaer strong{color:var(--anthrazit);} body.sg-vorlage .sg-lb-kopf h2{color:var(--anthrazit);} body.sg-vorlage .sg-lb-gitter{grid-template-columns:repeat(2,minmax(0,1fr));} body.sg-vorlage .sg-lb{background:var(--f-sand, var(--grund));padding:clamp(26px, 1.4607rem + 0.6742vw, 32px) clamp(22px, 1.0463rem + 1.3483vw, 34px) clamp(28px, 1.5309rem + 0.8989vw, 36px);min-width:0} body.sg-vorlage .sg-lb-balken{width:30px;height:3px;background:var(--sg-magenta)} body.sg-vorlage .sg-lb-titel{font-size:21px;color:var(--anthrazit);letter-spacing:-.022em;margin:16px 0 0;line-height:1.28;} body.sg-vorlage .sg-lb-text p{color:var(--f-grau, var(--grau));margin:10px 0 0;text-wrap:pretty} body.sg-vorlage .sg-lb-text strong{color:var(--anthrazit);font-weight:700} body.sg-vorlage .sg-br-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px, 0.5843rem + 4.2697vw, 64px);align-items:start} body.sg-vorlage .sg-br-kopf h2{color:var(--weiss);} body.sg-vorlage .sg-br-text{font-size:var(--sg-t-prosa);line-height:1.7;color:var(--linie);margin:0;max-width:50ch;text-wrap:pretty} body.sg-vorlage .sg-br-text strong{color:var(--weiss);font-weight:700} body.sg-vorlage .sg-leitmotiv{margin:36px 0 0;letter-spacing:-.01em; color:var(--linie);} body.sg-vorlage .sg-leitmotiv strong{color:var(--linie)} body.sg-vorlage .sg-wirkung-gitter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px, 1.0618rem + 1.7978vw, 40px);margin-top:44px} body.sg-vorlage .sg-wirkung{min-width:0;} body.sg-vorlage .sg-wirkung h3{color:var(--weiss);} body.sg-vorlage .sg-wirkung p{color:var(--linie);text-wrap:pretty} body.sg-vorlage .sg-chips{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:44px; padding-top:26px;border-top:1px solid var(--grau)} body.sg-vorlage .sg-chips-marke{font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} body.sg-vorlage .sg-chips-reihe{display:flex;gap:10px;flex-wrap:wrap} body.sg-vorlage .sg-chips-hell{margin-top:0;padding-top:34px;border-top:1px solid var(--f-linie, var(--linie))} /* Direkt unter einer Liste mit Unterlinie keine zweite Linie (Doppelstrich) */ body.sg-vorlage .sg-lb-gitter + .sg-chips-hell{border-top:0} body.sg-vorlage .sg-querblock{margin-top:clamp(64px, 3.3427rem + 2.6966vw, 88px)} body.sg-vorlage .sg-praxis-block > h2{color:var(--anthrazit);} body.sg-vorlage .sg-bereich{margin-top:44px} body.sg-vorlage .sg-bereich-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:40px; border-top:1px solid var(--f-linie, var(--linie));padding-top:26px;flex-wrap:wrap} body.sg-vorlage .sg-bereich-kopf h3{font-size:24px;color:var(--anthrazit);letter-spacing:-.026em;margin:0} body.sg-vorlage .sg-mehr{font-size:14.5px;font-weight:700;color:var(--sg-magenta);white-space:nowrap} body.sg-vorlage .sg-mehr:hover, body.sg-vorlage .sg-mehr:focus-visible{color:var(--sg-magenta)} body.sg-vorlage .sg-proof-gitter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px} body.sg-vorlage .sg-proof{background:var(--f-sand, var(--grund));display:flex;flex-direction:column;min-width:0} body.sg-vorlage .sg-proof-bild{height:196px;background: var(--f-sand, var(--grund))} body.sg-vorlage .sg-proof-inner{padding:26px 30px 30px;display:flex;flex-direction:column;gap:12px;flex:1} body.sg-vorlage .sg-proof-leer .sg-proof-marke{display:block;height:11px;width:38%;background:var(--f-sand-tief, var(--grund))} body.sg-vorlage .sg-proof-leer .sg-proof-titel{display:block;height:21px;width:82%;background:var(--f-sand-tief, var(--grund))} body.sg-vorlage .sg-proof-leer .sg-proof-text{display:block;height:44px;background:var(--f-sand-tief, var(--grund))} body.sg-vorlage .sg-proof-leer .sg-proof-link{display:block;height:14px;width:44%;background:var(--f-sand-tief, var(--grund));margin-top:auto} body.sg-vorlage.sg-vorlage .sg-abschluss-bild .sg-img{color:transparent;background:linear-gradient(120deg,var(--f-violett-flaeche, var(--violett)),var(--f-violett-flaeche, var(--violett)) 62%)} body.sg-vorlage .sg-cta-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px, 1.4831rem + 3.1461vw, 64px);align-items:start} body.sg-vorlage .sg-cta-grid > *{min-width:0} body.sg-vorlage .sg-cta-titel{ -webkit-hyphens:auto;} body.sg-vorlage .sg-cta-text{font-size:17.5px;line-height:1.7;margin:20px 0 0;max-width:46ch;text-wrap:pretty} body.sg-vorlage .sg-cta-person{padding:clamp(22px, 1.2654rem + 0.4494vw, 26px) clamp(20px, 1.0309rem + 0.8989vw, 28px) clamp(24px, 1.3357rem + 0.6742vw, 30px)} body.sg-vorlage .sg-cta-portrait{height:190px;margin-bottom:20px;background:var(--f-violett-flaeche, var(--violett))} body.sg-vorlage .sg-cta-portrait .sg-img{height:100%;background:var(--f-violett-flaeche, var(--violett));color:var(--grau);font-size:12px} body.sg-vorlage .sg-cta-name{font-size:19px;font-weight:700;letter-spacing:-.02em;} body.sg-vorlage .sg-cta-rolle{font-size:14.5px;margin-top:4px} body.sg-vorlage .sg-cta-person .sg-cta{margin-top:22px} @media (max-width:1279px){ body.sg-vorlage .sg-erklaer, body.sg-vorlage .sg-br-kopf{grid-template-columns:minmax(0,1fr);} body.sg-vorlage .sg-cta-grid{grid-template-columns:minmax(0,1fr);} body.sg-vorlage .sg-wirkung-gitter{grid-template-columns:repeat(2,minmax(0,1fr));} body.sg-vorlage .sg-proof-gitter{grid-template-columns:minmax(0,1fr);} } @media (max-width:1023px){ body.sg-vorlage .sg-lb-gitter{grid-template-columns:minmax(0,1fr);} } @media (max-width:600px){ body.sg-vorlage .sg-wirkung-gitter{grid-template-columns:minmax(0,1fr);} body.sg-vorlage.sg-vorlage h1, body.sg-vorlage.sg-vorlage h2, body.sg-vorlage.sg-vorlage h3, body.sg-vorlage .sg-cta-titel, body.sg-vorlage .sg-lb-titel{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} } body.sg-vorlage.sg-vorlage .sg-main > .pv-seitenkopf{position:relative;padding:76px var(--sg-rand) 0} body.sg-vorlage .pv-kopf-zwei{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(26px, 0.5843rem + 4.2697vw, 64px);align-items:start;padding-bottom:clamp(48px, 2.5618rem + 1.7978vw, 64px)} body.sg-vorlage .pv-kicker{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase} body.sg-vorlage .pv-kopf-titel{font-weight:700;font-size:var(--sg-t-h1);line-height:1.04;letter-spacing:-.04em; color:var(--anthrazit);margin:22px 0 0;max-width:20ch;text-wrap:pretty} body.sg-vorlage .pv-kopf-linie{position:relative;border-bottom:1px solid var(--f-linie, var(--linie))} @media (max-width:1279px){ body.sg-vorlage .pv-kopf-zwei{grid-template-columns:minmax(0,1fr);} } body.sg-vorlage.sg-vorlage .sg-main > .pv-seitenkopf{padding-left:var(--sg-rand);padding-right:var(--sg-rand)} /* ════ Teil Vorlagen · Expertise (bis 2.0.3: assets/vorlagen/vorlage-expertise.css) ════ */ /* Vorlagen · preview-expertise.css aus Technik/Preview, Geltungsbereich body.sg-vorlage:where(.sg-vl-expertise). */ body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-breitbild{margin-top:44px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-breitbild .sg-img{height:420px;display:flex;align-items:center; justify-content:center;text-align:center;padding:0 20px;color:var(--grau);font-size:12.5px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px, 1.4831rem + 3.1461vw, 64px); align-items:start;} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-zwei > *{min-width:0} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-zwei:first-child{margin-top:0} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-spalte h2{color:var(--anthrazit); margin:0;} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-sub{font-size:19px;font-weight:700;line-height:1.45; letter-spacing:-.015em;} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-spalte p{font-size:17px;line-height:1.7;color:var(--anthrazit);margin:18px 0 0; max-width:50ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-spalte strong{color:var(--anthrazit);font-weight:700} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-kurz{margin:16px 0 0;font-size:16.5px;font-weight:700;line-height:1.45; letter-spacing:-.012em;color:var(--anthrazit);text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-liste{margin:22px 0 0;padding-top:18px; border-top:1px solid var(--linie)} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-liste-marke{display:block;font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;margin-bottom:10px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-liste-text{font-size:15px;line-height:1.7;color:var(--f-grau, var(--grau));text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-kartenfuss{margin-top:auto;padding-top:22px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-lb.pv-ex-karte{display:flex;flex-direction:column} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-linie{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(24px, 1.2809rem + 0.8989vw, 32px); margin-top:44px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-linie > *{min-width:0;border-top:1px solid var(--sg-linie,var(--f-linie, var(--linie)));padding-top:22px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-linie-nr{display:block;font-size:12px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--violett)} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-linie-titel{margin:10px 0 0;font-size:19px;font-weight:700;letter-spacing:-.02em; color:var(--anthrazit);line-height:1.3;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-erklaer-kopf .sg-prosa{margin-top:26px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-logik{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin-top:8px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-logik-stufe{background:var(--sg-sand,var(--f-sand, var(--grund)));padding:20px 24px 22px; display:flex;align-items:baseline;gap:16px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-logik-nr{font-weight:700; flex:0 0 auto} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-logik-text{font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--anthrazit); line-height:1.4;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-transfers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px; margin-top:36px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-transfer{background:var(--sg-sand,var(--f-sand, var(--grund)));padding:clamp(28px, 1.5309rem + 0.8989vw, 36px) clamp(22px, 1.0463rem + 1.3483vw, 34px) clamp(30px, 1.6559rem + 0.8989vw, 38px);min-width:0; display:flex;flex-direction:column} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-tr-weg{display:flex;flex-direction:column;gap:8px; padding-top:20px;--tr-marke:124px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-tr-zeile{display:grid;grid-template-columns:var(--tr-marke) minmax(0,1fr); align-items:baseline;column-gap:10px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-tr-marke{font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--violett)} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-tr-wert{font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--anthrazit); line-height:1.35;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-tr-pfeil{display:block;font-size:13px;color:var(--grau);line-height:1; margin-left:calc(var(--tr-marke, 124px) + 10px)} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-transfer p{color:var(--f-grau, var(--grau));margin:18px 0 0; text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-tr-aussage{margin:22px 0 0 !important;padding-top:18px; border-top:1px solid rgb(var(--anthrazit-rgb) / .10);font-weight:700; letter-spacing:-.015em;color:var(--anthrazit) !important} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-tr-proof{margin:18px 0 0 !important; color:var(--f-grau, var(--grau)) !important} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-layer{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin-top:8px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-layer-block{background:transparent; border:1px solid var(--grau);padding:20px 24px 22px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-layer-titel{font-size:17px;font-weight:700;letter-spacing:-.018em;color:var(--weiss); line-height:1.3} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-layer-text{margin:8px 0 0;font-size:14.5px;line-height:1.65;color:var(--linie); text-wrap:pretty} /* Der Uebergang liegt als eigener Abschnitt auf einer Flaeche (inc/neu.php): die Flaechenkante trennt, keine Oberkante */ body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-uebergang p{font-size:17.5px;line-height:1.7;color:var(--anthrazit);margin:0; max-width:70ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-uebergang .sg-chips{margin-top:28px;padding-top:0;border-top:0} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-aussage{margin:36px 0 0;padding-top:20px; font-size:22px;font-weight:700;line-height:1.35; letter-spacing:-.02em;max-width:60ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-br-text + .sg-br-text{margin-top:18px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-schritt-gitter{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(24px, 1.2809rem + 0.8989vw, 32px);margin-top:44px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-schritt{min-width:0;border-top:1px solid var(--grau);padding-top:24px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-schritt-nr{color:var(--gold); display:block} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-schritt h3{font-size:19px;color:var(--weiss);letter-spacing:-.02em; margin:10px 0 0;} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-schritt p{color:var(--linie);margin:12px 0 0; text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-band-schluss{margin:44px 0 0;color:var(--linie); } body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-band-schluss strong{font-weight:700;color:var(--linie)} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-claim{margin:32px 0 0;font-size:clamp(19px, 1.1053rem + 0.3371vw, 22px);font-weight:700;line-height:1.35; letter-spacing:-.02em;color:var(--linie);text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-schritt-gitter.pv-ex-vier{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:1279px){ body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-schritt-gitter.pv-ex-vier{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:1023px){ body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-breitbild .sg-img{height:240px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .sg-schritt-gitter.pv-ex-vier{grid-template-columns:minmax(0,1fr)} } body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px; margin-top:8px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-mini-feld{background:var(--sg-sand,var(--f-sand, var(--grund)));padding:24px 26px 26px;min-width:0} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-mini-titel{font-size:17px;font-weight:700;letter-spacing:-.018em;color:var(--anthrazit); line-height:1.3;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-mini-text{margin:10px 0 0;font-size:15px;line-height:1.65;color:var(--f-grau, var(--grau)); text-wrap:pretty} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-kombi{margin:16px 0 0;font-size:14.5px;font-weight:700;line-height:1.6; color:var(--violett);text-wrap:pretty} @media (max-width:1279px){ body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-zwei{grid-template-columns:minmax(0,1fr);} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-linie{grid-template-columns:repeat(3,minmax(0,1fr));} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-transfers{grid-template-columns:minmax(0,1fr);gap:20px} } @media (max-width:1023px){ body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-linie{grid-template-columns:minmax(0,1fr);} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-mini{grid-template-columns:minmax(0,1fr);gap:20px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-tr-zeile{grid-template-columns:minmax(0,1fr);row-gap:2px} body.sg-vorlage:where(.sg-vl-expertise).sg-vorlage .pv-ex-tr-pfeil{margin-left:0} } /* ════ Teil Vorlagen · Unternehmen (bis 2.0.3: assets/vorlagen/vorlage-unternehmen.css) ════ */ /* Vorlagen · preview-unternehmen.css aus Technik/Preview, Geltungsbereich body.sg-vorlage:where(.sg-vl-unternehmen). */ body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-knoepfe{display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; margin-top: 26px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-knoepfe:empty{display: none} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-knopf-zweit{ color: var(--sg-violett, var(--violett)); } body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-knopf-zweit:hover, body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-knopf-zweit:focus-visible{color: var(--weiss); background: var(--sg-violett, var(--f-violett-flaeche, var(--violett)))} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .sg-abschluss .pv-un-knopf-zweit{color: var(--weiss); } body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .sg-abschluss .pv-un-knopf-zweit:hover, body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .sg-abschluss .pv-un-knopf-zweit:focus-visible{background: var(--grau); border-color: var(--f-weiss, var(--weiss))} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-breitbild{margin-top: 34px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-breitbild .sg-img{height: 420px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 28px; font-size: 13px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-zeitmarke{font-size: 15px; font-weight: 700; margin-bottom: 14px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-abschnittbild{margin-top: 30px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-abschnittbild .sg-img{height: 280px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 24px; font-size: 12.5px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .sg-main > .pv-un-hervor{ padding: 120px clamp(26px, 0.8034rem + 3.3708vw, 56px)} @media (max-width:900px){body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .sg-main > .pv-un-hervor{padding-top:72px;padding-bottom:72px}} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-hervor-satz{font-size:clamp(30px, 1rem + 2.2vw, 48px); font-weight: 700; letter-spacing: -.035em; line-height: 1.16; color: var(--anthrazit); max-width: 34ch; text-wrap: pretty} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-hervor-satz.pv-un-hervor-lang{font-size: clamp(26px, 1rem + 1.3vw, 36px); max-width: 52ch; line-height: 1.24} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-hervor p{margin: 22px 0 0; font-size: 17.5px; line-height: 1.75; max-width: 62ch; text-wrap: pretty} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-wort{white-space: nowrap} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karten{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karten > *{min-width: 0} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karte{display: flex; flex-direction: column; position: relative} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karte-link{text-decoration: none; color: inherit; } body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karte-pfeil{position: absolute; left: 30px; bottom: 26px; font-size: 20px; line-height: 1; color: var(--sg-violett, var(--violett))} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karte-link:hover{background: var(--f-sand-tief, var(--grund))} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karte-link:hover .sg-lb-titel{color: var(--sg-magenta, var(--magenta))} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karte-link:hover .pv-un-karte-pfeil{transform: translateX(5px)} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karte-pfeil{transition: transform .2s ease} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karte-link:focus-visible{outline: 2px solid var(--sg-violett, var(--violett)); outline-offset: -2px} /* Felder als Verweis (sg_vorlage_felder_verlinken): wie die Kartenverweise, beim Überfahren wird der Titel Magenta */ body.sg-vorlage a.pv-ac-thema.ist-verweis{display:block;text-decoration:none;color:inherit} body.sg-vorlage a.pv-ac-thema.ist-verweis h3{transition:color .2s ease} body.sg-vorlage a.pv-ac-thema.ist-verweis:is(:hover, :focus-visible) h3{color:var(--sg-magenta, var(--magenta)) !important} body.sg-vorlage a.pv-ac-thema.ist-verweis:focus-visible{outline:2px solid var(--sg-violett, var(--violett));outline-offset:4px} /* Karriere: zwei Reihen Stellen, darunter der Weg zu allen (sg_vorlage_stellen); untereinander nur zwei Karten */ .sg-main .sg-stellen-alle{margin:clamp(24px, 3vw, 40px) 0 0} @media (max-width:1000px){ .sg-main .sg-stellen-auswahl > .sg-stellenkarte:nth-child(n+3){display:none} } /* Alle offenen Stellen (/karriere/stellen/): Filter und Liste in der Breite des Kopfs, Rückweg darunter */ .sg-main .sg-stellen-alle-seite{padding:clamp(48px, 5vw, 88px) 0 clamp(56px, 6vw, 104px)} .sg-main .sg-stellen-alle-seite .sg-stellen-zurueck{margin:clamp(32px, 4vw, 56px) 40px 0} @media (max-width:760px){ .sg-main .sg-stellen-alle-seite > .sg-stellen-alle-liste{padding-left:16px !important;padding-right:16px !important} .sg-main .sg-stellen-alle-seite .sg-stellen-zurueck{margin-left:16px;margin-right:16px} } body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karte-rolle{margin: 12px 0 0; font-size: 16px; font-weight:700; line-height: 1.5; letter-spacing: -.012em; text-wrap: pretty} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karte-jahre{margin: 10px 0 0; font-size: 14px; font-weight:700; letter-spacing: .06em; color: var(--f-grau, var(--grau))} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-preise{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-top: 40px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-preis{background: var(--sg-sand, var(--f-sand, var(--grund))); padding: clamp(30px, 1.6559rem + 0.8989vw, 38px) clamp(26px, 1.2416rem + 1.5730vw, 40px) clamp(34px, 1.9059rem + 0.8989vw, 42px); min-width: 0} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-preis-jahr{display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .1em; } body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-preis-titel{margin: 20px 0 0; font-size: 27px; font-weight: 700; color: var(--anthrazit); letter-spacing: -.03em; line-height: 1.15} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-preis p{margin: 16px 0 0; font-size: 16.5px; line-height: 1.72; color: var(--f-grau, var(--grau)); text-wrap: pretty} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karten:has(> :nth-child(4)):not(:has(> :nth-child(5))){grid-template-columns: repeat(2, minmax(0, 1fr))} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-personen{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 36px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-person{ min-width: 0} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-portrait .sg-img{ display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-person-name{ color: var(--anthrazit); letter-spacing: -.022em; line-height: 1.25; text-wrap: pretty} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-person-rolle{ color: var(--f-grau, var(--grau)); line-height: 1.5} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-person p{ color: var(--f-grau, var(--grau)); text-wrap: pretty} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-personen:has(> :nth-child(3)):not(:has(> :nth-child(4))){grid-template-columns: repeat(3, minmax(0, 1fr))} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-personen:has(> :nth-child(2)):not(:has(> :nth-child(3))){grid-template-columns: repeat(2, minmax(0, 1fr))} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-orte{display: flex; flex-direction: column; gap: 2px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 1.0772rem + 2.2472vw, 46px); align-items: center; background: var(--sg-sand, var(--f-sand, var(--grund))); padding: 46px 48px} /* Ohne Bild einspaltig, keine leere Haelfte */ body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort:not(:has(> .pv-un-ort-bild)){grid-template-columns: minmax(0, 1fr)} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort:nth-child(even) .pv-un-ort-bild{order: 2} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort:nth-child(even) .pv-un-ort-text{order: 1} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort-bild .sg-img{height: 330px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; font-size: 12.5px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort-text{min-width: 0} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort-stadt{font-size:clamp(34px, 1.9607rem + 0.6742vw, 40px); font-weight: 700; color: var(--anthrazit); letter-spacing: -.038em; line-height: 1.02} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort-haus{margin-top: 12px; font-size: 21px; font-weight:700; letter-spacing: -.022em; line-height: 1.3} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort-adresse{margin-top: 14px; font-size: 17px; line-height: 1.75; color: var(--f-grau, var(--grau))} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort-text p{margin: 18px 0 0; color: var(--f-grau, var(--grau)); max-width: 46ch; text-wrap: pretty} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-abschluss-mitte .sg-cta-text{max-width: 52ch; } body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-abschluss-mitte .pv-un-knoepfe{margin-top: 32px; } @media (max-width: 1279px){ body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-personen, body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-personen:has(> :nth-child(3)):not(:has(> :nth-child(4))){grid-template-columns: repeat(2, minmax(0, 1fr))} } @media (max-width: 1023px){ body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-preise{grid-template-columns: minmax(0, 1fr)} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karten, body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karten:has(> :nth-child(4)):not(:has(> :nth-child(5))){grid-template-columns: repeat(2, minmax(0, 1fr))} } @media (max-width: 900px){ body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-breitbild .sg-img{height: 240px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-abschnittbild .sg-img{height: 200px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karten, body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karten:has(> :nth-child(4)):not(:has(> :nth-child(5))), body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-personen, body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-personen:has(> :nth-child(3)):not(:has(> :nth-child(4))), body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-personen:has(> :nth-child(2)):not(:has(> :nth-child(3))){grid-template-columns: minmax(0, 1fr)} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort{grid-template-columns: minmax(0, 1fr); padding: 34px 30px 38px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort:nth-child(even) .pv-un-ort-bild{order: 0} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort:nth-child(even) .pv-un-ort-text{order: 0} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-ort-bild .sg-img{height: 240px} } @media (max-width: 600px){ body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-karte-pfeil{left: 24px} body.sg-vorlage:where(.sg-vl-unternehmen).sg-vorlage .pv-un-knoepfe{gap: 12px 20px} } /* ════ Teil Vorlagen · Academy (bis 2.0.3: assets/vorlagen/vorlage-academy.css) ════ */ /* Vorlagen · preview-academy.css aus Technik/Preview, Geltungsbereich body.sg-vorlage:where(.sg-vl-academy). */ body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-sub{margin-top: 14px; font-size:clamp(17.5px, 1.0527rem + 0.1685vw, 19px); font-weight:700; line-height: 1.45; letter-spacing: -.018em; color: var(--violett); max-width: 26ch; text-wrap: pretty} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-vorlauf{margin: 22px 0 0; font-size: 17.5px; line-height: 1.75; color: var(--anthrazit); max-width: 62ch; text-wrap: pretty} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-formate{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 36px} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-formate > *{min-width: 0} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-format{display: flex; flex-direction: column} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-format-fuer{margin: 12px 0 0; font-size: 16px; font-weight:700; line-height: 1.5; letter-spacing: -.012em; text-wrap: pretty} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-format-breit{grid-column: 1 / -1} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-format-breit .sg-lb-text p{max-width: 78ch} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-themen{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 40px; margin-top: 44px} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-zielgruppen{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 1.2416rem + 1.5730vw, 40px); margin-top: 40px} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-thema{min-width: 0; border-top: 1px solid var(--linie); padding-top: 24px} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-thema h3{margin: 0; font-size: 23px; color: var(--anthrazit); letter-spacing: -.022em; line-height: 1.22; } body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-thema p{margin: 12px 0 0; color: var(--f-grau, var(--grau)); text-wrap: pretty} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .sg-main > .pv-ac-marke{background: var(--sg-sand, var(--f-sand, var(--grund))); } body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-marke{display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(26px, 0.8034rem + 3.3708vw, 56px); align-items: start} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-marke > *{min-width: 0} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-marke-satz{font-size:clamp(27px, 1.3315rem + 1.4607vw, 40px); font-weight: 700; letter-spacing: -.038em; line-height: 1.1; color: var(--anthrazit); max-width: 20ch; text-wrap: pretty} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-marke p{margin: 0; font-size: 17.5px; line-height: 1.75; color: var(--anthrazit); max-width: 52ch; text-wrap: pretty} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-marke p + p{margin-top: 20px} /* Fuenf Felder (Tagung: Was den Tag ausmacht) stehen drei zu zwei statt vier und eins allein */ body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-themen:has(> :nth-child(5):last-child){grid-template-columns: repeat(6, minmax(0, 1fr))} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-themen:has(> :nth-child(5):last-child) > *{grid-column: span 2} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-themen:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column: span 3} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-themen:has(> :nth-child(5):last-child) > * p{max-width: 52ch} @media (max-width: 1279px){ body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-themen, body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-zielgruppen{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 1.2416rem + 1.5730vw, 40px)} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-themen:has(> :nth-child(5):last-child){grid-template-columns: repeat(2, minmax(0, 1fr))} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-themen:has(> :nth-child(5):last-child) > :nth-child(n){grid-column: auto} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-themen:has(> :nth-child(5):last-child) > :nth-child(5){grid-column: 1 / -1} } @media (max-width: 1023px){ body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-formate{grid-template-columns: minmax(0, 1fr)} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-marke{grid-template-columns: minmax(0, 1fr);} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-marke-satz{max-width: 26ch} } @media (max-width: 900px){ body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-themen, body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-zielgruppen{grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 1.2416rem + 1.5730vw, 40px)} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-themen:has(> :nth-child(5):last-child){grid-template-columns: minmax(0, 1fr)} body.sg-vorlage:where(.sg-vl-academy).sg-vorlage .pv-ac-sub{max-width: none} } /* ════ Teil Vorlagen · Wissen (bis 2.0.3: assets/vorlagen/vorlage-wissen.css) ════ */ /* Vorlagen · preview-wissen.css aus Technik/Preview, Geltungsbereich body.sg-vorlage:where(.sg-vl-wissen). */ body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-block{margin-top:clamp(56px, 2.9522rem + 2.2472vw, 76px)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-block > .sg-prosa p{font-size:var(--sg-t-prosa);line-height:1.7;color:var(--anthrazit); margin:0 0 18px;max-width:62ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-einleitung{font-size:var(--sg-t-prosa);line-height:1.7;color:var(--anthrazit); margin:0;max-width:62ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-h2{font-size:clamp(26px, 1.5154rem + 0.4494vw, 30px);font-weight:700;letter-spacing:-.03em; color:var(--anthrazit);line-height:1.14;margin:clamp(48px, 2.5618rem + 1.7978vw, 64px) 0 clamp(14px, 0.7654rem + 0.4494vw, 18px);max-width:24ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-karten{display:grid;gap:2px;margin-top:40px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-drei{grid-template-columns:repeat(3,minmax(0,1fr))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zwei{grid-template-columns:repeat(2,minmax(0,1fr))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-eins{grid-template-columns:minmax(0,1fr)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-karte{background:var(--f-sand, var(--grund));padding:30px 32px 34px;min-width:0; display:flex;flex-direction:column;gap:12px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-balken{display:block;width:30px;height:3px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-marke{font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--f-grau, var(--grau))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-titel{font-size:21px;font-weight:700;letter-spacing:-.022em; color:var(--anthrazit);line-height:1.25;margin:0;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-text{font-size:16px;line-height:1.7;color:var(--anthrazit);margin:0; text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-link{margin:auto 0 0;padding-top:6px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-fakten{list-style:none;margin:2px 0 0;padding:0;display:flex; flex-direction:column;gap:6px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-fakten li{font-size:15px;font-weight:700;color:var(--anthrazit); border-top:1px solid var(--f-linie, var(--linie));padding-top:6px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-bereiche{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px;margin-top:64px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-bereich{background:var(--f-weiss, var(--weiss));border:1px solid var(--f-linie, var(--linie)); padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px; text-decoration:none;min-width:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-bereich:hover, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-bereich:focus-visible{border-color:var(--magenta)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-bereich-name{font-size:18px;font-weight:700;color:var(--anthrazit)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-bereich-text{font-size:14.5px;line-height:1.6;color:var(--f-grau, var(--grau)); text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-strom{list-style:none;margin:24px 0 0;padding:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zeile{display:grid;grid-template-columns:150px minmax(0,1fr); gap:clamp(8px, -0.0478rem + 2.2472vw, 28px);border-top:1px solid var(--f-linie, var(--linie));padding:20px 8px 22px;align-items:start} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zeile:last-child{border-bottom:1px solid var(--f-linie, var(--linie))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zeile:hover{background:var(--f-sand, var(--grund))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-datum{font-size:14px;font-weight:700;letter-spacing:.02em; color:var(--f-grau, var(--grau));padding-top:2px;white-space:nowrap} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-inhalt{display:flex;flex-direction:column;gap:6px;min-width:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-medium{font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--violett)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zeile-titel{font-size:18px;font-weight:700;color:var(--anthrazit); line-height:1.35;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zeile-titel a{color:var(--anthrazit);text-decoration:none} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zeile-titel a:hover, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zeile-titel a:focus-visible{color:var(--magenta)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-anlass{font-size:14.5px;color:var(--f-grau, var(--grau))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-teaser{font-size:16px;line-height:1.7;color:var(--anthrazit); max-width:76ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-quellen{display:flex;flex-wrap:wrap;gap:14px;margin-top:2px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-quelle{font-size:14px;font-weight:700;color:var(--magenta)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-quelle:hover, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-quelle:focus-visible{color:var(--violett)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-ankerreihe{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px; padding-bottom:8px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-anker{background:var(--f-weiss, var(--weiss));border:1px solid var(--linie);color:var(--anthrazit); padding:9px 18px;font-size:15px;font-weight:700;text-decoration:none} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-anker:hover, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-anker:focus-visible{background:var(--magenta);border-color:var(--magenta);color:var(--weiss)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-jahrgang{margin-top:56px;scroll-margin-top:24px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-jahr{font-size:clamp(25px, 1.4256rem + 0.5618vw, 30px);font-weight:700;letter-spacing:-.03em; color:var(--anthrazit);margin:0;display:flex;align-items:baseline;gap:16px; border-bottom:2px solid var(--anthrazit);padding-bottom:10px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-anzahl{font-size:14px;font-weight:500;color:var(--f-grau, var(--grau)); letter-spacing:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-lesespalte{max-width:72ch} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-lesespalte .sg-prosa p{font-size:clamp(17px, 1.0077rem + 0.2247vw, 19px);line-height:1.75; color:var(--anthrazit);margin:0 0 22px;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-lesespalte .sg-prosa h2{font-size:clamp(23px, 1.3006rem + 0.5618vw, 28px);font-weight:700; letter-spacing:-.028em;color:var(--anthrazit);margin:clamp(40px, 2.1713rem + 1.3483vw, 52px) 0 14px;line-height:1.18; max-width:26ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-lesespalte .sg-prosa strong{color:var(--anthrazit);font-weight:700} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-these{margin:0 0 30px;padding:22px 0 22px 26px; border-left:3px solid var(--magenta)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-these p{font-size:clamp(19px, 1.1053rem + 0.3371vw, 22px);line-height:1.5;font-weight:700; color:var(--anthrazit);margin:0;max-width:44ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px, 1.1713rem + 1.3483vw, 36px);margin-top:8px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-kpi{border-top:2px solid var(--anthrazit);padding-top:18px;min-width:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-kpi-wert{display:block;font-size:clamp(29px, 1.6756rem + 0.5618vw, 34px);font-weight:700; letter-spacing:-.03em;color:var(--anthrazit);line-height:1.1;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-kpi-text{display:block;font-size:15.5px;line-height:1.65; color:var(--anthrazit);margin-top:10px;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-visual{margin:56px 0 0;padding:34px 36px 30px;background:var(--f-sand, var(--grund))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-visual figcaption{font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--f-grau, var(--grau));margin-bottom:22px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-visual.v-c figcaption{color:var(--violett)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-svg{width:100%;height:auto;display:block;overflow:visible} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-svg-label{font-size:15px;fill:var(--anthrazit)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-svg-label.is-leit{font-weight:700;fill:var(--anthrazit)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-svg-wert{font-size:15px;fill:var(--grau)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-svg-wert.is-leit{font-weight:700;fill:var(--magenta)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-svg-zahl{font-size:19px;font-weight:700;fill:var(--weiss)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-svg-knoten{font-size:14px;font-weight:700;fill:var(--weiss)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-svg-knoten-marke{font-size:10.5px;font-weight:700; letter-spacing:.16em;fill:var(--weiss);opacity:.85} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-minivisual{margin:6px -6px 0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-minivisual .pv-wi-svg{max-height:132px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-fakttabelle{width:100%;border-collapse:collapse;margin-top:6px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-fakttabelle th{text-align:left;font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--f-grau, var(--grau)); border-bottom:2px solid var(--anthrazit);padding:0 18px 10px 0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-fakttabelle td{font-size:16px;line-height:1.65;color:var(--anthrazit); border-bottom:1px solid var(--f-linie, var(--linie));padding:14px 18px 14px 0;vertical-align:top} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-fakttabelle td:first-child{font-weight:700;color:var(--anthrazit); width:30%} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-grundlage{list-style:none;margin:6px 0 0;padding:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-grundlage li{border-top:1px solid var(--f-linie, var(--linie));padding:14px 0; font-size:16px;line-height:1.6;display:flex;flex-wrap:wrap;gap:6px 18px; align-items:baseline} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-rolle{font-size:14.5px;color:var(--f-grau, var(--grau))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-utility{margin:44px 0 0;padding-top:22px; border-top:1px solid var(--f-linie, var(--linie));display:flex;flex-wrap:wrap;gap:6px 16px; align-items:baseline} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-pdf{font-size:15px;font-weight:700;color:var(--anthrazit); text-decoration:underline;text-underline-offset:3px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-pdf:hover, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-pdf:focus-visible{color:var(--magenta)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-utility-zusatz{font-size:14.5px;color:var(--f-grau, var(--grau))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-gegen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px;margin:34px 0 34px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-gegen > div{background:var(--f-sand, var(--grund));padding:26px 30px 28px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-gegen dt{font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--f-grau, var(--grau));margin:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-gegen dd{font-size:19px;line-height:1.45;font-weight:700; color:var(--anthrazit);margin:12px 0 0;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-abschlusslink{margin:34px 0 0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wpkarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px;margin-top:40px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wpkarte{background:var(--f-sand, var(--grund));display:grid; grid-template-columns:170px minmax(0,1fr);gap:0;min-width:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-cover{width:100%;height:auto;aspect-ratio:700/990; object-fit:contain;display:block;align-self:start;background:var(--f-weiss, var(--weiss))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wptext{padding:28px 30px 32px;display:flex;flex-direction:column; gap:12px;min-width:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wpseite{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(40px, 1.8427rem + 2.6966vw, 64px);align-items:start} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wpcover{position:sticky;top:24px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-cover-gross{width:100%;height:auto;object-fit:contain; border:1px solid var(--f-linie, var(--linie))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-angaben{margin:22px 0 0;display:grid;gap:10px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-angaben div{display:flex;gap:10px;font-size:15px; border-top:1px solid var(--f-linie, var(--linie));padding-top:10px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-angaben dt{font-weight:700;color:var(--anthrazit);margin:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-angaben dd{margin:0;color:var(--f-grau, var(--grau))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-untertitel{font-size:20px;line-height:1.45;color:var(--f-grau, var(--grau)); margin:0 0 22px;max-width:52ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wpinhalt{min-width:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wpinhalt .sg-prosa p{font-size:18px;line-height:1.7; color:var(--anthrazit);margin:0 0 18px;max-width:58ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wpinhalt .sg-prosa li{font-size:17px;line-height:1.65; color:var(--anthrazit);margin:0 0 12px;max-width:58ch} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-formular{background:var(--f-sand, var(--grund));padding:clamp(24px, 1.2809rem + 0.8989vw, 32px) clamp(22px, 1.0463rem + 1.3483vw, 34px) clamp(26px, 1.4059rem + 0.8989vw, 34px); margin:48px 0 0;display:flex;flex-direction:column;gap:18px;max-width:52ch} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-formularlead{font-size:17px;line-height:1.6;color:var(--anthrazit); margin:0;font-weight:700} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-feld{display:flex;flex-direction:column;gap:8px;font-size:15px; color:var(--anthrazit)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-feld input{font:inherit;font-size:16px;padding:12px 14px; border:1px solid var(--linie);background:var(--f-weiss, var(--weiss));color:var(--anthrazit)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-feld input:focus-visible{outline:2px solid var(--magenta); outline-offset:1px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-feld abbr{color:var(--magenta);text-decoration:none} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-check{display:flex;gap:12px;align-items:flex-start; font-size:15px;line-height:1.6;color:var(--anthrazit)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-check input{margin-top:4px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-knopf{align-self:flex-start;border:1px solid var(--magenta); background:var(--magenta);color:var(--weiss);font:inherit;font-size:15px;font-weight:700; padding:12px 24px;cursor:pointer;text-decoration:none} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-knopf:hover, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-knopf:focus-visible{background:var(--f-violett-flaeche, var(--violett));border-color:var(--violett);color:var(--weiss)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-abschluss{margin-top:96px;min-height:0;padding:clamp(56px, 2.8975rem + 2.4719vw, 78px) 0 !important; background:var(--f-violett-flaeche, var(--violett))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-abschluss .sg-abschluss-inner{max-width:1280px;margin:0 auto; padding:0 clamp(20px, 0.7022rem + 2.2472vw, 40px);width:100%} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-cta-knopf{display:flex;align-items:flex-start} @media (max-width:1279px){ body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-bereiche{grid-template-columns:repeat(3,minmax(0,1fr))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wpseite{grid-template-columns:minmax(0,240px) minmax(0,1fr);} } @media (max-width:1023px){ body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-drei{grid-template-columns:minmax(0,1fr)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zwei{grid-template-columns:minmax(0,1fr)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-bereiche{grid-template-columns:repeat(2,minmax(0,1fr))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wpkarten{grid-template-columns:minmax(0,1fr)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wpseite{grid-template-columns:minmax(0,1fr);} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wpcover{position:static;max-width:280px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-gegen{grid-template-columns:minmax(0,1fr)} } @media (max-width:600px){ body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zeile{grid-template-columns:minmax(0,1fr); padding:18px 0 20px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-bereiche{grid-template-columns:minmax(0,1fr)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-kpis{grid-template-columns:minmax(0,1fr);} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-wpkarte{grid-template-columns:minmax(0,1fr)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-cover{max-width:200px;margin:22px auto 0;height:auto} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-visual{padding:24px 20px 22px;margin-top:40px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-visual, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-minivisual{overflow-x:auto} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-abbildung{overflow-x:auto;padding:24px 20px 22px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-svg{min-width:520px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-lesespalte .sg-prosa p{line-height:1.72} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-lesespalte .sg-prosa h2{margin:clamp(40px, 2.1713rem + 1.3483vw, 52px) 0 12px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-fakttabelle td:first-child{width:38%} } body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-svg-mini{font-size:11.5px;fill:var(--grau);letter-spacing:.02em} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-svg-minizahl{font-size:17px;font-weight:700;fill:var(--weiss)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-weiter{list-style:none;margin:6px 0 0;padding:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-weiter li{border-top:1px solid var(--f-linie, var(--linie));padding:14px 0; display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-weiterart{font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--f-grau, var(--grau));min-width:110px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-weiterlink{font-size:17px;font-weight:700;color:var(--magenta)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-weiterlink:hover, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-weiterlink:focus-visible{color:var(--violett)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(28px, 1.6404rem + 0.4494vw, 32px)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-raster > *{min-width:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-raster > * + *{margin-top:clamp(24px, 1.3904rem + 0.4494vw, 28px)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-luft-m{margin-top:clamp(44px, 2.4213rem + 1.3483vw, 56px) !important} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-luft-g{margin-top:clamp(64px, 3.1236rem + 3.5955vw, 96px) !important} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-voll{grid-column:1 / span 12} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-links6{grid-column:1 / span 6} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-rechts6{grid-column:7 / span 6} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-links5{grid-column:1 / span 5} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-rechts7{grid-column:6 / span 7} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-links7{grid-column:1 / span 7} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-rechts4{grid-column:9 / span 4} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-lese p, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-nachlauf p, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-vorlauf p{font-size:var(--sg-t-prosa-lang);line-height:1.75;color:var(--anthrazit); margin:0 0 clamp(18px, 1.0154rem + 0.4494vw, 22px);text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-lese p:last-child, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-nachlauf p:last-child, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-vorlauf p:last-child{margin-bottom:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-lese strong, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-nachlauf strong{color:var(--anthrazit); font-weight:700} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-auftakt p{font-size:clamp(18px, 1.0428rem + 0.3371vw, 21px);line-height:1.62;color:var(--anthrazit); margin:0;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-thesenblock .pv-wi-these{margin:0;padding:clamp(18px, 0.9059rem + 0.8989vw, 26px) 0 clamp(18px, 0.9059rem + 0.8989vw, 26px) clamp(20px, 0.9761rem + 1.1236vw, 30px)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-thesenblock .pv-wi-these p{max-width:none;font-size:clamp(20px, 1.1404rem + 0.4494vw, 24px);line-height:1.45} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zwischen h2{margin:0;max-width:26ch} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-items-2{grid-template-columns:repeat(2,minmax(0,1fr))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-item{background:var(--f-sand, var(--grund));padding:clamp(22px, 1.2654rem + 0.4494vw, 26px) clamp(22px, 1.2107rem + 0.6742vw, 28px) clamp(24px, 1.3357rem + 0.6742vw, 30px);min-width:0; display:flex;flex-direction:column;gap:10px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-item-titel{font-size:18px;font-weight:700;letter-spacing:-.018em; color:var(--anthrazit);line-height:1.35;margin:0;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-item-text{font-size:16px;line-height:1.66;color:var(--anthrazit);margin:0; text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-visual{margin:0;padding:clamp(22px, 0.5534rem + 3.3708vw, 52px) clamp(18px, 0.0843rem + 4.2697vw, 56px) clamp(20px, 0.5379rem + 2.9213vw, 46px);background:var(--f-sand, var(--grund))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-visual figcaption{font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--f-grau, var(--grau));margin-bottom:clamp(20px, 0.9761rem + 1.1236vw, 30px)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-visual.v-c figcaption{color:var(--violett)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-visual .pv-wi-svg{width:100%;height:auto;display:block; overflow:visible} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-kpi-m .pv-wi-kpi-wert{font-size:28px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-kpi-s .pv-wi-kpi-wert{font-size:24px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-spalte{border-top:2px solid var(--anthrazit);padding-top:20px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-spalte h2{font-size:clamp(20px, 1.1952rem + 0.2247vw, 22px);font-weight:700;letter-spacing:-.024em; color:var(--anthrazit);line-height:1.2;margin:0 0 14px;max-width:22ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-spalte .sg-prosa p{font-size:18px;line-height:1.7;color:var(--anthrazit); margin:0 0 16px;max-width:58ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-spalte .sg-prosa p:last-child{margin-bottom:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-spalte-leise{border-top:1px solid var(--f-linie, var(--linie))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-sekundaer{border-top:1px solid var(--f-linie, var(--linie));padding-top:26px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-sekundaer .pv-wi-utility{margin:0;padding-top:0;border-top:0; display:block} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-sekundaer .pv-wi-utility-zusatz{display:block;margin-top:6px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zonenmarke{font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--f-grau, var(--grau));margin:0 0 12px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-blockkopf{border-top:2px solid var(--anthrazit);padding-top:20px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-blockkopf h2{font-size:clamp(22px, 1.2654rem + 0.4494vw, 26px);font-weight:700;letter-spacing:-.028em; color:var(--anthrazit);line-height:1.18;margin:0;max-width:30ch;text-wrap:pretty} @media (max-width:1279px){ body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-links5{grid-column:1 / span 5} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-rechts7{grid-column:6 / span 7} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-links7{grid-column:1 / span 7} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-rechts4{grid-column:8 / span 5} } @media (max-width:1023px){ body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-raster{display:block} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-zwischen h2{max-width:24ch} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-items{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-lese p, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-nachlauf p, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-vorlauf p{line-height:1.72} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-auftakt p{line-height:1.66} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-items{grid-template-columns:minmax(0,1fr)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-visual .pv-wi-svg{min-width:520px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-visual figure, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-visual{overflow-x:auto} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-abbildung .pv-wi-svg{min-width:520px} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-abbildung{overflow-x:auto} } body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-achse{display:block} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-achse > * + *{margin-top:clamp(24px, 1.3904rem + 0.4494vw, 28px)} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-achse .pv-wi-lese p, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-achse .pv-wi-vorlauf p, body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-achse .pv-wi-nachlauf p{max-width:55ch} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-achse .pv-wi-auftakt p{max-width:59ch} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-achse .pv-wi-these p{max-width:58ch} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-achse .pv-wi-zwischen h2{max-width:24ch} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-achse .pv-wi-thesenblock .pv-wi-these{margin:0} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-abbildung{margin:0;padding:clamp(22px, 0.5534rem + 3.3708vw, 52px) clamp(18px, 0.0843rem + 4.2697vw, 56px) clamp(20px, 0.5379rem + 2.9213vw, 46px);background:var(--f-sand, var(--grund))} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-abbildung .pv-wi-svg{width:100%;height:auto;display:block; overflow:visible} body.sg-vorlage:where(.sg-vl-wissen).sg-vorlage .pv-wi-abbildung figcaption{font-size:14px;line-height:1.6; color:var(--f-grau, var(--grau));margin-top:clamp(16px, 0.8511rem + 0.6742vw, 22px);max-width:62ch;text-wrap:pretty} /* ════ Teil Vorlagen · Produktübersicht (bis 2.0.3: assets/vorlagen/vorlage-startseite.css) ════ */ /* Vorlagen · preview-startseite.css aus Technik/Preview, Geltungsbereich body.sg-vorlage:where(.sg-vl-startseite). */ body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .sg-hero{height:auto;min-height:0;max-height:none} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .sg-hero-folie{position:relative;opacity:1} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-heroflaeche{height:640px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .sg-hero-text{position:absolute;left:calc(max(40px, (100vw - 1280px) / 2 + 40px)); right:40px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center; max-width:1000px;padding:56px 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-heroflaeche .sg-img{align-items:flex-end;justify-content:flex-end; padding:0 40px 24px 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-heroprosa{margin:26px 0 0;max-width:62ch} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-heroprosa p{font-size:18px;line-height:1.7;color:var(--linie);margin:0 0 14px; text-wrap:pretty} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-herozeile{font-size:17px;font-weight:700;color:var(--weiss);margin:6px 0 0; letter-spacing:-.01em} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-cta{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-cta .pv-st-cta-zwei{ font-size:15px;font-weight:700;text-decoration:none} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .sg-main > .pv-st-proof{padding:56px 40px 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-proof-marke{font-size:12px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--grau)} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-klammer{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px; margin:26px 0 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-logo{background:var(--f-sand, var(--grund));height:84px;display:flex;align-items:center; justify-content:center;font-size:12.5px;color:var(--grau);text-align:center;padding:0 12px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .sg-main > .pv-st-block{padding:88px 40px 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-block > h2{font-size:clamp(30px, 1.6559rem + 0.8989vw, 38px);font-weight:700;letter-spacing:-.035em; color:var(--anthrazit);margin:0;line-height:1.08;max-width:26ch} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-einl{margin:18px 0 0;max-width:74ch} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-einl p{font-size:17.5px;line-height:1.75;color:var(--anthrazit);margin:0 0 14px; text-wrap:pretty} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-einl p:last-child{margin-bottom:0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px, 1.2416rem + 1.5730vw, 40px);margin:34px 0 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-drei > div{border-top:1px solid var(--linie);padding-top:24px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-drei-titel{font-size:23px;font-weight:700;color:var(--anthrazit);letter-spacing:-.022em} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-drei-kurz{font-size:16.5px;font-weight:700;color:var(--anthrazit);margin:10px 0 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-drei p{font-size:16px;line-height:1.7;color:var(--f-grau, var(--grau));margin:10px 0 0; text-wrap:pretty} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px; margin:34px 0 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-karten .sg-lb{background:var(--f-sand, var(--grund));padding:32px 34px 36px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-karten .sg-lb-titel{font-size:21px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-karten p{font-size:16px;line-height:1.7;color:var(--f-grau, var(--grau));margin:10px 0 0; text-wrap:pretty} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-mehr{margin:28px 0 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-se-matrix{margin:32px 0 0;background:var(--f-weiss, var(--weiss));padding:24px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-se-matrix img{display:block;width:100%;height:auto} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-se-vier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px; margin:32px 0 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-se-feld{background:transparent;padding:26px 28px 28px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-se-titel{font-size:19px;font-weight:700;color:var(--weiss);letter-spacing:-.02em} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-se-feld p{font-size:16px;line-height:1.7;color:var(--linie);margin:8px 0 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-pfad{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:32px 0 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-pfad-schritt{background:transparent;color:var(--weiss);padding:10px 16px; font-size:14.5px;font-weight:500} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-pfad-pfeil{color:var(--gold);font-size:15px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-se-schluss{margin:26px 0 0;font-size:18px;line-height:1.7;color:var(--weiss); font-weight:700;max-width:70ch} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .sg-band .sg-mehr{color:var(--weiss);display:inline-block;margin-top:24px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .sg-band .sg-mehr:hover, body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .sg-band .sg-mehr:focus-visible{color:var(--weiss)} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px; margin:32px 0 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-lead{display:grid;grid-template-columns:1.2fr .8fr;gap:2px;margin:32px 0 0} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-lead-bild{background:var(--f-sand, var(--grund));min-height:260px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px, 0.5843rem + 4.2697vw, 64px); align-items:start;margin:34px 0 0} @media (max-width:1023px){ body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-drei, body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-karten, body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-se-vier{grid-template-columns:1fr;gap:2px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-vier{grid-template-columns:repeat(2,minmax(0,1fr))} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-lead, body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-zwei{grid-template-columns:1fr;gap:clamp(26px, 0.5843rem + 4.2697vw, 64px)} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-logos{grid-template-columns:repeat(3,minmax(0,1fr))} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-heroflaeche{height:520px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .sg-hero-text{bottom:64px} } @media (max-width:767px){ body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-vier, body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-logos{grid-template-columns:1fr} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-heroflaeche{height:460px} body.sg-vorlage:where(.sg-vl-startseite).sg-vorlage .pv-st-cta{flex-direction:column;align-items:flex-start} } /* ════ Teil Vorlagen · Produkte (bis 2.0.3: assets/vorlagen/vorlage-produkte.css) ════ */ /* Vorlagen · preview-produkte.css aus Technik/Preview, Geltungsbereich body.sg-vorlage:where(.sg-vl-produkte). */ body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-block > h2{ color:var(--anthrazit);margin:0;} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-einl{margin:18px 0 0;max-width:74ch} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-einl p{font-size:17.5px;line-height:1.75;color:var(--anthrazit);margin:0 0 14px; text-wrap:pretty} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-einl p:last-child{margin-bottom:0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-aussage{margin:24px 0 0;font-size:18px;line-height:1.7;font-weight:700; color:var(--anthrazit);max-width:72ch} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-mehr{margin:26px 0 0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage h1, body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-block > h2, body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .sg-cta-titel{ word-break:normal;} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-kopf-zwei > *{min-width:0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-kopf-titel{font-size:clamp(30px, 3.1vw, 46px)} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px; margin:34px 0 0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-karte{background:var(--f-sand, var(--grund));padding:36px 38px 40px;display:flex; flex-direction:column} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-karte-balken{width:30px;height:3px;background:var(--magenta);} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-karte-name{ margin:16px 0 0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-karte p{color:var(--f-grau, var(--grau));margin:12px 0 0; text-wrap:pretty} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-schwer{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-schwer span{background:var(--f-weiss, var(--weiss));border:1px solid var(--linie);color:var(--anthrazit); padding:8px 14px;font-size:13.5px;font-weight:700} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-karte .sg-mehr{margin-top:auto;padding-top:22px;align-self:flex-start;--sg-lu-top:calc(50% + 11px + .62em + 2px)} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px, 1.2416rem + 1.5730vw, 40px);margin:34px 0 0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-drei > div{border-top:1px solid var(--linie);padding-top:24px} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-drei-titel{font-size:23px;font-weight:700;color:var(--anthrazit);letter-spacing:-.022em} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-drei p{font-size:16px;line-height:1.7;color:var(--f-grau, var(--grau));margin:10px 0 0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-vier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px; margin:34px 0 0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-modell{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:32px 0 0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-stufe{background:var(--f-sand, var(--grund));padding:20px 22px 22px; font-size:16px;font-weight:700;color:var(--anthrazit);line-height:1.5;flex:1 1 200px;min-width:0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-op{align-self:center;font-size:20px;font-weight:700} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-modell-schluss{margin:22px 0 0;font-size:17px;line-height:1.7;color:var(--anthrazit); max-width:76ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-reife{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px, 1.2416rem + 1.5730vw, 40px);margin:32px 0 0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-reife > div{padding-top:24px;} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-reife-marke{font-size:12px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--grau)} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-reife p{font-size:16px;line-height:1.7;color:var(--f-grau, var(--grau));margin:12px 0 0; text-wrap:pretty} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-rolle{margin:28px 0 0;font-size:18px;font-weight:700;color:var(--anthrazit); line-height:1.6;max-width:74ch} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-kapsel{background:var(--f-sand, var(--grund));padding:30px 32px 32px;margin:32px 0 0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-kapsel h3{font-size:21px;color:var(--anthrazit);margin:0; letter-spacing:-.022em} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-kapsel p{font-size:16px;line-height:1.7;color:var(--f-grau, var(--grau));margin:12px 0 0; max-width:80ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px; margin:32px 0 0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-fall{background:var(--f-sand, var(--grund));padding:30px 32px 34px} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-fall-branche{font-size:12px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--grau)} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-fall-name{font-size:22px;font-weight:700;color:var(--anthrazit);margin:10px 0 0; letter-spacing:-.024em} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-fall p{font-size:16px;line-height:1.7;color:var(--f-grau, var(--grau));margin:12px 0 0; text-wrap:pretty} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-kennzahl{margin:16px 0 0;font-size:15px;font-weight:700;color:var(--anthrazit)} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-belegart{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--f-grau, var(--grau))} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-verwendung{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-bild .sg-img{min-height:360px;display:flex;align-items:center; justify-content:center;text-align:center;padding:24px;font-size:14px;line-height:1.6} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-bild-schmal .sg-img{min-height:240px} @media (max-width:1023px){ body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-zwei, body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-vier{grid-template-columns:1fr} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-drei, body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-reife{grid-template-columns:1fr;} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-proof{grid-template-columns:1fr} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-op{display:none} body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-ac-stufe{flex:1 1 100%} } @media (max-width:767px){ body.sg-vorlage:where(.sg-vl-produkte).sg-vorlage .pv-pr-bild .sg-img{min-height:260px} } /* ════ Teil Vorlagen · Smart Enterprise (bis 2.0.3: assets/vorlagen/vorlage-smart-enterprise.css) ════ */ /* Vorlagen · preview-smart-enterprise.css aus Technik/Preview, Geltungsbereich body.sg-vorlage:where(.sg-vl-smart-enterprise). */ body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx{background:var(--sg-sand,var(--f-sand, var(--grund)))} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-inner{max-width:1280px;margin:0 auto;padding:0} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px, 0.5843rem + 4.2697vw, 64px);align-items:start} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-kopf h2{color:var(--anthrazit); margin:0;} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-kopf p{font-size:18px;line-height:1.7;color:var(--anthrazit);margin:0 0 18px;max-width:50ch;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-kopf p:last-child{margin-bottom:0} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-kopf strong{color:var(--anthrazit);} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-abb{margin:52px 0 0;background:var(--f-weiss, var(--weiss));padding:clamp(18px, 0.5225rem + 2.4719vw, 40px) clamp(14px, 0.1629rem + 2.9213vw, 40px) clamp(12px, 0.2570rem + 2.0225vw, 30px);border:1px solid var(--sg-linie,var(--f-linie, var(--linie)))} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-flaeche{min-width:0} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-abb img{display:block;width:100%;height:auto;max-width:900px;margin:0 auto} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-quelle{font-size:13.5px;line-height:1.6;color:var(--f-grau, var(--grau));margin:26px 0 0;text-align:center} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-zwischen{font-size:clamp(21px, 1.2303rem + 0.3371vw, 24px);color:var(--anthrazit);letter-spacing:-.026em; margin:clamp(48px, 2.5618rem + 1.7978vw, 64px) 0 0;border-top:1px solid var(--f-linie, var(--linie));padding-top:26px;} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-pos-gitter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px, 1.0618rem + 1.7978vw, 40px);margin-top:32px} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-pos{min-width:0;padding-top:18px} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-pos h4{font-size:18px;font-weight:700;color:var(--anthrazit);letter-spacing:-.02em;margin:0;} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-pos p{font-size:15.5px;line-height:1.7;color:var(--f-grau, var(--grau));margin:10px 0 0;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin-top:32px} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-karte{background:var(--f-weiss, var(--weiss));padding:clamp(26px, 1.4607rem + 0.6742vw, 32px) clamp(22px, 1.0463rem + 1.3483vw, 34px) clamp(28px, 1.5309rem + 0.8989vw, 36px);min-width:0} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-karte .sg-lb-balken{background:var(--sg-gold,var(--gold))} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-karte h4{font-size:21px;font-weight:700;color:var(--anthrazit);letter-spacing:-.022em; margin:16px 0 0;line-height:1.28;} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-karte p{font-size:16px;line-height:1.7;color:var(--f-grau, var(--grau));margin:10px 0 0;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-karte strong{color:var(--anthrazit);} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-schluss{max-width:70ch} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-schluss p{font-size:17px;line-height:1.7;color:var(--anthrazit);margin:18px 0 0;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-schluss strong{color:var(--anthrazit);} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-schritt-gitter{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(24px, 1.2809rem + 0.8989vw, 32px);margin-top:44px} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-schritt{min-width:0;border-top:1px solid var(--grau);padding-top:24px} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-schritt-nr{color:var(--gold);display:block} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-schritt h3{font-size:19px;color:var(--weiss);letter-spacing:-.02em;margin:10px 0 0;} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-schritt p{color:var(--linie);margin:12px 0 0;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-band-schluss{margin:44px 0 0;color:var(--linie);} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-band-schluss strong{color:var(--linie)} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px; background:var(--sg-sand,var(--f-sand, var(--grund)))} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-bild{min-height:340px;background:linear-gradient(120deg,var(--f-violett-flaeche, var(--violett)),var(--f-violett-flaeche, var(--violett)) 62%); display:flex;align-items:center;justify-content:center;color:var(--grau);font-size:12px; letter-spacing:.12em;text-transform:uppercase} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-text{padding:clamp(36px, 2.0309rem + 0.8989vw, 44px) clamp(28px, 1.3118rem + 1.7978vw, 44px) clamp(40px, 2.2809rem + 0.8989vw, 48px);min-width:0;display:flex;flex-direction:column} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-marke{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--violett)} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-marke::before{content:"";flex:0 0 32px;height:3px;background:var(--gold)} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-text h2{color:var(--anthrazit); margin:16px 0 0;} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-text p{font-size:16.5px;line-height:1.7;color:var(--anthrazit);margin:16px 0 0;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-text strong{color:var(--anthrazit);} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-daten{margin-top:26px;padding-top:20px;border-top:1px solid var(--f-linie, var(--linie)); display:flex;gap:10px;flex-wrap:wrap} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-feld{background:var(--f-weiss, var(--weiss));border:1px solid var(--f-linie, var(--linie));padding:9px 14px; font-size:13.5px;color:var(--f-grau, var(--grau))} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-text .sg-cta{margin-top:26px;align-self:flex-start} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-report{display:grid;grid-template-columns:220px minmax(0,1fr);gap:2px; background:var(--sg-sand,var(--f-sand, var(--grund)));margin-top:28px} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-report-bild{background:var(--f-sand-tief, var(--grund));display:flex;align-items:center;justify-content:center;padding:26px} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-report-bild img{display:block;width:100%;height:auto;max-width:168px} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-report-text{padding:clamp(26px, 1.4607rem + 0.6742vw, 32px) clamp(22px, 1.0463rem + 1.3483vw, 34px) clamp(28px, 1.5309rem + 0.8989vw, 36px);min-width:0} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-report-marke{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--violett)} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-report-text h4{font-size:21px;font-weight:700;color:var(--anthrazit);letter-spacing:-.022em;margin:14px 0 0;} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-report-text p{font-size:16px;line-height:1.7;color:var(--f-grau, var(--grau));margin:10px 0 0;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-report-text strong{color:var(--anthrazit);} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-report-text .sg-cta{margin-top:22px} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-claim{margin:32px 0 0;font-size:clamp(19px, 1.1053rem + 0.3371vw, 22px);font-weight:700;line-height:1.35; letter-spacing:-.02em;color:var(--linie);text-wrap:pretty} @media (max-width:1279px){ body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-kopf{grid-template-columns:minmax(0,1fr);} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-pos-gitter{grid-template-columns:repeat(2,minmax(0,1fr));} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-schritt-gitter{grid-template-columns:repeat(3,minmax(0,1fr));} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-inner{grid-template-columns:minmax(0,1fr)} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-tagung-bild{min-height:220px} } @media (max-width:1023px){ body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-karten{grid-template-columns:minmax(0,1fr);gap:20px} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-report{grid-template-columns:minmax(0,1fr);gap:20px} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-report-bild{padding:32px} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-report-bild img{max-width:140px} } @media (max-width:600px){ body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-pos-gitter{grid-template-columns:minmax(0,1fr);} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-schritt-gitter{grid-template-columns:minmax(0,1fr);} body.sg-vorlage:where(.sg-vl-smart-enterprise).sg-vorlage .sg-mx-kopf h2, body.sg-vorlage:where(.sg-vl-smart-enterprise).sg-vorlage .sg-mx-zwischen, body.sg-vorlage:where(.sg-vl-smart-enterprise).sg-vorlage .sg-mx-pos h4, body.sg-vorlage:where(.sg-vl-smart-enterprise).sg-vorlage .sg-mx-karte h4, body.sg-vorlage:where(.sg-vl-smart-enterprise).sg-vorlage .sg-schritt h3, body.sg-vorlage:where(.sg-vl-smart-enterprise).sg-vorlage .sg-tagung-text h2, body.sg-vorlage:where(.sg-vl-smart-enterprise).sg-vorlage .sg-report-text h4{-webkit-hyphens:auto;overflow-wrap:break-word} } body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-scrollhinweis{display:none} @media (max-width:767px){ body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-flaeche{overflow-x:auto;-webkit-overflow-scrolling:touch; background-image:linear-gradient(to left,rgb(var(--anthrazit-rgb) / .10),rgb(var(--anthrazit-rgb) / 0) 40px); background-repeat:no-repeat;background-position:right center;background-size:40px 100%} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-abb img{width:660px;max-width:none} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-quelle{text-align:left} body.sg-vorlage:where(.sg-vl-smart-enterprise) .sg-mx-scrollhinweis{display:block;margin-top:8px} } /* ════ Teil Vorlagen · StrategionChat (bis 2.0.3: assets/vorlagen/vorlage-strategionchat.css) ════ */ /* StrategionChat, neu aufgebaut 26.09.2026 (inc/vorlage-strategionchat.php). Nur der Hauptinhalt dieser Seite; Kopf, Menue und Footer bleiben unberuehrt. Farben nach dem Regelwerk, keine Zierlinien, Kanten oder Rahmen. */ body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .sg-main{--sc-rand:clamp(20px, 5vw, 80px)} /* Stufen: offene, nummerierte Liste in einer Reihe */ body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-stufen-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:clamp(20px, 2.2vw, 36px)} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-stufe{margin:0;padding-top:clamp(18px, 1.8vw, 26px);border-top:1px solid var(--anthrazit);min-width:0} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-stufe-nr{display:block;font-size:clamp(40px, 3.6vw, 64px);font-weight:900;line-height:.9;letter-spacing:-.04em;color:var(--violett)} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-stufe-titel{margin:clamp(16px, 1.6vw, 24px) 0 0;font-size:clamp(19px, 1.35vw, 22px);letter-spacing:-.02em;line-height:1.2;color:var(--anthrazit)} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-stufe-text{margin:10px 0 0;color:var(--grau);text-wrap:pretty} /* Grosse Aussage: rahmend in 300, tragend in 900 Violett */ body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-aussage{margin:clamp(64px, 7vw, 120px) 0 0;max-width:22ch;font-size:clamp(32px, 1rem + 3.6vw, 68px);line-height:1.06;letter-spacing:-.035em;color:var(--anthrazit);text-wrap:balance} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-aussage .sg-schnitt-schwer{font-weight:900;color:var(--violett)} /* Der tragende Teil beginnt auf eigener Zeile (wie bei den Ueberschriften) */ body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-aussage .sg-schnitt-leicht + .sg-schnitt-schwer::before{content:"\A";white-space:pre} /* Folgt direkt die Pause, steht die Aussage als Lead: nicht zwei grosse Aussagen hintereinander */ body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .sg-main > .pv-sc-stufen:has(+ .sg-pause) .pv-sc-aussage:last-child{margin-top:clamp(40px, 4vw, 64px);max-width:36ch; font-size:clamp(22px, .95rem + .75vw, 29px);line-height:1.3;letter-spacing:-.018em;text-wrap:pretty} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .sg-main > .pv-sc-stufen:has(+ .sg-pause) .pv-sc-aussage:last-child .sg-schnitt-schwer{font-weight:700} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .sg-main > .pv-sc-stufen:has(+ .sg-pause) .pv-sc-aussage:last-child .sg-schnitt-schwer::before{content:none} /* Was StrategionChat leistet: Funktionen als ruhige Zeile unter dem Text */ /* Etiketten wie auf den uebrigen Seiten: Satzschreibung, 14 px, 700, #444443 */ body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-funktionen-marke{display:block;margin-bottom:4px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--grau)} /* Produktansichten gross, ohne Schatten; die Haarlinie trennt Weiss von Weiss */ body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-bild{margin:clamp(48px, 5vw, 88px) 0 0} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-bild img{display:block;width:100%;height:auto;border:1px solid var(--linie)} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-bild-dunkel img{border-color:var(--grau)} /* Vom Wissen zur Handlung: dunkle Flaeche mit der Produktlogik als Gleichung */ body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-logik-kopf{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:clamp(24px, 4vw, 64px);align-items:start} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-logik-kopf h2{margin:0;color:var(--weiss)} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-logik-kopf .sg-br-text{margin:0;max-width:52ch;color:var(--linie)} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-formel{margin:clamp(56px, 6vw, 104px) 0 0;max-width:none;font-size:clamp(28px, .9rem + 2.4vw, 54px);line-height:1.18;letter-spacing:-.03em;color:var(--weiss);text-wrap:balance} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-glied{font-weight:300;white-space:nowrap} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-op{font-weight:300;color:var(--linie);padding:0 .12em} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-ergebnis{color:var(--weiss)} /* Standardisiert und erweiterbar: zwei Spalten mit Listen */ body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-spalten{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:clamp(32px, 5vw, 96px);margin-top:clamp(32px, 3.4vw, 56px)} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-spalte h3{margin:0 0 clamp(14px, 1.4vw, 20px);font-size:clamp(22px, 1.7vw, 28px);letter-spacing:-.025em;line-height:1.15;color:var(--anthrazit)} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-spalte ul{list-style:none;margin:0;padding:0} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-spalte li{margin:0;padding:12px 0;border-top:1px solid var(--linie);font-size:17px;line-height:1.45;color:var(--anthrazit)} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-spalte li:last-child{border-bottom:1px solid var(--linie)} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-standard .pv-sc-aussage{max-width:24ch} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-nachsatz{margin:clamp(20px, 2vw, 28px) 0 0;max-width:60ch;font-size:var(--sg-t-prosa, 18px);line-height:1.6;color:var(--grau)} /* Produkt und Umsetzung */ body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-passend-marke, body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-passend .pv-sc-passend-marke{display:block;margin-bottom:6px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--grau)} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-vertrauen{margin-top:clamp(28px, 3vw, 44px) !important;} @media (max-width:1023px){ body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-stufen-liste{grid-template-columns:repeat(2, minmax(0, 1fr))} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-logik-kopf, body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-spalten{grid-template-columns:minmax(0, 1fr)} } @media (max-width:600px){ body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-stufen-liste{grid-template-columns:minmax(0, 1fr)} body.sg-vorlage:where(.sg-vl-strategionchat).sg-vorlage .pv-sc-glied{white-space:normal} } /* ════ Teil Vorlagen · Karten (bis 2.0.3: assets/vorlagen/karten.css) ════ */ /* Vorlagen · gefuellte Karten. Die Vorlagen zeigen Referenzen und Stellen nur als Platzhalter. Hier stehen dieselben Karten mit Inhalt. Masse aus .sg-proof (vorlage.css) und den Karten unter News & Wissen (vorlage-wissen.css: Marke, Titel, Text). */ body.sg-vorlage a.sg-proof{text-decoration:none;color:inherit} body.sg-vorlage .sg-proof-bild{position:relative;overflow:hidden} body.sg-vorlage .sg-proof-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} body.sg-vorlage a.sg-proof:hover .sg-proof-bild img, body.sg-vorlage a.sg-proof:focus-visible .sg-proof-bild img{transform:scale(1.03)} body.sg-vorlage .sg-proof-marke{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--f-grau, var(--grau));line-height:1.4} body.sg-vorlage .sg-proof-titel{font-size:21px;font-weight:700;letter-spacing:-.022em;color:var(--anthrazit);line-height:1.25;text-wrap:pretty} body.sg-vorlage .sg-proof-text{font-size:16px;line-height:1.7;color:var(--anthrazit);text-wrap:pretty} body.sg-vorlage .sg-proof-link{margin-top:auto;padding-top:6px;font-size:14.5px;font-weight:700;color:var(--sg-magenta)} body.sg-vorlage a.sg-proof:hover .sg-proof-link, body.sg-vorlage a.sg-proof:focus-visible .sg-proof-link{color:var(--sg-violett)} /* Vier Karten nebeneinander (Produkte im Einsatz) */ body.sg-vorlage .pv-st-vier .sg-proof-bild{height:170px} /* Stellen: die ganze Karte fuehrt auf die Ausschreibung */ body.sg-vorlage a.sg-stellenkarte{text-decoration:none;color:inherit;transition:background-color .25s ease} body.sg-vorlage a.sg-stellenkarte:hover, body.sg-vorlage a.sg-stellenkarte:focus-visible{background:var(--f-sand-tief, var(--grund))} body.sg-vorlage a.sg-stellenkarte:hover .sg-lb-titel, body.sg-vorlage a.sg-stellenkarte:focus-visible .sg-lb-titel{color:var(--sg-magenta)} /* Vier Referenzen nebeneinander: Leistungs- und Expertise-Seiten, Uebersichten. Das Bild steht im Format 3:2, damit es in der schmaleren Spalte ganz bleibt. */ body.sg-vorlage .sg-proof-gitter.ist-vier{grid-template-columns:repeat(4,minmax(0,1fr));} body.sg-vorlage .sg-proof-gitter.ist-vier .sg-proof-bild{height:auto;aspect-ratio:3/2} body.sg-vorlage .sg-proof-gitter.ist-vier .sg-proof-inner{padding:22px 24px 26px;gap:10px} body.sg-vorlage .sg-proof-gitter.ist-vier .sg-proof-titel{font-size:19px;line-height:1.28} body.sg-vorlage .sg-proof-gitter.ist-vier .sg-proof-text{font-size:15px;line-height:1.65} @media (max-width:1279px){body.sg-vorlage .sg-proof-gitter.ist-vier{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){body.sg-vorlage .sg-proof-gitter.ist-vier{grid-template-columns:minmax(0,1fr)}} /* Neueste Referenzen auf den Uebersichten: ohne eigene Blockueberschrift */ body.sg-vorlage .sg-neueste > .sg-bereich{margin-top:0} /* Ohne eigene Zwischenueberschrift steht der Verweis trotzdem rechts */ body.sg-vorlage .sg-bereich-kopf .sg-mehr{margin-left:auto} /* ════ Teil neu (Flächen, Kopf, Knöpfe) (bis 2.0.3: assets/neu.css) ════ */ /* Gestaltung aller Seiten (body.sg-neu, inc/neu.php). THESIS Jede Unterseite oeffnet wie ein Strategion-Report: heller Umschlag, darauf gross das i aus dem Logo, am Seitenrand angeschnitten, der goldene Stamm vom Magenta-Band verdeckt. Kein flacher Farbkasten. WELT Das Logo steht auf zwei Reihen gleich grosser Bloecke, getrennt von einer Fuge (0,27 der Blockhoehe), Ecken gerundet wie im Logo (3 px bei 51 px). Das i sind zwei Quadrate: Magenta ueber Gold. PUNKT Der i-Punkt schliesst, er zaehlt nicht auf: ein Magenta-Quadrat auf der Grundlinie, nur am Ende einer Abschnittsueberschrift (h2) im Inhalt und am Titel im Kopf der Startseite, eine je Abschnitt. Karten, Kacheln, Quicklinks, Footer und Listen in Ruhe ohne Punkt; in Verweisen, Knoepfen, Quicklinks und den Kacheln erscheint er beim Ueberfahren. Dazu der Punkt der Navigation. Jede Bewegung des Punkts ist dieselbe: er rueckt ein Stueck nach rechts vor. Keine Versal-Etiketten, keine dicken Farblinien: Haarlinien wie in den Kapiteln. CI Nur die Farbwelt des Styleguides: Magenta #B50063, Anthrazit #2C2C2B, Gold #BC9E78, Violett #571763, je 100/80/60/40/20 %, dazu Weiss, kein Rosa (Magenta-Aufhellung) als Schrift; helle Flaechen Gold 10 % #F5F5F5 (CI-Vorlage: Karten und Flaechen 10 bis 12 %). Keine halbtransparenten Farben auf farbigem Grund, sie mischen sich zu Fremdtoenen: auf Violett Schrift Violett 20 %, Linien Violett 80 %; auf Anthrazit entsprechend. inc/ci-farben.php stellt auch Vorlagen aus der Datenbank um. BEWEGUNG Der Punkt wird gesetzt. Beim Laden steigt der Stamm des grossen i auf, der Punkt setzt sich darauf. Schlusspunkte fallen beim Hereinscrollen auf die Grundlinie. In Verweisen rueckt der Punkt beim Ueberfahren ein Stueck vor. Sonst bewegt sich nichts. LESEN Lange Texte stehen als Kapitel: Haarlinie, die Ueberschrift bleibt ab 1024 px beim Lesen stehen (sticky). Text und Reihenfolge fest. FARBE Nie zwei weisse Kapitel hintereinander: das zweite liegt auf Violett oder Sand, im Wechsel (inc/neu.php). Farbflaechen laufen von Rand zu Rand und stossen ohne weissen Spalt aneinander. KNOPF Eine Knopfform: Magenta, Ecken wie im Logo; beim Ueberfahren Violett und der i-Punkt rueckt ein. Zweitknoepfe und Verweise: Magenta-Text. Nach draussen das gezeichnete Symbol. ABSTAND Ein Abstand zwischen Kopf und Inhalt, einer zwischen Inhalt und Abschluss: --sg-abstand. */ body.sg-neu{ --sg-i-kopf: clamp(64px, 15.5vw, 236px); --sg-tinte-tief: var(--anthrazit); --sg-auslauf: cubic-bezier(.16, 1, .3, 1); } /* ── Das i ─────────────────────────────────────────────────────────────── */ .sg-i{--sg-i: var(--sg-i-kopf);display:flex;flex-direction:column;gap:calc(var(--sg-i) * .27);width:var(--sg-i);pointer-events:none} .sg-i span{display:block;width:100%;aspect-ratio:1/1;border-radius:calc(var(--sg-i) * 3 / 51)} .sg-i-punkt{background:var(--sg-magenta)} .sg-i-stamm{background:var(--sg-gold)} /* Beim Laden: der Stamm steigt hinter dem Band auf, dann setzt sich der Punkt */ @keyframes sg-i-stamm{from{transform:translateY(46%)}to{transform:none}} @keyframes sg-i-punkt{from{transform:translateY(-38%);opacity:0}to{transform:none;opacity:1}} .sg-kopf-i .sg-i-stamm{animation:sg-i-stamm .9s var(--sg-auslauf) both} .sg-kopf-i .sg-i-punkt{animation:sg-i-punkt .7s var(--sg-auslauf) .32s both} /* ── Seitenkopf ────────────────────────────────────────────────────────── */ /* Heller Umschlag. Das i steht rechts, zu knapp einem Drittel ueber den Seitenrand hinaus; der Stamm laeuft hinter dem Band weiter. */ body.sg-neu .sg-main .sg-seitenkopf{position:relative;overflow:hidden;background:var(--sg-tinte-tief); padding:clamp(56px, 6.4vw, 96px) 0 clamp(56px, 5.6vw, 84px) !important} body.sg-neu .sg-kopf-i{position:absolute;right:calc(var(--sg-i-kopf) * -.3);bottom:calc(var(--sg-i-kopf) * -.42)} @media (min-width:1024px){ /* Rechts bleibt Platz fuer das i, die Absaetze ruecken nicht darunter */ body.sg-neu .sg-main .sg-seitenkopf-inner{padding-right:max(var(--sg-rand, 40px), calc(var(--sg-i-kopf) * .7 + 56px - (100vw - 1280px) / 2))} /* Der Kopf ist mindestens so hoch, dass der i-Punkt ganz zu sehen ist */ body.sg-neu .sg-main .sg-seitenkopf{min-height:calc(var(--sg-i-kopf) * 1.85 + clamp(56px, 6.4vw, 96px))} } @media (max-width:1023px){ /* Schmal: das i steht rechts unten, der Text endet darueber */ body.sg-neu{--sg-i-kopf: clamp(96px, 31vw, 150px)} body.sg-neu .sg-main .sg-seitenkopf{padding-bottom:calc(var(--sg-i-kopf) * 1.85 + 20px) !important} /* Kurzer Titel: deutlich groesser als der Satz, der unter dem Kopf folgt */ body.sg-neu .sg-main .sg-seitenkopf.ist-kurz .sg-kopf-titel{font-size:clamp(38px, 11vw, 48px) !important} } /* Hell (Standard): Sand statt Tinte, dunkle Schrift; das i in den Logofarben */ body.sg-neu-hell .sg-main .sg-seitenkopf{background:var(--sg-sand)} body.sg-neu-hell .sg-seitenkopf .sg-kopf-titel{color:var(--sg-tinte)} body.sg-neu-hell .sg-seitenkopf .sg-kopf-absaetze p{color:var(--anthrazit)} body.sg-neu-hell .sg-seitenkopf .sg-kopf-absaetze strong, body.sg-neu-hell .sg-seitenkopf .sg-kopf-absaetze a{color:var(--sg-tinte)} /* ── Striche weg ──────────────────────────────────────────────────────── */ /* Jeder kleine Strich ueber einer Ueberschrift oder vor einem Etikett faellt weg; die Titel darunter tragen stattdessen den Schlusspunkt. */ body.sg-neu :is(.sg-lb-balken, .sg-fuss-strich, .sg-hero-strich, .sg-exp-strich, .sg-prod-strich, .sg-lkarte-strich, .sg-kar-stimme-strich, .pv-pr-karte-balken){display:none !important} body.sg-neu .sg-main [style*="height:3px"][style*="width:3"]{display:none !important} /* ── i-Punkt als Schlusspunkt ─────────────────────────────────────────── */ /* Regel: Der Punkt schliesst, er zaehlt nicht auf. Er steht nur am Ende einer Abschnittsueberschrift (h2), eine je Abschnitt. Kacheln, Karten, Baustein- und Blocktitel, Footer und Listen bleiben ohne Punkt; in Verweisen und Knoepfen erscheint er erst beim Ueberfahren. Ein leeres Inline-Element mit Innenabstand: es haengt am letzten Wort und kann nicht allein in die naechste Zeile rutschen. Das Quadrat sitzt auf der Grundlinie (Roboto: Unterlaenge 0,245 em). */ /* Kein i-Punkt mehr hinter Ueberschriften im Hauptinhalt (Auftrag 26.09.2026: keine Schmuckquadrate) */ /* Ueberschriften in Karten sind keine Abschnitte */ body.sg-neu .sg-main :is(.sg-kb-karte, .pv-pr-karte, .sg-stellenkarte, .sg-lb, .sg-mk, .sg-fr-fall, .sg-kon-karte, .sg-imp-karte) h2::after{display:none} /* Endet die Ueberschrift schon mit einem Satzzeichen, entfaellt der Punkt (inc/neu.php) */ body.sg-neu .sg-ohne-punkt::after{display:none} /* Beim Hereinscrollen: der Punkt faellt auf die Grundlinie (app.js setzt die Klasse) */ .sg-punkt-wartet{--sg-punkt-y: .7em;--sg-punkt-o: 0} /* In Verweisen rueckt der Punkt beim Ueberfahren vor, wie ein Weiter */ body.sg-neu a:is(:hover, :focus-visible){--sg-punkt-x: .2em} /* ── Etiketten in Satzschreibung ──────────────────────────────────────── */ /* Keine Versalien mit Sperrung: dieselben Woerter als ruhige Nebenzeile. Der Text bleibt wortgleich. Ausnahmen: das Etikett im Kopf der Startseite und Formularbeschriftungen. */ body.sg-neu :is(.sg-ans-expertise-titel, .sg-ans-punkt-titel, .sg-arb-beleg-titel, .sg-fr-jahr, .sg-fr-kunde, .sg-kon-label, .sg-mk-kat, .sg-tr-rubrik, .pv-kicker, .sg-chips-marke, .sg-proof-marke, .sg-report-marke, .sg-tagung-marke, .pv-ac-fall-branche, .pv-ac-reife-marke, .pv-ex-liste-marke, .pv-ex-tr-marke, .pv-sc-liste-marke, .pv-st-proof-marke, .pv-wi-marke, .pv-wi-medium, .pv-wi-weiterart, .pv-wi-zonenmarke), body.sg-neu:not(.home) .sg-logobar-kicker, body.sg-neu:not(.home) .sg-main [style*="text-transform:uppercase"]{ text-transform:none !important;letter-spacing:0 !important;font-size:14px !important;font-weight:700 !important} body.sg-neu :is(.pv-un-zeitmarke, .pv-wi-fakttabelle th, .pv-wi-gegen dt, .pv-wi-visual figcaption){text-transform:none;letter-spacing:0} body.sg-neu .sg-proof-marke{color:var(--f-grau, var(--grau)) !important} body.sg-neu .pv-ex-liste-marke{color:var(--anthrazit) !important} /* Kategorie der Referenz als Zeile unter dem Titel, nicht als Etikett darueber */ body.sg-neu .sg-proof-inner > .sg-proof-titel{order:1} body.sg-neu .sg-proof-inner > .sg-proof-marke{order:2;margin-top:-4px;font-weight:500 !important} body.sg-neu .sg-proof-inner > .sg-proof-text{order:3} body.sg-neu .sg-proof-inner > .sg-proof-link{order:4} /* Die Karte des Ansprechpartners braucht keine Beschriftung ueber dem Namen */ /* ── Haarlinien statt Farbbalken ──────────────────────────────────────── */ body.sg-neu .sg-main [style*="border-top:2px solid"], body.sg-neu .sg-main [style*="border-top:3px solid"]{border-top:1px solid var(--sg-haar) !important} body.sg-neu :is(.pv-ex-tr-weg, .pv-ex-aussage, .sg-mx-pos, .pv-ac-stufe, .pv-ac-reife > div, .sg-st-karte, .sg-ans-wirkung, .sg-arb-belege, .pv-wi-kpi, .pv-wi-spalte, .pv-wi-blockkopf){border-top:1px solid var(--sg-haar) !important} body.sg-neu :is(.sg-arb-merksatz, .pv-wi-these){border-left:1px solid var(--sg-haar)} /* ── Footer: Standorte in der Sprache der Spalten darueber ─────────────── */ body.sg-neu .sg-fuss-ort-stadt .sg-fuss-li{display:none} body.sg-neu .sg-fuss-ort-haus, body.sg-neu .sg-fuss-ort-zeile{display:block;} body.sg-neu .sg-fuss-ort-weg{line-height:1.5;} body.sg-neu .sg-fuss-ort-weg:hover, body.sg-neu .sg-fuss-ort-weg:focus-visible{color:var(--weiss)} body.sg-neu .sg-fuss-orte{align-items:start} body.sg-neu .sg-fuss-orte-kopf{margin-top:0} /* ── Abstaende ─────────────────────────────────────────────────────────── */ /* Nach dem Band: immer derselbe Abstand zum ersten Inhalt. Ein Abschnitt, der seinen Abstand als Innenabstand im Stil mitbringt, verliert ihn hier. */ body.sg-neu.sg-neu .sg-main > .sg-kopf-band + *{margin-top:var(--sg-abstand) !important} body.sg-neu.sg-neu .sg-main > .sg-kopf-band + [style*="padding"]{padding-top:0 !important} /* Liegt der Abstand eine Ebene tiefer (Referenzen) oder im Abschnitt selbst (Kontakt), faellt er dort weg: gezaehlt wird nur --sg-abstand. */ body.sg-neu.sg-neu .sg-main > .sg-kopf-band + * > [style*="padding"]:first-child{padding-top:0 !important} body.sg-neu.sg-neu .sg-main > .sg-kopf-band + .sg-st{padding-top:0 !important} /* Am Seitenende: leere Abstandshalter und der Innenabstand des letzten Blocks bringen genau --sg-abstand mit, nicht 96 oder 100 Pixel */ body.sg-neu.sg-neu .sg-main > div[style="padding-bottom:96px"]{padding-bottom:var(--sg-abstand) !important} /* Das Logoband bringt seinen Abstand selbst mit, ein Abstandshalter davor wuerde ihn verdoppeln */ body.sg-neu.sg-neu .sg-main > div[style="padding-bottom:96px"]:has(+ .sg-logobar){padding-bottom:0 !important} /* Vor dem Abschluss: derselbe Abstand, ausser ein Farbband stoesst direkt an */ body.sg-neu .sg-main > .sg-abschluss{margin-top:var(--sg-abstand)} body.sg-neu.sg-neu .sg-main > :is(.sg-band, .sg-sandband, .sg-karten, .sg-st) + .sg-abschluss{margin-top:0 !important} /* ── Lange Texte als Kapitel ──────────────────────────────────────────── */ /* Nur Kapitel oberster Ebene; ein Kapitel in einem Bausteinblock (Forschung) bringt keinen eigenen Abstand mit */ body.sg-neu .sg-main > .sg-erklaer{position:relative;} body.sg-neu .sg-main > .sg-erklaer::after{content:"";position:absolute;top:0;left:var(--sg-rand, 40px);right:var(--sg-rand, 40px);height:1px;background:var(--sg-haar)} @media (min-width:1024px){ body.sg-neu .sg-main .sg-erklaer-kopf{top:40px} } body.sg-neu.sg-neu.sg-neu .sg-main > .sg-kopf-band + .sg-erklaer{padding-top:0} body.sg-neu.sg-neu .sg-main > .sg-kopf-band + .sg-erklaer::after{display:none} /* ── Bausteine als offene Liste statt Kachelwand ─────────────────────── */ body.sg-neu.sg-neu .sg-main .sg-lb-gitter{gap:0 clamp(40px, 5vw, 80px) !important;background:none !important} body.sg-neu.sg-neu .sg-main .sg-lb-gitter > .sg-lb{background:none !important;} body.sg-neu.sg-neu .sg-main .sg-lb-gitter > .sg-lb:hover{background:none !important} /* ── Silbentrennung nur, wo ein Wort sonst nicht passt ────────────────── */ body.sg-neu .sg-main :is(h1, h2, h3){hyphenate-limit-chars:12 5 5;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5} /* ── Kleinteile ───────────────────────────────────────────────────────── */ body.sg-neu.sg-vorlage .sg-img{background:var(--sg-sand)} body.sg-neu.sg-vorlage .sg-proof-titel{line-height:1.32} body.sg-neu ::selection{background:var(--magenta);color:var(--weiss)} @media (prefers-reduced-motion:reduce){ .sg-kopf-i .sg-i-stamm, .sg-kopf-i .sg-i-punkt{animation:none} body.sg-neu *::after{transition:none !important} .sg-punkt-wartet{--sg-punkt-y: 0em;--sg-punkt-o: 1} } /* ── Punkt statt Pfeil an Verweisen, gezeichnete Symbole fuer extern und oben ── */ /* Interne Verweise enden im i-Punkt, der beim Ueberfahren vorrueckt. Externe Ziele und "Nach oben" tragen ein gezeichnetes Symbol statt eines Zeichens. */ .sg-weiter-punkt{width:6px;height:6px;margin-left:.45em;flex:0 0 auto;vertical-align:baseline; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 51'%3E%3Crect width='51' height='51' rx='3' fill='%23B50063'/%3E%3C/svg%3E") center / 100% no-repeat; opacity:0;transform:translateX(calc(var(--sg-punkt-x, 0em) - 4px));transition:transform .45s var(--sg-auslauf), opacity .25s ease-out} /* Der Punkt im Verweis erscheint erst beim Ueberfahren, er rueckt dabei vor */ a:is(:hover, :focus-visible) .sg-weiter-punkt{opacity:1;transform:translateX(var(--sg-punkt-x, 0em))} .sg-extern,.sg-hoch{display:inline-block;width:.78em;height:.78em;margin-left:.32em;vertical-align:-.06em;background-color:currentColor; -webkit-mask:var(--sg-symbol) center / contain no-repeat;mask:var(--sg-symbol) center / contain no-repeat; transition:transform .35s var(--sg-auslauf)} .sg-extern{--sg-symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 8.8 8.6 3.4M4.4 3.2h4.4v4.4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .sg-hoch{--sg-symbol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 10.2V2.2M2.6 5.4 6 2l3.4 3.4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} a:is(:hover, :focus-visible) .sg-extern{transform:translate(1px, -1px)} a:is(:hover, :focus-visible) .sg-hoch{transform:translateY(-2px)} /* ── Navigation ───────────────────────────────────────────────────────── */ /* Der Pfeil der aufklappbaren Punkte wird zum i-Punkt; beim Ueberfahren und geoeffnet sinkt er ein Stueck, dort geht es nach unten weiter. Kein Unterstrich mehr: ueberfahren und aktiv zeigt die Farbe. */ body.sg-neu .sg-navtop .sg-navpfeil{display:none} body.sg-neu .sg-navtop:is(:hover, :focus-visible, [aria-expanded="true"])::after{transform:translateX(3px)} body.sg-neu :is(.sg-navtop, .sg-navlink):is(:hover, :focus-visible, .is-active, [aria-expanded="true"]){color:var(--sg-magenta)} /* Aufgeklappt: Etiketten ohne Versalien, das Band ohne Verlauf und Farblinie, die aktuelle Seite mit dem i-Punkt statt eines runden Punkts */ body.sg-neu .sg-mega [style*="text-transform:uppercase"]{text-transform:none;letter-spacing:0;font-size:14px;font-weight:700;color:var(--f-grau, var(--grau)) !important} body.sg-neu .sg-mega-band{background:var(--sg-sand) !important;border-top:1px solid var(--sg-haar) !important} body.sg-neu .sg-mega-band:hover{background:var(--f-sand-tief, var(--grund)) !important} body.sg-neu .sg-mega-card.ist-hier > div:first-child{color:var(--sg-magenta)} @media (prefers-reduced-motion:reduce){body.sg-neu .sg-navtop::after,.sg-weiter-punkt,.sg-extern,.sg-hoch{transition:none}} /* ── Leere Bildflaechen: ruhiger Sand statt Linienmuster ──────────────── */ body.sg-neu .sg-img:not(:has(img)){background:var(--sg-sand) !important} /* ── Etiketten in einer Farbe ─────────────────────────────────────────── */ body.sg-neu :is(.sg-ans-expertise-titel, .sg-ans-punkt-titel, .sg-arb-beleg-titel, .sg-fr-jahr, .sg-fr-kunde, .sg-kon-label, .sg-logobar-kicker, .sg-mk-kat, .sg-tr-rubrik, .pv-kicker, .sg-chips-marke, .sg-proof-marke, .sg-report-marke, .sg-tagung-marke, .pv-ac-fall-branche, .pv-ac-reife-marke, .pv-ex-tr-marke, .pv-sc-liste-marke, .pv-st-proof-marke, .pv-wi-marke, .pv-wi-medium, .pv-wi-weiterart, .pv-wi-zonenmarke), body.sg-neu:not(.home) .sg-main [style*="text-transform:uppercase"], body.sg-neu .sg-main :is(.sg-kon-label, [style*="font-size:13px; color:var(--f-grau, #444443)"], [style*="font-size:13.5px; color:var(--f-grau, #444443)"]){color:var(--f-grau, var(--grau)) !important} body.sg-neu :is(.sg-band, .sg-abschluss, .pv-violett) :is(.sg-chips-marke, .pv-kicker, .sg-proof-marke, [style*="text-transform:uppercase"]){color:var(--linie) !important} /* ── Blocktitel in Detailseiten (Kurz zum Kunden, Unsere Loesung, Projekt …) ── */ body.sg-neu .sg-block-titel{margin:0;font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--sg-tinte)} body.sg-neu .sg-block-titel + p{margin-top:12px !important} /* ── Farbe als Flaeche ────────────────────────────────────────────────── */ /* Die Seiten tragen die Marke nicht nur im Kopf. Kernsaetze stehen auf Violett, die Leistungsbausteine auf Sand, das Ende der Seite auf Sand vor dem dunklen Footer. Flaechen laufen von Rand zu Rand, der Text bleibt im Raster (Schatten-Trick: kein Eingriff in die Breite des Inhalts). */ body.sg-neu .sg-main > .pv-un-hervor{position:relative;background:var(--sg-violett) !important; } body.sg-neu .sg-main > .pv-un-hervor :is(.pv-un-hervor-satz, h2, h3){color:var(--weiss)} body.sg-neu .sg-main > .pv-un-hervor p{color:var(--linie) !important} body.sg-neu .sg-main > .pv-un-hervor .sg-cta{background:var(--f-weiss, var(--weiss));color:var(--sg-violett)} body.sg-neu .sg-main > .pv-un-hervor .sg-cta:is(:hover, :focus-visible){background:var(--sg-magenta);color:var(--weiss)} body.sg-neu .sg-main > .pv-un-hervor .pv-un-knopf-zweit{color:var(--weiss);border-color:var(--grau)} body.sg-neu .sg-main > .pv-un-hervor ::selection{background:var(--f-weiss, var(--weiss));color:var(--sg-violett)} /* Eingefuehrte Schlussaussage (Geschichte, inc/neu.php): sie steht hell auf der Flaeche des Abschnitts, der sie einleitet, direkt unter dessen Text; so stoesst keine dunkle Flaeche an den Fuss */ body.sg-neu.sg-neu .sg-main > .sg-flaeche.pv-un-fuehrt-ein:has(+ .pv-un-schluss){padding-bottom:0 !important} body.sg-neu.sg-neu.sg-neu .sg-main > .pv-un-schluss{padding-top:clamp(32px, 3vw, 48px) !important;padding-bottom:var(--sg-abstand) !important} /* Thesen im Fliesstext: in der Farbe der Kernsaetze */ /* Leistungsbausteine auf Sand */ body.sg-neu.sg-neu .sg-main > .sg-lb-block{background:var(--sg-sand); padding-top:var(--sg-abstand) !important;padding-bottom:var(--sg-abstand) !important} /* Das Ende der Seite auf Sand: "Mehr entdecken" leitet in den dunklen Footer */ body.sg-neu .sg-quick{background:var(--sg-sand);border-top:0} /* ── Fliesstext in Beitraegen und Referenzen als Kapitel ───────────────── */ body.sg-neu .sg-prosa > h2{margin:56px 0 14px;padding-top:36px;border-top:1px solid var(--sg-haar)} body.sg-neu .sg-prosa > h2:first-child{margin-top:0} body.sg-neu .sg-prosa > h3{margin-top:34px} /* ── Langer Kopftext: Titel oben, Absaetze in zwei Spalten darunter ────── */ @media (min-width:1024px){ body.sg-neu .sg-seitenkopf.ist-lang .sg-seitenkopf-inner{grid-template-columns:minmax(0,1fr);gap:34px} body.sg-neu .sg-seitenkopf.ist-lang .sg-kopf-titel{max-width:26ch} body.sg-neu .sg-seitenkopf.ist-lang .sg-kopf-absaetze{columns:2;column-gap:56px;padding-top:0} body.sg-neu .sg-seitenkopf.ist-lang .sg-kopf-absaetze p{max-width:none} } /* ── Eine Referenzkarte ueberall ──────────────────────────────────────── */ /* Die Karten der Referenzliste bekommen denselben Aufbau wie die Karten auf den Leistungsseiten: Sandflaeche, Titel, Einordnung darunter, Verweis. */ body.sg-neu .sg-fr-fall{display:flex;flex-direction:column;} /* Verweis mit Pfeil einheitlich (29.09.2026): 15 px / 700, Anthrazit, Magenta beim Überfahren */ body.sg-neu .sg-fr-link{font-size:15px;font-weight:700;color:var(--anthrazit)} body.sg-neu .sg-fr-kurz{margin-top:10px} /* ── Farbrhythmus: Kapitel auf Violett und Sand (inc/neu.php) ─────────── */ /* Zwei weisse Kapitel stehen nie hintereinander. Das zweite liegt auf einer Flaeche, abwechselnd Violett und Sand. Farbflaechen stossen ohne weissen Spalt aneinander und direkt ans Band; nach einer Flaeche beginnt das naechste weisse Kapitel mit dem Abstand, ohne Haarlinie. */ body.sg-neu.sg-neu.sg-neu .sg-main > .sg-kapitel-farbe{ padding-top:var(--sg-abstand) !important;padding-bottom:var(--sg-abstand) !important} body.sg-neu .sg-main > .sg-kapitel-farbe.sg-flaeche-violett{--sg-flaeche: var(--f-violett-flaeche, var(--sg-violett))} body.sg-neu .sg-main > .sg-kapitel-farbe::after{display:none} body.sg-neu .sg-flaeche-violett.sg-kapitel-farbe :is(h2, h3, strong, .sg-these){color:var(--weiss) !important} body.sg-neu .sg-flaeche-violett.sg-kapitel-farbe :is(p, li){color:var(--linie) !important} body.sg-neu .sg-flaeche-violett.sg-kapitel-farbe .pv-ac-sub{color:var(--gold) !important} body.sg-neu .sg-flaeche-violett.sg-kapitel-farbe a:not(.sg-cta){color:var(--weiss) !important;text-underline-offset:3px;} body.sg-neu .sg-flaeche-violett.sg-kapitel-farbe ::selection{background:var(--f-weiss, var(--weiss));color:var(--sg-violett)} /* Nahtlos: jeder Abschnitt liegt auf einer Flaeche (inc/neu.php), zwischen Flaechen und nach dem Kopf gibt es keinen Aussenabstand, die Luft steckt im Innenabstand. So entsteht kein Streifen des Grunds zwischen zwei Flaechen. */ body.sg-neu.sg-neu.sg-neu .sg-main > :is(.sg-flaeche, .sg-kopf-band, .sg-anfang, .sg-seitenkopf) + .sg-flaeche{margin-top:0} body.sg-neu.sg-neu.sg-neu .sg-main > .sg-flaeche:has(+ .sg-flaeche){margin-bottom:0} /* Sand an Sand: eine Haarlinie im Raster markiert die Naht */ body.sg-neu .sg-main > .sg-flaeche-sand + .sg-flaeche-sand{position:relative} body.sg-neu .sg-main > .sg-flaeche-sand + .sg-flaeche-sand::before{content:"";position:absolute;z-index:1;top:0;left:var(--sg-rand, 40px);right:var(--sg-rand, 40px);height:1px;background:var(--f-sand-tief, var(--grund))} /* Weiss nach Farbe */ body.sg-neu.sg-neu.sg-neu .sg-main > .sg-flaeche + .sg-erklaer:not(.sg-flaeche){margin-top:var(--sg-abstand) !important;padding-top:0 !important} /* Endet der Inhalt mit einer Farbflaeche, faellt der weisse Halter davor weg: die Flaeche geht direkt in "Mehr entdecken" ueber */ body.sg-neu.sg-neu.sg-neu .sg-main > .sg-flaeche + div[style="padding-bottom:96px"]:last-child{display:none !important} /* ── Knöpfe: eine Form, der Punkt zeigt, wo es weitergeht ──────────────── */ /* Primaer: Magenta, Ecken wie die Bloecke im Logo, am Ende der weisse i-Punkt, der beim Ueberfahren vorrueckt. Nach draussen: das gezeichnete Symbol statt des Punkts. Zweitknopf: kein Rahmen, Text mit Punkt. */ body.sg-neu{--sg-punkt-weiss:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 51'%3E%3Crect width='51' height='51' rx='3' fill='%23FFFFFF'/%3E%3C/svg%3E"); --sg-punkt-magenta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 51'%3E%3Crect width='51' height='51' rx='3' fill='%23B50063'/%3E%3C/svg%3E"); --sg-symbol-extern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 8.8 8.6 3.4M4.4 3.2h4.4v4.4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --sg-symbol-weiter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.4 2.4 8 6l-3.6 3.6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} body.sg-neu.sg-neu.sg-neu .sg-cta{display:inline-flex !important;align-items:center;justify-content:center;gap:0;box-sizing:border-box; min-height:50px;border:0 !important; background:var(--sg-magenta) !important;color:var(--weiss) !important;font-family:inherit;font-size:15px !important; line-height:1.2;text-transform:none !important;text-decoration:none;text-align:left; transition:background-color .25s ease, color .25s ease} body.sg-neu.sg-neu.sg-neu .sg-cta{position:relative;padding:0 26px !important} body.sg-neu .sg-cta::after{position:absolute;right:10px;top:calc(50% - 3px);width:6px;height:6px;background:var(--sg-punkt-weiss) center / 100% no-repeat; opacity:0;transform:translateX(-5px);transition:transform .45s var(--sg-auslauf), opacity .25s ease-out} body.sg-neu .sg-cta:is(:hover, :focus-visible)::after{opacity:1;transform:translateX(0)} body.sg-neu.sg-neu.sg-neu .sg-cta:is(:hover, :focus-visible){background:var(--f-violett-flaeche, var(--violett)) !important;color:var(--weiss) !important;--sg-punkt-x: 3px} body.sg-neu.sg-neu.sg-neu .sg-cta[target="_blank"]{padding:0 22px 0 24px !important} body.sg-neu .sg-cta[target="_blank"]::after{position:static;opacity:1;flex:0 0 .8em;width:.8em;height:.8em;margin-left:10px; background:currentColor;-webkit-mask:var(--sg-symbol-extern) center / contain no-repeat;mask:var(--sg-symbol-extern) center / contain no-repeat;transform:none} body.sg-neu .sg-cta[target="_blank"]:is(:hover, :focus-visible)::after{transform:translate(1px, -1px)} body.sg-neu .sg-cta[disabled]{opacity:.6;cursor:progress} /* Auf Violett traegt der Knopf Weiss, der Punkt bleibt Magenta */ body.sg-neu.sg-neu.sg-neu :is(.pv-un-hervor, .sg-flaeche-violett, .pv-sc-vertrauen) .sg-cta{background:var(--f-weiss, var(--weiss)) !important;color:var(--sg-violett) !important} body.sg-neu :is(.pv-un-hervor, .sg-flaeche-violett, .pv-sc-vertrauen) .sg-cta::after{background-image:var(--sg-punkt-magenta)} body.sg-neu.sg-neu.sg-neu :is(.pv-un-hervor, .sg-flaeche-violett, .pv-sc-vertrauen) .sg-cta:is(:hover, :focus-visible){background:var(--sg-magenta) !important;color:var(--weiss) !important} body.sg-neu :is(.pv-un-hervor, .sg-flaeche-violett, .pv-sc-vertrauen) .sg-cta:is(:hover, :focus-visible)::after{background-image:var(--sg-punkt-weiss)} /* Zweitknopf */ body.sg-neu.sg-neu.sg-neu :is(.sg-st-zweit, .pv-un-knopf-zweit){display:inline-flex !important;align-items:center;min-height:50px;padding:0 4px !important; border:0 !important;background:none !important;color:var(--anthrazit) !important; font-size:15px !important;font-weight:700 !important;line-height:1.2;text-decoration:none !important} body.sg-neu :is(.sg-st-zweit, .pv-un-knopf-zweit)::after{flex:0 0 6px;width:6px;height:6px;margin-left:10px; background:var(--sg-punkt-magenta) center / 100% no-repeat;opacity:0;transform:translateX(-4px);transition:transform .45s var(--sg-auslauf), opacity .25s ease-out} body.sg-neu :is(.sg-st-zweit, .pv-un-knopf-zweit):is(:hover, :focus-visible)::after{opacity:1;transform:translateX(3px)} /* Beim Ueberfahren Magenta; seit 29.09.2026 mit Pfeil statt Unterstreichung */ body.sg-neu.sg-neu.sg-neu :is(.sg-st-zweit, .pv-un-knopf-zweit):is(:hover, :focus-visible){color:var(--sg-magenta) !important;background:none !important; text-decoration:none !important} body.sg-neu.sg-neu.sg-neu :is(.sg-abschluss, .sg-band, .pv-un-hervor, .sg-flaeche-violett) :is(.sg-st-zweit, .pv-un-knopf-zweit){color:var(--weiss) !important} body.sg-neu.sg-neu.sg-neu :is(.sg-abschluss, .sg-band, .pv-un-hervor, .sg-flaeche-violett) :is(.sg-st-zweit, .pv-un-knopf-zweit):is(:hover, :focus-visible){color:var(--weiss) !important} @media (prefers-reduced-motion:reduce){body.sg-neu :is(.sg-cta, .sg-st-zweit, .pv-un-knopf-zweit)::after{transition:none}} /* ── Weiter-Verweise der Startseite in derselben Sprache ──────────────── */ /* Produkte, Karriere und Whitepaper: Verweis mit Pfeil am letzten Wort (Teil Startseite), kein Flex, sonst fällt das Leerzeichen weg */ body.sg-neu .sg-prod-cta{display:inline-block} body.sg-neu .sg-prod-buehne:is(:hover, :focus-visible){--sg-punkt-x: .2em} /* Titel im Kopf der Startseite: der Punkt statt des Pfeils */ .sg-hero-punkt{display:inline-block;width:max(.2em, 8px);height:max(.2em, 8px);margin-left:.14em;vertical-align:baseline; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 51'%3E%3Crect width='51' height='51' rx='3' fill='%23B50063'/%3E%3C/svg%3E") center / 100% no-repeat; transform:translateX(var(--sg-punkt-x, 0));transition:transform .5s var(--sg-auslauf)} .sg-hero-titel a:is(:hover, :focus-visible){--sg-punkt-x: .12em} /* Pfeiltasten der Karussells: gezeichnete Winkel statt Zeichen */ body.sg-neu :is(.sg-hero-knopf[data-hero-prev], .sg-hero-knopf[data-hero-next], [data-med-arrow]){font-size:0 !important;color:inherit} body.sg-neu :is(.sg-hero-knopf[data-hero-prev], .sg-hero-knopf[data-hero-next], [data-med-arrow])::before{content:"";width:14px;height:14px;display:block;margin:auto; background:currentColor;-webkit-mask:var(--sg-symbol-weiter) center / contain no-repeat;mask:var(--sg-symbol-weiter) center / contain no-repeat} body.sg-neu :is(.sg-hero-knopf[data-hero-prev], [data-med-arrow="prev"])::before{transform:scaleX(-1)} body.sg-neu [data-med-arrow]{display:inline-flex !important;align-items:center;justify-content:center;width:40px !important;height:40px !important; border:1px solid var(--sg-haar) !important;border-radius:3px;background:var(--f-weiss, var(--weiss)) !important;color:var(--sg-tinte) !important;transition:background-color .25s ease, color .25s ease} body.sg-neu [data-med-arrow]:is(:hover, :focus-visible){background:var(--sg-magenta) !important;border-color:var(--sg-magenta) !important;color:var(--weiss) !important} body.sg-neu .sg-hero-knopf{border-radius:3px} /* ── Quicklinks: eine Liste mit Punkt statt weisser Kaestchen ────────── */ body.sg-neu .sg-quick-liste{display:grid !important;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 32px !important;margin-top:18px !important} body.sg-neu .sg-quick .sg-quick-chip{display:flex;align-items:center;padding:15px 0 !important;border:0 !important;border-top:1px solid var(--f-linie, var(--linie)) !important;border-radius:0; background:none !important;color:var(--sg-tinte) !important;font-size:16px !important;font-weight:700 !important;line-height:1.35} body.sg-neu .sg-quick .sg-quick-chip:is(:hover, :focus-visible){background:none !important;color:var(--sg-magenta) !important} body.sg-neu .sg-quick .sg-quick-chip .sg-weiter-punkt{margin-left:.5em} @media (max-width:420px){body.sg-neu .sg-quick-liste{grid-template-columns:minmax(0, 1fr)}} /* ── Beitraege ohne Bild: ein kleiner Report-Umschlag statt leerer Flaeche ── */ /* Helle Flaeche (Gold 10 %) und das i aus dem Logo Ton in Ton (Gold 40 %), angeschnitten wie im Seitenkopf. Ohne Magenta: auf einer Seite mit vielen Beitraegen waeren es sonst Dutzende i-Punkte, und Violett-Bloecke wuerden die Titel ueberstimmen. */ body.sg-neu .sg-mk-bild .sg-img:not(:has(img)){background:var(--sg-sand) !important;overflow:hidden} body.sg-neu .sg-mk-bild .sg-img:not(:has(img))::after{content:"";position:absolute;right:-9%;bottom:-17%;height:92%;aspect-ratio:51 / 116; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 116'%3E%3Crect width='51' height='51' rx='3' fill='%23DDDDDD'/%3E%3Crect y='65' width='51' height='51' rx='3' fill='%23DDDDDD'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transition:transform .6s var(--sg-auslauf)} body.sg-neu .sg-mk:is(:hover, :focus-visible) .sg-mk-bild .sg-img:not(:has(img))::after{transform:translateY(-4%)} /* ── Beitraege nur mit Vorspann: die Angaben als eine Leiste ──────────── */ body.sg-neu .sg-beitrag.ist-nur-kopf{grid-template-columns:minmax(0, 1fr) !important} body.sg-neu .sg-beitrag.ist-nur-kopf .sg-beitrag-angaben{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px} body.sg-neu .sg-beitrag.ist-nur-kopf .sg-beitrag-angaben > div:last-child{margin:0 !important;padding:0 !important;border:0 !important} /* Insights und Proofs: Umfang, Hinweis und Rückweg als letzte Zeile des Satzspiegels (single-sg_report.php) */ body.sg-neu .sg-beitrag.ist-lesen .sg-beitrag-angaben.ist-zeile{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2vw, 32px);margin-top:clamp(28px, 3vw, 44px);padding-top:clamp(28px, 3vw, 44px);border-top:1px solid var(--linie)} body.sg-neu .sg-beitrag.ist-lesen .sg-beitrag-angaben-text{grid-column:5 / -1;grid-row:1;max-width:720px} body.sg-neu .sg-beitrag.ist-lesen .sg-beitrag-angaben-text > * + *{margin-top:clamp(14px, 1.4vw, 20px)} body.sg-neu .sg-beitrag.ist-lesen .sg-beitrag-angaben-text > dl{margin:0} body.sg-neu.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-beitrag.ist-lesen .sg-prosa p.sg-beitrag-fragen{margin:0 !important;font-size:16px !important;line-height:1.55 !important;color:var(--grau) !important} body.sg-neu.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-beitrag.ist-lesen .sg-prosa :is(dl, p, .sg-wp-gate) + p.sg-beitrag-fragen{margin-top:clamp(20px, 2vw, 28px) !important} body.sg-neu .sg-beitrag.ist-lesen .sg-beitrag-zurueck{grid-column:1 / span 4;grid-row:1;align-self:start;margin:-13px 0 0} /* Einordnung und Faktentabelle in einer Flucht: die Werte beginnen bei 38 % der Textspalte wie die zweite Tabellenspalte */ body.sg-neu .sg-beitrag.ist-lesen dl.sg-pr-einordnung{grid-template-columns:calc(38% - 28px) minmax(0, 1fr);column-gap:28px} @media (max-width:1023px){ body.sg-neu .sg-beitrag.ist-lesen .sg-beitrag-angaben-text{grid-column:1 / -1} body.sg-neu .sg-beitrag.ist-lesen .sg-beitrag-zurueck{grid-column:1 / -1;grid-row:2;margin:clamp(20px, 3vw, 28px) 0 0} } /* Whitepaper-Download gegen E-Mail-Adresse (sg_wp_gate_formular): im Kasten, Felder und Zustimmung wie im Anfrage-Fenster; der Verweis klappt es auf */ body.sg-neu :is(.sg-wp-gate, .sg-wp-gate-form, .sg-wp-gate-danke, [data-wp-gate-auf])[hidden]{display:none !important} body.sg-neu .sg-wp-gate{flex-basis:100%;min-width:0} body.sg-neu .sg-wp-gate-intro{margin:0;font-size:15.5px;line-height:1.6;color:var(--anthrazit)} body.sg-neu .sg-wp-gate-feld{margin-top:18px} body.sg-neu .sg-wp-gate input:is([type="text"], [type="email"]){display:block;width:100%;height:42px;margin-top:6px;padding:0 2px;border:0;border-bottom:1px solid var(--linie);border-radius:0;background:transparent;font:inherit;font-size:16px;color:var(--sg-tinte)} body.sg-neu .sg-wp-gate .sg-anfrage-rechnung{margin-top:20px;font-size:15.5px} body.sg-neu .sg-wp-gate .sg-anfrage-rechnung input{width:90px;height:36px;margin-top:0} body.sg-neu .sg-wp-gate input:focus-visible{outline:2px solid var(--sg-magenta);outline-offset:2px;border-color:var(--sg-magenta)} body.sg-neu .sg-wp-gate .sg-anfrage-ok{margin-top:20px;font-size:13.5px} body.sg-neu .sg-wp-gate [data-wp-gate-senden]{margin-top:22px} body.sg-neu .sg-wp-gate-danke p{margin:0 0 14px;font-size:15.5px;line-height:1.6;color:var(--anthrazit)} /* Proofs (29.09.2026): Kennzahlen zwei mal zwei mit Warmgold-Linie wie „So sieht Impact aus“, darunter die gesetzte Grafik auf weißer Tafel, die Fakten als Tabelle mit Haarlinien und die Einordnung als Liste. Die Klassen kommen aus den Beiträgen (sg-pr-*). */ .sg-main .sg-prosa .sg-pr-werte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px;margin:0 0 8px} .sg-main .sg-prosa .sg-pr-wert{min-width:0;padding-top:20px;border-top:3px solid var(--gold)} .sg-main .sg-prosa .sg-pr-wert-zahl{font-size:clamp(24px, 2.2vw, 32px);font-weight:900;line-height:1.08;letter-spacing:-.03em;color:var(--anthrazit);font-variant-numeric:tabular-nums} .sg-main .sg-prosa .sg-pr-wert-text{margin-top:10px;font-size:16px;line-height:1.55;color:var(--grau)} /* Grafiken der Beiträge wie in der Vorlage (29.09.2026): über die volle Inhaltsbreite der Beitragsfläche (Textspalte und Kasten), weiße Fläche mit dem Innenabstand der Vorlage, die Unterschrift der Insights klein darunter. Farben nach CI (inc/ci-farben.php). */ .sg-main .sg-beitrag{container-type:inline-size} .sg-main .sg-beitrag .sg-prosa :is(.sg-pr-grafik, .sg-abbildung:has(> svg)){width:100cqi;max-width:none;box-sizing:border-box;margin:clamp(48px, 5vw, 80px) 0; padding:clamp(22px, 0.55rem + 3.37vw, 52px) clamp(18px, 0.08rem + 4.27vw, 56px) clamp(20px, 0.54rem + 2.92vw, 46px);background:var(--weiss)} .sg-main .sg-beitrag .sg-prosa .sg-abbildung:has(> svg) figcaption{margin-top:clamp(16px, 0.85rem + 0.67vw, 22px);font-size:14px;line-height:1.6;max-width:62ch;color:var(--grau)} .sg-main .sg-prosa .sg-pr-grafik .sg-kennzeile{margin-bottom:22px} .sg-pr-grafik-rahmen{overflow-x:auto} .sg-pr-svg{display:block;width:100%;min-width:520px;height:auto;overflow:visible;font-family:inherit} .sg-pr-svg-label{font-size:15px;fill:var(--grau)} .sg-pr-svg-label.is-leit{font-weight:700;fill:var(--anthrazit)} .sg-pr-svg-wert{font-size:15px;fill:var(--grau);font-variant-numeric:tabular-nums} .sg-pr-svg-wert.is-leit{font-weight:700;fill:var(--magenta)} .sg-pr-svg-zahl{font-size:19px;font-weight:700;fill:var(--weiss);font-variant-numeric:tabular-nums} .sg-pr-svg-knoten{font-size:14px;font-weight:700;fill:var(--weiss)} .sg-pr-svg-knoten-marke{font-size:10.5px;font-weight:700;letter-spacing:.16em;fill:var(--weiss);opacity:.85} .sg-main .sg-prosa table.sg-pr-fakten{width:100%;margin:8px 0 0;border-collapse:collapse;font-variant-numeric:tabular-nums} .sg-main .sg-prosa .sg-pr-fakten :is(th, td){padding:14px 0;border-top:1px solid var(--linie);vertical-align:top;text-align:left;font-size:16px;line-height:1.55} .sg-main .sg-prosa .sg-pr-fakten tr:last-child :is(th, td){border-bottom:1px solid var(--linie)} .sg-main .sg-prosa .sg-pr-fakten th{width:38%;padding-right:28px;font-weight:700;color:var(--anthrazit)} .sg-main .sg-prosa .sg-pr-fakten td{color:var(--grau)} .sg-main .sg-prosa dl.sg-pr-einordnung{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 28px;margin:8px 0 0} .sg-main .sg-prosa .sg-pr-einordnung dt{font-size:16px;font-weight:700;color:var(--anthrazit)} .sg-main .sg-prosa .sg-pr-einordnung dd{margin:0;font-size:16px;line-height:1.55;color:var(--grau)} .sg-main .sg-prosa .sg-pr-fakten thead th{padding:0 28px 10px 0;border-top:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grau)} .sg-main .sg-prosa .sg-pr-fakten thead th + th{width:auto} /* Vorlage 29.09.2026: Kennzeichnung im Fließtext und die Vertiefung am Ende (sg_v3_vertiefung) */ .sg-main .sg-prosa code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:.88em;background:var(--f-sand, var(--grund));padding:.1em .35em} .sg-main .sg-prosa .sg-vertiefung{margin:clamp(48px, 5vw, 72px) 0 0} .sg-main .sg-prosa .sg-vertiefung > .sg-kennzeile{margin:0 0 20px} .sg-main .sg-prosa .sg-vertiefung > .sg-mk{max-width:380px;text-decoration:none} @media (max-width:600px){ .sg-main .sg-prosa .sg-pr-werte{grid-template-columns:minmax(0,1fr);gap:28px} .sg-main .sg-prosa .sg-pr-fakten th{width:auto} .sg-main .sg-prosa .sg-pr-fakten tr{display:grid} .sg-main .sg-prosa .sg-pr-fakten td{padding-top:0;border-top:0} .sg-main .sg-prosa dl.sg-pr-einordnung{grid-template-columns:minmax(0,1fr);gap:4px} .sg-main .sg-prosa .sg-pr-einordnung dd{margin-bottom:12px} .sg-main .sg-prosa .sg-pr-fakten thead{display:none} .sg-main .sg-prosa .sg-pr-fakten tr:last-child th{border-bottom:0} } /* ── Stellen als Karten auf Sand ──────────────────────────────────────── */ body.sg-neu.sg-neu .sg-main .sg-lb-block a.sg-stellenkarte{background:var(--f-weiss, var(--weiss)) !important;padding:28px 28px 30px !important;border:0 !important;height:100%;box-sizing:border-box} body.sg-neu.sg-neu .sg-main .sg-lb-block a.sg-stellenkarte:is(:hover, :focus-visible){background:var(--f-weiss, var(--weiss)) !important;box-shadow:0 0 0 1px var(--linie)} /* ── Ueberschriften ausgewogen umbrechen ──────────────────────────────── */ /* Kein einzelnes Wort in der letzten Zeile ("Verantwortung von Anfang / an") */ body.sg-neu .sg-main :is(h2, .sg-kopf-titel){text-wrap:balance} /* ── Datenschutz: Abschnittsuebersicht neben dem Text ─────────────────── */ body.sg-neu .sg-ds-titel{margin:0 0 14px;color:var(--sg-tinte);scroll-margin-top:24px} body.sg-neu .sg-ds-inhalt{display:none} @media (min-width:1024px){ body.sg-neu .sg-ds{display:grid;grid-template-columns:minmax(0, 300px) minmax(0, 1fr);gap:clamp(48px, 5vw, 80px);align-items:start} body.sg-neu .sg-ds-inhalt{display:block;position:sticky;top:32px;max-height:calc(100vh - 64px);overflow:auto;background:var(--sg-sand);padding:26px 26px 28px} body.sg-neu .sg-ds-inhalt ol{list-style:none;margin:0;padding:0;counter-reset:ds} body.sg-neu .sg-ds-inhalt li + li{margin-top:9px} body.sg-neu .sg-ds-inhalt a{display:block;font-size:14.5px;line-height:1.4;color:var(--anthrazit);text-decoration:none} body.sg-neu .sg-ds-inhalt a:is(:hover, :focus-visible){color:var(--sg-magenta)} } /* ── Referenz mit langem Kopftext: Absaetze bleiben ganz ──────────────── */ @media (min-width:1024px){ body.sg-neu .sg-seitenkopf.ist-lang .sg-kopf-absaetze p{break-inside:avoid} body.sg-neu .sg-seitenkopf.ist-lang .sg-seitenkopf-inner{gap:26px} } /* ── Der Kernsatz auf Violett traegt den Punkt wie jede Ueberschrift ──── */ /* ── Flaechen von Rand zu Rand, in einem Stueck gezeichnet ────────────── */ /* Ein Schatten als Verlaengerung hinterliess bei krummen Hoehen eine 1-Pixel-Stufe an der Kante. Das Randbild zeichnet Flaeche und Verlaengerung in einem Zug und erzeugt keinen Seitenlauf. */ body.sg-neu .sg-main > :is(.sg-kapitel-farbe, .sg-lb-block, .pv-un-hervor, .sg-flaeche-grund, .sg-flaeche-sand){box-shadow:none;clip-path:none; background-color:transparent !important;border-image:linear-gradient(var(--sg-flaeche), var(--sg-flaeche)) fill 0 / 0 / 0 100vmax} body.sg-neu .sg-main > :is(.sg-lb-block, .sg-flaeche-sand){--sg-flaeche: var(--sg-sand)} body.sg-neu .sg-main > .pv-un-hervor{--sg-flaeche: var(--f-violett-flaeche, var(--sg-violett))} /* Schliessen fuehrt nicht weiter: kein Punkt; Eingabeknoepfe ohne Punkt gleichmaessig */ body.sg-neu.sg-neu.sg-neu input.sg-cta{padding:0 24px !important} /* Lange Einzelwoerter im Titel ("Datenschutzerklaerung") passen auf dem Handy nicht in eine Zeile: trennen statt anschneiden, auf allen Seiten gleich */ body.sg-neu .sg-seitenkopf .sg-kopf-titel{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;min-width:0;max-width:min(20ch, 100%)} body.sg-neu .sg-seitenkopf-inner > *{min-width:0} /* Knoepfe aus dem Beitragseditor in derselben Form */ body.sg-neu .wp-block-button__link{display:inline-flex;align-items:center;min-height:50px;padding:0 24px;border-radius:3px;background:var(--sg-magenta);color:var(--weiss);font-size:15px;font-weight:700;text-decoration:none} body.sg-neu .wp-block-button__link:is(:hover, :focus-visible){background:var(--sg-violett);color:var(--weiss)} /* Auf den dunklen Baendern (Violett) wird der Knopf beim Ueberfahren weiss, sonst verschwaende er in der Flaeche */ body.sg-neu.sg-neu.sg-neu :is(.sg-abschluss, .sg-band) .sg-cta:is(:hover, :focus-visible){background:var(--weiss) !important;color:var(--sg-magenta) !important} body.sg-neu :is(.sg-abschluss, .sg-band) .sg-cta:is(:hover, :focus-visible)::after{background-image:var(--sg-punkt-magenta)} /* Arbeitsblock ohne Motiv: der Text nimmt die Breite, bleibt aber lesbar schmal */ body.sg-neu .sg-arb.ohne-motiv{grid-template-columns:minmax(0, 1fr) !important} body.sg-neu .sg-arb.ohne-motiv .sg-arb-text{max-width:760px} /* Kartenflaechen auf Violett: statt halbtransparentem Weiss ein Rahmen in Violett 80 % */ body.sg-neu :is(.sg-st-quad > div, .pv-st-se-feld, .pv-st-pfad-schritt, .pv-sc-shot-gross .sg-img){box-shadow:inset 0 0 0 1px var(--grau)} /* Proof und andere Rubrikseiten: der Arbeitsblock direkt unter dem Band mit dem einen Abstand, nicht doppelt */ body.sg-neu.sg-neu .sg-main > .sg-kopf-band + .sg-arb{padding-top:0 !important} /* Letztes Versal-Etikett (Stellenfilter auf Karriere) in Satzschreibung */ body.sg-neu .sg-kar-feld-titel{text-transform:none;letter-spacing:0;font-weight:700;} /* ── Kacheln Leistungen und Expertise: der Punkt als Animation ────────── */ /* Beim Ueberfahren der Kachel setzt sich der i-Punkt hinter den Titel und rueckt vor, wie in Verweisen. In Ruhe steht er nicht da. */ body.sg-neu .sg-exp-feld:is(:hover, :focus-visible) .sg-exp-titel::after{opacity:1;--sg-punkt-x: .2em} @media (prefers-reduced-motion:reduce){body.sg-neu .sg-exp-titel::after{transition:none}} /* ── Expertise-Untertitel: echtes Magenta statt Rosa ─────────────────── */ /* Magenta als Schrift auf Anthrazit waere kaum lesbar (1,5 : 1). Deshalb traegt Magenta die Flaeche, die Schrift ist weiss, wie das Band der Reports. */ body.sg-neu .sg-exp-lead{margin-top:14px;line-height:1.75;color:var(--weiss) !important} body.sg-neu .sg-exp-lead > span{background:var(--sg-magenta);color:var(--weiss);padding:3px 8px;border-radius:3px; -webkit-box-decoration-break:clone;box-decoration-break:clone} /* Im Hauptinhalt keine Punkte an Verweisen, auch nicht beim Ueberfahren (26.09.2026); der Footer behaelt seine */ /* ════ Teil Startseite (Kopf) (bis 2.0.3: start-3d/buehne.css) ════ */ /* Startseite · Hero mit dem Ai-Zeichen, das sich beim Laden zusammensetzt Farben nur aus der CI (Styleguide): Magenta #B50063, Anthrazit #2C2C2B, Gold #BC9E78, Violett #571763, ihre Stufen, Weiss. Schrift nur Roboto. Keine halbtransparenten Flaechen. */ /* Der Seitenkopf bleibt oben stehen und ist deckend wie auf allen Seiten. Frueher Glas (Weichzeichner); dadurch wurde Magenta darunter zu einem rosa Fleck hinter dem Logo, darum seit 25.09.2026 ohne. Der Grundton der Farbversion kommt aus assets/farben.css. */ body:where(.home) header[role="banner"]{position:sticky !important;top:0;z-index:90} body:where(.home) header[role="banner"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--f-weiss,var(--weiss))} body:where(.home) header[role="banner"] .sg-metazeile{background:var(--f-sand,var(--grund))} .admin-bar:where(.home) header[role="banner"]{top:32px} @media (max-width:782px){.admin-bar:where(.home) header[role="banner"]{top:46px}} @media (max-width:600px){.admin-bar:where(.home) header[role="banner"]{top:0}} /* Sprungziele: scroll-margin-top am Ziel (style.css). Ein scroll-padding am html liess die Seite beim Tabben durch den klebenden Kopf schrittweise nach oben springen. */ /* Der Hero steht wie jeder Seitenanfang auf dem Kopfton der Farbversion, im Raster aus zwoelf Spalten: links der Claim (Spalte 1 bis 7), rechts das fertige Logo in 3D (Spalte 8 bis 12), kleiner als der Claim. */ .sg3d{position:relative;background:var(--f-kopf,var(--v3-sand,var(--grund))); width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 !important} .sg3d-inner{max-width:1280px;margin:0 auto;box-sizing:border-box;padding:clamp(40px,5vw,80px) var(--v3-rand,40px) clamp(48px,6vw,88px); display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:center; /* Die Kundenleiste schneidet im ersten Bild an: der Beleg beginnt sofort */ min-height:clamp(520px, calc(100svh - var(--sg3d-frei,144px) - 190px), 720px)} .sg3d-text{grid-column:1 / span 7;min-width:0;position:relative;z-index:1} html body .sg-main .sg3d .sg3d-titel{margin:0;max-width:17ch;font-size:clamp(36px,1rem + 3.3vw,66px) !important;font-weight:900; line-height:1.14 !important;letter-spacing:-.028em;color:var(--anthrazit);text-wrap:pretty;hyphens:manual !important;-webkit-hyphens:manual !important} .sg3d-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(32px,3.6vw,52px)} .sg3d-knoepfe .sg-cta{min-height:52px} .sg3d-bild{grid-column:8 / -1;position:relative;aspect-ratio:4 / 3;min-width:0} .sg3d-leinwand{position:absolute;inset:-8%;width:116%;height:116%;display:block} .sg3d-ersatz{display:none;position:absolute;left:50%;top:50%;width:84%;height:auto;transform:translate(-50%,-50%)} html:not(.sg3d-js) .sg3d-ersatz, .sg3d.ist-still .sg3d-ersatz{display:block} html:not(.sg3d-js) .sg3d-leinwand, .sg3d.ist-still .sg3d-leinwand{display:none} /* Der tragende Teil beginnt mit etwas Luft: Unterlaengen der ersten Zeilen (das j in KI-Projekt) beruehren die Oberlaengen darunter nicht */ html body .sg-main .sg3d .sg3d-titel .sg-schnitt-schwer{display:block;margin-top:.1em} html body .sg-main .sg3d .sg3d-titel .sg-schnitt-schwer::before{content:none !important} /* Erscheinen der Aussage: 480 ms, 16 px nach oben, Nachfolger 60 ms versetzt */ .sg3d.ist-bereit .sg3d-text > *{animation:sg3d-auf .48s cubic-bezier(.2,0,0,1) both} .sg3d.ist-bereit .sg3d-text > :nth-child(2){animation-delay:.06s} .sg3d.ist-bereit .sg3d-text > :nth-child(3){animation-delay:.12s} @keyframes sg3d-auf{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* Niedrige Laptop-Bildschirme: der Hero bleibt mit den Knoepfen im ersten Bild */ @media (min-width:901px) and (max-height:800px){ .sg3d-inner{padding-top:28px;padding-bottom:40px} html body .sg-main .sg3d .sg3d-titel{font-size:min(clamp(36px,1rem + 3.3vw,66px), 8vh) !important} .sg3d-knoepfe{margin-top:24px} } /* Schmal (einspaltig): nur der Claim mit dem Knopf. Das Logo steht dort schon im Seitenkopf; ein zweites direkt darunter wirkte wie ein Versehen (Rueckmeldung 25.09.2026). buehne.js laedt die 3D-Szene hier gar nicht. */ @media (max-width:900px){ .sg3d-inner{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:clamp(28px,6vw,48px);padding-bottom:clamp(28px,6vw,48px)} .sg3d-text{grid-column:1;grid-row:1;margin-top:0} .sg3d-bild{display:none} } @media (max-width:520px){ html body .sg-main .sg3d .sg3d-titel{font-size:clamp(32px,9vw,42px) !important} .sg3d-knoepfe{gap:10px 20px} } @media (prefers-reduced-motion:reduce){ .sg3d.ist-bereit .sg3d-text > *{animation:none} } /* Das Theme setzt auf schmalen Bildschirmen overflow-x:hidden am body. Das macht den body zum Scrollbereich, der Kopf bliebe dann nicht oben stehen. clip schneidet genauso ab, ohne das zu tun. Gilt nur auf der Startseite. */ html body:where(.home){overflow-x:clip !important} /* Die Kundenleiste folgt dem Hero enger als andere Kapitel, damit ihre Logos im ersten Bild anschneiden (1440 x 900: Oberkante der Logos bei rund 820 px) */ html body.sg-neu.sg-neu.sg-neu .sg-main > .sg3d + .sg-logobar{padding-top:clamp(32px,3.2vw,44px) !important} /* Der Claim bekommt Luft zwischen den Zeilen, damit Ober- und Unterlaengen nicht aneinanderstossen (Rueckmeldung 25.09.2026: Buchstaben abgeschnitten). Das gilt fuer jede Breite, der Text ist im Dashboard frei pflegbar. */ html body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg3d .sg3d-titel, html body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg3d .sg3d-titel :is(.sg-schnitt-leicht, .sg-schnitt-schwer){line-height:1.1 !important} /* Telefon und Tablet: die volle Breite statt 17 Zeichen */ @media (max-width:900px){ html body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg3d .sg3d-titel{max-width:none !important;font-size:clamp(34px, 8.6vw, 54px) !important;letter-spacing:-.02em !important} html body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg3d .sg3d-titel .sg-schnitt-schwer{margin-top:.12em !important;letter-spacing:-.03em !important} } html body.sg-neu .sg-main > .sg-anfang-start + .sg-logobar{padding-top:clamp(48px,5vw,72px) !important;padding-bottom:clamp(48px,5vw,72px) !important} html body.sg-neu .sg-main > .sg-anfang-start + .sg-logobar + *{margin-top:0} /* ── Launch-Startseite (29.09.2026) ──────────────────────────────────────── Arbeitsliste vom 28.09.2026, Vorlagen 04_STARTSEITE/01 bis 10. Nur Startseite, bis auf den Verweis mit Pfeil (gilt überall). */ /* Kopf: Anthrazit ohne Bild. Klammer, eine Überschrift in zwei Zeilen (300 und 900), Erklärung, Magentafläche und Verweis mit Pfeil (Vorlage 01_HERO) */ html body .sg-main > .sg-anfang-start{--f-kopf:var(--anthrazit);--sg-flaeche:var(--anthrazit)} html body:where(.home) .sg-main > .sg-start-kopf{position:relative;box-sizing:border-box;width:100vw;max-width:100vw;margin:0 0 0 calc(50% - 50vw);background:var(--anthrazit);color:var(--weiss)} .sg-start-kopf-inner{box-sizing:border-box;max-width:1280px;margin:0 auto;padding:96px var(--v3-rand, 32px) 88px} .sg-main .sg-start-klammer{margin:0 0 34px;font-size:22px !important;font-weight:900;line-height:1 !important;letter-spacing:.14em;text-transform:uppercase;color:var(--weiss)} .sg-main h1.sg-start-titel{margin:0;max-width:820px;font-size:clamp(32px, 5.6vw, 80px) !important;line-height:.92 !important;letter-spacing:-.045em !important;color:var(--weiss) !important} /* Die zweite Zeile beginnt über den Umbruch der Schnitte (Teil v3), nicht als Block */ .sg-main h1.sg-start-titel > span{letter-spacing:inherit !important} .sg-main h1.sg-start-titel [lang="en"]{white-space:nowrap} .sg-main .sg-start-erklaerung{max-width:620px;margin:40px 0 0;font-size:18px !important;font-weight:400;line-height:1.5 !important;color:rgb(var(--weiss-rgb) / .88)} .sg-start-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:44px} @media (max-width:820px){.sg-start-kopf-inner{padding-top:56px;padding-bottom:56px}} /* Mit Hero-Motiv (Wunsch 29.09.2026): Text links, das Bild rechts in voller Höhe bis an den Rand; die Überschrift wird dafür kleiner, die zwei Zeilen bleiben. Unter 1001 px steht das Bild unter den Knöpfen. */ .sg-start-kopf-bild{position:relative;overflow:hidden;background:var(--grau)} .sg-start-kopf-bild img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} @media (min-width:1001px){ html body:where(.home) .sg-main > .sg-start-kopf.hat-bild{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);min-height:clamp(560px, 46vw, 720px)} .sg-start-kopf.hat-bild .sg-start-kopf-inner{align-self:center;max-width:none;margin:0;padding-left:max(var(--v3-rand, 32px), calc((100vw - 1280px) / 2 + var(--v3-rand, 32px)));padding-right:clamp(32px, 4vw, 64px)} .sg-main .sg-start-kopf.hat-bild h1.sg-start-titel{font-size:clamp(32px, 4.2vw, 62px) !important} } @media (max-width:1000px){.sg-start-kopf-bild{aspect-ratio:16 / 10}} /* Kennzeile mit Warmgold-Kickerstrich 32 × 3 px, 13 px / 500 / +0,18 em in #444443; auf Anthrazit weiß (Vorlagen 02 bis 10) */ .sg-main .sg-kennzeile{display:flex;align-items:center;gap:16px;margin:0 0 26px;font-size:13px !important;font-weight:500 !important;line-height:1.2 !important;letter-spacing:.18em !important;text-transform:uppercase;color:var(--grau) !important} .sg-main .sg-kennzeile::before{content:"";flex:0 0 32px;height:3px;background:var(--gold)} .sg-main :is(.sg-band, .sg-start-kopf, .sg-abschluss-inner) .sg-kennzeile{color:var(--weiss) !important} /* Das Kundenlogo-Band trägt auf der Startseite dieselbe Kennzeile wie die Abschnitte (Wunsch 29.09.2026) */ .home .sg-logobar-kopf{gap:16px} .home .sg-logobar-kicker{font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase} /* Abschnittsüberschriften in 300 mit kräftigem Teil in 900, in derselben Zeile. Die allgemeine h2-Regel (Teil v3) nimmt diese Überschriften aus. Mit ist-fett trägt der kräftige Teil 700 (Expertise, Tagung, Unternehmen: 32 bis 56 px). */ .sg-main h2.sg-start-h2{max-width:none;font-weight:300 !important;line-height:1 !important;letter-spacing:-.035em !important;text-wrap:balance} .sg-main h2.sg-start-h2 .sg-h-kraeftig{font-weight:900} .sg-main h2.sg-start-h2.ist-fett{max-width:16ch;margin:0;font-size:clamp(32px, 3.4vw, 48px) !important;line-height:1.04 !important;letter-spacing:-.03em !important} .sg-main h2.sg-start-h2.ist-fett .sg-h-kraeftig{font-weight:700} .sg-main .sg-band h2.sg-start-h2{color:var(--weiss) !important} .sg-main .sg-bandbild h2.sg-start-h2.ist-fett{max-width:14ch;font-size:clamp(32px, 3.9vw, 56px) !important} /* Die bisherige Überschrift als Einleitungszeile darunter */ .sg-main p.sg-einzeile{margin:22px 0 0;max-width:34ch;font-size:clamp(19px, 1.6vw, 22px) !important;font-weight:700;line-height:1.3 !important;letter-spacing:-.018em;color:var(--anthrazit);text-wrap:balance} .sg-main .sg-exp p.sg-einzeile{max-width:32ch} .sg-main .sg-band p.sg-einzeile{color:var(--weiss) !important} /* News und Wissen: die Überschrift steht ganz in 700 */ .sg-main .sg-wis h2.sg-st-titel{font-size:clamp(32px, 3.9vw, 56px) !important;font-weight:700 !important;line-height:1.04 !important;letter-spacing:-.03em !important} @media (max-width:1023px){.sg-main :is(h2.sg-start-h2.ist-fett, p.sg-einzeile){max-width:none}} .sg-main h2.sg-leist-gross{margin:0 0 18px;font-size:clamp(32px, 4.4vw, 64px) !important} .sg-main h3.sg-leist-zwischen{margin:0;font-size:clamp(22px, 2.4vw, 30px) !important;font-weight:700;line-height:1.15;letter-spacing:-.02em !important;color:var(--anthrazit)} .sg-main .sg-gruende h2.sg-start-h2{margin:0 0 56px;font-size:clamp(32px, 4.4vw, 64px) !important} @media (max-width:1000px){.sg-main .sg-gruende h2.sg-start-h2{margin-bottom:40px}} /* So sieht Impact aus: drei gleichberechtigte Spalten auf #F5F5F5, je mit 3 px Warmgold darüber, keine Karten (E-049, E-083, E-085). Darüber der Kopf mit der Gesamtkennzahl: Zahl links in 452 px, Satz und Verweis rechts (E-080). */ html body:where(.home) .sg-main > .sg-erg{box-sizing:border-box;width:100vw;max-width:100vw;margin:0 0 0 calc(50% - 50vw);background:var(--grund);color:var(--anthrazit)} .sg-erg-inner{box-sizing:border-box;max-width:1280px;margin:0 auto;padding:96px var(--v3-rand, 32px)} .sg-main h2.sg-erg-titel{margin:0 0 56px;font-size:clamp(30px, 4vw, 48px) !important;line-height:1.02 !important;letter-spacing:-.03em !important;color:var(--anthrazit)} .sg-erg-kopf{display:grid;grid-template-columns:minmax(0,452px) minmax(0,1fr);gap:74px;align-items:center;margin:0 0 80px} .sg-main p.sg-erg-kz{margin:0;font-size:clamp(76px, 11vw, 180px) !important;font-weight:900;line-height:.86 !important;letter-spacing:-.05em;white-space:nowrap;color:var(--anthrazit);font-variant-numeric:tabular-nums} .sg-main p.sg-erg-kz .sg-v3-ziffern{color:inherit !important} .sg-erg-kz-rest{font-weight:300;margin-left:.06em} .sg-main p.sg-erg-ksatz{margin:0;max-width:22ch;font-size:clamp(22px, 2.4vw, 31px) !important;font-weight:700;line-height:1.28 !important;letter-spacing:-.02em;color:var(--anthrazit);text-wrap:balance} .sg-erg-kopf-text a.sg-pfeil{margin-top:18px} .sg-erg-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto);gap:0 48px;align-items:start} /* Gleiche Höhen (Wunsch 29.09.2026): die drei Spalten teilen sich fünf Zeilen (Marke, Zahl, Text, Zusatz, Verweis). Die Zahl steht unten in ihrer Zeile, so enden alle drei auf einer Linie und Text und Goldlinie liegen gleich hoch. */ .sg-erg-spalte{display:grid;grid-template-rows:subgrid;grid-row:span 5;min-width:0;padding-top:24px;border-top:3px solid var(--gold)} .sg-main .sg-erg-marke{margin:0 0 18px;font-size:13px !important;font-weight:700;line-height:1.3 !important;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)} .sg-main .sg-erg-zahl{align-self:end;margin:0 0 20px;line-height:.92 !important;font-variant-numeric:tabular-nums;color:var(--anthrazit)} .sg-erg-gross{display:block;font-size:clamp(44px, 5.6vw, 88px);font-weight:900;line-height:.92;letter-spacing:-.045em} .sg-erg-vorlauf{display:block;margin-bottom:4px;font-size:clamp(20px, 2.2vw, 28px);font-weight:300;line-height:1.1;letter-spacing:-.02em} .sg-erg-einheit{display:block;margin-top:4px;font-size:clamp(22px, 2.4vw, 32px);font-weight:900;line-height:1.05;letter-spacing:-.025em} .sg-main .sg-erg-text{max-width:34ch;margin:0 0 20px;font-size:18px !important;line-height:1.55 !important;color:var(--anthrazit);-webkit-hyphens:none !important;hyphens:none !important} .sg-main .sg-erg-zusatz{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--gold);font-size:18px !important;font-weight:700;line-height:1.4 !important;color:var(--anthrazit);font-variant-numeric:tabular-nums} .sg-main .sg-erg-spalte a.sg-pfeil{margin-top:4px} @media (max-width:1000px){ .sg-erg-kopf{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:56px} .sg-main p.sg-erg-ksatz{max-width:none} .sg-erg-reihe{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:48px} .sg-erg-spalte{display:block;grid-row:auto} .sg-erg-inner{padding-top:64px;padding-bottom:64px} .sg-main h2.sg-erg-titel{margin-bottom:40px} .sg-main .sg-erg-text{max-width:46ch} } @media (max-width:820px){.sg-erg-inner{padding-top:56px;padding-bottom:56px}} /* Verweis mit Pfeil (Regelwerk Teil C, Nachtrag 01): 15 px / 700, mindestens 48 px hoch, offener Pfeil 16 × 16 px als SVG am letzten Wort, 12 px Abstand, beim Überfahren 18 px und Magenta, 240 ms. Auf dunklem Grund bleibt die Schrift weiß und der Pfeil ist Warmgold, beim Überfahren weiß (Arbeitsliste 1.7 und A.2). Rückwärts steht der Pfeil gespiegelt vorn. Ohne Wischlinie der übrigen Textlinks. */ .sg-main a.sg-pfeil{display:inline-block;box-sizing:border-box;min-height:48px;padding:13px 0;font-size:15px;font-weight:700;line-height:1.4;color:var(--anthrazit);text-decoration:none;transition:color 240ms cubic-bezier(.2, 0, 0, 1)} .sg-pfeil-wort{white-space:nowrap} /* Beim Überfahren rückt nur der Pfeil 6 px weiter (12 → 18 px Abstand), per Verschiebung: Wort und nachfolgende Verweise in der Zeile bleiben stehen (Wunsch 29.09.2026) */ .sg-pfeil-zeichen{display:inline-block;width:16px;height:16px;margin-left:12px;vertical-align:-2px;color:var(--magenta);overflow:visible;transition:transform 240ms cubic-bezier(.2, 0, 0, 1), color 240ms cubic-bezier(.2, 0, 0, 1)} .sg-pfeil-zeichen.ist-zurueck{margin:0 12px 0 0;transform:scaleX(-1)} a:is(:hover, :focus-visible) .sg-pfeil-zeichen{transform:translateX(6px)} a:is(:hover, :focus-visible) .sg-pfeil-zeichen.ist-zurueck{transform:scaleX(-1) translateX(6px)} .sg-main a.sg-pfeil:is(:hover, :focus-visible), .sg-main a:is(:hover, :focus-visible) span.sg-pfeil{color:var(--magenta)} .sg-main a.sg-pfeil:focus-visible{outline:2px solid var(--magenta);outline-offset:3px} .sg-main :is(.sg-start-kopf, .sg-band) a.sg-pfeil, .sg-main :is(.sg-start-kopf, .sg-band) a.sg-pfeil:is(:hover, :focus-visible), .sg-main .sg-band a:is(:hover, :focus-visible) span.sg-pfeil{color:var(--weiss)} :is(.sg-start-kopf, .sg-band, .pv-un-hervor, .sg-abschluss-inner, .sg-kb-flaeche, .sg-zb:not(.ist-hell), .sg-kopf-buehne, .sg-kopf-typ-referenz, .sg-exp-feld, .sg-fuss-weiter) .sg-pfeil-zeichen{color:var(--gold)} /* Beim Überfahren wird der Pfeil auch auf dunklem Grund Magenta, im Fuß ebenso (Rückmeldung Oliver, 29.09.2026) */ :is(.sg-start-kopf, .sg-band, .pv-un-hervor, .sg-abschluss-inner, .sg-kb-flaeche, .sg-zb:not(.ist-hell), .sg-kopf-buehne, .sg-kopf-typ-referenz, .sg-exp-feld, .sg-fuss-weiter) a:is(:hover, :focus-visible) .sg-pfeil-zeichen{color:var(--magenta)} /* Mehr entdecken im Fuß: dieselbe Form, Schrift bleibt wie bisher (#DDDDDD, beim Überfahren weiß) */ .sg-fuss-weiter a.sg-pfeil{text-decoration:none} @media (prefers-reduced-motion:reduce){.sg-main a.sg-pfeil, .sg-pfeil-zeichen{transition:none}} html body.sg-neu.sg-neu.sg-neu .sg-main .sg-anfang-start .sg-cta:is(:hover, :focus-visible),html body .sg-main .sg-anfang-start .sg-cta:is(:hover, :focus-visible){background:var(--weiss) !important;color:var(--magenta) !important} html body .sg-main .sg-anfang-start .sg-cta:focus-visible{outline:2px solid var(--weiss);outline-offset:4px} /* Smart Enterprise (Arbeitsliste 7.1 bis 7.8, Vorlage 05_SMART_ENTERPRISE): Überschrift aus dem bisherigen Kopf, Vorspann, Einleitung; die gezeichnete Matrix auf weißer Tafel, ab 1001 px die große Fassung, darunter die kleine; vier Positionen und fünf Wege als Textblöcke, die Reihe „So gehen wir vor“ mit dem gezeichneten Pfeil. */ .sg-main .sg-se h2.sg-se-titel{margin:0 0 32px;font-size:clamp(30px, 4vw, 56px) !important;line-height:1.04 !important} .sg-main .sg-se p.sg-se-vor{margin:0 0 40px;max-width:30ch;font-size:clamp(20px, 2.1vw, 26px) !important;font-weight:700;line-height:1.35 !important;letter-spacing:-.02em;color:var(--weiss) !important;text-wrap:balance} .sg-se-einl{max-width:68ch;margin:0 0 44px} .sg-main .sg-se .sg-se-einl p{margin:0 0 14px;font-size:18px !important;line-height:1.62 !important;color:rgb(var(--weiss-rgb) / .88) !important} .sg-main .sg-se .sg-se-einl p:last-child{margin-bottom:0} .sg-se-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px} .sg-main .sg-se .sg-se-leiste p{margin:0;font-size:17px !important;font-weight:700;line-height:1.4 !important;color:var(--weiss) !important} .sg-se-leiste-hilfe{display:block;margin-top:4px;font-size:14px;font-weight:400;color:rgb(var(--weiss-rgb) / .72)} .sg-se-zurueck{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;background:transparent;border:1px solid rgb(var(--weiss-rgb) / .45);color:var(--weiss);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:border-color 240ms cubic-bezier(.2, 0, 0, 1), background-color 240ms cubic-bezier(.2, 0, 0, 1)} .sg-se-zurueck:hover{border-color:var(--weiss);background:rgb(var(--weiss-rgb) / .1)} .sg-se-zurueck:focus-visible{outline:2px solid var(--weiss);outline-offset:3px} .sg-se-zurueck[hidden]{display:none} .sg-se-tafel{padding:32px 32px 24px;background:var(--weiss)} .sg-se-rahmen{overflow-x:auto;overflow-y:hidden} .sg-sem{display:block;width:100%;height:auto;font-family:inherit} .sg-sem-d{min-width:840px} .sg-sem-m{display:none;max-width:440px;min-width:300px;margin:0 auto} .sg-sem :is(.sg-sem-pos, .sg-sem-weg){cursor:pointer;opacity:1;transition:opacity 240ms cubic-bezier(.2, 0, 0, 1)} .sg-sem :is(.sg-sem-wahl, .sg-sem-fok){opacity:0} .sg-main .sg-sem :is(.sg-sem-pos, .sg-sem-weg):focus-visible{outline:none !important} body.tast .sg-sem :is(.sg-sem-pos, .sg-sem-weg):focus .sg-sem-fok{opacity:1} .sg-se.ist-aus .sg-sem :is(.sg-sem-pos, .sg-sem-weg){opacity:.25} .sg-se.ist-aus .sg-sem :is(.sg-sem-pos, .sg-sem-weg).an{opacity:1} .sg-sem .gewaehlt .sg-sem-wahl{opacity:1} .sg-se-achsen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--linie)} .sg-se-ach b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--anthrazit)} .sg-se-ach span{display:block;margin-top:4px;font-size:15px;line-height:1.55;color:var(--grau)} .sg-se-gruppe{margin:56px 0 0} .sg-main .sg-se h3.sg-kennzeile{margin:0 0 22px} .sg-se-raster{display:grid;gap:32px} .sg-se-raster.ist-vier{grid-template-columns:repeat(4,minmax(0,1fr))} .sg-se-raster.ist-drei{grid-template-columns:repeat(3,minmax(0,1fr))} .sg-se-kt{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;margin:0;padding:19px 0 0;background:transparent;border:0;border-top:1px solid rgb(var(--weiss-rgb) / .35);border-radius:0;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:opacity 240ms cubic-bezier(.2, 0, 0, 1)} .sg-se-kt::before{content:"";position:absolute;top:-2px;left:0;width:46px;height:3px;background:var(--magenta);opacity:0;transition:opacity 240ms cubic-bezier(.2, 0, 0, 1)} .sg-se-kt.gewaehlt::before{opacity:1} .sg-se-kt:focus-visible{outline:2px solid var(--weiss);outline-offset:4px} .sg-se-kt-nr{display:block;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--gold);font-variant-numeric:tabular-nums} .sg-se-kt-t{display:block;font-size:20px;font-weight:900;line-height:1.15;letter-spacing:-.02em;color:var(--weiss)} .sg-se-kt-r{display:block;margin-top:6px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--gold)} .sg-se-rp{display:inline-block;width:12px;height:12px;margin:0 7px;vertical-align:-1px} .sg-se-kt-p{display:block;margin-top:10px;font-size:16px;font-weight:400;line-height:1.55;color:rgb(var(--weiss-rgb) / .88)} .sg-se.ist-aus .sg-se-kt{opacity:.25} .sg-se.ist-aus .sg-se-kt.an{opacity:1} .sg-main .sg-se p.sg-se-merk{max-width:60ch;margin:40px 0 0;padding-top:20px;border-top:1px solid var(--gold);font-size:18px !important;font-weight:700;line-height:1.45 !important;color:var(--weiss) !important} .sg-se-vorgehen{margin:56px 0 0} .sg-main .sg-se-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;list-style:none} .sg-main .sg-se-reihe li{display:flex;align-items:center;gap:10px;margin:0;padding:0} .sg-main .sg-se-reihe li::before{content:none} .sg-se-vs{padding:11px 16px;background:rgb(var(--weiss-rgb) / .08);color:var(--weiss);font-size:14.5px;font-weight:500} .sg-se-vp{flex:0 0 16px;width:16px;height:16px;color:var(--gold)} .sg-main .sg-se p.sg-se-schluss{max-width:66ch;margin:44px 0 0;font-size:19px !important;font-weight:700;line-height:1.6 !important;color:var(--weiss) !important} .sg-main .sg-se .sg-st-knopfe{margin-top:22px} @media (max-width:1100px){.sg-se-raster:is(.ist-vier, .ist-drei){grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:1000px){.sg-sem-d{display:none}.sg-sem-m{display:block}} @media (min-width:701px) and (max-width:1000px){ .sg-se-tafel{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:40px;align-items:center} .sg-se-achsen{grid-template-columns:minmax(0,1fr);gap:24px;margin:0;padding-top:0;border-top:0} } @media (max-width:820px){ .sg-se-tafel{padding:16px} .sg-se-achsen{grid-template-columns:minmax(0,1fr);gap:16px} .sg-se-raster:is(.ist-vier, .ist-drei){grid-template-columns:minmax(0,1fr);gap:28px} .sg-se-gruppe, .sg-se-vorgehen{margin-top:44px} } @media (prefers-reduced-motion:reduce){.sg-sem :is(.sg-sem-pos, .sg-sem-weg), .sg-se-kt, .sg-se-kt::before, .sg-se-zurueck{transition:none}} /* ════ Teil v3 (Gestaltung 2.0.1 und Runde 3) (bis 2.0.3: assets/v3.css) ════ */ /* Gestaltung 2.0.1 · nach dem Design-Ordner vom 24.09.2026 (Marketing, Website/Design) ─────────────────────────────────────────────────────────────────────────── Diese Ebene laedt als letzte und setzt das entschiedene System um: SCHNITT 900 traegt die Substanz, 300 rahmt sie. In h2 traegt 700. SKALA an beiden Enden: Titel bis 96 px, Fliesstext 17 bis 19 px bei 68 Zeichen. KOPF drei Seitenanfaenge: Bildkopf, Aussagekopf, Arbeitskopf. KONTAKT die Kontaktstelle ist die einzige Magentaflaeche der Seite. SCHLUSS halbiert: eine Zeile "Mehr entdecken", ein flacher Fuss. KACHEL Foto unbehandelt, die Marke sitzt in der anstossenden Flaeche. ZAHL echte Kennzahlen gross, sie zaehlen beim ersten Sichtkontakt hoch. ECKEN keine gerundeten Ecken, ausser am i-Punkt. FARBE Magenta #B50063, Violett #571763, Gold #BC9E78 (Linie und Standort, nie Text auf Hell), Anthrazit #2C2C2B, Sand #F5F5F5, Linie #DDDDDD. Das Menue (Kopfzeile, Mega-Menue, Mobilmenue) bleibt unberuehrt. */ /* ── Schrift, im Theme abgelegt (assets/fonts) ─────────────────────────── */ @font-face{font-family:'Roboto';font-style:normal;font-weight:300 900;font-stretch:100%;font-display:swap; src:url(assets/fonts/roboto-normal-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Roboto';font-style:normal;font-weight:300 900;font-stretch:100%;font-display:swap; src:url(assets/fonts/roboto-normal-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Roboto';font-style:italic;font-weight:300 900;font-stretch:100%;font-display:swap; src:url(assets/fonts/roboto-kursiv-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Roboto';font-style:italic;font-weight:300 900;font-stretch:100%;font-display:swap; src:url(assets/fonts/roboto-kursiv-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ── Token ─────────────────────────────────────────────────────────────── */ :root{ --v3-magenta:var(--magenta); --v3-violett:var(--violett); --v3-gold:var(--gold); /* Anthrazit 80 % */ --v3-rand:clamp(16px, .34rem + 2.7vw, 40px); --v3-abschnitt:clamp(72px, 3rem + 6vw, 120px); --v3-t-titel:clamp(40px, 1.1rem + 5.2vw, 96px); --v3-t-titel-lang:clamp(32px, 1.1rem + 3.4vw, 68px); --v3-t-arbeit:clamp(34px, 1.2rem + 3vw, 64px); --v3-t-h2:clamp(30px, 1.25rem + 2.2vw, 48px); --v3-t-h2-gross:clamp(34px, 1.3rem + 2.6vw, 56px); /* Abschnittstitel 48–56 px (26.09.2026) */ --v3-t-h3:clamp(21px, 1.05rem + .7vw, 28px); --v3-t-zahl:clamp(72px, 2.2rem + 7.6vw, 144px); --v3-t-kennzahl:clamp(52px, 1.8rem + 4.2vw, 88px); --v3-t-text:clamp(17px, 1.01rem + .22vw, 19px); --v3-t-lead:clamp(18px, 1.05rem + .45vw, 22px); --v3-t-klein:15px; --v3-zeile:34em; /* Lesezeile hoechstens etwa 68 Zeichen (PRODUCT.md); 68ch ergab bei Roboto rund 80 Zeichen */ --v3-aus:cubic-bezier(.2, 0, 0, 1); --v3-schrift:'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; } body.sg-v3.sg-v3.sg-v3.sg-v3{ /* Alte Abstandsgroessen auf die neue Skala ziehen, damit alle Ebenen folgen */ --sg-abschnitt:var(--v3-abschnitt); --sg-abstand:var(--v3-abschnitt); --sg-sand:var(--v3-sand); --sg-linie:var(--v3-linie); --sg-haar:var(--v3-linie); --sg-rand:var(--v3-rand); font-family:var(--v3-schrift); color:var(--v3-anthrazit); font-kerning:normal; font-optical-sizing:auto; text-rendering:optimizeLegibility; & ::selection{background:var(--v3-violett);color:var(--weiss)} & .sg-main, & .sg-fuss{font-family:var(--v3-schrift)} /* ── Ecken: keine Rundungen, nur der i-Punkt bleibt gerundet ─────────── */ /* ── Fokus, sichtbar und in Markenfarbe ───────────────────────────────── */ & :is(.sg-main, .sg-fuss) :is(a, button, input, select, textarea, [tabindex]):focus-visible{outline:2px solid var(--v3-magenta) !important;outline-offset:3px !important} /* Auf dunklen Flaechen traegt Magenta keine 3 : 1; dort ist der Fokusrahmen weiss */ & .sg-main :is(.sg-abschluss-inner, .sg-band, .sg-flaeche-dunkel, .sg-flaeche-violett, .pv-un-hervor, .sg-zb:not(.ist-hell), .sg-pause.ist-dunkel, .sg-ref-ergebnis, .sg-anfang-start) :is(a, button, input, select, textarea, [tabindex]):focus-visible{outline-color:var(--weiss) !important} /* ── Grundtext ─────────────────────────────────────────────────────── */ /* Fliesstext; grosse Aussagen (Gleichung auf StrategionChat) setzen sich selbst */ & .sg-main :is(.sg-prosa, .sg-erklaer, .sg-band-inner, .sg-sandband-inner, .sg-akopf, .sg-abschluss-inner, .sg-lb-kopf) > p:not(.pv-sc-formel, .sg-kennzeile, .sg-einzeile, .sg-se-vor, .sg-se-schluss, .sg-kon-einladung), & .sg-main :is(.sg-prosa, .sg-erklaer .sg-prosa) :is(p, li){ font-size:var(--v3-t-text) !important;line-height:1.62 !important;max-width:var(--v3-zeile);text-wrap:pretty} & .sg-main .sg-prosa :is(ul, ol){max-width:var(--v3-zeile)} & .sg-main :is(p, li){-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4} & .sg-main strong{font-weight:700} & .sg-main a:not([class]){text-underline-offset:.2em;text-decoration-thickness:1px} /* ── Ueberschriften: Schnitte und Skala ─────────────────────────────── */ /* Umbruch: pretty statt balance, damit nicht getrennt wird, nur um Zeilen anzugleichen. Getrennt werden nur lange Woerter (ab 16 Zeichen). */ & .sg-main :is(h1, h2, h3){font-family:var(--v3-schrift);text-wrap:pretty;-webkit-hyphens:auto;hyphenate-limit-chars:18 8 7;overflow-wrap:normal} & .sg-main h2:where(:not(.sg-start-h2, .sg-presse-buehne-titel)){font-size:var(--v3-t-h2) !important;font-weight:700 !important;letter-spacing:-.03em !important;line-height:1.04 !important;max-width:22ch} & .sg-main h3{font-weight:700;letter-spacing:-.02em} & .sg-main .sg-schnitt-leicht{font-weight:300 !important;letter-spacing:-.025em} & .sg-main h1 .sg-schnitt-schwer{font-weight:900 !important} & .sg-main h2 .sg-schnitt-schwer{font-weight:700 !important} /* Folgt der tragende Teil auf den rahmenden, beginnt er auf einer eigenen Zeile: so bleibt kein Wort des tragenden Satzes am Zeilenende haengen */ /* Der tragende Teil beginnt auf einer neuen Zeile, bleibt aber im Zeilenfluss: So haengt der i-Punkt (h2::after) weiter am letzten Wort und rutscht nicht als eigene Zeile darunter (Safari, 24.09.2026). */ & .sg-main :is(h1, h2) .sg-schnitt-leicht + .sg-schnitt-schwer::before{content:"\A";white-space:pre} /* Die letzten zwei Woerter von Titeln und Aussagen als Einheit (inc/v3.php, sg_v3_titel_binden): kein einzelnes Wort in der letzten Zeile; zu breit fuer die Spalte bricht die Einheit in sich um */ /* Zeilenausgleich nur innerhalb eines Schnitts, nicht ueber den Umbruch hinweg */ & .sg-main :is(h1, h2):has(.sg-schnitt-leicht + .sg-schnitt-schwer){text-wrap:pretty !important} /* Auf schmalen Schirmen duerfen auch kuerzere Woerter getrennt werden */ @media (max-width:760px){ & .sg-main :is(h1, h2){hyphenate-limit-chars:18 8 7} } /* Ueberschriften in Karten sind keine Abschnitte */ & .sg-main :is(.sg-kb-karte, .pv-pr-karte, .sg-stellenkarte, .sg-lb, .sg-mk, .sg-fr-fall, .sg-kon-karte, .sg-imp-karte) h2{ font-size:var(--v3-t-h3) !important;line-height:1.14 !important;letter-spacing:-.02em !important;max-width:none} /* ── Seitenkopf: gemeinsame Grundlage ─────────────────────────────────── */ & .sg-main > .sg-seitenkopf{position:relative;overflow:visible;background:var(--v3-sand) !important; min-height:0 !important;padding:0 !important;margin-top:0} & .sg-main > .sg-seitenkopf > .sg-i{display:none !important} & .sg-seitenkopf .sg-seitenkopf-inner{max-width:1280px !important;margin:0 auto !important;box-sizing:border-box; padding:0 var(--v3-rand) !important;display:grid !important;grid-template-columns:repeat(12, minmax(0, 1fr)) !important; column-gap:clamp(16px, 2vw, 32px) !important;row-gap:0 !important;align-items:start} & .sg-seitenkopf .sg-kopf-titelzone{grid-column:1 / -1;min-width:0} & .sg-seitenkopf .sg-kopf-titel{color:var(--v3-anthrazit) !important;margin:0 !important;max-width:20ch !important; font-size:var(--v3-t-titel) !important;line-height:.92 !important;letter-spacing:-.045em !important} & .sg-seitenkopf.ist-langtitel .sg-kopf-titel{font-size:var(--v3-t-titel-lang) !important;max-width:24ch !important;line-height:.98 !important} & .sg-seitenkopf .sg-kopf-absaetze{grid-column:5 / -1;padding:0 !important;columns:auto !important;margin-top:clamp(32px, 3.6vw, 56px)} & .sg-seitenkopf .sg-kopf-absaetze p{font-size:var(--v3-t-lead) !important;line-height:1.55 !important;color:var(--v3-anthrazit) !important; max-width:60ch !important;margin:0 !important;text-wrap:pretty} & .sg-seitenkopf .sg-kopf-absaetze p + p{margin-top:.9em !important} & .sg-seitenkopf .sg-kopf-absaetze :is(strong, a){color:var(--v3-anthrazit) !important} & .sg-seitenkopf .sg-kopf-absaetze a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px} @media (max-width:900px){ & .sg-seitenkopf .sg-kopf-absaetze{grid-column:1 / -1} } /* Aussagekopf: nur Typografie auf Sand, gross, viel Luft */ & .sg-main > .sg-kopf-typ-aussage{padding-bottom:clamp(56px, 7vw, 112px) !important} /* Arbeitskopf: flach, eine Zeile, sofort in den Inhalt */ & .sg-main > .sg-kopf-typ-arbeit{background:var(--f-weiss, var(--weiss)) !important;padding-bottom:clamp(32px, 3.6vw, 52px) !important;border-bottom:1px solid var(--v3-linie)} & .sg-kopf-typ-arbeit .sg-kopf-titelzone{grid-column:1 / span 7} & .sg-kopf-typ-arbeit .sg-kopf-titel{font-size:var(--v3-t-arbeit) !important;line-height:.98 !important;max-width:20ch !important} & .sg-kopf-typ-arbeit .sg-kopf-absaetze{grid-column:8 / -1;margin-top:0;align-self:end} & .sg-kopf-typ-arbeit .sg-kopf-absaetze p{font-size:var(--v3-t-text) !important;color:var(--v3-grau) !important} & .sg-kopf-typ-arbeit.ist-langtitel .sg-kopf-titelzone{grid-column:1 / -1} & .sg-kopf-typ-arbeit.ist-langtitel .sg-kopf-absaetze{grid-column:5 / -1;margin-top:28px} @media (max-width:900px){ & .sg-kopf-typ-arbeit .sg-kopf-titelzone{grid-column:1 / -1} & .sg-kopf-typ-arbeit .sg-kopf-absaetze{grid-column:1 / -1;margin-top:20px} } /* Bildkopf: Motiv ueber die volle Breite, die Aussage darin, Verlauf nur unten */ & .sg-main > .sg-kopf-typ-bild{background:var(--f-weiss, var(--weiss)) !important;padding-bottom:clamp(48px, 6vw, 88px) !important} & .sg-kopf-typ-bild.ohne-text{padding-bottom:0 !important} & .sg-kopf-buehne{position:relative;display:grid;align-items:end;min-height:clamp(460px, 64vh, 720px);background:var(--f-dunkel, var(--v3-anthrazit));isolation:isolate} & .sg-kopf-motiv{position:absolute;inset:0;z-index:-1;overflow:hidden} & .sg-kopf-motiv img{width:100%;height:100%;object-fit:cover;display:block} & .sg-kopf-motiv::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top, rgb(var(--anthrazit-rgb) / .84) 0, rgb(var(--anthrazit-rgb) / .5) 26%, rgb(var(--anthrazit-rgb) / 0) 54%)} & .sg-kopf-buehne .sg-kopf-titelzone{width:100%;max-width:1280px;margin:0 auto;box-sizing:border-box;padding:clamp(120px, 16vw, 200px) var(--v3-rand) clamp(40px, 5vw, 72px)} & .sg-kopf-buehne .sg-kopf-titel{color:var(--weiss) !important;max-width:17ch !important} & .sg-kopf-typ-bild .sg-seitenkopf-inner{padding-top:clamp(40px, 5vw, 72px) !important} & .sg-kopf-typ-bild .sg-kopf-absaetze{margin-top:0} @media (max-width:700px){ & .sg-kopf-buehne{display:block;min-height:0;background:var(--f-weiss, var(--weiss))} & .sg-kopf-motiv{position:relative;inset:auto;z-index:auto;aspect-ratio:4 / 3} & .sg-kopf-motiv::after{display:none} & .sg-kopf-buehne .sg-kopf-titelzone{padding:28px var(--v3-rand) 0} & .sg-kopf-buehne .sg-kopf-titel{color:var(--v3-anthrazit) !important} & .sg-kopf-typ-bild .sg-seitenkopf-inner{padding-top:20px !important} } /* Wo man ist: eine ruhige Zeile direkt unter dem Menue, keine Magentaflaeche mehr. Sie steht im Markup hinter dem Kopf und wird an dessen Oberkante gesetzt. */ & .sg-main{position:relative} & .sg-main > .sg-kopf-band{position:absolute !important;top:0;left:0;right:0;z-index:3;width:auto !important;margin:0 !important; background:transparent !important;color:var(--v3-grau) !important;border-bottom:1px solid var(--v3-linie)} & .sg-main > .sg-kopf-band .sg-kopf-band-inner{white-space:nowrap;overflow:hidden;flex-wrap:nowrap !important} & .sg-main > .sg-kopf-band .sg-kopf-band-hier{overflow:hidden;text-overflow:ellipsis;min-width:0} & .sg-main > .sg-kopf-typ-bild{padding-top:53px !important} & .sg-main > .sg-kopf-typ-bild + .sg-kopf-band{background:var(--f-weiss, var(--weiss)) !important} & .sg-main > .sg-kopf-typ-arbeit{padding-top:calc(53px + clamp(28px, 4vw, 56px)) !important} & .sg-main > .sg-kopf-typ-aussage{padding-top:calc(53px + clamp(56px, 8vw, 120px)) !important} & .sg-main > .sg-kopf-band .sg-kopf-band-inner{min-height:52px !important;padding:12px var(--v3-rand) !important;font-size:14px !important;font-weight:500 !important;letter-spacing:0 !important;gap:6px 10px !important} & .sg-main > .sg-kopf-band :is(a, .sg-kopf-band-teiler){color:var(--v3-grau) !important;font-weight:500 !important} & .sg-main > .sg-kopf-band a:is(:hover, :focus-visible){color:var(--v3-magenta) !important;text-decoration:none !important} & .sg-main > .sg-kopf-band .sg-kopf-band-teiler{color:var(--v3-gold-60) !important} & .sg-main > .sg-kopf-band .sg-kopf-band-hier{color:var(--v3-anthrazit) !important;font-weight:700 !important} /* ── Abstaende zwischen den Kapiteln ─────────────────────────────────── */ & .sg-main > .sg-kopf-band + :not(.sg-flaeche):not(.sg-leistungsbild):not(.sg-ref-motiv){margin-top:var(--v3-abschnitt) !important} /* Nichts ist gerundet ausser dem i-Punkt (PRODUCT.md) */ & :is(.sg-main, .sg-fuss, #sg-cc, .sg-anfrage, .sg-quick) *:not([class*="punkt"]){border-radius:0} /* ── Erklaerblock: versetzte Achse. Titel ab Spalte 1, Lesetext ab Spalte 5 */ & .sg-main .sg-erklaer{display:grid !important;grid-template-columns:repeat(12, minmax(0, 1fr)) !important;column-gap:clamp(16px, 2vw, 32px) !important;row-gap:0 !important;align-items:start} & .sg-main .sg-erklaer::after{display:none} /* Zwei Achsen (Regelwerk, Regel 11): Titel in Spalte 1 bis 5, Lesetext ab Spalte 6, hoechstens 720 px. Der Titel laeuft bei langen Texten mit (sticky). */ /* Der Kopf reicht genau ueber die erste Rasterzeile; darin klebt seine innere Huelle, so laeuft der Titel nur neben seinem Text mit (inc/v3.php, sg_v3_erklaer_teilen). Leitsaetze stehen danach in einer eigenen Zeile. */ & .sg-main .sg-erklaer > .sg-erklaer-kopf{grid-column:1 / span 5;grid-row:1;align-self:stretch;position:static !important} & .sg-main .sg-erklaer > .sg-erklaer-kopf > .sg-erklaer-halt{position:sticky;top:40px} & .sg-main .sg-erklaer > .sg-prosa{grid-column:6 / -1;grid-row:1;max-width:720px;margin-top:0} & .sg-main .sg-erklaer > .sg-prosa.ist-fortsetzung{grid-row:auto;margin-top:clamp(40px, 4vw, 64px)} & .sg-main .sg-erklaer > p.sg-these.sg-aussage{grid-column:1 / -1;grid-row:auto;width:auto !important;margin:clamp(56px, 6vw, 104px) 0 0} & .sg-main .sg-erklaer > :not(.sg-erklaer-kopf):not(.sg-prosa){grid-column:1 / -1} /* Text im Kopf (Methoden-, Technologieexpertise): links Titel und Text, rechts die Stufen, wie in der Vorlage */ @media (min-width:1024px){ & .sg-main .sg-erklaer.ist-text-im-kopf > .sg-erklaer-kopf{grid-column:1 / span 6} & .sg-main .sg-erklaer.ist-text-im-kopf > .sg-erklaer-kopf + *{grid-column:8 / -1;grid-row:1;margin-top:0} } @media (max-width:1023px){ & .sg-main .sg-erklaer > .sg-erklaer-kopf, & .sg-main .sg-erklaer > .sg-prosa{grid-column:1 / -1;grid-row:auto;position:static !important} & .sg-main .sg-erklaer > .sg-erklaer-kopf > .sg-erklaer-halt{position:static} & .sg-main .sg-erklaer > .sg-prosa{margin-top:clamp(24px, 3vw, 40px);max-width:none} } & .sg-main .sg-erklaer h2{max-width:24ch} /* ── Bausteine als Satzspiegel: Schlagwort links, Satz rechts, Haarlinien ── */ & .sg-main .sg-lb-gitter{display:block !important;margin-top:clamp(32px, 3.6vw, 56px);border-bottom:1px solid var(--v3-linie)} & .sg-main .sg-lb-gitter > .sg-lb{display:grid !important;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2vw, 32px); border-top:1px solid var(--v3-linie) !important;padding:clamp(24px, 2.6vw, 40px) 0 !important;background:none !important;align-items:baseline} & .sg-main .sg-lb-gitter > .sg-lb > .sg-lb-balken{display:none !important} & .sg-main .sg-lb-gitter > .sg-lb > .sg-lb-titel{grid-column:1 / span 5;margin:0;font-size:clamp(22px, 1.1rem + 1vw, 32px) !important; font-weight:700 !important;letter-spacing:-.025em !important;line-height:1.1;color:var(--v3-anthrazit) !important;} & .sg-main .sg-lb-gitter > .sg-lb > :not(.sg-lb-titel):not(.sg-lb-balken){grid-column:6 / -1;min-width:0} & .sg-main .sg-lb-gitter > .sg-lb .sg-lb-text p{font-size:var(--v3-t-text) !important;line-height:1.6 !important;color:var(--v3-anthrazit) !important;margin:0;max-width:var(--v3-zeile)} & .sg-main .sg-lb-gitter > .sg-lb .sg-lb-text p + p{margin-top:.7em} @media (max-width:760px){ & .sg-main .sg-lb-gitter > .sg-lb{display:block !important} & .sg-main .sg-lb-gitter > .sg-lb > :not(.sg-lb-titel){margin-top:12px} } & .sg-main .sg-flaeche-violett .sg-lb-gitter, & .sg-main .sg-flaeche-violett .sg-lb-gitter > .sg-lb{border-color:var(--v3-violett-80) !important} & .sg-main .sg-flaeche-violett .sg-lb-gitter > .sg-lb > .sg-lb-titel{color:var(--weiss) !important} & .sg-main .sg-flaeche-violett .sg-lb-gitter > .sg-lb .sg-lb-text p{color:var(--v3-violett-20) !important} /* ── Band (Taktwechsel): Violett, grosse Aussage ─────────────────────── */ & .sg-main .sg-band .sg-band-inner > h2:not(.sg-start-h2), & .sg-main .sg-band :is(.sg-akopf, .sg-band-kopf) > h2:not(.sg-start-h2){font-size:var(--v3-t-h2-gross) !important;color:var(--weiss) !important;max-width:18ch} /* ── Kontaktstelle: ruhige Sandflaeche, Magenta nur als Kante und Knopf ── (Rueckmeldung 24.09.2026: zu viel Magenta; vorher volle Magentaflaeche) */ & .sg-main > .sg-abschluss, & .sg-main .sg-abschluss{min-height:0; box-shadow:none} & .sg-main .sg-abschluss :is(.sg-abschluss-bild, .sg-abschluss-schleier){display:none !important} & .sg-main .sg-abschluss h2{font-size:clamp(34px, 1.2rem + 2.6vw, 56px) !important;max-width:20ch;line-height:1 !important} & .sg-main .sg-abschluss h2 .sg-schnitt-schwer{font-weight:700 !important} & .sg-main .sg-abschluss .sg-cta{min-height:56px} & .sg-main .sg-abschluss .sg-cta:is(:hover, :focus-visible){background:var(--v3-violett) !important;color:var(--weiss) !important} & .sg-main .sg-abschluss a:not(.sg-cta){color:var(--v3-magenta) !important} & .sg-main .sg-abschluss a:not(.sg-cta):is(:hover, :focus-visible){color:var(--v3-violett) !important} & .sg-main .sg-abschluss :is(.sg-cta-portrait, .sg-cta-portrait .sg-img){background:var(--v3-sand) !important} /* ── Knoepfe: eine Form, eckig ──────────────────────────────────────── */ & .sg-cta{font-weight:700 !important;letter-spacing:0 !important} @media (pointer:coarse){ & :is(.sg-main, .sg-fuss) :is(.sg-cta, .sg-chip, .sg-quick-chip, .sg-kar-knopf, .sg-kar-reset, .sg-st-karte-cta, .sg-kon-ruf, .sg-kon-mail, .sg-fr-link, .sg-v3-chip, .sg-fuss-weiter a, .sg-fuss-recht a, .sg-fuss-ort-weg){min-height:44px;display:inline-flex;align-items:center} } /* ── Bildkacheln: Foto unbehandelt, Marke in der anstossenden Flaeche ───── */ & .sg-exp-motiv::before, & .sg-exp-motiv::after{display:none} & .sg-exp-trio{gap:3px !important} & .sg-exp-feld{background:var(--f-dunkel, var(--v3-anthrazit)) !important} & .sg-exp-feld .sg-exp-motiv{position:relative;aspect-ratio:3 / 2;overflow:hidden} & .sg-exp-feld .sg-exp-motiv :is(img){filter:none !important;opacity:1 !important} & .sg-exp-trio > .sg-exp-feld:nth-child(1){background:var(--f-violett-flaeche, var(--v3-violett)) !important} & .sg-exp-trio > .sg-exp-feld:nth-child(2){background:var(--f-dunkel, var(--v3-anthrazit)) !important} & .sg-exp-trio > .sg-exp-feld:nth-child(3){background:var(--f-violett-flaeche, var(--v3-violett)) !important} & .sg-exp-feld .sg-exp-titel{font-size:clamp(24px, 1.1rem + 1vw, 34px) !important;font-weight:700 !important;color:var(--weiss) !important} & .sg-exp-feld .sg-exp-text{font-size:16px !important;line-height:1.55 !important;color:var(--v3-violett-20) !important} /* Referenzkarte: siehe Teil 16 am Ende (eine Karte fuer alle Seiten) */ /* ── Zahl als Buehne ────────────────────────────────────────────────── */ & .sg-v3-ziffern{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1, "lnum" 1} & .sg-v3-buehne{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:end;column-gap:clamp(24px, 4vw, 64px);row-gap:18px} & .sg-v3-buehne .sg-v3-zahl{display:flex;align-items:baseline;color:var(--v3-magenta);font-size:var(--v3-t-zahl);font-weight:900;letter-spacing:-.06em;line-height:.8} & .sg-v3-buehne .sg-v3-zahl-rest{font-weight:300} & .sg-v3-buehne-text{padding-bottom:.5em;min-width:0} & .sg-v3-buehne-text :is(strong, b){display:block;font-size:var(--v3-t-h3);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--v3-anthrazit)} & .sg-v3-buehne-text span{display:block;font-size:var(--v3-t-text);line-height:1.5;color:var(--v3-grau);margin-top:6px} /* Der Strich ueber der Zahl waechst synchron mit ihr (I-09). Ohne Skript steht er sofort; v3.js setzt ihn nur fuer zaehlbare Zahlen auf null. */ & :is(.sg-v3-reihe > div, .sg-ref-menge .sg-v3-buehne, .sg-fr-kennzahl){position:relative} /* Keine Linie ueber Kennzahlen (Auftrag 26.09.2026: keine dekorativen Linien ueber Zahlen) */ @media (max-width:620px){ & .sg-v3-buehne{grid-template-columns:minmax(0, 1fr)} & .sg-v3-buehne-text{padding-bottom:0} } /* Dreierreihe: Kennzahlen eines Projekts */ & .sg-v3-reihe{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));gap:0 clamp(24px, 3vw, 48px)} & .sg-v3-reihe > div{padding-top:clamp(18px, 2vw, 28px);min-width:0;--v3-strich:var(--v3-anthrazit)} & .sg-v3-reihe > div:first-child{--v3-strich:var(--v3-magenta)} & .sg-v3-reihe .sg-v3-zahl{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .18em;font-size:var(--v3-t-kennzahl);font-weight:900;letter-spacing:-.05em;line-height:.85;} /* Woerter im Zahlfeld sind keine Kennzahl: Etikett wie der Stand auf der Projektkarte (700, 17 px); gross in 900 nur echte Zahlen */ & .sg-v3-reihe .sg-v3-zahl.ist-wort{font-size:17px !important;font-weight:700 !important;letter-spacing:-.01em;line-height:1.25} & .sg-v3-reihe .sg-v3-zahl-rest{font-weight:300;font-size:.46em;letter-spacing:-.02em} & :is(.sg-v3-reihe, .sg-v3-buehne, .sg-fr-kennzahl) .sg-v3-zahl-rest.ist-zeichen{font-size:1em !important;letter-spacing:-.04em} & .sg-v3-reihe p{color:var(--v3-anthrazit);margin:16px 0 0;max-width:36ch;text-wrap:pretty} /* Kein Erscheinen beim Scrollen mehr (Regelwerk Teil C, Nachtrag 09; 29.09.2026) */ @media (prefers-reduced-motion:reduce){ & :is(.sg-v3-reihe > div, .sg-ref-menge .sg-v3-buehne, .sg-fr-kennzahl)::before{transition:none;transform:none} } /* ── Einwilligung: lesbar, und ohne die Schriftwahl, die es nicht mehr gibt ── */ & #sg-cc p{color:var(--v3-violett-20) !important} & #sg-cc label{color:var(--v3-violett-20) !important} & #sg-cc label:has(#sg-cc-komfort){display:none !important} & #sg-cc button{min-height:48px} } /* ═══ Teil 2: Kontaktband, Referenzen, Fuss ═══════════════════════════════ */ body.sg-v3.sg-v3.sg-v3.sg-v3{ /* ── Kontaktband (Vorlage Runde 3, 26.09.2026): Portraet links in voller Hoehe, rechts die dunkle Flaeche; ohne Person nur die Flaeche. Die Flaeche liegt im Seitenraster, der Abschnitt selbst auf dem Grund. ── */ & .sg-main .sg-abschluss.sg-kb .sg-abschluss-inner{padding-top:var(--sg-abstand, clamp(64px, 8vw, 128px)) !important;padding-bottom:var(--sg-abstand, clamp(64px, 8vw, 128px)) !important} & .sg-abschluss .sg-kb-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:0;align-items:stretch} & .sg-abschluss.mit-portraet .sg-kb-grid{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr)} & .sg-abschluss .sg-kb-bild{position:relative;min-height:clamp(320px, 34vw, 520px);background:var(--anthrazit);overflow:hidden} & .sg-abschluss .sg-kb-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block} & .sg-abschluss .sg-kb-flaeche{background:var(--grau);border-left:6px solid var(--magenta);padding:clamp(40px, 5.2vw, 88px) clamp(28px, 5.2vw, 88px);display:flex;flex-direction:column;justify-content:center;min-width:0} & .sg-abschluss .sg-kb-text{font-size:var(--v3-t-lead) !important;line-height:1.5 !important;max-width:42ch;margin-top:clamp(18px, 2vw, 28px)} & .sg-abschluss .sg-kb-person{margin:clamp(28px, 3vw, 44px) 0 0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline} & .sg-abschluss .sg-kb-rolle{margin:0} & .sg-abschluss .sg-kb-wege{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(20px, 2.4vw, 32px)} @media (max-width:900px){ & .sg-abschluss.mit-portraet .sg-kb-grid{grid-template-columns:minmax(0, 1fr)} & .sg-abschluss .sg-kb-bild{min-height:0;aspect-ratio:4 / 3;max-height:440px} } & .sg-abschluss .sg-kb-karte.mit-bild .sg-kb-person{padding:0 0 0 clamp(18px, 2vw, 28px) !important;align-self:start} & .sg-abschluss .sg-kb-karte.mit-bild .sg-kb-wege{padding:16px 0 0 clamp(18px, 2vw, 28px) !important;border:0 !important} & .sg-abschluss .sg-kb-name{font-size:clamp(20px, 1rem + .6vw, 24px) !important;font-weight:700 !important} & .sg-abschluss .sg-kb-rolle{font-size:15px !important} & .sg-abschluss .sg-kb-tel{font-weight:700 !important} & .sg-abschluss .sg-kb-tel:is(:hover, :focus-visible){color:var(--v3-magenta) !important;text-decoration:none} @media (max-width:1023px){ & .sg-abschluss .sg-kb-grid{grid-template-columns:minmax(0, 1fr)} } @media (max-width:520px){ & .sg-abschluss .sg-kb-karte.mit-bild{grid-template-columns:96px minmax(0, 1fr)} & .sg-abschluss .sg-kb-karte.mit-bild .sg-kb-wege{grid-column:1 / -1;padding:18px 0 0 !important} } /* ── Referenzen: die Menge als Einstieg ──────────────────────────────── */ & .sg-ref-menge{max-width:1280px;margin:var(--v3-abschnitt) auto 0;padding:0 var(--v3-rand);box-sizing:border-box; display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));gap:clamp(32px, 4vw, 64px)} & .sg-ref-menge .sg-v3-buehne{border-top:3px solid var(--v3-linie);padding-top:clamp(20px, 2.4vw, 32px)} & .sg-ref-menge .sg-v3-buehne.ist-zweit{--v3-strich:var(--v3-violett)} & .sg-ref-menge .sg-v3-buehne.ist-zweit .sg-v3-zahl{color:var(--v3-violett)} & .sg-v3-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px} & .sg-v3-chip, & .sg-v3-mehr{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--v3-linie);background:var(--f-weiss, var(--weiss)); font:inherit;font-size:15px;color:var(--v3-anthrazit);cursor:pointer;transition:background-color .2s ease, color .2s ease, border-color .2s ease} & .sg-v3-chip-zahl{font-weight:900;font-variant-numeric:tabular-nums;} & .sg-v3-chip:is(:hover, :focus-visible){border-color:var(--v3-anthrazit)} & .sg-v3-chip.ist-gewaehlt{background:var(--v3-anthrazit);border-color:var(--v3-anthrazit);color:var(--weiss)} & .sg-v3-chip.ist-gewaehlt .sg-v3-chip-zahl{color:var(--weiss)} & .sg-v3-mehr-zeile{display:flex;justify-content:center;margin-top:clamp(32px, 4vw, 56px)} & .sg-v3-mehr{font-weight:700;min-height:52px;padding:0 26px;border-color:var(--v3-anthrazit)} & .sg-v3-mehr:is(:hover, :focus-visible){background:var(--v3-anthrazit);color:var(--weiss)} & .sg-v3-mehr:is(:hover, :focus-visible) .sg-v3-chip-zahl{color:var(--weiss)} & .v3-weg{display:none !important} @media (max-width:1023px){ & .sg-ref-raster, & .sg-ref-weitere-raster{grid-template-columns:repeat(2, minmax(0, 1fr)) !important} } @media (max-width:640px){ & .sg-ref-raster, & .sg-ref-weitere-raster{grid-template-columns:minmax(0, 1fr) !important} } /* ── Referenz, Detailseite: anders gebaut ─────────────────────────────── */ & .sg-main > .sg-kopf-typ-referenz{background:var(--f-dunkel, var(--v3-anthrazit)) !important;padding:clamp(64px, 8vw, 128px) 0 clamp(120px, 14vw, 220px) !important} & .sg-kopf-typ-referenz .sg-kopf-titel{color:var(--weiss) !important;font-size:var(--v3-t-titel-lang) !important;max-width:22ch !important;line-height:.96 !important} & .sg-kopf-typ-referenz .sg-ref-aufgabe{grid-column:1 / span 8;margin-top:clamp(28px, 3vw, 44px)} & .sg-kopf-typ-referenz .sg-ref-aufgabe p{color:var(--weiss) !important;font-size:var(--v3-t-lead) !important;max-width:52ch !important} & .sg-kopf-typ-referenz .sg-ref-aufgabe strong{display:block;color:var(--v3-violett-20) !important;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px} @media (max-width:900px){ & .sg-kopf-typ-referenz .sg-ref-aufgabe{grid-column:1 / -1} } & .sg-kopf-typ-referenz .sg-ref-meta{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:18px clamp(28px, 4vw, 64px);margin:clamp(32px, 4vw, 56px) 0 0} & .sg-kopf-typ-referenz .sg-ref-meta div{border-top:3px solid var(--v3-gold);padding-top:12px;min-width:120px} & .sg-kopf-typ-referenz .sg-ref-meta div:nth-child(2){border-top-color:var(--v3-magenta)} & .sg-kopf-typ-referenz .sg-ref-meta div:nth-child(3){border-top-color:var(--v3-violett-40)} & .sg-kopf-typ-referenz .sg-ref-meta dt{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--v3-violett-20)} & .sg-kopf-typ-referenz .sg-ref-meta dd{margin:6px 0 0;font-size:17px;font-weight:500;color:var(--weiss);max-width:32ch} & .sg-main > .sg-kopf-typ-referenz{padding-top:calc(53px + clamp(48px, 6vw, 96px)) !important} & .sg-main > .sg-kopf-typ-referenz + .sg-kopf-band{border-bottom-color:var(--grau)} & .sg-main > .sg-kopf-typ-referenz + .sg-kopf-band :is(a, .sg-kopf-band-teiler){color:var(--v3-violett-20) !important} & .sg-main > .sg-kopf-typ-referenz + .sg-kopf-band .sg-kopf-band-hier{color:var(--weiss) !important} & .sg-ref-detail{position:relative} & .sg-ref-motiv{position:relative;max-width:1280px;margin:calc(-1 * clamp(88px, 11vw, 176px)) auto 0;padding:0 0 0 var(--v3-rand);box-sizing:border-box; margin-right:0;width:calc(50vw + 640px);max-width:none} & .sg-main > .sg-kopf-band + .sg-ref-motiv{margin-top:calc(-1 * clamp(88px, 11vw, 176px)) !important} @media (max-width:1280px){ & .sg-ref-motiv{width:auto;margin-left:var(--v3-rand);padding:0} } & .sg-ref-motiv img{display:block;width:100%;height:clamp(260px, 42vw, 620px);object-fit:cover} & .sg-ref-zahlen{max-width:1280px;margin:clamp(56px, 7vw, 104px) auto 0;padding:0 var(--v3-rand);box-sizing:border-box} & .sg-ref-kapitel{max-width:1280px;margin:clamp(64px, 8vw, 120px) auto 0;padding-left:var(--v3-rand) !important;padding-right:var(--v3-rand) !important;box-sizing:border-box} & .sg-ref-abschnitt{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2vw, 32px);border-top:1px solid var(--v3-linie);padding:clamp(28px, 3vw, 44px) 0} /* Die Titel der linken Achse in einer Groesse: wie die Kapiteltitel (Die Aufgabe, Unser Ansatz) */ & .sg-ref-abschnitt .sg-ref-titel{grid-column:1 / span 4;margin:0;font-size:var(--v3-t-h2) !important;font-weight:700 !important;letter-spacing:-.035em !important;line-height:1.06 !important} & .sg-ref-abschnitt .sg-ref-titel::after{display:none} & .sg-ref-abschnitt .sg-ref-satz{grid-column:5 / -1;margin:0;font-size:var(--v3-t-text);line-height:1.62;color:var(--v3-anthrazit);max-width:var(--v3-zeile);text-wrap:pretty} & .sg-ref-abschnitt .sg-ref-satz a{color:var(--v3-magenta);font-weight:700} & .sg-ref-abschnitt.ist-prosa{display:block} & .sg-ref-abschnitt.ist-prosa .sg-prosa > h2{float:left;clear:both;width:calc(33.333% - 20px);margin:0 !important;padding:0 !important;border:0 !important; font-size:clamp(22px, 1.1rem + .9vw, 30px) !important;line-height:1.1 !important;letter-spacing:-.025em !important} & .sg-ref-abschnitt.ist-prosa .sg-prosa > h2:not(:first-child){margin-top:clamp(28px, 3vw, 44px) !important;padding-top:clamp(28px, 3vw, 44px) !important} & .sg-ref-abschnitt.ist-prosa .sg-prosa > h2 + *{margin-top:0 !important} & .sg-ref-abschnitt.ist-prosa .sg-prosa > h2:not(:first-child) + *{padding-top:clamp(28px, 3vw, 44px)} @media (max-width:800px){ & .sg-ref-abschnitt .sg-ref-titel, & .sg-ref-abschnitt .sg-ref-satz{grid-column:1 / -1} & .sg-ref-abschnitt .sg-ref-satz{margin-top:12px} & .sg-ref-abschnitt.ist-prosa .sg-prosa > h2{float:none;width:auto} & .sg-ref-abschnitt.ist-prosa .sg-prosa > h2 + *{margin-top:12px !important;padding-top:0 !important} } & .sg-ref-ergebnis{width:100vw;margin-left:calc(50% - 50vw)} & .sg-ref-ergebnis-inner{max-width:1280px;margin:0 auto;padding:clamp(56px, 7vw, 112px) var(--v3-rand);box-sizing:border-box;display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2vw, 32px)} & .sg-ref-ergebnis .sg-ref-titel{grid-column:1 / span 4;font-size:var(--v3-t-h2) !important;letter-spacing:-.035em !important;line-height:1.06 !important;margin:0} & .sg-ref-ergebnis .sg-ref-titel::after{display:none} & .sg-ref-ergebnis-satz{grid-column:5 / -1;margin:0;font-weight:300;letter-spacing:-.02em;text-wrap:pretty;} & .sg-ref-ergebnis.ist-lang .sg-ref-ergebnis-satz{font-weight:300} @media (max-width:800px){ & .sg-ref-ergebnis .sg-ref-titel, & .sg-ref-ergebnis-satz{grid-column:1 / -1} & .sg-ref-ergebnis-satz{margin-top:16px} } & .sg-ref-leistungen, & .sg-ref-weitere{max-width:1280px;margin:var(--v3-abschnitt) auto 0;padding:0 var(--v3-rand);box-sizing:border-box} & .sg-ref-leistungen-reihe{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));gap:3px;margin-top:clamp(28px, 3vw, 44px)} & .sg-ref-leistung{display:flex;flex-direction:column;gap:12px;background:var(--v3-sand);padding:clamp(24px, 2.4vw, 36px);text-decoration:none;} & .sg-ref-leistung-name{font-size:clamp(21px, 1.05rem + .6vw, 26px);font-weight:700;letter-spacing:-.02em;color:var(--v3-anthrazit)} & .sg-ref-leistung-text{color:var(--v3-grau)} & .sg-ref-leistung-link{margin-top:auto;font-size:15px;font-weight:700;color:var(--v3-anthrazit)} & a:is(:hover, :focus-visible) .sg-ref-leistung-link{color:var(--v3-magenta)} & .sg-ref-leistung:is(:hover, :focus-visible){background:var(--f-weiss, var(--weiss));box-shadow:inset 0 0 0 1px var(--v3-linie)} & .sg-ref-weitere-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap} & .sg-ref-alle{font-size:15px;font-weight:700;color:var(--v3-anthrazit);text-decoration:none} & .sg-ref-alle:is(:hover, :focus-visible){color:var(--v3-magenta)} & .sg-ref-weitere-raster{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));margin-top:clamp(28px, 3vw, 44px)} /* ── Fuss: flach, Magenta auf Anthrazit ──────────────────────────────── */ & .sg-fuss.sg-fuss-v3{background:var(--f-fuss, var(--v3-anthrazit)) !important;color:var(--weiss);margin:0;padding:0 !important} & .sg-fuss-v3-inner{max-width:1280px;margin:0 auto;padding:0 var(--v3-rand);box-sizing:border-box} & .sg-fuss-weiter{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;padding:clamp(26px, 3vw, 36px) 0;border-bottom:1px solid var(--grau)} & .sg-fuss-weiter-titel{font-size:15px;font-weight:700;color:var(--weiss)} & .sg-fuss-weiter ul{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;margin:0;padding:0} & .sg-fuss-weiter a{font-size:15px;font-weight:500;color:var(--linie);text-decoration:none} & .sg-fuss-weiter a:is(:hover, :focus-visible){color:var(--weiss)} /* Kern: zwoelf Spalten. Links Logo und Kontakt, rechts die Seitenkarte in vier Spalten, darunter genau in diesen Spalten die Haeuser und LinkedIn. */ & .sg-fuss-kern{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2vw, 32px);row-gap:clamp(40px, 4.4vw, 64px); padding:clamp(44px, 5vw, 72px) 0 clamp(40px, 4.4vw, 60px)} & .sg-fuss-v3 .sg-fuss-marke{grid-column:1 / span 3;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-start;gap:0} & .sg-fuss-logo{display:inline-block} & .sg-fuss-logo img{display:block;height:clamp(52px, 5vw, 68px);width:auto;opacity:1} & .sg-fuss-satz{font-size:15px;line-height:1.55;color:var(--linie);margin:18px 0 0;max-width:28ch} & .sg-fuss-v3 .sg-fuss-kontakt{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:clamp(28px, 3vw, 40px)} & .sg-fuss-zeile{display:inline-flex !important;align-items:center;gap:6px;font-size:16px !important;font-weight:700;color:var(--weiss) !important;text-decoration:none;min-height:0} & .sg-fuss-zeile:is(:hover, :focus-visible){text-decoration:underline;text-underline-offset:.2em} & .sg-fuss-v3 .sg-fuss-karte{grid-column:4 / -1;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:0 clamp(16px, 2vw, 32px)} & .sg-fuss-v3 .sg-fuss-spalte{min-width:0} & .sg-fuss-v3 .sg-fuss-gruppe + .sg-fuss-gruppe{margin-top:clamp(26px, 2.6vw, 36px)} & .sg-fuss-v3 .sg-fuss-kopf{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--weiss);text-decoration:none;padding-bottom:12px;border-bottom:1px solid var(--grau);margin-bottom:10px} & .sg-fuss-v3 a.sg-fuss-kopf:is(:hover, :focus-visible){color:var(--weiss);border-bottom-color:var(--f-weiss, var(--weiss))} & .sg-fuss-v3 .sg-fuss-kopf.ist-still{color:var(--linie);font-weight:500} & .sg-fuss-v3 .sg-fuss-liste{list-style:none;margin:0;padding:0} & .sg-fuss-v3 .sg-fuss-liste li{margin:0} /* Keine automatische Trennung: die Namen sind oft englisch, das deutsche Woerterbuch trennte "Infrastructu-re". Umbruch nur an Leerzeichen. */ & .sg-fuss-v3 .sg-fuss-liste a{display:block;padding:5px 0;font-size:15px;line-height:1.4;color:var(--linie);text-decoration:none;transition:color .2s ease; hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;text-wrap:pretty} & .sg-fuss-v3 .sg-fuss-kopf{hyphens:manual;-webkit-hyphens:manual} & .sg-fuss-v3 .sg-fuss-liste a:is(:hover, :focus-visible){color:var(--weiss)} & .sg-fuss-v3 .sg-fuss-orte-reihe{grid-column:4 / -1;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:24px clamp(16px, 2vw, 32px)} & .sg-fuss-v3 .sg-fuss-ort{display:flex;flex-direction:column;align-items:flex-start;border-top:3px solid var(--v3-magenta);padding-top:14px;min-width:0;font-size:14px;line-height:1.55;color:var(--linie)} & .sg-fuss-v3 .sg-fuss-ort-stadt{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--weiss);margin:0 0 8px} & .sg-fuss-v3 .sg-fuss-ort-zeile{font-size:14px !important;line-height:1.5;color:var(--linie) !important;margin:0;padding:0 !important;min-height:0} & .sg-fuss-v3 .sg-fuss-unten > *{text-align:left} @media (max-width:700px){ & .sg-fuss-v3 .sg-fuss-unten{justify-content:flex-start !important;align-items:flex-start !important;flex-direction:column} } & .sg-fuss-v3 .sg-fuss-ort-weg{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0;font-size:14px;font-weight:500;color:var(--weiss);text-decoration:none} & .sg-fuss-v3 .sg-fuss-ort-weg:is(:hover, :focus-visible){color:var(--weiss);text-decoration:underline;text-underline-offset:.2em} & .sg-fuss-still{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (max-width:1100px){ & .sg-fuss-v3 .sg-fuss-marke{grid-column:1 / -1;grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px} & .sg-fuss-v3 .sg-fuss-kontakt{margin-top:0} & .sg-fuss-v3 :is(.sg-fuss-karte, .sg-fuss-orte-reihe){grid-column:1 / -1} } @media (max-width:700px){ & .sg-fuss-v3 :is(.sg-fuss-karte, .sg-fuss-orte-reihe){grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:32px} & .sg-fuss-v3 .sg-fuss-marke{flex-direction:column;align-items:flex-start} & .sg-fuss-weiter{flex-direction:column;gap:6px} & .sg-fuss-weiter ul{flex-direction:column;gap:0} & .sg-fuss-weiter a{min-height:44px;display:inline-flex;align-items:center} } @media (pointer:coarse){ & .sg-fuss-v3 .sg-fuss-liste a{min-height:44px;align-items:center;padding:0} } & .sg-fuss-v3 .sg-fuss-unten{display:flex !important;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 28px;padding:18px 0 22px !important;margin:0;border-top:1px solid var(--grau);font-size:14px;color:var(--linie) !important;background:none !important} & .sg-fuss-v3 .sg-fuss-recht{display:flex;flex-wrap:wrap;gap:8px 24px} & .sg-fuss-v3 .sg-fuss-recht :is(a, ul, li){color:var(--linie) !important;font-size:14px;text-decoration:none;list-style:none;margin:0;padding:0} & .sg-fuss-v3 .sg-fuss-recht ul{display:flex;gap:8px 24px} & .sg-fuss-v3 .sg-fuss-recht a:is(:hover, :focus-visible){color:var(--weiss) !important} & .sg-fuss-v3 .sg-extern{background-color:currentColor} } /* ═══ Teil 3: Titelbilder, Produkte, Karten, Kontaktstelle linksbuendig ═══ */ body.sg-v3.sg-v3.sg-v3.sg-v3{ /* Gesetztes Titelbild: Flaeche, Titel in 900, der i-Punkt als Schluss */ & .sg-v3-titelbild{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:200px;aspect-ratio:3 / 2; box-sizing:border-box;padding:clamp(18px, 1.8vw, 26px);color:var(--weiss);} & .sg-v3-titelbild-titel{font-size:clamp(20px, 1rem + .8vw, 27px);font-weight:900;letter-spacing:-.03em;line-height:1.02; -webkit-box-orient:vertical;hyphens:auto;text-wrap:balance;max-width:18ch} & .sg-v3-titelbild-punkt{position:absolute;right:clamp(18px, 1.8vw, 26px);top:clamp(18px, 1.8vw, 26px);width:14px;height:14px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 51'%3E%3Crect width='51' height='51' rx='3' fill='%23B50063'/%3E%3C/svg%3E") center / 100% no-repeat} & .sg-mk .sg-mk-bild:has(.sg-v3-titelbild){background:none !important;padding:0 !important;aspect-ratio:auto;height:auto !important} & .sg-mk.hat-titelbild .sg-mk-titel{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} & .sg-mk:is(:hover, :focus-visible) .sg-v3-titelbild-punkt{transform:translateX(-3px);transition:transform .45s var(--v3-aus)} & .sg-mk .sg-mk-titel{font-size:clamp(18px, 1rem + .3vw, 21px) !important;font-weight:700 !important;letter-spacing:-.018em !important;line-height:1.22} & .sg-mk .sg-mk-kat{font-size:13px !important;font-weight:700 !important;letter-spacing:.08em !important;text-transform:uppercase;} /* Produkte: jede Karte mit ihrer Oberflaeche */ & .pv-pr-karte.hat-bild{padding-top:0 !important;overflow:hidden} & .pv-pr-karte.hat-bild > .pv-pr-bild{margin:0 calc(-1 * clamp(24px, 2.6vw, 40px)) clamp(22px, 2.4vw, 32px);aspect-ratio:16 / 10;overflow:hidden;position:relative} & .pv-pr-karte.hat-bild > .pv-pr-bild img{width:100%;height:100%;object-fit:cover;display:block} & .pv-pr-karte .pv-pr-karte-name{font-size:clamp(28px, 1.2rem + 1.6vw, 44px) !important;font-weight:900 !important;letter-spacing:-.04em !important} & .pv-pr-karte .pv-pr-karte-kurz{font-weight:300 !important;color:var(--v3-anthrazit) !important;} /* Karten auf Sand: weiss, mit farbiger Oberkante im Wechsel */ & .sg-main .pv-un-karten{gap:3px !important} & .sg-main .pv-un-karten > .sg-lb{background:var(--f-weiss, var(--weiss)) !important;border:0 !important;padding:clamp(24px, 2.4vw, 36px) !important} & .sg-main .pv-un-karten > .sg-lb .sg-lb-balken{display:none !important} & .sg-main .pv-un-karten > .sg-lb .sg-lb-titel{font-size:clamp(22px, 1.1rem + .8vw, 30px) !important;font-weight:700 !important;letter-spacing:-.025em !important;line-height:1.1;margin:0} & .sg-main .pv-un-karten > .sg-lb .sg-lb-text p{font-size:17px !important;line-height:1.55 !important;color:var(--v3-anthrazit) !important} & .sg-main .pv-un-karten > .sg-lb .sg-lb-text p:first-child{font-weight:500} & .sg-main .pv-un-karten > a.sg-lb:is(:hover, :focus-visible){background:var(--f-weiss, var(--weiss)) !important;box-shadow:inset 0 0 0 1px var(--v3-linie)} & .sg-main .pv-un-karten > a.sg-lb:is(:hover, :focus-visible) .sg-lb-titel{color:var(--v3-magenta) !important} /* Kontaktstelle immer linksbuendig, wie auf allen Seiten */ & .sg-main .sg-abschluss :is(.pv-un-abschluss-mitte, .sg-abschluss-inner){text-align:left} & .sg-main .sg-abschluss .pv-un-abschluss-mitte{max-width:none;margin-inline:0} & .sg-main .sg-abschluss .pv-un-abschluss-mitte :is(.sg-cta-titel, .sg-cta-text, h2, p){margin-inline:0} & .sg-main .sg-abschluss .pv-un-abschluss-mitte .pv-un-knoepfe{justify-content:flex-start} } /* ═══ Teil 4: Bildband ohne Schleier ═══════════════════════════════════════ */ body.sg-v3.sg-v3.sg-v3.sg-v3{ /* Tagung auf der Startseite: Foto unbehandelt rechts, die Aussage auf der anstossenden violetten Flaeche links (kein Einfaerben des Motivs) */ & .sg-band.sg-bandbild{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);min-height:clamp(420px, 44vw, 640px)} & .sg-bandbild .sg-band-schleier{display:none !important} & .sg-bandbild .sg-band-bild{position:relative !important;inset:auto;grid-column:2;grid-row:1;overflow:hidden} & .sg-bandbild .sg-band-bild :is(.sg-img, img){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none !important} & .sg-bandbild .sg-band-inner{grid-column:1;grid-row:1;align-self:center;max-width:640px;width:100%;margin-left:auto;margin-right:0; box-sizing:border-box;padding:clamp(56px, 6vw, 96px) clamp(28px, 4vw, 64px) clamp(56px, 6vw, 96px) var(--v3-rand) !important} @media (max-width:900px){ & .sg-band.sg-bandbild{grid-template-columns:minmax(0, 1fr);min-height:0} & .sg-bandbild .sg-band-bild{grid-column:1;grid-row:1;aspect-ratio:16 / 10} & .sg-bandbild .sg-band-inner{grid-column:1;grid-row:2;max-width:none;margin:0;padding:clamp(40px, 8vw, 64px) var(--v3-rand) !important} } } /* ═══ Teil 5: Abbildungen im Text, direkt eingesetzt ═══════════════════════ */ body.sg-v3.sg-v3.sg-v3.sg-v3{ & svg.sg-v3-abbildung{display:block;width:100%;height:auto;font-family:var(--v3-schrift);overflow:visible} & svg.sg-v3-abbildung text{font-family:var(--v3-schrift)} & svg.sg-v3-abbildung .pv-svg-label{font-size:15px;fill:var(--anthrazit)} & svg.sg-v3-abbildung .pv-svg-label.is-leit{font-weight:700;fill:var(--anthrazit)} & svg.sg-v3-abbildung .pv-svg-wert{font-size:15px;fill:var(--grau)} & svg.sg-v3-abbildung .pv-svg-wert.is-leit{font-weight:700;fill:var(--magenta)} & svg.sg-v3-abbildung .pv-svg-zahl{font-size:19px;font-weight:900;fill:var(--weiss)} & svg.sg-v3-abbildung .pv-svg-knoten{font-size:14px;font-weight:700;fill:var(--weiss)} & svg.sg-v3-abbildung .pv-svg-knoten-marke{font-size:11px;font-weight:700;letter-spacing:.08em} & svg.sg-v3-abbildung .pv-svg-mini{font-size:12px;fill:var(--grau);letter-spacing:.02em} & svg.sg-v3-abbildung .pv-svg-minizahl{font-size:17px;font-weight:900;fill:var(--weiss)} /* Schmal: die Grafik behaelt eine lesbare Breite und laesst sich seitlich schieben, wie bei den Proofs */ @media (max-width:640px){ & .sg-abbildung:has(> svg.sg-v3-abbildung){overflow-x:auto;-webkit-overflow-scrolling:touch} & .sg-abbildung > svg.sg-v3-abbildung{min-width:560px} } } /* ═══ Teil 6: Gold ist Linie und Standortfarbe, nie Text auf hellem Grund ═══ */ body.sg-v3.sg-v3.sg-v3.sg-v3{ & :is(.sg-karten-alle, .sg-schritt-nr, .pv-st-pfad-pfeil, .sg-wis-rubrik:is(:hover, :focus-visible) .sg-wis-rubrik-titel):not(:is(.sg-band, .sg-abschluss, .sg-flaeche-violett, .pv-un-hervor, .sg-fuss) *){color:var(--v3-magenta) !important} } /* ═══ Teil 7: Der Name der Seite im Kopf ═══════════════════════════════════ Er rahmt die Aussage in Schnitt 300, etwa 0,42 der Titelgroesse, und sagt, wo man ist. Auf hellem Grund Magenta, auf Bild und Dunkel Weiss. */ body.sg-v3.sg-v3.sg-v3.sg-v3{ & .sg-seitenkopf .sg-kopf-titel .sg-kopf-name{display:block;font-size:max(20px, .42em);font-weight:300 !important;letter-spacing:-.018em; line-height:1.12;color:var(--v3-magenta);margin:0 0 .38em;hyphens:manual;text-wrap:balance} & .sg-seitenkopf .sg-kopf-titel .sg-kopf-aussage{display:block} & .sg-kopf-buehne .sg-kopf-titel .sg-kopf-name, & .sg-kopf-typ-referenz .sg-kopf-titel .sg-kopf-name{color:var(--weiss)} @media (max-width:700px){ & .sg-kopf-buehne .sg-kopf-titel .sg-kopf-name{color:var(--v3-magenta)} } & .sg-v3-still{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} } /* ═══ Teil 8: Farbe ruhiger (Rueckmeldung 24.09.2026: zu viel Violett, zu viel Magenta). Magenta nur noch als Akzent: Knoepfe, Verweise, i-Punkt, der wachsende Strich und die Kante ueber der Kontaktstelle. Violett als Flaeche hoechstens einmal je Seite, im Taktwechsel-Band. Kanten sind Gold. ═══════ */ body.sg-v3.sg-v3.sg-v3.sg-v3{ /* Expertise auf der Startseite: drei gleiche Flaechen in Anthrazit */ & .sg-exp-trio > .sg-exp-feld:is(:nth-child(1), :nth-child(2), :nth-child(3)){background:var(--f-dunkel, var(--v3-anthrazit)) !important} & .sg-exp-feld .sg-exp-text, & .sg-exp-trio > .sg-exp-feld:nth-child(2) .sg-exp-text{color:var(--linie) !important} & .sg-exp-feld .sg-exp-lead, & .sg-exp-feld .sg-exp-lead > span{background:none !important;box-shadow:none !important;padding:0 !important; color:var(--weiss) !important;font-weight:500 !important;-webkit-box-decoration-break:slice;box-decoration-break:slice} /* Startseite: Violett nur im Band zur Smart Enterprise */ & .sg-main .sg-band.sg-bandbild{background:var(--f-dunkel, var(--v3-anthrazit)) !important} & .sg-main .sg-band.sg-bandbild .sg-cta{background:var(--v3-magenta) !important;color:var(--weiss) !important} & .sg-main .sg-band.sg-bandbild :is(p:not(.sg-kennzeile, .sg-einzeile), li){color:var(--linie) !important} &.home .sg-main > .sg-sandband:not(.sg-leist){background:var(--f-weiss, var(--weiss)) !important} &.home .sg-main > .sg-st.sg-wis{background:var(--v3-sand) !important;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);box-sizing:border-box; padding-left:max(var(--v3-rand), calc((100vw - 1280px) / 2 + var(--v3-rand))) !important;padding-right:max(var(--v3-rand), calc((100vw - 1280px) / 2 + var(--v3-rand))) !important; padding-top:var(--v3-abschnitt) !important;padding-bottom:var(--v3-abschnitt) !important;margin-top:0;margin-bottom:0} /* Zahlen in Anthrazit; nur der Strich darueber traegt Magenta */ & .sg-ref-menge .sg-v3-buehne.ist-zweit{--v3-strich:var(--v3-anthrazit)} & .sg-fr-kennzahl{--v3-strich:var(--v3-anthrazit)} & .sg-v3-chip-zahl{color:var(--v3-grau) !important} & .sg-v3-chip.ist-gewaehlt .sg-v3-chip-zahl, & .sg-v3-mehr:is(:hover, :focus-visible) .sg-v3-chip-zahl{color:var(--weiss) !important} /* Namen und Marken in Anthrazit oder Grau statt Magenta und Violett */ & .sg-seitenkopf .sg-kopf-titel .sg-kopf-name{color:var(--v3-anthrazit)} & .sg-kopf-buehne .sg-kopf-titel .sg-kopf-name, & .sg-kopf-typ-referenz .sg-kopf-titel .sg-kopf-name{color:var(--weiss)} @media (max-width:700px){ & .sg-kopf-buehne .sg-kopf-titel .sg-kopf-name{color:var(--v3-anthrazit)} } & .pv-pr-karte .pv-pr-karte-name, & .pv-pr-karte .pv-pr-karte-name a{color:var(--v3-anthrazit) !important} & .pv-pr-karte .pv-pr-karte-name a:is(:hover, :focus-visible){color:var(--v3-magenta) !important} /* Titelbilder der Beitraege: Anthrazit oder Sand, ohne Kante (Gold ist kein Schmuck) */ & .sg-v3-titelbild:is(.ist-whitepaper, .ist-proof, .ist-report, .ist-presse, .ist-news){background:var(--v3-sand);color:var(--v3-anthrazit)} /* Kanten sind Gold */ & .sg-kopf-typ-referenz .sg-ref-meta div, & .sg-kopf-typ-referenz .sg-ref-meta div:is(:nth-child(2), :nth-child(3)){border-top-color:var(--v3-gold)} /* Referenz: das Ergebnis auf Sand statt Violett */ } /* ═══ Teil 9: Mittelweg bei der Farbe (24.09.2026) ═══════════════════════════ Zwischen laut (Magenta- und Violettflaechen ueberall) und ruhig (fast keine Farbe): Die Kontaktstelle ist wieder die eine Magentaflaeche der Seite, aber kompakter. Violett hoechstens einmal je Seite als Flaeche. Dazu je Seite ein Akzent in Farbe: die fuehrende Zahl. Kacheln bleiben weiss, Kanten Gold. */ body.sg-v3.sg-v3.sg-v3.sg-v3{ & .sg-main .sg-abschluss :is(h2, p, li, h3, strong, .sg-kb-titel, .sg-kb-text, .sg-cta-titel, .sg-cta-text, .sg-kb-name, .sg-kb-rolle, .sg-cta-name, .sg-cta-rolle, .sg-chips-marke, .pv-kicker, .sg-kb-tel):not(.sg-cta):not(.sg-cta *){color:var(--weiss) !important} & .sg-main .sg-abschluss .sg-cta:is(:hover, :focus-visible){background:var(--v3-anthrazit) !important;color:var(--weiss) !important} & .sg-main .sg-abschluss .sg-cta:is(:hover, :focus-visible)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 51'%3E%3Crect width='51' height='51' rx='3' fill='%23FFFFFF'/%3E%3C/svg%3E")} & .sg-main .sg-abschluss a:not(.sg-cta), & .sg-main .sg-abschluss a:not(.sg-cta):is(:hover, :focus-visible){color:var(--weiss) !important} & .sg-main .sg-abschluss a:not(.sg-cta):is(:hover, :focus-visible){text-decoration:underline;text-underline-offset:.2em} & .sg-main .sg-abschluss :is(.sg-cta-person){border:1px solid var(--f-weiss, var(--weiss)) !important;background:transparent !important} & .sg-main .sg-abschluss :is(.sg-kb-portraet, .sg-cta-portrait, .sg-cta-portrait .sg-img){background:var(--f-kontakt, var(--v3-magenta)) !important} & .sg-main .sg-abschluss ::selection{background:var(--f-weiss, var(--weiss));color:var(--v3-magenta)} /* Die fuehrende Zahl traegt Magenta: die 100 der Referenzen, die erste Kennzahl eines Projekts */ /* Violett in Massen: die mittlere Expertise-Kachel, die Titelbilder der Insights, das Ergebnis einer Referenz (die Detailseite hat sonst keine violette Flaeche) */ & .sg-exp-trio > .sg-exp-feld:nth-child(2){background:var(--f-violett-flaeche, var(--v3-violett)) !important} /* Text aller drei Expertise-Kacheln in derselben Farbe (#DDDDDD, Teil oben), auch in der violetten */ & .sg-v3-titelbild.ist-insight{background:var(--f-violett-flaeche, var(--v3-violett))} & .sg-ref-ergebnis{background:var(--f-violett-flaeche, var(--v3-violett))} & .sg-ref-ergebnis .sg-ref-titel, & .sg-ref-ergebnis-satz{color:var(--weiss) !important} } /* ═══ Teil 10: Satz und Formate nach der Pruefung aller Seiten (24.09.2026) ═══ */ body.sg-v3.sg-v3.sg-v3.sg-v3{ /* Ueberschriften: nur an den weichen Trennstellen der Wortfugen trennen (inc/v3.php); lange Woerter ohne bekannte Fuge darf der Browser trennen. Damit kann der Zeilenausgleich zurueck, ohne dass unnoetig getrennt wird. */ & .sg-main :is(h1, h2, h3, h4){hyphens:manual;-webkit-hyphens:manual !important;text-wrap:balance} & .sg-main .sg-trennbar{hyphens:auto;-webkit-hyphens:auto !important} & .sg-main :is(.sg-lb-titel, .sg-fr-titel, .sg-mk-titel, .sg-proof-titel, .sg-exp-titel, .sg-kb-titel, .sg-ds-titel, .sg-ref-leistung-name){hyphens:manual;-webkit-hyphens:manual !important;text-wrap:balance} /* Kleinste Schrift 13 px: Schrittnummern, Achsen, Marken, Formularbeschriftungen */ & .sg-main :is(.pv-ex-logik-nr, .sg-schritt-nr, .pv-sc-linie-nr, .sg-ref-marke, .sg-chips-marke, .pv-kicker, .sg-mk-datum, .sg-mk-fuss, .sg-fr-kunde, .sg-proof-marke, .sg-kar-feld-titel){font-size:13px !important} & .sg-main :is(form, .sg-kon-form, .sg-anfrage) label{font-size:13px !important} & .sg-main :is(.sg-schritt-nr, .pv-ex-logik-nr, .pv-sc-linie-nr){letter-spacing:.08em !important} /* Lesetext nie breiter als 68 Zeichen */ & .sg-main :is(.sg-report-text, .sg-beitrag .sg-prosa, .sg-bereichstext) :is(p, li){max-width:var(--v3-zeile)} } /* ═══ Teil 11: Feinschliff nach der Sichtung aller Seiten (24.09.2026) ═══ */ body.sg-v3.sg-v3.sg-v3.sg-v3{ /* Fliesstext trennt nur an Wortfugen (inc/v3.php setzt dort weiche Trennstellen), nie mitten in der Silbe. Nur ein langes Wort ohne bekannte Fuge darf der Browser selbst trennen. */ & .sg-main :is(p, li, dd, blockquote){hyphens:manual;-webkit-hyphens:manual !important} & .sg-main :is(p, li, dd, blockquote) .sg-trennbar{hyphens:auto;-webkit-hyphens:auto !important;hyphenate-limit-chars:10 5 5} /* Referenz, Ergebnis: der erste Satz als Aussage im Band, der Rest als Lesetext in derselben Achse darunter (single-sg_projekt.php) */ /* Der Ergebnis-Satz ist die grosse Aussage des Bands: groesser als die Abschnittstitel (26.09.2026) */ & .sg-ref-ergebnis-satz{font-size:clamp(30px, 1rem + 2.6vw, 54px) !important;line-height:1.1 !important;max-width:24ch} & .sg-ref-ergebnis.ist-lang .sg-ref-ergebnis-satz{font-size:clamp(26px, 1rem + 2.2vw, 48px) !important;line-height:1.14 !important;max-width:30ch} & .sg-ref-ergebnis-mehr{max-width:1280px;margin:0 auto;padding:clamp(40px, 4.4vw, 64px) var(--v3-rand) 0;box-sizing:border-box; display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2vw, 32px)} & .sg-ref-ergebnis-text{grid-column:5 / -1} & .sg-ref-ergebnis-text p{margin:0 0 1em;font-size:var(--v3-t-text);line-height:1.62;color:var(--v3-anthrazit);max-width:var(--v3-zeile);text-wrap:pretty} & .sg-ref-ergebnis-text p:last-child{margin-bottom:0} @media (max-width:800px){ & .sg-ref-ergebnis-text{grid-column:1 / -1} } /* Referenzen: Projekt im Fokus und Liste stehen im selben Rand wie die Zahlen */ & [data-v3-referenzen]{padding-left:0 !important;padding-right:0 !important} & [data-v3-referenzen] > div[style*="padding:"]{padding-left:var(--v3-rand) !important;padding-right:var(--v3-rand) !important;max-width:1280px;margin-left:auto;margin-right:auto;box-sizing:border-box} & .sg-ref-fokus-text h2{font-size:clamp(26px, 1rem + 1.4vw, 34px) !important} @media (max-width:900px){ & .sg-ref-fokus-text{padding:28px 20px 32px !important} } /* Team: ein Raster, ein Bildformat; Bild und Text stehen buendig in der Spalte */ & .sg-main .pv-un-personen, & .sg-main .pv-un-personen:has(> :nth-child(3)):not(:has(> :nth-child(4))), & .sg-main .pv-un-personen:has(> :nth-child(2)):not(:has(> :nth-child(3))){ grid-template-columns:repeat(4, minmax(0, 1fr)) !important;gap:clamp(28px, 3vw, 44px) clamp(16px, 2vw, 32px) !important} @media (max-width:1100px){ & .sg-main .pv-un-personen, & .sg-main .pv-un-personen:has(> :nth-child(3)):not(:has(> :nth-child(4))), & .sg-main .pv-un-personen:has(> :nth-child(2)):not(:has(> :nth-child(3))){grid-template-columns:repeat(3, minmax(0, 1fr)) !important} } @media (max-width:760px){ & .sg-main .pv-un-personen, & .sg-main .pv-un-personen:has(> :nth-child(3)):not(:has(> :nth-child(4))), & .sg-main .pv-un-personen:has(> :nth-child(2)):not(:has(> :nth-child(3))){grid-template-columns:repeat(2, minmax(0, 1fr)) !important} } /* Eine Reihe in der Textspalte eines Kapitels (Tagung: die Ausgaben 2023 bis 2025 unter „Seit 2023“, inc/v3.php): eine Liste unter dem Text, das Jahr vorn, der Text daneben */ & .sg-main .sg-prosa > .pv-un-personen, & .sg-main .sg-prosa > .pv-un-personen:has(> :nth-child(3)):not(:has(> :nth-child(4))){grid-template-columns:minmax(0, 1fr) !important;gap:0 !important;margin-top:clamp(32px, 3vw, 44px);max-width:none} & .sg-main .sg-prosa > .pv-un-personen .pv-un-person{display:grid;grid-template-columns:4.5em minmax(0, 1fr);column-gap:clamp(16px, 2vw, 28px);align-content:start;border-top:1px solid var(--linie);padding:20px 0 22px !important} & .sg-main .sg-prosa > .pv-un-personen .pv-un-person > *{grid-column:2} & .sg-main .sg-prosa > .pv-un-personen .pv-un-person-name{grid-column:1;grid-row:1 / span 3;margin:0} & .sg-main .sg-prosa > .pv-un-personen .pv-un-person-rolle{margin:0} @media (max-width:600px){ & .sg-main .sg-prosa > .pv-un-personen .pv-un-person{display:block} & .sg-main .sg-prosa > .pv-un-personen .pv-un-person-rolle{margin-top:6px} } & .sg-main .pv-un-person{background:transparent !important;padding:0 !important} & .sg-main .pv-un-portrait .sg-img{height:auto !important;aspect-ratio:4 / 5;padding:0 !important;overflow:hidden;background:var(--grund)} & .sg-main .pv-un-portrait .sg-img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%} & .sg-main .pv-un-portrait.ist-leer{aspect-ratio:4 / 5;background:var(--grund);display:flex;align-items:center;justify-content:center} & .sg-main .pv-un-portrait.ist-leer span{font-size:clamp(40px, 1.6rem + 2vw, 64px);font-weight:300;letter-spacing:-.02em;color:var(--v3-anthrazit)} & .sg-main .pv-un-person-name{margin:18px 0 0;font-size:clamp(17px, 1rem + .3vw, 20px) !important;font-weight:700 !important} & .sg-main .pv-un-person-rolle{margin:4px 0 0;font-size:14px !important} & .sg-main .pv-un-person p{margin:12px 0 0;max-width:none} } /* Der i-Punkt nach Ueberschriften haengt ueber ein unsichtbares Wortverbindungs- zeichen am letzten Wort: So bricht das Wort samt Punkt um, statt dass der Punkt ueber den Rand ragt. */ /* ═══ Teil 12: Seitenanfang nach der Vorlage der Geschaeftsfuehrung (24.09.2026) ═══ Eine Form fuer alle Seiten: Kennzeile ohne Strich davor (bewusst entfernt), die Aussage gross in 900 und 300, der Vorspann darunter in derselben Achse. Ein Motiv steht rechts in voller Hoehe des Kopfes, nie unter der Schrift. Die Flaeche ist der Kopfton der Farbversion (assets/farben.css). */ body.sg-v3.sg-v3.sg-v3.sg-v3{ & .sg-main > .sg-anfang{position:relative;background:var(--f-kopf, var(--v3-sand)) !important;width:100vw;max-width:100vw; margin:0 0 0 calc(50% - 50vw);padding:0 !important;border:0 !important;box-sizing:border-box} & .sg-anfang-raster{display:flex;flex-wrap:wrap;align-items:stretch;max-width:1440px;margin:0 auto} & .sg-anfang-text{flex:1 1 560px;min-width:0;box-sizing:border-box;max-width:1060px;margin-left:max(0px, 50% - 640px); padding:clamp(44px, 5.6vw, 88px) var(--v3-rand) clamp(48px, 5.6vw, 88px);display:flex;flex-direction:column;gap:clamp(22px, 2.6vw, 36px)} & .sg-anfang.hat-bild .sg-anfang-text{max-width:800px;justify-content:center} & .sg-anfang-bild{flex:1 1 380px;position:relative;min-height:clamp(420px, 44vw, 660px);overflow:hidden;background:var(--f-sand-tief, var(--grund))} & .sg-anfang-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none} /* Alle Köpfe mit Bild gleich hoch (Wunsch 29.09.2026): so hoch wie der höchste der Hauptseiten (Academy, Produkte; auf Staging gemessen von 940 bis 1920 px). Der Text steht mittig daneben. Untereinander (unter 940 px) bleibt die Höhe frei. */ @media (min-width:940px){ & .sg-anfang.hat-bild .sg-anfang-bild{min-height:clamp(792px, 430px + 30.5vw, 900px)} } /* Kennzeile: wo man ist */ & .sg-anfang-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font-size:13px;line-height:1.5;font-weight:500; letter-spacing:.18em;text-transform:uppercase;} & .sg-anfang-kicker a{text-decoration:none;box-shadow:inset 0 -1px 0 transparent;transition:color .2s ease, box-shadow .2s ease} & .sg-anfang-kicker a:is(:hover, :focus-visible){color:var(--v3-magenta);box-shadow:inset 0 -1px 0 currentColor} & .sg-anfang-teiler{letter-spacing:0} & .sg-anfang-kicker .sg-kopf-band-hier{font-weight:inherit !important;overflow:visible;text-overflow:clip} & .sg-anfang.kicker-lang .sg-anfang-kicker{text-transform:none;letter-spacing:.01em;font-size:15px;max-width:62ch} /* Die Aussage */ & .sg-main .sg-anfang h1.sg-anfang-titel{margin:0;padding:0 !important;max-width:16ch;font-size:clamp(44px, 1rem + 5.6vw, 112px) !important; line-height:.97;letter-spacing:-.045em !important;font-weight:900 !important;color:var(--v3-anthrazit) !important;text-wrap:balance} & .sg-main .sg-anfang.hat-bild h1.sg-anfang-titel{font-size:clamp(40px, 1rem + 4.5vw, 90px) !important;max-width:14ch} & .sg-main .sg-anfang.ist-langtitel h1.sg-anfang-titel{font-size:clamp(34px, 1rem + 3.4vw, 72px) !important;line-height:1.02;max-width:24ch} & .sg-main .sg-anfang-typ-arbeit h1.sg-anfang-titel{font-size:clamp(36px, 1rem + 3.8vw, 80px) !important;max-width:22ch} & .sg-main .sg-anfang h1.sg-anfang-titel::after{display:none} /* Vorspann */ & .sg-anfang-vorspann{max-width:60ch} /* Neben dem Bild füllt der Vorspann die Textspalte; sonst brechen Leitsatz und Absätze früher um als die Überschrift (Academy, 29.09.2026) */ & .sg-anfang.hat-bild .sg-anfang-vorspann{max-width:none} & .sg-main .sg-anfang-vorspann p{margin:0;font-size:var(--v3-t-lead) !important;line-height:1.5 !important;color:var(--v3-anthrazit) !important;max-width:none;text-wrap:pretty} & .sg-main .sg-anfang-vorspann p + p{margin-top:.85em;font-size:var(--v3-t-text) !important;line-height:1.6 !important} & .sg-main .sg-anfang-vorspann a{color:var(--v3-magenta);font-weight:700} & .sg-main .sg-anfang.ist-lang .sg-anfang-vorspann p{font-size:var(--v3-t-text) !important;line-height:1.6 !important} & .sg-main .sg-anfang.ist-lang .sg-anfang-vorspann p:first-child{font-size:var(--v3-t-lead) !important;line-height:1.5 !important} /* Arbeitskopf: flacher */ & .sg-anfang-typ-arbeit .sg-anfang-text{padding-top:clamp(36px, 4vw, 64px);padding-bottom:clamp(40px, 4.4vw, 68px)} /* Referenz: die Aufgabe und die Eckdaten im Kopf */ & .sg-anfang-typ-referenz .sg-ref-aufgabe{max-width:56ch} & .sg-main .sg-anfang-typ-referenz .sg-ref-aufgabe p{margin:0;font-size:var(--v3-t-lead) !important;line-height:1.5 !important;color:var(--v3-anthrazit) !important;max-width:none} & .sg-main .sg-anfang-typ-referenz .sg-ref-aufgabe p.sg-ref-marke-klein{display:flex;align-items:center;gap:14px;margin:0 0 8px;font-size:13px !important;line-height:1.3 !important;font-weight:700;letter-spacing:.16em;text-transform:uppercase} & .sg-main p.sg-ref-marke-klein::before{content:"";flex:0 0 32px;height:3px;background:var(--gold)} & .sg-anfang-typ-referenz .sg-ref-meta{display:flex;flex-wrap:wrap;gap:16px clamp(24px, 3vw, 48px);margin:0} & .sg-anfang-typ-referenz .sg-ref-meta div{min-width:110px;max-width:32ch} & .sg-anfang-typ-referenz .sg-ref-meta dt{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;} & .sg-anfang-typ-referenz .sg-ref-meta dd{margin:4px 0 0;font-size:16px;font-weight:700;line-height:1.35;color:var(--v3-anthrazit)} @media (max-width:899px){ & .sg-anfang-text{flex-basis:100%;margin-left:0;max-width:none !important} & .sg-anfang-bild{flex-basis:100%;min-height:0;aspect-ratio:4 / 3} & .sg-anfang.kicker-lang .sg-anfang-kicker{font-size:14px} } @media (max-width:520px){ & .sg-main .sg-anfang h1.sg-anfang-titel, & .sg-main .sg-anfang.hat-bild h1.sg-anfang-titel{font-size:clamp(32px, 9vw, 44px) !important} & .sg-main .sg-anfang.ist-langtitel h1.sg-anfang-titel{font-size:clamp(28px, 7.6vw, 36px) !important} & .sg-main .sg-anfang-typ-arbeit h1.sg-anfang-titel{font-size:clamp(30px, 8.4vw, 40px) !important} } } /* Kopfzeile zwischen 1024 und 1180 px: Die acht Menuepunkte liefen dort ueber den rechten Rand hinaus (Pruefung 24.09.2026). Nur der Abstand wird enger, Punkte und Reihenfolge bleiben. */ @media (min-width:1024px) and (max-width:1180px){ header[role="banner"] .sg-nav-links{gap:15px !important} } /* Wissenskarten im Raster der Rubrikseiten: Die Karte bringt aus der Reihe eine feste Breite von 340 px mit; im Raster nimmt sie die Spaltenbreite an, sonst laeuft ihr Text bei 1024 px in die Nachbarkarte (Pruefung 24.09.2026). */ body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-fr-raster > :is(.sg-mk, a, div){flex:none !important;width:auto !important;min-width:0} /* Cross-Innovation-Transfers: auch einspaltig hoechstens 68 Zeichen je Zeile */ body.sg-v3 .sg-main :is(.pv-ex-tr, .pv-ex-tr-fall, .pv-ex-transfer) p{max-width:var(--v3-zeile)} /* Keine leere Grundflaeche zwischen zwei Flaechen (Pruefung 24.09.2026): nach dem Seitenanfang schliesst ein farbiges Kapitel direkt an, gleicher Ton mit einer Haarlinie; ebenso das Wissen der Startseite und das Tagungsband. */ body.sg-v3.sg-v3.sg-v3 .sg-main > .sg-anfang + .sg-flaeche{margin-top:0} /* Ausnahme: Folgt die Bühne direkt auf den Seitenkopf (Referenzen), steht Luft dazwischen (29.09.2026) */ body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main > .sg-anfang + .sg-zb{margin-top:clamp(48px, 2rem + 3vw, 96px)} body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main > .sg-anfang + .sg-flaeche-sand{box-shadow:inset 0 1px 0 var(--f-linie)} body.sg-v3 .sg-main > .sg-st.sg-wis + .sg-band{margin-top:0} /* Tagungsblock der Smart Enterprise: auch einspaltig hoechstens 68 Zeichen */ body.sg-v3 .sg-main .sg-tagung-text p{max-width:var(--v3-zeile)} /* ═══ Teil 13: Elemente aus der Vorlage der Geschaeftsfuehrung, mit unserem Markenzeichen statt Strich (24.09.2026) ═══════════════════════════════════ Kennzeile mit i-Punkt, Leistungsbausteine als aufklappbare Liste, Leitsaetze als grosse Aussage. Die Akzentfarbe kommt aus der Farbversion (--f-akzent). */ body.sg-v3.sg-v3.sg-v3.sg-v3{ /* Kennzeile: Warmgold-Kickerstrich 32 × 3 px davor, auf allen Seiten gleich (Regelwerk Teil A, Der Strich; Wunsch 29.09.2026: überall, konsistent) */ & .sg-anfang-kicker::before{content:"";flex:0 0 32px;width:32px;height:3px;margin-right:2px;background:var(--gold)} /* Leistungsbausteine: Nummer, Titel, Plus; auf Klick der Inhalt */ & .sg-main .sg-lb-gitter.ist-bausteine{display:block !important;} & .sg-main .sg-bs-kopf{list-style:none;display:grid;grid-template-columns:clamp(52px, 5.6vw, 92px) minmax(0, 1fr) 28px;align-items:center;column-gap:clamp(14px, 2vw, 32px); padding:clamp(24px, 2.6vw, 38px) 0;cursor:pointer} & .sg-main .sg-bs-kopf::-webkit-details-marker{display:none} & .sg-main .sg-bs-nr{font-size:clamp(32px, 1rem + 2.2vw, 52px);font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--f-akzent, var(--violett));font-variant-numeric:tabular-nums} & .sg-main .sg-bs-titel{margin:0;padding:0 !important;font-size:clamp(19px, 1rem + .95vw, 30px) !important;font-weight:700 !important;line-height:1.15; letter-spacing:-.02em !important;color:var(--v3-anthrazit) !important;text-wrap:balance;transition:color .2s ease} & .sg-main .sg-bs-titel::after{display:none} & .sg-main .sg-bs-zeichen{position:relative;justify-self:end;width:18px;height:18px} & .sg-main .sg-bs-zeichen::before, & .sg-main .sg-bs-zeichen::after{content:"";position:absolute;left:0;top:50%;width:18px;height:2px;margin-top:-1px;background:var(--v3-anthrazit);transition:transform .25s var(--v3-aus), background-color .25s var(--v3-aus)} & .sg-main .sg-bs-zeichen::after{transform:rotate(90deg)} & .sg-main .sg-bs[open] .sg-bs-zeichen::after{transform:rotate(0deg) scaleX(0)} /* Geoeffnet: Nummer und Bedienelement in Magenta (Vorlage Runde 3) */ & .sg-main .sg-bs[open]:not(.ist-schliessend) .sg-bs-zeichen::before, & .sg-main .sg-bs[open]:not(.ist-schliessend) .sg-bs-zeichen::after{background:var(--v3-magenta)} @media (hover:hover){ & .sg-main .sg-bs-kopf:hover .sg-bs-titel{color:var(--v3-magenta) !important} } & .sg-main .sg-bs-kopf:focus-visible .sg-bs-titel{color:var(--v3-magenta) !important} & .sg-main .sg-bs-kopf:focus-visible{outline:2px solid var(--v3-magenta);outline-offset:4px} & .sg-main .sg-bs-inhalt{margin-left:calc(clamp(52px, 5.6vw, 92px) + clamp(14px, 2vw, 32px));padding:0 44px clamp(32px, 3.6vw, 56px) 0;max-width:64ch;animation:sg-bs-auf .32s var(--v3-aus) backwards} & .sg-main .sg-bs-inhalt p{margin:0;font-size:var(--v3-t-text) !important;line-height:1.6 !important;color:var(--v3-anthrazit) !important;max-width:none} & .sg-main .sg-bs-inhalt p + p{margin-top:.7em} & .sg-main .sg-bs-inhalt p:first-child strong{font-size:clamp(18px, 1rem + .35vw, 21px);font-weight:700} @media (max-width:600px){ & .sg-main .sg-bs-inhalt{margin-left:0;padding-right:0} } /* Leitsatz als grosse Aussage: rahmend in 300, tragend in 900 und Akzent. Deutlich groesser als die Abschnittstitel (mindestens 1,3 x h2, 26.09.2026); der tragende Teil beginnt auf eigener Zeile */ & .sg-main p.sg-these.sg-aussage, & .sg-main p.sg-aussage{margin:clamp(40px, 5vw, 72px) 0 0;max-width:none; font-size:clamp(32px, 1rem + 3.6vw, 68px) !important;line-height:1.06 !important;letter-spacing:-.035em !important;font-weight:300;color:var(--v3-anthrazit) !important;text-wrap:balance} & .sg-main .sg-aussage .sg-schnitt-leicht + .sg-schnitt-schwer::before{content:"\A";white-space:pre} /* Folgt direkt ein Zwischenruf (Zahl, Beweis im Bild, Pause), steht der Leitsatz als Lead in der Lesespalte: zwei grosse Aussagen hintereinander sind nicht erlaubt */ & .sg-main > .sg-erklaer:has(+ :is(.sg-zb, .sg-bb, .sg-pause)) > p.sg-these.sg-aussage:last-child{grid-column:6 / -1;margin-top:clamp(32px, 3vw, 48px); font-size:clamp(22px, .95rem + .75vw, 29px) !important;line-height:1.3 !important;letter-spacing:-.018em !important;text-wrap:pretty;max-width:36ch} & .sg-main > .sg-erklaer:has(+ :is(.sg-zb, .sg-bb, .sg-pause)) > p.sg-these.sg-aussage:last-child .sg-schnitt-schwer{font-weight:700 !important} & .sg-main > .sg-erklaer:has(+ :is(.sg-zb, .sg-bb, .sg-pause)) > p.sg-these.sg-aussage:last-child .sg-schnitt-schwer::before{content:none} @media (max-width:1023px){ & .sg-main > .sg-erklaer:has(+ :is(.sg-zb, .sg-bb, .sg-pause)) > p.sg-these.sg-aussage:last-child{grid-column:1 / -1} } & .sg-main .sg-aussage .sg-schnitt-leicht{font-weight:300 !important} & .sg-main .sg-aussage .sg-schnitt-schwer{font-weight:900 !important;color:var(--f-akzent, var(--violett)) !important} /* ein Leitsatz ganz am Anfang der Textspalte bleibt in der Spalte, neben dem Titel (inc/v3.php, sg_v3_erklaer_spalte) */ & .sg-main .sg-erklaer .sg-prosa > p.sg-these.sg-aussage:first-child{margin-top:0 !important} & .sg-main :is(.sg-flaeche-violett, .sg-band) .sg-aussage :is(.sg-schnitt-leicht, .sg-schnitt-schwer){color:var(--weiss) !important} /* Referenz: die Loesung als Aussage ueber die ganze Breite, der Name klein darueber */ & .sg-ref-abschnitt.ist-aussage{display:block} & .sg-ref-abschnitt.ist-aussage .sg-ref-titel{display:flex;align-items:center;gap:14px;font-size:13px !important;font-weight:700 !important;letter-spacing:.16em !important;text-transform:uppercase;line-height:1.3 !important} & .sg-ref-abschnitt.ist-aussage .sg-ref-titel::before{content:"";flex:0 0 32px;width:32px;height:3px;background:var(--gold)} & .sg-ref-abschnitt.ist-aussage p.sg-aussage{margin-top:clamp(16px, 2vw, 24px);max-width:30ch} } @keyframes sg-bs-auf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ body.sg-v3 .sg-main .sg-bs-inhalt{animation:none} body.sg-v3 .sg-main .sg-bs-zeichen::before, body.sg-v3 .sg-main .sg-bs-zeichen::after{transition:none} } /* Referenzfilter: Leistung und Branche als gleiche Dropdowns; auf dem Telefon untereinander, damit die langen Branchennamen in der Liste Platz haben */ @media (max-width:600px){ body.sg-v3 [data-v3-referenzen] .sg-kar-feld{flex:1 1 100%} } /* ═══ Teil 14: Kopf der Referenzuebersicht in der Sprache der Seitenanfaenge (24.09.2026): die Menge als Kennzahlenzeile wie auf den Detailseiten, das Projekt im Fokus mit Kennzeile, Titel, Aufgabe und Kennzahlen, das Motiv rechts; kein Kasten, keine Textwand. ═══ */ body.sg-v3.sg-v3.sg-v3.sg-v3{ /* Menge: Zahl oben, Name darunter, Oberkante in Gold (Beweis) */ & .sg-ref-menge{display:grid !important;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 clamp(24px, 3vw, 48px);margin-top:clamp(48px, 5vw, 80px) !important} & .sg-ref-menge .sg-v3-buehne{display:block !important;padding-top:clamp(18px, 2vw, 28px);--v3-strich:var(--v3-gold) !important} & .sg-ref-menge .sg-v3-buehne .sg-v3-zahl{font-size:clamp(64px, 2rem + 5vw, 120px) !important;line-height:.85} & .sg-ref-menge .sg-v3-buehne-text{padding:0;margin-top:14px} & .sg-ref-menge .sg-v3-buehne-text :is(strong, b){font-size:clamp(17px, 1rem + .3vw, 20px) !important} /* Projekt im Fokus */ & .sg-main .sg-ref-fokus2{max-width:1280px;margin:clamp(56px, 6vw, 96px) auto 0;padding:0 var(--v3-rand);box-sizing:border-box; display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2vw, 32px);align-items:stretch} & .sg-main .sg-ref-fokus2-text{grid-column:1 / span 6;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px, 2vw, 28px);align-self:center;min-width:0;padding:clamp(8px, 1vw, 16px) 0} & .sg-main .sg-ref-fokus2-kicker{margin:0;max-width:none;font-size:13px !important} & .sg-main .sg-ref-fokus2-titel{margin:0;max-width:18ch;font-size:clamp(28px, 1rem + 2.3vw, 50px) !important;font-weight:700 !important;line-height:1.04 !important;letter-spacing:-.035em !important;text-wrap:balance} & .sg-main .sg-ref-fokus2-titel a{color:var(--v3-anthrazit);text-decoration:none;transition:color .2s ease} & .sg-main .sg-ref-fokus2-titel a:is(:hover, :focus-visible){color:var(--v3-magenta)} & .sg-main .sg-ref-fokus2-aufgabe{max-width:52ch} & .sg-main .sg-ref-fokus2-aufgabe p{margin:0;font-size:var(--v3-t-lead) !important;line-height:1.5 !important;color:var(--v3-anthrazit) !important;max-width:none} & .sg-main .sg-ref-fokus2-aufgabe p.sg-ref-marke-klein{display:flex;align-items:center;gap:14px;margin:0 0 8px;font-size:13px !important;line-height:1.3 !important;font-weight:700;letter-spacing:.16em;text-transform:uppercase} & .sg-main .sg-ref-fokus2-zahlen{width:100%;grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;gap:20px clamp(16px, 2vw, 28px) !important} & .sg-main .sg-ref-fokus2-zahlen .sg-v3-zahl{font-size:clamp(36px, 1rem + 2.2vw, 56px) !important} & .sg-main .sg-ref-fokus2-zahlen .sg-v3-zahl.ist-wort{font-size:clamp(24px, 1rem + 1vw, 32px) !important} & .sg-main .sg-ref-fokus2-zahlen p{margin-top:10px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} & .sg-main .sg-ref-fokus2 .sg-cta{margin-top:4px} & .sg-main .sg-ref-fokus2-bild{grid-column:7 / -1;position:relative;display:block;min-height:clamp(380px, 40vw, 600px);overflow:hidden;background:var(--f-sand-tief, var(--grund))} & .sg-main .sg-ref-fokus2-bild :is(.sg-img, img){position:absolute;inset:0;width:100%;height:100%;padding:0;object-fit:cover;display:block} & .sg-main .sg-ref-fokus2-bild img{transition:transform .6s var(--v3-aus)} & .sg-main .sg-ref-fokus2:has(.sg-ref-fokus2-titel a:hover) .sg-ref-fokus2-bild img{transform:scale(1.02)} @media (max-width:899px){ & .sg-main .sg-ref-fokus2-text, & .sg-main .sg-ref-fokus2-bild{grid-column:1 / -1} & .sg-main .sg-ref-fokus2-bild{min-height:0;aspect-ratio:4 / 3;margin-top:28px} } @media (prefers-reduced-motion:reduce){ & .sg-main .sg-ref-fokus2-bild img{transition:none} } } /* ── Teil 15 · Zustaende (harden, 25.09.2026) ───────────────────────────── hidden gilt immer: Klassen mit eigenem display (etwa .sg-v3-mehr, .sg-kar-reset) hebelten es aus, dann stand "Weitere Projekte 0" da. Bildschirmleser-Text bleibt unsichtbar, auch in Ueberschriften mit i-Punkt. Leerzustand der Projektlisten mit Weg zurueck, Trefferzahl je Wahl in den Auswahllisten, Fehlerseite mit Suche und Wegen. */ [hidden]{display:none !important} .screen-reader-text{position:absolute;width:1px !important;height:1px !important;padding:0;margin:-1px;overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%);white-space:nowrap !important;border:0} .screen-reader-text::before,.screen-reader-text::after{content:none !important} .sg-kar-liste button{display:flex !important;align-items:baseline;justify-content:space-between;gap:18px} .sg-kar-name{min-width:0} .sg-kar-anzahl{flex:0 0 auto;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--f-grau, var(--grau))} .sg-kar-liste button.ist-gewaehlt .sg-kar-anzahl,.sg-kar-liste button:is(:hover, :focus-visible) .sg-kar-anzahl{color:inherit} .sg-kar-liste button.ist-leer{opacity:.45;cursor:default} .sg-kar-liste button.ist-leer:is(:hover, :focus-visible){background:transparent;color:var(--f-dunkel, var(--anthrazit))} .sg-kar-liste button.ist-leer:focus-visible{outline:2px solid var(--f-linie, var(--linie));outline-offset:-2px} .sg-kar-leer{padding:clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px)} .sg-kar-leer-titel{font-size:clamp(20px, 1rem + .6vw, 26px);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--f-dunkel, var(--anthrazit));text-wrap:balance} .sg-kar-leer-text{font-size:17px;line-height:1.65;color:var(--f-grau, var(--grau));margin:12px auto 0;max-width:52ch;text-wrap:pretty} .sg-kar-leer-wege{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin-top:28px} .sg-kar-leer-knopf{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border:1px solid var(--f-dunkel, var(--anthrazit));background:transparent;font:inherit;font-size:15.5px;font-weight:700;color:var(--f-dunkel, var(--anthrazit));cursor:pointer;transition:background-color .2s ease,color .2s ease} .sg-kar-leer-knopf:is(:hover, :focus-visible){background:var(--f-dunkel, var(--anthrazit));color:var(--weiss)} .sg-kar-leer-link{display:inline-flex;align-items:center;min-height:44px;font-size:15.5px;font-weight:700;color:var(--magenta);text-decoration:none} .sg-kar-leer-link:is(:hover, :focus-visible){color:var(--magenta);text-decoration:underline;text-underline-offset:4px} .sg-404{max-width:1280px;margin:0 auto;padding:clamp(48px, 6vw, 80px) var(--v3-rand, 40px) clamp(96px, 10vw, 140px);box-sizing:border-box} .sg-404 .sg-tr-form{max-width:640px} .sg-404-wege{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:clamp(32px, 4vw, 48px);padding-top:24px;border-top:1px solid var(--f-linie, var(--linie));max-width:640px} .sg-404-wege a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:700;color:var(--f-dunkel, var(--anthrazit));text-decoration:none;transition:color .2s ease} .sg-404-wege a:is(:hover, :focus-visible){color:var(--magenta)} /* ── Teil 16 · Eine Projektkarte (layout, 25.09.2026) ───────────────────── Dieselbe Karte auf Referenzen, Startseite, Leistungsseiten, Detailseite und in den Vorlagen (sg_projekt_card in inc/leistungen.php). Reihenfolge: Motiv, Beleg, Titel, Kunde, Link. Gross steht nur eine echte Zahl; ein Wort im Zahlfeld ist ein Stand und steht als Etikett in 700. Nichts wird mitten im Satz abgeschnitten. Per Subgrid liegen Beleg, Titel und Kunde einer Reihe auf gleicher Hoehe, auch wenn die Belege verschieden lang sind. */ body.sg-v3.sg-v3.sg-v3.sg-v3{ & :is(.sg-ref-raster, .sg-ref-weitere-raster, .sg-ref-vier, .sg-karten-gitter, .sg-drei:has(> .sg-fr-fall)){gap:clamp(36px, 3.4vw, 52px) clamp(20px, 2.4vw, 36px) !important;align-items:stretch} & .sg-fr-fall{display:grid !important;grid-template-columns:minmax(0, 1fr);height:auto !important;min-width:0; background:transparent !important;color:inherit;text-decoration:none} /* Ausgeblendete Karten (Filter, 24er-Grenze, Fokusprojekt) bleiben weg: das display:grid oben war sonst staerker als [hidden] und .v3-weg */ & .sg-fr-fall:is([hidden], .v3-weg){display:none !important} @supports (grid-template-rows:subgrid){ & :is(.sg-ref-raster, .sg-ref-weitere-raster, .sg-ref-vier, .sg-karten-gitter, .sg-drei) > .sg-fr-fall{grid-row:span 5;grid-template-rows:subgrid;row-gap:0} } & .sg-fr-fall > :not(.sg-fr-bild){padding-left:0 !important;padding-right:0 !important} & .sg-fr-fall .sg-fr-bild{height:auto !important;aspect-ratio:4 / 3;margin:0} /* Beleg: Kennzahl oder Stand ohne Linie darueber (26.09.2026: keine Schmucklinien ueber Kennzahlen) */ & .sg-fr-beleg{margin:clamp(18px, 1.8vw, 24px) 0 0;padding:14px 0 0;min-width:0} & .sg-fr-beleg:empty{margin:0;padding:0;border:0} & .sg-fr-kennzahl .sg-v3-zahl{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .3em; font-size:clamp(38px, 1.4rem + 1.9vw, 54px);font-weight:900;letter-spacing:-.045em;line-height:.9} & .sg-fr-kennzahl .sg-v3-zahl-rest{font-weight:300;font-size:.5em;letter-spacing:-.02em} & .sg-fr-kennzahl-text{display:block !important;-webkit-line-clamp:none;overflow:visible; font-size:15.5px;line-height:1.45;color:var(--v3-anthrazit);margin-top:10px;text-wrap:pretty} & .sg-fr-status-wort{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--v3-anthrazit)} & .sg-fr-status-wort::first-letter{text-transform:uppercase} /* Titel fuehrt nach dem Beleg, der Kunde ordnet ein, der Link schliesst */ & .sg-fr-fall .sg-fr-titel{margin:0;padding-top:clamp(18px, 1.6vw, 22px) !important;max-width:none; font-size:clamp(19px, 1rem + .35vw, 22px) !important;font-weight:700 !important;letter-spacing:-.02em !important;line-height:1.22;color:var(--v3-anthrazit)} & .sg-fr-fall:is(:hover, :focus-visible) .sg-fr-titel{color:var(--v3-magenta)} & .sg-fr-fall .sg-fr-kunde{margin:0;padding-top:10px !important;font-weight:700 !important;letter-spacing:.08em !important; line-height:1.35;text-transform:uppercase;} & .sg-fr-fall .sg-fr-kunde:empty{padding-top:0 !important} & .sg-fr-fall .sg-fr-link{align-self:end;justify-self:start;margin:0;padding-top:14px !important;padding-bottom:4px !important} } /* ── Teil 17 · Eine Hauptaktion (distill, 25.09.2026) ───────────────────── Auf der Startseite tragen nur der Hero und das Kontaktband einen Knopf ("Gespraech vereinbaren"). Die Wege in die Rubriken sind Verweise in Magenta mit dem i-Punkt, der beim Zeigen nachrueckt, wie "Leistungen ansehen" im Hero. Auf dunklen Baendern stehen sie in Weiss. */ body.sg-v3.sg-v3.sg-v3.sg-v3{ /* Verweis mit Pfeil (Regelwerk Teil C, Nachtrag 01; 29.09.2026): 15 px / 700 in Anthrazit, Magenta beim Überfahren */ & .sg-main .sg-verweis{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:700;letter-spacing:-.005em; color:var(--v3-anthrazit);text-decoration:none;transition:color .2s ease} & .sg-main .sg-verweis:is(:hover, :focus-visible){color:var(--v3-magenta)} & .sg-main :is(.sg-band, .sg-abschluss, .sg-flaeche-violett) .sg-verweis{color:var(--weiss)} & .sg-main :is(.sg-band, .sg-abschluss, .sg-flaeche-violett) .sg-verweis:is(:hover, :focus-visible){color:var(--weiss)} & .sg-main .sg-st-knopfe:has(> .sg-verweis:only-child){margin-top:clamp(20px, 2vw, 28px)} } /* ── Teil 18 · Telefon und Touch (adapt, 25.09.2026) ────────────────────── Gemessen mit Touch-Emulation bei 390 px: was kleiner als 44 px war, bekommt eine 44er Tippflaeche. Nur bei grobem Zeiger; mit Maus bleibt alles gleich. Links im Fliesstext sind ausgenommen. Inline-Links wachsen ueber Innenabstand nach oben und unten, das verschiebt keine Zeile. */ @media (pointer:coarse){ body.sg-v3.sg-v3.sg-v3.sg-v3{ & :is(.sg-main, .sg-fuss) :is(.sg-mehr, .sg-ref-alle, .sg-fr-alle, .sg-kb-tel, .sg-verweis, .pv-pr-karte-name a){min-height:44px;display:inline-flex;align-items:center} & .sg-fuss :is(.sg-fuss-kopf, .sg-fuss-zeile){min-height:44px;display:flex;align-items:center} & .sg-main .page-numbers{min-width:44px;min-height:44px;display:inline-flex !important;align-items:center;justify-content:center;padding:0 10px !important} & .sg-main .sg-anfang-kicker a{padding-block:13px;margin-block:-13px} & .sg-main :is(.sg-beitrag-angaben a, .sg-beitrag-fuss a, a[href$="/wissen/"]:not([class])){padding-block:13px} & .sg-main [data-med-arrow]{width:44px !important;height:44px !important} & .sg-main form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input:not([type])){min-height:44px} & .sg-main #sg_sum{height:44px !important} & .sg-skip{min-height:44px;display:inline-flex;align-items:center} } } /* Mobilmenue: das ganze Menue scrollt, Kopf und Kontaktfuss bleiben stehen. Vorher standen Metalinks, Suche und Fuss ausserhalb des Scrollbereichs, fuer die Liste blieben 486 px. Karriere, Kontakt und Suche stehen buendig mit den Menuepunkten statt am Bildschirmrand. */ .sg-mobile:not([hidden]){overflow-y:auto;overscroll-behavior:contain} .sg-mobile .sg-mobile-kopf{position:sticky;top:0;z-index:2;background:var(--f-weiss, var(--weiss))} .sg-mobile .sg-mobile-liste{flex:none;overflow:visible} .sg-mobile .sg-mobile-meta{padding:14px 20px 0;gap:0 28px} .sg-mobile .sg-mobile-meta a{display:inline-flex;align-items:center;min-height:44px;padding:0} .sg-mobile .sg-mobile-suche{margin:10px 20px 24px} .sg-mobile .sg-mobile-suche input{font-size:16px} .sg-mobile .sg-mobile-fuss{position:sticky;bottom:0;z-index:2;margin-top:auto;padding:14px 20px max(14px, env(safe-area-inset-bottom));gap:4px} .sg-mobile .sg-mobile-kontakt{flex-direction:row;flex-wrap:wrap;gap:0 24px} .sg-mobile .sg-mobile-kontakt a{display:inline-flex;align-items:center;min-height:44px} /* ── Teil 19 · Ruhiger (quieter, 25.09.2026) ─────────────────────────────── Der i-Punkt hat eine Bedeutung weniger: auf den Wissen-Karten erscheint er erst beim Zeigen, wie bei allen Verweisen. Wissen ohne Karussellwand: je Rubrik drei Karten im Raster und der Weg zu allen; die Rubrikknoepfe filtern wirklich (page-wissen.php, v3.js). Titel im Titelbild werden nicht mehr abgeschnitten, lange stehen kleiner. */ body.sg-v3.sg-v3.sg-v3.sg-v3{ & .sg-wis-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(40px, 4.4vw, 64px)} & .sg-wis-filter .sg-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border:1px solid var(--f-linie, var(--linie));background:var(--f-weiss, var(--weiss)); color:var(--v3-anthrazit);font-size:14.5px;font-weight:500;text-decoration:none;transition:border-color .2s ease, background-color .2s ease, color .2s ease} & .sg-wis-filter .sg-chip:is(:hover, :focus-visible){border-color:var(--v3-anthrazit)} & .sg-wis-filter .sg-chip[aria-current="true"]{background:var(--v3-anthrazit);border-color:var(--v3-anthrazit);color:var(--weiss)} & .sg-wis-gruppen{display:flex;flex-direction:column;gap:clamp(64px, 6.4vw, 96px)} & .sg-wis-gruppe-kopf{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin:0 0 clamp(22px, 2.2vw, 30px)} & .sg-wis-gruppe-kopf h3{margin:0;font-size:clamp(24px, 1rem + .9vw, 30px) !important;font-weight:700 !important;letter-spacing:-.028em !important;line-height:1.1;color:var(--v3-anthrazit)} & .sg-wis-zahl{margin-left:.45em;font-weight:500;color:var(--v3-grau);font-variant-numeric:tabular-nums} & .sg-wis-raster{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(36px, 3.4vw, 52px) clamp(20px, 2.4vw, 36px)} & .sg-wis-raster > .sg-mk{width:auto !important;min-width:0} @media (max-width:1023px){ & .sg-wis-raster{grid-template-columns:repeat(2, minmax(0, 1fr))} } @media (max-width:640px){ & .sg-wis-raster{grid-template-columns:minmax(0, 1fr)} } & .sg-wis[data-rubrik="news"] [data-med-grid] > .sg-mk:not([data-kat="news"]), & .sg-wis[data-rubrik="insight"] [data-med-grid] > .sg-mk:not([data-kat="insight"]), & .sg-wis[data-rubrik="report"] [data-med-grid] > .sg-mk:not([data-kat="report"]), & .sg-wis[data-rubrik="whitepaper"] [data-med-grid] > .sg-mk:not([data-kat="whitepaper"]), & .sg-wis[data-rubrik="proof"] [data-med-grid] > .sg-mk:not([data-kat="proof"]), & .sg-wis[data-rubrik="pressemitteilung"] [data-med-grid] > .sg-mk:not([data-kat="pressemitteilung"]), & .sg-wis[data-rubrik="presse"] [data-med-grid] > .sg-mk:not([data-kat="presse"]), & .sg-wis[data-rubrik="veranstaltung"] [data-med-grid] > .sg-mk:not([data-kat="veranstaltung"]), & .sg-wis[data-rubrik="beitrag"] [data-med-grid] > .sg-mk:not([data-kat="beitrag"]){display:none !important} & .sg-wis .sg-v3-mehr-zeile:has(> [hidden]){display:none} /* i-Punkt im Titelbild erst beim Zeigen */ & .sg-v3-titelbild-punkt{opacity:0;transform:translateX(-6px);transition:opacity .3s var(--v3-aus), transform .45s var(--v3-aus)} & .sg-mk:is(:hover, :focus-visible) .sg-v3-titelbild-punkt{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ & .sg-v3-titelbild-punkt{transition:none;transform:none} } /* Titel ganz: das Titelbild waechst, wenn ein Titel mehr Platz braucht */ & .sg-v3-titelbild{overflow:visible} & .sg-v3-titelbild-titel{display:block;-webkit-line-clamp:none;overflow:visible} & .sg-v3-titelbild.ist-lang .sg-v3-titelbild-titel{font-size:clamp(18px, .95rem + .55vw, 23px);max-width:20ch} & .sg-v3-titelbild.ist-sehr-lang .sg-v3-titelbild-titel{font-size:clamp(16px, .9rem + .4vw, 20px);line-height:1.08;max-width:24ch} } /* ── Teil 20 · Navigation und Knoepfe ohne i-Punkt (25.09.2026) ──────────── Wunsch: den Punkt aus der Navigation nehmen und durch die Linie von zajno.com ersetzen, an den Knoepfen entfaellt er, an den Ueberschriften bleibt er. Die Linie unter einem Menuepunkt wischt beim Zeigen von links herein und beim Verlassen nach rechts hinaus (800 ms, weich auslaufend); ::before bringt sie, ::after nimmt sie mit. Aktive Seite und offenes Mega-Menue behalten sie. */ body.sg-neu :is(.sg-navtop, .sg-nav-links .sg-navlink){position:relative} body.sg-neu :is(.sg-navtop, .sg-nav-links .sg-navlink)::before, body.sg-neu :is(.sg-navtop, .sg-nav-links .sg-navlink)::after{content:"";position:absolute;left:0;right:0;bottom:-8px;display:block;width:auto;height:2px;flex:none; background:var(--sg-magenta, var(--magenta));transform:none;pointer-events:none} body.sg-neu.sg-neu.sg-neu :is(.sg-navtop, .sg-nav-links .sg-navlink)::before{clip-path:inset(0 100% 0 0);transition:none} body.sg-neu.sg-neu.sg-neu :is(.sg-navtop, .sg-nav-links .sg-navlink)::after{clip-path:inset(0 0 0 100%);opacity:1;transition:clip-path .8s cubic-bezier(.19, 1, .22, 1)} body.sg-neu.sg-neu.sg-neu :is(.sg-navtop, .sg-nav-links .sg-navlink):is(:hover, :focus-visible, .is-active, [aria-expanded="true"], [aria-current="page"])::before{clip-path:inset(0);transition:clip-path .8s cubic-bezier(.19, 1, .22, 1)} body.sg-neu.sg-neu.sg-neu :is(.sg-navtop, .sg-nav-links .sg-navlink):is(:hover, :focus-visible, .is-active, [aria-expanded="true"], [aria-current="page"])::after{clip-path:inset(0);opacity:0;transition:none} @media (prefers-reduced-motion:reduce){ body.sg-neu.sg-neu.sg-neu :is(.sg-navtop, .sg-nav-links .sg-navlink)::before, body.sg-neu.sg-neu.sg-neu :is(.sg-navtop, .sg-nav-links .sg-navlink)::after{transition:none !important} } /* Im Mega-Menue: aktueller Punkt ohne runden Punkt, Wege ohne i-Punkt */ .sg-mega .sg-mega-card.ist-hier > div:first-child::after{content:none} .sg-mega .sg-weiter-punkt{display:none} /* Knoepfe ohne den Punkt, der beim Zeigen einrueckt; das Zeichen fuer externe Ziele (target=_blank) bleibt */ body.sg-neu .sg-cta:not([target="_blank"])::after{content:none} /* ── Teil 21 · Mega-Menue ruhig, Plus fuer die zweite Ebene (25.09.2026) ──── Zweite Ebene: ein feines Plus neben dem Menuepunkt, wie im Mobilmenue; ist das Menue offen, legt sich der senkrechte Strich um und es wird ein Minus. Das Mega-Menue: links die Unterpunkte als gleich grosse Kacheln, immer drei Spalten, jede Reihe gleich hoch; links davon die Uebersicht des Bereichs mit kurzem Text als feste Tafel, darunter "Passt dazu". */ body.sg-neu .sg-navtop{gap:7px;align-items:center} body.sg-neu .sg-navtop .sg-navplus{display:inline-block;flex:0 0 9px;width:9px;height:9px;color:var(--f-grau, var(--grau));transition:color .25s ease} body.sg-neu .sg-navtop .sg-navplus-senk{transform-box:view-box;transform-origin:5px 5px;transition:transform .45s cubic-bezier(.19, 1, .22, 1)} body.sg-neu .sg-navtop:is(:hover, :focus-visible, [aria-expanded="true"]) .sg-navplus{color:var(--sg-magenta, var(--magenta))} body.sg-neu .sg-navtop[aria-expanded="true"] .sg-navplus-senk{transform:rotate(90deg)} /* Die Linie steht nur unter dem Wort, nicht unter dem Plus */ body.sg-neu.sg-neu .sg-navtop::before, body.sg-neu.sg-neu .sg-navtop::after{right:16px} @media (prefers-reduced-motion:reduce){ body.sg-neu .sg-navtop :is(.sg-navplus, .sg-navplus-senk){transition:none} } .sg-mega{white-space:normal} .sg-mega .sg-mega-inner{display:grid;grid-template-columns:minmax(260px, .42fr) minmax(0, 1fr);gap:clamp(28px, 2.6vw, 48px);align-items:stretch; padding:34px 40px 38px;box-sizing:border-box} .sg-mega .sg-mega-teil{min-width:0} .sg-mega .sg-mega-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));grid-auto-rows:1fr;gap:2px} .sg-mega .sg-mega-card{display:flex;flex-direction:column;gap:8px;min-height:128px;padding:20px 22px 22px;box-sizing:border-box;background:var(--f-sand, var(--grund))} .sg-mega .sg-mega-card:is(:hover, :focus-visible){background:var(--f-sand-tief, var(--grund))} .sg-mega .sg-mega-card-titel{font-size:17px;font-weight:700;letter-spacing:-.018em;line-height:1.25;color:var(--sg-tinte, var(--anthrazit));transition:color .2s ease} .sg-mega .sg-mega-card:is(:hover, :focus-visible) .sg-mega-card-titel, .sg-mega .sg-mega-card.ist-hier .sg-mega-card-titel{color:var(--sg-magenta, var(--magenta))} .sg-mega .sg-mega-card-text{font-size:14px;line-height:1.5;color:var(--f-grau, var(--grau));text-wrap:pretty} .sg-mega .sg-mega-seite{display:flex;flex-direction:column;gap:2px;min-width:0} .sg-mega .sg-mega-uebersicht{flex:1 1 auto;display:flex;flex-direction:column;gap:12px;padding:24px 26px 24px;box-sizing:border-box; background:var(--f-violett-flaeche, var(--violett));color:var(--weiss)} .sg-mega .sg-mega-uebersicht-titel{font-size:22px;font-weight:700;letter-spacing:-.022em;line-height:1.15;color:var(--weiss)} .sg-mega .sg-mega-uebersicht-text{font-size:14.5px;line-height:1.55;color:var(--f-neben-dunkel, var(--linie));text-wrap:pretty} .sg-mega .sg-mega-uebersicht-weg{position:relative;align-self:flex-start;margin-top:auto;padding-top:12px;font-size:14.5px;font-weight:700;color:var(--weiss)} /* Dieselbe Linie wie in der Navigation, beim Zeigen auf die Tafel */ .sg-mega .sg-mega-uebersicht-weg::before, .sg-mega .sg-mega-uebersicht-weg::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--weiss);pointer-events:none} .sg-mega .sg-mega-uebersicht-weg::before{clip-path:inset(0 100% 0 0)} .sg-mega .sg-mega-uebersicht-weg::after{clip-path:inset(0 0 0 100%);transition:clip-path .8s cubic-bezier(.19, 1, .22, 1)} .sg-mega .sg-mega-uebersicht:is(:hover, :focus-visible) .sg-mega-uebersicht-weg::before{clip-path:inset(0);transition:clip-path .8s cubic-bezier(.19, 1, .22, 1)} .sg-mega .sg-mega-uebersicht:is(:hover, :focus-visible) .sg-mega-uebersicht-weg::after{clip-path:inset(0);opacity:0;transition:none} @media (prefers-reduced-motion:reduce){ .sg-mega .sg-mega-uebersicht-weg::before, .sg-mega .sg-mega-uebersicht-weg::after{transition:none !important} } .sg-mega .sg-mega-dazu{display:flex;flex-direction:column;gap:6px;padding:18px 22px 20px;background:var(--f-sand, var(--grund))} .sg-mega .sg-mega-dazu:is(:hover, :focus-visible){background:var(--f-sand-tief, var(--grund))} .sg-mega .sg-mega-dazu-marke{font-size:13px;font-weight:700;color:var(--f-grau, var(--grau))} .sg-mega .sg-mega-dazu-titel{font-size:17px;font-weight:700;letter-spacing:-.018em;line-height:1.25;color:var(--sg-tinte, var(--anthrazit))} .sg-mega .sg-mega-dazu-text{font-size:14px;line-height:1.5;color:var(--f-grau, var(--grau))} /* ── Teil 22 · i-Punkt nur an Ueberschriften (25.09.2026) ────────────────── Wunsch: kein Punkt an Links, Karten, Knoepfen und in der Kennzeile; er bleibt am Ende der Ueberschriften (einfliegend) und der Leitsaetze. */ .sg-weiter-punkt{display:none !important} body.sg-neu :is(.sg-st-zweit, .pv-un-knopf-zweit)::after{content:none} body.sg-neu .sg-exp-titel::after{content:none} body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-v3-titelbild-punkt{display:none !important} /* ── Teil 23 · Eine Linie fuer Textlinks (25.09.2026, eingeschraenkt 29.09.2026) ── Wie in der Hauptnavigation (Teil 20): beim Zeigen wischt eine 2-px-Linie in der Schriftfarbe von links unter das Wort, beim Verlassen nach rechts hinaus. Seit 29.09.2026 nur noch fuer die Spaltenlisten im Fuss (Wunsch: die Linie bleibt Navigation und Fuss). Eigenstaendige Verweise im Inhalt tragen den Pfeil (Teil Startseite, Verweis mit Pfeil; inc/v3.php, sg_v3_pfeile). Links im Fliesstext behalten ihre Unterstreichung, Knoepfe keine. */ body.sg-neu .sg-fuss .sg-fuss-liste a{position:relative;display:inline-block;--sg-lu-top:calc(100% - 5px)} body.sg-neu .sg-fuss .sg-fuss-liste a::before, body.sg-neu .sg-fuss .sg-fuss-liste a::after{content:"";position:absolute;left:0;right:0;top:var(--sg-lu-top);height:2px;background:currentColor;pointer-events:none} body.sg-neu .sg-fuss .sg-fuss-liste a::before{clip-path:inset(0 100% 0 0)} body.sg-neu .sg-fuss .sg-fuss-liste a::after{clip-path:inset(0 0 0 100%);transition:clip-path .8s cubic-bezier(.19, 1, .22, 1)} body.sg-neu .sg-fuss .sg-fuss-liste a:is(:hover, :focus-visible)::before{clip-path:inset(0);transition:clip-path .8s cubic-bezier(.19, 1, .22, 1)} body.sg-neu .sg-fuss .sg-fuss-liste a:is(:hover, :focus-visible)::after{clip-path:inset(0);opacity:0;transition:none} @media (prefers-reduced-motion:reduce){ body.sg-neu .sg-fuss .sg-fuss-liste a::before, body.sg-neu .sg-fuss .sg-fuss-liste a::after{transition:none !important} } /* Fusslinks nur so breit wie ihr Wort, damit die Linie unter dem Wort liegt; keine zweite Unterstreichung neben der Linie */ body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-fuss-v3 .sg-fuss-liste a{display:inline-block} body.sg-neu :is(.sg-main a.sg-verweis, .sg-main a.sg-mehr, .sg-main a.sg-ref-alle, .sg-main a.sg-fr-alle, .sg-main a.sg-kar-leer-link, .sg-404-wege a, .sg-fuss .sg-fuss-liste a, .sg-main .sg-anfang-kicker a, .sg-main a.sg-kb-tel):is(:hover, :focus-visible){text-decoration:none !important} /* Fusslinks mit Maus: die Linie liegt unter jeder Zeile des Worts (auch bei zweizeiligen Namen), gezeichnet als Hintergrund statt als Pseudo-Element. Mit Touch bleiben die Links Bloecke mit 44er Tippflaeche. */ @media (hover:hover) and (pointer:fine){ body.sg-v3 .sg-fuss-v3 .sg-fuss-liste li{padding:5px 0} body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-fuss-v3 .sg-fuss-liste a{display:inline;padding:0 0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone; background:linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 2px;transition:color .2s ease, background-size .8s cubic-bezier(.19, 1, .22, 1)} body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-fuss-v3 .sg-fuss-liste a:is(:hover, :focus-visible){background-position:0 100%;background-size:100% 2px} body.sg-neu .sg-fuss .sg-fuss-liste a::before, body.sg-neu .sg-fuss .sg-fuss-liste a::after{content:none} } @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){ body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-fuss-v3 .sg-fuss-liste a{transition:none} } /* ═══ Teil 24: Zahl als Buehne (Regelwerk, 25.09.2026) ══════════════════════ Einmal je Seite, auf #2C2C2B, die Zahl in Weiss 900, 0,80, -0,06 em. Sie steht mit der Grundlinie auf der Unterkante der Flaeche und steigt beim ersten Sichtkontakt aus ihr heraus. Rechts der Satz unter einer Goldkante (Vorlage Runde 3), darunter der Weg weiter. Die Fuge durch die Ziffern ist entfallen: sie las sich wie eine durchgestrichene Zahl (Rueckmeldung 25.09.2026). */ body.sg-v3 .sg-zb{--zb-f:clamp(112px, 4.2rem + 13.4vw, 300px);position:relative;width:100vw;max-width:none;margin:0 calc(50% - 50vw); background:var(--anthrazit);color:var(--weiss);overflow:hidden;box-sizing:border-box} body.sg-v3 .sg-zb-inner{max-width:1280px;margin:0 auto;padding:clamp(56px, 2rem + 4.4vw, 112px) var(--v3-rand) 0;box-sizing:border-box; display:grid;grid-template-columns:auto minmax(0, 1fr);column-gap:clamp(28px, 1rem + 4vw, 96px);align-items:end} body.sg-v3 .sg-zb-zahl{margin:0 0 calc(var(--zb-f) * -.062);padding:0;font-size:var(--zb-f) !important;font-weight:900;line-height:.8 !important; letter-spacing:-.06em;color:var(--weiss) !important;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums} body.sg-v3 .sg-zb .sg-v3-zahl{display:inline-flex;align-items:baseline;font-size:1em;line-height:.8;color:var(--weiss) !important} body.sg-v3 .sg-zb .sg-v3-zahl-rest{font-weight:300;letter-spacing:-.03em} body.sg-v3 .sg-zb .sg-v3-zahl-rest.ist-wort-vor{font-size:.19em;letter-spacing:0;margin-right:.3em;align-self:flex-start;line-height:1;padding-top:.12em;color:var(--linie)} /* Der Satz steht unter einer Goldkante, beide Spalten stehen auf der Unterkante */ body.sg-v3 .sg-zb-text{position:relative;align-self:end;display:block;min-width:0;max-width:34rem;padding:clamp(20px, 2vw, 30px) 0 clamp(20px, 2.4vw, 40px)} body.sg-v3 .sg-zb-satz{margin:0;font-size:clamp(22px, .9rem + 1.15vw, 34px) !important;font-weight:700;line-height:1.12 !important; letter-spacing:-.022em;color:var(--weiss) !important;text-wrap:balance;} body.sg-v3 .sg-zb-unten{padding-top:clamp(14px, 1.2vw, 22px);display:flex;flex-direction:column;gap:10px} body.sg-v3 .sg-zb-zweit{margin:0;font-size:clamp(16px, .9rem + .3vw, 19px) !important;line-height:1.35 !important;color:var(--linie) !important} body.sg-v3 .sg-zb-zweit strong{color:var(--weiss);} body.sg-v3 .sg-zb-weg{margin:0} body.sg-v3 .sg-zb .sg-verweis{color:var(--weiss) !important;} body.sg-v3 .sg-zb .sg-verweis:is(:hover, :focus-visible){color:var(--weiss) !important} body.sg-v3 .sg-zb .sg-verweis:focus-visible{outline:2px solid var(--weiss);outline-offset:4px} /* Telefon und schmale Tablets: Zahl oben, Satz und Weg darunter */ @media (max-width:760px){ body.sg-v3 .sg-zb{--zb-f:clamp(96px, 31vw, 176px)} /* lange Zahlen (über 1.200) passen bei 390 px in die Spalte */ body.sg-v3 .sg-zb-inner{grid-template-columns:minmax(0, 1fr);padding-bottom:48px;row-gap:22px} body.sg-v3 .sg-zb-zahl{margin-bottom:0} body.sg-v3 .sg-zb-text{max-width:none;padding-bottom:0} body.sg-v3 .sg-zb-unten{padding-top:16px} } body.sg-v3 .sg-zb-marke{display:block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--weiss)} body.sg-v3 .sg-zb.ist-lang .sg-zb-satz{font-size:clamp(20px, .85rem + .8vw, 27px) !important;line-height:1.16 !important} body.sg-v3 .sg-zb.ist-lang .sg-zb-text{max-width:38rem} body.sg-v3 .sg-main > :is(.sg-sandband, .sg-st) + .sg-zb{margin-top:0} /* ═══ Teil 25: Highlights (25.09.2026) ══════════════════════════════════════ Fuenf Formen, jede mit eigener Bewegung (inc/v3.php, sg_hp_*). Bewegung nach dem Regelwerk: Erscheinen 480 ms und 16 px, Nachfolger 60 ms versetzt; Zahl 1.400 ms; Flaeche 640 ms per Maske. Seit 29.09.2026 ohne Einblenden beim Scrollen (Regelwerk Teil C, Nachtrag 09): alle Highlights stehen sofort da. */ body.sg-v3 .sg-main > :is(.sg-pause, .sg-bb){position:relative;box-sizing:border-box} /* Pause: ein Satz in viel Grund */ body.sg-v3 .sg-pause{width:100%;padding:clamp(88px, 3rem + 7vw, 184px) 0} body.sg-v3 .sg-pause-inner{max-width:1280px;margin:0 auto;padding:0 var(--v3-rand);box-sizing:border-box} body.sg-v3 .sg-pause-satz{margin:0;max-width:21ch;font-size:clamp(44px, 1.4rem + 4.6vw, 88px) !important;line-height:1 !important;letter-spacing:-.035em;color:var(--anthrazit) !important;text-wrap:balance;} /* Startseite: eine Stufe kleiner als bisher, mit weniger Luft (Rückmeldung Oliver, 29.09.2026: wirkte zu groß) */ body.sg-v3 .sg-pause-start .sg-pause-satz{max-width:none;font-size:clamp(48px, 1.4rem + 5.6vw, 104px) !important} body.sg-v3 .sg-pause.sg-pause-start{padding:clamp(72px, 2.4rem + 5vw, 136px) 0} /* Darunter folgen die Gründe mit kleinem oberen Abstand: sonst addieren sich beide Abstände. Unten so viel Luft wie über der Kennzeile */ body.sg-v3.sg-v3 .sg-main > .sg-pause.sg-pause-start + .sg-st{padding-top:clamp(16px, 1.5vw, 24px)} body.sg-v3 .sg-pause-leicht{font-weight:300} body.sg-v3 .sg-pause-schwer{font-weight:900;color:var(--violett)} body.sg-v3 .sg-pause-wort{display:inline-block;transition:opacity .48s cubic-bezier(.2, 0, 0, 1), transform .48s cubic-bezier(.2, 0, 0, 1);transition-delay:calc(var(--i) * 60ms)} body.sg-v3 .sg-pause-schwer .sg-pause-wort{transition-delay:calc(var(--i) * 60ms + 160ms)} body.sg-v3 .sg-pause-weg{margin:clamp(24px, 1rem + 1.4vw, 40px) 0 0 !important} /* Beweis im Bild: das Foto oeffnet sich per Maske, daneben die Kennzahl */ body.sg-v3 .sg-bb{width:100%;padding:var(--v3-abschnitt) 0} body.sg-v3 .sg-bb-inner{max-width:1280px;margin:0 auto;padding:0 var(--v3-rand);box-sizing:border-box;display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);align-items:stretch} body.sg-v3 .sg-bb-bild{position:relative;display:block;min-height:clamp(320px, 30vw, 480px);overflow:hidden;background:var(--anthrazit)} body.sg-v3 .sg-bb-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0);transform:scale(1); transition:clip-path .64s cubic-bezier(.2, 0, 0, 1), transform 1.4s cubic-bezier(.2, 0, 0, 1)} body.sg-v3 .sg-bb-text{background:var(--weiss);padding:clamp(28px, 1rem + 3vw, 64px);display:flex;flex-direction:column;justify-content:flex-end} body.sg-v3.sg-v3.sg-v3 .sg-bb .sg-bb-reihe{display:block} body.sg-v3.sg-v3.sg-v3 .sg-bb .sg-bb-reihe > div{padding-top:clamp(20px, 2vw, 32px)} body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-bb .sg-v3-zahl{font-size:clamp(72px, 2.4rem + 5.4vw, 152px) !important;line-height:.82;} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-bb .sg-bb-satz{margin:18px 0 0;max-width:30ch;font-size:clamp(18px, 1rem + .45vw, 23px) !important;font-weight:700;line-height:1.3 !important;color:var(--anthrazit) !important;text-wrap:pretty} /* Zahl hell: auf Weiss, in #2C2C2B, sie haengt an der Goldkante und wird von oben freigegeben; keine Fuge, die Zahl steht frei */ body.sg-v3 .sg-zb.ist-hell{--zb-f:clamp(96px, 3rem + 8.6vw, 220px);background:var(--weiss);color:var(--anthrazit)} body.sg-v3 .sg-zb.ist-hell .sg-zb-inner{padding-bottom:clamp(64px, 2rem + 5vw, 120px);align-items:start} body.sg-v3 .sg-zb.ist-hell .sg-zb-zahl{position:relative;margin:0;padding-top:clamp(22px, 2vw, 36px);color:var(--anthrazit) !important} body.sg-v3 .sg-zb.ist-hell .sg-v3-zahl{color:var(--anthrazit) !important;clip-path:inset(0);transition:clip-path .64s cubic-bezier(.2, 0, 0, 1) .3s} body.sg-v3 .sg-zb.ist-hell .sg-v3-zahl-rest{color:var(--grau) !important} body.sg-v3 .sg-zb.ist-hell .sg-zb-text{align-self:start;display:block;padding-top:clamp(22px, 2vw, 36px)} body.sg-v3 .sg-zb.ist-hell .sg-zb-satz{color:var(--anthrazit) !important;padding:0} body.sg-v3 .sg-zb.ist-hell .sg-zb-unten{padding-top:clamp(16px, 1.4vw, 24px)} body.sg-v3 .sg-zb.ist-hell .sg-zb-zweit{color:var(--grau) !important} body.sg-v3 .sg-zb.ist-hell .sg-zb-zweit strong{color:var(--anthrazit)} body.sg-v3 .sg-zb.ist-hell .sg-zb-marke{color:var(--violett)} body.sg-v3.sg-v3.sg-v3 .sg-zb.ist-hell .sg-verweis{color:var(--anthrazit) !important} body.sg-v3.sg-v3.sg-v3 .sg-zb.ist-hell .sg-verweis:is(:hover, :focus-visible){color:var(--magenta) !important} @media (max-width:760px){ body.sg-v3 .sg-bb-inner{grid-template-columns:minmax(0, 1fr)} body.sg-v3 .sg-bb-bild{min-height:260px} body.sg-v3 .sg-zb.ist-hell .sg-zb-text{padding-top:0} } @media (prefers-reduced-motion:reduce){ body.sg-v3 :is(.sg-pause-wort, .sg-bb-bild img, .sg-zb .sg-v3-zahl, .sg-zb-text){transition:none !important} } /* Pause, drei Spielarten mit eigener Bewegung (Grund) links, die Woerter steigen nacheinander auf ist-rechts in der Lesespalte ab Spalte 6, der tragende Teil gleitet von rechts herein ist-weiss auf einem weissen Band, der Satz wird von links per Maske frei */ body.sg-v3 .sg-pause.ist-rechts .sg-pause-inner{padding-left:max(var(--v3-rand), calc(var(--v3-rand) + (100% - 2 * var(--v3-rand)) * 5 / 12))} body.sg-v3 .sg-pause.ist-rechts .sg-pause-satz{font-size:clamp(40px, 1.3rem + 3.6vw, 72px) !important;max-width:18ch} body.sg-v3 .sg-pause.ist-rechts .sg-pause-schwer{display:block;transition:opacity .64s cubic-bezier(.2, 0, 0, 1) .2s, transform .64s cubic-bezier(.2, 0, 0, 1) .2s} body.sg-v3 .sg-pause.ist-rechts .sg-pause-schwer .sg-pause-wort{transition:none} body.sg-v3 .sg-pause.ist-weiss{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:var(--weiss)} body.sg-v3 .sg-pause.ist-weiss .sg-pause-satz{clip-path:inset(0);transition:clip-path .64s cubic-bezier(.2, 0, 0, 1)} body.sg-v3 .sg-pause.ist-weiss .sg-pause-wort{transition:none} @media (max-width:760px){ body.sg-v3 .sg-pause.ist-rechts .sg-pause-inner{padding-left:var(--v3-rand)} } @media (prefers-reduced-motion:reduce){ body.sg-v3 .sg-pause :is(.sg-pause-satz, .sg-pause-schwer){transition:none !important} } /* ═══ Teil 26: Rueckmeldung 25.09.2026, zweite Runde ═══════════════════════ */ /* Referenz: Zwischentitel links, Text rechts, der Titel laeuft mit */ body.sg-v3 :is(.sg-ref-abschnitt.ist-prosa, .sg-beitrag.ist-lesen) .sg-prosa.ist-geteilt > .sg-prosa-teil{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2vw, 32px);align-items:start} body.sg-v3 :is(.sg-ref-abschnitt.ist-prosa, .sg-beitrag.ist-lesen) .sg-prosa.ist-geteilt > .sg-prosa-teil + .sg-prosa-teil{margin-top:clamp(28px, 3vw, 44px);padding-top:clamp(28px, 3vw, 44px);border-top:1px solid var(--linie)} body.sg-v3.sg-v3.sg-v3.sg-v3 :is(.sg-ref-abschnitt.ist-prosa, .sg-beitrag.ist-lesen) .sg-prosa.ist-geteilt > .sg-prosa-teil > h2{float:none;width:auto !important;grid-column:1 / span 4;position:sticky;top:40px;margin:0;padding:0 !important} body.sg-v3.sg-v3.sg-v3.sg-v3 :is(.sg-ref-abschnitt.ist-prosa, .sg-beitrag.ist-lesen) .sg-prosa.ist-geteilt .sg-prosa-text{grid-column:5 / -1;max-width:720px} body.sg-v3 :is(.sg-ref-abschnitt.ist-prosa, .sg-beitrag.ist-lesen) .sg-prosa.ist-geteilt .sg-prosa-text > :first-child{margin-top:0} body.sg-v3 :is(.sg-ref-abschnitt.ist-prosa, .sg-beitrag.ist-lesen) .sg-prosa.ist-geteilt .sg-prosa-text > *{margin-left:0;padding-top:0 !important} @media (max-width:1023px){ body.sg-v3.sg-v3.sg-v3.sg-v3 :is(.sg-ref-abschnitt.ist-prosa, .sg-beitrag.ist-lesen) .sg-prosa.ist-geteilt > .sg-prosa-teil > h2, body.sg-v3.sg-v3.sg-v3.sg-v3 :is(.sg-ref-abschnitt.ist-prosa, .sg-beitrag.ist-lesen) .sg-prosa.ist-geteilt .sg-prosa-text{grid-column:1 / -1;position:static} body.sg-v3.sg-v3.sg-v3.sg-v3 :is(.sg-ref-abschnitt.ist-prosa, .sg-beitrag.ist-lesen) .sg-prosa.ist-geteilt > .sg-prosa-teil > h2{margin-bottom:16px} } /* Buehne: die Zahl steigt aus der Unterkante, Goldkante und Satz folgen */ body.sg-v3 .sg-zb:not(.ist-hell) .sg-zb-zahl .sg-v3-zahl{transform:none;transition:transform .9s cubic-bezier(.16, 1, .3, 1)} body.sg-v3 .sg-zb:not(.ist-hell) .sg-zb-text > *{transition:opacity .48s cubic-bezier(.2, 0, 0, 1) .45s, transform .48s cubic-bezier(.2, 0, 0, 1) .45s} /* Buehne mit drei Kennzahlen (Startseite): die Zahl steht frei, darunter die Reihe, jede mit Goldkante, die nacheinander waechst */ body.sg-v3 .sg-zb.mit-reihe .sg-zb-inner{padding-bottom:clamp(64px, 2rem + 5vw, 120px)} body.sg-v3 .sg-zb.mit-reihe{--zb-f:clamp(104px, 3.6rem + 10vw, 232px)} body.sg-v3 .sg-zb.mit-reihe .sg-zb-zahl{margin-bottom:0} body.sg-v3 .sg-zb.mit-reihe .sg-zb-text{padding-bottom:0} body.sg-v3.sg-v3.sg-v3 .sg-zb .sg-zb-reihe{grid-column:1 / -1;margin-top:clamp(56px, 2rem + 4vw, 104px);gap:40px clamp(24px, 3vw, 56px)} body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-zb .sg-zb-feld{position:relative;padding-top:clamp(20px, 2vw, 30px);display:flex;flex-direction:column;gap:12px} body.sg-v3.sg-v3.sg-v3 .sg-zb .sg-zb-feld .sg-v3-zahl{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .2em;font-size:clamp(52px, 1.4rem + 3.4vw, 84px) !important;font-weight:900;line-height:.85;letter-spacing:-.05em;transform:none} body.sg-v3 .sg-zb .sg-zb-feld .sg-v3-ziffern{color:var(--weiss) !important} body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-zb .sg-zb-feld .sg-v3-zahl-rest{font-size:.3em !important;font-weight:300;letter-spacing:0;color:var(--linie) !important;margin:0} body.sg-v3.sg-v3.sg-v3 .sg-zb .sg-zb-feld .sg-v3-zahl-rest.ist-zeichen{font-size:1em !important;color:var(--weiss) !important} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-zb .sg-zb-feld-satz{margin:0;max-width:26ch;font-size:clamp(17px, 1rem + .3vw, 20px) !important;font-weight:700;line-height:1.3 !important;color:var(--weiss) !important;text-wrap:pretty} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-zb .sg-zb-feld-marke{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--linie) !important;text-decoration:none} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-zb a.sg-zb-feld-marke:is(:hover, :focus-visible){color:var(--weiss) !important;text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:.35em} body.sg-v3 .sg-zb .sg-zb-feld > *{transition:opacity .48s cubic-bezier(.2, 0, 0, 1), transform .48s cubic-bezier(.2, 0, 0, 1)} body.sg-v3 .sg-zb .sg-zb-feld:nth-child(2) > *{transition-delay:.12s} body.sg-v3 .sg-zb .sg-zb-feld:nth-child(3) > *{transition-delay:.24s} @media (max-width:760px){ body.sg-v3 .sg-zb.mit-reihe .sg-zb-inner{padding-bottom:56px} } @media (prefers-reduced-motion:reduce){ body.sg-v3 .sg-zb .sg-zb-feld > *, body.sg-v3 .sg-zb .sg-zb-text > *{transition:none !important} } body.sg-v3 :is(.sg-ref-abschnitt.ist-prosa, .sg-beitrag.ist-lesen) .sg-prosa.ist-geteilt{max-width:none;width:100%;margin-left:0;margin-right:0;display:block} body.sg-v3 :is(.sg-ref-abschnitt.ist-prosa, .sg-beitrag.ist-lesen) .sg-prosa.ist-geteilt > .sg-prosa-teil{margin-left:0;max-width:none} /* Insights und Proofs: breite Stücke zwischen den Kapiteln, der Text danach läuft ohne neue Linie weiter (sg_v3_prosa_breit) */ body.sg-v3.sg-v3 .sg-beitrag.ist-lesen .sg-prosa.ist-geteilt > .sg-prosa-teil.ist-fortsetzung{margin-top:0;padding-top:0;border-top:0} /* Der Einstieg vor dem ersten Zwischentitel steht links an der Kante des Kopfs, eine Stufe größer als der Fließtext (Auftakt der Vorlage), nicht in der rechten Spalte neben einer Lücke */ body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-beitrag.ist-lesen .sg-prosa.ist-geteilt > .sg-prosa-teil.ist-ohne-titel:not(.sg-prosa-teil:not(.ist-ohne-titel) ~ .sg-prosa-teil) .sg-prosa-text{grid-column:1 / span 8;max-width:62ch} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-beitrag.ist-lesen .sg-prosa.ist-geteilt > .sg-prosa-teil.ist-ohne-titel:not(.sg-prosa-teil:not(.ist-ohne-titel) ~ .sg-prosa-teil) .sg-prosa-text > p{font-size:clamp(18px, 1.05rem + .35vw, 21px) !important;line-height:1.62 !important;max-width:none} body.sg-v3 .sg-beitrag.ist-lesen .sg-prosa.ist-geteilt > .sg-prosa-breit{margin:clamp(40px, 4vw, 64px) 0} body.sg-v3 .sg-beitrag.ist-lesen .sg-prosa.ist-geteilt > .sg-prosa-breit:first-child{margin-top:0} body.sg-v3 .sg-beitrag.ist-lesen .sg-prosa.ist-geteilt > .sg-prosa-breit > :is(figure, .sg-pr-werte, .sg-lb-gitter, p.sg-these){margin-top:clamp(32px, 3vw, 48px);margin-bottom:0} body.sg-v3 .sg-beitrag.ist-lesen .sg-prosa.ist-geteilt > .sg-prosa-breit > :is(figure, .sg-pr-werte, .sg-lb-gitter, p.sg-these):first-child{margin-top:0} /* ═══ Teil 27: Aufzaehlungen wie die Stufen auf StrategionChat (26.09.2026) ═══ Nummer gross in 900 (auf Hell Violett, auf Anthrazit Weiss), darunter Titel in 700 und Text; dieselbe Linie darueber wie bei den Stufen. */ body.sg-v3 .sg-main .sg-wirkung-gitter{counter-reset:sg-wirkung} body.sg-v3 .sg-main .sg-wirkung{counter-increment:sg-wirkung;padding-top:clamp(18px, 1.8vw, 26px)} body.sg-v3 .sg-main .sg-wirkung::before{content:counter(sg-wirkung, decimal-leading-zero);display:block;margin-bottom:clamp(16px, 1.6vw, 24px);font-size:clamp(40px, 3.6vw, 64px);font-weight:900;line-height:.9;letter-spacing:-.04em;} body.sg-v3 .sg-main :is(.sg-band, .sg-flaeche-violett, .sg-zb) .sg-wirkung::before{color:var(--weiss)} body.sg-v3.sg-v3 .sg-main .sg-wirkung h3{margin:0;font-size:clamp(19px, 1.35vw, 22px) !important;font-weight:700 !important;letter-spacing:-.02em !important;line-height:1.2} body.sg-v3 .sg-main .sg-wirkung p{margin:10px 0 0;} /* Lesetexte in Karten, Kacheln, Schritten und Listen mindestens 17 px (Kundenvorgabe 26.09.2026: Fliesstext 17 bis 19 px) */ body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main :is(.sg-lb-text p, p.sg-lb-text, .sg-mk-text, .pv-ac-thema p, .sg-lf-text, .pv-sc-stufe-text, .pv-ex-transfer p, .sg-ex3-text, .pv-pr-karte p, .sg-prod-text, .sg-wirkung p, .pv-ex-tr-aussage, .pv-ex-tr-proof, .pv-un-person p, .sg-v3-zaehlt > p, .sg-schritt p, .pv-un-ort-text p, .sg-ref-leistung-text){font-size:17px !important;line-height:1.6 !important} /* Pause auf Anthrazit (26.09.2026): grosse helle Aussage, rahmend in 300 hellgrau, tragend in 900 weiss */ body.sg-v3 .sg-pause.ist-dunkel{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:var(--anthrazit)} body.sg-v3 .sg-pause.ist-dunkel .sg-pause-satz{max-width:18ch;color:var(--weiss) !important} body.sg-v3 .sg-pause.ist-dunkel .sg-pause-leicht{color:var(--linie)} body.sg-v3 .sg-pause.ist-dunkel .sg-pause-schwer{color:var(--weiss)} /* Pausen nach Laenge gestuft (26.09.2026): ueber 40 Zeichen hoechstens 88 px, ueber 70 Zeichen 72 px; der tragende Teil beginnt auf eigener Zeile wie bei den Ueberschriften (ausser der kurzen Pause der Startseite) */ body.sg-v3 .sg-pause.ist-dunkel.ist-mittel .sg-pause-satz{font-size:clamp(44px, 1.4rem + 4.6vw, 88px) !important} body.sg-v3 .sg-pause.ist-lang:not(.ist-rechts) .sg-pause-satz{font-size:clamp(36px, 1.2rem + 3.6vw, 72px) !important;max-width:22ch} body.sg-v3 .sg-pause.ist-rechts.ist-lang .sg-pause-satz{font-size:clamp(34px, 1.1rem + 2.9vw, 60px) !important} body.sg-v3 .sg-pause:not(.sg-pause-start):not(.ist-rechts) .sg-pause-leicht + .sg-pause-schwer::before{content:"\A";white-space:pre} /* ════ Teil farben (Regelwerk 25.09.2026) (bis 2.0.3: assets/farben.css) ════ */ /* Regelwerk · acht Werte (Design-Regeln, Stand 25.09.2026) * * Quelle: Marketing, Website/Design/07_Design-Regeln, "Strategion Regelwerk". * Die Farbversionen zum Testen (24.09.2026) sind entfallen; es gilt eine * Palette. Jeder Wert hat genau eine Aufgabe: * * #FFFFFF Grund, hell * #F5F5F5 Grund, zweite Stufe nur Flaeche, nie Schrift, nie Linie * #DDDDDD Haarlinie Linie zwischen Eintraegen * #2C2C2B Fliesstext, dunkle Flaeche fuer Inhalt (Zahl als Buehne, * Vorgehen, gesetztes Titelbild, Fuss), 1 px Linie zwischen Gruppen * #444443 zweite Textebene, Flaeche der Kontaktstelle (nur dort) * #B50063 Magenta, Handlung: Schaltflaeche, Verweis, Ecke, Kante, gewaehlt * #571763 Violett, Ordnung: nur Schrift auf Hell (laufende Nummer, * Kundenmarke, Schlusssatz der Pause, Rubrik) * #BC9E78 Warmgold, Beweis und Fortschritt: nur Linie, nie Schrift * * Auf Anthrazit ordnet Weiss; die zweite Ebene steht dort in #DDDDDD (11:1). * Keine Vollflaeche in einer Akzentfarbe. Diese Datei laedt als letzte Ebene. */ :root{ --f-weiss:var(--grund); --f-sand:var(--weiss); --f-sand-tief:var(--weiss); --f-linie:var(--linie); --f-text:var(--anthrazit); --f-grau:var(--grau); --f-gruppe:var(--anthrazit); --f-dunkel:var(--anthrazit); --f-fuss:var(--anthrazit); --f-violett-flaeche:var(--anthrazit); --f-kontakt:var(--grau); --f-kopf:var(--weiss); --f-akzent:var(--violett); --f-zahl:var(--anthrazit); --f-kante:var(--magenta); --f-neben-dunkel:var(--linie); --v3-anthrazit:var(--anthrazit); --v3-grau:var(--grau); --v3-sand:var(--weiss); --v3-linie:var(--linie); --v3-weiss:var(--grund); --v3-violett-80:var(--violett); --v3-violett-40:var(--linie); --v3-violett-20:var(--linie); --v3-gold-60:var(--gold); --v3-gold-40:var(--linie); --sg-anthrazit:var(--anthrazit); --sg-tinte:var(--anthrazit); --sg-tinte-tief:var(--anthrazit); --sg-sand:var(--weiss); --sg-linie:var(--linie); --sg-haar:var(--linie); } html{background:var(--grund)} body{background:var(--grund);} /* ═══ Die Regeln an den Bauteilen ═══════════════════════════════════════════ Hoehere Spezifitaet als v3.css (fuenf statt vier Klassen), damit diese Ebene ohne Wettlauf gilt. */ body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3{ /* ── Grund: das helle Grau #F5F5F5 (Wunsch 25.09.2026, wie in den Vorlagen); Weiss ist die zweite Stufe fuer Kapitel, Kacheln und den Kopf ────── */ & header[role="banner"]::before{background:var(--weiss)} & header[role="banner"] .sg-metazeile{background:var(--weiss);box-shadow:inset 0 -1px 0 var(--linie)} & ::selection{background:var(--anthrazit);color:var(--weiss)} /* ── Keine Vollflaeche in einer Akzentfarbe (Regel 05) ─────────────── */ & :is(.pv-un-hervor, .pv-sc-vertrauen, .sg-main > .pv-un-hervor){background-color:var(--anthrazit) !important} & .sg-mega-band, & .sg-mega-band:hover{background:var(--grund) !important} & .wp-block-button__link:is(:hover, :focus-visible){background:var(--anthrazit) !important} /* ── Kontaktstelle: eine Form auf allen Seiten (26.09.2026). Die Karte #444443 steht auf der hellen Flaeche des Abschnitts (inc/neu.php), so stoesst keine dunkle Flaeche an den Fuss. Das volle Band der Vorlagen wird zur selben Karte wie das Kontaktband mit Portraet. Links die 6-px-Kante in Magenta (Regelwerk Teil C 05), ueber der Ueberschrift die Kennzeile „Kontakt“ (29.09.2026, auf allen Seiten wie auf der Startseite). ── */ & .sg-main .sg-abschluss{background:transparent !important;border-top:0 !important} & .sg-main .sg-abschluss:not(.sg-kb){display:block !important;min-height:0;padding:var(--sg-abstand) var(--v3-rand) !important;overflow:visible} & .sg-main .sg-abschluss:not(.sg-kb) > .sg-abschluss-inner{box-sizing:border-box;max-width:calc(1280px - 2 * var(--v3-rand));margin:0 auto; padding:clamp(40px, 5.2vw, 88px) clamp(28px, 5.2vw, 88px) !important;background:var(--grau);border-left:6px solid var(--magenta)} & .sg-main .sg-abschluss .sg-cta{background:var(--magenta) !important;color:var(--weiss) !important} & .sg-main .sg-abschluss .sg-cta:is(:hover, :focus-visible){background:var(--weiss) !important;color:var(--magenta) !important} & .sg-main .sg-abschluss .sg-cta::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 51'%3E%3Crect width='51' height='51' rx='3' fill='%23FFFFFF'/%3E%3C/svg%3E")} & .sg-main .sg-abschluss .sg-cta:is(:hover, :focus-visible)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 51'%3E%3Crect width='51' height='51' rx='3' fill='%23B50063'/%3E%3C/svg%3E")} & .sg-main .sg-abschluss :is(.sg-kb-portraet, .sg-cta-portrait, .sg-cta-portrait .sg-img){background:var(--anthrazit) !important} & .sg-main .sg-abschluss :is(.pv-kicker, .sg-chips-marke){color:var(--linie) !important} & .sg-main .sg-abschluss :is(.sg-kb-karte, .sg-cta-person){border-color:var(--anthrazit) !important} & .sg-main .sg-abschluss ::selection{background:var(--weiss);color:var(--anthrazit)} /* Startseite: Fläche mit 6-px-Magentakante, Einladung, Knopf und E-Mail; darunter die Zeile Weiterlesen auf dem hellen Grund (Arbeitsliste 13, Vorlage 10_KONTAKT) */ & .sg-main .sg-abschluss.sg-kon-start > .sg-abschluss-inner{padding:75px !important} & .sg-main .sg-kon-start h2{max-width:18ch;font-size:clamp(32px, 3.9vw, 56px) !important;line-height:1.04 !important;letter-spacing:-.03em !important} & .sg-main .sg-kon-start p.sg-kon-einladung{margin:40px 0 0;font-size:clamp(19px, 1.7vw, 22px) !important;font-weight:700;line-height:1.3 !important;letter-spacing:-.018em} & .sg-main .sg-kon-start .sg-st-knopfe{align-items:center;gap:16px 32px;margin-top:18px} & .sg-main .sg-kon-start a.sg-kon-mail-start{display:inline-block;min-height:48px;line-height:48px;font-size:17px;font-weight:700;text-decoration:underline !important;text-decoration-thickness:1px !important;text-underline-offset:4px !important} & .sg-main .sg-kon-start a.sg-kon-mail-start:hover{text-decoration-thickness:2px !important} & .sg-main .sg-kon-start p.sg-kon-schluss{margin-top:40px} & .sg-main .sg-weiterlesen{display:flex;flex-wrap:wrap;align-items:center;gap:20px;box-sizing:border-box;max-width:calc(1280px - 2 * var(--v3-rand));margin:0 auto;padding:22px 0 0;border-top:1px solid var(--linie)} & .sg-main .sg-weiterlesen-marke{font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--grau)} & .sg-main .sg-abschluss .sg-weiterlesen a.sg-pfeil{color:var(--anthrazit) !important;text-decoration:none !important} & .sg-main .sg-abschluss .sg-weiterlesen a.sg-pfeil:is(:hover, :focus-visible){color:var(--magenta) !important} & .sg-main .sg-abschluss .sg-weiterlesen a.sg-pfeil:focus-visible{outline-color:var(--magenta) !important} @media (max-width:1023px){ & .sg-main .sg-abschluss.sg-kon-start > .sg-abschluss-inner{padding:40px 32px !important} } @media (max-width:820px){ & .sg-main .sg-abschluss.sg-kon-start > .sg-abschluss-inner{padding:32px 20px !important} } /* ── Zwei Textstufen (Regel 06) ────────────────────────────────────── */ /* Kennzeilen und Marken in der zweiten Ebene; kein Strich davor (Wunsch, siehe PRODUCT.md) */ & :is(.sg-anfang-kicker, .sg-anfang-kicker a, .sg-kopf-band-hier, .sg-ref-marke-klein, .sg-ref-meta dt, .pv-kicker, .sg-logobar-kicker, .sg-chips-marke, .sg-kar-feld-titel, .sg-mk-datum, .sg-mk-fuss){color:var(--grau) !important} & :is(.sg-band, .sg-flaeche-violett, .pv-un-hervor, .sg-kopf-buehne, .sg-kopf-typ-referenz, .sg-fuss, .sg-zb:not(.ist-hell), .sg-zband) :is(.sg-anfang-kicker, .sg-anfang-kicker a, .sg-kopf-band-hier, .sg-ref-meta dt, .pv-kicker, .sg-chips-marke, .pv-ac-sub){color:var(--linie) !important} /* Kennzeile ueber der Aussage in der zweiten Ebene; die Kapiteltitel der linken Achse in #2C2C2B wie alle Titel */ & .sg-ref-abschnitt.ist-aussage .sg-ref-titel.sg-ohne-schnitt{color:var(--grau) !important} & .sg-anfang-kicker :is(a, .sg-anfang-teiler){color:inherit !important} & .sg-main :is(.pv-ac-sub, .pv-ac-format-fuer, .pv-un-karte-rolle){color:var(--grau) !important} & .sg-main :is(.sg-band, .sg-flaeche-violett, .pv-un-hervor) :is(.pv-ac-sub, .pv-ac-format-fuer, .pv-un-karte-rolle){color:var(--linie) !important} & .sg-main :is(.pv-un-ort-haus, .pv-ex-aussage){color:var(--anthrazit) !important} /* ── Violett ordnet, als Schrift auf Hell (Regel 03) ───────────────── */ /* Kundenmarke */ & :is(.sg-fr-kunde, .sg-rb-kunde, .sg-bp-kunde, .sg-bp-zeile-kunde, .sg-proof-marke, .pv-st-proof-marke){color:var(--violett) !important} /* Rubrik "Weiterlesen" und die Rubrik ueber Beitraegen */ & :is(.sg-mk-kat, .sg-tr-rubrik){color:var(--violett) !important} /* Laufende Nummern */ & .sg-main :is(.sg-bs-nr, .pv-sc-linie-nr, .pv-ex-logik-nr, .sg-schritt-nr, .pv-un-zeitmarke){color:var(--violett) !important} & .sg-main .sg-bs[open]:not(.ist-schliessend) .sg-bs-nr{color:var(--magenta) !important} /* Auf Anthrazit ordnet Weiss: Violett erreicht dort 1,4 : 1 */ & :is(.sg-band, .sg-flaeche-violett, .pv-un-hervor, .sg-kopf-buehne, .sg-kopf-typ-referenz, .sg-fuss, .sg-exp-feld, .sg-v3-titelbild, .sg-zb:not(.ist-hell), .sg-zband, .sg-ref-ergebnis, #sg-cc) :is(.sg-fr-kunde, .sg-rb-kunde, .sg-proof-marke, .sg-mk-kat, .sg-bs-nr, .pv-sc-linie-nr, .pv-ex-logik-nr, .sg-schritt-nr, .pv-un-zeitmarke, .sg-aussage .sg-schnitt-schwer){color:var(--weiss) !important} /* ── Gold nie als Schrift (Regel 04) ───────────────────────────────── */ & .sg-main .sg-kar-stimme-name{color:var(--weiss) !important} /* Name aus zwei Worten: die Teile in 900, der Rest in 300 statt Gold */ & .pv-un-wort{font-weight:300 !important;color:var(--linie) !important} & .pv-un-wort .pv-un-teil{font-weight:900 !important;color:var(--weiss) !important} & .pv-un-rechen{color:var(--linie) !important;font-weight:300 !important} /* ── Magenta nur fuer Handlung ─────────────────────────────────────── */ & .sg-main .pv-ac-op{color:var(--grau) !important} & .sg-main :is(.sg-v3-buehne, .sg-v3-reihe > div, .sg-ref-menge .sg-v3-buehne, .sg-fr-kennzahl) .sg-v3-zahl{color:var(--anthrazit) !important} /* ── Linien: Haarlinie zwischen Eintraegen, 1 px #2C2C2B ueber Gruppen ─ */ & .sg-main :is(.pv-un-karten > .sg-lb, .pv-un-karten > .sg-lb:is(:nth-child(4n+2), :nth-child(4n+3), :nth-child(4n+4))){border-top:1px solid var(--anthrazit) !important} & .sg-main :is(.sg-ref-leistung, .sg-ref-leistung:is(:nth-child(2), :nth-child(3))){border-top:1px solid var(--anthrazit) !important} & .sg-kopf-typ-referenz .sg-ref-meta div, & .sg-kopf-typ-referenz .sg-ref-meta div:is(:nth-child(2), :nth-child(3)){border-top:1px solid var(--grau) !important} & .sg-main :is(.sg-ref-kapitel > .sg-ref-abschnitt, .sg-bereich-kopf){border-top-color:var(--anthrazit) !important} /* Listen: Gruppe oben, Eintraege dazwischen (Bild 2: die Bausteine) */ & .sg-main .sg-tr-liste{border-top:1px solid var(--anthrazit) !important} & .sg-main .sg-lb-gitter.ist-bausteine{border-bottom:1px solid var(--anthrazit) !important} & .sg-main .sg-lb-gitter.ist-bausteine > .sg-bs, & .sg-main .sg-lb-gitter.ist-bausteine > .sg-bs:first-child{border-top:1px solid var(--anthrazit) !important} & .sg-main :is(.sg-band, .sg-flaeche-violett) .sg-lb-gitter.ist-bausteine{border-bottom-color:var(--grau) !important} & .sg-main :is(.sg-band, .sg-flaeche-violett) .sg-lb-gitter.ist-bausteine > .sg-bs{border-top-color:var(--grau) !important} & .sg-main :is(.sg-band, .sg-flaeche-violett) .sg-lb-gitter.ist-bausteine > .sg-bs:first-child{border-top-color:var(--grau) !important} /* Eintraege auf Hell: Linien in #2C2C2B wie in der Vorlage (Bausteine, Beitragsreihen, Positionen, Textkarten); die Haarlinie #DDDDDD bleibt fuer untergeordnete Trennungen */ & .sg-main :is(.sg-lb-gitter > .sg-lb, .pv-ac-themen > .pv-ac-thema, .pv-ac-zielgruppen > .pv-ac-thema, .pv-pr-drei > div, .pv-ac-reife > div, .pv-sc-linie > div, .pv-ac-modell > .pv-ac-stufe, .sg-mx-pos-gitter > .sg-mx-pos, .sg-mx-inner > .sg-mx-zwischen, .pv-ex-transfer > *, .sg-st-raster > .sg-st-karte, .sg-kon-zwei, .sg-404-wege, .pv-ex-aussage){border-top-color:var(--anthrazit) !important} & .sg-main :is(.sg-tr-liste > .sg-tr, .sg-flaeche-sand > .sg-lb-gitter){border-bottom-color:var(--anthrazit) !important} & .sg-main :is(.sg-band, .sg-flaeche-violett, .pv-un-hervor, .sg-zb) :is(.sg-lb-gitter > .sg-lb, .pv-sc-linie > div, .pv-ac-themen > .pv-ac-thema){border-top-color:var(--grau) !important} /* Behauptungen im Vorgehen auf Anthrazit: Oberkante Gold (Vorlage) */ & .sg-main .sg-wirkung-gitter > .sg-wirkung{border-top:1px solid var(--anthrazit) !important} & .sg-main :is(.sg-band, .sg-flaeche-dunkel, .sg-flaeche-violett) .sg-wirkung-gitter > .sg-wirkung{border-top-color:var(--grau) !important} & .sg-main .sg-flaeche-violett .sg-lb-gitter, & .sg-main .sg-flaeche-violett .sg-lb-gitter > .sg-lb{border-color:var(--grau) !important} & .sg-main .sg-flaeche-violett .sg-lb-gitter > .sg-lb .sg-lb-text p{color:var(--linie) !important} /* ── Bedienelemente: Ruhe in der Haarlinie, gewaehlt Anthrazit mit Magentalinie unten (Regel 09) ─────────────────────────────────── */ & :is(.sg-v3-chip.ist-gewaehlt, .sg-wis-filter .sg-chip[aria-current="true"], .sg-chip.is-active, .sg-chip[aria-pressed="true"]){background:var(--anthrazit) !important;border-color:var(--anthrazit) !important;color:var(--weiss) !important;box-shadow:inset 0 -3px 0 var(--magenta)} & .page-numbers.current{color:var(--magenta) !important;box-shadow:inset 0 -3px 0 var(--magenta)} /* Formularfelder: die Kante traegt 3 : 1 (#444443), der Rest bleibt Haarlinie */ & .sg-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), select, textarea){border-color:var(--grau) !important} & .sg-main .sg-kar-feld{border-bottom-color:var(--grau) !important} & .sg-main :is(input[type="checkbox"], input[type="radio"]){accent-color:var(--magenta)} /* ── Diagramme codieren ueber Linienart, nicht ueber Farbe (Regel 08) ─ Position ist ein Rahmen, das Ziel ist gefuellt. Auf Anthrazit: Rahmen und Ziel in Weiss, Verbindungen in Weiss. */ & :is(.sg-band, .sg-flaeche-dunkel, .sg-flaeche-violett) .pv-sc-stufe{background:transparent !important;border-color:var(--weiss) !important;color:var(--weiss) !important} & :is(.sg-band, .sg-flaeche-dunkel, .sg-flaeche-violett) .pv-sc-stufe.pv-sc-stufe-ziel{background:var(--weiss) !important;border-color:var(--weiss) !important;color:var(--anthrazit) !important} & :is(.sg-band, .sg-flaeche-dunkel, .sg-flaeche-violett) .pv-sc-stufe.pv-sc-stufe-ziel *{color:var(--anthrazit) !important} /* ── Fortschritt: dieselbe 1-px-Linie, der erreichte Teil in Weiss (kein Gold als Schmuck, keine zweite Linie); in Ruhe bis zum ersten Schritt, beim Zeigen auf einen Schritt laeuft er bis dorthin ─────────────── */ & .sg-schritt-gitter > .sg-schritt{position:relative} & .sg-schritt-gitter > .sg-schritt::before{content:none} /* Eine Schrittliste auf Anthrazit: Nummer wie in den Aufzaehlungen (sg-wirkung), zweistellig, 900, Weiss */ & .sg-main :is(.sg-band, .sg-flaeche-violett) .sg-schritt-nr{font-size:clamp(40px, 3.6vw, 64px) !important;font-weight:900 !important;letter-spacing:-.03em !important;line-height:1;color:var(--weiss) !important} & .sg-main :is(.sg-schritt, .sg-wirkung){border-top-color:var(--grau) !important} & .sg-main :is(.sg-erklaer, .sg-lb-block, .sg-flaeche-sand) .sg-schritt{border-top-color:var(--linie) !important} } @media (prefers-reduced-motion:reduce){ body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-schritt-gitter > .sg-schritt::before{transition:none} } /* ── Einwilligung auf Anthrazit ────────────────────────────────────────── */ #sg-cc{background:var(--anthrazit) !important;color:var(--linie) !important} #sg-cc a{color:var(--weiss) !important;text-decoration:underline;text-decoration-color:var(--magenta);text-underline-offset:4px} #sg-cc #sg-cc-more{color:var(--weiss) !important;text-decoration:underline;text-decoration-color:var(--magenta);text-underline-offset:4px} #sg-cc :is(#sg-cc-min, #sg-cc-save){border-color:var(--linie) !important;color:var(--weiss) !important} /* ── Schaltflaechen: zwei Beschriftungen, alles andere ist ein Verweis ──── */ body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main a.sg-cta-verweis{display:inline-flex;align-items:center;min-height:44px;height:auto;padding:0 !important;margin:0; background:none !important;border:0 !important;box-shadow:none;color:var(--anthrazit) !important;font-size:15px !important;font-weight:700 !important;letter-spacing:0;text-decoration:none !important} /* Verweis mit Pfeil (29.09.2026): in Ruhe Anthrazit, beim Überfahren Magenta; auf Dunkel weiß (Regel darunter) */ body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main a.sg-cta-verweis:is(:hover, :focus-visible){color:var(--magenta) !important} body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main :is(.sg-band, .sg-flaeche-violett, .pv-un-hervor, .sg-abschluss, .sg-zb:not(.ist-hell), .sg-kopf-buehne, .sg-kopf-typ-referenz, .sg-exp-feld) a:is(.sg-cta-verweis, .sg-verweis){color:var(--weiss) !important} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main a.sg-cta.ist-dunkel{background:var(--anthrazit) !important;color:var(--weiss) !important} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main a.sg-cta.ist-dunkel:is(:hover, :focus-visible){background:var(--grau) !important} /* ── Einzelstellen aus der Pruefung aller 281 Seiten ─────────────────────── */ body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main p.pv-sc-vertrauen{background:var(--grund) !important;color:var(--anthrazit) !important;border:0 !important} body.sg-v3.sg-v3 .sg-main p.pv-sc-vertrauen *{color:var(--anthrazit) !important} body.sg-v3.sg-v3.sg-v3 .sg-main .pv-un-preis-jahr{background:none !important;padding:0 !important;color:var(--violett) !important} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-abschluss .pv-st-cta a.pv-st-cta-zwei{background:none !important;color:var(--weiss) !important;padding:0 !important;min-height:44px;display:inline-flex;align-items:center} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-abschluss .pv-st-cta a.pv-st-cta-zwei:is(:hover, :focus-visible){color:var(--weiss) !important;text-decoration:underline;text-decoration-color:var(--magenta);text-underline-offset:.3em;text-decoration-thickness:2px} /* Presse, Bildmaterial und Logos (29.09.2026): je Form eine Reihe, darin die Karte für helle und die für dunkle Flächen; PNG und SVG als Verweise mit Pfeil, auf der dunklen Karte weiß mit Warmgold; darunter der Satz zu Druckdaten als Fließtext */ .sg-main > .sg-presse-logos{padding-left:var(--v3-rand, 40px) !important;padding-right:var(--v3-rand, 40px) !important} .sg-presse-logos-reihe{margin-top:40px} .sg-main h3.sg-presse-logos-form{margin:0 0 16px;font-size:19px !important;font-weight:700 !important;letter-spacing:-.015em !important;color:var(--anthrazit)} .sg-presse-logos-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px} .sg-presse-logo{display:flex;flex-direction:column;padding:38px 40px 42px;background:var(--grund)} .sg-presse-logo.ist-dunkel{background:var(--anthrazit)} .sg-main p.sg-presse-logo-marke{margin:0;font-size:14px !important;font-weight:700;color:var(--grau)} .sg-main .sg-presse-logo.ist-dunkel p.sg-presse-logo-marke{color:var(--linie) !important} .sg-presse-logo-bild{display:flex;align-items:center;justify-content:center;margin-top:18px;padding:34px 0} .sg-presse-logo-bild img{display:block;width:auto;max-width:100%;height:76px} .sg-presse-logo-bild.ist-horizontal img{height:44px} .sg-presse-laden{display:flex;flex-wrap:wrap;gap:0 32px;margin-top:20px} .sg-main p.sg-presse-druck{max-width:var(--v3-zeile);margin:40px 0 0;font-size:var(--v3-t-text) !important;line-height:1.6 !important;color:var(--anthrazit);text-wrap:pretty} @media (max-width:760px){.sg-presse-logos-raster{grid-template-columns:minmax(0,1fr)}.sg-presse-logo{padding:28px 24px 30px}} body.sg-v3.sg-v3 .sg-main .sg-presse-dunkel .sg-presse-laden a.sg-pfeil{color:var(--weiss) !important} .sg-presse-dunkel .sg-pfeil-zeichen{color:var(--gold)} .sg-presse-dunkel a:is(:hover, :focus-visible) .sg-pfeil-zeichen{color:var(--magenta)} /* Presse, Bühne (29.09.2026): der neueste Bericht groß auf Anthrazit, rechts die nächsten vier als Liste mit Haarlinien; Warmgold als Linie, Magenta beim Überfahren */ .sg-presse-buehne-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px, 6vw, 96px);align-items:start} .sg-main h2.sg-presse-buehne-titel{max-width:20ch;margin:0;font-size:clamp(34px, 4.2vw, 64px) !important;font-weight:900 !important;line-height:1.02 !important;letter-spacing:-.035em !important;color:var(--weiss) !important;text-wrap:balance} .sg-main p.sg-presse-buehne-text{max-width:52ch;margin:28px 0 0;font-size:19px !important;line-height:1.6 !important;color:rgb(var(--weiss-rgb) / .88) !important} .sg-presse-buehne-haupt a.sg-pfeil{margin-top:22px} .sg-presse-buehne-weitere{padding-top:24px;border-top:3px solid var(--gold)} .sg-main p.sg-presse-buehne-weitere-titel{margin:0 0 8px;font-size:13px !important;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--weiss) !important} .sg-presse-buehne-weitere ul{margin:0;padding:0;list-style:none} .sg-presse-buehne-weitere li{margin:0;border-bottom:1px solid rgb(var(--weiss-rgb) / .22)} .sg-presse-buehne-weitere li::before{content:none} .sg-main .sg-presse-buehne-weitere a{display:block;padding:18px 0;color:var(--weiss);text-decoration:none} .sg-presse-buehne-medium{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em} .sg-presse-buehne-bericht{display:block;margin-top:4px;font-size:15px;line-height:1.45;color:var(--linie);transition:color 240ms cubic-bezier(.2, 0, 0, 1)} .sg-main .sg-presse-buehne-weitere a:is(:hover, :focus-visible) .sg-presse-buehne-bericht{color:var(--weiss)} .sg-main .sg-presse-buehne-weitere a:is(:hover, :focus-visible) .sg-presse-buehne-medium{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px} @media (max-width:1000px){.sg-presse-buehne-raster{grid-template-columns:minmax(0,1fr)}} @media (prefers-reduced-motion:reduce){.sg-presse-buehne-bericht{transition:none}} /* ── Tippziele (Regelwerk): 44 px fuer jedes Bedienelement, Schaltflaechen 56 px ── */ body.sg-v3.sg-v3.sg-v3 :is(.sg-main, .sg-fuss, header) :is(a, button).sg-cta:not(.sg-cta-verweis){min-height:56px;box-sizing:border-box;align-items:center;justify-content:center} body.sg-v3.sg-v3.sg-v3 .sg-main :is(.sg-arb-vorspann p > a:only-child, a.sgh21, [download]){display:inline-flex;align-items:center;min-height:44px} body.sg-v3.sg-v3.sg-v3.sg-v3 .sg-fuss .sg-fuss-liste a{padding-inline:4px;margin-inline:-4px} body.sg-neu .sg-fuss .sg-fuss-liste a::before, body.sg-neu .sg-fuss .sg-fuss-liste a::after{left:4px;right:4px} /* ── Fuss: die drei Standortfarben als 6-px-Kante (Regelwerk, "im Fuss als Standortfarbe"), Osnabrueck in Violett wie in der Vorlage ──────────── */ body.sg-v3 .sg-fuss-v3 .sg-fuss-ort{border-top-width:6px !important;border-top-color:var(--magenta) !important} body.sg-v3 .sg-fuss-v3 .sg-fuss-ort.ist-ort-2{border-top-color:var(--violett) !important} body.sg-v3 .sg-fuss-v3 .sg-fuss-ort.ist-ort-3{border-top-color:var(--gold) !important} body.sg-v3 .sg-fuss-v3 .sg-fuss-ort.ist-online{border-top-color:var(--grau) !important} body.sg-v3 .sg-main .sg-fr-kopf{border-bottom-color:var(--anthrazit) !important} /* ── Bausteine wie in der Vorlage (Leistung, Detailseite): jede Zeile 1 px #2C2C2B, der geoeffnete Baustein liegt auf einer eigenen Flaeche, damit der Text nicht grau auf grau steht ──────────────────────────────────── */ body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-lb-gitter.ist-bausteine > .sg-bs{padding-left:clamp(0px, 1.6vw, 28px);padding-right:clamp(0px, 1.6vw, 28px);transition:background-color .32s cubic-bezier(.2, 0, 0, 1)} /* beim Hineinscrollen erscheinen sie weiter weich (assets/v3.js, erscheinen()) */ body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-lb-gitter.ist-bausteine > .sg-bs[open]{background:var(--weiss)} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-flaeche-sand .sg-lb-gitter.ist-bausteine > .sg-bs[open]{background:var(--grund)} @media (max-width:760px){ body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-lb-gitter.ist-bausteine > .sg-bs{padding-left:12px;padding-right:12px} } /* ── Rhythmus: Abschnitte, die sonst immer weiss zeichnen, auf dem Grund ── */ body.sg-neu .sg-main > .sg-flaeche-grund{--sg-flaeche:var(--grund)} body.sg-neu.sg-neu .sg-main > .sg-flaeche-grund.sg-lb-block{padding-top:var(--sg-abstand) !important;padding-bottom:var(--sg-abstand) !important} /* Kacheln stehen auf der Gegenflaeche: weisse Kacheln werden auf Weiss grau, graue auf Grau weiss. So bleibt jede Kachel sichtbar, gleich welche Flaeche der Abschnitt im Wechsel bekommt (inc/neu.php). */ body.sg-v3 .sg-main > .sg-flaeche-sand :is(.sg-v3-titelbild:not(.ist-insight), .pv-pr-karte, .pv-ac-stufe, .pv-ac-kapsel, .pv-ac-fall, .pv-ac-format, .pv-un-preis, .pv-un-ort, .pv-ex-transfer, .pv-ex-mini-feld, .sg-ref-leistung, .sg-st-karte, .sg-tagung-inner, .pv-ex-logik-stufe, .sg-report, .sg-stellenkarte, .sg-bb-text){background-color:var(--grund) !important} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main > .sg-flaeche-grund :is(.pv-un-karte, .sg-mx-karte, .sg-mx-abb, .pv-sc-vertrauen, .sg-beitrag-angaben:not(.ist-zeile), .pv-ac-format, .pv-un-portrait.ist-leer, .pv-un-portrait .sg-img){background-color:var(--weiss) !important} /* Die Knopfzeile der Vorlagen steht in der Textspalte des Kopfs (inc/v3.php, sg_v3_kopfknoepfe): Knopf zum Gespräch vorn, Verweis dahinter, wie auf der Startseite */ body.sg-neu .sg-main .sg-anfang .sg-anfang-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:40px} /* Knoepfe unter dem Kopf liegen auf dessen Weiss */ body.sg-neu.sg-neu.sg-neu.sg-neu .sg-main > .sg-kopf-anhang{display:flow-root;padding-top:0 !important;margin-bottom:0;padding-bottom:clamp(48px, 5.6vw, 88px) !important; background-color:transparent !important;border-image:linear-gradient(var(--weiss), var(--weiss)) fill 0 / 0 / 0 100vmax} /* Die Knopfzeile steht 40 px unter dem Vorspann, wie Knoepfe im Kopf selbst; darunter derselbe Abstand wie unter jedem Kopf */ body.sg-neu.sg-neu.sg-neu .sg-main > .sg-anfang:has(+ .sg-kopf-anhang){padding-bottom:0 !important;margin-bottom:0} body.sg-neu .sg-main > .sg-anfang:has(+ .sg-kopf-anhang) .sg-anfang-text{padding-bottom:14px} body.sg-v3.sg-v3.sg-v3 .sg-main .sg-anfang-vorspann p:has(> a:only-child){margin-top:16px} body.sg-v3.sg-v3 .sg-main .sg-anfang-vorspann p:not(:has(> a:only-child)) + p:has(> a:only-child){margin-top:40px} /* ── Bausteine: beim Schliessen wird die Flaeche sofort ruhig, das Zeichen sofort zum Plus, der Inhalt blendet aus (assets/v3.js, bausteine()) ── */ body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-bs .sg-bs-inhalt{transition:opacity .2s cubic-bezier(.2, 0, 0, 1)} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-lb-gitter.ist-bausteine > .sg-bs.ist-schliessend{background:transparent} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-bs.ist-schliessend .sg-bs-inhalt{opacity:0;transition:opacity .2s cubic-bezier(.2, 0, 0, 1)} body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-bs.ist-schliessend .sg-bs-zeichen::after{transform:rotate(90deg)} @media (prefers-reduced-motion:reduce){ body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-lb-gitter.ist-bausteine > .sg-bs, body.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3.sg-v3 .sg-main .sg-bs .sg-bs-inhalt{transition:none !important} }