/* IG-SAFE: Startseite, Brückenmotiv, Kacheln und Spendenhinweis */
main.page-shell { padding-top: 0; }
main.page-shell > :not(.home-hero) {
  width: min(var(--content-width), calc(100% - 2rem));
  margin-inline: auto;
  margin-block: .75rem;
}
.home-hero {
  display: block;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 0;
  background: transparent;
}
.home-hero .hero-copy {
  max-width: 980px;
  margin: 0 auto;
  padding: 58px 22px 0;
}
.home-hero #hero-title {
  max-width: 16ch;
  margin: .35em 0 .55em;
  color: var(--red-dark);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.05;
  text-wrap: balance;
}
.home-hero .hero-lead { max-width: 760px; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.65; }
.hero-bridge-stage { position: relative; width: min(980px, 100%); margin: 0 auto; padding: 0 22px 58px; }
.hero-bridge-main { margin: 0; }
.hero-bridge-main img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  border: 3px solid var(--red);
  border-radius: 16px;
}
.home-hero .home-card-grid {
  position: absolute;
  z-index: 2;
  right: 42px;
  bottom: 78px;
  left: 42px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.home-hero .topic-card {
  min-height: 145px;
  gap: 9px;
  padding: 16px 12px;
  border-radius: 15px;
  background: #fffaf0;
  box-shadow: 0 8px 20px rgb(55 35 30 / 15%);
}
.home-hero .topic-card h2 { margin: 0; color: var(--red-dark); font-size: 1.05rem; line-height: 1.2; }
.home-hero .topic-card p { margin: 0; font-size: .95rem; line-height: 1.38; }
.home-section > :is(h2, .eyebrow) { max-width: 32ch; }
.home-section.two-column { grid-template-columns: minmax(14rem, .8fr) minmax(0, 1.2fr); }
.home-section:has(.portal-grid) { width: min(var(--content-width), 100%); }
.portal-grid { width: 100%; }
.estimate-panel,
.chronology-panel,
.donation-panel { padding: 1.5rem; }
.donation-panel { border-color: #e5c9c9; background: var(--pink); }

.igsafe-floating-donation {
  position: fixed;
  z-index: 9998;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: min(340px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 14px 38px rgb(23 19 19 / 28%);
}
.igsafe-floating-donation[hidden] { display: none !important; }
.igsafe-floating-donation-copy { display: grid; gap: 5px; padding: 17px 50px 14px 18px; line-height: 1.35; }
.igsafe-floating-donation-title { color: var(--red); font-size: .84rem; font-weight: 950; letter-spacing: .02em; }
.igsafe-floating-donation-purpose { color: var(--ink); font-size: .92rem; font-weight: 650; }
.igsafe-floating-donation > a { display: flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 18px; background: var(--red); color: #fff; font-size: 1.06rem; font-weight: 950; text-decoration: none; }
.igsafe-floating-donation > a:hover,
.igsafe-floating-donation > a:focus-visible { background: var(--red-dark); }
.igsafe-floating-donation-close {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 9px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--red);
  border-radius: 50%;
  background: var(--paper);
  color: var(--red);
  font: 900 22px/1 Arial, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.igsafe-floating-donation-close:hover,
.igsafe-floating-donation-close:focus-visible { background: var(--red); color: #fff; }

.mobile-app-home { display: none; }
@media (min-width: 1001px) {
  body[data-page="home"] .site-header .header-top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    min-height: 180px;
    padding: .4rem 1rem;
  }
  body[data-page="home"] .site-header .header-brand {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: min(29rem, calc(100% - 38rem));
    margin-inline: auto;
    transform: none;
  }
  body[data-page="home"] .site-header .header-promo {
    position: static;
    grid-column: 1;
    grid-row: 2;
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: .15rem auto 0;
    transform: none;
  }
  body[data-page="home"].is-compact .site-header .header-top { min-height: 0; padding-block: .25rem .35rem; }
  body[data-page="home"].is-compact .site-header .header-brand { width: min(18rem, calc(100% - 2rem)); }
  body[data-page="home"].is-compact .site-header .brand-logo { max-height: 3.4rem; }
  body[data-page="home"].is-compact .site-header .header-promo {
    position: static;
    display: flex !important;
    grid-row: 2;
    margin: .1rem auto 0;
    transform: none;
  }
}
@media (max-width: 1000px) {
  body[data-page="home"] main.page-shell {
    width: min(calc(100% - 2 * var(--site-gutter)), 1100px);
    padding: 1rem 0 5rem;
  }
  body[data-page="home"] main.page-shell > :not(.mobile-app-home) { display: none !important; }
  body[data-page="home"] .mobile-app-home { display: block; width: 100%; margin: 0 auto; }

  body[data-page="home"] .site-header .primary-navigation,
  body[data-page="home"] .site-header .nav-toggle,
  body[data-page="home"] .site-header .header-actions > a[href="/news/"],
  body[data-page="home"] .site-header .header-actions > a[href="/kontakt/"] { display: none !important; }
  body[data-page="home"] .site-header .header-top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: .35rem;
    padding: .4rem .5rem .55rem;
  }
  body[data-page="home"] .site-header .header-brand {
    position: static;
    width: min(29rem, calc(100% - 1rem));
    margin-inline: auto;
    transform: none;
  }
  body[data-page="home"] .site-header .brand-logo { width: 100%; height: auto; max-height: 8rem; object-fit: contain; object-position: center; }
  body[data-page="home"] .site-header .header-promo {
    position: static;
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: .25rem auto .1rem;
    transform: none;
  }
  body[data-page="home"] .site-header .header-promo .store-link,
  body[data-page="home"] .site-header .header-promo .store-badge { display: block; width: 7.25rem; max-width: 100%; height: auto; }
  body[data-page="home"] .site-header .header-promo .apple-placeholder { display: inline-flex; width: 5.1rem; min-width: 5.1rem; height: 2.55rem; }
  body[data-page="home"] .site-header .header-actions {
    position: static;
    display: grid;
    grid-template-columns: max-content max-content max-content;
    grid-template-areas: "search theme reader";
    justify-content: center;
    justify-self: center;
    gap: .4rem;
    width: max-content;
    max-width: 100%;
    transform: none;
  }
  body[data-page="home"] .header-search-button { grid-area: search; width: 2.65rem; min-width: 2.65rem; height: 2.65rem; }
  body[data-page="home"] .header-actions .theme-switch { grid-area: theme; width: 6.5rem; min-width: 6.5rem; flex-basis: 6.5rem; }
  body[data-page="home"] .header-reader-button { grid-area: reader; width: 2.65rem; min-width: 2.65rem; height: 2.65rem; }
  body[data-page="home"] .header-actions .button-small { display: none !important; }

  body[data-page="home"] .mobile-app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; }
  body[data-page="home"] .mobile-app-tile {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    min-height: 6.5rem;
    overflow: hidden;
    padding: .8rem .7rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--paper);
    box-shadow: 0 .25rem .8rem rgb(55 35 30 / 9%);
    color: var(--ink);
    text-decoration: none;
  }
  body[data-page="home"] .mobile-app-tile::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: url("../../images/shared/igsafe-bridge-background.jpg") center / cover no-repeat;
    content: "";
    opacity: .13;
  }
  body[data-page="home"] .mobile-app-tile svg { width: 1.55rem; height: 1.55rem; color: var(--red); }
  body[data-page="home"] .mobile-app-tile span { display: grid; min-width: 0; gap: .25rem; }
  body[data-page="home"] .mobile-app-tile strong { color: var(--red-dark); font-size: .98rem; line-height: 1.15; }
  body[data-page="home"] .mobile-app-tile small { color: var(--muted); font-size: .78rem; line-height: 1.25; }
  body[data-page="home"] .mobile-app-tile > b { color: var(--red); font-size: 1.3rem; font-weight: 500; }
  body[data-page="home"] .mobile-app-tile:focus-visible { outline: 3px solid #2365a8; outline-offset: 3px; }
  body[data-page="home"] .mobile-app-tile[href="/"] { grid-column: 1 / -1; justify-self: center; width: min(18rem, 100%); }
  body[data-page="home"] .mobile-app-note { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--paper); box-shadow: 0 .25rem .8rem rgb(55 35 30 / 7%); font-size: .88rem; }
  body[data-page="home"] .mobile-app-note strong { display: block; margin-bottom: .35rem; }
  body[data-page="home"] .mobile-app-note p { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.45; }
  body[data-page="home"] .mobile-app-note p:last-child { margin-bottom: 0; }

  body[data-page="home"].is-compact .site-header .header-top { gap: .2rem; padding-block: .2rem; }
  body[data-page="home"].is-compact .site-header .header-top { gap: .25rem; padding-block: .25rem .35rem; }
  body[data-page="home"].is-compact .site-header .header-brand { width: min(14rem, calc(100% - 1rem)); }
  body[data-page="home"].is-compact .site-header .brand-logo { max-height: 3rem; }
  body[data-page="home"].is-compact .site-header .header-promo {
    display: flex !important;
    margin: .1rem auto .05rem;
  }
  body[data-page="home"].is-compact .site-header .apple-placeholder { display: inline-flex !important; }
}
@media (min-width: 600px) and (max-width: 1000px) {
  body[data-page="home"] .mobile-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
}
@media (min-width: 760px) and (max-width: 1000px) {
  body[data-page="home"] .mobile-app-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-section:has(.portal-grid) { width: calc(100% - 1rem); }
  .portal-grid { grid-template-columns: 1fr; }
  .portal-grid > .topic-card { min-height: 20rem; padding: 1.5rem; }
  .portal-grid > .topic-card h3 { font-size: 1.6rem; }
  .portal-grid > .topic-card p { font-size: 1.1rem; }
  .hero-bridge-main img { height: 620px; }
}
@media (max-width: 600px) {
  .home-hero .hero-copy { padding: 36px 18px 0; }
  .hero-bridge-stage { padding: 0 18px 32px; }
  .hero-bridge-main img { height: clamp(520px, 135vw, 700px); }
  body[data-page="home"] .site-header .header-brand { width: min(21.25rem, 100%); }
  body[data-page="home"] .site-header .brand-logo { max-height: 5.2rem; }
  body[data-page="home"] .site-header .header-promo .store-link,
  body[data-page="home"] .site-header .header-promo .store-badge { width: 7rem; }
  body[data-page="home"] .site-header .header-promo .apple-placeholder { width: 4.7rem; min-width: 4.7rem; }
  body[data-page="home"] .mobile-app-grid { gap: .5rem; }
  body[data-page="home"] .mobile-app-tile { min-height: 6rem; padding: .7rem .55rem; }
  .igsafe-floating-donation { right: .75rem; bottom: calc(4.5rem + env(safe-area-inset-bottom)); left: .75rem; width: auto; }
  .igsafe-floating-donation-copy { padding-top: 14px; padding-bottom: 12px; }
  .igsafe-floating-donation > a { min-height: 46px; }
}
@media (max-width: 380px) {
  .hero-bridge-stage { padding: 0 12px 32px; }
  .hero-bridge-main img { height: clamp(200px, 65vw, 250px); }
  .home-hero .home-card-grid { position: relative; inset: auto; grid-template-columns: 1fr; gap: 10px; margin: -12px 12px 0; }
  .home-hero .topic-card { min-height: 0; padding: 14px; }
  body[data-page="home"] main.page-shell { width: calc(100% - 1.25rem); }
  body[data-page="home"] .mobile-app-tile { grid-template-columns: 1.45rem minmax(0, 1fr) auto; gap: .35rem; padding: .65rem .45rem; }
  body[data-page="home"] .mobile-app-tile svg { width: 1.3rem; height: 1.3rem; }
  body[data-page="home"] .mobile-app-tile strong { font-size: .9rem; }
  body[data-page="home"] .mobile-app-tile small { font-size: .7rem; }
  body[data-page="home"] .site-header .header-actions { gap: .3rem; }
}
@media (display-mode: standalone) {
  body[data-page="home"] .site-header .header-promo,
  body[data-page="home"] .site-header .apple-placeholder,
  body[data-page="home"] .site-footer .footer-app-promo { display: none !important; }
}

