/* ============================================================
   MindBase — Design System (Swiss Grid Maximal)
   Eine Quelle fuer Landing, Auth und Dashboard.
   Basis: Vorlage 01, luftiger gesetzt.
   ============================================================ */

@font-face{font-family:'Cabinet Grotesk';src:url('/static/fonts/cabinet-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('/static/fonts/cabinet-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('/static/fonts/cabinet-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/static/fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/static/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/static/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --font-display:'Cabinet Grotesk','Helvetica Neue',system-ui,sans-serif;
  --font-body:'Satoshi',system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;
  --pad:clamp(24px,5vw,96px);           /* mehr Rand = luftiger */
  --spectrum:linear-gradient(100deg,#46A4FB,#08B5F0,#22C058,#D4EF3A,#FDA817,#F2587A,#EF4FCE,#5240E2);
  /* Spacing-Skala (sehr grosszuegig) */
  --s1:12px; --s2:22px; --s3:36px; --s4:60px; --s5:96px; --s6:150px; --s7:210px; --s8:300px;
  --radius:4px;
  /* exakte Marken-Farben */
  --hellblau:#46A4FB; --cyan:#08B5F0; --tuerkis:#00C7C7; --dunkelblau:#0F3FA3; --indigo:#5240E2;
  --violett:#7A35DF; --gruen:#22C058; --limette:#8FEA27; --gelbgruen:#D4EF3A; --gelb:#FFE51F;
  --orange:#FDA817; --rot:#D52E33; --koralle:#F2587A; --pink:#EF4FCE; --magenta:#EC24D3;
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg-alt:#F5F6F7; --panel:#FFFFFF;
  --ink:#22282D; --ink-soft:rgba(34,40,45,.66); --ink-faint:rgba(34,40,45,.44);
  --line:rgba(34,40,45,.15); --line-strong:rgba(34,40,45,.40);
  --accent:#08B5F0; --accent-ink:#0B1418; --link:#0F3FA3;
  --ok:#1AA35A; --warn:#C6820A; --err:#D52E33;
}
:root[data-theme="dark"]{
  --bg:#15181B; --bg-alt:#1D2226; --panel:#1B2024;
  --ink:#F1F3F4; --ink-soft:rgba(241,243,244,.68); --ink-faint:rgba(241,243,244,.44);
  --line:rgba(255,255,255,.14); --line-strong:rgba(255,255,255,.32);
  --accent:#08B5F0; --accent-ink:#08121A; --link:#5AC8FA;
  --ok:#3FD98A; --warn:#F0B84B; --err:#FF6166;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:400;
  line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display)}
p{margin:0}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* helpers */
.pad{padding-inline:var(--pad)}
.spectrum-bar{height:3px;width:100%;background:var(--spectrum)}
.mono{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.gl{border-top:1px solid var(--line);border-left:1px solid var(--line)}
.gl>*{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.invert{--bg:#12151A;--ink:#F1F3F4;--ink-soft:rgba(241,243,244,.72);--ink-faint:rgba(241,243,244,.46);
  --line:rgba(255,255,255,.15);--line-strong:rgba(255,255,255,.34);background:var(--bg);color:var(--ink)}

/* logo tile — traegt das Logo-Bild sauber auf hellem Grund */
.logo-tile{background:#FFFFFF;border:1px solid rgba(0,0,0,.12);border-radius:5px;padding:6px 11px;
  display:inline-flex;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.logo-tile img{height:34px;width:auto}
.logo-tile.sm img{height:26px}
.logo-tile.lg img{height:46px}

/* NAV */
.nav{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:84px;padding-block:16px}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);border-left:1px solid var(--line);padding-left:16px}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-link{font-weight:500;font-size:.95rem;padding:10px 12px;color:var(--ink);transition:color .2s}
.nav-link:hover{color:var(--accent)}
.theme-toggle{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:transparent;
  border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--ink);color:var(--accent)}
.theme-toggle svg{width:19px;height:19px}
:root[data-theme="light"] .i-sun{display:none}
:root[data-theme="dark"] .i-moon{display:none}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:.98rem;line-height:1;
  padding:16px 24px;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;white-space:nowrap;
  transition:background .2s,border-color .2s,transform .15s,color .2s,box-shadow .2s}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px -8px var(--accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-block{width:100%}
.btn-sm{padding:11px 16px;font-size:.9rem}
.btn[disabled],.btn.is-loading{opacity:.55;pointer-events:none}

/* mono kicker */
.kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;flex-direction:column;gap:10px}
.kicker .num{color:var(--accent);font-weight:700;font-size:1.05rem;letter-spacing:.05em}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:2px;padding:9px 13px;display:inline-flex;align-items:center;gap:8px}
.chip .d{width:7px;height:7px;background:var(--accent);border-radius:1px;flex:none}

