/* ════════════════════════════════════════════════════════════
   ARTICLE STYLES — Shared by all blog articles
   ════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root,
[data-theme="light"]{
  --bg:        #f6f4ee;
  --bg-soft:   #fbfaf5;
  --bg-elev:   #ffffff;
  --ink:       #0d0d12;
  --ink-2:     rgba(13,13,18,.82);
  --m:         rgba(13,13,18,.50);
  --m-2:       rgba(13,13,18,.30);
  --line:      rgba(13,13,18,.08);
  --line-2:    rgba(13,13,18,.14);
  --card:      rgba(13,13,18,.03);
  --card-2:    rgba(255,255,255,.78);
  --blue:      rgba(60,140,210,.22);
  --violet:    rgba(125,95,205,.22);
  --grad-text: linear-gradient(135deg,#1a2540 0%,#4ab8d4 50%,#1a2540 100%);
  --grad-pill: linear-gradient(135deg,#0d0d12 0%, #1a1a22 100%);
  --sp:        clamp(72px,9vw,120px);
  --side:      6vw;
  --font:      -apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',sans-serif;
  --serif:     'Iowan Old Style','Apple Garamond','Hoefler Text','Georgia',serif;
  --ease:      cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"]{
  --bg:#07070a;--bg-soft:#0c0c12;--bg-elev:#11111a;
  --ink:#fff;--ink-2:rgba(255,255,255,.82);
  --m:rgba(255,255,255,.46);--m-2:rgba(255,255,255,.28);
  --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.04);--card-2:rgba(255,255,255,.06);
  --blue:rgba(100,195,255,.32);--violet:rgba(160,130,235,.30);
  --grad-text:linear-gradient(135deg,#4ab8d4 0%,#7fd4e6 50%,#4ab8d4 100%);
  --grad-pill:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.92) 100%);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01" on, "cv01" on;
  transition:background .55s var(--ease), color .55s var(--ease);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* NAV */
nav.lfa-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--side);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--line);
}
.n-logo{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m);display:flex;align-items:center;gap:10px}
.n-logo::before{display:none}
@keyframes logoBreath{0%,100%{opacity:.6;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
.n-right{display:flex;align-items:center;gap:14px}
.n-toggle,.n-burger{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s, transform .2s}
.n-toggle:hover,.n-burger:hover{background:var(--card-2);transform:translateY(-1px)}
.n-toggle svg,.n-burger svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .ic-sun{display:inline}
[data-theme="dark"] .ic-moon{display:none}
[data-theme="light"] .ic-sun{display:none}
[data-theme="light"] .ic-moon{display:inline}

/* ARTICLE HEADER */
.ah{
  padding:140px var(--side) 60px;
  position:relative;overflow:hidden;
}
.ah::before{
  content:'';position:absolute;top:-120px;left:-160px;
  width:680px;height:680px;border-radius:50%;
  background:radial-gradient(circle, var(--violet) 0%, transparent 60%);
  filter:blur(50px);pointer-events:none;animation:gDrift 28s ease-in-out infinite;
}
.ah::after{
  content:'';position:absolute;top:-100px;right:-180px;
  width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle, var(--blue) 0%, transparent 60%);
  filter:blur(50px);pointer-events:none;animation:gDrift 32s ease-in-out infinite -10s;
}
@keyframes gDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(28px,-18px) scale(1.06)}}
.ah-in{max-width:820px;margin:0 auto;position:relative;z-index:1}
.ah-back{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;color:var(--m);margin-bottom:32px;transition:color .25s, transform .2s}
.ah-back:hover{color:var(--ink);transform:translateX(-3px)}
.ah-meta{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--m)}
.ah-dot{width:3px;height:3px;border-radius:50%;background:var(--m-2)}
.ah-h{font-size:clamp(2.2rem,5.6vw,5rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--ink);margin-bottom:24px}
.ah-h em{font-style:normal;background:var(--grad-text);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:gradShift 14s ease-in-out infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.ah-lead{font-size:1.2rem;color:var(--ink-2);line-height:1.7;letter-spacing:-.01em;max-width:720px}

/* ARTICLE BODY */
.body{padding:20px var(--side) var(--sp);position:relative}
.body-in{max-width:720px;margin:0 auto;font-size:1.05rem;line-height:1.85;color:var(--ink-2)}
.body-in p{margin:0 0 26px}
.body-in p strong{color:var(--ink);font-weight:600}
.body-in p em{color:var(--ink);font-style:italic}
.body-in h2{
  font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.2;
  color:var(--ink);
  margin:64px 0 24px;
}
.body-in h3{
  font-size:clamp(1.2rem,1.8vw,1.4rem);
  font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:40px 0 16px;
}
.body-in ul, .body-in ol{margin:0 0 26px;padding-left:24px}
.body-in li{margin-bottom:10px}
.body-in blockquote{
  margin:40px 0;
  padding:24px 28px;
  border-left:3px solid;
  border-image:linear-gradient(to bottom, var(--blue), var(--violet)) 1;
  background:var(--card);
  font-family:var(--serif);
  font-size:1.2rem;font-style:italic;line-height:1.55;letter-spacing:-.01em;
  color:var(--ink);
  border-radius:0 14px 14px 0;
}
.body-in figure{margin:40px 0}
.body-in figure img{border-radius:14px;width:100%}
.body-in figcaption{font-size:.78rem;color:var(--m);margin-top:10px;text-align:center}
.body-in hr{border:none;height:1px;background:var(--line);margin:48px 0}
.body-in a{color:var(--ink);border-bottom:1px solid var(--m-2);transition:border-color .25s}
.body-in a:hover{border-color:var(--ink)}

.callout{
  margin:40px 0;
  padding:28px 32px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  position:relative;overflow:hidden;
}
.callout::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle, var(--violet) 0%, transparent 60%);
  filter:blur(20px);pointer-events:none;
}
.callout-lbl{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m);margin-bottom:10px;position:relative;z-index:1}
.callout p{margin:0;color:var(--ink-2);line-height:1.75;position:relative;z-index:1}

