/* ==========================================================================
   photo.fhierl.com – Startseite
   Umgesetzt nach Figma-Artboard "photo.fhierl.com" (Frame 9:138), Stand: 600px Breite
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Schrift: Commissioner (lokal, Variable Font, Latin-Subset)
   Eine Datei deckt alle Gewichte ab (Light 300, Medium 500, Bold 700 ...).
   Die Achsen FLAR und VOLM stehen auf ihrem Standardwert 0, wie in Figma.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Commissioner";
  src: url("../fonts/Commissioner-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Design-Tokens (CSS-Variablen)
   Nur Weiß bzw. Weiß mit Transparenz (plus Hintergrund und eine
   schwarze 10 %-Fläche für die Karten, wie im Design).
   -------------------------------------------------------------------------- */
:root {
  /* Farben */
  --color-bg:          #1e1e1e;
  --color-white:       rgb(255 255 255 / 1);
  --color-white-50:    rgb(255 255 255 / 0.5);   /* Update-Hinweis */
  --color-white-10:    rgb(255 255 255 / 0.1);   /* Hover auf Upload-Feld */
  --color-white-20:    rgb(255 255 255 / 0.2);   /* Badge, Avatar-Hintergrund */
  --color-black:       rgb(0 0 0 / 1);           /* Text auf hellen Buttons */
  --color-black-10:    rgb(0 0 0 / 0.1);         /* Karten-Hintergrund */
  --color-black-20:    rgb(0 0 0 / 0.2);         /* Karten-Hover */

  /* Typografie */
  --font-family:       "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-light:      300;
  --weight-medium:     500;
  --weight-bold:       700;

  --text-xs:           10px;   /* Badge */
  --text-md:           18px;   /* Fließtext */
  --text-xl:           28px;   /* Überschriften */

  --leading-text:      1.4;    /* Intro-Text */
  --leading-card:      1.5;    /* Karten-Text */
  --leading-heading:   normal;

  /* Abstände */
  --space-1:           5px;
  --space-2:           10px;
  --space-3:           25px;
  --space-4:           40px;

  /* Rundungen */
  --radius-card:       25px;
  --radius-pill:       50px;
  --radius-button:     12px;

  /* Maße */
  --content-width:     600px;
  --avatar-size:       96px;
  --avatar-border:     3px;
  --chevron-size:      24px;
  --page-top:          clamp(48px, 10vw, 100px);   /* Figma: 100px */
  --page-gutter:       20px;                       /* Rand auf kleinen Screens */
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  background-color: var(--color-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-family);
  font-weight: var(--weight-light);
  font-size: var(--text-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p { margin: 0; }

img { display: block; max-width: 100%; }

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

.page {
  width: 100%;
  max-width: calc(var(--content-width) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding:
    calc(var(--page-top) + env(safe-area-inset-top, 0px))
    var(--page-gutter)
    calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   3. Header (Avatar, Begrüßung, Intro)
   -------------------------------------------------------------------------- */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: clamp(48px, 10vw, 94px);    /* Figma: ca. 94px bis zur Liste (Liste bei y=480) */
  text-align: center;
}

.avatar {
  width:  calc(var(--avatar-size) + 2 * var(--avatar-border));
  height: calc(var(--avatar-size) + 2 * var(--avatar-border));
  border: var(--avatar-border) solid var(--color-white);
  border-radius: var(--radius-pill);
  background-color: var(--color-white-20);
  overflow: hidden;
  object-fit: cover;
}

.avatar--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
}
.avatar--icon img {
  width: 48px;
  height: 48px;
  filter: brightness(0) invert(0.118);   /* weißes Icon -> #1e1e1e */
}

.intro__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}

.intro__text {
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--leading-text);
}
.intro__text p + p { margin-top: 1.4em; }   /* Leerzeile vor "Viel Spaß" */

/* --------------------------------------------------------------------------
   4. Einstiegs-Karten (entry)
   -------------------------------------------------------------------------- */
.entries {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);                   /* 25px rundum */
  border-radius: var(--radius-card);
  background-color: var(--color-black-10);
  transition: background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.entry:hover,
.entry:focus-visible { background-color: var(--color-black-20); }

.entry:focus-visible {
  outline: 1px solid var(--color-white);
  outline-offset: 3px;
}

.entry__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);   /* 10px nur zwischen Titel und Badge in einer Zeile, kein Zeilenabstand beim Umbruch */
}

.entry__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--color-white-20);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  white-space: nowrap;
}

.entry__desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--leading-card);
}

.entry__meta { color: var(--color-white-50); }

.entry__icon {
  flex-shrink: 0;
  width: var(--chevron-size);
  height: var(--chevron-size);
}

.entry__chevron {
  flex-shrink: 0;
  width: var(--chevron-size);
  height: var(--chevron-size);
  transition: transform 0.2s ease;
}
.entry:hover .entry__chevron,
.entry:focus-visible .entry__chevron { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  :root {
    --text-xl: 24px;
    --text-md: 16px;
  }
  .entry { padding: 20px 24px; }

  /* Badge steht mobil über dem Titel */
  .entry__head {
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--space-2);     /* 10px zwischen Badge und Titel */
  }
  .badge { order: -1; }
  .br-desktop { display: none; }     /* feste Zeilenumbrüche nur auf Desktop */
}

@media (prefers-reduced-motion: reduce) {
  .entry, .entry__chevron { transition: none; }
}