/* ==================================================
   Ju-Jutsu SC Würzburg Heuchelhof
   Style 2.0
================================================== */

:root{
    --primary:#2356af;
    --primary-light:#3d74d8;
    --dark:#2f3c4d;
    --text:#444;
    --bg:#f5f7fb;
    --white:#fff;
    --radius:18px;
    --shadow:0 14px 35px rgba(0,0,0,.08);
    --max:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:Inter,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.7;
    padding-top:82px;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}

.container{
    width:min(var(--max),92%);
    margin:auto;
}

/* HEADER */

/* header{
    position:fixed;
    inset:0 0 auto 0;
    height:82px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    box-shadow:0 2px 12px rgba(0,0,0,.06);
    z-index:999;
} */

.site-header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}

.header{
    height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.logo{
    display:flex;
    align-items:center;
    gap:18px;
}
.logo img{height:62px}
.logo h1{
    font-size:1.15rem;
    color:var(--dark);
    line-height:1.2;
}
.logo p{
    color:var(--primary);
    font-weight:600;
    font-size:.95rem;
}

nav ul{display:flex;gap:.5rem}
nav a{
    padding:.75rem 1rem;
    border-radius:10px;
    transition:.2s;
    font-weight:600;
}
nav a:hover,
nav a.active{
    background:var(--primary);
    color:#fff;
}

/* HERO */

#hero{
    min-height:680px;
    display:flex;
    align-items:center;
    position:relative;
    background:url(images/hero.png) center center/cover no-repeat;
}
#hero .overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(18,35,62,.86),rgba(18,35,62,.60),rgba(18,35,62,.20));
}
.hero-content{
    position:relative;
    z-index:2;
    max-width:620px;
    color:#fff;
}
.hero-tag{
    display:inline-block;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.12);
    padding:.45rem .9rem;
    border-radius:999px;
    margin-bottom:1.5rem;
}
#hero h2{
    font-size:4rem;
    line-height:1.05;
    margin-bottom:1.25rem;
}
#hero p{
    font-size:1.3rem;
    margin-bottom:2rem;
}
.button{
    display:inline-block;
    padding:1rem 2rem;
    border-radius:12px;
    font-weight:700;
}
.primary{background:var(--primary);color:#fff}
.secondary{
    border:2px solid #fff;
    color:#fff;
    margin-left:1rem;
}

/* GENERAL */

section{padding:6rem 0}

.section-header{
    max-width:850px;
    margin:0 auto 3.5rem;
    text-align:center;
}
.section-header h2{
    color:var(--dark);
    font-size:2.5rem;
    margin-bottom:1rem;
}
.section-header p{
    color:#666;
}

/* QUICKINFO */

#quickinfo{margin-top:-70px;position:relative;z-index:5}
.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
}
.card{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:2rem;
    text-align:center;
}
.icon{font-size:2.2rem;margin-bottom:1rem}

/* HIGHLIGHTS */

.highlights{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:2rem;
}
.highlights article{
 background:#fff;
 padding:2rem;
 border-radius:var(--radius);
 box-shadow:var(--shadow);
}

/* TRAINER */

#trainer{background:#eef3f9}

.trainer-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:2rem;
}
.trainer-card{
 background:#fff;
 border-radius:20px;
 overflow:hidden;
 box-shadow:var(--shadow);
 transition:.25s;
}
.trainer-card:hover{
 transform:translateY(-8px);
}
/* Trainerbilder: einheitliche Rahmen ohne Beschnitt */
.trainer-card > img {
    display: block;
    width: auto;
    max-width: calc(100% - 48px);
    height: 230px;
    margin: 12px auto 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
}

/* Trainerkarten gleichmäßig ausrichten */
.trainer-card {
    display: flex;
    flex-direction: column;
}

.trainer-card .trainer-body {
    flex: 1;
}

