/* Studio-Selbstregistrierung (Plattform-Host). Nur Design-Tokens aus tokens.css, gemeinsame Breakpoints. */
@font-face{font-family:"Inter";src:url("/fonts/InterVariable-4.1.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html{font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
body{margin:0;background:var(--surface-page);color:var(--text-primary)}
h1,h2,h3,p{margin:0}
button,input,select{font:inherit;color:inherit}
a{color:var(--text-link)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}

/* Layout: Markenfläche links, Formular rechts */
.su-shell{min-height:100vh;display:grid;grid-template-columns:minmax(320px,440px) minmax(0,1fr)}
.su-brand{background:var(--nav-background);color:var(--nav-text);padding:var(--space-12) var(--space-10);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-10);position:sticky;top:0;height:100vh}
.su-brand-inner{display:flex;flex-direction:column;gap:var(--space-4)}
.su-wordmark{font-size:var(--text-xl);font-weight:var(--weight-semibold);letter-spacing:.02em}
.su-wordmark span{color:var(--nav-indicator);font-weight:var(--weight-regular)}
.su-eyebrow{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.16em;text-transform:uppercase;color:var(--nav-text-muted)}
.su-claim{font-size:var(--text-3xl);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:-.02em;margin-top:var(--space-8)}
.su-points{list-style:none;padding:0;margin:var(--space-6) 0 0;display:grid;gap:var(--space-3);color:var(--nav-text-muted)}
.su-points li{display:flex;gap:var(--space-3);align-items:flex-start}
.su-points li::before{content:"";flex:0 0 6px;height:6px;margin-top:8px;border-radius:var(--radius-full);background:var(--nav-indicator)}
.su-brand-foot{font-size:var(--text-sm);color:var(--nav-text-muted)}
.su-brand-foot a{color:var(--nav-text)}

.su-main{padding:var(--space-12) var(--space-10);display:flex;flex-direction:column;align-items:center}
.su-card{width:100%;min-width:0;max-width:720px;display:flex;flex-direction:column;gap:var(--space-6)}
.su-loading{color:var(--text-secondary);padding:var(--space-12) 0}

/* Schrittanzeige */
.su-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.su-steps li{border-top:3px solid var(--border-default);padding-top:var(--space-2);font-size:var(--text-sm);color:var(--text-tertiary)}
.su-steps li b{font-weight:var(--weight-semibold);margin-right:var(--space-1)}
.su-steps li.is-current,.su-steps li.is-done{border-color:var(--accent-gold);color:var(--text-primary)}
.su-head h2{font-size:var(--text-2xl);font-weight:var(--weight-semibold);letter-spacing:-.01em}
.su-head p{color:var(--text-secondary);margin-top:var(--space-2)}

/* Tarifkarten */
.su-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.su-plan{position:relative;text-align:left;cursor:pointer;background:var(--surface-panel);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-6) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);box-shadow:var(--shadow-1);transition:border-color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.su-plan:hover{border-color:var(--border-strong)}
.su-plan[aria-checked="true"]{border-color:var(--accent-gold);box-shadow:inset 0 0 0 1px var(--accent-gold),var(--shadow-2);background:var(--surface-selected)}
.su-plan-name{font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.su-plan-price{font-size:var(--text-2xl);font-weight:var(--weight-semibold);letter-spacing:-.01em}
.su-plan-price small{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--text-secondary)}
.su-plan-tax{font-size:var(--text-xs);color:var(--text-tertiary);margin-top:calc(var(--space-2) * -1)}
.su-plan-base{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary)}
.su-plan ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary)}
.su-plan li::before{content:"✓";color:var(--accent-gold-text);margin-right:var(--space-2);font-weight:var(--weight-semibold)}
.su-badge{position:absolute;top:calc(var(--space-3) * -1);left:var(--space-5);background:var(--accent-gold);color:var(--text-on-gold);font-size:var(--text-xs);font-weight:var(--weight-semibold);border-radius:var(--radius-full);padding:2px var(--space-3)}
.su-trial{display:flex;gap:var(--space-3);align-items:center;background:var(--accent-gold-subtle);color:var(--accent-gold-text);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);font-size:var(--text-sm)}

