:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
}

/*
 * iOS-Standalone-Fallback: Die App-Höhe wird auf aktuellen iPhones um
 * den vom nativen PWA-Viewport ausgelassenen oberen Bereich ergänzt.
 * Android und der normale Browser treffen diese WebKit-Regel nicht.
 */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 540px) and (orientation: portrait) and (display-mode: standalone) {
    html body:not(.is-embedded) > .phone {
      --pwa-frame-top: max(var(--app-safe-top), 47px);
    }
  }

  @media (min-width: 393px) and (max-width: 439px) and (orientation: portrait) and (display-mode: standalone) {
    html body:not(.is-embedded) > .phone {
      --pwa-frame-top: max(var(--app-safe-top), 59px);
    }
  }

  @media (min-width: 440px) and (max-width: 540px) and (orientation: portrait) and (display-mode: standalone) {
    html body:not(.is-embedded) > .phone {
      --pwa-frame-top: max(var(--app-safe-top), 62px);
    }
  }
}

/* navigator.standalone greift auf dem allerersten iOS-PWA-Start zuverlässiger
 * als die display-mode-Media-Query. */
@media (max-width: 540px) and (orientation: portrait) {
  html.ios-standalone body:not(.is-embedded) > .phone {
    --pwa-frame-top: max(var(--app-safe-top), 47px);
  }
}

@media (min-width: 393px) and (max-width: 439px) and (orientation: portrait) {
  html.ios-standalone body:not(.is-embedded) > .phone {
    --pwa-frame-top: max(var(--app-safe-top), 59px);
  }
}

