/* =========================================================
   Aupo-Laden – Glas-Design (grün → petrol), fixed background
   ========================================================= */
:root{
  --aupo-bg-1:#0f5e59; --aupo-bg-2:#0e7a6b;
  --aupo-accent:#38b48b; --aupo-accent-2:#7fd1b9;
  --text-1:#e9f7f3; --text-2:#cfeae3; --muted:rgba(255,255,255,.70);
  --glass-rgb:208,245,236;
  --glass-fill:rgba(var(--glass-rgb),.08);
  --glass-stroke:rgba(var(--glass-rgb),.35);
  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --blur-strong:22px; --blur-medium:14px;
  --shadow-glass:0 10px 35px rgba(0,0,0,.28);

  /* Kalender: 30min-Slots, 6h Sichtfenster */
  --cal-slot-h:34px; --cal-head-h:44px;
  --cal-slots-per-hour:2;  /* 30 min */
  --cal-visible-hours:6;   /* 6h sichtbar */
}
:root{ color-scheme:dark }
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--text-1);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  background:none; position:relative; z-index:0; overflow-x:hidden;
}
/* Fixed gradient */
body::before{
  content:""; position:fixed; inset:-12vmax; z-index:-2; pointer-events:none;
  will-change:transform; transform:translateZ(0);
  background:
    radial-gradient(120vmax 80vmax at 25% -10%, #174e4a 0%, transparent 62%),
    radial-gradient(110vmax 80vmax at 100% -15%, #0d6b60 0%, transparent 70%),
    linear-gradient(180deg, var(--aupo-bg-1) 0%, var(--aupo-bg-2) 100%);
  background-repeat:no-repeat;
}
/* Noise layer */
body::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background-image:url('noise.png'); background-size:640px; opacity:.06; pointer-events:none;
}
@media (max-width:480px){
  :root{ --cal-slot-h:30px; --cal-head-h:40px }
}
@media (min-width:1024px){
  :root{ --cal-slot-h:36px; --cal-head-h:46px }
}

/* Layout */
.container,.wrap,.wrap-admin{ max-width:980px; margin:0 auto; padding:24px 16px 80px; }
h1,h2,h3{ margin:0 0 12px } h1{ font-weight:800; letter-spacing:.2px }
p{ line-height:1.6; color:var(--text-2) }
a{ color:var(--aupo-accent); text-decoration:none } a:hover{ opacity:.9 }

/* Glass primitives */
.glass{ background:var(--glass-fill);
  backdrop-filter:blur(var(--blur-strong)) saturate(118%);
  -webkit-backdrop-filter:blur(var(--blur-strong)) saturate(118%);
  border:1px solid var(--glass-stroke); border-radius:var(--r-lg);
  box-shadow:var(--shadow-glass);
}
.panel,.card,.calendar-box,.cards,.booking-entry{ composes: glass; padding:16px; margin:16px 0 }
.panel,.card,.calendar-box,.cards,.booking-entry{
  background:var(--glass-fill); border:1px solid var(--glass-stroke); border-radius:var(--r-lg);
  backdrop-filter:blur(var(--blur-strong)) saturate(118%);
  -webkit-backdrop-filter:blur(var(--blur-strong)) saturate(118%);
  box-shadow:var(--shadow-glass); padding:16px; margin:16px 0;
}
.panel-head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1rem; border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color:var(--text-1); font-weight:700; cursor:pointer; text-decoration:none;
  transition:transform .06s ease, border-color .2s ease, background .2s ease;
}
.btn:active{ transform:translateY(1px) }
.btn.primary{ border-color:rgba(56,180,139,.55);
  background:linear-gradient(180deg, rgba(56,180,139,.35), rgba(56,180,139,.15)); }
.btn.gray{ border-color:rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); color:var(--text-2) }
.btn[disabled]{ opacity:.5; cursor:not-allowed }

/* Inputs */
input,select,textarea{
  appearance:none; -webkit-appearance:none; width:100%;
  padding:.85rem 1rem; border-radius:var(--r-md); border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08); color:var(--text-1);
  outline:none; backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
}
input::placeholder,textarea::placeholder{ color:var(--muted) }
label{ display:flex; flex-direction:column; gap:6px; color:var(--text-2); font-size:14px }
.grid-2{ display:grid; grid-template-columns:1fr; gap:12px }
@media (min-width:720px){ .grid-2{ grid-template-columns:1fr 1fr } }

/* Messages */
.msg{ margin:8px 0; padding:.6rem .8rem; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06) }
.msg.ok{ border-color:rgba(56,180,139,.7); background:rgba(56,180,139,.12) }
.msg.err{ border-color:rgba(255,80,80,.65); background:rgba(255,80,80,.12) }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace }
.small{ font-size:12px }

/* Calendar grid */
.cal-head-row,.cal-row{ display:grid; grid-template-columns:90px repeat(4,1fr); align-items:stretch }
.cal-head,.cal-time{
  padding:.5rem .6rem; height:var(--cal-head-h); display:flex; align-items:center;
  font-weight:600; color:var(--text-1);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.cal-time{ font-weight:500; color:var(--text-2) }
.cal-cell{
  min-height:var(--cal-slot-h);
  border-left:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  cursor:pointer; transition:background .15s ease, box-shadow .2s ease, transform .15s ease;
}
.cal-cell.cal-free:hover{ background:rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25) }
.cal-cell.cal-busy{
  background: linear-gradient(180deg, rgba(56,180,139,.40), rgba(56,180,139,.20));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  opacity: .95; cursor: not-allowed;
}
.cal-sel{
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.45), rgba(56,180,139,.55));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 0 8px rgba(255,255,255,.35), 0 0 18px rgba(56,180,139,.6);
  transform: scale(1.015); z-index:1;
}
/* Scroll container and sticky head */
#calendarBox{
  max-height: calc(var(--cal-slot-h) * var(--cal-slots-per-hour) * var(--cal-visible-hours) + var(--cal-head-h) + 12px);
  overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth;
}
.cal-head-row{ position:sticky; top:0; z-index:2;
  backdrop-filter:blur(15px) saturate(120%); -webkit-backdrop-filter:blur(15px) saturate(120%);
  box-shadow:0 1px 0 rgba(255,255,255,.10);
}

