/* =============================================================================
   website-static.css – Ergaenzungen fuer statische Seiten mit der einheitlichen
   Kopf-/Fusszeile (werkzeuge/shell.py). Laedt nach website-components.css.
   Erstellt: 25.09.2026
   ============================================================================= */

/* Die Kopfzeile (.web-nav) ist fixiert (72 px). Die alten statischen Seiten
   hatten einen mitlaufenden Kopf – ihr Hero braucht deshalb Luft nach oben. */
body .page-hero{padding-top:calc(72px + clamp(40px,7vw,88px));}

/* Handy-Menue: per hidden-Attribut geschaltet (web_shell.js) */
.web-mobile-menu[hidden]{display:none !important;}
@media (min-width:881px){ .web-mobile-menu{display:none !important;} }

/* Brotkrumen-Navigation der Stadt- und Ratgeberseiten */
.ak-crumbs{font-size:.85rem;color:var(--w-t3);margin:0 0 1.5rem;}
.ak-crumbs a{color:var(--w-t3);text-decoration:none;}
.ak-crumbs a:hover{color:var(--w-text);text-decoration:underline;}

/* ── App-Seite /app-holen.html (25.09.2026) ── */
.app-hero{position:relative;overflow:hidden;padding:calc(72px + clamp(40px,6vw,80px)) 0 clamp(48px,7vw,90px);
  background:radial-gradient(120% 90% at 85% 10%,rgba(56,189,248,.18),transparent 60%),radial-gradient(90% 70% at 0% 100%,rgba(14,165,233,.10),transparent 60%),var(--w-bg);}
.app-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:center;}
.app-hero-h1{font-family:var(--w-disp);font-weight:700;letter-spacing:-.03em;line-height:1.04;font-size:clamp(2.4rem,5.6vw,4.2rem);margin:10px 0 18px;color:var(--w-text);}
.app-hero-lead{font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.65;color:var(--w-t2);max-width:52ch;margin:0 0 26px;}
.app-stores .web-store{padding:14px 24px;}
.app-stores .web-store span{font-size:16px;}
.app-qr{display:flex;align-items:center;gap:18px;margin-top:28px;padding:16px 18px;max-width:460px;border-radius:20px;background:var(--w-surf);border:1px solid var(--w-border);box-shadow:var(--w-shadow-light);}
.app-qr img{width:112px;height:112px;border-radius:12px;background:#fff;padding:6px;flex:0 0 112px;}
.app-qr strong{display:block;font-family:var(--w-disp);font-size:16px;color:var(--w-text);margin-bottom:4px;}
.app-qr span{font-size:13.5px;line-height:1.5;color:var(--w-t2);}
.app-hero-phone{display:flex;justify-content:center;}
.app-hero-phone img{width:min(360px,80%);height:auto;filter:drop-shadow(0 36px 40px rgba(8,47,86,.32));transform:rotate(-2deg);}  /* Screens haben schon einen Handy-Rahmen */
.app-feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;}
.app-shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;}
.app-shot{margin:0;text-align:center;}
.app-shot img{width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(8,47,86,.26));}
.app-shot figcaption{margin-top:14px;font-family:var(--w-disp);font-weight:600;font-size:15px;color:var(--w-text);}
.app-konto{text-align:center;color:var(--w-t2);font-size:14.5px;margin:34px 0 0;}
@media (max-width:880px){
  .app-hero-grid{grid-template-columns:1fr;}
  .app-hero-phone{order:-1;}
  .app-hero-phone img{width:min(220px,58%);}
  .app-qr{display:none;}           /* am Handy wird ohnehin in den Store weitergeleitet */
  .app-feat-grid{grid-template-columns:1fr;}
  .app-shots{grid-template-columns:repeat(2,minmax(0,1fr));}
}