/* =====================================================================
   basis.css – gemeinsame Grundlage für Backend und öffentliche Ansichten
   ---------------------------------------------------------------------
   Mobile first: Regeln ohne @media gelten für kleine Bildschirme,
   @media (min-width: …) erweitert für größere.

   Inhalt:
     1. Gestaltungswerte (CSS-Variablen)
     2. Grundgerüst und Schrift
     3. Fokus und Hilfsklassen
     4. Buttons
     5. Formularfelder
     6. Tags (Status und Kategorien) und Location-Markierung
     7. Hinweise sowie Lade-, Leer- und Fehlerzustände
     8. Weniger Bewegung
   ===================================================================== */


/* =====================================================================
   1. GESTALTUNGSWERTE
   Alle Farbpaare für Text erfüllen mindestens 4,5 : 1 Kontrast (WCAG AA),
   Rahmen von Bedienelementen mindestens 3 : 1.
   Die Farben der Locations kommen aus der Datenbank und werden per
   JavaScript als --loc an das jeweilige Element gesetzt.
   ===================================================================== */
:root {
  color-scheme: light;

  --farbe-hintergrund: #f6f3ef;
  --farbe-flaeche: #ffffff;
  --farbe-flaeche-leise: #faf8f6;
  --farbe-flaeche-gedaempft: #f1ece6;
  --farbe-text: #1f1c1a;
  --farbe-text-leise: #5f5853;
  --farbe-rahmen: #ddd5cd;
  --farbe-rahmen-feld: #857b74;
  --farbe-akzent: #a61e3c;
  --farbe-akzent-dunkel: #85162f;
  --farbe-akzent-hell: #fbeef1;
  --farbe-fokus: #1a5fb4;
  --farbe-fehler: #b3261e;
  --farbe-fehler-hell: #fde8e7;
  --farbe-erfolg: #1d6b35;
  --farbe-erfolg-hell: #e3f3e8;

  /* Status: 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;

  /* Ersatzfarbe, falls eine Location (noch) keine Farbe mitbringt */
  --loc: #857b74;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;

  --radius: 10px;
  --radius-klein: 6px;
  --schatten: 0 1px 2px rgba(31, 28, 26, 0.06), 0 4px 16px rgba(31, 28, 26, 0.05);
  --schatten-hoch: 0 8px 32px rgba(31, 28, 26, 0.18);

  /* Mindestgröße für Tipp-Ziele auf dem Handy */
  --tippziel: 44px;
}


/* =====================================================================
   2. GRUNDGERÜST UND SCHRIFT
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.5;
  /* Sehr lange Wörter oder Adressen brechen um, statt die Seite zu verbreitern */
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0 0 var(--abstand-3);
  line-height: 1.25;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1.0625rem;
}

p {
  margin: 0 0 var(--abstand-3);
}

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

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

code,
pre {
  font-family: var(--schrift-code);
  font-size: 0.875em;
}

/* Breiter Code scrollt in seinem Kasten, nicht die ganze Seite */
pre {
  max-width: 100%;
  overflow-x: auto;
}

pre code {
  font-size: 1em;
}

svg {
  flex-shrink: 0;
}

/* Das Attribut hidden versteckt immer – auch gegen display-Regeln */
[hidden] {
  display: none !important;
}

@media (min-width: 600px) {
  h1 {
    font-size: 1.75rem;
  }
}


/* =====================================================================
   3. FOKUS UND HILFSKLASSEN
   ===================================================================== */

/* Deutlich sichtbarer Fokus für die Bedienung mit der Tastatur */
:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}

/* Reine Sprungziele (z. B. <main>, auf das der Sprunglink zeigt) sind
   nicht bedienbar – dort wäre ein Rahmen um den ganzen Inhalt nur störend.
   Bedienbare Elemente behalten ihren Fokusrahmen immer. */
.sprungziel:focus {
  outline: none;
}

/* Nur für Screenreader sichtbar */
.nur-screenreader {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprunglink: erscheint erst, wenn er per Tab-Taste fokussiert wird */
.sprunglink {
  position: absolute;
  top: var(--abstand-2);
  left: var(--abstand-2);
  z-index: 100;
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius-klein);
  background: var(--farbe-text);
  color: #fff;
  transform: translateY(-200%);
}

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


/* =====================================================================
   4. BUTTONS
   .knopf funktioniert für <button> und <a>.
   ===================================================================== */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: var(--tippziel);
  padding: 10px 18px;
  border: 2px solid var(--farbe-akzent);
  border-radius: var(--radius-klein);
  background: var(--farbe-akzent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

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

/* Zweitrangig: weiß mit rotem Rahmen */
.knopf-zweit {
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent);
}

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

/* Unauffällig: ohne Rahmen, z. B. für „Abbrechen“ oder Symbol-Buttons */
.knopf-leise {
  border-color: transparent;
  background: transparent;
  color: var(--farbe-text);
}