/* App Video Frame im Artikel — Phone-Mockup mit Laser-Glow */
.article-video{margin:48px 0}
.article-video-frame{display:flex;align-items:center;justify-content:center;gap:0px}
.app-frame{position:relative;width:min(320px,78vw);aspect-ratio:9/17;z-index:2}
.app-frame::before{
  content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:105%;height:105%;
  border-radius:38px;
  border:1.5px solid rgba(255,255,255,.75);
  box-shadow:
    0 0 8px 2px rgba(255,255,255,.55),
    0 0 24px 6px rgba(255,255,255,.25),
    0 0 60px 14px rgba(255,255,255,.10),
    inset 0 0 10px 2px rgba(255,255,255,.12);
  pointer-events:none;z-index:3;
  animation:adaptLaser 3.5s ease-in-out infinite;
}
[data-theme="light"] .app-frame::before{
  border-color:rgba(13,13,18,.18);
  box-shadow:
    0 0 8px 2px rgba(13,13,18,.10),
    0 0 24px 6px rgba(100,195,255,.18),
    0 0 60px 14px rgba(100,195,255,.10),
    inset 0 0 10px 2px rgba(13,13,18,.05);
}
@keyframes adaptLaser{
  0%,100%{box-shadow:0 0 8px 2px rgba(255,255,255,.55),0 0 24px 6px rgba(255,255,255,.25),0 0 60px 14px rgba(255,255,255,.10),inset 0 0 10px 2px rgba(255,255,255,.12);border-color:rgba(255,255,255,.75)}
  50%{box-shadow:0 0 12px 4px rgba(255,255,255,.85),0 0 36px 10px rgba(255,255,255,.40),0 0 90px 24px rgba(255,255,255,.18),inset 0 0 16px 4px rgba(255,255,255,.18);border-color:rgba(255,255,255,.98)}
}
.app-frame-inner{
  position:relative;width:100%;height:100%;
  border-radius:32px;overflow:hidden;
  background:#000;
  box-shadow:0 32px 80px rgba(100,195,255,.24),0 6px 18px rgba(0,0,0,.4);
}
.app-slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  opacity:0;transition:opacity .55s ease;
}
.app-slide.active{opacity:1}
.ac-arrow{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  background:var(--card);
  border:1px solid var(--line-2);
  color:var(--ink);font-size:1.4rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:inherit;
  transition:all .22s ease;
}
.ac-arrow:hover{background:var(--card-2);transform:scale(1.06)}
.ac-dots{display:flex;justify-content:center;gap:8px;margin-top:36px}
.ac-dot{width:7px;height:7px;border-radius:50%;background:var(--line-2);cursor:pointer;transition:background .25s, transform .25s}
.ac-dot.active{background:var(--ink);transform:scale(1.15)}
@media(max-width:680px){
  .article-video-frame{margin-left:-10px;gap:8px}
  .app-frame{width:min(260px,66vw)}
  .ac-arrow{width:38px;height:38px;font-size:1.3rem}
}

