/* ===========================================================================
   Aussehen der Website "Ein Zimmer mehr, bitte"
   ===========================================================================
   Die Seite soll aussehen wie der gedruckte Aushang: cremefarbenes Papier,
   weisse Karten mit runden Ecken, kraeftiges Gruen fuer die Ueberschriften,
   ein gelber Zettel mit Handschrift.

   Die Farben unten sind mit dem Pipetten-Werkzeug direkt aus dem PDF des
   Aushangs abgelesen -- Papier, Gruen und Gelb sind exakt dieselben Werte.

   Wenn du eine Farbe aendern willst: nur im Block ":root" ganz oben. Von dort
   holt sich der Rest der Datei die Werte, du musst nichts suchen.

   Gebaut wird mobil zuerst: alles, was hier oben steht, gilt fuers Handy.
   Die Bloecke ganz unten ("@media") gelten erst ab breiten Bildschirmen.
   =========================================================================== */

/* --- Schriften -------------------------------------------------------------
   Beide Schriften liegen als Datei im Ordner schriften/ auf unserem eigenen
   Server. Es wird nichts von Google oder einem anderen fremden Server geladen
   -- die Seite funktioniert auch ganz ohne Internet.
   Es sind "variable" Schriften: eine Datei enthaelt alle Strichstaerken. */
@font-face {
  font-family: 'Nunito';
  src: url('schriften/nunito-var-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Nunito';
  src: url('schriften/nunito-var-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F;
}
@font-face {
  font-family: 'Caveat';           /* die Handschrift im gelben Zettel */
  src: url('schriften/caveat-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Caveat';
  src: url('schriften/caveat-var-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F;
}

/* --- Farben und Masse ------------------------------------------------------
   Hier drehst du an allem, was die Seite faerbt. */
:root {
  --papier:      #fffdf6;   /* Hintergrund, cremefarben wie das Aushang-Papier */
  --karte:       #ffffff;   /* die weissen Kaesten                             */
  --rand:        #eee9df;   /* feine Kontur um die Kaesten                     */
  --gruen:       #2e7d32;   /* Ueberschriften, Akzente, Kontaktrahmen          */
  --gruen-dunkel:#256128;   /* gedrueckter Knopf                               */
  --gruen-blass: #eef6ec;   /* Fuellung der nicht hervorgehobenen Ortschips    */
  --gruen-kante: #dae1d8;   /* deren Kontur                                    */
  --gelb:        #fff6dc;   /* der Zettel mit der Handschrift                  */
  --gelb-rand:   #f0e0b4;
  --tinte:       #22201d;   /* normale Schriftfarbe                            */
  --tinte-leise: #6f6960;   /* Fussnoten, Kleingedrucktes                      */

  --radius:      14px;      /* Rundung der Kaesten                             */
  --radius-klein: 9px;
  --spalte:      1100px;    /* maximale Breite am grossen Bildschirm           */
  --luft:        18px;      /* Abstand zum Bildschirmrand am Handy             */
}

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

/* Die Grundschriftgroesse steht bewusst auf dem html-Element und nicht auf
   body: alle "rem"-Angaben weiter unten rechnen von HIER aus. Stuende die 17
   auf body, waeren alle rem-Werte heimlich am 16-Pixel-Standard des Browsers
   ausgerichtet -- der Fliesstext waere zu klein zum Lesen im Stehen. */
html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  /* verhindert, dass der Text am Handy in Zeichenketten zerfaellt */
  -webkit-font-smoothing: antialiased;
}

/* Ein zentrierter Streifen, in dem alles steht. */
.blatt {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 26px var(--luft) 40px;
}

a { color: var(--gruen); }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Fett gedruckte Woerter etwas kraeftiger als der Browser-Standard. */
strong { font-weight: 700; }

/* --- Handlungsleiste ganz oben ---------------------------------------------
   Anrufen, Schreiben, Kontakt speichern. Steht bewusst VOR allem anderen:
   wer den QR-Code am Laternenmast scannt, soll ohne Scrollen anrufen koennen.
   Alle Flaechen sind mindestens 48 Bildpunkte hoch -- so trifft man sie im
   Gehen mit dem Daumen. */
.schnellkontakt {
  margin-bottom: 22px;
}
.schnell-zwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Gruen gefuellter Hauptknopf ("Kontakt speichern"). */
.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  background: var(--gruen);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 2px 0 var(--gruen-dunkel);
  transition: transform .12s ease, box-shadow .12s ease;
}
.knopf:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--gruen-dunkel);
}
.knopf svg { flex: none; }

