/* ============================================================
   Momentraum.Studio – gemeinsames Stylesheet
   Farben zentral hier anpassen. Die Seite ist bewusst immer hell
   (warmer Sandton = Erkennungsmerkmal von Momentraum).
   ============================================================ */
:root {
  color-scheme: only light;
  --bg: #f7f3ee;
  --surface: #ffffff;
  --text: #2a2622;
  --muted: #6e655c;
  --line: #e4dcd2;
  --accent: #a4633f;        /* warmes Terrakotta */
  --accent-soft: #f1e4da;
  --foto: #1f7093;          /* Akzent der Passfoto-Seite (wie fotos-braun.de) */
  --reisen: #d37653;        /* Akzent der Reiseseite (Wunschzettel-Button) */
  --reisen-text: #b0532f;   /* dunklere Variante für gut lesbare Linktexte */
  --coaching: #a6c371;      /* Akzent von inga.coach (Grün der oberen Leiste) */
  --coaching-text: #4f7522; /* dunkleres Grün für Linktexte und Symbol */
  --web: #f1ba40;           /* Akzent von lenne.media (Logo-Gold) */
  --web-text: #8a6200;      /* dunkles Gold für Symbol und Hover im Menü */
  --naehr: #b4527c;         /* Akzent der Nährstoffe-Seite (Beerenrot) */
  --naehr-text: #8c3560;    /* dunklere Variante für Linktexte und Symbol */
  --radius: 18px;
  --max: 1080px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 var(--sans);
}
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ---------- Kopfbereich ---------- */
.site-header { padding: 28px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand-mark { width: 44px; height: 44px; display: block; }
.brand-name { font-family: var(--serif); font-size: 21px; letter-spacing: .01em; }
.brand-name span { color: var(--muted); }
.main-nav { display: flex; gap: 24px; }
.main-nav a {
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.main-nav .nav-foto:hover, .main-nav .nav-foto:focus-visible { color: var(--foto); border-color: var(--foto); }
.main-nav .nav-reisen:hover, .main-nav .nav-reisen:focus-visible { color: var(--reisen-text); border-color: var(--reisen); }
.main-nav .nav-coaching:hover, .main-nav .nav-coaching:focus-visible { color: var(--coaching-text); border-color: var(--coaching); }
.main-nav .nav-web:hover, .main-nav .nav-web:focus-visible { color: var(--web-text); border-color: var(--web); }
.main-nav .nav-naehr:hover, .main-nav .nav-naehr:focus-visible { color: var(--naehr-text); border-color: var(--naehr); }

/* Menüknopf fürs Handy (ohne JavaScript, per Kontrollkästchen) */
.nav-toggle, .nav-toggle-label { display: none; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Einleitung ---------- */
.intro { padding: 56px 0 40px; }
.eyebrow {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}
.intro h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 6vw, 60px); line-height: 1.1;
  margin: 0 0 22px; max-width: 16ch;
}
.intro p { color: var(--muted); font-size: 19px; max-width: 58ch; margin: 0 0 12px; }
.intro-grid {
  display: grid; align-items: center; gap: 48px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.intro-logo { display: flex; justify-content: center; }
.logo-img { width: 100%; max-width: 480px; height: auto; }

/* ---------- Bereiche (Kacheln) ---------- */
.areas { padding: 24px 0 72px; }
.areas h2 {
  font-family: var(--serif); font-weight: 400; font-size: 26px;
  margin: 0 0 22px;
}
.area-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.area-card {
  --c: var(--accent);
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 26px;
  text-decoration: none; color: var(--text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.area-card::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 0;
  height: 3px; border-radius: 0 0 3px 3px; background: var(--c);
}
.area-card:hover, .area-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--c);
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.35);
  outline: none;
}
/* Helle Hintergründe der Symbole als feste Werte (ältere Safari-Versionen kennen color-mix nicht) */
.area-card--foto { --c: var(--foto); --c-hell: #e1edf2; }
.area-card--reisen { --c: var(--reisen); --c-hell: #f9e7df; }
.area-card--reisen .area-cta { color: var(--reisen-text); }
.area-card--coaching { --c: var(--coaching); --c-hell: #eff4e5; }
.area-card--coaching .area-icon { color: var(--coaching-text); }
.area-card--coaching .area-cta { color: var(--coaching-text); }
.area-card--web { --c: var(--web); --c-hell: #fcefcf; }
.area-card--web .area-icon { color: var(--web-text); }
.area-card--web .area-cta { color: var(--text); }   /* Gold als Schrift wäre zu blass */
.area-card--naehr { --c: var(--naehr); --c-hell: #f6e6ed; }
.area-card--naehr .area-icon, .area-card--naehr .area-cta { color: var(--naehr-text); }
/* Fünfte Kachel über die volle Breite */
.area-wide { grid-column: 1 / -1; }
.area-wide .area-card p { max-width: 70ch; }

.area-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--c-hell, rgba(42, 38, 34, .06));   /* helle Bereichsfarbe, funktioniert auch auf älteren iPads */
  color: var(--c); margin-bottom: 20px;
}
.area-icon svg { width: 26px; height: 26px; }
.area-card h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 8px; }
.area-card p { color: var(--muted); margin: 0 0 18px; }
.area-tags { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.area-tags li {
  font-size: 13px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.area-cta { margin-top: auto; font-weight: 600; color: var(--c); font-size: 16px; }
.area-cta::after { content: " →"; transition: margin .2s; }
.area-card:hover .area-cta::after { margin-left: 4px; }

/* Bereiche im Aufbau – nicht klickbar, kompakter */
.soon-heading {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 44px 0 16px;
}
/* Vier aktive Bereiche: auf breiten Bildschirmen als 2 × 2 */
@media (min-width: 761px) { .area-grid:not(.area-grid--soon) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area-grid--soon { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.area-card--soon {
  --c: var(--muted);
  background: transparent; border-style: dashed; cursor: default;
  padding: 24px 24px 22px;
}
.area-card--soon::before { display: none; }
.area-card--soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.area-card--soon .area-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px; }
.area-card--soon .area-icon svg { width: 22px; height: 22px; }
.area-card--soon h3 { font-size: 22px; }
.area-card--soon p { margin: 0; font-size: 15px; }
.soon-badge {
  position: absolute; top: 24px; right: 24px;
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}

/* ---------- Hinweis / Besuch ---------- */
.visit {
  border-top: 1px solid var(--line);
  padding: 44px 0;
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.visit h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 8px; }
.visit p { margin: 0; }

/* ---------- Fußbereich ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 26px 0 40px; font-size: 14px; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
.site-footer nav { display: flex; gap: 20px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }

/* ---------- Rechtstexte ---------- */
.legal { padding: 24px 0 72px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 5vw, 44px); margin: 16px 0 28px; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 40px 0 10px; }
.legal h3 { font-size: 17px; margin: 24px 0 6px; }
.legal p, .legal li { color: var(--text); }
.legal address { font-style: normal; }
.back { font-size: 15px; text-decoration: none; color: var(--muted); }
.back:hover { color: var(--text); }
.todo { background: #fff2b8; color: #5a4300; padding: 0 4px; border-radius: 4px; }

@media (max-width: 760px) {
  .intro-grid { grid-template-columns: 1fr; gap: 28px; }
  /* Handy hochkant: Einleitung, Logo und Abschnittsüberschrift mittig */
  .intro-text { text-align: center; }
  .intro h1, .intro p { margin-left: auto; margin-right: auto; }
  .intro-logo { justify-content: center; }
  .areas h2 { text-align: center; }
  .eyebrow { letter-spacing: .08em; }   /* Adresse bleibt in einer Zeile */
  .logo-img { max-width: 340px; }
}
/* Ab Tablet-Breite (z. B. iPad mini) Menü zum Aufklappen, damit es nicht ins Logo läuft */
@media (max-width: 1100px) {
  .site-header .wrap { flex-wrap: wrap; }
  .nav-toggle { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nav-toggle-label { display: block; cursor: pointer; padding: 10px; margin-left: auto; }
  .nav-balken { display: block; width: 26px; height: 2px; background: var(--text); margin: 5px 0; transition: transform .2s, opacity .2s; }
  .nav-toggle:checked + .nav-toggle-label .nav-balken:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .nav-toggle-label .nav-balken:nth-child(2) { opacity: 0; }
  .nav-toggle:checked + .nav-toggle-label .nav-balken:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-toggle:focus-visible + .nav-toggle-label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  .main-nav { display: none; flex-basis: 100%; flex-direction: column; gap: 0; padding: 4px 0 8px; }
  .nav-toggle:checked ~ .main-nav { display: flex; }
  .main-nav a { padding: 14px 0; border-bottom: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .intro { padding: 32px 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .area-card, .area-cta::after { transition: none; }
}