/* ============================================================
   Base — Reset, Typografie, Layout-Primitiven
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  hanging-punctuation: first last;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  overscroll-behavior-y: none;
  min-height: 100dvh;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; }

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

ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--fando);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--fando-100); color: var(--anthracite); }

/* --- Typografie-Utilities ------------------------------------- */
.h1 { font-size: var(--fs-3xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold);  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.h3 { font-size: var(--fs-xl);  font-weight: var(--fw-bold);  line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.body { font-size: var(--fs-md); font-weight: var(--fw-regular); }
.small { font-size: var(--fs-sm); }
.caption { font-size: var(--fs-xs); color: var(--text-muted); }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.overline {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}
.tabular { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Layout-Primitiven ---------------------------------------- */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center-both { display: flex; align-items: center; justify-content: center; }

.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }

.hide { display: none !important; }

/* --- Scrollbar (dezent) --------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--stone-300) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--stone-300); border-radius: var(--r-pill); }
*::-webkit-scrollbar-track { background: transparent; }

/* --- App-Container -------------------------------------------- */
#app {
  position: relative;
  width: 100%;
  max-width: var(--app-max);
  min-height: 100dvh;
  margin-inline: auto;
  /* Sanfter grüner Lichthauch am oberen Rand – bringt die Markenfarbe in die Fläche */
  background: radial-gradient(125% 40% at 50% -6%, var(--fando-100) 0%, transparent 58%), var(--bg);
  overflow: hidden;
}

/* Auf großen Screens: Rahmen wie ein Gerät, ruhiger Hintergrund */
@media (min-width: 540px) {
  body {
    background:
      radial-gradient(120% 60% at 50% 0%, #eceaf3 0%, var(--bg-sunken) 60%);
    padding: env(safe-area-inset-top) 0 0;
  }
  #app {
    min-height: 100dvh;
    box-shadow: var(--shadow-lg);
  }
}