/* Theme-Variablen – passe das an deine Brand an */
  :root{
    --today-accent: #5865f2;                /* Outline/Text-Akzent */
    --today-bg:     rgba(88,101,242,.10);   /* Zellen-Hintergrund */
    --today-head:   rgba(88,101,242,.16);   /* Header-Hintergrund */
    --today-border: rgba(88,101,242,.35);   /* Linie unter Header */
    --brand: #14182b;
    --brand-dark: #101323;
    --accent: #bfa24a;             /* Gold (Akzent) */
    --gold: #f5c84b;               /* warmer Goldton */
    --gold-2: #ffe17c;
    --accent-light: #f5efe3;
    --secondary: #3f4a60;
    --neutral: #e4e6ec;
    --bg-muted: #f7f8fa;
    --badge-gi:#bfa24a; 
    --badge-nogi:#5d626c; 
    --badge-kids:#5269b6;  
    --secondary-bg: color-mix(in srgb, var(--accent, #5865f2) 8%, #f7f8fb);
    --neutral-strong: rgba(0,0,0,.16);
    --light-blue: #ADD8E6;
  }


/* Kursangebot: dezente Verbesserungen */
.page-kursangebot main { scroll-margin-top: var(--nav-h); }
.page-kursangebot .section-head { margin-bottom: clamp(18px, 3vw, 28px); }
.page-kursangebot .section-nav {
display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
}
.page-kursangebot .section-nav a{
padding:.45rem .75rem; border:1px solid var(--neutral);
border-radius:.6rem; background:#fff; font-weight:600;
}
.page-kursangebot .section-nav a:hover{ border-color:var(--accent); color:var(--accent); }


/* Kurskarten: etwas luftiger */
.page-kursangebot .kurs-karte p{ color:#454b59; }


/* FAQ: Accordions dezenter */
.page-kursangebot .accordion-button{ font-weight:700; }
.page-kursangebot .accordion-body{ color:#4b5160; }

/* Kursangebot – Page-spezifische Feinheiten */
.page-kursangebot main { scroll-margin-top: var(--nav-h); }

/* Kursangebot – Feature-Reihen */
#kurse img { object-fit: cover; width: 100%; height: auto; }
#kurse .row + .row { border-top: 1px solid var(--neutral); padding-top: 1.25rem; }
@media (min-width: 992px){
  #kurse .row + .row { padding-top: 1.75rem; }
}

.section-head .small { margin-top: .25rem; display: block; }

/* ========== HERO(INTRO) – Kursangebot ========== */
.hero-intro {
    position: relative;
    padding: clamp(24px, 5vw, 56px) 0;
    overflow: clip;
    border-bottom: 1px solid var(--neutral);
  }
  .hero-intro .hero-wrap { position: relative; z-index: 1; }
  
  /* Hintergrund-Visual */
  .hero-intro .hero-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    mask-image: radial-gradient(60% 50% at 50% 30%, #000 55%, transparent 100%);
  }
  .hero-intro .hero-blob {
    width: 100%; height: 100%; display: block; opacity: .9;
  }
  
  /* Typo */
  .hero-title {
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    line-height: 1.15;
    margin-bottom: .4rem;
  }
  .hero-subtitle {
    color: #4b5160;
    font-size: clamp(.98rem, 1.2vw, 1.05rem);
    margin: 0;
  }
  
  /* Chips */
  .hero-chips {
    display: flex; flex-wrap: wrap; gap: .5rem .5rem;
    list-style: none; padding: 0; margin: .9rem 0 0;
  }
  .hero-chips li {
    border: 0.5px solid var(--neutral);
    background: #fff;
    border-radius: 999px;
    padding: .35rem .6rem;
    font-weight: 600;
    font-size: .9rem;
  }
  
  /* CTAs + Sektionen-Navi */
  .hero-ctas { display: flex; align-items: center; gap: .8rem 1.2rem; flex-wrap: wrap; margin-top: 1rem; }
  .hero-nav { display: flex; gap: .45rem; flex-wrap: wrap; }
  .hero-nav a {
    display: inline-block; padding: .35rem .65rem; border-radius: .6rem;
    border: 1px dashed var(--neutral);
    font-weight: 600;
  }
  .hero-nav a:hover { color: var(--accent); border-style: solid; }
  
  /* Visual-Kachel */
  .hero-visual {
    position: relative; margin: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
    border: 1px solid var(--neutral);
    border-radius: clamp(14px, 2vw, 22px);
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
    overflow: hidden;
  }
  .hero-visual img { display: block; width: 100%; height: auto; object-fit: cover; }
  
  /* Microline */
  .hero-micro { margin-top: clamp(14px, 2vw, 20px); }
  
  /* Motion respect */
  @media (prefers-reduced-motion: reduce){
    .hero-blob, .hero-nav a, .hero-visual { transition: none !important; animation: none !important; }
  }
  
/* C) Bild schlicht, ohne Rand/Schatten */
.hero-intro.flat-image { border-bottom: 0; }
.hero-intro.flat-image .hero-bg { display: none; }  /* Vignette aus */
.hero-intro.flat-image .hero-visual{
  background: none; border: 0; box-shadow: none;
  border-radius: 12px;                               /* optional: leichte Rundung */
}

/* Dot-Grid als SVG-Data-URI (skaliert sauber, wenig Kontrast) */
.hero-intro.bg-dots .hero-bg { display:none; } /* alte Vignette aus */
.hero-intro.bg-dots {
  --dot: %23000000;         /* Punktfarbe (URL-escaped) */
  --dotAlpha: .06;          /* Deckkraft .04–.10 */
  --gap: 26;                /* Abstand in px */
  background-image:
    radial-gradient(circle at center, rgba(0,0,0,var(--dotAlpha)) 1px, transparent 1.2px);
  background-size: var(--gap) var(--gap);
  background-position: 0 0;
}

/* Hero: Dots sichtbar & robust (als Layer) */
.hero-intro.bg-dots { position: relative; background: none; }
.hero-intro.bg-dots .hero-bg { display: none; } /* alte Vignette sicher aus */
.hero-intro.bg-dots::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* Fein justierbar: */
  --gap: 24px;            /* Abstand der Punkte */
  --size: 1.5px;          /* Punktgröße */
  --alpha: .12;           /* Sichtbarkeit (.08–.14 ist gut) */
  background-image: radial-gradient(circle at center,
                     rgba(0,0,0,var(--alpha)) var(--size), transparent calc(var(--size) + .2px));
  background-size: var(--gap) var(--gap);
}

/* Inhalt liegt sicher über dem Layer */
.hero-intro .hero-wrap { position: relative; z-index: 1; }

/* Falls du die Bild-Variante nutzt: flach & ohne Ränder (behältst du ja) */
.hero-intro.flat-image .hero-visual{
  background:none !important; border:0 !important; box-shadow:none !important; border-radius:12px;
}


/* // PARAGRAPHEN STYLING // */
/* Standard, aber größer */
.p-lead{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.65;color:#353b47;margin:.75rem 0}

/* linker rand card style */
.p-rule{border-left:4px solid var(--neutral);padding:.6rem .9rem;margin:.8rem 0;background:#f8f9ff;border-radius:.4rem}

/* Erster Buchstabe Groß */
.p-dropcap{line-height:1.7}
.p-dropcap::first-letter{float:left;font-size:3.1rem;line-height:1;margin:.15rem .4rem 0 0;font-weight:700;color:var(--accent)}

/* Card */
.p-card{border:1px solid var(--neutral);border-radius:.8rem;padding:.8rem 1rem;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.04)}

/* *Neu Badge */
.p-badge{position:relative;padding-left:5.5rem}
.p-badge::before{content:"Neu";position:absolute;left:0;top:.15rem;background:#eef; color:#334;border:1px solid var(--neutral);padding:.25rem .55rem;border-radius:999px;font-weight:700;font-size:.8rem}

/* Callout */
.p-callout{border:1px solid var(--neutral);border-left:4px solid #7b8cff;background:#fff;border-radius:.6rem;padding:.8rem 1rem;color:#2a2f3a}
.p-callout.success{border-left-color:#18a957}
.p-callout.warn{border-left-color:#e7a400;background:#fff9e9}


/* Dots – Intensitäts-Modifier */
.hero-intro.bg-dots.is-strong::before { --alpha:.16; --size:1.6px; --gap:22px; }
.hero-intro.bg-dots.is-bold::before   { --alpha:.22; --size:2px;  --gap:20px; }


/* // HERO WIDGET // */
/* no-image: Text mittig, angenehme Lesebreite */
.hero-intro.no-image .hero-text{
  max-width: 900px;
  margin-inline: auto;
}

/* kleine Icon-Zeile (nur falls du sie aktivierst) */
.hero-icons{
  display:flex; gap:.6rem; align-items:center;
  color:#1f2937; opacity:.9; margin:.35rem 0 .1rem;
}
.hero-icons span{ font-weight:600; margin-right:.6rem; }

/* Liste-Titel & Checkliste */
.hero-listwrap{ margin-top:.6rem; }
.hero-list-title{ margin:.2rem 0 .3rem; font-weight:700; font-size:.95rem; color:#2f3542; }
.list-check{ list-style:none; margin:.4rem 0 0; padding:0; }
.list-check li{
  position:relative; padding-left:1.35rem; margin:.32rem 0; line-height:1.45;
}
.list-check li::before{
  content:""; position:absolute; left:0; top:.35rem; width:.85rem; height:.85rem;
  background-image: radial-gradient(#3f4a60 48%, transparent 50%);
}

/* Intro-Typo etwas ruhiger */
.hero-intro .hero-subtitle{ color:#3f4654; font-weight:470; line-height:1.6; }

/* Glass-Panel (lesbar auf Dots/Pattern) */
.hero-intro.hero--glass .hero-text{
  background: rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding: clamp(12px,2.4vw,18px);
}
@media (max-width: 991.98px){
  .hero-intro.hero--glass .hero-text{ background: rgba(255,255,255,.46); }
}

/* Underline am Titel */
.hero-intro.hero--underline .hero-title{ position:relative; padding-bottom:0.75rem; }
.hero-intro.hero--underline .hero-title::after{
  content:""; position:absolute; left:0; bottom:0; height:4px; width:84px;
  background: linear-gradient(90deg, var(--accent), transparent 80%);
  border-radius:2px;
}

.hero-text{ position: relative; }
.hero-watermark{
  position: absolute; right: 25px; top: 25px; z-index: 0;
  width: 60px;
  height: 60px;
  inline-size: clamp(110px, 18vw, 160px); opacity: .10;
  filter: saturate(.7);
  pointer-events: none;
}
.hero-text > *:not(.hero-watermark){ position: relative; z-index: 1; } /* Inhalt über dem WM */

/* H1 + Logo auf einer Linie */
.hero-head{ display:flex; align-items:center; gap:.6rem; }
.hero-kurslogo{
  inline-size: 60px; block-size: 60px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  flex: 0 0 56px;
}

/* Textkarte mit Scatter-Pattern dahinter */
.kurs-karte{
    position: relative;
    border-radius: 16px;
    padding: clamp(14px, 2.2vw, 18px);
    overflow: hidden;
    background: rgba(255,255,255,.78);             /* Grundfläche für Lesbarkeit */
    border: 1px solid rgba(0,0,0,.06);
    backdrop-filter: blur(2px) saturate(110%);
  }

  /* Scatter-SVG Layer */
  .kurs-karte::before{
    content:"";
    position:absolute; inset:-1px; z-index:0.25; pointer-events:none;
    background-image: url("/assets/background/polygon-scatter-haikei.svg");
    background-repeat: no-repeat;
    background-size: 150% auto;                    /* groß & soft */
    background-position: right -80px center;       /* off-canvas, wirkt „organisch“ */
    opacity: .1;                                  /* 0.12–0.26 je nach Geschmack */
    filter: saturate(110%) blur(0.5px);
    mix-blend-mode: multiply;                       /* natürlicher Look */
  }
  
  /* leichter Weiß-Scrim für Textkontrast (links->rechts) */
  .kurs-karte::after{
    content:"";
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background: linear-gradient(90deg,
        rgba(255,255,255,.85) 0%,
        rgba(255,255,255,.55) 45%,
        rgba(255,255,255,0) 100%);
  }
  
  /* Inhalt über den Layern */
  .kurs-karte > *{ position: relative; z-index: 1; }
  
  /* Mobile: etwas kräftigerer Scrim, Pattern dezenter */
  @media (max-width: 575.98px){
    .kurs-karte::before{ opacity:.15; background-size: 140% auto; background-position: right -20px center; }
    .kurs-karte::after{ background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.62) 45%, rgba(255,255,255,0) 100%); }

  }
  
  /* Optional Hover */
  @media (hover:hover){
    .kurs-karte:hover{ box-shadow: 0 12px 28px rgba(0,0,0,.06); }
  }
  
  .offer-badges{ display:inline-flex; flex-wrap:wrap; gap:.35rem .35rem; margin:0 .15rem; vertical-align:middle; }
.offer-badges .kurs-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.22rem .5rem; border:1px solid var(--neutral);
  background:#fff; border-radius:999px; font-weight:600; font-size:.92rem;
  line-height:1.1;
  font-weight: bold;
}

.text-secondary {
  margin-top: 1rem;
}

/* kleine Headline-Deko */
.kurs-karte h2{
    display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem;
  }
  .kurs-karte h2::after{
    content:""; flex:1; height:3px; border-radius:2px;
    background: linear-gradient(90deg, var(--accent), transparent 70%);
    opacity:.45;
  }

/* --- CTA: Outline-Button mit animiertem Pfeil -------------------------- */
.btn-outline-brand.cta-arrow{ position:relative; padding-right:2.1rem; }
.btn-outline-brand.cta-arrow::after{
  content:""; position:absolute; right:1rem; top:50%;
  width:.5rem; height:.5rem; transform: translateY(-50%) rotate(-45deg);
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transition: right .18s ease, transform .18s ease;
}
.btn-outline-brand.cta-arrow:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.btn-outline-brand:focus-visible{
  outline:3px solid color-mix(in oklab, var(--accent) 55%, white);
  outline-offset:3px;
}

/* Mobile: Pattern etwas leiser */
@media (max-width: 575.98px){
    .kurs-karte::before{ opacity:.14; background-size: 190% auto; background-position:right -50px center; }
    .kurs-karte::after{ background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.62) 45%, rgba(255,255,255,0) 100%); }
  }




/* Scroll-Wrapper für Mobile */
.table-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.04);
  }
  .kursplan-table{
    border-collapse: separate;
    border-spacing: 0;
    min-width: 720px; /* sorgt für horizontales Scrollen auf schmalen Screens */
    width: 100%;
    font-variant-numeric: tabular-nums;
  }
  
  /* Kopf */
  .kursplan-table thead th{
    position: sticky; top: 0;
    z-index: 3;
    background: #fff;
    padding: .7rem .8rem;
    text-align: left;
    font-weight: 800;
    border-bottom: 1px solid rgba(0,0,0,.08);
    white-space: nowrap;
  }
  
  /* Zeitspalte sticky links */
  .kursplan-table .sticky{
    position: sticky; left: 0;
    z-index: 4; /* über Zellen */
    background: #fff;
    box-shadow: 4px 0 0 rgba(0,0,0,.04); /* feine Trennung */
  }
  
  /* Körper */
  .kursplan-table tbody th.time{
    padding: .65rem .8rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(0,0,0,.06);
    white-space: nowrap;
  }
  .kursplan-table td{
    padding: .55rem .7rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    min-width: 8.5rem; /* angenehme Kartenbreite beim Scrollen */
  }
  
  /* Badges */
  .badge{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.34rem .55rem; border-radius:999px;
    font-weight: 700; font-size:.9rem; line-height:1;
  }
  .badge.gi   { color:#fff; background:#bfa24a; }
  .badge.nogi { color:#fff; background:#5d626c; }
  .badge.kids { color:#fff; background:#5269b6; }


  
  /* Heute-Highlight */
  .is-today{
    background: linear-gradient(180deg, rgba(88,101,242,.08), rgba(88,101,242,.02));
  }
  
  
  /* Filter "heute": alle anderen Spalten leicht dimmen */
  .table-filter-today td:not(.col-today),
  .table-filter-today th:not(.sticky):not(.col-today){
    opacity:.28;
  }

  /* Filter-Pills */
.plan-filter{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem; }
.pill{
  border:1px solid var(--neutral, #e5e7eb);
  background:#fff; border-radius:999px; padding:.28rem .7rem;
  font-weight:600; font-size:.92rem; cursor:pointer;
}
.pill.active{ color:#fff; background: var(--accent, #5865f2); border-color: transparent; }


  
  /* Kleine Screens: etwas kompakter */
  @media (max-width: 575.98px){
    .kursplan-table td{ min-width: 7.4rem; }
    .badge{ font-weight:600; }
  }
  

  
  /* ---------- Filterpanel Tweaks ---------- */
  .plan-filter{
    display:flex; align-items:center; gap:.4rem .5rem; flex-wrap:wrap;
    margin-top:.6rem; margin-bottom:.6rem; /* etwas Luft nach oben/unten */
  }
  .filter-label{
    display:inline-flex; align-items:center; gap:.35rem;
    font-weight:700; color:#2f3542; margin-right:.25rem;
  }
  .filter-icon{ width:18px; height:18px; opacity:.8; }
  
  /* mehr Luft zwischen Filter und Tabelle */
  .table-scroll{ margin-top:.4rem; }
  
  /* ---------- Tabelle: starker Table-Header ---------- */
  .kursplan-table thead th{
    font-weight:800;
    border-bottom: 2px solid var(--neutral-strong); /* dicke Linie */
  }
  
  /* ---------- Sticky Zeitspalte: Secondary-Look + Trennschatten ---------- */
  .kursplan-table .sticky{
    background: var(--secondary-bg);
    box-shadow: 6px 0 12px rgba(0,0,0,.06); /* sichtbare Trennung zur Scrollfläche */
    border-right: 1px solid rgba(0,0,0,.06);
  }
  
  /* Headerzelle der Zeitspalte extra klar */
  .kursplan-table thead .sticky{
    background: color-mix(in srgb, var(--secondary-bg) 85%, #fff);
  }
  
 
  
  /* ---------- Badges: längere Titel + subtile Zweitzeile ---------- */
  .badge{
    display:inline-flex; flex-direction:column; align-items:flex-start;
    gap:.14rem; padding:.38rem .6rem; border-radius:12px; line-height:1.1;
  }
  .badge .title{ font-weight:800; }
  .badge .note{ font-weight:600; font-size:.78rem; opacity:.75; }
  
  /* Bei sehr schmal: Badges wieder einzeilig */
  @media (max-width: 480px){
    .badge{ flex-direction:row; align-items:center; gap:.4rem; }
    .badge .note{ display:none; }
  }
  
  /* ---------- Zellen/Spalten etwas luftiger ---------- */
  .kursplan-table td{ min-width: 9.2rem; }
  @media (max-width: 575.98px){
    .kursplan-table td{ min-width: 7.6rem; }
  }
  
  /* ---------- Optional: Hover über Spalten (Desktop) ---------- */
  @media (hover:hover){
    .kursplan-table td:hover{ background: rgba(0,0,0,.025); }
  }

  
  .table-filter-today td.col-today,
  .table-filter-today th.col-today{
    background: color-mix(in srgb, var(--today-accent) 10%, #fff);
    /* outline: 2px solid color-mix(in srgb, var(--today-accent) 45%, transparent); */
  }
  
  /* Header-Zelle von Heute */
  .kursplan-table thead th.is-today{
    background: var(--today-head);
    border-bottom: 2px solid var(--today-border);
    color: color-mix(in srgb, #111 85%, var(--today-accent));
  }
  
  /* Wenn nur "Heute" gezeigt werden soll */
.table-only-today td:not(.col-today),
.table-only-today th:not(.sticky):not(.col-today){
  display: none;
}

/* Optional: wenn nur heute gezeigt wird, darf die Tabelle schmal sein */
.table-only-today .kursplan-table{
  min-width: 0;
}

/* Preise kompakt – Feinschliff */
#preise-kurz .card { overflow: hidden; }
#preise-kurz table { table-layout: fixed; }            /* verhindert wildes Springen */
#preise-kurz th, #preise-kurz td { padding: .9rem 1rem; }
#preise-kurz thead th { font-weight: 600; }
#preise-kurz tbody tr:nth-child(even) td { 
  background: rgba(0,0,0,.02);                         /* dezente Zebra-Streifen */
}
#preise-kurz tbody td strong { letter-spacing: .2px; }
@media (min-width: 992px){
  #preise-kurz .mx-auto { max-width: 720px; }          /* Desktop noch etwas schmaler */
}