/*
Theme Name:     Foxiz child
Template:       foxiz
Version:        1.0
*/

/* ===========================================================
   1) GLOBAL: Farben, Typografie, Abstände -- NEU: LINKS/RECHTS Abstände
   =========================================================== */

:root {
  --color-link: #ff4545;
  --color-text: #111;
  --color-bg: #fff;
}

.entry-content h1 { margin-top: 2rem; margin-bottom: .3rem; line-height: 1.2; }
.entry-content h2 { margin-top: 2rem; margin-bottom: .4rem; line-height: 1.25; }
.entry-content h3 { margin-top: 1.5rem; margin-bottom: .3rem; line-height: 1.25; }
.entry-content h4,
.entry-content h5,
.entry-content h6 { margin-top: 1rem; margin-bottom: .5rem; }

.entry-content p { margin: .3rem 0 .5rem !important; line-height: 1.55; }
.entry-content ul,
.entry-content ol { margin: .6rem 0 1rem !important; }
.entry-content li { margin-bottom: .3rem !important; }
.entry-content figure { margin: 1rem 0 1.5rem !important; }
.entry-content .wp-block-quote { margin: 1rem 0; padding-left: 1.2rem; color:#555; }
.entry-content .wp-block-separator { margin: 1.4rem 0; opacity:.2; }

/* ===========================================================
   2) SUBHEADS (News, Tools, Ratgeber)
   =========================================================== */

.subhead,
.subhead_news,
.subhead_tools,
.subhead_ratgeber {
  display:inline-block;
  border-radius: 3px;
  font-size:.6rem;
  font-weight:700;
  margin-bottom:3px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.subhead_news     { color:#414158a8; }
.subhead_tools    { color:#00bcd4; }
.subhead_ratgeber { color:#3ca88a; }

/* Dark Mode */
body[data-theme="dark"] .subhead_news     { color:#c5c1d8c9; }
body[data-theme="dark"] .subhead_tools    { color:#5fd8e8; }
body[data-theme="dark"] .subhead_ratgeber { color:#9ee8c4; }

/* ===========================================================
   3) HERO IMAGE
   =========================================================== */

.pmag-hero-image {
  position: relative;
  width: 100%;
  margin: 15px auto 15px;
  border-radius: 6px;
  overflow: hidden; /* Bild bleibt rund */
  box-shadow: 0 10px 25px rgba(0,0,0,.15), 0 4px 10px rgba(0,0,0,.08);
  opacity: 0;
  transform: translateY(18px);
  animation: pmagFadeUp .55s ease-out forwards;
}

@keyframes pmagFadeUp {
  to { opacity:1; transform:translateY(0); }
}

.pmag-hero-image img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
@media(max-width:768px){
  .pmag-hero-image img { max-height:200px; }
}
@media (min-width:992px) {
  .pmag-hero-image img { max-height:400px; }
}

/* ===========================================================
   4) CAPTION unten rechts IM HERO
   =========================================================== */

.pmag-post-caption {
  position:absolute;
  right:16px;
  bottom:14px;
  padding:4px 10px;
  font-size:8px;
  font-weight:500;
  color:#ffffffdd;
  background:rgba(0,0,0,.55);
  border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  white-space:nowrap;
  z-index:3;
}

@media(max-width:600px){
  .pmag-post-caption {
    right:10px; bottom:10px;
    font-size:6px; padding:3px 8px;
  }
}

/* ===========================================================
   5) HERO BADGES (rechts oben)
   =========================================================== */

.pmag-hero-badges {
  position:absolute;
  top:30px;
  right:0px;          /* Desktop rausgucken */
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  z-index:4;
  overflow:visible;
}

/* Mobile: nicht rausgucken */
@media(max-width:600px){
  .pmag-hero-badges {
    right:0px;         /* drin bleiben */
    top:20px;
  }
}

/* ===========================================================
   BADGE GRUNDSTIL
   =========================================================== */

.pmag-badge {
  position:relative;
  padding:9px 20px 9px 18px;
  font-size:13px;
  font-weight:700;
  color:#fff;
  backdrop-filter:blur(10px);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  border-radius:7px 0 0 7px;
}

/* ===========================================================
   6) RIBBON-ZACKE (nur für Ribbons!)
   =========================================================== */

.pmag-badge.ribbon::after {
  content:"";
  position:absolute;
  top:0;
  right:-10px;
  width:0; height:0;
  border-style:solid;
  border-width:0 10px 10px 0;
  border-color:transparent rgba(0,0,0,.30) transparent transparent;
}

/* Farbvarianten */
.pmag-badge.subhead-news     { background:linear-gradient(135deg,#ff4545,#ff6d6d); }
.pmag-badge.subhead-tools    { background:linear-gradient(135deg,#2b6aff,#5a8cff); }
.pmag-badge.subhead-ratgeber { background:linear-gradient(135deg,#3cc3a1,#66d7bc); }
.pmag-badge.series-badge     { background:linear-gradient(135deg,#ff4545,#ff6d6d); }

/* ===========================================================
   7) EXTRA BADGES (badge_1..badge_20)
   =========================================================== */

.pmag-badge.flat {
  border-radius:6px 0 0 6px;
}

.pmag-badge.extra-badge {
  gap:6px;
}

/* Icons */
.pmag-badge-icon {
  font-size:14px;
  line-height:1;
  
}

/* Label */
.pmag-badge-label {
  display:inline-block;
  line-height:1.2;
}

/* Mobile */
@media(max-width:600px){
  .pmag-badge {
    font-size:11px;
    padding:3px 14px 3px 10px;
  }
  .pmag-badge.extra-badge {
    font-size:10px;
    padding:6px 14px 6px 10px;
  }
}
/* ===========================================================
   Promptmag Serien – Übersichtsliste oben
   =========================================================== */

.series-meta-box {
  background: #ffffffc4;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 4px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.04);
}

.series-meta-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.series-meta-title {
  font-size: 0.9rem;
  font-weight: 700;
}

.series-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.series-list-item {
  padding: 2px 15px 2px 15px;
  font-size: .75rem;
  color: #191c29;
}

.series-list-item.current-item {
  font-weight: 600;
  color: #50546b;
}

.series-part-number {
  font-size: 0.65rem;
  font-weight: 700;
  margin-right: 4px;
}


/* ===========================================================
   Promptmag Serien – Scrollbox unten
   =========================================================== */

.series-scroll-box {
  margin-top: 35px;
}

.series-scroll-wrapper {
  overflow-x: auto;
  padding-bottom: 5px;
}

.series-scroll {
  display: flex;
  gap: 16px;
  scroll-snap-type: x mandatory;
}

.series-scroll::-webkit-scrollbar {
  display: none;
}

.series-item {
  flex: 0 0 72%;
  max-width: 72%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  scroll-snap-align: start;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.series-item.current-item {
  outline: 2px solid #ff4545;
}

.series-item img,
.series-item .no-thumb {
  width: 100%;
/* Fix: Bilder im Slider nicht abschneiden */
  max-height: 180px;
  object-fit: cover;
  display: block;
  height: auto;
  max-height: 180px;
  object-fit: cover;
  display: block;
  background: #f3f3f3;
}

.series-caption {
  padding: 12px;
}

.series-caption strong {
  display: block;
  font-size: .85rem;
  color: #ff4545;
  margin-bottom: 4px;
}

.series-subhead {
  font-size: 0.75rem;
  opacity: .7;
  margin-top: -2px;
  margin-bottom: 4px;
}

.series-title {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
}


/* ===========================================================
   Tablet & Desktop
   =========================================================== */

@media (min-width: 600px) {
  .series-item {
    flex: 0 0 42%;
    max-width: 42%;
  }
}

@media (min-width: 1024px) {
  .series-item {
    flex: 0 0 28%;
    max-width: 28%;
  }

  .series-scroll-box {
    margin-bottom: 20px;
  }
}


/* ===========================================================
   Serien-Archiv (Shortcode)
   =========================================================== */

.series-archive-box {
  margin-bottom: 35px;
}

.series-archive-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.series-name {
  margin: 0;
}

.series-archive-subtitle {
  font-size: .85rem;
  opacity: .7;
  margin-top: 2px;
}

.series-pagination {
  display: flex;
  gap: 6px;
}

.series-pagination .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ddd;
}

.series-pagination .dot.active {
  background: #ff4545;
}
/* Headline über dem Serien-Slider */
.series-scroll-headline {
  margin-top: 25px;
  margin-bottom: 10px;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Weiter-Button */
.series-next-button {
  display: inline-block;
  margin-top: 18px;
  padding: 6px 12px;
  background: #ff4545;
  color: #fff !important;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 7px;
  text-align: center;
  text-decoration: none;
  transition: background .2s;
}

.series-next-button:hover {
  background: #e23d3d;
}

.series-next-button.end {
  background: #4caf50;
}
/* ===========================================================
   📚 Serien-Archiv – Liste der Serienbeiträge
   =========================================================== */

.series-archive-wrapper {
  margin: 20px auto;
  max-width: 1200px;
  padding: 0 15px;
}

.series-archive-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-text);
}

.series-archive-subtitle {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 25px;
}

/* Grid */
.series-archive-grid {
  display: grid;
  gap: 22px;
}

@media (min-width: 600px) {
  .series-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .series-archive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Cards */
.series-archive-card {
  background: var(--color-bg);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.series-archive-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.09);
}

/* Bild */
.series-archive-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Content */
.series-archive-card-content {
  padding: 14px 16px 18px;
}

.series-archive-card h3 {
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 6px;
}

.series-archive-card p {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 0;
}

/* Optional: Serien-Badge oben */
.series-archive-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,69,69,0.85);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* ===========================================================
   🎬 Promptmag Series Cards – Cinematic 21:9 Style (2025)
   =========================================================== */

/* Überschrift */
.series-headline {
  font-size: 1.35rem;
  margin: 20px 10px 14px;
  font-weight: 700;
  color: #14163d;
}


  .series-scroll-box {
  padding: 0 20px;
  margin-top: 15px;
  padding: 8px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.series-scroll {
  display: flex;
  gap: 16px;
  padding-bottom: 4px;
}

/* Card */
.series-item {
  margin: 5px 5px;
  text-decoration: none !important;
  color: inherit !important;
  background: #fff;
  width: 220px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  transform: scale(0.96);
  transition: all .25s ease;
  box-shadow: 0 3px 8px rgba(0,0,0,0.07);
}

.series-item:hover {
  transform: scale(1.03);
}

/* Aktiver Teil */
.series-item.active {
  transform: scale(1.06);
  border-color: #ff4545;
  box-shadow: 0 5px 16px rgba(255,69,69,0.2);
}

/* 21:9 Cover */
.series-thumb img {
  width: 100%;
  height: 100px;
  aspect-ratio: 21/9;
  object-fit: cover;
  display: block;
  background: #eee;
}

/* Textbereich */
.series-text {
  padding: 12px 13px 14px;
}

.series-title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 6px;
  color: #111;
}

.series-number {
  font-size: 0.7rem;
  opacity: 0.55;
}
/* ===========================================================
   📍 Serienbox – Badge "Aktueller Teil" (Promptmag Style)
   =========================================================== */

.series-item {
  position: relative;
}

.series-current-badge {
  position: absolute;
  top: 10px;
  right: 0px;
  z-index: 5;

  /* exakt wie deine pmag-badge.flat aussehen soll */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  padding: 6px 14px 6px 12px;
  font-size: 11px;
  font-weight: 700;

  background: linear-gradient(135deg, #ff4545, #ff6d6d);
  color: #fff;
  border-radius: 6px 0 0 6px;

  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}

/* Mobile kleiner */
@media(max-width:600px){
  .series-current-badge {
    font-size: 10px;
    padding: 4px 10px 4px 8px;
    top: 15px;
    right: 0px;
  }
}
/* ===========================================================
   🌙 Dark Mode – Serienboxen & Aktueller-Teil-Badge
   =========================================================== */

body[data-theme="dark"] .series-item {
  background: #001325;
  border-color: rgba(255,255,255,0.08);
  color: #f0f0f0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.6);
}

body[data-theme="dark"] .series-item.active {
  border-color: #ff4545;
  box-shadow: 0 5px 18px rgba(255,69,69,0.22);
}

body[data-theme="dark"] .series-thumb img {
  background: #333;
}

/* Text */
body[data-theme="dark"] .series-title {
  color: #ffffff;
}

body[data-theme="dark"] .series-number {
  color: #cccccc;
  opacity: 0.6;
}

/* Badge: Aktueller Teil */
body[data-theme="dark"] .series-current-badge {
  background: linear-gradient(135deg, #ff6d6d, #ff4545);
  box-shadow: 0 6px 16px rgba(0,0,0,0.7);
  color: #fff;
  backdrop-filter: blur(10px);
}

/* Scrollbox Hintergrund */
body[data-theme="dark"] .series-scroll-box {
  background: transparent;
}

/* Headline */
body[data-theme="dark"] .series-headline {
  color: #fff;
}
/* ===========================================================
   🌙 Dark Mode – Serienbox am Beitragsanfang
   =========================================================== */

/* Box-Hintergrund */
body[data-theme="dark"] .series-meta-box {
  background: #0e1d30;
  border: 0px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}

/* Titel (Serie: Name) */
body[data-theme="dark"] .series-meta-title {
  color: #ffffff;
}

/* Einzelne Listeneinträge */
body[data-theme="dark"] .series-list-item {
  color: #e0e0e0;
}

/* Aktiver Eintrag */
body[data-theme="dark"] .series-list-item.current-item {
  color: #ff6d6d !important; /* gleiche Rotnuance wie Badge */
  font-weight: 700;
}

/* Teilnummer */
body[data-theme="dark"] .series-part-number {
  color: #ff4545;
}

/* Icon oben (Bücher-Icon) */
body[data-theme="dark"] .series-meta-header i {
  color: #ff6d6d;
  opacity: 0.9;
}


.single .post-header .entry-media img {
  aspect-ratio: 21 / 9;
}
/* Fix CLS für erste Foxiz-Karten */
.block-wrap,
.rb-block,
.rb-grid {
    min-height: 280px; /* Mobile Höhe */
}

/* Fix Elementor Container Jump */
.elementor-element {
    min-height: auto;
}

/* Google Ads reservierter Platz */
.adsbygoogle {
    min-height: 300px;
    display: block;
}