* {
  margin: 0;
  padding: 0;
}

html,
body {
  /* position: relative; */
  width: 100%;
  height: 100%;
  
    overflow-x: hidden;
    overflow-y: auto; /* Optional, wenn Sie immer vertikales Scrollen erlauben wollen */
  }

/* public/global.css */


/* automatic/manual light mode */
:root,
:root.light_mode {
  --background-color: #ffffff;
  --skeleton-color: #e0e0e0;
  --skeleton-shine: #f5f5f5;
  --pos--flugplan: 68px;
  /* flugzeile */
  /* zeilen trenner */
  --zeil-bor-bottom: rgb(170, 111, 0);
  /* even = gerade zeile */
  --background_even: rgba(220, 220, 220);
  /* odd = ungerade zeile */
  --background_odd: rgba(244, 244, 244);
  /* obere zeile */
  --clr-foreground: rgb(84, 84, 84); /* flugnummer */
  /* lfdNr */
  --lfdNR: rgb(170, 111, 0);
  /* airport */
  --airport: #21262d;
  /* untere zeile  */
  /* time plan */
  --time-plan: #21262d;
  /* time erwa */
  --ontime: rgb(84, 84, 84); /* planmaesig */
  --delayed: red; /* verspaetet */
  --frueher: rgb(87, 173, 1); /* früher */
  /* modul */
  --modul: #21262d;
  /* flstatus */
  --status-geplant: rgb(84, 84, 84); /* geplant */
  --status-annulliert: rgb(171, 14, 211); /* annulliert */
  --status-imAnfl: rgb(202, 132, 2);   /* im Anflug */
  --status-gelandet: rgb(0, 177, 0); /* gelandet */
  --status-gepaeck: green; /* gepaeck */
  --status-beendet: darkgreen; /* beendet */
  --boarding-checkin: blue;
  /* nexter tag */
  --nd-background: rgb(202, 132, 2);
  --nd-foreground: rgb(142, 3, 3);
  /* button schrift farbe */
  --btn-pri-color: rgb(241, 238, 56);
  --btn-sec-color: rgb(255, 255, 255);
  /* an ab overlay */
  --ovl--an-ab-fg: Chartreuse;
  --ovl--anab-opac: 0.2;
  /* header footer */
  --head-foot-col: linear-gradient(180deg, #282828, #202020);
  /* Background picture */
  --bg-url: url("assets/img/speicher.jpg");
  /* flugsearch */
  --flug-search-color: #6661bb; /* schrift color */
  --flug-search-rahmen: rgb(172, 64, 64);
}

/* automatic dark mode */
/* keep the rules in sync with the manual dark mode below! */
@media (prefers-color-scheme: dark) {
  :root {
    /* zeilen trenner */
    --zeil-bor-bottom: #77bdfb;
    /* gerade zeile */
    --background_even: #89929b;
    /* ungerade zeile */
    --background_odd: #c6cdd5;
    --clr-foreground: #c6cdd5;
    /* nexter tag */
    --nd-background: #7ce38b;
    --nd-foreground: #fa7970;
    /* button schrift farbe */
    --btn-pri-color: #7ce38b;
    --btn-sec-color: #ecf2f8;
    --frg-fru-color: #7ce38b;
    /* an ab overlay */
    --ovl--an-ab-fg: #faa356; /* schrift*/
    --ovl--anab-opac: 0.4;
    --bg-url: url("assets/img/speicher_dark.jpg");
  }
}

/* manual dark mode 
/* github dark mode */
:root.dark_mode {
  --background-color: #1a1a1a;
  --skeleton-color: #333333;
  --skeleton-shine: #404040;
  /* zeilen trenner */
  --zeil-bor-bottom: #77bdfb;
  /* gerade zeile */
  --background_even: #89929b;
  /* ungerade zeile */
  --background_odd: #c6cdd5;
  /* nexter tag */
  --nd-background: #275b72;
  --nd-foreground: #fa7970;
  --frueher: rgb(105, 183, 28); /* früher */
  --status-gelandet: rgb(44, 121, 44); /* gelandet */
  /* button schrift farbe */
  --btn-pri-color: #7ce38b;
  --btn-sec-color: #ecf2f8;
  --frg-fru-color: #7ce38b;
  /* an ab overlay */
  --ovl--an-ab-fg: #faa356; /* schrift*/
  --ovl--anab-opac: 0.15;
  --bg-url: url("assets/img/speicher_dark.webp");
}

body {
  color: var(--clr-foreground);
  margin: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  background-image: var(--bg-url);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Admin Area Styles */
.admin-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: var(--text-color, #000);
  position: relative;
  top: 50px;
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
}

/* Admin Area Layout System */

/* Forms */
.form-field {
  margin: 18px auto;
  width: 100%;
  max-width: 600px;
}

.form-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 1.1em;
  color: var(--text-color, #000);
}

/* Buttons */
.admin-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background: var(--accent-color, #00a1ff);
  color: var(--button-text, #fff);
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.admin-button:hover:not(:disabled) {
  background: var(--accent-color-light, #66c7ff);
}

.admin-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.danger-button {
  background: var(--danger-color, #d91b42);
}

.danger-button:hover:not(:disabled) {
  background: var(--danger-color-light, #ff1f4f);
}

/* Lists */
.admin-list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.admin-list li {
  padding: 10px;
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}

/* Text Styles */
.admin-text {
  font-size: 1.1em;
  line-height: 1.5;
  color: var(--text-color, #000);
}

/* Utilities */
.text-center {
  text-align: center;
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

/* Scrollable Areas */
.scrollable-content {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

/* Force Button (Dashboard specific) */
.force-button {
  padding: 0.5em 0.5em;
  width: 85%;
  margin: 0 auto 20px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  border: 4px solid var(--danger-color, #ff0000);
  background-color: var(--danger-light, #ffcccb);
  color: var(--danger-text, #04146c);
  text-shadow:
    1px 1px 0px rgba(255, 255, 255, 0.5),
    -1px -1px 0px rgba(0, 0, 0, 0.6);
  box-shadow:
    inset -8px 0 8px rgba(0, 0, 0, 0.15),
    inset 0 -8px 0 rgba(0, 0, 0, 0.25),
    0 0 0 2px rgba(0, 0, 0, 0.75),
    10px 20px 25px rgba(0, 0, 0, 0.4);
}