/* =====================================================================
   MARKE · Farben, Schrift, Grundbausteine (aus der Hauptseite übernommen)
   Kann später auch von der Hauptseite eingebunden werden, damit alles
   aus einer Quelle kommt.
   ===================================================================== */
:root{
  --ground:#150A0F; --ground-2:#1E121A; --ink:#F2E7E0; --muted:#B197A2;
  --line:rgba(242,231,224,.14); --accent:#DBA88C;
  --maxw:1080px; --measure:60ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
:root{color-scheme:dark}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Jost","Helvetica Neue",Arial,sans-serif;font-weight:300;line-height:1.7;letter-spacing:.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:rgba(219,168,140,.28)}
a{color:inherit}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
.eyebrow{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:400}
.micro{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.btn{display:inline-block;padding:15px 30px;border:1px solid var(--line);border-radius:2px;text-decoration:none;font:inherit;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);transition:all .35s ease;background:transparent;cursor:pointer}
@media (hover:hover){.btn:hover{border-color:var(--accent);color:var(--accent)}.btn.solid:hover{background:transparent;color:var(--accent)}}
.btn:focus-visible,.opt:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.solid{background:var(--accent);color:#20121a;border-color:var(--accent)}
.btn[disabled]{opacity:.45;cursor:default}
.btn.big{padding:18px 38px;font-size:.78rem}
.ph{display:inline-block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;border:1px dashed rgba(219,168,140,.5);color:var(--accent);padding:2px 7px;margin-left:8px;vertical-align:middle}
.demo{margin-top:22px;font-size:.78rem;color:var(--muted);border-left:1px solid var(--accent);padding-left:14px;text-align:left;display:inline-block}
.sitefoot{text-align:center;padding:48px 0 calc(36px + env(safe-area-inset-bottom))}
.flinks{display:inline-flex;gap:26px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}
.flinks a{color:var(--muted);text-decoration:none}
.flinks a:hover{color:var(--ink)}
.field{display:block;margin-bottom:16px;text-align:left}
.field span{display:block;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input{width:100%;background:var(--ground-2);border:1px solid var(--line);border-radius:2px;color:var(--ink);font:inherit;font-size:1.05rem;padding:15px 17px;outline:none;transition:border-color .3s}
.field input:focus{border-color:var(--accent)}
.check{display:flex;gap:14px;align-items:flex-start;color:var(--muted);font-size:.9rem;line-height:1.5;margin:14px 0;cursor:pointer;text-align:left}
.check input{margin-top:3px;accent-color:#DBA88C;width:18px;height:18px;flex:none}
.check a,.already a{color:var(--accent)}
.err{color:#E39AAE;font-size:.88rem;margin:10px 0;min-height:1.3em}
.already{margin-top:18px;color:var(--muted);font-size:.9rem}
.skip{background:none;border:0;color:var(--muted);font:inherit;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;margin-top:22px;text-decoration:underline;text-underline-offset:4px}
@keyframes fin{to{opacity:1}}
.fadein{opacity:0;animation:fin 1s ease forwards}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.fadein{opacity:1}}

/* Passwort anzeigen (core/pwtoggle.js) */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:52px!important}
.pw-eye{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--muted);cursor:pointer;padding:0}
.pw-eye:hover,.pw-eye[aria-pressed="true"]{color:var(--accent)}
.pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:2px}
.field .pw-wrap{margin:0;font-size:inherit;letter-spacing:normal;text-transform:none;color:var(--ink)}

/* Beta-Zeichen (config.js beta) */
.beta{display:inline-block;margin-left:8px;padding:2px 6px 1px;border:1px solid rgba(219,168,140,.5);border-radius:2px;font-family:"Jost","Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:400;font-size:9px;letter-spacing:.22em;line-height:1.4;text-transform:uppercase;color:var(--accent);vertical-align:middle;position:relative;top:-1px}
@media (max-width:420px){.beta{margin-left:6px;padding:1px 4px 0;font-size:8px;letter-spacing:.18em}}

/* Beta-Feedback "Help shape this" (sections/feedback.js) */
.feedback textarea{width:100%;margin-top:6px;background:var(--ground);border:1px solid var(--line);border-radius:2px;color:var(--ink);font:inherit;font-size:1rem;line-height:1.55;padding:14px 16px;resize:vertical;outline:none}
.feedback textarea:focus{border-color:var(--accent)}
.feedback .btn{margin-top:12px}
.stars{border:0;margin:18px 0 8px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.stars legend{width:100%;padding:0;margin-bottom:6px;font-size:.88rem;color:var(--muted)}
.stars label{cursor:pointer;position:relative}
.stars input{position:absolute;opacity:0;width:1px;height:1px}
.stars span{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:24px;color:rgba(242,231,224,.22);transition:color .2s}
.stars label:has(~ label input:checked) span,.stars label:has(input:checked) span{color:var(--accent)}
@media (hover:hover){.stars:hover label span{color:var(--accent)}.stars label:hover ~ label span{color:rgba(242,231,224,.22)}}
.stars input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-4px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fb-status{min-height:1.2em;margin-top:8px;font-size:.88rem;color:var(--accent)}
.fb-thanks{margin-top:18px}
.fb-thanks h3{font-size:1.5rem;margin-bottom:4px}
.fb-thanks .skip{margin-top:12px}