/* ============================================================
   IG Heidenberg — Landingpage Styling
   Baut auf brewery.css auf (brew-* Klassen werden mitgenutzt).
   ============================================================ */

/* ---------- Header: IG-Logo statt Zurich-Wortmarke ---------- */
.ig-coop { margin-left: auto; margin-right: 26px; display: flex; align-items: center; gap: 13px; padding-right: 26px; border-right: 1px solid rgba(255,255,255,0.2); }
.ig-header.glass .ig-coop { border-right-color: var(--gray-15); }
.ig-coop-lbl { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.72); }
.ig-header.glass .ig-coop-lbl, .ig-header.on-light .ig-coop-lbl { color: var(--gray-60); }
.ig-coop-logo { height: 42px; width: auto; display: block; }
/* Logo ist weiß: auf hellem (glass) Header einfärben/abdunkeln */
.ig-header.glass .ig-coop-logo { filter: brightness(0) saturate(100%) invert(16%) sepia(40%) saturate(1400%) hue-rotate(178deg) brightness(95%) contrast(95%); }
@media (max-width: 760px) { .ig-coop { display: none; } }

/* ============================================================
   Hero
   ============================================================ */
.ig-hero-photo { background-image: url('assets/ig-hero.jpg'); background-size: cover; background-position: center; }
.ig-hero-topo { position: absolute; inset: 0; pointer-events: none; }
.ig-hero-scrim {
  background:
    linear-gradient(100deg, rgba(7,32,58,0.92) 0%, rgba(9,38,64,0.72) 44%, rgba(7,32,58,0.42) 100%),
    linear-gradient(0deg, rgba(7,32,58,0.55) 0%, transparent 32%);
}
/* Mitglieder-Siegel: rund, leicht schräg, rechts im Hero */
.ig-hero-seal {
  position: absolute; z-index: 3;
  right: clamp(24px, 6vw, 110px); top: 50%;
  transform: translateY(-50%) rotate(-9deg);
  width: clamp(150px, 17vw, 230px); height: clamp(150px, 17vw, 230px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, rgba(20,68,118,0.92), rgba(7,32,58,0.92));
  border: 2px solid rgba(158,201,238,0.55);
  box-shadow: 0 26px 60px rgba(7,32,58,0.5), inset 0 0 0 6px rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 18px;
  transition: transform 400ms cubic-bezier(0.22,1,0.36,1);
}
.ig-hero-seal:hover { transform: translateY(-50%) rotate(0deg) scale(1.03); }
.ig-hero-seal img { width: clamp(80px, 9vw, 124px); height: auto; margin-bottom: 6px; }
.ig-hero-seal span { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,0.78); letter-spacing: 0.02em; }
.ig-hero-seal span strong { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 900px) { .ig-hero-seal { display: none; } }