/* Formular */
.su-panel{background:var(--surface-panel);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:var(--space-5)}
.su-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-5)}
.su-full{grid-column:1/-1}
.su-field{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-sm);font-weight:var(--weight-medium)}
.su-field input{width:100%;min-width:0;min-height:var(--control-lg);padding:0 var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-raised);font-size:var(--text-lg);font-weight:var(--weight-regular)}
.su-field input:hover{border-color:var(--border-strong)}
.su-field input:focus-visible{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-gold-subtle)}
.su-field input[aria-invalid="true"]{border-color:var(--status-danger)}
.su-hint{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--text-tertiary)}
.su-hint.is-ok{color:var(--status-success)}
.su-hint.is-bad{color:var(--status-danger)}
.su-slug{display:flex;align-items:stretch;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-raised);overflow:hidden}
.su-slug:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-gold-subtle)}
.su-slug span{display:flex;align-items:center;padding:0 var(--space-3);background:var(--surface-subtle);color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--weight-regular);white-space:nowrap}
.su-slug input{border:0;border-radius:0;flex:1;min-width:0;box-shadow:none}
.su-slug input:focus-visible{box-shadow:none}
.su-promo{display:flex;gap:var(--space-2);align-items:flex-end}
.su-promo .su-field{flex:1}
.su-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.su-consent{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-sm);color:var(--text-secondary)}
.su-field textarea{width:100%;min-width:0;padding:var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--text-primary);font:inherit;font-size:var(--text-md);resize:vertical}
.su-field textarea:focus-visible{outline:2px solid var(--accent-gold);outline-offset:1px}
.su-choice{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;border:0}
.su-choice legend{margin-bottom:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
.su-choice strong{color:var(--text-primary)}
.su-totp{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding-left:var(--space-5);font-size:var(--text-sm);color:var(--text-secondary)}
.su-totp li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.su-secret{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--surface-subtle);color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:.08em;overflow-wrap:anywhere}
.su-consent input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;accent-color:var(--action-primary)}

/* Zusammenfassung */
.su-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-6);margin:0}
.su-summary dt{color:var(--text-secondary);font-size:var(--text-sm)}
.su-summary dd{margin:0;font-weight:var(--weight-medium);overflow-wrap:anywhere}

/* Buttons und Meldungen */
.su-actions{display:flex;justify-content:space-between;gap:var(--space-3);align-items:center}
.su-btn{min-height:var(--control-lg);padding:0 var(--space-6);border-radius:var(--radius-lg);border:1px solid transparent;font-weight:var(--weight-semibold);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard)}
.su-btn:disabled{opacity:.5;cursor:default}
.su-btn-primary{background:var(--action-primary);color:var(--text-on-primary)}
.su-btn-primary:hover:not(:disabled){background:var(--action-primary-hover)}
.su-btn-ghost{background:transparent;border-color:var(--border-default);color:var(--text-primary)}
.su-btn-ghost:hover:not(:disabled){background:var(--surface-hover)}
.su-alert{border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);font-size:var(--text-sm)}
.su-alert.is-error{background:var(--status-danger-bg);color:var(--status-danger)}
.su-alert.is-info{background:var(--status-info-bg);color:var(--status-info)}
.su-alert.is-success{background:var(--status-success-bg);color:var(--status-success)}
.su-done{text-align:center;align-items:center;padding:var(--space-10) var(--space-6)}
.su-done-mark{width:64px;height:64px;border-radius:var(--radius-full);display:grid;place-items:center;background:var(--accent-gold-subtle);color:var(--accent-gold-text);font-size:var(--text-3xl)}
.su-done p{color:var(--text-secondary);max-width:460px}

/* Tablet und Smartphone */
.su-interval{display:inline-flex;justify-self:center;align-self:center;gap:2px;padding:2px;border:1px solid var(--border-default);border-radius:var(--radius-full);background:var(--surface-panel)}
.su-interval button{min-height:40px;padding:0 var(--space-5);border:0;border-radius:var(--radius-full);background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer}
.su-interval button[aria-checked="true"]{background:var(--surface-selected);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--accent-gold)}
.su-plan-addons{font-size:var(--text-xs);color:var(--text-tertiary)}
.su-demo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2) var(--space-3);margin:var(--space-2) 0 0;padding-top:var(--space-5);border-top:1px solid var(--border-default);font-size:var(--text-sm);color:var(--text-secondary)}
.su-demo .su-hint{flex-basis:100%;text-align:center}
@media (max-width:1023.98px){
  .su-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .su-brand{position:static;height:auto;padding:var(--space-6) var(--page-padding);gap:var(--space-3)}
  .su-claim{font-size:var(--text-xl);margin-top:var(--space-2)}
  .su-points,.su-brand-foot{display:none}
  .su-main{padding:var(--space-8) var(--page-padding) var(--space-12)}
}
@media (max-width:599.98px){
  .su-plans,.su-grid{grid-template-columns:minmax(0,1fr)}
  .su-plan{padding:var(--space-5) var(--space-4)}
  .su-panel{padding:var(--space-5) var(--space-4)}
  .su-steps li{font-size:var(--text-xs)}
  .su-steps li b{display:block}
  .su-actions{flex-direction:column-reverse;align-items:stretch}
  .su-btn{width:100%}
  .su-promo{flex-direction:column;align-items:stretch}
  .su-summary{grid-template-columns:1fr;gap:0}
  .su-summary dd{margin-bottom:var(--space-3)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}