/*
 * Bäckerei Miosga — eigenes Stylesheet, gehoert nur diesem Kunden.
 * Nichts hiervon wird geteilt. Aendere frei, was du willst.
 *
 * Schriften: selbst hosten unter /fonts/ und hier per @font-face einbinden.
 * NIE von Google Fonts oder einem anderen CDN laden — das ist bei
 * deutschen Kundenseiten ein DSGVO-Problem.
 */

/* @font-face {
  font-family: "Eigene";
  src: url("/fonts/eigene.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
} */

:root {
  --grund: #ffffff;
  --tinte: #1a1a1a;
  --tinte-leise: #5a5a5a;
  --akzent: #1a1a1a;
  --linie: rgba(0, 0, 0, 0.14);
  --spalte: 1100px;
}

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

h1, h2 { line-height: 1.1; margin: 0; text-wrap: balance; }
p { max-width: 65ch; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

.kopf, main > section, .fuss {
  width: min(100% - 2.5rem, var(--spalte));
  margin-inline: auto;
}

.kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.15rem; border-bottom: 1px solid var(--linie);
}
.marke { font-weight: 700; text-decoration: none; color: inherit; }
.kopf-tel { color: var(--tinte-leise); text-decoration: none; font-size: 0.95rem; }

.hero { padding-block: clamp(3rem, 7vw, 6rem); }
.hero h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4rem); }
.sub { color: var(--tinte-leise); font-size: 1.15rem; margin-block: 1.5rem 2rem; }

.abschnitt { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.abschnitt h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem); margin-bottom: 1.5rem; }

.knopf {
  display: inline-block; padding: 0.85rem 1.6rem;
  background: var(--akzent); color: var(--grund);
  text-decoration: none; font-weight: 600;
}

address { font-style: normal; }

.fuss {
  border-top: 1px solid var(--linie); margin-top: 4rem;
  padding-block: 2.5rem; font-size: 0.9rem; color: var(--tinte-leise);
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between;
}
.fuss nav { display: flex; gap: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}