/* =====================================================================
   style.css – Aussehen aller Seiten (Dashboard, Login, öffentliche Liste)
   ---------------------------------------------------------------------
   „Mobile first“ heißt: Die Regeln OHNE @media gelten zuerst für kleine
   Bildschirme (Smartphones). Die @media-Blöcke mit „min-width“ greifen
   erst ab einer bestimmten Breite und erweitern das Layout für Tablets
   und Computer. Sie stehen jeweils direkt beim Bereich, den sie ändern.

   Inhalt:
     1. Farben und Grundwerte (CSS-Variablen)
     2. Grundgerüst
     3. Hilfsklassen
     4. Kopfzeile, Hinweise, Seitenlayout, Fußzeile
     5. Formular
     6. Buttons
     7. Status-Etiketten (Tags)
     8. Veranstaltungstabelle (Dashboard)
     9. Einbindung und Rückmeldungen (Dashboard)
    10. Login-Seite
    11. Öffentliche Liste (embed.html)
    12. Weniger Bewegung
   ===================================================================== */


/* =====================================================================
   1. FARBEN UND GRUNDWERTE
   CSS-Variablen werden hier einmal festgelegt und überall mit
   var(--name) benutzt. Soll z. B. die Akzentfarbe später zum echten
   LiebenWir-Design passen, reicht eine Änderung an dieser Stelle.
   Alle Farbpaare sind so gewählt, dass Text gut lesbar ist
   (Kontrast nach WCAG mindestens 4,5 : 1).
   ===================================================================== */
:root {
  /* Die Seiten sind nur für ein helles Farbschema gestaltet. So zeigt
     der Browser z. B. Kalender und Auswahllisten auch im Dunkelmodus
     des Geräts hell und passend an. */
  color-scheme: light;

  --farbe-hintergrund: #f6f3ef;   /* warmes Hellgrau für die Seite */
  --farbe-flaeche: #ffffff;       /* Karten, Tabelle, Eingabefelder */
  --farbe-flaeche-leise: #faf8f6; /* z. B. Tabellenzeile beim Überfahren */
  --farbe-text: #1f1c1a;          /* fast Schwarz – wirkt weicher als reines Schwarz */
  --farbe-text-leise: #5f5853;    /* Nebeninfos, Hilfetexte */
  --farbe-rahmen: #ddd5cd;        /* dezente Linien zwischen Bereichen */
  --farbe-rahmen-feld: #857b74;   /* Rahmen von Eingabefeldern – kräftiger, damit man sie gut erkennt */
  --farbe-akzent: #a61e3c;        /* LiebenWir-Rot (Platzhalter) */
  --farbe-akzent-dunkel: #85162f; /* Akzent beim Überfahren mit der Maus */
  --farbe-akzent-hell: #fbeef1;   /* sehr heller Akzent für Hintergründe */
  --farbe-fokus: #1a5fb4;         /* Rahmen um das Element, das die Tastatur gerade bedient */
  --farbe-fehler: #b3261e;        /* Rahmen fehlerhafter Felder */

  /* Status-Farben: jeweils Hintergrund und Schrift */
  --status-geplant-bg: #e3f3e8;
  --status-geplant-text: #1d6b35;
  --status-verschoben-bg: #fff1d0;
  --status-verschoben-text: #7a4a00;
  --status-abgesagt-bg: #fde4e8;
  --status-abgesagt-text: #9f1239;
  --status-ausverkauft-bg: #ede7f8;
  --status-ausverkauft-text: #4c2889;

  /* Systemschrift: lädt sofort, weil sie schon auf jedem Gerät ist */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(31, 28, 26, 0.06), 0 4px 16px rgba(31, 28, 26, 0.05);
}


/* =====================================================================
   2. GRUNDGERÜST
   ===================================================================== */