/* Die zwei helleren Knoepfe daneben: weisse Karte mit gruener Kontur, damit
   sie nicht mit dem Hauptknopf um Aufmerksamkeit streiten. */
.knopf-rand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--karte);
  color: var(--gruen);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid var(--gruen);
  border-radius: var(--radius);
}
.knopf-rand:active { background: var(--gruen-blass); }
.knopf-rand svg { flex: none; }

.knopf-hinweis {
  margin: 8px 2px 12px;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--tinte-leise);
  text-align: center;
}

/* --- Kopfbereich: Zeichnung + Ueberschrift ---------------------------------
   Am Handy stehen Bild und Ueberschrift NEBENEINANDER. Waere das Bild voll
   breit, muesste man erst daran vorbeiscrollen, bevor man erfaehrt, worum es
   geht. So bleibt die Zeichnung charmant, und die Kernaussage steht daneben. */
.kopf {
  display: grid;
  grid-template-columns: minmax(120px, 43%) 1fr;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 24px;
}
.kopf > picture { min-width: 0; grid-column: 1; }
/* Die kleine gruene Zeile laeuft ueber die volle Breite -- auf den Ortsseiten
   ist sie lang ("Wir suchen in Neckargemünd und Umgebung") und wuerde neben
   der Zeichnung auf drei Zeilen zerfallen. */
.kopf > .augenbraue { grid-column: 1 / -1; }
.kopf > h1 { grid-column: 2; min-width: 0; }

/* Die Kinderzeichnung. Weisser Rand und weicher Schatten wie bei einem
   aufgehaengten Bild -- sie wirkt aufgeklebt, nicht eingefuegt. */
.zeichnung {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  background: #fff;
  box-shadow: 0 6px 22px rgba(60, 50, 30, .10);
}

.augenbraue {
  margin: 0 0 3px;
  color: var(--gruen);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
}

h1 {
  margin: 0;
  font-size: clamp(1.55rem, 6.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}
h1 .gruen { color: var(--gruen); display: block; }

/* Der Vorstellungstext laeuft unter beidem ueber die volle Breite. */
.vorstellung {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 1.02rem;
}

/* --- Der gelbe Zettel mit der Handschrift ----------------------------------
   Der eine kleine Kniff der Seite: der Zettel liegt minimal schief auf dem
   Papier, mit weichem Schatten. Er soll wirken wie handschriftlich dazugelegt
   -- alles andere auf der Seite bleibt dafuer streng gerade. */
.notiz {
  margin: 0 0 26px;
  padding: 20px 20px 22px;
  background: var(--gelb);
  border: 1px solid var(--gelb-rand);
  border-radius: var(--radius);
  transform: rotate(-.5deg);
  box-shadow: 0 4px 18px rgba(120, 95, 30, .09);
}
.notiz p {
  margin: 0;
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: 1.42rem;
  line-height: 1.42;
  color: #4a3f22;
}

/* --- Karten ---------------------------------------------------------------- */
.karten {
  display: grid;
  gap: 16px;
  margin-bottom: 26px;
}

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px 18px;
}
.karte > h2 {
  margin: 0 0 14px;
  font-size: 1.2rem;
  font-weight: 800;
}
/* Im Aushang ist im Karten-Titel immer das letzte Wort gruen:
   "Wo wir suchen", "Was wir brauchen", "Was ihr von uns habt". */
.karte > h2 .gruen { color: var(--gruen); }

/* Aufzaehlungen mit dem kleinen gruenen Quadrat aus dem Aushang. */
.karte ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.karte li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 11px;
}
.karte li:last-child { margin-bottom: 0; }
.karte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  background: var(--gruen);
  border-radius: 2px;
}

.fussnote {
  margin: 12px 0 0;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--tinte-leise);
}

/* --- Ortschips -------------------------------------------------------------
   Genau wie auf dem Aushang: der eigene Ort gefuellt gruen, die anderen blass.
   Es sind bewusst KEINE Links -- jeder Aushang hat seine eigene Mailadresse,
   damit ihr seht, welcher Ort etwas gebracht hat. Ein Klick auf einen anderen
   Ort wuerde diese Zuordnung durcheinanderbringen. */
/* Die Chips stehen in einer Liste innerhalb einer Karte -- sie duerfen aber
   NICHT das gruene Aufzaehlungsquadrat von oben erben. */
