/* ===================================================================== fixes.css – SV Abtshagen, Audit 09/2026 Auf ALLEN Seiten als LETZTES Stylesheet einbinden: ===================================================================== */ /* ---------- 1) Layout (im Browser verifiziert: 320–1920 px, 150 % Schrift) ---------- */ /* Sticky-Nav Unterseiten: clip statt hidden, sonst wird Scroll-Container. Safari < 16 kennt clip nicht, behält hidden – nichts bricht. */ html,body{overflow-x:clip} /* Hero 820–1279 px: Spalten dürfen schrumpfen, Headline kleiner → Wappen nicht abgeschnitten */ .hero__content{grid-template-columns:minmax(0,1fr)} @media(min-width:820px){.hero__content{grid-template-columns:minmax(0,1fr) auto}} @media(min-width:820px) and (max-width:1279px){.hero__title{font-size:8.5vw}} .hero__title span>em{max-width:100%} /* Mitgliedschaft ab 1024 px: Preise nicht mehr abgeschnitten */ @media(min-width:1024px){ .membership__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(2rem,4vw,5rem)} .membership__left h2{font-size:clamp(2.5rem,5vw,6rem)} } @media(min-width:640px){.price-card{grid-template-columns:auto minmax(0,1fr) auto auto}} /* 320 px + große Systemschrift */ @media(max-width:359px){.stat{padding:1.5rem 1rem}} .btn,.nav__back{white-space:normal;text-align:center;max-width:100%} .stat__label,.cstat__label{letter-spacing:.08em} h1,h2,h3,.hero__title em,.stat__label,.cstat__label,.hero__location,.footer__col a,.content p,.content a,.tl-entry__body{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto} .footer__cols{grid-template-columns:repeat(auto-fit,minmax(min(9rem,100%),1fr))} @media(max-width:539px){.teams__grid{grid-template-columns:minmax(0,1fr)}} @media(max-width:719px){.quotes__grid{grid-template-columns:minmax(0,1fr)}} @media(max-width:819px){.about__grid,.contact__inner{grid-template-columns:minmax(0,1fr)}.stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:1023px){.membership__grid{grid-template-columns:minmax(0,1fr)}} .form input,.form select,.form textarea{min-width:0} /* ---------- 2) Mobile-Menü (verifiziert; gehört zur neuen home.js) ---------- */ .nav__mobile{z-index:10001;visibility:hidden;transition:transform .4s var(--ease),visibility 0s linear .4s} .nav__mobile.open{visibility:visible;transition:transform .4s var(--ease),visibility 0s} .nav__mobile-cta .btn{font:700 .82rem/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;background:var(--paper);color:var(--navy);border:0;padding:1rem 1.4rem} /* ---------- 3) Chronik (gehört zur neuen chronik.js + Button-Thumbnails) ---------- */ .archiv-viewer:not(.open){visibility:hidden} .archiv-thumb{padding:0;display:block;width:100%;overflow:hidden} .archiv-thumb img{width:100%;height:100%;object-fit:cover} /* ---------- 4) Inhalte ohne JavaScript sichtbar (JS setzt .reveal-ready) ---------- */ .reveal{opacity:1;transform:none} .reveal-ready .reveal{opacity:0;transform:translateY(24px)} .reveal-ready .reveal.in{opacity:1;transform:translateY(0)} @media(prefers-reduced-motion:reduce){.reveal-ready .reveal{opacity:1;transform:none}} /* ---------- 5) Kontraste WCAG AA ---------- */ :root{--blue-text:#126BBA;color-scheme:light only} /* 4,89:1 auf Creme; color-scheme: kein Auto-Dark */ .about .section-head__num,.about__chronik-link,.contact__block h3,.contact__block h4,.intro__eyebrow,.about__block h3::before,.content h2::before,.content a,.content address .address-label{color:var(--blue-text)} .quotes__eyebrow,.sponsors__header .eyebrow,.contact .eyebrow{color:var(--blue-text)!important} /* schlägt Inline-style */ .about__chronik-link{border-color:var(--blue-text)} .nav.scrolled .nav__brand-text small,.nav--sticky .nav__brand-text small{color:var(--blue-deep)} /* 9-px-Text auf halbtransparenter Leiste */ .content a{text-decoration:underline;text-underline-offset:.2em} .btn--accent:hover,.form button:hover,.hero__actions .btn--solid:hover,.nav__cta .btn--solid:hover{color:var(--navy)} /* 6,68:1 statt 2,63:1 */ .quote-card__role{color:rgba(10,25,48,.72)} .content small{color:rgba(10,14,22,.7)} .callout strong{color:#9A5A1C} /* ---------- 6) Kontaktformular (gehört zu kontaktformular.html) ---------- */ .form__field{display:grid;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,234,.8)} .form__field :is(input,select,textarea){letter-spacing:normal;text-transform:none;font-weight:400} .form input,.form select,.form textarea{border-bottom-color:rgba(245,242,234,.45)} /* 4,1:1 statt 1,6:1 */ .form :is(input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:3px} .form select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F5F2EA' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 1rem center;padding-right:2.5rem} .form__hp{position:absolute;left:-9999px} .form .form__hint{font-size:.8rem;color:rgba(245,242,234,.75);margin:0} .form .form__hint a{text-decoration:underline} /* ---------- 7) Bewegung & Touch-Ziele ---------- */ .sponsors__marquee:is(:hover,:focus-within) .sponsors__track,.ticker:hover .ticker__track{animation-play-state:paused} .footer__col ul{gap:0} .footer__col a{padding-block:.7rem} .footer__legal a,.page-head__crumbs a,.chronik-hero__crumbs a{display:inline-flex;align-items:center;min-height:44px} .footer__legal{align-items:center} /* Optional, bis es Detailseiten gibt (dazu data-wip im HTML entfernen): .team-card{cursor:default}.team-card:hover{transform:none}.team-card__arrow{display:none} */ /* Vereinsfoto: echtes Seitenverhältnis, kein Beschnitt, kein Hochskalieren */ .about__image-wrap, .about__image-wrap:is(*){aspect-ratio:3/2} .about__image-link{display:block;height:100%;cursor:zoom-in}