/*
 * Die Website der Stückerl Werkstatt.
 *
 * Dieselbe Farbwelt wie die App – Nussholz, Messing, der rote Filz unter den
 * Knöpfen. Hinter allem liegt die Harmonika, abgedunkelt;
 * die Abschnitte darüber sind halb durchsichtig, damit sie beim Scrollen
 * durchscheint, ohne dem Lesen im Weg zu stehen.
 */

@font-face {
  font-family: "Great Vibes";
  src: url("../schrift/GreatVibes-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --grund: #120b07;
  --flaeche: rgba(24, 15, 9, 0.8);
  --flaeche-hell: rgba(48, 30, 17, 0.62);
  --flaeche-fest: #1d120a;
  --feld: rgba(12, 7, 4, 0.75);
  --rand: rgba(222, 184, 104, 0.2);
  --rand-stark: rgba(222, 184, 104, 0.48);
  --messing: #d9b25a;
  --messing-hell: #f2d894;
  --messing-dunkel: #a67f2e;
  --text: #f6eddd;
  --text-leise: #d2c2a6;
  --text-schwach: #a8977c;
  --filz: #c62a41;
  --fehler: #ffab9c;
  --erfolg: #b7e3a8;
  --radius: 18px;
  --radius-klein: 12px;
  --schatten: 0 30px 70px -28px rgba(0, 0, 0, 0.85);
  --breite: 1180px;
  --schrift: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Roboto, Arial, sans-serif;
  --titelschrift: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  --kopfhoehe: 72px;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  font: 400 1.0625rem/1.65 var(--schrift);
  color: var(--text);
  background: var(--grund);
  overflow-x: hidden;
  /* Der Fuss steht unten, auch wenn eine Seite wenig Inhalt hat. */
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1;
}

/* Jede Unterseite ist ein einzelner Abschnitt: Er beginnt knapp unter dem
   Menü und reicht bis zum Fuss. */
.unterseite {
  display: flex;
  flex-direction: column;
}

.unterseite > .abschnitt {
  flex: 1;
  padding-top: calc(var(--kopfhoehe) + 2.5rem);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--messing-hell);
  text-underline-offset: 0.18em;
}

a:hover {
  color: #fff3cf;
}

:focus-visible {
  outline: 3px solid var(--messing-hell);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

/* Die Hauptüberschrift jeder Unterseite: eine h1 für Suchmaschinen, im
   Aussehen wie die Abschnittsüberschriften. */
h1,
h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
  font-weight: 700;
}

h3 {
  font-size: 1.25rem;
  font-weight: 650;
}

p {
  margin: 0 0 1em;
}

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sprungmarke {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--messing);
  color: #1d1208;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s;
}

.sprungmarke:focus {
  transform: none;
}

/* ------------------------------------------------------------ Hintergrund */

/* Die Harmonika: fest hinter der ganzen Seite, abgedunkelt. Ein eigenes
   Element statt background-attachment: fixed – das beherrschen iPad und
   iPhone nicht.

   Das Foto ist freigestellt und füllt die ganze Fläche; wo es an den Ecken
   nicht hinreicht, liegt ein warmer Schimmer statt blankem Schwarz. */
.hintergrund {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse 60% 70% at 70% 52%, #4a2e19 0%, #26170c 50%, var(--grund) 100%);
  filter: saturate(0.95) brightness(0.7);
}

.hintergrund img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 42%;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 50% 42%, rgba(18, 11, 7, 0.72) 0%, rgba(18, 11, 7, 0.45) 60%, rgba(18, 11, 7, 0.3) 100%),
    linear-gradient(180deg, rgba(18, 11, 7, 0.15) 0%, rgba(18, 11, 7, 0.1) 55%, rgba(18, 11, 7, 0.7) 100%);
}

/* ------------------------------------------------------------------ Kopf */

