/* Aussehen des Verwaltungs-Portals. Farben passend zum Besichtigungs-Tool
   (Magenta + Petrol – Sidenzia-Palette). */
:root{
  --petrol:#2F514F; --petrol2:#3d6b68; --magenta:#D71153; --magenta-h:#b80e44;
  --ink:#4f4f4f; --muted:#717070; --bg:#f5f5f5; --line:#dcdcdc; --danger:#c53030;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);}

.topbar{display:flex;justify-content:space-between;align-items:center;
        background:var(--petrol);color:#fff;padding:14px 24px;}
.brand{font-weight:800;font-size:19px;letter-spacing:-.3px;}
.brand span{color:#fff;font-weight:600;opacity:.7;}
.link{color:rgba(255,255,255,.8);text-decoration:none;font-weight:600;}
.link:hover{color:#fff;}

.container{max-width:900px;margin:26px auto;padding:0 18px;}

.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:20px;}
.card.narrow{max-width:380px;margin:8vh auto;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:680px){.grid2{grid-template-columns:1fr;}}

h1{font-size:22px;color:var(--petrol);margin:0 0 6px;font-weight:600;}
h2{font-size:17px;color:var(--petrol);margin:0 0 14px;font-weight:600;}
.muted{color:var(--muted);font-size:14px;}

label{display:block;font-size:14px;font-weight:600;color:#33414f;margin:10px 0 4px;}
input[type=text],input[type=email],input[type=password],input[type=file],
input[type=number],input[type=time],input[type=date],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:15px;font-family:inherit;margin-top:3px;background:#fff;color:inherit;}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(215,17,83,.35);border-color:var(--magenta);}
textarea{line-height:1.5;}

.btn{margin-top:14px;background:var(--magenta);color:#fff;font-weight:700;border:0;
     padding:11px 20px;border-radius:8px;font-size:15px;cursor:pointer;display:inline-block;
     text-decoration:none;text-align:center;}
.btn:hover{background:var(--magenta-h);}
.btn-petrol{background:var(--petrol);} .btn-petrol:hover{background:var(--petrol2);}
.btn-outline{background:transparent;color:var(--petrol);border:1.5px solid var(--petrol);}
.btn-outline:hover{background:var(--petrol);color:#fff;}
.req{color:var(--magenta);}

table{width:100%;border-collapse:collapse;margin-top:6px;}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);font-size:14px;}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;}
tr:hover td{background:#f7f9f8;}

.link-danger{background:none;border:0;color:var(--danger);cursor:pointer;font-size:13px;text-decoration:underline;}

.flash{padding:12px 16px;border-radius:8px;margin-bottom:18px;font-size:14px;}
.flash-ok{background:#edf7f0;color:#1e6b3c;border:1px solid #b7e2c4;}
.flash-err{background:#fdf0f3;color:#9b1c3c;border:1px solid #f3c2c2;}

/* Kachel-Übersicht (Startseite nach dem Login) */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px;}
@media(max-width:680px){.tiles{grid-template-columns:1fr;}}
.tile{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
      border-radius:14px;padding:26px;border-top:3px solid var(--petrol);
      transition:transform .12s,box-shadow .12s,border-color .12s;}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(47,81,79,.14);border-top-color:var(--magenta);}
.tile-icon{font-size:34px;line-height:1;margin-bottom:14px;}
.tile h2{margin:0 0 6px;}
.tile p{margin:0;}
.tile .tile-go{display:inline-block;margin-top:16px;color:var(--magenta);font-weight:700;font-size:14px;}
.backlink{display:inline-block;margin-bottom:14px;color:var(--petrol);text-decoration:none;font-weight:600;font-size:14px;}
.backlink:hover{color:var(--magenta);}

/* ── Besichtigungen: Objekt-Kopf, Termin-Karten, Badges ───────── */
.prop-hero{background:#fff;border:1px solid var(--line);border-top:3px solid var(--petrol);
           border-radius:12px;padding:22px 24px;margin-bottom:20px;}
.prop-hero h1{margin:0 0 4px;}
.prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:16px;}
@media(max-width:560px){.prop-grid{grid-template-columns:1fr;}}
.prop-item .plabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
                   color:var(--muted);margin-bottom:2px;}
.prop-item .pval{font-size:15px;color:#33414f;font-weight:600;}

.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;
       text-transform:uppercase;padding:3px 9px;border-radius:999px;}
.badge-petrol{background:#e0eeec;color:var(--petrol);}
.badge-magenta{background:#fde8ef;color:var(--magenta);}
.badge-green{background:#e6f4ea;color:#1e6b3c;}
.badge-gray{background:#f0f0f0;color:var(--muted);}
.badge-orange{background:#fff3e0;color:#b45309;}

.slot{background:#fff;border:1px solid var(--line);border-left:3px solid var(--petrol);
      border-radius:10px;padding:14px 18px;margin-bottom:12px;
      display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.slot.cancelled{border-left-color:var(--danger);opacity:.85;}
.slot.full{border-left-color:var(--line);}
.slot-left{display:flex;align-items:center;gap:18px;}
.date-box{text-align:center;min-width:46px;padding-right:18px;border-right:1px solid var(--line);}
.date-box .day{font-size:30px;font-weight:300;color:var(--petrol);line-height:1;}
.date-box .mon{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:3px;}
.slot.cancelled .date-box .day{color:var(--muted);text-decoration:line-through;}
.slot-meta .weekday{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);}
.slot-meta .time{font-weight:600;font-size:16px;color:#33414f;}
.slot-meta .spots{font-size:13px;margin-top:3px;}
.spots-ok{color:#2d7d46;} .spots-few{color:#b7791f;} .spots-full{color:var(--danger);}
.slot-reg{font-size:13px;color:var(--muted);margin-top:8px;flex-basis:100%;}
.slot form{margin:0;} .slot .btn{margin-top:0;}

.copy-row{display:flex;gap:8px;margin:4px 0 16px;}
.copy-row input{flex:1;background:#f7f9f8;font-size:13px;}
.copy-row .btn{margin-top:0;white-space:nowrap;}

.dropzone{border:2px dashed var(--line);border-radius:12px;padding:28px;text-align:center;
          cursor:pointer;background:#f8fafc;transition:background .12s,border-color .12s;}
.dropzone:hover{border-color:var(--petrol);}
.dropzone strong{color:var(--petrol);}

.waitbox{border:1px dashed var(--line);border-radius:10px;padding:18px;background:#fafbfc;}

/* ── Mobil (Smartphone) ───────────────────────────────────────── */
@media(max-width:560px){
  .topbar{padding:12px 16px;}
  .brand{font-size:17px;}
  .container{margin:18px auto;padding:0 12px;}
  .card{padding:16px;border-radius:10px;}
  .card.narrow{margin:6vh auto;max-width:100%;}
  h1{font-size:20px;}
  .tile{padding:20px;}
  .tile-icon{font-size:30px;}
  /* Buttons über volle Breite, leichter zu treffen */
  .btn{width:100%;}
  /* Eingabefelder etwas grösser (verhindert iOS-Zoom) */
  input[type=text],input[type=email],input[type=password],input[type=file]{font-size:16px;}
  /* Tabellen horizontal scrollbar statt Überlauf */
  table{display:block;overflow-x:auto;white-space:nowrap;}
}