/* ── ATUS Instagram-Feed ──────────────────────────────────────────────────
   Zeigt @atusbaernbach-Beiträge als quadratische Kachel-Grid im ATUS-Stil.
   Gerendert von assets/js/instagram-feed.js in [data-instagram-feed].       */

.ig-feed{--ig-red:var(--red,#d60819)}

/* Kopf: Logo + Handle + Folgen-Button */
.ig-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ig-head__id{display:flex;align-items:center;gap:14px}
.ig-head__logo{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.ig-head__id .eyebrow{display:block;margin:0 0 2px}
.ig-head__handle{font-weight:800;font-size:1.25rem;color:#111;text-decoration:none;line-height:1.1}
.ig-head__handle:hover{color:var(--ig-red)}
.ig-follow{display:inline-flex;align-items:center;gap:8px;background:var(--ig-red);color:#fff;
  padding:11px 20px;border-radius:999px;font-weight:800;text-decoration:none;line-height:1;
  box-shadow:0 6px 18px rgba(214,8,25,.28);transition:transform .18s ease,box-shadow .18s ease}
.ig-follow:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(214,8,25,.36);color:#fff}
.ig-follow svg{flex:0 0 auto}
.ig-head__cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ig-wa-join{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;
  padding:11px 20px;border-radius:999px;font-weight:800;text-decoration:none;line-height:1;
  box-shadow:0 6px 18px rgba(37,211,102,.32);transition:transform .18s ease,box-shadow .18s ease}
.ig-wa-join:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,211,102,.42);color:#fff}
.ig-wa-join svg{flex:0 0 auto;width:20px;height:20px}

/* Grid — feste 4 Spalten am Desktop.
   Vorher stand hier auto-fill mit minmax(220px): das ergab je nach Fensterbreite
   mal drei, mal fünf Spalten, und die letzte Reihe blieb oft halb leer. Feste
   Spaltenzahl je Stufe hält das Raster ruhig und die Kacheln gleich groß. */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* Nachladen */
.ig-more{display:flex;justify-content:center;margin-top:26px}
.ig-more button{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border:0;
  border-radius:999px;background:#111;color:#fff;font:800 .72rem/1 'Barlow Condensed',Impact,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.ig-more button:hover{background:var(--red,#d60819);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(214,8,25,.32)}
.ig-more button:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;background:#111}
.ig-more__rest{margin-left:2px;opacity:.6;font-weight:600}
/* Neu nachgeladene Kacheln kurz einblenden, damit man sieht, was dazugekommen ist */
@keyframes ig-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ig-card--neu{animation:ig-auf .35s ease both}
@media(prefers-reduced-motion:reduce){.ig-card--neu{animation:none}}

/* Kachel = ganzer Link */
.ig-card{position:relative;display:block;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:#0d0d0f;text-decoration:none;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.14);
  transition:transform .25s ease,box-shadow .25s ease}
.ig-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.24)}
.ig-card__img{position:absolute;inset:0;background-size:cover;background-position:center}
.ig-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.ig-card:hover .ig-card__img img{transform:scale(1.06)}
.ig-card__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.72) 100%)}
.ig-card__badge{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;
  width:30px;height:30px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.ig-card__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 13px;display:flex;
  flex-direction:column;gap:5px}
