/* =====================================================================
   Apple-Produktseite fuer alle Unterseiten. Schwarzraum, grosse ruhige Typografie,
   Material nur fuer schwebende Leisten, Bewegung kritisch gedaempft.
   Gilt nur auf body.ap2. Keine grauen Flaechen, Knoepfe eckig.
   ===================================================================== */
body.ap2{
  --ap2-raum:clamp(104px,15vh,190px);
  --ap2-breit:1200px;
  --ap2-feder:cubic-bezier(.22,1,.36,1);
  --ap2-leise:rgba(255,255,255,.66);
  --ap2-linie:rgba(255,255,255,.12);
  background:#000;
}

/* Kopf scrollt weg, die lokale Leiste bleibt (wie auf Apple-Produktseiten) */
/* Kopf: verschwindet beim Runterscrollen, kommt beim Hochscrollen zurueck (wie iOS) */
body.ap2 header[data-nav]{ position:fixed; transition:transform .45s var(--ap2-feder), background-color .4s, padding .4s; will-change:transform; }
body.ap2.kopf-weg header[data-nav]:not(.offen){ transform:translateY(-100%); }
/* Die Kapitel-Leiste klebt direkt unter dem Kopf und faehrt mit ihm nach oben weg */
body.ap2 .ap2-leiste{ transition:transform .45s var(--ap2-feder), border-color .3s; }
body.ap2.ap2-js .ap2-leiste{ top:var(--kopf-h, 72px); }
body.ap2.kopf-weg .ap2-leiste.klebt{ transform:translateY(calc(-1 * var(--kopf-h, 72px))); }

