/* Vorlaeufiges CSS aus Block 4b-1 — ruhig und lesbar, mehr nicht.
   Es wird in 4b-2 durch den Design-Export ersetzt; deshalb steht hier bewusst keine
   Farbwelt und kein Baustein, den das Design spaeter anders schneidet.
   Zwei Dinge bleiben aber auch dann gueltig und stehen darum schon hier:
   Touchziele >= 44 px (Design-Prompt Abschnitt 9) und 16 px Schriftgroesse in Feldern,
   weil iOS-Safari sonst beim Antippen hineinzoomt und der Counter-Bildschirm springt. */

:root {
  --grund: #f7f7f5;
  --papier: #ffffff;
  --linie: #d9d7d2;
  --schrift: #1c1b19;
  --gedaempft: #6b6862;
  --warnung: #8a2b22;
  --aktion: #1c1b19;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--schrift);
  background: var(--grund);
}

/* --- Anmeldung: ein Bildschirm fuer Desktop und Tablet, ruhig und mittig --- */
.ist-anmeldung { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }

.anmeldung {
  width: 100%; max-width: 380px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 32px 28px;
}

.marke { font-size: 20px; font-weight: 400; line-height: 1.25; margin: 0 0 28px; }
.marke strong { font-weight: 600; }

.anmeldung label { display: block; margin: 16px 0 6px; font-size: 14px; color: var(--gedaempft); }

.anmeldung input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px;              /* nicht kleiner — sonst zoomt iOS-Safari beim Antippen */
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--papier);
  color: var(--schrift);
}

.anmeldung input:focus-visible { outline: 2px solid var(--aktion); outline-offset: 1px; }

button {
  min-height: 48px;
  width: 100%;
  margin-top: 24px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--papier);
  background: var(--aktion);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.hinweis {
  margin: 0 0 4px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--warnung);
  background: #fbeceb;
  border: 1px solid #e8c9c6;
  border-radius: 8px;
}

/* --- Platzhalter hinter der Anmeldung (bis 4b-2) --- */
.platzhalter { max-width: 640px; margin: 0 auto; padding: 48px 24px; }
.platzhalter button { width: auto; min-width: 160px; }
.begruessung { font-size: 18px; }
.baustelle { margin-top: 28px; padding: 16px; background: var(--papier); border: 1px dashed var(--linie); border-radius: 8px; }

.fuss { padding: 24px; font-size: 12px; color: var(--gedaempft); text-align: center; }