/* box-sizing: border-box – Breitenangaben schließen Innenabstand und
   Rahmen mit ein. Das macht das Rechnen viel einfacher. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* iOS soll die Schrift im Querformat nicht eigenmächtig vergrößern */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1rem;      /* 1rem = Grundschriftgröße des Browsers, meist 16 px */
  line-height: 1.5;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
}

h1,
h2 {
  margin: 0 0 0.75rem;
  line-height: 1.25;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 0.75rem;
}

a {
  color: var(--farbe-akzent);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--farbe-akzent-dunkel);
}

/* Gut sichtbarer Rahmen für alle, die mit der Tastatur (Tab-Taste)
   durch die Seite gehen. :focus-visible zeigt ihn nicht bei Mausklicks. */
:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}

/* Das HTML-Attribut "hidden" soll IMMER verstecken – auch wenn eine
   Klasse weiter unten z. B. display: flex setzt. */
[hidden] {
  display: none !important;
}

code {
  font-family: var(--schrift-code);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: #f1ece6;
  overflow-wrap: anywhere; /* lange Adressen dürfen umbrechen */
}

pre {
  margin: 0 0 0.75rem;
  padding: 12px;
  border-radius: 8px;
  background: #f1ece6;
  overflow-x: auto; /* breiter Code scrollt innerhalb des Kastens, nicht die ganze Seite */
}

pre code {
  padding: 0;
  background: none;
  overflow-wrap: normal;
}


/* =====================================================================
   3. HILFSKLASSEN
   ===================================================================== */

/* Versteckt Text optisch, Screenreader lesen ihn aber trotzdem vor.
   (display: none würde ihn auch für Screenreader verstecken.) */
.nur-screenreader {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprunglink: liegt außerhalb des Bildschirms und erscheint erst,
   wenn er per Tab-Taste den Fokus bekommt. */
.sprunglink {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--farbe-text);
  color: #fff;
  transform: translateY(-200%);
}

.sprunglink:focus {
  transform: none;
  color: #fff;
}


/* =====================================================================
   4. KOPFZEILE, HINWEISE, SEITENLAYOUT, FUSSZEILE
   ===================================================================== */

/* Flexbox legt Elemente nebeneinander. flex-wrap: wrap erlaubt den
   Umbruch in eine neue Zeile, wenn der Platz nicht reicht (Handy). */
.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 8px 16px;
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-rahmen);
}

/* Schriftzug „LiebenWir Veranstaltungen“ */
.marke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  font-weight: 700;
}

.marke-name {
  color: var(--farbe-akzent);
  font-size: 1.125rem;
}

.marke-zusatz {
  color: var(--farbe-text-leise);
  font-weight: 400;
}

/* Gelbes „DEMO“-Schild */
.demo-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px; /* sehr großer Radius = Pillenform */
  background: #ffe08a;
  color: #4a3500;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}

.kopf-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

/* Innenabstand macht die Links auf dem Handy leichter antippbar */
.kopf-navigation a {
  display: inline-block;
  padding: 10px 0;
}

/* Farbige Hinweiskästen mit Balken links */
.hinweis {
  margin: 0 0 12px;
  padding: 12px 16px;
  border-left: 4px solid var(--status-verschoben-text);
  border-radius: 8px;
  background: var(--status-verschoben-bg);
}

.hinweis p:last-child,
.hinweis ul:last-child {
  margin-bottom: 0;
}

.hinweis-warnung {
  border-left-color: var(--status-abgesagt-text);
  background: var(--status-abgesagt-bg);
}

.noscript-hinweis {
  margin: 16px;
}

/* Hauptbereich: alle Abschnitte untereinander mit Abstand.
   max-width begrenzt die Breite auf großen Bildschirmen,
   margin: 0 auto zentriert den Bereich. */
.inhalt {
  display: grid;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* Ohne min-width: 0 könnten breite Inhalte (Tabelle, Code) das
   Raster über den Bildschirmrand hinausdrücken. */
.inhalt > * {
  min-width: 0;
}

.seiten-einleitung h1 {
  margin-bottom: 12px;
}

/* Weiße Kästen für Formular, Liste und Einbindung */
.karte {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten);
}