/* Cards */
.cards{ display:grid; grid-template-columns:1fr; gap:12px }
.booking-entry{ display:flex; flex-direction:column; gap:6px }
.booking-entry>button{ align-self:flex-start; margin-top:4px }

.footer{ margin-top:28px; color:var(--muted); display: flex; gap: 1rem; flex-wrap:wrap 
  justify-content: center;
}

@supports not ((backdrop-filter:blur(15px)) or (-webkit-backdrop-filter:blur(15px))){
  .panel,.card,.calendar-box,.cards,.booking-entry,.glass,.btn,input,select,textarea{ background: rgba(255,255,255,.12) }
}
@media (prefers-reduced-transparency:reduce){
  .panel,.card,.calendar-box,.cards,.booking-entry,.glass,.btn,input,select,textarea{
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
}

/* === v7: Swap appearances: busy darker glow, selection uses prior busy style === */
.cal-cell.cal-busy {
  background: linear-gradient(180deg, rgba(16,34,33,.55), rgba(16,34,33,.30));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.40),
    0 0 6px rgba(0,0,0,.25);
  opacity: .98;
  cursor: not-allowed;
}
.cal-sel {
  background: linear-gradient(180deg, rgba(56,180,139,.40), rgba(56,180,139,.20));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  transform: none;
}

/* === v9: Symmetric panel widths & equal paddings (admin/public) === */
:root{ --panel-pad:16px; }

.panel, .card, .calendar-box {
  width: 100%;
  box-sizing: border-box;
  padding: var(--panel-pad);
  margin-left: 0;
  margin-right: 0;
}

/* Wenn Panels ineinander verschachtelt sind (z. B. Kalender in einem Block),
   keine zusätzlichen seitlichen Abstände erzeugen */
.panel .panel, .panel .calendar-box, .card .panel, .card .calendar-box {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Headings und Kopfzeilen innerhalb von Panels bündig halten */
.panel > h1, .panel > h2, .panel > h3,
.card  > h1, .card  > h2, .card  > h3 { margin-left: 0; margin-right: 0; }

.panel-head { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

/* Tabellen & Inhalte immer auf Panelbreite ziehen */
.panel table, .card table, .calendar-box table { width: 100%; }

/* Container: gleiche Seiten-Paddings */
.container, .wrap, .wrap-admin {
  padding-left: var(--panel-pad);
  padding-right: var(--panel-pad);
}

/* === v10: Unified neutral glass buttons (white text, 14px radius) === */
button, .btn, input[type="submit"], input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .85rem 1.4rem;
  border-radius: 14px;                  /* keep current rounding */
  color: #ffffff;                       /* always white text */
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 2px 10px rgba(0,0,0,.18);
  backdrop-filter: blur(15px) saturate(130%);
  -webkit-backdrop-filter: blur(15px) saturate(130%);
  transition: background .2s ease, box-shadow .2s ease, transform .08s ease;
  margin-top: 12px;                    /* spacing to input above */
}

button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 3px 12px rgba(0,0,0,.22);
}

button:active, .btn:active, input[type="submit"]:active, input[type="button"]:active {
  transform: scale(0.99);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.30),
    0 6px 20px rgba(56,180,139,.35);   /* subtle petrol glow */
}

/* Ensure any .primary or .gray variants inherit the neutral style */
.btn.primary, .btn.gray {
  color: #ffffff;
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
}

/* === v12: inline form status to the right of submit button === */
.form-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.form-status{}
.form-status.is-ok{
  border-color: rgba(56,180,139,.65);
  background: rgba(56,180,139,.18);
}
.form-status.is-err{
  border-color: rgba(255,110,110,.75);
  background: rgba(255,110,110,.18);
}

/* === v13: form-status fade-out for success === */
.form-status{}
.form-status.is-hide{
  opacity: 0;
  visibility: hidden;
}

/* hide legacy calendar message banner; use inline form-status instead */
/* removed legacy #msg hide */


/* Hinweistext unter Heute-Button */
.limit-hinweis {
  margin-top: 6px;
  margin-bottom: 0.5em;
  color: rgba(255,255,255,0.7); /* angepasst wie .muted */
  font-size: 0.95em;
  text-align: left;
  line-height: 1.5;
  opacity: 0.9;
  padding-left: 0;
}
/* Als volle Zeile innerhalb der Panel-Kopfzeile */
.panel-head .limit-hinweis {
  flex: 1 0 100%;
  width: 100%;
  display: block;
}

/* Datumsschrift vergrößern, Container bleibt gleich */
input[type="date"] {
  font-size: 1.3rem;      /* größerer Text, ohne das Feld zu vergrößern */
  text-align: center;     /* Text mittig im Feld */
  line-height: 1;         /* verhindert, dass das Feld höher wird */
  padding-top: 0;         /* keine zusätzliche Höhe */
  padding-bottom: 0;
}

/* Datum-Container exakt an "Heute"-Button anpassen */
input[type="date"] {
  font-size: 1.3rem;
  text-align: center;
  height: 48px;           /* gleiche Höhe wie der Heute-Button */
  border-radius: 12px;    /* gleiche Rundung */
  padding: 0 14px;
  box-sizing: border-box;
  line-height: 1;
}

