@font-face { font-family: "Madefor Display"; src: url(schrift/madefor-display.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Madefor Text"; src: url(schrift/madefor-text.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --rot: #af315a;
  --rot-dunkel: #8f2549;
  --blau: #0866ff;
  --text: #000;
  --breite: 1260px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--text); font: 400 20px/1.6 "Madefor Text", Helvetica, Arial, sans-serif; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, h5 { font-family: "Madefor Display", Helvetica, Arial, sans-serif; font-weight: 700; line-height: 1.2; margin: 0; }
p { margin: 0; }
.fb { color: var(--blau); }
.inhalt { width: min(var(--breite), 100% - 40px); margin-inline: auto; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 48px; border: 1px solid #000; border-radius: 999px; background: var(--rot); color: #fff; font: 600 22px/1.2 "Madefor Text", sans-serif; text-decoration: none; transition: background .2s; }
.knopf:hover { background: var(--rot-dunkel); }
.knopf--klein { min-height: 50px; padding: 0 16px; font-size: 20px; }
.knopf--ohne-rand { border: 0; }

/* Kopfleiste */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--rot); height: 81px; }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 40px 0 14px; }
.logo { display: block; width: 141px; height: 76px; }
.logo img { width: 100%; height: 100%; object-fit: cover; }
.nav { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav > li { position: relative; }
.nav > li > a, .nav__auf { display: flex; align-items: center; gap: 6px; height: 81px; color: #fff; font-size: 20px; text-decoration: none; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.nav > li > a:hover, .nav__auf:hover { color: #000; }
.nav a[aria-current="page"] { color: #000; text-decoration: underline; text-underline-offset: 4px; }
.nav__auf svg { width: 14px; fill: currentColor; transition: transform .2s; }
.nav__unter { display: none; position: absolute; top: 72px; right: 0; min-width: 240px; max-height: calc(100vh - 100px); overflow-y: auto; margin: 0; padding: 8px 0; list-style: none; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.nav__unter a { display: block; padding: 6px 20px; color: #000; font-size: 16px; text-decoration: none; white-space: nowrap; }
.nav__unter a:hover { color: var(--rot); }
.nav > li.offen .nav__unter, .nav > li:hover .nav__unter, .nav > li:focus-within .nav__unter { display: block; }
.nav > li.offen .nav__auf svg { transform: rotate(180deg); }
.burger { display: none; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 0; }
.burger span { display: block; height: 2px; background: #fff; margin: 9px 2px; }

/* Handy-Menü */
.handymenue { position: fixed; inset: 0; z-index: 100; background: #fff; padding: 90px 40px 40px; overflow-y: auto; display: none; }
.handymenue.offen { display: block; }
.handymenue__zu { position: absolute; top: 24px; right: 30px; width: 36px; height: 36px; background: none; border: 0; cursor: pointer; font-size: 0; }
.handymenue__zu::before, .handymenue__zu::after { content: ""; position: absolute; left: 4px; right: 4px; top: 17px; height: 2px; background: #000; }
.handymenue__zu::before { transform: rotate(45deg); }
.handymenue__zu::after { transform: rotate(-45deg); }
.handymenue ul { list-style: none; margin: 0; padding: 0; }
.handymenue > ul > li > a, .handymenue__auf { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 10px; color: var(--rot); font: 400 20px "Madefor Text", sans-serif; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
.handymenue__auf svg { width: 14px; fill: #000; transition: transform .2s; }
.handymenue li.offen .handymenue__auf svg { transform: rotate(180deg); }
.handymenue__unter { display: none; }
.handymenue li.offen .handymenue__unter { display: block; }
.handymenue__unter a { display: block; padding: 10px 0; color: var(--blau); font-size: 18px; text-decoration: none; }

/* Großes Bild mit weißem Kasten */
.held { position: relative; min-height: 826px; display: flex; align-items: center; }
.held > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.held__kasten { position: relative; background: rgba(255,255,255,.9); padding: 30px 32px 30px; }
.held--start .held__kasten { margin-left: auto; margin-right: 80px; width: 728px; }
.held--start h1 { font-size: 40.5px; }
.held--start p { margin: 22px 0 46px; }
.held--gruppen { min-height: 565px; align-items: flex-start; }
.held--gruppen .held__kasten { margin: 73px 0 0 90px; width: 568px; padding: 20px 10px 14px; }
.held--gruppen h1 { font-size: 40.5px; line-height: 1.3; padding: 0 15px; }
.held--gruppen p { font-size: 16px; margin: 20px 0 32px 10px; }
.held--gruppen .knopf { margin-left: 10px; width: 272px; min-height: 50px; font-weight: 400; }

/* Startseite */
.ueber { padding: 120px 0 0; }
.ueber .inhalt { width: min(1060px, 100% - 40px); }
.ueber h2 { font-size: 40px; margin-bottom: 20px; }
.video { position: relative; width: 663px; max-width: 100%; aspect-ratio: 3 / 2; background: #000; margin-bottom: 30px; }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video button { position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer; }
.video__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 68px; height: 48px; background: red; border-radius: 12px; }
.video__play::after { content: ""; position: absolute; left: 27px; top: 14px; border-left: 18px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.video__hinweis { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; background: rgba(0,0,0,.75); color: #fff; font-size: 13px; line-height: 1.4; }
.ueber__text { max-width: 822px; }
.ueber .knopf { margin-top: 26px; width: 260px; }

.bild-mitte { width: min(929px, 100% - 40px); margin: 185px auto 0; }
.bild-mitte img { width: 100%; aspect-ratio: 929 / 497; object-fit: cover; }

.teil-werden { text-align: left; width: min(530px, 100% - 40px); margin: 120px auto 0; }
.teil-werden h2 { font-size: 42.75px; }
.teil-werden p { margin-top: 8px; }
.teil-werden .knopf { display: flex; width: 270px; margin: 44px auto 0; }
.teil-werden--gross h2 { font-size: 54px; }
.teil-werden--gross { width: min(530px, 100% - 40px); }

.vorteile { width: min(1240px, 100% - 40px); margin: 105px auto 0; }
.vorteile > h2 { font-size: 36px; margin-bottom: 50px; }
.vorteile__raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 160px; }
.vorteil img { width: 481px; max-width: 100%; aspect-ratio: 481 / 309; object-fit: cover; margin-left: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.vorteil h3 { font-size: 22px; margin: 26px 0 12px; }
.vorteil p { font-size: 18px; max-width: 408px; }

.stimmen { width: min(1260px, 100% - 40px); margin: 120px auto 0; }
.stimmen > h2 { font-size: 40px; margin-bottom: 36px; }
.karussell { position: relative; display: flex; align-items: center; gap: 20px; }
.karussell__pfeil { flex: none; width: 60px; height: 60px; background: none; border: 0; cursor: pointer; }
.karussell__pfeil svg { width: 26px; stroke: #000; stroke-width: 2; fill: none; }
.karussell__fenster { flex: 1; overflow: hidden; }
.karussell__band { display: flex; transition: transform .5s ease; }
.stimme { flex: 0 0 100%; margin: 0; display: grid; grid-template-columns: 283px 1fr; gap: 76px; align-items: start; padding: 0 0 0 124px; }
.stimme img { width: 283px; height: 263px; object-fit: cover; border-radius: 50%; }
.stimme blockquote { margin: 0; max-width: 491px; }
.stimme cite { display: block; font-style: normal; margin-top: 32px; }
.stimme .knopf { margin-top: 22px; }

.gesetze { width: min(995px, 100% - 40px); margin: 80px auto 0; }
.gesetze img { width: 100%; aspect-ratio: 995 / 663; object-fit: cover; }

.gender { width: calc(100% - 86px); margin: 60px auto 50px; font-size: 13.66px; line-height: 1.6; text-align: justify; }

/* Alle Gruppen */
.bereich { padding: 50px 0 0; }
.bereich > h2 { font-size: 47.25px; margin: 0 0 30px 10px; }
.karten { width: min(1260px, 100% - 40px); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.karte { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.6); padding: 45px 11px 56px; display: flex; flex-direction: column; }
.karte h3 { font: 500 22.5px/1.6 "Madefor Text", sans-serif; }
.karte__text { margin-top: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.karte.offen .karte__text { -webkit-line-clamp: unset; display: block; }
.karte__mehr { align-self: flex-start; margin-top: 12px; padding: 0; background: none; border: 0; color: var(--blau); font: 14px "Madefor Text", sans-serif; text-decoration: underline; cursor: pointer; }
.karte .knopf { align-self: center; margin-top: 24px; min-height: 54px; padding: 0 22px; border: 0; }
.regeln-hinweis { width: min(1280px, 100% - 40px); margin: 100px auto 120px; }
.regeln-hinweis h2 { font-size: 47.8px; margin-bottom: 36px; }
.regeln-hinweis .knopf { min-height: 68px; width: 432px; max-width: 100%; font-size: 30px; font-weight: 400; border: 0; }

/* Gruppenregeln */
.held--regeln { min-height: 849px; justify-content: center; }
.held--regeln .held__kasten { background: rgba(255,255,255,.75); width: 842px; text-align: center; padding: 20px 20px 34px; margin-top: 230px; }
.held--regeln h1 { font-size: 97px; line-height: 1.1; }
.held--regeln p { font-family: "Madefor Display", sans-serif; font-size: 51px; line-height: 1.3; margin-top: 18px; }
.regeln { width: min(1260px, 100% - 40px); margin: 110px auto 0; }
.regeln h2 { font: 400 31.5px/1.3 "Madefor Display", sans-serif; margin: 30px 0 4px; }
.regeln p { font-size: 18px; }
.regeln a { color: var(--blau); }
.rechtliches { width: min(1260px, 100% - 40px); margin: 120px auto 130px; }
.rechtliches h2 { font-size: 40px; max-width: 940px; margin-bottom: 70px; }
.rechtliches__knoepfe { display: flex; gap: 26px; flex-wrap: wrap; }
.rechtliches .knopf { width: 275px; min-height: 57px; font-weight: 400; border: 0; }

/* Impressum und Datenschutz */
.held--recht { min-height: 724px; justify-content: center; }
.held--recht h1 { position: relative; color: #fff; font-size: 102px; margin-top: 180px; text-shadow: 0 2px 20px rgba(0,0,0,.15); }
.rechtstext { width: min(1260px, 100% - 40px); margin: 90px auto 100px; }
.rechtstext p { min-height: 1em; }
.rechtstext--impressum p { font-size: 20.5px; }
.rechtstext--datenschutz p { font-size: 16.9px; }
.rechtstext a { color: var(--blau); word-break: break-word; }

/* Fußleiste */
.fuss { background: var(--rot); color: #fff; }
.fuss__innen { position: relative; display: flex; flex-direction: column; align-items: center; padding: 16px 20px 6px; }
.fuss .logo { position: absolute; left: 19px; top: 16px; width: 142px; height: 77px; }
.fuss__links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.fuss__links a { display: block; padding: 2px 8px; color: #fff; font-size: 18px; text-decoration: none; }
.fuss__links a:hover { color: #000; }
.fuss__links a[aria-current="page"] { background: #fff; color: var(--blau); text-decoration: underline; }
.fuss__copy { margin-top: 26px; font-size: 14px; }

/* Handy */
@media (max-width: 900px) {
  body { font-size: 18px; }
  .nav { display: none; }
  .burger { display: block; }
  .kopf { height: 76px; }
  .kopf__innen { padding: 0 20px 0 8px; }
  .logo { width: 113px; height: 61px; }

  .held { min-height: 0; padding: 110px 16px 90px; }
  .held__kasten, .held--start .held__kasten, .held--gruppen .held__kasten, .held--regeln .held__kasten { width: 100%; margin: 0; padding: 20px; }
  .held--start h1, .held--gruppen h1 { font-size: 22px; padding: 0; }
  .held--start p { font-size: 18px; margin: 12px 0 24px; }
  .held--start .knopf, .held--gruppen .knopf { display: flex; width: 230px; margin: 0 auto; min-height: 44px; font-size: 20px; padding: 0; }
  .held--gruppen p { margin: 12px 0 24px; }
  .held--regeln h1 { font-size: 44px; }
  .held--regeln p { font-size: 24px; }
  .held--recht { padding: 160px 16px; }
  .held--recht h1 { font-size: 48px; margin-top: 0; }

  .ueber { padding-top: 60px; }
  .ueber h2, .stimmen > h2 { font-size: 30px; }
  .video { width: 100%; }
  .ueber .knopf { width: 230px; min-height: 44px; font-size: 20px; padding: 0; }
  .bild-mitte { margin-top: 70px; }
  .teil-werden { margin-top: 70px; }
  .teil-werden h2, .teil-werden--gross h2 { font-size: 32px; }
  .teil-werden .knopf { width: 230px; min-height: 44px; font-size: 20px; padding: 0; }
  .vorteile { margin-top: 70px; }
  .vorteile > h2 { font-size: 26px; margin-bottom: 30px; }
  .vorteile__raster { grid-template-columns: 1fr; gap: 40px; }
  .vorteil img { margin: 0; width: 100%; }
  .stimmen { margin-top: 70px; }
  .karussell { display: block; }
  .karussell__pfeil { position: absolute; top: 63px; z-index: 2; width: 40px; }
  .karussell__pfeil--zurueck { left: -6px; }
  .karussell__pfeil--weiter { right: -6px; }
  .stimme { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 4px; }
  .stimme img { width: 200px; height: 186px; justify-self: center; }
  .gesetze { margin-top: 50px; }
  .gender { width: calc(100% - 40px); text-align: left; }

  .bereich > h2 { font-size: 32px; margin-left: 20px; }
  .karten { grid-template-columns: 1fr; }
  .regeln-hinweis h2 { font-size: 30px; }
  .regeln-hinweis .knopf { font-size: 22px; min-height: 56px; }
  .regeln { margin-top: 60px; }
  .regeln h2 { font-size: 24px; }
  .rechtliches h2 { font-size: 28px; margin-bottom: 36px; }
  .rechtstext { margin-top: 50px; }
  .rechtstext--impressum p, .rechtstext--datenschutz p { font-size: 16px; }

  .fuss__innen { align-items: flex-end; padding: 16px 20px 8px; }
  .fuss .logo { left: 8px; top: 12px; width: 113px; height: 61px; }
  .fuss__links { flex-direction: column; gap: 4px; align-items: flex-end; }
  .fuss__copy { align-self: center; margin-top: 20px; }
}