/* =========================================================
   IVÖ – Home (home.css)
   Ziel: ruhiger, moderner, weniger "wuchtig", stabileres Layout
   - kleine Typo-Verbesserungen
   - Cards etwas leichter, weniger harte Kanten
   - Masonry-Gutter sauber
   - Fokus/Links zugänglicher
========================================================= */

:root{
  --iv-primary: #7B3738;
  --iv-primary-2: rgba(123, 55, 56, .12);
  --iv-primary-3: rgba(123, 55, 56, .06);

  --iv-text: #222;
  --iv-muted: #666;
  --iv-border: rgba(0,0,0,.08);

  --radius: 12px;

  --t-fast: .12s ease;
  --focus: 0 0 0 3px rgba(123, 55, 56, .18);
}

/* Skip link */
.skip-link{
  position: absolute;
  left: -999px;
  top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--iv-border);
  color: var(--iv-text);
  z-index: 9999;
}
.skip-link:focus{
  left: 10px;
  box-shadow: var(--focus);
  outline: none;
}

/* Typo leicht glätten */
body{
  color: var(--iv-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hero Text etwas ruhiger */
.home-hero .home-lead{
  color: var(--iv-muted);
  line-height: 1.65;
}

/* Section Head: Titel + Subline */
.home-section-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.home-section-sub{
  color: var(--iv-muted);
  font-size: 14px;
}

/* Cards: leicht, Border statt harte Schatten */
.home-card{
  border-radius: var(--radius);
  border: 1px solid var(--iv-border);
  box-shadow: none;
  overflow: hidden;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  background: #fff;
}
.home-card:hover{
  border-color: rgba(123,55,56,.18);
  transform: translateY(-1px);
}

/* Für Cards, die komplett klickbar sind */
.home-card-link{
  position: relative;
}
.home-card-link:focus-within{
  box-shadow: var(--focus);
}

/* Media in News */
.home-media{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
}

/* Links ruhiger */
.home-link{
  color: var(--iv-primary);
  font-weight: 600;
  text-decoration: none !important;
  transition: opacity var(--t-fast);
}
.home-link:hover{
  opacity: .85;
}
a:focus{
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px;
}

/* Mobile Feinschliff */
@media (max-width: 575.98px){
  .home-section-sub{
    font-size: 13.5px;
  }
  .home-card:hover{
    transform: none; /* weniger "springen" am Handy */
  }
}

/* ---------------------------------------------------------
   IVÖ Startseite 2026
--------------------------------------------------------- */
.home-hero {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}
.home-hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  top: -280px;
  right: -140px;
  border: 70px solid rgba(123,55,56,.055);
  border-radius: 50%;
  pointer-events: none;
}
.home-hero-copy { position: relative; z-index: 1; }
.home-eyebrow {
  display: inline-flex;
  margin-bottom: 16px;
  color: #7b3738;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.home-hero h1 {
  max-width: 790px;
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.03;
  letter-spacing: -.045em;
}
.home-hero h1::before { display: none; }
.home-hero .home-lead { max-width: 720px; font-size: 18px; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.home-hero-actions .btn { border-radius: 8px; padding: 13px 24px; }
.home-trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; color: #505b6d; font-size: 13px; font-weight: 600; }
.home-trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.home-trust-row i { color: #7b3738; }
.home-hero img.img-fluid {
  position: relative;
  z-index: 1;
  transform: rotate(1.5deg);
  box-shadow: 0 28px 70px rgba(22,28,38,.16);
}

.home-value-section { padding: 90px 0; background: #fff; }
.home-value-intro {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: end;
  gap: 60px;
  margin-bottom: 42px;
}
.home-value-intro h2 { margin: 0; max-width: 680px; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; }
.home-value-intro p { margin: 0 0 4px; color: #657083; line-height: 1.75; }
.home-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.home-value-card {
  position: relative;
  display: block;
  min-height: 330px;
  padding: 30px;
  overflow: hidden;
  color: #1b2330 !important;
  background: #f5f7f9;
  border: 1px solid rgba(27,35,48,.08);
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.home-value-card:hover { transform: translateY(-5px); background: #fff; box-shadow: 0 20px 45px rgba(22,28,38,.1); }
.home-value-card > i { display: block; margin: 54px 0 22px; color: #7b3738; font-size: 30px; }
.home-value-card h3 { margin-bottom: 12px; font-size: 21px; }
.home-value-card p { color: #657083; font-size: 14px; line-height: 1.7; }
.home-value-number { position: absolute; top: 24px; right: 26px; color: rgba(27,35,48,.16); font-size: 32px; font-weight: 700; }
.home-card-arrow { position: absolute; left: 30px; bottom: 27px; color: #7b3738; font-size: 13px; font-weight: 700; }

/* Aktuelles */
.home-news-section {
  padding: 92px 0 72px;
  background: #eef1f5;
}
.home-news-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: end;
  gap: 50px;
  margin-bottom: 38px;
}
.home-news-heading h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; }
.home-news-heading p { margin: 0 0 4px; color: #657083; line-height: 1.75; }
.home-news-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:24px;
}
.home-news-item { min-width:0; }
.home-news-item-featured { grid-column:span 2; grid-row:span 2; }
.home-news-card {
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(27,35,48,.08);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(22,28,38,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-news-card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(22,28,38,.11); }
.home-news-media { position: relative; height: 250px; overflow: hidden; }
.home-news-card-featured .home-news-media { height: 330px; }
.home-news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.home-news-card:hover .home-news-media img { transform: scale(1.025); }
.home-news-date {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: grid;
  place-items: center;
  min-width: 76px;
  padding: 10px 12px;
  color: #fff;
  background: rgba(23,29,40,.9);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  backdrop-filter: blur(8px);
}
.home-news-date strong { display: block; font-size: 25px; line-height: 1; letter-spacing: 0; }
.home-news-card .card-body { padding: 28px; }
.home-news-published { display:block; margin-bottom:9px; color:#7b8493; font-size:11px; font-weight:600; }
.home-news-category { display: inline-block; margin-bottom: 10px; color: #7b3738; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.home-news-card h3 { margin-bottom: 13px; color: #1b2330; font-size: clamp(20px, 2.3vw, 27px); line-height: 1.25; }
.home-news-item:not(.home-news-item-featured) .home-news-card h3 { font-size:19px; }
.home-news-card p { margin-bottom: 14px; color: #657083; font-size: 14px; line-height: 1.75; }

.home-portal-section { padding: 70px 0 0; }

@media (max-width: 991.98px) {
  .home-news-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-news-item-featured { grid-column:1/-1; grid-row:auto; }
}

@media (max-width: 767.98px) {
  .home-news-section { padding: 64px 0 44px; }
  .home-news-heading { grid-template-columns: 1fr; gap: 14px; margin-bottom: 26px; }
  .home-news-media,
  .home-news-card-featured .home-news-media { height: 230px; }
  .home-news-card .card-body { padding: 22px; }
  .home-news-grid { grid-template-columns:1fr; gap:16px; }
  .home-news-item-featured { grid-row:auto; }
}
.home-portal-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  position: relative;
  overflow: hidden;
  padding: 54px 60px;
  color: #fff;
  background: linear-gradient(125deg, #171d28 0%, #293242 65%, #682f32 100%);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(22,28,38,.18);
}
.home-portal-panel::after { content: ""; position: absolute; right: -100px; top: -160px; width: 340px; height: 340px; border: 48px solid rgba(255,255,255,.05); border-radius: 50%; }
.home-portal-copy { position: relative; z-index: 1; max-width: 700px; }
.home-portal-panel .home-eyebrow { color: #e6b9bb; }
.home-portal-panel h2 { margin-bottom: 12px; color: #fff; font-size: clamp(30px,4vw,44px); }
.home-portal-panel p { margin-bottom: 24px; color: #cbd2dc; }
.home-portal-features { display: flex; flex-wrap: wrap; gap: 12px 22px; color: #fff; font-size: 13px; font-weight: 600; }
.home-portal-features span { display: inline-flex; align-items: center; gap: 7px; }
.home-portal-button { position: relative; z-index: 1; flex: 0 0 auto; border-radius: 8px; padding: 14px 24px; }

@media (max-width: 991.98px) {
  .home-hero { min-height: 0; padding-top: 70px !important; padding-bottom: 70px !important; }
  .home-value-intro { grid-template-columns: 1fr; gap: 18px; }
  .home-value-grid { grid-template-columns: 1fr; }
  .home-value-card { min-height: 280px; }
  .home-portal-panel { align-items: flex-start; flex-direction: column; padding: 42px; }
}

@media (max-width: 575.98px) {
  .home-hero { padding-top: 52px !important; padding-bottom: 52px !important; }
  .home-hero h1 { font-size: 40px; }
  .home-hero .home-lead { font-size: 16px; }
  .home-hero-actions { flex-direction: column; }
  .home-hero-actions .btn { width: 100%; }
  .home-trust-row { align-items: flex-start; flex-direction: column; }
  .home-value-section { padding: 64px 0; }
  .home-value-card { padding: 24px; }
  .home-card-arrow { left: 24px; }
  .home-portal-panel { padding: 30px 24px; border-radius: 12px; }
  .home-portal-button { width: 100%; }
}