/* ============ FORMS ============ */
.field{display:flex;flex-direction:column;gap:9px;margin-bottom:var(--s3)}
.field label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.field .req{color:var(--accent)}
.input{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:17px 18px;font-family:var(--font-body);font-size:1rem;line-height:1.3;transition:border-color .2s,box-shadow .2s}
.input::placeholder{color:var(--ink-faint)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.input.code{font-family:var(--font-mono);letter-spacing:.5em;text-align:center;font-size:1.4rem}
.hint{font-size:.85rem;color:var(--ink-faint);margin-top:-2px}
.field-error{font-size:.85rem;color:var(--err);display:flex;align-items:center;gap:7px}
.field-error svg{width:15px;height:15px;flex:none}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;
  background:transparent;border:none;color:var(--ink-faint);cursor:pointer;border-radius:var(--radius)}
.pw-toggle:hover{color:var(--ink)}
.pw-toggle svg{width:19px;height:19px}

/* alerts */
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius);
  border:1px solid var(--line-strong);font-size:.95rem;line-height:1.45;margin-bottom:var(--s3)}
.alert svg{width:19px;height:19px;flex:none;margin-top:1px}
.alert-err{border-color:color-mix(in srgb,var(--err) 55%,var(--line));color:var(--err);background:color-mix(in srgb,var(--err) 9%,transparent)}
.alert-ok{border-color:color-mix(in srgb,var(--ok) 55%,var(--line));color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.alert-info{border-color:var(--line-strong);color:var(--ink-soft)}

/* ============ AUTH LAYOUT (2-Spalten, Swiss) ============ */
.auth{min-height:100dvh;display:grid;grid-template-columns:1.05fr 1fr}
.auth-aside{position:relative;border-right:1px solid var(--line);background:var(--bg-alt);display:flex;flex-direction:column;
  justify-content:space-between;padding:var(--s5) var(--pad);overflow:hidden}
.auth-aside .grid-guides{position:absolute;inset:0;display:flex;pointer-events:none}
.auth-aside .grid-guides span{flex:1;border-left:1px solid var(--line);opacity:.5}
.auth-aside .grid-guides span:first-child{border-left:none}
.auth-aside .a-top,.auth-aside .a-bottom,.auth-aside .a-mid{position:relative;z-index:1}
.auth-claim{font-family:var(--font-display);font-weight:900;letter-spacing:-.025em;line-height:.94;
  font-size:clamp(2.2rem,4.6vw,4.4rem);margin-top:var(--s4)}
.auth-claim .dot{color:var(--accent)}
.auth-sub{color:var(--ink-soft);font-size:1.08rem;line-height:1.5;max-width:44ch;margin-top:var(--s3)}
.auth-steps{display:flex;flex-direction:column;gap:2px;margin-top:var(--s4)}
.auth-step{display:flex;gap:16px;align-items:baseline;padding:24px 0;border-top:1px solid var(--line)}
.auth-step .n{font-family:var(--font-mono);font-size:.8rem;color:var(--accent);font-weight:700;min-width:34px}
.auth-step .t b{font-family:var(--font-display);font-weight:800;font-size:1.05rem;display:block}
.auth-step .t span{color:var(--ink-soft);font-size:.94rem}
.auth-step.done .n{color:var(--ok)} .auth-step.active .t b{color:var(--accent)}

.auth-main{display:flex;flex-direction:column;justify-content:center;padding:var(--s6) var(--pad);position:relative}
.auth-main .top-row{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:var(--s3) var(--pad)}
.auth-card{width:100%;max-width:430px;margin:0 auto}
.auth-card h1{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2rem,3.4vw,2.8rem);margin-bottom:var(--s2)}
.auth-card .lead{color:var(--ink-soft);font-size:1.02rem;margin-bottom:var(--s4)}
.auth-alt{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);color:var(--ink-soft);font-size:.95rem}
.auth-alt a{color:var(--link);font-weight:700}
.auth-alt a:hover{text-decoration:underline}
.form-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-6px 0 var(--s3)}
.form-row a{color:var(--link);font-size:.9rem;font-weight:600}
.check{display:flex;align-items:center;gap:11px;font-size:.95rem;color:var(--ink-soft);cursor:pointer;user-select:none}
.check input{width:19px;height:19px;accent-color:var(--accent);flex:none}

