:root {
  --ink: #111111;
  --muted: #a6a6a6;
  --paper: #ffffff;
  --font-sans: Arial, Helvetica, sans-serif;
  --font-serif: "Bodoni MT", "Didot", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 5px;
}

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    max(clamp(42px, 8vh, 88px), env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(27px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}

header {
  width: 100%;
  display: flex;
  justify-content: center;
}

.brand {
  display: block;
  width: clamp(240px, 40vw, 500px);
  max-width: 100%;
  line-height: 0;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.landing-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(48px, 8.5vh, 88px);
  text-align: center;
}

/* Kategorien und Claim teilen sich ein Raster: Wörter stehen mittig
   übereinander, die Trennstriche bündig untereinander. */
.claim {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  justify-items: center;
  column-gap: 0.6em;
  letter-spacing: 0.035em;
}

.categories,
.tagline {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
}

/* kreativ rechtsbündig unter grafik, echt linksbündig unter fotografie */
.categories > :first-child,
.tagline > :first-child {
  justify-self: end;
}

.categories > :last-child,
.tagline > :last-child {
  justify-self: start;
}

.categories {
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.7;
}

.categories .separator {
  color: var(--ink);
}

.tagline {
  margin-top: 4px;
  color: var(--muted);
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1.7;
}

.tagline .separator {
  color: #cfcfcf;
}

.intro {
  margin-top: clamp(50px, 8.5vh, 82px);
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.012em;
  text-align: center;
}

.intro p {
  margin: 0;
  text-wrap: balance;
}

.intro p + p {
  margin-top: 1.6em;
}

.contact {
  margin-top: auto;
  padding-top: 64px;
  color: #4b4b4b;
  font-size: 11px;
  letter-spacing: 0.045em;
  line-height: 1.8;
  text-align: center;
}

.contact .separator {
  display: inline-block;
  padding: 0 0.55em;
  color: #888;
}

/* Gruppen bleiben zusammen und brechen auf schmalen Displays als Ganzes um */
.contact-group {
  white-space: nowrap;
}

.contact a:hover {
  color: var(--ink);
}

/* Hinweis „adresse kopiert“ */
.toast {
  position: fixed;
  left: 50%;
  /* oberhalb der Fußzeile, damit sie lesbar bleibt */
  bottom: calc(max(27px, env(safe-area-inset-bottom)) + 56px);
  z-index: 10;
  padding: 9px 16px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Impressum und Datenschutz */
.legal-main {
  width: 100%;
  max-width: 34em;
  margin-top: clamp(48px, 8.5vh, 88px);
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: 0.012em;
}

.legal-main h1 {
  margin: 0 0 2.2em;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1.7;
  text-align: center;
}

.legal-main h2 {
  margin: 2.4em 0 0.4em;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.legal-main p,
.legal-main ul {
  margin: 0 0 1em;
}

.legal-main ul {
  padding-left: 1.2em;
}

.legal-main a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.legal-center {
  text-align: center;
}

.legal-center h2 {
  margin-top: 2em;
}

/* Noch zu klärende Angaben – vor der Veröffentlichung entfernen */
.todo {
  padding: 0 0.25em;
  background: #fff1a8;
  color: #6b5600;
}

/* Unterseiten: Navigation an derselben Stelle wie die Kategorien der Startseite */
.subpage-main {
  width: 100%;
  margin-top: clamp(48px, 8.5vh, 88px);
  text-align: center;
}

/* Aktuelles Wort exakt mittig, Nachbarn links und rechts davon */
.subnav {
  display: grid;
  /* Trennstrich-Spalten fest, damit die Mitte auch bei nur zwei Einträgen stimmt */
  grid-template-columns: 1fr 0.3em auto 0.3em 1fr;
  justify-items: center;
  align-items: baseline;
  column-gap: 0.6em;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.035em;
  line-height: 1.7;
}

.subnav > :first-child {
  justify-self: end;
}

.subnav > :last-child {
  justify-self: start;
}

.subnav a,
.subnav .current {
  white-space: nowrap;
}

.subnav .current {
  grid-column: 3;
  color: var(--ink);
}

/* Externe Ziele (Website, Instagram): dünner Schnitt, aber schwarz */
.subnav a.ext {
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color 0.2s;
}

.subnav a.ext:hover {
  text-decoration-color: currentColor;
}

.subnav a:not(.ext) {
  color: var(--muted);
}

.subnav a:hover {
  color: var(--ink);
}

.subnav .separator {
  color: #cfcfcf;
}

/* Touch-Geräte: größere Tippflächen ohne optische Änderung */
@media (pointer: coarse) {
  .categories a,
  .subnav a,
  .contact a {
    padding: 10px 2px;
    margin: -10px -2px;
  }
}

/* Smartphones (iPhone 12 mini, SE 2./3. Gen. = 375 px, große iPhones bis 440 px) */
@media (max-width: 560px) {
  .page {
    padding:
      max(44px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(22px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
  }

  .brand {
    width: min(82vw, 340px);
  }

  .landing-main {
    margin-top: 56px;
  }

  .claim {
    column-gap: 0.5em;
  }

  .categories {
    font-size: 15px;
  }

  .tagline {
    margin-top: 2px;
    font-size: 11px;
  }

  .intro {
    margin-top: 52px;
    font-size: 13px;
    line-height: 1.85;
    max-width: 30em;
  }

  .intro p + p {
    margin-top: 1.7em;
  }

  .contact {
    padding-top: 56px;
    font-size: 10px;
    letter-spacing: 0.015em;
  }

  .contact .group-sep {
    display: none;
  }

  .contact-group {
    display: block;
  }

  .contact-group + .contact-group {
    margin-top: 2px;
  }

  .legal-main {
    margin-top: 56px;
    font-size: 12.5px;
  }

  .subpage-main {
    margin-top: 56px;
  }

  /* Lange Website-Namen passen nicht nebeneinander: Bereich oben,
     Website und Instagram darunter */
  .subnav {
    grid-template-columns: auto;
    justify-content: center;
    font-size: 15px;
    line-height: 2;
  }

  .subnav > :nth-child(n) {
    justify-self: center;
  }

  .subnav .separator {
    display: none;
  }

  .subnav .current {
    grid-column: auto;
    order: -1;
    margin-bottom: 4px;
  }
}

/* Feste Zeilenumbrüche im Intro passen nicht mehr: Text frei fließen lassen */
@media (max-width: 400px) {
  .intro br {
    display: none;
  }

  .intro {
    max-width: 24em;
  }
}

/* Sehr schmal: iPhone SE 1. Gen. / iPod (320 px) */
@media (max-width: 360px) {
  .page {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .claim {
    column-gap: 0.4em;
  }

  .categories {
    font-size: 14px;
  }

  .tagline {
    font-size: 10.5px;
  }

  .intro {
    font-size: 12.5px;
  }

  .contact .separator {
    padding: 0 0.25em;
  }
}

/* Smartphone quer: wenig Höhe, Abstände straffen */
@media (max-height: 500px) and (orientation: landscape) {
  .page {
    padding-top: max(24px, env(safe-area-inset-top));
  }

  .brand {
    width: clamp(220px, 34vw, 340px);
  }

  .landing-main {
    margin-top: 28px;
  }

  .intro {
    margin-top: 28px;
  }

  .contact {
    padding-top: 32px;
  }

  .subpage-main {
    margin-top: 28px;
  }
}

/* Apple Watch (ca. 160–210 px breit) */
@media (max-width: 240px) {
  .page {
    padding: 14px 8px 10px;
  }

  .brand {
    width: 100%;
  }

  .landing-main {
    margin-top: 18px;
  }

  /* Zu schmal für drei Spalten: alles untereinander, ohne Trennstriche */
  .claim {
    grid-template-columns: auto;
  }

  .claim .separator {
    display: none;
  }

  .claim .categories > *,
  .claim .tagline > * {
    justify-self: center;
  }

  .categories {
    font-size: 15px;
    line-height: 2;
  }

  .tagline {
    margin-top: 8px;
    font-size: 10px;
    line-height: 1.6;
  }

  .intro {
    display: none;
  }

  .subpage-main {
    margin-top: 18px;
  }

  .subnav {
    font-size: 14px;
  }

  .contact {
    padding-top: 18px;
  }

  .contact .separator {
    display: block;
    height: 0;
    overflow: hidden;
  }
}