/* === Brand (aus inputIcon.png geschätzt) ============================== */
:root {
  --brand-teal-900: #0b5c66;   /* dunkles Teal für Kontrast */
  --brand-teal-700: #0e7f8c;
  --brand-teal-500: #12a3ad;   /* Primär */
  --brand-teal-300: #3ec6cd;   /* Hover/Light */
  --brand-bg-start: #0e8aa7;   /* Hintergrund-Gradient */
  --brand-bg-end:   #0a5260;
  --brand-accent:   #62d36a;   /* grüner €-Akzent */
  --brand-white:    #ffffff;
  --brand-ink:      #0f2230;   /* sehr dunkles Blau statt reines Schwarz */
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --shadow-sm: 0 6px 18px rgba(4, 36, 46, 0.10);
  --shadow-md: 0 18px 40px rgba(4, 36, 46, 0.16);
}

/* Bootstrap Farbvariablen überschreiben (wir nutzen CSS vars) */
:root {
  --bs-primary: var(--brand-teal-500);
  --bs-primary-rgb: 18,163,173;
  --bs-success: var(--brand-accent);
  --bs-body-color: var(--brand-ink);
  --bs-link-color: var(--brand-teal-700);
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: var(--radius-lg);
}

/* === Seite ============================================================ */
html { height: 100%; background-color: #07313a; } /* Fallback-Farbe */

body {
  min-height: 100dvh;
  color: var(--brand-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* gleiche Bilder wie vorher, aber sauber konfiguriert */
  background-image:
    radial-gradient(1200px 700px at 20% -10%, var(--brand-bg-start), transparent 60%),
    radial-gradient(1000px 600px at 120% 10%, var(--brand-teal-700), transparent 40%),
    linear-gradient(180deg, var(--brand-bg-end), #07313a);

  /* WICHTIG: keine Wiederholung / nicht kacheln */
  background-repeat: no-repeat, no-repeat, no-repeat;

  /* Am Viewport festpinnen = smooth beim Scrollen */
  background-attachment: fixed, fixed, fixed;

  /* Leicht größer skalieren, damit am Rand nichts abschneidet */
  background-size: 140% 140%, 120% 120%, 100% 100%;

  /* Positionen der drei Layer */
  background-position: 0 0, 100% 0, 0 0;
}

/* iOS-Fallback */
@supports (-webkit-touch-callout: none) {
  body {
    background-attachment: scroll, scroll, scroll;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
      radial-gradient(1200px 700px at 20% -10%, var(--brand-bg-start), transparent 60%),
      radial-gradient(1000px 600px at 120% 10%, var(--brand-teal-700), transparent 40%),
      linear-gradient(180deg, var(--brand-bg-end), #07313a);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 140% 140%, 120% 120%, 100% 100%;
    background-position: 0 0, 100% 0, 0 0;
    pointer-events: none;
  }
}

.container {
  max-width: 1100px;
}

/* === Navbar =========================================================== */
.navbar {
  --bg: rgba(255,255,255,.10);
  /*background: #12a3ad !important; */
  /*background-image: none !important; */
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.25);
  box-shadow: var(--shadow-sm);
}
.navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: .2px;
  background: linear-gradient(90deg, #fff, #e9fff1 60%, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.navbar .btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,.6);
  --bs-btn-hover-bg: rgba(255,255,255,.15);
  --bs-btn-hover-border-color: rgba(255,255,255,.9);
  border-radius: 999px;
}

/* === Pills / Tabs ===================================================== */
.app-pills .nav-link {
  border: 0;
  border-radius: 999px;
  color: #e8fbff;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  padding: .45rem .9rem;
  transition: transform .12s ease, background .2s ease;
}
.app-pills .nav-link:hover { transform: translateY(-1px); background: rgba(255,255,255,.14); }
.app-pills .nav-link.active {
  color: #062f38;
  background: linear-gradient(90deg, var(--brand-teal-300), var(--brand-teal-500));
  box-shadow: 0 8px 20px rgba(12,142,149,.35);
}

/* === Cards (Glass) ==================================================== */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.card .card-title { font-weight: 700; }

/* === Buttons ========================================================== */
.btn-primary {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-teal-500), var(--brand-teal-700));
  box-shadow: 0 10px 24px rgba(18,163,173,.35);
}
.btn-primary:hover {
  background: linear-gradient(90deg, var(--brand-teal-300), var(--brand-teal-500));
  box-shadow: 0 14px 30px rgba(18,163,173,.45);
  transform: translateY(-1px);
}
.btn-outline-danger { border-radius: 10px; }

/* === Forms ============================================================ */
.form-control, .form-select, .input-group-text {
  border-radius: .9rem;
  border-color: rgba(7, 49, 58, 0.15);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-teal-500);
  box-shadow: 0 0 0 .25rem rgba(18,163,173,.2);
}

/* === Tabellen ========================================================= */
.table {
  --stripe: rgba(18,163,173,.06);
  --hover: rgba(18,163,173,.10);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--stripe); }
.table > tbody > tr:hover > * { background: var(--hover); }
.table thead th { text-transform: uppercase; letter-spacing: .04em; color: #3b6871; }

/* Sticky Table Head on mobile when scrollen */
.table-responsive { position: relative; }
.table-responsive thead th { position: sticky; top: 0; background: #e8fbff; z-index: 1; }

/* === Alerts =========================================================== */
.alert { border-radius: var(--radius-lg); }
.alert-warning { background: #fff7e4; }

/* === Kleinigkeiten ==================================================== */
.badge-accent { background: var(--brand-accent); color: #06301a; }
.text-muted { color: #5b7a83 !important; }

/* Original Feintuning beibehalten */
.table td, .table th { vertical-align: middle; }    /* aus deiner bisherigen custom.css */

/* Label "Jahr" auf dunklem Hintergrund */
form.mb-3 .form-label {
  color: #e8fbff;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

/* Labels auf hellen Flächen */
.card .form-label,
.modal .form-label {
  color: var(--brand-ink);
  text-shadow: none;
}

@media all and (display-mode: standalone) {
  html, body {
    background: #0a6c71; /* dunkler */
    background-attachment: fixed;
  }
  /* Gradient-Start exakt gleich setzen, damit nichts "zuckt" */
  .navbar {
    background: linear-gradient(180deg, #0a6c71 0%, #12a3ad 100%) !important;
  }
}