/* iOS/Safari Fix: Datefeld exakt so hoch wie der "Heute"-Button */
#datePicker {
  -webkit-appearance: none;
  appearance: none;
  height: 48px !important;     /* Zielhöhe */
  min-height: 48px !important;
  border-radius: 12px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

/* Sichtbarkeit der Inline-Meldung ohne JS-Klassen steuern */
.form-status { 
  display: none;                 /* Standard: ausgeblendet */
}
.form-status:not(:empty) {
  display: inline-flex;          /* Nur anzeigen, wenn Inhalt vorhanden ist */
}
/* Sicherheitshalber auch den alten Kalender-Hinweis so steuern */
#msg { display: none; }
#msg:not(:empty) { display: block; }

/* === Patch: Nur die Labels "Vorname*" & "PIN*" im Bereich #mybookings weiß === */
#mybookings label[for="my_first"],
#mybookings label[for="my_pin"],
#mybookings label[for="first"],
#mybookings label[for="pin"] {
  color: #ffffff !important;
  opacity: 1 !important;
}
/* === Buttons unten um 10 % verkleinern (Größe & Schrift) === */
.footer .btn,
.footer button,
.footer input[type="button"],
.footer input[type="submit"] {
  transform: scale(0.9);
  font-size: 0.9em;
  padding: 0.75rem 1.25rem;
}
/* === v12: Spalten-Sync & zentrierte Inhalte (Header + Zeilen) ===
   Fix: Header-Grid und Body-Grid identisch + Zelleninhalt exakt in der Spalte.
   Gilt nur für Smartphones. */
@media (max-width: 480px) {
  /* 1) Gleiche Spaltenbreiten für Kopf & Datenzeilen */
  .cal-head-row, .cal-row {
    grid-template-columns: 68px repeat(4, 1fr) !important; /* Zeit schmal + 4x gleich */
  }

  /* 2) Einheitliche Innenabstände, damit nichts über die Spalten „schiebt“ */
  .cal-head, .cal-time, .cal-cell {
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px;
  }

  /* 3) Inhalt überall exakt mittig */
  .cal-head, .cal-time, .cal-cell {
    display: flex;
    align-items: center;      /* vertikal mittig */
    justify-content: center;  /* horizontal mittig */
    text-align: center;
    white-space: nowrap;
  }

  /* 4) Lesbare, aber kompakte Typo */
  .cal-head { font-size: clamp(11px, 3vw, 14px); height: var(--cal-head-h); }
  .cal-time { font-size: clamp(10px, 2.8vw, 12px); font-variant-numeric: tabular-nums; }
}

/* === v14: Footer-Buttons kompakter (mobile) === */
@media (max-width: 480px) {
  .footer {
    gap: 0.3rem;          /* engerer Abstand zwischen Buttons */
    margin-top: 8px;      /* weniger Abstand nach oben */
    padding-bottom: 6px;  /* kompakter zum unteren Rand */
  }

  .footer .btn {
    padding: 0.55rem 0.9rem; /* kompaktere Buttons */
    transform: scale(0.9);
    font-size: 0.9em;
  }
}


/* === v15: 3D Buttons (Apple-like, transparent-safe) ====================== */
button, .btn, input[type="submit"], input[type="button"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.2rem;
  border-radius: 14px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  box-shadow:
    0 10px 20px rgba(0,0,0,.45),
    0 3px 6px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -4px 10px rgba(0,0,0,.45);
  backdrop-filter: blur(15px) saturate(140%);
  -webkit-backdrop-filter: blur(15px) saturate(140%);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease;
}

button::after, .btn::after, input[type="submit"]::after, input[type="button"]::after {
  content:"";
  position:absolute;
  left:8%; right:8%; top:7%;
  height:36%;
  border-radius: 12px 12px 10px 10px / 10px 10px 8px 8px;
  background: linear-gradient(to bottom, rgba(255,255,255,.50), rgba(255,255,255,0));
  pointer-events:none;
  mix-blend-mode: screen;
}

button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  box-shadow:
    0 12px 24px rgba(0,0,0,.50),
    0 4px 10px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.27),
    inset 0 -5px 12px rgba(0,0,0,.48);
}

button:active, .btn:active, input[type="submit"]:active, input[type="button"]:active {
  transform: translateY(1px);
  box-shadow:
    0 6px 12px rgba(0,0,0,.55),
    0 2px 4px rgba(0,0,0,.60),
    inset 0 2px 6px rgba(0,0,0,.55);
}

button:focus-visible, .btn:focus-visible, input[type="submit"]:focus-visible, input[type="button"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(56,180,139,.6),
    0 10px 20px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -4px 10px rgba(0,0,0,.45);
}

button[disabled], .btn[disabled], input[type="submit"][disabled], input[type="button"][disabled] {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(10%);
}

/* Variant: primary keeps color but uses same 3D shell */
.btn.primary {
  border-color: rgba(56,180,139,.55);
  background: linear-gradient(180deg, rgba(56,180,139,.35), rgba(56,180,139,.15));
}
/* ======================================================================== */


/* === v20i: Clean Shadow Only — remove white rims on containers, inputs, buttons === */
/* Keep your current shadows. Strip any light borders/outline/gloss lines that cause white edges. */

/* 1) Containers */
:where(.panel,.card,.calendar-box,.cards,.booking-entry){
  border: none !important;
  outline: none !important;
  background-clip: padding-box !important;
}
:where(.panel,.card,.calendar-box,.cards,.booking-entry)::before,
:where(.panel,.card,.calendar-box,.cards,.booking-entry)::after{
  /* ensure no thin highlight layers draw lines */
  box-shadow: none !important;
  border: 0 !important;
}

