/* ============================================================
   H&F Konstrukta GmbH – Grundstile
   Schriften werden lokal aus /fonts geladen (keine Verbindung
   zu Google-Servern, DSGVO-freundlich). Fehlen die Dateien,
   greifen automatisch die Ersatzschriften dahinter.
   ============================================================ */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-variable.woff') format('woff');font-weight:400 800;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/ibm-plex-sans-400.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/ibm-plex-sans-500.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/ibm-plex-sans-600.woff') format('woff');font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-500.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#E8E6E1;
  --fg:#1B1C1E;
  --paper:#F2F0EB;
  --muted:#45464A;
  --accent:#F5A90F;
  --rust:#A63B10;
  --font-display:'Archivo','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body)}
a{color:var(--fg)}a:hover{color:var(--rust)}
img{max-width:100%}

ul.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
ul.ticks li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:var(--muted)}
ul.ticks li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;background:var(--accent)}

details{border-top:2px solid var(--fg);padding:20px 0}
details:last-child{border-bottom:2px solid var(--fg)}
summary{cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:21px;list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:28px;color:var(--rust)}
details[open] summary::after{content:"–"}

/* Unsichtbares Spam-Fangfeld im Kontaktformular */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Sichtbarer Fokus für Tastaturbedienung */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

@media (max-width:820px){
  .nav-links{display:none!important}
  .hero-grid{grid-template-columns:1fr!important}
  .split{grid-template-columns:minmax(0,1fr)!important}
  .sivv{padding:28px 24px!important;gap:24px!important}
  .sivv-row{flex-wrap:wrap;gap:18px!important}
  .sivv-row h3{font-size:26px!important}
  h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .hero-title{font-size:46px!important}
  .sec-title{font-size:36px!important}
  .hero-art{height:380px!important}
}
@media (max-width:440px){
  .site-logo{height:46px!important}
  .header-cta{padding:11px 14px!important;font-size:14px!important}
}