/* Das Menü schwebt: eine Leiste mit runden Ecken und Abstand zum Rand, die
   über der Seite liegt, statt sie oben abzuschneiden. Sie ist nur so breit
   wie ihre Einträge und steht in der Mitte; die Harmonika scheint durch. */
.kopf {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 50;
  width: max-content;
  max-width: calc(100% - 24px);
  translate: -50% 0;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: rgba(18, 11, 7, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 240, 210, 0.06);
  transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
}

/* Beim Scrollen etwas dichter – dann liegt Text statt Harmonika darunter. */
.kopf.fest,
.kopf.offen {
  background: rgba(18, 11, 7, 0.86);
  border-color: rgba(222, 184, 104, 0.3);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 240, 210, 0.06);
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--kopfhoehe) - 12px);
  padding: 0 0.45rem;
}

.hauptmenue {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hauptmenue a {
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: var(--text-leise);
  text-decoration: none;
  font-size: 0.97rem;
  font-weight: 550;
  transition: color 0.2s, background-color 0.2s;
}

.hauptmenue a:hover {
  color: var(--text);
  background: rgba(222, 184, 104, 0.1);
}

/* Die Seite, auf der man gerade ist. */
.hauptmenue a[aria-current="page"] {
  color: var(--messing-hell);
  background: rgba(222, 184, 104, 0.14);
}

/* Schmal: Statt der Einträge steht ein Knopf „Menü“ in der Leiste. */
.menue-knopf {
  display: none;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 600 1rem/1 var(--schrift);
  cursor: pointer;
}

.menue-strich,
.menue-strich::before,
.menue-strich::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s, opacity 0.2s;
}

.menue-strich {
  position: relative;
}

.menue-strich::before,
.menue-strich::after {
  content: "";
  position: absolute;
  left: 0;
}

.menue-strich::before {
  top: -6px;
}

.menue-strich::after {
  top: 6px;
}

.kopf.offen .menue-strich {
  background: transparent;
}

.kopf.offen .menue-strich::before {
  transform: translateY(6px) rotate(45deg);
}

.kopf.offen .menue-strich::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 650 1.02rem/1.2 var(--schrift);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
}

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

.knopf-haupt {
  color: #1c1107;
  background: linear-gradient(180deg, #f4d68d 0%, #d5a849 55%, #b88a33 100%);
  box-shadow: 0 10px 26px -10px rgba(217, 178, 90, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.knopf-haupt:hover {
  color: #1c1107;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(217, 178, 90, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.knopf-rand {
  color: var(--text);
  border-color: var(--rand-stark);
  background: rgba(18, 11, 7, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.knopf-rand:hover {
  color: #fff;
  border-color: var(--messing);
  background: rgba(217, 178, 90, 0.14);
}

.knopf-breit {
  width: 100%;
}

.knopf[disabled] {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}

/* ------------------------------------------------------------------ Held */

/* Der Inhalt beginnt knapp unter dem Menü, nicht in der Bildschirmmitte:
   Mittig stand er gut 80 Punkte tiefer, und die Luft darüber wirkte wie ein
   Loch. */
.held {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--kopfhoehe) + 2.5rem) clamp(1.1rem, 5vw, 2rem) 4rem;
}

.held-innen {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  /* Der ganze Block steht mittig unter dem Menü. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.held-kicker {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--rand-stark);
  border-radius: 999px;
  background: rgba(18, 11, 7, 0.45);
  color: var(--messing-hell);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.held-titel {
  margin: 0 0 0.25em;
  max-width: 11ch;
  font: 400 clamp(4rem, 2.2rem + 8vw, 8.2rem)/0.95 var(--titelschrift);
  letter-spacing: 0;
  background: linear-gradient(180deg, #fff1c8 0%, #efcf7f 45%, #c89533 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.6));
  /* Der Schwung des S ragt über die Zeile hinaus; mit Text als Füllung
     schnitte der Rand ihn sonst oben ab. */
  padding: 0.22em 0.1em 0.08em 0;
}

.held-text {
  max-width: 34rem;
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--text);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

.held-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin: 2rem 0 2.2rem;
}

.held-merkmale {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-leise);
  font-size: 0.97rem;
}

.held-merkmale li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.held-merkmale li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--filz);
  box-shadow: 0 0 0 3px rgba(198, 42, 65, 0.25);
}

