@import url('/umfrage/static/fonts.css?v=20260618d');
/* SeiMensch Umfragen — shared design system (matches main site) */

:root{
  --paper:#F4F0E6; --paper-2:#EAE3D2; --cream:#FBF8F0;
  --ink:#23281D; --ink-soft:#535A47;
  --forest:#2C4A33; --moss:#5E7C52; --sage:#9DAE87;
  --amber:#E29A2C; --accent:#B5742A; --accent-deep:#9A5E20; --rust:#A8482E;
  --line:rgba(35,40,29,.12); --line-soft:rgba(35,40,29,.07);
  --shadow:0 30px 70px -34px rgba(35,40,29,.4);
  --shadow-soft:0 14px 40px -22px rgba(35,40,29,.3);
  --r:16px; --maxw:1140px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Figtree',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh; position:relative;
}
/* film grain */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.wrap{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 22px}
h1,h2,h3{font-family:'Bricolage Grotesque',Georgia,serif; font-weight:460; letter-spacing:-.01em; line-height:1.12; margin:0}
.serif-it{font-family:'Bricolage Grotesque',serif; font-style:italic}
a{color:var(--rust); text-decoration:none}
.eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--accent)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:inherit; font-size:.96rem; font-weight:600; cursor:pointer;
  padding:13px 22px; border-radius:999px; border:1px solid transparent; transition:.18s ease; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-amber{background:linear-gradient(165deg,#CF8A39,#BC6E25); color:var(--cream);
  box-shadow:0 10px 26px -12px rgba(154,94,32,.7), inset 0 1px 0 rgba(255,255,255,.22)}
.btn-amber:hover{filter:brightness(1.05)}
.btn-forest{background:var(--forest); color:#EFE7D6; box-shadow:var(--shadow-soft)}
.btn-forest:hover{background:#244029}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:rgba(35,40,29,.05)}
.btn-wa{background:#25D366; color:#06371b; font-weight:700}
.btn-danger{background:transparent; color:var(--rust); border-color:rgba(168,72,46,.35)}
.btn-danger:hover{background:rgba(168,72,46,.08)}
.btn-sm{padding:8px 15px; font-size:.84rem}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* card */
.card{background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-soft)}

input[type=text],input[type=password],input[type=number],textarea,select{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; outline:none; transition:.15s}
input:focus,textarea:focus,select:focus{border-color:var(--moss); box-shadow:0 0 0 3px rgba(94,124,82,.16)}
label{display:block; font-size:.82rem; font-weight:600; color:var(--ink-soft); margin:0 0 6px}
textarea{resize:vertical; min-height:64px}

.muted{color:var(--ink-soft)}
.pill{display:inline-flex; align-items:center; gap:.4em; font-size:.74rem; font-weight:700;
  letter-spacing:.04em; padding:4px 11px; border-radius:999px; text-transform:uppercase}
.pill-live{background:rgba(44,74,51,.12); color:var(--forest)}
.pill-live .dot{width:7px;height:7px;border-radius:50%;background:#2fa84f;box-shadow:0 0 0 0 rgba(47,168,79,.6);animation:pulse 1.6s infinite}
.pill-draft{background:rgba(35,40,29,.08); color:var(--ink-soft)}
.pill-done{background:rgba(168,72,46,.12); color:var(--rust)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,168,79,.5)}70%{box-shadow:0 0 0 8px rgba(47,168,79,0)}100%{box-shadow:0 0 0 0 rgba(47,168,79,0)}}

.fade-up{opacity:0; transform:translateY(14px); animation:fu .7s ease forwards}
@keyframes fu{to{opacity:1;transform:none}}

/* soft animated background glow (atmosphere) */
.glowbg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glowbg b{position:absolute;border-radius:50%;filter:blur(72px);opacity:.55;will-change:transform}
.glowbg .g1{width:52vmax;height:52vmax;top:-18vmax;right:-14vmax;
  background:radial-gradient(circle,rgba(226,154,44,.22),transparent 68%);animation:drift1 26s ease-in-out infinite}
.glowbg .g2{width:48vmax;height:48vmax;bottom:-20vmax;left:-16vmax;
  background:radial-gradient(circle,rgba(44,74,51,.20),transparent 68%);animation:drift2 32s ease-in-out infinite}
.glowbg .g3{width:34vmax;height:34vmax;top:32%;left:42%;
  background:radial-gradient(circle,rgba(157,174,135,.18),transparent 70%);animation:drift1 38s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vmax,3vmax) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4vmax,-3vmax) scale(1.1)}}

/* staggered entrance — set --i on each child */
.stagger>*{opacity:0;transform:translateY(12px);animation:fu .55s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(var(--i,0)*70ms)}

/* gentle pop for selection / accents */
@keyframes pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

@media(prefers-reduced-motion:reduce){
  .fade-up,.stagger>*{animation:none;opacity:1;transform:none}
  .pill-live .dot{animation:none}
  .glowbg b{animation:none}
}

/* ---- bouncy rising bubbles (organisch, warme CI) ---- */
.bubbles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bubbles b{position:absolute;bottom:-14vh;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),transparent 58%),var(--bc,rgba(94,124,82,.4));
  box-shadow:inset 0 -7px 16px rgba(35,40,29,.08),0 10px 26px -10px rgba(46,40,22,.30);
  animation:rise var(--d,18s) cubic-bezier(.5,0,.5,1) infinite;animation-delay:var(--delay,0s)}
