/* boba. – Webseite. Farben aus der App (BobaPalette, Look „Original“, hell und dunkel). Keine fremden Schriften. */

:root {
  --grund: #FFF6D9;
  --flaeche: #FFFDF7;
  --text: #30243C;
  --text2: #68596B;
  --linie: #D7CDBD;
  --flieder: #DED7F4;
  --fleck: #F1CDDD;
  --butter: #F6E3A1;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #1E1726;
    --flaeche: #2A2133;
    --text: #FFF6D9;
    --text2: #CDBFD3;
    --linie: #46394F;
    --flieder: #352A40;
    --fleck: #5A3550;
    --butter: #4A3F2A;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  font-size: 106.25%; /* 17 px, Rückfall außerhalb von Safari */
}

/* Safari auf dem iPhone: Schriftgröße folgt der Textgröße aus den iPhone-Einstellungen (Dynamic Type).
   -webkit-touch-callout gibt es nur auf iOS; so bleibt Safari auf dem Mac bei 17 px. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

.seite {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 16px 48px;
}

header.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 8px;
}

.logo {
  position: relative;
  font-family: ui-rounded, -apple-system, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  padding: 0 4px;
}

.logo::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6px;
  top: 4px;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--fleck);
}

.logo { isolation: isolate; }

.sprache {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0 0 16px;
  font-size: 0.9375rem;
  color: var(--text2);
}

h1, h2, h3 {
  font-family: ui-rounded, -apple-system, system-ui, sans-serif;
  line-height: 1.25;
}

h1 { font-size: 2rem; margin: 24px 0 8px; }
h2 { font-size: 1.3rem; margin: 32px 0 8px; }
h3 { font-size: 1.1rem; margin: 24px 0 4px; }

p, ul, ol, dl { margin: 8px 0 12px; }
li { margin: 4px 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.unterzeile { color: var(--text2); margin-top: 0; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 16px 0;
}

.karte > :first-child { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }

.kurz {
  background: var(--flieder);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 16px 0;
}

.kurz > :first-child { margin-top: 0; }
.kurz > :last-child { margin-bottom: 0; }

.entwurf {
  background: var(--butter);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 0.9375rem;
}

.platzhalter {
  background: var(--butter);
  border-radius: 4px;
  padding: 0 4px;
}

.liste-links {
  list-style: none;
  padding: 0;
}

.liste-links li {
  border-bottom: 1px solid var(--linie);
  margin: 0;
}

.liste-links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 0;
}

.liste-links li:last-child { border-bottom: none; }

dt { font-weight: 600; margin-top: 12px; }
dd { margin: 2px 0 0; }

footer.fuss {
  border-top: 1px solid var(--linie);
  margin-top: 48px;
  padding-top: 16px;
  font-size: 0.9375rem;
  color: var(--text2);
}

footer.fuss nav a { margin-right: 16px; display: inline-flex; align-items: center; min-height: 44px; }

.stand { color: var(--text2); font-size: 0.9375rem; }