/* ------------------------------------------------------------ Abschnitte */

.abschnitt {
  position: relative;
  padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1.1rem, 5vw, 2rem);
  background: rgba(18, 11, 7, 0.72);
  border-top: 1px solid rgba(222, 184, 104, 0.1);
}

.abschnitt-innen {
  max-width: var(--breite);
  margin: 0 auto;
}

.abschnitt-schmal {
  max-width: 820px;
}

.abschnitt-kopf {
  max-width: 46rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.4rem);
}

.kicker {
  margin-bottom: 0.7rem;
  color: var(--messing);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.einleitung {
  color: var(--text-leise);
  font-size: 1.12rem;
}

/* --------------------------------------------------------------- Karten */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.1rem;
}

.karte {
  padding: 1.7rem 1.6rem 1.5rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(62, 39, 21, 0.6), rgba(30, 19, 11, 0.6));
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.karte:hover {
  transform: translateY(-3px);
  border-color: var(--rand-stark);
  box-shadow: var(--schatten);
}

.karte p {
  margin: 0;
  color: var(--text-leise);
}

.karte-symbol {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1.1rem;
  border-radius: 15px;
  color: var(--messing-hell);
  background: radial-gradient(circle at 35% 30%, rgba(242, 216, 148, 0.2), rgba(217, 178, 90, 0.06));
  border: 1px solid var(--rand-stark);
}

.band {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  margin-top: 1.4rem;
  padding: 1.7rem 1.8rem;
  border: 1px solid var(--rand);
  border-left: 4px solid var(--filz);
  border-radius: var(--radius);
  background: rgba(12, 7, 4, 0.6);
}

.band-symbol {
  flex: none;
  color: var(--messing-hell);
}

.band p {
  margin: 0;
  color: var(--text-leise);
}

/* -------------------------------------------------------------- Galerie */

.galerie {
  display: grid;
  gap: 1.4rem;
}

.buehne {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  margin: 0;
}

.buehne-link {
  position: relative;
  display: block;
  max-width: 100%;
  line-height: 0;
  cursor: zoom-in;
}

.buehne-link img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 74vh;
  transition: opacity 0.25s;
}

.buehne-link img.wechselt {
  opacity: 0.25;
}

/* Am Rechner: ein schwebendes Fenster. */
.geraet-rechner .buehne-link {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 238, 200, 0.14);
  box-shadow: var(--schatten), 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* Am Tablet: ein Rahmen wie das Gerät. */
.geraet-tablet .buehne-link {
  padding: clamp(8px, 1.4vw, 16px);
  border-radius: clamp(18px, 2.6vw, 34px);
  background: linear-gradient(145deg, #2a2320, #0c0908);
  box-shadow: var(--schatten), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px #000;
}

.geraet-tablet .buehne-link img {
  border-radius: clamp(8px, 1.2vw, 14px);
}

.lupe {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #1c1107;
  background: rgba(242, 216, 148, 0.92);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s, transform 0.2s;
}

.geraet-tablet .lupe {
  top: calc(clamp(8px, 1.4vw, 16px) + 12px);
  right: calc(clamp(8px, 1.4vw, 16px) + 12px);
}

.buehne-link:hover .lupe,
.buehne-link:focus-visible .lupe {
  opacity: 1;
  transform: none;
}

.buehne figcaption {
  display: grid;
  gap: 0.2rem;
  max-width: 44rem;
  text-align: center;
}

.buehne-titel {
  color: var(--messing-hell);
  font-size: 1.12rem;
}

.buehne-text {
  color: var(--text-leise);
}

.vorschau {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 176px);
  gap: 0.8rem;
  margin: 0;
  padding: 0.4rem 0.2rem 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--messing-dunkel) transparent;
  justify-content: safe center;
}