@media (min-width: 440px) and (max-width: 540px) and (orientation: portrait) {
  html.ios-standalone body:not(.is-embedded) > .phone {
    --pwa-frame-top: max(var(--app-safe-top), 62px);
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
a,
[role="button"],
[data-href],
label,
input,
select,
textarea {
  touch-action: manipulation;
}

/* Keep every navigation glyph on the exact visual centre of its circle. */
.tabbar .tab {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

.tabbar .tab svg {
  display: block !important;
  margin: 0 !important;
}

.tabbar .tab[aria-label="Homepage"] svg {
  --nav-icon-x: 0px !important;
  --nav-icon-y: -1px !important;
}

.tabbar .tab[aria-label="Community"] svg {
  --nav-icon-x: -0.25px !important;
  --nav-icon-y: 0px !important;
}

.tabbar .tab[aria-label="Projekte"] svg {
  --nav-icon-x: 0px !important;
  --nav-icon-y: -1px !important;
}

.tabbar .tab[aria-label="Dashboard"] svg {
  --nav-icon-x: -1px !important;
  --nav-icon-y: 0px !important;
}

@media (max-width: 540px) {
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body {
    min-height: 100dvh;
  }

  body:not(.is-embedded) {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    min-height: 100dvh !important;
    touch-action: pan-x pan-y;
  }

  body:not(.is-embedded) > .phone {
    --pwa-frame-top: 0px;
    width: 100% !important;
    max-width: 100% !important;
    top: calc(-1 * var(--pwa-frame-top)) !important;
    height: calc(100dvh + var(--pwa-frame-top)) !important;
    min-height: calc(100dvh + var(--pwa-frame-top)) !important;
    max-height: calc(100dvh + var(--pwa-frame-top)) !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /*
   * Die Homepage im Onboarding-Morph besitzt bereits einen eigenen
   * randlosen Embed-Modus. Äußere PWA-Korrekturen dürfen dort nicht ein
   * zweites Mal auf Position und Höhe angewendet werden.
   */
  body.is-embedded {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.is-embedded > .phone {
    position: relative !important;
    top: 0 !important;
    width: 100vw !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Im Onboarding-iframe ist die iframe-Fläche selbst die verbindliche
   * Vollbildhöhe. 100dvh würde iOS hier erneut um die Statusleiste kürzen. */
  html.is-embedded-document,
  html.is-embedded-document body.is-embedded {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
  }

  html.is-embedded-document body.is-embedded > .phone {
    top: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
  }

  /* Nur in der installierten iPhone-App: Zahl optisch wie in der
   * Desktop-Vorlage ausrichten und etwas mehr Luft zur Einheit schaffen. */
  html.ios-standalone body.homepage-screen .hero-number {
    top: 2px !important;
  }

  /* Die eingebettete Homepage wird vor ihrem ersten Frame angehalten und
   * anschließend vom Morph genau einmal eingeblendet. */
  html.is-embedded-document.ios-standalone body.homepage-screen .reveal-up,
  html.is-embedded-document.ios-standalone body.homepage-screen .reveal-soft {
    animation: none !important;
  }

  html.is-embedded-document.ios-standalone body.homepage-screen:not(.hero-reveal):not(.hero-reveal-done) .app-header,
  html.is-embedded-document.ios-standalone body.homepage-screen:not(.hero-reveal):not(.hero-reveal-done) .hero-content,
  html.is-embedded-document.ios-standalone body.homepage-screen:not(.hero-reveal):not(.hero-reveal-done) .cards .metric-card,
  html.is-embedded-document.ios-standalone body.homepage-screen:not(.hero-reveal):not(.hero-reveal-done) .cards .cta-card,
  html.is-embedded-document.ios-standalone body.homepage-screen:not(.hero-reveal):not(.hero-reveal-done) .tabbar {
    opacity: 0 !important;
    transform: translateY(22px) !important;
    animation: none !important;
  }

  html.is-embedded-document.ios-standalone body.homepage-screen.hero-reveal .app-header,
  html.is-embedded-document.ios-standalone body.homepage-screen.hero-reveal .hero-content,
  html.is-embedded-document.ios-standalone body.homepage-screen.hero-reveal .cards .metric-card,
  html.is-embedded-document.ios-standalone body.homepage-screen.hero-reveal .cards .cta-card,
  html.is-embedded-document.ios-standalone body.homepage-screen.hero-reveal .tabbar {
    animation: pwaHomepageFadeUpOnce .72s cubic-bezier(.22,1,.36,1) forwards !important;
    will-change: opacity, transform !important;
  }

  html.is-embedded-document.ios-standalone body.homepage-screen.hero-reveal-done .app-header,
  html.is-embedded-document.ios-standalone body.homepage-screen.hero-reveal-done .hero-content,
  html.is-embedded-document.ios-standalone body.homepage-screen.hero-reveal-done .cards .metric-card,
  html.is-embedded-document.ios-standalone body.homepage-screen.hero-reveal-done .cards .cta-card,
  html.is-embedded-document.ios-standalone body.homepage-screen.hero-reveal-done .tabbar {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  @keyframes pwaHomepageFadeUpOnce {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Benachrichtigungen liegen in der installierten App immer als eigene
   * oberste Ebene über Hero, Karten und Navigation. */
  html.ios-standalone body.homepage-screen .notifications-modal {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1000 !important;
    isolation: isolate !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: visibility 0s linear .32s !important;
  }

  html.ios-standalone body.homepage-screen .notifications-modal.is-open {
    pointer-events: auto !important;
    visibility: visible !important;
    transition-delay: 0s !important;
  }

  html.ios-standalone body.homepage-screen .notifications-modal .modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }

  html.ios-standalone body.homepage-screen .notifications-modal .modal-sheet {
    z-index: 1 !important;
    bottom: max(20px, var(--app-safe-bottom)) !important;
    max-height: calc(100% - var(--app-safe-top) - var(--app-safe-bottom) - 24px) !important;
  }

  html.ios-standalone body.homepage-screen .notifications-modal .sheet-close {
    position: relative !important;
    z-index: 3 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html.ios-standalone body.homepage-screen #notificationsButton,
  html.ios-standalone body.homepage-screen .cta-card {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  html.ios-standalone body.homepage-screen #notificationsButton {
    position: relative !important;
    z-index: 20 !important;
  }

  html.ios-standalone body.homepage-screen .cta-card {
    position: relative !important;
    z-index: 5 !important;
  }

  /* Einstellungen: Der Zurück-Header bleibt unterhalb der Dynamic Island
   * sichtbar und liegt über dem scrollenden Seiteninhalt. */
  html.ios-standalone body.settings-screen .topbar {
    position: absolute !important;
    top: calc(78px + var(--pwa-frame-top, 0px)) !important;
    left: 24px !important;
    right: 24px !important;
    z-index: 1200 !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    pointer-events: auto !important;
  }

  html.ios-standalone body.settings-screen .topbar .icon-button {
    position: relative !important;
    z-index: 1201 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html.ios-standalone body.settings-screen .settings-scroll {
    inset: calc(144px + var(--pwa-frame-top, 0px)) 0 0 !important;
  }

  /* Keine sichtbare Browser-Scrollleiste innerhalb des App-Rahmens. */
  .phone,
  .phone * {
    scrollbar-width: none !important;
  }

  .phone::-webkit-scrollbar,
  .phone *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .app-header {
    padding-top: max(78px, calc(var(--app-safe-top) + 16px)) !important;
  }

  .topbar,
  .detail-back,
  .detail-share {
    top: max(78px, calc(var(--app-safe-top) + 16px)) !important;
  }

.tabbar {
  bottom: max(38px, calc(var(--app-safe-bottom) + 4px)) !important;
}

  .fab {
    bottom: max(28px, calc(var(--app-safe-bottom) + 8px)) !important;
  }

  .notifications-modal {
    position: fixed !important;
    inset: 0 !important;
    border-radius: 0 !important;
  }

  .modal-sheet {
    --app-modal-bottom: max(20px, var(--app-safe-bottom));
    bottom: var(--app-modal-bottom) !important;
    height: min(540px, calc(100dvh - var(--app-safe-top) - var(--app-modal-bottom) - 16px)) !important;
    max-height: none !important;
  }

  .comment-input-bar {
    padding-bottom: max(14px, var(--app-safe-bottom)) !important;
  }

  .comment-input-field,
  .reply-field,
  .field-input,
  .create-input,
  .create-input-wrap input,
  .create-textarea,
  .message-input,
  .ed-message-input {
    font-size: 16px !important;
  }

  .bt-scroll {
    padding-bottom: max(28px, var(--app-safe-bottom)) !important;
  }

  .bottom-sheet {
    padding-bottom: max(28px, var(--app-safe-bottom)) !important;
  }

  .save-bar {
    padding-bottom: max(32px, var(--app-safe-bottom)) !important;
  }

  .create-footer {
    padding-bottom: max(18px, var(--app-safe-bottom)) !important;
  }

  .avatar-sheet,
  .privacy-sheet {
    padding-bottom: max(16px, var(--app-safe-bottom)) !important;
  }

  .onb-top {
    top: max(64px, calc(var(--app-safe-top) + 8px)) !important;
  }

  .intro-top {
    padding-top: max(60px, calc(var(--app-safe-top) + 8px)) !important;
  }

  .onb-bottom {
    bottom: max(32px, calc(var(--app-safe-bottom) + 8px)) !important;
  }

  .phone.map-fullscreen .map-hint,
  .phone.map-fullscreen .map-tools,
  .phone.map-fullscreen .map-floating-close {
    top: max(58px, calc(var(--app-safe-top) + 8px)) !important;
  }

  .phone.map-fullscreen .map-filter-bar {
    bottom: max(24px, calc(var(--app-safe-bottom) + 8px)) !important;
  }

  .phone.map-fullscreen .map-attr,
  .phone.map-fullscreen .map-attr-left {
    bottom: calc(var(--app-safe-bottom) + 4px) !important;
  }
}

@media (max-width: 400px) {
  .mini-label,
  .mini-copy,
  .eda-title {
    white-space: normal !important;
  }
}

@media (max-width: 359px) {
  .tabbar {
    left: 20px !important;
    right: 20px !important;
  }

  .header-title {
    font-size: 28px !important;
  }

  .seg-btn {
    font-size: 10.5px !important;
  }
}

/* In der installierten Web-App zeichnet iOS die echte Statusleiste selbst. */
@media (max-width: 540px) and (display-mode: standalone) {
  html,
  body,
  body:not(.is-embedded) {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }

  /*
   * Manche installierten iPhone-PWAs liefern 100dvh erst unterhalb der
   * Statusleiste. Der App-Rahmen wird deshalb um genau diese ausgelassene
   * Safe Area nach oben erweitert. So bleiben die 440/956-Proportionen
   * der Desktop-Vorlage erhalten, ohne Header oder Navigation separat zu
   * verschieben. Android (Safe Area = 0) bleibt unverändert.
   */
  body:not(.is-embedded) > .phone {
    --pwa-frame-top: var(--app-safe-top);
    top: calc(-1 * var(--pwa-frame-top)) !important;
    width: 100% !important;
    height: calc(100dvh + var(--pwa-frame-top)) !important;
    min-height: calc(100dvh + var(--pwa-frame-top)) !important;
    max-height: calc(100dvh + var(--pwa-frame-top)) !important;
  }

  html.dark-mode,
  html.dark-mode body {
    background: #0c0c0c !important;
  }

  .statusbar {
    display: none !important;
  }

  body > .phone::before {
    content: none !important;
    display: none !important;
  }

  /*
   * html/body müssen exakt dieselbe Farbe wie der obere Rand von .phone
   * zeigen — sonst blitzt bei Rundungsfehlern von 100dvh unter der
   * Dynamic Island/Statusleiste ein andersfarbiger Spalt des body-
   * Hintergrunds durch. Das betrifft jede Seite, nicht nur Hero-Seiten.
   */
  html, body {
    background: #fbfbfa !important;
  }

  html.dark-mode, html.dark-mode body {
    background: #151515 !important;
  }

  html:has(body > .phone.is-intro),
  body:has(> .phone.is-intro) {
    background:
      radial-gradient(ellipse 58% 46% at 106% 106%, rgba(255,207,171,.34) 0%, rgba(242,171,142,.20) 42%, rgba(7,14,28,0) 74%),
      radial-gradient(ellipse 168% 132% at 104% 104%, rgba(242,171,142,.72) 0%, rgba(203,115,122,.48) 38%, rgba(99,74,83,.22) 72%, rgba(7,14,28,0) 96%),
      radial-gradient(ellipse 92% 74% at 20% 12%, rgba(42,63,107,.68) 0%, rgba(21,33,58,.46) 46%, rgba(7,14,28,0) 78%),
      linear-gradient(to right, rgba(1,4,10,.58) 0%, rgba(5,10,21,.18) 58%, transparent 82%),
      linear-gradient(180deg, #02060d 0%, #0b162a 50%, #15213a 100%) !important;
  }

  body.homepage-screen .hero-number {
    top: 2px !important;
  }

  html:has(body > .phone .hero-bg),
  body:has(> .phone .hero-bg) {
    background: #000000 !important;
  }

  /*
   * iOS darf die intrinsischen Bildmaße nicht als Mindestbreite der
   * Grid-Spalten verwenden. So bleiben vier wirklich runde Avatare in
   * einer Reihe und das Sheet kann nicht seitlich aus dem Viewport laufen.
   */
  .avatar-sheet {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .avatar-grid {
    width: 100% !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .avatar-option {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  .avatar-opt-inner {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  .avatar-opt-inner img {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

}