:root{
  color-scheme: dark;

  --bg:#0e0f12;
  --ink:#f5f5f7;
  --ink-soft:rgba(245,245,247,.72);
  --ink-muted:rgba(245,245,247,.45);
  --line:rgba(245,245,247,.18);

  --surface:rgba(14,15,18,.22);
  --surface-strong:rgba(14,15,18,.38);
  --surface-border:rgba(245,245,247,.12);
  --surface-border-strong:rgba(245,245,247,.14);
  --surface-glow:rgba(245,245,247,.08);
  --shadow-strong:0 18px 70px rgba(0,0,0,.32);
  --header-shadow:0 10px 40px rgba(0,0,0,.35);
  --shadow-button:0 6px 22px rgba(0,0,0,.18);
  --shadow-toggle:0 4px 16px rgba(0,0,0,.18);
  --shadow-card-hover:0 22px 90px rgba(0,0,0,.38);

  --btn-bg:#f5f5f7;
  --btn-ink:#0e0f12;
  --btn-hover:#ffffff;
  --link-underline:rgba(245,245,247,.4);

  --accent-amber-1:rgba(168, 140, 70, 0.35);
  --accent-violet-1:rgba(110, 90, 200, 0.25);
  --accent-amber-2:rgba(168,140,70,.22);
  --accent-violet-2:rgba(110,90,200,.18);
  --panel-gradient-top:rgba(245,245,247,.08);
  --panel-gradient-soft:rgba(245,245,247,.06);
  --badge-bg:rgba(14,15,18,.25);
  --pill-bg:rgba(245,245,247,.10);
  --pill-border:rgba(245,245,247,.14);
  --header-bg:rgba(14,15,18,.38);
  --header-border:rgba(245,245,247,.12);
}

[data-theme="light"]{
  color-scheme: light;

  --bg:#f8f7fb;
  --ink:#111224;
  --ink-soft:rgba(17,18,36,.82);
  --ink-muted:rgba(17,18,36,.56);
  --line:rgba(17,18,36,.12);

  --surface:rgba(255,255,255,.92);
  --surface-strong:rgba(255,255,255,.96);
  --surface-border:rgba(17,18,36,.10);
  --surface-border-strong:rgba(17,18,36,.14);
  --surface-glow:rgba(17,18,36,.05);
  --shadow-strong:0 14px 50px rgba(17,18,36,.12);
  --header-shadow:0 12px 46px rgba(17,18,36,.16);
  --shadow-button:0 8px 24px rgba(17,18,36,.16);
  --shadow-toggle:0 6px 20px rgba(17,18,36,.14);
  --shadow-card-hover:0 20px 72px rgba(17,18,36,.20);

  --btn-bg:#1b1738;
  --btn-ink:#f7f7fb;
  --btn-hover:#241e4b;
  --link-underline:rgba(17,18,36,.32);

  --accent-amber-1:rgba(222, 187, 126, 0.18);
  --accent-violet-1:rgba(162, 144, 222, 0.16);
  --accent-amber-2:rgba(222,187,126,.14);
  --accent-violet-2:rgba(162,144,222,.12);
  --panel-gradient-top:rgba(17,18,36,.05);
  --panel-gradient-soft:rgba(17,18,36,.04);
  --badge-bg:rgba(255,255,255,.92);
  --pill-bg:rgba(17,18,36,.06);
  --pill-border:rgba(17,18,36,.14);
  --header-bg:rgba(255,255,255,.78);
  --header-border:rgba(17,18,36,.08);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; background-color:var(--bg); }

body{
  margin:0;
  min-height:100vh;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 65% 20%, var(--accent-amber-1), rgba(14, 15, 18, 0) 60%),
    radial-gradient(900px 500px at 30% 10%, var(--accent-violet-1), rgba(14, 15, 18, 0) 55%);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}

body, .cw-header__inner, .cw-header__btn, .cw-brand, .btn, .link-secondary, .access-card, .casework-facts, .fact, .access-badge, .theme-toggle{
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}