.chips li::before { content: none; }
.chips li { padding-left: 0; margin-bottom: 0; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Die Chip-Gruppe steht mittig in der Karte (Wunsch Pierre, 31.07.).
     Am Handy brechen die acht Orte auf drei bis vier Zeilen um, und die
     letzte traegt oft nur einen einzigen Namen. Linksbuendig franst der
     rechte Rand dann sichtbar aus; mittig sitzt jede Zeile ruhig unter der
     vorigen. "justify-content" zentriert bei einem umbrechenden Flex-Kasten
     JEDE Zeile fuer sich -- genau das, was hier gebraucht wird.
     Ueberschrift und Fussnote der Karte bleiben bewusst linksbuendig: sie
     sind eigene Elemente und werden hiervon nicht beruehrt. */
  justify-content: center;
}
.chip {
  padding: 6px 13px;
  background: var(--gruen-blass);
  border: 1px solid var(--gruen-kante);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip.hier {
  background: var(--gruen);
  border-color: var(--gruen);
  color: #fff;
  font-weight: 700;
}

/* --- Hinweiskasten auf die Nachweise --------------------------------------- */
.nachweis-kasten {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-bottom: 26px;
}
.nachweis-kasten h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--gruen);
}
.nachweis-kasten p { margin: 0 0 16px; }
.knopf.schmal {
  display: inline-flex;
  width: auto;
  padding: 12px 22px;
  font-size: 1rem;
}

/* --- Kontaktkasten unten (gruener Rahmen wie im Aushang) -------------------- */
.kontakt {
  border: 2px solid var(--gruen);
  border-radius: var(--radius);
  padding: 22px 18px;
  background: var(--papier);
}
.kontakt-ansprache {
  margin: 0 0 14px;
  color: var(--gruen);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.4;
}
/* Mailadresse und Telefonnummer: gross, fett, mit dem Finger gut zu treffen.
   Beide sind echte Links -- Tippen oeffnet Mailprogramm bzw. waehlt. */
.kontakt-weg {
  display: flex;
  align-items: center;
  min-height: 48px;          /* mit dem Daumen sicher zu treffen */
  padding: 8px 0;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--tinte);
  text-decoration: none;
  overflow-wrap: anywhere;   /* lange Mailadresse bricht am Handy sauber um */
}
.kontakt-weg:hover { color: var(--gruen); }
/* Der Domain-Schriftzug im Kontaktkasten.
   Auf dem gedruckten Aushang ist das ein gruen gefuelltes Etikett -- dort sagt
   es: "hier findest du mehr". Auf der Website waere dieselbe Optik eine
   Taeuschung: Es saehe aus wie ein Knopf, und wer darauf tippt, ist schon da.
   Deshalb hier bewusst NUR Schrift -- keine Fuellung, keine Rundung, kein
   Rand. Es bleibt trotzdem nuetzlich: die Adresse zum Abschreiben oder
   Weitersagen. */
.domain-schriftzug {
  display: inline-block;
  margin-top: 14px;
  color: var(--gruen);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}

/* --- Fusszeile ------------------------------------------------------------- */
.fuss {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--rand);
  font-size: .85rem;
  color: var(--tinte-leise);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
}

/* --- Kleine Unterseiten (Datenschutz, Schranke, Nachweise) ------------------ */
.unterseite {
  max-width: 640px;
}
.unterseite h1 {
  font-size: clamp(1.7rem, 7vw, 2.2rem);
  color: var(--gruen);
}
.unterseite h1 .gruen { display: inline; }
.zurueck {
  display: inline-block;
  margin-bottom: 18px;
  font-weight: 600;
  text-decoration: none;
}
.zurueck:hover { text-decoration: underline; }

/* Das PIN-Eingabefeld auf der Schranken-Seite.
   Es ist ein ganz normales Formular ohne JavaScript: beim Absenden haengt der
   Browser die PIN selbst an die Adresse an (…/nachweise/?k=PIN), und nginx
   entscheidet. Das ist wichtig, weil eine Pruefung im Browser jeder umgehen
   koennte -- die Dateien laegen trotzdem offen. */
.pin-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 14px;
}
.pin-form input {
  flex: 1 1 190px;
  min-width: 0;
  padding: 14px 16px;
  font: inherit;
  font-weight: 700;
  letter-spacing: .04em;
  background: #fff;
  color: var(--tinte);
  border: 2px solid var(--gruen-kante);
  border-radius: var(--radius-klein);
}
.pin-form input:focus { border-color: var(--gruen); }
.pin-form button {
  flex: 0 0 auto;
  padding: 14px 28px;
  background: var(--gruen);
  color: #fff;
  font: inherit;
  font-weight: 800;
  border: none;
  border-radius: var(--radius-klein);
  box-shadow: 0 2px 0 var(--gruen-dunkel);
}
.pin-form button:active { transform: translateY(2px); box-shadow: none; }

/* Beschriftung nur fuer Vorlese-Programme (Screenreader): sichtbar ist im
   Eingabefeld schon der Platzhaltertext, ein Label braucht es trotzdem. */