/* 2) Inputs / fields */
:where(input, textarea, select){
  -webkit-appearance: none;
  appearance: none;
  border: none !important;
  outline: none !important;
  background-clip: padding-box !important;
  box-shadow: none; /* we keep fields flat; container provides depth */
}
:where(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="time"],input[type="password"],select,textarea){
  border: none !important;
  outline: none !important;
  background-image: none !important; /* kill any gradient rims */
  /* keep radius from your existing theme */
}
/* remove any pseudo rim on inputs */
:where(input,textarea,select)::before,
:where(input,textarea,select)::after{ display:none !important; }

/* 3) Buttons — keep 3D look but switch border to dark (no white rim) */
:is(button, .btn, input[type="submit"], input[type="button"]){
  border: 1px solid rgba(0,0,0,.40) !important;   /* dark edge instead of white */
  outline: none !important;
  background-clip: padding-box !important;
}
/* also remove any external thin outlines that could appear in containers */
:is(button, .btn, input[type="submit"], input[type="button"])::before{
  /* make sure there's no extra 1px bright stroke */
  display: none !important;
}
/* keep the glossy top (::after) from v15b; it's not a rim, so we let it stay */

/* 4) Safety: no outlines on focus (we already show custom focus styles elsewhere) */
:where(input,textarea,select,button,.btn):focus{ outline: none !important; }
/* ================================================================================ */


/* === v21: Restored Soft Shadows (no white edges, balanced depth) ========== */
/* Behält den Kalenderlook und bringt den Effekt zurück – ohne helle Linien. */
:where(.panel,.card,.calendar-box,.cards,.booking-entry){
  border: none !important;
  outline: none !important;
  border-radius: 18px;
  background: transparent !important;
  background-clip: padding-box !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.35),   /* gleichmäßiger Außenschatten */
    0 2px 6px rgba(0,0,0,.25),    /* Grundtiefe */
    inset 0 0 6px rgba(0,0,0,.15) !important; /* innere Tiefe */
}

/* Eingabeelemente – keine weißen Linien, aber feine Tiefe */
:where(input, textarea, select){
  border: none !important;
  outline: none !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 0 4px rgba(0,0,0,.18);
}

/* Buttons – 3D-Look beibehalten, dunkler Rahmen */
:is(button, .btn, input[type="submit"], input[type="button"]){
  border: 1px solid rgba(0,0,0,.45) !important;
  outline: none !important;
  background-clip: padding-box !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.45),
    0 3px 8px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -4px 10px rgba(0,0,0,.45) !important;
}

/* Keine pseudo-Layer, die helle Linien erzeugen */
:where(.panel,.card,.calendar-box,.cards,.booking-entry)::before,
:where(.panel,.card,.calendar-box,.cards,.booking-entry)::after{
  display:none !important;
}
/* ========================================================================= */


/* === v21b: True Calendar Depth — soft realistic container shadows ========= */
/* Kombiniert v20h (Kalenderlook) mit clean edges aus v20i. Keine weißen Linien. */
:where(.panel,.card,.calendar-box,.cards,.booking-entry){
  border: none !important;
  outline: none !important;
  border-radius: 18px;
  background: transparent !important;
  background-clip: padding-box !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.35),   /* gleichmäßiger, weicher Außenschatten */
    0 3px 8px rgba(0,0,0,.25),    /* zusätzliche Tiefe */
    inset 0 0 6px rgba(0,0,0,.12) !important; /* subtile innere Schattierung */
}

/* Eingabefelder – keine weißen Linien, aber leicht vertieft */
:where(input, textarea, select){
  border: none !important;
  outline: none !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 0 4px rgba(0,0,0,.18);
  border-radius: 10px;
}

/* Buttons – dunkler Rahmen + weiche Tiefe */
:is(button, .btn, input[type="submit"], input[type="button"]){
  border: 1px solid rgba(0,0,0,.45) !important;
  outline: none !important;
  background-clip: padding-box !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.45),
    0 3px 8px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -4px 10px rgba(0,0,0,.45) !important;
}

/* Entfernt helle Deko-Layer */
:where(.panel,.card,.calendar-box,.cards,.booking-entry)::before,
:where(.panel,.card,.calendar-box,.cards,.booking-entry)::after,
:where(input, textarea, select)::before,
:where(input, textarea, select)::after{
  display:none !important;
}
/* ========================================================================= */


/* === v21c: Enhanced Input Highlight (subtle glass depth) ================== */
:where(input, textarea, select){
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.05);  /* feine helle Kontur */
  background: rgba(255,255,255,.05);        /* leicht milchiger Glas-Look */
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.05),  /* leichter Glanz innen */
    0 4px 8px rgba(0,0,0,.25);              /* weiche äußere Tiefe */
  backdrop-filter: blur(15px) saturate(140%);
  -webkit-backdrop-filter: blur(15px) saturate(140%);
  transition: all .2s ease-in-out;
}

/* Beim Fokus etwas heller */
:where(input, textarea, select):focus{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
  box-shadow:
    0 6px 12px rgba(0,0,0,.35),
    inset 0 1px 2px rgba(255,255,255,.10);
}
/* ========================================================================= */



/* === Patch: Dezenter Glanz für 3D-Buttons ====================== */
button::after,
.btn::after,
input[type="submit"]::after,
input[type="button"]::after {
  top: 10%;
  left: 10%;
  right: 10%;
  height: 28%;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.05)
  );
  opacity: 0.5;          /* Glanz deutlich schwächer */
  filter: blur(15px);     /* weicher Übergang */
}

/* optional: leicht mattere Grundfläche */
:is(button, .btn, input[type="submit"], input[type="button"]) {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.04)
  ) !important;
}


