/* ANDROS UX-Layer (Runde 38, 13.10.2026)
   Dynamik und Mikrointeraktionen. Alles optional: ohne JS und bei prefers-reduced-motion bleibt jeder Inhalt sichtbar.
   Selektoren nie auf blosses "span" (die dc-Runtime fuegt eigene Wrapper-Spans ein). */
:root{ --an-teal:#0E7A6E; --an-teal-d:#0b5f55; --an-navy:#142231; --an-ease:cubic-bezier(.22,.7,.2,1); }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ---- Scroll-Fortschritt + Header ---- */
#an-progress{ position:fixed; top:0; left:0; width:100%; height:2px; z-index:60; pointer-events:none; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,#0E7A6E,#4FD8C4); }
#an-nav{ transition:box-shadow .3s ease, padding .3s var(--an-ease), background .3s ease; }
#an-nav.an-scrolled{ box-shadow:0 10px 30px rgba(20,34,49,.08); }
@media (min-width:769px){ #an-nav.an-scrolled{ padding-top:14px !important; padding-bottom:14px !important; } }

/* ---- Hero-Einlauf (nur Startseite, nur ohne Reduced-Motion) ---- */
@keyframes anUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes anFade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:no-preference){
  #an-heroleft > *{ animation:anUp .75s var(--an-ease) both; }
  #an-heroleft > *:nth-child(1){ animation-delay:.04s; }
  #an-heroleft > *:nth-child(2){ animation-delay:.12s; }
  #an-heroleft > *:nth-child(3){ animation-delay:.22s; }
  #an-heroleft > *:nth-child(4){ animation-delay:.30s; }
  #an-heroleft > *:nth-child(5){ animation-delay:.38s; }
  #an-heroleft > *:nth-child(6){ animation-delay:.46s; }
  #an-heroleft > *:nth-child(7){ animation-delay:.54s; }
  #an-heroright{ animation:anFade 1.2s ease both .15s; }
}

/* ---- Reveal beim Scrollen (Klassen setzt andros-ux.js, nur wenn IntersectionObserver da ist und keine Reduced-Motion) ---- */
.an-js .an-rv{ opacity:0; transform:translateY(24px); transition:opacity .75s var(--an-ease), transform .75s var(--an-ease); }
.an-js .an-rv.an-in{ opacity:1; transform:none; }
.an-js .an-stag > *{ opacity:0; }
@keyframes anDeal{ 0%{ opacity:0; transform:translateY(38px) scale(.94); } 62%{ opacity:1; transform:translateY(-5px) scale(1.012); } 100%{ opacity:1; transform:none; } }
@keyframes anFlash{ 0%{ outline:2px solid rgba(14,122,110,.5); outline-offset:0; } 100%{ outline:2px solid rgba(14,122,110,0); outline-offset:9px; } }
.an-js .an-stag.an-in > *{ opacity:1; animation:anDeal .8s cubic-bezier(.2,.85,.3,1) calc(var(--i,0) * 95ms) backwards, anFlash 1s ease-out calc(var(--i,0) * 95ms + .35s) backwards; }
@media print{ .an-rv, .an-stag > *{ opacity:1 !important; transform:none !important; animation:none !important; } }

/* ---- Mikrointeraktionen ---- */
.an-hero-arrow{ display:inline-block; transition:transform .25s var(--an-ease); }
a:hover > .an-hero-arrow{ transform:translateX(5px); }
@media (hover:hover){
  a.m-tapb{ transition:transform .2s var(--an-ease), box-shadow .25s ease, background-color .2s ease, color .2s ease; }
  a.m-tapb:hover{ transform:translateY(-1px); }
}
a.m-tapb:active, #an-sticky a:active, .an-cta:active{ transform:scale(.98); }
.an-pc::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease; background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(14,122,110,.11), transparent 62%); }
@media (hover:hover){ .an-pc:hover::before{ opacity:1; } }

