/* ==========================================================================
   Inserella – gemeinsames Stylesheet
   Tokens aus DESIGN.md, Sticker-System, Buttons, Halbton-Textur, Fokus.
   ========================================================================== */

:root {
  /* Palette */
  --papier: #FFFCF5;
  --tinte: #23203A;
  --himbeere: #FF3D7F;
  --sonne: #FFD23F;
  --minze: #2FD0B6;
  --flieder: #C9B8FF;
  --weiss: #FFFFFF;
  --tinte-weich: rgba(35, 32, 58, 0.62);
  --flaeche: #F3EFE3;

  /* Typo */
  --font-display: "Tilt Warp", "Outfit", system-ui, sans-serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-14: 0.875rem;
  --fs-17: 1.0625rem;
  --fs-19: 1.1875rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-44: 2.75rem;
  --fs-64: 4rem;
  --lh-body: 1.45;
  --lh-display: 1.05;

  /* Sticker */
  --outline: 2.5px;
  --versatz: 6px;
  --radius-sticker: 18px;
  --radius-foto: 14px;
  --radius-pill: 999px;

  /* Rhythmus */
  --gutter: 20px;
  --abschnitt: 72px;
  --breite: 1180px;
  --tap: 56px;
}

@media (min-width: 800px) {
  :root {
    --gutter: 40px;
    --abschnitt: 120px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--font-body);
  font-size: var(--fs-17);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 800px) {
  body { font-size: var(--fs-19); }
}

img,
video { display: block; max-width: 100%; height: auto; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

button,
input,
textarea,
select { font: inherit; color: inherit; }

ul,
ol { margin: 0; padding: 0; list-style: none; }
dl { margin: 0; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: 0;
}

.display,
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
}

h1 {
  font-size: var(--fs-44);
  text-shadow: 3px 3px 0 var(--sonne);
}
h2 {
  font-size: var(--fs-32);
  text-shadow: 3px 3px 0 var(--sonne);
}
h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: 1.2;
}
h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-19);
  line-height: 1.25;
}

@media (min-width: 800px) {
  h1 { font-size: var(--fs-64); text-shadow: 4px 4px 0 var(--sonne); }
  h2 { font-size: var(--fs-44); }
}

/* Display-Text auf farbigem Grund (Preisschild, Minze-Sticker) */
.display--pop {
  color: var(--weiss);
  text-shadow: 3px 3px 0 var(--tinte);
  -webkit-text-stroke: 1px var(--tinte);
  paint-order: stroke fill;
}

.gross { font-size: var(--fs-19); }
@media (min-width: 800px) { .gross { font-size: var(--fs-24); } }
.leise { color: var(--tinte-weich); }
.klein { font-size: var(--fs-14); }
strong, b { font-weight: 700; }

/* Marker-Highlight (Sonne) – sparsam */
.marker {
  background: linear-gradient(transparent 55%, var(--sonne) 55%, var(--sonne) 92%, transparent 92%);
  padding: 0 0.1em;
}

/* Wortmarke: Logo-Sticker (assets/logo.svg) + Schriftzug */
.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--himbeere);
  text-shadow: 3px 3px 0 var(--tinte);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.wortmarke img { height: 44px; width: auto; }
@media (min-width: 800px) {
  .wortmarke { font-size: 34px; }
  .wortmarke img { height: 52px; }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.abschnitt {
  padding-block: var(--abschnitt);
  position: relative;
}
.abschnitt--eng { padding-block: calc(var(--abschnitt) * 0.6); }

.abschnitt-kopf { margin-bottom: 32px; max-width: 34ch; }
.abschnitt-kopf p { margin-top: 14px; }
@media (min-width: 800px) { .abschnitt-kopf { margin-bottom: 48px; } }

.stapel > * + * { margin-top: 16px; }
.stapel--weit > * + * { margin-top: 28px; }

.zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  min-height: 72px;
}
@media (min-width: 800px) { .kopfzeile { padding-block: 24px; } }

.fusszeile {
  border-top: var(--outline) solid var(--tinte);
  padding-block: 36px 48px;
  font-size: var(--fs-17);
}
.fusszeile .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  justify-content: space-between;
}
.fusszeile nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fusszeile a { text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   Halbton-Textur (nur Hero + Preis-Sektion)
   -------------------------------------------------------------------------- */
.halbton { position: relative; isolation: isolate; }
.halbton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--tinte) 1px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: 0.06;
}
.halbton--stark::before { opacity: 0.12; }

/* --------------------------------------------------------------------------
   Sticker-System
   -------------------------------------------------------------------------- */