/* === Patch: Dezente, matte Buttons ====================== */
:is(button, .btn, input[type="submit"], input[type="button"]) {
  border: 1px solid rgba(0,0,0,.35) !important;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  ) !important;
  box-shadow:
    0 3px 8px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 6px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(15px) saturate(130%);
  -webkit-backdrop-filter: blur(15px) saturate(130%);
  transition: all .2s ease;
}

/* Deutlich reduzierter Glanz */
:is(button, .btn, input[type="submit"], input[type="button"])::after {
  content:"";
  position:absolute;
  top:10%;
  left:10%;
  right:10%;
  height:28%;
  border-radius:inherit;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0)
  );
  opacity:0.4;
  filter: blur(15px);
  pointer-events:none;
}

/* Hover: nur leicht heller, kein starkes Aufleuchten */
:is(button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover) {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.04)
  ) !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 6px rgba(0,0,0,.35) !important;
}

/* Aktivzustand: kein Glanz, leicht gedrückt */
:is(button:active, .btn:active, input[type="submit"]:active, input[type="button"]:active) {
  transform: translateY(1px);
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.02)
  ) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.45) !important;
}


/* === Patch: Leeren Container unter "Buchungen laden" ausblenden === */
#msg:empty,
.form-status:empty,
.panel .msg:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}



/* === FINAL OVERRIDE: Stehendes Hintergrundbild auf allen Seiten ========== */
/* Platziere diesen Block am ENDE der Datei, damit er alles zuvor überschreibt */
:root{
  --bg-image: url('A279964D-C51F-49DE-B35C-D8FFEEEAA477.jpeg');
}

html, body{
  background: transparent !important;
}

/* Bild-Layer */
body::before{
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background: var(--bg-image) center center / cover no-repeat fixed !important;
  /* Wichtig: Keine weiteren Gradients/Noise */
  box-shadow: none !important;
}

/* Abdunkelung für Lesbarkeit */
body::after{
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: rgba(0,0,0,.20) !important;
  background-image: none !important;
  box-shadow: none !important;
}



/* === Patch: Deutlich reduzierte Milchglas-Optik ========================= */
/* Gilt für Panels, Kalender, Eingabefelder und Buttons gleichermaßen */
:where(.panel, .card, .calendar-box, .cards, .booking-entry, input, textarea, select, button, .btn, input[type="submit"], input[type="button"]) {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(15px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(120%) !important;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.25),
    inset 0 0 4px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
}

/* Buttons etwas klarer, weniger Glanz */
:where(button, .btn, input[type="submit"], input[type="button"])::after {
  opacity: 0.25 !important;
  filter: blur(15px) !important;
}

/* Hover-Zustand leicht heller, nicht milchiger */
:where(button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover) {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Panels & Karten – dezenter, transparenter */
:where(.panel, .card, .calendar-box, .cards, .booking-entry) {
  background: rgba(255, 255, 255, 0.025) !important;
  border-radius: 18px !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.3),
    0 2px 5px rgba(0, 0, 0, 0.25),
    inset 0 0 4px rgba(0, 0, 0, 0.1) !important;
}
/* ======================================================================= */



/* === Patch: Stärkere Abdunkelung des Hintergrundbilds =================== */
body::after {
  background: rgba(0, 0, 0, 0.35) !important; /* vorher 0.20 */
}
/* ======================================================================= */



/* === Patch: Dezent dunklere Glasflächen ================================ */
/* Panels, Kalender, Eingabefelder und Buttons leicht dunkler für besseren Kontrast */
:where(.panel, .card, .calendar-box, .cards, .booking-entry, input, textarea, select, button, .btn, input[type="submit"], input[type="button"]) {
  background: rgba(255, 255, 255, 0.02) !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.40),
    0 3px 8px rgba(0, 0, 0, 0.30),
    inset 0 0 5px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.4) !important;
}
/* ======================================================================= */



/* === Patch: Noch etwas dunklere Glasflächen ============================ */
/* Gleicher Stil, aber stärkere Abdunkelung und mehr Tiefe */
:where(.panel, .card, .calendar-box, .cards, .booking-entry, input, textarea, select, button, .btn, input[type="submit"], input[type="button"]) {
  background: rgba(255, 255, 255, 0.015) !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.35),
    inset 0 0 6px rgba(0, 0, 0, 0.20) !important;
  border: 1px solid rgba(0, 0, 0, 0.45) !important;
}
/* ======================================================================= */



/* === Patch: Variante A – Dunklere Milchglasflächen ===================== */
/* Überlagert alle Glasflächen mit leichtem Schwarz-Ton für realistische Tiefe */
:where(.panel, .card, .calendar-box, .cards, .booking-entry,
       input, textarea, select,
       button, .btn, input[type="submit"], input[type="button"]) {
  background: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(15px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(120%) !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.35),
    inset 0 0 6px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(0, 0, 0, 0.5) !important;
}
/* ======================================================================= */



/* === Patch: Variante A.2 – Dezente Abdunkelung (0.08) ================== */
/* Sanfter, transparenter Schwarzwert für harmonisches, ruhiges Glas */
:where(.panel, .card, .calendar-box, .cards, .booking-entry,
       input, textarea, select,
       button, .btn, input[type="submit"], input[type="button"]) {
  background: rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(15px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(120%) !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.3),
    inset 0 0 5px rgba(0, 0, 0, 0.18) !important;
  border: 1px solid rgba(0, 0, 0, 0.4) !important;
}
/* ======================================================================= */



/* === Patch: Innere Container heller (max. 0.01) ======================== */
/* Stellt für tiefere Layout-Ebenen eine deutlich hellere Tönung her */
:where(.calendar-box, .cards, .booking-entry) {
  background: rgba(0, 0, 0, 0.01) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.25),
    inset 0 0 4px rgba(0, 0, 0, 0.08) !important;
}
/* ======================================================================= */



