/* =============================================================
   Ein Teil von uns. – Gestaltung der Webseite
   -------------------------------------------------------------
   FARBEN ÄNDERN: einfach die Werte unten bei ":root" anpassen.
   (Die Farben IM BILD stehen in js/app.js ganz oben bei FARBEN.)
   ============================================================= */

/* ---------- Schrift ----------
   Wenn im Ordner "fonts/" die Dateien der Schrift "Atkinson Hyperlegible"
   liegen, wird sie benutzt. Fehlen sie, nimmt der Browser automatisch
   eine Systemschrift. Es wird NICHTS aus dem Internet nachgeladen. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: local("Atkinson Hyperlegible"),
       url("../fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: local("Atkinson Hyperlegible Bold"),
       url("../fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Farben und Grundwerte ---------- */
:root {
  --hintergrund: #FFF7EC;   /* helles Creme – Seitenhintergrund */
  --flaeche: #FFFFFF;       /* Kärtchen */
  --text: #2B1B17;          /* fast Schwarz, warm */
  --text-leise: #5A3A2E;    /* Nebentexte */
  --akzent: #B8430F;        /* Terrakotta – Knöpfe, Überschrift */
  --akzent-dunkel: #8F3209; /* Knopf beim Drüberfahren */
  --akzent-hell: #FFE3CC;   /* zarte Hinterlegung */
  --rand: #E9D3BC;          /* Linien */
  --fokus: #1F1F1F;         /* Rahmen bei Tastatur-Bedienung */

  --schrift: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 16px;
}

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

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

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;      /* 17 px */
  line-height: 1.6;
  overflow-x: hidden;        /* niemals seitlich scrollen */
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
a  { color: var(--akzent-dunkel); }

/* Gut sichtbarer Rahmen, wenn man mit der Tastatur bedient */
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

