/* choechtl.at: persönliche Visitenkarte auf einem Bildschirm. Farben wie Alltag/Trio, eigene Schriften (sachlich wie eine Zeitung, Beschriftungen in Code-Schrift). Wird von Hand gepflegt. */
/* Aufbau: body ist eine Spalte über die volle Bildschirmhöhe (Kopf, Karte, [Fotos], Fußzeile); die Karte hat links „Über mich“, rechts die Apps. */
/* Schriften liegen selbst auf dem Server (keine Anfrage an Google), Lizenz: SIL Open Font License */
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-display: swap }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap }
:root {
  color-scheme: dark;
  --bg: #141d21;
  --surface: #1f2b31;
  --line: #ffffff1a;
  --fg: #eef3f1;
  --muted: #95a6ab;
  --accent: #6fe0b8;
  --gold: #ffcf5c;
  --display: "Schibsted Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --body: "Schibsted Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 12px;
}
*, *::before, *::after { box-sizing: border-box }
html { background: var(--bg); scroll-behavior: smooth }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip;
  background: radial-gradient(60vw 50vh at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent), var(--bg);
  color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px }
a { color: inherit }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)) }

/* Kopf */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: max(22px, env(safe-area-inset-top)) }
.brand { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.045em; text-decoration: none }
.brand span { color: var(--gold); margin-left: 1px }
.where { font-family: var(--mono); font-size: 13px; color: var(--muted) }

