/* Anhänger Verleih Frontend v0.5 */
.av-wrap { max-width:860px; margin:0 auto; font-size:15px; }
.av-wrap h2.av-title { margin-bottom:.5em; }
.av-beschreibung { margin-bottom:1em; }
.av-bild img { max-width:100%; height:auto; border-radius:4px; margin-bottom:1.5em; }

/* ── Kalender ──────────────────────────────────────────────── */
.av-cal-outer { margin-bottom:1.5em; }
.av-cal-nav { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.av-nav-btn {
    background:none; border:1px solid #ccc; border-radius:50%;
    width:34px; height:34px; font-size:22px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:#333; padding:0;
}
.av-nav-btn:hover { background:#f0f0f0; }
.av-cal-heading-text { font-size:1.1em; font-weight:700; min-width:180px; }

.av-anleitung {
    background:#e3f2fd; border-left:4px solid #1976d2;
    padding:7px 12px; border-radius:0 4px 4px 0;
    margin-bottom:10px; font-size:14px; color:#0d47a1;
}

/* Zwei Grids: Kopfzeile + Tage */
.av-cal-grid {
    display:grid;
    grid-template-columns:repeat(7, minmax(36px,1fr));
    gap:3px;
    max-width:420px;
}
.av-cal-hdr {
    text-align:center; font-weight:700; font-size:13px;
    padding:6px 2px; color:#555;
}
/* Tage */
.av-day {
    text-align:center; padding:9px 4px; border-radius:5px;
    font-size:14px; font-weight:600; min-height:36px;
    display:flex; align-items:center; justify-content:center;
}
.av-empty    { background:transparent; }
.av-past     { background:#f5f5f5; color:#bbb; }
.av-belegt   { background:#e53935; color:#fff; }
.av-frei     { background:#c8e6c9; color:#1b5e20; }
.av-frei:hover { filter:brightness(.88); }
.av-abholung { background:#1565c0; color:#fff; }
.av-zeitraum { background:#bbdefb; color:#0d47a1; }
.av-rueckgabe{ background:#e65100; color:#fff; }
.av-gleichtag{ background:linear-gradient(135deg,#1565c0 50%,#e65100 50%); color:#fff; }

/* ── Popup ─────────────────────────────────────────────────── */
.av-popup {
    background:#fff; border:1px solid #ccc; border-radius:8px;
    padding:12px 16px; margin:8px 0; max-width:340px;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.av-popup strong { display:block; margin-bottom:8px; font-size:14px; }
.av-popup-row { display:flex; gap:8px; align-items:center; }
.av-popup-row input[type="time"] {
    padding:6px 10px; border:1px solid #ccc; border-radius:4px; font-size:15px;
}
.av-popup-ok {
    background:#1565c0; color:#fff; border:none; border-radius:4px;
    padding:7px 18px; font-size:14px; font-weight:700; cursor:pointer;
}
.av-popup-ok:hover { background:#0d47a1; }

/* ── Auswahl-Box ───────────────────────────────────────────── */
.av-auswahl-box {
    background:#f8f9fa; border:1px solid #dee2e6; border-radius:6px;
    padding:10px 14px; margin:10px 0 4px;
}
.av-auswahl-row { display:flex; align-items:center; gap:8px; padding:3px 0; font-size:14px; }
.av-tarif-row { border-top:1px solid #ddd; margin-top:5px; padding-top:5px; font-weight:600; }
.av-reset-btn {
    margin-left:auto; background:none; border:1px solid #aaa;
    border-radius:4px; padding:2px 9px; font-size:12px; cursor:pointer; color:#555;
}
.av-reset-btn:hover { background:#f0f0f0; }
.av-warn { color:#c62828; font-size:13px; padding-top:4px; }

/* ── Legende ───────────────────────────────────────────────── */
.av-legende {
    display:flex; flex-wrap:wrap; gap:6px 16px;
    list-style:none; padding:0; margin:10px 0 0; font-size:13px; color:#444;
}
.av-legende li { display:flex; align-items:center; gap:5px; }
.av-dot { display:inline-block; width:16px; height:16px; border-radius:3px; flex-shrink:0; }

/* ── Formular ──────────────────────────────────────────────── */
.av-hr { margin:1.4em 0; border:none; border-top:1px solid #ddd; }
.av-section { margin-bottom:1em; }
.av-row { display:flex; align-items:flex-start; gap:1em; margin-bottom:.8em; flex-wrap:wrap; }
.av-label { min-width:220px; font-weight:600; padding-top:6px; flex-shrink:0; }
.av-fields { display:flex; gap:.5em; flex-wrap:wrap; }
.av-input, .av-input-sm, .av-input-wide, .av-input-plz {
    padding:6px 10px; border:1px solid #ccc; border-radius:4px; font-size:15px;
}
.av-input      { min-width:200px; }
.av-input-wide { min-width:300px; }
.av-input-plz  { max-width:90px; }
.av-input-sm   { min-width:140px; }
textarea.av-agb { width:100%; max-width:600px; font-size:13px; line-height:1.5; }

/* ── Extras ────────────────────────────────────────────────── */
.av-extra-row  { align-items:center; gap:.8em; }
.av-extra-label { display:flex; align-items:center; gap:.5em; cursor:pointer; min-width:280px; }
.av-extra-label input[type="checkbox"] { width:17px; height:17px; flex-shrink:0; cursor:pointer; }
.av-extra-preis { font-weight:700; }
.av-inklusive { color:#2e7d32; font-weight:600; font-size:13px; }

/* ── AGB ───────────────────────────────────────────────────── */
.av-cb-row { align-items:flex-start; gap:.75em; flex-wrap:nowrap; }
.av-cb-row input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; margin-top:3px; cursor:pointer; }

/* ── Preis + Button ────────────────────────────────────────── */
.av-preis-row { display:flex; align-items:flex-end; justify-content:space-between; margin-top:1.5em; flex-wrap:wrap; gap:1em; }
.av-preis-anzeige { font-size:1.3em; margin:.3em 0 0; }
.av-btn-reservieren {
    background:#cc0000; color:#fff; border:none; border-radius:4px;
    padding:12px 28px; font-size:16px; font-weight:700; cursor:pointer;
}
.av-btn-reservieren:hover { background:#990000; }
.av-warte { font-style:italic; color:#555; margin-top:.5em; }
.av-rot   { color:#c62828; }
.av-grau  { color:#555; font-size:13px; }
.av-success { background:#e8f5e9; border:1px solid #a5d6a7; border-radius:4px; padding:1em 1.25em; color:#2e7d32; margin-top:1em; }
.av-error   { background:#ffebee; border:1px solid #ef9a9a; border-radius:4px; padding:1em 1.25em; color:#c62828; margin-top:1em; }

@media (max-width:600px) {
    .av-label  { min-width:0; width:100%; padding-top:0; }
    .av-row    { flex-direction:column; gap:.4em; }
    .av-preis-row { flex-direction:column; }
    .av-cal-grid  { max-width:100%; }
    .av-day { padding:8px 2px; font-size:13px; }
}

/* ── Gleicher Tag Abholung+Rückgabe ──────────────────────────── */
.av-gleichtag { background: linear-gradient(135deg,#1565c0 50%,#e65100 50%); color:#fff; }

/* ── Teilweise belegt (blau) ─────────────────────────────────── */
.av-teil { background:#bbdefb; color:#0d47a1; }
.av-teil:hover { filter:brightness(.9); }

/* ── Kunden-Login-Box ────────────────────────────────────────── */
.av-login-box { background:#f8f9fa; border:1px solid #dee2e6; border-radius:6px; padding:1em 1.2em; margin-bottom:1em; }
.av-login-hint { margin:0 0 .6em; font-size:14px; color:#555; }
.av-login-row { display:flex; gap:.6em; flex-wrap:wrap; align-items:center; }
.av-login-found { font-size:14px; margin-bottom:.6em; }

.av-buchungen-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:.4em; }
.av-buchungen-table th { background:#f0f0f0; padding:6px 8px; text-align:left; border-bottom:2px solid #ddd; }
.av-buchungen-table td { padding:5px 8px; border-bottom:1px solid #eee; }
.av-buchungen-table tr:hover td { background:#fafafa; }

.av-status-badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:700; text-transform:uppercase; }
.av-status-neu          { background:#fff3e0; color:#e65100; }
.av-status-bestätigt    { background:#e8f5e9; color:#2e7d32; }
.av-status-abgeschlossen{ background:#e3f2fd; color:#1565c0; }
.av-status-storniert    { background:#ffebee; color:#c62828; }

.av-btn-secondary {
    background:#fff; color:#333; border:1px solid #ccc; border-radius:4px;
    padding:7px 16px; font-size:14px; cursor:pointer;
}
.av-btn-secondary:hover { background:#f5f5f5; }

/* ── Modal Overlay ───────────────────────────────────────────── */
.av-modal-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,.55); z-index:99999;
    display:flex; align-items:center; justify-content:center;
    padding:1rem;
    box-sizing:border-box;
}
.av-modal {
    background:#fff; border-radius:8px; width:100%; max-width:680px;
    max-height:90vh; overflow-y:auto;
    box-shadow:0 8px 32px rgba(0,0,0,.25);
    display:flex; flex-direction:column;
}
.av-modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.4rem; border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; z-index:1;
}
.av-modal-header h3 { margin:0; font-size:1.1em; }
.av-modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:#666; padding:2px 6px; line-height:1; }
.av-modal-close:hover { color:#000; }

.av-modal-summary {
    background:#f0f7ff; border-bottom:1px solid #c8dff8;
    padding:.8em 1.4em; font-size:14px; display:flex; flex-wrap:wrap; gap:.4em 1.5em;
}
.av-modal-preis { font-size:1.05em; width:100%; margin-top:.2em; }

.av-modal-body { padding:1rem 1.4rem; }
.av-modal-body h4 { margin:.8em 0 .6em; font-size:1em; border-bottom:1px solid #eee; padding-bottom:.3em; }

.av-modal-footer {
    display:flex; align-items:center; gap:.8em; justify-content:flex-end;
    padding:.8rem 1.4rem; border-top:1px solid #eee; position:sticky; bottom:0; background:#fff;
}

@media(max-width:500px){
    .av-modal-summary { flex-direction:column; gap:.2em; }
    .av-modal-footer  { flex-direction:column; }
}

/* ── Popup-Hinweis (Öffnungszeiten) ──────────────────────────── */
.av-popup-hinweis {
    font-size: 12px; color: #1565c0; margin-bottom: 6px;
    min-height: 16px;
}

/* ── OTP-Login-Box ───────────────────────────────────────────────── */
.av-otp-box {
    background: #f8f9ff;
    border: 1px solid #dde3f5;
    border-radius: 8px;
    padding: 1em 1.25em;
    margin-bottom: 1.2em;
}
.av-otp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: .8em;
    font-size: 14px;
    color: #444;
}
.av-otp-icon { font-size: 20px; }
.av-otp-step { }
.av-otp-row  { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; margin-bottom: .5em; }

/* Code-Eingabefeld: groß und deutlich */
.av-otp-code-input {
    font-size: 22px !important;
    letter-spacing: 6px;
    font-weight: 700;
    width: 160px !important;
    text-align: center;
    padding: 8px 10px !important;
}

.av-btn-otp {
    background: #1e3a8a;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.av-btn-otp:hover:not(:disabled) { background: #1e40af; }
.av-btn-otp:disabled { opacity: .6; cursor: default; }

.av-btn-otp-ghost {
    background: none;
    color: #1e3a8a;
    border: 1px solid #1e3a8a;
    border-radius: 4px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
}
.av-btn-otp-ghost:hover { background: #eff3ff; }

.av-otp-hint { font-size: 13px; color: #1e40af; margin-bottom: .5em; }

.av-otp-msg { font-size: 13px; padding: 6px 10px; border-radius: 4px; margin-top: .4em; }
.av-otp-msg--ok  { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.av-otp-msg--err { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }

.av-otp-countdown { font-size: 12px; color: #6b7280; margin-top: .4em; }
#av-otp-timer { font-weight: 700; color: #1e3a8a; }

/* Erfolgs-Banner */
.av-otp-success-banner {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.av-otp-abmelden {
    margin-left: auto;
    background: none;
    border: 1px solid #6ee7b7;
    color: #065f46;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
}
.av-otp-abmelden:hover { background: #d1fae5; }

/* Buchungs-Tabelle */
.av-otp-buchungen-titel { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #444; }
.av-otp-history { width: 100%; border-collapse: collapse; font-size: 12px; }
.av-otp-history th { background: #f0f4ff; padding: 6px 8px; text-align: left; border-bottom: 2px solid #c7d2fe; color: #3730a3; }
.av-otp-history td { padding: 5px 8px; border-bottom: 1px solid #eee; }
.av-otp-history tr:hover td { background: #fafbff; }

/* Status-Badges in OTP-Tabelle */
.av-st-ok     { background: #d1fae5; color: #065f46; }
.av-st-storno { background: #fee2e2; color: #991b1b; }
.av-st-neu    { background: #fef3c7; color: #92400e; }