/* funnel-clone — Styles, 1:1 abgeleitet aus dem Perspective-Rendering (Tailwind "fun-*"-Klassen + computed styles).
   Breakpoints wie Tailwind: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px. */

/* ---- Fonts: Nunito v32 (variabler Font, wght 200-900), selbst gehostet. Exakt die Datei, die Google Fonts dem Original
   für mobile Browser ausliefert (XRXV3I6Li01BKofINeaBTMnFcQ / ...O-aBTMnFcQIG) — Subsets latin + latin-ext, Gewichte 400/700. ---- */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---- Preflight-Reset (Tailwind-äquivalent, nur was gebraucht wird) ---- */
*,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-tap-highlight-color:transparent}
body{margin:0;line-height:inherit;background:#fff}
h1,h2,h3,h4,h5,h6,p{margin:0;font-size:inherit;font-weight:inherit}
img,svg{display:block;max-width:100%;height:auto;vertical-align:middle}
button,input{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button{background:transparent;background-image:none;cursor:pointer;text-transform:none;-webkit-appearance:button}
a{color:inherit;text-decoration:inherit}
u{text-decoration:none}
strong{font-weight:700}
[hidden]{display:none!important}

:root{
  --ui-font:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --emoji-font:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI","Twemoji Mozilla","Noto Color Emoji","Android Emoji";
}

/* ---- Grundgerüst ---- */
.funnel{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  font-family:'Nunito',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size:16px;line-height:1.5;color:#000;background:var(--bg,#fff)}
.grow{flex:1 1 0%}
.pagebody{position:relative;z-index:10}
.rel{position:relative;width:100%}
.h-full{height:100%}
.w-full{width:100%}
.grow-1{flex-grow:1}
.mt-4{margin-top:1rem}
.pb-6{padding-bottom:1.5rem!important}

/* Header: px-4 py-2 -> inner p-2 -> Logo h-8 */
.hdr{width:100%;padding:.5rem 1rem;transition:all .3s}
.hdr-in{display:flex;align-items:center;justify-content:center}
.hdr-box{padding:.5rem;display:flex;align-items:flex-start}
.logo{display:inline-block;height:2rem;width:auto}

/* Block = Perspective-Section (Padding aus "box"), Inhalt in zentriertem max-width-Container */
.blk{position:relative;width:100%;background-size:cover}
.maxw{width:100%;max-width:28rem;margin-left:auto;margin-right:auto}
.maxw-badge{width:100%;max-width:28rem;margin-left:auto;margin-right:auto}
.maxw-grid{width:100%;max-width:28rem;margin-left:auto;margin-right:auto}
@media (min-width:640px){.maxw,.maxw-badge,.maxw-grid{max-width:36rem}}
@media (min-width:768px){.maxw,.maxw-badge{max-width:48rem}.maxw-grid{max-width:768px}}
@media (min-width:1024px){.maxw{max-width:56rem}.maxw-grid{max-width:1024px}}
@media (min-width:1280px){.maxw-grid{max-width:1280px}}
@media (min-width:1536px){.maxw-grid{max-width:1536px}}

/* ---- Rich-Text ---- */
.wrapper{overflow-wrap:break-word;color:var(--textColor)}
.wrapper a{color:var(--linkColor);text-decoration:underline}
.wrapper p:empty:after{content:"\a0";font-family:var(--ui-font)}
.ta-center{text-align:center}
.ta-left{text-align:left}
.ta-right{text-align:right}
.t{font-size:var(--fs-m);line-height:var(--lh-m);letter-spacing:var(--ls-m)}
@media (min-width:640px){.t{font-size:var(--fs-t);line-height:var(--lh-t);letter-spacing:var(--ls-t)}}
@media (min-width:768px){.t{font-size:var(--fs-d);line-height:var(--lh-d);letter-spacing:var(--ls-d)}}
.emoji{display:inline-block;font-family:var(--ui-font)}
.emoji img{display:block;height:1em;width:auto}

/* ---- Bilder ---- */
.media{padding:0}
.media-badge{padding:0}
@media (min-width:640px){.media-badge{padding:1.5rem 3rem}}
@media (min-width:768px){.media-badge{padding:2.5rem 5rem}}
.frame{overflow:hidden;line-height:0}
.frame img{width:100%;object-fit:cover;object-position:center}
.frame-xl{border-radius:.75rem}
.frame-sm{border-radius:.25rem}
.frame-hero{border-radius:.75rem}
.frame-bleed{border-radius:.75rem}
@media not all and (min-width:640px){
  .frame-hero{border-radius:0}
  .frame-bleed{border-radius:0;width:calc(100% + 48px);transform:translateX(-1.5rem)}
}

/* ---- Buttons ---- */
.btn{display:block;width:100%;cursor:pointer;background-repeat:no-repeat;padding:1rem 1.5rem;transition:all .15s cubic-bezier(.4,0,.2,1);
  color:var(--buttonColor);border-radius:.5rem;box-shadow:inset 0 0 1px rgba(0,0,0,.5);background-color:var(--buttonBgColor);
  margin-left:auto;margin-right:auto;text-align:center;transform:translate(0,0)}
.btn:active{transform:scale(.9);transition-duration:.2s}
@media (min-width:640px){.btn:hover,.btn:active{background-color:var(--buttonBgColorDark)}}
@media (min-width:1024px){.btn{padding-left:2rem;padding-right:2rem;width:fit-content;min-width:0}}
.jittery{animation:fun-jittery 4s infinite}
@keyframes fun-jittery{5%,50%{transform:scale(1)}10%{transform:scale(.9)}15%{transform:scale(1.05)}20%{transform:scale(1.05) rotate(-3.5deg)}23%{transform:scale(1.05) rotate(3.5deg)}26%{transform:scale(1.05) rotate(-2.5deg)}30%{transform:scale(1.05) rotate(2.5deg)}35%{transform:scale(1.05) rotate(0)}}

/* ---- Grid (gridRow / gridColumn) ---- */
.grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem;padding-left:1rem;padding-right:1rem}
@media (min-width:768px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.grid{padding-left:3rem;padding-right:3rem}.grid.lg-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.col{position:relative;width:100%;background-size:cover;border-radius:.75rem;height:100%}
.col-in{display:flex;height:100%;flex-direction:column}
.col-in.plain{padding:.5rem}
.col-in.framed{padding:1rem}
@media (min-width:640px){.col-in.plain{padding:1.5rem}.col-in.framed{padding:2.5rem}}
.va-center{justify-content:center}
.va-start{justify-content:flex-start}
.va-end{justify-content:flex-end}

/* ---- Liste (Icon + Text) ---- */
.list{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1.5rem}
.li{display:flex;width:100%;align-items:flex-start;vertical-align:top}
.li-ico{flex-shrink:0;display:flex;align-items:center;justify-content:center;transform:translateZ(0)}
.li-ico .frame{width:100%}
.li-text{display:flex;width:100%;flex-grow:1;align-items:center;overflow-wrap:break-word;min-width:0;margin-left:1.5rem;font-size:16px}
.li-text > div{width:100%}

/* ---- Trennlinie ---- */
.divider{height:0;user-select:none;padding:1.25rem 0}
.divider-line{user-select:none;font-family:var(--ui-font);border-top-width:1px;border-top-style:solid}

/* ---- Fragen ---- */
.qform{margin:0}
.q-text{padding:0}
/* Bild-Antworten: flex-wrap, 2 pro Reihe (mobile), 4 pro Reihe ab md */
.ans-media{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:1rem;line-height:1.25}
@media (min-width:768px){.ans-media{margin-top:2.5rem}}
.ma-col{position:relative;max-width:calc(50% - 8px);flex-basis:calc(50% - 8px)}
@media (min-width:768px){.ma-col{max-width:calc(25% - 12px);flex-basis:calc(25% - 12px)}}
.ma{position:relative;z-index:10;display:flex;height:100%;width:100%;cursor:pointer;flex-direction:column;overflow:hidden;border-radius:.5rem;text-align:inherit;
  transition:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter .15s cubic-bezier(0,0,.2,1);transform:translate(0,0)}
.ma:active{transform:scale(.9);transition-duration:.2s}
@media (min-width:640px){.ma{transition-duration:.5s}.ma:hover{transform:scale(1.05);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}}
.ma-img{position:relative;aspect-ratio:4/3;width:100%}
.ma-label{position:relative;width:100%;padding:1rem;flex-grow:1;background-size:cover}
/* Text-Antworten */
.ans-text{margin-top:1.5rem;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem}
@media (min-width:768px){.ans-text{margin-top:2.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}}
.ans-multi{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem}
@media (min-width:640px){.ans-multi{margin-top:.5rem}}
@media (min-width:768px){.ans-multi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ta{position:relative;display:flex;height:100%;min-height:4rem;width:100%;cursor:pointer;user-select:none;align-items:center;gap:1rem;overflow:hidden;
  background-color:var(--answerBgColor);background-repeat:no-repeat;padding:1rem;border-radius:.5rem;text-align:left;
  box-shadow:0 1px 3px rgba(0,0,0,.1),inset 0 0 1px 1px rgba(0,0,0,.1);transition:all .15s cubic-bezier(.4,0,.2,1);transform:translate(0,0)}
.ta:not(.ta-multi):active{transform:scale(.9);transition-duration:.2s}
@media (min-width:640px){.ta:hover,.ta:not(.ta-multi):active{background-color:var(--answerBgColorDark)}}
.ta .grow-1{display:block}
.ta .grow-1 p,.ta .grow-1 h4{padding:0!important}
/* Checkbox-Kreis */
.chk-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chk{position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:9999px;background:#fff;box-shadow:inset 0 0 0 2px rgba(0,0,0,.2);display:block}
.chk-in{position:absolute;inset:0;width:100%;height:100%;border-radius:9999px;background-position:center;background-repeat:no-repeat;opacity:0;transition:all .15s;box-shadow:inset 0 0 0 2px rgba(0,0,0,.2);
  background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDExIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQuMzYyMjEgNi4xNTgzQzQuMTYzMTEgNi4zNTQxMyAzLjg0MjIgNi4zNDg5IDMuNjQ5NTggNi4xNDY3TDIuNTIzMTggNC45NjQyOEMyLjMyMDUyIDQuNzUxNTQgMS45Nzg5OCA0Ljc1ODU3IDEuNzg1MjUgNC45Nzk0N0wxLjQyMzE4IDUuMzkyMjlDMS4yNDk0NiA1LjU5MDM2IDEuMjU5MjQgNS44ODkyNCAxLjQ0NTUzIDYuMDc1NTNMMy42NDQzOSA4LjI3NDM5QzMuODQwNDUgOC40NzA0NSA0LjE1ODYyIDguNDY5NTMgNC4zNTM1NCA4LjI3MjMzTDEwLjIzMDUgMi4zMjY3QzEwLjQyMzggMi4xMzExMSAxMC40MjI5IDEuODE2MTEgMTAuMjI4NCAxLjYyMTY1TDkuOTU3NCAxLjM1MDYzQzkuNzYzMjkgMS4xNTY1MiA5LjQ0ODk2IDEuMTU1MjEgOS4yNTMyNCAxLjM0NzcxTDQuMzYyMjEgNi4xNTgzWiIgZmlsbD0id2hpdGUiIHN0cm9rZT0id2hpdGUiLz48L3N2Zz4=")}
.ta-multi:has(.chk-input:checked){box-shadow:0 1px 3px rgba(0,0,0,.1),inset 0 0 0 2px var(--checkColor)}
.ta-multi:has(.chk-input:checked) .chk-in{opacity:1;background-color:var(--checkColor)}
.ta-multi.checked{box-shadow:0 1px 3px rgba(0,0,0,.1),inset 0 0 0 2px var(--checkColor)}
.ta-multi.checked .chk-in{opacity:1;background-color:var(--checkColor)}

/* ---- Formular ---- */
.form{margin-left:auto;margin-right:auto;max-width:36rem}
@media (min-width:640px){.form{margin-top:.5rem}}
.form > * + *{margin-top:1rem}
.inp{position:relative;display:flex;align-items:center}
.inp-ico{position:absolute;left:1rem;top:0;display:flex;height:3.5rem;user-select:none;align-items:center}
.emo{font-size:20px;line-height:1.5;font-family:var(--emoji-font)}
.inp-box{width:100%;border-width:1px;background:#fff;vertical-align:middle;transition:all .15s;border-radius:.5rem;padding-left:52px;height:3.5rem;box-shadow:0 0 0 2px transparent}
.inp-box:focus-within{border-color:var(--focusColor);box-shadow:0 0 0 2px var(--outlineColor)}
.inp-box.invalid{border-color:#ff3b30;box-shadow:0 0 0 2px #ff3b3026}
.inp-box input{width:100%;appearance:none;-webkit-appearance:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:0;border:none;background:transparent;vertical-align:middle;
  font-family:var(--ui-font);font-size:16px;font-weight:300;outline:none;transition:all .15s;color:#000;height:100%;padding-right:2.5rem}
.inp-box input::placeholder{color:#6b7280;font-weight:300}
.file-row{position:relative;display:flex;align-items:center;background:#fff;border-radius:.5rem}
.file-ico{position:absolute;left:1.5rem;top:1.75rem;display:flex;height:18px;user-select:none;align-items:center;z-index:1}
.file-box{min-height:90px;width:100%;cursor:pointer;border-width:1px;padding:.5rem;vertical-align:middle;font-family:var(--ui-font);font-size:16px;transition:all .15s;border-radius:.5rem;box-shadow:0 0 0 2px transparent;outline:none}
.file-box:focus{border-color:var(--focusColor);box-shadow:0 0 0 2px var(--outlineColor)}
.file-box.invalid{border-color:#ff3b30}
.file-dash{display:flex;width:100%;height:100%;align-items:center;border-width:1px;border-style:dashed;border-radius:.375rem;padding:1rem 1rem 1rem 3rem}
.file-p1{overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;color:#111827}
.file-p2{margin-top:.25rem;font-size:.75rem;line-height:1rem;color:#6b7280}

/* ---- Footer ---- */
.foot{display:flex;height:100%;align-items:center;justify-content:center;font-family:var(--ui-font);font-size:.875rem;line-height:1.25rem;font-weight:400}
.foot-links{text-align:center;font-size:.75rem;line-height:1rem;color:rgba(0,0,0,.6)}
.foot-links a,.foot-links .linkbtn{font-family:var(--ui-font);text-decoration:underline;color:inherit}
.foot-links .sep{padding:0 .375rem}
.linkbtn{display:inline;cursor:pointer;font-size:inherit;line-height:inherit}

/* ---- Fortschrittsbalken ---- */
.progress{position:fixed;bottom:0;left:0;z-index:10;height:.25rem;width:100%;background-color:color-mix(in srgb,var(--progress) 20%,transparent)}
.progress-in{position:absolute;left:0;top:0;height:100%;background-color:var(--progress);transition:width .4s}

/* ---- Cookie-Banner (explizites Layout wie im Original) ---- */
.cookie-wrap{overflow:hidden}
.cookie-bg{position:fixed;left:0;top:0;z-index:999;height:100%;height:100dvh;width:100vw;background:rgba(0,0,0,.2)}
.cookie-bg > .cookie-dlg{}
.cookie-bg{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:.5rem}
@media (min-width:640px){.cookie-bg{justify-content:center}}
.cookie-dlg{width:calc(100% - 16px);position:relative;border-radius:.5rem;background:#f9fafb;font-family:var(--ui-font);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
@media (min-width:640px){.cookie-dlg{width:360px}}
.cookie-body{max-height:496px;overflow-y:auto;padding:1.5rem;color:#374151;font-size:16px}
.cookie-icon{margin-bottom:.75rem}
.cookie-title{margin-bottom:.75rem;font-weight:600;color:#1f2937;font-size:1.5rem;line-height:2rem}
.cookie-p{font-size:.875rem;line-height:1.625}
.cookie-links{margin-top:.75rem;font-size:.875rem}
.cookie-links a{padding-right:.5rem;color:#374151;text-decoration:underline}
.cookie-row{margin:1rem 0;display:flex;align-items:center;font-size:.875rem;color:#374151}
.cookie-tri{width:0;height:0;border-left:6px solid #374151;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-right:.5rem}
.cookie-row-label{flex:1}
.cookie-switch{display:inline-block;width:44px;height:24px;border-radius:9999px;background:#19ab27;position:relative}
.cookie-switch:after{content:"";position:absolute;right:2px;top:2px;width:20px;height:20px;border-radius:9999px;background:#fff}
.cookie-btn-primary{height:3rem;width:100%;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background:#2563eb;font-size:.875rem;font-weight:500;color:#fff;transition:background-color .15s}
.cookie-btn-primary:hover{background:#1d4ed8}
.cookie-btn-secondary{margin-top:.75rem;height:3rem;width:100%;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background:#dbeafe;font-size:.875rem;font-weight:500;color:#1d4ed8}
.cookie-btn-secondary:hover{color:#1e40af}