.trainer-body{
 padding:1.6rem;
}
.trainer-body h3{
 color:var(--dark);
 margin-bottom:.3rem;
}
.trainer-title{
 color:var(--primary);
 font-weight:700;
 display:block;
 margin-bottom:1rem;
}
.badges{
 display:flex;
 flex-wrap:wrap;
 gap:.6rem;
}
.badges span{
 background:#edf4ff;
 color:var(--primary);
 padding:.45rem .8rem;
 border-radius:999px;
 font-size:.88rem;
 font-weight:600;
}

/* FOOTER */

footer{
 background:var(--dark);
 color:#fff;
 text-align:center;
 padding:5rem 0;
}

/* Unterseiten */
.content-narrow {
    max-width: 850px;
    margin-inline: auto;
}

.section {
    padding: 64px 0;
}

/* Historie */
.history-timeline {
    position: relative;
    margin: 36px 0 56px;
    padding-left: 30px;
    border-left: 3px solid #d8e5f8;
}

.history-entry {
    position: relative;
    margin-bottom: 32px;
}

.history-entry::before {
    content: "";
    position: absolute;
    left: -39px;
    top: 8px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #3980d2;
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px #3980d2;
}

.history-year {
    margin-bottom: 10px;
    color: #2356af;
    font-size: 1.35rem;
    font-weight: 800;
}

.history-card,
.history-note {
    padding: 24px;
    border: 1px solid #e3eaf4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(20 50 90 / 6%);
}

.history-card h3,
.history-note h2 {
    margin-top: 0;
}

.history-card p,
.history-note p {
    line-height: 1.75;
}

.history-note {
    margin-top: 48px;
    background: #f5f8fd;
}

.btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

.btn-primary {
    color: #fff;
    background: #2356af;
}

.btn-primary:hover {
    background: #173d83;
}

/* Nachruf */
.obituary {
    max-width: 760px;
    margin: 0 auto;
}

.obituary-image {
    margin: 0 auto 36px;
    text-align: center;
}

.obituary-image img {
    display: block;
    width: 100%;
    max-width: 480px;
    max-height: 520px;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 12px;
}

.obituary-text {
    font-size: 1.05rem;
    line-height: 1.9;
}

.obituary-text p {
    margin: 0 0 24px;
}

.obituary-closing {
    margin-top: 36px !important;
    padding-top: 24px;
    border-top: 1px solid #dce4ef;
    font-weight: 700;
}

.back-link {
    margin-top: 48px;
    color: #2356af;
}

.back-link a {
    color: inherit;
    text-decoration: none;
}

.back-link a:hover {
    text-decoration: underline;
}

.section-link {
    margin-top: 2rem;
    text-align: center;
    font-weight: 700;
}

.section-link a {
    color: var(--primary);
    text-underline-offset: 4px;
}

.section-link a:hover {
    text-decoration: underline;
}

/* Hall of Fame – Dan-Träger */
.dan-list {
    width: 100%;
    margin: 2rem auto 0;
}

.dan-level {
    width: 100%;
    margin: 0 0 1.4rem;
}

.dan-heading {
    position: relative;
    width: 430px;
    max-width: 100%;
    height: 90px;
    margin: 0 auto;
}

.dan-heading::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 12px;
    height: 23px;
    background: #302e2c;
}

.dan-heading img {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 115px;
    height: 90px;
    object-fit: contain;
    object-position: left top;
}

.dan-heading h3 {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 90px;
    right: 0;
    height: 23px;
    line-height: 23px;
    margin: 0;
    color: #d4ad00;
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
}

.dan-entry {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    width: 302px;
    max-width: calc(100% - 128px);
    margin: 0 auto;
    transform: translateX(64px);
    padding: 2px 0;
}

/* Nur der erste Eintrag wird unter den Gürtel gezogen. */
.dan-heading + .dan-entry {
    margin-top: -18px;
}

.dan-entry time {
    white-space: nowrap;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.dan-entry strong {
    font-weight: 600;
}

.dan-entry p {
    margin: 2px 0 0;
    color: var(--primary);
    font-size: 0.8rem;
    line-height: 1.4;
}

.dan-entry a {
    color: var(--primary);
    text-underline-offset: 3px;
}

.dan-entry a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .page-hero {
        padding: 120px 0 44px;
    }

    .section {
        padding: 42px 0;
    }

    .history-card,
    .history-note {
        padding: 18px;
    }

    .obituary-text {
        font-size: 1rem;
    }
}