/* LOGO (legacy, falls genutzt) */
.logo{
  position:fixed;
  top:28px;
  left:32px;
  font-family:Jost, system-ui;
  font-weight:600;
  letter-spacing:.18em;
  font-size:13px;
  text-transform:uppercase;
  color:var(--ink-soft);
  z-index:10;
  pointer-events:none;
}

section{
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding: clamp(64px, 7vw, 140px) 32px 0;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-bottom:48px;
}

.meta{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-muted);
}

.meta .spacer{ flex:1; }

.meta .no{
  font-variant-numeric:tabular-nums;
  letter-spacing:.2em;
  color:var(--ink-soft);
}

h1{
  margin:28px 0 14px;
  font-family:Jost, system-ui;
  font-weight:500;
  line-height:1.02;
  letter-spacing:-0.02em;
  font-size:clamp(40px, 6vw, 84px);
  max-width:22ch;
}

.lead{
  max-width:64ch;
  font-size:clamp(16px, 1.6vw, 19px);
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}

/* CTA */
.cta{
  margin-top:32px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.btn{
  height:44px;
  padding:0 22px;
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--btn-ink);
  text-decoration:none;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  border:1px solid transparent;
  box-shadow:var(--shadow-button);
}

.btn:hover{ background:var(--btn-hover); }

.link-secondary{
  font-size:14.5px;
  color:var(--ink-soft);
  text-decoration:none;
  position:relative;
}

.link-secondary::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:1px;
  background:var(--link-underline);
  opacity:.8;
}

.link-secondary:hover{ color:var(--ink); }

/* DETAILS */
.bottom{
  border-top:1px solid var(--line);
  padding:28px 0 32px;
}

.bottom-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:160px 1fr;
  gap:32px;
}

.bottom h3{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-muted);
  font-weight:400;
  margin:0;
}

.bottom p{
  max-width:72ch;
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}

/* SECOND SECTION */
.section-secondary{
  min-height:100vh;
  display:flex;
  align-items:center;
  border-top:1px solid var(--line);
}

.secondary-inner{
  max-width:1200px;
  margin:0 auto;
  padding: clamp(80px, 8vw, 160px) 32px;
  width:100%;
}

.align-right{
  margin-left:auto;
  max-width:520px;
}

.secondary-inner h2{
  font-family:Jost, system-ui;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.05;
  font-size:clamp(36px, 5vw, 72px);
  margin:0 0 18px;
}

.secondary-inner p{
  font-size:clamp(16px, 1.6vw, 18px);
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
  max-width:56ch;
}

@media(max-width:700px){
  .logo{ left:24px; top:22px; }
  .bottom-inner{ grid-template-columns:1fr; }
  .align-right{ margin-left:0; }
}

/* ===== Landing Header (fixed, content width) ===== */
.cw-header{
  position: fixed;
  top: 22px;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;
}

.cw-header__inner{
  max-width:1200px;
  margin:0 auto;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  pointer-events: auto;
  border:1px solid var(--header-border);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  box-shadow: var(--header-shadow);
  border-radius:14px;
}

.cw-header__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.cw-brand{
  font-family:Jost, system-ui;
  font-weight:600;
  letter-spacing:.18em;
  font-size:13px;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
}

.cw-brand:hover{ color:var(--ink); }

.cw-header__btn{
  height:38px;
  padding:0 14px;
  border-radius:999px;
  background: var(--pill-bg);
  border:1px solid var(--pill-border);
  color: var(--ink);
  text-decoration:none;
  font-weight:500;
  font-size:13px;
  display:inline-flex;
  align-items:center;
}

.cw-header__btn:hover{
  background: var(--btn-hover);
  color:var(--btn-ink);
  border-color:var(--surface-border-strong);
}

.theme-toggle{
  height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--pill-border);
  background:var(--pill-bg);
  color:var(--ink);
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow-toggle);
}