/* ---------- Unterseiten (Impressum, Datenschutz, Danke) ---------- */
.sub-header{background:#fff;border-bottom:4px solid var(--accent)}
.sub-header .wrap{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.sub-header img{height:64px;width:auto;display:block}
.sub-header .back{font-weight:600;font-size:15px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.legal{max-width:820px;margin:0 auto;padding:72px 24px 96px}
.legal .kicker{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;color:var(--rust)}
.legal h1{margin:12px 0 32px;font-family:var(--font-display);font-stretch:80%;font-weight:800;font-size:52px;line-height:1.02}
.legal h2{margin:40px 0 10px;font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1.2}
.legal h3{margin:24px 0 6px;font-size:17px;font-weight:600}
.legal p,.legal li{font-size:16px;line-height:1.65;color:var(--muted)}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:22px}
.legal strong{color:var(--fg)}
.legal .box{background:var(--paper);padding:24px 28px;margin:0 0 12px}
.legal .btn{display:inline-flex;align-items:center;min-height:48px;padding:14px 24px;background:var(--fg);color:var(--paper);font-weight:600;text-decoration:none;margin-top:16px}
.legal .btn:hover{color:var(--accent)}
.sub-footer{background:#121314;color:#A9A69F;font-size:14px}
.sub-footer .wrap{max-width:1240px;margin:0 auto;padding:28px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.sub-footer a{color:#A9A69F}
.sub-footer nav{display:flex;gap:24px}
@media (max-width:820px){.legal h1{font-size:36px}.legal{padding:48px 20px 72px}}
@media (max-width:440px){.sub-header img{height:46px}}

/* ---------- Fachwissen ---------- */
.fw-legend{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.fw-legend li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--muted)}
.fw-legend li strong{color:var(--fg)}
.fw-legend .n{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--fg);font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;margin-top:-1px}
.fw-body{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.fw-body p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.fw-body strong{color:var(--fg)}
.fw-body ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.fw-body li{font-size:16px;line-height:1.6;color:var(--muted)}
.fw-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fw-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.fw-table th{text-align:left;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;font-weight:500;color:var(--muted);border-bottom:2px solid var(--fg);padding:8px 12px 8px 0}
.fw-table td{border-bottom:1px solid #C9C6BF;padding:10px 12px 10px 0;vertical-align:top;line-height:1.5;color:var(--muted)}
.fw-table td:first-child{color:var(--fg);font-weight:600;white-space:nowrap}

/* ---------- Mitlaufender Kopfbereich ---------- */
.site-header,.sub-header{position:sticky;top:0;z-index:50}
html{scroll-padding-top:104px}
@media (max-width:440px){html{scroll-padding-top:84px}}

/* ---------- Richtlinien ---------- */
.rl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.rl-card{border:1.5px solid #3A3B3F;padding:32px;display:flex;flex-direction:column;gap:14px}
.rl-wide{grid-column:1/-1}
.rl-accent{border-color:var(--accent)}
.rl-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--accent)}
.rl-card h3{margin:0;font-family:var(--font-display);font-stretch:85%;font-weight:800;font-size:30px;line-height:1.1;color:#F2F0EB}
.rl-card h4{margin:6px 0;font-size:15px;font-weight:600;color:#F2F0EB}
.rl-card p{margin:0;font-size:16px;line-height:1.6;color:#C9C6BF}
.rl-card strong{color:#F2F0EB}
.rl-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.rl-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.rl-list li{position:relative;padding-left:20px;font-size:15px;line-height:1.55;color:#C9C6BF}
.rl-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--accent)}
.rl-card .rl-foot{font-size:14px;color:#A9A69F;border-top:1px solid #3A3B3F;padding-top:14px}
.rl-principles{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 24px}
.rl-principles li{display:flex;gap:12px;align-items:center;font-size:15px;line-height:1.4;color:#E4E2DD}
.rl-principles li span{flex-shrink:0;min-width:32px;height:32px;padding:0 6px;border:1.5px solid var(--accent);color:var(--accent);font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
@media (max-width:900px){.rl-grid,.rl-cols{grid-template-columns:minmax(0,1fr)}.rl-card{padding:24px}.rl-card h3{font-size:26px}}

/* ---------- Handy-Menü ---------- */
.menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;border:1.5px solid var(--fg);background:#fff;color:var(--fg);cursor:pointer;padding:0;flex-shrink:0}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}
.mobile-nav{border-top:1px solid #E1DED7;background:#fff}
.mobile-nav[hidden]{display:none}
.mobile-nav ul{list-style:none;margin:0 auto;padding:8px 24px 20px;max-width:1240px;display:flex;flex-direction:column}
.mobile-nav a{display:flex;align-items:center;min-height:48px;font-size:17px;font-weight:600;text-decoration:none;color:var(--fg);border-bottom:1px solid #EEECE7}
.mobile-nav .mn-cta a{justify-content:center;margin-top:14px;background:var(--accent);border-bottom:none}
@media (max-width:1199px){.nav-links{display:none!important}.menu-btn{display:inline-flex}}
@media (max-width:420px){.header-cta{display:none!important}}

/* ---------- Verfahren ---------- */
.vf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.vf-card{background:#fff;border:2px solid var(--fg);display:flex;flex-direction:column;min-width:0}
.vf-anim{background:var(--fg)}
.vf-text{padding:24px 24px 4px;display:flex;flex-direction:column;gap:12px;flex:1}
.vf-tag{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;color:var(--rust)}
.vf-text h3{margin:0;font-family:var(--font-display);font-stretch:85%;font-weight:800;font-size:26px;line-height:1.1}
.vf-text>p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.vf-steps{margin:4px 0 0;padding:0;list-style:none;counter-reset:vf;display:flex;flex-direction:column;gap:8px}
.vf-steps li{counter-increment:vf;position:relative;padding-left:36px;min-height:24px;font-size:14.5px;line-height:1.45;color:var(--fg)}
.vf-steps li::before{content:counter(vf);position:absolute;left:0;top:-1px;width:24px;height:24px;background:var(--fg);color:var(--accent);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.vf-more{border-top:1.5px solid #DDDAD3;padding:10px 0;margin-top:auto}
.vf-more:last-child{border-bottom:none}
.vf-more summary{font-size:16px;min-height:40px}
.vf-more summary::after{font-size:24px}
.vf-more .fw-body p,.vf-more .fw-body li{font-size:14.5px;line-height:1.55}
.mini-table{width:100%;border-collapse:collapse;font-size:14px}
.mini-table caption{text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:6px}
.mini-table th{text-align:left;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;font-weight:500;color:var(--muted);border-bottom:2px solid var(--fg);padding:6px 8px 6px 0;hyphens:manual}
.mini-table td{border-bottom:1px solid #DDDAD3;padding:7px 8px 7px 0;vertical-align:top;line-height:1.4;color:var(--muted)}
.mini-table td:first-child{color:var(--fg);font-weight:600;white-space:nowrap}
.fw-table.fit{min-width:0}
.mini-table small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
@media (max-width:1023px){.vf-grid{grid-template-columns:minmax(0,1fr)}.vf-anim .anim{max-width:560px;margin:0 auto}}

/* ---------- Animationen ---------- */
.anim{display:block;width:100%;height:auto}
.anim .lbl{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;fill:var(--accent)}
.anim .lbl text{opacity:0}
.anim .lbl .fin{opacity:1}
.anim .prog{transform-box:fill-box;transform-origin:0 50%;animation:prog 10s linear infinite}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.a-m1,.a-m2,.a-coat,.c-layer,.b-pk,.i1-front,.i2-rust,.i3-flake,.fw-rust{transform-box:fill-box}

/* A – Betonersatz */
.anim-a .a-dmg{opacity:0;animation:aDmg 10s infinite}
@keyframes aDmg{0%,12%{opacity:1;transform:none}22%,95%{opacity:0;transform:translateY(-22px)}100%{opacity:1;transform:none}}
.anim-a .a-steel{animation:aSteel 10s infinite}
@keyframes aSteel{0%,25%{opacity:0}32%,92%{opacity:1}96%,100%{opacity:0}}
.anim-a .a-ks{animation:aKs 10s infinite}
@keyframes aKs{0%,34%{opacity:0}40%,92%{opacity:1}96%,100%{opacity:0}}
.anim-a .a-m1{transform-origin:50% 100%;animation:aM1 10s infinite}
@keyframes aM1{0%,46%{transform:scaleY(0);opacity:1}56%,92%{transform:scaleY(1);opacity:1}96%,100%{transform:scaleY(1);opacity:0}}
.anim-a .a-m2{transform-origin:50% 100%;animation:aM2 10s infinite}
@keyframes aM2{0%,57%{transform:scaleY(0);opacity:1}68%,92%{transform:scaleY(1);opacity:1}96%,100%{transform:scaleY(1);opacity:0}}
.anim-a .a-coat{transform-origin:0 50%;animation:aCoat 10s infinite}
@keyframes aCoat{0%,72%{transform:scaleX(0);opacity:1}84%,92%{transform:scaleX(1);opacity:1}96%,100%{transform:scaleX(1);opacity:0}}
.a-l1{animation:aL1 10s infinite}@keyframes aL1{0%,22%{opacity:1}24%,96%{opacity:0}98%,100%{opacity:1}}
.a-l2{animation:aL2 10s infinite}@keyframes aL2{0%,23%{opacity:0}25%,43%{opacity:1}45%,100%{opacity:0}}
.a-l3{animation:aL3 10s infinite}@keyframes aL3{0%,44%{opacity:0}46%,70%{opacity:1}72%,100%{opacity:0}}
.a-l4{animation:aL4 10s infinite}@keyframes aL4{0%,71%{opacity:0}73%,93%{opacity:1}95%,100%{opacity:0}}

/* B – Verpressen */
.anim-b .b-wet{opacity:0;animation:bWet 10s infinite}
@keyframes bWet{0%,55%{opacity:.55}80%,96%{opacity:0}100%{opacity:.55}}
.anim-b .b-seal{opacity:.28;animation:bSeal 10s infinite}
@keyframes bSeal{0%,24%{opacity:0}29%,92%{opacity:.28}96%,100%{opacity:0}}
.anim-b .b-fill{animation:bFill 10s infinite}
@keyframes bFill{0%,30%{stroke-dashoffset:100;opacity:1}80%,92%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.anim-b .b-pk{transform-origin:50% 50%}
.b-pk1{animation:bPk1 10s infinite}@keyframes bPk1{0%,7%{transform:scale(0)}10%{transform:scale(1.25)}12%,92%{transform:scale(1);opacity:1}96%,100%{transform:scale(1);opacity:0}}
.b-pk2{animation:bPk2 10s infinite}@keyframes bPk2{0%,11%{transform:scale(0)}14%{transform:scale(1.25)}16%,92%{transform:scale(1);opacity:1}96%,100%{transform:scale(1);opacity:0}}
.b-pk3{animation:bPk3 10s infinite}@keyframes bPk3{0%,15%{transform:scale(0)}18%{transform:scale(1.25)}20%,92%{transform:scale(1);opacity:1}96%,100%{transform:scale(1);opacity:0}}
.b-pk4{animation:bPk4 10s infinite}@keyframes bPk4{0%,19%{transform:scale(0)}22%{transform:scale(1.25)}24%,92%{transform:scale(1);opacity:1}96%,100%{transform:scale(1);opacity:0}}
.anim-b .b-drop{opacity:0;animation:bDrop 10s infinite both}
.anim-b .b-d2{animation-delay:.5s}
@keyframes bDrop{0%{opacity:0;transform:none}3%{opacity:1;transform:none}10%{opacity:0;transform:translateY(26px)}11%{opacity:0;transform:none}14%{opacity:1;transform:none}21%{opacity:0;transform:translateY(26px)}22%,100%{opacity:0;transform:none}}
.b-l1{animation:bL1 10s infinite}@keyframes bL1{0%,27%{opacity:1}29%,96%{opacity:0}98%,100%{opacity:1}}
.b-l2{animation:bL2 10s infinite}@keyframes bL2{0%,28%{opacity:0}30%,79%{opacity:1}81%,100%{opacity:0}}
.b-l3{animation:bL3 10s infinite}@keyframes bL3{0%,80%{opacity:0}82%,94%{opacity:1}96%,100%{opacity:0}}

/* C – Beschichten */
.anim-c .c-layer{transform-origin:0 50%}
.c-pr{animation:cPr 10s infinite}@keyframes cPr{0%,6%{transform:scaleX(0);opacity:1}20%,92%{transform:scaleX(1);opacity:1}96%,100%{transform:scaleX(1);opacity:0}}
.c-sp{animation:cSp 10s infinite}@keyframes cSp{0%,22%{transform:scaleX(0);opacity:1}34%,92%{transform:scaleX(1);opacity:1}96%,100%{transform:scaleX(1);opacity:0}}
.c-co{animation:cCo 10s infinite}@keyframes cCo{0%,36%{transform:scaleX(0);opacity:1}50%,92%{transform:scaleX(1);opacity:1}96%,100%{transform:scaleX(1);opacity:0}}
.c-sand{animation:cSand 10s infinite}@keyframes cSand{0%,51%{opacity:0}56%,92%{opacity:1}96%,100%{opacity:0}}
.c-se{animation:cSe 10s infinite}@keyframes cSe{0%,60%{transform:scaleX(0);opacity:1}72%,92%{transform:scaleX(1);opacity:1}96%,100%{transform:scaleX(1);opacity:0}}
.anim-c .c-roller{opacity:0;animation:cRoll 10s infinite}
@keyframes cRoll{0%,5%{opacity:0;transform:translateX(0)}6%{opacity:1;transform:translateX(0)}20%{opacity:1;transform:translateX(340px)}21%{opacity:0;transform:translateX(340px)}21.5%{opacity:0;transform:translateX(0)}22%{opacity:1;transform:translateX(0)}34%{opacity:1;transform:translateX(340px)}35%{opacity:0;transform:translateX(340px)}35.5%{opacity:0;transform:translateX(0)}36%{opacity:1;transform:translateX(0)}50%{opacity:1;transform:translateX(340px)}51%{opacity:0;transform:translateX(340px)}59.5%{opacity:0;transform:translateX(0)}60%{opacity:1;transform:translateX(0)}72%{opacity:1;transform:translateX(340px)}73%,100%{opacity:0;transform:translateX(340px)}}
.anim-c .c-drop{opacity:0;animation:cDrop 10s infinite both}
.anim-c .c-d2{animation-delay:.35s}.anim-c .c-d3{animation-delay:.7s}
@keyframes cDrop{0%,74%{opacity:0;transform:translateY(0)}75%{opacity:1;transform:translateY(0)}82%{opacity:1;transform:translateY(66px)}86%{opacity:0;transform:translateY(54px)}100%{opacity:0;transform:translateY(54px)}}
.c-l1{animation:cL1 10s infinite}@keyframes cL1{0%,20%{opacity:1}22%,96%{opacity:0}98%,100%{opacity:1}}
.c-l2{animation:cL2 10s infinite}@keyframes cL2{0%,21%{opacity:0}22.5%,34%{opacity:1}35.5%,100%{opacity:0}}
.c-l3{animation:cL3 10s infinite}@keyframes cL3{0%,35%{opacity:0}36.5%,58%{opacity:1}59.5%,100%{opacity:0}}
.c-l4{animation:cL4 10s infinite}@keyframes cL4{0%,59%{opacity:0}60.5%,72%{opacity:1}73.5%,100%{opacity:0}}
.c-l5{animation:cL5 10s infinite}@keyframes cL5{0%,73%{opacity:0}75%,93%{opacity:1}95%,100%{opacity:0}}

/* Fachwissen-Grafik */
.fw-flow{animation:fwFlow .8s linear infinite}@keyframes fwFlow{to{stroke-dashoffset:-8}}
.fw-front{animation:fwFront 1.6s linear infinite}@keyframes fwFront{to{stroke-dashoffset:-24}}
.fw-rust{transform-origin:50% 50%;animation:fwRust 2.4s ease-in-out infinite alternate}@keyframes fwRust{from{transform:scale(.9)}to{transform:scale(1.12)}}

/* Ursachen mit Mini-Animationen */
.cause-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.cause{background:var(--paper);padding:24px;display:flex;flex-direction:column;gap:10px}
.cause .ico{display:block;margin-bottom:4px}
.cause-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--rust)}
.cause h3{margin:0;font-family:var(--font-display);font-weight:800;font-size:22px}
.cause p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.cause .typ{font-size:14px;line-height:1.5;color:var(--fg)}
.i1-front{transform-origin:50% 0;animation:i1f 5s ease-in-out infinite alternate}@keyframes i1f{from{transform:scaleY(1)}to{transform:scaleY(1.9)}}
.i1-line{animation:i1l 5s ease-in-out infinite alternate}@keyframes i1l{from{transform:translateY(0)}to{transform:translateY(7px)}}
.i-fall{animation:iFall 2.4s ease-in infinite both}.i-d2{animation-delay:.8s}.i-d3{animation-delay:1.6s}
@keyframes iFall{0%{transform:translateY(0);opacity:0}15%,80%{opacity:1}100%{transform:translateY(20px);opacity:0}}
.i2-rust{transform-origin:50% 50%;animation:iPulse 1.8s ease-in-out infinite alternate}@keyframes iPulse{from{transform:scale(.8);opacity:.35}to{transform:scale(1.2);opacity:.75}}
.i3-flake{transform-origin:50% 50%;animation:iSpin 9s linear infinite}@keyframes iSpin{to{transform:rotate(360deg)}}
.i3-chip{animation:iChip 3s ease-out infinite both}@keyframes iChip{0%,60%{transform:none;opacity:0}65%{opacity:1}100%{transform:translate(4px,-10px);opacity:0}}
.i4-crack{animation:iCrack 4s ease-in-out infinite}@keyframes iCrack{0%{stroke-dashoffset:100}45%,100%{stroke-dashoffset:0}}
.i4-drop{opacity:0;animation:iDrop 4s ease-in infinite}@keyframes iDrop{0%,50%{transform:none;opacity:0}55%{opacity:1}85%{transform:translateY(8px);opacity:1}100%{transform:translateY(10px);opacity:0}}

/* Richtlinien – Ergänzungen */
.rl-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rl-ico{display:block;color:var(--accent)}
.rl-flow{margin:6px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;position:relative}
.rl-flow li:not(:last-child)::after{content:"";position:absolute;left:56px;right:-12px;top:23px;height:2px;background:#3A3B3F}
.rl-flow li{position:relative;display:flex;flex-direction:column;gap:12px}
.rl-flow li div{display:flex;flex-direction:column;gap:4px}
.rl-flow strong{font-size:16px;color:#F2F0EB}
.rl-flow li div span{font-size:14px;line-height:1.45;color:#C9C6BF}
.rl-flow .dot{position:relative;width:48px;height:48px;box-sizing:border-box;border:2px solid var(--accent);background:var(--fg);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;animation:flowDot 6s infinite both}
.rl-flow li:nth-child(2) .dot{animation-delay:.8s}.rl-flow li:nth-child(3) .dot{animation-delay:1.6s}.rl-flow li:nth-child(4) .dot{animation-delay:2.4s}.rl-flow li:nth-child(5) .dot{animation-delay:3.2s}
@keyframes flowDot{0%,6%{background:var(--fg);color:var(--accent)}12%,55%{background:var(--accent);color:var(--fg)}65%,100%{background:var(--fg);color:var(--accent)}}
.rl-principles{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}
.rl-more details{border-top:1.5px solid #3A3B3F}
.rl-more details:last-child{border-bottom:1.5px solid #3A3B3F}
.rl-more summary{color:#F2F0EB;font-size:20px}
.rl-more summary::after{color:var(--accent)}
.rl-more .fw-body p,.rl-more .fw-body li{color:#C9C6BF}
.rl-more .fw-body strong{color:#F2F0EB}
.rl-more .fw-table th{color:#A9A69F;border-bottom-color:#F2F0EB}
.rl-more .fw-table td{color:#C9C6BF;border-bottom-color:#3A3B3F}
.rl-more .fw-table td:first-child{color:#F2F0EB}
.rl-quality{border:1.5px solid var(--accent);padding:32px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:center}
.rl-q-text{display:flex;flex-direction:column;gap:12px}
.rl-quality h3{margin:0;font-family:var(--font-display);font-stretch:85%;font-weight:800;font-size:30px;line-height:1.1;color:#F2F0EB}
.rl-quality p{margin:0;font-size:16px;line-height:1.6;color:#C9C6BF}
.rl-quality strong{color:#F2F0EB}
.rl-q-icons{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:20px 16px}
.rl-q-icons li{display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.4;color:#E4E2DD}
.rl-q-icons .q-ico{color:var(--accent)}
@media (max-width:1023px){.rl-3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .rl-flow{grid-template-columns:minmax(0,1fr);gap:16px}
  .rl-flow li:not(:last-child)::after{left:23px;right:auto;top:52px;bottom:-12px;width:2px;height:auto}
  .rl-flow li{flex-direction:row;align-items:center;gap:16px}
  .rl-flow .dot{flex-shrink:0}
  .rl-quality{grid-template-columns:minmax(0,1fr);padding:24px}
  .rl-quality h3{font-size:26px}
  .rl-more summary{font-size:18px}
}
@media (max-width:600px){.rl-principles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px 12px}.rl-principles li{font-size:14px}}

/* Wer Bewegung reduziert haben möchte, sieht die Grafiken im Endzustand */
@media (prefers-reduced-motion:reduce){
  .anim *,.ico *,.fw-flow,.fw-front,.fw-rust,.rl-flow .dot{animation:none!important}
  .anim .prog{display:none}
}

/* ---------- Film ---------- */
.film{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:var(--fg);color:#F2F0EB;border:2px solid var(--fg)}
.film-player{background:#1E2A3A;display:flex;align-items:center}
.film-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#1E2A3A}
.film-player p{margin:0;padding:24px;color:#C9C6BF}
.film-player a{color:var(--accent)}
.film-text{padding:28px 28px 24px;display:flex;flex-direction:column;gap:12px;min-width:0}
.film-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--accent)}
.film-text h3{margin:0;font-family:var(--font-display);font-stretch:85%;font-weight:800;font-size:30px;line-height:1.1}
.film-text p{margin:0;font-size:15px;line-height:1.6;color:#C9C6BF}
.film-chap{margin:4px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.film-chap button{width:100%;min-height:44px;display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;background:transparent;border:1.5px solid #3A3B3F;color:#E4E2DD;font:inherit;font-size:13.5px;line-height:1.25;text-align:left;cursor:pointer}
.film-chap button:hover,.film-chap button[aria-current]{border-color:var(--accent);color:#fff}
.film-chap .n{flex-shrink:0;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--fg);font-weight:700;font-size:13px}
.film-chap .l{flex:1;min-width:0}
.film-chap .t{flex-shrink:0;font-family:var(--font-mono);font-size:11px;color:#A9A69F}
.hero-film{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;color:#F2F0EB;font-weight:500;font-size:16px;text-decoration:none}
.hero-film svg{color:var(--accent)}
.hero-film:hover{color:var(--accent)}
@media (max-width:1023px){.film{grid-template-columns:minmax(0,1fr)}.film-text{padding:24px}}
@media (max-width:440px){.film-chap{grid-template-columns:minmax(0,1fr)}.film-text h3{font-size:26px}}