:root{
    --tetzner-blue:#003872;
    --tetzner-yellow:#FFDA61;
    --tetzner-yellow-light:#FFF4C8;
    --danger:#D32F2F;
    --danger-light:#FFD6D6;
    --white:#FFFFFF;
    --text:#102033;
}

*{ box-sizing:border-box; }

body{
    font-family:'Lato', Arial, sans-serif;
    background:var(--tetzner-yellow);
    color:var(--text);
    margin:0;
    padding:20px;
}

.container{
    max-width:560px;
    margin:auto;
}

.logo{
    text-align:center;
    margin:8px 0 18px;
}

.logo img{
    max-width:220px;
    width:70%;
    height:auto;
}

h1{
    text-align:center;
    margin:0 0 24px;
    color:var(--tetzner-blue);
    font-weight:900;
}

h2{
    margin-top:28px;
    padding:13px;
    background:var(--tetzner-blue);
    color:var(--tetzner-yellow);
    border-radius:12px;
    font-size:21px;
}

.field-label{
    display:block;
    font-size:18px;
    font-weight:900;
    margin-bottom:8px;
    color:var(--tetzner-blue);
}

.plate-row{
    display:grid;
    grid-template-columns:1fr 1fr 1.3fr;
    gap:8px;
    margin-bottom:20px;
}

.plate-row input,
.search-input{
    width:100%;
    padding:18px 8px;
    font-size:24px;
    font-weight:900;
    text-align:center;
    border:3px solid var(--tetzner-blue);
    border-radius:12px;
    background:var(--white);
    color:var(--tetzner-blue);
    text-transform:uppercase;
}

.search-input{
    text-align:left;
    padding:18px;
    margin-bottom:14px;
}

.btn{
    display:block;
    width:100%;
    padding:20px;
    margin-bottom:15px;
    border:3px solid var(--tetzner-blue);
    border-radius:12px;
    font-size:21px;
    font-weight:900;
    cursor:pointer;
    text-align:center;
    text-decoration:none;
}

.btn:disabled{ opacity:.55; }

.camera,
.upload,
.search{
    background:var(--tetzner-blue);
    color:var(--tetzner-yellow);
}

.gallery,
.view,
.back{
    background:var(--white);
    color:var(--tetzner-blue);
}

.counter{
    text-align:center;
    font-size:22px;
    font-weight:900;
    margin:20px 0;
    color:var(--tetzner-blue);
}

.file-list{ margin-top:20px; }

.file-item,
.card,
.photo{
    background:var(--white);
    border-radius:14px;
    padding:13px;
    margin-bottom:15px;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.card{
    display:block;
    text-decoration:none;
    color:var(--tetzner-blue);
    font-size:23px;
    font-weight:900;
}

.small{
    font-size:16px;
    color:#4d5a68;
    margin-top:5px;
    font-weight:700;
}

.file-title{
    font-size:16px;
    font-weight:900;
    margin-bottom:10px;
    word-break:break-all;
    color:var(--tetzner-blue);
}

.file-row{
    display:flex;
    gap:10px;
    align-items:center;
}

.file-row select{
    flex:1;
    padding:14px;
    font-size:18px;
    font-weight:900;
    border:3px solid var(--tetzner-yellow);
    border-radius:10px;
    background:var(--tetzner-yellow-light);
    color:var(--tetzner-blue);
}

.file-row select.reklamation{
    background:var(--danger-light);
    border-color:var(--danger);
    color:var(--danger);
}

.delete-btn{
    border:none;
    background:var(--danger);
    color:var(--white);
    font-size:20px;
    font-weight:900;
    border-radius:10px;
    padding:15px 17px;
    cursor:pointer;
}

.info,
.empty{
    margin-top:20px;
    text-align:center;
    font-size:18px;
    font-weight:700;
    white-space:pre-line;
    color:var(--tetzner-blue);
}

.grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}

.photo{ padding:8px; }

.photo img{
    width:100%;
    border-radius:10px;
    display:block;
}

.filename{
    font-size:12px;
    color:#4d5a68;
    margin-top:6px;
    word-break:break-all;
}

.full-image-page{
    background:#111;
}

.full-image-page .container{
    max-width:900px;
}

.full-image{
    width:100%;
    height:auto;
    border-radius:12px;
    background:#222;
}

/* ── User-Bar (Header) ────────────────────────────────────────────────────── */
.user-bar{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--tetzner-blue);
    color:var(--tetzner-yellow);
    border-radius:12px;
    padding:10px 14px;
    margin-bottom:18px;
    font-size:15px;
    font-weight:700;
    flex-wrap:wrap;
}
.user-bar__name{ flex:1; }
.user-bar__link{
    color:var(--tetzner-yellow);
    text-decoration:underline;
    white-space:nowrap;
}

/* ── Alerts ──────────────────────────────────────────────────────────────────*/
.alert{
    padding:14px;
    border-radius:10px;
    margin-bottom:16px;
    font-weight:700;
    font-size:16px;
}
.alert-error  { background:var(--danger-light);       color:var(--danger); }
.alert-success{ background:#d4edda;                   color:#155724;       }

/* ── Login ───────────────────────────────────────────────────────────────────*/
.text-input{
    width:100%;
    padding:16px;
    font-size:18px;
    font-weight:700;
    border:3px solid var(--tetzner-blue);
    border-radius:12px;
    background:var(--white);
    color:var(--tetzner-blue);
    margin-bottom:14px;
    display:block;
}

/* ── Admin ───────────────────────────────────────────────────────────────────*/
.admin-section{
    background:var(--white);
    border-radius:14px;
    padding:16px;
    margin-bottom:20px;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.admin-section summary{ cursor:pointer; font-size:18px; }
.admin-form{ margin-top:14px; }

.user-card{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:flex-start;
    justify-content:space-between;
}
.user-card.inactive{ opacity:.6; }
.user-card__info{ flex:1; min-width:180px; }
.user-card__actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

.btn.small{
    display:inline-block;
    width:auto;
    padding:10px 14px;
    font-size:15px;
    margin-bottom:0;
    border-radius:10px;
}
.btn--warn   { background:#fff3cd; color:#856404; border-color:#ffc107; }
.btn--ok     { background:#d4edda; color:#155724; border-color:#28a745; }
.btn--danger { background:var(--danger); color:var(--white); border-color:var(--danger); }

.badge{
    display:inline-block;
    font-size:12px;
    font-weight:900;
    padding:2px 8px;
    border-radius:6px;
    margin-left:6px;
    text-transform:uppercase;
}
.badge--admin   { background:var(--tetzner-blue);   color:var(--tetzner-yellow); }
.badge--user    { background:#e0e0e0;                color:#333; }
.badge--inactive{ background:var(--danger);          color:var(--white); }

.meta{ color:#4d5a68; }

/* ── Land-Umschalter ─────────────────────────────────────────────────────── */
.country-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

.country-btn {
    padding: 14px;
    font-size: 18px;
    font-weight: 900;
    border: 3px solid var(--tetzner-blue);
    border-radius: 12px;
    background: var(--white);
    color: var(--tetzner-blue);
    cursor: pointer;
}

.country-btn.active {
    background: var(--tetzner-blue);
    color: var(--tetzner-yellow);
}

/* CH-Kennzeichen: 2 Felder statt 3 */
.plate-row--ch {
    grid-template-columns: 1fr 2fr;
}