.theme-toggle:hover{
  background:var(--btn-hover);
  color:var(--btn-ink);
  border-color:var(--surface-border-strong);
}

@media(max-width:700px){
  .cw-header{ top: 14px; }
  .cw-header__inner{
    margin:0 16px;
    max-width: calc(100% - 32px);
    border-radius:12px;
  }
}


/* ===== ACCESS (2 cards + gradient glow) ===== */
.section-access{
  min-height:100vh;
  display:flex;
  align-items:center;
  border-top:1px solid var(--line);
}

.access-inner{
  max-width:1200px;
  margin:0 auto;
  width:100%;
  padding: clamp(80px, 8vw, 160px) 32px;
}

.access-head{ max-width:72ch; margin-bottom:44px; }

.access-kicker{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin-bottom:14px;
}

.access-head h2{
  font-family:Jost, system-ui;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.05;
  font-size:clamp(34px, 4.8vw, 62px);
  margin:0 0 14px;
}

.access-head p{
  font-size:clamp(16px, 1.6vw, 18px);
  line-height:1.7;
  color:var(--ink-soft);
  margin:0;
}

.access-grid{
  display:grid;
  gap: clamp(18px, 3vw, 30px);
}

.access-grid--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Card base */
.access-card{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  padding:26px 24px 22px;
  border:1px solid var(--surface-border);
  background: var(--surface);
  backdrop-filter: blur(6px);
  box-shadow:var(--shadow-strong);
  transform: translateZ(0);
}

/* Gradient layer */
.access-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 520px at 70% 10%, var(--accent-amber-2), rgba(0,0,0,0) 55%),
    radial-gradient(760px 520px at 20% 0%, var(--accent-violet-2), rgba(0,0,0,0) 58%);
  opacity:.85;
  pointer-events:none;
}

/* Soft inner shine */
.access-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, var(--panel-gradient-top), rgba(245,245,247,0) 30%),
    radial-gradient(600px 220px at 50% 0%, var(--panel-gradient-soft), rgba(0,0,0,0) 60%);
  opacity:.55;
  pointer-events:none;
}

.access-card > *{ position:relative; z-index:1; }

.access-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.access-card h3{
  margin:0;
  font-family:Jost, system-ui;
  font-weight:600;
  font-size:18px;
  letter-spacing:.02em;
}

.access-badge{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--surface-border-strong);
  padding:6px 10px;
  border-radius:999px;
  background:var(--badge-bg);
}

.access-lead{
  margin:0 0 18px;
  font-size:15.5px;
  line-height:1.7;
  color:var(--ink-soft);
}

.access-list{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:grid;
  gap:10px;
  font-size:14.5px;
}

.access-list li{
  position:relative;
  padding-left:18px;
  color:var(--ink-soft);
}

.access-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--ink-soft);
}

.access-price{
  padding-top:14px;
  border-top:1px solid var(--line);
  margin-bottom:14px;
}

.access-eur{
  font-size:26px;
  font-weight:600;
}

.access-per{
  margin-left:6px;
  font-size:14px;
  color:var(--ink-soft);
}

.access-note{
  margin-top:6px;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-muted);
}

.access-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.access-btn{ height:44px; padding:0 22px; border-radius:999px; }

.access-card:hover{
  border-color: var(--surface-border-strong);
  box-shadow:var(--shadow-card-hover);
}

.access-card:hover::before{ opacity:1; }
.access-card:hover::after{ opacity:.7; }

.access-footer{
  margin-top:28px;
  max-width:86ch;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-soft);
}

/* Mobile */
@media(max-width:900px){
  .access-grid--2{ grid-template-columns:1fr; }
}

/* ===== INNERWORK ERKLÄRT (magazine style) ===== */
.section-casework{
  border-top:1px solid var(--line);
  background:
    radial-gradient(900px 520px at 18% 35%, var(--accent-violet-2), rgba(0,0,0,0) 60%),
    radial-gradient(900px 520px at 78% 55%, var(--accent-amber-2), rgba(0,0,0,0) 62%),
    var(--bg);
}

