:root{
  --nacht:#18334a;
  --blau:#2d678a;
  --himmel:#dcebf1;
  --limette:#bdd46b;
  --creme:#f5f2ea;
  --papier:#fffefa;
  --text:#20313d;
  --grau:#71818a;
  --linie:#d9e2e4;
  --weiss:#fff;
  --sans:"Aptos","Segoe UI",system-ui,sans-serif;
  --serif:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --schatten:0 28px 75px rgba(24,51,74,.17);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);font-family:var(--sans);
  background:
    radial-gradient(circle at 7% 15%,rgba(255,255,255,.9),transparent 24%),
    linear-gradient(145deg,#e8eef0 0,#f5f2ea 55%,#e7ece7 100%);
}
button,input{font:inherit}
a{color:inherit}
.beratung{
  width:min(1080px,calc(100% - 32px));min-height:calc(100vh - 44px);
  display:grid;grid-template-columns:310px minmax(0,1fr);
  margin:22px auto;overflow:hidden;border:1px solid rgba(24,51,74,.12);
  border-radius:32px 8px 32px 8px;background:var(--papier);box-shadow:var(--schatten);
}
.fachprofil{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:24px 27px 22px;overflow:hidden;text-align:center;color:#fff;
  background:
    radial-gradient(circle at 10% 90%,rgba(189,212,107,.16),transparent 30%),
    linear-gradient(165deg,#244a68,var(--nacht));
}
.fachprofil::before{
  content:"";position:absolute;width:230px;height:230px;right:-150px;top:70px;
  border:1px solid rgba(255,255,255,.1);border-radius:50%;
}
.fachprofil__brand{width:100%;display:flex;align-items:center;gap:10px;text-align:left}
.marke{
  width:36px;height:36px;display:grid;place-items:center;flex:none;
  border-radius:12px 50% 50% 50%;background:var(--limette);color:var(--nacht);
  font:700 21px/1 var(--serif);
}
.fachprofil__brand div{display:flex;flex-direction:column;gap:2px}
.fachprofil__brand strong{font:700 14px/1 var(--serif)}
.fachprofil__brand small{color:#aebfca;font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.fachprofil__online{
  position:relative;z-index:1;align-self:flex-end;margin-top:27px;padding:6px 10px;
  border:1px solid rgba(255,255,255,.13);border-radius:999px;font-size:9px;color:#d6e0e5;
}
.fachprofil__online i,.dialog__kopf i{
  width:7px;height:7px;display:inline-block;margin-right:6px;border-radius:50%;
  background:var(--limette);box-shadow:0 0 0 4px rgba(189,212,107,.13);
}
.fachprofil__foto{
  position:relative;z-index:1;width:142px;height:142px;margin-top:16px;
  border:5px solid #edf3f3;border-radius:50% 18px 50% 50%;
  object-fit:cover;object-position:center 28%;box-shadow:0 18px 40px rgba(0,0,0,.27);
}
.fachprofil__rubrik{margin:19px 0 8px;color:var(--limette);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.fachprofil h1{margin:0;font:700 34px/1.04 var(--serif);letter-spacing:-.025em}
.fachprofil__beruf{margin:10px 0 0;color:#c5d1d8;font-size:11px;line-height:1.5}
.fachprofil__werte{width:100%;display:grid;grid-template-columns:1fr 1fr;margin:24px 0 19px;padding:15px 0;border-block:1px solid rgba(255,255,255,.12)}
.fachprofil__werte div{display:flex;flex-direction:column;gap:3px}.fachprofil__werte div+div{border-left:1px solid rgba(255,255,255,.12)}
.fachprofil__werte strong{font-size:14px}.fachprofil__werte span{color:#99adb9;font-size:8px;letter-spacing:.07em;text-transform:uppercase}
.fachprofil__text{margin:0;color:#c8d3da;font-size:11px;line-height:1.7}
.fachprofil__zeit{width:100%;display:flex;justify-content:space-between;margin-top:auto;padding-top:28px;color:#9db0bb;font-size:9px}
.fachprofil__zeit time{color:#fff}
.dialog{min-width:0;display:flex;flex-direction:column;background:var(--papier)}
.dialog__kopf{min-height:76px;display:flex;align-items:center;gap:11px;padding:12px 20px;border-bottom:1px solid var(--linie)}
.dialog__kopf img{width:46px;height:46px;border-radius:50% 8px 50% 50%;object-fit:cover;object-position:center 28%}
.dialog__kopf>div:nth-child(2){display:flex;flex:1;flex-direction:column;gap:4px}
.dialog__kopf strong{font:700 16px/1 var(--serif);color:var(--nacht)}
.dialog__kopf span{font-size:9px;color:var(--grau)}.dialog__kopf i{width:6px;height:6px;box-shadow:none}
.dialog__hinweis{padding:7px 10px;border:1px solid var(--linie);border-radius:999px;color:var(--blau);font-size:9px;font-weight:700}
.fortschritt{height:4px;background:#eef2ef}.fortschritt span{display:block;width:3%;height:100%;background:linear-gradient(90deg,var(--blau),var(--limette));transition:width .45s ease}
.nachrichten{
  min-height:0;height:calc(100vh - 166px);flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:23px clamp(14px,3.5vw,38px);scrollbar-width:thin;scrollbar-color:#c8d7dc transparent;
  background:
    linear-gradient(rgba(255,254,250,.94),rgba(255,254,250,.94)),
    radial-gradient(circle at 1px 1px,#d7e3e7 1px,transparent 0);
  background-size:auto,22px 22px;
}
.tag{width:max-content;margin:0 auto 22px;padding:5px 11px;border:1px solid var(--linie);border-radius:999px;background:#fff;color:var(--grau);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.meldung{max-width:84%;display:flex;align-items:flex-end;gap:8px;margin-bottom:12px;opacity:0;transform:translateY(8px)}
.meldung.sichtbar{animation:erscheinen .32s ease forwards}.meldung--gast{margin-left:auto;justify-content:flex-end}
.meldung__foto{width:31px;height:31px;flex:none;border-radius:50% 7px 50% 50%;object-fit:cover;object-position:center 28%}
.meldung__inhalt{min-width:0}.meldung__name{margin:0 0 4px 2px;color:var(--blau);font-size:9px;font-weight:700}
.meldung__blase{padding:11px 14px;border:1px solid var(--linie);border-radius:5px 17px 17px 17px;background:#fff;box-shadow:0 5px 18px rgba(24,51,74,.055);font-size:14px;line-height:1.55;color:#30404b}
.meldung--gast .meldung__blase{border-color:var(--blau);border-radius:17px 5px 17px 17px;background:var(--blau);color:#fff}
.meldung__zeit{display:block;margin:4px 2px 0;color:#a0abb0;font-size:9px}.meldung--gast .meldung__zeit{text-align:right}
.meldung__blase strong{color:var(--blau)}
.meldung__bild{display:block;max-width:100%;max-height:420px;margin-top:9px;border-radius:11px;object-fit:contain;background:#f3f5f2}
.meldung__bild--produkt{width:min(235px,100%);margin-inline:auto}
.tippt{display:flex;align-items:flex-end;gap:8px;margin-bottom:12px}.tippt img{width:31px;height:31px;border-radius:50% 7px 50% 50%;object-fit:cover;object-position:center 28%}
.tippt__punkte{display:flex;gap:4px;padding:13px 15px;border:1px solid var(--linie);border-radius:5px 17px 17px 17px;background:#fff}
.tippt__punkte i{width:6px;height:6px;border-radius:50%;background:#93a2a8;animation:tippen 1.05s infinite}.tippt__punkte i:nth-child(2){animation-delay:.14s}.tippt__punkte i:nth-child(3){animation-delay:.28s}
.auswahl{max-width:92%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 18px auto;padding:11px;border:1px solid #c9d9dd;border-radius:18px 5px 18px 18px;background:#eef5f6;animation:panel .28s ease both}
.auswahl button{min-height:43px;padding:9px 12px;border:1px solid #c0d2d8;border-radius:10px;background:#fff;color:var(--nacht);font-size:12px;font-weight:700;cursor:pointer;transition:.15s ease}
.auswahl button:hover,.auswahl button:focus-visible{outline:0;border-color:var(--blau);background:var(--blau);color:#fff;transform:translateY(-1px)}
.kaufkarte{margin:20px 0 4px;overflow:hidden;border:1px solid var(--linie);border-radius:22px 7px 22px 7px;background:#fff;box-shadow:0 18px 42px rgba(24,51,74,.11);animation:panel .35s ease both}
.kaufkarte__kopf{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 21px;background:var(--nacht);color:#fff}
.kaufkarte__kopf small{display:block;margin-bottom:4px;color:#bfd384;font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.kaufkarte__kopf h2{margin:0;font:700 22px/1.2 var(--serif)}.kaufkarte__badge{padding:7px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#d8e0e5;font-size:9px}
.kaufkarte__body{display:grid;grid-template-columns:190px minmax(0,1fr);gap:23px;align-items:center;padding:22px}
.kaufkarte__produkt{width:100%;max-height:270px;object-fit:contain}.kaufkarte__preis{margin:0 0 5px;font:700 45px/1 var(--serif);color:var(--blau)}.kaufkarte__preis small{font:600 17px var(--sans)}
.kaufkarte__preis s{margin-left:9px;color:var(--grau);font:600 19px var(--sans);text-decoration-thickness:2px}
.kaufkarte__versand{margin:0 0 16px;color:var(--grau);font-size:10px}
.kaufkarte__button{display:flex;min-height:52px;align-items:center;justify-content:center;padding:12px 17px;border-radius:12px;background:var(--limette);color:var(--nacht);text-decoration:none;font-size:15px;font-weight:800;box-shadow:0 9px 20px rgba(149,177,61,.25);transition:transform .15s ease,filter .15s ease}
.kaufkarte__button:hover{filter:brightness(.96);transform:translateY(-1px)}
.kaufkarte__sicher{margin:11px 0 0;color:#86949a;font-size:9px;line-height:1.5}
.dialog__fuss{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 20px;border-top:1px solid var(--linie);color:#86949a;font-size:8px}
.dialog__fuss nav{display:flex;gap:11px}.dialog__fuss a{text-decoration:none}.dialog__fuss a:hover{color:var(--blau);text-decoration:underline}
@keyframes erscheinen{to{opacity:1;transform:none}}@keyframes panel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tippen{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
@media(max-width:800px){
  body{background:var(--papier)}.beratung{width:100%;min-height:100vh;margin:0;display:block;border:0;border-radius:0;box-shadow:none}
  .fachprofil{display:none}.dialog{height:100vh}.nachrichten{height:auto}
}
@media(max-width:520px){
  .dialog__kopf{min-height:68px;padding:10px 12px}.dialog__hinweis{display:none}.nachrichten{padding:17px 10px}.meldung{max-width:93%}.meldung__blase{font-size:13px}
  .auswahl{max-width:100%;grid-template-columns:1fr}.kaufkarte__body{grid-template-columns:1fr;padding:18px}.kaufkarte__produkt{height:185px}
  .dialog__fuss{justify-content:center}.dialog__fuss>span{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Program and trial survey */
.trial{margin:24px 0 8px;border:1px solid var(--linie);border-radius:22px 7px 22px 7px;background:linear-gradient(145deg,#edf4ee,var(--papier) 60%);overflow:hidden;animation:panel .35s ease both}
.trial__intro{padding:26px 24px 18px}.trial__eyebrow{color:#49622e;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.trial h2{margin:10px 0;font:700 clamp(25px,4vw,32px)/1.15 var(--serif);color:var(--nacht)}
.trial p{margin:8px 0;color:#586b75;font-size:13px;line-height:1.6}
.trial__steps{list-style:none;margin:0;padding:0 24px 22px;display:grid;gap:16px}.trial__steps li{display:flex;gap:14px}.trial__steps li>span{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid #cad8c4;border-radius:11px;background:#fff;font-size:11px;font-weight:800;color:#49622e}
.trial h3{margin:2px 0 0;color:var(--nacht);font-size:14px}.trial__steps p{margin:4px 0;font-size:12px}
.trial__download{display:inline-flex;align-items:center;gap:16px;margin-top:8px;padding:11px 14px;border:1px solid var(--blau);border-radius:10px;text-decoration:none;color:var(--blau);font-size:12px;font-weight:800}.trial__download[aria-disabled="true"]{opacity:.55;cursor:default}.trial__download-note{display:block;margin-top:7px;font-size:11px;color:#586b75}
.trial__survey{padding:22px 24px;border-top:1px solid var(--linie);background:#fff}.trial fieldset{margin:0 0 20px;padding:0;border:0;min-width:0}.trial legend{padding:0;margin-bottom:9px;font-size:13px;font-weight:800;color:var(--nacht)}
.trial label{display:flex;align-items:center;gap:9px;padding:10px 12px;margin-top:6px;border:1px solid var(--linie);border-radius:10px;font-size:12px;cursor:pointer}.trial label:has(input:checked){border-color:var(--blau);background:#eef5f6}.trial input{accent-color:var(--blau);flex:none}.trial a:focus-visible,.trial button:focus-visible,.trial input:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.trial .trial__privacy{font-size:11px}.trial__submit{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:12px 16px;border:0;border-radius:12px;background:var(--nacht);color:white;font-size:13px;font-weight:800;cursor:pointer}.trial__submit:hover{background:var(--blau)}
.trial__complete{padding:24px;border-top:1px solid var(--linie);background:#fff}.trial__complete h3{margin-top:10px;font:700 25px/1.2 var(--serif)}.trial__complete .kaufkarte__button{margin-top:17px}.trial__complete small{display:block;margin-top:12px;font-size:11px;line-height:1.6;color:#586b75}
.trial [hidden]{display:none!important}
@media(max-width:520px){.trial__intro,.trial__survey,.trial__complete{padding:20px 16px}.trial__steps{padding:0 16px 20px}}