/* rsc-uttigen-modern.css  —  Add-on Styles für rscuttigen.ch
   Einbinden NACH dem bestehenden Stylesheet.  */

/* =========================
   Grundsystem & Variablen
   ========================= */
   :root{
    --rsu-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --rsu-font-size: clamp(16px, 1.2vw + 12px, 18px);
    --rsu-radius: 14px;
    --rsu-radius-sm: 10px;
    --rsu-shadow: 0 10px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.06);
    --rsu-shadow-sm: 0 4px 10px rgba(0,0,0,.06);
    --rsu-gap: clamp(12px, 1.2vw, 20px);
  
    /* Farbakzente – an Clubfarben angelehnt (Blau/Gelb) */
    --rsu-brand: #1f6fe5;       /* Blau (Links/Buttons) */
    --rsu-brand-600: #1759b6;
    --rsu-accent: #ffd84d;      /* Gelb (Highlights) */
    --rsu-bg: #ffffff;
    --rsu-muted: #f7f8fa;
    --rsu-text: #0f172a;        /* sehr dunkles Blaugrün für gute Lesbarkeit */
    --rsu-text-muted: #475569;
    --rsu-border: #e6e8ee;
  }
  
  /* =============
     Typografie
     ============= */
  html { scroll-behavior: smooth; }
  body{
    font-family: var(--rsu-font-sans);
    font-size: var(--rsu-font-size);
    color: var(--rsu-text);
    line-height: 1.6;
    background: var(--rsu-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Harmonische, leicht grössere Headings */
  h1,h2,h3,h4{
    letter-spacing: .2px;
    color: var(--rsu-text);
    line-height: 1.2;
  }
  h1{ font-size: clamp(32px, 2.8vw + 12px, 44px); margin-block: .6em .4em; }
  h2{ font-size: clamp(26px, 2.0vw + 12px, 34px); margin-block: .9em .5em; }
  h3{ font-size: clamp(20px, 1.2vw + 12px, 24px); margin-block: .8em .4em; }
  
  /* Lauftext ruhiger */
  p, li{ color: var(--rsu-text); }
  small, .small{ color: var(--rsu-text-muted); }
  
  /* =============
     Links/Buttons
     ============= */
  a{
    color: var(--rsu-brand);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
  }
  a:hover{ color: var(--rsu-brand-600); }
  
  button, .button, .btn, a.button{
    display:inline-flex; align-items:center; justify-content:center;
    gap:.6em; padding:.7em 1.1em; border-radius: var(--rsu-radius-sm);
    background: var(--rsu-brand); color:#fff; border:0; font-weight:600;
    box-shadow: var(--rsu-shadow-sm); transition: transform .02s ease, box-shadow .2s ease, background .2s ease;
  }
  button:hover, .button:hover, .btn:hover, a.button:hover{
    background: var(--rsu-brand-600);
    transform: translateY(-1px);
    box-shadow: var(--rsu-shadow);
  }
  button:active, .button:active, .btn:active, a.button:active{ transform: translateY(0); }
  
  /* Standard-Kartenoptik für Boxen/Bilder/Teaser ohne HTML-Änderung */
  img, figure, .teaser, .widget, .card{
    border-radius: var(--rsu-radius);
    overflow: hidden;
  }
  figure img{ display:block; width:100%; height:auto; }
  
  /* =========================
     Container & Abstände
     ========================= */
  main, .content, #content{
    --maxw: min(1100px, 92vw);
    margin-inline: auto;
    max-width: var(--maxw);
    padding-inline: clamp(8px, 2vw, 20px);
  }
  section, .section, article{ margin-block: calc(var(--rsu-gap)*1.5); }
  hr{ border:0; height:1px; background: var(--rsu-border); }
  
  /* =============================================
     “Nächste Spiele” – kompaktere, moderne Cards
     ============================================= */
  /* Der Bereich ist auf der Startseite eine Abfolge aus h3 + Text/Listen.
     Wir stylen diese Abfolge wie Karten – ohne zusätzliche Klassen.       */
  
  h1 + h3,        /* erster Eintrag nach dem Abschnittstitel */
  h3 + h3,        /* direkt aufeinander folgende Events */
  h3{
    position: relative;
    padding: 14px 16px;
    background: var(--rsu-muted);
    border: 1px solid var(--rsu-border);
    border-radius: var(--rsu-radius);
    box-shadow: var(--rsu-shadow-sm);
    margin-block: 14px 8px;
  }
  
  /* Datum-Heading wirkt wie Badge */
  h3{
    display:flex; align-items:center; gap:.6rem;
  }
  h3::before{
    content:"";
    width:10px; height:10px; border-radius:999px;
    background: var(--rsu-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rsu-brand) 18%, transparent);
  }
  
  /* Direkt folgende Event-Beschreibung schlanker setzen */
  h3 + p{
    margin-top: 6px; margin-bottom: 8px;
    color: var(--rsu-text-muted);
  }
  
  /* Event-Metadaten-Listen (z.B. Ort) dezent */
  h3 ~ ul{
    list-style: none; padding-left: 0; margin-top: 6px;
    display:flex; flex-wrap:wrap; gap: 8px 14px;
  }
  h3 ~ ul > li{
    background:#fff; border:1px solid var(--rsu-border);
    padding:6px 10px; border-radius: 999px; box-shadow: var(--rsu-shadow-sm);
    color: var(--rsu-text-muted); font-size: .95em;
  }
  
  /* “Mehrtägig”/Hinweis-Zeilen dezenter */
  h3 + p:has(> strong),
  h3 + p:has(> b){
    font-weight:600; color: var(--rsu-text);
  }
  
  /* “Termine abonnieren” & “Weitere Einträge” als klare CTAs */
  a[href*="ics"], a[href*="subscribe"], a:contains("Termine abonnieren"),
  a:contains("Weitere Einträge"){
    /* :contains wird nicht überall unterstützt; Fallbacks: */
  }
  a[href*="ics"], a[href*="subscribe"]{
    display:inline-flex; align-items:center; gap:.5em;
    padding:.6em .9em; margin-top: 10px;
    border:1px solid var(--rsu-border); border-radius: 999px;
    background:#fff; box-shadow: var(--rsu-shadow-sm); font-weight:600;
  }
  a[href*="ics"]::before, a[href*="subscribe"]::before{
    content:"📅";
  }
  
  /* Optional: Grid wenn sehr viele Einträge hintereinander kommen */
  @media (min-width: 780px){
    /* Gruppiere Ereignisse, indem aufeinanderfolgende h3 Blöcke in 2 Spalten laufen */
    h1 + h3, h3{ 
      /* “Card”-Breite */
    }
    /* Umbruch via display: grid auf dem umgebenden Container, sofern verfügbar */
    #content h1 + h3, #content h3{
      /* kein harter Grid, um keine Layoutsprünge zu erzeugen */
    }
  }
  
  /* =======================
     News-Teaser entschlacken
     ======================= */
  .news, .news-list, .teaser-list{
    display:grid; gap: var(--rsu-gap);
    grid-template-columns: 1fr;
  }
  @media (min-width: 860px){
    .news, .news-list, .teaser-list{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1160px){
    .news, .news-list, .teaser-list{ grid-template-columns: repeat(3, 1fr); }
  }
  .news article, .teaser, .news .item, .news-list > *{
    background: #fff; border:1px solid var(--rsu-border);
    border-radius: var(--rsu-radius);
    box-shadow: var(--rsu-shadow);
    overflow: hidden;
  }
  .news h3, .news .title{ margin: .8rem 1rem .2rem; }
  .news time, .news .meta{ margin: 0 1rem .6rem; color: var(--rsu-text-muted); }
  
  /* =======================
     Navigation / Header
     ======================= */
  header .nav, nav ul{
    gap: .6rem; display:flex; flex-wrap:wrap;
  }
  nav a{
    padding:.5em .8em; border-radius: 999px;
  }
  nav a:hover{
    background: color-mix(in srgb, var(--rsu-brand) 10%, transparent);
  }
  
  /* =======================
     Footer kompakter
     ======================= */
  footer{
    background: #0b1220; color: #e6eaf3;
    padding: 30px 0; margin-top: 40px;
  }
  footer a{ color:#e6eaf3; }
  footer small, footer p{ color:#c8cee0; }
  
  /* =======================
     Sonstiges
     ======================= */
  table{
    border-collapse: separate; border-spacing: 0; width:100%;
    border:1px solid var(--rsu-border); border-radius: var(--rsu-radius);
    overflow:hidden; box-shadow: var(--rsu-shadow-sm);
  }
  table th, table td{ padding: .7em .9em; border-bottom:1px solid var(--rsu-border); }
  table tr:last-child td{ border-bottom: 0; }
  
  /* =======================
     NEWS / BLOG / TEASER
     ======================= */
  
  /* 1) Responsives Grid für gängige Container */
  .news, .news-list, .posts, .post-list, .teaser-list, .blog-roll {
    display: grid;
    gap: var(--rsu-gap);
    grid-template-columns: 1fr;
  }
  @media (min-width: 860px){
    .news, .news-list, .posts, .post-list, .teaser-list, .blog-roll {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1160px){
    .news, .news-list, .posts, .post-list, .teaser-list, .blog-roll {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  /* 2) Card-Styling für einzelne Beiträge (breit gefasste Selektoren) */
  .news article, .news .item, .news-list > *, .posts > article, .post-list > li, 
  .teaser-list > *, .blog-roll > article, .entry, .post {
    background: #fff;
    border: 1px solid var(--rsu-border);
    border-radius: var(--rsu-radius);
    box-shadow: var(--rsu-shadow-sm);
    overflow: hidden;
    display: flex; 
    flex-direction: column;
    transition: transform .12s ease, box-shadow .15s ease, border-color .2s ease;
  }
  .news article:hover, .news .item:hover, .news-list > *:hover, .posts > article:hover, 
  .post-list > li:hover, .teaser-list > *:hover, .blog-roll > article:hover, .entry:hover, .post:hover {
    transform: translateY(-2px);
    box-shadow: var(--rsu-shadow);
    border-color: color-mix(in srgb, var(--rsu-brand) 22%, var(--rsu-border));
  }
  
  /* 3) Medienbereich (Top-Bild mit fixem Seitenverhältnis) */
  .news img, .news figure img, .post img, .entry img, 
  .news .thumb, .teaser .image, .card .image {
    width: 100%; height: auto; display: block;
  }
  .news .media, .teaser .media, .post .media, .entry .media, 
  .news figure, .teaser figure, .card .media {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 9;
  }
  .news .media img, .teaser .media img, .post .media img, .entry .media img,
  .news figure img, .teaser figure img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
  }
  .news article:hover .media img,
  .post:hover .media img,
  .entry:hover .media img { transform: scale(1.03); }
  
  /* 4) Inhaltsteil */
  .news .content, .news .inner, .news .body,
  .post .content, .entry .content, .teaser .content {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: .5rem;
  }
  
  /* Kategorie/Tag-Badge */
  .news .category, .post .category, .entry .category,
  .news .tags a, .post .tags a, .entry .tags a {
    display: inline-flex; align-items: center;
    border: 1px solid var(--rsu-border);
    background: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .85rem;
    color: var(--rsu-text-muted);
    text-decoration: none;
  }
  
  /* Titel mit sanfter Zeilenbegrenzung */
  .news h3, .post h2, .entry h2, .news .title, .teaser .title {
    margin: .2rem 0 .1rem;
    font-size: clamp(18px, 1.1vw + 14px, 24px);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* Meta-Zeile: Datum, Autor, Lesezeit */
  .news .meta, .post .meta, .entry .meta, .news time, .post time, .entry time {
    font-size: .9rem;
    color: var(--rsu-text-muted);
    display: flex; flex-wrap: wrap; gap: .6rem 1rem;
  }
  
  /* Teaser-Text kurz halten */
  .news .excerpt, .post .excerpt, .entry .excerpt, .teaser .excerpt, 
  .news p:first-of-type {
    color: var(--rsu-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* 5) “Mehr lesen” / CTA */
  .news .read-more, .post .read-more, .entry .read-more, 
  .news a.more, .teaser a.more, .post a.more {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .5em;
    padding: .55em .9em;
    border-radius: 999px;
    border: 1px solid var(--rsu-border);
    background: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
  }
  .news .read-more:hover, .post .read-more:hover, .entry .read-more:hover,
  .news a.more:hover, .teaser a.more:hover, .post a.more:hover {
    background: color-mix(in srgb, var(--rsu-brand) 8%, #fff);
    border-color: color-mix(in srgb, var(--rsu-brand) 22%, var(--rsu-border));
  }
  
  /* 6) Featured-Beitrag (falls via Klasse markiert) */
  .news .featured, .post.featured, .entry.featured {
    border-width: 2px;
    box-shadow: var(--rsu-shadow);
  }
  .news .featured .title, .post.featured .title { 
    color: var(--rsu-brand);
  }
  
  /* 7) Pagination */
  .pagination, .pager, .wp-pagenavi {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    margin-top: calc(var(--rsu-gap) * 1.2);
  }
  .pagination a, .pagination span, .pager a, .wp-pagenavi a, .wp-pagenavi span {
    min-width: 40px; height: 40px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rsu-border);
    background: #fff;
    border-radius: 999px;
    text-decoration: none; color: var(--rsu-text);
    font-weight: 600;
    box-shadow: var(--rsu-shadow-sm);
    transition: background .15s ease, transform .08s ease, border-color .2s ease;
  }
  .pagination a:hover, .pager a:hover, .wp-pagenavi a:hover {
    background: color-mix(in srgb, var(--rsu-brand) 8%, #fff);
    transform: translateY(-1px);
  }
  .pagination .current, .wp-pagenavi .current, .pagination .active {
    background: var(--rsu-brand); color: #fff; border-color: var(--rsu-brand);
  }
  
  /* 8) Kompakt-Variante für Listen ohne Bild (z.B. “Neuigkeiten”-Archiv) */
  .news .list-compact li, .post-list.compact li {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px 14px;
    align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rsu-border);
  }
  .news .list-compact li:last-child, .post-list.compact li:last-child { border-bottom: 0; }
  .news .list-compact time, .post-list.compact time { color: var(--rsu-text-muted); font-size: .9rem; }
  
  /* 9) Karten-Raster auf Mobil nicht zu klobig */
  @media (max-width: 420px){
    .news .read-more, .post .read-more { padding: .5em .8em; }
    .pagination a, .pagination span { min-width: 36px; height: 36px; }
  }