@keyframes rise{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  8%{opacity:.5}
  45%{transform:translate(var(--x,2vw),-52vh) scale(1.06)}
  56%{transform:translate(calc(var(--x,2vw)*.55),-63vh) scale(.97)}
  88%{opacity:.38}
  100%{transform:translate(calc(var(--x,2vw)*-1),-118vh) scale(.85);opacity:0}}

/* smooth animatable percentage (für gauge/Balken), Fallback: snap */
@property --p{syntax:'<number>';inherits:false;initial-value:0}

@media(prefers-reduced-motion:reduce){.bubbles{display:none}}

/* ============================================================
   HYPER-MODERN · WARM HIGH-TECH OVERRIDE LAYER (v3)
   neue Schriften · Glas · Glow · Shine · mehr Bewegung
   ============================================================ */
:root{
  --display:'Bricolage Grotesque'; --body:'Figtree'; --mono:'JetBrains Mono';
  --glass:rgba(255,253,248,.72); --glass-2:rgba(255,253,248,.6);
  --glass-brd:rgba(255,255,255,.72);
  --glow-amber:rgba(201,128,47,.38); --glow-forest:rgba(44,74,51,.30);
  --r:18px;
}
body{font-family:var(--body),system-ui,-apple-system,sans-serif;letter-spacing:-.004em}
h1,h2,h3{font-family:var(--display),system-ui,sans-serif;font-weight:650;letter-spacing:-.022em}
.serif-it{font-family:var(--display),sans-serif;font-style:italic}
.eyebrow{font-family:var(--mono),ui-monospace,monospace;font-weight:600;font-size:.66rem;letter-spacing:.24em}

/* GLASS CARDS */
.card{background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--glass-brd);border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 20px 54px -30px rgba(40,32,16,.5), 0 5px 16px -10px rgba(40,32,16,.28)}

/* MODERN BUTTONS — glow + shine sweep + springy */
.btn{position:relative;overflow:hidden;font-family:var(--body);font-weight:650;letter-spacing:.005em;
  transition:transform .28s cubic-bezier(.34,1.5,.5,1),box-shadow .28s,filter .25s,background .25s}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .65s ease}
.btn:hover::after{left:165%}
.btn:hover{transform:translateY(-2px)}
.btn-amber{background:linear-gradient(135deg,#E7A53F 0%,#B26A1E 100%);color:#FFF8EC;
  box-shadow:0 12px 28px -12px var(--glow-amber),0 0 0 1px rgba(154,90,28,.22),inset 0 1px 0 rgba(255,255,255,.38)}
.btn-amber:hover{box-shadow:0 18px 38px -12px var(--glow-amber),0 0 26px -6px var(--glow-amber),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-forest{background:linear-gradient(135deg,#386A45 0%,#21381F 100%);color:#EFE7D6;
  box-shadow:0 12px 28px -14px var(--glow-forest),inset 0 1px 0 rgba(255,255,255,.13)}
.btn-forest:hover{box-shadow:0 18px 38px -14px var(--glow-forest),0 0 26px -8px var(--glow-forest)}
.btn-ghost{background:rgba(255,255,255,.5);backdrop-filter:blur(8px);border-color:rgba(35,40,29,.14);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.78);border-color:rgba(35,40,29,.2)}
.btn-danger{background:rgba(168,72,46,.07);border-color:rgba(168,72,46,.32);color:var(--rust)}
.btn-danger:hover{background:rgba(168,72,46,.13)}

/* GLASS INPUTS + glow focus */
input[type=text],input[type=password],input[type=number],input[type=search],textarea,select{
  background:rgba(255,255,255,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1.5px solid rgba(35,40,29,.14);border-radius:13px;font-family:var(--body);
  transition:border-color .2s,box-shadow .25s,background .2s}
input:focus,textarea:focus,select:focus{border-color:var(--amber);background:rgba(255,255,255,.9);
  box-shadow:0 0 0 4px rgba(201,128,47,.16),0 0 24px -6px var(--glow-amber)}

/* PILLS + labels = mono/tech */
.pill{font-family:var(--mono),monospace;font-weight:600;letter-spacing:.03em}

/* etwas lebendigerer Hintergrund-Glow */
.glowbg b{opacity:.62}

/* ---- Animations-Politur ---- */
.tpl{transition:transform .3s cubic-bezier(.34,1.5,.5,1),box-shadow .3s,border-color .3s,background .3s}
.tpl:hover{box-shadow:0 18px 40px -22px rgba(40,32,16,.45),0 0 24px -10px var(--glow-forest)}
.srow{transition:transform .35s cubic-bezier(.34,1.4,.5,1),box-shadow .35s}
.srow:hover{transform:translateY(-3px)}
.modal{transition:opacity .3s ease}
.modal.open .sheet{animation:sheetIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes sheetIn{from{opacity:0;transform:translateY(28px) scale(.96);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.sectit{animation:fu .7s ease both}
@media(prefers-reduced-motion:reduce){.modal.open .sheet,.sectit{animation:none}}