:root{

  --bg:#f8f8f8;

  --card:#ffffff;

  --text:#222;

  --muted:#6b6b6b;

  --primary:#0b6efd;

  --danger:#c0392b;

  --ok:#2e7d32;

  --no:#9e1b32;

  --border:#e2e2e2;

}

*{box-sizing:border-box}

html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 Georgia, "Times New Roman", serif}

body{font-family: Georgia, "Times New Roman", serif}

.site-header{background:#fff;border-bottom:1px solid var(--border)}

.site-header .container{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between}

.logo{color:var(--text);text-decoration:none;font-weight:700}

nav a{margin:0 8px;color:var(--text);text-decoration:none}

.container{max-width:1100px;margin:20px auto;padding:0 16px}

.hero h1{font-family: Verdana, Geneva, sans-serif;font-weight:700;margin:0 0 8px}

.help{color:var(--muted);font-size:.9rem}

.card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:16px;margin:16px 0}

.table{width:100%;border-collapse:collapse}

.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left;vertical-align:top}

.actions{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}

.btn{display:inline-block;border:1px solid var(--border);background:#fff;padding:8px 12px;border-radius:6px;text-decoration:none;cursor:pointer}

.btn:hover{background:#f3f3f3}

.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}

.btn-primary:hover{filter:brightness(.95)}

.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}

.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--border);font-size:.85rem}

.badge-ok{background:#eaf6ea;color:var(--ok);border-color:#d3ead3}

.badge-no{background:#fdecee;color:var(--no);border-color:#f7d1d6}

.muted{color:var(--muted)}

label{display:block;margin:10px 0 4px;font-family: Verdana, Geneva, sans-serif}

input[type="text"],input[type="email"],input[type="number"],input[type="date"],input[type="datetime-local"],input[type="password"],select{

  width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:#fff

}

.cookiebar{display:none} /* dezent aus; aktivieren wenn nötig */







/* ===============================
   TeeHouse – Buchungsdatum Badge
   =============================== */

td .date-badge {
  width: 72px;
  height: 72px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #0b3d2e;
  color: #fff;
  margin: 0 auto;
}

td .date-badge-top {
  height: 22%;
  background: #ff6a00;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

td .date-badge-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

td .date-badge-day {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
}

td .date-badge-month {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 2px;
  opacity: 0.9;
}





/* ===============================
   Mobile stacked table (Meine Buchungen)
   =============================== */

@media (max-width: 768px) {

  .table thead {
    display: none;
  }

  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  .table tr {
    background: #fff;
    border: 1px solid #e0e0dc;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
  }

  .table td {
    border: none;
    padding: 6px 0;
  }

  /* Date badge centered at top */
  .table td:first-child {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
  }

  /* Label + value layout */
  .table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b6b6b;
    margin-bottom: 2px;
  }

  /* Action buttons spacing */
  .table td:last-child {
    margin-top: 10px;
  }

  .table td:last-child .btn {
    width: 100%;
    margin-bottom: 6px;
  }
}


/* ===============================
   Force date badge colors on mobile
   =============================== */

@media (max-width: 768px) {

  td .date-badge {
    background: #0b3d2e !important;   /* Racing Green */
  }

  td .date-badge-top {
    background: #ff6a00 !important;   /* TeeHouse Orange */
  }
}