/* Letztes Update: 2026-09-29 (zentrale Bewegungs-Variablen, Titel zeichnen sich selbst, Linien an Überschriften) */
/* =====================================================================
   RAJU — gemeinsames Design für alle Seiten
   ===================================================================== */
:root{
  --bg:#faf7f2;
  --bg-2:#ffffff;
  --card:#ffffff;
  --card-2:#f4efe8;
  --line:rgba(27,23,18,.08);
  --line-2:rgba(27,23,18,.14);
  --text:#1b1712;
  --text-2:#4a4238;
  --muted:#857a6c;
  --orange:#d9744c;
  --amber:#d6a13f;
  --pink:#d8849c;
  --lime:#5a9a78;
  --sky:#3b6cf6;
  --ink:#1b1712;
  --shadow:0 1px 2px rgba(27,23,18,.05),0 8px 24px -10px rgba(27,23,18,.14);
  --shadow-lg:0 2px 4px rgba(27,23,18,.05),0 22px 44px -18px rgba(27,23,18,.25);
  --c-orange:#d9744c; --c-pink:#d8849c; --c-blue:#7d98cc; --c-green:#6aa886; --c-yellow:#d6a13f; --c-violet:#9c84c6; --c-wine:#8e2f4d;
  --t-orange:#f9ece4; --t-pink:#f8ebef; --t-blue:#ecf0f8; --t-green:#e9f3ed; --t-yellow:#f8f0dc; --t-violet:#f1ecf7; --t-wine:#f4e4e8;
  --grad:linear-gradient(110deg,var(--orange),var(--pink));
  --grad-warm:linear-gradient(110deg,var(--amber),var(--orange) 45%,var(--pink));
  --r-sm:12px; --r-md:18px; --r-lg:28px;
  --ease:cubic-bezier(.22,.9,.24,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --font:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --display:'Archivo Black','Space Grotesk',sans-serif;
  --nav-h:64px;
  /* Bewegung (29.09.): hier zentral Dauer & Easing anpassen */
  --dur-micro:.2s;   /* Hover, Klicks */
  --dur-in:.8s;      /* Einblenden */
  --dur-big:1.2s;    /* große Inszenierungen */
  --stagger:.1s;     /* Versatz pro Element */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button,input,textarea{font-family:inherit;color:inherit;}
::selection{background:var(--orange);color:#fff;}
img{max-width:100%;}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px;}
.grad-text{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- Hintergrund-Glow (animiert) ---------- */
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.aurora span{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.38;
  animation:drift 26s ease-in-out infinite alternate;
}
.aurora span:nth-child(1){width:560px;height:560px;left:-160px;top:-180px;background:var(--orange);}
.aurora span:nth-child(2){width:480px;height:480px;right:-160px;top:10%;background:var(--pink);opacity:.22;animation-duration:32s;animation-delay:-8s;}
.aurora span:nth-child(3){width:420px;height:420px;left:30%;top:70%;background:#6a3cff;opacity:.16;animation-duration:38s;animation-delay:-16s;}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(80px,60px,0) scale(1.15);}
  100%{transform:translate3d(-40px,120px,0) scale(.95);}
}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- Scroll-Fortschritt ---------- */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:999;
  background:var(--grad-warm);transform-origin:left;transform:scaleX(0);pointer-events:none;}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  background:rgba(245,239,227,.85);
  backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.nav .wrap{height:100%;display:flex;align-items:center;gap:18px;}
.logo{
  font-family:var(--display);font-size:22px;letter-spacing:.5px;text-decoration:none;
  display:inline-flex;gap:1px;
}
.logo span{display:inline-block;transition:transform .4s var(--spring),color .3s;}
.logo span:first-child{color:var(--orange);}
.logo:hover span{transform:translateY(-3px);}
.logo:hover span:nth-child(2){transition-delay:.04s;}
.logo:hover span:nth-child(3){transition-delay:.08s;}
.logo:hover span:nth-child(4){transition-delay:.12s;}
.nav-links{display:flex;gap:2px;margin-left:12px;}
.nav-links a{
  text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:500;
  padding:8px 13px;border-radius:100px;transition:color .2s,background .2s;
}
.nav-links a:hover{color:var(--text);background:rgba(27,23,18,.06);}
.nav-links a.on{color:var(--text);background:rgba(27,23,18,.1);}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.search-trigger{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(27,23,18,.06);border:1px solid var(--line);
  color:var(--muted);font-size:14px;padding:8px 10px 8px 14px;border-radius:100px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.search-trigger:hover{color:var(--text);border-color:var(--line-2);background:rgba(27,23,18,.09);}
.search-trigger kbd{font-family:var(--font);font-size:11.5px;border:1px solid var(--line-2);border-radius:6px;padding:1px 6px;color:var(--muted);}
.live-pill{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:100px;
  background:rgba(31,157,85,.1);color:var(--lime);border:1px solid rgba(31,157,85,.25);
  transition:background .2s;white-space:nowrap;
}
.live-pill:hover{background:rgba(31,157,85,.18);}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);position:relative;flex-shrink:0;}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--lime);animation:ping 1.8s var(--ease) infinite;}
@keyframes ping{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.8);opacity:0}}
.burger{display:none;width:42px;height:42px;border:none;background:rgba(27,23,18,.06);border-radius:50%;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.burger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s;}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.open .burger span:nth-child(2){opacity:0;}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:900px){
  .search-trigger .st-label,.search-trigger kbd{display:none;}
  .search-trigger{padding:0;width:42px;height:42px;justify-content:center;}
  .live-pill .lp-label{display:none;}
  .live-pill{padding:0;width:42px;height:42px;justify-content:center;}
}
@media(max-width:760px){
  .burger{display:flex;}
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;margin:0;
    flex-direction:column;gap:0;padding:8px 12px 16px;
    background:rgba(245,239,227,.98);border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .3s var(--ease),opacity .25s;
  }
  .nav.open .nav-links{transform:none;opacity:1;pointer-events:auto;}
  .nav-links a{font-size:18px;padding:14px 12px;border-radius:12px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;
  padding:13px 22px;border-radius:100px;border:1px solid transparent;
  transition:transform .25s var(--spring),box-shadow .3s var(--ease),background .2s,border-color .2s,color .2s;
  white-space:nowrap;
}
.btn:active{transform:scale(.96);}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 30px -8px rgba(255,107,26,.6);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(255,77,141,.6);}
.btn-ghost{background:rgba(27,23,18,.06);border-color:var(--line-2);color:var(--text);}
.btn-ghost:hover{background:rgba(27,23,18,.11);transform:translateY(-2px);}
.btn-sm{font-size:13.5px;padding:9px 15px;}
.btn .arr{transition:transform .25s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}