/* === Patch: Resttönung (0.02) – Abdunkelung entfernt =================== */
/* Entfernt schwarze Überlagerung, behält leichten Glas-Kontrast */
:where(.panel, .card, .calendar-box, .cards, .booking-entry,
       input, textarea, select,
       button, .btn, input[type="submit"], input[type="button"]) {
  background: rgba(0, 0, 0, 0.02) !important;
  backdrop-filter: blur(15px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(120%) !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 0 4px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}
/* ======================================================================= */



/* === Patch: Dunklere Linien im Kalender ================================ */
/* Verändert helle Kalender-Gitterlinien zu dunklerem Ton für besseren Kontrast */
.cal-head,
.cal-time {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
}
.cal-cell {
  border-left: 1px solid rgba(0, 0, 0, 0.25) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
}
/* Optional: Kopfzeile dezenter */
.cal-head-row {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25) !important;
}
/* ======================================================================= */



/* === Patch: Kalender-Auswahl hellgrau-transparent ===================== */
.cal-sel {
  background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 0 10px rgba(255,255,255,0.25) !important;
  transform: none !important;
  opacity: 0.9 !important;
}
/* ====================================================================== */



/* === FINAL: Neutrale Kalender-Auswahl (grau, gut erkennbar, kein Grün) === */
.cal-sel,
.cal-cell.cal-sel,
.cal-row .cal-sel {
  /* Helles Glas ohne Farbstich */
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.38), rgba(255,255,255,0.12)) !important;
  background-blend-mode: normal !important;
  /* Fallback-Farbe, falls Gradients nicht greifen */
  background-color: rgba(255,255,255,0.18) !important;

  /* Deutliche, aber elegante Kontur + sanfter Glow */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.50),
    0 0 10px rgba(255,255,255,0.28) !important;

  /* Resets gegen ältere Styles */
  border: none !important;
  color: inherit !important;
  filter: none !important;
  transform: none !important;
  opacity: 0.96 !important;
}
/* ======================================================================= */


/* === Patch: Weiße Links im Impressum ============================ */
.impressum a,
.impressum a:visited,
.impressum a:hover,
.impressum a:active {
  color: #ffffff !important;   /* Weiß, klar lesbar */
  text-decoration: none;
}

.impressum a:hover {
  opacity: 0.85;               /* dezente Reaktion beim Hover */
}
/* ================================================================= */

/* === Kennzeichen-Segmente (UI) === */
.plate-input{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .75rem;border-radius:10px;backdrop-filter:blur(15px);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22)}
.plate-input input{width:3.2ch;padding:.35rem .4rem;border:none;outline:none;background:transparent;text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.06em;text-align:center}
.plate-input .sep{user-select:none;opacity:.7}
.plate-input:focus-within{border-color:rgba(255,255,255,.4);box-shadow:0 0 0 3px rgba(255,255,255,.08) inset}
#plate_letters,#a_plate_letters,#f_plate_letters{width:2.6ch}
#plate_numbers,#a_plate_numbers,#f_plate_numbers{width:4.6ch;text-align:right}


/* === Kennzeichen kompakt nebeneinander (inline Variante) === */
.plate-input {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  backdrop-filter: blur(15px);
  width: fit-content;
  margin-top: 4px;
}

.plate-input input {
  width: 3ch;
  text-align: center;
  text-transform: uppercase;
  border: none;
  background: transparent;
  outline: none;
  font-size: 1rem;
  color: inherit;
}

.plate-input .sep {
  opacity: 0.8;
  user-select: none;
}

.plate-input:focus-within {
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08) inset;
}


/* === Kennzeichen: drei sichtbare Eingabeboxen === */
/* Container ohne eigene Fläche, nur für Layout */
.plate-input {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Jede Box als eigenes Feld (optisch wie die übrigen Inputs) */
.plate-input input {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  min-height: 42px;
  min-width: 3.2ch;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  outline: none;
}

/* spezifische Breiten */
#plate_ort, #a_plate_ort, #f_plate_ort { min-width: 3.2ch; }
#plate_letters, #a_plate_letters, #f_plate_letters { min-width: 2.6ch; }
#plate_numbers, #a_plate_numbers, #f_plate_numbers { min-width: 4.6ch; text-align: right; }

/* Fokus pro Box */
.plate-input input:focus {
  border-color: rgba(255,255,255,0.40);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08) inset;
}

/* Separator als kleines Label */
.plate-input .sep {
  opacity: 0.9;
  font-weight: 600;
  user-select: none;
  line-height: 1;
}

/* Kleiner Responsive-Umbruch, wenn sehr wenig Platz ist */
@media (max-width: 360px) {
  .plate-input { flex-wrap: wrap; row-gap: 0.35rem; }
}


/* === Kennzeichen: kompakt, aber optisch wie die übrigen Felder === */
.plate-input {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;              /* kleinerer Abstand */
  flex-wrap: nowrap;         /* nicht umbrechen */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* gleiche Optik wie die restlichen Inputs */
.plate-input input {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;       /* wie andere Felder */
  padding: 0.55rem 0.70rem;  /* wie andere Felder */
  min-height: 44px;          /* wie andere Felder */
  text-align: center;
  text-transform: uppercase;
  outline: none;
  font-size: 1rem;
  color: inherit;
  line-height: 1.15;
}

/* kompaktere Breiten, damit alle 3 nebeneinander auf Mobile passen */
#plate_ort, #a_plate_ort, #f_plate_ort { min-width: 2.6ch; }       /* 1–3 Buchstaben */
#plate_letters, #a_plate_letters, #f_plate_letters { min-width: 2.4ch; } /* 1–2 Buchstaben */
#plate_numbers, #a_plate_numbers, #f_plate_numbers { min-width: 3.8ch; text-align: right; } /* 1–4 Ziffern */

/* Separator */
.plate-input .sep { opacity: 0.9; user-select: none; line-height: 1; }

/* Fokus-Effekt wie die übrigen Felder */
.plate-input input:focus {
  border-color: rgba(255,255,255,0.40);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08) inset;
}