.ig-card__caption{font-size:.92rem;line-height:1.35;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ig-card__date{font-size:.76rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;opacity:.85}
.ig-card::after{content:"";position:absolute;inset:0;z-index:3;border-radius:16px;
  box-shadow:inset 0 0 0 0 var(--ig-red);transition:box-shadow .2s ease}
.ig-card:hover::after{box-shadow:inset 0 0 0 3px var(--ig-red)}

/* Ladeplatzhalter (Skeleton) */
.ig-skel{display:block;aspect-ratio:4/5;border-radius:16px;
  background:linear-gradient(100deg,#eceef1 30%,#f6f7f9 50%,#eceef1 70%);
  background-size:200% 100%;animation:ig-shimmer 1.2s infinite}
.ig-grid--one{grid-template-columns:1fr}
@keyframes ig-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* Leerzustand */
.ig-empty{text-align:center;padding:40px 20px;color:#6b7078}
.ig-empty svg{color:#c7ccd3}
.ig-empty p{margin:10px 0 16px;font-weight:600}

/* Hinweis (Vorschau) */
.ig-note{margin:16px 0 0;font-size:.86rem;color:#8a9099;text-align:center}

@media(max-width:600px){
  .ig-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .ig-card{border-radius:13px}
  .ig-card__caption{-webkit-line-clamp:2;font-size:.86rem}
}
/* Tablet: 3 Spalten (zwischen Desktop-4 und Handy-2) */
@media(min-width:601px) and (max-width:900px){.ig-grid{grid-template-columns:repeat(3,1fr)}}

/* ── Startseiten-Kachel „Neuester Beitrag" (verlinkt zu news.html) ── */
.seo-intro__side{display:flex;flex-direction:column;gap:24px;min-width:0}
.ig-card--latest{--ig-red:var(--red,#d60819)}
.ig-latest__tag{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.55);color:#fff;padding:6px 12px;border-radius:999px;font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em}
.ig-latest__tag svg{width:15px;height:15px}
.ig-latest__more{font-size:.84rem;font-weight:800;color:#fff;letter-spacing:.02em}
.ig-latest__more b{color:#ff5b66}

/* ── Popup / Lightbox (ganzer Beitrag auf der eigenen Seite) ──
   Feste Dialog-Höhe → Bild bleibt zentriert (wird nicht „nach unten geschoben"),
   der Text rechts scrollt in sich (eigene Scrollleiste). */
html.ig-lb-open{overflow:hidden}
.ig-lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px}
.ig-lb[hidden]{display:none}
.ig-lb__backdrop{position:absolute;inset:0;background:rgba(8,8,11,.82)}
.ig-lb__dialog{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);
  width:100%;max-width:960px;height:min(88vh,720px);background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.55)}
.ig-lb__media{min-width:0;min-height:0;overflow:hidden;background:#0b0b0c;display:flex;align-items:center;justify-content:center}
.ig-lb__img{width:100%;height:100%;object-fit:contain;display:block}
.ig-lb__side{min-height:0;height:100%;display:flex;flex-direction:column;padding:22px}
.ig-lb__head{flex:0 0 auto;display:flex;align-items:center;gap:10px;color:#111}
.ig-lb__head svg{color:#c1275f;flex:0 0 auto}
.ig-lb__head strong{display:block;font-size:1.02rem;line-height:1.1}
.ig-lb__date{font-size:.78rem;color:#888;font-weight:700}
.ig-lb__caption{flex:1 1 auto;min-height:0;overflow-y:auto;margin:14px 0;white-space:pre-wrap;color:#333;font-size:.92rem;line-height:1.6}
.ig-lb__share-label{flex:0 0 auto;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#8a9099;margin-bottom:9px}
.ig-lb__actions{flex:0 0 auto;display:flex;gap:8px}
.ig-lb__btn{flex:1 1 0;min-width:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:13px 6px;border:0;border-radius:12px;font-weight:800;font-size:.76rem;cursor:pointer;text-decoration:none;color:#fff;
  transition:filter .15s ease,transform .15s ease}
.ig-lb__btn svg{width:22px;height:22px}
.ig-lb__btn:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff}
.ig-lb__b-ig{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.ig-lb__b-fb{background:#1877F2}
.ig-lb__b-wa{background:#25D366}
.ig-lb__close{position:absolute;top:10px;right:12px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.ig-lb__close:hover{background:rgba(0,0,0,.75)}
@media(max-width:720px){
  .ig-lb{padding:0}
  .ig-lb__dialog{grid-template-columns:1fr;grid-template-rows:minmax(0,auto) minmax(0,1fr);height:100dvh;max-width:none;border-radius:0}
  .ig-lb__media{max-height:45vh}
  .ig-lb__side{padding:18px}
}