:root {
  --blue-950 :#071b35;--blue-900 : #0b2f5b;--blue-700 : #155a9b;--blue-100 : #eaf4ff;--blue-50 : #f5faff;--accent : #143c6d;--sky : #e8f5fc;--text : #112033;--muted : #143C6D;--line : #dbe7f4;--white : #ffffff;--shadow : 0 18px 45px rgba(7, 27, 53, 0.12);--radius :24px;
}
* {
  box-sizing :border-box;
}
html {
  scroll-behavior :smooth;
}
body {
  margin :0;
  font-family :Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color :var(--text);
  background :var(--white);
  line-height :1.65;
}
img {
  display :block;
  max-width :100%;
}
a {
  color :var(--blue-700);
  text-decoration-thickness :2px;
  text-underline-offset :4px;
}
.seite {
  width :min(74vw, 1280px);
  margin :0 auto;
}
.abstand {
  padding :86px 0;
}
.kleiner-titel {
  margin :0 0 14px;
  color :var(--accent);
  font-weight :800;
  letter-spacing :.18em;
  text-transform :uppercase;
  font-size :.78rem;
}
h2 {
  margin :0;
  color :var(--blue-950);
  letter-spacing :-0.025em;
  line-height :1.12;
  font-weight :720;
}
h2 {
  font-size :clamp(1.5rem, 2vw, 2.4rem);
}
p {
  font-size :1.07rem;
}
.bildrahmen {
  overflow :hidden;
  border-radius :var(--radius);
  box-shadow :var(--shadow);
  background :var(--blue-50);
}
.bildrahmen img {
  width :100%;
  height :100%;
  min-height :360px;
  object-fit :cover;
}
.seitenkopf {
  position :sticky;
  top :0;
  z-index :10;
  background :rgba(255, 255, 255, 0.92);
  backdrop-filter :blur(16px);
  border-bottom :1px solid rgba(219, 231, 244, 0.85);
}
.kopfzeile {
  min-height :86px;
  display :flex;
  align-items :center;
  justify-content :space-between;
  gap :32px;
}
.vereinslogo {
  display :inline-flex;
  align-items :center;
  gap :14px;
  text-decoration :none;
  color :var(--blue-950);
}
.vereinslogo img {
  width :70px;
  height :70px;
  object-fit :contain;
}
.vereinslogo strong {
  display :block;
  font-size :1.35rem;
  line-height :1;
  letter-spacing :-0.04em;
}
.vereinslogo small {
  color :var(--muted);
  font-weight :700;
}
.navigation {
  display :flex;
  align-items :center;
  gap :24px;
  font-size :.96rem;
  font-weight :680;
}
.navigation a {
  color :var(--blue-950);
  text-decoration :none;
}
  .navigation a :hover {
  color :var(--blue-700);
}
.infobereich {
  display :grid;
  grid-template-columns :1fr 1fr;
  gap :68px;
  align-items :center;
}
.bild-rechts .bildspalte {
  order :2;
}
.bild-klein-links {
  grid-template-columns :0.5fr 1.5fr;
}
.bild-klein-rechts {
  grid-template-columns :1.5fr 0.5fr;
}
.textspalte p {
  color :var(--muted);
  max-width :68ch;
}
.textspalte strong {
  color :var(--blue-950);
}
.gebuehren {
  margin :28px 0;
  display :grid;
  gap :10px;
}
.gebuehren p {
  margin :0;
  display :flex;
  justify-content :space-between;
  gap :20px;
  padding :13px 0;
  border-bottom :1px solid var(--line);
  color :var(--text);
}
.gebuehren strong {
  white-space :nowrap;
  color :var(--accent);
}
.vorstand-text {
  max-width :980px;
  margin-bottom :36px;
}
.vorstand-text p {
  color :var(--muted);
}
.vorstand-bild img {
  min-height :620px;
}
.vorstand-beschriftung {
  margin :24px auto 0;
  max-width :920px;
  text-align :center;
  color :var(--muted);
  font-size :1.1rem;
  line-height :1.85;
}
.galerie-text {
  max-width :770px;
  margin-bottom :36px;
}
.galerie-text p {
  color :var(--muted);
}
.galerie-karussell {
  position :relative;
  display :grid;
  grid-template-columns :auto 1fr auto;
  align-items :center;
  gap :18px;
}
.galerie-spur {
  display :flex;
  gap :18px;
  overflow-x :auto;
  scroll-snap-type :x mandatory;
  scroll-behavior :smooth;
  padding :8px 2px 18px;
  scrollbar-width :thin;
}
.galerie-spur img, .webcam-karte {
  flex :0 0 calc((100% - 36px) / 3);
  height :285px;
  border-radius :20px;
  box-shadow :0 12px 28px rgba(7, 27, 53, 0.08);
  scroll-snap-align :start;
  background :var(--sky);
}
.galerie-spur img {
  object-fit :cover;
}
.webcam-karte {
  overflow :hidden;
}
.webcam-frame {
  display :block;
  width :222.23%;
  height :222.23%;
  border :0;
  overflow :hidden;
  transform :scale(0.45);
  transform-origin :top left;
}
.galerie-pfeil {
  width :48px;
  height :48px;
  border :1px solid var(--line);
  border-radius :999px;
  background :var(--white);
  color :var(--accent);
  font-size :2rem;
  line-height :1;
  cursor :pointer;
  box-shadow :0 10px 24px rgba(7, 27, 53, 0.08);
}
  .galerie-pfeil :hover {
  background :var(--sky);
}
.seitenfuss {
  margin-top :48px;
  padding :44px 0;
  border-top :1px solid var(--line);
  color :var(--muted);
}
.fusszeile {
  display :flex;
  justify-content :space-between;
  gap :24px;
  flex-wrap :wrap;
}
.fusszeile p {
  margin :0;
  font-size :.98rem;
}
  @media (max-width :1100px) {
  .seite{width :min(88vw, 980px);
}
.infobereich {
  grid-template-columns :1fr;
}
.bild-rechts .bildspalte {
  order :0;
}
.bild-klein-links, .bild-klein-rechts {
  grid-template-columns :1fr;
}
.vorstand-bild img {
  min-height :420px;
}
.galerie-spur img, .webcam-karte {
  flex-basis :calc((100% - 18px) / 2);
}
  }@media (max-width :760px) {
  .seite{width :min(92vw, 620px);
}
.kopfzeile {
  min-height :auto;
  padding :16px 0;
  align-items :flex-start;
  flex-direction :column;
}
.navigation {
  width :100%;
  gap :14px;
  flex-wrap :wrap;
}
.abstand {
  padding :58px 0;
}
.bildrahmen img {
  min-height :280px;
}
.vorstand-bild img {
  min-height :320px;
}
.bildergalerie {
  width :100%;
  max-width :none;
}
.galerie-text {
  width :min(92vw, 620px);
  margin-left :auto;
  margin-right :auto;
}
.galerie-karussell {
  grid-template-columns :1fr;
  gap :0;
}
.galerie-pfeil {
  display :none;
}
.galerie-spur {
  width :100vw;
  margin-left :calc(50% - 50vw);
  gap :0;
  overflow-x :auto;
  scroll-snap-type :x mandatory;
  padding :8px 0 18px;
  scrollbar-width :none;
}
  .galerie-spur : :-webkit-scrollbar {
  display :none;
}
.galerie-spur img, .webcam-karte {
  flex :0 0 100vw;
  min-width :100vw;
  height :240px;
  border-radius :0;
}
.webcam-frame {
  pointer-events :none;
}
}.webcams-text {
  max-width :770px;
  margin-bottom :36px;
}
.webcams-text p {
  color :var(--muted);
}
.webcams-raster {
  display :grid;
  grid-template-columns :1fr 1fr;
  gap :28px;
}
.webcam-bild {
  aspect-ratio :16 / 9;
  background :var(--sky);
}
.webcam-bild img {
  width :100%;
  height :100%;
  min-height :0;
  object-fit :contain;
  background :var(--sky);
}
  @media (max-width :760px) {
  .webcams-raster{grid-template-columns :1fr;
}
}.videorahmen {
  aspect-ratio :16 / 9;
  background :var(--blue-950);
}
.videorahmen video {
  display :block;
  width :100%;
  height :100%;
  object-fit :cover;
}
.dreifach-bereich {
  display : grid;
  grid-template-columns : 1fr 1.15fr 1fr;
  gap : 36px;
  align-items : center;
}
.dreifach-bild {
  aspect-ratio : 4 / 3;
}
.dreifach-bild img {
  width : 100%;
  height : 100%;
  min-height : 0;
  object-fit : cover;
}
.dreifach-text {
  padding : 20px 10px;
}
  .dreifach-text p : not(.kleiner-titel) {
  color : var(--muted);
}
.karten-kopf {
  max-width : 770px;
  margin : 0 auto 42px;
  text-align : center;
}
  .karten-kopf p : last-child {
  color : var(--muted);
}
.karten-raster {
  display : grid;
  grid-template-columns : repeat(3, 1fr);
  gap : 28px;
}
.info-karte {
  min-width : 0;
}
.karte-bild {
  aspect-ratio : 4 / 3;
}
.karte-bild img {
  width : 100%;
  height : 100%;
  min-height : 0;
  object-fit : cover;
}
.karte-text {
  padding : 24px 8px 0;
}
.karte-text h3 {
  margin : 0 0 10px;
  color : var(--blue-950);
  font-size : 1.35rem;
  line-height : 1.2;
}
.karte-text p {
  margin : 0;
  color : var(--muted);
}
  @media (max-width : 1100px) {
  .dreifach-bereich{grid-template-columns : 1fr 1fr;
}
.dreifach-text {
  grid-column : 1 / -1;
  grid-row : 1;
  text-align : center;
  max-width : 760px;
  margin : 0 auto;
}
.karten-raster {
  grid-template-columns : 1fr 1fr;
}
  }@media (max-width : 760px) {
  .dreifach-bereich{grid-template-columns : 1fr;
}
.dreifach-text {
  grid-column : auto;
  grid-row : auto;
  padding : 0;
}
.dreifach-bild {
  aspect-ratio : 16 / 10;
}
.karten-raster {
  grid-template-columns : 1fr;
  gap : 42px;
}
.karten-kopf {
  text-align : left;
}
}.youtube-bereich {
  display : grid;
  grid-template-columns : 1fr 1fr;
  gap : 68px;
  align-items : center;
}
.youtube-links .youtube-video {
  order : 1;
}
.youtube-links .youtube-text {
  order : 2;
}
.youtube-rechts .youtube-video {
  order : 2;
}
.youtube-rechts .youtube-text {
  order : 1;
}
.youtube-video {
  width : min(100%, 300px);
  aspect-ratio : 9 / 16;
  margin : 0 auto;
}
.youtube-video iframe {
  width : 100%;
  height : 100%;
  border : 0;
  display : block;
}
  .youtube-text p : not(.kleiner-titel) {
  color : var(--muted);
}
  @media (max-width : 1100px) {
  .youtube-bereich{grid-template-columns : 1fr;
  gap : 36px;
}
.youtube-links .youtube-video,
  .youtube-rechts .youtube-video,
  .youtube-links .youtube-text, .youtube-rechts .youtube-text {
  order : initial;
}
.youtube-text {
  text-align : center;
  max-width : 760px;
  margin : 0 auto;
}
  }@media (max-width : 760px) {
  .youtube-text{text-align : left;
}
.youtube-video {
  width : min(100%, 360px);
}
}