:root {
  --fewo-navy: #003399;
  --fewo-dunkel: #000050;
  --fewo-hell: #e1f3fc;
  --fewo-rahmen: #2b9be0;
  --fewo-label: #1478c8;
}

html { font-size: 15px; }
body { background: #fff; color: #222; font-family: Tahoma, "Segoe UI", Verdana, sans-serif; }

.logo { max-width: 100%; height: auto; }
.navbar-brand .logo { height: 34px; }
@media (max-width: 400px) { .navbar-brand .logo { height: 26px; } }

.navbar { border-bottom: 3px solid var(--fewo-navy); }
.nav-link.active { color: var(--fewo-navy) !important; font-weight: 700; }

/* ---------- Kalender ---------- */
.kal-kopf { background: var(--fewo-navy); color: #fff; border-radius: .25rem; display: flex; align-items: stretch; }
.kal-kopf .kal-titel { flex: 1; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.35rem; font-family: Arial, sans-serif; padding: .5rem; }
.kal-kopf a.kal-btn { display: flex; align-items: center; justify-content: center; width: 60px; border-right: 1px solid rgba(255,255,255,.5); text-decoration: none; }
.kal-kopf a.kal-btn:last-child, .kal-kopf a.kal-btn.r { border-right: 0; border-left: 1px solid rgba(255,255,255,.5); }
.kal-kopf a.kal-btn span { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #000; border: 2px solid #000; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; line-height: 1; }
.kal-kopf a.kal-btn:hover span { background: #FFE000; }

.kal-fewo-titel { text-align: center; font-family: Arial, sans-serif; font-size: 1.3rem; margin: .6rem 0 .1rem; }
.kal-fewo-titel small { font-size: .75rem; color: #666; }

table.kal { width: 100%; table-layout: fixed; border-collapse: collapse; font-family: Calibri, Arial, sans-serif; }
table.kal th, table.kal td { border: 1px solid #555; text-align: center; height: 3.4rem; padding: 0; }
table.kal th { font-size: 1.25rem; font-weight: 700; height: 3.2rem; }
table.kal td { position: relative; }
/* Belegungsflächen mit Abstand zum Zellrand (--abstand) und zur Diagonale (--fuge) */
table.kal td .bel { position: absolute; inset: var(--abstand, 4px); pointer-events: none; z-index: 0; border-radius: 2px; }
table.kal td .bel.anreise { clip-path: polygon(100% var(--fuge, 9px), 100% 100%, var(--fuge, 9px) 100%); }
table.kal td .bel.abreise { clip-path: polygon(0 0, calc(100% - var(--fuge, 9px)) 0, 0 calc(100% - var(--fuge, 9px))); }
table.kal td a { position: relative; z-index: 1; }
table.kal td a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; color: #000; font-size: 1.25rem; font-weight: 700; }
table.kal td.fremd { border-color: #f4a58a; }
table.kal td.fremd a { color: #ff3300; }
table.kal td a:hover { outline: 3px solid #FFE000; outline-offset: -3px; }
table.kal td .zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6em; height: 1.55em; border-radius: 50%; }
table.kal td.belegt .zahl { background: rgba(255,255,255,.72); }
table.kal td.heute .zahl { color: #ffff00; text-shadow: 0 0 2px #000, 0 0 2px #000; }

@media (max-width: 576px) {
  table.kal { --abstand: 3px; --fuge: 7px; }
  table.kal th, table.kal td { height: 2.8rem; }
  table.kal th, table.kal td a { font-size: 1rem; }
  .kal-kopf a.kal-btn { width: 44px; }
  .kal-kopf a.kal-btn span { width: 30px; height: 30px; font-size: 1rem; }
  .kal-kopf .kal-titel { font-size: 1.1rem; }
}

.legende { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; font-size: .9rem; }
.legende i { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 3px; border: 1px solid #444; }

/* ---------- Formulare im Stil der Vorlage ---------- */
.fewo-form .col-form-label, .fewo-form .form-label { color: var(--fewo-label); }
.fewo-form .form-control, .fewo-form .form-select, .fewo-form .input-group-text {
  background-color: var(--fewo-hell); border-color: var(--fewo-rahmen); color: #0b3a66; border-radius: 0;
}
.fewo-form .form-control::placeholder { color: #7cc4ef; }
.fewo-form .form-control[readonly] { background-color: #f1f9fd; }
.fewo-form .input-group-text svg { width: 20px; height: 20px; }
.fewo-form .form-check-input:checked { background-color: var(--fewo-label); border-color: var(--fewo-label); }
.btn-fewo { border: 2px solid var(--fewo-rahmen); background: #fff; color: #0b3a66; border-radius: 2px; }
.btn-fewo:hover { background: var(--fewo-hell); color: #0b3a66; border-color: var(--fewo-rahmen); }
.ertrag { font-size: 1.05rem; color: #0b3a66; }

.farbpunkt { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: middle; border: 1px solid #333; }
.table td, .table th { vertical-align: middle; }

/* ---------- Statistik ---------- */
table.stat .balken { height: .7rem; background: var(--fewo-navy); border-radius: 2px; min-width: 1px; }
table.stat td, table.stat th { white-space: nowrap; }

/* ---------- Mieterkarte ---------- */
.fewo-cluster { background: rgba(0, 51, 153, .25); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.fewo-cluster div { background: var(--fewo-navy); color: #fff; font-weight: 700; font-size: .8rem; border-radius: 50%; width: 75%; height: 75%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.leaflet-popup-content ul li { margin-bottom: .25rem; }

/* ---------- Einnahmen & Ausgaben ---------- */
.ea-box { border: 2px solid var(--fewo-rahmen); background: var(--fewo-hell); border-radius: .25rem; padding: .75rem 1rem; color: #0b3a66; }
.ea-diff td, .ea-diff th { padding-left: .75rem; }
.ea-diff td:first-child, .ea-diff th:first-child { padding-left: 0; }
@media (max-width: 576px) { .ea-diff.fs-5, .ea-diff .fs-5 { font-size: 1rem !important; } }

/* ---------- Tabellen auf dem Handy als Karten (kein Querscrollen) ---------- */
@media (max-width: 767.98px) {
  .table-responsive:has(> table.stapel) { overflow-x: visible; }
  table.stapel { border-collapse: separate; }
  table.stapel thead { display: none; }
  table.stapel, table.stapel tbody, table.stapel tfoot { display: block; width: 100%; }
  table.stapel tbody tr {
    display: flex; flex-direction: column; border: 1px solid #cfd8e3; border-radius: .4rem;
    margin-bottom: .6rem; padding: .35rem .7rem; background: #fff;
  }
  table.stapel tbody tr.table-info { background: #e8f6fc; }
  /* Bezeichnung links (float), Wert rechtsbündig – mehrteilige Inhalte bleiben zusammen */
  table.stapel > tbody > tr > td {
    display: block; border: 0; padding: .15rem 0; text-align: right; white-space: normal;
    box-shadow: none; background: transparent; overflow: hidden;
  }
  table.stapel > tbody > tr > td.stapel-zeigen { display: block !important; }
  table.stapel > tbody > tr > td::before {
    content: attr(data-label); float: left; color: #6c757d; font-size: .85em; padding-right: .75rem; line-height: 1.9;
  }
  table.stapel > tbody > tr > td:not([data-label])::before { content: none; }
  table.stapel > tbody > tr > td.kopf {
    text-align: left; font-weight: 600; font-size: 1.05em;
    border-bottom: 1px solid #e9ecef; padding-bottom: .3rem; margin-bottom: .15rem;
  }
  table.stapel > tbody > tr > td.stapel-erst { order: -1; }
  table.stapel > tbody > tr > td.aktionen { text-align: right; padding-top: .35rem; }
  table.stapel > tbody > tr > td.text-center:not([colspan]) { text-align: right !important; }
  table.stapel > tbody > tr > td[colspan] { text-align: center; }
  table.stapel > tbody > tr > td:empty { display: none; }
  table.stapel tfoot tr {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
    padding: .5rem .7rem; border-top: 2px solid #333;
  }
  table.stapel tfoot td { display: block; border: 0; padding: 0; box-shadow: none; }
  table.stapel tfoot td:empty { display: none; }
}

@media (max-width: 991.98px) {
  .kal-leiste .kal-aktionen { width: 100%; }
  .kal-leiste .kal-aktionen .btn { flex: 1 1 0; padding-top: .5rem; padding-bottom: .5rem; }
}