/* EMTI PWA Helper Styles */

/* Fallback-Variablen */
:root{
  --emti-accent:#C94E1A;
  --emti-accent-hover:#AD3E12;
  --emti-surface:#f7f7f8;
  --emti-card-border:#e8eaee;
  --site-max:1360px;
  --site-sidepad:clamp(16px, 5vw, 72px);
}

/* Installations-Box */

.emti-install-box{
  max-width:min(92vw, var(--site-max));
  margin:2rem auto;
  padding:1.6rem 1.5rem;
  border-radius:14px;
  border:1px solid var(--emti-card-border);
  background:var(--emti-surface);
  box-shadow:0 1px 3px rgba(15,23,42,0.06),
             0 8px 24px rgba(15,23,42,0.12);
  color:#111827;
  font-size:1rem;
}

.emti-install-box h3{
  margin-top:0;
  margin-bottom:0.5rem;
  font-size:1.3rem;
  font-weight:600;
  color:#111827;
}

.emti-install-lead{
  margin:0.4rem 0 1.1rem;
  line-height:1.5;
  color:#1f2933;
}

.emti-install-actions{
  margin-bottom:0.9rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}

/* Farb-Styles für die PWA-Buttons
   Größe/Schrift regeln wir weiter unten explizit */

.emti-install-btn{
  background:var(--emti-accent) !important;
  border-color:var(--emti-accent) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 4px 10px rgba(201,78,26,0.45);
}

.emti-install-btn:hover{
  background:var(--emti-accent-hover) !important;
  border-color:var(--emti-accent-hover) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 6px 16px rgba(173,62,18,0.55);
}

.emti-share-btn{
  background:#fff !important;
  border-color:var(--emti-accent) !important;
  color:var(--emti-accent) !important;
  -webkit-text-fill-color:var(--emti-accent) !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.emti-share-btn:hover{
  background:#fff3ed !important;
  border-color:var(--emti-accent-hover) !important;
  color:var(--emti-accent-hover) !important;
  -webkit-text-fill-color:var(--emti-accent-hover) !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.14);
}

/* Hinweise */

.emti-install-hint{
  margin:0.35rem 0;
  font-size:0.9rem;
  line-height:1.5;
  color:#374151;
  opacity:0.95;
}

.emti-install-hint a{
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Hinweis-Banner oben */

.emti-app-banner{
  max-width:min(92vw, var(--site-max));
  margin:0.5rem auto 0.75rem;
  padding:0.45rem 0.9rem;
  text-align:center;
  background:var(--emti-surface);
  color:#374151;
  font-size:0.9rem;
  border-radius:12px;
  border:1px solid var(--emti-card-border);
  box-shadow:0 3px 10px rgba(15,23,42,0.12);
}

.emti-app-banner a{
  color:var(--emti-accent);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}

.emti-app-banner a:hover{
  color:var(--emti-accent-hover);
}

/* Mobile */

@media (max-width:600px){

  .emti-install-box{
    margin:1.4rem auto;
    padding:1.4rem 1.1rem;
  }

  .emti-install-actions{
    flex-direction:column;
  }

  .emti-install-btn,
  .emti-share-btn{
    width:100%;
  }

  .emti-app-banner{
    margin-left:var(--site-sidepad);
    margin-right:var(--site-sidepad);
    padding-inline:0.8rem;
  }
}

/* ==== Schriftgröße der PWA-Buttons angleichen ==== */
/* Desktop (und generell) etwas größer, klar lesbar */

.emti-install-btn,
.emti-share-btn{
  font-size:1.15rem !important;   /* hier ggf. 1.0–1.1rem feintunen */
  font-weight:700 !important;
  line-height:1.25 !important;
}

/* Auf sehr kleinen Screens nicht noch größer werden */

@media (max-width:640px){
  .emti-install-btn,
  .emti-share-btn{
    font-size:1rem !important;
  }
}