/* 4 Ears – öffentliche Seiten (Support, Datenschutz). Schrift liegt lokal, keine externen Aufrufe. */
@font-face { font-family: Lexend; font-weight: 400; src: url(fonts/Lexend_400Regular.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: Lexend; font-weight: 800; src: url(fonts/Lexend_800ExtraBold.ttf) format('truetype'); font-display: swap; }

:root {
  --bg: #FFFFFF; --fg: #3A3148; --muted: #716A7D; --line: #E4E0EA; --card: #F3F1F6;
  --sach: #E3EEFB; --selbst: #E1F3E7; --bez: #FFF2D9; --appell: #FBE3E8;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #15121B; --fg: #EDE9F3; --muted: #A49DAF; --line: #2E2938; --card: #201C28;
    --sach: #232C3B; --selbst: #20302A; --bez: #33301F; --appell: #352329; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.6 Lexend, system-ui, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
a { color: inherit; text-underline-offset: 3px; }

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.marke { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.marke .ohr { width: 40px; height: 76px; background: var(--fg); -webkit-mask: url(ohr.png) center / contain no-repeat; mask: url(ohr.png) center / contain no-repeat; }
.marke b { font-weight: 800; font-size: 20px; letter-spacing: .02em; line-height: 1; }
.sprachen { display: flex; gap: 6px; }
.sprachen button { font: inherit; font-size: 14px; color: var(--fg); background: transparent; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.sprachen button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

h1 { font-weight: 800; font-size: 32px; line-height: 1.2; margin: 32px 0 8px; }
h2 { font-weight: 800; font-size: 21px; line-height: 1.3; margin: 32px 0 8px; }
.stand, .klein { color: var(--muted); font-size: 15px; }
.kurz { background: var(--card); border-radius: 20px; padding: 16px 20px; margin: 20px 0; }
.kurz p { margin: 0; }
.ohren { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0; }
.ohren div { border-radius: 18px; padding: 12px 14px; font-size: 15px; }
.ohren b { display: block; font-weight: 800; }
.knopf { display: inline-block; font-weight: 800; background: var(--fg); color: var(--bg); text-decoration: none; border-radius: 999px; padding: 12px 22px; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; gap: 16px; flex-wrap: wrap; }

/* Sprachen: ohne JavaScript sind alle sichtbar, mit JavaScript nur die gewählte */
.js [data-lang]:not(.aktiv) { display: none; }
h3 { font-weight: 800; font-size: 17px; margin: 20px 0 4px; }