.inhalt {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* Für Elemente, die man nicht sieht, die Screenreader aber vorlesen
   und die man per Tastatur erreicht (z. B. das Datei-Feld). */
.unsichtbar-aber-bedienbar {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Knöpfe (alle mind. 48 px hoch) ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  min-width: 48px;
  padding: .7em 1.4em;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, transform .1s;
}
.knopf:active { transform: scale(.98); }
.knopf-gross  { width: 100%; min-height: 56px; font-size: 1.15rem; }

.knopf-haupt  { background: var(--akzent); color: #fff; }
.knopf-haupt:hover { background: var(--akzent-dunkel); }

.knopf-zweit  { background: var(--flaeche); color: var(--akzent-dunkel); border-color: var(--akzent); }
.knopf-zweit:hover { background: var(--akzent-hell); }

.knopf-hell   { background: #fff; color: var(--akzent-dunkel); }
.knopf-hell:hover { background: var(--akzent-hell); }


.knopf:disabled {
  background: #E6DCD2;
  color: #6B5C55;
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
}

/* Wenn das Datei-Feld per Tastatur fokussiert ist, den Knopf-Rahmen zeigen */
#foto-eingabe:focus-visible + label { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* ---------- 1. Kopfbereich ---------- */
.kopf {
  background: var(--akzent);
  color: #fff;
  padding: 48px 0 40px;
}
.kopf h1 {
  font-size: clamp(2.6rem, 12vw, 5rem);
  letter-spacing: -.02em;
  margin-bottom: .4em;
}
.einstieg { max-width: 40em; font-size: 1.125rem; }
.parole {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 1.2em;
}

/* ---------- 2. Kurzanleitung ---------- */
.schritte-bereich { padding-top: 40px; padding-bottom: 16px; }
.schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.schritte li {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px 16px 8px 72px;
  position: relative;
}
.schritte .nummer {
  position: absolute;
  left: 16px; top: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  display: grid;
  place-items: center;
}
.schritte h3 { margin-bottom: .2em; }

/* ---------- 3. Generator ---------- */
.generator { padding-top: 32px; padding-bottom: 32px; }

.vertrauen {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--akzent-hell);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.vertrauen .icon { color: var(--akzent-dunkel); margin-top: 2px; }

.generator-raster {
  display: grid;
  gap: 20px;
  grid-template-areas:
    "foto"
    "vorschau"
    "einstellungen";
}
.bereich-foto          { grid-area: foto; }
.bereich-vorschau      { grid-area: vorschau; }
.bereich-einstellungen { grid-area: einstellungen; }

.feld { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.feld-titel { display: block; font-weight: 700; margin-bottom: 8px; padding: 0; }
.optional { font-weight: 400; color: var(--text-leise); }
.hilfe { font-size: .95rem; color: var(--text-leise); margin: 8px 0 12px; }
.nur-desktop { display: none; }

/* Vorschau: passt sich an die Breite an, bleibt aber auf den Bildschirm beschränkt */
.vorschau {
  display: flex;
  justify-content: center;
  background: #F3E6D8;
  border-radius: var(--radius);
  padding: 12px;
}
.vorschau canvas {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(43, 27, 23, .18);
  touch-action: pan-y;       /* ohne Foto: normal scrollen */
  cursor: default;
}
.vorschau.hat-foto canvas {
  touch-action: none;        /* mit Foto: Finger verschiebt das Bild */
  cursor: grab;
}
.vorschau.hat-foto canvas:active { cursor: grabbing; }
.vorschau.ziehen-drueber { outline: 3px dashed var(--akzent); }

/* Schieberegler */
input[type="range"] {
  width: 100%;
  height: 48px;
  accent-color: var(--akzent);
  margin: 0;
}

/* Textfeld */
input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 2px solid var(--rand);
  border-radius: 12px;
}
input[type="text"]:focus { border-color: var(--akzent); }

/* Umschalter für Format und Farbe (echte Radio-Knöpfe, nur hübsch angezogen) */
.umschalter-gruppe,
.farb-gruppe {
  display: grid;
  gap: 10px;
}
.umschalter-gruppe { grid-template-columns: 1fr 1fr; }
.farb-gruppe       { grid-template-columns: repeat(3, 1fr); }

.umschalter input,
.farbe input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.umschalter span,
.farbe span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  height: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 2px solid var(--rand);
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.3;
}
.umschalter small {
  font-weight: 400;
  font-size: .8rem;
  color: var(--text-leise);
  margin-top: 2px;
}
.farbe span { align-items: center; text-align: center; gap: 6px; font-size: .95rem; }
.muster {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-style: normal;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, .15);
}
.umschalter input:checked + span,
.farbe input:checked + span {
  border-color: var(--akzent);
  background: var(--akzent-hell);
  box-shadow: inset 0 0 0 1px var(--akzent);
}
.umschalter input:focus-visible + span,
.farbe input:focus-visible + span {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* Einwilligungs-Häkchen */
.einwilligung {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 2px solid var(--rand);
  border-radius: 12px;
  padding: 12px;
}
.einwilligung input {
  width: 28px; height: 28px;
  margin: 0;
  flex: none;
  accent-color: var(--akzent);
}
.einwilligung label { cursor: pointer; font-weight: 700; }

/* ---------- 4. Teilen ---------- */
.teilen { display: grid; gap: 12px; }
.status {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: #F3E6D8;
  font-weight: 700;
}
.status.ok    { background: #E3F1DF; color: #1F4A17; }
.status.fehler{ background: #FBE0DA; color: #7A1C0A; }
.hinweis-instagram { font-size: .95rem; color: var(--text-leise); margin: 4px 0 0; }


/* ---------- 5. Fußbereich ---------- */
.fuss {
  background: var(--text);
  color: #FFF1DC;
  padding: 32px 0 40px;
  text-align: center;
}
.fuss a {
  color: #FFF1DC;
  display: inline-block;
  min-height: 48px;
  line-height: 48px;
  padding: 0 12px;
}
.parole-klein { font-weight: 700; font-size: 1.15rem; }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.unterseite-kopf { padding: 24px 0; }
.unterseite-kopf a { font-weight: 700; }
.unterseite-kopf .marke { font-size: 1.6rem; margin: 0; }
.unterseite-kopf .marke a { color: #fff; text-decoration: none; }
.text-seite { padding-top: 32px; padding-bottom: 48px; max-width: 760px; }
.text-seite h1 { color: var(--akzent-dunkel); font-size: 2.2rem; }
.text-seite h2 { font-size: 1.35rem; margin-top: 1.6em; }
.platzhalter { background: #FFF0A8; padding: 0 .2em; border-radius: 3px; }

/* =============================================================
   Größere Bildschirme (Tablet, Computer)
   ============================================================= */
@media (min-width: 640px) {
  .schritte     { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .kopf { padding: 80px 0 64px; }
  .nur-desktop { display: inline; }

  /* Links Einstellungen, rechts die Vorschau (bleibt beim Scrollen stehen) */
  .generator-raster {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "foto          vorschau"
      "einstellungen vorschau";
    align-items: start;
    column-gap: 40px;
  }
  .bereich-vorschau { position: sticky; top: 16px; }
  .vorschau canvas { max-height: 72vh; }
}

/* Weniger Bewegung, wenn im System so eingestellt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knopf { transition: none; }
}