/* ---- Ablauf "So funktioniert's" als Kaesten (Runde 47): ganze Flaeche faerbt sich beim Scrollen, keine Punkte und keine Linie ---- */
@keyframes anChip{ 0%{ opacity:0; transform:translateY(6px) scale(.82); } 100%{ opacity:1; transform:none; } }
#an-steps{ position:relative; display:flex; flex-direction:column; gap:12px; }
.an-step{ position:relative; z-index:1; align-items:flex-start; padding:22px 26px; border-radius:10px; background:#fff; border:1px solid rgba(20,34,49,.09); overflow:hidden; transition:background-color .45s ease var(--an-d,0ms), border-color .45s ease var(--an-d,0ms), box-shadow .45s ease, transform .55s cubic-bezier(.2,.8,.2,1) var(--an-d,0ms); }
.an-step > div:last-child{ min-width:0; }
.an-step .an-sn{ width:auto; min-width:34px !important; padding-top:1px; font-size:30px !important; font-weight:500; line-height:1 !important; color:var(--an-teal) !important; transition:color .45s ease var(--an-d,0ms); }
/* Noch nicht erreicht: hell, leicht zurueckgenommen */
.an-js .an-step:not(.an-on){ background:rgba(255,255,255,.55); border-color:rgba(20,34,49,.06); }
.an-js .an-step:not(.an-on) .an-sn{ color:#9aa6b0 !important; }
.an-js .an-step > div:last-child{ transition:opacity .5s ease var(--an-d,0ms); }
.an-js .an-step:not(.an-on) > div:last-child{ opacity:.5; }
.an-js .an-step:not(.an-on) .an-chip, .an-js .an-step:not(.an-on) .an-steplink{ opacity:0; }
.an-js .an-step.an-on .an-chip, .an-js .an-step.an-on .an-steplink{ animation:anChip .55s cubic-bezier(.2,.9,.3,1.15) calc(var(--an-d,0ms) + .2s) both; }
/* Erledigt: zarte Teal-Flaeche */
.an-js .an-step.an-on{ background:#EAF4F2; border-color:rgba(14,122,110,.22); }
.an-js .an-step.an-on .an-chip{ background:#fff; }
/* Aktueller Schritt: ganze Flaeche in Teal */
.an-js .an-step.an-cur{ background:var(--an-teal); border-color:var(--an-teal); box-shadow:0 14px 34px rgba(14,122,110,.24); }
.an-js .an-step.an-cur, .an-js .an-step.an-cur .an-sn, .an-js .an-step.an-cur .m-g2, .an-js .an-step.an-cur .m-teal{ color:#fff !important; }
.an-js .an-step.an-cur > div:last-child > div:nth-child(2){ color:rgba(255,255,255,.88) !important; }
.an-js .an-step.an-cur .an-chip{ background:rgba(255,255,255,.16); color:#fff; }
.an-js .an-step.an-cur .an-chip.free::before{ background:#fff; }
.an-js .an-step.an-cur .an-steplink{ color:#fff; border-bottom-color:rgba(255,255,255,.55); }
.an-js .an-step.an-cur .an-steplink:hover{ border-bottom-color:#fff; }
.an-js .an-step.an-cur .an-steplink:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
/* Grosse Ziffer im aktuellen Kasten (nur Desktop) */
@media (min-width:769px){
  .an-js .an-step::before{ content:attr(data-n); position:absolute; right:18px; top:50%; font:italic 300 120px/1 'Cormorant Garamond',serif; color:rgba(255,255,255,.12); pointer-events:none; opacity:0; transform:translate(0,-42%) scale(.92); transition:opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1); z-index:-1; }
  .an-js .an-step.an-cur::before{ opacity:1; transform:translate(0,-50%); }
  .an-step > div:last-child{ padding-right:56px; }
}
@media (max-width:768px){
  #an-steps{ gap:10px; }
  .an-step{ gap:14px !important; padding:18px 18px; }
  .an-step .an-sn{ min-width:26px !important; font-size:26px !important; }
}
@media (max-width:420px){
  .an-step{ gap:12px !important; padding:16px 16px 16px 14px; }
  .an-step .an-sn{ min-width:20px !important; font-size:24px !important; }
}
.an-chip{ display:inline-flex; align-items:center; gap:7px; margin:9px 8px 0 0; padding:4px 11px; border-radius:999px; background:#EAF4F2; color:var(--an-teal-d); font-size:12.5px; font-weight:600; letter-spacing:.01em; line-height:1.4; }
.an-chip.free::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--an-teal); }
.an-steplink{ display:inline-block; margin-top:10px; color:var(--an-teal); font-weight:600; font-size:14px; text-decoration:none; border-bottom:1px solid rgba(14,122,110,.35); transition:border-color .2s ease; }
.an-steplink:hover{ border-bottom-color:var(--an-teal); }

/* ---- Preis pro Tag ---- */
.an-perday{ font-size:12.5px; font-weight:600; color:var(--an-teal-d); line-height:1.4; min-height:18px; margin:0 0 14px; }
.an-perday-s{ font-size:12.5px; font-weight:600; color:var(--an-teal-d); margin-top:8px; }

/* ---- Kostenrechner ---- */
.an-calc{ background:#fff; border:1px solid rgba(20,34,49,.08); border-radius:12px; box-shadow:0 24px 60px rgba(20,34,49,.08); padding:48px 52px; display:grid; grid-template-columns:1fr 1fr; gap:22px 56px; align-items:start; font-family:'DM Sans',sans-serif; color:var(--an-navy); }
.an-calc *{ box-sizing:border-box; }
.an-calc-head{ grid-column:1 / -1; }
.an-calc-eyebrow{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--an-teal); font-weight:600; margin:0 0 14px; }
.an-calc-title{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:42px; line-height:1.04; margin:0 0 12px; }
.an-calc-title em{ font-style:italic; color:var(--an-teal); }
.an-calc-sub{ font-size:15px; line-height:1.6; color:#46586a; font-weight:300; max-width:620px; margin:0; }
.an-calc-controls{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; }
.an-seg{ position:relative; flex:0 1 auto; min-width:0; display:inline-flex; gap:2px; padding:4px; border-radius:999px; background:#EEF1EF; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.an-seg::-webkit-scrollbar{ display:none; }
.an-seg-ind{ position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:999px; background:var(--an-teal); box-shadow:0 6px 16px rgba(14,122,110,.28); transition:transform .38s var(--an-ease), width .38s var(--an-ease); z-index:0; pointer-events:none; }
.an-seg button{ position:relative; z-index:1; border:0; background:transparent; border-radius:999px; padding:10px 18px; min-height:44px; font:600 14px 'DM Sans',sans-serif; color:#46586a; cursor:pointer; white-space:nowrap; transition:color .25s ease; }
.an-seg button[aria-selected="true"], .an-seg button[aria-pressed="true"]{ color:#fff; }
.an-seg button:focus-visible{ outline:2px solid var(--an-navy); outline-offset:2px; }
.an-seg.sm button{ padding:8px 16px; min-height:40px; font-size:13.5px; }
.an-calc-main{ min-width:0; }
.an-calc-lbl{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#8a98a4; font-weight:600; margin:0 0 6px; }
.an-calc-price{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:72px; line-height:.95; color:var(--an-teal); margin:0; font-variant-numeric:tabular-nums; }
.an-calc-unit{ font-size:15px; color:#46586a; margin:8px 0 0; line-height:1.45; }
.an-calc-pd{ display:inline-flex; align-items:center; gap:8px; margin:16px 0 0; padding:7px 14px; border-radius:999px; background:#EAF4F2; color:var(--an-teal-d); font-size:13.5px; font-weight:600; line-height:1.35; }
.an-calc-pd[hidden]{ display:none; }
.an-calc-sum{ font-size:15px; line-height:1.6; color:#46586a; margin:18px 0 0; max-width:440px; }
.an-cta{ display:inline-block; margin-top:24px; background:var(--an-teal); color:#fff; text-decoration:none; font-size:15px; font-weight:600; padding:16px 30px; border-radius:2px; min-height:48px; transition:transform .2s var(--an-ease), box-shadow .25s ease, background-color .2s ease; }
@media (hover:hover){ .an-cta:hover{ background:var(--an-teal-d); box-shadow:0 12px 28px rgba(14,122,110,.28); transform:translateY(-1px); } }
.an-cta-note{ display:block; margin-top:10px; font-size:13px; color:#6a7a88; }
.an-calc-side{ min-width:0; background:#F7F6F2; border-radius:10px; padding:26px 28px; }
.an-ledger{ list-style:none; margin:0; padding:0; }
.an-ledger li{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:13px 0; border-bottom:1px dashed rgba(20,34,49,.16); font-size:14.5px; line-height:1.4; }
.an-ledger li:last-child{ border-bottom:0; }
.an-ledger .k{ color:#46586a; min-width:0; }
.an-ledger .v{ font-weight:600; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.an-ledger .v.free{ color:var(--an-teal); }
.an-ledger .v.var{ white-space:normal; font-weight:500; font-style:italic; color:#6a7a88; max-width:200px; }
.an-ledger .v.opt{ font-weight:500; color:#6a7a88; white-space:nowrap; }
.an-incl-t{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#8a98a4; font-weight:600; margin:22px 0 10px; }
.an-incl{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:7px; }
.an-incl li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.4; color:#142231; }
.an-incl li b{ color:var(--an-teal); font-weight:700; flex-shrink:0; width:14px; }
.an-incl li.no{ color:#9aa7b0; }
.an-incl li.no b{ color:#b6c0c8; }
.an-calc-extra{ margin:18px 0 0; font-size:13px; line-height:1.55; color:#6a7a88; }
.an-calc [data-swap]{ transition:opacity .22s ease, transform .22s ease; }
.an-calc.an-swapping [data-swap]{ opacity:0; transform:translateY(6px); }

/* ---- Sticky-CTA (nur Mobile) ---- */
#an-sticky{ display:none; }
@media (max-width:768px){
  #an-sticky{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:900; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(244,243,239,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid rgba(20,34,49,.10); transform:translateY(115%); transition:transform .38s var(--an-ease); }
  #an-sticky.on{ transform:none; }
  #an-sticky a{ display:block; text-align:center; background:var(--an-teal); color:#fff; border-radius:2px; padding:14px 16px; min-height:48px; font:600 15px 'DM Sans',sans-serif; text-decoration:none; box-shadow:0 8px 22px rgba(14,122,110,.26); }
  body.an-sticky-on #an-chat-fab{ bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important; }
  body.an-sticky-on{ padding-bottom:0; }

  .an-calc{ grid-template-columns:minmax(0,1fr); padding:28px 18px; gap:18px; border-radius:10px; }
  .an-calc > *{ min-width:0; }
  .an-calc-controls{ min-width:0; }
  .an-calc-title{ font-size:32px; }
  .an-calc-price{ font-size:58px; }
  .an-calc-side{ padding:20px 16px; }
  .an-ledger li{ font-size:15px; }
  .an-ledger .v.var{ max-width:150px; }
  .an-ledger .v{ white-space:normal; max-width:55%; }
  .an-ledger .k{ flex:1 1 40%; }
  .an-seg[data-seg="prog"]{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%); }
  .an-calc-sub, .an-calc-sum{ font-size:16px; }
  .an-chip{ font-size:13px; }
  .an-steplink{ padding:12px 0; margin-top:0; }
  .an-calc-extra{ font-size:13px; }
  .an-cta{ display:block; text-align:center; }
}
@media (max-width:420px){
  .an-seg button{ padding:10px 14px; }
}
@media (prefers-reduced-motion:reduce){
  .an-seg-ind, .an-calc [data-swap], #an-sticky, .an-step, .an-step .an-sn, .an-step > div:last-child{ transition:none !important; }
}

/* Schritt-Anzeige (laufender Zaehler am oberen Rand, nur waehrend der Ablauf-Zeitleiste im Bild ist) */
#an-stepcount{ position:fixed; left:50%; top:calc(var(--an-nb,72px) + 10px); z-index:45; display:flex; align-items:center; gap:12px; max-width:calc(100vw - 32px); padding:8px 16px; border-radius:999px; background:rgba(6,16,28,.9); color:#EDF4FB; box-shadow:0 10px 30px rgba(6,16,28,.28); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font:500 13px/1.2 'DM Sans',sans-serif; opacity:0; transform:translate(-50%,-14px); pointer-events:none; transition:opacity .35s ease, transform .5s cubic-bezier(.2,.9,.3,1.1); white-space:nowrap; }
#an-stepcount.on{ opacity:1; transform:translate(-50%,0); }
#an-stepcount .sc-n{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }
#an-stepcount .sc-n b{ display:inline-block; min-width:.7em; text-align:center; color:#2fd8c3; font-weight:700; }
#an-stepcount .sc-n b.bump{ animation:anBump .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes anBump{ 0%{ transform:translateY(60%) scale(.6); opacity:0; } 100%{ transform:none; opacity:1; } }
#an-stepcount .sc-t{ color:rgba(237,244,251,.72); overflow:hidden; text-overflow:ellipsis; max-width:34vw; }
#an-stepcount .sc-d{ display:flex; gap:5px; align-items:center; }
#an-stepcount .sc-d i{ display:block; width:14px; height:4px; border-radius:2px; background:rgba(237,244,251,.28); transition:width .45s cubic-bezier(.2,.9,.3,1.2), background-color .3s ease; }
#an-stepcount .sc-d i.d{ background:#2fd8c3; }
#an-stepcount .sc-d i.c{ width:22px; background:#2fd8c3; }
@media (max-width:520px){ #an-stepcount{ padding:7px 13px; gap:9px; font-size:12.5px; } #an-stepcount .sc-t{ max-width:30vw; } }
@media (prefers-reduced-motion:reduce){ #an-stepcount, #an-stepcount .sc-d i{ transition:none !important; } #an-stepcount .sc-n b.bump{ animation:none; } }

/* ===== Runde 41: Mobile-Feinschliff, Hero, Marquee, Fokus-Karussell, Sequenzen ===== */
.an-tk{ display:contents; } .an-trk{ display:contents; } .an-tk2{ display:none; }
@keyframes anMarq{ to{ transform:translateX(-50%); } }
@keyframes anSlide{ 0%{ opacity:0; transform:translateX(-18px); } 100%{ opacity:1; transform:none; } }
@keyframes anCycle{ 0%,22%{ transform:translateY(-3px) scale(1.05); box-shadow:0 10px 22px rgba(14,122,110,.3); } 34%,100%{ transform:none; box-shadow:0 0 0 rgba(14,122,110,0); } }
@keyframes anGrow{ 0%{ transform:scale(.8); opacity:.2; } 100%{ transform:none; opacity:1; } }
@keyframes anHeroIn{ 0%{ opacity:0; transform:translateY(22px) scale(.97); } 100%{ opacity:1; transform:none; } }
.an-js .an-seq > *{ opacity:0; }
.an-js .an-seq.an-in > *{ animation:anSlide .65s cubic-bezier(.2,.85,.3,1) calc(var(--i,0) * 150ms) both; }
.an-js .an-seq.an-in > .an-kl-step:nth-child(1){ --kd:1.6s; animation:anSlide .65s cubic-bezier(.2,.85,.3,1) 0s both, anCycle 5.2s ease-in-out 1.6s infinite; }
.an-js .an-seq.an-in > .an-kl-step:nth-child(3){ --kd:2.9s; animation:anSlide .65s cubic-bezier(.2,.85,.3,1) .3s both, anCycle 5.2s ease-in-out 2.9s infinite; }
.an-js .an-seq.an-in > .an-kl-step:nth-child(5){ --kd:4.2s; animation:anSlide .65s cubic-bezier(.2,.85,.3,1) .6s both, anCycle 5.2s ease-in-out 4.2s infinite; }
.an-js .an-seq.an-in > .an-kl-step:nth-child(7){ --kd:5.5s; animation:anSlide .65s cubic-bezier(.2,.85,.3,1) .9s both, anCycle 5.2s ease-in-out 5.5s infinite; }
.an-js .an-rv:not(.an-in) h2 em, .an-js .an-rv:not(.an-in) h3 em{ color:#a9bdb9 !important; }
.an-js h2 em, .an-js h3 em{ transition:color 1.2s ease .3s; }
.an-calc-price.an-pop{ transform-origin:left bottom; animation:anGrow 1.1s cubic-bezier(.2,.9,.3,1.1) both; }
html{ --hs:0; }
#an-h1{ translate:0 calc(var(--hs) * -26px); scale:calc(1 - var(--hs) * .05); transform-origin:left top; will-change:translate; }
.an-more-btn{ display:none; }
.an-faq-more{ display:block; width:100%; margin-top:22px; padding:16px 18px; border:1.5px solid var(--an-teal); background:transparent; color:var(--an-teal); font:600 15px 'DM Sans',sans-serif; border-radius:2px; cursor:pointer; transition:background-color .2s ease, color .2s ease; }
.an-faq-more:hover{ background:var(--an-teal); color:#fff; }
.an-faq-col:not(.an-faq-all) > div:nth-child(n+9):not(.an-faq-moretw){ display:none; }
.an-faq-col.an-faq-all > div:nth-child(n+9){ animation:anUp .55s var(--an-ease) both; animation-delay:calc((var(--j,0)) * 45ms); }
.an-faq-col.an-faq-all .an-faq-moretw{ display:none; }
.an-final-sec:hover{ color:var(--an-teal) !important; border-bottom-color:var(--an-teal) !important; }

@media (max-width:768px){
  /* Trust-Leiste als Laufband */
  html #an-trust{ display:block !important; overflow:hidden; padding:15px 0 !important; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }
  html #an-trust .an-trk{ display:flex; width:max-content; animation:anMarq 36s linear infinite; }
  html #an-trust .an-trk:active{ animation-play-state:paused; }
  html #an-trust .an-tk{ display:flex !important; align-items:center; flex:none; }
  html #an-trust .an-tk2{ display:flex !important; }
  html #an-trust .an-tk > span{ padding:0 !important; white-space:nowrap; font-size:13px !important; font-weight:500; display:inline-flex !important; align-items:center; color:#46586a !important; }
  html #an-trust .an-tk > span:nth-child(even){ display:none !important; }
  html #an-trust .an-tk > span:nth-child(odd)::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--an-teal); opacity:.5; margin:0 22px; }
  /* Hero: Button im ersten Bildschirm, Visual, Text danach */
  html #an-herogrid{ display:flex !important; flex-direction:column; }
  html #an-heroleft{ display:contents !important; }
  html #an-heroleft > *{ margin-left:20px !important; margin-right:20px !important; }
  html #an-heroleft > div:first-child{ order:1; margin-top:34px !important; margin-bottom:16px !important; }
  html #an-h1{ order:2; font-size:46px !important; margin-bottom:16px !important; }
  html #an-hero-free{ order:3; margin-bottom:20px !important; }
  html #an-hero-ctas{ order:4; margin-bottom:26px !important; }
  /* Runde 44: Hero-Bild/Video auf Mobil komplett raus (Wunsch CEO) */
  html #an-heroright{ display:none !important; }
  html #an-hero-sub{ order:6; margin-bottom:8px !important; }
  html #an-hero-sub.an-clamp:not(.an-open){ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden; }
  html #an-hero-more{ order:7; }
  html #an-hero-sub2{ order:8; }
  html #an-hero-sub2.an-clamp:not(.an-open){ display:none !important; }
  html #an-hero-steps{ order:9; margin-bottom:40px !important; }
  .an-js #an-heroright{ animation:anHeroIn .9s cubic-bezier(.2,.85,.3,1) .35s both; }
  .an-more-btn{ display:inline-block; align-self:flex-start; margin:0 20px 18px; padding:8px 0; border:0; border-bottom:1px solid rgba(14,122,110,.45); background:transparent; color:var(--an-teal); font:600 14px 'DM Sans',sans-serif; cursor:pointer; }
  #an-assess-band .an-more-btn{ margin:0 0 22px; color:#4FD8C4; border-bottom-color:rgba(79,216,196,.5); }
  #an-assess-band p.an-clamp:not(.an-open){ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
  /* Fokus-Karussell: mittige Karte gross */
  #an-sym-grid > div, #an-prog-grid > .an-pc{ scale:calc(.84 + .16 * var(--f,1)); translate:0 calc((1 - var(--f,1)) * 14px); transition:scale .15s linear, translate .15s linear, opacity .15s linear; }
  #an-sym-grid.an-in > div, #an-prog-grid.an-in > .an-pc{ opacity:calc(.42 + .58 * var(--f,1)); }
  .an-faq-more{ margin-top:18px; }
}
@media (prefers-reduced-motion:reduce){
  html #an-trust .an-trk{ animation:none !important; width:auto !important; flex-wrap:wrap; justify-content:center; padding:0 18px; }
  html #an-trust .an-tk2{ display:none !important; }
  #an-h1{ translate:none; scale:none; }
  #an-sym-grid > div, #an-prog-grid > .an-pc{ scale:none; translate:none; }
}

/* Befund-Balken fuellen sich, Ueberschriften wachsen ein */
.an-js .an-bar{ transform:scaleX(0); transform-origin:left center; }
.an-js .an-bar.an-in{ transform:none; transition:transform 1.4s cubic-bezier(.2,.8,.2,1) .25s; }
.an-js .an-rv:not(.an-in) h2{ scale:.93; transform-origin:left bottom; }
.an-js #an-final.an-rv:not(.an-in) h2, .an-js #finder .an-rv:not(.an-in) h2, .an-js #finder.an-rv:not(.an-in) h2{ transform-origin:center bottom; }
.an-js h2{ transition:scale 1s cubic-bezier(.2,.85,.3,1); }
#an-final p{ line-height:1.6; }
@media (max-width:768px){
  #an-final{ padding:84px 20px !important; }
  #an-final a.m-tapb{ display:block !important; max-width:100%; margin:0 auto; padding:18px 12px !important; font-size:14.5px !important; box-sizing:border-box; }
  #an-final p{ margin-bottom:28px !important; }
}
@media (prefers-reduced-motion:reduce){ .an-bar{ transform:none !important; } }

/* Sticky-Navigation: Anker nicht unter der Leiste verstecken */
html{ scroll-padding-top:84px; }
@media (max-width:768px){
  html{ scroll-padding-top:116px; }
  html #pg-tabbar{ position:sticky; top:var(--an-nb0,58px); z-index:40; flex-wrap:nowrap !important; overflow-x:auto; white-space:nowrap; padding:10px 20px !important; margin:0 !important; max-width:none !important; background:rgba(244,243,239,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid rgba(20,34,49,.08); scrollbar-width:none; }
  html #pg-tabbar::-webkit-scrollbar{ display:none; }
  html #pg-tabbar .prog-tab{ flex:none; }
}

/* Kreislauf: Lauflicht durch die vier Schritte */
@keyframes anLightB{ 0%,20%{ background-color:#0E7A6E; } 30%,100%{ background-color:var(--klb,transparent); } }
@keyframes anLightT{ 0%,20%{ color:#fff; } 30%,100%{ color:#142231; } }
@keyframes anLightN{ 0%,20%{ background-color:#fff; color:#0E7A6E; } 30%,100%{ background-color:#0E7A6E; color:#fff; } }
.an-kl-step{ --klb:transparent; }
@media (min-width:769px){ .an-js .an-kl-step{ padding:7px 14px; border-radius:999px; } }
@media (max-width:768px){ .an-kl-step{ --klb:#fff; } }
.an-js .an-seq.an-in > .an-kl-step:nth-child(1){ animation:anSlide .65s cubic-bezier(.2,.85,.3,1) 0s both, anCycle 5.2s ease-in-out 1.6s infinite, anLightB 5.2s ease-in-out 1.6s infinite; }
.an-js .an-seq.an-in > .an-kl-step:nth-child(3){ animation:anSlide .65s cubic-bezier(.2,.85,.3,1) .3s both, anCycle 5.2s ease-in-out 2.9s infinite, anLightB 5.2s ease-in-out 2.9s infinite; }
.an-js .an-seq.an-in > .an-kl-step:nth-child(5){ animation:anSlide .65s cubic-bezier(.2,.85,.3,1) .6s both, anCycle 5.2s ease-in-out 4.2s infinite, anLightB 5.2s ease-in-out 4.2s infinite; }
.an-js .an-seq.an-in > .an-kl-step:nth-child(7){ animation:anSlide .65s cubic-bezier(.2,.85,.3,1) .9s both, anCycle 5.2s ease-in-out 5.5s infinite, anLightB 5.2s ease-in-out 5.5s infinite; }
.an-js .an-seq.an-in .an-kl-text{ animation:anLightT 5.2s ease-in-out var(--kd,0s) infinite; }
.an-js .an-seq.an-in .an-kl-num{ animation:anLightN 5.2s ease-in-out var(--kd,0s) infinite; }
@media (min-width:769px){
  html #pg-tabbar{ position:sticky; top:var(--an-nb0,70px); z-index:40; padding-top:12px; padding-bottom:12px; background:rgba(244,243,239,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
}
/* Diagnose-Badge (?uxdebug) */
#an-uxdebug{ position:fixed; left:8px; top:auto; bottom:8px; z-index:99999; padding:6px 10px; border-radius:6px; background:#06101C; color:#4FD8C4; font:600 11px/1.3 monospace; pointer-events:none; max-width:70vw; }

/* ---------- Runde 43: Akkordeons auf der Programme-Seite (native <details>, funktioniert auch ohne JS) ---------- */
.an-accs{ display:flex; flex-direction:column; gap:10px; max-width:1000px; margin:0 auto; }
.an-acc{ background:#fff; border:1px solid rgba(20,34,49,.09); border-radius:8px; overflow:hidden; transition:border-color .25s, box-shadow .25s; }
.an-acc[open]{ border-color:rgba(14,122,110,.35); box-shadow:0 8px 24px rgba(14,122,110,.07); }
.an-acc-s{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:14px 22px; font-family:'Cormorant Garamond',serif; font-size:23px; font-weight:600; line-height:1.2; color:#142231; -webkit-tap-highlight-color:transparent; }
.an-acc-s::-webkit-details-marker{ display:none; }
.an-acc-s::marker{ content:''; }
.an-acc-s::after{ content:''; flex-shrink:0; width:9px; height:9px; margin:-4px 4px 0 0; border-right:2px solid #0E7A6E; border-bottom:2px solid #0E7A6E; transform:rotate(45deg); transition:transform .28s var(--an-ease, ease), margin .28s; }
.an-acc[open] > .an-acc-s::after{ transform:rotate(-135deg); margin-top:5px; }
.an-acc-s:hover{ background:rgba(14,122,110,.04); }
.an-acc-s:focus-visible{ outline:2px solid #0E7A6E; outline-offset:-2px; }
.an-acc-b{ padding:2px 22px 24px; }
.an-js .an-acc[open] > .an-acc-b{ animation:anAccIn .38s var(--an-ease, ease) backwards; }
@keyframes anAccIn{ from{ opacity:0; translate:0 -8px; } to{ opacity:1; translate:0 0; } }
.an-acc-b .prog-pitch{ margin:0 !important; }
@media (max-width:768px){
  .an-acc-s{ font-size:21px; padding:12px 18px; min-height:56px; }
  .an-acc-b{ padding:2px 18px 20px; }
}
@media (prefers-reduced-motion: reduce){ .an-acc-s::after{ transition:none; } .an-js .an-acc[open] > .an-acc-b{ animation:none; } }

/* ---------- Runde 45: Preisansicht (Rechner) je Programm auf der Programme-Seite ---------- */
.prog-section .an-calc{ max-width:1000px; margin:0 auto 22px; }
.prog-section .an-calc ~ p.m13{ max-width:1000px !important; }
.an-calc.an-has-tx .an-calc-sum{ white-space:pre-line; max-width:none; font-size:15.5px; line-height:1.65; }
@media (max-width:768px){ .an-calc.an-has-tx .an-calc-sum{ font-size:16px; } }

/* ---------- Runde 45: Programme-Seite Mobil als Karussell ---------- */
.an-pg-nav{ display:none; }
@keyframes anPgR{ from{ opacity:0; translate:46px 0; } to{ opacity:1; translate:0 0; } }
@keyframes anPgL{ from{ opacity:0; translate:-46px 0; } to{ opacity:1; translate:0 0; } }
@media (max-width:768px){
  .an-pager .prog-section.an-pg-off{ display:none !important; }
  .an-pager .prog-section + div[style*="height:1px"]{ display:none; }
  .an-pager .prog-section.an-pg-r{ animation:anPgR .4s cubic-bezier(.2,.85,.3,1) backwards; }
  .an-pager .prog-section.an-pg-l{ animation:anPgL .4s cubic-bezier(.2,.85,.3,1) backwards; }
  .an-pager .an-pg-nav{ display:flex; gap:10px; margin:30px 0 0; }
  .an-pg-b{ flex:1 1 0; min-width:0; min-height:52px; padding:12px 14px; background:#fff; border:1.5px solid #0E7A6E; border-radius:2px; color:#0E7A6E; font:600 14px/1.25 'DM Sans',sans-serif; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .an-pg-b.prev{ text-align:left; } .an-pg-b.next{ text-align:right; }
  .an-pg-b:active{ transform:scale(.98); }
}
@media (prefers-reduced-motion: reduce){ .an-pager .prog-section.an-pg-r, .an-pager .prog-section.an-pg-l{ animation:none; } }