/* ============================================================
   Portfolio — product site
   Design tokens adapted from rehpoehler.de
   ============================================================ */
:root {
   /* Brand / accent */
   --accent: #8b5cf6;
   --accent-rgb: 139, 92, 246;

   /* Asset-class colours (match the app) */
   --aktien: #8b5cf6;
   --fonds: #5aa9e6;
   --crypto: #e8943a;
   --sparen: #34c98a;

   /* Core palette */
   --ink: #15120d;
   --ink-rgb: 21, 18, 13;
   --cream: #f4f1ea;
   --cream-rgb: 244, 241, 234;
   --white: #fff;
   --black: #000;

   /* Elevated surface (light buttons / nav controls) — flips in dark mode */
   --surface: var(--white);

   /* Text */
   --text-body: #4a4438;
   --text-muted: #8a8478;
   --text-muted-dark: #9a937f;
   --text-footer-link: #c9c2ad;

   /* Semantic */
   --pos: #1f9d63;
   --neg: #d0463a;

   /* Borders */
   --border-ink: rgba(var(--ink-rgb), .12);
   --border-ink-strong: rgba(var(--ink-rgb), .15);
   --border-tag: rgba(var(--ink-rgb), .16);
   --border-on-dark: rgba(var(--cream-rgb), .3);

   /* Typography */
   --font-display: 'Archivo', sans-serif;
   --font-body: 'Instrument Sans', system-ui, sans-serif;

   /* Motion */
   --transition: .25s ease;
   --transition-slow: .3s ease;

   /* Shape / layout */
   --radius-pill: 999px;
   --content-max: 1340px;
   --content-pad: clamp(18px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
   font-family: var(--font-body);
   background: var(--cream);
   color: var(--ink);
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   transition: background var(--transition), color var(--transition);
}

::selection { background: rgba(var(--accent-rgb), .22); }

a { color: inherit; text-decoration: none; }

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* ============================================================
   Pills / buttons
   ============================================================ */
.pill { border-radius: var(--radius-pill); font-weight: 600; }

.pill--ghost-dark {
   display: inline-flex; align-items: center; gap: 8px;
   font-size: .86rem; color: var(--ink);
   background: var(--surface);
   border: 1.5px solid var(--border-ink-strong);
   padding: 11px 18px;
   transition: transform var(--transition);
}
.pill--ghost-dark:hover { transform: translateY(-1px); }

.pill--solid {
   white-space: nowrap; font-size: .86rem;
   color: var(--cream); background: var(--ink);
   padding: 12px 22px;
   transition: transform var(--transition), background var(--transition);
}
.pill--solid:hover { transform: translateY(-1px); background: var(--black); }

.pill--solid-lg {
   display: inline-flex; align-items: center; gap: 9px;
   font-size: .95rem; color: var(--cream); background: var(--ink);
   padding: 15px 28px;
   transition: transform var(--transition), background var(--transition);
}
.pill--solid-lg:hover { transform: translateY(-2px); background: var(--black); }

.pill--ghost-lg {
   display: inline-flex; align-items: center; gap: 9px;
   font-size: .95rem; color: var(--ink);
   background: transparent;
   border: 1.5px solid var(--border-ink-strong);
   padding: 14px 26px;
   transition: transform var(--transition), border-color var(--transition);
}
.pill--ghost-lg:hover { transform: translateY(-2px); border-color: var(--ink); }

.pill--footer-solid {
   font-size: .92rem; color: var(--ink); background: var(--cream);
   padding: 13px 24px; transition: transform var(--transition);
}
.pill--footer-solid:hover { transform: translateY(-2px); }

.pill--footer-ghost {
   font-size: .92rem; color: var(--cream);
   border: 1.5px solid var(--border-on-dark);
   padding: 12px 22px; transition: border-color var(--transition);
}
.pill--footer-ghost:hover { border-color: var(--cream); }

.pill-arrow { font-size: .8rem; }

/* ---- Theme toggle ---- */
.theme-toggle {
   display: inline-flex; align-items: center; justify-content: center;
   width: 42px; height: 42px; border-radius: 50%;
   color: var(--ink); background: var(--surface);
   border: 1.5px solid var(--border-ink-strong); cursor: pointer;
   transition: transform var(--transition), background var(--transition),
      border-color var(--transition), color var(--transition);
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* ============================================================
   Eyebrow / section labels
   ============================================================ */
.eyebrow {
   font-size: .82rem; font-weight: 600; letter-spacing: .18em;
   text-transform: uppercase; color: var(--text-muted);
}
.eyebrow--strong { font-weight: 700; }
.eyebrow--block { margin-bottom: 20px; }
.eyebrow--on-dark { color: var(--text-muted-dark); }

/* ============================================================
   Nav
   ============================================================ */
.nav {
   position: sticky; top: 0; z-index: 50;
   display: flex; align-items: center; justify-content: space-between;
   padding: 12px clamp(12px, 4vw, 56px);
   background: rgba(var(--cream-rgb), .7);
   backdrop-filter: blur(12px) saturate(160%);
   -webkit-backdrop-filter: blur(12px) saturate(160%);
   border-bottom: 1px solid var(--border-ink);
}

.nav-brand { display: flex; align-items: center; gap: 9px; }

.nav-brand-dot {
   width: 18px; height: 18px; border-radius: 50%;
   background: conic-gradient(from 30deg, var(--accent), #ec88c8, #5ec8c0, var(--accent));
}

.nav-brand-name {
   font-family: var(--font-display); font-weight: 800;
   font-size: 1.3rem; letter-spacing: -.02em;
}

.nav-pills { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   Layout
   ============================================================ */
.main {
   flex: 1; max-width: var(--content-max); width: 100%;
   margin: 0 auto; padding: 0 var(--content-pad);
}

/* ---- Hero ---- */
.hero { padding: clamp(36px, 7vw, 88px) 0 clamp(8px, 2vw, 24px); }

.hero-head { max-width: 66%; }

.hero-title {
   font-family: var(--font-display); font-weight: 800;
   font-size: clamp(2.6rem, 8vw, 6.4rem);
   line-height: .9; letter-spacing: -.045em;
   text-transform: uppercase; color: var(--ink);
   margin-top: 18px; overflow-wrap: anywhere;
}
.hero-title .tint { color: var(--accent); white-space: nowrap; }

.hero-bio-text {
   font-size: clamp(1.05rem, 1.6vw, 1.25rem);
   line-height: 1.6; color: var(--text-body);
   max-width: 52ch; margin-top: 24px; text-wrap: pretty;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---- Phone showcase ---- */
.showcase {
   display: flex; align-items: flex-start; justify-content: center;
   gap: clamp(14px, 3vw, 40px);
   margin-top: clamp(20px, 3vw, 38px);
   padding-bottom: clamp(8px, 2vw, 20px);
}

.showcase-item { flex: 1 1 0; max-width: 300px; min-width: 0; }

.showcase-caption {
   text-align: center; margin-top: 22px;
   font-family: var(--font-display); font-weight: 700;
   font-size: 1.02rem; letter-spacing: -.01em; color: var(--ink);
}
.showcase-caption span {
   display: block; font-family: var(--font-body); font-weight: 500;
   font-size: .86rem; color: var(--text-muted); letter-spacing: 0;
   margin-top: 3px;
}

/* ---- iPhone frame (matches the reference mockup) ---- */
.device {
   position: relative; width: 100%;
   aspect-ratio: 1206 / 2622;
   border-radius: 13.5% / 6.2%;
   padding: 2.7%;
   background: linear-gradient(152deg, #ffffff 0%, #eceef3 58%, #e3e6ec 100%);
   box-shadow:
      0 1px 3px rgba(21, 18, 13, .05),
      0 6px 14px -4px rgba(21, 18, 13, .10),
      0 30px 60px -18px rgba(21, 18, 13, .26),
      inset 0 0 0 1px rgba(21, 18, 13, .06),
      inset 0 1.5px 1px rgba(255, 255, 255, .9);
   transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.device:hover {
   transform: translateY(-6px);
   box-shadow:
      0 1px 3px rgba(21, 18, 13, .05),
      0 8px 18px -4px rgba(21, 18, 13, .12),
      0 40px 76px -16px rgba(21, 18, 13, .30),
      inset 0 0 0 1px rgba(21, 18, 13, .06),
      inset 0 1.5px 1px rgba(255, 255, 255, .9);
}

.device-screen {
   position: relative; width: 100%; height: 100%;
   border-radius: 10.6% / 4.9%;
   overflow: hidden; background: #f4f5f8;
   box-shadow: inset 0 0 0 1px rgba(21, 18, 13, .04);
}
.device-screen img {
   display: block; width: 100%; height: 100%; object-fit: cover;
}

/* ---- Asset-class cards ---- */
.assets { padding: clamp(40px, 6vw, 72px) 0 clamp(20px, 3vw, 32px); }

/* span 3 of the 4 asset-grid columns (gap 16px): 3 cols + 2 gaps */
.section-head {
   max-width: calc((100% - 48px) / 4 * 3 + 32px);
   margin-bottom: clamp(28px, 4vw, 44px);
}
.section-title {
   font-family: var(--font-display); font-weight: 800;
   font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.02;
   letter-spacing: -.03em; color: var(--ink); margin-top: 14px;
   text-wrap: balance;
}

.asset-grid {
   display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}

.asset-card {
   position: relative; overflow: hidden;
   aspect-ratio: 4 / 5;
   background: var(--card-color); color: var(--white);
   border-radius: 22px; padding: 20px;
   display: flex; flex-direction: column;
   transition: transform var(--transition-slow);
}
.asset-card:hover { transform: translateY(-4px); }
.asset-card--aktien { --card-color: var(--aktien); }
.asset-card--fonds  { --card-color: var(--fonds); }
.asset-card--crypto { --card-color: var(--crypto); }
.asset-card--sparen { --card-color: var(--sparen); }

.asset-tag {
   font-size: .72rem; font-weight: 600; letter-spacing: .2em;
   text-transform: uppercase; opacity: .85;
}
.asset-ghost {
   position: absolute; right: -8px; bottom: -52px;
   font-family: var(--font-display); font-weight: 900;
   font-size: 12rem; line-height: 1; opacity: .14;
}
.asset-title {
   margin-top: auto; font-family: var(--font-display);
   font-weight: 800; font-size: 1.85rem; letter-spacing: -.02em;
}
.asset-desc {
   font-size: .9rem; line-height: 1.45; margin-top: 8px;
   opacity: .92; text-wrap: pretty;
}

/* ---- Why section ---- */
.why {
   padding: clamp(40px, 6vw, 72px) 0;
   border-top: 1px solid var(--border-ink);
   margin-top: clamp(24px, 4vw, 44px);
}
.why-grid {
   display: grid; grid-template-columns: 0.8fr 1.2fr;
   gap: clamp(28px, 5vw, 80px); align-items: start;
}
.why-accent { width: 48px; height: 3px; background: var(--accent); margin-top: 16px; }
.why-lead {
   font-family: var(--font-display); font-weight: 700;
   font-size: clamp(1.4rem, 2.8vw, 2.2rem); line-height: 1.25;
   letter-spacing: -.018em; color: var(--ink); text-wrap: pretty;
}
.why-body {
   font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.65;
   color: var(--text-body); margin-top: 24px; max-width: 62ch; text-wrap: pretty;
}

/* ---- Capability tags ---- */
.caps { padding: 0 0 clamp(48px, 7vw, 96px); }
.tag-list { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.tag {
   display: inline-flex; align-items: center; gap: 8px;
   font-family: var(--font-display); font-weight: 600;
   font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--ink);
   border: 1.5px solid var(--border-tag);
   padding: 11px 20px; border-radius: var(--radius-pill);
   transition: border-color var(--transition), color var(--transition);
}
.tag:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--ink); color: var(--cream); }
.footer-inner {
   max-width: var(--content-max); margin: 0 auto;
   padding: clamp(56px, 8vw, 96px) var(--content-pad);
}
.footer-title {
   font-family: var(--font-display); font-weight: 800;
   font-size: clamp(2rem, 6vw, 4.6rem); line-height: .96;
   letter-spacing: -.035em; text-transform: uppercase;
   max-width: 18ch; text-wrap: balance;
}
.footer-row {
   display: flex; align-items: center; justify-content: space-between;
   flex-wrap: wrap; gap: 16px; margin-top: clamp(40px, 6vw, 72px);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-meta {
   font-size: .86rem; color: var(--text-muted-dark);
   display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.footer-impressum {
   color: var(--text-footer-link); text-decoration: underline;
   text-underline-offset: 3px; transition: color var(--transition);
}
.footer-impressum:hover { color: var(--cream); }

/* ============================================================
   Dark mode — driven by [data-theme="dark"] (set by the toggle /
   the inline no-flash script that reads localStorage or the OS pref)
   ============================================================ */
:root[data-theme="dark"] {
   /* Page surface + foreground (the cream/ink pair flips) */
   --cream: #14110c;
   --cream-rgb: 20, 17, 12;
   --ink: #f3f0e9;
   --ink-rgb: 243, 240, 233;

   /* Elevated controls become dark instead of white */
   --surface: #221e18;

   /* Brighten the accent so it carries on a dark ground */
   --accent: #a181f9;
   --accent-rgb: 161, 129, 249;

   --text-body: #c4bdb0;
   --text-muted: #948d80;
   --text-muted-dark: #948d80;
   --text-footer-link: #948d80;

   --border-ink: rgba(243, 240, 233, .12);
   --border-ink-strong: rgba(243, 240, 233, .20);
   --border-tag: rgba(243, 240, 233, .18);
   --border-on-dark: rgba(243, 240, 233, .22);
}

/* Solid pills flip to a light ink ground — keep their hover light, not black */
:root[data-theme="dark"] .pill--solid:hover,
:root[data-theme="dark"] .pill--solid-lg:hover { background: #ffffff; }

/* The footer is already dark by design — keep it dark instead of flipping light */
:root[data-theme="dark"] .footer { background: #0e0c08; color: var(--text-body); }
:root[data-theme="dark"] .pill--footer-solid { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .footer-impressum:hover { color: var(--ink); }

/* Soften the phone bezel's drop shadow on the dark ground */
:root[data-theme="dark"] .device {
   box-shadow:
      0 1px 3px rgba(0, 0, 0, .4),
      0 30px 60px -18px rgba(0, 0, 0, .55),
      inset 0 0 0 1px rgba(255, 255, 255, .04),
      inset 0 1.5px 1px rgba(255, 255, 255, .5);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
   .hero-head { max-width: 88%; }
   .section-head { max-width: none; }
   .asset-grid { grid-template-columns: 1fr 1fr; }
   .why-grid { grid-template-columns: 1fr; gap: 24px; }
   /* boxes hug their content instead of the tall 4/5 ratio (~1/3 height) */
   .asset-card { aspect-ratio: auto; }
   .asset-title { margin-top: 16px; }
   .asset-ghost { bottom: -28px; font-size: 7rem; }
}

@media (max-width: 600px) {
   .hero-head { max-width: 100%; }
}

@media (max-width: 760px) {
   .showcase {
      flex-wrap: nowrap; justify-content: flex-start; gap: 14px;
      margin-left: calc(var(--content-pad) * -1);
      margin-right: calc(var(--content-pad) * -1);
      padding: 0 var(--content-pad) 8px;
      overflow-x: auto; scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
   }
   .showcase::-webkit-scrollbar { display: none; }
   .showcase-item {
      flex: 0 0 72%; max-width: 320px; scroll-snap-align: center;
   }
}

@media (max-width: 520px) {
   .asset-grid { grid-template-columns: 1fr; }
   .footer-row { flex-direction: column; gap: 14px; align-items: flex-start; }
}