.casework-inner{
  max-width:1200px;
  margin:0 auto;
  padding: clamp(70px, 7vw, 130px) 32px;
}

.casework-grid{
  display:grid;
  grid-template-columns:160px minmax(0, 1.25fr) minmax(0, .75fr);
  gap:32px;
  align-items:start;
}

.casework-label{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-muted);
  padding-top:10px;
}

.casework-copy h2{
  margin:0 0 16px;
  font-family:Jost, system-ui;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.04;
  font-size:clamp(32px, 4.6vw, 58px);
  max-width:22ch;
}

.casework-lead{
  margin:0 0 14px;
  font-size:clamp(16px, 1.55vw, 18px);
  line-height:1.75;
  color:var(--ink-soft);
  max-width:70ch;
}

.casework-copy p{
  margin:0 0 14px;
  font-size:15.5px;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:72ch;
}

.casework-quote{
  margin-top:18px;
  padding-left:14px;
  border-left:1px solid var(--line);
  color:var(--ink);
}

.casework-facts{
  position:relative;
  border:1px solid var(--surface-border);
  border-radius:16px;
  padding:18px 16px;
  background:var(--surface);
  backdrop-filter: blur(6px);
  box-shadow:var(--shadow-strong);
  overflow:hidden;
}

.casework-facts::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 380px at 75% 15%, var(--accent-amber-2), rgba(0,0,0,0) 55%),
    radial-gradient(700px 380px at 20% 0%, var(--accent-violet-2), rgba(0,0,0,0) 60%);
  opacity:.9;
  pointer-events:none;
}

.casework-facts > *{ position:relative; z-index:1; }

.fact{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:14px;
  padding:12px 10px;
  border-radius:12px;
}

.fact + .fact{ border-top:1px solid var(--line); }

.fact-k{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-muted);
}

.fact-v{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft);
}

@media(max-width:980px){
  .casework-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .casework-label{ padding-top:0; }
  .fact{ grid-template-columns:1fr; gap:6px; }
}

/* ===== SHOWCASE: Laptop Section ===== */
.laptop-section{
  border-top:1px solid var(--line);
  background:
    radial-gradient(1100px 540px at 20% 20%, var(--accent-violet-2), rgba(0,0,0,0) 58%),
    radial-gradient(1100px 540px at 80% 30%, var(--accent-amber-2), rgba(0,0,0,0) 60%),
    var(--bg);
}

.laptop-container{
  max-width:1200px;
  margin:0 auto;
  padding: clamp(80px, 8vw, 160px) 32px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 48px);
}

.laptop-text-track{
  display:grid;
  gap: clamp(34px, 4vw, 44px);
  align-content:start;
}

.laptop-text-block{
  padding:22px 0;
  border-top:1px solid var(--line);
  color:var(--ink-soft);
  transition: color .35s ease, border-color .35s ease, opacity .35s ease;
}

.laptop-text-block h2{
  margin:8px 0 12px;
  font-family:Jost, system-ui;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.06;
  font-size:clamp(30px, 4.6vw, 48px);
  color:var(--ink);
}

.laptop-text-block p{ margin:0 0 12px; line-height:1.7; }
.laptop-text-block .kicker{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin:0;
}

.laptop-text-block.active{
  color:var(--ink);
  border-color:var(--surface-border-strong);
}

.text-indicator{
  display:flex;
  gap:6px;
  margin-top:12px;
}

.text-indicator span{
  width:24px;
  height:3px;
  border-radius:999px;
  background:var(--line);
  opacity:.7;
  transition: background-color .35s ease, opacity .35s ease;
}

.text-indicator .active{
  background:var(--ink);
  opacity:1;
}

.laptop-sticky-wrap{ position:relative; }

.laptop-sticky{
  position:sticky;
  top:120px;
}