.vorschau li {
  scroll-snap-align: start;
}

.vorschau a {
  display: grid;
  gap: 0.45rem;
  padding: 6px;
  border: 1px solid var(--rand);
  border-radius: 14px;
  background: rgba(12, 7, 4, 0.55);
  color: var(--text-leise);
  font-size: 0.86rem;
  font-weight: 550;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.vorschau a:hover {
  color: var(--text);
  border-color: var(--rand-stark);
}

.vorschau a[aria-current="true"] {
  color: var(--messing-hell);
  border-color: var(--messing);
  background: rgba(217, 178, 90, 0.12);
}

.vorschau img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-radius: 9px;
}

.vorschau span {
  padding: 0 0.25rem 0.2rem;
}

/* ------------------------------------------------------------ Farbwelten */

.farbwelten {
  margin-top: clamp(3.5rem, 7vw, 5rem);
  text-align: center;
}

.farbwelten > p {
  color: var(--text-leise);
}

.farbwelten-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.6rem;
}

.farbwelt {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--rand);
  box-shadow: var(--schatten);
  line-height: 0;
  cursor: zoom-in;
  transition: transform 0.25s, border-color 0.25s;
}

.farbwelt:hover {
  transform: translateY(-4px);
  border-color: var(--rand-stark);
}

.farbwelt span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(12, 7, 4, 0.82);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.2;
}

/* --------------------------------------------------------- Herunterladen */

.angebote {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem;
}

.angebot {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--rand);
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(180deg, rgba(58, 36, 19, 0.66), rgba(24, 15, 9, 0.7));
  box-shadow: var(--schatten);
}

.angebot-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.angebot-kopf h3 {
  margin: 0;
  font-size: 1.5rem;
}

.angebot-unter {
  margin: 0.15rem 0 0;
  color: var(--text-schwach);
  font-size: 0.95rem;
}

.angebot-symbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  color: #1c1107;
  background: linear-gradient(180deg, #f4d68d, #c99a3c);
}

.haken,
.schritte {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-leise);
}

.haken li {
  position: relative;
  padding-left: 2rem;
}

.haken li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.32em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: rgba(217, 178, 90, 0.18)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2d894' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 L10.2 16.5 L18 8'/%3E%3C/svg%3E")
    center / 72% no-repeat;
}

.schritte {
  counter-reset: schritt;
}

.schritte li {
  position: relative;
  padding-left: 2.4rem;
  counter-increment: schritt;
}

.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 1px solid var(--rand-stark);
  color: var(--messing-hell);
  font-size: 0.9rem;
  font-weight: 700;
}

.angebot .knopf-breit {
  margin-top: auto;
}

/* iPad und Android nebeneinander, am Handy untereinander. */
.tablet-anleitungen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.2rem;
}

.tablet-anleitungen h4 {
  margin: 0 0 0.6rem;
  color: var(--messing-hell);
  font-size: 1.02rem;
}

.hinweis-kurz {
  margin: -0.4rem 0 0;
  color: var(--text-leise);
  font-size: 0.95rem;
}

.hinweis {
  color: var(--text-schwach);
  font-size: 0.95rem;
}

.hinweis summary {
  cursor: pointer;
  color: var(--text-leise);
}

.hinweis p {
  margin: 0.6rem 0 0;
}

.hinweis ul {
  display: grid;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
}

.hinweis + .hinweis {
  margin-top: -0.6rem;
}

.tablet-weg {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: auto;
}

.tablet-weg .knopf {
  flex: 1;
  font-size: 0.98rem;
}

.qr-klein {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--text-schwach);
  font-size: 0.78rem;
}