.ig-hero .brew-hero-title { text-transform: none; }
.ig-hero .brew-hero-title .accent { color: #9ec9ee; }

/* Header mit zwei Buttons */
.ig-header-cta { display: flex; align-items: center; gap: 10px; }
@media (max-width: 980px) { .ig-header-cta .btn2:first-child { display: none; } }

/* ============================================================
   Schutz auf einen Blick — 4 Karten mit Häkchen
   ============================================================ */
.ig-schutz { background: var(--sand); }
.ig-schutz-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ig-schutz-card {
  background: #fff; border: 1px solid var(--gray-15); border-radius: 22px;
  padding: clamp(24px, 2.6vw, 34px); text-align: center;
  transition: transform 350ms cubic-bezier(0.22,1,0.36,1), box-shadow 350ms ease, border-color 350ms ease;
}
.ig-schutz-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(15,76,129,0.13); border-color: var(--zurich-blue-50); }
.ig-schutz-card .ic {
  position: relative; width: 84px; height: 84px; margin: 0 auto 20px;
  border-radius: 50%; background: var(--zurich-blue-10); border: 1.5px solid var(--zurich-blue-50);
  color: var(--zurich-blue); display: flex; align-items: center; justify-content: center;
}
.ig-schutz-card .ic svg { width: 38px; height: 38px; stroke-width: 1.7; }
.ig-schutz-card .ic .check {
  position: absolute; right: -4px; bottom: -4px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #1F8A5B; color: #fff; border: 3px solid var(--sand);
  display: flex; align-items: center; justify-content: center;
}
.ig-schutz-card:hover .ic .check { border-color: #fff; }
.ig-schutz-card .ic .check svg { width: 15px; height: 15px; stroke-width: 3.2; }
.ig-schutz-card h3 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.01em; }
.ig-schutz-card p { font-size: 14px; line-height: 1.55; color: var(--gray-60); margin: 0; }
@media (max-width: 880px) { .ig-schutz-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ig-schutz-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Das Wichtigste kurz erklärt (dunkle Karte)
   ============================================================ */
.ig-wichtig { background: #fff; }
.ig-wichtig-card {
  background: linear-gradient(155deg, #1463A6 0%, #0F4C81 48%, #07203A 100%);
  border-radius: 28px; padding: clamp(34px, 5vw, 70px);
  color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 34px 80px rgba(7,32,58,0.26);
}
.ig-wichtig-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 45% 60% at 92% 8%, rgba(33,103,174,0.4), transparent 70%);
  pointer-events: none;
}
.ig-wichtig-card > * { position: relative; z-index: 1; }
.ig-wichtig-head { max-width: 640px; margin-bottom: 30px; }
.ig-wichtig-head .v2-title { color: #fff; }
.ig-wichtig-head .v2-title .accent { color: #9ec9ee; }
.ig-wichtig-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; max-width: 880px; }
.ig-wichtig-list li { display: flex; align-items: flex-start; gap: 15px; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; color: rgba(255,255,255,0.88); }
.ig-wichtig-list b { color: #fff; font-weight: 600; }
.ig-wichtig-list .ck {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: rgba(158,201,238,0.18); color: #9ec9ee;
  display: flex; align-items: center; justify-content: center;
}
.ig-wichtig-list .ck svg { width: 15px; height: 15px; stroke-width: 3; }
.ig-wichtig-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(30px, 4vw, 44px); }
.ig-wichtig-note { font-size: 14px; color: rgba(255,255,255,0.72); }

/* ============================================================
   Cross-Selling
   ============================================================ */
.ig-cross { background: var(--sand); }
.ig-cross-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ig-cross-card {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid var(--gray-15); border-radius: 20px;
  padding: clamp(22px, 2.4vw, 30px);
  transition: transform 350ms cubic-bezier(0.22,1,0.36,1), box-shadow 350ms ease, border-color 350ms ease;
}
.ig-cross-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(15,76,129,0.12); border-color: var(--zurich-blue-50); }
.ig-cross-card .ic {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: var(--zurich-blue-10); color: var(--zurich-blue);
  display: flex; align-items: center; justify-content: center;
}
.ig-cross-card .ic svg { width: 25px; height: 25px; }
.ig-cross-card h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 2px 0 8px; letter-spacing: -0.01em; }
.ig-cross-card p { font-size: 14px; line-height: 1.55; color: var(--gray-60); margin: 0; }
@media (max-width: 900px) { .ig-cross-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ig-cross-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Über uns (dunkel)
   ============================================================ */
.ig-about { background: linear-gradient(160deg, #0F4C81 0%, #07203A 100%); color: #fff; overflow: hidden; position: relative; }
.ig-about::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 60% at 8% 12%, rgba(33,103,174,0.4), transparent 70%); pointer-events: none; }
.ig-about .container { position: relative; z-index: 1; }
.ig-about-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.ig-about-intro .v2-title { color: #fff; }
.ig-about-intro .v2-title .accent { color: #9ec9ee; }
.ig-about-points { display: flex; flex-direction: column; gap: 13px; margin-top: 28px; }
.ig-about-point { display: flex; align-items: center; gap: 13px; font-size: 15.5px; font-weight: 500; color: rgba(255,255,255,0.9); }
.ig-about-point .ck { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: rgba(158,201,238,0.18); color: #9ec9ee; display: flex; align-items: center; justify-content: center; }
.ig-about-point .ck svg { width: 14px; height: 14px; stroke-width: 3; }
.ig-about-facts { display: flex; flex-direction: column; gap: 16px; }
.ig-fact { background: rgba(255,255,255,0.06); border: 1px solid rgba(158,201,238,0.2); border-radius: 18px; padding: 24px 28px; }
.ig-fact .num { font-size: clamp(34px, 4vw, 50px); font-weight: 600; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.ig-fact .lbl { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 8px; }
@media (max-width: 880px) { .ig-about-grid { grid-template-columns: 1fr; } .ig-about-facts { flex-direction: row; flex-wrap: wrap; } .ig-fact { flex: 1; min-width: 160px; } }

/* ============================================================
   Kontakt-Tabs
   ============================================================ */
.ig-tabs { display: flex; gap: 8px; background: var(--sand); padding: 5px; border-radius: 14px; margin-bottom: 18px; }
.ig-tab {
  flex: 1; padding: 11px 14px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--gray-60); background: transparent;
  transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}
.ig-tab.active { background: var(--zurich-blue); color: #fff; box-shadow: 0 8px 20px rgba(15,76,129,0.24); }