/* Die Liste ist Sprungziel (tabindex="-1") – dort ist kein Fokusrahmen nötig */
.karte:focus {
  outline: none;
}

.seitenfuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px 96px; /* unten Platz, damit die Rückmeldung nichts verdeckt */
  color: var(--farbe-text-leise);
  font-size: 0.875rem;
}

.seitenfuss p {
  margin: 0;
}

/* Ab 600 px Breite (große Handys quer, Tablets): mehr Luft */
@media (min-width: 600px) {
  h1 {
    font-size: 1.75rem;
  }

  .seitenkopf {
    padding: 12px 24px;
  }

  .inhalt {
    gap: 24px;
    padding: 24px;
  }

  .karte {
    padding: 24px;
  }

  .seitenfuss {
    padding-left: 24px;
    padding-right: 24px;
  }
}


/* =====================================================================
   5. FORMULAR
   ===================================================================== */

.bearbeiten-info {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent-dunkel);
  font-weight: 600;
}

/* Handy: alle Felder untereinander in einer Spalte */
.formular-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Ein Feld = Beschriftung + Eingabe + optionaler Hilfetext */
.feld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.feld label {
  font-weight: 600;
}

.pflicht {
  color: var(--farbe-akzent);
}

.feld-hilfe {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: 0.875rem;
}

.karte > .feld-hilfe,
.liste-kopf .feld-hilfe {
  margin-bottom: 12px;
}

/* Gemeinsames Aussehen aller Eingabefelder.
   font: inherit übernimmt die Seitenschrift (Browser nehmen sonst eine
   eigene). 16 px Schrift verhindert, dass iOS beim Antippen hineinzoomt.
   44 px Mindesthöhe = bequem mit dem Finger zu treffen. */
input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--farbe-rahmen-feld);
  border-radius: 8px;
  background: var(--farbe-flaeche);
  color: inherit;
  font: inherit;
  font-size: 1rem;
}

textarea {
  min-height: 120px;
  resize: vertical; /* nur in der Höhe ziehbar, nicht in der Breite */
}

/* iOS Safari zeigt leere Datums- und Zeitfelder sonst zu flach
   und den Wert zentriert an */
input[type="date"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
}

input::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: left;
}

input::placeholder,
textarea::placeholder {
  color: #7a716b;
}

input:disabled {
  background: var(--farbe-flaeche-leise);
}

/* Rote Rahmen erst NACH dem ersten Speicherversuch – sonst wäre ein
   leeres Formular schon beim Öffnen voller Fehler. Die Klasse
   „wurde-geprueft“ setzt app.js beim Klick auf „Speichern“. */
.wurde-geprueft input:invalid,
.wurde-geprueft select:invalid,
.wurde-geprueft textarea:invalid {
  border-color: var(--farbe-fehler);
  box-shadow: 0 0 0 1px var(--farbe-fehler);
}

/* Gelber Kasten für „Ursprüngliches Datum“ bei verschobenen Events */
.block-verschoben {
  padding: 12px;
  border-radius: 8px;
  background: var(--status-verschoben-bg);
}

.block-verschoben input {
  max-width: 16rem;
}

.formular-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* Ab 640 px: zwei Spalten. „feld-breit“ und „feld-doppelt“ gehen über
   die ganze Breite (grid-column: 1 / -1 = von der ersten bis zur
   letzten Spalte). */
@media (min-width: 640px) {
  .formular-raster {
    grid-template-columns: repeat(2, 1fr);
  }

  .feld-breit,
  .feld-doppelt {
    grid-column: 1 / -1;
  }
}

/* Ab 1024 px: vier Spalten. „feld-doppelt“ belegt jetzt zwei davon. */
@media (min-width: 1024px) {
  .formular-raster {
    grid-template-columns: repeat(4, 1fr);
  }

  .feld-doppelt {
    grid-column: span 2;
  }
}