.qr-klein img {
  width: 104px;
  height: 104px;
  border-radius: 10px;
}

.zusammen {
  margin: 2rem 0 0;
  padding: 1.3rem 1.6rem;
  border: 1px dashed var(--rand-stark);
  border-radius: var(--radius);
  color: var(--text-leise);
  text-align: center;
}

.zusammen strong {
  color: var(--text);
}

/* Die Einschränkung gleich darunter – als Hinweis, nicht als Warnung. */
.zusammen-hinweis {
  margin: 0.9rem auto 0;
  max-width: 52rem;
  padding: 0.9rem 1.3rem 0.9rem 1.2rem;
  border-left: 3px solid var(--messing);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  background: rgba(217, 178, 90, 0.08);
  color: var(--text-leise);
  font-size: 0.97rem;
}

.zusammen-hinweis strong {
  color: var(--messing-hell);
}

/* ---------------------------------------------------------------- Spende */

.spende {
  overflow: hidden;
}

.spende-raster {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.spende-text p {
  color: var(--text-leise);
  font-size: 1.12rem;
}

.spende-text strong {
  color: var(--text);
}

.spende-danke {
  margin-top: 1.4rem;
  font: 400 2.4rem/1 var(--titelschrift) !important;
  color: var(--messing-hell) !important;
}

.bank {
  display: grid;
  gap: 1.4rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--rand-stark);
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(242, 216, 148, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(58, 36, 19, 0.75), rgba(24, 15, 9, 0.82));
  box-shadow: var(--schatten);
}

.bank-daten {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.bank-daten dt {
  color: var(--text-schwach);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bank-daten dd {
  margin: 0.15rem 0 0;
  font-size: 1.12rem;
  font-weight: 600;
}

.bank-iban {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

#iban {
  font: 650 clamp(1.1rem, 0.9rem + 1vw, 1.45rem)/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.04em;
  color: var(--messing-hell);
}

.kopieren {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--rand-stark);
  border-radius: 999px;
  background: rgba(12, 7, 4, 0.5);
  color: var(--text);
  font: 600 0.88rem/1 var(--schrift);
  cursor: pointer;
}

.kopieren:hover {
  border-color: var(--messing);
}

.kopieren.kopiert {
  color: var(--erfolg);
  border-color: var(--erfolg);
}

.qr {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rand);
}

.qr img {
  flex: none;
  width: 132px;
  height: 132px;
  border-radius: 12px;
}

.qr figcaption {
  color: var(--text-leise);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------- Formular */

.formular {
  display: grid;
  gap: 1.4rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid var(--rand);
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(180deg, rgba(48, 30, 17, 0.65), rgba(20, 12, 7, 0.75));
  box-shadow: var(--schatten);
}

.feld {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.feld > label,
.feld legend {
  padding: 0;
  font-weight: 650;
  color: var(--text);
}

.feld legend {
  margin-bottom: 0.55rem;
}

.frei {
  color: var(--text-schwach);
  font-weight: 400;
  font-size: 0.92em;
}

.feld-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--feld);
  color: var(--text);
  font: 400 1.05rem/1.5 var(--schrift);
  transition: border-color 0.2s, box-shadow 0.2s;
}

textarea {
  min-height: 170px;
  resize: vertical;
}

select {
  appearance: none;
  padding-right: 2.8rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9b25a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9 L12 15 L18 9'/%3E%3C/svg%3E")
    right 1rem center / 18px no-repeat,
    var(--feld);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-schwach);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--messing);
  box-shadow: 0 0 0 4px rgba(217, 178, 90, 0.2);
}

[aria-invalid="true"] {
  border-color: var(--fehler) !important;
}

.wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.wahl-knopf {
  position: relative;
  cursor: pointer;
}

.wahl-knopf input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wahl-knopf span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--feld);
  color: var(--text-leise);
  font-weight: 550;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.wahl-knopf:hover span {
  border-color: var(--rand-stark);
  color: var(--text);
}

