/* ------------------------------------------------------------------ ki-schulwissen.de, Gestaltungsschicht für die WordPress-Seiten. Eingebunden über das Code-Schnipsel 125 (Ort: elementor_head). Zwei Dinge sind hier anders als in der Fassung für die Werkzeuge: 1. Keine @font-face-Regeln, die Schriften bindet das Schnipsel ein. 2. Keine Grundstil-Rücksetzer aus base.css, die würden mit Elementor kollidieren (Elementor setzt eigene Abstände auf body und h1 bis h4). Elementor nimmt an Elementen KEINE eigenen CSS-Klassen an, nur IDs (`_cssid`). Wiederkehrende Bausteine werden deshalb unten über ID-Regeln angesprochen, die beim Seitenaufbau vergeben werden. ------------------------------------------------------------------ */ /* ---------- Farbtokens auf den Stand des Designsystems ---------- Das Kit (post-9.css) definiert sie bereits, hier werden die vier geänderten überschrieben und drei fehlende ergänzt. */ :root{ --Hintergrund:#F4F3F0 !important; --Text:#1E3A5F !important; --Hell:#EDEBE6 !important; --Rahmen:#E3E0DA !important; --AkzentSchrift:#9E4526; --TextAufDunkel:#C5D0DE; --AkzentGedrueckt:#8F4425; } /* ---------- Grundfläche ---------- Löst die Regel im Block „grundflaeche“ des Schnipsels ab. */ body,.site,#main-container,.ct-container-full{background-color:#F4F3F0 !important;} /* ---------- Bausteine ---------- Wortgleich aus dem Designsystem übernommen (components/ksw.css). Die Klassen greifen auf den HTML-Werkzeugen; auf den WordPress-Seiten dienen sie als Vorlage für die ID-Regeln. */ /* ki-schulwissen.de: Bausteine in einer Datei. Auch Grundlage der Stildatei für /werkzeuge/. Keine Pseudo-Elemente für Inhalte, Schatten ausgeschrieben (Elementor-tauglich). */ .ksw-container{max-width:calc(1160px + 48px);margin:0 auto;padding:0 24px} .ksw-section{padding:clamp(48px,7vw,104px) 0} .ksw-section--sunken{background:#EDEBE6} .ksw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr));gap:22px} .ksw-stack{display:flex;flex-direction:column;gap:16px} /* Typo */ .ksw-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;color:#9E4526} .ksw-label--muted{color:#5A6B80} .ksw-on-deep .ksw-label,.ksw-label--on-deep{color:#C5D0DE} .ksw-title{font-size:clamp(2.3rem,6vw,4.1rem);font-weight:900;letter-spacing:-0.03em;line-height:1.08;text-wrap:balance} .ksw-h2{font-size:clamp(1.55rem,3.2vw,2.3rem);font-weight:900;letter-spacing:-0.03em;line-height:1.12;text-wrap:balance} .ksw-h3{font-size:1.16rem;font-weight:700;line-height:1.3} .ksw-lead{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.55;color:#5A6B80;max-width:56ch;text-wrap:pretty} .ksw-body{font-size:1.03rem;line-height:1.65;max-width:64ch;text-wrap:pretty} .ksw-body p+p{margin-top:1em} .ksw-small{font-size:.9rem;line-height:1.55;color:#5A6B80} .ksw-heading{display:flex;flex-direction:column;gap:12px} .ksw-heading .ksw-lead{margin-top:4px} /* Kopfleiste */ .ksw-header{position:sticky;top:0;z-index:50;background:#FFFFFF;border-bottom:1px solid #E3E0DA} .ksw-header__inner{max-width:calc(1160px + 48px);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px} .ksw-brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:1.08rem;letter-spacing:-0.01em;color:#1E3A5F;text-decoration:none;min-height:46px} .ksw-brand:hover{color:#1E3A5F} /* Markenpunkt mit hellem Hof, auf Dirks Wunsch vom 22.10.2026. */ .ksw-brand__dot{width:10px;height:10px;border-radius:50%;background:#B4552F;flex:none;margin-left:4px;box-shadow:0 0 0 5px rgba(180,85,47,.15)} .ksw-nav{display:flex;align-items:center;gap:6px} .ksw-nav__link{display:inline-flex;align-items:center;min-height:46px;padding:0 12px;color:#5A6B80;text-decoration:none;font-size:.96rem;font-weight:700;border-bottom:2px solid transparent;border-top:2px solid transparent;transition:color 180ms cubic-bezier(.4,0,.2,1)} .ksw-nav__link:hover{color:#1E3A5F} .ksw-nav__link[aria-current="page"]{color:#1E3A5F;border-bottom-color:#B4552F} .ksw-menu{display:none;position:relative} .ksw-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:999px;border:1px solid #E3E0DA;background:#FFFFFF;font-weight:700;font-size:.95rem;color:#1E3A5F;cursor:pointer} .ksw-menu>summary::-webkit-details-marker{display:none} .ksw-menu__panel{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:#FFFFFF;border-radius:16px;padding:8px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(30,58,95,.05),0 10px 30px -10px rgba(30,58,95,.16)} .ksw-menu__panel .ksw-nav__link{border:0;padding:0 14px;border-radius:10px} .ksw-menu__panel .ksw-nav__link[aria-current="page"]{color:#9E4526;background:#F4F3F0} @media (max-width:819px){.ksw-nav{display:none}.ksw-menu{display:block}} /* Fuß */ .ksw-footer{background:#1E3A5F;color:#C5D0DE;padding:56px 0 48px;text-align:center} .ksw-footer__links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin-bottom:14px} .ksw-footer__link{display:inline-flex;align-items:center;min-height:46px;color:#FFFFFF;font-weight:700;text-decoration:none;transition:color 180ms cubic-bezier(.4,0,.2,1)} .ksw-footer__link:hover{color:#F4D06F} .ksw-footer__note{font-size:.9rem;line-height:1.55;color:#C5D0DE;max-width:60ch;margin:0 auto} /* Knöpfe */ .ksw-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;border:1px solid transparent;font-family:inherit;font-size:1rem;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform 180ms cubic-bezier(.4,0,.2,1),box-shadow 180ms cubic-bezier(.4,0,.2,1),background-color 180ms cubic-bezier(.4,0,.2,1),color 180ms cubic-bezier(.4,0,.2,1)} .ksw-btn--primary{background:#B4552F;color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(30,58,95,.08),0 14px 30px -12px rgba(143,68,37,.45)} .ksw-btn--primary:hover{background:#8F4425;color:#FFFFFF;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 4px rgba(30,58,95,.08),0 22px 40px -14px rgba(143,68,37,.5)} .ksw-btn--quiet{background:#FFFFFF;color:#1E3A5F;border-color:#E3E0DA;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(30,58,95,.06),0 14px 30px -12px rgba(30,58,95,.20)} .ksw-btn--quiet:hover{color:#1E3A5F;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(30,58,95,.06),0 22px 40px -14px rgba(30,58,95,.26)} .ksw-btn--on-deep{background:transparent;color:#FFFFFF;border-color:rgba(197,208,222,.55)} .ksw-btn--on-deep:hover{color:#F4D06F;border-color:#F4D06F} .ksw-btn:active{transform:translateY(0);box-shadow:inset 0 2px 5px rgba(30,58,95,.14)} .ksw-btn[disabled],.ksw-btn[aria-disabled="true"]{background:#EDEBE6;color:#5A6B80;border-color:#E3E0DA;box-shadow:inset 0 2px 5px rgba(30,58,95,.09),inset 0 -1px 0 rgba(255,255,255,.9);transform:none;cursor:not-allowed} .ksw-btn--sm{min-height:46px;padding:0 20px;font-size:.94rem} .ksw-btn--block{width:100%} .ksw-btn .ksw-icon{width:18px;height:18px} /* Pillen */ .ksw-pill{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 13px;border-radius:999px;background:#EDEBE6;color:#1E3A5F;font-size:.82rem;font-weight:700;line-height:1;white-space:nowrap;box-shadow:inset 0 2px 5px rgba(30,58,95,.09),inset 0 -1px 0 rgba(255,255,255,.9)} .ksw-pill .ksw-icon{width:15px;height:15px;color:#9E4526} .ksw-pills{display:flex;flex-wrap:wrap;gap:8px} .ksw-filter{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid #E3E0DA;background:#FFFFFF;color:#5A6B80;font-family:inherit;font-size:.94rem;font-weight:700;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(30,58,95,.06),0 14px 30px -12px rgba(30,58,95,.20);transition:transform 180ms cubic-bezier(.4,0,.2,1),box-shadow 180ms cubic-bezier(.4,0,.2,1),color 180ms cubic-bezier(.4,0,.2,1)} .ksw-filter:hover{color:#1E3A5F;transform:translateY(-2px)} .ksw-filter[aria-pressed="true"]{background:#EDEBE6;color:#1E3A5F;border-color:transparent;transform:none;box-shadow:inset 0 2px 5px rgba(30,58,95,.09),inset 0 -1px 0 rgba(255,255,255,.9)} .ksw-filter__dot{width:7px;height:7px;border-radius:50%;background:#B4552F;flex:none} .ksw-filter__count{font-variant-numeric:tabular-nums;color:#5A6B80;font-weight:400} /* Icons */ .ksw-icon{display:inline-block;width:24px;height:24px;flex:none;color:currentColor} .ksw-icon svg{width:100%;height:100%;display:block} /* Prägekachel */ .ksw-tile{display:flex;flex-direction:column;gap:14px;padding:26px 26px 28px;background:#FFFFFF;border-radius:22px;color:#1E3A5F;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(30,58,95,.06),0 14px 30px -12px rgba(30,58,95,.20);transition:transform 180ms cubic-bezier(.4,0,.2,1),box-shadow 180ms cubic-bezier(.4,0,.2,1)} a.ksw-tile:hover{color:#1E3A5F;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(30,58,95,.06),0 22px 40px -14px rgba(30,58,95,.26)} .ksw-tile__icon{width:54px;height:54px;border-radius:14px;background:#EDEBE6;color:#B4552F;display:flex;align-items:center;justify-content:center;margin-bottom:6px;box-shadow:inset 0 2px 5px rgba(30,58,95,.09),inset 0 -1px 0 rgba(255,255,255,.9)} .ksw-tile__icon .ksw-icon{width:26px;height:26px} .ksw-tile__title{font-size:1.16rem;font-weight:700;line-height:1.3} .ksw-tile__text{font-size:.96rem;line-height:1.55;color:#5A6B80;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ksw-tile__meta{margin-top:auto;padding-top:6px} /* Nummernstreifen */ .ksw-strips{display:flex;flex-direction:column;gap:12px;counter-reset:none} .ksw-strip{display:grid;grid-template-columns:auto 1px minmax(0,1fr);align-items:center;column-gap:22px;padding:20px 26px;background:#FFFFFF;border-radius:16px;color:#1E3A5F;text-decoration:none;box-shadow:0 1px 2px rgba(30,58,95,.05),0 10px 30px -10px rgba(30,58,95,.16);transition:transform 180ms cubic-bezier(.4,0,.2,1)} a.ksw-strip:hover{color:#1E3A5F;transform:translateX(3px)} .ksw-strip__num{font-size:1.5rem;font-weight:900;letter-spacing:-0.02em;color:#9E4526;font-variant-numeric:tabular-nums;min-width:2ch} .ksw-strip__rule{align-self:stretch;background:#E3E0DA;width:1px} .ksw-strip__title{font-size:1.08rem;font-weight:700;line-height:1.3} .ksw-strip__text{font-size:.94rem;line-height:1.5;color:#5A6B80;margin-top:2px} @media (max-width:480px){.ksw-strip{padding:18px 18px;column-gap:16px}} /* Netzfeld */ .ksw-netfield{position:relative;overflow:hidden;background:#FFFFFF;border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(30,58,95,.06),0 14px 30px -12px rgba(30,58,95,.20)} .ksw-netfield__motif{position:absolute;inset:0 0 0 auto;width:72%;-webkit-mask-image:linear-gradient(to left,#000 45%,transparent);mask-image:linear-gradient(to left,#000 45%,transparent);pointer-events:none} .ksw-netfield__motif svg{width:100%;height:100%} .ksw-netfield__body{position:relative;padding:clamp(28px,4vw,48px);max-width:min(100%,520px)} .ksw-netfield--plain .ksw-netfield__motif{inset:0;width:100%;-webkit-mask-image:none;mask-image:none} /* Zierziffer */ .ksw-numeral{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,40px)} .ksw-numeral__digit{font-size:clamp(6rem,15vw,11.5rem);font-weight:900;line-height:.82;letter-spacing:-0.05em;color:#EDEBE6;font-variant-numeric:tabular-nums;text-shadow:-1px -1px 1px rgba(30,58,95,.13),1px 1px 0 #FFFFFF,2px 2px 2px rgba(255,255,255,.9);user-select:none} /* Zahlenband */ .ksw-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));background:#FFFFFF;border-radius:22px;box-shadow:0 1px 2px rgba(30,58,95,.05),0 10px 30px -10px rgba(30,58,95,.16);overflow:hidden} .ksw-stat{padding:26px 28px;border-left:1px solid #E3E0DA;margin-left:-1px;border-top:1px solid #E3E0DA;margin-top:-1px;display:flex;flex-direction:column;gap:6px} .ksw-stat__value{font-size:clamp(2rem,4vw,2.7rem);font-weight:900;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums;color:#1E3A5F} .ksw-stat__text{font-size:.92rem;line-height:1.45;color:#5A6B80} /* Tiefe Bahn */ .ksw-deep{background:#1E3A5F;color:#C5D0DE;padding:clamp(48px,7vw,104px) 0} .ksw-deep .ksw-h2,.ksw-deep .ksw-title,.ksw-deep .ksw-h3{color:#FFFFFF} .ksw-deep .ksw-lead,.ksw-deep .ksw-body,.ksw-deep .ksw-small{color:#C5D0DE} /* Ergänzt gegenüber dem Bundle: Ohne diese Zeile bleibt ein Label in der tiefen Bahn im Terrakotta-Schriftton stehen und erreicht dort nur den Kontrast 1,83. */ .ksw-deep .ksw-label{color:#C5D0DE} .ksw-deep a:not(.ksw-btn){color:#FFFFFF} .ksw-deep a:not(.ksw-btn):hover{color:#F4D06F} /* Seitenkopf */ .ksw-pagehead{padding:clamp(40px,6vw,88px) 0 clamp(28px,4vw,48px);border-bottom:1px solid #E3E0DA;display:flex;flex-direction:column;gap:14px} /* Inhaltsverzeichnis */ .ksw-toc{position:sticky;top:92px;display:flex;flex-direction:column;gap:14px} .ksw-toc__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;border-left:1px solid #E3E0DA} .ksw-toc__link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 0 0 18px;margin-left:-1px;border-left:2px solid transparent;color:#5A6B80;text-decoration:none;font-size:.95rem;font-weight:700;line-height:1.3;transition:color 180ms cubic-bezier(.4,0,.2,1)} .ksw-toc__link:hover{color:#1E3A5F} .ksw-toc__link[aria-current="true"]{color:#1E3A5F;border-left-color:#B4552F} .ksw-toc__num{font-variant-numeric:tabular-nums;color:#9E4526;font-size:.82rem;min-width:2ch} .ksw-article{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start} @media (max-width:819px){.ksw-article{grid-template-columns:minmax(0,1fr)}.ksw-toc{position:static}} /* Merksatz, Faktenblatt */ .ksw-quote{border-left:3px solid #B4552F;padding:4px 0 4px 22px;font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700;line-height:1.4;color:#1E3A5F;max-width:56ch;text-wrap:pretty} .ksw-facts{background:#FFFFFF;border-radius:16px;padding:6px 26px;box-shadow:0 1px 2px rgba(30,58,95,.05),0 10px 30px -10px rgba(30,58,95,.16);display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);column-gap:32px} .ksw-facts dt,.ksw-facts dd{padding:15px 0;border-top:1px solid #E3E0DA} .ksw-facts dt:first-of-type,.ksw-facts dd:first-of-type{border-top:0} .ksw-facts dt{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#5A6B80;padding-top:19px} .ksw-facts dd{font-size:1rem;line-height:1.5;color:#1E3A5F} @media (max-width:480px){.ksw-facts{grid-template-columns:minmax(0,1fr)}.ksw-facts dd{border-top:0;padding-top:0}.ksw-facts dt{padding-bottom:4px}} /* Formular */ .ksw-form{display:flex;flex-direction:column;gap:22px} .ksw-field{display:flex;flex-direction:column;gap:8px} .ksw-field__label{font-size:.95rem;font-weight:700;color:#1E3A5F} .ksw-field__req{color:#9E4526;font-weight:700} .ksw-field__hint{font-size:.86rem;line-height:1.5;color:#5A6B80} .ksw-input{width:100%;min-height:48px;padding:12px 16px;border:1px solid #E3E0DA;border-radius:10px;background:#FFFFFF;color:#1E3A5F;font-family:inherit;font-size:1rem;line-height:1.4;box-shadow:inset 0 2px 5px rgba(30,58,95,.09),inset 0 -1px 0 rgba(255,255,255,.9);transition:border-color 160ms cubic-bezier(.4,0,.2,1),box-shadow 160ms cubic-bezier(.4,0,.2,1)} .ksw-input::placeholder{color:#5A6B80} .ksw-input:focus{outline:none;border-color:#B4552F;box-shadow:inset 0 2px 5px rgba(30,58,95,.09),0 0 0 4px rgba(180,85,47,.18)} .ksw-input[disabled]{background:#EDEBE6;color:#5A6B80;cursor:not-allowed} textarea.ksw-input{min-height:148px;resize:vertical} select.ksw-input{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px} .ksw-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:.95rem;line-height:1.5;color:#1E3A5F;cursor:pointer;min-height:46px} .ksw-check input{width:22px;height:22px;margin:1px 0 0;accent-color:#B4552F;cursor:pointer} .ksw-sheet{background:#FFFFFF;border-radius:22px;padding:clamp(24px,4vw,40px);box-shadow:0 1px 2px rgba(30,58,95,.05),0 10px 30px -10px rgba(30,58,95,.16)} .ksw-sheet--narrow{max-width:560px} /* Werkbank */ .ksw-bench{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start} .ksw-panel{position:sticky;top:84px;background:#FFFFFF;border-radius:22px;padding:8px 22px 22px;display:flex;flex-direction:column;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(30,58,95,.06),0 14px 30px -12px rgba(30,58,95,.20)} .ksw-group{border-top:1px solid #E3E0DA} .ksw-group:first-child{border-top:0} .ksw-group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;cursor:pointer;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#5A6B80} .ksw-group>summary::-webkit-details-marker{display:none} .ksw-group>summary:hover{color:#1E3A5F} .ksw-group__chev{width:18px;height:18px;transition:transform 180ms cubic-bezier(.4,0,.2,1)} .ksw-group[open]>summary .ksw-group__chev{transform:rotate(180deg)} .ksw-group__body{display:flex;flex-direction:column;gap:16px;padding:2px 0 18px} .ksw-work{display:flex;flex-direction:column;gap:16px;min-width:0} .ksw-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#EDEBE6;max-width:100%;overflow-x:auto;box-shadow:inset 0 2px 5px rgba(30,58,95,.09),inset 0 -1px 0 rgba(255,255,255,.9)} .ksw-tab{min-height:42px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:#5A6B80;font-family:inherit;font-size:.94rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:color 180ms cubic-bezier(.4,0,.2,1),background-color 180ms cubic-bezier(.4,0,.2,1)} .ksw-tab:hover{color:#1E3A5F} .ksw-tab[aria-selected="true"]{background:#FFFFFF;color:#1E3A5F;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(30,58,95,.08),0 6px 14px -6px rgba(30,58,95,.22)} .ksw-canvas{background:#EDEBE6;border-radius:16px;min-height:440px;padding:24px;overflow-x:auto;box-shadow:inset 0 2px 5px rgba(30,58,95,.09),inset 0 -1px 0 rgba(255,255,255,.9)} @media (max-width:819px){.ksw-bench{grid-template-columns:minmax(0,1fr)}.ksw-panel{position:static}} /* Porträt-Platzhalter */ .ksw-portrait{aspect-ratio:4/5;border-radius:22px;background:#EDEBE6;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#5A6B80;font-size:.9rem;box-shadow:inset 0 2px 5px rgba(30,58,95,.09),inset 0 -1px 0 rgba(255,255,255,.9)} .ksw-portrait img{width:100%;height:100%;object-fit:cover} /* ================================================================== Kopf und Fuß (Theme-Teile 63 und 64) Beide werden über CSS gestaltet, nicht neu gebaut: Ihre Menüs sind klassische `nav-menu`-Widgets, und ein Neuaufbau mit `replace_children` würde sie ersatzlos entfernen. Angesprochen über die stabilen Hüllklassen der Theme-Teile. ================================================================== */ /* ---------- Kopfleiste ---------- */ .elementor-location-header{ background:#FFFFFF !important; border-bottom:1px solid #E3E0DA; position:sticky; top:0; z-index:50; } .elementor-location-header > .e-con{ /* Die innere Fläche trug noch den Seitengrundton, der Kopf wirkte dadurch cremefarben statt weiß. */ background-color:#FFFFFF !important; min-height:68px; max-width:1208px; margin:0 auto; padding:0 24px; gap:24px; } /* Marke: der Punkt ist ein Pseudo-Element. Das geht hier, weil die Regel aus dieser Datei kommt und nicht durch Elementor läuft. */ .elementor-location-header > .e-con > a{ display:inline-flex !important; align-items:center; gap:10px; min-height:46px; padding:0; background:none !important; border:0 !important; box-shadow:none !important; color:#1E3A5F !important; font-family:"Schibsted Grotesk",system-ui,sans-serif; font-size:1.08rem; font-weight:900; letter-spacing:-0.01em; text-decoration:none; } .elementor-location-header > .e-con > a::before{ content:""; width:10px; height:10px; margin-left:5px; border-radius:50%; background:#B4552F; box-shadow:0 0 0 5px rgba(180,85,47,.15); flex:none; } .elementor-location-header > .e-con > a:hover{color:#1E3A5F !important;} /* ---------- Menü im Kopf ---------- Elementors Widget-Regeln sind spezifischer, daher mit Nachdruck. Diese Regeln lösen den Block „menue-farben“ im Schnipsel ab. */ .elementor-location-header .elementor-nav-menu a.elementor-item{ color:#5A6B80 !important; font-family:"Schibsted Grotesk",system-ui,sans-serif !important; font-size:.96rem !important; font-weight:700 !important; min-height:46px; padding:0 12px !important; border-bottom:2px solid transparent !important; transition:color 180ms cubic-bezier(.4,0,.2,1); } .elementor-location-header .elementor-nav-menu a.elementor-item:hover{color:#1E3A5F !important;} .elementor-location-header .elementor-nav-menu a.elementor-item.elementor-item-active{ color:#1E3A5F !important; border-bottom-color:#B4552F !important; } /* Das Menü-Widget zeichnet unter dem aktiven Punkt eine eigene grüne Markierung als ::after. Zusammen mit der Linie oben waren es zwei. Die grüne wird abgeschaltet, die Markierung kommt allein aus dem Rahmen. */ .elementor-location-header .elementor-nav-menu a.elementor-item::before, .elementor-location-header .elementor-nav-menu a.elementor-item::after{ display:none !important; } /* Ausgeklapptes Menü auf dem Handy */ .elementor-nav-menu--dropdown a.elementor-item{ color:#1E3A5F !important; background-color:#FFFFFF !important; font-family:"Schibsted Grotesk",system-ui,sans-serif !important; font-weight:700 !important; } .elementor-nav-menu--dropdown a.elementor-item:hover{color:#9E4526 !important;background-color:#F4F3F0 !important;} /* ---------- Fußbereich ---------- */ .elementor-location-footer{background:#1E3A5F;} .elementor-location-footer > .e-con{ max-width:1208px; margin:0 auto; padding:56px 24px 48px; align-items:center; gap:14px; } .elementor-location-footer .elementor-nav-menu a.elementor-item{ color:#FFFFFF !important; font-family:"Schibsted Grotesk",system-ui,sans-serif !important; font-weight:700 !important; min-height:46px; transition:color 180ms cubic-bezier(.4,0,.2,1); } .elementor-location-footer .elementor-nav-menu a.elementor-item:hover{color:#F4D06F !important;} .elementor-location-footer p{ color:#C5D0DE; font-size:.9rem; line-height:1.55; /* 60ch reichten für die Lizenzzeile nicht, sie brach vor „4.0“ um. Die Bezeichnung selbst hält ein geschütztes Leerzeichen zusammen. */ max-width:78ch; text-align:center; text-wrap:pretty; } /* ---------- Sprungmarke ---------- Löst den Block „sprungmarke“ im Schnipsel ab. */ .skip-link,.skip-link:focus,.ct-skip-link{background:#1E3A5F !important;color:#FFFFFF !important;} /* ---------- Zierziffer ---------- `text-shadow` verwirft Elementor beim Speichern, die Prägung kommt deshalb von hier. Das Element trägt dafür die `_cssid` „zierziffer“. */ #zierziffer{ text-shadow: -1px -1px 1px rgba(30,58,95,.13), 1px 1px 0 #FFFFFF, 2px 2px 2px rgba(255,255,255,.9); } /* ---------- Strichicons in Kacheln ---------- Elementor setzt eingebetteten SVGs eine Füllfarbe und entfernt die Strichattribute. Hier wird die Linienführung des Designsystems wiederhergestellt: Stärke 1,5, runde Enden, nie gefüllt. */ #kachelraster svg{ fill:none !important; stroke:#B4552F !important; stroke-width:1.5 !important; stroke-linecap:round; stroke-linejoin:round; } #kachelraster svg *{fill:none !important;stroke:#B4552F !important;} /* ================================================================== Knöpfe: Zustände Elementor setzt für jeden Link eine globale Regel `.elementor .e-default-a:hover` mit `color:var(--Primaer)` und `text-decoration:underline`. Auf einem Knopf ist beides falsch: Die weiße Schrift wurde dunkelblau, und es erschien ein Unterstrich. Knöpfe tragen deshalb eine ID nach fester Konvention: kv-* gefüllt, Terrakotta mit weißer Schrift kl-* leise, weiß mit blauer Schrift und Haarlinie Beim Überfahren ändert sich nicht die Schrift, sondern der ganze Knopf hebt sich an. ================================================================== */ .elementor [id^="kv-"], .elementor [id^="kl-"]{ transition:transform 180ms cubic-bezier(.4,0,.2,1), box-shadow 180ms cubic-bezier(.4,0,.2,1), background-color 180ms cubic-bezier(.4,0,.2,1); } /* Nie unterstrichen, in keinem Zustand. */ .elementor [id^="kv-"],.elementor [id^="kv-"]:hover,.elementor [id^="kv-"]:focus, .elementor [id^="kv-"]:focus-visible,.elementor [id^="kv-"]:active,.elementor [id^="kv-"]:visited, .elementor [id^="kl-"],.elementor [id^="kl-"]:hover,.elementor [id^="kl-"]:focus, .elementor [id^="kl-"]:focus-visible,.elementor [id^="kl-"]:active,.elementor [id^="kl-"]:visited{ text-decoration:none !important; } /* Gefüllter Knopf: Schrift bleibt weiß, der Grund dunkelt nach. */ .elementor [id^="kv-"],.elementor [id^="kv-"]:visited{color:#FFFFFF !important;} .elementor [id^="kv-"]:hover,.elementor [id^="kv-"]:focus-visible{ color:#FFFFFF !important; background-color:#8F4425 !important; transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(30,58,95,.08), 0 22px 40px -14px rgba(143,68,37,.5); } /* Leiser Knopf: Schrift bleibt dunkelblau. */ .elementor [id^="kl-"],.elementor [id^="kl-"]:visited{color:#1E3A5F !important;} .elementor [id^="kl-"]:hover,.elementor [id^="kl-"]:focus-visible{ color:#1E3A5F !important; transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 4px rgba(30,58,95,.06), 0 22px 40px -14px rgba(30,58,95,.26); } /* Beim Drücken geht der Knopf zurück und wird vertieft. */ .elementor [id^="kv-"]:active,.elementor [id^="kl-"]:active{ transform:translateY(0); box-shadow:inset 0 2px 5px rgba(30,58,95,.14); } /* ---------- Blogbeiträge ---------- Beiträge sind normale WordPress-Inhalte, nicht mit Elementor gebaut, weil dessen Inhalt den Beitragstext überlagern würde. Deshalb sind hier CSS-Klassen erlaubt. Kopf und Fuß kommen aus den Theme-Teilen, das Theme stellt den Rahmen, die Lesetypografie steht hier. */ .ksw-beitrag{ color:#1E3A5F; font-size:1.06rem; line-height:1.72; } .ksw-beitrag > *{max-width:68ch;} .ksw-beitrag p{margin:0 0 1.15em;} .ksw-beitrag p:last-child{margin-bottom:0;} .ksw-beitrag .ksw-vorspann{ margin-bottom:1.7em; font-size:1.18rem; line-height:1.6; color:#5A6B80; } .ksw-beitrag h2{ margin:2em 0 .55em; font-size:clamp(1.32rem,2.6vw,1.62rem); font-weight:900; letter-spacing:-.02em; line-height:1.25; color:#1E3A5F; } .ksw-beitrag strong{font-weight:700; color:#1E3A5F;} /* ---------- Sprungleiste innerhalb einer Seite ---------- Vier leise Knöpfe auf die Abschnitte derselben Seite. Auf schmalen Geräten werden sie knapper, sonst steht jeder in einer eigenen Zeile und der Inhalt beginnt erst weit unten. Angesprochen über die ID der Leiste, nicht über die Knopfnummern: kl-5 bis kl-8 gibt es auch auf anderen Seiten. */ @media (max-width:480px){ .elementor #sprungleiste{gap:8px;} .elementor #sprungleiste > a{min-height:42px; padding:0 14px; font-size:.85rem;} } /* ---------- Ganze Karten, die ein Link sind ---------- Einzelne Links lassen sich in Elementor nicht gestalten, deshalb ist bei Kachellisten die ganze Kachel der Link. Jedes solche Raster bekommt eine ID mit dem Vorsatz „karten-“, dann greifen diese Regeln. Die Kachel verhält sich wie ein erhabenes Element: kein Unterstrich, sie hebt sich beim Überfahren. */ .elementor [id^="karten-"] > a, .elementor [id^="karten-"] > a:link, .elementor [id^="karten-"] > a:visited, .elementor [id^="karten-"] > a:hover, .elementor [id^="karten-"] > a:focus, .elementor [id^="karten-"] > a:focus-visible, .elementor [id^="karten-"] > a:active{ color:#1E3A5F !important; text-decoration:none !important; } .elementor [id^="karten-"] > a{transition:transform 180ms cubic-bezier(.4,0,.2,1), box-shadow 180ms cubic-bezier(.4,0,.2,1);} .elementor [id^="karten-"] > a:hover, .elementor [id^="karten-"] > a:focus-visible{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 4px rgba(30,58,95,.06), 0 22px 40px -14px rgba(30,58,95,.26) !important; } .elementor [id^="karten-"] > a:active{ transform:translateY(0); box-shadow:inset 0 2px 5px rgba(30,58,95,.09) !important; } /* ---------- Ankreuzfelder in den Formularen ---------- Elementor setzt die Größe nicht, der Systemstandard ist zu klein zum Treffen. */ .elementor input[type="checkbox"]{ width:20px; height:20px; accent-color:#B4552F; cursor:pointer; } /* ---------- Beitragstitel in der Blogliste ---------- Die Titel sind Links und würden sonst unterstrichen und umgefärbt. Die ID sitzt am Layout der Schleife, weil die Karten selbst keine eigene tragen können: sie wiederholen sich. */ #beitragsliste a, #beitragsliste a:visited{color:#1E3A5F !important; text-decoration:none !important;} #beitragsliste a:hover, #beitragsliste a:focus-visible{color:#9E4526 !important; text-decoration:none !important;} /* ---------- Der Markenlink im Kopf ist kein Knopf ---------- Elementor hängt auch ihm die Klassen e-button-base und e-default-a an, deren Regeln beim Überfahren Farbe und Unterstrich setzen. Auf der weißen Leiste wurde der Name dadurch unsichtbar. Im Kopf ändert sich beim Überfahren nichts: keine Farbe, kein Unterstrich, keine Anhebung. */ .elementor-location-header .e-con a.e-button-base, .elementor-location-header .e-con a.e-button-base:link, .elementor-location-header .e-con a.e-button-base:visited, .elementor-location-header .e-con a.e-button-base:hover, .elementor-location-header .e-con a.e-button-base:focus, .elementor-location-header .e-con a.e-button-base:focus-visible, .elementor-location-header .e-con a.e-button-base:active{ color:#1E3A5F !important; background-color:transparent !important; transform:none !important; box-shadow:none !important; text-decoration:none !important; }