/* ================================================================ SLK PATHFINDING — Design-Stylesheet Liegt unter wp-content/uploads/slk-design.css, eingebunden per mu-plugin slk-design.php (mit filemtime-Versionierung). Aufbau: Elementor-Container tragen die Klassen (css_classes, ohne Unterstrich), Widgets die _css_classes. Alles Visuelle steht hier, damit es ohne Elementor-Neubau änderbar bleibt. ================================================================ */ :root{ --slk-green:#28783A; --slk-green-deep:#15331B; --slk-green-mid:#1a4423; --slk-lime:#A2CD3A; --slk-lime-soft:#b8e08a; --slk-band:#2c6536; --slk-orange:#EC8429; --slk-orange-hover:#D6741E; --slk-bg:#ffffff; --slk-bg-soft:#f5f7f2; --slk-line:#e2e5dd; --slk-line-2:#cfd4c9; --slk-ink:#1d241e; --slk-ink-2:#3d453e; --slk-ink-3:#68705f; --slk-r:16px; --slk-shadow:0 18px 44px rgba(21,51,27,.10); } /* ================================================================ SCHRIFT — Open Sans, lokal gehostet Die Schriftdateien lagen seit dem Aufsetzen unter /wp-content/uploads/slk-fonts/, es fehlte aber die @font-face-Angabe. Ohne sie war Open Sans nie geladen: Astra setzte Roboto (ebenfalls nicht geladen), also lief alles auf die Systemschrift Arial hinaus. Die Familie muss ausserdem gegen Astras Typografie durchgesetzt werden. ================================================================ */ @font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap; src:url("/wp-content/uploads/slk-fonts/opensans-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap; src:url("/wp-content/uploads/slk-fonts/opensans-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB, U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ---------- Grundlagen ---------- */ body{font-family:"Open Sans","Helvetica Neue",Arial,sans-serif;color:var(--slk-ink);font-size:15.5px;line-height:1.65} .slk h1,.slk h2,.slk h3,.slk h4{margin:0} /* Elementor-Fallstrick: Grid-Container erzwingen eine leere zweite Zeile */ .slk-grid{grid-template-rows:auto!important;grid-auto-rows:auto!important} /* Elementor-Fallstrick: Lazyload killt background-image ab Sektion 4. Klasse verdoppelt = höhere Spezifität als die !important-Regel. */ .slk-bg.slk-bg{background-image:var(--slk-bg-img)!important} /* Netzmuster als wiederverwendbare Variable */ .slk-netz.slk-netz{ --slk-bg-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720' viewBox='0 0 720 720'%3E%3Cg fill='none' stroke='%2328783A' stroke-width='1.2'%3E%3Cpath d='M80 110 L230 60 L340 160 L250 290 Z M340 160 L520 100 L640 220 L520 330 Z M250 290 L400 420 L520 330 M400 420 L300 570 L130 510 L250 290 M640 220 L690 410 L520 330 M300 570 L470 650 L690 410'/%3E%3C/g%3E%3Cg fill='%2328783A'%3E%3Ccircle cx='80' cy='110' r='3'/%3E%3Ccircle cx='230' cy='60' r='2.5'/%3E%3Ccircle cx='340' cy='160' r='3.5'/%3E%3Ccircle cx='250' cy='290' r='3'/%3E%3Ccircle cx='520' cy='100' r='2.5'/%3E%3Ccircle cx='640' cy='220' r='3'/%3E%3Ccircle cx='520' cy='330' r='3.5'/%3E%3Ccircle cx='400' cy='420' r='3'/%3E%3Ccircle cx='300' cy='570' r='2.5'/%3E%3Ccircle cx='130' cy='510' r='3'/%3E%3Ccircle cx='690' cy='410' r='3'/%3E%3Ccircle cx='470' cy='650' r='2.5'/%3E%3C/g%3E%3C/svg%3E"); } /* ---------- Raster ---------- Bewusst eigenes CSS statt Elementors Grid-Container: dessen grid-template-rows:repeat(2,…) erzeugt eine unsichtbare, volle zweite Zeile. Hier gibt es das Problem gar nicht erst. */ /* WICHTIG: Raster-Container werden im Generator IMMER als content_width:"full" angelegt. Grund: bei "boxed" schiebt Elementor die Kinder in ein .e-con-inner — das Grid hätte dann genau ein Kind und alle Spalten stünden untereinander. Breite begrenzt statt dessen der umgebende .slk-wrap. Deshalb hier bewusst nur EINE Ebene. */ .slk-r2,.slk-r3,.slk-r4,.slk-r23{display:grid!important;align-items:stretch} .slk-r2{grid-template-columns:repeat(2,1fr)} .slk-r3{grid-template-columns:repeat(3,1fr)} .slk-r4{grid-template-columns:repeat(4,1fr)} .slk-r23{grid-template-columns:repeat(3,1fr)} /* A–F: 3×2 */ @media (max-width:1024px){ .slk-r3,.slk-r23,.slk-r4{grid-template-columns:repeat(2,1fr)} } @media (max-width:767px){ .slk-r2,.slk-r3,.slk-r4,.slk-r23{grid-template-columns:1fr} } /* Zwei-Spalten-Layouts mit ungleichen Anteilen */ .slk-split-hero{display:grid!important;grid-template-columns:1.05fr .95fr;align-items:center} .slk-split-person{display:grid!important;grid-template-columns:430px 1fr;align-items:start} .slk-split-kontakt{display:grid!important;grid-template-columns:1.35fr 1fr;align-items:stretch} @media (max-width:900px){ .slk-split-hero,.slk-split-person,.slk-split-kontakt{grid-template-columns:1fr!important} } /* Karten dürfen Elementors Breiten-Defaults nicht erben */ .slk-r2 .e-con,.slk-r3 .e-con,.slk-r4 .e-con,.slk-r23 .e-con, .slk-split-hero .e-con,.slk-split-person .e-con,.slk-split-kontakt .e-con{width:auto!important;max-width:none!important} /* ---------- Eyebrow / Überschriften ---------- */ .slk-eyebrow .elementor-heading-title, .slk-eyebrow{font-size:12.5px!important;font-weight:800!important;letter-spacing:.16em!important; text-transform:uppercase!important;color:var(--slk-green)!important;margin-bottom:10px!important;line-height:1.4!important} .slk-h2 .elementor-heading-title{font-size:clamp(24px,3vw,34px)!important;line-height:1.2!important;font-weight:800!important; letter-spacing:-.01em!important;color:var(--slk-green-deep)!important} .slk-intro{font-size:16px;color:var(--slk-ink-3);max-width:68ch} /* ---------- HERO ---------- */ .slk-hero{position:relative;overflow:hidden; background:linear-gradient(115deg,#122c17 0%,#1a4423 48%,#28783A 100%)!important} .slk-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 6px), repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 6px)} .slk-hero > .e-con-inner{position:relative;z-index:2} .slk-hero-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:#cde3b8;background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:999px} .slk-hero-eyebrow .elementor-heading-title::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--slk-lime)} .slk-hero-h1 .elementor-heading-title{font-size:clamp(32px,4.6vw,52px)!important;line-height:1.12!important;font-weight:800!important; letter-spacing:-.015em!important;color:#fff!important} .slk-hero-h1 em{font-style:normal;color:var(--slk-lime-soft)} .slk-hero-sub{font-size:17px;line-height:1.65;color:rgba(255,255,255,.82);max-width:54ch} .slk-hero-sub p{margin:0} .slk-claim{margin:0;padding:16px 20px;border-left:3px solid var(--slk-lime);background:rgba(255,255,255,.06); border-radius:0 12px 12px 0;font-size:15.5px;color:rgba(255,255,255,.92);max-width:62ch} .slk-claim p{margin:0} .slk-claim b{color:#fff} /* Button-Zeile: bewusst hier statt nur über Elementors flex_direction — so steht die Zeile auch dann richtig, wenn das seiteneigene Elementor-CSS noch nicht regeneriert wurde. */ .slk-btns{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:12px;align-items:center} @media (max-width:520px){.slk-btns{flex-direction:column!important;align-items:stretch}} /* Buttons */ .slk-btn .elementor-button{border-radius:999px!important;font-weight:700!important;font-size:15px!important; padding:14px 26px!important;transition:transform .2s ease,background .2s ease,box-shadow .2s ease} .slk-btn .elementor-button:hover{transform:translateY(-2px)} .slk-btn-orange .elementor-button{background:var(--slk-orange)!important;color:#fff!important;box-shadow:0 10px 26px rgba(0,0,0,.22)} .slk-btn-orange .elementor-button:hover{background:var(--slk-orange-hover)!important} .slk-btn-ghost .elementor-button{background:rgba(255,255,255,.1)!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important} .slk-btn-ghost .elementor-button:hover{background:rgba(255,255,255,.18)!important} /* Hero-Szene (SVG) */ .slk-szene svg{width:100%;height:auto;display:block;overflow:visible} .slk-szene .hs-hex{stroke:rgba(255,255,255,.10);fill:none;stroke-width:1.2} .slk-szene .hs-label{font:700 12.5px "Open Sans",sans-serif;fill:rgba(255,255,255,.9)} .slk-szene .hs-label-dim{font:600 11.5px "Open Sans",sans-serif;fill:rgba(255,255,255,.62)} @media (prefers-reduced-motion:no-preference){ .slk-szene .hs-route{stroke-dasharray:1400;stroke-dashoffset:1400;animation:slkDraw 2.8s .3s ease forwards} @keyframes slkDraw{to{stroke-dashoffset:0}} .slk-szene .hs-flow{stroke-dasharray:4 14;animation:slkFlow 2.4s linear infinite} @keyframes slkFlow{to{stroke-dashoffset:-108}} .slk-szene .hs-node{opacity:0;animation:slkPop .5s ease forwards;transform-box:fill-box;transform-origin:center} .slk-szene .hs-node:nth-of-type(1){animation-delay:.7s} .slk-szene .hs-node:nth-of-type(2){animation-delay:1.15s} .slk-szene .hs-node:nth-of-type(3){animation-delay:1.6s} .slk-szene .hs-node:nth-of-type(4){animation-delay:2.05s} .slk-szene .hs-node:nth-of-type(5){animation-delay:2.5s} @keyframes slkPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}} .slk-szene .hs-pulse{transform-box:fill-box;transform-origin:center;opacity:0; animation:slkPulse 2.6s ease-out infinite;animation-delay:3s} @keyframes slkPulse{0%{transform:scale(.4);opacity:.75}70%,100%{transform:scale(1.9);opacity:0}} .slk-szene .hs-tangle{stroke-dasharray:420;animation:slkTangle 2.6s .1s ease forwards} @keyframes slkTangle{to{stroke-dashoffset:420;opacity:.25}} } /* ---------- USP-Strip ---------- */ .slk-usp-wrap{margin-top:-34px!important;position:relative;z-index:5} .slk-usp-karten{background:#fff;border:1px solid var(--slk-line);border-radius:var(--slk-r); box-shadow:var(--slk-shadow)} .slk-usp b,.slk-usp .slk-usp-titel{display:block;font-size:14.5px;color:var(--slk-green-deep); font-weight:700;margin-bottom:4px} .slk-usp p{margin:0;font-size:13px;line-height:1.55;color:var(--slk-ink-3)} .slk-usp .elementor-icon-box-icon{margin-bottom:0!important} .slk-usp svg,.slk-usp .elementor-icon svg{width:22px;height:22px;fill:none;stroke:var(--slk-green);stroke-width:1.8} /* ---------- Einsatzbereiche (A–F) ---------- */ .slk-fall{background:var(--slk-bg-soft);border:1px solid var(--slk-line);border-radius:14px;overflow:hidden; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .slk-fall:hover{transform:translateY(-4px);box-shadow:var(--slk-shadow);border-color:var(--slk-green)} .slk-fall-bild{position:relative;overflow:hidden;background:#1a4423} /* Elementor verschachtelt das Bild zweifach (Widget > Container > img). Ohne dass BEIDE Hüllen den Rahmen ausfüllen, behält das Bild seine Eigenhöhe — der Hintergrund blitzt oben als grüner Streifen durch. */ /* Elementor setzt `.elementor-widget-image img{height:auto}` (0,2,0) und gewinnt gegen eine einfache Klasse. Klasse verdoppeln reicht nicht überall, weil das img je nach Version direkt im Widget sitzt — daher hart. */ .slk-fall-bild.slk-fall-bild img{width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;display:block} /* Buchstaben-Marke der Einsatzbereiche — gleiche Glas-Optik, damit die beiden Bildmarken derselben Gestaltungssprache folgen. */ .slk-fall-marke{position:absolute;left:14px;top:12px;z-index:4;width:34px;height:34px;border-radius:10px; background:rgba(21,51,27,.55);color:#fff;font-weight:800;font-size:14px; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.24); display:flex;align-items:center;justify-content:center} .slk-fall-text{padding:18px;display:flex;flex-direction:column;flex:1} .slk-fall-text b{display:block;font-size:15px;color:var(--slk-green-deep);margin-bottom:6px;line-height:1.35} .slk-fall-text p{margin:0;font-size:13.5px;line-height:1.6;color:var(--slk-ink-3)} /* ---------- Leistungen (Säulen) ---------- */ .slk-band{position:relative;overflow:hidden; background:linear-gradient(180deg,#f4f7f0 0%,#ecf2e5 100%)!important; border-top:1px solid var(--slk-line);border-bottom:1px solid var(--slk-line)} .slk-band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;background-size:720px} .slk-band > .e-con-inner{position:relative;z-index:2} .slk-saeule{background:#fff;border:1px solid var(--slk-line);border-radius:var(--slk-r);overflow:hidden; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .slk-saeule:hover{transform:translateY(-5px);box-shadow:var(--slk-shadow);border-color:var(--slk-green)} .slk-saeule-bild{position:relative;background:#eef4e8; border-bottom:1px solid var(--slk-line);overflow:hidden} .slk-saeule-bild.slk-saeule-bild img{width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;display:block} /* Feldnummer auf dem Bild: größer und als Glasfläche statt Vollton. Die Hintergrundunschärfe ist wichtig — ohne sie schwankt die Lesbarkeit je nachdem, wie hell das Foto an dieser Stelle gerade ist. */ .slk-saeule-tag{position:absolute;left:16px;top:14px;z-index:4; background:rgba(21,51,27,.55);color:#fff; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.24); font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:8px 16px;border-radius:999px;line-height:1.25} @media (max-width:544px){.slk-saeule-tag{font-size:12px;padding:7px 13px}} .slk-saeule-text{padding:22px 24px 24px} .slk-saeule-text h3,.slk-saeule-text .elementor-heading-title{font-size:18px!important;font-weight:700!important; color:var(--slk-green-deep)!important;margin-bottom:8px!important} .slk-saeule-text > p,.slk-saeule-text .elementor-widget-text-editor p{font-size:14.5px;line-height:1.6;color:var(--slk-ink-2)} .slk-saeule ul{margin:0 0 4px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;font-size:13.5px;color:var(--slk-ink-2)} @media (max-width:460px){.slk-saeule ul{grid-template-columns:1fr}} .slk-saeule ul li{padding-left:18px;position:relative;line-height:1.45} .slk-saeule ul li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:2px;background:var(--slk-lime)} .slk-saeule-mehr .elementor-button{background:transparent!important;color:var(--slk-green)!important;padding:0!important; font-size:14px!important;font-weight:700!important;box-shadow:none!important} .slk-saeule-mehr .elementor-button:hover{color:var(--slk-green-deep)!important;transform:none} .slk-saeule-mehr .elementor-button-text::after{content:" →";transition:margin .2s} .slk-saeule-mehr .elementor-button:hover .elementor-button-text::after{margin-left:4px} /* ---------- Kompetenz-Band (dunkel) ---------- */ .slk-komp{position:relative;overflow:hidden;border-radius:var(--slk-r); background:linear-gradient(115deg,#122c17 0%,#1a4423 52%,#28783A 100%)!important;box-shadow:var(--slk-shadow)} .slk-komp > .e-con-inner{position:relative;z-index:2} .slk-komp-eyebrow .elementor-heading-title{color:var(--slk-lime-soft)!important;font-size:12px!important;font-weight:800!important; letter-spacing:.16em!important;text-transform:uppercase!important} .slk-komp-h3 .elementor-heading-title{color:#fff!important;font-size:clamp(19px,2.4vw,25px)!important;font-weight:800!important; letter-spacing:-.01em!important} .slk-komp-sub{font-size:14.5px;color:rgba(255,255,255,.75);max-width:70ch} .slk-komp-sub p{margin:0} .slk-komp-item{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:20px} .slk-komp-item b,.slk-komp-item .slk-komp-titel{display:block;font-size:15px;color:#fff;margin-bottom:6px;font-weight:700} .slk-komp-item p{margin:0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.78)} .slk-komp-tags{display:block;font-size:12px;line-height:1.7;color:rgba(255,255,255,.55); border-top:1px dashed rgba(255,255,255,.2);margin-top:12px;padding-top:9px} /* ---------- Prozess ---------- */ .slk-stepper svg{width:100%;height:auto;display:block;overflow:visible} .slk-stepper .st-label{font:700 19px "Open Sans",sans-serif;fill:var(--slk-green-deep)} /* Kein Versatz nach unten: bei den Wellenbergen steht die zweite Zeile ueber der ersten, ein pauschales Verschieben laesst sie dort kollidieren. Der Zeilenabstand von 19 Einheiten traegt beide Groessen. */ .slk-stepper .st-sub{font:600 16px "Open Sans",sans-serif;fill:var(--slk-ink-3);letter-spacing:.03em} /* Die Beschriftung des letzten Punktes laeuft ueber die Kurve. Ein weisser Rand hinter der Schrift haelt sie dort lesbar, ohne die Grafik umzubauen. */ .slk-stepper .st-label,.slk-stepper .st-sub{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round} .slk-stepper .st-num{font:800 17px "Open Sans",sans-serif;fill:#fff} @media (prefers-reduced-motion:no-preference){ .slk-stepper .st-route{stroke-dasharray:1500;stroke-dashoffset:1500;animation:slkDraw 3s .2s ease forwards} .slk-stepper .st-node{opacity:0;animation:slkFadeUp .5s ease forwards;transform-box:fill-box} .slk-stepper .st-node:nth-of-type(1){animation-delay:.15s} .slk-stepper .st-node:nth-of-type(2){animation-delay:.6s} .slk-stepper .st-node:nth-of-type(3){animation-delay:1.05s} .slk-stepper .st-node:nth-of-type(4){animation-delay:1.5s} .slk-stepper .st-node:nth-of-type(5){animation-delay:1.95s} .slk-stepper .st-node:nth-of-type(6){animation-delay:2.4s} @keyframes slkFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .slk-stepper .st-pulse{transform-box:fill-box;transform-origin:center;opacity:0; animation:slkPulse 2.8s ease-out infinite;animation-delay:3.2s} } .slk-prozess-claim{text-align:center;font-size:clamp(17px,2.2vw,21px);font-weight:700;font-style:italic; color:var(--slk-green-deep);max-width:60ch;margin:0 auto} .slk-prozess-claim p{margin:0} .slk-schritt{background:#fff;border:1px solid var(--slk-line);border-radius:14px;padding:20px; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .slk-schritt:hover{transform:translateY(-3px);box-shadow:var(--slk-shadow);border-color:var(--slk-green)} .slk-schritt-nr{width:28px;height:28px;border-radius:9px;background:var(--slk-green);color:#fff;font-size:13px; font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-right:10px;flex:0 0 auto} .slk-schritt-kopf{display:flex;align-items:center;margin-bottom:10px} .slk-schritt-kopf b{font-size:14.5px;color:var(--slk-green-deep)} .slk-schritt p{margin:0;font-size:13.5px;line-height:1.6;color:var(--slk-ink-3)} .slk-schritt:last-child .slk-schritt-nr{background:var(--slk-orange)} /* ---------- Über mich ---------- */ .slk-person-karte{background:#fff;border:1px solid var(--slk-line);border-radius:var(--slk-r);overflow:hidden; box-shadow:var(--slk-shadow)} .slk-person-karte img{width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:center 15%;display:block} /* Diese Bausteine stecken als in text-editor-Widgets (damit der Text in Elementor editierbar bleibt). Inline-Elemente nehmen weder Polsterung noch Hintergrund richtig an — deshalb explizit auf block. */ .slk-person-name,.slk-fakt,.slk-usp-titel,.slk-komp-titel,.slk-komp-tags{display:block} .slk-person-name{padding:18px 20px 20px;border-top:3px solid var(--slk-green)} .slk-person-name b{display:block;font-size:16px;color:var(--slk-green-deep)} .slk-person-name span{font-size:13px;color:var(--slk-ink-3)} .slk-fakt{background:var(--slk-bg-soft);border:1px solid var(--slk-line);border-radius:12px;padding:14px 16px;text-align:center} .slk-fakt b{display:block;font-size:22px;font-weight:800;color:var(--slk-green-deep);letter-spacing:-.01em} .slk-fakt span{font-size:12px;color:var(--slk-ink-3);line-height:1.4;display:block;margin-top:2px} .slk-vita{position:relative;padding-left:26px} .slk-vita::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px; background:linear-gradient(180deg,var(--slk-green),var(--slk-line))} .slk-vita-item{position:relative;padding-bottom:24px} .slk-vita-item:last-child{padding-bottom:0} .slk-vita-item::before{content:"";position:absolute;left:-26px;top:6px;width:16px;height:16px;border-radius:50%; background:#fff;border:4px solid var(--slk-green)} .slk-vita-item:first-child::before{background:var(--slk-green)} .slk-vita-jahr{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--slk-green);text-transform:uppercase} .slk-vita-item b{display:block;font-size:15px;color:var(--slk-ink);margin:2px 0 1px} .slk-vita-item span.slk-vita-ort{font-size:13.5px;color:var(--slk-ink-3)} .slk-chips{display:flex;flex-wrap:wrap;gap:8px} .slk-chips span{font-size:12.5px;color:var(--slk-ink-2);background:var(--slk-bg-soft);border:1px solid var(--slk-line); padding:7px 13px;border-radius:999px} .slk-chips span b{color:var(--slk-green-deep);font-weight:700} .slk-mini-h .elementor-heading-title{font-size:13px!important;font-weight:800!important;letter-spacing:.12em!important; text-transform:uppercase!important;color:var(--slk-green)!important} /* ---------- Kontakt ---------- */ .slk-form-box{background:#fff;border:1px solid var(--slk-line);border-radius:var(--slk-r);padding:30px;box-shadow:var(--slk-shadow)} .slk-form-box .field{margin-bottom:14px} .slk-form-box .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:520px){.slk-form-box .field-row{grid-template-columns:1fr}} .slk-form-box label{display:block;font-size:13px;font-weight:700;color:var(--slk-ink-2);margin-bottom:5px} .slk-form-box input[type=text],.slk-form-box input[type=email],.slk-form-box textarea{ width:100%;background:var(--slk-bg-soft);border:1px solid var(--slk-line-2);padding:11px 14px; font-family:inherit;font-size:14px;color:var(--slk-ink);border-radius:10px;transition:border-color .15s,background .15s} .slk-form-box textarea{min-height:110px;line-height:1.55;resize:vertical} .slk-form-box input:focus,.slk-form-box textarea:focus{outline:0;border-color:var(--slk-green);background:#fff} .slk-form-box input[type=submit],.slk-form-box .wpcf7-submit{background:var(--slk-orange);color:#fff;border:0; padding:13px 26px;font-size:14.5px;font-weight:700;cursor:pointer;border-radius:999px;transition:background .2s,transform .2s} .slk-form-box input[type=submit]:hover{background:var(--slk-orange-hover);transform:translateY(-2px)} .slk-form-box .wpcf7-list-item{margin:0} .slk-form-box .wpcf7-acceptance .wpcf7-list-item-label{font-weight:400;font-size:13px;line-height:1.55;color:var(--slk-ink-2)} .slk-kontakt-aside{background-color:var(--slk-band);color:#eef3ec;padding:30px 28px;border-radius:var(--slk-r); background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px), repeating-linear-gradient(0deg,rgba(0,0,0,.085) 0 1px,transparent 1px 6px)} .slk-kontakt-aside h3,.slk-kontakt-aside .elementor-heading-title{color:#fff!important;font-size:16px!important;font-weight:700!important} .slk-kontakt-aside a{display:flex;align-items:center;gap:10px;padding:10px 0;color:#fff;font-weight:700;font-size:14.5px; border-bottom:1px solid rgba(255,255,255,.15);text-decoration:none} .slk-kontakt-aside a:hover{color:#ffd9ae} .slk-kontakt-aside address{font-style:normal;font-size:14px;line-height:1.65;color:rgba(255,255,255,.85)} .slk-kontakt-aside .slk-hinweis{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.65); border-top:1px solid rgba(255,255,255,.15);padding-top:14px} .slk-kontakt-aside .slk-hinweis b{color:#fff} /* ---------- Reveal beim Scrollen ---------- */ @media (prefers-reduced-motion:no-preference){ .slk-reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease} .slk-reveal.slk-in{opacity:1;transform:none} /* Im Elementor-Editor laeuft das Skript nicht, das die Klasse .slk-in setzt (der Editor baut die Elemente beim Bearbeiten neu auf). Ohne diese Regel sind dort alle Sektionen ausser dem Hero unsichtbar — man sieht nur leere Container und kann nichts bearbeiten. */ body.elementor-editor-active .slk-reveal, body.elementor-editor-active .slk-reveal.slk-reveal{opacity:1!important;transform:none!important} } /* ================================================================ SPEZIFITÄTS-BLOCK Elementors Kit-CSS setzt .elementor-widget-text-editor{color:…} und .elementor-widget-heading .elementor-heading-title{color:…} — gleiche Spezifität wie eine einzelne Klasse, wird aber SPÄTER geladen und gewinnt damit jeden Gleichstand. Klasse verdoppeln (0,2,0) ist der billigste Weg sauber darüber, ohne !important-Wildwuchs. Steht bewusst am Ende der Datei. ================================================================ */ /* Helle Texte auf dunklem Grund */ .slk-hero-sub.slk-hero-sub,.slk-hero-sub.slk-hero-sub p{color:rgba(255,255,255,.82)} .slk-claim.slk-claim,.slk-claim.slk-claim p{color:rgba(255,255,255,.92)} .slk-claim.slk-claim b{color:#fff} .slk-komp-sub.slk-komp-sub,.slk-komp-sub.slk-komp-sub p{color:rgba(255,255,255,.75)} .slk-komp-item.slk-komp-item p{color:rgba(255,255,255,.78)} .slk-komp-item.slk-komp-item .slk-komp-titel{color:#fff} .slk-komp-item.slk-komp-item .slk-komp-tags{color:rgba(255,255,255,.55)} .slk-kontakt-aside.slk-kontakt-aside,.slk-kontakt-aside.slk-kontakt-aside p{color:rgba(255,255,255,.85)} .slk-kontakt-aside.slk-kontakt-aside a{color:#fff} .slk-kontakt-aside.slk-kontakt-aside a:hover{color:#ffd9ae} .slk-kontakt-aside.slk-kontakt-aside .slk-hinweis{color:rgba(255,255,255,.65)} .slk-kontakt-aside.slk-kontakt-aside .slk-hinweis b{color:#fff} .slk-kontakt-aside.slk-kontakt-aside address{color:rgba(255,255,255,.85)} /* Dunkle Texte auf hellem Grund */ .slk-intro.slk-intro,.slk-intro.slk-intro p{color:var(--slk-ink-3)} .slk-fall-text.slk-fall-text p{color:var(--slk-ink-3)} .slk-fall-text.slk-fall-text b{color:var(--slk-green-deep)} .slk-usp.slk-usp p{color:var(--slk-ink-3)} .slk-usp.slk-usp .slk-usp-titel{color:var(--slk-green-deep)} .slk-saeule-text.slk-saeule-text p,.slk-saeule-text.slk-saeule-text ul{color:var(--slk-ink-2)} .slk-schritt.slk-schritt p{color:var(--slk-ink-3)} .slk-schritt.slk-schritt b{color:var(--slk-green-deep)} .slk-prozess-claim.slk-prozess-claim,.slk-prozess-claim.slk-prozess-claim p{color:var(--slk-green-deep)} /* Überschriften: Kit setzt die Farbe auf .elementor-heading-title */ .slk-eyebrow.slk-eyebrow .elementor-heading-title{color:var(--slk-green)} .slk-h2.slk-h2 .elementor-heading-title{color:var(--slk-green-deep)} .slk-hero-h1.slk-hero-h1 .elementor-heading-title{color:#fff} .slk-hero-eyebrow.slk-hero-eyebrow .elementor-heading-title{color:#cde3b8} .slk-komp-eyebrow.slk-komp-eyebrow .elementor-heading-title{color:var(--slk-lime-soft)} .slk-komp-h3.slk-komp-h3 .elementor-heading-title{color:#fff} .slk-mini-h.slk-mini-h .elementor-heading-title{color:var(--slk-green)} .slk-saeule-text.slk-saeule-text .elementor-heading-title{color:var(--slk-green-deep)} .slk-kontakt-aside.slk-kontakt-aside .elementor-heading-title{color:#fff} /* ---------- Mobil ---------- */ @media (max-width:767px){ .slk-usp-wrap{margin-top:-20px!important} .slk-form-box{padding:22px} .slk-vita{padding-left:22px} } /* ================================================================ ABSTÄNDE — 1:1 aus der Standalone-Vorlage Stolperstein: Elementor nullt Widget-Abstände mit `.e-con .elementor-widget.elementor-widget{margin-block-end:0}` — Spezifität (0,3,0). Eine verdoppelte Klasse (0,2,0) verliert dagegen. Deshalb stehen Widget-Margins hier als `.slk .slk-x.slk-x` (0,3,0); da diese Datei nach Elementors Stylesheet lädt, gewinnt sie den Gleichstand. Container-Margins brauchen die Stufe nicht. ================================================================ */ /* Hero — .hero-eyebrow 22 · h1 18 · .hero-sub 30 · .hero-quote 34 oben */ .slk .slk-hero-eyebrow.slk-hero-eyebrow{margin-bottom:22px!important} .slk .slk-hero-h1.slk-hero-h1{margin-bottom:18px!important} .slk .slk-hero-sub.slk-hero-sub{margin-bottom:32px!important;max-width:52ch} .slk .slk-claim.slk-claim{margin-top:34px!important;max-width:56ch} /* Sektionskopf — .eyebrow 10 · h2 14 · .section-intro 36 */ .slk .slk-eyebrow.slk-eyebrow{margin-bottom:10px!important} .slk .slk-h2.slk-h2{margin-bottom:14px!important} .slk .slk-intro.slk-intro{margin-bottom:36px!important} /* Prozess — .stepper{margin:8px 0 44px!important} · .prozess-claim{margin:0 auto 40px!important} */ .slk .slk-stepper.slk-stepper{margin:8px 0 44px!important} .slk .slk-prozess-claim.slk-prozess-claim{margin:0 auto 40px!important} /* Kompetenz-Band — .komp-eyebrow 8 · h3 6 · .komp-sub 26 */ .slk .slk-komp-eyebrow.slk-komp-eyebrow{margin-bottom:8px!important} .slk .slk-komp-h3.slk-komp-h3{margin-bottom:6px!important} .slk .slk-komp-sub.slk-komp-sub{margin-bottom:26px!important} /* Über mich — .mini-h{margin:36px 0 6px!important} */ .slk .slk-mini-h.slk-mini-h{margin:36px 0 6px!important} .slk .slk-person-text.slk-person-text p{font-size:15px;line-height:1.7;color:var(--slk-ink-2);margin:0!important} /* Leistungsfelder — .pillar h3 8 · .pillar-body>p 12 · .pillar ul 16 */ .slk-saeule-text.slk-saeule-text .elementor-heading-title{margin-bottom:8px!important} .slk-saeule-text.slk-saeule-text p{margin:0 0 12px!important} .slk-saeule-text.slk-saeule-text ul{margin:0 0 16px!important} /* Container-Abstände (nicht von Elementors Widget-Regel betroffen) */ .slk-usp-wrap.slk-usp-wrap{margin-top:-34px} /* .usp-strip{margin:-34px auto 0} */ .slk-band.slk-band{margin-top:84px} /* .leist-band{margin-top:84px} */ .slk-komp.slk-komp{margin-top:20px} /* .komp-band{margin-top:20px} */ .slk-fakten.slk-fakten{margin:22px 0 30px} /* .about-facts */ .slk-fall-text.slk-fall-text{padding:20px 18px} /* .case{padding:20px 18px} */ /* Innerhalb von Text-Widgets (keine Widgets, daher ohne Stufe) */ .slk-vita.slk-vita{margin:34px 0 0} /* .timeline{margin:34px 0 0} */ .slk-chips.slk-chips{margin-top:18px} /* .edu-chips{margin-top:18px} */ /* Kartenverweise — .case-link{margin-top:auto;font-size:12.5px;font-weight:700} Die Karte ist Flex-Spalte, der Textbereich wächst; damit sitzt der Verweis bei allen Karten einer Zeile auf gleicher Höhe, auch bei ungleich langem Text. */ .slk-fall{display:flex;flex-direction:column} /* Der Textteil muss den Rest der Karte fuellen, sonst hat margin-top:auto nichts zum Verteilen und die Verweise sitzen je nach Textlaenge unterschiedlich hoch. Elementor setzt flex-grow ueber eine eigene Variable auf 0 — daher doppelte Klasse und !important. */ .slk-fall .slk-fall-text.slk-fall-text{flex:1 1 auto!important} .slk-fall-linkzeile{margin-top:auto;padding-top:12px} /* Dieselbe Mechanik für die Leistungsfelder: „Fall besprechen" hängt am Kartenboden, damit die Schaltflächen nebeneinanderliegender Felder trotz unterschiedlich langer Texte auf einer Linie sitzen. */ .slk-saeule{display:flex;flex-direction:column} .slk-saeule .slk-saeule-text.slk-saeule-text{flex:1 1 auto!important;display:flex;flex-direction:column} .slk-saeule .slk-saeule-mehr.slk-saeule-mehr{margin-top:auto!important} .slk-fall-link{font-size:12.5px;font-weight:700;color:var(--slk-green);text-decoration:none} .slk-fall-link:hover{color:var(--slk-green-deep)} /* Fakten-Kacheln: gleiche Höhe, egal wie lang die Beschriftung umbricht. Prozenthöhen brechen ab, sobald eine Hülle dazwischen keine eigene Höhe hat — deshalb muss die Kette Grid-Zelle → Widget → Widget-Container → Kachel lückenlos auf 100 % stehen. */ .slk-fakten > .e-con, .slk-fakten > .e-con > .elementor-widget-text-editor, .slk-fakten > .e-con > .elementor-widget-text-editor > .elementor-widget-container{height:100%} .slk-fakten .slk-fakt{height:100%;display:flex;flex-direction:column;justify-content:center} /* ================================================================ HEADER — Astra bändigen Astra rendert den Seitentitel weiter, obwohl display-site-title auf false steht, und ignoriert die Logobreite (bekanntes Verhalten, siehe Playbook: Astra-Optionen greifen oft nicht, per CSS erzwingen). Das Logo trägt den Schriftzug „SLK Pathfinding" bereits — der Titel daneben war doppelt und brach dreizeilig um. ================================================================ */ .site-title, .site-description, .ast-site-identity .site-title, .ast-site-identity .site-description{display:none!important} .custom-logo-link img, img.custom-logo{max-width:220px!important;width:auto!important;height:auto!important} @media (max-width:921px){ .custom-logo-link img, img.custom-logo{max-width:170px!important} } @media (max-width:544px){ .custom-logo-link img, img.custom-logo{max-width:150px!important} } /* ================================================================ QUALITÄTSPRÜFUNG 2026-08-27 — Barrierefreiheit & Standards ================================================================ */ /* CTA-Kontrast: Weiß auf dem Marken-Orange erreicht nur 2,66:1 und verfehlt damit WCAG AA (4,5:1). Statt die Markenfarbe zu verwässern, trägt der Button dunkle Schrift — #15331B auf #EC8429 ergibt 5,19:1. */ /* Entscheidung Jonas 2026-08-27: weiße Schrift auf dem Marken-Orange. Das ergibt 2,66:1 und bleibt damit unter WCAG AA (4,5:1) — bewusst so gewählt, weil die Optik Vorrang hat. Wer beides will: Orange auf #B35C15 abdunkeln, dann trägt Weiß 4,71:1. */ .slk-btn-orange .elementor-button{color:#fff!important} .slk-btn-orange .elementor-button:hover{color:#fff!important} /* Tastaturbedienung: sichtbarer Fokus auf allen bedienbaren Elementen. `:focus-visible` zeigt ihn nur bei Tastatursteuerung, nicht bei Mausklick. */ .slk a:focus-visible, .slk button:focus-visible, .slk input:focus-visible, .slk textarea:focus-visible, .slk .elementor-button:focus-visible{outline:3px solid var(--slk-orange);outline-offset:3px;border-radius:4px} /* Auf dunklem Grund braucht der Ring eine helle Farbe, um sichtbar zu bleiben */ .slk-hero a:focus-visible, .slk-hero .elementor-button:focus-visible, .slk-komp a:focus-visible, .slk-kontakt-aside a:focus-visible{outline-color:var(--slk-lime)} /* Klickflächen: mindestens 44 px hoch — Fingerkuppen-Maß, übliche Praxis (WCAG 2.5.8 verlangt 24 px, 44 px ist der gängige Zielwert). Die Säulen-Verweise hatten padding:0!important und blieben bei 14 px. */ .slk-fall-link{display:inline-flex;align-items:center;min-height:44px} .slk-saeule-mehr .elementor-button{min-height:44px!important;display:inline-flex!important; align-items:center;padding:10px 0!important} /* Kompetenz-Symbole Die SVGs bringen keine eigenen fill/stroke-Angaben mit — ohne diese Regel zeichnet der Browser sie GEFÜLLT, was wie schlichte Kreise aussieht. Gleiche Behandlung wie bei den USP-Symbolen, plus die Kachel aus dem Entwurf. */ .slk-komp-icon{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.12); color:var(--slk-lime-soft);margin-bottom:12px} .slk-komp-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8} /* Kompetenz-Kacheln tragen jetzt Aufzählungen statt Fließtext */ .slk-komp-liste{margin:0;padding:0;list-style:none} .slk-komp-liste li{position:relative;padding-left:16px;margin-bottom:7px; font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.78)} .slk-komp-liste li:last-child{margin-bottom:0} .slk-komp-liste li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px; border-radius:2px;background:var(--slk-lime)} .slk-komp-item.slk-komp-item .slk-komp-liste li{color:rgba(255,255,255,.78)} /* ================================================================ KENNZAHLEN, AUSBILDUNG, FORMULAR ================================================================ */ /* Kennzahlen als grünes Glas: sie sollen aus der hellen Sektion heraustreten, statt sich als weitere blasse Kachel einzureihen. */ .slk-fakt.slk-fakt{ background:linear-gradient(155deg,rgba(40,120,58,.94) 0%,rgba(21,51,27,.97) 100%); border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:18px 16px; box-shadow:0 14px 32px rgba(21,51,27,.26),inset 0 1px 0 rgba(255,255,255,.30); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); position:relative;overflow:hidden} /* Der Lichtverlauf über der oberen Hälfte ist das, was die Fläche als Glas lesen lässt — ohne ihn wirkt sie nur wie ein grüner Kasten. */ .slk-fakt.slk-fakt::after{content:"";position:absolute;left:0;right:0;top:0;height:48%;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,0))} .slk-fakt.slk-fakt b{color:var(--slk-lime-soft);position:relative;z-index:1} .slk-fakt.slk-fakt span{color:rgba(255,255,255,.87);position:relative;z-index:1} /* Ausbildung — steht jetzt unter dem Porträt statt in der rechten Spalte */ .slk-ausbildung{margin-top:16px;background:#fff;border:1px solid var(--slk-line); border-radius:var(--slk-r);padding:20px 22px;box-shadow:var(--slk-shadow)} .slk-aus-promo{border-left:3px solid var(--slk-green);padding-left:13px;margin-bottom:18px} .slk-aus-promo b{display:block;font-size:20px;font-weight:800;color:var(--slk-green-deep);line-height:1.3} .slk-aus-promo span{display:block;font-size:17px;color:var(--slk-ink-3);margin-top:2px} .slk-aus-titel{display:block;font-size:16px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--slk-green);margin-bottom:12px} .slk-aus-liste{margin:0;padding:0;list-style:none;display:grid;gap:12px} .slk-aus-liste li b{display:block;font-size:18px;font-weight:700;color:var(--slk-ink);line-height:1.35} .slk-aus-liste li span{display:block;font-size:17px;color:var(--slk-ink-3);margin-top:1px} /* Formular — Beschriftung und Feld standen aufeinander, zugleich klaffte zwischen der Namenszeile und dem E-Mail-Feld eine doppelte Lücke: die Felder innerhalb der Zeile trugen ihren eigenen Abstand nach unten zusätzlich zu dem der Zeile. */ .slk-form-box .field{margin-bottom:20px} .slk-form-box .field-row{gap:16px;margin-bottom:20px} .slk-form-box .field-row .field{margin-bottom:0} .slk-form-box label .wpcf7-form-control-wrap{display:block;margin-top:9px} /* Der Fließtext neben dem Porträt hatte keine eigene Angabe und war als einziger Absatz zurückgeblieben. */ .slk .slk-person-text.slk-person-text, .slk .slk-person-text.slk-person-text p{font-size:18px} /* ================================================================ BILDRAHMEN — vollflächig Elementor legt zwischen die Elemente eines Containers standardmäßig 20 px. Im Bildrahmen steht davor nur die (absolut gesetzte, also flächenlose) Buchstabenmarke — der Abstand wurde daher als grüner Streifen über dem Bild sichtbar. Diese beiden Regeln standen schon einmal hier und sind mir beim Neuschreiben des Schriftblocks verlorengegangen. ================================================================ */ .slk-fall-bild,.slk-saeule-bild{flex:0 0 auto!important} .slk-fall-bild.slk-fall-bild,.slk-saeule-bild.slk-saeule-bild{gap:0!important;row-gap:0!important} /* ================================================================ TYPOGRAFIE — auf wenige Stufen zusammengefasst Vorher standen über ein Dutzend Größen nebeneinander; das wirkt unruhig, ohne dass die Abstufung noch etwas aussagt. Jetzt: Fließtext 18 px — jeder Lauftext, jede Liste, jedes Feld Überschrift groß 30–44 px — Hero und Sektionsköpfe Überschrift klein 22 px — Karten-, Block- und Kastentitel Auszeichnung 15 px — Versalien-Labels, Marken, Jahreszahlen Dazu die drei Kennzahlen als eigenständige Zahl (30 px) — sie sind weder Überschrift noch Text. Steht am Dateiende, damit es alle früheren Größenangaben überschreibt. ================================================================ */ /* ---- Fließtext: eine einzige Größe ---- */ body{font-size:18px} .slk-intro,.slk-intro p, .slk-hero-sub,.slk-hero-sub p, .slk-claim,.slk-claim p, .slk-usp p,.slk-usp.slk-usp p, .slk-fall-text p,.slk-fall-text.slk-fall-text p, .slk-fall-link, .slk-saeule-text p,.slk-saeule-text.slk-saeule-text p, .slk-saeule ul, .slk-komp-sub,.slk-komp-sub p, .slk-komp-liste li, .slk-komp-tags, .slk-schritt p,.slk-schritt.slk-schritt p, .slk .slk-person-text.slk-person-text, .slk .slk-person-text.slk-person-text p, .slk-person-name span, .slk-vita-item span.slk-vita-ort, .slk-aus-promo span, .slk-aus-liste li span, .slk-chips span, .slk-kontakt-aside a, .slk-kontakt-aside address, .slk-kontakt-aside .slk-hinweis, .slk-form-box label, .slk-form-box input[type=text],.slk-form-box input[type=email],.slk-form-box textarea, .slk-form-box input[type=submit],.slk-form-box .wpcf7-submit, .slk-fakt span{font-size:18px} .slk-btn .elementor-button, .slk-saeule-mehr .elementor-button{font-size:18px!important} /* Das Formular bringt eigene Größen als style-Attribut mit. */ .slk-form-box .form-note, .slk-form-box .wpcf7-acceptance, .slk-form-box .field .wpcf7-list-item-label, .slk-form-box .wpcf7-acceptance .wpcf7-list-item-label{font-size:18px!important} /* ---- Überschrift groß ---- */ .slk-hero-h1 .elementor-heading-title, .slk-h2 .elementor-heading-title, .slk-komp-h3 .elementor-heading-title{font-size:clamp(30px,3.6vw,44px)!important} /* ---- Überschrift klein ---- */ .slk-fall-text b, .slk-saeule-text.slk-saeule-text .elementor-heading-title, .slk-usp b,.slk-usp .slk-usp-titel, .slk-komp-item .slk-komp-titel, .slk-schritt-kopf b, .slk-person-name b, .slk-vita-item b, .slk-aus-promo b, .slk-aus-liste li b, .slk-kontakt-aside h3,.slk-kontakt-aside .elementor-heading-title, .slk-prozess-claim,.slk-prozess-claim p, .slk-form-box .form-title{font-size:22px!important} /* ---- Auszeichnungen ---- */ .slk-eyebrow .elementor-heading-title,.slk-eyebrow, .slk-hero-eyebrow .elementor-heading-title, .slk-komp-eyebrow .elementor-heading-title, .slk-mini-h .elementor-heading-title, .slk-aus-titel, .slk-saeule-tag, .slk-vita-jahr{font-size:15px!important} .slk-fall-marke{font-size:15px} .slk-schritt-nr{width:34px;height:34px;font-size:15px} /* ---- Kennzahlen ---- */ .slk-fakt b{font-size:30px} /* ---- Symbolgrößen im Verhältnis zur Schrift ---- */ .slk-usp svg,.slk-usp .elementor-icon svg{width:30px;height:30px} .slk-komp-icon{width:48px;height:48px} .slk-komp-icon svg{width:26px;height:26px} /* Die Beschriftung der Vorgehens-Grafik bleibt eine Stufe unter der kleinen Überschrift: die Knoten stehen in festem Abstand, größerer Satz würde benachbarte Bezeichnungen zusammenlaufen lassen. */ .slk-stepper .st-label{font-size:22px} .slk-stepper .st-sub{font-size:18px} .slk-stepper .st-num{font-size:15px} /* ================================================================ VORGEHEN, ÜBER MICH, FORMULAR — Umbau ================================================================ */ /* Fünf Kästen in zwei Reihen: 1–3 oben, 4 und 5 unten, wobei „Lösung" über zwei Spalten läuft. */ .slk-prozess-raster{display:grid!important;grid-template-columns:repeat(3,1fr);align-items:stretch} /* Sechs Stationen gehen glatt in zwei Reihen zu dritt auf. */ @media (max-width:900px){.slk-prozess-raster{grid-template-columns:1fr 1fr}} @media (max-width:600px){.slk-prozess-raster{grid-template-columns:1fr}} /* Zweite Reihe unter dem Porträt: Ausbildung und Werdegang nebeneinander */ .slk-person-unten.slk-person-unten{margin-top:36px!important} .slk-person-unten .slk-ausbildung{margin-top:0} /* Aufzählungen in den Leistungsfeldern: jeder Punkt bekommt die Höhe von zwei Zeilen. Sonst steht neben einem zweizeiligen Punkt ein einzeiliger, und die Reihen darunter geraten aus dem Takt. */ .slk-saeule ul li{min-height:calc(2 * 1.45em)} /* Formular: Contact Form 7 legt jedes Feld in ein

. Dessen Absatzabstand aus dem Theme (31,5 px) schlug oben nicht durch, unten aber doch — daher der zu kleine Abstand unter der Überschrift und der zu große nach der Namenszeile. Der Absatzabstand entfällt, die Abstände regeln die Felder. */ .slk-form-box form p{margin:0} .slk-form-box .form-title{margin:0 0 24px!important} .slk-form-box .form-note{margin:14px 0 0!important} /* ================================================================ ÜBER MICH — helle Fassung Der dunkle Kasten um Porträt und Kennzahlen ist entfallen. Er wirkte schwer und trennte die Person vom Rest der Seite. Jetzt drei helle Bänder: Porträt mit Kurzprofil, Werdegang als Zeitleiste quer, Ausbildung als Kartenreihe. ================================================================ */ .slk-split-profil{display:grid!important;grid-template-columns:400px 1fr;align-items:stretch} @media (max-width:900px){ .slk-split-profil{grid-template-columns:1fr!important} .slk-portraet{max-width:400px} } .slk-split-profil > .e-con{width:auto!important;max-width:none!important} /* Porträt ohne Rahmenkasten — nur das Bild mit weicher Kante und Schatten. */ .slk-portraet.slk-portraet{gap:0!important;row-gap:0!important} .slk-portraet .elementor-widget-image{flex:0 0 auto!important} /* Das Porträt ist freigestellt. Auf weissem Grund schwebt es und bricht unten hart ab; ein heller, leicht gruener Grund gibt ihm eine Flaeche, ohne dass ein schwerer Kasten entsteht. */ /* Dieselbe Flaeche wie im Kontaktkasten: Markengruen mit feinem Raster. Das freigestellte Portraet steht darauf, das Raster laeuft um die Figur. */ .slk-portraet .elementor-widget-image{border-radius:18px;overflow:hidden; box-shadow:0 18px 40px rgba(21,51,27,.18);background-color:var(--slk-band); background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px), repeating-linear-gradient(0deg,rgba(0,0,0,.085) 0 1px,transparent 1px 6px)} .slk-portraet img{width:100%!important;height:auto!important;aspect-ratio:4/4.3;object-fit:cover; object-position:center 12%;display:block} .slk-name{padding:18px 4px 0} .slk-name b{display:block;color:var(--slk-green-deep);font-weight:800;line-height:1.3;font-size:22px} .slk-name span{display:block;color:var(--slk-ink-3);margin-top:4px;font-size:18px} /* Feiner Akzent statt Kastenrand. Auf Wunsch von Dr. Kirchner von 52px auf 120px verlaengert (06.09.2026); die Staerke bleibt bei 3px. */ .slk-name::before{content:"";display:block;width:120px;height:3px;border-radius:2px; background:var(--slk-green);margin-bottom:14px} .slk-profil-lead p{margin:0} .slk-profil-lead,.slk-profil-lead p{font-size:18px;line-height:1.7;color:var(--slk-ink-2)} .slk .slk-profil-lead.slk-profil-lead{margin-bottom:0!important} /* Kennzahlen hell: grüne Zahl auf hellem Grund, oben eine grüne Kante. Die dunkle Glasfassung gehörte zum Kasten und passt hier nicht mehr. */ /* Neben dem hohen Portraet stand rechts nur ein kurzer Absatz mit drei Kacheln — darunter blieb eine grosse Leere. Als eigene Karte, die auf dieselbe Hoehe geht und ihren Inhalt mittig traegt, wird aus der Leere Raum: der Block liest sich als Gegenstueck zum Bild. Senkrecht gestapelte Kennzahlen waren der erste Versuch — bei 712 px Spaltenbreite wurden daraus ueberdehnte Balken. */ .slk-profil-rechts{background:#fff;border:1px solid var(--slk-line);border-radius:var(--slk-r); box-shadow:var(--slk-shadow);height:100%} .slk-kennzahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} @media (max-width:900px){.slk-kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:900px){.slk-profil-rechts{height:auto;margin-top:26px;padding:24px 22px}} @media (max-width:620px){.slk-kennzahlen{grid-template-columns:1fr}} /* Grünes Glas — drei Akzente in einer sonst hellen Sektion. Der Lichtverlauf über der oberen Hälfte macht den Glaseindruck; ohne ihn bliebe ein flacher grüner Kasten. */ .slk-kennzahl{position:relative;overflow:hidden;border-radius:14px;padding:18px 18px 20px; background:linear-gradient(155deg,rgba(40,120,58,.94) 0%,rgba(21,51,27,.97) 100%); border:1px solid rgba(255,255,255,.22); box-shadow:0 14px 32px rgba(21,51,27,.26),inset 0 1px 0 rgba(255,255,255,.30); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .slk-kennzahl::after{content:"";position:absolute;left:0;right:0;top:0;height:48%;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,0))} .slk-kennzahl b{display:block;position:relative;z-index:1;color:var(--slk-lime-soft);font-weight:800; font-size:30px;line-height:1.1;letter-spacing:-.01em} .slk-kennzahl span{display:block;position:relative;z-index:1;color:rgba(255,255,255,.87); font-size:18px;line-height:1.45;margin-top:8px} /* Werdegang quer: vier Stationen auf einer Linie. */ .slk-werdegang-block.slk-werdegang-block{margin-top:44px!important} .slk-zeitleiste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} /* Die Punkte sassen am linken Rand ihrer Spalte, rechts blieb Platz ungenutzt. Mittig gesetzt verteilen sie sich ueber die volle Breite (Korrektur V5). */ .slk-station{position:relative;padding-top:26px;text-align:center} /* Die Linie liegt hinter den Punkten und endet an der letzten Station. */ .slk-station::before{content:"";position:absolute;left:50%;right:calc(-50% - 20px);top:7px;height:2px; background:var(--slk-line-2)} .slk-station:last-child::before{right:auto;width:0} .slk-station::after{content:"";position:absolute;left:50%;margin-left:-8px;top:0;width:16px;height:16px; border-radius:50%;background:#fff;border:4px solid var(--slk-green)} /* Gefuellter Punkt = heutige Station. Die Leiste laeuft von links (1999) nach rechts (heute), also ist es der letzte. */ .slk-station:last-child::after{background:var(--slk-green)} .slk-station-jahr{display:block;font-size:15px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--slk-green);margin-bottom:4px} .slk-station b{display:block;font-size:22px;font-weight:700;color:var(--slk-ink);line-height:1.35; hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} .slk-station-ort{display:block;font-size:18px;color:var(--slk-ink-3);margin-top:4px} @media (max-width:900px){ .slk-zeitleiste{grid-template-columns:1fr 1fr} .slk-station:nth-child(2n)::before{right:auto;width:0} } @media (max-width:620px){ /* Einspaltig wird aus der Quer- wieder eine senkrechte Leiste. */ .slk-zeitleiste{grid-template-columns:1fr;gap:0} .slk-station{padding:0 0 26px 30px} .slk-station::before{left:7px;right:auto;top:16px;bottom:-10px;width:2px;height:auto} .slk-station:last-child::before{display:none} .slk-station::after{top:2px} } .slk-bildung-block.slk-bildung-block{margin-top:44px!important} .slk-bildung{display:grid;gap:14px;grid-template-columns:repeat(5,minmax(0,1fr))} @media (max-width:1000px){.slk-bildung{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:640px){.slk-bildung{grid-template-columns:1fr}} .slk-bildung-karte{background:#fff;border:1px solid var(--slk-line);border-radius:14px;padding:18px 18px 20px; display:flex;flex-direction:column} .slk-bildung-tag{display:block;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--slk-green);margin-bottom:8px;font-size:15px} /* „Werkstoffwissenschaft" und „Kautschuktechnologie" sind laenger als die Karte breit ist — ohne Trennung ragen sie heraus. */ .slk-bildung-karte b{display:block;color:var(--slk-ink);font-weight:700;line-height:1.35;font-size:22px; hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} .slk-bildung-karte > span:last-child{display:block;color:var(--slk-ink-3);margin-top:4px;font-size:18px} .slk-bildung-promo{background:var(--slk-green-deep);border-color:var(--slk-green-deep)} .slk-bildung-promo .slk-bildung-tag{color:var(--slk-lime)} .slk-bildung-promo b{color:#fff} .slk-bildung-promo > span:last-child{color:rgba(255,255,255,.8)} /* ================================================================ SCHMALE BILDSCHIRME — am echten Gerät gefunden Zwei Stellen liefen bei 375 px über ihren Rahmen hinaus. ================================================================ */ /* Deutsche Komposita sind länger als eine Kachel breit ist („Problemlösungskompetenz"). Ohne Trennung ragen sie heraus. */ .slk-komp-titel, .slk-fall-text b, .slk-saeule-text .elementor-heading-title{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} /* Die Absendeschaltfläche wuchs mit ihrer Beschriftung über die Spalte hinaus. */ .slk-form-box input[type=submit],.slk-form-box .wpcf7-submit{max-width:100%} /* ================================================================ HERO-MOTIV — freigestellt Das Bild liegt als Hintergrund-Overlay auf dem rechten Hero-Container; Elementor zeichnet es als ::before. Es hat jetzt einen Alphakanal, sitzt also ohne weissen Kasten auf dem Grün. Der Lichtschein um die Glühbirne liess sich nicht freistellen — helles Licht auf hellem Grund hat keine Kante. Er wird hier als weicher Farbverlauf nachgebildet; damit seine Position stabil bleibt, bekommt der Container das Seitenverhältnis des Bildes. ================================================================ */ .slk-hero-bild{position:relative;align-self:center;aspect-ratio:1800/666;min-height:0!important} .slk-hero-bild::before{background-size:contain!important;background-position:center!important; background-repeat:no-repeat!important} /* Die Glühbirne sitzt am rechten Rand des Motivs. Läge der Schein im selben Rechteck, schnitte ihn die Containerkante als gerade Linie ab — deshalb reicht diese Ebene über den Container hinaus. */ .slk-hero-bild{overflow:visible} /* Die Lichtebene ragt bewusst ueber den Container hinaus, damit sie weich auslaeuft. Sie verbreiterte dadurch aber die Seite und erzeugte je nach Fensterbreite einen waagerechten Rollbalken — die Sektion schneidet sie deshalb ausdruecklich ab. */ .slk-hero.slk-hero{overflow:hidden!important} .slk-hero-bild::after{content:"";position:absolute;inset:-18% -12%;pointer-events:none;z-index:1; /* Ohne ausdrueckliche Groesse reicht ein Kreisverlauf bis zur entferntesten Ecke — der Schein wuerde die ganze Flaeche als hellen Kasten einfaerben. Die Radien sind relativ, damit der Schein bei jeder Breite am Glaskolben sitzt und gleich gross bleibt. */ background:radial-gradient(ellipse 21% 52% at 85% 43%, rgba(255,206,84,.50) 0%,rgba(255,193,62,.22) 40%,rgba(255,193,62,0) 72%)} @media (max-width:880px){ /* Hochkant steht das Motiv unter dem Text und darf die volle Breite nutzen. */ .slk-hero-bild{aspect-ratio:1800/666;width:100%} } /* Hero-Motiv: senkrecht mittig und nach links unter die Textspalte geschoben. Elementor setzt die Ausrichtung der Rasterkinder mit hoher Priorität — daher doppelte Klasse und !important, sonst bleibt align-self auf „auto". */ .slk-split-hero.slk-split-hero{align-items:center!important} .slk-hero-bild.slk-hero-bild{align-self:center!important; /* Das Drahtknäuel rückt hinter die Textspalte; der Text bleibt oben. */ margin-left:-250px!important} .slk-split-hero > .e-con:first-child{position:relative;z-index:2} @media (max-width:1100px){.slk-hero-bild.slk-hero-bild{margin-left:-150px!important}} @media (max-width:880px){.slk-hero-bild.slk-hero-bild{margin-left:0!important}} /* ================================================================ VORGEHEN — Stationen auf dem Hero-Motiv Statt einer eigenen Kurvengrafik trägt jetzt dasselbe freigestellte Motiv die fünf Stationen: die Beschriftungen hängen an den Symbolen (Knäuel, Lupe, Puzzleteil, Diagramm, Glühbirne). Die Angaben --x/--y sind Prozentwerte im Bild; weil der Kasten das Seitenverhältnis des Bildes hat, sitzen sie bei jeder Breite richtig. ================================================================ */ .slk-weg{position:relative;aspect-ratio:1800/666;margin:8px 0 0; background:url("/wp-content/uploads/2026/08/hero-freigestellt.webp") center/contain no-repeat} /* Damit die Beschriftungen ober- und unterhalb Platz haben. */ .slk .slk-weg-block.slk-weg-block{margin:12px 0 96px!important;padding:132px 0 104px!important} /* Die Beschriftungen stehen ausserhalb des Bildes — im Bild lagen sie auf der Zeichnung und waren nicht lesbar. Eine Linie fuehrt vom Symbol nach draussen. Damit die Linienlaenge aus --y berechenbar bleibt, spannt sich die Marke ueber die volle Bildhoehe und nur der Punkt sitzt auf --y. */ .slk-weg-marke{position:absolute;left:var(--x);top:0;height:100%;width:0} .slk-weg-punkt{position:absolute;left:-7px;top:var(--y);margin-top:-7px;width:14px;height:14px; border-radius:50%;background:var(--slk-green);box-shadow:0 0 0 5px rgba(255,255,255,.92)} .slk-weg-linie{position:absolute;left:-1px;width:2px;background:var(--slk-line-2)} /* Die Beschriftungen hingen an den Kanten des Bildkastens. Der Kasten ist aber viel hoeher als die Zeichnung darin — dadurch standen sie weit vom Symbol entfernt. Jetzt haengen sie in festem Abstand am eigenen Punkt. 1 und 6 brauchen mehr Abstand: dort ragen Knaeuel und Birne weit aus der Mittellinie heraus. */ /* Die Beschriftungen haengen NICHT in festem Pixelabstand am Punkt — dann wandern sie bei jeder Bildbreite anders und stehen nie sauber auf einer Linie. Stattdessen gibt --t je Station die Kante des Textblocks in Prozent der Bildhoehe vor: bei "oben" die Unterkante, bei "unten" die Oberkante. Station 2 und 4 teilen sich einen Wert, 3 und 5 ebenso — dadurch stehen die Zeilen exakt auf gleicher Hoehe, egal wo ihr Punkt sitzt. Die Linie spannt sich dann ueber die verbleibende Strecke und reicht bis an die Schrift. */ .slk-weg-text{position:absolute;left:50%;transform:translateX(-50%);width:165px;text-align:center} /* Unten ist die Oberkante zugleich die dem Symbol zugewandte Seite: sie laesst sich direkt setzen, die Linie ergibt sich aus dem Abstand zum Punkt. */ .slk-weg-unten .slk-weg-text{bottom:auto;top:var(--t)} .slk-weg-unten .slk-weg-linie{top:calc(var(--y) + 11px);bottom:auto; height:calc(var(--t) - var(--y) - 19px)} /* Oben ist es umgekehrt: gesetzt wird die OBERkante, damit 2 und 4 buendig mit dem Knaeuel abschliessen. Die Unterkante ergibt sich erst aus der Texthoehe, die im CSS nicht bekannt ist. Deshalb spannt sich eine Huelle vom Textrand bis kurz vor den Punkt; darin nimmt der Text seine Hoehe und die Linie fuellt exakt den Rest. Die Huelle ist 0 breit, der Text zentriert sich dadurch ueber der Linie. */ .slk-weg-oben .slk-weg-strang{position:absolute;left:0;top:var(--t); bottom:calc(100% - var(--y) + 11px); /* width:0 ist zwingend. Ohne die Angabe zieht sich der absolut positionierte Kasten auf die Breite seines Inhalts zusammen (165px), und weil seine linke Kante auf dem Punkt sitzt, rutschen Text UND Linie um die halbe Textbreite nach rechts. Mit Breite 0 ragt der zentrierte Inhalt nach beiden Seiten gleich weit heraus und steht ueber dem Punkt. */ width:0;display:flex;flex-direction:column;align-items:center} /* Vier Klassen, damit diese Regel auch die spaetere Sonderbehandlung der letzten Station schlaegt: die setzt transform:translateX(-50%), was auch auf ein statisch positioniertes Element wirkt — bei „Lösung" lief die Schrift dadurch um 83px neben ihrer eigenen Linie. */ .slk-weg-marke.slk-weg-oben .slk-weg-strang .slk-weg-text{ position:static;transform:none;left:auto;right:auto;flex:0 0 auto} .slk-weg-oben .slk-weg-linie{position:static;flex:1 1 auto;width:2px; min-height:0;margin-top:8px} /* Erste und letzte Station stehen weiter abgesetzt: das Problem ragt nach unten aus der Zeichnung heraus, die Lösung nach oben. Das steckt jetzt in ihrem --t (108.4% bzw. -16.7%), nicht mehr in Sonderklassen. */ /* Die letzte Station sitzt bei 93 % — mittig gesetzt ragte ihre Beschriftung ueber den rechten Rand und erzeugte seitliches Scrollen. Sie haengt jetzt an der rechten Kante des Bildes. */ .slk-weg-marke:last-child .slk-weg-text{left:auto;right:0;transform:none} .slk-weg-text b{display:flex;align-items:center;justify-content:center;gap:8px; font-size:22px;font-weight:700;color:var(--slk-green-deep);line-height:1.3} /* Die Ziffer als kleine Marke vor dem Namen — auf dem Symbol selbst wuerde sie die Zeichnung verdecken. */ .slk-weg-text b i{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--slk-green); color:#fff;font-style:normal;font-size:15px;font-weight:800; display:flex;align-items:center;justify-content:center} .slk-weg-text > span{display:block;font-size:18px;color:var(--slk-ink-3);margin-top:4px;line-height:1.4} /* Die Birne pulsiert langsam — der Moment, in dem die Loesung aufgeht. Das Motiv ist ein Hintergrundbild, ein einzelner Teil davon laesst sich nicht animieren. Der Schein liegt deshalb als eigenes Element genau ueber dem Glaskolben (93,9% / 41,4% der Bildflaeche). Bewegt werden nur Deckkraft und Groesse — beides uebernimmt der Compositor, das kostet keine Rechenzeit beim Scrollen. Die Breite bleibt bei 20%, sonst ragt der Schein weiter aus dem Bildkasten heraus als der Abschnitt seitlich Luft hat, und die Seite bekommt einen waagerechten Rollbalken. */ .slk-weg::after{content:"";position:absolute;left:93.9%;top:41.44%; width:20%;aspect-ratio:1;transform:translate(-50%,-50%); border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle closest-side, rgba(255,216,74,.60) 0%, rgba(255,203,48,.36) 40%, rgba(255,195,36,.15) 64%, rgba(255,192,30,0) 80%); animation:slk-birne 3.6s ease-in-out infinite} @keyframes slk-birne{ 0%,100%{opacity:.16;transform:translate(-50%,-50%) scale(.92)} 50% {opacity:.9; transform:translate(-50%,-50%) scale(1.08)} } /* Wer Bewegung abbestellt hat, bekommt den Schein ruhig stehend. */ @media (prefers-reduced-motion:reduce){ .slk-weg::after{animation:none;opacity:.45;transform:translate(-50%,-50%)} } .slk-weg-marke:last-child .slk-weg-punkt{background:var(--slk-orange)} .slk-weg-marke:last-child .slk-weg-text b i{background:var(--slk-orange)} @media (max-width:900px){ /* Auf schmalen Bildschirmen ist im Bild kein Platz fuer Beschriftungen. Das Motiv wandert in ein Pseudoelement, die Stationen stehen darunter als Liste — sonst laegen sie im Bild. */ .slk-weg{aspect-ratio:auto;background:none;margin:0} .slk-weg::before{content:"";display:block;aspect-ratio:1800/666;margin-bottom:20px; background:url("/wp-content/uploads/2026/08/hero-freigestellt.webp") center/contain no-repeat} .slk .slk-weg-block.slk-weg-block{padding:0!important;margin:12px 0 32px!important} .slk-weg-marke{position:static;height:auto;width:auto;display:block;margin-top:16px} .slk-weg-punkt,.slk-weg-linie{display:none} .slk-weg-text{position:static;transform:none;width:auto;text-align:left;margin:0} /* Huelle aufloesen, damit die Stationen wieder als schlichte Liste stehen. Der Selektor muss die Klasse mitnehmen: .slk-weg-oben .slk-weg-strang ist spezifischer, und Media Queries heben die Spezifitaet nicht an. Ohne das blieb die Huelle absolut positioniert und 2 und 4 lagen uebereinander. */ .slk-weg-oben .slk-weg-strang,.slk-weg-strang{position:static;display:contents} .slk-weg::after{display:none} .slk-weg-text b{justify-content:flex-start} } /* ================================================================ USP-STREIFEN — Symbol über der Überschrift Neben dem Titel stand das Symbol zu klein und sass bei zweizeiligen Überschriften auf der falschen Höhe. Es steht jetzt darüber, in einer hellgrünen Kachel, die ihm Gewicht gibt, ohne Farbe hinzuzufügen. ================================================================ */ .slk-usp-icon{display:inline-flex;align-items:center;justify-content:center; width:56px;height:56px;border-radius:15px;background:#eef4e8; border:1px solid #dfe9d6;flex:0 0 auto} .slk-usp-icon svg{width:28px;height:28px;fill:none;stroke:var(--slk-green);stroke-width:1.7} /* Die frühere Regel zielte auf jedes SVG im Streifen — jetzt nur noch auf die Kachel, damit sie sich nicht gegenseitig überschreiben. */ .slk-usp .elementor-widget-html{flex:0 0 auto!important} .slk-usp .slk-usp-titel{margin-bottom:6px} /* Astras Typografie setzt Roboto auf Body und Ueberschriften und schlaegt die Grundregel. Deshalb hier noch einmal ausdruecklich. */ body,button,input,select,textarea, .elementor-widget-text-editor, .elementor-widget-button .elementor-button, .slk,.slk *{font-family:"Open Sans","Helvetica Neue",Arial,sans-serif} /* Bei Ueberschriften konkurrieren drei Quellen: Astra (Montserrat), Elementors globale Typografie in post-53.css (Roboto) und diese Datei. Elementors Regel wird spaeter geladen und gewinnt sonst — daher ausnahmsweise !important. */ h1,h2,h3,h4,h5,h6, .elementor-widget-heading .elementor-heading-title{ font-family:"Open Sans","Helvetica Neue",Arial,sans-serif!important} /* „Wärmebehandlungstechnik & Schadensanalytik“ soll mit beiden Begriffen je in einer Zeile stehen — dafür in dieser einen Karte etwas kleinerer Satz. */ /* Der Umbruch steht im Text; die automatische Trennung wuerde ihn stoeren. */ .slk-bildung-lang b{font-size:19px!important;line-height:1.35; hyphens:manual!important;overflow-wrap:normal!important} /* Diskretion-Hinweis am Fuss des Kontaktkastens, abgesetzt. */ .slk-diskretion{margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)} .slk-diskretion b{display:block;font-weight:800;color:#fff;font-size:18px;margin-bottom:6px} .slk-diskretion p{margin:0;font-size:18px;line-height:1.6;color:rgba(255,255,255,.82)} /* Fußzeile: Die drei Spalten waren gleich breit, dadurch brach die Zeile „© 2026 SLK Pathfinding · Dr. Steffen Lutz Kirchner" um. Die erste Spalte bekommt mehr Raum, die dritte ist ohnehin leer (Korrektur V5). */ @media (min-width:922px){ .ast-builder-footer-grid-columns.site-primary-footer-inner-wrap{ grid-template-columns:1.6fr 1.1fr 0.3fr!important} .ast-footer-copyright p{white-space:nowrap} } /* ================================================================ HOCHKANT — bei der Sichtprüfung am Gerät gefunden ================================================================ */ @media (max-width:620px){ /* Die Zeitleiste steht hochkant: Punkt und Text gehören nach links. Die mittige Ausrichtung gilt nur für die waagerechte Fassung — sonst liegt der Punkt mitten auf der Jahreszahl. */ .slk-station{text-align:left} .slk-station::after{left:0;margin-left:0} } @media (max-width:460px){ /* Einspaltig hat das Zweizeilen-Mindestmaß keinen Zweck: es paart nichts mehr und reißt nur Lücken zwischen die Punkte. */ .slk-saeule ul li{min-height:0} } @media (max-width:921px){ /* Die Fußzeile lief ohne seitlichen Abstand bis an beide Ränder. */ .ast-footer-copyright{padding-left:20px;padding-right:20px} } /* ================================================================ COOKIE-DIALOG (Borlabs) IM MARKENAUFTRITT Bewusst hier und nicht in den Borlabs-Einstellungen: die dort erzeugte CSS-Datei wird mit einer festen Versionsnummer ausgeliefert, die beim Speichern nicht hochzählt — Änderungen erreichen dann wiederkehrende Besucher nicht. Über die Variablen greift es sofort. ================================================================ */ :root{ /* Hauptaktionen */ --dialog-button-accept-all-color:#28783A; --dialog-button-accept-all-color-hover:#15331B; --dialog-button-accept-all-text-color:#fff; --dialog-button-accept-all-text-color-hover:#fff; --dialog-button-save-consent-color:#28783A; --dialog-button-save-consent-color-hover:#15331B; --dialog-button-save-consent-text-color:#fff; --dialog-button-save-consent-text-color-hover:#fff; --dialog-button-selection-color:#28783A; --dialog-button-selection-color-hover:#15331B; --dialog-button-selection-text-color:#fff; --dialog-button-selection-text-color-hover:#fff; /* Nebenaktionen ruhiger: „Nur essenzielle" laeuft ueber die Close-Variablen, „Individuelle Einstellungen" ueber preferences. */ --dialog-button-close-color:#eef4e8; --dialog-button-close-color-hover:#e0ead6; --dialog-button-close-text-color:#15331B; --dialog-button-close-text-color-hover:#15331B; --dialog-button-accept-only-essential-color:#eef4e8; --dialog-button-accept-only-essential-color-hover:#e0ead6; --dialog-button-accept-only-essential-text-color:#15331B; --dialog-button-accept-only-essential-text-color-hover:#15331B; --dialog-button-preferences-color:#eef4e8; --dialog-button-preferences-color-hover:#e0ead6; --dialog-button-preferences-text-color:#15331B; --dialog-button-preferences-text-color-hover:#15331B; /* Bedienelemente und Schalter */ --dialog-control-element-color:#28783A; --dialog-control-element-color-hover:#15331B; --dialog-card-control-element-color:#28783A; --dialog-card-control-element-color-hover:#15331B; --dialog-checkbox-background-color-active:#28783A; --dialog-checkbox-border-color-active:#28783A; /* Der Vorgabewert fuer „nicht gesetzt" ist ein Rot (#a72828) und wirkt wie eine Fehlermeldung. */ --dialog-checkbox-border-color-inactive:#cfd4c9; /* Flaechen und Form wie auf der Seite */ --dialog-card-background-color:#f5f7f2; --dialog-card-separator-color:#e2e5dd; --dialog-card-text-color:#3d453e; --dialog-backdrop-background-opacity:0.62; --dialog-font-size:16px; --dialog-border-radius-top-left:16px; --dialog-border-radius-top-right:16px; --dialog-border-radius-bottom-left:16px; --dialog-border-radius-bottom-right:16px; --dialog-card-border-radius-top-left:12px; --dialog-card-border-radius-top-right:12px; --dialog-card-border-radius-bottom-left:12px; --dialog-card-border-radius-bottom-right:12px; --dialog-button-border-radius-top-left:999px; --dialog-button-border-radius-top-right:999px; --dialog-button-border-radius-bottom-left:999px; --dialog-button-border-radius-bottom-right:999px; } /* Astra faerbt jeden