/* pages/news.css — seiten-spezifisch (news). Lädt zusätzlich zu main.css + components.css. */

/* --- Typography --- */
.more-news .h2style{
  margin:0 0 10px 0;
}

.more-news a { text-decoration:none; color: var(--ui-color-text);    box-shadow: none;
    font-weight: 600;}

.more-news li {    font-family: 'Montserrat';
    color: var(--ui-color-text);
    display: block;
    font-weight: 600;
    text-decoration: none;
    padding:10px 0 10px 0;
    border-bottom:1px solid var(--ui-border-color);
    font-size: 1.1rem;
    line-height:1.5;}

.more-news li:last-child {
    border-bottom: none;
}

.more-news ul { margin:0; padding:0; list-style:none; }

.more-news-index { 
  border: 1px solid var(--ui-border-color);
  box-shadow: var(--ui-shadow);
  background:var(--ui-surface); 
  padding:10px 20px 20px 20px; 
  margin:20px 0 20px 0; 
  border-radius: var(--ui-border-radius);
}

.more-news-index a { 
  text-decoration:none; 
  color: var(--ui-color-text);    
  box-shadow: none;

}

.more-news-index li {    
font-family: 'Oswald', Arial, sans-serif;
  color: var(--ui-color-text);
  display: block;
  font-weight: 500;
  text-decoration: none;
  padding:10px 0;
  border-bottom:1px solid var(--ui-border-color);
  font-size: 1.25rem;
  line-height:1.25;
}

.more-news-index li:last-child {
  border-bottom: none;
}

.more-news-index ul { 
  margin:0; 
  padding:0; 
  list-style:none; 
}

.more-news-index-sub {
font-family: 'Oswald', Arial, sans-serif;
    font-size: 1rem;
  color:var(--ui-color-subtext);   
  line-height: 1.25;
  margin: 0;
  font-weight: 400;
  display: block;
}

.more-news-noscript { border:1px dashed var(--ui-border-strong); background:#fcfcfc; padding:.75rem; font-size:.95rem; }

.more-news-noscript a { text-decoration:none; }

@media only screen and (min-device-width:48rem) {


  .more-news-index ul {
    display: flex;
        flex-wrap: wrap;
        margin:20px 0 20px 0;
  }
}

/* --- Loose comments --- */
/* =========================================================
   RESPONSIVE (USED IN SAMPLE PAGES)
   ========================================================= */
@media (min-width: 64rem) {

  .more-news-index li {
    width: 50%;
        border-bottom: none;
        padding: 10px;
        box-sizing: border-box;
  }
}

.show_apps{display:none;}

.font_apps{display:none;}

.article_content #mobile-anchor-more-news{
margin:0 -20px 0 -20px;
padding: 0 20px 0 20px;
background:var(--ui-surface);
border: 1px solid var(--ui-border-color);
box-shadow: var(--ui-shadow);  
}

.article_content #mobile-anchor-more-news .h2style{
padding:0;
margin:20px 0 20px 0;}

/* --- Forced keep: .gamecards* / .hx-btn* / .article_* --- */
.article_more .mobile_news .item{padding:0}

.article_break{margin:0;}

.article_break_end{margin:0}

.article_content{margin:0}

.article_content .altbg{margin:10px -20px 25px -20px;line-height:1.3;padding:10px 20px 65px 20px;}

.article_content .altbg a{text-decoration:none;color:#404040;box-shadow:none;font-weight:600;line-height: 1.3;}

.article_content .altbg h2{font-family: 'Anton', Arial, sans-serif;font-size:1.3rem;line-height:1.3;margin:10px 0 10px 0;text-transform:none;text-decoration:none;font-weight:400;}

.article_content > h2{text-decoration:none;font-size:1.6rem;margin:20px 0 20px 0;padding:0;}

.article_content ul{padding-inline-start:20px}

.article_content ul li{list-style:disc;padding-bottom:10px}

.article_content2 ul{padding-inline-start:20px}

.article_content2 ul li{list-style:disc;padding-bottom:10px}

.article_footer{margin:0 25px 0 25px}

.article_header{margin:25px 0 20px 0;}

.article_header > h1{text-decoration:none;font-size:1.8rem;font-family:'Oswald', Arial, Helvetica, sans-serif;font-weight:500;}

.article_image{margin:25px -19px 0 -20px;}

.article_image2{margin:10px -19px 20px -20px;}

.article_more{margin:25px}

.article_more{margin:20px 10px 20px 10px}

.article_teaser{ font-family: 'Lato', Arial, sans-serif; font-weight:700;font-size: 1.25rem;line-height: 1.6;}

.article_image .newsimage {
    display: block;
        margin: 0;
        padding: 0;
        top: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        object-position: center;
        border-radius:0;
  }

.article_content .altbg {
    padding:5px 20px 20px 20px;margin:0 -20px 0 -20px;
  }

.article_links{background:var(--ui-surface);padding:10px 20px 10px 20px;margin:30px -20px 35px -20px;}

.font_foto{font-family:'Lato',Arial;color:var(--ui-color-subtext);font-size:1.1rem;line-height:1.3;word-wrap:break-word;vertical-align:baseline;margin:0;padding:10px 20px 10px 20px;background: var(--ui-surface);border-bottom: 1px solid var(--ui-border-color);box-shadow: var(--ui-shadow);}

/* =====================================================
   SPLIT CTA BUTTONS – DESKTOP & MOBILE
   YouTube | Facebook (Desktop)
   Android | iOS (Mobile)
   ===================================================== */

/* ---------- BASIS ---------- */

.cta-split {
  display: flex;
  width: 100%;
  margin:20px 0 5px 0;
}

.socialbtn {
  flex: 1 1 50%;
  padding: 5px;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ui-on-brand);
  font-family: 'Oswald',Arial, Helvetica, sans-serif;
}

