um den ganzen Inhalt – daran ist die
Seite live zerbrochen (siehe render_areas in class-ae-divi.php). Ein
Flaechenlink erreicht dasselbe, ohne Blockinhalt in ein Inline-Element zu
packen: Der sichtbare Text bleibt ein normaler Verweis, die unsichtbare
Flaeche darueber macht die Karte anklickbar. */
.ae-area-go::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
/* Damit die Tastaturbedienung sichtbar bleibt: Der Fokus liegt auf dem
Verweis, der Rahmen erscheint aber um die ganze Karte. */
.ae-area:focus-within {
outline: 2px solid var(--ae-akzent);
outline-offset: 3px;
}
.ae-area-go:focus-visible { outline: none; }
.ae-area .ae-ic { width: 26px; height: 26px; color: var(--ae-akzent); margin-bottom: 14px; }
.ae-area-no {
display: block;
font-family: var(--ae-mono);
font-size: 13px;
color: var(--ae-akzent);
margin-bottom: 12px;
}
.ae-area h3 { margin: 0 0 8px; font-size: 19px; }
.ae-area p { margin: 0; color: var(--ae-muted); font-size: 15.5px; line-height: 1.6; }
.ae-area-tags {
list-style: none;
margin: 16px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ae-area-tags li {
font-size: 12px;
color: var(--ae-muted);
border: 1px solid var(--ae-line);
border-radius: 100px;
padding: 2px 10px;
}
.ae-area-go {
display: inline-block;
margin-top: 18px;
font-size: 14px;
font-weight: 600;
color: var(--ae-akzent);
}
/* ---------- Vorher und nachher ---------- */
.ae-ba {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 44px;
}
.ae-ba-col {
border: 1px solid var(--ae-line);
border-radius: var(--ae-radius-lg);
padding: 28px 26px;
}
.ae-ba-after {
border-color: rgba(231, 30, 98, .34);
background: var(--ae-akzent-schimmer);
}
.ae-ba-label {
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 700;
color: var(--ae-dim);
margin: 0 0 6px;
}
.ae-ba-after .ae-ba-label { color: var(--ae-akzent-tief); }
.ae-ba-col h3 { margin: 0 0 18px; font-size: 21px; }
.ae-ba-list { list-style: none; margin: 0; padding: 0; }
.ae-ba-list li {
position: relative;
padding-left: 26px;
margin-bottom: 11px;
color: var(--ae-text);
font-size: 16px;
line-height: 1.55;
}
.ae-ba-list li::before {
content: "";
position: absolute;
left: 2px;
top: .62em;
width: 10px;
height: 1px;
background: var(--ae-dim);
}
.ae-ba-after .ae-ba-list li::before {
background: var(--ae-akzent);
height: 2px;
top: .58em;
}
.ae-ba-note {
margin: 18px 0 0;
padding-top: 14px;
border-top: 1px solid var(--ae-line);
font-size: 14px;
color: var(--ae-muted);
}
/* ---------- Ablaufkette ---------- */
.ae-flow {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 14px;
margin-top: 44px;
}
.ae-flow-node {
position: relative;
border: 1px solid var(--ae-line);
border-radius: var(--ae-radius-lg);
padding: 20px 18px;
background: var(--ae-ink);
}
/* Die Bewegungsboegen aus dem Logo als Verbinder. */
.ae-flow-node + .ae-flow-node::before {
content: "";
position: absolute;
left: -14px;
top: 50%;
width: 14px;
height: 2px;
background: var(--ae-akzent);
opacity: .5;
}
.ae-flow-ausloeser { border-color: rgba(231, 30, 98, .4); }
.ae-flow-protokoll { background: var(--ae-surface); }
.ae-flow-no {
font-family: var(--ae-mono);
font-size: 12px;
color: var(--ae-akzent);
}
.ae-flow-node h3 { margin: 6px 0 6px; font-size: 17px; }
.ae-flow-node p { margin: 0; font-size: 14.5px; color: var(--ae-muted); line-height: 1.55; }
.ae-flow-meta {
display: inline-block;
margin-top: 12px;
font-family: var(--ae-mono);
font-size: 11.5px;
color: var(--ae-dim);
}
/* ---------- Systeme ---------- */
.ae-systems {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 20px;
margin-top: 44px;
}
.ae-sysgroup {
border-top: 2px solid var(--ae-akzent);
padding-top: 18px;
}
.ae-sysgroup h3 { margin: 0 0 12px; font-size: 17px; }
.ae-syslist { list-style: none; margin: 0; padding: 0; }
.ae-syslist li {
font-size: 15px;
color: var(--ae-muted);
padding: 5px 0;
border-bottom: 1px solid var(--ae-line);
}
.ae-syslist li:last-child { border-bottom: 0; }
/* ---------- Was ein Mensch entscheidet ---------- */
.ae-human {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
background: var(--ae-tiefe);
color: var(--ae-tiefe-text);
border-radius: var(--ae-radius-lg);
padding: 46px 44px;
}
.ae-human h2 { color: #fff; font-size: clamp(26px, 3.2vw, 38px); }
.ae-human .ae-eyebrow { color: var(--ae-akzent); }
.ae-human p { color: var(--ae-tiefe-text); }
.ae-human-list { list-style: none; margin: 0; padding: 0; }
.ae-human-list li {
position: relative;
padding-left: 30px;
margin-bottom: 14px;
font-size: 16.5px;
line-height: 1.5;
color: #fff;
}
.ae-human-list li::before {
content: "";
position: absolute;
left: 0;
top: .5em;
width: 14px;
height: 2px;
background: var(--ae-akzent);
}
/* ---------- Reifegrade ---------- */
.ae-maturity {
list-style: none;
counter-reset: none;
margin: 44px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.ae-mat {
position: relative;
border: 1px solid var(--ae-line);
border-radius: var(--ae-radius-lg);
padding: 24px 22px;
}
.ae-mat:last-child { border-color: var(--ae-akzent); }
.ae-mat-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ae-surface-2);
color: var(--ae-text);
font-weight: 700;
font-size: 14px;
margin-bottom: 12px;
}
.ae-mat:last-child .ae-mat-no { background: var(--ae-akzent); color: #fff; }
.ae-mat h3 { margin: 0 0 8px; font-size: 18px; }
.ae-mat p { margin: 0; font-size: 15px; color: var(--ae-muted); line-height: 1.55; }
.ae-mat-meta {
display: inline-block;
margin-top: 12px;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
font-weight: 700;
color: var(--ae-dim);
}
/* ---------- Vertrauen ---------- */
.ae-trust {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 28px;
margin-top: 44px;
}
.ae-trust-item { border-left: 2px solid var(--ae-akzent); padding-left: 20px; }
.ae-trust-item h3 { margin: 0 0 8px; font-size: 18px; }
.ae-trust-item p { margin: 0; color: var(--ae-muted); font-size: 15.5px; line-height: 1.6; }
/* ---------- Schmale Fenster ---------- */
@media (max-width: 820px) {
.ae-ba { grid-template-columns: 1fr; }
.ae-human { grid-template-columns: 1fr; gap: 26px; padding: 34px 26px; }
.ae-flow-node + .ae-flow-node::before {
left: 50%;
top: -14px;
width: 2px;
height: 14px;
}
}
/* Auf der dunklen Flaeche braucht das Karmesin einen helleren Ton – derselbe
Farbwert waere dort nur noch knapp lesbar. Es bleibt dieselbe Farbe, nur
aufgehellt; eine zweite Akzentfarbe kommt damit nicht ins Spiel. */
.ae-human .ae-eyebrow,
.ae-nacht .ae-eyebrow { color: var(--ae-akzent-auf-dunkel); }
/* ==========================================================================
Fortschrittsbalken
Wird von ae.js eingehaengt und erscheint nur auf langen Seiten. Er zeigt,
wie weit man ist – nicht mehr, und vor allem nichts, was ohne ihn fehlte.
========================================================================== */
.ae-fortschritt {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 100000;
pointer-events: none;
background: transparent;
}
.ae-fortschritt span {
display: block;
height: 100%;
background: var(--ae-akzent);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .1s linear;
}
/* Der Hero bewegt sich beim Scrollen eine Spur langsamer als der Rest. */
.ae-js .ae-hero .ae-hero-inner { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
.ae-fortschritt { display: none; }
.ae-js .ae-hero .ae-hero-inner { transform: none !important; opacity: 1 !important; }
}
/* Die Ablaufkette laeuft einmal durch, wenn sie ins Bild kommt. */
.ae-flow-node {
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ae-flow-node.ist-aktiv {
border-color: var(--ae-akzent);
transform: translateY(-3px);
box-shadow: 0 8px 22px rgba(231, 30, 98, .14);
}
.ae-flow-node.ist-aktiv .ae-flow-no { color: var(--ae-akzent); }
@media (prefers-reduced-motion: reduce) {
.ae-flow-node { transition: none; }
}
/* ==========================================================================
Aufräumen nach wpautop
Divi jagt den Inhalt jedes Textmoduls durch wpautop. Unser Renderer liefert
aber fertiges HTML mit eigenen -Tags – wpautop hat dort nichts zu tun und
hinterlaesst nur leere Absaetze, die als Leerraum sichtbar werden.
Bewusst im Stylesheet geloest und nicht durch Abschalten von wpautop: Divis
Filterkette anzufassen wuerde alle Module betreffen, auch die, die es
brauchen. Der echte Schaden – das verwaiste
, das ein