/* ---------- Karten ---------- */
.card{
  background:var(--card);box-shadow:0 1px 2px rgba(27,23,18,.04);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--orange);
}
.section{padding:96px 0;position:relative;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:36px;}
h2.h{font-family:var(--display);font-size:clamp(30px,5vw,54px);line-height:1.02;letter-spacing:-.5px;margin-top:10px;max-width:760px;}
.lead{font-size:18px;color:var(--text-2);max-width:620px;margin-top:14px;}
@media(max-width:640px){.section{padding:72px 0;}}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:rgba(255,107,26,.06);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{font-family:var(--display);font-size:clamp(18px,2.4vw,26px);padding:16px 0;white-space:nowrap;letter-spacing:.5px;}
.marquee-track span i{font-style:normal;color:var(--orange);padding:0 22px;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * 70ms);}
.rv.in{opacity:1;transform:none;}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(27,23,18,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.modal.open{display:flex;animation:fade .25s var(--ease);}
.modal-box{
  width:100%;max-width:540px;max-height:88vh;overflow-y:auto;position:relative;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:32px 28px;
  animation:pop .4s var(--spring);
}
.modal-box h3{font-family:var(--display);font-size:26px;line-height:1.1;margin:8px 0 14px;}
.modal-box p{color:var(--text-2);margin-bottom:12px;}
.modal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(27,23,18,.07);font-size:18px;transition:background .2s,transform .3s var(--ease);}
.modal-x:hover{background:rgba(27,23,18,.14);transform:rotate(90deg);}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- Suche (Befehlspalette) ---------- */
.palette{position:fixed;inset:0;z-index:300;display:none;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;
  background:rgba(27,23,18,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.palette.open{display:flex;animation:fade .2s var(--ease);}
.palette-box{width:100%;max-width:600px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:22px;overflow:hidden;
  box-shadow:var(--pop-lg);border:1.5px solid var(--ink);animation:pop .35s var(--spring);}
.palette-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);}
.palette-in svg{flex-shrink:0;color:var(--muted);}
.palette-in input{flex:1;background:none;border:none;font-size:18px;outline:none;min-width:0;}
.palette-in input::placeholder{color:var(--muted);}
.palette-in kbd{font-size:11.5px;border:1px solid var(--line-2);border-radius:6px;padding:2px 7px;color:var(--muted);font-family:var(--font);}
.palette-list{max-height:52vh;overflow-y:auto;padding:8px;}
.palette-group{font-size:11.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);padding:12px 12px 6px;}
.palette-item{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:12px;cursor:pointer;text-decoration:none;}
.palette-item .pi-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(27,23,18,.06);font-size:17px;flex-shrink:0;}
.palette-item .pi-t{font-weight:600;font-size:15px;}
.palette-item .pi-s{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.palette-item .pi-txt{min-width:0;flex:1;}
.palette-item .pi-go{color:var(--muted);opacity:0;transition:opacity .15s,transform .2s var(--ease);}
.palette-item.act{background:rgba(255,107,26,.12);}
.palette-item.act .pi-ico{background:var(--grad);}
.palette-item.act .pi-go{opacity:1;transform:translateX(2px);}
.palette-empty{padding:30px 16px;text-align:center;color:var(--muted);}
.palette-foot{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);}
@media(max-width:640px){.palette{padding-top:10px;} .palette-foot{display:none;}}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:400;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--text);color:var(--bg);font-weight:600;font-size:14.5px;padding:12px 20px;border-radius:100px;
  transition:opacity .3s var(--ease),transform .35s var(--spring);max-width:calc(100vw - 32px);text-align:center;}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast.err{background:#ff4d5e;color:#fff;}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line);padding:40px 0 48px;margin-top:40px;}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.foot small{color:var(--muted);font-size:13.5px;}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;}
.foot-links a{color:var(--muted);text-decoration:none;transition:color .2s;}
.foot-links a:hover{color:var(--text);}
.foerder-logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;text-decoration:none;}
.foerder-logo span{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);}
.foerder-logo img{height:74px;width:auto;background:#fff;padding:8px 12px;border-radius:12px;transition:transform .4s var(--spring);}
.foerder-logo:hover img{transform:scale(1.05) rotate(-1deg);}

/* ---------- Reduzierte Bewegung ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .rv{opacity:1;transform:none;}
}
[data-tilt].tilting{transition:transform .15s ease-out,border-color .3s !important;}

/* =====================================================================
   Clean & bunt: helle Fläche, klare Farben, wenig Deko
   ===================================================================== */
.aurora,.grain{display:none;}
::selection{background:var(--c-yellow);color:var(--ink);}
.nav{background:rgba(250,247,242,.86);}
.btn-primary{background:var(--c-orange);color:#fff;border:none;box-shadow:0 8px 20px -8px rgba(217,116,76,.5);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(217,116,76,.55);}
.btn-ghost{background:#fff;border:1px solid var(--line-2);color:var(--ink);}
.btn-ghost:hover{background:#fff;border-color:rgba(27,23,18,.3);transform:translateY(-2px);box-shadow:var(--shadow);}
.card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);}
.modal-box{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);}
.palette-box{border:1px solid var(--line);box-shadow:var(--shadow-lg);background:#fff;}
.live-pill{color:var(--c-green);background:var(--t-green);border:1px solid rgba(106,168,134,.3);}
.live-dot{background:var(--c-green);}
.live-dot::after{border-color:var(--c-green);}
.search-trigger{background:#fff;}
/* dünnes Farbband statt Laufband-Deko */
.marquee{background:var(--c-orange);color:#fff;border:none;-webkit-mask-image:none;mask-image:none;}
.marquee-track{animation-duration:40s;}
.marquee-track span{font-family:var(--font);font-weight:700;font-size:14px;letter-spacing:2px;padding:11px 0;}
.marquee-track span i{color:var(--c-yellow);padding:0 18px;}
.foot{background:#fff;}

/* =====================================================================
   Gemeinsam für alle Seiten (27.09.): ruhiges Einblenden & bunter Titel
   ===================================================================== */
.rv{transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:calc(var(--d,0) * 70ms);}
h1.rv,h2.rv,p.rv,.eyebrow.rv,.lead.rv{filter:blur(6px);}
.rv.in{opacity:1;transform:none;filter:none;}
.title-xl{font-family:var(--display);font-size:clamp(64px,15vw,200px);line-height:.82;letter-spacing:-.045em;display:flex;flex-wrap:wrap;margin-left:-.03em;}
.title-xl span{display:inline-block;opacity:0;transform:translateY(35%);animation:titleRise 1s var(--ease) forwards;animation-delay:calc(var(--i,0) * 70ms + 80ms);}
.title-xl span:nth-child(4n+1){color:var(--c-orange);} .title-xl span:nth-child(4n+2){color:var(--c-pink);}
.title-xl span:nth-child(4n+3){color:var(--c-yellow);} .title-xl span:nth-child(4n+4){color:var(--c-green);}
@keyframes titleRise{to{opacity:1;transform:none;}}
.page-head{padding-top:calc(var(--nav-h) + 56px);padding-bottom:10px;}
.page-head .lead{margin-top:18px;}
@media(prefers-reduced-motion:reduce){.rv{filter:none !important;} .title-xl span{opacity:1;transform:none;animation:none;}}

/* =====================================================================
   29.09.: Motiv "Dinge zeichnen sich selbst" + Zeitraster
   ===================================================================== */
.rv{transition-delay:calc(var(--d,0) * var(--stagger));}
/* Große Titel: erst Umriss, dann Farbe (siehe RAJU.drawWord in raju.js) */
.will-draw > span{opacity:0 !important;animation:none !important;}
.drawn > span{display:none !important;}
.word-svg{display:block;overflow:visible;max-width:100%;height:auto;}
.word-svg .ltr{fill:currentColor;stroke:currentColor;stroke-width:var(--sw);stroke-linejoin:round;fill-opacity:0;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:ltrDraw .9s var(--ease-out) var(--dd) forwards,ltrFill .6s var(--ease-out) calc(var(--dd) + .5s) forwards;
  transform-box:fill-box;transform-origin:50% 100%;transition:scale .4s var(--spring);cursor:default;}
.word-svg .ltr:hover{scale:1.06 .94;}
.word-svg.no-anim .ltr{animation:none;fill-opacity:1;stroke-dashoffset:0;}
@keyframes ltrDraw{to{stroke-dashoffset:0;}}
@keyframes ltrFill{to{fill-opacity:1;}}
/* Kleine Linie vor jeder Überschrift zieht sich auf */
.eyebrow::before{content:"";display:inline-block;width:22px;height:2px;border-radius:2px;background:currentColor;flex-shrink:0;
  transform-origin:left;transition:transform .6s var(--ease-out) .2s;}
.eyebrow.rv:not(.in)::before{transform:scaleX(0);}
@media(prefers-reduced-motion:reduce){.eyebrow::before{transform:none !important;}}