.laptop-frame{
  position:relative;
  border-radius:18px 18px 10px 10px;
  background:var(--surface);
  border:1px solid var(--surface-border);
  box-shadow:var(--shadow-strong);
  padding:18px 18px 40px;
  overflow:hidden;
}

.laptop-frame::before{
  content:"";
  position:absolute;
  inset:-4px;
  background:
    radial-gradient(900px 520px at 70% 10%, var(--accent-amber-2), rgba(0,0,0,0) 55%),
    radial-gradient(760px 520px at 20% 0%, var(--accent-violet-2), rgba(0,0,0,0) 58%);
  opacity:.7;
  pointer-events:none;
}

.laptop-frame > *{ position:relative; z-index:1; }

.laptop-screen{
  background:var(--bg);
  border:1px solid var(--surface-border-strong);
  border-radius:12px;
  overflow:hidden;
}

.screen-content{
  display:none;
  height:100%;
}

.screen-content.active{ display:block; }

.mock-ui{
  display:flex;
  flex-direction:column;
  gap:0;
}

.mock-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  background:var(--surface-strong);
  border-bottom:1px solid var(--line);
}

.mock-logo{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-family:Jost, system-ui;
}

.mock-nav{
  display:flex;
  gap:12px;
  font-size:13px;
  color:var(--ink-muted);
}

.mock-nav span.active{
  color:var(--ink);
  font-weight:600;
}

.mock-body{
  padding:16px 18px;
  background:var(--surface);
}

.timeline-entries{
  display:grid;
  gap:12px;
}

.timeline-entry{
  padding:12px 12px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.timeline-entry-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.timeline-entry-type{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--ink);
}

.timeline-entry-type.reflection{ background:rgba(110,90,200,.12); }
.timeline-entry-type.note{ background:rgba(168,140,70,.12); }

.timeline-entry-date{
  font-size:12px;
  color:var(--ink-muted);
}

.timeline-entry-title{
  margin:0 0 4px;
  font-weight:600;
  color:var(--ink);
}

.timeline-entry-text{
  margin:0;
  color:var(--ink-soft);
  line-height:1.6;
}

.aufgaben-module{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  padding:14px;
}

.aufgaben-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  color:var(--ink);
}

.aufgaben-title{ font-weight:600; }
.aufgaben-progress{
  font-size:13px;
  color:var(--ink-muted);
}

.aufgaben-list{
  display:grid;
  gap:10px;
}

.aufgabe-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface);
}

.aufgabe-item.done{
  background:rgba(110,90,200,.12);
  border-color:rgba(110,90,200,.24);
}

.aufgabe-check{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--bg);
  color:var(--ink);
}

.aufgabe-check svg{ width:18px; height:18px; stroke-width:2.2; }

.aufgabe-content h4{
  margin:0 0 4px;
  font-size:15px;
  color:var(--ink);
}

.aufgabe-content p{
  margin:0;
  color:var(--ink-soft);
  font-size:14px;
}

.einreichen-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  background:var(--bg);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.einreichen-entry-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  color:var(--ink);
}

.einreichen-type{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
}

.einreichen-date{ font-size:12px; color:var(--ink-muted); }

.einreichen-title{
  margin:0 0 6px;
  font-weight:600;
  color:var(--ink);
}

.einreichen-text{
  margin:0 0 10px;
  color:var(--ink-soft);
  line-height:1.6;
}

.einreichen-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.einreichen-btn{
  height:38px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.einreichen-btn.primary{
  background:var(--btn-bg);
  color:var(--btn-ink);
  border-color:var(--surface-border-strong);
}

.einreichen-btn.primary:hover{
  background:var(--btn-hover);
}

.einreichen-btn.secondary:hover{
  border-color:var(--surface-border-strong);
}

.einreichen-hint{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--ink-muted);
}

.einreichen-hint svg{ width:18px; height:18px; }