@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-aside{display:none}
  .auth-main{justify-content:flex-start;padding-top:var(--s6)}
}

/* section band (Landing/Content) */
.band{display:grid;grid-template-columns:.85fr 2.5fr 1.25fr;gap:clamp(24px,3vw,64px);align-items:end;
  padding-block:var(--s7) var(--s5)}
.band-title{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,5.4vw,5rem);line-height:.98;letter-spacing:-.02em}
.band-note{font-size:clamp(.98rem,1.1vw,1.18rem);line-height:1.55;color:var(--ink-soft);align-self:end}
@media (max-width:1040px){.band{grid-template-columns:1fr 1fr}.band .kicker,.band .band-note{grid-column:1/-1}}
@media (max-width:768px){.band{grid-template-columns:1fr;gap:18px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ============================================================
   KOPFZEILE (mb-nav) — Neubau 09.08.2026
   Loest die alte .nav auf der Landingpage ab. Die alte Variante
   hatte drei harte Fehler:
     1. Unter 768px verschwand die Navigation komplett (display:none)
        - kein Menue, kein Ersatz. Auf dem Handy war die Seite nicht
        navigierbar.
     2. Das Logo sass in einer weissen Kachel mit Rahmen und Schatten,
        die im Dunkelmodus als heller Fleck stehenblieb.
     3. 84px hohe, immer gleich aussehende Leiste ohne Zustand -
        beim Scrollen klebte eine massive Kante ueber dem Inhalt.
   ============================================================ */

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bg);
  padding:14px 20px;font-weight:700;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}

.mb-nav{position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s,background .2s}
@supports (backdrop-filter:blur(1px)){
  .mb-nav{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(180%) blur(14px)}
}
/* Kante und Schatten erst, wenn wirklich Inhalt darunterliegt */
.mb-nav.is-scrolled{border-bottom-color:var(--line);box-shadow:0 1px 20px -12px rgba(0,0,0,.5)}

.mb-nav-inner{display:flex;align-items:center;gap:clamp(16px,3vw,40px);min-height:64px;padding-block:10px}
@media (min-width:900px){ .mb-nav-inner{min-height:72px} }

/* Marke: Bildmarke (farbig, funktioniert hell wie dunkel) + Wortmarke als Text,
   damit sie sich dem Farbschema anpasst statt als Bild dagegenzustehen. */
.mb-brand{display:inline-flex;align-items:center;gap:11px;flex:none;padding:6px 0;
  min-height:44px;transition:opacity .2s}
