/* SolvePlus — öffentliche Seiten (Start, Registrierung, Rechtstexte, Konto löschen).
   Baut auf /css/app.css (Tokens, Buttons, Formulare) auf. Nur lokale Schriften (/fonts/fonts.css). */
:root{--gold-ink:#6b5200;--ok:#166534;--ok-bg:#dcfce7;--warn-bg:#fde9c8;--warn:#7a4f00;--focus:#F0C030}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--gold-ink:#F0C030;--ok:#bbf7d0;--ok-bg:#12351f;--warn-bg:#3a2a06;--warn:#fde9c8}}
:root[data-theme="dark"]{--gold-ink:#F0C030;--ok:#bbf7d0;--ok-bg:#12351f;--warn-bg:#3a2a06;--warn:#fde9c8}

.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--gold);color:var(--navy);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{left:12px}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}

.pub .top{flex-wrap:wrap;row-gap:6px}
.pub .top a.brand{color:#fff;text-decoration:none}
.pub .top .nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pub .top .nav a{color:#dae4f2;text-decoration:none;font-weight:600;font-size:14px;padding:8px 10px;border-radius:10px}
.pub .top .nav a:hover{background:rgba(255,255,255,.15)}
.pub .top .nav a.btnlink{background:var(--gold);color:var(--navy)}
.pub #langSel{width:auto;min-width:0;background:rgba(255,255,255,.16);color:#fff;border:0;height:38px;padding:0 8px;font-weight:600;font-size:13px;cursor:pointer;border-radius:10px}
.pub #langSel option{color:#10233f;background:#fff}

main{flex:1}
.sec{padding:32px 22px}
.sec+.sec{border-top:1px solid var(--border)}
.inner{max-width:1080px;margin:0 auto}
.hero{background:radial-gradient(900px 420px at 85% 0%,rgba(240,192,48,.18),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface-2));padding:48px 22px 40px}
.hero .inner{display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:center}
.hero h1{font-size:clamp(40px,7vw,76px);line-height:.95}
.hero h1 .plus{color:var(--gold-ink)}
.hero .lead{font-size:clamp(16px,2.2vw,19px);color:var(--text);max-width:40em;margin:14px 0 18px}
.hero .ctas{display:flex;gap:10px;flex-wrap:wrap}
.hero .ctas a{text-decoration:none;font-size:15px;padding:13px 18px}
.hero .badge{display:inline-flex;align-items:center;gap:8px;background:var(--chip);color:var(--head);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;margin-bottom:12px}
.hero .ico{justify-self:center;background:#fff;border-radius:50%;width:min(240px,50vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.hero .ico img{width:78%;height:auto}
.b2b{margin-top:16px;font-size:14px;color:var(--text-dim)}
.b2b strong{color:var(--text)}

h2.st{font-size:clamp(28px,4vw,40px);margin-bottom:6px}
.sub{color:var(--text-dim);margin:0 0 18px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.tile .ti{font-size:28px;line-height:1}
.tile h3{font-size:24px;margin:8px 0 4px}
.tile p{margin:0;color:var(--text-dim);font-size:14px}
.tile .tag{display:inline-block;margin-top:10px;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:999px;padding:3px 9px;background:var(--chip);color:var(--head)}
.tile .tag.free{background:var(--ok-bg);color:var(--ok)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:16px 16px 16px 56px;position:relative}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
:root[data-theme="dark"] .steps li::before{background:var(--gold);color:var(--navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .steps li::before{background:var(--gold);color:var(--navy)}}
.steps b{display:block;margin-bottom:2px}
.price{background:var(--surface-2);border:1px dashed var(--border);border-radius:16px;padding:18px}
.price p{margin:6px 0}
/* Preistabelle Startseite (#preise) */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;list-style:none;padding:0;margin:0 0 22px}
.plan{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.plan.hl{border:2px solid var(--gold)}
.plan h3,.plan h4{font-size:26px;margin:0 0 4px}
.plans.pk .plan h4{font-size:22px}
.plan .pp{margin:4px 0 6px;color:var(--text-dim)}
.plan .pp b{font-family:var(--display);font-size:38px;color:var(--head);line-height:1}
.plan .pd{margin:0 0 6px;font-weight:700}
.plan .pl{margin:0;color:var(--text-dim);font-size:14px}
.plan .py{margin:10px 0 0;font-size:13px;color:var(--text-dim)}
.plan .pop{position:absolute;top:-11px;inset-inline-end:14px;background:var(--gold);color:var(--navy);font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:999px;padding:3px 10px}
h3.pt{font-size:26px;margin:6px 0 10px}
.ptw{overflow-x:auto;margin:0 0 22px}
.ptab{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.ptab th{text-align:start;font-size:12px;text-transform:uppercase;color:var(--text-dim);background:var(--surface-2);padding:9px 12px}
.ptab td{border-top:1px solid var(--border);padding:9px 12px}
.ptab .n{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.pn{margin:6px 0 0;padding-inline-start:20px;font-size:14px;color:var(--text-dim)}
.pn li{margin:3px 0}

/* Formular */
.formwrap{max-width:860px;margin:0 auto}
fieldset{border:1px solid var(--border);border-radius:16px;padding:6px 16px 16px;margin:0 0 16px;background:var(--surface)}
legend{font-family:var(--display);font-size:24px;color:var(--head);padding:0 6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grid3{display:grid;grid-template-columns:2fr 1fr 2fr;gap:0 14px}
.req::after{content:" *";color:var(--thanu)}
:root[data-theme="dark"] .req::after{color:var(--gold)}
.help{font-size:12px;color:var(--text-dim);margin-top:4px}
.ferr{font-size:13px;color:#b42318;margin-top:4px;min-height:0}
:root[data-theme="dark"] .ferr{color:#ffb4a8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ferr{color:#ffb4a8}}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:#b42318;outline:1px solid #b42318}
.chk{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;font-size:14px;color:var(--text);font-weight:500}
.chk input{width:22px;height:22px;flex:none;margin:1px 0 0}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.note{border-radius:12px;padding:12px 14px;margin:10px 0;font-size:14px}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.note.ok{background:var(--ok-bg);color:var(--ok)}
.note.info{background:var(--chip);color:var(--text)}
.submit{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.submit .btn{font-size:15px;padding:13px 20px}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.done{text-align:center;padding:30px 10px}
.done h2{font-size:40px;margin-bottom:10px}

/* Rechtstexte */
.legal{max-width:860px;margin:0 auto}
.legal h1{font-size:44px;margin-bottom:8px}
.legal h2{font-size:28px;margin:26px 0 6px}
.legal h3{font-size:22px;margin:18px 0 4px}
.legal p,.legal li{font-size:15px}
.draft{background:var(--warn-bg);color:var(--warn);border-radius:12px;padding:12px 14px;font-weight:700;margin:10px 0 18px}
.ph{background:#fff3b0;color:#4a3900;padding:0 4px;border-radius:4px;font-weight:700}

/* Footer öffentlich — Markup in allen 6 Seiten gleich (js/oeffentlich.js baut ihn zusätzlich einheitlich).
   Navy-Leiste kommt aus app.css (footer), Logos werden per filter weiß (lesbar hell + dunkel). */
.pubfoot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.pubfoot nav{display:flex;gap:6px 14px;flex-wrap:wrap;justify-content:center}
.pubfoot nav a{color:#dae4f2;font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:4px 2px}
.pubfoot .made{margin:0;font-family:var(--display);font-size:22px;line-height:1.1;color:#c9d6ea;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 11px;max-width:100%;text-align:center}
.pubfoot .made .amp{color:var(--gold);font-weight:700}
.pubfoot .flogo{height:22px;width:auto;max-width:100%;display:block;filter:brightness(0) invert(1);opacity:.95}
.pubfoot .flogo.ntn{height:34px;margin:-6px 0}  /* PNG hat viel Rand oben/unten → optisch gleich groß */

/* Hamburger-Menü (nur schmale Bildschirme; js/oeffentlich.js baut Knopf + Panel) */
.pub .top{position:relative}
.pub .menubtn{all:unset;display:none;box-sizing:border-box;cursor:pointer;width:44px;height:44px;border-radius:11px;color:#fff;font-size:24px;line-height:1;align-items:center;justify-content:center}
.pub .menubtn:hover{background:rgba(255,255,255,.15)}
.pub .menubtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pubmenu{position:absolute;inset-inline:0;top:100%;z-index:50;background:var(--surface);color:var(--text);border-bottom:1px solid var(--border);box-shadow:0 14px 30px rgba(0,20,50,.25);padding:10px 16px 18px;max-height:calc(100dvh - 70px);overflow-y:auto}
.pubmenu[hidden]{display:none}
.pubmenu ul{list-style:none;margin:0;padding:0}
.pubmenu .pm-main a{display:block;padding:12px 8px;font-size:17px;font-weight:700;color:var(--head);text-decoration:none;border-radius:10px}
.pubmenu .pm-main li+li{border-top:1px solid var(--border)}
.pubmenu .pm-legal{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 4px;padding:10px 8px 0;border-top:1px solid var(--border)}
.pubmenu .pm-legal a{font-size:14px;color:var(--text);text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.pubmenu a:hover{background:var(--chip)}
.pubmenu a[aria-current="page"]{color:var(--gold-ink)}
.pubmenu .pm-tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:10px 0;padding:12px 8px 0;border-top:1px solid var(--border)}
.pubmenu .pm-tool{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-dim)}
.pubmenu #langSel{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.pubmenu #themeBtn{color:var(--text);border:1px solid var(--border);background:var(--surface-2)}
.pubmenu .pm-cta{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.pubmenu .pm-cta .btn{display:block;text-align:center;text-decoration:none;font-size:16px;padding:14px 18px}

@media(max-width:760px){
  .hero .inner{grid-template-columns:1fr}
  .hero .ico{display:none}
  .grid2,.grid3{grid-template-columns:1fr}
  .sec{padding:26px 16px}
  .hero{padding:34px 16px 30px}
  .pub .top .nav a:not(.btnlink){display:none}       /* ohne JS: nur „Anmelden"/„Registrieren" */
  .pub.hasmenu .top .nav{display:none}                /* mit JS: alles im ☰-Menü */
  .pub.hasmenu .menubtn{display:inline-flex}
}
@media(min-width:761px){ .pubmenu{display:none!important} }

/* In der S+-App (Klasse sp-embed: ?app=1 bzw. von der App gesetzt): Rechtstexte ohne Kopfzeile,
   Fusszeile und Store-Hinweise – kein Weg zur Startseite mit Preisen (App-Store-Regel 3.1.1/3.1.3). */
.sp-embed .pub .top,.sp-embed .pub .pubfoot,.sp-embed .pub .skip,.sp-embed .pub .sp-store{display:none!important}
.sp-embed .pub .frame{min-height:0;box-shadow:none;border:0;margin:0;max-width:none}
.sp-embed .pub a[href="/"],.sp-embed .pub a[href^="/#"],.sp-embed .pub a[href*="start.html"],.sp-embed .pub a[href*="registrieren.html"],.sp-embed .pub a[href*="abo.html"]{pointer-events:none;color:inherit;text-decoration:none}
.sp-embed .pub a[href="/konto.html"],.sp-embed .pub a[href="/dashboard.html"]{display:none!important}