/* ================================================
   PensUnikum — Design System
   Palette angelehnt an authenticus.ch
   Dunkelblau · Warmweiss · Orange-Akzent
   ================================================ */
:root {
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Work Sans", "Helvetica Neue", sans-serif;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;
  --space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;
  --space-8:2rem;--space-10:2.5rem;--space-12:3rem;
  --space-16:4rem;--space-20:5rem;--space-24:6rem;

  /* authenticus-inspirierte Palette */
  --color-bg:              #f8f7f3;
  --color-surface:         #faf9f6;
  --color-surface-2:       #ffffff;
  --color-surface-offset:  #f0ede7;
  --color-divider:         #e2ddd7;
  --color-border:          #d6d0c9;
  --color-text:            #1c2333;
  --color-text-muted:      #6b7280;
  --color-text-faint:      #b0b8c4;
  --color-text-inverse:    #ffffff;

  /* Primär: Dunkelblau (authenticus Kernfarbe) */
  --color-primary:         #1c3a6e;
  --color-primary-hover:   #152d56;
  --color-primary-active:  #0f2040;
  --color-primary-highlight: #dce4f0;

  /* Akzent: warmes Orange (authenticus CTA-Farbe) */
  --color-accent:          #e07b2a;
  --color-accent-hover:    #c96818;
  --color-accent-active:   #a85410;
  --color-accent-highlight:#faebd6;

  --radius-sm:0.375rem;--radius-md:0.5rem;
  --radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;
  --shadow-sm:0 1px 3px oklch(0.2 0.02 240 / 0.08);
  --shadow-md:0 4px 14px oklch(0.2 0.02 240 / 0.10);
  --shadow-lg:0 12px 36px oklch(0.2 0.02 240 / 0.14);
  --transition:180ms cubic-bezier(0.16,1,0.3,1);
  --content-narrow:640px;--content-default:960px;--content-wide:1200px;
}

[data-theme="dark"] {
  --color-bg:             #141922;
  --color-surface:        #1a2030;
  --color-surface-2:      #1f2738;
  --color-surface-offset: #161d2b;
  --color-divider:        #252e40;
  --color-border:         #2e3a50;
  --color-text:           #e2e7f0;
  --color-text-muted:     #8896ae;
  --color-text-faint:     #4a5568;
  --color-primary:        #6b9bd1;
  --color-primary-hover:  #4a7bbf;
  --color-primary-active: #2f5ea0;
  --color-primary-highlight:#1e2e45;
  --color-accent:         #f09040;
  --color-accent-hover:   #e07828;
  --color-accent-active:  #c86010;
  --color-accent-highlight:#2e2010;
  --shadow-sm:0 1px 3px oklch(0 0 0 / 0.25);
  --shadow-md:0 4px 14px oklch(0 0 0 / 0.35);
  --shadow-lg:0 12px 36px oklch(0 0 0 / 0.45);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:4rem;-webkit-font-smoothing:antialiased;}
body{min-height:100dvh;line-height:1.65;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);}
img,svg{display:block;max-width:100%;height:auto;}
h1,h2,h3{text-wrap:balance;line-height:1.15;font-family:var(--font-display);}
p,li{text-wrap:pretty;max-width:72ch;}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-sm);}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}}