/* =====================================================================
   6. BUTTONS
   Die Klasse .button funktioniert für <button> und für Links <a>.
   ===================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--farbe-akzent);
  border-radius: 8px;
  background: var(--farbe-akzent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer; /* Hand-Zeiger beim Überfahren */
}

.button:hover {
  border-color: var(--farbe-akzent-dunkel);
  background: var(--farbe-akzent-dunkel);
  color: #fff;
}

/* Zweitrangiger Button: nur Umriss, kein gefüllter Hintergrund */
.button-zweit {
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent);
}

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

.button-klein {
  min-height: 40px;
  padding: 6px 14px;
  font-size: 0.9375rem;
}

.button-breit {
  width: 100%;
}


/* =====================================================================
   7. STATUS-ETIKETTEN (TAGS)
   Kleine farbige Schilder: Geplant, Verschoben, Abgesagt, Ausverkauft.
   Die Klasse (z. B. .tag-abgesagt) setzt app.js passend zum Status.
   ===================================================================== */

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag-geplant {
  background: var(--status-geplant-bg);
  color: var(--status-geplant-text);
}

.tag-verschoben {
  background: var(--status-verschoben-bg);
  color: var(--status-verschoben-text);
}

.tag-abgesagt {
  background: var(--status-abgesagt-bg);
  color: var(--status-abgesagt-text);
}

.tag-ausverkauft {
  background: var(--status-ausverkauft-bg);
  color: var(--status-ausverkauft-text);
}

/* „verschoben vom …“ */
.verschoben-hinweis {
  margin: 4px 0 0;
  color: var(--status-verschoben-text);
  font-size: 0.875rem;
  font-weight: 600;
}


/* =====================================================================
   8. VERANSTALTUNGSTABELLE (DASHBOARD)
   Auf Handy und Tablet ist eine Tabelle mit 8 Spalten viel zu breit.
   Deshalb wird hier jede Zeile zu einer eigenen Karte. Ab 1100 px
   Breite (weiter unten) wird daraus wieder eine normale Tabelle.
   ===================================================================== */

/* Sicherheitsnetz um die Tabelle: Wird sie doch einmal zu breit (z. B.
   durch ein sehr langes Wort), scrollt nur dieser Rahmen seitlich –
   nicht die ganze Seite. */
.tabelle-rahmen {
  overflow-x: auto;
}

.liste-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0 24px;
}

.liste-kopf h2 {
  margin-bottom: 2px;
}

.feld-filter {
  flex: 1 1 200px;
  max-width: 280px;
  margin-bottom: 16px;
}

/* --- Handy: Tabelle als Karten --- */
.event-tabelle {
  display: block;
  width: 100%;
  border-collapse: collapse;
}

/* Den Tabellenkopf nur optisch verstecken (Screenreader lesen ihn weiter) */
.event-tabelle thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.event-tabelle tbody {
  display: block;
}

/* Jede Zeile ist eine Karte mit einem Raster aus zwei Spalten */
.event-tabelle tr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.event-tabelle td {
  display: block;
  min-width: 0;
  padding: 0;
  overflow-wrap: anywhere; /* sehr lange Wörter oder Links umbrechen */
}

/* Die kleine Überschrift über jedem Wert kommt aus dem Attribut
   data-label, das app.js an jede Zelle hängt. content: attr(…) liest es. */