/* Karte: füllt den Platz zwischen Kopf und Fußzeile und steht mittig */
.card { flex: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: center; padding-top: clamp(32px, 6vh, 72px); padding-bottom: clamp(32px, 6vh, 72px) }
.eyebrow { margin: 0 0 10px; font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--accent) }
.eyebrow::before { content: "// "; color: var(--muted) }
.quote { max-width: 52ch; margin-bottom: 14px; line-height: 1.5; text-wrap: pretty }
.quote q { quotes: "„" "“" }
.quote .by { color: var(--muted); white-space: nowrap }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.045em; margin: 0; text-wrap: balance }
h1 { font-size: clamp(44px, 7.2vw, 88px); line-height: .98 }
h2 { font-size: 26px; line-height: 1.1; letter-spacing: -.035em }
/* Chips über mich: fest = Beruf (Akzent), zufall = je Bereich eine Farbe, app.js zieht sie bei jedem Besuch neu */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 24px 0 0; max-width: 560px }
.tags li { font-family: var(--mono); font-size: 14px; font-weight: 500; padding: 6px 11px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); color: #c7d3d0 }
.tags .fest { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)) }
.tags .zufall { display: inline-flex; align-items: center; gap: 8px; animation: chip-rein .35s ease both; animation-delay: calc(var(--i, 0) * 50ms) }
.tags .zufall::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--k); flex: none }
.k-daten { --k: #6fe0b8 }
.k-bauen { --k: #ffcf5c }
.k-spiele { --k: #a9d38f }
.k-buecher { --k: #b9a8ff }
.k-film { --k: #ff9e7a }
.k-japan { --k: #ff9fb7 }
.k-alltag { --k: #98b7d6 }
@keyframes chip-rein { from { opacity: 0; transform: translateY(4px) } }
.tags .mix { padding: 0; border: 0; background: none }
.shuffle { height: 100%; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 6px; background: none; color: var(--muted); font: inherit; cursor: pointer }
.shuffle:hover { color: var(--accent); border-color: var(--accent) }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 8px; font-weight: 700; text-decoration: none; border: 1px solid var(--line); background: var(--surface); transition: transform .15s ease, border-color .15s ease }
.btn:hover { border-color: var(--accent) }
.btn:active { transform: scale(.97) }
.btn.primary { background: var(--accent); color: #0d2a22; border-color: transparent }

/* Apps: kompakte Liste, Farbe je App wie auf alltag.choechtl.at */
.trio { --cat: #7a6cc4 }
.cleanup { --cat: #4c6a88 }
.dorf { --cat: #547e3f }
.mahlzeit { --cat: #b0603c }
.apps { padding: 24px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line) }
.app-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 8px }
.app-list li { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border-radius: var(--r);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cat) 26%, transparent), transparent 75%);
  border: 1px solid color-mix(in srgb, var(--cat) 34%, transparent) }
.app-list img { width: 44px; height: 44px; border-radius: 10px; flex: none; box-shadow: 0 4px 12px #0005; outline: 1px solid #ffffff1f; outline-offset: -1px }
.app-list span { min-width: 0; color: var(--muted); font-size: 14px; line-height: 1.35 }
.app-list b { display: block; color: var(--fg); font-size: 16px; letter-spacing: -.01em }
.note { margin: 14px 0 0; font-family: var(--mono); font-size: 12px; color: var(--muted) }

@media (max-width: 820px) {
  .card { grid-template-columns: 1fr; align-content: center; gap: 24px; padding-top: 24px; padding-bottom: 24px }
  /* Handy: Apps als 2×2-Raster nur mit Symbol und Name, damit alles auf einen Bildschirm passt */
  .apps { padding: 16px }
  .apps h2 { font-size: 22px }
  .app-list { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px }
  .app-list li { padding: 8px; gap: 10px }
  .app-list img { width: 36px; height: 36px; border-radius: 9px }
  .app-list span { font-size: 0; line-height: 0 }
  .app-list b { font-size: 15px; line-height: 1.2 }
  .note { margin-top: 10px }
  h1 { font-size: min(44px, 10.6vw) }
  .tags { margin-top: 16px; gap: 6px }
  .tags li { font-size: 12px; padding: 5px 8px }
  .tags .zufall { gap: 6px }
  .shuffle { padding: 5px 8px }
  .actions { margin-top: 16px }
  .btn { flex: 1 1 auto; justify-content: center; padding: 0 14px; min-width: 0; white-space: nowrap }
  .nebenbei { display: none }
}

/* Sehr schmale Handys: Schlagworte bleiben in einer Zeile */
@media (max-width: 380px) {
  .tags { gap: 5px }
  .tags li { font-size: 11px; padding: 4px 7px }
}

/* Kleine Handys (z. B. iPhone SE): Nebensächliches weglassen, damit es trotzdem auf einen Bildschirm passt */
@media (max-width: 820px) and (max-height: 700px) {
  .top { padding-top: max(14px, env(safe-area-inset-top)) }
  .card { gap: 18px; padding-top: 14px; padding-bottom: 14px }
  .hero .eyebrow, .apps .eyebrow, .note { display: none }
}

/* Fotografie (nur mit data-fotos="an") */
.fotos { padding-bottom: 56px }
.fotos h2 { font-size: clamp(26px, 4vw, 36px) }

/* Fotografie-Schalter: <body data-fotos="aus"> in index.html blendet alles mit .nur-fotos aus */
[data-fotos="aus"] .nur-fotos { display: none }

/* Karussell: waagrecht wischen, rastet je Foto ein; Pfeile und Punkte steuert app.js */
.carousel { position: relative; margin-top: 28px }
.gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 12px }
.gallery::-webkit-scrollbar { display: none }
.ph { flex: none; height: clamp(260px, 52vw, 460px); scroll-snap-align: center; border-radius: 12px; overflow: hidden; background: var(--surface) }
.ph img { height: 100%; width: auto; max-width: 86vw; object-fit: cover; display: block; transition: transform .4s ease }
.ph:hover img { transform: scale(1.03) }
.nav { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--fg); font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 4px; transition: opacity .2s ease }
.nav:hover { border-color: var(--accent) }
.nav:disabled { opacity: 0; pointer-events: none }
.prev { left: 12px }
.next { right: 12px }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px }
.dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: width .2s ease, background .2s ease }
.dots button[aria-current="true"] { width: 24px; background: var(--accent) }
@media (max-width: 640px) {
  .gallery { gap: 8px }
  .ph { border-radius: 10px }
  .nav { display: none }
}

/* Großansicht */
.box { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0 }
.box[open] { display: grid; place-items: center }
.box::backdrop { background: #0a0f11f2 }
.box img { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border-radius: 12px; box-shadow: 0 20px 60px #000a }
.close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 26px; line-height: 1; cursor: pointer }

/* Fußzeile */
.foot { padding-bottom: max(20px, env(safe-area-inset-bottom)); font-size: 12px; color: var(--muted) }
.foot p { margin: 0; padding-top: 16px; border-top: 1px solid var(--line) }
.foot b { color: var(--fg); font-weight: 600 }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .btn, .ph img, .nav, .dots button { transition: none }
  .tags .zufall { animation: none }
  .gallery { scroll-behavior: auto }
  .btn:active { transform: none }
  .ph:hover img { transform: none }
}

/* Fehlerseite 404.html */
.solo { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 48px; padding-bottom: 48px }