/* ============================================================
   Verflixt & Zugenäht — Stil
   Grundlage: Tokens, Schrift, Kopfzeile, Knöpfe.
   hero.css = Imrans Intro als Hero · sektionen.css = alles darunter.
   Welt: Leinen, Kastanien-Faden, Stahl der Nadel; das Mahagoni-Rot
   gehört allein der Kasse.
   ============================================================ */

/* ---------- Schriften (selbst gehostet, kein CDN) ---------- */
@font-face {
  font-family: "Manrope";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-600-latin.woff2") format("woff2");
}
/* Schreibmaschine für den Kassenbon (SIL Open Font License) */
@font-face {
  font-family: "Special Elite";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/special-elite-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Courier Prime";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/courier-prime-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Courier Prime";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/courier-prime-700-latin.woff2") format("woff2");
}

/* ---------- Tokens: die Stellschrauben ---------- */
:root {
  /* Farben */
  --leinen: #f4eee4;
  --leinen-tief: #e9dfd0;
  --leinen-hell: #faf6f0;
  --tinte: #2b1d15;
  --tinte-leise: #6f5b4f;
  --tinte-fein: #9a877a;
  --mahagoni: #7b2f1f; /* nur für die Kasse selbst */
  --akzent: #4a2c18; /* der Faden — Knöpfe, Fokus, Wortmarke */
  --akzent-hell: #8a5c3c;
  --garn: #c9992e;
  --linie: rgba(43, 29, 21, 0.14);
  --linie-fein: rgba(43, 29, 21, 0.08);

  /* Der dunkle Stoff unter dem Hero — Wolle in tiefem Braun */
  --wolle: #2a2019;
  --wolle-hell: #3a2d24;
  --wolle-tief: #1c1512;
  --hell: #f2eadd;        /* Text auf Wolle */
  --hell-leise: #cdbfae;
  --hell-fein: #a8988a;
  --faden-hell: #d8c6ad;  /* heller Faden auf dunklem Stoff */
  --linie-hell: rgba(242, 234, 221, 0.09);

  /* Schrift */
  --schrift-serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, serif;
  --schrift-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  /* Bon: Schreibmaschine (Thermodruck-Look), zwei Stimmen — Elite fürs
     Gedruckte, Courier fürs Kleingedruckte und die Wege */
  --schrift-bon: "Special Elite", "Courier Prime", "Courier New", monospace;
  --schrift-bon-klein: "Courier Prime", "Courier New", monospace;

  /* Type-Scale — für ältere Augen eine Stufe größer als üblich */
  --t-eyebrow: 0.95rem;
  --t-klein: 1.0625rem;
  --t-body: 1.125rem;
  --t-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4rem);
  --t-h2: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --t-h1: clamp(2.75rem, 1.6rem + 6vw, 5.6rem);

  /* Raum (8er-Treppe) */
  --raum-1: 8px;
  --raum-2: 16px;
  --raum-3: 24px;
  --raum-4: 40px;
  --raum-5: 64px;
  --raum-6: 96px;
  --raum-7: 144px;

  /* Form */
  --radius-knopf: 10px;
  --radius-karte: 16px;

  /* Bewegung — ein Budget für die ganze Seite: kurz für Mikro-Reaktionen,
     lang für Eingänge; eine Kurve, die alles wie eine Hand wirken lässt */
  --dauer-kurz: 420ms;
  --dauer-lang: 1.1s;
  --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Bühne */
  --breite: 1200px;
  --rand: clamp(20px, 5vw, 64px);
}

/* ---------- Grundlagen ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--leinen);
  color: var(--tinte);
  font-family: var(--schrift-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--schrift-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--tinte);
}

p {
  margin: 0;
}

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

.buehne {
  width: min(var(--breite), 100% - 2 * var(--rand));
  margin-inline: auto;
}

/* Sichtbarer Fokus für Tastatur — Pflicht, nicht Kür */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Platzhalter, die noch mit echten Fakten gefüllt werden. Sichtbar
   gepunktet nur im Entwurf (body.entwurf) — live ist davon nichts zu
   sehen. .nur-entwurf: Hinweise, die nur im Entwurf gezeigt werden. */
body.entwurf .platzhalter {
  border-bottom: 1px dotted var(--garn);
}
.nur-entwurf {
  display: none;
}
body.entwurf .nur-entwurf {
  display: block;
  font-size: var(--t-klein);
  color: var(--garn);
}

/* ---------- Kopfzeile ---------- */
.kopf {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  padding-block: var(--raum-3);
}

.kopf__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
}

/* Die Wortmarke ist die genähte Signatur aus dem Hero, klein und ruhend
   (schriftzug.js füllt das SVG). Farbe über currentColor. */
.wortmarke {
  display: inline-flex;
  align-items: center;
  color: var(--akzent);
  transition: color 300ms ease-out;
}
.wortmarke__naht {
  height: 54px;             /* = Schrifthöhe, viewBox ist eng zugeschnitten */
  width: auto;
  overflow: visible;
}
@media (max-width: 559px) {
  .wortmarke__naht { height: 40px; }
}

.nav {
  display: none;
  gap: var(--raum-4);
  font-size: var(--t-klein);
  font-weight: 500;
  color: var(--tinte);
}

.nav a {
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease-out, border-color 180ms ease-out;
}

.nav a:hover {
  color: var(--tinte);
  border-color: var(--tinte);
}

@media (min-width: 840px) {
  .nav {
    display: flex;
  }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  white-space: nowrap;
  border-radius: var(--radius-knopf);
  font-weight: 600;
  font-size: var(--t-klein);
  letter-spacing: 0.01em;
  line-height: 1;
  transition: transform 180ms ease-out, background-color 180ms ease-out,
    box-shadow 180ms ease-out, border-color 180ms ease-out;
}

.knopf:active {
  transform: translateY(1px);
}

.knopf--voll {
  background: var(--akzent);
  color: #fffdf8;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 8px 24px -12px rgba(74, 44, 24, 0.6);
}

.knopf--voll:hover {
  background: var(--akzent-hell);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 12px 28px -12px rgba(74, 44, 24, 0.7);
}

.knopf--leise {
  color: var(--tinte);
  border: 1px solid var(--linie);
  background: rgba(255, 255, 255, 0.35);
}

.knopf--leise:hover {
  border-color: var(--tinte);
}

.knopf svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Anruf-Knopf in der Kopfzeile: immer mit Wort — ein Hörer allein sagt
   Älteren nichts. Die Nummer erscheint erst in der festen Leiste. */
.knopf--kopf {
  min-height: 48px;
  padding: 10px 18px;
}
/* Auf dem Handy war der Knopf rechts abgeschnitten — die genähte
   Wortmarke braucht die ganze Zeile. Er fehlt dort auch nicht:
   Anrufen steht groß im Hero und in der festen Leiste unten. */
@media (max-width: 839px) {
  .knopf--kopf { display: none; }
}
.knopf__nummer {
  display: none;
}