.event-tabelle td[data-label]::before {
  content: attr(data-label);
  display: block;
  color: var(--farbe-text-leise);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Titel ganz oben (order: -1) und über beide Spalten */
.event-tabelle .spalte-titel {
  grid-column: 1 / -1;
  order: -1;
}

/* Bearbeiten-Button unten über die ganze Breite */
.event-tabelle .spalte-aktion {
  grid-column: 1 / -1;
}

.spalte-aktion .button {
  width: 100%;
}

/* Zeile „keine Veranstaltungen“ */
.event-tabelle .leer-zeile {
  display: block;
  color: var(--farbe-text-leise);
  text-align: center;
}

.titel-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.event-titel {
  font-size: 1.0625rem;
}

/* Beschreibung in der Tabelle: höchstens 2 Zeilen, dann „…“ */
.beschreibung-kurz {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 4px 0 0;
  color: var(--farbe-text-leise);
  font-size: 0.875rem;
}

/* Abgesagte Veranstaltungen: Titel durchgestrichen (<s> im HTML),
   dazu etwas blassere Schrift */
.ist-abgesagt .event-titel {
  color: var(--farbe-text-leise);
}

/* Zeile, die gerade im Formular bearbeitet wird */
.event-tabelle tr.wird-bearbeitet {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent-hell);
}

/* Kurzes Aufleuchten nach dem Speichern.
   @keyframes beschreibt eine Animation: Sie startet gelb („from“) und
   läuft zur normalen Hintergrundfarbe zurück. */
@keyframes aufleuchten {
  from {
    background-color: var(--status-verschoben-bg);
  }
}

.event-tabelle tr.gerade-gespeichert,
.event-tabelle tr.gerade-gespeichert td {
  animation: aufleuchten 2.5s ease-out;
}