.mb-brand:hover{opacity:.78}
.mb-logo-mark{position:relative;width:40px;height:40px;display:grid;place-items:center;flex:none}
.mb-logo-mark img{position:absolute;inset:0;width:40px;height:40px;object-fit:contain}
.mb-logo-mark .logo-dark{display:none}
:root[data-theme="dark"] .mb-logo-mark .logo-light{display:none}
:root[data-theme="dark"] .mb-logo-mark .logo-dark{display:block}
.mb-brand>img{width:32px;height:32px;object-fit:contain}
.mb-word{font-family:var(--font-display);font-weight:800;font-size:1.24rem;letter-spacing:-.02em;color:var(--ink)}

/* Abschnittslinks — auf grossen Schirmen mittig, sonst im Klappmenue */
.mb-links{display:none;align-items:center;gap:4px;margin-inline:auto}
@media (min-width:900px){ .mb-links{display:flex} }
.mb-links a{position:relative;font-size:.95rem;font-weight:500;color:var(--ink-soft);
  padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;transition:color .2s}
.mb-links a:hover{color:var(--ink)}
.mb-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease-out}
.mb-links a:hover::after{transform:scaleX(.35)}
/* aktueller Abschnitt: nicht nur Farbe, sondern auch ein Balken */
.mb-links a[aria-current="true"],.mb-links a[aria-current="page"]{color:var(--ink);font-weight:700}
.mb-links a[aria-current="true"]::after,.mb-links a[aria-current="page"]::after{transform:scaleX(1)}

.mb-actions{display:none;align-items:center;gap:10px;flex:none}
@media (min-width:900px){ .mb-actions{display:flex} }

.mb-icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.mb-icon-btn:hover{border-color:var(--ink);color:var(--accent)}
.mb-icon-btn svg{width:19px;height:19px}

/* Klapp-Schalter: erst unterhalb 900px sichtbar */
.mb-burger{display:inline-flex;margin-left:auto}
@media (min-width:900px){ .mb-burger{display:none} }
.mb-burger .bars{width:20px;height:14px;position:relative}
.mb-burger .bars i{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;
  transition:transform .2s ease-out,opacity .15s}
.mb-burger .bars i:nth-child(1){top:0}
.mb-burger .bars i:nth-child(2){top:6px}
.mb-burger .bars i:nth-child(3){top:12px}
.mb-burger[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mb-burger[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.mb-burger[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Klappmenue - das, was vorher schlicht gefehlt hat */
.mb-menu{border-top:1px solid var(--line);background:var(--bg);
  max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .24s ease-out,visibility .24s}
.mb-menu.is-open{max-height:80vh;overflow:auto;visibility:visible}
@media (min-width:900px){ .mb-menu{display:none} }
.mb-menu-inner{padding-block:12px calc(18px + env(safe-area-inset-bottom))}
.mb-menu a.item{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:56px;padding:14px 0;font-size:1.06rem;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line)}
.mb-menu a.item span.hint{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.mb-menu a.item[aria-current="true"],.mb-menu a.item[aria-current="page"],.mb-menu a.item[data-current="true"]{color:var(--accent)}
.mb-menu .mb-menu-cta{display:grid;gap:10px;margin-top:18px}
.mb-menu .mb-menu-cta .btn{width:100%}
.mb-menu .mb-menu-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:18px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}

body.mb-menu-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .mb-nav,.mb-menu,.mb-links a::after,.mb-burger .bars i{transition:none}
}
/* Tippziele in der Kopfzeile: .btn-sm ist nur 38px hoch - zu klein fuer Finger. */
.mb-actions .btn{min-height:44px}
.mb-actions .mb-nav-logout{border-color:var(--line-strong);background:transparent;color:var(--ink)}
.mb-actions .mb-nav-logout:hover{border-color:var(--ink);color:var(--accent)}
.panel-back{margin-bottom:var(--s4)}
.product-nav .brand{gap:14px}
@media (max-width:899px){
  .product-nav .brand-tag{display:none}
  .product-nav .mb-nav-inner{justify-content:space-between}
  .product-nav .mb-brand{min-width:0}
  .product-nav .mb-word{font-size:1.12rem;overflow:hidden;text-overflow:ellipsis}
  .product-nav .mb-burger{margin-left:auto;flex:0 0 44px}
}