/* === Kennzeichen: drei gleich große Felder (automatisch angepasst) === */
.plate-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
}

/* alle drei Felder gleich groß, optisch wie Standard-Inputs */
.plate-input input {
  flex: 1 1 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 0.55rem 0.7rem;
  height: 44px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  font-size: 1rem;
  color: inherit;
  min-width: 0; /* verhindert Überlauf */
}

/* Bindestriche als schmale Trennung */
.plate-input .sep {
  opacity: 0.8;
  font-weight: 600;
  user-select: none;
  flex: 0 0 auto;
  align-self: center;
}

/* Fokus-Effekt wie andere Felder */
.plate-input input:focus {
  border-color: rgba(255,255,255,0.40);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08) inset;
}

/* Auf sehr schmalen Displays (z. B. iPhone SE) leichtes Schrumpfen */
@media (max-width: 400px) {
  .plate-input { gap: 0.25rem; }
  .plate-input input { font-size: 0.95rem; padding: 0.5rem 0.6rem; }
}


/* === Kennzeichen: alle Felder zentriert (auch Zahlen) === */
.plate-input input {
  text-align: center !important;
}


/* === Kennzeichen: alle drei Felder zentriert (auch Zahlen) === */
.plate-input input {
  text-align: center !important;
}


/* === Kennzeichen: Zahlenfeld mittig ausgerichtet (Fix) === */
#plate_numbers, #a_plate_numbers, #f_plate_numbers {
  text-align: center !important;
}


/* === Kennzeichen: Responsive Grid (4 Felder + 3 Trenner) === */
.plate-input {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; /* 4 gleich große Felder */
  align-items: center;
  column-gap: 0.40rem;
  width: 100%;
  max-width: 100%;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Felder füllen automatisch die Spalten, kein Überlauf */
.plate-input input {
  min-width: 0;
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 0.55rem 0.7rem;
  height: 44px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  font-size: 1rem;
  color: inherit;
}

/* Trenner sind schmal und zentriert */
.plate-input .sep {
  width: 0.9rem;        /* fixe, kleine Breite */
  text-align: center;
  opacity: 0.8;
  font-weight: 600;
  user-select: none;
}

/* Fokus wie gehabt */
.plate-input input:focus {
  border-color: rgba(255,255,255,0.40);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08) inset;
}

/* Sehr schmale Screens: engeres Layout */
@media (max-width: 400px) {
  .plate-input { column-gap: 0.28rem; }
  .plate-input .sep { width: 0.7rem; }
  .plate-input input { padding: 0.5rem 0.6rem; font-size: 0.95rem; height: 42px; }
}


/* === Kennzeichen: ohne Bindestrich vor E (Grid 6 Spalten) === */
.plate-input {
  grid-template-columns: 1fr auto 1fr auto 1fr 1fr; /* 4 Felder, nur 2 Trenner */
}