.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Die spaeteren Nachweis-Screenshots im geschuetzten Bereich. */
.nachweis-bild { margin: 0 0 22px; }
.nachweis-bild img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: #fff;
}
/* Die Beschriftung unter dem Nachweis. Sie kommt aus dem Dateinamen, damit
   Pierre sie ohne Programmieren bestimmen kann (siehe LIESMICH.txt). */
.nachweis-bild figcaption {
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--tinte-leise);
}

/* Ein ruhiger Hinweiskasten fuer Platzhalter-Text. */
.hinweis {
  padding: 18px;
  background: var(--gelb);
  border: 1px solid var(--gelb-rand);
  border-radius: var(--radius);
}
.hinweis p { margin: 0; }

/* --- Sanftes Einblenden beim Laden ----------------------------------------- */
.kopf, .notiz, .karten { animation: auftauchen .5s ease both; }
.notiz  { animation-delay: .06s; }
.karten { animation-delay: .12s; }
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Der gelbe Zettel behaelt beim Einblenden seine Schraeglage. */
.notiz { animation-name: auftauchen-schief; }
@keyframes auftauchen-schief {
  from { opacity: 0; transform: translateY(8px) rotate(-.5deg); }
  to   { opacity: 1; transform: rotate(-.5deg); }
}

/* Wer im Betriebssystem "weniger Bewegung" eingestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ===========================================================================
   Ab hier: groessere Bildschirme (Tablet und Computer)
   =========================================================================== */

/* Etwas groessere Handys (ab 400 Bildpunkten): die Ueberschrift darf wachsen. */
@media (min-width: 400px) {
  .kopf { grid-template-columns: minmax(130px, 40%) 1fr; gap: 14px 20px; }
  .augenbraue { font-size: 1.02rem; }
}

/* Tablet aufwaerts: die drei Karten duerfen nebeneinander. */
@media (min-width: 620px) {
  html { font-size: 18px; }
  .blatt { padding: 34px 28px 48px; }

  /* Ab hier ist Platz -- die Zeichnung bekommt wieder mehr Raum. */
  .kopf { grid-template-columns: 240px 1fr; gap: 20px 28px; }
  h1 { font-size: 2.4rem; }
  .vorstellung { font-size: 1.06rem; }

  /* Die drei Knoepfe passen nebeneinander in eine Zeile. */
  .schnellkontakt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
  }
  .knopf { width: auto; }
  .schnell-zwei { display: flex; gap: 12px; }
  .knopf-rand { padding: 12px 22px; }
  .knopf-hinweis {
    flex-basis: 100%;
    margin: 0;
    text-align: left;
  }

  .karten {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* Die breite Karte "Was ihr von uns habt" nimmt die ganze Zeile,
     genau wie im gedruckten Aushang. */
  .karte.breit { grid-column: 1 / -1; }
  .karte.breit ul {
    columns: 2;
    column-gap: 30px;
  }
  .karte.breit li { break-inside: avoid; }

  .karte { padding: 22px 22px; }
  .notiz { padding: 24px 26px 26px; }
  .notiz p { font-size: 1.55rem; }

  .kontakt { padding: 26px 26px; }
  .kontakt-weg { font-size: 1.3rem; }

  .knopf { padding: 15px 28px; }
}

/* Computer: Zeichnung links, Ueberschrift und Text rechts daneben -- genau der
   Aufbau des gedruckten Aushangs. Das Bild ueberspannt dabei beide Zeilen. */
@media (min-width: 900px) {
  .kopf {
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 18px 40px;
    margin-bottom: 30px;
  }
  /* Bild links ueber alle drei Zeilen, Text rechts daneben. */
  .kopf { grid-template-rows: auto auto auto; }
  .kopf > picture   { grid-column: 1; grid-row: 1 / 4; align-self: center; }
  .kopf > .augenbraue { grid-column: 2; grid-row: 1; align-self: end; }
  .kopf > h1        { grid-column: 2; grid-row: 2; }
  .vorstellung      { grid-column: 2; grid-row: 3; align-self: start; }

  h1 { font-size: 3.1rem; }
  .augenbraue { font-size: 1.16rem; }
  .vorstellung { font-size: 1.1rem; max-width: 46em; }

  .notiz p { font-size: 1.62rem; }

  /* Kontaktkasten: Ansprache links, Domain-Schriftzug rechts -- die Anordnung
     des Aushangs, dort allerdings als gruen gefuelltes Etikett. */
  .kontakt {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
  }
  .kontakt .domain-schriftzug { margin-top: 0; justify-self: end; }
}