/* Tablet and mobile layout */
@media (max-width: 900px) {
    /* Header is fixed and wraps onto several rows on smaller screens. */
    body {
        padding-top: 205px;
    }

    .header {
        height: auto;
        flex-direction: column;
        justify-content: center;
        gap: 0.55rem;
        padding: 0.65rem 0 0.8rem;
    }

    .logo {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        text-align: center;
    }

    .logo img {
        width: auto;
        height: 48px;
    }

    .logo h1 {
        font-size: 1rem;
        line-height: 1.25;
    }

    .logo p {
        font-size: 0.85rem;
        line-height: 1.3;
    }

    nav {
        width: 100%;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    nav a {
        display: block;
        padding: 0.45rem 0.65rem;
        border-radius: 9px;
        font-size: 0.95rem;
    }

    .cards,
    .highlights,
    .trainer-grid {
        grid-template-columns: 1fr;
    }

    #hero {
        min-height: 560px;
        background-position: 70% center;
    }

    #hero h2 {
        font-size: 2.7rem;
    }

    .secondary {
        display: block;
        margin: 1rem 0 0;
    }
}

@media (max-width: 600px) {
    .dan-list {
        margin-top: 1.5rem;
    }

    .dan-level {
        margin-bottom: 1.2rem;
    }

    /* Keep the original belt graphics larger on mobile. */
    .dan-heading {
        width: 100%;
        height: 78px;
        margin: 0 auto;
    }

    .dan-heading::before {
        top: 12px;
        height: 23px;
    }

    .dan-heading img {
        left: 0;
        top: 0;
        width: 115px;
        height: 78px;
        object-fit: contain;
        object-position: left top;
    }

    .dan-heading h3 {
        left: 90px;
        right: 0;
        top: 12px;
        height: 23px;
        line-height: 23px;
        font-size: 1.1rem;
    }

    .dan-entry {
        width: auto;
        max-width: none;
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 8px;
        margin: 0 0 0 90px;
        padding: 2px 0;
        transform: none;
    }

    .dan-heading + .dan-entry {
        margin-top: -10px;
    }

    .dan-entry time {
        font-size: 0.8rem;
        color: var(--text);
    }

    .dan-entry strong {
        font-size: 0.9rem;
    }

    .dan-entry p {
        font-size: 0.8rem;
        line-height: 1.35;
    }
}