/* === Kennzeichen: 3 gleich große Felder, 4. schmaler === */
.plate-input {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr 0.65fr; /* 4. Block schmaler, keine Trennung vor E */
  align-items: center;
  column-gap: 0.40rem;
  width: 100%;
  max-width: 100%;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Inputs füllen ihre Spalte aus, gleiches Look & Feel */
.plate-input input {
  min-width: 0;
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 0.55rem 0.7rem;
  height: 44px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  font-size: 1rem;
  color: inherit;
}

/* Trenner bleiben schmal */
.plate-input .sep {
  width: 0.9rem;
  text-align: center;
  opacity: 0.8;
  font-weight: 600;
  user-select: none;
}

/* Sehr schmale Screens: noch etwas schmaler und enger */
@media (max-width: 400px) {
  .plate-input { column-gap: 0.28rem; grid-template-columns: 1fr auto 1fr auto 1fr 0.6fr; }
  .plate-input .sep { width: 0.7rem; }
  .plate-input input { padding: 0.5rem 0.6rem; font-size: 0.95rem; height: 42px; }
}


/* === Kennzeichen Grid (stabil mit Mindestbreiten) === */
.plate-input {
  display: grid;
  grid-template-columns:
    minmax(5.0rem, 1fr)  /* Ort (AUR)   */
    auto                 /* '-'         */
    minmax(4.2rem, 1fr)  /* Buchstaben  */
    auto                 /* '-'         */
    minmax(4.2rem, 1fr)  /* Zahlen      */
    minmax(2.8rem, 0.6fr)/* E (schmal)  */;
  align-items: center;
  column-gap: 0.40rem;
  width: 100%;
  max-width: 100%;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.plate-input input {
  min-width: 0;
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 0.55rem 0.7rem;
  height: 44px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  font-size: 1rem;
  color: inherit;
}

/* Trenner bleiben schmal */
.plate-input .sep {
  width: 0.9rem;
  text-align: center;
  opacity: 0.8;
  font-weight: 600;
  user-select: none;
}

/* Sehr schmale Screens */
@media (max-width: 400px) {
  .plate-input { column-gap: 0.28rem; 
    grid-template-columns:
      minmax(4.6rem, 1fr) auto minmax(3.8rem, 1fr) auto minmax(3.8rem, 1fr) minmax(2.6rem, 0.6fr);
  }
  .plate-input .sep { width: 0.7rem; }
  .plate-input input { padding: 0.5rem 0.6rem; font-size: 0.95rem; height: 42px; }
}


/* === Kennzeichen FINAL: robustes Flex-Layout mit sicheren Mindestbreiten === */
.plate-input {
  display: flex !important;      /* überschreibt Grid/Flex-Reste */
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Nur die Inputs bekommen die Input-Optik */
.plate-input input {
  flex: 1 1 0;                   /* alle wachsen gleichmäßig */
  min-width: 4.0rem;             /* verhindert Kollaps (Ort/Buchstaben/Zahlen) */
  width: auto;
  box-sizing: border-box;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 0.55rem 0.7rem;
  height: 44px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  font-size: 1rem;
  color: inherit;
}

/* Der E-Block bewusst schmaler, aber nicht zu klein */
#plate_suffix, #a_plate_suffix, #f_plate_suffix {
  flex: 0 0 2.8rem;
  min-width: 2.6rem;
}

.plate-input .sep {
  flex: 0 0 auto;
  width: 0.8rem;                 /* schmaler Separator */
  text-align: center;
  opacity: 0.8;
  font-weight: 600;
  user-select: none;
  line-height: 1;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}

/* Mobile-Tuning */
@media (max-width: 400px) {
  .plate-input { gap: 0.28rem; }
  .plate-input input { min-width: 3.6rem; padding: 0.5rem 0.6rem; font-size: 0.95rem; height: 42px; }
  #plate_suffix, #a_plate_suffix, #f_plate_suffix { flex-basis: 2.5rem; min-width: 2.4rem; }
  .plate-input .sep { width: 0.68rem; }
}


/* === FINAL: 100% responsive Kennzeichen-Grid (smart widths) === */
.plate-input {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns:
    minmax(0, 1fr)  /* Ort */
    auto            /* '-' */
    minmax(0, 1fr)  /* Buchstaben */
    auto            /* '-' */
    minmax(0, 1fr)  /* Zahlen */
    minmax(0, 0.60fr); /* E (schmal) */
  column-gap: 0.40rem;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Inputs füllen ihre Spalte komplett aus, keine Mindestbreiten die kollabieren lassen */
.plate-input input {
  width: 100% !important;
  min-width: 0 !important;
  flex: unset !important;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 0.55rem 0.70rem;
  height: 44px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  font-size: 1rem;
  color: inherit;
  box-sizing: border-box;
}

/* E-Feld: kleinerer Anteil bereits über Grid-Spalte geregelt – keine fixe Basis hier */
#plate_suffix, #a_plate_suffix, #f_plate_suffix {}

/* Trenner kompakt und ohne eigene Optik */
.plate-input .sep {
  width: 0.8rem;
  text-align: center;
  opacity: 0.8;
  font-weight: 600;
  user-select: none;
  line-height: 1;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Sehr schmale Screens */
@media (max-width: 400px) {
  .plate-input { column-gap: 0.26rem; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) minmax(0,0.55fr); }
  .plate-input .sep { width: 0.66rem; }
  .plate-input input { padding: 0.5rem 0.6rem; font-size: 0.95rem; height: 42px; }
}

/* Sicherheitsnetz: Falls ein Eltern-Label die Breite einschränkt, strecken */
label > .plate-input { width: 100% !important; display: grid !important; }



/* Span both columns in two-column grids */
.grid-2 .span-2{ grid-column: 1 / -1; }



/* === Layout Fix: Triple-Block + Vorname/Personalnummer Ordnung === */
.triple-input {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
}
.triple-input > label { margin: 0; }
.triple-input .triple-hint {
  grid-column: 1 / -1;
  margin-top: 2px;
  margin-bottom: 0;
}

/* Nach dem Triple-Block: Vorname und Personalnummer über volle Breite */
.grid-2 label[for="first"],
.grid-2 label[for="vorname"],
.grid-2 label[for="name"] {
  grid-column: 1 / -1;
}

.grid-2 label[for="personalnummer"],
.grid-2 label[for="personal"],
.grid-2 label[for="persnr"],
.grid-2 label[for="employee"],
.grid-2 label[for="employee_number"] {
  grid-column: 1 / -1;
}


/* === Patch: Triple-Block Hinweis dezent "muted" darstellen ============== */
.triple-input .triple-hint,
.triple-hint.muted {
  color: var(--muted) !important;   /* gedämpfter Ton */
  font-size: 0.92em;                /* minimal kleiner als Fließtext */
  line-height: 1.35;
  margin-top: 2px;                  /* dichter an den drei Feldern */
  margin-bottom: 0;
  letter-spacing: 0.1px;
}



/* === Make E-Mail field full-width like Vorname/Personalnummer === */
.grid-2 label[for="email"],
.grid-2 label[for="mail"],
.grid-2 .span-2 {
  grid-column: 1 / -1;
}

.grid-2 label[for="email"] input,
.grid-2 label[for="mail"] input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* === Patch: Platzhalter in Kennzeichen-Eingabe dezenter & kleiner === */
.plate-input input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important; /* heller, gedämpfter Ton */
  font-size: 0.85rem !important;               /* etwas kleiner */
  font-weight: 400 !important;                 /* keine starke Betonung */
  letter-spacing: 0.3px;
  opacity: 0.8;
}


/* === Patch: Einheitliche Platzhalter für alle Eingabefelder (muted & kleiner) === */
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: rgba(255, 255, 255, 0.45) !important; /* heller, dezenter Ton */
  font-size: 0.85rem !important;               /* leicht kleiner */
  font-weight: 400 !important;
  letter-spacing: 0.3px;
  opacity: 0.8;
}

/* Kennzeichen-Eingabe übernimmt denselben Stil */
.plate-input input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px;
  opacity: 0.8;
}


/* === Patch: Hinweistext unter "Meine Buchungen" ausblenden === */
#mybookings + p.muted {
  display: none !important;
}