.knopf-leise:hover {
  border-color: transparent;
  background: var(--farbe-flaeche-gedaempft);
  color: var(--farbe-text);
}

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

/* Quadratischer Button nur mit Symbol (Beschriftung für Screenreader) */
.knopf-symbol {
  min-width: var(--tippziel);
  padding: 0;
}

.knopf:disabled,
.knopf[aria-disabled="true"] {
  border-color: var(--farbe-rahmen);
  background: var(--farbe-flaeche-gedaempft);
  color: var(--farbe-text-leise);
  cursor: not-allowed;
}

.knopf svg {
  width: 20px;
  height: 20px;
}


/* =====================================================================
   5. FORMULARFELDER
   Fehler werden per aria-invalid="true" markiert und zusätzlich als Text
   unter dem Feld genannt (.feld-fehler) – nie nur über die Farbe.
   ===================================================================== */
.feld {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  min-width: 0;
}

.feld label,
.feld legend {
  font-weight: 600;
}

/* Kennzeichnung für Pflichtfelder: Sternchen plus Text für Screenreader */
.pflicht {
  color: var(--farbe-akzent);
}

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

.feld-fehler {
  margin: 0;
  color: var(--farbe-fehler);
  font-size: 0.875rem;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--tippziel);
  padding: 10px 12px;
  border: 1px solid var(--farbe-rahmen-feld);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  color: inherit;
  font: inherit;
  font-size: 1rem; /* 16 px verhindert das Hineinzoomen auf iOS */
}

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

input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  accent-color: var(--farbe-akzent);
}

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,
select:disabled,
textarea:disabled {
  background: var(--farbe-flaeche-leise);
  color: var(--farbe-text-leise);
}

[aria-invalid="true"] {
  border-color: var(--farbe-fehler);
  box-shadow: 0 0 0 1px var(--farbe-fehler);
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}


/* =====================================================================
   6. TAGS UND LOCATION-MARKIERUNG
   Status-Tags tragen immer Text – die Farbe ist nur Zusatz.
   ===================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-1);
  max-width: 100%;
  padding: 2px 8px;
  /* Durchsichtiger Rahmen: alle Tags gleich hoch, und im Kontrastmodus
     des Betriebssystems bekommt jeder Tag einen sichtbaren Rand */
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  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);
}

/* Kategorien: neutral mit Rahmen, damit sie sich vom Status abheben.
   Namen können bis zu 40 Zeichen lang sein und dürfen daher umbrechen. */
.tag-kategorie {
  border-color: var(--farbe-rahmen-feld);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-weight: 600;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Location-Markierung: farbiger Punkt mit dunklem Rand (die Farbe setzt
   JavaScript als --loc) plus Kurzzeichen oder Name als Text */
.loc-punkt {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(31, 28, 26, 0.6);
  border-radius: 50%;
  background: var(--loc);
  vertical-align: middle;
}

.loc-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* =====================================================================
   7. HINWEISE SOWIE LADE-, LEER- UND FEHLERZUSTÄNDE
   ===================================================================== */
.hinweis {
  margin: 0 0 var(--abstand-3);
  padding: var(--abstand-3) var(--abstand-4);
  border-left: 4px solid var(--farbe-text-leise);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche-gedaempft);
}

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

.hinweis-fehler {
  border-left-color: var(--farbe-fehler);
  background: var(--farbe-fehler-hell);
}

.hinweis-erfolg {
  border-left-color: var(--farbe-erfolg);
  background: var(--farbe-erfolg-hell);
}

/* Einheitliche Zustände für Listen und Kalender */
.zustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-3);
  padding: var(--abstand-6) var(--abstand-4);
  color: var(--farbe-text-leise);
  text-align: center;
}

.zustand p {
  margin: 0;
}

.zustand-fehler {
  color: var(--farbe-fehler);
}

/* Ladeanzeige: drehender Ring (bei „Bewegung reduzieren“ ruhig) */
.lade-kreis {
  width: 28px;
  height: 28px;
  border: 3px solid var(--farbe-rahmen);
  border-top-color: var(--farbe-akzent);
  border-radius: 50%;
  animation: drehen 0.9s linear infinite;
}

@keyframes drehen {
  to {
    transform: rotate(360deg);
  }
}


/* Kontrastmodus des Betriebssystems (z. B. Windows): Dort ersetzt das
   System alle Farben. Die Location-Farbe bleibt trotzdem sichtbar, und der
   Ladekreis bekommt Systemfarben, damit die Drehung erkennbar bleibt. */
@media (forced-colors: active) {
  .loc-punkt {
    forced-color-adjust: none;
  }

  .lade-kreis {
    border-color: GrayText;
    border-top-color: Highlight;
  }
}


/* =====================================================================
   8. WENIGER BEWEGUNG
   ===================================================================== */
@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;
  }
}