/* =========================
   Basis / Variablen
========================= */

:root{
  --bg:#cfcaca;
  --card:#f3f3f3;
  --text:#1f1f1f;
  --muted:#6b6b6b;
  --accent:#3f51b5;

  --shadow:0 10px 25px rgba(0,0,0,.12);
  --shadow2:0 6px 16px rgba(0,0,0,.10);
  --radius:16px;
}

body{
  background:var(--bg);
  margin:0;
  font-family:Arial,system-ui,sans-serif;
  color:var(--text);
}


/* =========================
   Layout Wrapper
========================= */

.page{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:24px 12px 40px;
}

.wrap{
  width:100%;
  max-width:820px;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:stretch;
}


/* =========================
   Top: Logo + Button
========================= */
.logoLink {
  display: flex;
  justify-content: center;   /* horizontal mittig */
  align-items: center;
  width: 100%;
  margin: 20px 0;
}

.logoImg {
  max-width: 200px; /* optional */
  height: auto;
}

.primaryBtn{
  width:100%;
  border-radius:999px;
  padding:14px 18px;
  font-weight:700;
  text-transform:none;
}

.primaryLink{
  width:100%;
  text-decoration:none;
  display:block;
}

/* MDL überschreiben */
.primaryBtn.mdl-button{
  background:#8f8f8f;
  color:#fff;

  font-size:18px;     /* 👈 größer */
  font-weight:800;
  height:auto;        /* MDL fix height killen */
  padding:18px 22px;  /* mehr Luft */
  line-height:1.2;
}



/* =========================
   Flash Message
========================= */

.flash-msg{
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:12px 16px;
  background:#ffe9b3;
  border:1px solid #e0b200;
  border-radius:12px;
  font-weight:700;
  text-align:center;
  color:#5a4300;
  box-shadow:var(--shadow2);
}


/* =========================
   Einsatz Cards (verbessert)
========================= */

.einsatzCard{
  background:#f4f4f4;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);

  padding:18px 16px;

  text-decoration:none;
  color:inherit;

  transition:.12s;
  display:block;
}

.einsatzCard:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}


/* obere Zeile: Nummer + Datum klein */
.einsatzHead{
  display:flex;
  justify-content:space-between;
  align-items:center;

  font-size:12px;
  color:#777;

  margin-bottom:8px;
}

/* Nummer dezenter */
.einsatzNr{
  font-weight:700;
  font-size:12px;
  background:#e6e6e6;
  padding:4px 8px;
  border-radius:999px;
}

/* Zeit klein + grau */
.einsatzTime{
  font-size:12px;
  color:#888;
}


/* 🔥 HIER PASSIERT DER MAGIC */
.einsatzText{
  font-size:17px;        /* größer */
  font-weight:800;       /* fetter */
  line-height:1.35;
  color:#1f1f1f;

  margin-top:4px;
}


/* optional Meta unten */
.einsatzMeta{
  margin-top:10px;
  font-size:12px;
  color:#777;
}

.einsatzLink{
  text-decoration:none;
  width:100%;
  display:flex;
  justify-content:center;
}

/* Wichtig: MDL-Defaults überschreiben */
.einsatzBtn.mdl-button{
  width:100%;
  max-width:520px;

  height:auto;              /* MDL fixed height killen */
  line-height:1.25;         /* statt 36px */
  padding:16px 18px;

  white-space:normal;       /* MDL nowrap killen */
  overflow:visible;         /* falls hidden gesetzt ist */
  text-transform:none;

  border-radius:14px;
  background:#e0e0e0;
  color:#333;

  display:block;            /* stabiler für mehrzeilig */
}

.einsatzBtnText{
  text-align:center;
}

.einsatzBtnText .line1{ font-weight:700; }
.einsatzBtnText .line2{ font-size:13px; color:#555; margin-top:2px; }
.einsatzBtnText .line3{ font-size:13px; color:#444; margin-top:6px; }



/* =============================
   Fahrzeug Buttons (dein Stil)
============================= */

.fzg-btn{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  width:100%;
  max-width:720px;
  margin:8px auto;
  padding:16px 14px;

  background:#dcdcdc;
  border:1px solid #bdbdbd;
  border-radius:12px;

  text-decoration:none !important;
  color:#1f1f1f !important;

  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transition:background .15s ease, transform .05s ease;
  cursor:pointer;
}

.fzg-btn:hover{ background:#cfcfcf; }
.fzg-btn:active{ transform:scale(.98); }

.fzg-btn:visited,
.fzg-btn:focus{
  color:#1f1f1f !important;
  text-decoration:none !important;
}

.fzg-main{
  font-size:20px;
  font-weight:800;
  letter-spacing:.4px;
  line-height:1.1;
}

.fzg-sub{
  margin-top:6px;
  font-size:13px;
  font-weight:600;
  color:#555;
}


/* =========================
   Helpers
========================= */

.center{
  display:flex;
  justify-content:center;
  align-items:center;
}

.margin-top{ margin-top:18px; }

/* Termin-Wrapper */
.termin-wrap{
  width:100%;
  max-width:720px;
  margin:0 auto;
}

/* Termin-Karte: 2 Spalten (Text links, Button rechts) */
.fzg-btn.termin-main{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

/* Linker Textblock im Termin */
.termin-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:1;
  min-width:0;
  text-decoration:none;
  color:inherit;
}

/* Edit-Button rechts */
.termin-edit{
  flex-shrink:0;
  min-width:120px;
  height:40px;
  border-radius:10px;
  font-weight:800;
}

/* =========================
   Letzte Einsätze: Row + QR
========================= */

.einsatzRow{
  width:100%;
  display:flex;
  align-items:stretch;
  gap:10px;
}

/* Einsatz-Link im Row-Kontext soll den Platz nehmen */
.einsatzRow .einsatzLink{
  flex:1;
  display:block;          /* wichtig: nicht flex-zentrieren */
  justify-content:unset;  /* falls dein .einsatzLink flex ist */
}

/* der große Button soll wirklich volle Breite im Link nutzen */
.einsatzRow .einsatzBtn.mdl-button{
  max-width:none;         /* sonst bleibt er bei 520px */
  width:100%;
}

/* rechter QR Button */
.qrDokuBtn.mdl-button{
  flex-shrink:0;
  min-width:130px;
  height:auto;
  padding:16px 14px;
  border-radius:14px;
  text-transform:none;
  font-weight:800;
}

.qrModalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;          /* JS setzt block */
  z-index: 999999;
}

.qrModal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background: #fff;
  border-radius: 16px;
  padding: 18px;
  width: min(520px, 95vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.qrModalClose{
  position:absolute;
  right:12px;
  top:10px;
  border:0;
  background:transparent;
  font-size:24px;
  cursor:pointer;
}

.qrBox{ margin-top:10px; display:flex; justify-content:center; }
.qrHint{ margin-top:10px; font-size:13px; color:#555; }


@supports not (transform: translate(-50%, -50%)) {
  .qrModal{
    width: 520px;
    max-width: 95vw;
    left: 50%;
    margin-left: -260px;
    top: 10%;
  }
}

.qrInBtn{
  position:relative;
  z-index:9999;
  pointer-events:auto;
}