/*! M03 App-Simulator – Knopf, Fenster und Handy-Rahmen */
.appsim { box-sizing: border-box; text-align: center; margin: 2.5em auto; padding: 2em 1.25em; max-width: 100%; }
.appsim-intro { margin: 0 auto 1.5em; max-width: 36em; line-height: 1.5; }
/* in Widget-Bereichen (Seitenleiste, Fußzeile) etwas kompakter, aber mit Luft */
.widget .appsim, .wp-block-widget-area .appsim { margin: 1.5em auto; padding: 1.5em .75em; }
.appsim-start {
  display: inline-flex; margin: .5em; max-width: 100%; white-space: normal; line-height: 1.3; align-items: center; gap: .5em;
  padding: .85em 1.6em; border: 0; border-radius: 999px;
  background: #1982d1; color: #fff; font: inherit; font-weight: 700; font-size: 1.05em;
  cursor: pointer; box-shadow: 0 6px 18px rgba(25, 130, 209, .35);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.appsim-start:hover, .appsim-start:focus-visible { background: #1565a8; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(25, 130, 209, .45); }
.appsim-start:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
.appsim-start-icon { font-size: 1.2em; }

.appsim-phone {
  position: relative; margin: 0 auto;
  width: 390px; max-width: 100%; height: 780px; max-height: calc(100vh - 140px); min-height: 520px;
  border: 12px solid #05070a; border-radius: 44px; overflow: hidden; background: #0b0f14;
  box-shadow: 0 0 0 2px #2a3442, 0 30px 80px rgba(0, 0, 0, .45);
}
.appsim--inline .appsim-phone { max-height: none; height: 760px; }
.appsim-notch { display: none; }
.appsim-frame { display: block; width: 100%; height: 100%; border: 0; background: #0b0f14; }

.appsim-cta {
  display: inline-block; margin-top: 1em; padding: .7em 1.4em; border-radius: 999px;
  background: #fff; color: #0c3a63 !important; font-weight: 700; text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.appsim--inline .appsim-cta { background: #1982d1; color: #fff !important; }

html.appsim-open, html.appsim-open body { overflow: hidden; }
.appsim-overlay {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 12, .92); backdrop-filter: blur(4px);
  animation: appsimFade .2s ease-out;
}
@keyframes appsimFade { from { opacity: 0; } to { opacity: 1; } }
.appsim-dialog { position: relative; display: flex; flex-direction: column; align-items: center; }
.appsim-below { margin-top: 14px; display: flex; flex-direction: column; align-items: center; color: #cbd5e1; font-size: 13px; }
.appsim-below .appsim-cta { margin-top: 10px; }
.appsim-close {
  position: absolute; top: -6px; right: -56px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 20px; cursor: pointer;
}
.appsim-close:hover, .appsim-close:focus-visible { background: rgba(255, 255, 255, .3); }

/* Kleine Bildschirme: Simulator füllt den ganzen Bildschirm, ohne Rahmen */
@media (max-width: 520px), (max-height: 640px) {
  .appsim-overlay { align-items: stretch; }
  .appsim-dialog { width: 100%; height: 100%; }
  .appsim-overlay .appsim-phone { width: 100%; height: 100%; max-height: none; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .appsim-below { display: none; }
  .appsim-close { top: 0; right: 6px; width: 28px; height: 28px; font-size: 14px; z-index: 2; background: rgba(25, 130, 209, .95); }
}
@media (max-width: 420px) {
  .appsim--inline .appsim-phone { border-width: 8px; border-radius: 30px; height: 640px; }
}
@media (prefers-reduced-motion: reduce) { .appsim-overlay { animation: none; } .appsim-start { transition: none; } }