/* ===================================================================
   News-Embed – iframe mit Einwilligungs-Gate
   =================================================================== */

:root{
  --primary-dark:#001F30;
  --accent:#F5A623;
  --text-light:#FFFFFF;
  --radius:.5rem;
  --container-width:1000px;
  --header-height:80px;
}

/* Sicher über globalem Overlay */
.news-embed-page{ position: relative; z-index: 2; }

/* Hero (kompakter) */
.news-hero{
  /* vorher: padding: calc(1.25rem + var(--header-height)) 0 1.25rem; */
  padding: .6rem 0 .8rem;
  background: var(--primary-dark);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
@supports (padding: env(safe-area-inset-top)) {
  /* sorgt für Freiraum bei iOS-Notch, ohne zu hoch zu werden */
  .news-hero{ padding-top: max(.6rem, env(safe-area-inset-top)); }
}

.news-hero .container{ text-align: center; }
.news-hero .eyebrow{
  display:inline-block;
  font-weight:700;
  letter-spacing:.3px;
  background: rgba(245,166,35,.18);
  color: var(--accent);
  border: 1px solid rgba(245,166,35,.4);
  padding:.2rem .6rem;
  border-radius:999px;
  margin-bottom:.35rem; /* enger */
}
.news-hero h1{
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 .25rem;   /* enger */
  color: var(--text-light);
}
.news-hero .lead{
  opacity:.95; max-width:800px;
  margin: 0;            /* enger */
  line-height: 1.5;     /* minimal enger */
}

/* Embed-Bereich */
.news-embed{ padding: 1.25rem 0 2.5rem; }
.embed-toolbar{
  display:flex; gap:.5rem; flex-wrap:wrap;
  justify-content:flex-end;
  margin-bottom:.75rem;
}
.btn-line{
  display:inline-block;
  padding:.6rem .85rem;
  border-radius:.45rem;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  color: var(--text-light);
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn-line:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
}

.embed-shell{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
  position: relative;
}

.news-frame{
  display:block;
  width:100%;
  height: 70vh;          /* JS setzt die finale Höhe, das ist nur Fallback */
  border:0;
  background:#fff;       /* weißer Hintergrund für eingebettete Seite */
}

.embed-fallback{
  padding: 1rem;
  text-align: center;
}
.embed-fallback .btn-primary{
  display:inline-block;
  margin-top:.5rem;
  background: var(--accent);
  color:#121212;
  padding:.7rem 1rem;
  border-radius:.5rem;
  font-weight:800;
  text-decoration:none;
}

/* Consent-Gate */
.embed-consent{
  padding: 1.25rem 1.25rem 1rem;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.embed-consent h2{
  margin: 0 0 .4rem;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--text-light);
}
.embed-consent p{
  margin: 0;
  line-height: 1.6;
  opacity: .95;
}
.gate-actions{
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-top: .75rem;
}
.btn-primary{
  background: var(--accent);
  color: #121212;
  border: 0;
  padding: .65rem .95rem;
  border-radius: .5rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover{ filter: brightness(0.95); }
.btn-ghost{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color: var(--text-light);
  padding:.65rem .95rem;
  border-radius:.5rem;
  font-weight:700;
  cursor:pointer;
}
.btn-ghost:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
}
.btn-inline{
  align-self: center;
  color: var(--text-light);
  text-decoration: underline;
  opacity: .95;
}

.consent-hint{
  margin-top: .6rem;
  font-size: .95rem;
  opacity: .9;
}

@media (max-width: 768px){
  .embed-toolbar{ justify-content:center; }
  .news-frame{ height: 65vh; }
  .gate-actions{ justify-content: center; }
  /* Hero noch knapper auf sehr kleinen Screens */
  .news-hero{ padding: .5rem 0 .6rem; }
  .news-hero .eyebrow{ margin-bottom: .3rem; }
}