/* Cross ALM – Ergänzungen zu theme.json. Wird über theme.json (styles.css) in Editor und Website geladen. */ /* ---------- Kopfzeile: nachtblau, bleibt oben stehen ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(0, 54, 89, .94) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } body.admin-bar .site-header { top: 32px; } .site-header .wp-block-navigation a { color: #fff; } .site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--gruen-hell); } .site-header .wp-block-navigation__submenu-container { background: var(--wp--preset--color--nacht) !important; border: 0 !important; border-radius: 8px; padding: 6px 0; } .site-header .wp-block-navigation__submenu-container a { text-transform: none; letter-spacing: 0; font-weight: 600; padding: 6px 16px; } /* ---------- Dachzeile über Überschriften (Absatz-Stil „Dachzeile“) ---------- */ .is-style-dachzeile { margin-bottom: 4px !important; color: var(--wp--preset--color--gruen); font-size: 12px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; } .is-style-dachzeile + :where(h1, h2, h3) { margin-top: 0 !important; } /* ---------- Hero (Titelbild-Stil „Hero“) ---------- */ .wp-block-cover.is-style-hero { border-radius: 0 0 40px 40px; overflow: hidden; align-items: flex-end; } .wp-block-cover.is-style-hero .wp-block-cover__background { background: var(--ca-blau-verlauf) !important; opacity: 1 !important; } .wp-block-cover.is-style-hero h1, .wp-block-cover.is-style-hero h2, .wp-block-cover.is-style-hero p { color: #fff; } .wp-block-cover.is-style-hero .is-style-dachzeile { color: var(--wp--preset--color--gruen); } .wp-block-cover.is-style-hero .hero-text { max-width: 560px; } .wp-block-cover.is-style-hero .hero-text > p:not(.is-style-dachzeile):not(.hero-hook) { color: rgba(255, 255, 255, .9); } .hero-hook { font-size: clamp(18px, 2vw, 22px) !important; font-weight: 800; line-height: 1.25; } @media (max-width: 820px) { .wp-block-cover.is-style-hero .wp-block-cover__background { background: linear-gradient(180deg, rgba(0, 54, 89, .92), rgba(0, 54, 89, .78)) !important; } } @media (max-width: 560px) { .wp-block-cover.is-style-hero { border-radius: 0 0 28px 28px; } } /* ---------- Kachel dunkel (Gruppen-Stil „Kachel“) ---------- */ .is-style-kachel { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 16px 18px !important; border-radius: var(--wp--custom--radius-kachel); background: var(--wp--preset--color--blau); color: rgba(255, 255, 255, .92); height: 100%; } .is-style-kachel :where(h2, h3, h4) { color: #fff; font-size: 17px; margin: 0 0 6px; } .is-style-kachel p { font-size: 15px; margin: 0; } .is-style-kachel a:not(.wp-element-button) { color: var(--wp--preset--color--gruen-hell); } /* ---------- Kachel hell (Gruppen-Stil „Kachel hell“) – z. B. für Fakten/Zahlen ---------- */ .is-style-kachel-hell { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 16px 18px !important; border-radius: var(--wp--custom--radius-kachel); background: var(--wp--preset--color--hellgrau); color: var(--wp--preset--color--fliesstext); height: 100%; } .is-style-kachel-hell :where(h2, h3, h4) { color: var(--wp--preset--color--blau); font-size: 17px; margin: 0 0 6px; } .is-style-kachel-hell p { font-size: 15px; margin: 0; } .kachel-zahl { display: block; color: var(--wp--preset--color--blau); font-size: 24px !important; font-weight: 800; line-height: 1.15; margin: 0 0 2px !important; } /* ---------- Panel (Gruppen-Stil „Panel“) – heller Kasten mit Rand ---------- */ .is-style-panel { padding: 18px 20px !important; border-radius: var(--wp--custom--radius-panel); background: var(--wp--preset--color--hellgrau); border: 1px solid var(--wp--preset--color--rand); color: var(--wp--preset--color--fliesstext); text-align: left; } .is-style-panel :where(h2, h3, h4) { color: var(--wp--preset--color--blau); } .is-style-panel h3 { font-size: 21px; margin-bottom: 6px; } /* ---------- Karte (weiß, z. B. für Formular und News) ---------- */ .is-style-karte { background: #fff; border: 1px solid var(--wp--preset--color--rand); border-radius: var(--wp--custom--radius-panel); padding: 18px 20px !important; height: 100%; color: var(--wp--preset--color--fliesstext); text-align: left; } .is-style-karte :where(h1, h2, h3, h4) { color: var(--wp--preset--color--blau); } .is-style-karte a:not(.wp-element-button) { color: var(--wp--preset--color--blau); } /* ---------- Liste mit grünem Haken ---------- */ .is-style-haken { list-style: none; padding-left: 0 !important; text-align: left; } .is-style-haken li { position: relative; padding: 0 0 8px 32px; margin: 0; } .is-style-haken li:last-child { padding-bottom: 0; } .is-style-haken li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--wp--preset--color--gruen); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; } /* ---------- Abschnitte ---------- */ .abschnitt-lead { max-width: 680px; margin-left: auto !important; margin-right: auto !important; } .ausweg { font-size: 14px !important; color: var(--wp--preset--color--grau); } /* Auf dunklem Grund: Überschriften und Links weiß */ .has-blau-background-color :where(h1, h2, h3, h4), .has-nacht-background-color :where(h1, h2, h3, h4) { color: #fff; } .has-blau-background-color a:not(.wp-element-button), .has-nacht-background-color a:not(.wp-element-button) { color: #fff; text-decoration: underline; } .has-blau-background-color .is-style-dachzeile, .has-nacht-background-color .is-style-dachzeile { color: var(--wp--preset--color--gruen-hell); } .has-blau-background-color .is-style-karte a:not(.wp-element-button) { color: var(--wp--preset--color--blau); } /* Logos in weißen Kästen */ .logo-kasten img { height: 48px; width: auto; max-width: 100%; object-fit: contain; } .logo-kasten { color: var(--wp--preset--color--blau) !important; font-size: 20px !important; font-weight: 800; display: flex; align-items: center; justify-content: center; height: 68px; padding: 6px 14px; border-radius: 8px; background: #fff; margin: 0 0 10px !important; } /* Sprachumschalter */ .crossalm-sprachen { display: flex; gap: .6em; font-weight: 700; font-size: 14px; } .crossalm-sprachen a { color: #fff; text-decoration: none; opacity: .7; } .crossalm-sprachen a[aria-current="true"], .crossalm-sprachen a:hover { opacity: 1; text-decoration: underline; } .is-style-kachel .is-style-dachzeile { color: var(--wp--preset--color--gruen-hell); letter-spacing: .06em; min-height: 2.7em; } /* Auf hellgrauem Abschnitt werden Panels weiß, damit sie sich abheben */ .has-hellgrau-background-color .is-style-panel { background: #fff; } .has-hellgrau-background-color .is-style-kachel-hell { background: #fff; border: 1px solid var(--wp--preset--color--rand); } /* ---------- Herausforderungen: nummerierte Problemzeilen (Gruppen-Stil „Problem“) ---------- */ .problem-liste { display: flex; flex-direction: column; gap: 10px; counter-reset: problem; } .problem-liste > * { margin: 0 !important; } .problem-liste.ist-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .is-style-problem { display: flex !important; align-items: center; gap: 14px; counter-increment: problem; background: #fff; border: 1px solid var(--wp--preset--color--rand); border-left: 4px solid var(--wp--preset--color--blau); border-radius: var(--wp--custom--radius-kachel); padding: 13px 18px !important; box-shadow: 0 1px 3px rgba(0, 54, 89, .06); transition: transform .15s ease, box-shadow .15s ease; } .is-style-problem:hover { transform: translateX(3px); box-shadow: 0 4px 14px rgba(0, 54, 89, .10); } .is-style-problem::before { content: counter(problem, decimal-leading-zero); flex: 0 0 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--wp--preset--color--hellgrau); color: var(--wp--preset--color--blau); font-weight: 800; font-size: 13px; } .is-style-problem > * { margin: 0 !important; } .is-style-problem :where(h3, h4) { font-size: 17px; line-height: 1.3; color: var(--wp--preset--color--blau); } .has-hellgrau-background-color .is-style-problem::before { background: var(--wp--preset--color--hellgrau); } /* ---------- Folgen: dunkles Panel mit Warnpunkten (Gruppen-Stil „Folgen“) ---------- */ .is-style-folgen { position: relative; overflow: hidden; height: 100%; background: var(--wp--preset--color--nacht); color: rgba(255, 255, 255, .92); border-radius: var(--wp--custom--radius-panel); padding: 24px 26px !important; } .is-style-folgen::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(90, 201, 138, .28) 0%, rgba(90, 201, 138, 0) 70%); pointer-events: none; } .is-style-folgen :where(h2, h3, h4) { color: #fff; font-size: 21px; margin: 0 0 8px; } .is-style-folgen .is-style-dachzeile { color: var(--wp--preset--color--gruen-hell); } .is-style-folgen ul { list-style: none; padding: 0 !important; margin: 0; } .is-style-folgen li { position: relative; margin: 0; padding: 13px 0 13px 38px; border-top: 1px solid rgba(255, 255, 255, .12); font-weight: 700; color: #fff; line-height: 1.35; } .is-style-folgen li:first-child { border-top: 0; } .is-style-folgen li::before { content: "!"; position: absolute; left: 0; top: 12px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--wp--preset--color--gruen-hell); color: var(--wp--preset--color--gruen-hell); font-size: 13px; font-weight: 900; line-height: 18px; text-align: center; box-sizing: border-box; } /* ---------- Lösung: Text links, Use-Case-Karte rechts (Gruppen-Stil „Use-Cases“) ---------- */ .loesung-text p { font-size: 17px; } .is-style-usecases { height: 100%; background: var(--wp--preset--color--blau); color: rgba(255, 255, 255, .92); border-radius: var(--wp--custom--radius-panel); padding: 24px 26px !important; box-shadow: 0 10px 30px rgba(0, 76, 121, .18); } .is-style-usecases :where(h2, h3, h4) { color: #fff; font-size: 19px; margin: 0 0 12px; } .is-style-usecases .is-style-haken li { padding: 10px 0 10px 32px; border-top: 1px solid rgba(255, 255, 255, .14); } .is-style-usecases .is-style-haken li:first-child { border-top: 0; padding-top: 0; } .is-style-usecases .is-style-haken li:first-child::before { top: 1px; } .is-style-usecases .is-style-haken li::before { top: 11px; background: var(--wp--preset--color--gruen-hell); } .is-style-usecases a:not(.wp-element-button) { color: var(--wp--preset--color--gruen-hell); } .hinweis-pill { width: fit-content; display: flex; align-items: center; gap: 8px; margin-top: 18px !important; background: #fff; border: 1px solid var(--wp--preset--color--rand); border-radius: 999px; padding: 7px 14px; font-size: 14px !important; color: var(--wp--preset--color--grau); } .hinweis-pill::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--gruen); } @media (max-width: 781px) { .hinweis-pill { border-radius: 14px; } } /* Schritt-Kacheln: Inhalt oben ausrichten, damit die Zahlen auf einer Linie stehen */ .is-style-kachel-hell:has(.kachel-zahl) { justify-content: flex-start; } /* ---------- Übersichtsseiten: Produktkarten (Gruppen-Stil „Produktkarte“) ---------- */ .is-style-produktkarte { display: flex !important; flex-direction: column; height: 100%; position: relative; overflow: hidden; background: #fff; border: 1px solid var(--wp--preset--color--rand); border-top: 5px solid var(--wp--preset--color--gruen); border-radius: var(--wp--custom--radius-panel); padding: 24px 24px 22px !important; color: var(--wp--preset--color--fliesstext); text-align: left; box-shadow: 0 2px 6px rgba(0, 54, 89, .06); transition: transform .18s ease, box-shadow .18s ease; } .is-style-produktkarte:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 54, 89, .14); } .is-style-produktkarte > * { margin-top: 0 !important; margin-bottom: 10px !important; } .is-style-produktkarte .produkt-badge { width: fit-content; padding: 4px 10px; border-radius: 999px; background: var(--wp--preset--color--hellgrau); color: var(--wp--preset--color--blau); font-size: 11px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .is-style-produktkarte .produkt-name { color: var(--wp--preset--color--blau); font-size: 40px !important; font-weight: 900; line-height: 1; margin-bottom: 4px !important; } .is-style-produktkarte h3 { font-size: 18px; color: var(--wp--preset--color--fliesstext); } .is-style-produktkarte p { font-size: 15px; } .is-style-produktkarte .is-style-haken { font-size: 15px; } .is-style-produktkarte .wp-block-buttons { margin-top: auto !important; padding-top: 8px; margin-bottom: 0 !important; } /* ---------- Zusammenspiel: Schaubild Cloud ALM ⇄ C³ ⇄ Jira ---------- */ .zusammenspiel { margin-top: var(--wp--preset--spacing--40) !important; align-items: stretch !important; gap: 0 !important; } .zusammenspiel .system-box { height: 100%; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--wp--custom--radius-panel); padding: 18px !important; background: rgba(255, 255, 255, .04); } .zusammenspiel .system-box > * { margin-top: 0 !important; } .zusammenspiel h3 { color: #fff; font-size: 18px; text-align: center; margin: 0 0 14px !important; height: 26px; } .zusammenspiel .system-item { display: flex; align-items: center; height: 58px; margin: 0 0 10px !important; padding: 0 14px; border-radius: 8px; background: rgba(255, 255, 255, .09); color: #fff; font-size: 15px !important; line-height: 1.25; } .zusammenspiel .system-item:last-child { margin-bottom: 0 !important; } .zusammenspiel .mitte { padding: 18px 0 !important; } .zusammenspiel .mitte > * { margin-top: 0 !important; } .zusammenspiel .mitte h3 { color: var(--wp--preset--color--gruen-hell); } .zusammenspiel .connector-item { position: relative; display: flex; align-items: center; justify-content: center; height: 58px; margin: 0 0 10px !important; color: var(--wp--preset--color--nacht); font-weight: 900; font-size: 16px !important; } .zusammenspiel .connector-item:last-child { margin-bottom: 0 !important; } .zusammenspiel .connector-item::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, var(--wp--preset--color--gruen-hell) 0 8px, transparent 8px 14px); } .zusammenspiel .connector-item span, .zusammenspiel .connector-item strong { position: relative; z-index: 1; padding: 7px 16px; border-radius: 999px; background: var(--wp--preset--color--gruen-hell); box-shadow: 0 0 0 6px var(--wp--preset--color--nacht); } .zusammenspiel-fazit { color: rgba(255, 255, 255, .9); } @media (max-width: 781px) { .zusammenspiel { gap: 14px !important; } .zusammenspiel .connector-item::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: none; background: repeating-linear-gradient(180deg, var(--wp--preset--color--gruen-hell) 0 8px, transparent 8px 14px); } .zusammenspiel .mitte { display: flex; flex-direction: column; } } /* ---------- Fakten-Kacheln mit Text (links ausgerichtet) ---------- */ .is-style-kachel-hell.fakt { text-align: left; justify-content: flex-start; border-left: 4px solid var(--wp--preset--color--gruen); border-radius: 0 var(--wp--custom--radius-kachel) var(--wp--custom--radius-kachel) 0; padding: 16px 18px !important; } .is-style-kachel-hell.fakt h3 { font-size: 17px; } /* ---------- Hero: Wechselwort und Brücke (Skript assets/js/hero.js, nur auf der Website) ---------- */ .wechselwoerter { display: none; } .editor-styles-wrapper .wechselwoerter { display: block; font-size: 13px !important; color: rgba(255, 255, 255, .75) !important; border: 1px dashed rgba(255, 255, 255, .45); border-radius: 6px; padding: 6px 10px; } .editor-styles-wrapper .wechselwoerter::before { content: "Wechselwörter (durch Komma getrennt): "; font-weight: 700; } .wp-block-cover.is-style-hero h1 mark { background: none !important; } mark.wechselwort { position: relative; display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; } .wechselwort-text { display: inline-block; transition: transform .32s cubic-bezier(.2, .7, .2, 1), opacity .32s ease; } .wechselwort-text.raus { transform: translateY(-70%); opacity: 0; } .wechselwort-text.rein { transform: translateY(70%); opacity: 0; transition: none; } .wechselwort-balken { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; border-radius: 2px; background: rgba(90, 201, 138, .25); } .wechselwort-balken::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--wp--preset--color--gruen-hell); transform-origin: left; transform: scaleX(0); } .wechselwort-balken.laeuft::after { animation: wechselBalken var(--wechsel-dauer, 2800ms) linear forwards; } @keyframes wechselBalken { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .wechselwort-balken { display: none; } } .wp-block-cover.is-style-hero .hero-bruecke { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); width: min(48%, 640px); height: auto; z-index: 1; pointer-events: none; } .wp-block-cover.is-style-hero .wp-block-cover__inner-container { position: relative; z-index: 2; } .hero-bruecke .saeule { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .10); } .hero-bruecke .bogen { fill: none; stroke: rgba(90, 201, 138, .38); stroke-width: 1.4; } .hero-bruecke .bogen-zart { stroke: rgba(90, 201, 138, .16); stroke-dasharray: 3 6; } .hero-bruecke .knoten-sap { fill: #004C79; stroke: var(--wp--preset--color--gruen-hell); stroke-width: 2; } .hero-bruecke .knoten-tool { fill: #004C79; stroke: var(--wp--preset--color--gruen-hell); stroke-width: 2; } .hero-bruecke .saeule-text { fill: rgba(255, 255, 255, .6); font: 800 13px Nunito, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-anchor: middle; } .hero-bruecke .puls { fill: var(--wp--preset--color--gruen-hell); } .hero-bruecke .puls-zurueck { fill: var(--wp--preset--color--gruen-hell); } @media (max-width: 820px) { .wp-block-cover.is-style-hero .hero-bruecke { opacity: .28; width: 90%; right: -20%; } } /* ---------- Produkte kompakt: Spalten nach Thema, kleine Karten mit Logo (Gruppen-Stil „Produkt kompakt“) ---------- */ .produktspalten { margin-top: var(--wp--preset--spacing--40) !important; } .produktspalte > * { margin: 0 !important; } .produktspalte > * + * { margin-top: 10px !important; } .produktspalte .produktspalte-titel { font-size: 17px; line-height: 1.3; color: var(--wp--preset--color--blau); margin-bottom: 14px !important; min-height: 2.6em; } .is-style-produkt-mini { position: relative; display: flex !important; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--wp--preset--color--rand); border-radius: var(--wp--custom--radius-kachel); padding: 12px 14px !important; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .is-style-produkt-mini:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--gruen); box-shadow: 0 8px 22px rgba(0, 54, 89, .10); } .is-style-produkt-mini > * { margin: 0 !important; } .produkt-mini-logo { flex: 0 0 48px; line-height: 0; } .produkt-mini-logo img { width: 48px; height: auto; display: block; } .produkt-mini-text > * { margin: 0 !important; } .produkt-mini-name { font-weight: 800; font-size: 15px !important; line-height: 1.25; } .produkt-mini-name a { color: var(--wp--preset--color--blau); text-decoration: none; } .produkt-mini-name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .produkt-mini-name a:focus-visible { outline: none; } .is-style-produkt-mini:has(a:focus-visible) { outline: 3px solid var(--wp--preset--color--gruen); outline-offset: 2px; } .produkt-mini-zeile { font-size: 14px !important; line-height: 1.35; color: var(--wp--preset--color--grau); margin-top: 2px !important; } /* ---------- Trainings: helles Band mit Kurskarten ---------- */ .trainingsband { border-radius: 18px; background: linear-gradient(135deg, #E1E6F0 0%, #E1E6F0 100%); padding: clamp(24px, 4vw, 48px) !important; } .training-spalten { gap: clamp(24px, 4vw, 48px) !important; margin: 0 !important; } .training-spalten h2 { margin-bottom: 12px !important; } .training-text { font-size: 17px !important; line-height: 1.5; } .training-spalten .is-style-haken { margin-top: 14px !important; } .training-spalten .is-style-haken li { padding-top: 4px; padding-bottom: 4px; } .training-badge { line-height: 0; margin-top: 22px !important; } .training-badge img { height: 64px; width: auto; } .training-spalten .wp-block-buttons { margin-top: 22px !important; } .kurskarten { gap: 14px !important; } .kurskarte { --akzent: var(--wp--preset--color--blau); display: flex !important; flex-direction: column; background: #fff; border: 1px solid rgba(210, 217, 230, .8); border-radius: 12px; padding: 18px 20px !important; box-shadow: 0 1px 2px rgba(0, 54, 89, .05); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .kurskarte:hover { transform: translateY(-3px); border-color: var(--akzent); box-shadow: 0 10px 26px rgba(0, 54, 89, .10); } .kurskarte > * { margin: 0 !important; } .kurskarte h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--wp--preset--color--nacht); } .kurskarte h3::before { content: ""; flex: 0 0 12px; height: 12px; border-radius: 4px; background: var(--akzent); } .kurs-zeile { font-size: 14px !important; line-height: 1.4; color: var(--wp--preset--color--grau); margin-top: 6px !important; } .kurs-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto !important; padding-top: 14px; } .kurs-pills a { font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; padding: 6px 11px; border-radius: 999px; color: var(--wp--preset--color--blau); background: color-mix(in srgb, var(--akzent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--akzent) 22%, #fff); transition: background .15s ease, color .15s ease; } .kurs-pills a:hover, .kurs-pills a:focus-visible { background: var(--akzent); border-color: var(--akzent); color: #fff; } .kurs-jsm { --akzent: var(--wp--preset--color--gruen-dunkel); } .kurs-confluence { --akzent: #004C79; } .kurs-rovo { --akzent: var(--wp--preset--color--gruen); } @media (prefers-reduced-motion: reduce) { .kurskarte, .kurskarte:hover { transition: none; transform: none; } } /* ========================================================================== Styleguide 2026: Markenblau statt Nachtblau, nur Blau/Grün/Grau/Weiß, Pfeilgruppen aus dem Logo, Sechseck, schräge Kante, runde Buttons ========================================================================== */ :root { --ca-blau-verlauf: radial-gradient(1100px 620px at 80% 20%, #0A6299 0%, rgba(10, 98, 153, 0) 62%), linear-gradient(120deg, #004C79 0%, #00436C 55%, #003659 100%); --ca-cluster-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 220'%3E%3Cdefs%3E%3Cpath id='p' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3Cg id='dp'%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='translate(161 158) scale(-1 1)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23dp' fill='%235AC98A' fill-opacity='0.55' transform='translate(169 166) scale(0.111)'/%3E%3Cuse href='%23dp' fill='%235AC98A' fill-opacity='0.65' transform='translate(56 134) scale(0.147)'/%3E%3Cuse href='%23dp' fill='%23FFFFFF' fill-opacity='0.60' transform='translate(28 51) scale(0.141)'/%3E%3Cuse href='%23dp' fill='%235AC98A' fill-opacity='0.83' transform='translate(188 99) scale(0.150)'/%3E%3Cuse href='%23dp' fill='%23FFFFFF' fill-opacity='0.76' transform='translate(184 27) scale(0.129)'/%3E%3Cuse href='%23dp' fill='%23FFFFFF' fill-opacity='0.73' transform='translate(11 170) scale(0.076)'/%3E%3Cuse href='%23dp' fill='%23FFFFFF' fill-opacity='0.65' transform='translate(180 36) scale(0.099)'/%3E%3Cuse href='%23dp' fill='%235AC98A' fill-opacity='0.52' transform='translate(200 82) scale(0.115)'/%3E%3Cuse href='%23dp' fill='%235AC98A' fill-opacity='0.47' transform='translate(280 15) scale(0.120)'/%3E%3C/svg%3E"); --ca-cluster-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cdefs%3E%3Cpath id='p' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3Cg id='dp'%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='translate(161 158) scale(-1 1)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23dp' fill='%235AC98A' fill-opacity='0.31' transform='translate(261 129) scale(0.153)'/%3E%3Cuse href='%23dp' fill='%235AC98A' fill-opacity='0.45' transform='translate(108 59) scale(0.098)'/%3E%3Cuse href='%23dp' fill='%235AC98A' fill-opacity='0.35' transform='translate(179 157) scale(0.071)'/%3E%3Cuse href='%23dp' fill='%23FFFFFF' fill-opacity='0.50' transform='translate(117 78) scale(0.134)'/%3E%3Cuse href='%23dp' fill='%235AC98A' fill-opacity='0.64' transform='translate(225 102) scale(0.075)'/%3E%3Cuse href='%23dp' fill='%23FFFFFF' fill-opacity='0.83' transform='translate(100 109) scale(0.157)'/%3E%3Cuse href='%23dp' fill='%23FFFFFF' fill-opacity='0.40' transform='translate(277 95) scale(0.095)'/%3E%3Cuse href='%23dp' fill='%235AC98A' fill-opacity='0.40' transform='translate(223 108) scale(0.113)'/%3E%3C/svg%3E"); --ca-gross-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 202'%3E%3Cpath fill='%235AC98A' fill-opacity='0.16' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3C/svg%3E"); --ca-gross-w-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 202'%3E%3Cpath transform='translate(161 0) scale(-1 1)' fill='%23FFFFFF' fill-opacity='0.07' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3C/svg%3E"); --ca-gross-g-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 202'%3E%3Cpath transform='translate(161 0) scale(-1 1)' fill='%235AC98A' fill-opacity='0.2' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3C/svg%3E"); --ca-muster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 40'%3E%3Cdefs%3E%3Cpath id='p' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3Cg id='dp'%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='translate(161 158) scale(-1 1)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23dp' fill='%23004C79' transform='translate(6 4) scale(.085)'/%3E%3Cuse href='%23dp' fill='%23004C79' transform='translate(32 4) scale(.085)'/%3E%3Cuse href='%23dp' fill='%2347B27A' transform='translate(58 4) scale(.085)'/%3E%3C/svg%3E"); --ca-sechseck: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); } /* Kopfzeile und Footer in Markenblau */ .site-header { background: rgba(0, 76, 121, .96) !important; } .site-header .wp-block-navigation__submenu-container { background: #004C79 !important; } footer.has-nacht-background-color, .alignfull.has-nacht-background-color { background: var(--ca-blau-verlauf) !important; } /* Hero: Markenblau mit Lichtschein, unten rechts schräg angeschnitten */ .wp-block-cover.is-style-hero { border-radius: 0; isolation: isolate; view-timeline: --abschnitt block; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), calc(100% - 300px) 100%, 0 100%); padding-bottom: 70px !important; } .wp-block-cover.is-style-hero .wp-block-cover__background { background: var(--ca-blau-verlauf) !important; opacity: 1 !important; } .wp-block-cover.is-style-hero .is-style-dachzeile { color: var(--wp--preset--color--gruen-hell); } @media (max-width: 820px) { .wp-block-cover.is-style-hero .wp-block-cover__background { background: var(--ca-blau-verlauf) !important; } .wp-block-cover.is-style-hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 140px) 100%, 0 100%); } } @media (max-width: 560px) { .wp-block-cover.is-style-hero { border-radius: 0; } } /* Brücke nur in Weiß und Grün */ .hero-bruecke .saeule { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .14); } .hero-bruecke .bogen { stroke: rgba(255, 255, 255, .34); stroke-width: 1.5; } .hero-bruecke .bogen-zart { stroke: rgba(255, 255, 255, .16); } .hero-bruecke .knoten-sap { fill: #004C79; stroke: #fff; } .hero-bruecke .knoten-tool { fill: #004C79; stroke: var(--wp--preset--color--gruen-hell); } .hero-bruecke .saeule-text { fill: rgba(255, 255, 255, .72); font-weight: 900; } .hero-bruecke .puls-zurueck { fill: #fff; } /* Pfeilgruppen auf dunklen Flächen, beim Scrollen versetzt */ .wp-block-cover.is-style-hero .wp-block-cover__background::before, .wp-block-cover.is-style-hero .wp-block-cover__background::after, .trainingsband::before, .trainingsband::after { content: ""; position: absolute; inset: -220px 0; pointer-events: none; background-repeat: no-repeat; will-change: transform; } .trainingsband::before, .trainingsband::after { z-index: -1; } .wp-block-cover.is-style-hero .wp-block-cover__background::before { background-image: var(--ca-cluster-a); background-size: 230px auto; background-position: left 43% top 250px; } .wp-block-cover.is-style-hero .wp-block-cover__background::after { background-image: var(--ca-cluster-b), var(--ca-gross-g), var(--ca-gross-g-l); background-size: 220px auto, 140px auto, 110px auto; background-position: right 2% top 240px, left 44% bottom 240px, right 10% bottom 250px; } .trainingsband { isolation: isolate; overflow: hidden; position: relative; view-timeline: --abschnitt block; border-radius: 28px; background: var(--ca-blau-verlauf) !important; color: rgba(255, 255, 255, .9); } .trainingsband::before { background-image: var(--ca-cluster-a); background-size: 150px auto; background-position: left 26% bottom 210px; } .trainingsband::after { background-image: var(--ca-cluster-b), var(--ca-gross-g); background-size: 220px auto, 170px auto; background-position: right 2% top 230px, left 33% top 360px; } @supports (animation-timeline: view()) { .wp-block-cover.is-style-hero .wp-block-cover__background::before, .trainingsband::before { animation: pfeilHinten linear both; animation-timeline: --abschnitt; animation-range: cover; } .wp-block-cover.is-style-hero .wp-block-cover__background::after, .trainingsband::after { animation: pfeilVorne linear both; animation-timeline: --abschnitt; animation-range: cover; } } @keyframes pfeilHinten { from { transform: translateY(110px); } to { transform: translateY(-110px); } } @keyframes pfeilVorne { from { transform: translateY(200px); } to { transform: translateY(-200px); } } /* Trainingsband: Text weiß, Karten weiß mit Sechseck */ .trainingsband .training-spalten h2 { color: #fff; } .trainingsband .is-style-dachzeile { color: var(--wp--preset--color--gruen-hell); } .trainingsband .training-text, .trainingsband .is-style-haken li { color: rgba(255, 255, 255, .9); } .trainingsband .is-style-haken li::before { background-color: var(--wp--preset--color--gruen-hell); } .trainingsband .training-badge img { border-radius: 6px; } .trainingsband .kurskarte { border-color: transparent; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); } .kurskarte h3 { color: var(--wp--preset--color--blau); } .kurskarte h3::before { flex: 0 0 18px; height: 20px; border-radius: 0; clip-path: var(--ca-sechseck); } .kurs-jira, .kurs-confluence { --akzent: var(--wp--preset--color--blau); } /* Helle Abschnitte: Grau aus dem Styleguide, weicher Übergang, Musterausschnitt in einer Ecke */ .alignfull.has-hellgrau-background-color { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #fff 0, #E1E6F0 200px, #E1E6F0 calc(100% - 200px), #fff 100%) !important; } .alignfull.has-hellgrau-background-color::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 60px; right: 0; width: 460px; height: 340px; background: var(--ca-muster) repeat; background-size: 78px 40px; opacity: .32; -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 8%, transparent 70%); mask-image: radial-gradient(ellipse at 100% 0%, #000 8%, transparent 70%); } .alignfull.has-hellgrau-background-color:nth-child(even of .has-hellgrau-background-color)::before { right: auto; left: 0; top: auto; bottom: 60px; -webkit-mask-image: radial-gradient(ellipse at 0% 100%, #000 8%, transparent 70%); mask-image: radial-gradient(ellipse at 0% 100%, #000 8%, transparent 70%); } .alignfull.has-hellgrau-background-color .is-style-produkt-mini, .alignfull.has-hellgrau-background-color .is-style-panel, .alignfull.has-hellgrau-background-color .is-style-kachel-hell { border-color: transparent; box-shadow: 0 1px 2px rgba(0, 54, 89, .06), 0 8px 24px rgba(0, 76, 121, .07); } /* Referenzen: weiße Karten, Kante oben von Grün nach Blau */ .is-style-kachel:has(.logo-kasten) { position: relative; overflow: hidden; background: #fff; color: var(--wp--preset--color--fliesstext); justify-content: flex-start; border: 1px solid var(--wp--preset--color--hellgrau); border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 76, 121, .06); transition: transform .15s ease, box-shadow .15s ease; } .is-style-kachel:has(.logo-kasten)::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--wp--preset--color--gruen), var(--wp--preset--color--blau)); } .is-style-kachel:has(.logo-kasten):hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 76, 121, .12); } .is-style-kachel:has(.logo-kasten) .logo-kasten { background: transparent; padding: 6px 0; } .is-style-kachel:has(.logo-kasten) .is-style-dachzeile { color: var(--wp--preset--color--gruen-dunkel); min-height: 0; } .is-style-kachel:has(.logo-kasten) p:last-child { color: var(--wp--preset--color--grau); } /* Ablaufschritte: Zahl im Sechseck */ .kachel-zahl { display: inline-flex !important; align-items: center; justify-content: center; width: 46px; height: 52px; margin: 0 0 12px !important; clip-path: var(--ca-sechseck); background: var(--wp--preset--color--gruen); color: #fff !important; font-size: 20px !important; font-weight: 900; } /* Folgen-Panel (C³-Seiten): Blau tief, Akzente grün statt hellblau */ .is-style-folgen { background: linear-gradient(135deg, #004C79 0%, #003659 100%); } .is-style-folgen::after { background: radial-gradient(circle, rgba(90, 201, 138, .22) 0%, rgba(90, 201, 138, 0) 70%); } .is-style-folgen .is-style-dachzeile { color: var(--wp--preset--color--gruen-hell); } .is-style-folgen li::before { border-color: var(--wp--preset--color--gruen-hell); color: var(--wp--preset--color--gruen-hell); } /* Überschriften in Nunito Black, normal geschrieben; Dachzeile Black */ h1, h2 { letter-spacing: -.01em; } .is-style-dachzeile { font-weight: 900; letter-spacing: .14em; } @media (max-width: 781px) { .wp-block-cover.is-style-hero .wp-block-cover__background::before, .trainingsband::before { display: none; } .wp-block-cover.is-style-hero .wp-block-cover__background::after { background-size: 180px auto, 100px auto, 0 0; background-position: right -20px top 240px, left 70% bottom 230px, 0 0; } .trainingsband::after { background-size: 170px auto, 0 0; } .alignfull.has-hellgrau-background-color::before { width: 260px; height: 220px; } } @media (prefers-reduced-motion: reduce) { .wp-block-cover.is-style-hero .wp-block-cover__background::before, .wp-block-cover.is-style-hero .wp-block-cover__background::after, .trainingsband::before, .trainingsband::after { animation: none !important; } } /* ---------- Kundenlogos weiß am Fuß des Hero ---------- */ .wp-block-cover.is-style-hero:has(.kundenreihe) { padding-bottom: 96px !important; } .wp-block-cover.is-style-hero:has(.kundenreihe) .hero-bruecke { top: calc(50% - 70px); width: min(44%, 580px); } .kundenreihe { display: flex !important; align-items: center; gap: 28px; margin-top: 56px !important; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); position: relative; z-index: 2; } .kundenreihe > * { margin: 0 !important; } .wp-block-cover.is-style-hero .kunden-label { flex: 0 0 auto; max-width: 120px; font-size: 11px !important; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: rgba(255, 255, 255, .6); } .kunden-logos { flex: 1; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 30px; } .kunden-logos > * { margin: 0 !important; line-height: 0; } .kunden-logos img { display: block; height: 26px; width: auto; opacity: .86; transition: opacity .15s ease; } .kunden-logos a:hover img, .kunden-logos a:focus-visible img { opacity: 1; } .kunden-logos a:focus-visible { outline: 2px solid var(--wp--preset--color--gruen-hell); outline-offset: 6px; border-radius: 4px; } .kunden-logos .kunde-buerkert { height: 30px; } .kunden-logos .kunde-db { height: 28px; } .kunden-logos .kunde-zott { height: 40px; } .kunden-logos .kunde-lapp { height: 20px; } .kunden-logos .kunde-ks { height: 24px; } .kunden-logos .kunde-sma { height: 26px; } .kunden-logos .kunde-bsr { height: 32px; } .kunden-logos .kunde-stabilus { height: 12px; } @media (max-width: 781px) { .kundenreihe { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 36px !important; } .wp-block-cover.is-style-hero .kunden-label { max-width: none; } .kunden-logos { justify-content: flex-start; gap: 18px 26px; } .kunden-logos img { transform: scale(.85); transform-origin: left center; } } /* Musterausschnitt in kurzen hellen Abschnitten nicht in den weißen Übergang ragen lassen */ .alignfull.has-hellgrau-background-color:nth-child(even of .has-hellgrau-background-color)::before { bottom: 40px; height: min(240px, 60%); } /* ---------- Referenzen: drei Fallbeispiele mit Ausgangslage, Lösung, Ergebnis ---------- */ .fallgrid { display: grid !important; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; align-items: stretch; margin-top: var(--wp--preset--spacing--40) !important; } .fallkarte { display: flex !important; flex-direction: column; background: #fff; border: 1px solid var(--wp--preset--color--hellgrau); border-radius: 18px; padding: 26px !important; box-shadow: 0 8px 24px rgba(0, 76, 121, .06); transition: transform .15s ease, box-shadow .15s ease; } .fallkarte:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0, 76, 121, .11); } .fallkarte-hervor { background: linear-gradient(160deg, #E1E6F0 0%, #E1E6F0 100%); border-color: transparent; } .fallkarte > * { margin: 0 !important; } .fb-kopf { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; } .fb-kopf > * { margin: 0 !important; } .fb-logo { line-height: 0; } .fb-logo img { max-height: 36px; max-width: 140px; width: auto; } .fb-logo .kunde-zott { max-height: 48px; } .fb-tag { font-size: 12px !important; font-weight: 700; color: var(--wp--preset--color--gruen-dunkel); background: rgba(71, 178, 122, .12); border-radius: 999px; padding: 4px 10px; white-space: nowrap; } .fallkarte .fb-zahl { margin-top: 22px !important; font-size: clamp(30px, 3vw, 38px) !important; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: var(--wp--preset--color--blau); } .fallkarte .fb-zz { margin-top: 6px !important; font-size: 15px !important; color: var(--wp--preset--color--grau); } .fallkarte .fb-label { margin-top: 18px !important; font-size: 11px !important; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--gruen-dunkel); } .fallkarte .fb-label + .fb-text { margin-top: 4px !important; } .fallkarte .fb-text { font-size: 15px !important; line-height: 1.5; } .fallkarte .fb-zitat { margin-top: 20px !important; padding: 16px 18px !important; background: #fff; border: 0; border-left: 4px solid var(--wp--preset--color--gruen); border-radius: 12px; } .fallkarte .fb-zitat p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; font-style: italic; } .fallkarte .fb-zitat cite { display: block; font-style: normal; font-size: 13px; color: var(--wp--preset--color--grau); line-height: 1.4; } .fallkarte .fb-zitat cite strong { color: var(--wp--preset--color--blau); font-size: 14px; } .fallkarte .fb-mehr { margin-top: auto !important; padding-top: 22px; font-weight: 900; } .fallkarte .fb-mehr a { color: var(--wp--preset--color--blau); text-decoration: none; } .fallkarte .fb-mehr a::after { content: " →"; color: var(--wp--preset--color--gruen); } .fallkarte .fb-mehr a:hover { text-decoration: underline; } @media (max-width: 960px) { .fallgrid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .fallkarte, .fallkarte:hover { transition: none; transform: none; } } /* Hero-Inhalt in der Inhaltsbreite wie die übrigen Abschnitte; Kundenreihe über die volle Breite */ .wp-block-cover.is-style-hero .wp-block-cover__inner-container { width: 100% !important; max-width: var(--wp--style--global--content-size, 1040px) !important; margin-left: auto !important; margin-right: auto !important; } .wp-block-cover.is-style-hero .hero-text { margin-left: 0 !important; } .wp-block-cover.is-style-hero .kundenreihe { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .wp-block-cover.is-style-hero .wp-block-cover__background::before { display: none; } .fb-logo .kunde-zott { max-height: 56px; } /* Fallbeispiele: vier Karten im 2er-Raster, Karten mit Zitat hervorgehoben */ .fallgrid { grid-template-columns: repeat(2, 1fr); } .fallgrid .fallkarte:not(.fallkarte-hervor) .fb-mehr { padding-top: 18px; } @media (max-width: 781px) { .fallgrid { grid-template-columns: 1fr; } } /* Fallbeispiele: WordPress setzt zwischen Gruppen-Kindern einen Abstand oben – im Raster entfernen, damit alle Karten oben bündig und gleich hoch sind */ .fallgrid > * { margin: 0 !important; height: auto; align-self: stretch; } /* ---------- Integrierte Toolchain (Startseite): Kette, Leistungen, C³-Suite, weitere Produkte ---------- */ :root { --ca-doppelpfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 360'%3E%3Cpath fill='%2347B27A' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3Cpath fill='%2347B27A' transform='translate(161 158) scale(-1 1)' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3C/svg%3E"); } .kette { display: flex !important; align-items: center; justify-content: center; gap: 14px; margin-top: var(--wp--preset--spacing--40) !important; flex-wrap: wrap; } .kette > * { margin: 0 !important; } .kette-tool { min-width: 190px; text-align: center; padding: 14px 28px; border-radius: 999px; background: #fff; border: 1.5px solid var(--wp--preset--color--rand); font-weight: 900; font-size: 18px !important; color: var(--wp--preset--color--blau); } .kette-mitte { background: var(--wp--preset--color--blau); border-color: var(--wp--preset--color--blau); color: #fff; min-width: 240px; box-shadow: 0 10px 24px rgba(0, 76, 121, .22); } .kette-pfeil { width: 22px; height: 46px; background: var(--ca-doppelpfeil) center / contain no-repeat; } .kette-pfeil .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .kette-leistungen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px !important; } .kette-leistungen span { font-size: 14px; font-weight: 700; color: var(--wp--preset--color--blau); background: rgba(0, 76, 121, .07); border-radius: 999px; padding: 6px 14px; } .c3-block { margin-top: var(--wp--preset--spacing--50) !important; } .c3-block > .is-style-dachzeile { text-align: center; } .c3-ueberschrift { font-size: clamp(22px, 2.4vw, 28px) !important; font-weight: 900; color: var(--wp--preset--color--blau); margin-top: 0 !important; } .c3grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px !important; } .c3grid > * { margin: 0 !important; } .c3karte { position: relative; overflow: hidden; background: #fff; border-radius: 16px; padding: 22px !important; box-shadow: 0 1px 2px rgba(0, 54, 89, .06), 0 10px 26px rgba(0, 76, 121, .08); transition: transform .15s ease, box-shadow .15s ease; } .c3karte::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--wp--preset--color--gruen), var(--wp--preset--color--blau)); } .c3karte:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0, 76, 121, .14); } .c3karte > * { margin: 0 !important; } .c3-kopf { display: flex !important; align-items: center; gap: 12px; } .c3-kopf > *, .c3-titel > * { margin: 0 !important; } .c3-logo { line-height: 0; } .c3-logo img { width: 48px; height: auto; } .c3-name { font-size: 26px !important; font-weight: 900; line-height: 1; } .c3-name a { color: var(--wp--preset--color--blau); text-decoration: none; } .c3-name a::after { content: ""; position: absolute; inset: 0; } .c3-unter { font-size: 14px !important; font-weight: 700; color: var(--wp--preset--color--gruen-dunkel); margin-top: 2px !important; } .c3-text { margin-top: 14px !important; font-size: 15px !important; line-height: 1.5; color: var(--wp--preset--color--grau); } .c3karte:has(a:focus-visible) { outline: 3px solid var(--wp--preset--color--gruen); outline-offset: 2px; } .c3-vorteile { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px !important; } .c3-vorteile span { font-size: 14px; font-weight: 900; color: #fff; background: var(--wp--preset--color--gruen); border-radius: 999px; padding: 6px 14px; } .weitere-titel { margin-top: var(--wp--preset--spacing--50) !important; text-align: center; font-size: 12px !important; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--grau); } .weitere-produkte { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px !important; } .weitere-produkte > * { margin: 0 !important; } .weitere-produkte .is-style-produkt-mini { padding: 10px 12px !important; box-shadow: none !important; border: 1px solid var(--wp--preset--color--rand) !important; } .weitere-produkte .produkt-mini-logo { flex-basis: 36px; } .weitere-produkte .produkt-mini-logo img { width: 36px; } .weitere-produkte .produkt-mini-name { font-size: 14px !important; } .weitere-produkte .produkt-mini-zeile { font-size: 13px !important; } .kunden-logos .kunde-yaskawa2 { height: 22px; } @media (max-width: 781px) { .c3grid { grid-template-columns: 1fr; } .kette { flex-direction: column; gap: 6px; } .kette-tool, .kette-mitte { min-width: 220px; } .kette-pfeil { transform: rotate(90deg); } } @media (prefers-reduced-motion: reduce) { .c3karte, .c3karte:hover { transition: none; transform: none; } } /* Hero: zweiter Button (Umriss) und Pause-Knopf für die Animation */ .wp-block-cover.is-style-hero .wp-block-buttons { gap: 12px; flex-wrap: wrap; } .wp-block-cover.is-style-hero .is-style-outline .wp-block-button__link { background: transparent !important; color: #fff !important; border: 2px solid rgba(255, 255, 255, .7) !important; padding: 12px 24px; } .wp-block-cover.is-style-hero .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .12) !important; border-color: #fff !important; } .hero-pause { position: absolute; top: 20px; right: 20px; z-index: 4; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 0; } .hero-pause span { display: block; width: 3px; height: 12px; border-radius: 2px; background: #fff; } .hero-pause:hover, .hero-pause:focus-visible { background: rgba(255, 255, 255, .2); outline: none; border-color: #fff; } .hero-pause:focus-visible { box-shadow: 0 0 0 3px var(--wp--preset--color--gruen-hell); } /* ========================================================================== Styleguide 2026, Fassung „ruhig“ (Theme 0.6): Weiß als Grund, Nachtblau als Textfarbe, Grün als einziger Akzent, eine Verlaufsfläche (Hero), feine Linien, Karten mit Kante Grün→Blau, Dachzeile mit Pfeil, echte Fotos. Überschreibt die dunkleren Regeln weiter oben. ========================================================================== */ :root { --ca-text: #004C79; --ca-text-80: #4B5575; --ca-text-60: #4B5575; --ca-text-45: #4B5575; --ca-linie: #E1E6F0; --ca-hell: #E1E6F0; --ca-gruen-text: #267348; --ca-hero-verlauf: linear-gradient(115deg, #003659 0%, #004C79 45%, #47B27A 100%); --ca-kante: linear-gradient(90deg, #47B27A, #004C79); --ca-pfeil-gruen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 202'%3E%3Cpath fill='%2347B27A' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3C/svg%3E"); --ca-pfeil-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 161 202'%3E%3Cpath fill='%239FE0BC' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3C/svg%3E"); } /* Kopfzeile weiß mit Linie */ .site-header { background: rgba(255, 255, 255, .96) !important; color: var(--ca-text) !important; border-bottom: 1px solid var(--ca-linie); } .site-header .wp-block-navigation a { color: var(--ca-text-80); font-weight: 700; } .site-header .wp-block-navigation a:hover { color: var(--ca-gruen-text); } .site-header .wp-block-navigation__submenu-container { background: #fff !important; border: 1px solid var(--ca-linie) !important; box-shadow: 0 12px 30px rgba(0, 54, 89, .1); } .site-header .wp-block-navigation__submenu-container a { color: var(--ca-text) !important; } .site-header .wp-block-navigation__responsive-container-open, .site-header .wp-block-navigation__responsive-container-close { color: var(--ca-text); } .site-header .crossalm-sprachwechsel a, .site-header .sprachwechsel a { color: var(--ca-text-60) !important; } /* Dachzeile: Grün mit Pfeil */ .is-style-dachzeile { color: var(--ca-gruen-text) !important; font-size: 13px !important; letter-spacing: .1em; display: block; } .is-style-dachzeile::before { content: ""; display: inline-block; width: 11px; height: 14px; margin-right: 9px; vertical-align: -1px; background: var(--ca-pfeil-gruen) no-repeat center / contain; } .wp-block-cover.is-style-hero .is-style-dachzeile { color: #5AC98A !important; } .wp-block-cover.is-style-hero .is-style-dachzeile::before { background-image: var(--ca-pfeil-hell); } h1 mark, h2 mark { background: transparent !important; } .akzent { color: var(--ca-gruen-text); } /* Hero: eine Verlaufsfläche, schräge Kante, zarte Pfeile */ .wp-block-cover.is-style-hero { clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); padding-bottom: 150px !important; } .wp-block-cover.is-style-hero .wp-block-cover__background { background: var(--ca-hero-verlauf) !important; } .wp-block-cover.is-style-hero .wp-block-cover__background::before { display: none; } .wp-block-cover.is-style-hero .wp-block-cover__background::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 202'%3E%3Cg fill='%23fff'%3E%3Cpath fill-opacity='.05' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3Cpath fill-opacity='.08' transform='translate(170 0)' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3Cpath fill-opacity='.12' transform='translate(340 0)' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3C/g%3E%3C/svg%3E") !important; background-size: 560px auto !important; background-position: right -40px top 0 !important; opacity: 1; animation: none !important; inset: 0 !important; } .wp-block-cover.is-style-hero h1 .akzent, .wp-block-cover.is-style-hero h1 mark { color: #5AC98A !important; } .wp-block-cover.is-style-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--wp--preset--color--gruen) !important; color: #fff !important; } @media (max-width: 820px) { .wp-block-cover.is-style-hero { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); padding-bottom: 90px !important; } } .hero-raster { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; } .hero-raster > * { margin: 0 !important; } .hero-abzeichen { margin: 0 0 22px !important; } .hero-abzeichen a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 7px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; } .hero-abzeichen b { background: var(--wp--preset--color--gruen); border-radius: 999px; padding: 2px 10px; font-size: 12px; letter-spacing: .06em; } .hero-abzeichen a:hover { background: rgba(255, 255, 255, .2); } /* Brücke: SAP Cloud ALM oben, Jira und ServiceNow darunter, Doppelpfeile dazwischen */ .bruecke2 { position: relative; height: 360px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 580 380' preserveAspectRatio='none'%3E%3Cpath d='M100 250 Q290 40 480 250' fill='none' stroke='%23fff' stroke-opacity='.45' stroke-width='2' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } .bruecke2 > * { margin: 0 !important; } .brk-kachel { position: absolute; background: #fff; border-radius: 16px; padding: 16px 22px !important; width: 36%; box-shadow: 0 24px 48px rgba(0, 20, 40, .28); color: var(--ca-text) !important; line-height: 1.25; } .brk-kachel small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ca-text-45); margin-bottom: 2px; } .brk-kachel strong { font-size: 20px; font-weight: 900; } .brk-mitte { left: 30%; top: 20px; width: 40%; border-top: 5px solid var(--wp--preset--color--gruen); } .brk-links { left: 0; top: 230px; } .brk-rechts { right: 0; top: 230px; } .brk-pfeil { position: absolute; width: 38px; height: 21px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 202'%3E%3Cpath fill='%237BD9A6' transform='translate(161 0) scale(-1 1)' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3Cpath fill='%237BD9A6' transform='translate(199 0)' d='M56.5 0.0 L56.2 0.8 L49.5 4.0 L36.2 12.0 L5.5 29.0 L2.0 32.5 L0.0 36.2 L0.0 43.0 L2.0 47.2 L48.0 93.5 L50.0 97.0 L50.8 99.8 L50.5 103.8 L48.0 108.5 L2.0 154.2 L0.8 157.5 L0.0 158.0 L0.0 165.0 L0.8 165.5 L1.0 167.2 L4.0 171.5 L51.5 198.8 L58.0 201.8 L61.5 202.0 L63.8 201.8 L66.2 200.5 L157.5 109.2 L160.5 104.8 L161.0 99.0 L158.8 94.0 L67.2 2.5 L63.2 0.8 L62.8 0.0Z'/%3E%3C/svg%3E") no-repeat center / contain; top: 145px; } .brk-pfeil-l { left: 24%; } .brk-pfeil-r { right: 24%; } @media (max-width: 900px) { .hero-raster { grid-template-columns: 1fr; } .bruecke2 { height: 300px; max-width: 520px; } .brk-links, .brk-rechts { top: 200px; } .brk-pfeil { top: 125px; } } /* Kundenlogos grau unter dem Hero */ .kundenleiste { padding: 8px 0 24px; } .kundenleiste .kunden-label { text-align: center; color: var(--ca-text-45); font-weight: 700; font-size: 14px !important; margin-bottom: 20px !important; } .kundenleiste .kunden-logos { justify-content: space-between; } .kundenleiste .kunden-logos img { filter: brightness(0) saturate(0); opacity: .4; } .kundenleiste .kunden-logos a:hover img { opacity: .7; } .kundenleiste .kunden-logos a:focus-visible { outline-color: var(--ca-gruen-text); } /* Helle Abschnitte: ruhiges Hellgrau ohne Muster */ .alignfull.has-hellgrau-background-color { background: var(--ca-hell) !important; } .alignfull.has-hellgrau-background-color::before { display: none !important; } /* Abschnittsköpfe links */ .kopf-links .abschnitt-lead { text-align: left; margin-left: 0 !important; max-width: 680px; color: var(--ca-text-80); } .kopf-links h2 { max-width: 820px; } /* Karten mit Kante Grün→Blau */ .kaesten { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: var(--wp--preset--spacing--40) !important; } .kaesten > * { margin: 0 !important; } .kasten { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--ca-linie); border-radius: 18px; padding: 28px 24px !important; } .kasten::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ca-kante); } .kasten h3 { font-size: 20px !important; margin: 0 0 10px !important; } .kasten p { color: var(--ca-text-60); font-size: 16px; } .kasten .kasten-links { margin-top: 16px !important; font-size: 14px; font-weight: 900; line-height: 1.9; } .kasten .kasten-links a { color: var(--ca-gruen-text); text-decoration: none; display: block; } .kasten .kasten-links a:hover { text-decoration: underline; } @media (max-width: 1000px) { .kaesten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .kaesten { grid-template-columns: 1fr; } } /* C³-Abschnitt hell */ .c3-kopf-zeile { display: flex !important; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; } .c3-kopf-zeile > * { margin: 0 !important; } .c3-kopf-zeile .wp-block-buttons { flex: none; } .c3grid { margin-top: var(--wp--preset--spacing--40) !important; } .c3karte { background: #fff !important; border: 0 !important; border-radius: 18px !important; box-shadow: 0 1px 0 var(--ca-linie); } .c3karte::before { display: none !important; } .c3-vorteile { justify-content: flex-start !important; } .c3-vorteile span { background: #fff !important; color: var(--ca-text) !important; border: 1px solid var(--ca-linie); font-weight: 700; } .c3-vorteile span::before { content: "✓ "; color: var(--ca-gruen-text); font-weight: 900; } .weitere-titel { margin-top: var(--wp--preset--spacing--50) !important; font-weight: 900; color: var(--ca-text-60); } .produktzeilen { border-bottom: 1px solid var(--ca-linie); } .produktzeilen > * { margin: 0 !important; } .produktzeile a { display: grid; grid-template-columns: minmax(0, 380px) 1fr 24px; gap: 16px; padding: 15px 0; border-top: 1px solid var(--ca-linie); color: var(--ca-text); text-decoration: none; font-size: 16px; } .produktzeile a strong { font-weight: 900; } .produktzeile a span { color: var(--ca-text-60); } .produktzeile a::after { content: "→"; color: var(--ca-gruen-text); font-weight: 900; text-align: right; } .produktzeile a:hover strong { color: var(--ca-gruen-text); } @media (max-width: 700px) { .produktzeile a { grid-template-columns: 1fr 24px; } .produktzeile a span { grid-column: 1; grid-row: 2; } .produktzeile a::after { grid-row: 1 / 3; grid-column: 2; align-self: center; } } /* Referenzen: Karte mit Branchenfoto, weißem Kundenlogo und Kennzahl */ .refgrid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: var(--wp--preset--spacing--40) !important; } .refgrid > * { margin: 0 !important; } .refkarte { background: #fff; border: 1px solid var(--ca-linie); border-radius: 18px; overflow: hidden; display: flex !important; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; } .refkarte:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0, 54, 89, .12); } .refkarte > * { margin: 0 !important; } .ref-bild { position: relative; height: 180px; line-height: 0; } .ref-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 54, 89, 0) 35%, rgba(0, 54, 89, .85) 100%); } .ref-bild .ref-foto { width: 100%; height: 100%; object-fit: cover; } .ref-bild .ref-logo { position: absolute; left: 20px; bottom: 16px; height: 24px; width: auto; max-width: 45%; z-index: 1; } .ref-bild .ref-logo.kunde-zott { height: 34px; bottom: 12px; } .ref-bild .ref-branche { position: absolute; right: 18px; bottom: 18px; z-index: 1; line-height: 1.2; color: rgba(255, 255, 255, .88); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .ref-zahl { padding: 22px 22px 0 !important; display: flex; align-items: center; gap: 10px; font-size: clamp(26px, 2.6vw, 36px) !important; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; color: var(--ca-text); } .ref-zahl::before { content: ""; flex: none; width: 17px; height: 22px; background: var(--ca-pfeil-gruen) no-repeat center / contain; } .ref-text { padding: 10px 22px 0 !important; color: var(--ca-text-60); font-size: 15px; flex: 1; } .ref-mehr { padding: 16px 22px 22px !important; font-size: 14px; font-weight: 900; } .ref-mehr a { color: var(--ca-gruen-text); text-decoration: none; } .ref-mehr a::after { content: " →"; } .ref-mehr a::before { content: ""; position: absolute; inset: 0; } .refkarte { position: relative; } .ref-zitat { display: grid !important; grid-template-columns: 70px minmax(0, 1fr) 300px; gap: 30px; align-items: center; margin-top: 28px !important; background: var(--ca-hell); border-radius: 22px; padding: 40px 44px !important; } .ref-zitat > * { margin: 0 !important; } .ref-zitat-pfeil { width: 56px; height: 70px; background: var(--ca-pfeil-gruen) no-repeat center / contain; } .ref-zitat-text { font-size: clamp(20px, 2vw, 25px) !important; line-height: 1.38; font-weight: 700; color: var(--ca-text); } .ref-zitat-wer { border-left: 1px solid var(--ca-linie); padding-left: 28px !important; color: var(--ca-text-60); font-size: 15px; } .ref-zitat-wer strong { display: block; color: var(--ca-text); font-size: 17px; font-weight: 900; } .ref-zitat-wer a { display: inline-block; margin-top: 12px; color: var(--ca-gruen-text); font-weight: 900; text-decoration: none; } @media (max-width: 1000px) { .refgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ref-zitat { grid-template-columns: 1fr; padding: 30px !important; } .ref-zitat-pfeil { width: 36px; height: 45px; } .ref-zitat-wer { border-left: 0; padding-left: 0 !important; } } @media (max-width: 600px) { .refgrid { grid-template-columns: 1fr; } } /* Trainings hell statt dunkles Band */ .training-hell .training-spalten { gap: var(--wp--preset--spacing--50); } .training-hell .training-text { color: var(--ca-text-80); } .training-hell .kurskarte { background: #fff; border: 1px solid var(--ca-linie) !important; border-radius: 16px; box-shadow: none; } .training-hell .kurskarte h3::before { display: none; } .training-hell .training-badge img { height: 52px; width: auto; } /* Über uns: Fotocollage */ .collage { display: grid !important; grid-template-columns: 1.6fr 1fr; grid-template-rows: 230px 230px; gap: 14px; } .collage > * { margin: 0 !important; border-radius: 20px; overflow: hidden; line-height: 0; } .collage > :first-child { grid-row: 1 / 3; } .collage img { width: 100%; height: 100%; object-fit: cover; } .collage .bild-oben img { object-position: 50% 30%; } @media (max-width: 700px) { .collage { grid-template-rows: 160px 160px; } } /* Kontakt: Foto mit Pfeil */ .kontakt-foto { position: relative; line-height: 0; margin-bottom: 26px !important; } .kontakt-foto img { width: 100%; height: 320px; object-fit: cover; object-position: 60% 40%; border-radius: 22px; } .kontakt-foto::after { content: ""; position: absolute; right: -22px; bottom: -24px; width: 76px; height: 95px; background: var(--ca-pfeil-gruen) no-repeat center / contain; } @media (max-width: 781px) { .kontakt-foto::after { right: 8px; width: 50px; height: 62px; } } /* 0.6.0 Feinschliff */ .ref-zahl { font-size: clamp(24px, 2.1vw, 30px) !important; white-space: nowrap; } .weitere-titel { text-align: left !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 16px !important; } footer.has-nacht-background-color { background: #004C79 !important; } /* 0.6.1 Brücke als Raster statt absolut positioniert: stabil in jeder Breite und im Editor */ .bruecke2 { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(24px, .45fr) minmax(0, 1fr); grid-template-rows: auto 64px auto; height: auto !important; max-width: 560px; width: 100%; margin-left: auto !important; padding: 8px 0 12px; } .bruecke2 > .brk-kachel, .bruecke2 > .brk-pfeil { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: auto; } .bruecke2 > .brk-mitte { grid-column: 1 / 4; grid-row: 1; justify-self: center; width: min(100%, 250px); } .bruecke2 > .brk-links { grid-column: 1; grid-row: 3; } .bruecke2 > .brk-rechts { grid-column: 3; grid-row: 3; } .bruecke2 > .brk-pfeil { width: 38px; height: 21px; align-self: center; } .bruecke2 > .brk-pfeil-l { grid-column: 1; grid-row: 2; justify-self: end; margin-right: -10px !important; } .bruecke2 > .brk-pfeil-r { grid-column: 3; grid-row: 2; justify-self: start; margin-left: -10px !important; } @media (max-width: 900px) { .bruecke2 { margin: 32px auto 0 !important; } } @media (max-width: 560px) { .bruecke2 { grid-template-rows: auto 48px auto; } .brk-kachel { padding: 12px 14px !important; border-radius: 12px; } .brk-kachel strong { font-size: 16px; } .brk-kachel small { font-size: 10px; } } /* 0.6.2 Fassung ruhig auf Unterseiten: keine dunklen Panels und Kacheln, keine Sechseck-Zahlen */ .bruecke2 > .block-list-appender, .hero-raster > .block-list-appender { display: none !important; } .is-style-folgen, .is-style-usecases, .is-style-kachel:not(:has(.logo-kasten)) { position: relative; overflow: hidden; background: #fff !important; color: var(--ca-text-80) !important; border: 1px solid var(--ca-linie); border-radius: 18px; box-shadow: none !important; } .is-style-folgen::after { display: none !important; } .is-style-folgen::before, .is-style-usecases::before, .is-style-kachel:not(:has(.logo-kasten))::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ca-kante); } .is-style-folgen :where(h2, h3, h4), .is-style-usecases :where(h2, h3, h4), .is-style-kachel:not(:has(.logo-kasten)) :where(h2, h3, h4) { color: var(--ca-text) !important; } .is-style-folgen .is-style-dachzeile { color: var(--ca-gruen-text) !important; } .is-style-folgen li { color: var(--ca-text) !important; border-top-color: var(--ca-linie) !important; } .is-style-folgen li::before { border-color: var(--ca-gruen-text) !important; color: var(--ca-gruen-text) !important; } .is-style-usecases .is-style-haken li { border-top-color: var(--ca-linie) !important; color: var(--ca-text-80); } .is-style-usecases .is-style-haken li::before { background-color: var(--wp--preset--color--gruen) !important; } .is-style-usecases a:not(.wp-element-button), .is-style-kachel:not(:has(.logo-kasten)) a:not(.wp-element-button) { color: var(--ca-gruen-text) !important; font-weight: 900; } .is-style-kachel:not(:has(.logo-kasten)) { text-align: left; justify-content: flex-start; padding: 24px 22px !important; } .is-style-kachel:not(:has(.logo-kasten)) p { color: var(--ca-text-60); } .kachel-zahl { clip-path: none !important; background: none !important; width: auto !important; height: auto !important; display: flex !important; align-items: center; gap: 8px; justify-content: flex-start; color: var(--ca-text) !important; font-size: 30px !important; font-weight: 900; margin: 0 0 10px !important; } .kachel-zahl::before { content: ""; width: 15px; height: 19px; background: var(--ca-pfeil-gruen) no-repeat center / contain; } .has-text-align-center .kachel-zahl, .is-style-kachel-hell .kachel-zahl { justify-content: center; } /* 0.6.2 Dunkle Abschnitte (z. B. Zusammenspiel auf der C³-Übersicht) werden hell */ .alignfull.has-nacht-background-color:not(footer), .alignfull.has-blau-background-color:not(footer) { background: var(--ca-hell) !important; color: var(--ca-text-80) !important; } .alignfull.has-nacht-background-color:not(footer) :where(h1, h2, h3, h4), .alignfull.has-blau-background-color:not(footer) :where(h1, h2, h3, h4) { color: var(--ca-text); } .alignfull.has-nacht-background-color:not(footer) a:not(.wp-element-button), .alignfull.has-blau-background-color:not(footer) a:not(.wp-element-button) { color: var(--ca-gruen-text); } .alignfull.has-nacht-background-color:not(footer) .is-style-dachzeile, .alignfull.has-blau-background-color:not(footer) .is-style-dachzeile { color: var(--ca-gruen-text) !important; } .alignfull.has-nacht-background-color:not(footer)::before, .alignfull.has-nacht-background-color:not(footer)::after { display: none !important; } .zusammenspiel .system-box { background: #fff; border-color: var(--ca-linie); } .zusammenspiel h3 { color: var(--ca-text) !important; } .zusammenspiel .mitte h3 { color: var(--ca-gruen-text) !important; } .zusammenspiel .system-item { background: var(--ca-hell); color: var(--ca-text); } .zusammenspiel .connector-item::before { background: repeating-linear-gradient(90deg, var(--wp--preset--color--gruen) 0 8px, transparent 8px 14px); } .zusammenspiel .connector-item span, .zusammenspiel .connector-item strong { background: var(--wp--preset--color--gruen); color: #fff; box-shadow: 0 0 0 6px var(--ca-hell); } .zusammenspiel-fazit { color: var(--ca-text-80) !important; } @media (max-width: 781px) { .zusammenspiel .connector-item::before { background: repeating-linear-gradient(180deg, var(--wp--preset--color--gruen) 0 8px, transparent 8px 14px); } } /* 0.6.2 Produktübersicht */ .kaesten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kasten-logo { margin: 0 0 14px !important; line-height: 0; } .kasten-logo img { height: 46px; width: auto; } .produktzeilen-wahl .produktzeile a { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 24px; } .produktzeilen-wahl .produktzeile a span { color: var(--ca-gruen-text); font-weight: 900; } @media (max-width: 1000px) { .kaesten-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .kaesten-3 { grid-template-columns: 1fr; } } .alignfull.has-hellgrau-background-color .ref-zitat { background: #fff; } /* 0.6.3 Vergleichstabelle und FAQ */ .vergleich { margin-top: var(--wp--preset--spacing--40) !important; overflow-x: auto; } .vergleich table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 720px; } .vergleich th { text-align: left; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ca-text-60); border: 0 !important; border-bottom: 2px solid var(--ca-linie) !important; padding: 10px 14px; background: none; } .vergleich td { padding: 13px 14px; border: 0 !important; border-bottom: 1px solid var(--ca-linie) !important; color: var(--ca-text-80); vertical-align: top; } .vergleich td strong { color: var(--ca-text); } .vergleich.is-style-stripes tbody tr:nth-child(odd) { background: var(--ca-hell); } .vergleich.is-style-stripes { border-bottom: 0; } .vergleich figcaption { text-align: left; font-size: 13px; color: var(--ca-text-60); margin-top: 12px; } .vergleich figcaption a { color: var(--ca-gruen-text); } .faq-liste { max-width: 820px; margin-top: var(--wp--preset--spacing--40) !important; } .faq-liste > * { margin: 0 0 10px !important; } .faq { background: #fff; border: 1px solid var(--ca-linie); border-radius: 14px; padding: 0 22px; } .faq summary { cursor: pointer; list-style: none; padding: 18px 30px 18px 0; position: relative; font-weight: 900; color: var(--ca-text); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 22px; color: var(--ca-gruen-text); } .faq[open] summary::after { content: "–"; } .faq p { color: var(--ca-text-80); margin: 0 0 18px !important; } .faq a { color: var(--ca-gruen-text); font-weight: 700; } /* 0.6.4 Entscheidungsbaum (Produktübersicht) */ .eb-baum { margin-top: var(--wp--preset--spacing--50) !important; } .eb-baum, .eb-baum * { box-sizing: border-box; } .eb-baum .wp-block-group, .eb-baum p { margin-top: 0 !important; margin-bottom: 0 !important; } .eb-frage { width: max-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; text-align: center; background: var(--ca-text); color: #fff !important; border-radius: 16px; padding: 16px 26px !important; font-weight: 900; font-size: 19px !important; line-height: 1.3; } .eb-frage small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5AC98A; margin-bottom: 2px; } .eb-frage.eb-klein { background: #fff; color: var(--ca-text) !important; border: 2px solid var(--ca-text); font-size: 16px !important; padding: 12px 20px !important; } .eb-frage.eb-klein small { color: var(--ca-gruen-text); } .eb-ast { display: grid !important; gap: 28px; position: relative; padding-top: 34px; } .eb-ast-a { grid-template-columns: 3fr 5fr; } .eb-ast-b { grid-template-columns: 2fr 3fr; gap: 18px; } .eb-ast-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .eb-ast-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .eb-ast::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 17px; background: var(--wp--preset--color--rand); } .eb-ast > .eb-zweig { position: relative; padding-top: 17px; } .eb-ast > .eb-zweig::before { content: ""; position: absolute; top: 0; left: -14px; right: -14px; height: 2px; background: var(--wp--preset--color--rand); } .eb-ast-3 > .eb-zweig::before, .eb-ast-2 > .eb-zweig::before { left: -6px; right: -6px; } .eb-ast-b > .eb-zweig::before { left: -9px; right: -9px; } .eb-ast > .eb-zweig:first-child::before { left: 50%; } .eb-ast > .eb-zweig:last-child::before { right: 50%; } .eb-ast > .eb-zweig::after { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 17px; background: var(--wp--preset--color--rand); } .eb-antwort { position: relative; display: block; width: max-content; max-width: 100%; margin: 0 auto 18px !important; text-align: center; background: var(--ca-hell); border: 1px solid var(--wp--preset--color--rand); border-radius: 999px; padding: 6px 16px !important; font-weight: 900; font-size: 14px !important; color: var(--ca-text); } .eb-antwort::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 18px; background: var(--wp--preset--color--rand); } .eb-antwort + .eb-ast { padding-top: 16px; } .eb-antwort + .eb-ast::before { display: none; } .eb-blatt { position: relative; overflow: hidden; height: 100%; background: #fff; border: 1px solid var(--ca-linie); border-radius: 16px; padding: 16px 16px 14px !important; transition: transform .15s ease, box-shadow .15s ease; } .eb-blatt::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ca-kante); } .eb-blatt:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 54, 89, .12); } .eb-blatt.eb-star { border-color: var(--wp--preset--color--gruen); box-shadow: 0 10px 26px rgba(71, 178, 122, .18); } .eb-wenn { font-size: 12px !important; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--ca-text-45); } .eb-titel { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px !important; font-size: 17px !important; font-weight: 900; color: var(--ca-text); } .eb-titel img { height: 32px; width: auto; } .eb-neu { margin-left: auto; background: var(--wp--preset--color--gruen); color: #fff; font-size: 11px; font-weight: 900; border-radius: 999px; padding: 2px 9px; letter-spacing: .04em; } .eb-text { color: var(--ca-text-60); font-size: 14px !important; } .eb-mehr { margin-top: 10px !important; font-size: 14px !important; font-weight: 900; } .eb-mehr a { color: var(--ca-gruen-text); text-decoration: none; } .eb-mehr a::before { content: ""; position: absolute; inset: 0; } .eb-tipp { margin-top: 36px !important; display: flex; gap: 16px; align-items: center; background: var(--ca-hell); border-radius: 16px; padding: 18px 22px !important; color: var(--ca-text-80); } .eb-tipp::before { content: ""; flex: none; width: 22px; height: 28px; background: var(--ca-pfeil-gruen) no-repeat center / contain; } .eb-tipp strong { color: var(--ca-text); } .eb-tipp a { color: var(--ca-gruen-text); font-weight: 900; } @media (max-width: 1000px) { .eb-ast-a { grid-template-columns: 1fr; gap: 40px; } .eb-ast-a > .eb-zweig::before { display: none; } } @media (max-width: 700px) { .eb-ast-b, .eb-ast-3, .eb-ast-2 { grid-template-columns: 1fr; gap: 10px; } .eb-ast > .eb-zweig::before { display: none; } .eb-ast-3 > .eb-zweig, .eb-ast-2 > .eb-zweig { padding-top: 0; } .eb-ast-3 > .eb-zweig::after, .eb-ast-2 > .eb-zweig::after { display: none; } .eb-ast-b { gap: 36px; } .eb-frage { font-size: 17px !important; } } .eb-baum > .block-list-appender, .eb-ast > .block-list-appender, .eb-zweig > .block-list-appender { display: none !important; } /* 0.6.4 Entscheidungsbaum: Feinschliff */ .eb-baum { max-width: 1200px !important; width: 100%; } .eb-wenn { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .eb-antwort + .eb-frage { margin-top: 18px !important; } .eb-antwort + .eb-ast { padding-top: 18px; } .eb-tipp { display: block !important; position: relative; padding-left: 58px !important; } .eb-tipp::before { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); } .eb-wenn { display: block !important; font-size: 11px !important; letter-spacing: .03em !important; hyphens: auto; -webkit-hyphens: auto; } .eb-titel { gap: 6px; } .eb-titel img { height: 26px; } .eb-neu { font-size: 10px; padding: 1px 6px; } /* 0.6.5 Entscheidungsbaum: Abstände gegen die Null-Regel oben durchsetzen */ .eb-baum .eb-tipp { margin-top: 40px !important; } .eb-baum .eb-titel { margin: 8px 0 4px !important; } .eb-baum .eb-mehr { margin-top: 10px !important; } .eb-baum .eb-text { hyphens: auto; -webkit-hyphens: auto; } /* 0.6.6 Vergleichstabelle auf dem Handy: jede Zeile als Karte, Spaltennamen über den Werten */ @media (max-width: 700px) { .vergleich { overflow-x: visible; } .vergleich table { min-width: 0; } .vergleich thead { display: none; } .vergleich tbody, .vergleich tr, .vergleich td { display: block; width: 100%; box-sizing: border-box; } .vergleich tr { padding: 14px 16px; border-bottom: 1px solid var(--ca-linie); } .vergleich td { padding: 0 !important; border: 0 !important; } .vergleich td:first-child { font-size: 16px; margin-bottom: 4px; } .vergleich td:not(:first-child)::before { display: block; margin-top: 8px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ca-text-45); } .vergleich td:nth-child(2)::before { content: "Verbindet"; } .vergleich td:nth-child(3)::before { content: "Einsatz"; } .vergleich td:nth-child(4)::before { content: "Plattform"; } html[lang^="en"] .vergleich td:nth-child(2)::before { content: "Connects"; } html[lang^="en"] .vergleich td:nth-child(3)::before { content: "Use"; } html[lang^="en"] .vergleich td:nth-child(4)::before { content: "Platform"; } } /* 0.6.7 Über uns: Hero-Foto, Zahlenreihe, Zeitleiste, Galerie, Partner */ .ueber-hero-foto { margin: 0 !important; line-height: 0; } .ueber-hero-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 48px rgba(0, 20, 40, .3); } .zahlenreihe { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .zahlenreihe > * { margin: 0 !important; } .zahl-kasten { border-top: 4px solid transparent; border-image: var(--ca-kante) 1; padding-top: 6px; } .zahl-kasten .ref-zahl { padding: 12px 0 0 !important; white-space: normal; } .zahl-kasten .ref-text { padding: 6px 0 0 !important; } .zeitleiste { position: relative; margin-top: var(--wp--preset--spacing--40) !important; padding-left: 0; } .zeitleiste > * { margin: 0 !important; } .zl-punkt { display: grid !important; grid-template-columns: 120px 1fr; gap: 28px; position: relative; padding: 0 0 26px; } .zl-punkt > * { margin: 0 !important; } .zl-punkt::before { content: ""; position: absolute; left: 143px; top: 6px; bottom: -6px; width: 2px; background: var(--ca-linie); } .zl-punkt:last-child::before { display: none; } .zl-punkt::after { content: ""; position: absolute; left: 135px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--wp--preset--color--gruen); } .zl-jahr { text-align: right; font-weight: 900; font-size: 18px !important; color: var(--ca-gruen-text); line-height: 1.3; } .zl-text { padding-left: 22px !important; color: var(--ca-text-60); line-height: 1.45; } .zl-text strong { color: var(--ca-text); font-size: 17px; } .galerie { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 14px; margin-top: var(--wp--preset--spacing--40) !important; } .galerie > * { margin: 0 !important; } .galerie-bild { position: relative; border-radius: 18px; overflow: hidden; } .galerie-bild > * { margin: 0 !important; } .galerie-foto { height: 100%; line-height: 0; } .galerie-foto img { width: 100%; height: 100%; object-fit: cover; } .galerie-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px !important; background: linear-gradient(180deg, rgba(0, 54, 89, 0), rgba(0, 54, 89, .85)); color: #fff !important; font-size: 13px !important; font-weight: 700; line-height: 1.3; } .galerie-team { grid-column: span 2; grid-row: span 2; } .galerie-stand, .galerie-escape { grid-column: span 2; } .galerie-atlassian img, .galerie-dsag img { object-position: 50% 35%; } .partner-abzeichen { margin: 0 0 14px !important; height: 56px; display: flex; align-items: center; } .partner-abzeichen img { max-height: 56px; width: auto; max-width: 160px; } .karriere-hinweis { margin-top: 36px !important; } @media (max-width: 1000px) { .zahlenreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .zahlenreihe { grid-template-columns: 1fr 1fr; gap: 16px; } .galerie { grid-template-columns: 1fr; grid-auto-rows: 220px; } .galerie-team, .galerie-stand, .galerie-escape { grid-column: auto; grid-row: auto; } .zl-punkt { grid-template-columns: 70px 1fr; gap: 16px; } .zl-punkt::before { left: 85px; } .zl-punkt::after { left: 79px; } .zl-jahr { font-size: 15px !important; } } /* 0.6.9 Abschnittsüberschriften einfarbig (Denis 03.11.): kein grüner Teil mehr in h2; im Hero bleibt die Betonung */ h2 .akzent, h2.wp-block-heading .akzent { color: inherit; } /* 0.7.1 Werte-Leiste (Karriere): Werte ohne Kästen, große Kontur-Ziffern, feine Trennlinien */ .werte-leiste { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: var(--wp--preset--spacing--50) !important; } .werte-leiste > .wert { margin: 0 !important; padding: 4px 28px; border-left: 1px solid #E1E6F0; } .werte-leiste > .wert:first-child { border-left: 0; padding-left: 0; } .werte-leiste .wert-nr { margin: 0 0 14px !important; font-size: 64px !important; line-height: 1 !important; font-weight: 900; letter-spacing: -0.02em; color: transparent !important; -webkit-text-stroke: 1.5px #47B27A; } .werte-leiste .wert h3 { margin: 0 0 10px !important; font-size: 22px; color: #004C79; } .werte-leiste .wert h3::after { content: ""; display: block; width: 32px; height: 3px; margin-top: 10px; border-radius: 2px; background: #47B27A; } .werte-leiste .wert p:last-child { margin: 0 !important; font-size: 16px; line-height: 1.6; color: rgba(0, 54, 89, .72); } @media (max-width: 1000px) { .werte-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } .werte-leiste > .wert:nth-child(odd) { border-left: 0; padding-left: 0; } } @media (max-width: 600px) { .werte-leiste { grid-template-columns: 1fr; row-gap: 28px; } .werte-leiste > .wert { border-left: 0; padding: 0; } .werte-leiste .wert-nr { font-size: 48px !important; } } /* 0.7.2 Ankerwert in der Werte-Leiste (Karriere) */ .werte-leiste .wert-anker .wert-nr { display: flex; align-items: center; gap: 14px; } .werte-leiste .wert-anker .wert-nr::after { content: ""; flex: 0 0 auto; width: 44px; height: 44px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347B27A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V8'/%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'/%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3C/svg%3E") no-repeat center / contain; } .werte-leiste .wert-label { margin: 0 0 6px !important; font-size: 13px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #267348; } @media (max-width: 600px) { .werte-leiste .wert-anker .wert-nr::after { width: 34px; height: 34px; } } /* 0.7.3 Werte-Ziffern ohne Kontur: Nunito Black hat überlappende Konturen, die Kontur zeigte Kanten an den Innenecken */ .werte-leiste .wert-nr { color: rgba(71, 178, 122, .45) !important; -webkit-text-stroke: 0; } /* 0.7.4 / 0.8.1 Zeitleiste: alle Punkte als Kreis (nicht gefüllt), auf allen Seiten (Denis 04.11.) */ /* 0.7.5 Karriere: Einstieg mit Schieberegler Professionals / Werkstudierende */ .einstieg-schalter { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: var(--wp--preset--spacing--40) 0 0; padding: 5px; border-radius: 999px; background: #E1E6F0; } .einstieg-schalter::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: #339960; box-shadow: 0 4px 12px rgba(0, 54, 89, .18); transition: transform .25s ease; } .einstieg.zeigt-ws .einstieg-schalter::before { transform: translateX(100%); } .einstieg-schalter button { position: relative; z-index: 1; min-width: 190px; padding: 12px 26px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 800; font-size: 16px; color: #004C79; cursor: pointer; transition: color .25s ease; } .einstieg-schalter button[aria-selected="true"] { color: #fff; } .einstieg-schalter button:focus-visible { outline: 3px solid #47B27A; outline-offset: 2px; } .einstieg.zeigt-pro .ziel-ws, .einstieg.zeigt-ws .ziel-pro { display: none !important; } .einstieg-panel { animation: einstieg-ein .3s ease; } @keyframes einstieg-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (max-width: 600px) { .einstieg-schalter { display: grid; width: 100%; } .einstieg-schalter button { min-width: 0; padding: 12px 10px; font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .einstieg-schalter::before, .einstieg-panel { transition: none; animation: none; } } /* 0.7.6 Karriere: Vorteile als Grafik (Bento-Raster mit Symbolen, Urlaub als große Zahl) */ .vorteile-grafik { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: var(--wp--preset--spacing--40) !important; } .vorteile-grafik > .vorteil { margin: 0 !important; padding: 30px 30px 32px; border-radius: 22px; background: #fff; box-shadow: 0 10px 30px rgba(0, 54, 89, .06); } .vorteile-grafik > .vorteil > * { margin: 0 !important; } .vorteile-grafik .vorteil::before { content: ""; display: block; width: 58px; height: 58px; margin-bottom: 20px; border-radius: 16px; background: #E1E6F0 var(--v-icon) no-repeat center / 30px; } .vorteile-grafik .vorteil h3 { margin-bottom: 8px !important; font-size: 21px; color: #004C79; } .vorteile-grafik .vorteil p { font-size: 16px; line-height: 1.6; color: rgba(0, 54, 89, .72); } .vorteile-grafik .v-projekte { grid-column: span 2; } .vorteile-grafik .v-team { grid-column: span 3; display: grid !important; grid-template-columns: 58px minmax(0, 1fr); column-gap: 24px; align-items: center; } .vorteile-grafik .v-team::before { grid-row: span 2; margin: 0; } .vorteile-grafik .v-urlaub { background: linear-gradient(135deg, #339960 0%, #47B27A 100%); color: #fff; } .vorteile-grafik .v-urlaub::before { display: none; } .vorteile-grafik .v-urlaub .vorteil-zahl { font-size: 88px !important; line-height: .9 !important; font-weight: 900; color: #fff; letter-spacing: -0.03em; margin-bottom: 6px !important; } .vorteile-grafik .v-urlaub h3, .vorteile-grafik .v-urlaub p { color: #fff; } .vorteile-grafik .v-projekte { --v-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B8552' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5z'/%3E%3Cpath d='m2 17 10 5 10-5'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E"); } .vorteile-grafik .v-lernen { --v-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B8552' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E"); } .vorteile-grafik .v-flex { --v-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B8552' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); } .vorteile-grafik .v-mobil { --v-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B8552' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='17.5' r='3.5'/%3E%3Ccircle cx='18.5' cy='17.5' r='3.5'/%3E%3Ccircle cx='15' cy='5' r='1'/%3E%3Cpath d='M12 17.5V14l-3-3 4-3 2 3h2'/%3E%3C/svg%3E"); } .vorteile-grafik .v-team { --v-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B8552' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); } @media (max-width: 1000px) { .vorteile-grafik { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vorteile-grafik .v-projekte, .vorteile-grafik .v-team { grid-column: span 2; } } @media (max-width: 600px) { .vorteile-grafik { grid-template-columns: 1fr; } .vorteile-grafik .v-projekte, .vorteile-grafik .v-team { grid-column: auto; } .vorteile-grafik .v-team { display: block !important; } .vorteile-grafik .v-team::before { margin-bottom: 20px; } } /* 0.7.7 Vorteile: „Flexibel arbeiten“ als breite Kachel oben (wichtigster Benefit laut Stepstone 2025) */ .vorteile-grafik .v-projekte { grid-column: auto; } .vorteile-grafik .v-flex { grid-column: span 2; } @media (max-width: 1000px) { .vorteile-grafik .v-projekte { grid-column: auto; } .vorteile-grafik .v-flex { grid-column: span 2; } } @media (max-width: 600px) { .vorteile-grafik .v-flex { grid-column: auto; } } /* 0.7.8 Zitat im Einstieg-Abschnitt (grauer Grund): weiße Fläche */ .einstieg .ref-zitat { background: #fff; grid-template-columns: 70px minmax(0, 1fr) 260px; } @media (max-width: 900px) { .einstieg .ref-zitat { grid-template-columns: 1fr; } .einstieg .ref-zitat-wer { border-left: 0; padding-left: 0 !important; } } /* 0.7.9 Im Editor beide Einstieg-Ansichten zeigen (der Schieberegler schaltet nur auf der Website) */ .editor-styles-wrapper .einstieg .ziel-pro, .editor-styles-wrapper .einstieg .ziel-ws { display: block !important; } .editor-styles-wrapper .einstieg .einstieg-panel::before { display: block; margin: 28px 0 -8px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #267348; } .editor-styles-wrapper .einstieg .ziel-pro::before { content: "Ansicht 1 · Professionals"; } .editor-styles-wrapper .einstieg .ziel-ws::before { content: "Ansicht 2 · Werkstudierende / Working students"; } /* 0.8.0 Karriereseite (DE 11069, EN 11071): graue (transparente) Schrift in Blau */ body.page-id-11069, body.page-id-11071 { --ca-text-80: #0D1428; --ca-text-60: #4B5575; --ca-text-45: #4B5575; } body.page-id-11069 .wert p:last-child, body.page-id-11071 .wert p:last-child, body.page-id-11069 .vorteil:not(.v-urlaub) p, body.page-id-11071 .vorteil:not(.v-urlaub) p, body.page-id-11069 .kasten p, body.page-id-11071 .kasten p, body.page-id-11069 .abschnitt-lead, body.page-id-11071 .abschnitt-lead, body.page-id-11069 .ref-zitat-wer, body.page-id-11071 .ref-zitat-wer, body.page-id-11069 .galerie-text, body.page-id-11071 .galerie-text { color: #4B5575 !important; } /* 0.8.2 Newsletter: Leiste im Footer und Formular-Karte */ .nl-leiste { display: flex !important; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 0 auto var(--wp--preset--spacing--50) !important; padding: 26px 32px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .nl-leiste > * { margin: 0 !important; } .nl-leiste .nl-text > * { margin: 0 !important; } .nl-leiste .nl-dz { font-size: 13px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5AC98A; margin-bottom: 4px !important; } .nl-leiste .nl-satz { font-size: 19px !important; font-weight: 700; line-height: 1.35; color: #fff; } .nl-leiste .wp-block-button__link { white-space: nowrap; } .nl-karte { background: #fff; border-radius: 18px; padding: 32px !important; box-shadow: 0 10px 30px rgba(0, 54, 89, .08); } .nl-karte > * { margin-top: 0 !important; } .ca-newsletter { min-height: 320px; } /* HubSpot rendert das Formular in einem iframe; Gestaltung im HubSpot-Formulareditor */ @media (max-width: 600px) { .nl-leiste { padding: 22px; } .nl-leiste .nl-satz { font-size: 17px !important; } } /* 0.8.3 Newsletter-Leiste: Knopftext weiß (Footer-Links waren grün), Leiste mittig wie die Spalten */ footer .nl-leiste .wp-block-button__link, footer .nl-leiste .wp-block-button__link:visited { color: #fff !important; background: var(--wp--preset--color--gruen); text-decoration: none; font-weight: 900; padding: 14px 26px; } footer .nl-leiste .wp-block-button__link:hover, footer .nl-leiste .wp-block-button__link:focus-visible { color: #fff !important; filter: brightness(1.08); } /* 0.8.4 Leistungs-Phasen (Service Management): vier Spalten an einer Linie statt Chips */ .phasen { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin-top: var(--wp--preset--spacing--50) !important; } .phasen > .phase { margin: 0 !important; position: relative; padding-top: 34px; border-top: 3px solid #5AC98A; } .phasen > .phase:nth-child(2) { border-top-color: #5AC98A; } .phasen > .phase:nth-child(3) { border-top-color: #47B27A; } .phasen > .phase:nth-child(4) { border-top-color: #339960; } .phasen .phase > * { margin-top: 0 !important; } .phasen .phase-nr { position: absolute; top: -17px; left: 0; width: 32px; height: 32px; margin: 0 !important; border-radius: 50%; background: #fff; border: 3px solid currentColor; color: #47B27A; font-size: 13px !important; font-weight: 900; line-height: 26px; text-align: center; } .phasen .phase:nth-child(1) .phase-nr { color: #5AC98A; } .phasen .phase:nth-child(4) .phase-nr { color: #267348; } .phasen .phase h3 { margin: 0 0 12px !important; font-size: 21px; color: #004C79; } .phasen .phase ul { margin: 0 !important; padding-left: 0; } .phasen .phase li { font-size: 16px; line-height: 1.45; margin-bottom: 8px; } @media (max-width: 1000px) { .phasen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; } } @media (max-width: 600px) { .phasen { grid-template-columns: 1fr; } } /* 0.8.5 Prozesskarte (Service Management, Ansatz): nach der Folie „IT-Prozesslandkarte“ */ .prozesskarte { margin-top: var(--wp--preset--spacing--50) !important; } .prozesskarte > * { margin: 0 !important; } .plk-schritt { display: flex !important; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px !important; } .plk-schritt > * { margin: 0 !important; } .plk-schritt-nr { font-size: 13px !important; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #004C79; border-radius: 999px; padding: 5px 14px; } .plk-schritt-text { font-size: 17px !important; font-weight: 700; color: #004C79; } .plk-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 16px !important; font-size: 13px !important; color: #4B5575; } .plk-leg { display: inline-flex; align-items: center; gap: 8px; } .plk-leg::before { content: ""; width: 18px; height: 12px; border-radius: 3px; box-sizing: border-box; } .plk-leg.plk-kern::before { background: #004C79; } .plk-leg.plk-sap::before { background: #004C79; border: 3px solid #47B27A; } .plk-leg.plk-nah::before { background: #fff; border: 1px solid #E1E6F0; } .plk-karte { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .plk-karte > * { margin: 0 !important; } .plk-spalte { background: #fff; border: 1px solid #E1E6F0; border-radius: 14px; padding: 16px 14px 14px; display: flex !important; flex-direction: column; gap: 8px; } .plk-spalte > * { margin: 0 !important; } .plk-titel { font-size: 17px !important; font-weight: 900; color: #004C79; margin-bottom: 4px !important; } .plk-p { font-size: 14px !important; line-height: 1.3; font-weight: 700; border-radius: 8px; padding: 9px 10px; } .plk-p.plk-kern { background: #004C79; color: #fff; } .plk-p.plk-sap { background: #004C79; color: #fff; box-shadow: inset 0 0 0 3px #47B27A; } .plk-p.plk-nah { background: #E1E6F0; color: #4B5575; border: 1px solid #E1E6F0; font-weight: 600; } .plk-pfeil { height: 34px; margin: 14px auto !important; width: 28px; background: var(--ca-pfeil-gruen) no-repeat center / contain; transform: rotate(90deg); } .plk-unten { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 28px; align-items: start; } .plk-unten > * { margin: 0 !important; } .plk-plattformen { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .plk-plattformen > * { margin: 0 !important; } .plk-plattform { background: #fff; border: 1px solid #E1E6F0; border-top: 4px solid #47B27A; border-radius: 12px; padding: 16px 14px !important; font-weight: 900; color: #004C79; font-size: 15px !important; line-height: 1.3; display: flex; align-items: center; min-height: 64px; } .plk-kriterien { background: #fff; border: 1px solid #E1E6F0; border-radius: 14px; padding: 18px 20px; } .plk-kriterien > * { margin: 0 !important; } .plk-krit-kopf { font-weight: 900; color: #004C79; margin-bottom: 10px !important; } .plk-kriterien ul { columns: 2; column-gap: 24px; padding-left: 0; } .plk-kriterien li { font-size: 15px; line-height: 1.4; margin-bottom: 6px; break-inside: avoid; } @media (max-width: 1000px) { .plk-karte { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plk-unten { grid-template-columns: 1fr; } } @media (max-width: 600px) { .plk-karte { grid-template-columns: 1fr; } .plk-kriterien ul { columns: 1; } .plk-schritt-text { font-size: 16px !important; } } /* 0.8.6 Prozesskarte auf dem Handy: nur Kern und Übergaben, Spalten ohne solche Prozesse entfallen */ @media (max-width: 600px) { .plk-p.plk-nah, .plk-leg.plk-nah { display: none !important; } .plk-spalte:not(:has(.plk-kern, .plk-sap)) { display: none !important; } .plk-karte { gap: 10px; } .plk-spalte { padding: 14px 12px 12px; } .plk-plattformen { grid-template-columns: 1fr 1fr; } .plk-plattform { min-height: 0; font-size: 14px !important; padding: 12px !important; } } /* 0.8.7 ATP-Kursseiten und Kurskatalog */ .is-style-hero .kurs-fakten { margin-top: 10px !important; font-size: 16px !important; font-weight: 700; color: #5AC98A; } .eckdaten { background: #fff; border: 1px solid #E1E6F0; border-radius: 16px; padding: 8px 22px; } .eckdaten > * { margin: 0 !important; } .eck-zeile { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid #E1E6F0; font-size: 15px !important; line-height: 1.4; } .eck-zeile:last-child { border-bottom: 0; } .eck-zeile span { color: #4B5575; } .eck-zeile strong { color: #004C79; } .lernziele ul { columns: 2; column-gap: 40px; } .lernziele li { break-inside: avoid; } .kurs-schritte { margin-top: var(--wp--preset--spacing--40) !important; display: flex !important; flex-direction: column; gap: 16px; } .kurs-schritte > * { margin: 0 !important; } .kurs-schritt { display: grid !important; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; } .kurs-schritt > * { margin: 0 !important; } .kurs-schritt-nr { width: 36px; height: 36px; border-radius: 50%; background: #004C79; color: #fff; font-weight: 900; text-align: center; line-height: 36px; } .kurs-schritt-text { line-height: 1.45; color: #4B5575; } .kurs-schritt-text strong { color: #004C79; } .kurs-b2b { margin-top: 18px !important; font-size: 14px !important; color: #4B5575; } .kurs-katalog > h3 { margin: var(--wp--preset--spacing--50) 0 14px !important; font-size: 22px; color: #004C79; } .kurs-katalog > h3:first-child { margin-top: var(--wp--preset--spacing--40) !important; } .kurs-karten { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .kurs-karten > * { margin: 0 !important; } .kurs-karte { background: #fff; border: 1px solid #E1E6F0; border-radius: 16px; padding: 18px 20px; display: flex !important; flex-direction: column; gap: 8px; } .kurs-karte > * { margin: 0 !important; } .kurs-karte .kasten-links { margin-top: auto !important; padding-top: 6px; } .kurs-meta { font-size: 13px !important; font-weight: 800; letter-spacing: .02em; color: #267348; } .kurs-karte h3 { font-size: 18px; line-height: 1.3; } .kurs-karte h3 a { color: #004C79; text-decoration: none; } .kurs-karte h3 a:hover { text-decoration: underline; } .kurs-ideal { font-size: 15px !important; line-height: 1.45; color: #4B5575; } .lernpfad-liste { padding-left: 1.2em; } .lernpfad-liste li, .danach-liste li { margin-bottom: 6px; line-height: 1.4; } @media (max-width: 1000px) { .kurs-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .kurs-karten { grid-template-columns: 1fr; } .lernziele ul { columns: 1; } .eck-zeile { grid-template-columns: 95px 1fr; } } /* 0.8.8 ATP-Übersicht: Pfadlogik als Treppe mit Schieberegler (nach Denis' Folien) */ .pfad { --pfad-farbe: #47B27A; margin-top: var(--wp--preset--spacing--50) !important; } .pfad > * { margin-top: 0 !important; } .pfad-treppe { display: flex; align-items: flex-end; gap: 10px; } .pfad-stufe { flex: 1 1 0; min-width: 0; height: var(--stufe-h); background: var(--stufe-farbe); color: #fff; border: 0; border-radius: 12px 12px 0 0; padding: 14px 14px 12px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; font: inherit; cursor: pointer; opacity: .42; transition: opacity .2s, transform .2s, box-shadow .2s; } .pfad-stufe:first-child { color: #004C79; } .pfad-stufe.davor { opacity: .7; } .pfad-stufe.aktiv, .pfad-stufe:hover, .pfad-stufe:focus-visible { opacity: 1; } .pfad-stufe.aktiv { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 36, 59, .22); } .pfad-stufe-name { font-weight: 900; font-size: 18px; line-height: 1.2; } .pfad-stufe-wer { font-size: 13px; line-height: 1.3; opacity: .9; } .pfad-regler { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #4B5575; } .pfad-regler input { flex: 1; accent-color: var(--pfad-farbe); height: 6px; cursor: pointer; } .pfad-legende { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 12px; font-size: 14px; color: #4B5575; } .pfad-kap { display: inline-flex; align-items: center; gap: 8px; } .pfad-kap::before { content: ""; width: 14px; height: 14px; border-radius: 50%; } .pfad-kap-1::before { background: #5AC98A; } .pfad-kap-2::before { background: #47B27A; } .pfad-kap-3::before { background: #004C79; } .pfad-panel { background: #fff; border-radius: 0 0 18px 18px; border-top-style: solid; padding: 28px 30px 30px; margin-top: 26px !important; box-shadow: 0 10px 30px rgba(0, 54, 89, .07); } .pfad-panel + .pfad-panel { margin-top: 18px !important; } .pfad-panel[hidden] { display: none !important; } .pfad-panel > * { margin: 0 !important; } .pfad-panel-dz { font-size: 13px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #4B5575; margin-bottom: 6px !important; } .pfad-panel-titel { font-size: 28px; line-height: 1.2; color: #004C79; margin-bottom: 10px !important; } .pfad-panel-text { color: #4B5575; margin-bottom: 20px !important; max-width: 760px; } .pfad-panel .eb-tipp { margin-top: 18px !important; } .pfad-panel .kurs-karte { background: #E1E6F0; border-color: #E1E6F0; } .kurs-karten-2, .kurs-karten-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pfad-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; } .pfad-nav button { background: none; border: 0; font: inherit; font-weight: 800; color: #267348; cursor: pointer; padding: 6px 0; } .pfad:not(.pfad-js) .pfad-nav, .pfad:not(.pfad-js) .pfad-regler { display: none; } .pfad[data-stufe="0"] .pfad-zurueck, .pfad[data-stufe="5"] .pfad-vor { visibility: hidden; } @media (max-width: 1000px) { .pfad-stufe-name { font-size: 15px; } .pfad-stufe-wer { font-size: 12px; } } @media (max-width: 700px) { .pfad-treppe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } .pfad-stufe { height: auto; min-height: 76px; border-radius: 12px; } .pfad-stufe.aktiv { transform: none; } .pfad-panel { padding: 22px 18px; border-radius: 0 0 14px 14px; } .pfad-panel-titel { font-size: 22px; } .kurs-karten-2, .kurs-karten-4 { grid-template-columns: 1fr; } .pfad-legende { font-size: 13px; } } /* 0.8.9 ATP-Kursseiten: Pfad-Leiste unter dem Kopf (Stufen wie auf den Folien) */ .pfad-leiste-sec { padding: 22px var(--wp--style--root--padding-right, 24px) 6px !important; background: #fff; } .pfad-leiste { display: flex; align-items: flex-end; gap: 8px; } .pl-stufe { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; text-decoration: none !important; color: #4B5575; font-size: 14px; line-height: 1.2; text-align: center; } .pl-balken { display: block; height: var(--pl-h); background: #E1E6F0; border-radius: 3px 3px 0 0; transition: background .2s; } .pl-stufe:hover .pl-balken { background: #E1E6F0; } .pl-stufe:hover { color: #004C79; } .pl-stufe.pl-aktiv { color: var(--pl-farbe); font-weight: 900; } .pl-stufe.pl-aktiv:first-child { color: #267348; } .pl-stufe.pl-aktiv .pl-balken { background: var(--pl-farbe); } @media (max-width: 700px) { .pfad-leiste { gap: 4px; } .pl-name { font-size: 11px; } .pl-stufe:not(.pl-aktiv) .pl-name { visibility: hidden; } .pl-stufe.pl-aktiv .pl-name { white-space: nowrap; overflow: visible; } } /* 0.9.0 News-Übersicht: hervorgehobener Beitrag und Beitragsraster */ .news-top, .news-raster { margin-top: var(--wp--preset--spacing--40) !important; } .news-raster .wp-block-post-template { gap: 20px !important; } .news-karte { background: #fff; border: 1px solid #E1E6F0; border-radius: 16px; overflow: hidden; display: flex !important; flex-direction: column; height: 100%; transition: box-shadow .2s, transform .2s; } .news-karte:hover { box-shadow: 0 12px 28px rgba(0, 54, 89, .1); transform: translateY(-2px); } .news-karte > * { margin: 0 !important; } .news-karte .news-bild { margin: 0 !important; background: #E1E6F0; } .news-karte .news-bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-text { padding: 18px 20px 20px; display: flex !important; flex-direction: column; gap: 8px; flex: 1; } .news-text > * { margin: 0 !important; } .news-datum { font-size: 13px !important; font-weight: 800; letter-spacing: .04em; color: #267348; } .news-titel { font-size: 19px !important; line-height: 1.3; } .news-titel a { color: #004C79; text-decoration: none; } .news-titel a:hover { text-decoration: underline; } .news-auszug { font-size: 15px; line-height: 1.5; color: #4B5575; display: flex; flex-direction: column; flex: 1; } .news-auszug .wp-block-post-excerpt__excerpt { margin: 0 0 12px; } .news-auszug .wp-block-post-excerpt__more-text { margin: auto 0 0 !important; } .news-auszug .wp-block-post-excerpt__more-link { font-weight: 800; color: #267348; text-decoration: none; } .news-auszug .wp-block-post-excerpt__more-link::after { content: "\00a0→"; } .news-karte-gross { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .news-karte-gross .news-bild { aspect-ratio: auto !important; height: 100%; min-height: 300px; } .news-karte-gross .news-text { padding: 32px 34px; justify-content: center; } .news-karte-gross .news-titel { font-size: 28px !important; } .news-karte-gross .news-auszug { font-size: 17px; flex: 0; } .news-seiten { margin-top: var(--wp--preset--spacing--50) !important; gap: 10px; font-weight: 800; } .news-seiten a, .news-seiten .current { display: inline-block; min-width: 40px; padding: 8px 12px; border-radius: 999px; text-align: center; color: #004C79; text-decoration: none; background: #fff; border: 1px solid #E1E6F0; } .news-seiten .current { background: #004C79; color: #fff; border-color: #004C79; } @media (max-width: 1000px) { .news-raster .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 700px) { .news-raster .wp-block-post-template { grid-template-columns: 1fr !important; } .news-karte-gross { grid-template-columns: 1fr; } .news-karte-gross .news-bild { min-height: 0; aspect-ratio: 16/9 !important; } .news-karte-gross .news-text { padding: 20px; } .news-karte-gross .news-titel { font-size: 22px !important; } } /* 0.9.1 ATP: Atlassian-Training-Partner-Logo im Kopfbereich */ .is-style-hero .atp-badge { margin: 26px 0 0 !important; } .is-style-hero .atp-badge img { width: 220px !important; height: auto; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } @media (max-width: 600px) { .is-style-hero .atp-badge img { width: 170px !important; } } /* 0.9.2 Knopftext weiß, auch solange Elementor aktiv ist (.elementor-kit-9 a färbte Links grün) und für die Whitepaper-Seiten */ body .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color), body .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color):visited { color: #fff; } .wp-cover-bild img { border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 54, 89, .16); } /* 0.9.5 Zeitleiste so breit wie die Einleitungstexte (Textspalte ≈ 680 px wie .abschnitt-lead) */ .zeitleiste > .zl-punkt { max-width: 860px; } @media (max-width: 600px) { .zeitleiste > .zl-punkt { max-width: none; } } /* 0.9.7 Eigene Schalter gegen das Elementor-Kit absichern (.elementor-kit-9 button färbte Text weiß) */ body .pfad-nav button, body .pfad-nav button:hover, body .pfad-nav button:focus { color: #267348; background: none; } body .einstieg-schalter button, body .einstieg-schalter button:hover, body .einstieg-schalter button:focus { color: #004C79; background: transparent; } body .einstieg-schalter button[aria-selected="true"] { color: #fff; } body .pfad-stufe:first-child { color: #004C79; } /* 1.0.4 Blogbeiträge: alte Zusatz-CSS der Elementor-Seite („.single-post h2 { font-size: 18px !important }“) aufheben */ body.single-post .wp-block-post-content h2, body.single-post .beitrag-kontakt h2 { font-size: var(--wp--preset--font-size--xx-large) !important; padding-top: 0; } body.single-post .wp-block-post-content h3 { margin-top: var(--wp--preset--spacing--50); } body.single-post .beitrag-kurz { margin-bottom: var(--wp--preset--spacing--50); } body.single-post .beitrag-download .is-style-karte h3 { margin-top: 0; } /* ---------- 1.0.5 Beitragsvorlage (single.html): Kopf wie die Seiten, Lesespalte 760 px, „Weitere Beiträge“ ---------- */ .wp-block-cover.beitrag-hero { min-height: 320px !important; } .wp-block-cover.beitrag-hero .hero-text.beitrag-kopf { max-width: 900px; } .beitrag-kopf > * { margin-top: 0 !important; } .beitrag-kategorie { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px !important; } .beitrag-kategorie, .beitrag-kategorie a, .beitrag-kategorie .wp-block-post-terms__separator { color: var(--wp--preset--color--gruen-hell) !important; text-decoration: none; } .wp-block-cover.beitrag-hero h1.beitrag-titel { font-size: clamp(30px, 4.2vw, 48px) !important; line-height: 1.12; margin-bottom: 14px !important; color: #fff; } .wp-block-cover.beitrag-hero .beitrag-datum { color: rgba(255, 255, 255, .8); font-size: 15px; font-weight: 700; } .beitrag-bild { margin-bottom: var(--wp--preset--spacing--50) !important; } .beitrag-bild img { border-radius: 18px; width: 100%; object-fit: cover; } .wp-block-post-content > .story-steckbrief:first-child, .wp-block-post-content > .wp-teaser:first-child, .wp-block-post-content > .beitrag-kurz:first-child { margin-top: 0 !important; } .beitrag-haupt .wp-block-post-content { font-size: 18px; line-height: 1.7; } .beitrag-haupt .wp-block-post-content > p, .beitrag-haupt .wp-block-post-content > ul, .beitrag-haupt .wp-block-post-content > ol { margin-bottom: 1em !important; } body.single-post .wp-block-post-content > h3 { font-size: clamp(22px, 2.4vw, 27px) !important; line-height: 1.25; margin-top: var(--wp--preset--spacing--60) !important; margin-bottom: 12px !important; } body.single-post .wp-block-post-content > h4 { font-size: 20px !important; margin-top: var(--wp--preset--spacing--50) !important; } .beitrag-weiter .news-raster { margin-top: var(--wp--preset--spacing--40) !important; } @media (max-width: 781px) { .beitrag-weiter .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr !important; } } /* Success Stories: Steckbrief, Ergebnis, Zitat */ .story-steckbrief { margin-bottom: var(--wp--preset--spacing--50) !important; } .story-steckbrief .wp-block-columns { margin: 0 !important; align-items: flex-start !important; } .story-steckbrief .story-logo { display: flex; flex-direction: column; gap: 14px; } .story-steckbrief .story-logo figure { margin: 0 !important; } .story-steckbrief .story-logo img { width: auto !important; max-width: 170px !important; max-height: 110px; object-fit: contain; } .story-steckbrief h3 { margin-top: 4px !important; } .story-steckbrief .eckdaten { margin-top: 20px !important; } .story-ergebnis { margin-top: var(--wp--preset--spacing--60) !important; } .story-ergebnis h3 { margin-top: 0 !important; } .is-style-haken.zwei-spalten { columns: 2; column-gap: 36px; } .is-style-haken.zwei-spalten li { break-inside: avoid; } @media (max-width: 700px) { .is-style-haken.zwei-spalten { columns: 1; } } .wp-block-quote.story-zitat { border-left: 4px solid var(--wp--preset--color--gruen); padding: 4px 0 4px 26px; margin: var(--wp--preset--spacing--60) 0 !important; } .wp-block-quote.story-zitat p { font-size: clamp(19px, 2vw, 23px) !important; font-weight: 700; line-height: 1.45; color: var(--wp--preset--color--blau); } .wp-block-quote.story-zitat cite { display: block; margin-top: 10px; font-style: normal; font-size: 15px; color: #4B5575; } /* Whitepaper-Beiträge: Teaser oben, Download-Block unten */ .wp-teaser { margin-bottom: var(--wp--preset--spacing--60) !important; } .wp-teaser .wp-block-columns { margin: 0 !important; } .wp-teaser img { border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 54, 89, .18); } .wp-teaser h3 { margin-top: 2px !important; } .beitrag-download { scroll-margin-top: 110px; } .beitrag-download .is-style-panel h3 { margin-top: 0 !important; } /* ---------- 1.0.6 Success Story und Whitepaper als eigene Layouts (Beitragsbild wird im Beitrag nicht mehr gezeigt) ---------- */ .story-lead { font-size: clamp(20px, 2.2vw, 24px) !important; line-height: 1.5 !important; font-weight: 700; color: var(--wp--preset--color--blau); } .story-fakten { display: grid !important; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 4px solid var(--wp--preset--color--gruen); border-radius: 0 0 18px 18px; box-shadow: 0 12px 32px rgba(0, 54, 89, .09); margin-top: var(--wp--preset--spacing--50) !important; } .story-fakten > * { margin: 0 !important; } .story-fakt { padding: 18px 22px !important; border-right: 1px solid var(--wp--preset--color--rand); line-height: 1.35 !important; } .story-fakt:last-child { border-right: 0; } .story-fakt span { display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #267348; } .story-fakt strong { display: block; margin-top: 4px; font-size: 17px; color: var(--wp--preset--color--blau); } @media (max-width: 781px) { .story-fakten { grid-template-columns: 1fr 1fr; } .story-fakt:nth-child(2n) { border-right: 0; } .story-fakt:nth-child(-n+2) { border-bottom: 1px solid var(--wp--preset--color--rand); } } .story-drei { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: var(--wp--preset--spacing--50) !important; } .story-drei > * { margin: 0 !important; } .story-karte { background: #fff; border: 1px solid var(--wp--preset--color--rand); border-radius: 18px; overflow: hidden; padding: 0 0 20px !important; } .story-karte > * { margin-top: 0 !important; } .story-karte > h3 { background: var(--wp--preset--color--blau); color: #fff !important; margin: 0 0 16px !important; padding: 16px 22px; font-size: 20px !important; } .story-karte.ergebnis > h3 { background: var(--wp--preset--color--gruen-dunkel); } .story-karte ul { padding: 0 22px !important; margin: 0 !important; font-size: 16px; line-height: 1.5; } .story-karte li + li { margin-top: 8px; } @media (max-width: 900px) { .story-drei { grid-template-columns: 1fr; } } .story-zitat-karte { background: var(--wp--preset--color--blau); border-radius: 22px; padding: 36px 44px !important; margin-top: var(--wp--preset--spacing--60) !important; } .story-zitat-karte p.zitat { color: #fff; font-size: clamp(20px, 2.2vw, 26px) !important; font-weight: 800; line-height: 1.4 !important; margin: 0 0 14px !important; } .story-zitat-karte p.zitat-name { color: var(--wp--preset--color--gruen-hell); font-size: 15px !important; font-weight: 700; margin: 0 !important; } .story-kunde { margin-top: var(--wp--preset--spacing--60) !important; } .story-logo-kachel { background: #fff; border: 1px solid var(--wp--preset--color--rand); border-radius: 18px; display: flex !important; align-items: center; justify-content: center; min-height: 200px; padding: 30px !important; } .story-logo-kachel figure { margin: 0 !important; } .story-logo-kachel img { width: auto !important; max-width: 220px !important; max-height: 140px; object-fit: contain; } body.single-post .wp-block-post-content > h2.story-detail-kopf { margin-top: var(--wp--preset--spacing--50) !important; margin-bottom: 0 !important; } body.single-post .wp-block-post-content > h2.story-detail-kopf + h3 { margin-top: var(--wp--preset--spacing--30) !important; } /* Whitepaper-Landingpage: links Inhalt, rechts mitlaufendes Formular */ .wp-landing { gap: var(--wp--preset--spacing--60) !important; margin-top: 0 !important; } .wp-landing > .wp-formular-spalte { position: sticky; top: 110px; align-self: flex-start; } .wp-landing .wp-cover-gross { margin: var(--wp--preset--spacing--50) 0 !important; } .wp-landing .wp-cover-gross img { max-width: 300px; height: auto; } .wp-lernen { background: var(--wp--preset--color--nacht); border-radius: 18px; padding: 28px 30px !important; margin-bottom: var(--wp--preset--spacing--50) !important; } .wp-lernen h3 { color: #fff !important; margin-top: 0 !important; } .wp-lernen li { color: #fff; } .wp-formular-karte { box-shadow: 0 16px 40px rgba(0, 54, 89, .12); padding: 26px !important; height: auto !important; } .wp-formular-karte h3 { margin-top: 0 !important; } @media (max-width: 781px) { .wp-landing > .wp-formular-spalte { position: static; } } /* ---------- 1.0.12 Hauptmenü als Mega-Menü (nach Natuvion-Art, in Cross-ALM-Farben): volle Breite, Spalten mit Überschrift ---------- */ .site-header .wp-block-navigation a { text-transform: none !important; letter-spacing: 0 !important; } .site-header .nav-kontakt { margin: 0 !important; } .site-header .nav-kontakt .wp-block-button__link { background: var(--wp--preset--color--gruen-hell) !important; color: var(--wp--preset--color--nacht) !important; font-size: 15px; font-weight: 800; padding: 10px 20px !important; border-radius: 6px; } .site-header .nav-kontakt .wp-block-button__link:hover { background: var(--wp--preset--color--gruen) !important; color: #fff !important; } @media (min-width: 1100px) { .site-header { padding-top: 0 !important; padding-bottom: 0 !important; } .site-header .wp-block-navigation, .site-header .wp-block-navigation__container, .site-header .wp-block-navigation__responsive-container, .site-header .wp-block-navigation__responsive-close, .site-header .wp-block-navigation__responsive-dialog, .site-header .wp-block-navigation__responsive-container-content, .site-header .wp-block-navigation__container > .wp-block-navigation-item { position: static !important; } .site-header .wp-block-navigation__container { gap: 30px !important; } .site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--nacht) !important; font-size: 16px; font-weight: 700; padding: 26px 0 !important; border-bottom: 3px solid transparent; } .site-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content, .site-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content { color: var(--ca-gruen-text) !important; border-bottom-color: var(--wp--preset--color--gruen); } .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon { color: currentColor; margin-left: 4px; } /* der Balken */ .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: auto !important; min-width: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px, 250px)); justify-content: center; gap: 28px 56px; padding: 44px max(24px, calc((100vw - 1200px) / 2)) 52px !important; background: linear-gradient(120deg, #004C79 0%, #00436C 55%, #003659 100%) !important; border: 0 !important; border-top: 3px solid var(--wp--preset--color--gruen) !important; border-radius: 0 !important; box-shadow: 0 24px 40px rgba(0, 54, 89, .25); } .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item { display: block !important; width: auto !important; } /* Spaltenüberschriften */ .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--gruen-hell) !important; font-size: 17px; font-weight: 800; padding: 0 0 14px !important; background: none !important; white-space: normal; } .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: #fff !important; } .site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon { display: none !important; } /* Links in den Spalten: immer sichtbar, solange der Balken offen ist */ .site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { position: static !important; visibility: inherit !important; opacity: 1 !important; width: auto !important; height: auto !important; min-width: 0 !important; overflow: visible !important; display: block !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; transform: none !important; } .site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: rgba(255, 255, 255, .92) !important; font-size: 15px; font-weight: 500; padding: 7px 0 !important; line-height: 1.35; white-space: normal; background: none !important; } .site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--gruen-hell) !important; text-decoration: underline; text-underline-offset: 3px; } } /* Handy: Klappmenü, Ebenen eingerückt */ @media (max-width: 1099.98px) { .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; box-shadow: none; padding: 0 0 0 14px !important; } } @media (max-width: 1099.98px) { .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--nacht) !important; } } @media (max-width: 600px) { .site-header .nav-kontakt { display: none; } } /* 1.0.13 Mega-Menü nach NN/g und Baymard: Öffnen erst nach kurzem Verweilen (≈250 ms), Schließen mit Verzögerung (≈500 ms), damit Mausbewegungen über Nachbarpunkte nicht umschalten */ @media (min-width: 1100px) { .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container { height: auto !important; overflow: visible !important; transition: opacity .1s ease .45s, visibility 0s linear .55s !important; } .site-header .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-container, .site-header .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-container, .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { transition: opacity .1s ease .25s, visibility 0s linear .25s !important; z-index: 3; } /* „Alle … →“ als eigene Spalte ohne Unterpunkte */ .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content { color: #fff !important; } .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--gruen-hell) !important; } } @media (prefers-reduced-motion: reduce) { .site-header .wp-block-navigation__submenu-container { transition: none !important; } } /* ---------- 1.0.14 Suche: Lupe im Kopf (klappt beim Klick ein Feld auf), Trefferseite ---------- */ .site-header .kopf-suche { margin: 0 !important; } .site-header .kopf-suche .wp-block-search__inside-wrapper { border: 0 !important; padding: 0 !important; background: none; } .site-header .kopf-suche .wp-block-search__button { background: none !important; color: var(--wp--preset--color--nacht) !important; border: 0 !important; padding: 8px !important; margin: 0 !important; min-width: 40px; } .site-header .kopf-suche .wp-block-search__button:hover { color: var(--ca-gruen-text) !important; } .site-header .kopf-suche .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; } .site-header .kopf-suche:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper { border: 1px solid var(--wp--preset--color--rand) !important; border-radius: 6px; padding: 2px 2px 2px 10px !important; background: #fff; } .site-header .kopf-suche .wp-block-search__input { border: 0 !important; font-size: 15px; min-width: 200px; padding: 6px 4px !important; } .suche-gross { margin-top: 22px !important; max-width: 620px; } .suche-gross .wp-block-search__inside-wrapper { background: #fff; border-radius: 8px; padding: 4px !important; border: 0 !important; } .suche-gross .wp-block-search__input { border: 0 !important; font-size: 17px; padding: 10px 14px !important; } .suche-gross .wp-block-search__button { background: var(--wp--preset--color--gruen) !important; color: #fff !important; border: 0 !important; border-radius: 6px !important; font-weight: 800; padding: 10px 22px !important; margin: 0 !important; } .wp-block-cover.beitrag-hero h1.wp-block-query-title { font-size: clamp(26px, 3.4vw, 38px) !important; color: #fff; } .suche-ergebnisse .wp-block-post-template { display: flex; flex-direction: column; gap: 14px; } .suche-treffer { background: #fff; border: 1px solid var(--wp--preset--color--rand); border-radius: 14px; padding: 18px 22px !important; } .suche-treffer > * { margin: 0 !important; } .suche-titel { font-size: 20px !important; } .suche-titel a { color: var(--wp--preset--color--blau); text-decoration: none; } .suche-titel a:hover { text-decoration: underline; } .suche-auszug { margin-top: 6px !important; color: #4B5575; font-size: 16px; } .suche-auszug .wp-block-post-excerpt__more-text { display: none; } /* ---------- 1.0.15 Hero: Wechselwort bricht um statt überzulaufen; neue Grafik „Ein Change, drei Systeme“ ---------- */ .hero-raster > .hero-text { min-width: 0; max-width: none !important; } .wp-block-cover.is-style-hero h1 { overflow-wrap: break-word; } mark.wechselwort { display: inline-block; max-width: 100%; white-space: normal; vertical-align: top; } .hero-raster { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr) !important; gap: clamp(32px, 4vw, 64px) !important; } .wp-block-cover.is-style-hero:has(.hero-raster) .wp-block-cover__inner-container { max-width: 1200px !important; } .wp-block-cover.is-style-hero .hero-raster h1 { font-size: clamp(34px, 3.7vw, 52px) !important; line-height: 1.1; } .hero-raster h1 mark.wechselwort { display: block; } .hero-raster h1 mark.wechselwort + br { display: none; } .sync-karte { width: 100%; max-width: 440px; margin-left: auto; background: #fff; border-radius: 18px; padding: 24px 26px 20px; box-shadow: 0 30px 60px rgba(0, 20, 40, .32); color: var(--ca-text, #0D1428); font-family: inherit; border-top: 5px solid var(--wp--preset--color--gruen); } .sync-kopf small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #4B5575; } .sync-kopf strong { display: block; font-size: 19px; font-weight: 900; line-height: 1.25; margin-top: 4px; color: var(--wp--preset--color--nacht); } .sync-schritte { list-style: none; margin: 18px 0 16px !important; padding: 0 !important; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } .sync-schritte li { margin: 0 !important; font-size: 11px; font-weight: 800; line-height: 1.2; color: #4B5575; padding-top: 10px; position: relative; transition: color .3s; } .sync-schritte li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 2px; background: #E1E6F0; transition: background .3s; } .sync-schritte li.fertig::before, .sync-schritte li.aktiv::before { background: var(--wp--preset--color--gruen); } .sync-schritte li.aktiv { color: #267348; } .sync-schritte li:has(~ li.aktiv)::before { background: var(--wp--preset--color--gruen); } .sync-liste { list-style: none; margin: 0 !important; padding: 0 !important; border-top: 1px solid #E1E6F0; } .sync-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important; padding: 13px 0; border-bottom: 1px solid #E1E6F0; } .sync-system strong { display: block; font-size: 16px; font-weight: 900; color: var(--wp--preset--color--nacht); line-height: 1.2; } .sync-system small { display: block; font-size: 12px; color: #4B5575; font-weight: 600; } .sync-status { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #267348; background: #E1E6F0; border-radius: 999px; padding: 5px 12px; transition: background .25s, color .25s, transform .25s; } .sync-status.wechselt { background: #E1E6F0; transform: scale(1.06); } .sync-fuss { display: flex; align-items: center; gap: 8px; margin: 14px 0 0 !important; font-size: 13px; font-weight: 800; color: #267348 !important; } .sync-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--wp--preset--color--gruen); box-shadow: 0 0 0 0 rgba(71, 178, 122, .5); animation: syncPuls 2s ease-out infinite; } @keyframes syncPuls { 0% { box-shadow: 0 0 0 0 rgba(71, 178, 122, .55); } 100% { box-shadow: 0 0 0 10px rgba(71, 178, 122, 0); } } @media (prefers-reduced-motion: reduce) { .sync-punkt { animation: none; } .sync-status, .sync-schritte li, .sync-schritte li::before { transition: none; } } @media (max-width: 900px) { .hero-raster { grid-template-columns: 1fr !important; } .sync-karte { margin: 8px auto 0; } } @media (max-width: 480px) { .sync-karte { padding: 18px 16px 14px; } .sync-schritte li { font-size: 10px; } .sync-kopf strong { font-size: 17px; } } .editor-styles-wrapper .sync-karte { max-width: 440px; } /* 1.0.16 Hero ohne Grafik: Text allein, eine Spalte */ .hero-raster.nur-text { grid-template-columns: minmax(0, 1fr) !important; } .hero-raster.nur-text > .hero-text { max-width: 760px !important; } /* 1.0.16 Beratung auf der Startseite: vier breite Kacheln (2 × 2), Links als Zeilen mit Pfeil */ .kaesten.kaesten-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .kaesten-zwei .kasten { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 30px 30px 28px !important; transition: box-shadow .2s, transform .2s; } .kaesten-zwei .kasten:hover { box-shadow: 0 18px 36px rgba(0, 54, 89, .10); transform: translateY(-2px); } .kaesten-zwei .kasten > * { margin: 0 !important; } .kaesten-zwei .kasten h3 { font-size: 24px !important; margin: 0 0 10px !important; } .kaesten-zwei .kasten-text p { margin: 0 !important; font-size: 16px; line-height: 1.55; } .kaesten-zwei .kasten .kasten-links { margin: 4px 0 0 !important; line-height: 1.3; font-size: 15px; } .kaesten-zwei .kasten .kasten-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ca-linie, #E1E6F0); color: var(--wp--preset--color--nacht); font-weight: 800; text-decoration: none; } .kaesten-zwei .kasten .kasten-links a:first-child { border-top: 1px solid var(--ca-linie, #E1E6F0); } .kaesten-zwei .kasten .kasten-links a b { color: var(--wp--preset--color--gruen); font-weight: 900; transition: transform .2s; } .kaesten-zwei .kasten .kasten-links a:hover { color: var(--ca-gruen-text); text-decoration: none; } .kaesten-zwei .kasten .kasten-links a:hover b { transform: translateX(4px); } @media (max-width: 1100px) { .kaesten-zwei .kasten { grid-template-columns: 1fr; gap: 18px; } } @media (max-width: 760px) { .kaesten.kaesten-zwei { grid-template-columns: 1fr; } } /* 1.0.18 Mega-Menü hell (Grau #E1E6F0), Schrift Blau, Hover Grün – passt zum blauen Hero darunter */ @media (min-width: 1100px) { .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container { background: #E1E6F0 !important; border-top: 3px solid var(--wp--preset--color--gruen) !important; box-shadow: 0 24px 40px rgba(0, 54, 89, .14) !important; } .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--blau) !important; } .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: #267348 !important; } .site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #0D1428 !important; } .site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: #267348 !important; } .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content { color: var(--wp--preset--color--blau) !important; } .site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content:hover { color: #267348 !important; } } /* Footer in Markenblau */ footer.has-nacht-background-color { background: #004C79 !important; } /* 1.0.19 Kopfzeile bleibt beim Scrollen sichtbar */ .wp-site-blocks > .wp-block-template-part:has(> .site-header) { position: sticky; top: 0; z-index: 100; } .admin-bar .wp-site-blocks > .wp-block-template-part:has(> .site-header) { top: var(--wp-admin--admin-bar--height, 32px); } @media (max-width: 600px) { .admin-bar .wp-site-blocks > .wp-block-template-part:has(> .site-header) { top: 0; } } .site-header { box-shadow: 0 1px 0 #E1E6F0; } html { scroll-padding-top: 96px; } /* 1.0.20 Kopfzeile in Markenblau, Negativlogo, Hero schließt direkt an */ .site-header { background: #004C79 !important; color: #fff !important; border-bottom: 0 !important; box-shadow: none !important; } .site-header .wp-block-navigation a { color: #fff; } @media (min-width: 1100px) { .site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { color: #fff !important; } .site-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content, .site-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content { color: var(--wp--preset--color--gruen-hell) !important; border-bottom-color: var(--wp--preset--color--gruen-hell); } } .site-header .wp-block-navigation__responsive-container-open { color: #fff !important; } .site-header .crossalm-sprachen a { color: rgba(255, 255, 255, .8) !important; opacity: 1 !important; } .site-header .crossalm-sprachen a:hover, .site-header .crossalm-sprachen a[aria-current] { color: var(--wp--preset--color--gruen-hell) !important; } .site-header .kopf-suche .wp-block-search__button { color: #fff !important; } .site-header .kopf-suche .wp-block-search__button:hover { color: var(--wp--preset--color--gruen-hell) !important; } .site-header .nav-kontakt .wp-block-button__link { background: var(--wp--preset--color--gruen) !important; color: #fff !important; } .site-header .nav-kontakt .wp-block-button__link:hover { background: var(--wp--preset--color--gruen-hell) !important; color: #fff !important; } /* Klappmenü auf dem Handy: weißer Hintergrund, Schrift blau */ @media (max-width: 1099.98px) { .site-header .wp-block-navigation__responsive-container.is-menu-open { background: #fff !important; } } @media (max-width: 1099.98px) { .site-header .wp-block-navigation__responsive-container.is-menu-open a, .site-header .wp-block-navigation__responsive-container-close { color: #004C79 !important; } } /* Hero direkt unter der Kopfzeile, ohne weißen Streifen */ .wp-site-blocks > main { margin-top: 0 !important; } .wp-block-post-content > .wp-block-cover.is-style-hero:first-of-type, .entry-content > .wp-block-cover.is-style-hero:first-of-type, .wp-block-post-content > style:first-child + .wp-block-cover.is-style-hero { margin-top: 0 !important; } /* ===== 1.0.24 – Verbesserungen aus dem Website-Audit (6.11.2026) ===== */ /* Kontrast: Weiß auf Grün (#47B27A) hat nur 2,65:1. Dunkle Schrift (#0D1428) auf Grün erfüllt WCAG AA. */ body .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color):not(.has-background), body .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color):not(.has-background):visited, .wp-block-cover.is-style-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link, footer .nl-leiste .wp-block-button__link, footer .nl-leiste .wp-block-button__link:visited, footer .nl-leiste .wp-block-button__link:hover, footer .nl-leiste .wp-block-button__link:focus-visible, .site-header .nav-kontakt .wp-block-button__link, .site-header .nav-kontakt .wp-block-button__link:hover { color: #0D1428 !important; } /* Kontaktweg ohne Cookie-Zustimmung, unter dem HubSpot-Formular */ .kontakt-direkt { margin: 18px 0 0 !important; font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--text-leise, #4B5575); } .kontakt-direkt a { color: var(--wp--preset--color--blau, #004C79); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } .has-blau-background-color .kontakt-direkt, .has-nacht-background-color .kontakt-direkt { color: rgba(255,255,255,.9); } .has-blau-background-color .kontakt-direkt a, .has-nacht-background-color .kontakt-direkt a { color: #fff; } /* Event-Hinweis und Preisrechner:

wird im Theme zu

, Aussehen wie bisher */ .cae h3.ca-h, .cae-hinweis h3.ca-h { font-size: 21px !important; font-weight: 900; margin: 4px 0 6px !important; color: #004C79; line-height: 1.25; } .cap h3.ca-h { margin: 0 !important; font-size: 20px !important; font-weight: 900; color: #004C79; line-height: 1.25; } @media (max-width: 600px) { .cae h3.ca-h, .cae-hinweis h3.ca-h { font-size: 18px !important; } } /* Stand-Datum unter der Hero-Zeile (Ratgeber) */ .hero-stand { font-size: 14px !important; color: rgba(255,255,255,.8) !important; margin-top: 4px !important; } /* Klickziele auf dem Handy mindestens 24 px hoch (WCAG 2.2, 2.5.8) */ @media (max-width: 600px) { main .kasten-links a, main .lage-links a, main .refk a, main .c3k a, main .refzitat .wer a, main .cap-aktion a { display: inline-block; min-height: 24px; padding: 3px 0; } } /* Zweiter Kontakt-Knopf nach Szenarien und Referenzen (Startseite) */ .wp-block-buttons.knopf-nachlauf { justify-content: center; margin-top: 36px !important; } /* Styleguide 2026, Ergänzung 6.11.2026: Text-Grün #267348 für grüne Schrift auf Weiß und Grau. #339960 erreicht auf Weiß nur 3,58 : 1, #267348 erreicht 5,79 : 1 auf Weiß und 4,62 : 1 auf Grau (WCAG AA). Flächen, Linien und Verläufe behalten #339960 / #47B27A. */ .has-gruen-dunkel-color { color: #267348 !important; } /* Zeitleisten mit Schrittnummern (Klasse kommt aus inc/verbesserungen.php) und Kästen auf grauen Abschnitten */ .zeitleiste-nummern .zl-punkt { grid-template-columns: 28px 1fr; } .zeitleiste-nummern .zl-punkt::before { left: 51px; } .zeitleiste-nummern .zl-punkt::after { left: 43px; } @media (max-width: 600px) { .zeitleiste-nummern .zl-punkt { grid-template-columns: 20px 1fr; } .zeitleiste-nummern .zl-punkt::before { left: 35px; } .zeitleiste-nummern .zl-punkt::after { left: 29px; } } .has-hellgrau-background-color .zl-punkt::before { background: #fff; } .has-hellgrau-background-color .eb-tipp { background: #fff; } /* Kundenleiste überall wie auf der Startseite: farbige Logos grau, beim Überfahren in Farbe (Yaskawa nur als weißes Logo vorhanden, bleibt grau) */ .kundenleiste .kunden-logos img { filter: grayscale(1) !important; opacity: .55 !important; transition: filter .25s, opacity .25s; } .kundenleiste .kunden-logos img.kunde-yaskawa2 { filter: brightness(0) !important; opacity: .4 !important; } .kundenleiste .kunden-logos a:hover img, .kundenleiste .kunden-logos a:focus-visible img, .kundenleiste .kunden-logos img:hover { filter: none !important; opacity: 1 !important; } .kundenleiste .kunden-logos img.kunde-yaskawa2:hover { filter: brightness(0) !important; opacity: .6 !important; } /* ATP-Trainingspfad in Styleguide-Farben (vorher Gold #F0AA00 und Nachtblau): Grün-Stufen mit dunkler Schrift, Blau-Stufen mit weißer */ body .pfad-stufe:nth-child(-n+3) { color: #0D1428; } /* Yaskawa (freigegeben 6.11.2026) mit farbigem Logo */ .kunden-logos .kunde-yaskawa { height: 20px; } /* 1.0.33 Karriere-Band (Über uns): Karriere präsenter, Markenblau-Verlauf, Text links, Foto rechts */ .karriere-band { background: radial-gradient(1100px 620px at 80% 20%, #0A6299 0%, transparent 62%), linear-gradient(120deg, #004C79 0%, #00436C 55%, #003659 100%) !important; color: #fff; padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; margin-top: 0 !important; } .karriere-band .kb-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 4vw, 64px); align-items: center; max-width: 1040px !important; margin: 0 auto !important; } .karriere-band .kb-raster > * { margin: 0 !important; } .karriere-band .is-style-dachzeile { color: #5AC98A !important; } .karriere-band .is-style-dachzeile::before { background-image: var(--ca-pfeil-hell); } .karriere-band h2 { color: #fff !important; } .karriere-band h2 .akzent { color: #5AC98A !important; } .karriere-band p { color: rgba(255, 255, 255, .9) !important; font-size: 18px; line-height: 1.55; } .karriere-band .wp-block-buttons { margin-top: 28px !important; gap: 14px; } .karriere-band .is-style-outline .wp-block-button__link { background: transparent !important; color: #fff !important; border: 2px solid rgba(255, 255, 255, .7) !important; } .karriere-band .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .12) !important; border-color: #fff !important; } .karriere-band .kb-foto { line-height: 0; } .karriere-band .kb-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 48px rgba(0, 20, 40, .3); } @media (max-width: 780px) { .karriere-band .kb-raster { grid-template-columns: 1fr; } } /* 1.0.34 Entscheidungsbaum Beratung: Pfeil unter dem Titel bei den Antworten von Frage 3 (war in den schmalen Karten abgeschnitten) */ .eb-baum .eb-zweig:last-child > .eb-ast-3 .eb-titel a > span { display: block; margin-top: 4px; } /* 1.0.35 Startseite auf dem Handy kürzen (Audit): Kartenreihen als Wischleiste statt untereinander. Ausgangslagen, Connectoren, Referenzen, Trainings/Events/Team, Blog. Nächste Karte schaut am Rand hervor. Seite rund 13.500 px → 8.600 px; Desktop unverändert. */ @media (max-width: 780px) { body.home .lagen, body.home .c3ks, body.home .refs, body.home .ausserdem, body.home .wp-block-post-template { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px !important; margin-left: calc(-1 * var(--wp--style--root--padding-left, 16px)) !important; margin-right: calc(-1 * var(--wp--style--root--padding-right, 16px)) !important; padding: 4px var(--wp--style--root--padding-left, 16px) 14px !important; scroll-padding-left: var(--wp--style--root--padding-left, 16px); } body.home .lagen::-webkit-scrollbar, body.home .c3ks::-webkit-scrollbar, body.home .refs::-webkit-scrollbar, body.home .ausserdem::-webkit-scrollbar, body.home .wp-block-post-template::-webkit-scrollbar { display: none; } body.home .lagen > *, body.home .c3ks > *, body.home .refs > *, body.home .ausserdem > *, body.home .wp-block-post-template > * { flex: 0 0 82% !important; max-width: 82% !important; margin: 0 !important; scroll-snap-align: start; } } /* 1.0.36 Startseite Desktop: alle Abschnitte auf eine Breite (die breiteste, wie Hero und Kundenleiste: wide-size 1200 px). Vorher 1040 px Inhalt, Kundenleiste 1200, Zitat 1120. Blog-Kopf links wie alle anderen, Blog in 3 vollen Spalten. */ body.home .wp-block-post-content > .alignfull:not(.is-style-hero) > *:not(.alignfull) { max-width: var(--wp--style--global--wide-size) !important; } body.home .wp-block-post-content > .alignfull:has(.wp-block-query) > .is-style-dachzeile, body.home .wp-block-post-content > .alignfull:has(.wp-block-query) > .wp-block-heading { text-align: left !important; justify-content: flex-start !important; } body.home .wp-block-post-content .refzitat { margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } @media (min-width: 781px) { body.home .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* 1.0.37 Alle Seiten auf eine Breite (Denis 06.11.): jeder Abschnittsinhalt so breit wie Hero und Kundenleiste (wide-size 1200 px). Vorher 5 Breiten: 1040 Inhalt, 1200 Kundenleiste/Entscheidungsbaum, 1120 Tipp-Boxen/Zitat, 1102 Preisrechner, 874 Event-Hinweis, 820 FAQ. Fließtext direkt im Abschnitt (z. B. Rechtstexte) beginnt an derselben Kante, Zeilen bleiben aber höchstens 860 px lang (Lesbarkeit). */ body.page .wp-block-post-content > .alignfull:not(.wp-block-cover) > *:not(.alignfull) { max-width: var(--wp--style--global--wide-size) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } body.page .wp-block-post-content > .alignfull:not(.wp-block-cover) > :is(.eb-tipp, .refzitat, .cap, .cae-hinweis, .faq-liste, .eb-baum, .kundenleiste) { width: 100% !important; } body.page .wp-block-post-content > .alignfull:not(.wp-block-cover) > :is(p, ul, ol, h2, h3, h4):not([class*="dachzeile"]):not(.abschnitt-lead) { padding-inline-end: max(0px, calc(min(100%, var(--wp--style--global--wide-size)) - 860px)); } /* 1.0.38 Produkt-Screenshots (CC5, CC4 Jira) um ein Drittel kleiner (Denis 06.11.): 800 statt 1200 px, mittig. Handy unverändert. */ @media (min-width: 781px) { body.page .wp-block-post-content > .alignfull:not(.wp-block-cover) > .produktbild.produktbild:not(.alignfull) { max-width: 800px !important; } } /* 1.0.39 Startseite „Was kostet das?“: Vorteile als weiße Ovale mit Häkchen, genau wie .c3-vorteile auf den Lösungsseiten (Denis 06.11.) */ .ablauf-fuss .vorteile { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin: 18px 0 0 !important; padding: 0 !important; } .ablauf-fuss .vorteile span { display: block; background: #fff !important; border: 1px solid #E1E6F0; border-radius: 999px; padding: 6px 14px !important; margin: 0 !important; font-size: 14px; font-weight: 700; line-height: 1.4; color: #004C79 !important; } .ablauf-fuss .vorteile span::before { content: "✓ "; color: #267348; font-weight: 900; display: inline; background: none; width: auto; height: auto; margin: 0; position: static; } /* 1.0.40 Knöpfe unter den Abschnitten („Ihre Situation besprechen“, „Kontakt aufnehmen“): grün statt schwarzer Umriss (Denis 06.11.) */ .knopf-nachlauf .is-style-outline .wp-block-button__link { background: #47B27A !important; border-color: #47B27A !important; color: #0D1428 !important; } .knopf-nachlauf .is-style-outline .wp-block-button__link:hover { background: #5AC98A !important; border-color: #5AC98A !important; } /* 1.0.41 Handy-Menü (Denis 06.11.): war nur so hoch wie die Kopfzeile, weil der Unschärfe-Effekt (backdrop-filter) der Kopfzeile das Vollbild-Menü einschließt. Bei offenem Menü aus. Dazu Menü als klare, linksbündige Liste: Hauptpunkte groß, Bereiche als grüne Zwischenzeilen, Links darunter mit Linie, „Alle …“ grün. */ @media (max-width: 1099.98px) { .site-header:has(.wp-block-navigation__responsive-container.is-menu-open) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .wp-block-navigation__responsive-container.is-menu-open { padding: 16px 22px 40px !important; overflow-y: auto; box-sizing: border-box !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding-top: 28px !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; width: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: stretch !important; text-align: left !important; width: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { position: static !important; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; width: 100% !important; opacity: 1 !important; visibility: visible !important; height: auto !important; display: flex !important; flex-direction: column; gap: 0 !important; grid-template-columns: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::after { display: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: 20px !important; font-weight: 800 !important; color: #004C79 !important; padding: 18px 0 8px !important; border-top: 1px solid #E1E6F0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content { border-top: 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content { font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase; color: #267348 !important; padding: 14px 0 4px !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > :not(.has-child) > .wp-block-navigation-item__content { font-size: 16px !important; font-weight: 600 !important; color: #0D1428 !important; padding: 7px 0 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { padding-left: 14px !important; border-left: 2px solid #E1E6F0 !important; margin: 2px 0 6px !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container > :not(.has-child) > .wp-block-navigation-item__content { color: #267348 !important; font-weight: 800 !important; padding-top: 12px !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: 18px !important; right: 18px !important; color: #004C79; } } /* 1.0.42 Handy-Menü nur unter 600 px (dort springt WordPress vom Mega-Menü auf das Klappmenü um). Wird das Fenster mit offenem Klappmenü breiter gezogen, schließt ein Skript (inc/verbesserungen.php) es; das Mega-Menü erscheint. */ /* 1.0.43 Klappmenü (☰) schon unter 1.100 px statt erst unter 600 px (Denis 06.11.): dazwischen brach das Mega-Menü in zwei Zeilen um und der Kontakt-Knopf wurde gequetscht. WordPress schaltet fest bei 600 px um, deshalb hier überschrieben. */ @media (min-width: 600px) and (max-width: 1099.98px) { .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } .site-header .wp-block-navigation__responsive-container.is-menu-open { position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: flex !important; flex-direction: column; width: 100% !important; box-sizing: border-box !important; } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; position: absolute; } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: flex !important; flex-direction: column; max-width: 560px; } } /* 1.0.45 Blog „Der neueste Beitrag“: Bild nicht mehr auf Kartenhöhe beschnitten, sondern ganz in 16:9, senkrecht mittig; die Fläche darüber und darunter im Markenblau-Verlauf der Beitragsbilder (Denis 06.11.) */ .news-karte-gross .news-bild { display: flex !important; align-items: center; background: linear-gradient(120deg, #004C79 0%, #00436C 55%, #003659 100%); } .news-karte-gross .news-bild img { height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover; } /* 1.0.46 Beiträge: kein weißer Streifen zwischen Kopfzeile und Hero (Abstand des Blocks davor, 12 px) */ .wp-site-blocks > .wp-block-template-part + .wp-block-cover { margin-top: 0 !important; } /* 1.0.47 Karten mit Screenshot oben (Requirement to Deploy, Bilder der alten Focused-Build-Seite) */ .kasten-mit-bild .kasten-bild { margin: 0 0 16px !important; line-height: 0; } .kasten-mit-bild .kasten-bild img { width: 100%; height: auto; aspect-ratio: 580 / 330; object-fit: cover; object-position: top left; border-radius: 10px; border: 1px solid #E1E6F0; } /* 1.0.51 Wischleisten der Startseite randlos (Denis 12.11.): Die Breitenregel aus 1.0.37 hatte die negativen Ränder aus 1.0.35 überschrieben. Die Leisten saßen dadurch 20 px eingerückt, die nächste Karte wurde mitten im Rand abgeschnitten. Jetzt laufen sie bis an den Bildschirmrand; ein weicher Auslauf rechts zeigt, dass es weitergeht. */ @media (max-width: 780px) { body.home.page .wp-block-post-content > .alignfull:not(.wp-block-cover) > :is(.lagen, .c3ks, .refs, .ausserdem), body.home.page .wp-block-post-content .wp-block-query > .wp-block-post-template { margin-left: calc(-1 * var(--wp--style--root--padding-left, 20px)) !important; margin-right: calc(-1 * var(--wp--style--root--padding-right, 20px)) !important; width: calc(100% + var(--wp--style--root--padding-left, 20px) + var(--wp--style--root--padding-right, 20px)) !important; max-width: none !important; box-sizing: border-box !important; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); } } /* 1.0.52 Klappmenü über 1.100 px nie im Zustand „offen“ (Denis 12.11., Safari): Blieb das Menü beim Breiterziehen oder beim Zurückblättern offen, erschien in der Desktop-Kopfzeile ein weißer Kasten mit unsichtbaren Links. Breitenabfragen auf 1099.98 px, damit Zwischenbreiten bei Zoom (z. B. 1099,5 px) nicht durchfallen. */ @media (min-width: 1100px) { .site-header .wp-block-navigation__responsive-container-open, .site-header .wp-block-navigation__responsive-container-close { display: none !important; } } /* 1.0.55 Prüfliste Fachabteilungen (12.11.): a) Beiträge: Unter dem Kontaktbereich klebte „Lieber direkt? Schreiben Sie an …“ am grauen Band „Weitere Beiträge“ (der Hinweis ragt aus der gleich hohen Formularkarte heraus). Jetzt Abstand nach unten. b) Bilder im Fließtext alter Beiträge (z. B. „Die Vorteile von Jira in SAP-Projekten“) nie breiter als die Spalte. */ .beitrag-kontakt { padding-bottom: 80px; } .wp-block-post-content img { max-width: 100%; height: auto; }