.socialbtn a {
  display: flex;
  align-items: center;
  color: var(--ui-on-brand);
  text-decoration: none;
}

.socialbtn span {
  line-height: 1.1;
}

.socialbtn small {
  font-size: 0.9rem;
  font-family: 'Lato',Arial, Helvetica, sans-serif;
}

.socialbtn i {
  font-size: 30px;
  line-height: 30px;
  padding: 10px;
  width: 50px;
  text-align: center;
  transition: transform 0.5s ease-in-out;
}

.socialbtn:hover i {
  transform: rotate(360deg);
}

/* ---------- FARBEN ---------- */

.socialbtn.yt {
  background-color: #c4302b;
}

.socialbtn.fb {
  background-color: #3b5998;
}

.socialbtn.android {
  background-color: #000;
}

.socialbtn.ios {
  background-color: #7D7D7D ;
}

.image-layer {
  position: relative;
}

/* ---------- DEVICE LOGIK ---------- */

.wa-image-btn {
  display: none;
}

/* Default: Desktop */
.cta-mobile-wrap {
  display: none;
}

/* Mobile / Touch */
@media (pointer: coarse) {


  .cta-desktop-wrap {
    display: none;
  }

.show_apps{display:block; padding: 0 0 20px 0;}  
.font_apps{display:block;
    font-family: 'Oswald', Arial, sans-serif;
    color: var(--ui-color-muted);
    font-size: 1rem;
    line-height: 1.3;
    word-wrap: break-word;
    vertical-align: baseline;}  


.cta-mobile-wrap {
  display: flex;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
}
 .wa-image-btn {
    position: absolute;
    right:0;
    bottom: -3px;
    z-index: 10;
    display: flex;
    align-items: center;
    width: 200px;
    padding: 5px;
    background-color: #25d366;
    color: var(--ui-on-brand);
    text-decoration: none;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: background-color .3s ease;
  }

  .wa-image-btn i {
    font-size: 30px;
    line-height: 30px;
    padding: 10px;
    width: 50px;
    text-align: center;
    transition: transform 0.5s ease-in-out;
  }

  .wa-image-btn span {
    line-height: 1.1;
  }

  .wa-image-btn small {
    font-size: 0.9rem;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-weight: 400;
  }

  .wa-image-btn:hover {
    background-color: #1ebe5d;
  }

  .wa-image-btn:hover i {
    transform: rotate(360deg);
  }
}

.font_date.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.font_date .article-meta__date {
  white-space: nowrap;
}

.font_date .article-meta__source {
  max-width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.font_autor{font-family:"Lato",sans-serif;color:var(--ui-color-text);font-size:1.3rem;line-height:1.6;word-wrap:break-word;font-weight:400;margin:25px 0  10px 0;padding:0 0 0 0;border-bottom:0px solid var(--ui-border-color);}

.font_autor a{color:var(--ui-color-text);text-decoration:none;box-shadow:inset 0 -.1em var(--ui-brand);font-weight:400;}

.font_date{font-family:'Oswald',Arial;color:var(--ui-color-subtext);font-size:1rem;line-height:1.3;word-wrap:break-word;vertical-align:baseline;margin:30px 0 30px 0;padding:0;}

@media (min-width: 64rem) {

.article_header > h1{text-decoration:none;font-size:2.8rem;}
  .article_image .newsimage {        aspect-ratio: 16 / 9;           object-position: top;     border-radius: var(--ui-border-radius);  } 
  .font_foto{border-bottom: 1px solid var(--ui-border-color);border-left: 1px solid var(--ui-border-color);border-right: 1px solid var(--ui-border-color);box-shadow:none;border-radius: 0 0 var(--ui-border-radius) var(--ui-border-radius);}
.article_content #mobile-anchor-more-news{background-color: var(--ui-bg);box-shadow: none;border:0;}
}

.cta-sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px; /* Abstand zwischen Buttons */
}

.cta-sidebar .socialbtn {
  flex: 0 0 auto;
  width: 100%;
  padding: 10px 12px;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ui-on-brand);
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
}

.cta-sidebar .socialbtn a {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--ui-on-brand);
  text-decoration: none;
}

.cta-sidebar .socialbtn span {
  line-height: 1.3
}

.cta-sidebar .socialbtn small {
  display: block;
  font-size: 0.85rem;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  opacity: 0.9;
    line-height: 1.3
}

.cta-sidebar .socialbtn i {
  font-size: 26px;
  line-height: 26px;
  padding: 8px;
  width: 44px;
  text-align: center;
  transition: transform 0.5s ease-in-out;
}

.cta-sidebar .socialbtn:hover i {
  transform: rotate(360deg);
}

.socialbtn.ios { background-color: #7D7D7D; }

.socialbtn.tiktok { background-color: #ec6b78; }

.socialbtn.insta { background-color: #c43667; }

.socialbtn.whatsapp { background-color: #1ebe5d; }