.sticker {
  position: relative;
  display: block;
  background: var(--weiss);
  color: var(--tinte);
  border: var(--outline) solid var(--tinte);
  border-radius: var(--radius-sticker);
  box-shadow: var(--versatz) var(--versatz) 0 var(--tinte);
  padding: 20px;
}
@media (min-width: 800px) { .sticker { padding: 28px; } }

.sticker--sonne { background: var(--sonne); }
.sticker--flieder { background: var(--flieder); }
.sticker--minze { background: var(--minze); }
.sticker--himbeere { background: var(--himbeere); color: var(--weiss); }
.sticker--papier { background: var(--papier); }
.sticker--flach { box-shadow: 4px 4px 0 var(--tinte); }
.sticker--knapp { padding: 12px 16px; }
.sticker--kipp { transform: rotate(-1.5deg); }
.sticker--kipp-r { transform: rotate(1.2deg); }

/* kleiner Etiketten-Sticker (Label, Status, Zahl) */
.etikett {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 14px;
  background: var(--weiss);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 var(--tinte);
  font-weight: 700;
  font-size: var(--fs-17);
  line-height: 1.2;
  white-space: nowrap;
}
.etikett--sonne { background: var(--sonne); }
.etikett--flieder { background: var(--flieder); }
.etikett--minze { background: var(--minze); }
.etikett--himbeere { background: var(--himbeere); color: var(--weiss); }

/* Sticker-Zahl für die echte 3-Schritte-Sequenz */
.zahl {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  background: var(--sonne);
  border: var(--outline) solid var(--tinte);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--tinte);
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  transform: rotate(-4deg);
}
.zahl--flieder { background: var(--flieder); transform: rotate(3deg); }
.zahl--minze { background: var(--minze); transform: rotate(-2deg); }

/* Fotos */
.foto {
  display: block;
  width: 100%;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-foto);
  background: var(--flaeche);
  object-fit: cover;
}
.foto--sticker { box-shadow: 5px 5px 0 var(--tinte); }
.foto-rahmen {
  position: relative;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-foto);
  overflow: hidden;
  background: var(--flaeche);
}
.foto-rahmen > img,
.foto-rahmen > video { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.knopf {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 14px 28px;
  background: var(--himbeere);
  color: var(--weiss);
  border: var(--outline) solid var(--tinte);
  border-radius: var(--radius-pill);
  box-shadow: 5px 5px 0 var(--tinte);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-19);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transform: translate(0, 0);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 120ms;
}
.knopf:hover { background: #ff579a; }
.knopf:active,
.knopf.ist-gedrueckt {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 var(--tinte);
}
.knopf:disabled,
.knopf[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.knopf--xl {
  min-height: 68px;
  padding: 16px 36px;
  font-size: var(--fs-24);
}
.knopf--voll { width: 100%; }
.knopf--zweit {
  background: var(--weiss);
  color: var(--tinte);
}
.knopf--zweit:hover { background: var(--papier); }
.knopf--sonne { background: var(--sonne); color: var(--tinte); }
.knopf--sonne:hover { background: #ffdb62; }
.knopf--minze { background: var(--minze); color: var(--tinte); }
.knopf--minze:hover { background: #55dcc6; }
.knopf--flieder { background: var(--flieder); color: var(--tinte); }
.knopf--flieder:hover { background: #d7caff; }
.knopf--klein {
  min-height: var(--tap);
  padding: 10px 20px;
  font-size: var(--fs-17);
  box-shadow: 4px 4px 0 var(--tinte);
}
.knopf--klein:active,
.knopf--klein.ist-gedrueckt { box-shadow: 1px 1px 0 var(--tinte); transform: translate(3px, 3px); }

/* Kopieren-Bestätigung im Button selbst */
.knopf.ist-kopiert {
  background: var(--minze);
  color: var(--tinte);
}

/* Textlink als Button ohne Rahmen (z. B. Abmelden) */
.textknopf {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 8px 4px;
  min-height: 44px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
  color: var(--tinte);
}

/* --------------------------------------------------------------------------
   Formularfelder
   -------------------------------------------------------------------------- */
.feld {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 14px 18px;
  background: var(--weiss);
  border: var(--outline) solid var(--tinte);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--tinte);
  font-size: var(--fs-19);
  line-height: 1.35;
}
textarea.feld { min-height: 180px; resize: vertical; line-height: 1.45; }
.feld::placeholder { color: var(--tinte-weich); }
.feld-label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Fokus
   -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 4px solid var(--minze);
  outline-offset: 3px;
  border-radius: 6px;
}
.knopf:focus-visible,
.etikett:focus-visible,
.feld:focus-visible {
  outline: 4px solid var(--minze);
  outline-offset: 4px;
}

/* Skip-Link */
.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--sonne);
  border: var(--outline) solid var(--tinte);
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.skip:focus { top: 12px; }

/* Nur für Screenreader */
.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Bewegung
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}