/* ---------- Lokale Leiste ---------- */
.ap2-leiste{
  position:sticky; top:0; z-index:55; margin-top:0;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ap2-feder);
}
.ap2-leiste.klebt{ border-bottom-color:var(--ap2-linie); }
.ap2-leiste-innen{ max-width:var(--ap2-breit); margin:0 auto; padding:0 var(--rand); height:56px; display:flex; align-items:center; gap:28px; }
.ap2-leiste-name{ font-family:var(--schrift-anzeige); font-weight:700; font-size:19px; letter-spacing:-.01em; color:#fff; margin-right:auto; white-space:nowrap; }
.ap2-leiste-ziele{ display:flex; gap:26px; }
.ap2-leiste-ziele a{ font-size:13px; color:var(--ap2-leise); transition:color .2s; }
.ap2-leiste-ziele a:hover{ color:#fff; }
.ap2-leiste-knopf{ font-size:13px; font-weight:600; color:#fff; background:var(--rot); padding:8px 14px; transition:background-color .2s, transform .1s ease-out; }
.ap2-leiste-knopf:hover{ background:var(--rot-hell); }
.ap2-leiste-knopf:active, .ap2-knopf:active, .ap2-pfeil:active{ transform:scale(.97); }
@media (max-width:1060px){
  .ap2-leiste-ziele{ display:none; }
  .ap2-leiste-innen{ height:52px; gap:14px; }
  .ap2-leiste-name{ font-size:16px; overflow:hidden; text-overflow:ellipsis; }
  .ap2-leiste-knopf{ white-space:nowrap; padding:8px 12px; font-size:12.5px; }
}

/* ---------- Grundgeruest ---------- */
.ap2-feld{ padding:var(--ap2-raum) var(--rand); }
.ap2-spur{ max-width:var(--ap2-breit); margin:0 auto; }
.ap2-kicker{ display:block; margin-bottom:18px; font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--rot-text); }
body.ap2 h2{ font-size:clamp(36px,5.2vw,76px); line-height:.98; letter-spacing:-.032em; margin:0; text-wrap:balance; }
body.ap2 h3{ letter-spacing:-.015em; }
.ap2-kopf{ max-width:860px; margin-bottom:clamp(44px,6vh,72px); }
.ap2-kopf > p{ margin:22px 0 0; font-size:clamp(17px,1.5vw,21px); line-height:1.5; color:var(--ap2-leise); max-width:46ch; }
.ap2-kopf-zeile{ max-width:none; display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:1000px){ .ap2-kopf-zeile{ grid-template-columns:1.2fr .8fr; align-items:end; } .ap2-kopf-zeile > p{ margin:0; } }

/* Knoepfe: eckig, ein Rot; Links mit Apple-Winkel */
.ap2-tasten{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 30px; margin-top:36px; }
.ap2-knopf{ display:inline-block; padding:15px 26px; font-size:15px; font-weight:600; color:#fff; background:var(--rot); transition:background-color .2s, transform .1s ease-out; }
.ap2-knopf:hover{ background:var(--rot-hell); }
.ap2-link{ font-size:16px; color:#fff; }
.ap2-link span{ display:inline-block; margin-left:2px; color:var(--rot-hell); transition:transform .3s var(--ap2-feder); }
.ap2-link:hover span{ transform:translateX(3px); }
.ap2-antwort{ display:block; margin-top:16px; font-size:13px; color:rgba(255,255,255,.5); }
:where(.ap2-knopf, .ap2-link, .ap2-leiste a, .ap2-pfeil, .ap2-band):focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ---------- Auftakt ---------- */
.ap2-auftakt{ padding:clamp(48px,7vh,90px) var(--rand) 0; text-align:center; }
.ap2-auftakt-text{ max-width:1240px; margin:0 auto; }
.ap2-auftakt h1{ margin:0; font-size:clamp(34px,5.4vw,88px); line-height:.95; letter-spacing:-.034em; text-wrap:balance; hyphens:manual; overflow-wrap:break-word; }
@media (max-width:600px){ .ap2-auftakt h1{ hyphens:auto; font-size:clamp(28px,8.1vw,34px); } }
.ap2-auftakt p{ margin:28px auto 0; max-width:44ch; font-size:clamp(17px,1.6vw,22px); line-height:1.5; color:var(--ap2-leise); }
.ap2-buehne{
  margin:clamp(56px,8vh,96px) auto 0; max-width:1440px; aspect-ratio:16/8; overflow:hidden; border-radius:28px;
  transform:scale(var(--b, .92)); transform-origin:50% 0; will-change:transform;
}
.ap2-buehne img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(calc(1.12 - (var(--b, .92) - .92) * 1.5)); }
@media (max-width:700px){ .ap2-buehne{ aspect-ratio:4/3; border-radius:18px; } }

/* ---------- Keynote-Zahlen ---------- */
.ap2-zahlen{ padding-bottom:calc(var(--ap2-raum) * .6); }
.ap2-zahlen-reihe{ display:grid; grid-template-columns:repeat(2,1fr); gap:44px 32px; }
@media (min-width:900px){ .ap2-zahlen-reihe{ grid-template-columns:repeat(4,1fr); } }
.ap2-zahl{ border-top:1px solid var(--ap2-linie); padding-top:22px; }
.ap2-zahl-wert{ display:block; font-family:var(--schrift-anzeige); font-weight:700; font-size:clamp(44px,5.6vw,88px); line-height:.95; letter-spacing:-.04em; white-space:nowrap; }
.ap2-zahl-text{ display:block; margin-top:12px; font-size:15px; color:var(--ap2-leise); }

/* ---------- Hilfe: drei Kacheln ---------- */
.ap2-kacheln{ display:grid; gap:20px; }
@media (min-width:900px){ .ap2-kacheln{ grid-template-columns:repeat(3,1fr); } }
.ap2-kachel{
  position:relative; padding:clamp(28px,3vw,40px); border:1px solid var(--ap2-linie); border-radius:24px; background:#000;
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .3s, transform .4s var(--ap2-feder);
}
.ap2-kachel::before{ content:''; position:absolute; right:-30%; top:-40%; width:80%; height:80%; background:radial-gradient(closest-side, rgba(190,22,33,.28), transparent); pointer-events:none; }
.ap2-kachel-nr{ font-size:13px; letter-spacing:.16em; color:var(--rot-text); }
.ap2-kachel h3{ margin:18px 0 12px; font-size:clamp(21px,1.9vw,27px); line-height:1.12; text-transform:none; }
.ap2-kachel p{ margin:0 0 24px; font-size:16px; line-height:1.6; color:var(--ap2-leise); }
.ap2-kachel .ap2-link{ margin-top:auto; font-size:15px; }
@media (hover:hover) and (pointer:fine){ .ap2-kachel:hover{ border-color:rgba(255,255,255,.28); transform:translateY(-4px); } }

/* ---------- Highlights zum Wischen ---------- */
.ap2-highlights{ padding-left:0; padding-right:0; }
.ap2-highlights > .ap2-spur{ padding:0 var(--rand); }
.ap2-band{
  --rand-band:max(var(--rand), calc((100vw - var(--ap2-breit)) / 2));
  display:flex; gap:22px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding:6px var(--rand-band) 10px; scroll-padding-inline:var(--rand-band); scrollbar-width:none;
}
.ap2-band::-webkit-scrollbar{ display:none; }
.ap2-karte{
  flex:0 0 min(82vw, 860px); scroll-snap-align:start; border:1px solid var(--ap2-linie); border-radius:28px; overflow:hidden; background:#000;
  display:grid; grid-template-rows:auto 1fr; grid-template-columns:minmax(0,1fr);
}
.ap2-karte-text{ min-width:0; overflow-wrap:break-word; }
.ap2-karte-bild{ margin:0; aspect-ratio:16/9; overflow:hidden; }
.ap2-karte-bild img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ap2-feder); }
@media (hover:hover) and (pointer:fine){ .ap2-karte:hover .ap2-karte-bild img{ transform:scale(1.03); } }
.ap2-karte-text{ padding:clamp(26px,3vw,40px); }
.ap2-karte-text h3{ margin:0 0 14px; font-size:clamp(26px,2.6vw,38px); line-height:1; }
.ap2-karte-text p{ margin:0; font-size:16px; line-height:1.62; color:var(--ap2-leise); max-width:62ch; }
/* Mini-Galerie in der Karte: Vorschaubilder tauschen das grosse Bild */
.ap2-daumen{ margin:14px clamp(26px,3vw,40px) 0; display:flex; gap:10px; flex-wrap:nowrap; }
.ap2-daumen button{ position:relative; padding:0; border:0; background:#111; cursor:pointer; width:clamp(76px,8vw,112px); aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  outline:2px solid transparent; outline-offset:3px; opacity:.55; transition:opacity .3s, outline-color .3s, transform .15s ease-out; }
.ap2-daumen button img{ width:100%; height:100%; object-fit:cover; display:block; }
.ap2-daumen button.an{ opacity:1; outline-color:var(--rot-hell); }
.ap2-daumen button:active{ transform:scale(.96); }
@media (hover:hover) and (pointer:fine){ .ap2-daumen button:not(.an):hover{ opacity:.9; } }
.ap2-daumen button:focus-visible{ outline-color:#fff; }
.ap2-galerie{ aspect-ratio:auto !important; }
.ap2-galerie-flaeche{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; }
.ap2-galerie-flaeche img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s var(--ap2-feder), transform .8s var(--ap2-feder); }
.ap2-galerie-flaeche img.an{ opacity:1; }
@media (max-width:700px){ .ap2-galerie-flaeche{ aspect-ratio:4/3; border-radius:22px 22px 0 0; } .ap2-daumen{ margin:12px 18px 0; gap:8px; flex-wrap:nowrap; } .ap2-daumen button{ width:calc((100% - 24px) / 4); border-radius:8px; outline-offset:2px; } }
.ap2-band-steuer{ display:flex; justify-content:flex-end; gap:12px; margin-top:24px !important; padding:0 var(--rand); }
.ap2-pfeil{ width:48px; height:48px; border:1px solid rgba(255,255,255,.3); background:#000; color:#fff; font-size:24px; line-height:1; cursor:pointer; transition:border-color .2s, opacity .2s, transform .1s ease-out; }
.ap2-pfeil:hover{ border-color:#fff; }
.ap2-pfeil:disabled{ opacity:.3; cursor:default; }

/* ---------- Duo ---------- */
.ap2-duo{ display:grid; gap:clamp(40px,6vw,96px); align-items:center; }
@media (min-width:960px){ .ap2-duo{ grid-template-columns:1fr 1fr; } .ap2-duo.gedreht .ap2-duo-text{ order:2; } }
.ap2-duo-text p{ margin:22px 0 0; font-size:17px; line-height:1.65; color:var(--ap2-leise); max-width:52ch; }
.ap2-duo-bild{ margin:0; border-radius:24px; overflow:hidden; }
.ap2-duo-bild img, .ap2-duo-bild video{ width:100%; display:block; object-fit:cover; }
.ap2-duo-bild.hoch{ max-width:440px; justify-self:center; }
.ap2-merk{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:14px; }
.ap2-merk li{ position:relative; padding-left:30px; font-size:15.5px; color:#fff; }
.ap2-merk li::before{ content:''; position:absolute; left:0; top:.35em; width:16px; height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6.2 5.6 10.6 15 1.2' fill='none' stroke='%23e0404f' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat; }

/* Referenz: grosses Bild, Text auf dunklem Glas */
@media (min-width:960px){
  .ap2-referenz .ap2-duo{ position:relative; display:block; }
  .ap2-referenz .ap2-duo-bild{ aspect-ratio:21/9; }
  .ap2-referenz .ap2-duo-bild img{ height:100%; }
  .ap2-referenz .ap2-duo-text{
    position:absolute; left:32px; bottom:32px; z-index:2; max-width:440px; padding:30px 32px; border-radius:20px;
    background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
    border:1px solid rgba(255,255,255,.14);
  }
  .ap2-referenz h2{ font-size:clamp(28px,2.6vw,40px); }
}

/* ---------- Ablauf als Zeitstrahl ---------- */
.ap2-zeit{ list-style:none; margin:0; padding:0 0 0 0; position:relative; display:grid; gap:clamp(36px,5vh,56px); max-width:860px; }
.ap2-zeit::before, .ap2-zeit::after{ content:''; position:absolute; z-index:0; left:27px; top:28px; bottom:10px; width:1px; }
.ap2-zeit::before{ background:var(--ap2-linie); }
.ap2-zeit::after{ background:var(--rot-hell); transform:scaleY(var(--zeit, 0)); transform-origin:50% 0; }
.ap2-zeit li{ position:relative; z-index:1; display:grid; grid-template-columns:56px 1fr; gap:28px; align-items:start; }
/* Linie endet am letzten Kaestchen: darunter deckt ein schwarzer Streifen sie ab */
.ap2-zeit li:last-child::after{ content:''; position:absolute; left:25px; top:57px; bottom:-12px; width:5px; background:#000; }
.ap2-zeit-nr{ position:relative; z-index:1; display:grid; place-items:center; width:56px; height:56px; background:#000; border:1px solid var(--ap2-linie); font-size:14px; letter-spacing:.08em; color:#fff; }
.ap2-zeit h3{ margin:12px 0 8px; font-size:clamp(22px,2.2vw,30px); line-height:1.05; }
.ap2-zeit p{ margin:0; font-size:16.5px; line-height:1.6; color:var(--ap2-leise); }

/* ---------- Schluss ---------- */
.ap2-schluss{ text-align:center; padding-bottom:calc(var(--ap2-raum) * 1.2); }
.ap2-schluss h2{ font-size:clamp(28px,6.2vw,96px) !important; line-height:.94; max-width:none; margin:0 auto !important; text-wrap:balance; }

/* ---------- Bausteine aus dem Bestand, ruhiger gesetzt ---------- */
body.ap2 main > .feld{ border-top:0; padding-top:var(--ap2-raum); padding-bottom:var(--ap2-raum); }
body.ap2 .spur{ max-width:var(--ap2-breit); }
body.ap2 .sk-kopf h2{ font-size:clamp(36px,5.2vw,76px); }
body.ap2 .sk-fragen{ border-top:1px solid var(--ap2-linie); }
body.ap2 .sk-frage{ border-bottom:1px solid var(--ap2-linie); }
body.ap2 .sk-frage summary{ padding:26px 0; font-size:clamp(18px,1.6vw,22px); }

/* ---------- Einblenden ---------- */
.ap2-bereit .ap2-rv{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ap2-feder), transform .9s var(--ap2-feder); transition-delay:calc(var(--i, 0) * 70ms); }
.ap2-bereit .ap2-rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  body.ap2 header[data-nav], body.ap2 .ap2-leiste{ transition:none; }
  .ap2-bereit .ap2-rv{ opacity:1; transform:none; transition:none; }
  .ap2-buehne, .ap2-buehne img{ transform:none !important; }
  .ap2-zeit::after{ transform:none; }
  .ap2-kachel, .ap2-karte-bild img, .ap2-link span{ transition:none; }
}
@media (prefers-reduced-transparency:reduce){
  .ap2-leiste{ background:#000; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .ap2-referenz .ap2-duo-text{ background:#000; backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* =====================================================================
   Ausbau fuer alle Unterseiten: Kapitel-Leiste, Siegel, Merkmale,
   Fragen, Region, Ratgeber, Artikel und die Bestands-Bausteine.
   ===================================================================== */

/* ---------- Leiste: aktives Kapitel und Lesefortschritt ---------- */
.ap2-leiste-ziele a{ position:relative; }
.ap2-leiste-ziele a.aktiv{ color:#fff; }
.ap2-leiste-ziele a::after{ content:''; position:absolute; left:0; right:0; bottom:-19px; height:2px; background:var(--rot-hell); transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ap2-feder); }
.ap2-leiste-ziele a.aktiv::after{ transform:scaleX(1); }
.ap2-leiste-aktiv{ display:none; font-size:12.5px; color:var(--ap2-leise); white-space:nowrap; }
.ap2-leiste-fortschritt{ position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--rot-hell); transform:scaleX(var(--lesen, 0)); transform-origin:0 50%; }
@media (max-width:1060px){
  .ap2-leiste-aktiv{ display:inline; margin-right:auto; }
  .ap2-leiste-aktiv:not(:empty)::before{ content:'· '; }
  .ap2-leiste-name{ margin-right:0; }
}

/* ---------- 3M-Siegel im Auftakt: ruhiges Band unter der Buehne ---------- */
/* Die drei 3M-Siegel als ein gemeinsames Abzeichen auf Weiss */
.ap2-siegel{ display:flex; justify-content:center; align-items:center; flex-wrap:nowrap; width:fit-content; max-width:calc(100% - 32px); margin:clamp(34px,5vh,56px) auto 0; padding:clamp(10px,1.3vw,14px) clamp(6px,0.8vw,10px); background:#fff; border-radius:16px; }
.ap2-siegel figure{ margin:0; padding:0 clamp(10px,1.6vw,20px); }
.ap2-siegel figure + figure{ border-left:1px solid #e3e3e3; }
.ap2-siegel img{ display:block; height:clamp(34px,4.2vw,50px); width:auto; }
.ap2-siegel figure:first-child img{ height:clamp(58px,6.6vw,82px); }
@media (max-width:520px){
  .ap2-siegel{ padding:9px 4px; border-radius:12px; }
  .ap2-siegel figure{ padding:0 8px; }
  .ap2-siegel img{ height:24px; }
  .ap2-siegel figure:first-child img{ height:44px; }
}
.ap2-siegel-klein{ justify-content:flex-start; margin:0 0 6px; gap:10px; }
.ap2-siegel-klein img{ height:30px; }
.ap2-siegel-klein figure:first-child img{ height:52px; }

/* ---------- Merkmale: Kacheln mit gezeichnetem Haekchen ---------- */
body.ap2 .ap2-merk{ list-style:none; margin:clamp(48px,7vh,80px) 0 0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
body.ap2 .ap2-merk li{
  position:relative; display:flex; flex-direction:column; gap:22px; padding:26px 24px 28px;
  border:1px solid var(--ap2-linie); border-radius:20px; font-size:16px; line-height:1.45; color:#fff;
  overflow-wrap:break-word; min-width:0;
}
@media (max-width:1000px){ body.ap2 .ap2-merk{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ body.ap2 .ap2-merk{ grid-template-columns:1fr; } body.ap2 .ap2-merk li{ flex-direction:row; align-items:center; gap:16px; padding:18px 20px; } }
body.ap2 .ap2-merk li::before{ display:none; }
body.ap2 .ap2-merk svg{ width:30px; height:30px; fill:none; stroke:var(--rot-hell); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24; stroke-dashoffset:0; }
.ap2-bereit .ap2-merk li.ap2-rv svg{ stroke-dashoffset:24; transition:stroke-dashoffset .7s var(--ap2-feder); transition-delay:calc(.25s + var(--i, 0) * 90ms); }
.ap2-bereit .ap2-merk li.ap2-rv.in svg{ stroke-dashoffset:0; }

/* ---------- Highlights: Zaehler und Bildunterschriften ---------- */
.ap2-band-steuer{ align-items:center; }
.ap2-band-zahl{ margin-right:auto; font-size:13px; letter-spacing:.16em; color:var(--ap2-leise); font-variant-numeric:tabular-nums; }
.ap2-karte-bild{ position:relative; }
.ap2-karte-bild figcaption{ position:absolute; left:16px; bottom:16px; max-width:calc(100% - 32px); padding:7px 12px; border-radius:999px; font-size:12.5px; color:#fff; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.ap2-daumen figure{ position:relative; margin:0; }
.ap2-daumen figcaption{ position:absolute; left:0; bottom:calc(100% + 8px); width:max-content; max-width:220px; padding:6px 10px; border-radius:8px; font-size:12px; line-height:1.35; color:#fff; background:rgba(0,0,0,.85); opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity .25s, transform .25s var(--ap2-feder); z-index:2; }
.ap2-daumen figure:hover figcaption{ opacity:1; transform:none; }
.ap2-karte-text .ap2-link{ display:inline-block; margin-top:22px; }
.ap2-karte-text .ap2-kicker{ margin-bottom:12px; }
.ap2-highlights{ overflow:hidden; }

/* ---------- Duo mit Video ---------- */
@media (min-width:960px){ .ap2-duo.mit-video{ grid-template-columns:1.2fr .8fr; } }

/* ---------- Fragen: Ueberschrift klebt, Antworten oeffnen weich ---------- */
.ap2-fragen{ display:grid; gap:clamp(30px,5vw,80px); }
@media (min-width:960px){
  .ap2-fragen{ grid-template-columns:.8fr 1.2fr; align-items:start; }
  .ap2-fragen-kopf{ position:sticky; top:110px; margin-bottom:0; }
}
.ap2-fragen-liste{ border-top:1px solid var(--ap2-linie); }
.ap2-frage{ border-bottom:1px solid var(--ap2-linie); }
.ap2-frage summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; cursor:pointer; font-size:clamp(18px,1.6vw,22px); font-weight:500; line-height:1.3; color:#fff; }
.ap2-frage summary::-webkit-details-marker{ display:none; }
.ap2-frage summary:hover span{ color:#fff; }
.ap2-frage summary i{ position:relative; flex:0 0 auto; width:30px; height:30px; border:1px solid rgba(255,255,255,.3); border-radius:50%; transition:transform .45s var(--ap2-feder), border-color .2s; }
.ap2-frage summary i::before, .ap2-frage summary i::after{ content:''; position:absolute; left:50%; top:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px; background:#fff; }
.ap2-frage summary i::after{ transform:rotate(90deg); transition:transform .45s var(--ap2-feder); }
.ap2-frage[open] summary i{ transform:rotate(180deg); border-color:var(--rot-hell); }
.ap2-frage[open] summary i::after{ transform:rotate(0deg); }
.ap2-antwort-text p{ margin:0; padding:0 56px 28px 0; font-size:16.5px; line-height:1.65; color:var(--ap2-leise); }
.ap2-frage[open] .ap2-antwort-text{ animation:ap2-auf .5s var(--ap2-feder); }
@keyframes ap2-auf{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---------- Region: grosse Link-Kacheln ---------- */
.ap2-orte{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.ap2-orte a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 22px; border:1px solid var(--ap2-linie); border-radius:16px; font-size:17px; color:#fff; transition:border-color .25s, background-color .25s, transform .4s var(--ap2-feder); }
.ap2-orte a i{ font-style:normal; font-size:22px; color:var(--rot-hell); transition:transform .4s var(--ap2-feder); }
@media (hover:hover) and (pointer:fine){
  .ap2-orte a:hover{ border-color:rgba(255,255,255,.35); transform:translateY(-2px); }
  .ap2-orte a:hover i{ transform:translateX(4px); }
}
.ap2-orte-bild{ margin:clamp(40px,6vh,64px) 0 0; border-radius:24px; overflow:hidden; aspect-ratio:21/9; }
.ap2-orte-bild img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Ratgeber-Karten ---------- */
.ap2-rg{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.ap2-rg-karte{ position:relative; border:1px solid var(--ap2-linie); border-radius:24px; overflow:hidden; transition:border-color .25s, transform .4s var(--ap2-feder); }
.ap2-rg-karte .karte-link{ position:absolute; inset:0; z-index:2; }
.ap2-rg-karte figure{ margin:0; aspect-ratio:16/9; overflow:hidden; }
.ap2-rg-karte img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ap2-feder); }
.ap2-rg-text{ padding:28px 28px 32px; }
.ap2-rg-text h3{ margin:0 0 12px; font-size:clamp(22px,2vw,28px); line-height:1.08; }
.ap2-rg-text p{ margin:0 0 20px; font-size:16px; line-height:1.6; color:var(--ap2-leise); }
@media (hover:hover) and (pointer:fine){
  .ap2-rg-karte:hover{ border-color:rgba(255,255,255,.3); transform:translateY(-4px); }
  .ap2-rg-karte:hover img{ transform:scale(1.03); }
}

/* ---------- Ratgeber-Artikel ---------- */
.ap2-artikelkopf .art-weg{ justify-content:center; display:flex; gap:8px; margin-bottom:26px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.58); }
.ap2-artikelkopf .art-weg a{ color:rgba(255,255,255,.65); }
.ap2-meta{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin-top:28px; font-size:14px; color:rgba(255,255,255,.55); }
.ap2-meta b{ font-weight:500; color:#fff; }
.ap2-buehne figcaption{ position:absolute; left:18px; bottom:18px; padding:7px 12px; border-radius:999px; font-size:12.5px; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.ap2-buehne{ position:relative; }
body.ap2 .ap2-artikel{ padding:var(--ap2-raum) var(--rand); }
body.ap2 .ap2-artikel .art-spalte{ max-width:720px; }
body.ap2 .ap2-artikel h2{ font-size:clamp(30px,3.6vw,48px); margin:clamp(64px,9vh,96px) 0 20px; }
body.ap2 .ap2-artikel h2:first-child{ margin-top:0; }
body.ap2 .ap2-artikel h3{ font-size:clamp(21px,2vw,26px); margin:40px 0 12px; }
body.ap2 .ap2-artikel p{ font-size:18px; line-height:1.7; color:rgba(255,255,255,.78); }
/* Aufzaehlungen im Artikel: Zeilen mit Haekchen statt Punkten */
body.ap2 .ap2-artikel ul{ list-style:none; margin:28px 0; padding:0; border-top:1px solid var(--ap2-linie); }
body.ap2 .ap2-artikel ul li{ position:relative; padding:18px 0 18px 42px; border-bottom:1px solid var(--ap2-linie); font-size:17px; line-height:1.55; color:#fff; }
body.ap2 .ap2-artikel ul li::before{ content:''; position:absolute; left:4px; top:21px; width:20px; height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5' fill='none' stroke='%23e0404f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }
/* Nummerierte Schritte: grosse Ziffern wie bei einer Anleitung */
body.ap2 .ap2-artikel ol{ list-style:none; counter-reset:schritt; margin:32px 0; padding:0; display:grid; gap:14px; }
body.ap2 .ap2-artikel ol li{ counter-increment:schritt; position:relative; padding:24px 24px 24px 84px; border:1px solid var(--ap2-linie); border-radius:18px; font-size:17px; line-height:1.55; color:#fff; }
body.ap2 .ap2-artikel ol li::before{ content:counter(schritt, decimal-leading-zero); position:absolute; left:24px; top:20px; font-family:var(--schrift-anzeige); font-weight:700; font-size:30px; line-height:1; color:transparent; -webkit-text-stroke:1px var(--rot-hell); }
body.ap2 .ap2-artikel .art-kasten{ margin:40px 0; padding:30px 32px; border-radius:22px; border:1px solid rgba(255,255,255,.16); background:radial-gradient(120% 140% at 100% 0%, rgba(190,22,33,.22), transparent 60%), #000; }
body.ap2 .ap2-artikel .art-kasten b{ display:block; margin-bottom:10px; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--rot-text); }
body.ap2 .ap2-artikel .art-kasten p{ margin:0; color:#fff; }
body.ap2 .ap2-artikel .art-tabelle{ margin:36px 0; border:1px solid var(--ap2-linie); border-radius:20px; overflow:auto; }
body.ap2 .ap2-artikel table{ width:100%; border-collapse:collapse; font-size:15.5px; }
body.ap2 .ap2-artikel th{ text-align:left; padding:16px 20px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ap2-leise); border-bottom:1px solid var(--ap2-linie); }
body.ap2 .ap2-artikel td{ padding:16px 20px; border-bottom:1px solid var(--ap2-linie); color:#fff; }
body.ap2 .ap2-artikel tr:last-child td{ border-bottom:0; }
body.ap2 .ap2-artikel .art-figur{ margin:44px 0; }
body.ap2 .ap2-artikel .art-figur img{ border-radius:20px; }

/* ---------- Bestands-Bausteine im neuen Rahmen ---------- */
body.ap2 main > section.feld, body.ap2 main > section.wb, body.ap2 main > section.pk{ border-top:0; }
body.ap2 .sk-kopf .kicker, body.ap2 .wb-kopf .kicker{ font-size:13px; letter-spacing:.16em; }
body.ap2 .sk-kopf h2, body.ap2 .wb-kopf h2{ font-size:clamp(36px,5.2vw,76px); letter-spacing:-.032em; }
body.ap2 .sk-kontakt, body.ap2 .kt-feld{ border-radius:24px; }
body.ap2 .ws{ padding-top:var(--ap2-raum); padding-bottom:var(--ap2-raum); }

/* ---------- Kapitelnummer vor jedem Kicker: die Seite liest sich als Geschichte ---------- */
body.ap2 main{ counter-reset:kapitel; }
body.ap2 main > section:is(.ap2-feld, .feld, .wb):not(.ap2-zahlen):not(.ap2-schluss){ counter-increment:kapitel; }
body.ap2 main > section .ap2-kopf .ap2-kicker::before,
body.ap2 main > section .ap2-duo-text > .ap2-kicker::before,
body.ap2 main > section .sk-kopf .kicker::before,
body.ap2 main > section .wb-kopf .kicker::before{
  content:'Kapitel ' counter(kapitel, decimal-leading-zero) '\00a0\00a0\00a0'; color:rgba(255,255,255,.58);
}

@media (prefers-reduced-motion:reduce){
  .ap2-bereit .ap2-merk li.ap2-rv svg{ stroke-dashoffset:0; transition:none; }
  .ap2-frage[open] .ap2-antwort-text{ animation:none; }
  .ap2-orte a, .ap2-orte a i, .ap2-rg-karte, .ap2-rg-karte img, .ap2-daumen figcaption, .ap2-leiste-ziele a::after{ transition:none; }
}

/* ---------- Handy: Fotos ruhig und vollstaendig ---------- */
@media (max-width:760px){
  /* Highlights: Foto im Hochformat, Unterschrift klein darunter statt quer ueber dem Bild */
  .ap2-karte{ flex-basis:86vw; border-radius:22px; }
  .ap2-karte-bild{ aspect-ratio:4/3; }
  .ap2-karte-bild figcaption{ position:static; display:block; max-width:none; margin:0; padding:12px 22px 0; border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; font-size:12px; color:rgba(255,255,255,.55); }
  .ap2-karte-bild{ overflow:visible; }
  .ap2-karte-bild img{ border-radius:22px 22px 0 0; }
  /* Werkstatt-Video: Hochformat mit Mass, nicht bildschirmhoch */
  .ap2-duo-bild.hoch{ max-width:none; width:100%; aspect-ratio:4/5; max-height:72vh; }
  .ap2-duo-bild.hoch video{ height:100%; }
  .ap2-duo-bild{ border-radius:20px; }
  /* Referenz: Bild im ruhigen 4:3 */
  .ap2-referenz .ap2-duo-bild{ aspect-ratio:4/3; }
  .ap2-referenz .ap2-duo-bild img{ height:100%; }
  /* Foto-Reihe "Aus der Werkstatt": wischen statt scrollgekoppelt, grosse Fotos */
  body.ap2 .wb{ height:auto; }
  body.ap2 .wb-kleber{ position:static; height:auto; padding:var(--ap2-raum) 0; }
  body.ap2 .wb-spur{ overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; gap:14px; padding:6px var(--rand) 10px; scroll-padding-inline:var(--rand); scrollbar-width:none; transform:none !important; }
  body.ap2 .wb-spur::-webkit-scrollbar{ display:none; }
  body.ap2 .wb-stueck{ width:78vw; scroll-snap-align:start; }
  body.ap2 .wb-stueck img{ aspect-ratio:4/5; height:auto; width:100%; object-fit:cover; border-radius:20px; filter:none; }
  body.ap2 .wb-stueck .wb-naam{ font-size:17px; }
  body.ap2 .wb-leiste{ display:none; }
}

/* =====================================================================
   Referenzen: Karten der Betriebe vor Ort und eine Galerie aller Kunden,
   die in zwei Reihen gegenlaeufig vorbeizieht (Hover haelt an).
   ===================================================================== */
.ap2-refs{ overflow:clip; }
.ap2-ref-lokal{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.ap2-ref-karte{ display:grid; grid-template-columns:1fr; border:1px solid var(--ap2-linie); border-radius:28px; overflow:hidden; background:#000; }
@media (min-width:960px){ .ap2-ref-lokal:has(> :only-child) .ap2-ref-karte{ grid-template-columns:1.1fr .9fr; } }
.ap2-ref-bild{ position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg, var(--ci-1), var(--ci-3)); }
.ap2-ref-bild > img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; display:block; }
.ap2-ref-logo{ position:absolute; inset:0; display:grid; place-items:center; background:#fff; }
.ap2-ref-logo img{ width:100%; height:100%; object-fit:cover; }
.ap2-ref-ci{ position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(120% 120% at 20% 10%, var(--ci-2), var(--ci-1) 45%, var(--ci-3)); }
.ap2-ref-ci b{ font-family:var(--schrift-anzeige); font-size:clamp(64px,9vw,128px); letter-spacing:-.04em; color:rgba(255,255,255,.92); }
.ap2-ref-text{ padding:clamp(26px,3vw,44px); display:flex; flex-direction:column; justify-content:center; }
.ap2-ref-text h3{ margin:0 0 14px; font-size:clamp(26px,2.6vw,38px); line-height:1.02; }
.ap2-ref-text p{ margin:16px 0 0; font-size:16.5px; line-height:1.6; color:var(--ap2-leise); }
.ap2-ref-marken{ display:flex; flex-wrap:wrap; gap:8px; }
.ap2-ref-marken i{ font-style:normal; font-size:12px; letter-spacing:.08em; padding:5px 10px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:#fff; }
.ap2-ref-wege{ display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:26px; }
.ap2-ref-still{ font-size:14px; color:rgba(255,255,255,.58); }

.ap2-ref-galerie{ margin-top:clamp(64px,9vh,110px); display:grid; gap:16px; }
.ap2-ref-zeile{ display:block; width:100%; padding:0 var(--rand); margin:0 auto 10px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.ap2-ref-reihe{ overflow:hidden; -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ap2-ref-lauf{ display:flex; gap:16px; width:max-content; animation:ap2-lauf 70s linear infinite; }
.ap2-ref-reihe.rechts .ap2-ref-lauf{ animation-direction:reverse; animation-duration:80s; }
.ap2-ref-reihe:hover .ap2-ref-lauf, .ap2-ref-reihe:focus-within .ap2-ref-lauf{ animation-play-state:paused; }
@keyframes ap2-lauf{ to{ transform:translateX(calc(-50% - 8px)); } }
.ap2-ref-kachel{
  position:relative; flex:0 0 auto; width:clamp(200px,18vw,260px); aspect-ratio:3/2; border-radius:20px; overflow:hidden;
  display:grid; place-items:center; background:radial-gradient(120% 120% at 20% 10%, var(--ci-2), var(--ci-1) 50%, var(--ci-3));
  border:1px solid rgba(255,255,255,.1); transition:transform .45s var(--ap2-feder), border-color .3s;
}
.ap2-ref-kachel.mit-logo{ background:#fff; }
/* Logos sind quadratisch mit viel Weissraum: Kachel fuellen, der Rand faellt weg */
.ap2-ref-kachel img{ width:100%; height:100%; object-fit:cover; transform:none; transition:transform .45s var(--ap2-feder); }
.ap2-ref-kuerzel{ font-family:var(--schrift-anzeige); font-weight:700; font-size:clamp(40px,4vw,56px); letter-spacing:-.03em; color:rgba(255,255,255,.95); }
.ap2-ref-name{
  position:absolute; left:10px; right:10px; bottom:10px; padding:7px 10px; border-radius:12px; font-size:12.5px; line-height:1.25; color:#fff;
  background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .4s var(--ap2-feder);
}
.ap2-ref-kachel:not(.mit-logo) .ap2-ref-name{ opacity:1; transform:none; background:rgba(0,0,0,.35); }
@media (hover:hover) and (pointer:fine){
  .ap2-ref-kachel:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.35); }
  .ap2-ref-kachel:hover img{ transform:scale(1.05); }
  .ap2-ref-kachel:hover .ap2-ref-name{ opacity:1; transform:none; }
}
@media (max-width:760px){
  .ap2-ref-kachel{ width:170px; border-radius:16px; }
  .ap2-ref-kachel .ap2-ref-name{ opacity:1; transform:none; }
  .ap2-ref-kachel.mit-logo .ap2-ref-name{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .ap2-ref-reihe{ overflow-x:auto; -webkit-mask:none; mask:none; }
  .ap2-ref-lauf{ animation:none; padding:0 var(--rand); }
  .ap2-ref-lauf > [aria-hidden="true"]{ display:none; }
}

/* ---------- Referenzen als Poster-Galerie zum Wischen ---------- */
.ap2-ref-buehne{ margin-top:clamp(8px,2vh,20px); }
.ap2-ref-band{
  --rand-band:max(var(--rand), calc((100vw - var(--ap2-breit)) / 2));
  display:flex; gap:22px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding:10px var(--rand-band) 14px; scroll-padding-inline:var(--rand-band); scrollbar-width:none;
}
.ap2-ref-band::-webkit-scrollbar{ display:none; }
.ap2-ref-poster{
  position:relative; flex:0 0 min(80vw, 400px); aspect-ratio:3/4.2; scroll-snap-align:start;
  border-radius:30px; overflow:hidden; isolation:isolate;
  background:radial-gradient(130% 110% at 15% 0%, var(--ci-2), var(--ci-1) 45%, var(--ci-3));
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .6s var(--ap2-feder), box-shadow .6s var(--ap2-feder);
}
.ap2-ref-poster::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 58%, rgba(0,0,0,.92) 100%); pointer-events:none; }
.ap2-ref-foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ap2-feder); }
.ap2-ref-poster .ap2-ref-logo{ position:absolute; inset:0 0 45% 0; background:#fff; display:grid; place-items:center; }
.ap2-ref-poster .ap2-ref-logo img{ width:100%; height:100%; object-fit:cover; }
.ap2-ref-gross{
  position:absolute; left:-4%; top:2%; z-index:0; font-family:var(--schrift-anzeige); font-weight:700;
  font-size:clamp(180px,22vw,300px); line-height:.8; letter-spacing:-.06em; color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.55); transition:transform 1.1s var(--ap2-feder);
}
.ap2-ref-poster .ap2-ref-text{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 26px 28px; display:block; }
.ap2-ref-nr{ position:absolute; right:22px; top:-26px; font-size:12px; letter-spacing:.16em; color:rgba(255,255,255,.7); transform:translateY(-100%); }
.ap2-ref-poster .ap2-kicker{ color:rgba(255,255,255,.75); margin-bottom:10px; font-size:11.5px; }
.ap2-ref-poster h3{ margin:0 0 8px; font-size:clamp(24px,2.2vw,32px); line-height:1.02; color:#fff; }
.ap2-ref-poster p{ margin:0 0 14px; font-size:15px; line-height:1.5; color:rgba(255,255,255,.82); }
.ap2-ref-poster .ap2-ref-marken i{ border-color:rgba(255,255,255,.35); background:rgba(0,0,0,.25); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.ap2-ref-poster .ap2-ref-wege{ margin-top:18px; gap:8px 20px; }
.ap2-ref-poster .ap2-link{ font-size:14.5px; }
@media (hover:hover) and (pointer:fine){
  .ap2-ref-poster:hover{ transform:translateY(-8px); box-shadow:0 44px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.18) inset; }
  .ap2-ref-poster:hover .ap2-ref-foto{ transform:scale(1.06); }
  .ap2-ref-poster:hover .ap2-ref-gross{ transform:translateX(4%) scale(1.04); }
}
@media (prefers-reduced-motion:reduce){
  .ap2-ref-poster, .ap2-ref-foto, .ap2-ref-gross{ transition:none; }
}
.ap2-refs{ padding-left:0; padding-right:0; }
.ap2-refs > .ap2-spur{ padding:0 var(--rand); }
.ap2-refs .ap2-band-steuer{ padding:0 var(--rand); margin-top:24px !important; }

/* ---------- Referenzen als Projekt-Liste mit Live-Vorschau ---------- */
.ap2-ref-index{ display:grid; gap:clamp(30px,5vw,80px); padding:0 var(--rand); }
@media (min-width:960px){ .ap2-ref-index{ grid-template-columns:.95fr 1.05fr; align-items:start; } }
.ap2-ref-schau{ display:none; }
@media (min-width:960px){
  .ap2-ref-schau{ display:block; position:sticky; top:96px; aspect-ratio:4/5; max-height:calc(100vh - 140px); border-radius:30px; overflow:hidden; background:#0a0a0a; box-shadow:0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08) inset; }
}
.ap2-ref-folie{ position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.06); transition:opacity .7s var(--ap2-feder), transform 1.2s var(--ap2-feder);
  background:radial-gradient(130% 110% at 15% 0%, var(--ci-2), var(--ci-1) 45%, var(--ci-3)); }
.ap2-ref-folie.an{ opacity:1; transform:none; }
.ap2-ref-folie > img{ width:100%; height:100%; object-fit:cover; display:block; }
.ap2-ref-folie .ap2-ref-logo{ position:absolute; inset:0; background:#fff; }
.ap2-ref-folie .ap2-ref-logo img{ width:100%; height:100%; object-fit:contain; padding:12%; }
.ap2-ref-folie .ap2-ref-gross{ position:absolute; left:6%; bottom:4%; top:auto; }

.ap2-ref-liste{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ap2-linie); }
.ap2-ref-zeile2{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:6px 22px; padding:clamp(26px,4vh,40px) 0; border-bottom:1px solid var(--ap2-linie); cursor:default; }
.ap2-ref-zeile2::before{ content:''; position:absolute; left:0; top:-1px; height:1px; width:100%; background:var(--rot-hell); transform:scaleX(0); transform-origin:0 50%; transition:transform .8s var(--ap2-feder); }
.ap2-ref-zeile2.an::before{ transform:scaleX(1); }
.ap2-ref-mini{ display:none; }
.ap2-ref-nr2{ font-size:13px; letter-spacing:.14em; color:rgba(255,255,255,.58); padding-top:12px; transition:color .4s; }
.ap2-ref-zeile2.an .ap2-ref-nr2{ color:#f0606e; }
.ap2-ref-inhalt .ap2-ref-titel{ margin:0; hyphens:auto; -webkit-hyphens:auto; font-size:clamp(30px,3.6vw,54px); line-height:.98; letter-spacing:-.015em; color:rgba(255,255,255,.58); transition:color .5s var(--ap2-feder), transform .6s var(--ap2-feder); transform-origin:0 50%; }
.ap2-ref-zeile2.an .ap2-ref-inhalt .ap2-ref-titel{ color:#fff; transform:translateX(6px); }
.ap2-ref-ort{ display:block; margin-top:10px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rot-text); }
/* Details klappen bei der aktiven Zeile weich auf */
.ap2-ref-inhalt > p, .ap2-ref-inhalt > .ap2-ref-marken, .ap2-ref-inhalt > .ap2-ref-wege{ transition:opacity .5s var(--ap2-feder), transform .6s var(--ap2-feder); }
@media (min-width:960px){
  .ap2-ref-zeile2:not(.an) .ap2-ref-inhalt > p, .ap2-ref-zeile2:not(.an) .ap2-ref-inhalt > .ap2-ref-marken, .ap2-ref-zeile2:not(.an) .ap2-ref-inhalt > .ap2-ref-wege{ opacity:.35; }
}
.ap2-ref-inhalt > p{ margin:14px 0 0; font-size:16.5px; line-height:1.55; color:var(--ap2-leise); }
.ap2-ref-inhalt .ap2-ref-marken{ margin-top:16px; }
.ap2-ref-inhalt .ap2-ref-wege{ margin-top:18px; }
@media (max-width:959px){
  .ap2-ref-zeile2{ grid-template-columns:1fr; }
  .ap2-ref-mini{ display:grid; place-items:center; margin:0 0 18px; aspect-ratio:16/10; border-radius:22px; overflow:hidden; background:radial-gradient(130% 110% at 15% 0%, var(--ci-2), var(--ci-1) 45%, var(--ci-3)); }
  .ap2-ref-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
  .ap2-ref-mini img.logo{ object-fit:contain; background:#fff; padding:10%; }
  .ap2-ref-mini span{ font-family:var(--schrift-anzeige); font-weight:700; font-size:96px; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.6); }
  .ap2-ref-nr2{ padding-top:0; }
  .ap2-ref-inhalt .ap2-ref-titel{ color:#fff; }
}
@media (prefers-reduced-motion:reduce){
  .ap2-ref-folie, .ap2-ref-zeile2::before, .ap2-ref-inhalt .ap2-ref-titel{ transition:none; }
}

/* Platz unter dem festen Kopf; die Leiste klebt, sobald diese Marke oben ankommt */
/* Hoehe des Kopfs ganz oben, rein aus CSS (Innenabstand + Logo wie in stil.css);
   so steht der Platz schon vor dem Skript fest und nichts verschiebt sich */
:root{ --kopf-start:calc(2 * clamp(14px,2vh,22px) + clamp(52px,7.4vh,82px)); --kopf-h:var(--kopf-start); }
.ap2-leiste-marke{ height:var(--kopf-start); }

/* ---------- Referenzen als Karte: Punkte am echten Ort, Ringe um die Werkstatt ---------- */
.ap2-karte-feld{ max-width:var(--ap2-breit); margin:0 auto; padding:var(--ap2-raum) var(--rand) 0; }
.ap2-karte-kopf{ max-width:820px; margin-bottom:clamp(28px,4vh,44px); }
.ap2-karte-kopf h2{ margin:0; font-size:clamp(34px,4.6vw,68px); line-height:.98; letter-spacing:-.03em; }
.ap2-karte-kopf p{ margin:22px 0 0; max-width:60ch; font-size:clamp(16px,1.3vw,19px); line-height:1.55; color:var(--ap2-leise); }

.ap2-finder-leiste{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px; }
.ap2-finder-leiste button{ font:inherit; font-size:13px; font-weight:500; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.22); padding:9px 14px; cursor:pointer; transition:background-color .25s, color .25s, border-color .25s, transform .1s ease-out; }
.ap2-finder-leiste button i{ font-style:normal; margin-left:6px; color:rgba(255,255,255,.58); font-variant-numeric:tabular-nums; }
.ap2-finder-leiste button.an{ background:#fff; color:#000; border-color:#fff; }
.ap2-finder-leiste button.an i{ color:rgba(0,0,0,.55); }
.ap2-finder-leiste button:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){ .ap2-finder-leiste button:not(.an):hover{ border-color:#fff; } }
.ap2-finder-zahl{ margin-left:auto; font-size:13px; color:rgba(255,255,255,.66); }
.ap2-finder-zahl b{ color:#fff; font-variant-numeric:tabular-nums; }

.ap2-finder-raster{ display:grid; gap:clamp(22px,3vw,44px); align-items:start; }
@media (min-width:1000px){ .ap2-finder-raster{ grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); } }

.ap2-landkarte{
  position:relative; border:1px solid var(--ap2-linie); border-radius:24px; overflow:hidden;
  background:#000 radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.4px) 0 0 / 22px 22px;
}
.ap2-landkarte::after{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 62% 64%, transparent 30%, rgba(0,0,0,.75) 100%); }
.ap2-landkarte-ringe{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ap2-landkarte-ringe .ringe circle{ fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.2; stroke-dasharray:2 7; vector-effect:non-scaling-stroke; }
.ap2-landkarte-ringe .ring-text{ fill:rgba(255,255,255,.6); font-size:15px; letter-spacing:.08em; font-family:var(--schrift-text); }
.ap2-landkarte-linie{ stroke:var(--rot-hell); stroke-width:2; stroke-dasharray:5 6; vector-effect:non-scaling-stroke; animation:ap2-linie 1.2s linear infinite; }
@keyframes ap2-linie{ to{ stroke-dashoffset:-22; } }

.ap2-ortsname{ position:absolute; z-index:1; transform:translate(calc(-50% + var(--dx, 0px)), calc(11px + var(--dy, 0px))); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:rgba(255,255,255,.58); pointer-events:none; }
.ap2-werk{ position:absolute; z-index:3; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; color:#fff; pointer-events:none; }
.ap2-werk i{ width:16px; height:16px; background:var(--rot-hell); box-shadow:0 0 0 0 rgba(190,22,33,.55); animation:ap2-werk 2.4s var(--ap2-feder) infinite; }
.ap2-werk b{ font-weight:700; }
.ap2-werk em{ font-style:normal; }
.ap2-werk{ padding-top:24px; }
@keyframes ap2-werk{ 0%{ box-shadow:0 0 0 0 rgba(190,22,33,.55); } 70%,100%{ box-shadow:0 0 0 18px rgba(190,22,33,0); } }

.ap2-punkt{
  position:absolute; z-index:2; width:13px; height:13px; padding:0; border:0; border-radius:50%;
  background:#fff; cursor:pointer; transform:translate(-50%,-50%);
  transition:transform .45s var(--ap2-feder), opacity .35s, background-color .25s, box-shadow .35s;
}
.ap2-punkt::before{ content:''; position:absolute; inset:-11px; }
.ap2-punkt span{
  position:absolute; left:50%; bottom:calc(100% + 12px); transform:translate(-50%,4px); opacity:0; pointer-events:none;
  white-space:nowrap; font-family:var(--schrift-text); font-size:12.5px; font-weight:600; color:#000; background:#fff; padding:6px 10px; transition:opacity .2s, transform .25s var(--ap2-feder);
}
@media (hover:hover) and (pointer:fine){ .ap2-punkt:hover span{ opacity:1; transform:translate(-50%,0); } .ap2-punkt:hover{ transform:translate(-50%,-50%) scale(1.35); } }
.ap2-punkt:focus-visible span{ opacity:1; transform:translate(-50%,0); }
.ap2-punkt.an{ z-index:4; background:var(--rot-hell); transform:translate(-50%,-50%) scale(1.45); box-shadow:0 0 0 5px rgba(190,22,33,.28), 0 0 0 12px rgba(190,22,33,.12); }
.ap2-punkt.aus{ opacity:.14; transform:translate(-50%,-50%) scale(.6); pointer-events:none; }
.ap2-bereit .ap2-finder:not(.in) .ap2-punkt:not(.ap2-punkt-weit){ opacity:0; transform:translate(-50%,-50%) scale(.2); }
.ap2-bereit .ap2-finder .ap2-punkt{ transition-delay:var(--v, 0ms); }
.ap2-bereit .ap2-finder.fertig .ap2-punkt{ transition-delay:0ms; }

.ap2-weit{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; }
.ap2-weit > span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.66); margin-right:6px; }
.ap2-punkt.ap2-punkt-weit{ position:static; width:auto; height:auto; transform:none; border-radius:0; padding:7px 11px; font:inherit; font-size:12.5px; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.25); box-shadow:none; }
.ap2-punkt.ap2-punkt-weit::before{ display:none; }
.ap2-punkt.ap2-punkt-weit.an{ background:var(--rot-hell); border-color:var(--rot-hell); transform:none; }
.ap2-punkt.ap2-punkt-weit.aus{ transform:none; }

/* Projektakte rechts */
.ap2-akten{ position:relative; scroll-margin-top:calc(var(--kopf-h, 72px) + 72px); }
@media (min-width:1000px){ .ap2-akten{ position:sticky; top:calc(var(--kopf-h, 72px) + 76px); } }
.ap2-akte + .ap2-akte{ margin-top:48px; }
body.ap2-js .ap2-akte{ display:none; margin-top:0; }
body.ap2-js .ap2-akte.an{ display:block; animation:ap2-akte .55s var(--ap2-feder); }
@keyframes ap2-akte{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.ap2-akte-bild{ position:relative; margin:0; aspect-ratio:16/10; border-radius:20px; overflow:hidden; background:#0a0a0a; }
.ap2-akte-bild > img{ width:100%; height:100%; object-fit:cover; display:block; }
.ap2-akte-bild.ohne{ background:linear-gradient(135deg, var(--ci-1) 0%, var(--ci-2) 55%, var(--ci-3) 100%); display:grid; place-items:center; }
.ap2-akte-ci{ display:none; }
.ap2-akte-logo{ display:grid; place-items:center; width:clamp(96px,11vw,140px); aspect-ratio:1; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.35); }
.ap2-akte-logo img{ width:100%; height:100%; object-fit:cover; }
.ap2-akte-bild:not(.ohne) .ap2-akte-logo{ position:absolute; left:14px; bottom:14px; width:64px; border-radius:12px; }
.ap2-akte-kuerzel{ font-family:var(--schrift-anzeige); font-weight:700; font-size:clamp(56px,7vw,96px); letter-spacing:-.03em; color:#fff; text-shadow:0 6px 30px rgba(0,0,0,.25); }
.ap2-akte-text{ padding-top:22px; }
.ap2-akte-nr{ display:block; font-size:12.5px; letter-spacing:.08em; color:rgba(255,255,255,.66); font-variant-numeric:tabular-nums; }
.ap2-akte-nr b{ color:#fff; font-weight:600; }
.ap2-akte .ap2-akte-name{ margin:10px 0 6px; font-size:clamp(26px,2.6vw,38px); line-height:1.02; letter-spacing:-.015em; text-transform:uppercase; color:#fff; }
.ap2-akte-ort{ display:block; font-size:14px; color:rgba(255,255,255,.66); }
.ap2-akte-marken{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.ap2-akte-marken i{ font-style:normal; font-size:12px; padding:5px 9px; border:1px solid rgba(255,255,255,.22); color:#fff; }
.ap2-akte-kurz{ margin:16px 0 0; font-size:16px; line-height:1.6; color:var(--ap2-leise); }
.ap2-akte-mehr{ margin-top:12px; }
.ap2-akte-mehr summary{ cursor:pointer; font-size:14px; font-weight:600; color:#fff; list-style:none; }
.ap2-akte-mehr summary::-webkit-details-marker{ display:none; }
.ap2-akte-mehr summary::after{ content:' +'; color:var(--rot-text); }
.ap2-akte-mehr[open] summary::after{ content:' −'; }
.ap2-akte-mehr p{ margin:12px 0 0; font-size:15.5px; line-height:1.6; color:var(--ap2-leise); }
.ap2-akte-wege{ margin-top:18px; }
.ap2-akte-still{ font-size:14px; color:rgba(255,255,255,.58); }
.ap2-akten-weiter{ display:none; }
body.ap2-js .ap2-akten-weiter{ display:flex; align-items:center; gap:16px; margin-top:26px; font-size:13px; color:rgba(255,255,255,.66); font-variant-numeric:tabular-nums; }

@media (max-width:640px){
  .ap2-finder-leiste{ flex-wrap:nowrap; overflow-x:auto; margin-left:calc(-1 * var(--rand)); margin-right:calc(-1 * var(--rand)); padding:0 var(--rand) 4px; scrollbar-width:none; }
  .ap2-finder-leiste::-webkit-scrollbar{ display:none; }
  .ap2-finder-leiste button{ flex:0 0 auto; }
  .ap2-finder-zahl{ display:none; }
  .ap2-punkt{ width:11px; height:11px; }
  .ap2-ortsname{ font-size:9px; letter-spacing:.1em; }
  .ap2-werk{ font-size:10px; }
  .ap2-werk em, .ap2-ortsname.nur-gross{ display:none; }
  .ap2-landkarte-ringe .ring-text{ font-size:22px; }
  .ap2-landkarte{ border-radius:18px; }
}
@media (prefers-reduced-motion:reduce){
  .ap2-landkarte-linie, .ap2-werk i{ animation:none; }
  .ap2-punkt, body.ap2-js .ap2-akte.an{ transition:none; animation:none; }
}

/* Sternbild-Variante: Punkte frei verteilt, feine Linien zu den Nachbarn */
.ap2-sternbild{ aspect-ratio:5 / 4; }
.ap2-sternbild::after{ background:radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.7) 100%); }
.ap2-sternbild .ap2-landkarte-ringe line{ stroke:rgba(255,255,255,.13); stroke-width:1; vector-effect:non-scaling-stroke; transition:stroke .4s, stroke-width .4s; }
.ap2-sternbild .ap2-landkarte-ringe line.an{ stroke:var(--rot-hell); stroke-width:1.6; }
.ap2-sternbild .ap2-punkt{ animation:ap2-schweben 6s ease-in-out infinite; animation-delay:calc(var(--s, 0s) * -1); }
@keyframes ap2-schweben{ 0%,100%{ translate:0 0; } 50%{ translate:0 -4px; } }
.ap2-sternbild-hinweis{ margin:14px 0 0; font-size:13px; color:rgba(255,255,255,.66); }
.ap2-sternbild-hinweis b{ color:#fff; }
@media (max-width:640px){ .ap2-sternbild{ aspect-ratio:4 / 5; } }
@media (prefers-reduced-motion:reduce){ .ap2-sternbild .ap2-punkt{ animation:none; } }

/* Sternbild mit Kundenlogos: jeder Punkt ist ein rundes Logo */
.ap2-sternbild .ap2-punkt{ width:clamp(30px,3.6vw,50px); height:clamp(30px,3.6vw,50px); background:linear-gradient(135deg, var(--ci-1), var(--ci-2)); box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.45); display:grid; place-items:center; }
.ap2-sternbild .ap2-punkt.mit-logo{ background:#fff; }
.ap2-sternbild .ap2-punkt:not(.mit-logo){ background:#fff; }
.ap2-sternbild .ap2-punkt:not(.mit-logo) > b{ color:#111; text-shadow:none; }
.ap2-punkt-logo{ position:absolute; inset:0; border-radius:50%; overflow:hidden; }
.ap2-punkt-logo img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(var(--z, 1)); }
.ap2-sternbild .ap2-punkt > b{ font-family:var(--schrift-anzeige); font-weight:700; font-size:clamp(11px,1.2vw,16px); letter-spacing:-.01em; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.ap2-sternbild .ap2-punkt::before{ inset:-6px; }
@media (hover:hover) and (pointer:fine){ .ap2-sternbild .ap2-punkt:hover{ transform:translate(-50%,-50%) scale(1.18); } }
.ap2-sternbild .ap2-punkt.an{ transform:translate(-50%,-50%) scale(1.22); box-shadow:0 0 0 3px var(--rot-hell), 0 0 0 9px rgba(190,22,33,.22), 0 10px 26px rgba(0,0,0,.5); }

/* Freigestelltes Portrait: roter Rahmen dahinter, Kopf ragt heraus, rote Bodenlinie an der Schnittkante */
.ap2-duo-bild.frei{ position:relative; isolation:isolate; overflow:visible; border-radius:0; padding:0 4% 0 6%; }
.ap2-duo-bild.frei img{ position:relative; z-index:1; }
.ap2-duo-bild.frei::before{
  content:''; position:absolute; z-index:0; left:0; right:0; top:22%; bottom:0;
  border:2px solid var(--rot-hell); border-bottom:0;
  background:radial-gradient(ellipse at 50% 85%, rgba(190,22,33,.22), transparent 70%);
  clip-path:inset(100% 0 0 0); transition:clip-path 1.1s var(--ap2-feder) .15s;
}
.ap2-duo-bild.frei::after{
  content:''; position:absolute; z-index:2; left:0; right:0; bottom:0; height:5px; background:var(--rot-hell);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .8s var(--ap2-feder);
}
.ap2-duo-bild.frei.in::before, body:not(.ap2-bereit) .ap2-duo-bild.frei::before{ clip-path:inset(0 0 0 0); }
.ap2-duo-bild.frei.in::after, body:not(.ap2-bereit) .ap2-duo-bild.frei::after{ transform:scaleX(1); }
@media (max-width:700px){ .ap2-duo-bild.frei{ padding:0 6% 0 8%; } .ap2-duo-bild.frei::before{ top:18%; } }
@media (prefers-reduced-motion:reduce){ .ap2-duo-bild.frei::before, .ap2-duo-bild.frei::after{ transition:none; clip-path:none; transform:none; } }

/* Zusammengehoerige Woerter (z. B. Ortsnamen) nicht trennen */
.nw{ white-space:nowrap; }

/* ============ Ausfuehrlicher Teil als Kapitel (form: 'kacheln') ============
   Gleicher Text wie der Artikel, aber gegliedert: Kapitelnummer und grosse
   Ueberschrift, Kacheln mit Linien-Icon, Zeitleiste, geteilte Textkapitel. */
.ap2-wk{ padding-bottom:calc(var(--ap2-raum) * .55); }
.ap2-wk + .ap2-wk{ padding-top:calc(var(--ap2-raum) * .2); }
.ap2-wk:last-child, .ap2-wk + :not(.ap2-wk){ }
.ap2-wk-kopf{ display:flex; align-items:baseline; gap:clamp(14px,2vw,26px); margin-bottom:clamp(22px,3.4vh,40px); }
.ap2-wk-nr{ font-family:var(--schrift-anzeige); font-weight:700; font-size:clamp(15px,1.3vw,18px); letter-spacing:.12em; color:var(--rot-text,#e0404f); }
.ap2-wk h2{ margin:0; font-size:clamp(30px,4.2vw,60px); line-height:1; letter-spacing:-.03em; text-wrap:balance; }
.ap2-wk p{ margin:0 0 18px; font-size:17px; line-height:1.7; color:rgba(255,255,255,.76); text-wrap:pretty; }
.ap2-wk p:last-child{ margin-bottom:0; }
.ap2-wk a{ color:#fff; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--rot-hell); }
.ap2-wk strong{ color:#fff; font-weight:600; }
.ap2-wk-lead{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); margin-bottom:clamp(36px,6vh,64px); }
.ap2-wk-lead p:first-child{ font-size:clamp(19px,1.6vw,23px); line-height:1.5; color:#fff; }
.ap2-wk-raster{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); }
.ap2-wk-kachel{ position:relative; background:#000; padding:clamp(26px,3vw,44px); transition:background-color .35s var(--ease-aus,ease); }
.ap2-wk-kachel::before{ content:''; position:absolute; left:0; top:0; width:44px; height:2px; background:var(--rot-hell); transform-origin:0 50%; transition:transform .45s cubic-bezier(.23,1,.32,1); }
@media (hover:hover) and (pointer:fine){ .ap2-wk-kachel:hover{ background:#0b0b0b; } .ap2-wk-kachel:hover::before{ transform:scaleX(2.4); } }
.ap2-wk-kachel h3{ margin:18px 0 12px; font-size:clamp(21px,1.9vw,26px); letter-spacing:-.015em; }
.ap2-ik{ width:40px; height:40px; fill:none; stroke:var(--rot-text,#e0404f); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.ap2-wk-einzel{ max-width:62ch; margin-bottom:clamp(30px,5vh,52px) !important; }
.ap2-wk-weg{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(18px,2vw,30px); position:relative; }
.ap2-wk-weg::before{ content:''; position:absolute; left:20px; right:20px; top:20px; height:1px; background:linear-gradient(90deg, var(--rot-hell), rgba(255,255,255,.14)); }
.ap2-wk-weg li{ position:relative; }
.ap2-wk-weg .ap2-ik{ position:relative; width:40px; height:40px; padding:8px; box-sizing:border-box; background:#000; border:1px solid rgba(255,255,255,.2); border-radius:50%; }
.ap2-wk-schritt{ display:block; margin:16px 0 8px; font-size:12px; letter-spacing:.2em; color:rgba(255,255,255,.55); }
.ap2-wk-weg p{ font-size:15.5px; line-height:1.62; }
.ap2-wk-weg strong{ display:block; margin-bottom:6px; font-family:var(--schrift-anzeige); font-size:18px; letter-spacing:-.01em; }
.ap2-wk-geteilt .ap2-spur{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:clamp(28px,5vw,90px); align-items:start; }
.ap2-wk-geteilt .ap2-wk-kopf{ position:sticky; top:calc(var(--kopf-h,80px) + 70px); flex-direction:column; gap:12px; margin:0; }
.ap2-wk-kasten{ margin-top:clamp(24px,4vh,40px); padding:clamp(22px,2.6vw,34px); border:1px solid rgba(255,255,255,.14); border-left:3px solid var(--rot-hell); }
.ap2-wk-kasten b{ display:block; margin-bottom:12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--rot-text,#e0404f); }
@media (max-width:899px){
  .ap2-wk-lead, .ap2-wk-raster, .ap2-wk-geteilt .ap2-spur{ grid-template-columns:1fr; }
  .ap2-wk-geteilt .ap2-wk-kopf{ position:static; }
  .ap2-wk-weg{ grid-template-columns:1fr; gap:0; }
  .ap2-wk-weg::before{ left:20px; right:auto; top:20px; bottom:20px; width:1px; height:auto; background:linear-gradient(180deg, var(--rot-hell), rgba(255,255,255,.14)); }
  .ap2-wk-weg li{ display:grid; grid-template-columns:40px 1fr; column-gap:18px; padding-bottom:26px; }
  .ap2-wk-weg li .ap2-ik{ grid-row:1 / span 2; }
  .ap2-wk-schritt{ margin:10px 0 6px; }
}

/* Hingucker: Fotos in den Kacheln, grosse Kontur-Nummern, mitlaufende Zeitleiste */
.ap2-wk-kopf{ position:relative; }
.ap2-wk-kopf h2, .ap2-wk-kopf .ap2-wk-nr{ position:relative; z-index:1; }
.ap2-wk-gross{ position:absolute; left:-.04em; top:50%; transform:translateY(-58%); z-index:0; pointer-events:none;
  font-family:var(--schrift-anzeige); font-weight:700; font-size:clamp(130px,17vw,260px); line-height:.8; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1.2px rgba(224,64,79,.42); }
.ap2-wk-geteilt .ap2-wk-gross{ top:0; transform:translateY(-38%); }
.ap2-wk-kachel{ padding:0; overflow:hidden; }
.ap2-wk-inhalt{ position:relative; padding:0 clamp(26px,3vw,44px) clamp(26px,3vw,44px); }
.ap2-wk-foto{ position:relative; margin:0; aspect-ratio:16/9; overflow:hidden; }
.ap2-wk-foto img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform 1.1s cubic-bezier(.23,1,.32,1), filter .6s var(--ease-aus,ease); filter:saturate(.92); }
.ap2-wk-foto::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.85) 92%, #000 100%); }
@media (hover:hover) and (pointer:fine){ .ap2-wk-kachel:hover .ap2-wk-foto img{ transform:scale(1.08); filter:saturate(1.08); } }
.ap2-wk-kachel .ap2-wk-inhalt .ap2-ik{ position:relative; margin-top:-34px; width:58px; height:58px; padding:12px; box-sizing:border-box; background:#000; border:1px solid rgba(255,255,255,.18); }
.ap2-wk-kachel::before{ z-index:2; }
/* Zeitleiste */
.ap2-wk-weg::before{ background:rgba(255,255,255,.14); }
.ap2-wk-weg::after{ content:''; position:absolute; left:20px; right:20px; top:20px; height:2px; margin-top:-.5px; background:var(--rot-hell); box-shadow:0 0 14px rgba(224,64,79,.75);
  transform-origin:0 50%; transform:scaleX(var(--fort,0)); }
.ap2-wk-weg li .ap2-ik{ z-index:1; transition:background-color .45s var(--ease-aus,ease), border-color .45s var(--ease-aus,ease), stroke .45s var(--ease-aus,ease), box-shadow .45s var(--ease-aus,ease); }
.ap2-wk-weg li.an .ap2-ik{ background:var(--rot-hell); border-color:var(--rot-hell); stroke:#fff; box-shadow:0 0 0 7px rgba(190,22,33,.2); }
.ap2-wk-weg li > p, .ap2-wk-weg .ap2-wk-schritt{ transition:opacity .5s var(--ease-aus,ease), color .5s var(--ease-aus,ease); }
.ap2-wk-weg li:not(.an) > p, .ap2-wk-weg li:not(.an) .ap2-wk-schritt{ opacity:.42; }
.ap2-wk-weg li.an .ap2-wk-schritt{ color:var(--rot-text,#e0404f); }
.ap2-wk-siegel{ margin:0 0 20px; }
@media (max-width:899px){
  .ap2-wk-weg::after{ left:20px; right:auto; top:20px; bottom:20px; width:2px; height:auto; margin:0 0 0 -.5px; transform-origin:50% 0; transform:scaleY(var(--fort,0)); }
  .ap2-wk-gross{ font-size:clamp(96px,30vw,150px); }
}
@media (prefers-reduced-motion:reduce){ .ap2-wk-foto img{ transition:none; } }
.ap2-wk-kopf .ap2-wk-nr{ display:none; }
.ap2-wk-kopf h2{ padding-top:.35em; }

/* Siegel im 3M-Kasten: nie stauchen, notfalls umbrechen */
.ap2-wk-siegel{ max-width:100%; flex-wrap:wrap; row-gap:8px; }
.ap2-wk-siegel img{ max-width:none; }

/* Kapitel-Aufbau fuer alle Unterseiten: Einleitung, Kacheln ohne Foto,
   Listen, Tabellen, Bilder, Raster je nach Anzahl */
.ap2-wk-einleitung .ap2-wk-text > *{ max-width:860px; }
.ap2-wk-einleitung p:first-child{ font-size:clamp(20px,1.9vw,26px); line-height:1.5; color:#fff; }
.ap2-wk-lead.ein{ grid-template-columns:1fr; max-width:860px; }
.ap2-wk-fluss > * + *{ margin-top:clamp(24px,3.6vh,40px); }
.ap2-wk-fluss > p{ max-width:72ch; }
.ap2-wk-raster{ gap:0; background:none; border:0; }
.ap2-wk-raster > .ap2-wk-kachel{ border:1px solid rgba(255,255,255,.12); margin:-1px 0 0 -1px; }
.ap2-wk-raster[data-n="3"], .ap2-wk-raster[data-n="5"], .ap2-wk-raster[data-n="6"]{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ap2-wk-raster[data-n="1"]{ grid-template-columns:1fr; }
.ap2-wk-kachel:not(.mit-foto) .ap2-wk-inhalt{ padding-top:clamp(26px,3vw,44px); }
.ap2-wk-kachel:not(.mit-foto) .ap2-wk-inhalt .ap2-ik{ margin-top:0; width:48px; height:48px; padding:10px; }
.ap2-wk-kachel:not(.mit-foto) h3{ margin-top:16px; }
.ap2-wk-kachel:not(.mit-foto) .ap2-wk-inhalt > h3:first-child{ margin-top:0; }
.ap2-wk-kachel ul.ap2-wk-liste{ margin-top:14px; }
.ap2-wk-liste{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ap2-wk-liste li{ position:relative; padding-left:32px; font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.8); }
.ap2-wk-liste li::before{ content:''; position:absolute; left:0; top:.32em; width:18px; height:18px; border-radius:50%; background:rgba(190,22,33,.18); }
.ap2-wk-liste li::after{ content:''; position:absolute; left:5.5px; top:calc(.32em + 5px); width:7px; height:4px; border-left:2px solid var(--rot-text,#e0404f); border-bottom:2px solid var(--rot-text,#e0404f); transform:rotate(-45deg); }
.ap2-wk-tabelle{ overflow-x:auto; }
.ap2-wk-tabelle table{ width:100%; border-collapse:collapse; font-size:15.5px; }
.ap2-wk-tabelle th{ text-align:left; padding:14px 16px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--rot-text,#e0404f); border-bottom:1px solid rgba(255,255,255,.22); font-weight:500; }
.ap2-wk-tabelle td{ padding:16px; border-bottom:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.78); vertical-align:top; }
.ap2-wk-tabelle td.art-erst{ color:#fff; font-weight:600; }
@media (hover:hover) and (pointer:fine){ .ap2-wk-tabelle tbody tr:hover td{ background:rgba(255,255,255,.03); } }
.ap2-wk-bild{ margin:0; }
.ap2-wk-bild img{ width:100%; height:auto; display:block; }
.ap2-wk-bild figcaption{ margin-top:10px; font-size:13px; color:rgba(255,255,255,.6); }
.ap2-wk-text > * + *{ margin-top:18px; }
.ap2-wk-text > .ap2-wk-weg{ margin-top:clamp(28px,4vh,44px); }
@media (max-width:899px){
  .ap2-wk-raster[data-n="3"], .ap2-wk-raster[data-n="5"], .ap2-wk-raster[data-n="6"]{ grid-template-columns:1fr; }
}
body.ap2 .ap2-wk.ap2-wk-geteilt h2{ font-size:clamp(26px,2.7vw,40px); line-height:1.02; hyphens:manual; overflow-wrap:break-word; }
.ap2-wk-geteilt .ap2-wk-kopf{ min-width:0; }