/* Grundgestaltung der Platzhalterseite. Bewusst klein: keine Webfonts,
   keine Fremdressourcen. Farben und Schrift werden im Gestaltungs-Prompt
   festgelegt. */
:root {
  --farbe-text: #1f2328;
  --farbe-hintergrund: #ffffff;
  --farbe-akzent: #e8572a;
  --farbe-akzent-dunkel: #c3461f;
  --breite: 60rem;
}
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.kopf, .inhalt, .fuss { width: min(100% - 2rem, var(--breite)); margin-inline: auto; }
.kopf { padding: 1.25rem 0; }
.marke { font-weight: 700; text-decoration: none; color: inherit; }
.inhalt { flex: 1; padding: 2rem 0; }
.dachzeile { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--farbe-akzent); margin: 0 0 .5rem; }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; margin: 0 0 1rem; }
.knopf {
  display: inline-block; padding: .75rem 1.25rem; border-radius: .375rem;
  background: var(--farbe-akzent); color: #fff; text-decoration: none; font-weight: 600;
}
.knopf:hover, .knopf:focus-visible { background: var(--farbe-akzent-dunkel); }
.fuss { padding: 1.5rem 0; font-size: .875rem; color: #57606a; }
.fuss a { color: inherit; }

/* Kontaktformular */
.formular { display: grid; gap: .5rem; margin-top: 1.5rem; max-width: 32rem; }
.formular label { font-weight: 600; margin-top: .5rem; }
.formular .optional { font-weight: 400; color: #57606a; }
.formular input[type="text"], .formular input[type="email"], .formular textarea {
  font: inherit; padding: .625rem .75rem; border: 1px solid #8c959f; border-radius: .375rem; width: 100%;
}
.formular input:focus-visible, .formular textarea:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.formular .haken { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.formular .haken input { margin-top: .3rem; }
.formular .knopf { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 600; margin-top: .75rem; }
.link { margin-left: 1rem; color: inherit; }

/* Kampagnenseiten */
.inhalt { --breite-weit: 64rem; }
.einleitung { font-size: 1.125rem; max-width: 40rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.5rem; }
.aktionen .link { margin-left: 0; }
.abschnitt { margin-top: 3rem; }
.abschnitt h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.2; }
.karten { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-top: 1rem; }
.karte img { width: 100%; height: auto; border-radius: .5rem; border: 1px solid #d0d7de; }
.karte h3 { margin: .75rem 0 .25rem; font-size: 1.125rem; }
.karte p { margin: 0; color: #424a53; }
.liste { padding-left: 1.25rem; }
.liste li { margin: .5rem 0; }
.abschluss { padding: 2rem; background: #f6f8fa; border-radius: .75rem; }
.preise { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 1rem 0; }
.preis { border: 1px solid #d0d7de; border-radius: .75rem; padding: 1.25rem; }
.preis h3 { margin: 0; font-size: 1.125rem; }
.betrag { font-size: 1.75rem; font-weight: 700; margin: .25rem 0; }
.betrag span { font-size: 1rem; font-weight: 400; color: #57606a; }
.hinweis { font-size: .875rem; color: #57606a; }
.staging-band { background: #fff8c5; color: #4d2d00; text-align: center; font-size: .875rem; padding: .375rem; }
.hinweis-staging { background: #fff8c5; padding: .5rem .75rem; border-radius: .375rem; font-size: .875rem; }