body[data-page="home"] .footer-brand { justify-self: center; }

/* Startseiten-Footer: offenes Fold mit drei Linkspalten */
@media (min-width: 761px) and (max-width: 1000px) {
  body[data-page="home"] .footer-panel:not([hidden]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
  }
  body[data-page="home"] .footer-brand {
    grid-column: 1 / -1;
  }
  body[data-page="home"] .footer-brand-actions {
    width: min(22rem, 100%);
    margin-inline: auto;
  }
}

/* Browser tablet: Homepage uses the same three header positions as subpages.
   The badge uses the subpage size; equal side columns keep the logo centered.
   Compact sizing follows the body class set by site-shell.js. */
@media (display-mode: browser) and (min-width: 601px) and (max-width: 1200px) {
  html body[data-page="home"] .site-header .header-top {
    display: grid !important;
    grid-template-columns: minmax(13rem, 1fr) minmax(0, 1.3fr) minmax(13rem, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    justify-items: stretch !important;
    align-content: center !important;
    width: min(calc(100% - 2 * var(--site-gutter)), var(--site-width)) !important;
    min-height: 0 !important;
    padding: .55rem .5rem !important;
    gap: .5rem !important;
  }
  html body[data-page="home"] .site-header .header-promo {
    display: flex !important;
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: .3rem !important;
    transform: none !important;
  }
  html body[data-page="home"] .site-header .header-promo .store-link,
  html body[data-page="home"] .site-header .header-promo .store-badge {
    width: 7.5rem !important;
    max-width: 100% !important;
  }
  html body[data-page="home"] .site-header .header-promo .apple-placeholder {
    width: 5.1rem !important;
    min-width: 5.1rem !important;
    height: 2.55rem !important;
  }
  html body[data-page="home"] .site-header .header-brand {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: min(29rem, 100%) !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  html body[data-page="home"] .site-header .brand-logo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 6.5rem !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  html body[data-page="home"].is-compact .site-header .header-brand {
    width: min(14rem, 100%) !important;
  }
  html body[data-page="home"].is-compact .site-header .brand-logo {
    max-height: 3.4rem !important;
  }
  html body[data-page="home"] .site-header .header-actions {
    display: flex !important;
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: .35rem !important;
    transform: none !important;
  }
  html body[data-page="home"] .site-header .header-search-button {
    display: inline-flex !important;
    grid-area: auto !important;
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
  }
  html body[data-page="home"] .site-header .header-actions .theme-switch {
    width: 6.25rem !important;
    min-width: 6.25rem !important;
    flex: 0 0 6.25rem !important;
  }
  html body[data-page="home"] .site-header .header-reader-button {
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
  }
}

/* At tablet/browser DPR sizes the app runtime can route /app/ to the normal
   homepage while retaining app classes. Restore its browser header layout. */
@media (display-mode: browser) and (min-width: 701px) and (max-width: 1500px) {
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"] .site-header .header-top {
    display: grid !important;
    grid-template-columns: minmax(13rem, 1fr) minmax(0, 1.3fr) minmax(13rem, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    justify-items: stretch !important;
    align-content: center !important;
    min-height: 6.5rem !important;
    padding: .55rem 1rem !important;
    gap: .5rem !important;
  }
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"] .site-header .header-promo {
    display: flex !important;
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: .3rem !important;
    transform: none !important;
  }
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"] .site-header .header-promo .store-link,
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"] .site-header .header-promo .store-badge {
    width: 7.5rem !important;
    max-width: 100% !important;
  }
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"] .site-header .header-promo .apple-placeholder {
    display: inline-flex !important;
    width: 5.1rem !important;
    min-width: 5.1rem !important;
    height: 2.55rem !important;
  }
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"] .site-header .header-brand {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: min(29rem, 100%) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"] .site-header .brand-logo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 6.5rem !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"].is-compact .site-header .header-brand {
    width: min(14rem, 100%) !important;
  }
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"].is-compact .site-header .brand-logo {
    max-height: 3.4rem !important;
  }
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"] .site-header .header-actions {
    display: flex !important;
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: .35rem !important;
    transform: none !important;
  }
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"] .site-header .header-search-button {
    display: inline-flex !important;
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
  }
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"] .site-header .header-actions .theme-switch {
    width: 6.25rem !important;
    min-width: 6.25rem !important;
    flex: 0 0 6.25rem !important;
  }
  html.igsafe-app:not(.igsafe-native-standalone) body[data-page="home"] .site-header .header-reader-button {
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
  }
}