/* SLIDESHOW — fade loop, circle frame */
.lfa-slideshow{
  position:relative;
  width:min(440px,80%);
  aspect-ratio:1/1;
  margin:56px auto;
  border-radius:50%;overflow:hidden;
  background:var(--bg-elev);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.lfa-slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  opacity:0;
  transition:opacity 5s cubic-bezier(.45,0,.55,1);
  pointer-events:none;
}
.lfa-slide.active{opacity:1}
@media(max-width:680px){.lfa-slideshow{width:84%;margin:40px auto}}

/* RELATED */
.rel{
  background:var(--bg-soft);
  padding:var(--sp) var(--side);
  border-top:1px solid var(--line);
}
.rel-in{max-width:1100px;margin:0 auto}
.rel-h{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:700;letter-spacing:-.025em;color:var(--ink);margin-bottom:28px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:880px){.rel-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.rel-grid{grid-template-columns:1fr}}
.rel-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:22px 24px 24px;
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.rel-card:hover{transform:translateY(-3px);background:var(--card-2);border-color:var(--line-2)}
.rel-cat{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m);margin-bottom:10px;display:block}
.rel-t{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.3;margin-bottom:8px}
.rel-p{font-size:.78rem;color:var(--m);line-height:1.6}

/* WP — Wochenplan / Anker der Woche (auch in Artikeln) */
.wp{background:var(--bg-soft);padding:var(--sp) var(--side);position:relative;overflow:hidden;border-top:1px solid var(--line)}
.wp::before{content:'';position:absolute;top:-180px;right:-140px;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle, var(--blue) 0%, transparent 62%);filter:blur(40px);pointer-events:none;animation:heroGlow2 24s ease-in-out infinite}
[data-theme="dark"] .wp::after{content:'';position:absolute;left:0;right:0;bottom:0;height:220px;background:linear-gradient(to bottom, transparent 0%, #07070a 100%);pointer-events:none;z-index:0}
@keyframes heroGlow2{0%,100%{transform:translateY(0px) scale(1)}50%{transform:translateY(-24px) scale(1.08)}}
.wp-in{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.wp-hd{margin-bottom:64px;max-width:780px}
.wp-lbl{display:block;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--m);margin-bottom:18px}
.wp-h{font-size:clamp(2rem,4.4vw,4.8rem);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--ink);margin-bottom:20px}
.wp-h em{font-style:normal;color:var(--m)}
.wp-sub{font-size:.95rem;color:var(--m);line-height:1.8;max-width:560px}
.wp-anchor{margin-top:48px;background:var(--bg-elev);border:1px solid var(--line-2);border-radius:24px;padding:36px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;position:relative;overflow:hidden}
@media(max-width:760px){.wp-anchor{grid-template-columns:1fr;text-align:left}}
.wp-anchor-body{position:relative;z-index:1}
.wp-anchor-lbl{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--m);margin-bottom:10px;display:block}
.wp-anchor-h{font-size:clamp(1.25rem,2.2vw,1.85rem);font-weight:700;letter-spacing:-.025em;color:var(--ink);margin-bottom:8px;line-height:1.25}
.wp-anchor-s{font-size:.88rem;color:var(--m);line-height:1.7}
.wp-anchor-cta{display:inline-flex;align-items:center;gap:10px;background:var(--grad-pill);color:var(--bg);border:none;cursor:pointer;padding:15px 26px;border-radius:100px;font-size:.88rem;font-weight:700;font-family:var(--font);transition:transform .25s, box-shadow .25s;position:relative;z-index:1;text-decoration:none}
[data-theme="light"] .wp-anchor-cta{color:#fff}
.wp-anchor-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px color-mix(in oklab, var(--ink) 28%, transparent)}
.wp-anchor-live{background:rgba(255,255,255,.84);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(100,180,235,.30), 0 24px 60px rgba(100,180,235,.22)}
[data-theme="dark"] .wp-anchor-live{background:rgba(255,255,255,.05);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(120,200,245,.34), 0 24px 60px rgba(120,200,245,.26)}
[data-theme="dark"] .wp-anchor-live .wp-anchor-lbl{color:rgba(255,255,255,.55)}
[data-theme="dark"] .wp-anchor-live .wp-anchor-h{color:#fff}
[data-theme="dark"] .wp-anchor-live .wp-anchor-s{color:rgba(255,255,255,.72)}
.wp-anchor-live::before{content:'';position:absolute;width:320px;height:320px;top:-120px;left:-100px;background:radial-gradient(circle, rgba(130,190,240,.55) 0%, transparent 66%);filter:blur(32px);pointer-events:none;animation:dimGlow 9s ease-in-out infinite}
.wp-anchor-live::after{content:'';position:absolute;width:280px;height:280px;bottom:-110px;right:-90px;border-radius:50%;background:radial-gradient(circle, rgba(160,130,235,.50) 0%, transparent 66%);filter:blur(30px);pointer-events:none;animation:dimGlow 11s ease-in-out infinite -3s}
@keyframes dimGlow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-12px,8px) scale(1.08)}}
.wp-anchor-live .wp-anchor-lbl{color:rgba(13,13,18,.55)}
.wp-anchor-live .wp-anchor-h{color:#0d0d12}
.wp-anchor-live .wp-anchor-s{color:rgba(13,13,18,.62)}
.wp-anchor-flag{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(13,13,18,.78);padding:7px 14px;border-radius:100px;background:rgba(160,130,235,.10);border:1px solid rgba(160,130,235,.28);box-shadow:0 0 14px rgba(160,130,235,.18);position:relative;z-index:1}
[data-theme="dark"] .wp-anchor-flag{color:rgba(255,255,255,.85);background:rgba(160,130,235,.18);border:1px solid rgba(160,130,235,.36);box-shadow:0 0 18px rgba(160,130,235,.28)}
.wp-anchor-flag .wp-pulse{width:6px;height:6px;border-radius:50%;background:#34c759;animation:dotPulse 2s ease-in-out infinite;box-shadow:0 0 8px #34c759}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* FOOTER */
footer.lfa-foot{background:var(--bg);border-top:1px solid var(--line);padding:60px var(--side) 80px;display:flex;flex-direction:column;align-items:center;text-align:center}
.f-logo{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m);display:flex;align-items:center;gap:8px;margin-bottom:32px;text-decoration:none}
.f-logo-img{height:22px;width:auto;opacity:.65;transition:opacity .25s}
.f-logo-img.f-logo-img-light{display:none}
.f-logo-img.f-logo-img-dark{display:inline-block}
[data-theme="dark"] .f-logo-img.f-logo-img-light{display:inline-block}
[data-theme="dark"] .f-logo-img.f-logo-img-dark{display:none}
.f-logo:hover .f-logo-img{opacity:.95}
.f-nav{display:flex;gap:32px;margin-bottom:22px;flex-wrap:wrap;justify-content:center}
.f-nav a{font-size:.86rem;font-weight:500;color:var(--ink-2)}
.f-nav a:hover{color:var(--ink)}
.f-legal{display:flex;gap:20px;margin-bottom:22px;flex-wrap:wrap;justify-content:center}
.f-legal a{font-size:.66rem;color:var(--m-2)}
.f-copy{font-size:.66rem;color:var(--m-2)}

::selection{background:color-mix(in oklab, var(--violet) 80%, transparent);color:var(--ink)}