.wahl-knopf input:checked + span {
  border-color: var(--messing);
  background: rgba(217, 178, 90, 0.18);
  color: var(--messing-hell);
}

.wahl-knopf input:focus-visible + span {
  outline: 3px solid var(--messing-hell);
  outline-offset: 2px;
}

.zustimmung {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  color: var(--text-leise);
  font-weight: 400 !important;
  cursor: pointer;
}

.zustimmung input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0.15rem 0 0;
  accent-color: var(--messing);
}

.feld-aufgabe input {
  max-width: 12rem;
}

.aufgabe-frage {
  color: var(--messing-hell);
  white-space: nowrap;
}

.feld-zaehler {
  margin: 0;
  justify-self: end;
  color: var(--text-schwach);
  font-size: 0.85rem;
}

.feld-fehler {
  margin: 0;
  color: var(--fehler);
  font-size: 0.95rem;
}

.formular-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}

.formular-meldung {
  flex: 1 1 16rem;
  margin: 0;
  color: var(--text-leise);
}

.formular-meldung.gut {
  color: var(--erfolg);
  font-weight: 600;
}

.formular-meldung.schlecht {
  color: var(--fehler);
}

/* Das Feld für Programme: vorhanden, aber für Menschen nicht zu sehen. */
.honig {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ Einzelseite */

/* Dieselbe Abschattung wie auf allen Unterseiten. */
.einzelseite {
  padding: calc(var(--kopfhoehe) + 1.5rem) clamp(1.1rem, 5vw, 2rem) 5rem;
  background: rgba(18, 11, 7, 0.72);
}

.einzelseite-innen {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(1.6rem, 5vw, 3rem);
  border: 1px solid var(--rand);
  border-radius: calc(var(--radius) + 4px);
  background: var(--flaeche);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.einzelseite h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.8rem);
}

.einzelseite h2 {
  margin-top: 2rem;
  font-size: 1.3rem;
  color: var(--messing-hell);
}

.einzelseite p,
.einzelseite li {
  color: var(--text-leise);
}

.einzelseite .stand {
  margin-top: 2rem;
  color: var(--text-schwach);
  font-size: 0.92rem;
}

/* Eine Lücke, die vor dem Veröffentlichen gefüllt werden muss – absichtlich
   grell, damit sie niemand übersieht. */
mark.luecke {
  padding: 0 0.3em;
  border-radius: 4px;
  background: #ffd84a;
  color: #1c1000;
  font-weight: 600;
}

/* ------------------------------------------------------------------- Fuss */

.fuss {
  padding: 3.5rem clamp(1.1rem, 5vw, 2rem) calc(2.5rem + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 5, 3, 0.94);
  border-top: 1px solid var(--rand);
  text-align: center;
  color: var(--text-schwach);
  font-size: 0.95rem;
}

.fuss-innen {
  max-width: var(--breite);
  margin: 0 auto;
}

.fuss-marke {
  margin-bottom: 0.3rem;
  font: 400 2.3rem/1.1 var(--titelschrift);
  color: var(--messing-hell);
}

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
  margin: 1.4rem 0;
}

.fuss-links a {
  color: var(--text-leise);
  font-weight: 600;
}

.fuss-klein {
  font-size: 0.85rem;
}

.fuss-klein a {
  color: var(--text-schwach);
}

/* -------------------------------------------------------- Grossansicht */

.grossansicht {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overscroll-behavior: contain;
}

