/* =========================================================
   TC STOCKHEIM 1979 e.V. — MASTER STYLESHEET
   Clean rebuild
   ========================================================= */ /* =========================================
   Lokale Schriften
   ========================================= */ @font-face{font-family: "DM Sans";src: url("fonts/DMSans.ttf") format("truetype");font-weight: 400 700;font-style: normal;font-display: swap;}@font-face{font-family: "Playfair Display";src: url("fonts/PlayfairDisplay.ttf") format("truetype");font-weight: 400 900;font-style: normal;font-display: swap;}@font-face{font-family: "Playfair Display";src: url("fonts/PlayfairDisplay-Italic.ttf") format("truetype");font-weight: 400 900;font-style: italic;font-display: swap;}/* ---------------------------------------------------------
   1. VARIABLES / RESET
   --------------------------------------------------------- */ :root{--red: #e30613;--red-hover: #f21b26;--black: #151515;--text: #171717;--muted: #6f6f6f;--line: #d9d9d9;--line-soft: #e7cfcf;--pink: #fff3f3;--soft: #f6f6f4;--white: #ffffff;--header-height: 88px;--container-max: 1180px;--container-gap: 42px;}*, *::before, *::after{box-sizing: border-box;}html{margin: 0;padding: 0;scroll-behavior: smooth;overflow-x: hidden;overflow-y: auto;}body{margin: 0;padding: 0;width: 100%;min-height: 100%;overflow-x: hidden;overflow-y: visible;color: var(--text);background: var(--pink);font-family: "DM Sans", Arial, Helvetica, sans-serif;line-height: 1.55;}img{max-width: 100%;}button, input, textarea, select{font: inherit;}h1, h2, h3, h4, h5, h6, p, a, span, b, strong, small, li, button{font-family: inherit;}a{color: inherit;text-decoration: none;}button{cursor: pointer;}.container{width: min(calc(100% - var(--container-gap)), var(--container-max));margin-inline: auto;}/* ---------------------------------------------------------
   2. HEADER
   --------------------------------------------------------- */ .site-header{position: fixed;inset: 0 0 auto 0;z-index: 1000;width: 100%;height: var(--header-height);color: #fff;background: transparent;transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;}.site-header.scrolled{background: rgba(15, 15, 15, .96);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border-bottom: 2px solid rgba(237, 0, 0, .9);box-shadow: 0 6px 22px rgba(0, 0, 0, .22);}.site-header .nav{height: var(--header-height);display: flex;align-items: center;gap: 34px;}.site-header .brand{width: 72px;height: 72px;min-width: 72px;flex: 0 0 72px;display: flex;align-items: center;}.site-header .brand img{width: 72px;height: 72px;max-width: 72px;max-height: 72px;display: block;object-fit: contain;}.desktop-nav{display: flex;align-items: center;gap: 26px;margin-left: auto;font-size: 12px;font-weight: 600;}.desktop-nav a{opacity: .9;transition: color .2s ease, opacity .2s ease;}.desktop-nav a:hover{color: #ff6666;opacity: 1;}.header-cta{display: flex;align-items: center;justify-content: center;margin-left: auto;flex: 0 0 auto;min-height: 40px;padding: 13px 20px;background: var(--red);color: #fff;font-size: 12px;font-weight: 700;line-height: 1;transition: background-color .2s ease;}.header-cta:hover{background: var(--red-hover);}.menu-toggle, .mobile-nav{display: none;}/* ---------------------------------------------------------
   3. HERO
   --------------------------------------------------------- */ .hero{position: relative;height: min(820px, 100vh);min-height: 680px;display: flex;align-items: center;overflow: hidden;color: #fff;}.hero-bg{position: absolute;inset: 0;background: url("tennisanlage-1.webp") center 57% / cover no-repeat;transform: scale(1.01);}@media (max-width: 920px){.hero-bg { background-image: url("tennisanlage-1-mobile.webp");}}.hero-overlay{position: absolute;inset: 0;background: linear-gradient( 90deg, rgba(0,0,0,.83) 0%, rgba(0,0,0,.58) 43%, rgba(0,0,0,.16) 100% ), linear-gradient( 0deg, rgba(0,0,0,.58), transparent 55% );}.hero-inner{position: relative;z-index: 2;padding-top: 82px;}.eyebrow{margin-bottom: 20px;font-size: 11px;font-weight: 700;letter-spacing: .18em;text-transform: uppercase;}.eyebrow span{display: inline-block;width: 8px;height: 8px;margin-right: 9px;border-radius: 50%;background: var(--red);}h1{max-width: 800px;margin: 0 0 28px;font-size: clamp(54px, 7.4vw, 94px);line-height: .94;letter-spacing: -.06em;}h1 em, h2 em{font-family: inherit;font-weight: inherit;}.hero-lead{max-width: 540px;margin: 0 0 30px;color: rgba(255,255,255,.82);font-size: 17px;}.hero-actions{display: flex;align-items: center;gap: 12px;flex-wrap: wrap;}.hero-meta{position: absolute;left: max(21px, calc((100% - var(--container-max)) / 2));bottom: 28px;z-index: 3;display: flex;align-items: center;gap: 16px;color: rgba(255,255,255,.65);font-size: 10px;letter-spacing: .13em;text-transform: uppercase;}.hero-meta i{width: 35px;height: 1px;background: rgba(255,255,255,.4);}/* ---------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------- */ .btn{display: inline-flex;align-items: center;justify-content: center;gap: 18px;min-height: 40px;padding: 13px 20px;font-size: 12px;font-weight: 700;line-height: 1;}.btn-red{background: var(--red);color: #fff;}.btn-red:hover{background: var(--red-hover);}.btn-outline{border: 1px solid rgba(255,255,255,.7);color: #fff;}.btn-outline:hover{background: #fff;color: #111;}.btn-dark{background: #161616;color: #fff;}.btn-white{background: #fff;color: #111;}/* ---------------------------------------------------------
   5. QUICKLINKS
   --------------------------------------------------------- */ .quicklinks{position: relative;z-index: 2;background: #fff;box-shadow: 0 12px 40px rgba(0,0,0,.1);}.quick-grid{display: grid;grid-template-columns: repeat(4, 1fr);}.quick-grid a{position: relative;padding: 24px 24px 25px;border-right: 1px solid var(--line);}.quick-grid a:last-child{border-right: 0;}.quick-grid a:hover{background: #fafafa;}.qnum{display: block;margin-bottom: 8px;color: var(--red);font-size: 9px;font-weight: 700;letter-spacing: .12em;}.quick-grid b{display: block;font-size: 17px;}.quick-grid small{display: block;padding-right: 20px;margin-top: 3px;color: #777;font-size: 10px;}.quick-grid strong{position: absolute;right: 22px;bottom: 24px;color: var(--red);font-size: 20px;}/* ---------------------------------------------------------
   6. GENERIC SECTIONS
   --------------------------------------------------------- */ .section{padding: 105px 0;}.section-head{display: flex;align-items: flex-end;justify-content: space-between;gap: 35px;margin-bottom: 38px;}.kicker{display: block;margin-bottom: 12px;color: var(--red);font-size: 10px;font-weight: 700;letter-spacing: .18em;text-transform: uppercase;}.section h2{margin: 0;font-size: clamp(40px, 5vw, 64px);line-height: 1.02;letter-spacing: -.055em;}.text-link{padding-bottom: 4px;border-bottom: 1px solid #222;font-size: 12px;font-weight: 700;white-space: nowrap;}.text-link span{margin-left: 8px;color: var(--red);}/* ---------------------------------------------------------
   7. AKTUELLES / NEWS
   --------------------------------------------------------- */ .news-section{background: var(--pink);}.news-grid{display: grid;grid-template-columns: 1.3fr 1fr 1fr;gap: 18px;}.featured-card, .news-card{border: 1px solid var(--line);background: #fff;}.card-image{height: 500px;background-size: cover;background-position: center;}.image-one{background-image: url("tcs_flyer1.webp");background-size: contain;background-position: center;background-repeat: no-repeat;background-color: #fff;}.card-copy{padding: 24px;}.card-copy h3{margin: 9px 0 10px;font-size: 22px;line-height: 1.12;}.card-copy p{margin: 0 0 20px;color: #727272;font-size: 13px;}.card-copy a{font-size: 11px;font-weight: 700;}.tag{color: var(--red);font-size: 9px;font-weight: 700;letter-spacing: .16em;text-transform: uppercase;}.news-card .card-copy{min-height: 265px;display: flex;flex-direction: column;justify-content: center;}.red-card{border-color: var(--red);background: var(--red);color: #fff;}.red-card .tag{color: #fff;}.red-card p{color: rgba(255,255,255,.8);}/* ---------------------------------------------------------
   8. EVENTS / TERMINE
   --------------------------------------------------------- */ .events-section{background: var(--pink);padding-top: 60px;}/* =====================================================
   ABSTAND AKTUELLES → TERMINE
   ===================================================== */ .news-section{padding-bottom: 60px;}.events-section{padding-top: 60px;padding-bottom: 60px;}.events-layout{display: grid;grid-template-columns: .85fr 1.15fr;gap: 100px;}.events-intro p{max-width: 470px;margin: 20px 0 28px;color: var(--muted);font-size: 16px;}.events-list{border-top: 1px solid var(--line-soft);}.event{display: grid;grid-template-columns: 78px minmax(0, 1fr);gap: 22px;padding: 22px 0;border-bottom: 1px solid var(--line-soft);}.date{width: 72px;height: 82px;display: grid;place-content: center;text-align: center;background: #fff;}.date b{font-size: 29px;line-height: 1;}.date span{color: var(--red);font-size: 8px;font-weight: 700;letter-spacing: .15em;}.date small{color: #777;font-size: 8px;}.event h3{margin: 6px 0;font-size: 20px;line-height: 1.15;}.event p{margin: 3px 0;color: #777;font-size: 12px;}.event-note{padding-top: 18px;color: #888;font-size: 10px;}/* ---------------------------------------------------------
   9. TERMINSEITE – KALENDER
   --------------------------------------------------------- */ .calendar-wrap{padding: 70px 0 90px;background: var(--pink);}/* Hauptkalender:
   alles von Monatskopf bis letzte Kalenderlinie ist weiß. */ .kalender{width: 100%;max-width: var(--container-max);margin: 0 auto;overflow: hidden;background: #fff;border: 1px solid var(--line);}.calendar-month-title{min-height: 92px;display: grid;grid-template-columns: 52px minmax(0, 1fr) 52px;align-items: center;padding: 0 14px;background: #fff;}.calendar-month-title h3{margin: 0;text-align: center;color: #111;font-size: 18px;font-weight: 700;}.calendar-month-title button{width: 38px;height: 34px;display: grid;place-items: center;padding: 0;border: 1px solid var(--line);background: #fff;color: #111;transition: background-color .2s ease, border-color .2s ease, color .2s ease;}.calendar-month-title button:last-child{justify-self: end;}.calendar-month-title button:hover{border-color: var(--red);background: var(--red);color: #fff;}.calendar-month-title button i{font-size: 13px;}/* Wochentage */ .calendar-weekdays{display: grid;grid-template-columns: repeat(7, minmax(0, 1fr));background: #151515;color: #fff;}.calendar-weekdays > div{min-width: 0;padding: 7px 8px;font-size: 9px;font-weight: 700;letter-spacing: .04em;text-transform: uppercase;}/* Kalendertage
   WICHTIG:
   Keine border-top + border-bottom-Kombination.
   Nur rechts und unten -> niemals 2px Linien. */ .calendar-grid{display: grid;grid-template-columns: repeat(7, minmax(0, 1fr));background: #fff;}.calendar-grid > *{min-width: 0;min-height: 80px;padding: 10px 9px;background: #fff;border-right: 1px solid var(--line);border-bottom: 1px solid var(--line);}.calendar-grid > *:nth-child(7n){border-right: 0;}.calendar-grid > *:nth-last-child(-n + 7){border-bottom: 0;}.calendar-grid .calendar-day{position: relative;}.calendar-number, .calendar-day-number{display: block;margin-bottom: 5px;font-size: 11px;font-weight: 700;}.calendar-day.muted{color: #999;background: #fff;}/* Termin innerhalb des Kalenders */ .calendar-event{display: block;min-width: 0;margin-top: 4px;padding: 7px 8px;border-left: 2px solid var(--red);background: #fff1f1;color: #111;font-size: 10px;line-height: 1.25;overflow-wrap: anywhere;}.calendar-event strong{display: block;font-size: 10px;line-height: 1.25;}.calendar-event small{display: block;margin-top: 2px;color: #777;font-size: 8px;}/* =====================================================
   KALENDER – RESPONSIVE TERMINDARSTELLUNG
   ===================================================== */ /* DESKTOP
   Vollständige Termin-Kachel anzeigen.
*/ .calendar-event{display: block;}.calendar-event-dot{display: none;width: 11px;height: 11px;border-radius: 50%;background: var(--red);flex: 0 0 auto;}/* MOBILE
   Termin-Kachel ausblenden.
   Stattdessen roten Punkt anzeigen.
*/ @media (max-width: 700px){.calendar-event{display: none;}.calendar-event-dot{display: block;width: 16px;height: 16px;margin: 12px auto 0;}.calendar-day{min-height: 72px;padding: 6px;}}@media (max-width: 480px){.calendar-event{display: none;}.calendar-event-dot{display: block;width: 16px;height: 16px;margin: 12px auto 0;}.calendar-event-dot-multi{position: relative;}.calendar-event-dot-mixed-training-event{background: linear-gradient(90deg,#2f80c9 0 50%,var(--red) 50% 100%) !important;}.calendar-event-dot-mixed-training-freizeit{background: linear-gradient(90deg,#2f80c9 0 50%,#e6b800 50% 100%) !important;}.calendar-event-dot-mixed-freizeit-event{background: linear-gradient(90deg,#e6b800 0 50%,var(--red) 50% 100%) !important;}.calendar-event-dot-mixed-all{background: conic-gradient(#2f80c9 0 33.33%,#e6b800 33.33% 66.66%,var(--red) 66.66% 100%) !important;}.calendar-event-dot-multi .calendar-event-dot-badge{position: absolute !important;top: -7px !important;right: -8px !important;display: flex !important;align-items: center !important;justify-content: center !important;min-width: 16px !important;width: auto !important;height: 16px !important;padding: 0 4px !important;margin: 0 !important;border-radius: 999px !important;background: var(--red) !important;color: #fff !important;font-size: 9px !important;font-weight: 700 !important;line-height: 16px !important;text-align: center !important;box-sizing: border-box !important;z-index: 5 !important;}.calendar-day{min-height: 72px;padding: 6px;}}/* =========================================================
   10. TERMINLISTE
   ========================================================= */ #termine-liste{width: 100%;margin-top: 28px;background: transparent;}/* Einzelner Termin */ #termine-liste .calendar-event-card{display: grid;grid-template-columns: 72px minmax(0, 1fr);align-items: center;column-gap: 35px;width: 100%;min-width: 0;padding: 26px 20px;background: transparent;border-bottom: 1px solid var(--line);box-sizing: border-box;}#termine-liste .calendar-event-card{cursor: pointer;transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;}@media (hover: hover) and (pointer: fine){#termine-liste .calendar-event-card:hover{background: #fff;transform: translateY(-2px);box-shadow: 0 6px 18px rgba(0,0,0,.06);}}#termine-liste .calendar-event-card:focus-visible{outline: 2px solid var(--red);outline-offset: -2px;}#termine-liste .calendar-event-card:last-child{border-bottom: 0;}/* ---------------------------------------------------------
   DATUMSKACHEL
   --------------------------------------------------------- */ #termine-liste .calendar-date{width: 72px;min-width: 72px;height: 82px;display: flex;flex-direction: column;align-items: center;justify-content: center;background: #fff;}#termine-liste .calendar-date strong{color: #111;font-size: 29px;font-weight: 700;line-height: 1;}#termine-liste .calendar-date span{margin-top: 5px;color: var(--red);font-size: 10px;font-weight: 700;line-height: 1;letter-spacing: 1.5px;}#termine-liste .calendar-date small{margin-top: 5px;color: #777;font-size: 9px;}/* ---------------------------------------------------------
   TERMIN-TEXT
   --------------------------------------------------------- */ #termine-liste .calendar-event-content{min-width: 0;}#termine-liste .calendar-event-category{display: block;margin-bottom: 7px;color: var(--red);font-size: 9px;font-weight: 700;letter-spacing: 2px;text-transform: uppercase;}#termine-liste .calendar-event-content h3{margin: 0 0 5px;color: #111;font-size: 23px;font-weight: 700;line-height: 1.2;overflow-wrap: anywhere;}#termine-liste .calendar-event-content p{margin: 0;color: #777;font-size: 13px;line-height: 1.5;}/* =========================================================
   TERMINLISTE – RESPONSIVE
   ========================================================= */ @media (max-width: 700px){#termine-liste{margin-top: 18px;}#termine-liste .calendar-event-card{grid-template-columns: 52px minmax(0, 1fr);column-gap: 14px;padding: 18px 10px;align-items: flex-start;}#termine-liste .calendar-date{width: 52px;min-width: 52px;height: 62px;}#termine-liste .calendar-date strong{font-size: 22px;}#termine-liste .calendar-date span{margin-top: 3px;font-size: 8px;letter-spacing: 1px;}#termine-liste .calendar-date small{margin-top: 3px;font-size: 8px;}#termine-liste .calendar-event-category{margin-bottom: 4px;font-size: 8px;letter-spacing: 1.5px;}#termine-liste .calendar-event-content h3{margin-bottom: 4px;font-size: 17px;line-height: 1.2;}#termine-liste .calendar-event-content p{font-size: 11px;line-height: 1.4;}}/* ---------------------------------------------------------
   11. ABOUT / VEREIN
   --------------------------------------------------------- */ .about-section{width: min(100%, 1350px);min-height: 620px;margin-inline: auto;display: grid;grid-template-columns: 1.55fr 1fr;background: #fff;}.about-image{min-height: 620px;overflow: hidden;background: #ddd;}.about-image img{width: 100%;height: 100%;display: block;object-fit: cover;object-position: center;}.about-copy{min-width: 0;display: flex;flex-direction: column;justify-content: center;padding: 90px 60px 90px 55px;background: #fff;}.about-copy h2{max-width: 520px;margin: 0;font-size: clamp(39px, 4.8vw, 61px);line-height: 1.02;letter-spacing: -.05em;}.about-copy p{max-width: 540px;margin: 25px 0;color: #6e6e6e;font-size: 16px;}.about-facts{display: flex;align-items: flex-start;gap: 42px;margin: 8px 0 28px;}.about-facts b, .about-facts small{display: block;}.about-facts b{font-size: 28px;}.about-facts small{color: #777;font-size: 10px;}/* ---------------------------------------------------------
   12. TENNIS
   --------------------------------------------------------- */ .tennis-section{background: #121212;color: #fff;}.section-head.light h2{color: #fff;}.section-head.light > p{margin: 0;color: #888;font-size: 14px;}.tennis-grid{display: grid;grid-template-columns: repeat(3, 1fr);gap: 14px;}.tennis-grid a{min-height: 215px;display: flex;flex-direction: column;padding: 28px;border: 1px solid #343434;transition: border-color .2s ease, transform .2s ease;}.tennis-grid a:hover{border-color: var(--red);transform: translateY(-3px);}.big-icon{color: #ff4b4b;font-size: 10px;letter-spacing: .12em;}.tennis-grid b{margin-top: 38px;font-size: 22px;}.tennis-grid small{margin-top: 5px;color: #999;font-size: 11px;}.tennis-grid i{margin-top: auto;color: #ff3e46;font-size: 20px;font-style: normal;}/* ---------------------------------------------------------
   13. GALERIE
   --------------------------------------------------------- */ .gallery-section{background: var(--soft);}.gallery-count{color: #999;font-size: 10px;letter-spacing: .14em;}.gallery{display: grid;grid-template-columns: 1.35fr .9fr .9fr;grid-template-rows: 235px 235px;gap: 14px;}.gallery img{width: 100%;height: 100%;display: block;object-fit: cover;}.gallery-main{height: 484px;grid-row: 1 / 3;}.gallery-side{height: 235px;}.gallery-side-top{grid-column: 2 / 4;}.gallery-side-bottom{grid-column: auto;}/* ---------------------------------------------------------
   14. MITGLIED WERDEN
   --------------------------------------------------------- */ .member-section{background: var(--red);color: #fff;}.member-inner{display: flex;align-items: center;justify-content: space-between;gap: 50px;padding: 66px 0;}.member-section .kicker{color: #fff;}.member-section h2{margin: 0 0 10px;font-size: clamp(42px, 5vw, 65px);line-height: 1;letter-spacing: -.05em;}.member-section p{max-width: 600px;margin: 0;color: rgba(255,255,255,.82);font-size: 16px;}.member-actions{display: flex;align-items: center;gap: 20px;flex-wrap: wrap;}.member-link{font-size: 11px;font-weight: 700;}/* ---------------------------------------------------------
   15. UNTERSEITEN
   --------------------------------------------------------- */ .page-hero{position: relative;overflow: hidden;padding: 145px 0 70px;background: #151515;color: #fff;}.page-hero::after{content: "";position: absolute;top: -160px;right: -120px;width: 420px;height: 420px;border: 70px solid rgba(227,6,19,.15);border-radius: 50%;}.page-hero h1{position: relative;z-index: 1;max-width: 800px;margin: 0;font-size: clamp(45px, 6vw, 76px);}.page-hero p{position: relative;z-index: 1;max-width: 700px;margin: 18px 0 0;color: #aaa;font-size: 17px;}.crumb{position: relative;z-index: 1;margin-bottom: 15px;color: #ff5960;font-size: 10px;letter-spacing: .15em;text-transform: uppercase;}.content{padding: 85px 0;}.content-grid{display: grid;grid-template-columns: 1.5fr .7fr;gap: 70px;}.prose h2{margin: 0 0 20px;font-size: 38px;line-height: 1.1;}.prose h3{margin-top: 35px;font-size: 22px;}.prose p, .prose li{color: #626262;font-size: 15px;}.prose ul{padding-left: 20px;}.side-card{height: max-content;padding: 28px;background: var(--soft);}.side-card h3{margin: 0 0 15px;}.side-card a{display: block;padding: 11px 0;border-bottom: 1px solid #ddd;font-size: 13px;font-weight: 700;}.person, .info-card{padding: 25px;border: 1px solid var(--line);background: #fff;}.person .role, .info-card .role{color: var(--red);font-size: 9px;font-weight: 700;letter-spacing: .15em;text-transform: uppercase;}.person h3, .info-card h3{margin: 8px 0;font-size: 20px;}.person p, .info-card p{margin: 0;color: #777;font-size: 12px;}.person-avatar{width: 56px;height: 56px;display: block;margin: 12px 0;object-fit: cover;border-radius: 50%;}.price-table{width: 100%;border-collapse: collapse;}.price-table th, .price-table td{padding: 14px;text-align: left;border-bottom: 1px solid #ddd;}.price-table th{background: #181818;color: #fff;font-size: 12px;}.price-table td{font-size: 13px;}.price-table td:last-child{font-weight: 700;}.price-table th:last-child, .price-table td:last-child{width: 160px;white-space: nowrap;}.notice{margin: 25px 0;padding: 18px 20px;border-left: 4px solid var(--red);background: var(--pink);font-size: 13px;}.gallery-full{display: grid;grid-template-columns: 2fr 1fr;grid-template-rows: 250px 250px;gap: 12px;}.gallery-full .wide{grid-row: 1 / 3;}.contact-box{padding: 35px;background: #181818;color: #fff;}.contact-box a{color: #fff;}.map-placeholder{min-height: 300px;display: grid;place-items: center;background: #eee url("tennisanlage-1.webp") center / cover;}.map-placeholder span{padding: 12px 16px;background: #fff;font-size: 12px;font-weight: 700;}.map-embed{width: 100%;height: 430px;display: block;border: 0;}.map-caption{display: flex;align-items: center;justify-content: space-between;gap: 20px;padding: 16px 18px;background: var(--soft);font-size: 13px;}.map-caption strong{font-size: 14px;}.map-caption a{color: #111;text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 3px;}.mobile-note{color: #999;font-size: 11px;}.subpage-template-note{display: none;}/* ---------------------------------------------------------
   16. MITGLIED – LISTEN
   --------------------------------------------------------- */ main .content .prose ol{margin-top: 0;margin-bottom: 1.8rem;padding-left: 2.5rem;list-style-type: decimal;list-style-position: outside;}main .content .prose ol li{margin: 0 0 .35rem 0;padding: 0;list-style-type: decimal;}main .content .prose ol.membership-steps{margin: 0 0 24px;padding: 0;list-style: none;counter-reset: steps;}main .content .prose ol.membership-steps li{position: relative;display: block;margin: 0 0 7px;padding-left: 17px;line-height: 1.55;list-style: none;counter-increment: steps;}main .content .prose ol.membership-steps li::before{content: counter(steps) ".";position: absolute;left: 0;top: 0;width: 24px;}/* ---------------------------------------------------------
   17. RECHTLICHE SEITEN
   --------------------------------------------------------- */ .content:has(.legal-content){padding-top: 0;}.legal-content{max-width: 900px;margin: 0 auto;padding: 0 0 90px;}.legal-content h2{margin: 0 0 14px;font-size: 27px;}.legal-content h2:first-child{margin-top: 0;}.legal-content h3{margin: 28px 0 10px;font-size: 19px;}.legal-content p, .legal-content li{color: #555;font-size: 14px;line-height: 1.75;}.legal-content ul{padding-left: 22px;}.legal-box{margin: 0 0 32px;padding: 20px 24px;border-left: 4px solid #d92d18;background: #fff7f7;}.legal-note{color: #888 !important;font-size: 12px !important;}/* ---------------------------------------------------------
   18. FOOTER
   --------------------------------------------------------- */ footer{padding: 60px 0 25px;background: #101010;color: #fff;}.footer-top{display: grid;grid-template-columns: 2fr 1fr 1.35fr;gap: 60px;padding-bottom: 45px;}.footer-brand{min-width: 0;}/* Das Slogan-Bild darf die komplette erste Footer-Spalte nutzen. */ .footer-brand .footer-visual{width: 100%;max-width: 440px;height: auto;display: block;object-fit: contain;}.footer-brand p{color: #777;font-size: 11px;}.footer-top h4{margin: 4px 0 14px;font-size: 11px;}.footer-top a, .footer-top span{display: block;margin: 7px 0;color: #777;font-size: 11px;}.footer-top a:hover{color: #fff;}.footer-contact{min-width: 0;}.footer-contact i{margin-right: 6px;}.footer-map{width: 100%;max-width: 290px;height: 125px;display: block;margin-top: 12px;border: 0;}.footer-bottom{display: flex;justify-content: space-between;gap: 20px;padding-top: 17px;border-top: 1px solid #2a2a2a;color: #666;font-size: 9px;}.footer-bottom a{color: #888;}/* ---------------------------------------------------------
   19. SCROLL-HINWEIS
   Desktop: unsichtbar.
   Responsive: mittig im Hero, unabhängig von Buttons.
   --------------------------------------------------------- */ .scroll-cue{display: none;}@keyframes scrollBounce{0%, 100%{transform: translateY(0);}50%{transform: translateY(4px);}}/* ---------------------------------------------------------
   20. TABLET – MAX 920 PX
   --------------------------------------------------------- */ @media (max-width: 920px){:root{--header-height: 76px;--container-gap: 28px;}/* Header */ .site-header .nav{height: var(--header-height);}.site-header .brand, .site-header .brand img{width: 60px;height: 60px;min-width: 60px;min-height: 60px;max-width: 60px;max-height: 60px;}.site-header .brand{flex-basis: 60px;}.desktop-nav, .header-cta{display: none;}.menu-toggle{width: 42px;height: 42px;display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 5px;margin-left: auto;padding: 0;border: 1px solid rgba(255,255,255,.28);background: rgba(255,255,255,.05);z-index: 1002;}.menu-toggle span{width: 21px;height: 2px;display: block;background: #fff;}.mobile-nav{position: absolute;top: var(--header-height);left: 0;right: 0;z-index: 1001;display: none;margin: 0;padding: 20px 21px 24px;background: rgba(15,15,15,.98);border-top: 1px solid rgba(255,255,255,.08);border-bottom: 2px solid var(--red);box-shadow: 0 18px 35px rgba(0,0,0,.32);}.mobile-nav.is-open, .mobile-nav.open{display: flex;flex-direction: column;gap: 0;}.mobile-nav a{display: block;padding: 9px 0;color: #fff;font-size: 14px;font-weight: 600;}.mobile-nav a + a{border-top: 1px solid rgba(255,255,255,.08);}.mobile-nav .mobile-cta{display: inline-flex;width: max-content;margin-top: 8px;padding: 12px 15px;background: var(--red);border: 0;}/* Hero */ .hero{min-height: 100dvh;height: auto;}.hero-bg{background-image: url("tennisanlage-1-mobile.webp");background-position: 58% center;}.hero-overlay{background: linear-gradient( 90deg, rgba(0,0,0,.86), rgba(0,0,0,.50) ), linear-gradient( 0deg, rgba(0,0,0,.72), transparent 62% );}.hero-inner{padding-top: 82px;padding-bottom: 132px;}.hero h1{max-width: 100%;font-size: clamp(48px, 13vw, 72px);line-height: .93;letter-spacing: -.055em;margin-bottom: 22px;}.hero-lead{max-width: 420px;margin-bottom: 26px;}.hero-actions{gap: 10px;}.hero-actions .btn{min-height: 44px;padding: 13px 16px;}.hero-meta{left: 14px;bottom: 20px;font-size: 8px;}/* Scroll-Cue */ .hero > .scroll-cue{position: absolute;left: 50%;bottom: 26px;z-index: 6;display: flex;flex-direction: column;align-items: center;gap: 5px;width: max-content;transform: translateX(-50%);color: #fff;text-decoration: none;pointer-events: auto;}.hero > .scroll-cue .fa-chevron-down{display: inline-block;color: rgba(255,255,255,.88);font-family: "Font Awesome 6 Free";font-size: 12px;font-weight: 900;line-height: 1;animation: scrollBounce 1.8s ease-in-out infinite;}.hero > .scroll-cue small{display: block;color: rgba(255,255,255,.72);font-size: 8px;line-height: 1;letter-spacing: .18em;text-transform: uppercase;white-space: nowrap;}.scroll-cue-line, .scroll-cue-arrow{display: none !important;}/* Generic sections */ .quick-grid{grid-template-columns: 1fr 1fr;}.quick-grid a:nth-child(2){border-right: 0;}.news-grid{grid-template-columns: 1fr;}.news-card .card-copy{min-height: 190px;}.events-layout{grid-template-columns: 1fr;gap: 45px;}.about-section{width: min(calc(100% - 28px), 1350px);grid-template-columns: 1fr 1fr;min-height: 0;}.about-image{min-height: 430px;}.about-copy{padding: 60px 35px;}.tennis-grid{grid-template-columns: 1fr;}.gallery{grid-template-columns: 1fr 1fr;grid-template-rows: 220px 180px 180px;}.gallery-main{height: 400px;grid-row: 1 / 3;}.gallery-side{height: 180px;}.gallery-side-top{grid-column: 2;}.member-inner{display: block;}.member-actions{margin-top: 25px;}.content-grid{grid-template-columns: 1fr;gap: 40px;}.team-grid, .card-grid{grid-template-columns: 1fr 1fr;}.gallery-full{grid-template-columns: 1fr;grid-template-rows: 300px 180px 180px;}.gallery-full .wide{grid-row: auto;}/* Unterseiten */ .page-hero{min-height: 330px;padding: 126px 0 58px;display: flex;align-items: flex-end;}.page-hero::after{right: -185px;top: -165px;width: 390px;height: 390px;border-width: 62px;}.page-hero h1{font-size: clamp(42px, 11vw, 62px);line-height: .96;letter-spacing: -.055em;}.page-hero p{font-size: 15px;line-height: 1.5;}.content{padding: 65px 0;}.prose h2{font-size: 34px;letter-spacing: -.04em;}.prose h3{font-size: 21px;}.prose p, .prose li{font-size: 14px;}.side-card{padding: 23px;}.person, .info-card{padding: 21px;}.price-table th, .price-table td{padding: 11px 9px;}.map-embed{height: 330px;}/* Footer */ footer{border-top: 3px solid var(--red);padding-top: 45px;}.footer-top{grid-template-columns: 1fr 1fr;}.footer-brand{grid-column: 1 / -1;}.footer-brand .footer-visual{width: 100%;max-width: 520px;}.footer-map{max-width: 100%;}/* Kalender */ .calendar-wrap{padding: 45px 0 60px;}.calendar-grid > *{min-height: 92px;}.calendar-event-card .calendar-event-content h3{font-size: 21px;}}/* ---------------------------------------------------------
   21. MOBILE – MAX 560 PX
   --------------------------------------------------------- */ @media (max-width:560px){.container{width:calc(100% - 28px);}.hero-inner{padding-top:96px;padding-bottom:108px;}.hero h1{font-size:clamp(45px,13.5vw,65px);}.hero-lead{font-size:14px;}.hero-actions{display:flex;flex-wrap:nowrap;gap:10px;}.hero-actions .btn{width:auto;flex:1 1 0;min-width:0;padding:13px 12px;}.hero-meta{display:none;}.page-hero{min-height:310px;padding:118px 0 48px;}.page-hero h1{font-size:clamp(39px,11.5vw,58px);}.page-hero p{font-size:14px;}.content{padding:55px 0;}.content-grid{gap:28px;}.prose h2{font-size:31px;}.prose h3{font-size:20px;}.prose p, .prose li{font-size:14px;}.team-grid, .card-grid{gap:10px;}.person, .info-card{padding:19px;}.side-card{padding:21px;}.price-table{font-size:11px;}.price-table th, .price-table td{padding:10px 8px;}.gallery-full{gap:8px;}.map-embed{height:300px;}footer{padding-top:40px;}}/* Quicklinks */ .quick-grid{grid-template-columns: 1fr;}.quick-grid a{border-right: 0;border-bottom: 1px solid var(--line);}.quick-grid a:last-child{border-bottom: 0;}/* Sections */ .section{padding: 75px 0;}.section-head{display: block;}.text-link{display: inline-block;margin-top: 16px;}.events-layout{gap: 35px;}.event{grid-template-columns: 66px minmax(0, 1fr);gap: 16px;}.date{width: 62px;}/* About */ .about-section{width: calc(100% - 28px);grid-template-columns: 1fr;}.about-image{min-height: 310px;}.about-copy{padding: 60px 14px;}.about-facts{gap: 25px;}/* Galerie */ .gallery{grid-template-columns: 1fr;grid-template-rows: 230px 170px 170px 170px;}.gallery-main, .gallery-side, .gallery-side-top, .gallery-side-bottom{height: auto;grid-column: auto;grid-row: auto;}.gallery-main{height: 230px;}.gallery-side{height: 170px;}/* Mitglied */ .member-inner{padding: 58px 0;}/* Unterseiten */ .page-hero{min-height: 310px;padding: 118px 0 48px;}.page-hero h1{font-size: clamp(39px, 11.5vw, 58px);}.page-hero p{font-size: 14px;}.content{padding: 55px 0;}.team-grid, .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.map-embed{height: 340px;}.map-caption{display: block;}.map-caption a{display: inline-block;margin-top: 8px;}/* Tabellen */ .price-table{width: 100%;border-collapse: collapse;}/* Footer */ .footer-top{grid-template-columns: 1fr;gap: 30px;}.footer-brand{grid-column: auto;}.footer-brand .footer-visual{width: 100%;max-width: 100%;}.footer-map{height: 150px;max-width: 100%;}.footer-bottom{display: block;}.footer-bottom > span{display: block;margin-top: 7px;}/* Kalender */ .calendar-wrap{padding: 30px 0 50px;}.kalender{width: calc(100% - 28px);}.calendar-month-title{min-height: 72px;grid-template-columns: 42px minmax(0, 1fr) 42px;padding: 0 8px;}.calendar-month-title h3{font-size: 16px;}.calendar-month-title button{width: 34px;height: 32px;}.calendar-weekdays > div{padding: 7px 5px;font-size: 8px;text-align: center;}.calendar-grid > *{min-height: 65px;padding: 8px 6px;}.calendar-grid .calendar-number, .calendar-grid .calendar-day-number{font-size: 10px;}.calendar-event{padding: 5px;font-size: 8px;}.calendar-event strong{font-size: 8px;}.calendar-event small{font-size: 7px;}/* Rechtliche Seiten */ .legal-content{padding: 45px 0 60px;}.legal-content h2{font-size: 23px;}/* Avatar */ .person-avatar{width: 50px;height: 50px;}}/* ---------------------------------------------------------
   22. VERY SMALL PHONES – MAX 400 PX
   --------------------------------------------------------- */ @media (max-width: 400px){.hero h1{font-size: 43px;}.hero-actions{flex-direction: column;align-items: flex-start;}.hero-actions .btn{width: auto;}.calendar-grid > *{min-height: 65px;}.calendar-event-card .calendar-event-content h3{font-size: 16px;}.footer-bottom{font-size: 8px;}}/* =====================================================
   MOBILE – TERMIN-TOOLTIP
   ===================================================== */ .calendar-event-tooltip{display: none;}@media (max-width: 700px){.calendar-day{position: relative;}.calendar-event-tooltip{display: block;position: absolute;z-index: 100;left: 50%;bottom: calc(100% + 8px);transform: translateX(-50%);width: 170px;padding: 10px 12px;background: #ffffff;border: 1px solid #e5e5e5;border-radius: 8px;box-shadow: 0 5px 18px rgba(0, 0, 0, 0.15);text-align: left;font-size: 10px;line-height: 1.35;}.calendar-event-tooltip strong{display: block;font-size: 11px;line-height: 1.25;}.calendar-event-tooltip small{display: block;margin-top: 3px;font-size: 8px;color: #777;}.calendar-event-tooltip p{margin: 5px 0 0;font-size: 9px;line-height: 1.35;}}/* MOBILE: Hero-Buttons nebeneinander */ @media (max-width: 560px){.hero-actions{flex-wrap: nowrap;gap: 8px;}.hero-actions .btn{flex: 1 1 0;min-width: 0;padding: 13px 10px;gap: 8px;white-space: nowrap;}}/* =====================================================
   FOOTER DESKTOP – 3 SPALTEN
   Bild 2/4 · Navigation 1/4 · Kontakt 1/4
   Footer-Unterzeile:
   Copyright links · Rechtliches rechts
   Nur Desktop – Responsive bleibt unverändert
   ===================================================== */ @media (min-width: 921px){/* Footer-Hintergrund auf Desktop vollständig abdecken */ footer{background-color: #101010 !important;width: 100%;position: relative;z-index: 1;}/* -------------------------------------------------
     OBERER FOOTER-BEREICH
     ------------------------------------------------- */ footer .footer-top{display: grid !important;grid-template-columns: 2fr 1fr 1fr !important;gap: 60px !important;align-items: start !important;}/* -------------------------------------------------
     FOOTER-BILD
     ------------------------------------------------- */ footer .footer-brand{grid-column: auto !important;width: 100% !important;min-width: 0 !important;}footer .footer-brand .footer-visual{display: block !important;width: 100% !important;max-width: 100% !important;height: auto !important;}/* -------------------------------------------------
     KONTAKT
     ------------------------------------------------- */ footer .footer-contact{grid-column: auto !important;width: 100% !important;min-width: 0 !important;}/* -------------------------------------------------
     FOOTER-UNTERZEILE
     Copyright links / Impressum etc. rechts
     ------------------------------------------------- */ footer .footer-bottom{display: flex !important;justify-content: space-between !important;align-items: center !important;width: 63% !important;}footer .footer-bottom .footer-copyright{text-align: left !important;}footer .footer-bottom .footer-legal{text-align: right !important;margin-left: auto !important;}}/* =========================================================
   DESKTOP – UNSERE ANLAGE / BILDERGALERIE
   Ab 921px: verschachtelte Galerie
   Responsive Regeln bleiben unverändert
   ========================================================= */ @media (min-width: 921px){/* Galerie richtet sich exakt am normalen Container aus */ .gallery-section .container{width: min(calc(100% - 42px), 1180px);margin-left: auto;margin-right: auto;}/* Verschachtelte Desktop-Galerie */ .gallery{display: grid;grid-template-columns: 1.35fr .9fr .9fr;grid-template-rows: 235px 235px;gap: 14px;width: 100%;}/* Großes Bild links */ .gallery-main{height: 484px;grid-column: 1;grid-row: 1 / 3;}/* Großes Querbild oben rechts */ .gallery-side-top{height: 235px;grid-column: 2 / 4;grid-row: 1;}/* Kleine Bilder unten rechts */ .gallery-side-bottom{height: 235px;grid-column: auto;grid-row: 2;}/* Bilder füllen ihre jeweilige Kachel */ .gallery img{display: block;width: 100%;height: 100%;object-fit: cover;}}/* =========================================================
   DESKTOP – SEKTION "DER TC STOCKHEIM"
   50/50 Layout innerhalb der Webseitenbreite
   Responsive Varianten bleiben unverändert
   ========================================================= */ @media (min-width: 921px){/* Sektion auf die gleiche Breite wie der Header begrenzen */ .about-section{width: min(calc(100% - 42px), 1180px);margin-left: auto;margin-right: auto;display: grid;grid-template-columns: 1fr 1fr;min-height: 620px;}/* Linke Hälfte – Bild */ .about-image{width: 100%;min-height: 620px;background-size: cover;background-position: center;}/* Rechte Hälfte – Text */ .about-copy{width: 100%;padding: 90px 60px;display: flex;flex-direction: column;justify-content: center;}}/* =====================================================
   ABSTAND AKTUELLES → TERMINE
   Korrektur für Desktop und Responsive
   ===================================================== */ .news-section{padding-bottom: 0 !important;}.events-section{padding-top: 60px !important;}/* =====================================================
   TVM Links
   ===================================================== */ .team-tvm-button{display: inline-flex;align-items: center;gap: 9px;background: var(--red);color: #fff;padding: 11px 16px;font-size: 13px;font-weight: 600;text-decoration: none;transition: background 0.2s ease, transform 0.2s ease;}.team-tvm-button i{font-size: 13px;}.team-tvm-button span{margin-left: 4px;font-size: 15px;}.team-tvm-button:hover{background: var(--red-hover);color: #fff;}/* =====================================================
   BEITRÄGE – TABELLE RESPONSIVE
   Tabelle immer über die komplette Containerbreite
   ===================================================== */ @media (max-width: 920px){.content .price-table{width: 100% !important;max-width: 100% !important;min-width: 100% !important;table-layout: auto;}}/* TC STOCKHEIM – FREIZEITABTEILUNG
   Seitenspezifische Ergänzungen – keine Änderung an style.css nötig.
*/ .freizeit-hero{background: linear-gradient(90deg, rgba(15,15,15,.78), rgba(15,15,15,.42)), #171717;}.freizeit-intro{padding-bottom: 55px;}.freizeit-intro-grid{display: grid;grid-template-columns: 1fr 1.15fr;gap: 90px;align-items: start;}.section-kicker{margin-bottom: 12px;color: var(--red);font-size: 12px;font-weight: 700;letter-spacing: .14em;text-transform: uppercase;}.freizeit-intro h2, .freizeit-cta h2, .freizeit-contact-copy h2{margin: 0;}.freizeit-intro-copy{max-width: 650px;}.freizeit-intro-copy p{margin: 0 0 16px;font-size: 17px;line-height: 1.75;}.freizeit-intro-copy p:last-child{margin-bottom: 0;}.freizeit-angebote{padding-top: 55px;background: #f5f5f3;}.freizeit-angebote .section-heading{display: flex;justify-content: space-between;gap: 40px;align-items: end;margin-bottom: 38px;}.freizeit-angebote .section-heading p{max-width: 390px;margin: 0;line-height: 1.65;font-size: 14px;}.freizeit-cards{display: grid;grid-template-columns: repeat(3, 1fr);gap: 18px;}.freizeit-card{position: relative;min-height: 330px;padding: 30px;background: #fff;border: 1px solid #dededb;overflow: hidden;transition: transform .2s ease, box-shadow .2s ease;}.freizeit-card:hover{transform: translateY(-4px);box-shadow: 0 14px 35px rgba(0,0,0,.08);}.freizeit-card-icon{display: flex;align-items: center;justify-content: center;width: 52px;height: 52px;margin-bottom: 34px;background: var(--red);color: #fff;font-size: 20px;}.freizeit-card-number{position: absolute;top: 22px;right: 24px;color: #e5e5e2;font-size: 46px;font-weight: 700;line-height: 1;}.freizeit-card h3{position: relative;margin: 0 0 12px;font-size: 24px;}.freizeit-card p{margin: 0;max-width: 310px;font-size: 14px;line-height: 1.65;color: #5d5d59;}.freizeit-card-price{display: flex;align-items: baseline;gap: 8px;margin-top: 30px;padding-top: 18px;border-top: 1px solid #e5e5e2;}.freizeit-card-price strong{color: var(--red);font-size: 24px;}.freizeit-card-price span{color: #777;font-size: 12px;}.freizeit-note{display: flex;align-items: center;gap: 9px;margin: 20px 0 0;color: #666;font-size: 12px;}.freizeit-note i{color: var(--red);}.freizeit-contact-section{padding-top: 55px;padding-bottom: 55px;}.freizeit-contact{display: grid;grid-template-columns: auto 1fr auto;gap: 24px;align-items: center;padding: 34px 38px;background: #171717;color: #fff;}.freizeit-contact-icon{display: flex;align-items: center;justify-content: center;width: 62px;height: 62px;background: var(--red);font-size: 22px;}.freizeit-contact-copy .section-kicker{margin-bottom: 7px;}.freizeit-contact-copy h2{color: #fff;font-size: 28px;}.freizeit-contact-copy p{margin: 5px 0 0;color: #bdbdb9;font-size: 14px;}.freizeit-mail-button{display: inline-flex;align-items: center;gap: 10px;padding: 13px 17px;background: var(--red);color: #fff;font-size: 13px;font-weight: 700;text-decoration: none;white-space: nowrap;transition: background .2s ease, transform .2s ease;}.freizeit-mail-button:hover{background: var(--red-hover);color: #fff;transform: translateY(-1px);}.freizeit-mail-button span{margin-left: 4px;font-size: 16px;}.freizeit-cta-section{padding-top: 0;}.freizeit-cta{display: flex;justify-content: space-between;gap: 45px;align-items: center;padding: 48px 0 0;border-top: 1px solid #ddd;}.freizeit-cta p{margin: 9px 0 0;color: #666;font-size: 15px;}.freizeit-cta-actions{display: flex;gap: 10px;flex-wrap: wrap;}@media (max-width: 920px){.freizeit-intro-grid{grid-template-columns: 1fr;gap: 30px;}.freizeit-angebote .section-heading{display: block;}.freizeit-angebote .section-heading p{margin-top: 14px;}.freizeit-cards{grid-template-columns: 1fr;}.freizeit-card{min-height: auto;}.freizeit-contact{grid-template-columns: auto 1fr;}.freizeit-mail-button{grid-column: 1 / -1;justify-self: start;}.freizeit-cta{display: block;}.freizeit-cta-actions{margin-top: 25px;}}@media (max-width: 560px){.freizeit-hero h1{font-size: clamp(38px, 12vw, 54px);}.freizeit-intro-copy p{font-size: 15px;}.freizeit-card{padding: 25px;}.freizeit-contact{grid-template-columns: 1fr;padding: 28px 24px;}.freizeit-mail-button{grid-column: auto;width: 100%;justify-content: center;}.freizeit-cta-actions{display: grid;grid-template-columns: 1fr;}.freizeit-cta-actions .btn{width: 100%;justify-content: center;}}/* =====================================================
   FREIZEITABTEILUNG – CTA BUTTONS
   ===================================================== */ .freizeit-cta-actions .btn-outline{background: #fff;border: 1px solid #fff;color: #111;}.freizeit-cta-actions .btn-outline:hover{background: #f5f5f5;border-color: #f5f5f5;color: #111;}/* =====================================================
   SPIELBETRIEB – CARD GRID RESPONSIVE
   ===================================================== */ @media (max-width: 920px){main .content .card-grid{display: grid !important;grid-template-columns: repeat(2, minmax(0, 1fr)) !important;gap: 10px !important;}}@media (max-width: 560px){main .content .card-grid{display: grid !important;grid-template-columns: 1fr !important;gap: 10px !important;}}/* =====================================================
   KALENDER – TRAINING
   ===================================================== */ .calendar-event-training{background: #eaf3ff !important;border-left-color: #2f6fbe !important;}.calendar-event-dot-training{background: #2f6fbe !important;}.calendar-event-freizeit{background: #fff8d9 !important;border-left-color: #e6b800 !important;}.calendar-event-dot-freizeit{background: #e6b800 !important;}/* =====================================================
   MOBILE KALENDER – TOOLTIP RANDKORREKTUR
   ===================================================== */ @media (max-width: 560px){.calendar-day{position: relative;}.calendar-event-tooltip{left: 50%;right: auto;transform: translateX(-50%);max-width: calc(100vw - 30px);box-sizing: border-box;z-index: 100;}}/* =====================================================
   MOBILE KALENDER – TOOLTIP SCHLIESSEN
   ===================================================== */ @media (max-width: 560px){.calendar-event-tooltip{position: absolute;z-index: 1000;}}.calendar-event-tooltip-close{position: absolute;top: 6px;right: 7px;width: 22px;height: 22px;padding: 0;border: 0;background: transparent;color: #777;font-size: 18px;line-height: 22px;font-weight: 500;cursor: pointer;}.calendar-event-tooltip-close:hover{color: #111;}}/* =====================================================
   MOBILE TOOLTIP – KLICKBAR ÜBER DEM KALENDER
   ===================================================== */ @media (max-width: 560px){.calendar-grid{position: relative;}.calendar-event-tooltip{position: absolute !important;z-index: 9999 !important;pointer-events: auto !important;}.calendar-event-tooltip-close{position: absolute;z-index: 10000;pointer-events: auto;touch-action: manipulation;}}/* =====================================================
   FINALER MOBILE TERMIN-TOOLTIP
   ===================================================== */ .calendar-event-tooltip{display: none !important;}@media (max-width: 700px){.calendar-event-tooltip{display: block !important;position: fixed !important;transform: none !important;z-index: 99999 !important;width: 280px !important;max-width: calc(100vw - 20px) !important;height: auto !important;min-height: 110px !important;max-height: none !important;box-sizing: border-box !important;margin: 0 !important;padding: 14px 38px 14px 14px !important;background: #fff !important;color: #111 !important;border: 1px solid #e5e5e5 !important;border-radius: 10px !important;box-shadow: 0 8px 25px rgba(0,0,0,.18) !important;text-align: left !important;font-family: "DM Sans", Arial, Helvetica, sans-serif !important;font-size: 10px !important;line-height: 1.4 !important;opacity: 1 !important;visibility: visible !important;pointer-events: auto !important;overflow: visible !important;}/* Inhalt des Tooltips */ .calendar-event-tooltip > div{display: block !important;position: static !important;width: 100% !important;height: auto !important;min-height: 0 !important;max-height: none !important;margin: 0 !important;padding: 0 !important;overflow: visible !important;}/* Überschrift */ .calendar-event-tooltip strong{display: block !important;position: static !important;width: 100% !important;height: auto !important;min-height: 0 !important;max-height: none !important;margin: 0 0 8px 0 !important;padding: 0 !important;color: #111 !important;font-size: 12px !important;font-weight: 700 !important;line-height: 1.3 !important;overflow: visible !important;}/* Kategorie */ .calendar-event-tooltip small{display: block !important;position: static !important;width: 100% !important;height: auto !important;min-height: 0 !important;max-height: none !important;margin: 0 0 9px 0 !important;padding: 0 !important;color: #777 !important;font-size: 8px !important;line-height: 1.3 !important;overflow: visible !important;}/* Beschreibung */ .calendar-event-tooltip p{display: block !important;position: static !important;width: 100% !important;height: auto !important;min-height: 0 !important;max-height: none !important;margin: 0 !important;padding: 0 !important;color: #333 !important;font-size: 10px !important;line-height: 1.45 !important;overflow: visible !important;white-space: normal !important;overflow-wrap: anywhere !important;}/* Schließen */ .calendar-event-tooltip-close{position: absolute !important;top: 5px !important;right: 5px !important;width: 24px !important;height: 24px !important;margin: 0 !important;padding: 0 !important;border: 0 !important;background: transparent !important;color: #777 !important;font-family: Arial, Helvetica, sans-serif !important;font-size: 18px !important;font-weight: 500 !important;line-height: 24px !important;text-align: center !important;cursor: pointer !important;z-index: 100000 !important;opacity: 1 !important;visibility: visible !important;pointer-events: auto !important;touch-action: manipulation;}.calendar-event-tooltip-close:hover, .calendar-event-tooltip-close:focus{color: #111 !important;background: transparent !important;border: 0 !important;outline: none !important;}}@media (max-width: 560px){.team-grid{grid-template-columns: 1fr !important;}}@media (max-width: 800px){.team-grid{grid-template-columns: 2fr !important;}}/* =========================================
   To-Top Button
   ========================================= */ .to-top{position: fixed;right: 24px;bottom: 24px;z-index: 1100;width: 46px;height: 46px;display: flex;align-items: center;justify-content: center;border: 0;border-radius: 50%;background: var(--red);color: #fff;font-size: 16px;cursor: pointer;box-shadow: 0 5px 18px rgba(0, 0, 0, .18);opacity: 0;visibility: hidden;pointer-events: none;transform: translateY(10px);transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;}.to-top.is-visible{opacity: 1;visibility: visible;pointer-events: auto;transform: translateY(0);}.to-top:hover{background: #111;}.to-top:focus-visible{outline: 2px solid #fff;outline-offset: 3px;}/* =========================================
   Responsive
   ========================================= */ @media (max-width: 920px){.to-top{right: 18px;bottom: 18px;width: 44px;height: 44px;font-size: 15px;}}@media (max-width: 560px){.to-top{right: 14px;bottom: 14px;width: 42px;height: 42px;font-size: 14px;}}/* Font Awesome – Chevron im mobilen Scroll-Hinweis */ @media (max-width: 920px){.scroll-cue .fa-chevron-down{display: block !important;font-family: "Font Awesome 7 Free" !important;font-weight: 900 !important;}}/* =========================================
   Google Maps – Platzhalter vor dem Laden
   ========================================= */ .footer-map-placeholder{display: flex;width: 100%;max-width: 290px;height: 125px;margin-top: 8px;align-items: center;justify-content: flex-start;box-sizing: border-box;background: #181818;border: 1px solid #333;border-radius: 6px;overflow: hidden;}.footer-map-placeholder-content{display: flex;flex-direction: column;align-items: flex-start;justify-content: center;transform: translateY(-5px);width: 100%;box-sizing: border-box;padding: 12px 16px;text-align: left;}.footer-map-title{display: flex;align-items: center;justify-content: flex-start;gap: 6px;margin-bottom: 6px;}.footer-map-placeholder-content > span{font-size: 11px;font-weight: 700;color: #fff;line-height: 1;margin-bottom: 3px;}.footer-map-placeholder-content > small{display: block;max-width: 240px;font-size: 9px;line-height: 1.35;color: rgba(255,255,255,.65);margin: 0 0 3px 0;}.footer-map-placeholder-content button{margin-top: 8px;padding: 6px 11px;border: 1px solid var(--red);border-radius: 4px;background: var(--red);color: #fff;font-family: inherit;font-size: 9px;font-weight: 700;cursor: pointer;transition: background .2s ease, border-color .2s ease;}.footer-map-placeholder-content button:hover{background: #111;border-color: #fff;}/* Responsive */ @media (max-width: 920px){.footer-map-placeholder{max-width: 100%;height: 150px;}}/* =========================================
   Kontakt – Google Maps Platzhalter
   ========================================= */ .contact-map-placeholder{display: flex;width: 100%;min-height: 180px;align-items: center;justify-content: flex-start;box-sizing: border-box;background: #181818;border: 1px solid #333;border-radius: 0px;overflow: hidden;}.contact-map-placeholder-content{display: flex;flex-direction: column;align-items: flex-start;justify-content: center;width: 100%;box-sizing: border-box;padding: 22px 28px;text-align: left;}/* Überschrift */ .contact-map-title{display: flex;align-items: center;justify-content: flex-start;gap: 7px;margin-bottom: 10px;}.contact-map-title > i{font-size: 18px;color: var(--red);}.contact-map-title > span{font-size: 14px;font-weight: 700;line-height: 1;color: #fff;}/* Hinweistext */ .contact-map-placeholder-content > p{max-width: 600px;margin: 0 0 12px 0;font-size: 12px;line-height: 1.5;color: rgba(255,255,255,.7);}/* Button */ .contact-map-placeholder-content button{margin: 0;padding: 8px 14px;border: 1px solid var(--red);border-radius: 4px;background: var(--red);color: #fff;font-family: inherit;font-size: 11px;font-weight: 700;cursor: pointer;transition: background .2s ease, border-color .2s ease;}.contact-map-placeholder-content button:hover{background: #111;border-color: #fff;}/* Responsive */ @media (max-width: 920px){.contact-map-placeholder{min-height: 170px;}.contact-map-placeholder-content{padding: 20px;}}@media (max-width: 560px){.contact-map-placeholder{min-height: 180px;}.contact-map-placeholder-content{padding: 18px;}.contact-map-placeholder-content > p{font-size: 11px;}}/* =========================================
   Termine – Kalender-Legende
   ========================================= */ .calendar-legend{display: flex;align-items: center;gap: 18px;margin: 18px 0 24px;font-size: 12px;color: #555;}.calendar-legend span{display: inline-flex;align-items: center;gap: 7px;}.calendar-legend-dot{display: inline-block;width: 10px;height: 10px;flex: 0 0 10px;border-radius: 50%;background: var(--red);}.calendar-legend-dot-training{background: #2f80c9;}.calendar-legend-dot-freizeit{background: #e6b800 !important;}.calendar-legend-dot-event{background: var(--red);}
/* Newsseite: Meldungen auf dem Desktop in einzelnen Zeilen */
body:has(.news-grid .news-date) .news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

body:has(.news-grid .news-date) .news-card {
  width: 100%;
  box-sizing: border-box;
}
/* Newsseite: dezenter Vereinslogo-Avatar oben rechts */
body:has(.news-grid .news-date) .news-card .card-copy {
  position: relative;
}

body:has(.news-grid .news-date) .news-avatar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 50%;
  border: 1px solid #e7cfcf;
  background: #fff;
  padding: 3px;
}
/* Newsseite: dezentes Kalender-Symbol oben rechts */
body:has(.news-grid .news-date) .news-avatar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid #e7cfcf;
  background: #fff;
  color: #c62828;
  font-size: 19px;
}
@media (max-width: 600px) {
  body:has(.news-grid .news-date) .news-card .card-copy h3 {
    padding-right: 48px;
  }
}