/* NEWS – generated from Markdown by build_news.py */
.news-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2rem;
}
.news-card{
    min-width:0;
    overflow:hidden;
    background:var(--white);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    transition:transform .2s ease,box-shadow .2s ease;
}
.news-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.news-card:hover .news-card-image img{transform:scale(1.03)}
.news-card-body{padding:1.5rem;display:flex;flex:1;flex-direction:column;align-items:flex-start}
.news-card time,.news-page-heading time{color:#69778a;font-size:.9rem;font-weight:600}
.news-card h3{color:var(--dark);font-size:1.25rem;line-height:1.35;margin:.5rem 0 .75rem}
.news-card h3 a:hover,.news-read-more:hover,.news-article-end a:hover{color:var(--primary-light)}
.news-card p{margin-bottom:1.2rem}
.news-read-more{margin-top:auto;color:var(--primary);font-weight:700}
.news-archive-link{text-align:center;margin-top:2.5rem}
.news-empty{background:#fff;padding:1.5rem;border-radius:var(--radius);text-align:center}
.news-main{min-height:55vh;padding:3rem 0 5rem}
.news-page-heading{max-width:820px;margin:1rem auto 2.5rem;text-align:center}
.news-page-heading .eyebrow{display:block;color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:1.25rem}
.news-page-heading h1{font-size:clamp(2rem,5vw,3rem);line-height:1.15;color:var(--dark);margin:.5rem 0 1rem}
.news-page-heading p{color:#666}
.news-back{display:inline-block;color:var(--primary);font-weight:700;margin-bottom:1rem}
.news-article{max-width:850px;margin:0 auto}
.news-article .news-page-heading{margin:0 auto 2rem}
.news-article-content{font-size:1.08rem;line-height:1.85;overflow-wrap:anywhere}
.news-article-content h2,.news-article-content h3,.news-article-content h4{color:var(--dark);line-height:1.3;margin:2rem 0 .75rem}
.news-article-content h2{font-size:1.8rem}.news-article-content h3{font-size:1.4rem}
.news-article-content p{margin:0 0 1.2rem}
.news-article-content ul,.news-article-content ol{margin:0 0 1.4rem 1.5rem;list-style:revert}
.news-article-content li{padding-left:.25rem;margin:.25rem 0}
.news-article-content a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.news-article-content blockquote{border-left:4px solid var(--primary-light);padding:.25rem 0 .25rem 1.25rem;margin:1.5rem 0;color:#596579}
.news-article-content hr{border:0;border-top:1px solid #dce2ec;margin:2rem 0}
.news-article-end{border-top:1px solid #dce2ec;margin-top:3rem;padding-top:1.5rem}
.news-article-end a{color:var(--primary);font-weight:700}

/* Einheitliche Vorschaurahmen */
.news-card-image {
    height: 230px;
    padding: 16px 0 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 12px;
}

/* Einheitlicher Rahmen für Artikel-Titelbilder */
.news-article-thumbnail {
    display: block;
    border-radius: var(--radius);
    width: 100%;
    height: 480px;
    max-height: 65vh;
    object-fit: contain;
    margin: 0 auto 2.5rem;
}

/* Weitere Bilder im Artikel */
.news-article-content img {
    display: block;
    max-width: 100%;
    max-height: 600px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 1.5rem auto;
}

.news-article-hero {
    width: 100vw;
    margin: 0 0 1.5rem calc(50% - 50vw);
    box-sizing: border-box;
    padding: 2rem max(4%, calc((100vw - var(--max)) / 2));
    min-height: 178px;
    border-radius: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.news-article-hero .eyebrow,
.news-article-hero h1 {
    max-width: var(--max);
}

.news-article-hero h1 {
    margin: 0;
}

@media (max-width:900px){
    .news-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
}
@media (max-width:600px){
    .news-grid{grid-template-columns:1fr}
    .news-card-body{padding:1.25rem}
    .news-main{padding-top:2rem}
    .news-page-heading{margin-bottom:2rem}
}

/* Rechtliche Unterseiten */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 1.25rem;
  margin-top: 2.5rem;
}
.legal-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.legal-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}
.legal-page h1 { margin-bottom: 1.5rem; }
.legal-page h2 { margin-top: 2rem; }
.legal-page p, .legal-page li { line-height: 1.7; }
.legal-notice {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--primary, #2356af);
  background: var(--bg, #f5f7fb);
  border-radius: 0 .5rem .5rem 0;
}

@media (max-width: 600px) {
    .legal-links {
        margin-top: 2rem;
    }
}

/* News-Archiv: derselbe Hero-Stil wie auf den übrigen Unterseiten */
.news-archive-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    padding: 5rem 0 4rem;
    border-radius: 0 0 var(--radius) var(--radius);
}
.news-archive-hero .container {
    width: min(var(--max), calc(100% - 2.5rem));
    margin-inline: auto;
}
.news-archive-hero h1 { color: #fff; }
.news-archive-hero p { color: rgba(255,255,255,.92); margin: 0; }
.news-archive-hero .eyebrow { display:block; margin-bottom: .75rem; }
.news-archive-list { padding-top: 2.5rem; }
@media (max-width: 640px) {
    .news-archive-hero { padding: 4rem 0 3rem; border-radius: 0 0 14px 14px; }
    .news-archive-list { padding-top: 1.5rem; }
}

/* TRAININGSSEITE */
.training-intro {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.training-intro h2 {
    color: var(--dark);
    font-size: clamp(2rem, 4vw, 2.7rem);
    line-height: 1.2;
    margin: 0 0 1rem;
}
.training-intro p { color: #666; }
.training-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: stretch;
}
.training-panel {
    min-width: 0;
    background: var(--white);
    border: 1px solid #e3eaf4;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.25rem, 3vw, 2rem);
}
.training-panel h2 {
    color: var(--dark);
    font-size: 1.55rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}
.training-times { display: grid; gap: .75rem; }
.training-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: 12px;
    background: #f3f6fb;
}
.training-time strong { color: var(--dark); }
.training-time time { color: var(--primary); font-weight: 700; white-space: nowrap; }
.training-note { margin-top: 1rem; color: #69778a; font-size: .94rem; }
.training-address { font-style: normal; margin-bottom: 1rem; }
.training-address strong { display: block; color: var(--dark); margin-bottom: .25rem; }
.training-directions { margin: .85rem 0 0; padding-left: 1.25rem; list-style: disc; }
.training-directions li { margin: .4rem 0; }
.training-map {
    margin-top: 1.5rem;
    overflow: hidden;
    border: 1px solid #dce4ef;
    border-radius: 14px;
    background: #eaf0f7;
}
.training-map-placeholder {
    min-height: 280px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: .9rem;
    background:
      linear-gradient(135deg, rgba(235,241,249,.96), rgba(215,227,242,.96));
}
.training-map-placeholder .map-symbol { font-size: 2.2rem; }
.training-map-placeholder p { max-width: 520px; color: #4e5b6d; }
.training-map-placeholder .map-privacy { font-size: .9rem; }
.training-map-placeholder button {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: #fff;
    background: var(--primary);
    border-radius: 10px;
    padding: .85rem 1.25rem;
}
.training-map-placeholder button:hover { background: #173d83; }
.training-map iframe { display: block; width: 100%; height: 360px; border: 0; }
.training-map-note { margin-top: .75rem; font-size: .88rem; color: #69778a; }
.probetraining-panel {
    margin-top: 2rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--radius);
    background: linear-gradient(135deg, #173d83, #3980d2);
    color: #fff;
    text-align: center;
}
.probetraining-panel h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: .75rem; }
.probetraining-panel p { max-width: 760px; margin: 0 auto 1.25rem; }
.probetraining-panel .button { background: #fff; color: #2356af; }
.probetraining-panel .button:hover { background: #edf4ff; }
.training-back { margin-top: 2rem; text-align: center; }
.training-back a { color: var(--primary); font-weight: 700; }
@media (max-width: 900px) {
    .training-layout { grid-template-columns: 1fr; }
    .training-map-placeholder { min-height: 230px; }
    .training-map iframe { height: 320px; }
}
@media (max-width: 600px) {
    .training-time { align-items: flex-start; flex-direction: column; gap: .15rem; }
    .training-map iframe { height: 280px; }
}

/* TRAININGSSEITE – gezielte Regeln für die passende training.html */
.training-page .page-hero {
    padding: 5rem 0 4rem;
}
.training-page main > .section {
    padding: 4rem 0;
}
.training-page .training-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
}
.training-page .probetraining-panel {
    padding: clamp(1.5rem, 4vw, 3rem);
}
.training-page .training-map-placeholder a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .18em;
}
.training-page .training-map-placeholder a:hover {
    color: #173d83;
}
.training-page .training-map iframe {
    min-height: 280px;
}
@media (max-width: 600px) {
    .training-page .page-hero { padding: 4rem 0 3rem; }
    .training-page main > .section { padding: 2.5rem 0; }
    .training-page .training-map iframe { min-height: 260px; }
}

/* Einheitlicher Unterseiten-Hero – bewusst getrennt vom großen Startseiten-Hero */
.page-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 178px;
    padding: 2rem 0 !important;
    overflow: hidden;
    border-radius: 0;
    background: linear-gradient(110deg, #1b4178 0%, #2356af 58%, #214b87 100%);
    color: #fff;
}
.page-hero > .container {
    position: relative;
    z-index: 1;
    width: min(var(--max), 92%);
}
.page-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    right: max(5%, calc((100% - var(--max)) / 2 + 2rem));
    width: 150px;
    height: 120px;
    transform: translateY(-50%);
    background: url("images/jujutsu-piktogramm-transparent.png") center / contain no-repeat;
    opacity: .20;
    pointer-events: none;
}
.page-hero h1,
.page-hero h2 {
    margin: 0 0 .35rem;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.25rem);
    line-height: 1.2;
}
.page-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.92);
    line-height: 1.6;
}
.page-hero .hero-tag,
.page-hero .eyebrow {
    display: inline-block;
    width: fit-content;
    margin: 0 0 .55rem;
    padding: .35rem .75rem;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1.35;
    text-transform: none;
    opacity: 1;
}
.page-hero-quiet {
    background: linear-gradient(110deg, #1b4178 0%, #2356af 58%, #214b87 100%);
}
@media (max-width: 600px) {
    .page-hero {
        min-height: 165px;
        padding: 1.5rem 0 !important;
    }
    .page-hero::after {
        right: 2%;
        width: 100px;
        height: 90px;
        opacity: .14;
    }
    .page-hero h1,
    .page-hero h2,
    .page-hero p {
        max-width: 78%;
    }
}

/* News-Archiv: kein zusätzlicher Abstand oberhalb des Archiv-Heros.
   News-Artikel behalten weiterhin das reguläre .news-main-Padding. */
.news-main:has(.news-archive-hero) {
    padding-top: 0;
}


/* Foto des richtigen Halleneingangs auf der Trainingsseite */
.training-entrance {
    margin: 1.25rem 0 1.5rem;
    overflow: hidden;
    border: 1px solid #dce4ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(20 50 90 / 6%);
}
.training-entrance img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    object-position: center;
}
.training-entrance figcaption {
    padding: .85rem 1rem;
    color: #4e5b6d;
    font-size: .92rem;
    line-height: 1.55;
}
.training-entrance figcaption strong { color: var(--dark); }
@media (max-width: 600px) {
    .training-entrance img { max-height: 280px; }
    .training-entrance figcaption { padding: .75rem; }
}


/* Sponsor im Footer */
.sponsor {
    margin: 2.5rem auto 2rem;
    text-align: center;
}

.sponsor-label {
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.sponsor a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    background: #fff;
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.sponsor a:hover {
    transform: translateY(-2px);
}

.sponsor img {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 600px) {
    .sponsor {
        margin: 2rem auto 1.5rem;
    }

    .sponsor a {
        padding: 0.85rem 1.25rem;
    }

    .sponsor img {
        width: 160px;
    }
}

.training-step {
    margin-top: 1.5rem;
}

.training-step h3 {
    margin: 0 0 0.5rem;
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.4;
}

.training-step p {
    margin: 0;
    line-height: 1.7;
}

.training-principle {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #dce3ed);
    line-height: 1.7;
}

.training-step:first-of-type {
    margin-top: 0.75rem;
}


.social-links {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.social-links a:hover {
    color: #c13584;
}

.social-links svg {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
}

/* Trainingsseite: panoramische Trainingscollage */
.training-panorama {
    margin: 0 auto 1.5rem;
    overflow: hidden;
    border: 1px solid #e3eaf4;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: #fff;
}
.training-panorama img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1536 / 128;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 600px) {
    .training-panorama {
        margin-bottom: 1.25rem;
        border-radius: 12px;
    }
    .training-panorama img {
        aspect-ratio: 8 / 1;
    }
}

/* Trainingspanorama: auf Mobilgeräten horizontal durchwischbar */
@media (max-width: 600px) {
    .training-panorama {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #9ca3af #e5e7eb;
    }

    .training-panorama img {
        display: block;
        width: auto;
        max-width: none;
        height: 110px;
        aspect-ratio: auto;
        object-fit: initial;
    }

    .training-panorama::after {
        content: "← Wischen für mehr →";
        display: block;
        position: sticky;
        left: 0;
        width: fit-content;
        margin: 0 auto;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.92);
        color: #374151;
        font-size: 0.75rem;
        border-radius: 0 0 8px 8px;
        pointer-events: none;
    }
}