/* Small browser, portrait: start with the enlarged centered logo and compact it on scroll. */
@media (orientation: portrait) and (min-width: 601px) and (max-width: 1000px) {
  html:not(.igsafe-app):not(.igsafe-native-standalone) body[data-page="home"] .site-header .header-top {
    grid-template-columns: minmax(12rem, 12.5rem) minmax(0, 1fr) minmax(12rem, 12.5rem) !important;
    padding-block: .8rem !important;
  }
  html:not(.igsafe-app):not(.igsafe-native-standalone) body[data-page="home"] .site-header .header-brand {
    width: min(37rem, 100%) !important;
  }
  html:not(.igsafe-app):not(.igsafe-native-standalone) body[data-page="home"] .site-header .brand-logo {
    max-height: 9.5rem !important;
  }
  html:not(.igsafe-app):not(.igsafe-native-standalone) body[data-page="home"].is-compact .site-header .header-top {
    padding-block: .1rem !important;
    gap: .2rem !important;
  }
  html:not(.igsafe-app):not(.igsafe-native-standalone) body[data-page="home"].is-compact .site-header .header-brand {
    width: min(21rem, 100%) !important;
  }
  html:not(.igsafe-app):not(.igsafe-native-standalone) body[data-page="home"].is-compact .site-header .brand-logo {
    max-height: 4.8rem !important;
  }
  html:not(.igsafe-app):not(.igsafe-native-standalone) body[data-page="home"].is-compact .site-header .header-promo .store-link,
  html:not(.igsafe-app):not(.igsafe-native-standalone) body[data-page="home"].is-compact .site-header .header-promo .store-badge {
    width: 6.5rem !important;
  }
  html:not(.igsafe-app):not(.igsafe-native-standalone) body[data-page="home"].is-compact .site-header .header-promo .apple-placeholder {
    width: 4.5rem !important;
    min-width: 4.5rem !important;
    height: 2.2rem !important;
  }
  html:not(.igsafe-app):not(.igsafe-native-standalone) body[data-page="home"].is-compact .site-header .header-actions {
    gap: .2rem !important;
  }
  html:not(.igsafe-app):not(.igsafe-native-standalone) body[data-page="home"].is-compact .site-header .header-search-button,
  html:not(.igsafe-app):not(.igsafe-native-standalone) body[data-page="home"].is-compact .site-header .header-reader-button {
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    height: 2.25rem !important;
  }
}