/* --- Ab 1100 px: wieder eine echte Tabelle --- */
@media (min-width: 1100px) {
  .event-tabelle {
    display: table;
  }

  /* Tabellenkopf wieder sichtbar machen */
  .event-tabelle thead {
    display: table-header-group;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }

  .event-tabelle tbody {
    display: table-row-group;
  }

  .event-tabelle tr {
    display: table-row;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  .event-tabelle th,
  .event-tabelle td {
    display: table-cell;
    padding: 12px 8px;
    border-bottom: 1px solid var(--farbe-rahmen);
    text-align: left;
    vertical-align: top;
  }

  /* Wichtig: "anywhere" (siehe oben) würde in einer echten Tabelle die
     Spalten so schmal rechnen, dass sogar „Bearbeiten“ Buchstabe für
     Buchstabe umbricht. "break-word" bricht nur im Notfall um. */
  .event-tabelle td {
    overflow-wrap: break-word;
  }

  .event-tabelle th {
    color: var(--farbe-text-leise);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Die kleinen Überschriften braucht es jetzt nicht mehr */
  .event-tabelle td[data-label]::before {
    content: none;
  }

  .event-tabelle tbody tr:hover {
    background: var(--farbe-flaeche-leise);
  }

  /* Diese kurzen Werte sollen nie umbrechen (white-space: nowrap) */
  .event-tabelle .spalte-datum,
  .event-tabelle .spalte-uhrzeit,
  .event-tabelle .spalte-location,
  .event-tabelle .spalte-tickets,
  .spalte-aktion .button {
    white-space: nowrap;
  }

  /* Die Titelspalte bekommt den meisten Platz, weil dort am meisten steht */
  .event-tabelle .spalte-titel {
    width: 40%;
    min-width: 14rem;
  }

  .event-tabelle .spalte-kuerzel {
    font-weight: 600;
  }

  .event-tabelle .spalte-aktion {
    text-align: right;
  }

  .spalte-aktion .button {
    width: auto;
  }

  .event-tabelle .leer-zeile {
    display: table-row;
  }

  .event-tabelle .leer-zeile td {
    padding: 32px 8px;
    text-align: center;
  }
}


/* =====================================================================
   9. EINBINDUNG UND RÜCKMELDUNGEN (DASHBOARD)
   ===================================================================== */

.embed-links {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.embed-links li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.embed-links a {
  min-width: 6rem;
  font-weight: 600;
}

.code-beispiel summary {
  padding: 8px 0;
  color: var(--farbe-akzent);
  font-weight: 600;
  cursor: pointer;
}

.code-beispiel[open] summary {
  margin-bottom: 8px;
}

/* Ab 700 px: Vorschau-Links in zwei Spalten */
@media (min-width: 700px) {
  .embed-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Rückmeldung („wurde gespeichert“) unten am Bildschirmrand.
   position: fixed = bleibt beim Scrollen an derselben Stelle.
   Der Bereich ist immer da, aber leer unsichtbar. pointer-events: none
   sorgt dafür, dass er keine Klicks auf die Seite darunter abfängt. */
.meldung-bereich {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.meldung {
  max-width: 36rem;
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--farbe-text);
  color: #fff;
  box-shadow: 0 8px 24px rgba(31, 28, 26, 0.25);
  pointer-events: auto;
}


/* =====================================================================
   10. LOGIN-SEITE
   ===================================================================== */

/* Karte mittig auf der Seite. 100dvh = volle Bildschirmhöhe, auch wenn
   auf dem Handy die Adressleiste ein- und ausfährt (100vh als Ersatz
   für ältere Browser, die dvh nicht kennen). */
.seite-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px;
}

.login-karte {
  width: 100%;
  max-width: 420px;
}

.login-karte .marke {
  margin-bottom: 16px;
}

.login-formular {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}


/* =====================================================================
   11. ÖFFENTLICHE LISTE (embed.html)
   Durchsichtiger Hintergrund: Im iframe scheint die Farbe der
   Gastro-Website durch. Deshalb steht JEDER Text auf einer eigenen
   weißen Fläche (Kopf, Karten, Hinweise) – so bleibt er auch auf einer
   dunklen Website lesbar.
   ===================================================================== */

.seite-embed {
  background: transparent;
}

.embed {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px;
}

.embed-kopf {
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.embed-location {
  margin: 0;
  color: var(--farbe-akzent);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.embed-titel {
  margin: 0;
  font-size: 1.375rem;
}

/* list-style: none blendet die Nummern der <ol> aus */
.embed-liste {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ein Eintrag: links das Kalenderblatt (56 px), rechts der Inhalt */
.embed-event {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.embed-datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  padding: 6px 4px;
  border-radius: 8px;
  background: var(--farbe-akzent);
  color: #fff;
  line-height: 1.1;
  text-align: center;
}

.embed-datum-tag {
  font-size: 1.375rem;
  font-weight: 700;
}

.embed-datum-monat {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Abgesagt: Kalenderblatt grau statt rot */
.embed-event.ist-abgesagt .embed-datum {
  background: var(--farbe-text-leise);
}

.embed-inhalt {
  min-width: 0;
}

.embed-meta {
  margin: 0 0 2px;
  color: var(--farbe-text-leise);
  font-size: 0.875rem;
}

.embed-event-titel {
  margin: 0 0 6px;
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.ist-abgesagt .embed-event-titel {
  color: var(--farbe-text-leise);
}

.embed-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 8px;
}

.embed-tags .verschoben-hinweis {
  margin: 0;
}

.embed-beschreibung {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.embed-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.embed-eintritt {
  margin: 0;
}

.embed-leer {
  padding: 24px 16px;
  border: 1px dashed var(--farbe-rahmen-feld);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  color: var(--farbe-text-leise);
  text-align: center;
}

.embed-fehler-links {
  margin: 0;
  padding-left: 20px;
}

/* Ab 600 px: größeres Kalenderblatt */
@media (min-width: 600px) {
  .embed-event {
    grid-template-columns: 72px 1fr;
    gap: 16px;
    padding: 20px;
  }

  .embed-datum {
    padding: 10px 4px;
  }

  .embed-datum-tag {
    font-size: 1.75rem;
  }
}


/* =====================================================================
   12. WENIGER BEWEGUNG
   Manche Menschen stellen im Betriebssystem „Bewegung reduzieren“ ein,
   weil Animationen ihnen Schwindel oder Übelkeit bereiten.
   Dann schalten wir Animationen hier ab.
   ===================================================================== */
@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;
  }
}