/* Orthodenta Bewerbung – Funnel (Optik nach Prototyp). Alle Regeln unter .odb-funnel, Buttons ohne !important. */
:root{}
.odb-funnel,.odb-funnel *,.odb-funnel *::before,.odb-funnel *::after{box-sizing:border-box}
.odb-funnel{font-family:'SofiaPro',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
@media (min-width:768px){.odb-funnel{font-size:18px}}
.odb-funnel [hidden]{display:none}
.odb-funnel h2,.odb-funnel h3{text-transform:none;letter-spacing:normal}
.odb-funnel fieldset{border:0;margin:0;padding:0;min-width:0}
.odb-funnel legend{padding:0;width:100%}
.odb-funnel label{display:block;line-height:1.4;margin:0;vertical-align:baseline}
.odb-funnel .odb-consent label{display:inline;line-height:1.5;font-size:16px}
.odb-funnel button{white-space:normal;line-height:1.3;font-family:inherit;margin:0}
.odb-funnel dl,.odb-funnel dd{margin:0}
.odb-funnel p{margin:0}
.odb-noscript{padding:16px;background:#fff;border:1px solid var(--odb-line)}
.odb-noscript a{color:var(--odb-orange);text-decoration:underline}
.odb-funnel .odb-hint{margin:0 0 22px 27px}
.odb-funnel .odb-error{margin:8px 0 0}
.odb-funnel .odb-form-error{margin:18px 0 0;padding:12px 14px;background:#fbe3e1;color:#8a1c14;font-size:16px}

/* ===== Funnel ===== */
.odb-funnel{
  --odb-blue:#095E7B;--odb-orange:#EF7F1B;--odb-beige:#F2F0EE;--odb-line:#DCD6CF;--odb-white:#fff;
  --odb-ease:cubic-bezier(.4,0,.2,1);
  position:relative;background:var(--odb-beige);color:var(--odb-blue);
  padding:40px 20px 48px;overflow:hidden;isolation:isolate;
}
@media (min-width:768px){.odb-funnel{padding:60px 20px 72px}}
.odb-funnel::before{ /* dezentes Smile-Logo, wie die Hintergrund-Logos der Seite */
  content:"";position:absolute;z-index:-1;right:20px;top:16px;width:44px;height:44px;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23095E7B' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='50' r='42'/%3E%3Cpath d='M26 46 H74 A24 24 0 0 1 26 46 Z'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.55;
}
@media (min-width:768px){.odb-funnel::before{top:44px;width:60px;height:60px}}
.odb-inner{max-width:920px;margin:0 auto}

.odb-head{display:flex;align-items:flex-start;gap:0;margin:0 0 20px;padding-right:64px}
.odb-head h2,.odb-step-title{font-family:'SofiaProBold',sans-serif;font-weight:400;color:var(--odb-blue);margin:0;line-height:1.25}
.odb-head h2{font-size:28px;padding-top:6px}
@media (min-width:768px){.odb-head h2{font-size:34px}}


/* Doppelpfeil wie auf der Seite: beige, per Maske eingefärbt */
.odb-arrow{display:block;flex:none;width:50px;height:50px;margin-left:-16px;background:#D9D2C9;-webkit-mask:url('../img/doppel-pfeil.svg') no-repeat center/contain;mask:url('../img/doppel-pfeil.svg') no-repeat center/contain}
.odb-step-head .odb-arrow{width:40px;height:40px;margin-left:-13px}

/* Fortschritt */
.odb-progress{margin:0 0 28px}
.odb-progress-text{display:flex;justify-content:space-between;font-size:14px;margin:0 0 8px;letter-spacing:.02em}
.odb-progress-text strong{font-weight:400;font-family:'SofiaProBold',sans-serif}
.odb-bar{height:6px;background:var(--odb-line);position:relative;overflow:hidden}
.odb-bar-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--odb-orange);transition:width .45s var(--odb-ease)}

/* Schritte + weicher Wechsel */
.odb-step[hidden]{display:none}
.odb-step{outline:none}
.odb-step.odb-in{animation:odbIn .25s var(--odb-ease) both}
.odb-step.odb-in.odb-back{animation-name:odbInBack}
@keyframes odbIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes odbInBack{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

.odb-step-head{display:flex;align-items:flex-start;margin:0 0 6px}
.odb-step-title{font-size:24px;padding-top:4px;outline:none}
@media (min-width:768px){.odb-step-title{font-size:28px}}
.odb-hint{margin:0 0 22px 27px;font-size:16px;line-height:1.5}

/* Kacheln (echte Radio-Felder, per Tastatur bedienbar) */
.odb-tiles{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:600px){.odb-tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.odb-tiles{grid-template-columns:repeat(3,1fr)}}
.odb-tile{position:relative;display:block}
.odb-tile input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.odb-tile-face{
  display:flex;align-items:center;gap:12px;min-height:56px;width:100%;
  padding:9px 46px 9px 14px;background:var(--odb-white);color:var(--odb-blue);
  border:1px solid var(--odb-line);text-align:left;font:inherit;font-size:17px;line-height:1.3;
  transition:transform .2s var(--odb-ease),border-color .2s,box-shadow .2s;
}
.odb-tile-face svg{width:24px;height:24px;flex:none;stroke:var(--odb-orange);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.odb-tile-check{ /* kleines Häkchen, blendet bei Auswahl ein */
  position:absolute;right:13px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;
  background:var(--odb-orange);opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s var(--odb-ease);
}
.odb-tile-check svg{position:absolute;inset:0;width:100%;height:100%;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.odb-tile:hover .odb-tile-face{transform:translateY(-3px);border-color:var(--odb-blue);box-shadow:0 8px 18px rgba(9,94,123,.12)}}
.odb-tile input:checked + .odb-tile-face{border:2px solid var(--odb-orange);padding:8px 45px 8px 13px}
.odb-tile input:checked + .odb-tile-face .odb-tile-check{opacity:1;transform:none}
.odb-tile input:focus-visible + .odb-tile-face{outline:2px solid var(--odb-orange);outline-offset:2px}

/* „Anderer Standort“ aufklappbar */
.odb-more{margin-top:12px}
button.odb-tile-face{cursor:pointer;position:relative}
.odb-more-btn.odb-tile-face{padding-right:46px;background:var(--odb-white);color:var(--odb-blue)}
.odb-more-btn .odb-chev{position:absolute;right:18px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2px solid var(--odb-orange);border-bottom:2px solid var(--odb-orange);transform:rotate(45deg);transition:transform .25s var(--odb-ease)}
.odb-more-btn[aria-expanded=true] .odb-chev{transform:rotate(-135deg);margin-top:-4px}
.odb-more-panel{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--odb-ease)}
.odb-more-panel.is-open{grid-template-rows:1fr}
.odb-more-panel>div{min-height:0;overflow:hidden}
.odb-more-panel .odb-tiles{padding-top:12px}
.odb-subtitle{margin:22px 0 10px;font-size:15px;letter-spacing:.02em}

/* Formularfelder */
.odb-fields{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:600px){.odb-fields{grid-template-columns:1fr 1fr}.odb-fields .odb-full{grid-column:1/-1}}
.odb-field label{display:block;margin:0 0 6px;font-size:15px}
.odb-field .odb-opt{opacity:.7}
.odb-funnel .odb-field .odb-input{
  display:block;width:100%;max-width:none;font:inherit;font-size:17px;line-height:1.4;color:var(--odb-blue);background:var(--odb-white);
  border:1px solid var(--odb-line);border-radius:0;padding:12px 14px;min-height:50px;margin:0;box-shadow:none;
  transition:border-color .2s,box-shadow .2s;
}
.odb-funnel .odb-field textarea.odb-input{min-height:140px;resize:vertical}
@media (hover:hover){.odb-funnel .odb-field .odb-input:hover{border-color:var(--odb-blue)}}
.odb-funnel .odb-field .odb-input:focus{outline:none;border-color:var(--odb-orange);box-shadow:0 0 0 1px var(--odb-orange);background:var(--odb-white);color:var(--odb-blue)}
.odb-funnel .odb-field .odb-input:focus-visible{outline:2px solid var(--odb-orange);outline-offset:2px}
.odb-funnel .odb-field.is-invalid .odb-input{border-color:#b3261e}
.odb-error{margin:6px 0 0;font-size:14px;color:#b3261e;min-height:0}
.odb-error[hidden]{display:none}
.odb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Zustimmung + Zusammenfassung */
.odb-consent{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;padding:16px;background:var(--odb-white);border:1px solid var(--odb-line)}
.odb-consent input{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--odb-orange)}
.odb-consent input:focus-visible{outline:2px solid var(--odb-orange);outline-offset:2px}
.odb-consent label{font-size:16px;line-height:1.5}
.odb-consent a{color:var(--odb-orange);text-decoration:underline;text-underline-offset:2px}
.odb-consent a:hover{color:var(--odb-blue)}
.odb-consent a:focus-visible{outline:2px solid var(--odb-orange);outline-offset:2px}
.odb-recap{margin:0 0 6px;padding:0;display:grid;gap:0;background:var(--odb-white);border:1px solid var(--odb-line)}
.odb-recap div{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--odb-line);font-size:16px}
.odb-recap div:last-child{border-bottom:0}
.odb-recap dt{opacity:.75}.odb-recap dd{margin:0;text-align:right}

/* Buttons – alle Zustände ausdrücklich, höhere Spezifität gegen das Hello-Pink, ohne !important */
.odb-funnel .odb-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:14px 0 0}
.odb-funnel button.odb-btn{
  font:inherit;font-family:'SofiaProBold',sans-serif;letter-spacing:.04em;text-transform:uppercase;font-size:15px;
  min-height:48px;padding:10px 24px;border:2px solid var(--odb-orange);border-radius:0;
  background:var(--odb-orange);color:#fff;transition:background-color .2s,color .2s,transform .2s,box-shadow .2s;
}
.odb-funnel button.odb-btn.odb-btn-ghost{background:transparent;color:var(--odb-blue);border-color:transparent;padding-left:6px;padding-right:12px;text-transform:none;letter-spacing:0;font-size:16px}
.odb-funnel button.odb-btn.odb-btn-ghost::before{content:"";display:inline-block;width:9px;height:9px;margin-right:10px;border-left:2px solid var(--odb-orange);border-bottom:2px solid var(--odb-orange);transform:rotate(45deg) translateY(-1px)}
@media (hover:hover){
  .odb-funnel button.odb-btn:hover{background:#fff;color:var(--odb-orange);border-color:var(--odb-orange)}
  .odb-funnel button.odb-btn.odb-btn-ghost:hover{background:transparent;color:var(--odb-orange);border-color:transparent}
}
.odb-funnel button.odb-btn:focus{background:var(--odb-orange);color:#fff;border-color:var(--odb-orange)}
.odb-funnel button.odb-btn.odb-btn-ghost:focus{background:transparent;color:var(--odb-blue);border-color:transparent}
.odb-funnel button.odb-btn:focus-visible{outline:2px solid var(--odb-orange);outline-offset:2px}
.odb-funnel button.odb-btn:active{background:#d96d0f;border-color:#d96d0f;color:#fff;transform:translateY(1px)}
.odb-funnel button.odb-btn.odb-btn-ghost:active{background:transparent;color:var(--odb-orange);border-color:transparent}
.odb-funnel button.odb-btn[disabled]{background:var(--odb-line);border-color:var(--odb-line);color:#7b8f98;cursor:not-allowed;transform:none}
.odb-funnel button.odb-tile-face:hover,.odb-funnel button.odb-tile-face:focus{background:var(--odb-white);color:var(--odb-blue)}
.odb-funnel button.odb-tile-face:focus-visible{outline:2px solid var(--odb-orange);outline-offset:2px}

/* Danke-Ansicht */
.odb-thanks{text-align:center;padding:12px 0 0}
.odb-thanks svg.odb-smile{width:96px;height:96px;display:block;margin:0 auto 18px;overflow:visible}
.odb-smile .p{fill:none;stroke:var(--odb-blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.odb-smile .m{stroke:var(--odb-orange)}
.odb-thanks.is-on .odb-smile .ring{animation:odbDraw .9s var(--odb-ease) .1s forwards}
.odb-thanks.is-on .odb-smile .m{animation:odbDraw .8s var(--odb-ease) .8s forwards}
.odb-thanks.is-on svg.odb-smile{animation:odbPop .5s var(--odb-ease) 1.5s}
@keyframes odbDraw{to{stroke-dashoffset:0}}
@keyframes odbPop{40%{transform:scale(1.07)}100%{transform:none}}
.odb-thanks .odb-step-title{display:block;font-size:28px;margin:0 0 10px;opacity:0;transform:translateY(8px)}
.odb-thanks p{margin:0 auto;max-width:560px;opacity:0;transform:translateY(8px)}
.odb-thanks.is-on .odb-step-title{animation:odbText .5s var(--odb-ease) 1.5s forwards}
.odb-thanks.is-on p{animation:odbText .5s var(--odb-ease) 1.7s forwards}
@keyframes odbText{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .odb-funnel *,.odb-funnel *::before,.odb-funnel *::after{animation:none!important;transition:none!important}
  .odb-smile .p{stroke-dashoffset:0}
  .odb-thanks .odb-step-title,.odb-thanks p{opacity:1;transform:none}
}
.odb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}