/* 03.11.2026 Aufklapp-Baustein (Christian: „Du klickst auf einen Pfeil nach unten und es öffnet sich ein Dialogfeld unterhalb des
   Bildes links. Wenn sich was bewegt, dann nimmt man es wahr … Nutze diese Funktion auf allen Seiten.“)
   Links ein Bild mit einer Karte, die beim Öffnen eines Punktes von unten hereinfährt; rechts die Punkte zum Aufklappen.
   Farben kommen von der Seite: --ak-akzent, --ak-flaeche, --ak-karte, --ak-text, --ak-mut. Keine Trennlinien zwischen den Punkten. */
.ak{--ak-akzent:#18B7C9;--ak-flaeche:#0E3A57;--ak-karte:#fff;--ak-karte-text:#0B2236;--ak-text:#EAF2F8;--ak-mut:#A8BECE;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
.ak-bild{position:relative;padding-bottom:70px}
.ak-bild img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;transition:opacity .35s ease}
.ak-bild img.ak-weg{opacity:0}
.ak-karte{position:absolute;left:30%;right:-24px;bottom:0;background:var(--ak-karte);color:var(--ak-karte-text);border-radius:16px;
  padding:20px 24px 22px;box-shadow:0 18px 44px rgba(0,0,0,.28);opacity:0;transform:translateY(28px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.ak-karte.ak-da{opacity:1;transform:none}
.ak-karte b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:inherit;opacity:.7;margin-bottom:6px}
.ak-karte p{margin:0;font-size:17px;line-height:1.5;font-weight:700;color:inherit}
.ak-liste{display:grid;gap:12px}
.ak-punkt{background:var(--ak-flaeche);border-radius:14px;transition:box-shadow .25s ease}
.ak-punkt.ak-offen{box-shadow:inset 4px 0 0 var(--ak-akzent)}
.ak-kopf{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:20px 22px;cursor:pointer;
  font-family:var(--heading,inherit);font-size:1.15rem;font-weight:800;line-height:1.3;color:var(--ak-kopf,#fff);text-align:left;text-transform:none;letter-spacing:normal}
.ak-kopf:focus-visible{outline:2px solid var(--ak-akzent);outline-offset:2px;border-radius:14px}
.ak-pfeil{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--ak-akzent);color:var(--ak-akzent);transition:transform .3s ease,background .2s ease,color .2s ease}
.ak-pfeil svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ak-offen .ak-pfeil{transform:rotate(180deg);background:var(--ak-akzent);color:var(--ak-flaeche)}
.ak-kopf:hover .ak-pfeil{background:var(--ak-akzent);color:var(--ak-flaeche)}
.ak-inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.ak-offen .ak-inhalt{grid-template-rows:1fr}
.ak-inhalt>div{overflow:hidden;padding:0 22px}
.ak-offen .ak-inhalt>div{padding-bottom:20px}
.ak-inhalt p{margin:0 0 10px;font-size:15.5px;line-height:1.65;color:var(--ak-text)}
.ak-inhalt ul{margin:0;padding:0 0 0 1.1rem;font-size:15px;line-height:1.7;color:var(--ak-text)}
@media(max-width:960px){.ak{grid-template-columns:minmax(0,1fr);gap:28px}.ak-karte{left:16px;right:16px}}
@media(prefers-reduced-motion:reduce){.ak-karte,.ak-bild img,.ak-inhalt,.ak-pfeil{transition:none}}

/* 03.11.2026 Einbau auf allen Seiten: Seitenstile (section p, .card p …) dürfen Farben und Abstände im Baustein nicht überschreiben.
   Zusätzlich --ak-kopf für Seiten mit heller Punktfläche. */
.ak .ak-inhalt{color:var(--ak-text)}
.ak .ak-inhalt :is(p,li,span,small,strong,em,h4,h5){color:var(--ak-text)}
.ak .ak-inhalt a{color:var(--ak-link,var(--ak-akzent));text-decoration:underline;text-underline-offset:3px}
.ak .ak-inhalt p{max-width:none;text-align:left}
.ak .ak-inhalt>div>:last-child{margin-bottom:0}
.ak .ak-karte :is(b,p){color:var(--ak-karte-text)}
.ak .ak-kopf{color:var(--ak-kopf,#fff)}
.ak .ak-bild img{max-width:100%;height:auto;margin:0}
@media(max-width:600px){.ak-kopf{padding:16px 16px;font-size:1.05rem}.ak-inhalt>div{padding:0 16px}.ak-karte{padding:16px 18px 18px}.ak-karte p{font-size:16px}}