.laptop-base{
  height:10px;
  background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0.08));
  border-radius:0 0 12px 12px;
  border:1px solid var(--surface-border);
  border-top:none;
}

.laptop-shadow{
  height:14px;
  margin:0 36px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,0));
  opacity:.65;
  transform:translateY(-4px);
}

@media(max-width:1100px){
  .laptop-container{
    grid-template-columns:1fr;
  }
  .laptop-sticky{ position:relative; top:0; }
}

/* ===== PRICING (2 CARDS) ===== */
.pricing{
  border-top:1px solid var(--line);
  background:
    radial-gradient(900px 520px at 15% 35%, var(--accent-amber-2), rgba(0,0,0,0) 62%),
    radial-gradient(900px 520px at 85% 25%, var(--accent-violet-2), rgba(0,0,0,0) 60%),
    var(--bg);
}

.pricing-inner{
  max-width:1200px;
  margin:0 auto;
  padding: clamp(80px, 8vw, 150px) 32px;
}

.pricing-head{
  max-width:820px;
  margin-bottom:36px;
}

.pricing-kicker{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin:0 0 10px;
}

.pricing-title{
  margin:0 0 12px;
  font-family:Jost, system-ui;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.06;
  font-size:clamp(34px, 4.8vw, 62px);
  color:var(--ink);
}

.pricing-sub{
  margin:0;
  font-size:clamp(16px, 1.6vw, 18px);
  line-height:1.7;
  color:var(--ink-soft);
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap: clamp(18px, 3vw, 28px);
}

.price-card{
  position:relative;
  border-radius:16px;
  padding:24px 22px 22px;
  border:1px solid var(--surface-border);
  background:var(--surface);
  box-shadow:var(--shadow-strong);
  overflow:hidden;
}

.price-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 420px at 70% 10%, var(--accent-amber-2), rgba(0,0,0,0) 58%),
    radial-gradient(700px 420px at 10% 0%, var(--accent-violet-2), rgba(0,0,0,0) 60%);
  opacity:.9;
  pointer-events:none;
}

.price-card > *{ position:relative; z-index:1; }

.price-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.price-card h3{
  margin:0;
  font-family:Jost, system-ui;
  font-weight:600;
  letter-spacing:.02em;
  font-size:18px;
  color:var(--ink);
}

.price-card__tag{
  margin:0;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--surface-border-strong);
  padding:6px 10px;
  border-radius:999px;
  background:var(--badge-bg);
}

.price-card__lead{
  margin:0 0 14px;
  font-size:15.5px;
  line-height:1.7;
  color:var(--ink-soft);
}

.price-list{
  list-style:none;
  padding:0;
  margin:0 0 16px;
  display:grid;
  gap:10px;
  font-size:14.5px;
  color:var(--ink-soft);
}

.price-list li{
  position:relative;
  padding-left:18px;
}

.price-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--ink-soft);
}

.price-box{
  padding-top:12px;
  border-top:1px solid var(--line);
  margin-bottom:14px;
}

.price{
  display:flex;
  align-items:baseline;
  gap:8px;
  color:var(--ink);
}

.price-amount{
  font-size:28px;
  font-weight:700;
}

.price-unit{
  font-size:14px;
  color:var(--ink-soft);
}

.price-note{
  margin:6px 0 0;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
}

.price-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn-primary{
  background:var(--btn-bg);
  color:var(--btn-ink);
  border:1px solid var(--surface-border-strong);
}

.btn-primary:hover{ background:var(--btn-hover); }

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--surface-border);
}

.btn-ghost:hover{
  border-color:var(--surface-border-strong);
  background:var(--pill-bg);
}

.price-card:hover{
  border-color:var(--surface-border-strong);
  box-shadow:var(--shadow-card-hover);
}

.price-card--teams{
  background:var(--surface-strong);
}

.price-card--teams::before{
  opacity:.75;
}

@media(max-width:900px){
  .pricing-grid{ grid-template-columns:1fr; }
}