.grossansicht::backdrop {
  background: rgba(6, 4, 2, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.grossansicht figure {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  height: 100%;
  margin: 0;
  padding: 4.5rem clamp(0.6rem, 7vw, 6rem) 1.6rem;
}

.grossansicht img {
  max-width: 100%;
  max-height: calc(100vh - 11rem);
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.grossansicht figcaption {
  display: grid;
  gap: 0.2rem;
  max-width: 50rem;
  text-align: center;
  color: var(--text-leise);
}

.grossansicht-titel {
  color: var(--messing-hell);
}

.grossansicht button {
  position: fixed;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--rand-stark);
  border-radius: 50%;
  background: rgba(18, 11, 7, 0.8);
  color: var(--text);
  cursor: pointer;
}

.grossansicht button:hover {
  border-color: var(--messing);
  color: #fff;
}

.grossansicht-zu {
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1rem;
}

.grossansicht-zurueck,
.grossansicht-vor {
  top: 50%;
  translate: 0 -50%;
}

.grossansicht-zurueck {
  left: 1rem;
}

.grossansicht-vor {
  right: 1rem;
}

.grossansicht[data-allein] .grossansicht-zurueck,
.grossansicht[data-allein] .grossansicht-vor {
  display: none;
}

/* ------------------------------------------------------------ Erscheinen */

/* Nur mit JavaScript: Ohne es bliebe sonst alles unsichtbar. */
.js .erscheinen {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .erscheinen.sichtbar {
  opacity: 1;
  transform: none;
}

.karten .erscheinen:nth-child(2) { transition-delay: 0.06s; }
.karten .erscheinen:nth-child(3) { transition-delay: 0.12s; }
.karten .erscheinen:nth-child(4) { transition-delay: 0.18s; }
.karten .erscheinen:nth-child(5) { transition-delay: 0.24s; }
.karten .erscheinen:nth-child(6) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .erscheinen {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------ Schmal */

@media (max-width: 980px) {
  .js .menue-knopf {
    display: inline-flex;
  }

  /* Aufgeklappt schwebt das Menü als eigene Karte mittig unter der Leiste. */
  .js .hauptmenue {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    width: min(300px, calc(100vw - 24px));
    translate: -50% 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.6rem;
    border: 1px solid rgba(222, 184, 104, 0.3);
    border-radius: 24px;
    /* Deckend: Ein Weichzeichner wirkt in einer Leiste, die selbst schon
       weichzeichnet, nicht – und der Titel schiene durch. */
    background: #150d08;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.95);
  }

  .js .kopf.offen .hauptmenue {
    display: flex;
  }

  .js .hauptmenue a {
    padding: 0.85rem 1rem;
    font-size: 1.08rem;
    text-align: center;
  }


  /* Ohne JavaScript bricht das Menü einfach in eine zweite Zeile um – die
     Leiste wird dann höher, und ganz runde Enden sähen wie eine Pille aus. */
  .kopf {
    border-radius: 28px;
  }

  .kopf-innen {
    flex-wrap: wrap;
  }

  .angebote,
  .spende-raster {
    grid-template-columns: 1fr;
  }

  body::before {
    background:
      linear-gradient(180deg, rgba(18, 11, 7, 0.55) 0%, rgba(18, 11, 7, 0.35) 40%, rgba(18, 11, 7, 0.8) 100%);
  }

  /* Hochkant zeigt die volle Höhe den Balg in der Mitte. */
  .hintergrund img {
    object-position: center;
  }
}

@media (max-width: 640px) {
  :root {
    --kopfhoehe: 64px;
  }

  body {
    font-size: 1rem;
  }

  .held {
    padding-bottom: 3rem;
  }

  .held-knoepfe .knopf {
    flex: 1 1 100%;
  }

  .feld-reihe {
    grid-template-columns: 1fr;
  }

  .farbwelten-reihe {
    grid-template-columns: 1fr;
  }

  .tablet-weg {
    flex-direction: column;
    align-items: stretch;
  }

  .qr {
    flex-direction: column;
    text-align: center;
  }

  .band {
    flex-direction: column;
  }

  .grossansicht-zurueck,
  .grossansicht-vor {
    top: auto;
    bottom: 1rem;
    translate: none;
  }

  .grossansicht figure {
    padding-bottom: 5.5rem;
  }
}