/* NAV */
.nav{position:sticky;top:0;z-index:100;background:var(--color-bg);border-bottom:1px solid var(--color-border);padding:var(--space-4) 0;}
.nav-inner{max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);}
.nav-logo{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;letter-spacing:-0.01em;}
.nav-logo .logo-text em{font-style:italic;color:var(--color-accent);}
.nav-actions{display:flex;align-items:center;gap:var(--space-3);}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;transition:all var(--transition);}
.btn-primary{background:var(--color-primary);color:#fff;}
.btn-primary:hover{background:var(--color-primary-hover);}
.btn-accent{background:var(--color-accent);color:#fff;}
.btn-accent:hover{background:var(--color-accent-hover);}
.btn-ghost{color:var(--color-text-muted);}
.btn-ghost:hover{color:var(--color-text);background:var(--color-surface-offset);}
.btn-lg{padding:var(--space-3) var(--space-8);font-size:var(--text-base);}
.btn-outline{border:1.5px solid var(--color-primary);color:var(--color-primary);}
.btn-outline:hover{background:var(--color-primary-highlight);}
.theme-toggle{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--color-text-muted);transition:all var(--transition);}
.theme-toggle:hover{background:var(--color-surface-offset);color:var(--color-text);}

/* HERO */
.hero{padding:clamp(var(--space-16),10vw,var(--space-24)) var(--space-6);display:grid;gap:var(--space-12);max-width:var(--content-wide);margin-inline:auto;}
@media(min-width:768px){.hero{grid-template-columns:1fr 1fr;align-items:center;}}
.hero-content{}
.hero-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-accent-highlight);color:var(--color-accent);border-radius:var(--radius-full);padding:var(--space-1) var(--space-4);font-size:var(--text-xs);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:var(--space-5);}
.hero h1{font-size:var(--text-3xl);margin-bottom:var(--space-5);color:var(--color-text);}
.hero h1 span{color:var(--color-primary);}
.hero-desc{font-size:var(--text-lg);color:var(--color-text-muted);margin-bottom:var(--space-8);max-width:52ch;}
.hero-actions{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;}
.hero-visual{display:flex;justify-content:center;align-items:center;}
.hero-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-lg);width:100%;max-width:380px;}
.hero-card-title{font-size:var(--text-sm);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-5);}
.pensum-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider);}
.pensum-item:last-child{border-bottom:none;}
.pensum-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:var(--color-primary-highlight);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:700;flex-shrink:0;}
.pensum-info{flex:1;}
.pensum-name{font-size:var(--text-sm);font-weight:600;}
.pensum-sub{font-size:var(--text-xs);color:var(--color-text-muted);}
.pensum-bar-wrap{width:80px;height:6px;background:var(--color-divider);border-radius:var(--radius-full);overflow:hidden;}
.pensum-bar{height:100%;background:var(--color-primary);border-radius:var(--radius-full);}
.pensum-bar.ok{background:var(--color-accent);}

/* FEATURES */
.features{padding:clamp(var(--space-12),6vw,var(--space-20)) var(--space-6);background:var(--color-surface);}
.section-header{text-align:center;max-width:var(--content-narrow);margin-inline:auto;margin-bottom:var(--space-12);}
.section-header h2{font-size:var(--text-2xl);margin-bottom:var(--space-4);}
.section-header p{color:var(--color-text-muted);font-size:var(--text-lg);}
.features-grid{max-width:var(--content-wide);margin-inline:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-6);}
.feature-card{background:var(--color-bg);border:1px solid oklch(from var(--color-text) l c h / 0.08);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),transform var(--transition);}
.feature-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.feature-num{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-primary-highlight);font-weight:400;line-height:1;margin-bottom:var(--space-4);}
.feature-card h3{font-size:var(--text-base);font-weight:700;font-family:var(--font-body);margin-bottom:var(--space-3);}
.feature-card p{color:var(--color-text-muted);font-size:var(--text-sm);}

/* STEPS */
.how{padding:clamp(var(--space-12),6vw,var(--space-20)) var(--space-6);}
.steps{max-width:var(--content-default);margin-inline:auto;display:grid;gap:var(--space-8);}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr);}}
.step{text-align:center;padding:var(--space-6);}
.step-num{width:52px;height:52px;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;font-family:var(--font-display);font-size:var(--text-xl);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-5);}
.step h3{font-size:var(--text-base);font-weight:700;font-family:var(--font-body);margin-bottom:var(--space-2);}
.step p{color:var(--color-text-muted);font-size:var(--text-sm);margin-inline:auto;}

/* CTA */
.cta{padding:clamp(var(--space-12),6vw,var(--space-20)) var(--space-6);background:var(--color-primary);color:#fff;text-align:center;}
.cta-inner{max-width:var(--content-narrow);margin-inline:auto;}
.cta h2{font-size:var(--text-2xl);margin-bottom:var(--space-4);}
.cta p{opacity:0.85;margin-bottom:var(--space-8);font-size:var(--text-lg);margin-inline:auto;}

/* FOOTER */
.footer{padding:var(--space-10) var(--space-6);border-top:1px solid var(--color-border);}
.footer-inner{max-width:var(--content-wide);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);}
.footer p{color:var(--color-text-muted);font-size:var(--text-sm);}
.footer-logo{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);}

/* REVEAL */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 0.55s ease,transform 0.55s ease;}
.reveal.visible{opacity:1;transform:none;}