:root {
  --komba-pink: #d4006f;
  --komba-pink-dark: #9f0056;
  --komba-pink-light: #fde8f2;
  --komba-orange: #ff6a3d;
  --komba-turquoise: #0099a8;
  --text: #263746;
  --muted: #657684;
  --white: #ffffff;
  --light: #f4f6f7;
  --line: #d9e1e6;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}
a { color: var(--komba-pink); }
a:hover, a:focus { color: var(--komba-pink-dark); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  padding: .75rem 1rem;
  background: #fff;
  border: 2px solid var(--komba-pink);
}

.topbar {
  background: var(--komba-pink-dark);
  color: #fff;
  font-size: .88rem;
}
.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: .42rem 1.25rem;
  display: flex;
  justify-content: flex-end;
  gap: 1.25rem;
}
.topbar a { color: #fff; text-decoration: none; }

.site-header {
  background: #fff;
  border-bottom: 5px solid var(--komba-orange);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 118px;
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--komba-pink);
}
.wordmark {
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.055em;
  text-transform: lowercase;
  color: var(--komba-pink);
}
.wordmark-dot { color: var(--komba-orange); }
.brand-copy strong {
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .075em;
  color: var(--komba-pink-dark);
}
.brand-copy span {
  display: block;
  margin-top: .18rem;
  font-size: .92rem;
  color: var(--muted);
}
nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.65rem;
  margin: 0;
  padding: 0;
}
nav a {
  color: var(--komba-pink-dark);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}
nav a:hover, nav a:focus { color: var(--komba-turquoise); }

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, var(--komba-pink-dark), var(--komba-pink));
  color: #fff;
}
.hero::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -8%;
  width: 46%;
  height: 150%;
  background: var(--komba-orange);
  transform: skewX(-17deg);
  opacity: .96;
}
.hero::before {
  content: "";
  position: absolute;
  right: 24%;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border: 42px solid rgba(255,255,255,.11);
  border-radius: 50%;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  min-height: 470px;
  padding: 4.8rem 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  gap: 3rem;
  align-items: center;
}
.kicker {
  display: inline-block;
  margin-bottom: .8rem;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .82rem;
}
h1, h2, h3 {
  margin-top: 0;
  line-height: 1.15;
  color: var(--komba-pink-dark);
}
.hero h1 {
  margin-bottom: 1.15rem;
  max-width: 760px;
  color: #fff;
  font-size: clamp(2.55rem, 6vw, 4.7rem);
  letter-spacing: -.035em;
}
.hero .lead {
  max-width: 720px;
  margin: 0;
  font-size: 1.18rem;
  color: rgba(255,255,255,.94);
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.75rem;
}
.button {
  display: inline-block;
  padding: .8rem 1.15rem;
  border: 2px solid #fff;
  background: #fff;
  color: var(--komba-pink-dark);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .88rem;
}
.button:hover, .button:focus {
  background: var(--komba-orange);
  border-color: var(--komba-orange);
  color: var(--komba-pink-dark);
}
.button.secondary {
  background: transparent;
  color: #fff;
}
.button.secondary:hover, .button.secondary:focus {
  background: #fff;
  color: var(--komba-pink-dark);
}

.contact-card {
  background: #fff;
  color: var(--text);
  padding: 1.65rem;
  border-top: 9px solid var(--komba-orange);
  box-shadow: 0 18px 45px rgba(0,0,0,.2);
}
.contact-card h2 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
}
.contact-card p { margin: .4rem 0; }

main section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4.3rem 1.25rem;
}
.section-title {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: center;
  margin-bottom: 1.7rem;
}
.section-title::before {
  content: "";
  width: 46px;
  height: 8px;
  background: var(--komba-orange);
}
.section-title h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.65rem);
}
.intro {
  max-width: 850px;
  font-size: 1.08rem;
  color: #445a68;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.35rem;
  margin-top: 2rem;
}
.card {
  position: relative;
  min-height: 220px;
  padding: 1.55rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 9px solid var(--komba-orange);
  box-shadow: 0 12px 30px rgba(90, 0, 45, .08);
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-top: 42px solid var(--komba-orange);
  border-left: 42px solid transparent;
}
.card-heading {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .9rem;
}

.card h3 {
  margin: 0;
  font-size: 1.25rem;
  padding-right: 1rem;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: rgba(21, 163, 179, .12);
  color: var(--komba-turquoise);
}

.card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-wide {
  max-width: none;
  background: var(--light);
  border-top: 1px solid var(--line);
}
.section-wide .inner {
  max-width: var(--max);
  margin: 0 auto;
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 3rem;
  align-items: start;
}
.contact-panel {
  background: var(--komba-pink-dark);
  color: #fff;
  padding: 2rem;
  border-left: 12px solid var(--komba-orange);
}
.contact-panel h3 { color: #fff; }
.contact-panel a { color: #fff; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { margin: .75rem 0; }

.legal {
  max-width: 900px;
}
.legal h1 {
  font-size: clamp(2.35rem, 5vw, 3.8rem);
  padding-bottom: .65rem;
  border-bottom: 8px solid var(--komba-orange);
}
.legal h2 {
  margin-top: 2.2rem;
  font-size: 1.35rem;
}
.small { font-size: .9rem; color: var(--muted); }

.site-footer {
  color: #fff;
  background: var(--komba-pink-dark);
  border-top: 8px solid var(--komba-orange);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.site-footer a { color: #fff; }
.footer-area {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem 1.25rem;
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}
.footer-area::before {
  content: "";
  display: block;
  border-top: 1px solid rgba(255, 255, 255, .28);
  margin-bottom: 1rem;
}
.footer-area strong {
  color: #fff;
}

@media (max-width: 860px) {
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  nav ul { flex-wrap: wrap; gap: 1rem; }
  .hero::after {
    top: auto;
    right: -20%;
    bottom: -35%;
    width: 90%;
    height: 60%;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 3.6rem;
  }
  .grid, .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .topbar-inner { justify-content: flex-start; flex-wrap: wrap; }
  .brand { align-items: flex-start; }
  .brand-copy strong { font-size: .88rem; }
  .hero-inner { min-height: auto; }
}


/* Farbwelt nach dem pink-orangen komba-Auftritt */
.site-header {
  border-bottom-color: var(--komba-orange);
}

.wordmark {
  color: var(--komba-pink);
}

.wordmark-dot {
  color: var(--komba-pink);
}

.hero {
  background:
    linear-gradient(rgba(205, 0, 105, .92), rgba(229, 34, 113, .9)),
    linear-gradient(135deg, #c9006c, #ef2b7d 58%, #ff7040);
}

.hero::after {
  background: rgba(255,255,255,.97);
  opacity: 1;
  width: 34%;
  height: 78%;
  top: 11%;
  right: 5%;
  transform: rotate(8deg);
  border-radius: 48% 52% 58% 42% / 45% 46% 54% 55%;
}

.hero::before {
  width: 170%;
  height: 210px;
  left: -25%;
  right: auto;
  bottom: -120px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 190, 170, .75);
}

.contact-card {
  position: relative;
  z-index: 3;
  border-top-color: var(--komba-orange);
}

.button {
  background: var(--komba-turquoise);
  border-color: #fff;
  color: #fff;
}

.button:hover,
.button:focus {
  background: #007d89;
  border-color: #fff;
  color: #fff;
}

.button.secondary {
  background: transparent;
  border-color: #fff;
}

.card {
  border-top-color: var(--komba-orange);
}

.card::before {
  border-top-color: var(--komba-orange);
}

.section-title::before,
.legal h1,
.site-footer {
  border-color: var(--komba-orange);
}

.section-title::before {
  background: var(--komba-pink);
}

.contact-panel,
.site-footer,
.topbar {
  background: var(--komba-pink-dark);
}

.contact-panel {
  border-left-color: var(--komba-orange);
}


/* Eingebundenes Logo */
.brand {
  display: inline-flex;
  align-items: center;
}

.brand img {
  display: block;
  max-width: 100%;
  width: min(470px, 78vw);
  height: auto;
}

@media (max-width: 860px) {
  .brand img {
    width: min(360px, 90vw);
  }
}


/* Mobile Korrektur:
   Die weiße organische Form im Hero-Bereich wird auf kleinen Bildschirmen
   ausgeblendet, damit keine Schrift verdeckt oder unlesbar wird. */
@media (max-width: 860px) {
  .hero::after {
    display: none;
  }

  .hero::before {
    width: 150%;
    height: 150px;
    left: -25%;
    bottom: -95px;
  }

  .hero-inner {
    position: relative;
    z-index: 2;
  }

  .hero h1,
  .hero .lead,
  .hero .kicker {
    position: relative;
    z-index: 3;
  }

  .contact-card {
    position: relative;
    z-index: 4;
  }
}


/* Bereich „Mitglied werden“ */
.membership-section {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.membership-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: var(--komba-pink-light);
  border-left: 12px solid var(--komba-orange);
}

.membership-box h2 {
  margin-bottom: .5rem;
  color: var(--komba-pink-dark);
}

.membership-box p {
  margin: 0;
  max-width: 720px;
}

.membership-button {
  flex: 0 0 auto;
  display: inline-block;
  padding: .9rem 1.2rem;
  background: var(--komba-turquoise);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
  white-space: nowrap;
}

.membership-button:hover,
.membership-button:focus {
  background: #007d89;
  color: #fff;
}

@media (max-width: 720px) {
  .membership-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .membership-button {
    width: 100%;
    text-align: center;
    white-space: normal;
  }
}


/* Die weiße organische Form im Kopfbereich wird vollständig entfernt. */
.hero::after {
  display: none !important;
}

/* Weiterleitungsdialog */
.redirect-dialog {
  width: min(560px, calc(100% - 2rem));
  padding: 0;
  border: 0;
  border-top: 10px solid var(--komba-orange);
  box-shadow: 0 24px 70px rgba(40, 0, 25, .35);
}

.redirect-dialog::backdrop {
  background: rgba(30, 20, 28, .66);
}

.redirect-dialog-inner {
  padding: 1.8rem;
  background: #fff;
}

.redirect-dialog h2 {
  margin-bottom: .8rem;
  color: var(--komba-pink-dark);
}

.redirect-dialog p {
  overflow-wrap: anywhere;
}

.redirect-actions {
  display: flex;
  justify-content: flex-end;
  gap: .8rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.dialog-cancel,
.dialog-continue {
  display: inline-block;
  padding: .78rem 1rem;
  border: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

.dialog-cancel {
  background: #e9ecef;
  color: var(--text);
}

.dialog-continue {
  background: var(--komba-turquoise);
  color: #fff;
}

.dialog-continue:hover,
.dialog-continue:focus {
  background: #007d89;
  color: #fff;
}

@media (max-width: 520px) {
  .redirect-actions {
    flex-direction: column-reverse;
  }

  .dialog-cancel,
  .dialog-continue {
    width: 100%;
    text-align: center;
  }
}


/* Termine */
.termine-section {
  padding-top: 4.25rem;
  padding-bottom: 2rem;
}

.next-event {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2rem;
  align-items: stretch;
  margin-bottom: 3rem;
  background: var(--komba-pink-light);
  overflow: hidden;
}

.next-event::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(180deg, var(--komba-pink-dark) 0%, #c45b8d 35%, var(--komba-turquoise) 65%, var(--komba-pink-dark) 100%);
  background-size: 100% 220%;
  background-position: 0 0;
  animation: next-event-gradient 6s ease-in-out infinite alternate;
  z-index: 2;
  pointer-events: none;
}

.event-date,
.event-content {
  position: relative;
  z-index: 1;
}

@keyframes next-event-gradient {
  0% {
    background-position: 0 0%;
  }
  100% {
    background-position: 0 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .next-event::before {
    animation: none;
  }
}

.event-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 180px;
  padding: 1.3rem;
  background: var(--komba-pink-dark);
  color: #fff;
  text-align: center;
}

.event-day {
  font-size: 4.2rem;
  line-height: .95;
  font-weight: 900;
}

.event-month {
  margin-top: .45rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.event-content {
  align-self: center;
  padding: 1.6rem 2rem 1.6rem 0;
}

.event-content h3 {
  margin: .35rem 0 .65rem;
  font-size: 1.8rem;
  color: var(--komba-pink-dark);
}

.event-content p {
  margin: 0;
}

.event-label {
  display: inline-block;
  padding: .28rem .55rem;
  background: var(--komba-turquoise);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.upcoming-events {
  margin-bottom: 3rem;
}

.upcoming-events h3,
.past-events h3 {
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
}

.upcoming-timeline {
  border-left-color: var(--komba-turquoise);
}

.upcoming-item::before {
  background: var(--komba-turquoise);
  box-shadow: 0 0 0 2px var(--komba-turquoise);
}

.upcoming-item p {
  margin: .35rem 0 0;
  color: var(--muted);
}

.timeline {
  position: relative;
  margin-left: .35rem;
  padding-left: 1.8rem;
  border-left: 4px solid var(--komba-pink);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  padding: 0 0 1.5rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.34rem;
  top: .35rem;
  width: 14px;
  height: 14px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--komba-orange);
  box-shadow: 0 0 0 2px var(--komba-pink);
}

.upcoming-timeline .upcoming-item::before {
  background: var(--komba-turquoise) !important;
  box-shadow: 0 0 0 2px var(--komba-pink) !important;
}

.timeline-item time {
  font-weight: 800;
  color: var(--komba-pink-dark);
}

.timeline-item h4 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text);
}

@media (max-width: 700px) {
  .next-event {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .event-date {
    min-height: auto;
    padding: 1.1rem;
  }

  .event-day {
    font-size: 3rem;
  }

  .event-content {
    padding: 1.4rem;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: .25rem;
  }
}


/* Vorstandsseite */
.board-page {
  max-width: 1100px;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.35rem;
  margin-top: 2.2rem;
}

.board-card {
  position: relative;
  min-height: 190px;
  padding: 1.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 9px solid var(--komba-pink);
  box-shadow: 0 12px 30px rgba(90, 0, 45, .08);
}

.board-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-bottom: 48px solid var(--komba-orange);
  border-left: 48px solid transparent;
}

.board-card h2 {
  margin-top: 1rem;
  margin-bottom: 0;
  padding-right: 2.2rem;
  font-size: 1.55rem;
  color: var(--komba-pink-dark);
}

.board-role {
  display: inline-block;
  color: var(--komba-turquoise);
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.engagement-box {
  position: relative;
  margin-top: 2.4rem;
  padding: 1.7rem 1.8rem 1.65rem 2rem;
  background: var(--light);
  border-left: 9px solid var(--komba-turquoise);
}


.engagement-kicker {
  display: block;
  margin-bottom: .45rem;
  color: var(--komba-pink-dark);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.engagement-box h2 {
  margin: 0 0 .65rem;
  color: var(--komba-pink-dark);
  font-size: 1.55rem;
}

.engagement-box p {
  max-width: 850px;
  margin: 0;
  line-height: 1.7;
}

.auditors {
  margin-top: 3.5rem;
}

.auditor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.35rem;
}

.auditor-card {
  padding: 1.4rem;
  background: var(--light);
  border-left: 10px solid var(--komba-orange);
}

.auditor-card h3 {
  margin: .55rem 0 0;
  font-size: 1.25rem;
  color: var(--komba-pink-dark);
}

@media (max-width: 820px) {
  .board-grid,
  .auditor-grid {
    grid-template-columns: 1fr;
  }

  .board-card {
    min-height: auto;
  }
}


/* Beiträge */
.contribution-teaser {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.contribution-teaser-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: var(--komba-pink-light);
  border-left: 12px solid var(--komba-orange);
}

.contribution-teaser-box h2 {
  margin-bottom: .5rem;
  color: var(--komba-pink-dark);
}

.contribution-teaser-box p {
  margin: 0;
  max-width: 760px;
}

.contributions-page {
  max-width: 1050px;
}

.contribution-status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin: 2rem 0 1rem;
  padding: 1rem 1.2rem;
  background: var(--komba-pink-dark);
  color: #fff;
}

.contribution-status strong {
  font-size: 1.15rem;
}

.contribution-status span {
  font-weight: 800;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(90, 0, 45, .08);
}

.contribution-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.contribution-table th,
.contribution-table td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.contribution-table th {
  background: var(--komba-pink-light);
  color: var(--komba-pink-dark);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.contribution-table th:first-child,
.contribution-table td:first-child {
  width: 145px;
  text-align: center;
  font-weight: 800;
}

.contribution-table th:last-child,
.contribution-table td:last-child {
  width: 150px;
  text-align: right;
  font-weight: 800;
}

.contribution-table tbody tr:nth-child(even) {
  background: #faf7f9;
}

.contribution-table tbody tr:hover {
  background: var(--komba-pink-light);
}

.contribution-notes,
.contribution-contact {
  margin-top: 2.4rem;
  padding: 1.6rem;
  background: var(--light);
  border-left: 10px solid var(--komba-orange);
}

.contribution-notes h2,
.contribution-contact h2 {
  margin-bottom: .8rem;
  font-size: 1.35rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .contribution-teaser-box,
  .contribution-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .contribution-teaser-box .membership-button {
    width: 100%;
    text-align: center;
  }

  .contribution-status {
    gap: .25rem;
  }

  .contribution-table,
  .contribution-table thead,
  .contribution-table tbody,
  .contribution-table th,
  .contribution-table td,
  .contribution-table tr {
    display: block;
  }

  .contribution-table thead {
    position: absolute;
    left: -9999px;
  }

  .contribution-table tr {
    padding: .8rem 0;
    border-bottom: 2px solid var(--line);
  }

  .contribution-table td {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: .8rem;
    width: 100% !important;
    padding: .55rem 1rem;
    border: 0;
    text-align: left !important;
  }

  .contribution-table td::before {
    content: attr(data-label);
    font-weight: 800;
    color: var(--komba-pink-dark);
  }
}


/* Steuerlicher Vorteil der Gewerkschaftsbeiträge */
.tax-benefit {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 1.4rem;
  align-items: start;
  margin: 2rem 0;
  padding: 1.6rem;
  background: linear-gradient(135deg, var(--komba-pink-light), #fff);
  border: 2px solid var(--komba-pink);
  border-left: 12px solid var(--komba-orange);
}

.tax-benefit-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--komba-pink-dark);
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
}

.tax-benefit-label {
  display: inline-block;
  margin-bottom: .4rem;
  padding: .25rem .55rem;
  background: var(--komba-turquoise);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tax-benefit h2 {
  margin-bottom: .7rem;
  font-size: 1.5rem;
  color: var(--komba-pink-dark);
}

.tax-benefit p {
  margin: .4rem 0 0;
}

.tax-benefit-note {
  color: var(--muted);
  font-size: .9rem;
}

@media (max-width: 620px) {
  .tax-benefit {
    grid-template-columns: 1fr;
  }

  .tax-benefit-icon {
    width: 58px;
    height: 58px;
    font-size: 1.55rem;
  }
}


/* Beitragsrechner */
.contribution-calculator {
  margin: 2rem 0;
  padding: 1.8rem;
  background: #fff;
  border: 2px solid var(--komba-pink);
  border-left: 12px solid var(--komba-orange);
  box-shadow: 0 12px 28px rgba(90, 0, 45, .08);
}

.calculator-heading h2 {
  margin: .45rem 0 .65rem;
  color: var(--komba-pink-dark);
}

.calculator-heading p {
  max-width: 820px;
}

.calculator-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.form-field label {
  font-weight: 800;
  color: var(--komba-pink-dark);
}

.form-field select,
.form-field input {
  width: 100%;
  padding: .8rem .9rem;
  border: 2px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.form-field select:focus,
.form-field input:focus {
  outline: 3px solid rgba(0, 153, 168, .25);
  border-color: var(--komba-turquoise);
}

.form-field small {
  color: var(--muted);
}

.iban-input-wrap {
  position: relative;
}

.iban-input-wrap input.is-valid-iban {
  background: #edf8ef;
  border-color: #79b889;
}

.iban-input-wrap input.is-valid-iban:focus {
  outline-color: rgba(35, 134, 54, .2);
  border-color: #4f9b62;
}

.iban-status {
  min-height: 1.2em;
}

.iban-status.is-valid {
  color: #1f6f32;
  font-weight: 700;
}

.iban-status.is-invalid {
  color: #a61b1b;
  font-weight: 700;
}

.iban-status.is-warning {
  color: #795b18;
  font-weight: 700;
}

.calculator-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}

.calculator-button,
.calculator-reset {
  padding: .8rem 1.1rem;
  border: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.calculator-button {
  background: var(--komba-turquoise);
  color: #fff;
}

.calculator-button:hover,
.calculator-button:focus {
  background: #007d89;
}

.calculator-reset {
  background: #e9ecef;
  color: var(--text);
}

.calculator-result {
  margin-top: 1.4rem;
  padding: 1.2rem 1.3rem;
  background: var(--komba-pink-light);
  border-left: 8px solid var(--komba-pink);
}

.calculator-result strong,
.calculator-result span {
  display: block;
}

.result-label {
  margin-bottom: .25rem;
  color: var(--komba-turquoise);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

#result-stage {
  color: var(--komba-pink-dark);
  font-size: 1.35rem;
}

#result-fee {
  margin-top: .25rem;
  font-weight: 800;
}

.calculator-disclaimer {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

@media (max-width: 720px) {
  .calculator-form {
    grid-template-columns: 1fr;
  }

  .calculator-actions {
    grid-column: 1;
    flex-direction: column;
  }

  .calculator-button,
  .calculator-reset {
    width: 100%;
  }
}


.gross-income-note {
  margin: .8rem 0 0;
  padding: .75rem .9rem;
  background: var(--komba-pink-light);
  border-left: 6px solid var(--komba-orange);
  color: var(--komba-pink-dark);
}

/* Dekorative Eckdreiecke entfernt, damit die Karten nicht wie Schaltflächen wirken. */
.card::before,
.board-card::after {
  display: none !important;
}

/* Service */
.service-page {
  max-width: 1080px;
}

.service-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.service-contact-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--komba-turquoise);
  box-shadow: 0 12px 30px rgba(38, 55, 70, .08);
}

.service-contact-card:nth-child(2) {
  border-top-color: var(--komba-pink);
}

.service-card-icon,
.local-data-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 50%;
  background: var(--komba-turquoise);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
}

.service-contact-card:nth-child(2) .service-card-icon {
  background: var(--komba-pink);
}

.service-card-label {
  display: block;
  margin-bottom: .2rem;
  color: var(--komba-pink-dark);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.service-contact-card h2 {
  margin: 0 0 .35rem;
  font-size: 1.2rem;
}

.service-contact-card p {
  margin: 0;
}

.local-data-note {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 2rem 0 2.5rem;
  padding: 1.5rem;
  background: #e9f8f9;
  border-left: 7px solid var(--komba-turquoise);
}

.local-data-note h2 {
  margin: 0 0 .35rem;
  color: var(--komba-pink-dark);
  font-size: 1.25rem;
}

.local-data-note p {
  margin: 0;
}

.change-mail-section {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--komba-pink-light);
  border-top: 7px solid var(--komba-pink-dark);
}

.service-form-heading {
  margin-bottom: 1.5rem;
}

.service-form-heading h2 {
  margin: .15rem 0 .35rem;
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  color: var(--komba-pink-dark);
}

.service-form-heading p {
  margin: 0;
}

.service-form fieldset {
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  border: 1px solid rgba(159, 0, 86, .18);
  background: rgba(255, 255, 255, .75);
}

.service-form legend {
  padding: 0 .55rem;
  color: var(--komba-pink-dark);
  font-weight: 700;
}

.service-form-grid {
  display: grid;
  gap: 1rem;
}

.service-form-grid.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-form-grid .full-width {
  grid-column: 1 / -1;
}

.service-form .form-field label {
  display: block;
  margin-bottom: .35rem;
  color: var(--text);
  font-weight: 700;
}

.service-form input[type="text"],
.service-form select {
  width: 100%;
  min-height: 48px;
  padding: .72rem .8rem;
  border: 1px solid #b8c5ce;
  border-radius: 0;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.service-form input:focus,
.service-form select:focus {
  outline: 3px solid rgba(0, 153, 168, .22);
  border-color: var(--komba-turquoise);
}

.service-form small {
  display: block;
  margin-top: .35rem;
  color: var(--muted);
}

.change-type-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.change-type-card {
  position: relative;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: 1rem;
  border: 2px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.change-type-card:hover {
  transform: translateY(-2px);
  border-color: var(--komba-turquoise);
  box-shadow: 0 8px 20px rgba(38, 55, 70, .08);
}

.change-type-card:has(input:checked) {
  border-color: var(--komba-pink);
  box-shadow: inset 0 0 0 1px var(--komba-pink);
}

.change-type-card input {
  flex: 0 0 auto;
  margin-top: .25rem;
  accent-color: var(--komba-pink);
}

.change-type-card strong,
.change-type-card small {
  display: block;
}

.change-type-card small {
  margin-top: .2rem;
}

.conditional-fields {
  margin: -0.35rem 0 1.5rem;
  padding: 1.25rem;
  background: #fff;
  border-left: 7px solid var(--komba-turquoise);
  box-shadow: 0 10px 25px rgba(38, 55, 70, .06);
}

.conditional-fields[hidden] {
  display: none;
}

.status-reduction-option[hidden] {
  display: none !important;
}

.status-reduction-option {
  grid-column: 1 / -1;
  margin-top: .15rem;
}

.status-reduction-option label {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  background: #f6f8f9;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.status-reduction-option input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--komba-pink);
  flex: 0 0 auto;
}

.conditional-fields h3 {
  margin: 0 0 1rem;
  color: var(--komba-pink-dark);
}

.service-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.service-mail-button,
.service-print-button,
.service-reset-button {
  min-height: 48px;
  padding: .75rem 1.1rem;
  border: 0;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.service-mail-button {
  background: var(--komba-turquoise);
  color: #fff;
}

.service-mail-button:hover,
.service-mail-button:focus {
  background: #007d89;
}

.service-print-button {
  background: var(--komba-pink-dark);
  color: #fff;
}

.service-print-button:hover,
.service-print-button:focus {
  background: #7f0045;
}

.service-reset-button {
  background: #e7ecef;
  color: var(--text);
}

.service-mail-hint {
  margin: .85rem 0 0;
  color: var(--muted);
  font-size: .92rem;
}

@media (max-width: 800px) {
  .service-contact-grid,
  .change-type-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .service-form-grid.two-columns {
    grid-template-columns: 1fr;
  }

  .service-form-grid .full-width {
    grid-column: auto;
  }

  .service-form-actions {
    flex-direction: column;
  }

  .service-mail-button,
  .service-print-button,
  .service-reset-button {
    width: 100%;
  }
}

.optional-label {
  font-weight: 400;
  color: var(--muted);
}


.member-number-label {
  display: flex !important;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.info-button {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 1px solid var(--komba-turquoise);
  border-radius: 50%;
  background: #fff;
  color: var(--komba-turquoise-dark, #006f78);
  font: 800 .82rem/1 sans-serif;
  cursor: pointer;
}

.info-button:hover,
.info-button:focus-visible {
  background: #eaf8f9;
  outline: 2px solid rgba(0, 153, 168, .2);
  outline-offset: 2px;
}

.member-number-wrap {
  position: relative;
}

.info-popover {
  position: absolute;
  z-index: 20;
  left: 0;
  top: calc(100% + .45rem);
  width: min(21rem, calc(100vw - 3rem));
  padding: .75rem .85rem;
  border: 1px solid #b8c5ce;
  background: #fff;
  box-shadow: 0 8px 22px rgba(36, 52, 64, .16);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.45;
}


.member-number-wrap input.is-plausible {
  background: #edf8ef;
  border-color: #79b889;
}

.member-number-wrap input.is-plausible:focus {
  outline-color: rgba(35, 134, 54, .2);
  border-color: #4f9b62;
}

.member-number-wrap input.is-unusual {
  background: #fffaf0;
  border-color: #d7ad58;
}

.member-number-status {
  display: block;
  min-height: 1.3em;
  margin-top: .35rem;
  font-size: .82rem;
  line-height: 1.35;
}

.member-number-status.is-valid {
  color: #1f6f32;
}

.member-number-status.is-warning {
  color: #795b18;
}


/* Dezente Verweise auf die Erlebnisberichte */
.community-link,
.recap-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--komba-turquoise);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.community-link {
  margin-top: .55rem;
  font-weight: 700;
}

.recap-link {
  margin-top: .45rem;
  font-size: .9rem;
  font-weight: 700;
}

.community-link:hover,
.community-link:focus,
.recap-link:hover,
.recap-link:focus {
  color: #007f88;
  border-bottom-color: currentColor;
}

.recaps-page {
  max-width: 980px;
}

.recap-article {
  margin-top: 2.4rem;
  padding: 2rem 2.2rem;
  background: #fff;
  border-top: 8px solid var(--komba-turquoise);
  box-shadow: 0 12px 32px rgba(39, 55, 65, .10);
  scroll-margin-top: 1rem;
}

.recap-header {
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.recap-label {
  display: inline-block;
  margin-bottom: .55rem;
  color: var(--komba-pink-dark);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.recap-header h2 {
  margin: 0 0 .35rem;
  color: var(--komba-pink-dark);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.recap-location {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.recap-article h3 {
  margin: 1.7rem 0 .5rem;
  color: var(--komba-pink-dark);
  font-size: 1.2rem;
}

.recap-article p {
  max-width: 76ch;
}

.recap-figure {
  margin: 1.35rem 0 1.6rem;
}

.recap-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: var(--light);
}

.recap-figure-feature img {
  aspect-ratio: 16 / 9;
}

.recap-figure-full img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.recap-figure figcaption {
  margin-top: .55rem;
  font-size: .94rem;
  color: var(--muted);
}

.recap-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  margin: .25rem 0 1rem;
}

.recap-more {
  margin-top: 2rem;
  padding: 1.5rem 1.7rem;
  background: var(--light);
  border-left: 7px solid var(--komba-turquoise);
}

.recap-more h2 {
  margin-top: 0;
  color: var(--komba-pink-dark);
}

.recap-more .button.secondary {
  background: var(--komba-turquoise);
  border-color: var(--komba-turquoise);
  color: #fff;
}

.recap-more .button.secondary:hover,
.recap-more .button.secondary:focus {
  background: #007f88;
  border-color: #007f88;
  color: #fff;
}

@media (max-width: 700px) {
  .recap-article {
    padding: 1.45rem 1.25rem;
  }

  .recap-gallery {
    grid-template-columns: 1fr;
  }

  .recap-figure-feature img,
  .recap-figure img {
    aspect-ratio: 4 / 5;
  }

  .recap-figure-full img {
    aspect-ratio: auto;
    height: auto;
  }
}


.self-highlight {
  color: var(--komba-pink-dark);
  font-weight: 600;
}


.lightbox-image {
  cursor: zoom-in;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, .88);
}

.image-lightbox.is-open {
  display: flex;
}

.image-lightbox img {
  max-width: min(96vw, 1500px);
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-out;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.image-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  width: 3rem;
  height: 3rem;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
}

body.lightbox-open {
  overflow: hidden;
}


/* Sprungübersicht auf der Erlebnisseite */
.recap-jump {
  margin: 1.7rem 0 2.2rem;
}

.recap-jump-label {
  display: block;
  margin-bottom: .65rem;
  color: var(--komba-pink-dark);
  font-size: 1rem;
  font-weight: 800;
}

.recap-jump-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.recap-jump-links a {
  position: relative;
  display: block;
  padding: .95rem 2rem .9rem 0;
  color: var(--komba-pink-dark);
  text-decoration: none;
}

.recap-jump-links a + a {
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
}

.recap-jump-links a::after {
  content: "↓";
  position: absolute;
  right: .45rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--komba-turquoise);
  font-size: 1.1rem;
  font-weight: 800;
}

.recap-jump-links span,
.recap-jump-links small {
  display: block;
}

.recap-jump-links span {
  font-weight: 800;
  line-height: 1.25;
}

.recap-jump-links small {
  margin-top: .2rem;
  color: #5c6f79;
  font-size: .82rem;
}

.recap-jump-links a:hover,
.recap-jump-links a:focus,
.recap-back a:hover,
.recap-back a:focus {
  color: #007d89;
}

.recap-jump-links a:hover::after,
.recap-jump-links a:focus::after {
  transform: translateY(-35%);
}

.recap-back a {
  color: var(--komba-pink-dark);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

.recap-back {
  margin-top: 1.4rem;
  text-align: right;
  font-size: .95rem;
}

@media (max-width: 760px) {
  .recap-jump-links {
    grid-template-columns: 1fr;
  }

  .recap-jump-links a,
  .recap-jump-links a + a {
    padding: .8rem 2rem .8rem 0;
    border-left: 0;
  }

  .recap-jump-links a + a {
    border-top: 1px solid var(--line);
  }

  .recap-back {
    text-align: left;
  }
}

}


/* Exakte Sprungziele der Erlebnisübersicht */
.recap-header h2[id] {
  scroll-margin-top: 1.25rem;
}


/* Der letzte Bericht benötigt beim Anspringen zusätzlichen Scrollraum. */
#streik-hannover-2025 {
  scroll-margin-top: 1.25rem;
}

.recaps-page:has(#streik-hannover-2025:target)::after {
  content: "";
  display: block;
  height: 32vh;
  min-height: 220px;
}


/* Feinschliff Navigation */
.topbar {
  display: none;
}

.header-inner {
  min-height: 104px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

nav ul {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem .55rem;
}

nav a {
  display: inline-block;
  padding: .48rem .8rem;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  transition: background-color .18s ease, color .18s ease;
}

nav a:hover,
nav a:focus {
  color: var(--komba-pink-dark);
  background: var(--komba-pink-light);
}

nav a[aria-current="page"] {
  color: var(--komba-pink-dark);
  background: var(--komba-pink-light);
}

@media (max-width: 860px) {
  .header-inner {
    min-height: auto;
  }

  nav ul {
    justify-content: flex-start;
    gap: .45rem .5rem;
  }

  nav a {
    padding: .42rem .72rem;
    font-size: .9rem;
  }
}


/* Überarbeitung der Sprungübersicht auf der Erlebnisseite */
.recap-jump {
  margin: 1.7rem 0 2.2rem;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--light);
  border-left: 7px solid var(--komba-turquoise);
}

.recap-jump-label {
  margin-bottom: .9rem;
  font-size: 1.02rem;
}

.recap-jump-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  border: 0;
}

.recap-jump-links a,
.recap-jump-links a + a {
  padding: .8rem .95rem .78rem 1rem;
  border: 1px solid var(--line);
  border-left: 5px solid var(--komba-pink);
  background: #fff;
}

.recap-jump-links a::after {
  content: "→";
  right: .85rem;
  top: .85rem;
  transform: none;
  font-size: 1rem;
}

.recap-jump-links span {
  padding-right: 1.5rem;
}

.recap-jump-links small {
  margin-top: .28rem;
}

.recap-jump-links a:hover,
.recap-jump-links a:focus {
  color: var(--komba-pink-dark);
  border-color: #c9d6dc;
  background: #fff9fc;
}

.recap-jump-links a:hover::after,
.recap-jump-links a:focus::after {
  transform: translateX(2px);
}

@media (max-width: 760px) {
  .recap-jump {
    padding: 1rem 1rem 1.05rem;
  }

  .recap-jump-links {
    grid-template-columns: 1fr;
  }

  .recap-jump-links a,
  .recap-jump-links a + a {
    padding: .78rem .95rem .76rem 1rem;
    border-top: 1px solid var(--line);
  }
}


/* Hauptnavigation: ursprüngliches türkisfarbenes Hover-Verhalten wiederherstellen */
.site-header nav a:hover,
.site-header nav a:focus {
  color: var(--komba-turquoise);
  background: transparent;
}

.site-header nav a[aria-current="page"] {
  color: var(--komba-pink-dark);
  background: transparent;
}


/* Hero-Bereich auf der Erlebnisse-Seite */
.recaps-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, var(--komba-pink-dark), var(--komba-pink));
  color: #fff;
}

.recaps-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 14% 18%, rgba(255,255,255,.08), transparent 34%);
  pointer-events: none;
}

.recaps-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  min-height: 430px;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: stretch;
  gap: 0;
}

.recaps-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.3rem 2.1rem 3.3rem 0;
}

.recaps-hero .kicker,
.recaps-hero h1,
.recaps-hero .lead {
  color: #fff;
}

.recaps-hero h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 6vw, 4.65rem);
  letter-spacing: -.035em;
}

.recaps-hero .lead {
  max-width: 620px;
  margin: 0;
  font-size: 1.16rem;
  color: rgba(255,255,255,.94);
}

.recaps-hero .button-row {
  margin-top: 1.75rem;
}

.recaps-hero-media {
  position: relative;
  min-height: 430px;
  overflow: hidden;
}

.recaps-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(212, 0, 111, .94) 0%, rgba(212, 0, 111, .72) 10%, rgba(212, 0, 111, .35) 22%, rgba(212, 0, 111, 0) 38%);
  pointer-events: none;
}

.recaps-hero-slides {
  position: absolute;
  inset: 0;
}

.recaps-hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .6s ease;
}

.recaps-hero-slide.is-active {
  opacity: 1;
}

.recaps-hero-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.recaps-hero-slide figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 3;
  padding: .35rem .65rem;
  background: rgba(255,255,255,.92);
  color: var(--komba-pink-dark);
  font-size: .88rem;
  font-weight: 800;
  border-radius: 999px;
}

.recaps-hero-controls {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .9rem;
}

.recaps-hero-dots {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.recaps-hero-dot {
  width: .86rem;
  height: .86rem;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  cursor: pointer;
}

.recaps-hero-dot.is-active {
  background: var(--komba-pink);
  box-shadow: 0 0 0 2px rgba(255,255,255,.88);
}

.recaps-hero-arrows {
  display: flex;
  gap: .45rem;
}

.recaps-hero-arrow {
  width: 2.9rem;
  height: 2.9rem;
  border: 0;
  background: rgba(255,255,255,.94);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.recaps-hero-arrow:hover,
.recaps-hero-arrow:focus,
.recaps-hero-dot:hover,
.recaps-hero-dot:focus {
  outline: none;
  filter: brightness(.96);
}

@media (max-width: 960px) {
  .recaps-hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .recaps-hero-copy {
    padding: 3rem 0 1.35rem;
  }

  .recaps-hero-media {
    min-height: 320px;
    margin: 0 -1.25rem;
  }

  .recaps-hero-media::before {
    background: linear-gradient(180deg, rgba(212, 0, 111, .45) 0%, rgba(212, 0, 111, 0) 28%);
  }
}

@media (max-width: 640px) {
  .recaps-hero-copy {
    padding: 2.35rem 0 1.1rem;
  }

  .recaps-hero .lead {
    font-size: 1.02rem;
  }

  .recaps-hero-media {
    min-height: 250px;
  }

  .recaps-hero-controls {
    left: 1rem;
    right: 1rem;
    justify-content: space-between;
    gap: .65rem;
  }

  .recaps-hero-slide figcaption {
    left: .75rem;
    bottom: .75rem;
    font-size: .82rem;
  }

  .recaps-hero-arrow {
    width: 2.55rem;
    height: 2.55rem;
  }
}


/* Erlebnisse-Hero: über die gesamte Bildschirmbreite und farbgleich zur Startseite */
.recaps-hero {
  width: 100%;
  background:
    linear-gradient(rgba(205, 0, 105, .92), rgba(229, 34, 113, .9)),
    linear-gradient(135deg, #c9006c, #ef2b7d 58%, #ff7040);
}

.recaps-hero-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  grid-template-columns: minmax(0, 52%) minmax(0, 48%);
}

.recaps-hero-copy {
  padding-left: max(1.25rem, calc((100vw - var(--max)) / 2 + 1.25rem));
  padding-right: 3.25rem;
}

.recaps-hero-media {
  min-width: 0;
  isolation: isolate;
}

/* Vollständiger Übergang auf beiden Bildseiten */
.recaps-hero-media::before {
  inset: 0 auto 0 0;
  width: 42%;
  z-index: 3;
  background: linear-gradient(
    90deg,
    rgba(222, 21, 111, 1) 0%,
    rgba(222, 21, 111, .96) 15%,
    rgba(222, 21, 111, .72) 38%,
    rgba(222, 21, 111, .30) 68%,
    rgba(222, 21, 111, 0) 100%
  );
}

.recaps-hero-media::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 18%;
  z-index: 3;
  background: linear-gradient(
    90deg,
    rgba(222, 21, 111, 0) 0%,
    rgba(222, 21, 111, .22) 42%,
    rgba(222, 21, 111, .70) 76%,
    rgba(222, 21, 111, .96) 100%
  );
  pointer-events: none;
}

.recaps-hero-slide img {
  transform: scale(1.015);
}

.recaps-hero-controls {
  right: max(1rem, calc((100vw - var(--max)) / 2 + 1rem));
}

@media (max-width: 1180px) {
  .recaps-hero-copy {
    padding-left: 1.25rem;
  }

  .recaps-hero-controls {
    right: 1rem;
  }
}

@media (max-width: 960px) {
  .recaps-hero-inner {
    grid-template-columns: 1fr;
  }

  .recaps-hero-copy {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .recaps-hero-media {
    margin: 0;
    width: 100%;
  }

  .recaps-hero-media::before {
    inset: 0;
    width: 100%;
    background: linear-gradient(
      180deg,
      rgba(222, 21, 111, .82) 0%,
      rgba(222, 21, 111, .32) 20%,
      rgba(222, 21, 111, 0) 42%,
      rgba(222, 21, 111, 0) 75%,
      rgba(222, 21, 111, .52) 100%
    );
  }

  .recaps-hero-media::after {
    display: none;
  }
}


/* Reparatur Vollbreiten-Hero: globale section-Begrenzung vollständig aufheben */
main > .recaps-hero {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

main > .recaps-hero .recaps-hero-inner {
  width: 100%;
  max-width: none;
  min-height: 430px;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 52% 48%;
  overflow: hidden;
}

main > .recaps-hero .recaps-hero-copy {
  position: relative;
  z-index: 5;
  min-width: 0;
  padding: 3.25rem 3.75rem 3.25rem max(1.25rem, calc((100vw - var(--max)) / 2 + 1.25rem));
}

main > .recaps-hero .recaps-hero-copy h1,
main > .recaps-hero .recaps-hero-copy .lead {
  max-width: 620px;
}

main > .recaps-hero .recaps-hero-copy h1 {
  white-space: normal;
  overflow-wrap: normal;
}

main > .recaps-hero .recaps-hero-media {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  min-height: 430px;
  margin: 0;
  overflow: hidden;
}

/* Weicher Pinkübergang an beiden Seiten des Fotos */
main > .recaps-hero .recaps-hero-media::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  z-index: 3;
  background: linear-gradient(
    90deg,
    rgba(220, 18, 111, 1) 0%,
    rgba(220, 18, 111, .92) 18%,
    rgba(220, 18, 111, .58) 48%,
    rgba(220, 18, 111, .18) 78%,
    rgba(220, 18, 111, 0) 100%
  );
  pointer-events: none;
}

main > .recaps-hero .recaps-hero-media::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 16%;
  z-index: 3;
  background: linear-gradient(
    90deg,
    rgba(220, 18, 111, 0) 0%,
    rgba(220, 18, 111, .18) 38%,
    rgba(220, 18, 111, .68) 76%,
    rgba(220, 18, 111, 1) 100%
  );
  pointer-events: none;
}

main > .recaps-hero .recaps-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.025);
}

main > .recaps-hero .recaps-hero-controls {
  right: max(1rem, calc((100vw - var(--max)) / 2 + 1rem));
  bottom: 1rem;
}

@media (max-width: 1180px) {
  main > .recaps-hero .recaps-hero-copy {
    padding-left: 1.25rem;
    padding-right: 2.25rem;
  }

  main > .recaps-hero .recaps-hero-controls {
    right: 1rem;
  }
}

@media (max-width: 960px) {
  main > .recaps-hero .recaps-hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  main > .recaps-hero .recaps-hero-copy {
    padding: 2.8rem 1.25rem 1.35rem;
  }

  main > .recaps-hero .recaps-hero-media {
    min-height: 320px;
  }

  main > .recaps-hero .recaps-hero-media::before {
    inset: 0;
    width: 100%;
    background: linear-gradient(
      180deg,
      rgba(220, 18, 111, .70) 0%,
      rgba(220, 18, 111, .18) 25%,
      rgba(220, 18, 111, 0) 48%,
      rgba(220, 18, 111, .12) 75%,
      rgba(220, 18, 111, .72) 100%
    );
  }

  main > .recaps-hero .recaps-hero-media::after {
    display: none;
  }
}

@media (max-width: 640px) {
  main > .recaps-hero .recaps-hero-copy {
    padding-top: 2.25rem;
  }

  main > .recaps-hero .recaps-hero-media {
    min-height: 250px;
  }
}


/* Feinkorrektur Hero: Fotokanten unsichtbar, linker Verlauf kürzer */
main > .recaps-hero .recaps-hero-media::before {
  width: 29%;
  background: linear-gradient(
    90deg,
    rgba(220, 18, 111, 1) 0%,
    rgba(220, 18, 111, .95) 16%,
    rgba(220, 18, 111, .56) 48%,
    rgba(220, 18, 111, .14) 76%,
    rgba(220, 18, 111, 0) 100%
  );
}

main > .recaps-hero .recaps-hero-media::after {
  width: 22%;
  background: linear-gradient(
    90deg,
    rgba(220, 18, 111, 0) 0%,
    rgba(220, 18, 111, .24) 26%,
    rgba(220, 18, 111, .74) 62%,
    rgba(220, 18, 111, .98) 88%,
    rgba(220, 18, 111, 1) 100%
  );
}

main > .recaps-hero .recaps-hero-slide img {
  transform: scale(1.045);
}

@media (max-width: 960px) {
  main > .recaps-hero .recaps-hero-media::before {
    background: linear-gradient(
      180deg,
      rgba(220, 18, 111, .72) 0%,
      rgba(220, 18, 111, .20) 22%,
      rgba(220, 18, 111, 0) 42%,
      rgba(220, 18, 111, .08) 74%,
      rgba(220, 18, 111, .76) 100%
    );
  }
}


/* Nachschärfung: linke Kante verdecken, Weihnachtsmarktfoto schöner ausrichten */
main > .recaps-hero .recaps-hero-media {
  margin-left: -4px;
  width: calc(100% + 4px);
  background: rgb(220, 18, 111);
}

main > .recaps-hero .recaps-hero-slides {
  inset: 0 0 0 -4px;
}

main > .recaps-hero .recaps-hero-media::before {
  width: 31%;
  background: linear-gradient(
    90deg,
    rgba(220, 18, 111, 1) 0%,
    rgba(220, 18, 111, 1) 18%,
    rgba(220, 18, 111, .72) 46%,
    rgba(220, 18, 111, .22) 76%,
    rgba(220, 18, 111, 0) 100%
  );
}

main > .recaps-hero .recaps-hero-slide img {
  transform: scale(1.05);
}

/* 2. Slide = Weihnachtsmarkt: Köpfe nicht abschneiden */
main > .recaps-hero .recaps-hero-slide:nth-child(2) img {
  object-position: center top;
  transform: scale(1.01);
}

@media (max-width: 960px) {
  main > .recaps-hero .recaps-hero-media {
    margin-left: 0;
    width: 100%;
  }

  main > .recaps-hero .recaps-hero-slides {
    inset: 0;
  }

  main > .recaps-hero .recaps-hero-media::before {
    width: 100%;
  }

  main > .recaps-hero .recaps-hero-slide:nth-child(2) img {
    object-position: center 12%;
    transform: scale(1.0);
  }
}


/* Hero weiter verfeinern: Startkante unsichtbar, Slides klickbar */
main > .recaps-hero .recaps-hero-media {
  margin-left: -22px;
  width: calc(100% + 22px);
  background: rgb(220, 18, 111);
}

main > .recaps-hero .recaps-hero-slides {
  inset: 0 0 0 -22px;
}

main > .recaps-hero .recaps-hero-media::before {
  width: 36%;
  background: linear-gradient(
    90deg,
    rgba(220, 18, 111, 1) 0%,
    rgba(220, 18, 111, 1) 24%,
    rgba(220, 18, 111, .86) 46%,
    rgba(220, 18, 111, .36) 74%,
    rgba(220, 18, 111, 0) 100%
  );
}

main > .recaps-hero .recaps-hero-media::after {
  width: 22%;
}

main > .recaps-hero .recaps-hero-slide {
  cursor: pointer;
}

main > .recaps-hero .recaps-hero-slide:focus-visible {
  outline: 3px solid rgba(255,255,255,.9);
  outline-offset: -3px;
}

main > .recaps-hero .recaps-hero-slide figcaption {
  pointer-events: none;
}

/* Weihnachtsmarkt-Slide: Gruppenköpfe schöner im Ausschnitt */
main > .recaps-hero .recaps-hero-slide:nth-child(2) img {
  object-position: center 8%;
  transform: scale(1.0);
}

@media (max-width: 960px) {
  main > .recaps-hero .recaps-hero-media {
    margin-left: 0;
    width: 100%;
  }

  main > .recaps-hero .recaps-hero-slides {
    inset: 0;
  }

  main > .recaps-hero .recaps-hero-media::before {
    width: 100%;
  }

  main > .recaps-hero .recaps-hero-slide:nth-child(2) img {
    object-position: center 10%;
    transform: scale(1.0);
  }
}


/* Korrektur: gleiche Pinkfarbe am Fotobeginn, Übergang kürzer und weicher */
main > .recaps-hero .recaps-hero-media {
  margin-left: 0;
  width: 100%;
  background: rgb(220, 18, 111);
}

main > .recaps-hero .recaps-hero-slides {
  inset: 0;
}

main > .recaps-hero .recaps-hero-media::before {
  width: 23%;
  background: linear-gradient(
    90deg,
    rgb(220, 18, 111) 0%,
    rgb(220, 18, 111) 12%,
    rgba(220, 18, 111, .88) 34%,
    rgba(220, 18, 111, .36) 68%,
    rgba(220, 18, 111, 0) 100%
  );
}

main > .recaps-hero .recaps-hero-media::after {
  width: 20%;
}

main > .recaps-hero .recaps-hero-slide img {
  transform: scale(1.035);
}

main > .recaps-hero .recaps-hero-slide:nth-child(2) img {
  object-position: center 8%;
  transform: scale(1.0);
}

@media (max-width: 960px) {
  main > .recaps-hero .recaps-hero-media::before {
    width: 100%;
  }
}


/* Kantenkorrektur: Übergang am Fotobeginn vollständig überdecken */
main > .recaps-hero {
  position: relative;
  isolation: isolate;
}

/* Diese Blende liegt über der tatsächlichen Startkante des Fotos und nimmt exakt die Bandfarbe auf. */
main > .recaps-hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(52% - 5rem);
  width: 11rem;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(220, 18, 111) 0%,
    rgb(220, 18, 111) 18%,
    rgba(220, 18, 111, .94) 38%,
    rgba(220, 18, 111, .58) 68%,
    rgba(220, 18, 111, 0) 100%
  );
}

main > .recaps-hero .recaps-hero-copy,
main > .recaps-hero .recaps-hero-controls {
  position: relative;
  z-index: 5;
}

main > .recaps-hero .recaps-hero-media {
  z-index: 1;
  background: transparent;
}

main > .recaps-hero .recaps-hero-media::before {
  width: 18%;
  background: linear-gradient(
    90deg,
    rgba(220, 18, 111, .96) 0%,
    rgba(220, 18, 111, .72) 34%,
    rgba(220, 18, 111, .28) 72%,
    rgba(220, 18, 111, 0) 100%
  );
}

main > .recaps-hero .recaps-hero-slide img {
  transform: scale(1.04);
}

main > .recaps-hero .recaps-hero-slide:nth-child(2) img {
  object-position: center 8%;
  transform: scale(1.0);
}

@media (max-width: 1180px) {
  main > .recaps-hero::after {
    left: calc(52% - 4.25rem);
    width: 9rem;
  }
}

@media (max-width: 960px) {
  main > .recaps-hero::after {
    display: none;
  }

  main > .recaps-hero .recaps-hero-media::before {
    width: 100%;
  }
}


/* Neue Technik gegen die sichtbare Fotokante: Maskierung statt überlagerter Pink-Blenden */
main > .recaps-hero::after {
  display: none !important;
}

main > .recaps-hero .recaps-hero-media {
  margin-left: 0 !important;
  width: 100% !important;
  min-width: 0;
  background: transparent !important;
  overflow: hidden;
  isolation: isolate;
}

main > .recaps-hero .recaps-hero-slides {
  inset: 0 !important;
}

main > .recaps-hero .recaps-hero-media::before,
main > .recaps-hero .recaps-hero-media::after {
  display: none !important;
}

main > .recaps-hero .recaps-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.035);
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Weihnachtsmarkt-Slide: Köpfe günstiger im Ausschnitt */
main > .recaps-hero .recaps-hero-slide:nth-child(2) img {
  object-position: center 8%;
  transform: scale(1.0);
}

@media (max-width: 960px) {
  main > .recaps-hero .recaps-hero-slide img {
    -webkit-mask-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 14%,
      rgba(0, 0, 0, 1) 84%,
      rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 14%,
      rgba(0, 0, 0, 1) 84%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  main > .recaps-hero .recaps-hero-slide:nth-child(2) img {
    object-position: center 10%;
  }
}


/* Slider-Feinschliff: Weihnachtsmarktbild entfernt, verbleibende Motive einzeln ausgerichtet */
main > .recaps-hero .recaps-hero-slide:nth-child(1) img {
  object-position: center center;
  transform: scale(1.035);
}

main > .recaps-hero .recaps-hero-slide:nth-child(2) img {
  object-position: center 42%;
  transform: scale(1.06);
}

main > .recaps-hero .recaps-hero-slide:nth-child(3) img {
  object-position: center 34%;
  transform: scale(1.045);
}

@media (max-width: 960px) {
  main > .recaps-hero .recaps-hero-slide:nth-child(1) img {
    object-position: center center;
  }

  main > .recaps-hero .recaps-hero-slide:nth-child(2) img {
    object-position: center 42%;
    transform: scale(1.04);
  }

  main > .recaps-hero .recaps-hero-slide:nth-child(3) img {
    object-position: center 30%;
    transform: scale(1.03);
  }
}


/* Erlebnisse-Hero ohne Bilder: vollbreiter pinker Balken */
main > .recaps-hero {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background:
    linear-gradient(rgba(205, 0, 105, .92), rgba(229, 34, 113, .9)),
    linear-gradient(135deg, #c9006c, #ef2b7d 58%, #ff7040);
}

main > .recaps-hero::after {
  display: none !important;
}

main > .recaps-hero .recaps-hero-inner {
  display: block;
  width: 100%;
  max-width: var(--max);
  min-height: 360px;
  margin: 0 auto;
  padding: 0 1.25rem;
  overflow: visible;
}

main > .recaps-hero .recaps-hero-copy {
  max-width: 760px;
  min-height: 360px;
  padding: 3.2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 640px) {
  main > .recaps-hero .recaps-hero-inner,
  main > .recaps-hero .recaps-hero-copy {
    min-height: auto;
  }

  main > .recaps-hero .recaps-hero-copy {
    padding: 2.5rem 0;
  }
}


/* Mobile Feinschliff für die Berichtnavigation */
@media (max-width: 760px) {
  .recap-jump {
    margin: 1.35rem 0 1.8rem;
    padding: .85rem .85rem .9rem;
    border-left-width: 5px;
  }

  .recap-jump-label {
    margin-bottom: .75rem;
    font-size: .98rem;
  }

  .recap-jump-links {
    display: flex;
    flex-direction: column;
    gap: .55rem;
  }

  .recap-jump-links a,
  .recap-jump-links a + a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .15rem .6rem;
    padding: .78rem .85rem .72rem .9rem;
    border: 1px solid #d6e0e5;
    border-left: 4px solid var(--komba-pink);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
  }

  .recap-jump-links a::after {
    position: static;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    margin-left: .2rem;
    font-size: 1rem;
  }

  .recap-jump-links span {
    padding-right: 0;
    font-size: 1rem;
    line-height: 1.22;
  }

  .recap-jump-links small {
    margin-top: 0;
    font-size: .84rem;
    line-height: 1.2;
  }
}

@media (max-width: 420px) {
  .recap-jump {
    padding: .78rem .72rem .82rem;
  }

  .recap-jump-links a,
  .recap-jump-links a + a {
    padding: .72rem .78rem .68rem .82rem;
  }

  .recap-jump-links span {
    font-size: .96rem;
  }
}


/* Erlebnisse wieder im Stil der übrigen Unterseiten */
.recaps-hero {
  display: none !important;
}

.recap-jump-simple {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  margin: 1.5rem 0 2.1rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.recap-jump-simple strong {
  color: var(--komba-pink-dark);
}

.recap-jump-simple a {
  color: var(--komba-turquoise);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.recap-jump-simple a::after {
  content: "↓";
  margin-left: .28rem;
  font-size: .9em;
}

.recap-jump-simple a:hover,
.recap-jump-simple a:focus {
  color: var(--komba-pink-dark);
  border-bottom-color: currentColor;
}

@media (max-width: 700px) {
  .recap-jump-simple {
    display: block;
    padding: .8rem 0;
  }

  .recap-jump-simple strong {
    display: block;
    margin-bottom: .45rem;
  }

  .recap-jump-simple a {
    display: block;
    padding: .42rem 0;
    border-bottom: 1px solid var(--line);
  }

  .recap-jump-simple a:last-child {
    border-bottom: 0;
  }
}

/* Aufklappbare Langfassungen der Erlebnisberichte */
.recap-details {
  margin-top: .35rem;
  border-top: 1px solid var(--line);
}

.recap-details summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  width: fit-content;
  margin: 1rem auto .15rem;
  padding: .72rem 1.15rem;
  color: #fff;
  background: var(--komba-turquoise);
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.recap-details summary::-webkit-details-marker {
  display: none;
}

.recap-details summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 700;
}

.recap-details[open] summary::after {
  content: "−";
}

.recap-details[open] .recap-details-label {
  font-size: 0;
}

.recap-details[open] .recap-details-label::after {
  content: "Weniger anzeigen";
  font-size: .95rem;
}

.recap-details summary:hover,
.recap-details summary:focus-visible {
  background: #007f88;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(0, 127, 136, .22);
}

.recap-details summary:focus-visible {
  outline: 3px solid rgba(0, 154, 166, .28);
  outline-offset: 3px;
}

.recap-details-body {
  padding-top: .35rem;
}

@media (prefers-reduced-motion: reduce) {
  .recap-details summary {
    transition: none;
  }
}

/* Schmaler komba-pinker Streifen am oberen Seitenrand */
.topbar {
  display: block;
  height: 8px;
  min-height: 8px;
  background: var(--komba-pink);
  overflow: hidden;
}

.topbar-inner {
  height: 8px;
  min-height: 8px;
  padding: 0;
}


/* Hinweisbox für Impressum und Datenschutz */
.page-notice {
  margin: 1.35rem 0 1.9rem;
  padding: 1rem 1.15rem;
  background: rgba(0, 153, 168, .12);
  border-left: 10px solid var(--komba-turquoise);
  border-radius: 6px;
}

.page-notice strong {
  display: block;
  margin-bottom: .22rem;
  color: var(--komba-turquoise);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .9rem;
}

.page-notice p {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}

/* Startseite: gleich große quadratische Kacheln mit Farbverlauf und SVG-Wellenabschluss */
.hero {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  padding-bottom: 2.4rem;
  background-color: #d4006f;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 40%, rgba(255,104,55,.28) 100%),
    radial-gradient(circle at 8% 100%, rgba(255,112,47,.70) 0%, rgba(255,112,47,.28) 23%, rgba(255,112,47,0) 48%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Crect x='0' y='0' width='32' height='32' fill='%23ffffff' fill-opacity='.11'/%3E%3Crect x='32' y='0' width='32' height='32' fill='%23f45b96' fill-opacity='.12'/%3E%3Crect x='64' y='0' width='32' height='32' fill='%23c70064' fill-opacity='.12'/%3E%3Crect x='96' y='0' width='32' height='32' fill='%23ff8eb5' fill-opacity='.10'/%3E%3Crect x='0' y='32' width='32' height='32' fill='%23ca0065' fill-opacity='.12'/%3E%3Crect x='32' y='32' width='32' height='32' fill='%23ffffff' fill-opacity='.08'/%3E%3Crect x='64' y='32' width='32' height='32' fill='%23f36d9d' fill-opacity='.11'/%3E%3Crect x='96' y='32' width='32' height='32' fill='%23bc005c' fill-opacity='.11'/%3E%3Crect x='0' y='64' width='32' height='32' fill='%23ff7aa7' fill-opacity='.10'/%3E%3Crect x='32' y='64' width='32' height='32' fill='%23c30061' fill-opacity='.12'/%3E%3Crect x='64' y='64' width='32' height='32' fill='%23ffffff' fill-opacity='.09'/%3E%3Crect x='96' y='64' width='32' height='32' fill='%23f05690' fill-opacity='.11'/%3E%3Crect x='0' y='96' width='32' height='32' fill='%23bd005d' fill-opacity='.10'/%3E%3Crect x='32' y='96' width='32' height='32' fill='%23ff8fb3' fill-opacity='.10'/%3E%3Crect x='64' y='96' width='32' height='32' fill='%23cf0068' fill-opacity='.11'/%3E%3Crect x='96' y='96' width='32' height='32' fill='%23ffffff' fill-opacity='.08'/%3E%3C/svg%3E"),
    linear-gradient(100deg, #d2196b 0%, #e31d72 43%, #f01d75 73%, #ff1f6b 100%);
  background-size:
    100% 100%,
    100% 100%,
    128px 128px,
    100% 100%;
  background-position:
    center,
    left bottom,
    0 0,
    center;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat,
    no-repeat;
}

.hero::before,
.hero::after {
  display: none !important;
  content: none !important;
}

.hero-inner {
  position: relative;
  z-index: 2;
  min-height: 410px;
  padding-top: 3.35rem;
  padding-bottom: 3.15rem;
}

.hero-wave {
  position: absolute;
  left: -2px;
  right: auto;
  width: calc(100% + 4px);
  bottom: -1px;
  height: 8.5rem;
  z-index: 1;
  pointer-events: none;
}

.hero-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-wave-soft {
  fill: rgba(255, 190, 195, .58);
}

.hero-wave-white {
  fill: #fff;
}

.hero-wave-mobile {
  display: none;
}

@media (max-width: 860px) {
  .hero {
    padding-bottom: 4rem;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%, rgba(255,104,55,.30) 100%),
      radial-gradient(circle at 8% 100%, rgba(255,112,47,.74) 0%, rgba(255,112,47,.30) 23%, rgba(255,112,47,0) 50%),
      linear-gradient(120deg, #d2196b 0%, #e31d72 46%, #f01d75 72%, #ff4f55 100%);
    background-size:
      100% 100%,
      100% 100%,
      100% 100%;
    background-position:
      center,
      left bottom,
      center;
    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat;
  }

  .hero-inner {
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 2.7rem;
  }

  .hero-wave {
    height: 5.7rem;
  }

  .hero-wave-desktop {
    display: none;
  }

  .hero-wave-mobile {
    display: block;
  }
}


/* Erlebnisseite – Variante 3: Hero plus große wechselnde Bildbühne */
.recaps-hero.recaps-hero-active {
  display: block !important;
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: #d4006f;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%, rgba(255,104,55,.24) 100%),
    radial-gradient(circle at 8% 100%, rgba(255,112,47,.72) 0%, rgba(255,112,47,.26) 22%, rgba(255,112,47,0) 48%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Crect x='0' y='0' width='32' height='32' fill='%23ffffff' fill-opacity='.11'/%3E%3Crect x='32' y='0' width='32' height='32' fill='%23f45b96' fill-opacity='.12'/%3E%3Crect x='64' y='0' width='32' height='32' fill='%23c70064' fill-opacity='.12'/%3E%3Crect x='96' y='0' width='32' height='32' fill='%23ff8eb5' fill-opacity='.10'/%3E%3Crect x='0' y='32' width='32' height='32' fill='%23ca0065' fill-opacity='.12'/%3E%3Crect x='32' y='32' width='32' height='32' fill='%23ffffff' fill-opacity='.08'/%3E%3Crect x='64' y='32' width='32' height='32' fill='%23f36d9d' fill-opacity='.11'/%3E%3Crect x='96' y='32' width='32' height='32' fill='%23bc005c' fill-opacity='.11'/%3E%3Crect x='0' y='64' width='32' height='32' fill='%23ff7aa7' fill-opacity='.10'/%3E%3Crect x='32' y='64' width='32' height='32' fill='%23c30061' fill-opacity='.12'/%3E%3Crect x='64' y='64' width='32' height='32' fill='%23ffffff' fill-opacity='.09'/%3E%3Crect x='96' y='64' width='32' height='32' fill='%23f05690' fill-opacity='.11'/%3E%3Crect x='0' y='96' width='32' height='32' fill='%23bd005d' fill-opacity='.10'/%3E%3Crect x='32' y='96' width='32' height='32' fill='%23ff8fb3' fill-opacity='.10'/%3E%3Crect x='64' y='96' width='32' height='32' fill='%23cf0068' fill-opacity='.11'/%3E%3Crect x='96' y='96' width='32' height='32' fill='%23ffffff' fill-opacity='.08'/%3E%3C/svg%3E"),
    linear-gradient(100deg, #d2196b 0%, #e31d72 43%, #f01d75 73%, #ff1f6b 100%);
  background-size: 100% 100%, 100% 100%, 128px 128px, 100% 100%;
  background-position: center, left bottom, 0 0, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}

.recaps-hero.recaps-hero-active .recaps-hero-inner {
  display: block;
  width: 100%;
  max-width: var(--max);
  min-height: auto;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.recaps-hero.recaps-hero-active .recaps-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 780px;
  min-height: auto;
  padding: 3.25rem 0 4.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.recaps-hero.recaps-hero-active .kicker,
.recaps-hero.recaps-hero-active h1,
.recaps-hero.recaps-hero-active .lead {
  color: #fff;
}

.recaps-hero.recaps-hero-active h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  letter-spacing: -.035em;
}

.recaps-hero.recaps-hero-active .lead {
  max-width: 710px;
  margin: 0;
  color: rgba(255,255,255,.94);
}

.recaps-hero.recaps-hero-active .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.65rem;
}

.recaps-hero.recaps-hero-active .button.secondary {
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
}

.recaps-hero.recaps-hero-active .button.secondary:hover,
.recaps-hero.recaps-hero-active .button.secondary:focus {
  background: rgba(255,255,255,.22);
}

.recaps-hero.recaps-hero-active .hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 5.2rem;
  z-index: 1;
  pointer-events: none;
}

.recaps-hero.recaps-hero-active .hero-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.recaps-hero.recaps-hero-active .hero-wave-soft {
  fill: rgba(255, 190, 195, .58);
}

.recaps-hero.recaps-hero-active .hero-wave-white {
  fill: #fff;
}

.recap-stage {
  margin: 0 auto 2.4rem;
}

.recap-stage-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1rem;
}

.recap-stage-header h2 {
  margin-bottom: .4rem;
}

.recap-stage-header p {
  margin: 0;
  color: var(--muted);
}

.recap-stage-frame {
  position: relative;
  overflow: hidden;
  min-height: 33rem;
  background: linear-gradient(135deg, #f8eef3 0%, #ffffff 100%);
  border: 1px solid #ecd2df;
  box-shadow: 0 22px 60px rgba(87, 10, 48, .12);
}

.recap-stage-slides {
  position: relative;
  min-height: 33rem;
}

.recap-stage-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .7s ease;
}

.recap-stage-slide.is-active {
  opacity: 1;
}

.recap-stage-slide img {
  width: 100%;
  height: 100%;
  min-height: 33rem;
  object-fit: cover;
  display: block;
}

.recap-stage-slide figcaption {
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  bottom: 1.05rem;
  z-index: 3;
  max-width: min(44rem, calc(100% - 8rem));
  padding: .8rem .95rem;
  background: rgba(255,255,255,.93);
  color: var(--komba-pink-dark);
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(50, 10, 32, .14);
}

.recap-stage-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(212,0,111,.14) 0%, rgba(212,0,111,0) 24%, rgba(212,0,111,0) 68%, rgba(52,8,34,.24) 100%);
  pointer-events: none;
}

.recap-stage-tiles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.recap-stage-tile {
  position: absolute;
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 20px rgba(80, 8, 45, .12);
}

.recap-stage-tile.tint-pink { background: rgba(255, 120, 171, .84); }
.recap-stage-tile.tint-rose { background: rgba(244, 94, 146, .84); }
.recap-stage-tile.tint-deep { background: rgba(199, 0, 100, .82); }
.recap-stage-tile.tint-soft { background: rgba(255, 255, 255, .78); }

.recap-stage-tile.t1 { top: 1rem; left: 1rem; }
.recap-stage-tile.t2 { top: 1rem; left: 3.4rem; }
.recap-stage-tile.t3 { top: 3.4rem; left: 1rem; }
.recap-stage-tile.t4 { top: 1rem; right: 1rem; }
.recap-stage-tile.t5 { top: 3.2rem; right: 1rem; }
.recap-stage-tile.t6 { top: 1rem; right: 3.4rem; }
.recap-stage-tile.t7 { bottom: 1rem; left: 1rem; }
.recap-stage-tile.t8 { bottom: 1rem; left: 3.4rem; }
.recap-stage-tile.t9 { bottom: 3.4rem; left: 1rem; }
.recap-stage-tile.t10 { bottom: 1rem; right: 1rem; }
.recap-stage-tile.t11 { bottom: 3.4rem; right: 1rem; }
.recap-stage-tile.t12 { bottom: 1rem; right: 3.4rem; }
.recap-stage-tile.t13 { top: 46%; left: 1rem; }
.recap-stage-tile.t14 { top: 46%; right: 1rem; }

.recap-stage-controls {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .8rem;
}

.recap-stage-dots {
  display: flex;
  gap: .42rem;
}

.recap-stage-dot,
.recap-stage-arrow {
  border: 0;
  padding: 0;
}

.recap-stage-dot {
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  box-shadow: 0 0 0 1px rgba(129, 0, 65, .14);
  cursor: pointer;
}

.recap-stage-dot.is-active {
  background: var(--komba-pink);
  box-shadow: 0 0 0 2px rgba(255,255,255,.88);
}

.recap-stage-arrow {
  width: 2.7rem;
  height: 2.7rem;
  background: rgba(255,255,255,.92);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.recap-stage-arrow:hover,
.recap-stage-arrow:focus,
.recap-stage-dot:hover,
.recap-stage-dot:focus {
  filter: brightness(.97);
  outline: none;
}

@media (max-width: 900px) {
  .recap-stage-header {
    display: block;
  }

  .recap-stage-frame,
  .recap-stage-slides,
  .recap-stage-slide img {
    min-height: 26rem;
  }
}

@media (max-width: 860px) {
  .recaps-hero.recaps-hero-active {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%, rgba(255,104,55,.24) 100%),
      radial-gradient(circle at 8% 100%, rgba(255,112,47,.72) 0%, rgba(255,112,47,.26) 22%, rgba(255,112,47,0) 48%),
      linear-gradient(100deg, #d2196b 0%, #e31d72 43%, #f01d75 73%, #ff1f6b 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-position: center, left bottom, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
  }
}

@media (max-width: 720px) {
  .recaps-hero.recaps-hero-active .recaps-hero-copy {
    padding: 2.55rem 0 3.25rem;
  }

  .recaps-hero.recaps-hero-active .button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .recaps-hero.recaps-hero-active .button-row .button {
    width: 100%;
    text-align: center;
  }

  .recaps-hero.recaps-hero-active .hero-wave {
    height: 4.4rem;
  }

  .recap-stage-frame,
  .recap-stage-slides,
  .recap-stage-slide img {
    min-height: 20rem;
  }

  .recap-stage-controls {
    left: .85rem;
    right: .85rem;
    top: auto;
    bottom: .85rem;
    justify-content: space-between;
    gap: .6rem;
  }

  .recap-stage-slide figcaption {
    left: .8rem;
    right: .8rem;
    bottom: 3.9rem;
    max-width: none;
    padding: .7rem .8rem;
    font-size: .92rem;
  }

  .recap-stage-tile {
    width: 26px;
    height: 26px;
  }

  .recap-stage-tile.t2,
  .recap-stage-tile.t6,
  .recap-stage-tile.t8,
  .recap-stage-tile.t12,
  .recap-stage-tile.t13,
  .recap-stage-tile.t14 {
    display: none;
  }

  .recap-stage-tile.t3 { top: 2.95rem; }
  .recap-stage-tile.t5 { top: 2.95rem; }
  .recap-stage-tile.t9 { bottom: 2.95rem; }
  .recap-stage-tile.t11 { bottom: 2.95rem; }
}


/* Erlebnisseite – Variante 2: eingekachelte Fotogalerie */
.recap-mosaic {
  margin: 0 auto 2.5rem;
}

.recap-mosaic-header {
  margin-bottom: 1rem;
}

.recap-mosaic-header h2 {
  margin-bottom: .45rem;
}

.recap-mosaic-header p {
  margin: 0;
  color: var(--muted);
}

.recap-mosaic-grid {
  display: grid;
  grid-template-columns: 1.28fr .92fr .92fr;
  gap: 1rem;
}

.recap-mosaic-card {
  position: relative;
  overflow: hidden;
  min-height: 18rem;
  margin: 0;
  border: 1px solid #ecd2df;
  background: linear-gradient(135deg, #f8eef3 0%, #ffffff 100%);
  box-shadow: 0 18px 44px rgba(87, 10, 48, .10);
}

.recap-mosaic-card.tall {
  grid-row: span 2;
  min-height: 37rem;
}

.recap-mosaic-card.wide {
  grid-column: span 2;
  min-height: 18rem;
}

.recap-mosaic-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recap-mosaic-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(212,0,111,.06) 0%, rgba(212,0,111,0) 38%, rgba(42,8,28,.24) 100%);
  pointer-events: none;
}

.recap-mosaic-caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 4;
  display: inline-block;
  margin: 0;
  padding: .72rem .88rem;
  background: rgba(255,255,255,.92);
  color: var(--komba-pink-dark);
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(50, 10, 32, .14);
}

.recap-mosaic-tiles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.recap-mosaic-tile {
  position: absolute;
  width: 32px;
  height: 32px;
  box-shadow: 0 8px 20px rgba(80, 8, 45, .12);
}

.recap-mosaic-tile.soft { background: rgba(255,255,255,.80); }
.recap-mosaic-tile.pink { background: rgba(255, 120, 171, .84); }
.recap-mosaic-tile.rose { background: rgba(244, 94, 146, .84); }
.recap-mosaic-tile.deep { background: rgba(199, 0, 100, .82); }

.recap-mosaic-card.layout-a .t1 { top: 1rem; left: 1rem; }
.recap-mosaic-card.layout-a .t2 { top: 1rem; left: 3.3rem; }
.recap-mosaic-card.layout-a .t3 { top: 3.3rem; left: 1rem; }
.recap-mosaic-card.layout-a .t4 { bottom: 1rem; right: 1rem; }
.recap-mosaic-card.layout-a .t5 { bottom: 1rem; right: 3.3rem; }
.recap-mosaic-card.layout-a .t6 { bottom: 3.3rem; right: 1rem; }

.recap-mosaic-card.layout-b .t1 { top: 1rem; right: 1rem; }
.recap-mosaic-card.layout-b .t2 { top: 1rem; right: 3.3rem; }
.recap-mosaic-card.layout-b .t3 { top: 3.3rem; right: 1rem; }
.recap-mosaic-card.layout-b .t4 { bottom: 1rem; left: 1rem; }
.recap-mosaic-card.layout-b .t5 { bottom: 1rem; left: 3.3rem; }
.recap-mosaic-card.layout-b .t6 { bottom: 3.3rem; left: 1rem; }

.recap-mosaic-card.layout-c .t1 { top: 1rem; left: 1rem; }
.recap-mosaic-card.layout-c .t2 { top: 3.3rem; left: 1rem; }
.recap-mosaic-card.layout-c .t3 { top: 1rem; right: 1rem; }
.recap-mosaic-card.layout-c .t4 { bottom: 1rem; right: 1rem; }
.recap-mosaic-card.layout-c .t5 { bottom: 3.3rem; right: 1rem; }
.recap-mosaic-card.layout-c .t6 { bottom: 1rem; left: 1rem; }

.recap-mosaic-card.layout-d .t1 { top: 1rem; left: 1rem; }
.recap-mosaic-card.layout-d .t2 { top: 1rem; right: 1rem; }
.recap-mosaic-card.layout-d .t3 { top: 3.3rem; right: 1rem; }
.recap-mosaic-card.layout-d .t4 { bottom: 1rem; left: 1rem; }
.recap-mosaic-card.layout-d .t5 { bottom: 3.3rem; left: 1rem; }
.recap-mosaic-card.layout-d .t6 { bottom: 1rem; right: 1rem; }

@media (max-width: 980px) {
  .recap-mosaic-grid {
    grid-template-columns: 1fr 1fr;
  }

  .recap-mosaic-card.tall {
    min-height: 31rem;
  }

  .recap-mosaic-card.wide {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .recap-mosaic-grid {
    grid-template-columns: 1fr;
  }

  .recap-mosaic-card,
  .recap-mosaic-card.tall,
  .recap-mosaic-card.wide {
    grid-column: auto;
    grid-row: auto;
    min-height: 18.5rem;
  }

  .recap-mosaic-tile {
    width: 26px;
    height: 26px;
  }

  .recap-mosaic-card.layout-a .t2,
  .recap-mosaic-card.layout-b .t2,
  .recap-mosaic-card.layout-c .t2,
  .recap-mosaic-card.layout-d .t2,
  .recap-mosaic-card.layout-a .t5,
  .recap-mosaic-card.layout-b .t5,
  .recap-mosaic-card.layout-c .t5,
  .recap-mosaic-card.layout-d .t5 {
    display: none;
  }

  .recap-mosaic-caption {
    left: .8rem;
    right: .8rem;
    bottom: .8rem;
    padding: .65rem .78rem;
    font-size: .94rem;
  }
}


/* Erlebnisse: wechselnde Fotos als unregelmäßiger Kachel-Mauerdurchbruch im Hero */
.recaps-hero.recaps-hero-active .recaps-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 2.2rem;
  align-items: center;
  max-width: var(--max);
  min-height: 430px;
}

.recaps-hero.recaps-hero-active .recaps-hero-copy {
  padding: 3.2rem 0 4.4rem;
}

.hero-photo-breakthrough {
  position: relative;
  z-index: 3;
  min-height: 330px;
  margin: 2rem 0 3.6rem;
}

.hero-photo-window {
  position: absolute;
  inset: 1.7rem 1.4rem 1.8rem 1.6rem;
  overflow: hidden;
  background: rgba(255,255,255,.12);
  clip-path: polygon(
    8% 0, 27% 0, 27% 3%, 60% 3%, 60% 0, 88% 0,
    88% 4%, 96% 4%, 96% 13%, 100% 13%, 100% 84%,
    96% 84%, 96% 94%, 88% 94%, 88% 100%, 64% 100%,
    64% 97%, 31% 97%, 31% 100%, 10% 100%, 10% 96%,
    3% 96%, 3% 87%, 0 87%, 0 16%, 4% 16%, 4% 7%, 8% 7%
  );
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

.hero-photo-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .75s ease;
}

.hero-photo-slide.is-active {
  opacity: 1;
}

.hero-photo-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-photo-slide:nth-child(1) img { object-position: center 42%; }
.hero-photo-slide:nth-child(2) img { object-position: center 45%; }
.hero-photo-slide:nth-child(3) img { object-position: center 45%; }
.hero-photo-slide:nth-child(4) img { object-position: center 38%; }

.hero-photo-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(212,0,111,.04) 0%, rgba(212,0,111,0) 55%, rgba(48,8,31,.22) 100%);
  pointer-events: none;
}

.hero-photo-caption {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.15rem;
  z-index: 3;
  margin: 0;
  padding: .66rem .78rem;
  background: rgba(255,255,255,.91);
  color: var(--komba-pink-dark);
  font-size: .9rem;
  font-weight: 700;
}

.hero-break-tile {
  position: absolute;
  z-index: 5;
  width: 32px;
  height: 32px;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(84, 0, 43, .10);
}

.hero-break-tile.light { background: rgba(255,255,255,.16); }
.hero-break-tile.pink { background: rgba(255,103,157,.28); }
.hero-break-tile.deep { background: rgba(176,0,87,.24); }
.hero-break-tile.orange { background: rgba(255,112,70,.24); }

.hero-break-tile.b1 { top: .65rem; left: 1.2rem; }
.hero-break-tile.b2 { top: .65rem; left: 3.35rem; }
.hero-break-tile.b3 { top: 2.8rem; left: 1.2rem; }
.hero-break-tile.b4 { top: .65rem; right: 1rem; }
.hero-break-tile.b5 { top: 2.8rem; right: 1rem; }
.hero-break-tile.b6 { top: .65rem; right: 3.15rem; }
.hero-break-tile.b7 { bottom: 1.05rem; left: 1rem; }
.hero-break-tile.b8 { bottom: 1.05rem; left: 3.15rem; }
.hero-break-tile.b9 { bottom: 3.2rem; left: 1rem; }
.hero-break-tile.b10 { bottom: 1.05rem; right: 1.2rem; }
.hero-break-tile.b11 { bottom: 3.2rem; right: 1.2rem; }
.hero-break-tile.b12 { bottom: 1.05rem; right: 3.35rem; }
.hero-break-tile.b13 { top: 41%; left: .45rem; }
.hero-break-tile.b14 { top: 55%; left: .45rem; }
.hero-break-tile.b15 { top: 43%; right: .35rem; }

.hero-photo-controls {
  position: absolute;
  right: 2.45rem;
  top: 2.55rem;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: .42rem;
}

.hero-photo-dot {
  width: .8rem;
  height: .8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  box-shadow: 0 0 0 1px rgba(100,0,52,.14);
  cursor: pointer;
}

.hero-photo-dot.is-active {
  background: var(--komba-pink);
  box-shadow: 0 0 0 2px rgba(255,255,255,.86);
}

.hero-photo-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 960px) {
  .recaps-hero.recaps-hero-active .recaps-hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .recaps-hero.recaps-hero-active .recaps-hero-copy {
    padding: 2.75rem 0 1rem;
  }

  .hero-photo-breakthrough {
    min-height: 300px;
    margin: .35rem 0 4.4rem;
  }
}

@media (max-width: 640px) {
  .hero-photo-breakthrough {
    min-height: 230px;
    margin-bottom: 3.9rem;
  }

  .hero-photo-window {
    inset: 1.25rem .45rem 1.25rem .45rem;
  }

  .hero-break-tile {
    width: 24px;
    height: 24px;
  }

  .hero-break-tile.b2,
  .hero-break-tile.b6,
  .hero-break-tile.b8,
  .hero-break-tile.b12,
  .hero-break-tile.b14,
  .hero-break-tile.b15 {
    display: none;
  }

  .hero-photo-controls {
    right: 1.2rem;
    top: 1.85rem;
  }

  .hero-photo-caption {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    padding: .55rem .65rem;
    font-size: .82rem;
  }
}


/* Erlebnisse-Hero: Feinschliff Fotodurchbruch */
.hero-photo-window {
  inset: 1.35rem 1.05rem 1.55rem 1.4rem;
  clip-path: polygon(
    5% 0, 19% 0, 19% 2.5%, 33% 2.5%, 33% 0,
    58% 0, 58% 3.5%, 73% 3.5%, 73% 1%, 91% 1%,
    91% 5%, 97% 5%, 97% 12%, 100% 12%, 100% 31%,
    98% 31%, 98% 52%, 100% 52%, 100% 79%, 96% 79%,
    96% 91%, 90% 91%, 90% 97%, 72% 97%, 72% 100%,
    48% 100%, 48% 97%, 29% 97%, 29% 100%, 12% 100%,
    12% 96%, 5% 96%, 5% 88%, 1% 88%, 1% 69%,
    0 69%, 0 43%, 2% 43%, 2% 22%, 0 22%, 0 10%,
    5% 10%
  );
  background: rgba(119, 0, 60, .34);
}

.hero-photo-slide {
  isolation: isolate;
  background-color: rgba(110, 0, 56, .48);
}

.hero-photo-slide::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -1;
  background-position: center;
  background-size: cover;
  filter: blur(18px) brightness(.72) saturate(.94);
  transform: scale(1.12);
  opacity: .78;
}

.hero-photo-mv::before { background-image: url("mitgliederversammlung-2026.jpg"); }
.hero-photo-weihnachtsmarkt::before { background-image: url("weihnachtsmarkt-hameln-2025.png"); }
.hero-photo-zoo::before { background-image: url("zoo-flussfahrt-gruppe.jpg"); }
.hero-photo-streik::before { background-image: url("streik-hannover-2025.png"); }

.hero-photo-slide img,
.hero-photo-slide:nth-child(1) img,
.hero-photo-slide:nth-child(2) img,
.hero-photo-slide:nth-child(3) img,
.hero-photo-slide:nth-child(4) img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.hero-photo-shade {
  background: linear-gradient(180deg, rgba(212,0,111,.02) 0%, rgba(212,0,111,0) 72%, rgba(48,8,31,.10) 100%);
}

.hero-photo-caption {
  display: none !important;
}

/* Versetztere Kacheln für einen natürlicheren Mauerdurchbruch */
.hero-break-tile.b1 { top: .4rem; left: .8rem; }
.hero-break-tile.b2 { top: .4rem; left: 3.1rem; }
.hero-break-tile.b3 { top: 2.55rem; left: .25rem; }
.hero-break-tile.b4 { top: .05rem; right: 2.15rem; }
.hero-break-tile.b5 { top: 2.25rem; right: .2rem; }
.hero-break-tile.b6 { top: .55rem; right: 4.3rem; }
.hero-break-tile.b7 { bottom: .45rem; left: 1.55rem; }
.hero-break-tile.b8 { bottom: .1rem; left: 4.05rem; }
.hero-break-tile.b9 { bottom: 2.65rem; left: .3rem; }
.hero-break-tile.b10 { bottom: .2rem; right: .55rem; }
.hero-break-tile.b11 { bottom: 2.7rem; right: .05rem; }
.hero-break-tile.b12 { bottom: .65rem; right: 3.05rem; }
.hero-break-tile.b13 { top: 34%; left: .05rem; }
.hero-break-tile.b14 { top: 58%; left: .7rem; }
.hero-break-tile.b15 { top: 48%; right: -.15rem; }

@media (max-width: 640px) {
  .hero-photo-window {
    inset: 1.05rem .25rem 1.15rem .35rem;
    clip-path: polygon(
      7% 0, 33% 0, 33% 3%, 62% 3%, 62% 0, 91% 0,
      91% 5%, 98% 5%, 98% 17%, 100% 17%, 100% 81%,
      96% 81%, 96% 94%, 88% 94%, 88% 100%, 60% 100%,
      60% 97%, 31% 97%, 31% 100%, 10% 100%, 10% 95%,
      3% 95%, 3% 84%, 0 84%, 0 16%, 4% 16%, 4% 6%, 7% 6%
    );
  }
}


/* Erlebnisse-Hero: Querformat füllt das Fenster, Hochformat erhält Kachelflächen */
.hero-photo-breakthrough {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-photo-window {
  position: relative;
  inset: auto;
  width: min(100%, 520px);
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.hero-photo-slide {
  background: transparent;
}

.hero-photo-slide::before {
  display: none;
}

.hero-photo-slide img,
.hero-photo-slide:nth-child(1) img,
.hero-photo-slide:nth-child(2) img,
.hero-photo-slide:nth-child(3) img,
.hero-photo-slide:nth-child(4) img {
  object-fit: cover;
  object-position: center;
}

.hero-photo-slide.is-portrait,
.hero-photo-slide.needs-tile-fill {
  background-color: rgba(153, 0, 76, .22);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.10) 50%, transparent 50%),
    linear-gradient(rgba(255,255,255,.08) 50%, transparent 50%),
    linear-gradient(90deg, rgba(255,105,157,.15) 50%, rgba(181,0,89,.12) 50%);
  background-size: 36px 36px, 36px 36px, 72px 72px;
  background-position: 0 0, 0 0, 0 0;
}

.hero-photo-slide.is-portrait img,
.hero-photo-slide.needs-tile-fill img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  padding: 0 12%;
}

.hero-photo-slide.is-landscape img,
.hero-photo-slide.fits-window img {
  object-fit: cover;
  padding: 0;
}

@media (max-width: 960px) {
  .hero-photo-window {
    width: min(100%, 560px);
  }
}

@media (max-width: 640px) {
  .hero-photo-window {
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .hero-photo-slide.is-portrait img,
  .hero-photo-slide.needs-tile-fill img {
    padding: 0 10%;
  }
}


/* Erlebnisse-Hero: einheitliches Kachelraster */
.hero-photo-breakthrough {
  --hero-tile-size: 32px;
  --hero-tile-double: 64px;
}

.hero-break-tile {
  width: var(--hero-tile-size);
  height: var(--hero-tile-size);
}

.hero-photo-slide.is-portrait,
.hero-photo-slide.needs-tile-fill {
  background-size:
    var(--hero-tile-size) var(--hero-tile-size),
    var(--hero-tile-size) var(--hero-tile-size),
    var(--hero-tile-double) var(--hero-tile-double);
  background-position: 0 0, 0 0, 0 0;
}

@media (max-width: 640px) {
  .hero-photo-breakthrough {
    --hero-tile-size: 24px;
    --hero-tile-double: 48px;
  }

  .hero-break-tile {
    width: var(--hero-tile-size);
    height: var(--hero-tile-size);
  }

  .hero-photo-slide.is-portrait,
  .hero-photo-slide.needs-tile-fill {
    background-size:
      var(--hero-tile-size) var(--hero-tile-size),
      var(--hero-tile-size) var(--hero-tile-size),
      var(--hero-tile-double) var(--hero-tile-double);
  }
}


/* Einheitlicher Hero für Unterseiten */
.subpage-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background-color: #d4006f;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%, rgba(255,104,55,.24) 100%),
    radial-gradient(circle at 8% 100%, rgba(255,112,47,.72) 0%, rgba(255,112,47,.26) 22%, rgba(255,112,47,0) 48%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Crect x='0' y='0' width='32' height='32' fill='%23ffffff' fill-opacity='.11'/%3E%3Crect x='32' y='0' width='32' height='32' fill='%23f45b96' fill-opacity='.12'/%3E%3Crect x='64' y='0' width='32' height='32' fill='%23c70064' fill-opacity='.12'/%3E%3Crect x='96' y='0' width='32' height='32' fill='%23ff8eb5' fill-opacity='.10'/%3E%3Crect x='0' y='32' width='32' height='32' fill='%23ca0065' fill-opacity='.12'/%3E%3Crect x='32' y='32' width='32' height='32' fill='%23ffffff' fill-opacity='.08'/%3E%3Crect x='64' y='32' width='32' height='32' fill='%23f36d9d' fill-opacity='.11'/%3E%3Crect x='96' y='32' width='32' height='32' fill='%23bc005c' fill-opacity='.11'/%3E%3Crect x='0' y='64' width='32' height='32' fill='%23ff7aa7' fill-opacity='.10'/%3E%3Crect x='32' y='64' width='32' height='32' fill='%23c30061' fill-opacity='.12'/%3E%3Crect x='64' y='64' width='32' height='32' fill='%23ffffff' fill-opacity='.09'/%3E%3Crect x='96' y='64' width='32' height='32' fill='%23f05690' fill-opacity='.11'/%3E%3Crect x='0' y='96' width='32' height='32' fill='%23bd005d' fill-opacity='.10'/%3E%3Crect x='32' y='96' width='32' height='32' fill='%23ff8fb3' fill-opacity='.10'/%3E%3Crect x='64' y='96' width='32' height='32' fill='%23cf0068' fill-opacity='.11'/%3E%3Crect x='96' y='96' width='32' height='32' fill='%23ffffff' fill-opacity='.08'/%3E%3C/svg%3E"),
    linear-gradient(100deg, #d2196b 0%, #e31d72 43%, #f01d75 73%, #ff1f6b 100%);
  background-size: 100% 100%, 100% 100%, 128px 128px, 100% 100%;
  background-position: center, left bottom, 0 0, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}

.subpage-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  min-height: 350px;
  margin: 0 auto;
  padding: 3.15rem 1.25rem 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
  align-items: center;
  gap: 3rem;
}

.subpage-hero--single .subpage-hero-inner {
  grid-template-columns: minmax(0, 780px);
}

.subpage-hero-copy .kicker,
.subpage-hero-copy h1,
.subpage-hero-copy .lead {
  color: #fff;
}

.subpage-hero-copy h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.55rem, 6vw, 4.65rem);
  letter-spacing: -.035em;
}

.subpage-hero-copy .lead {
  max-width: 760px;
  margin: 0;
  font-size: 1.16rem;
  color: rgba(255,255,255,.95);
}

.subpage-hero .button-row {
  margin-top: 1.65rem;
}

.subpage-hero .button.secondary {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.65);
  color: #fff;
}

.subpage-hero-wave {
  position: absolute;
  left: -2px;
  width: calc(100% + 4px);
  bottom: -1px;
  height: 5.25rem;
  z-index: 1;
  pointer-events: none;
}

.subpage-hero-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.subpage-hero-wave .hero-wave-soft { fill: rgba(255,190,195,.58); }
.subpage-hero-wave .hero-wave-white { fill: #fff; }

.subpage-hero-contact {
  position: relative;
  z-index: 3;
  display: grid;
  gap: .85rem;
}

.subpage-hero-contact .service-contact-card {
  min-height: 0;
  margin: 0;
  padding: 1.15rem 1.25rem;
  background: rgba(255,255,255,.96);
  border-top: 7px solid var(--komba-orange);
  border-left: 0;
  box-shadow: 0 16px 38px rgba(79,0,43,.18);
}

.subpage-hero-contact .service-contact-card:nth-child(2) {
  border-top-color: var(--komba-turquoise);
}

.subpage-hero-contact .service-contact-card h2 {
  font-size: 1.08rem;
  overflow-wrap: anywhere;
}

.subpage-hero-contact .service-contact-card p {
  margin-bottom: 0;
}

/* Überschriften stehen bereits im Hero */
.board-page > .kicker,
.board-page > h1,
.board-page > .intro,
.contributions-page > .kicker,
.contributions-page > h1,
.contributions-page > .intro,
.service-page > .kicker,
.service-page > h1,
.service-page > .intro {
  display: none;
}

@media (max-width: 860px) {
  .subpage-hero {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%, rgba(255,104,55,.24) 100%),
      radial-gradient(circle at 8% 100%, rgba(255,112,47,.72) 0%, rgba(255,112,47,.26) 22%, rgba(255,112,47,0) 48%),
      linear-gradient(100deg, #d2196b 0%, #e31d72 43%, #f01d75 73%, #ff1f6b 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-position: center, left bottom, center;
    background-repeat: no-repeat;
  }

  .subpage-hero-inner,
  .subpage-hero--single .subpage-hero-inner {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding-top: 2.65rem;
    padding-bottom: 4.4rem;
  }

  .subpage-hero-contact {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .subpage-hero-contact {
    grid-template-columns: 1fr;
  }

  .subpage-hero-wave {
    height: 4.7rem;
  }
}


/* Unterseiten-Heros: echte volle Browserbreite */
main > .subpage-hero,
main > .recaps-hero.recaps-hero-active {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

main > .subpage-hero .subpage-hero-inner,
main > .recaps-hero.recaps-hero-active .recaps-hero-inner {
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

main > .subpage-hero .subpage-hero-wave,
main > .recaps-hero.recaps-hero-active .hero-wave {
  left: -2px;
  right: auto;
  width: calc(100% + 4px);
}


/* Kompakter Gegen-Hero unmittelbar vor dem Fußbereich */
.counter-hero {
  position: relative;
  width: 100%;
  height: 76px;
  overflow: hidden;
  background-color: #d4006f;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,0) 62%),
    radial-gradient(circle at 92% 100%, rgba(255,112,47,.54), transparent 38%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Crect x='0' y='0' width='32' height='32' fill='%23ffffff' fill-opacity='.09'/%3E%3Crect x='32' y='0' width='32' height='32' fill='%23f45b96' fill-opacity='.10'/%3E%3Crect x='64' y='0' width='32' height='32' fill='%23c70064' fill-opacity='.11'/%3E%3Crect x='96' y='0' width='32' height='32' fill='%23ff8eb5' fill-opacity='.08'/%3E%3Crect x='0' y='32' width='32' height='32' fill='%23ca0065' fill-opacity='.10'/%3E%3Crect x='32' y='32' width='32' height='32' fill='%23ffffff' fill-opacity='.07'/%3E%3Crect x='64' y='32' width='32' height='32' fill='%23f36d9d' fill-opacity='.09'/%3E%3Crect x='96' y='32' width='32' height='32' fill='%23bc005c' fill-opacity='.10'/%3E%3Crect x='0' y='64' width='32' height='32' fill='%23ff7aa7' fill-opacity='.08'/%3E%3Crect x='32' y='64' width='32' height='32' fill='%23c30061' fill-opacity='.11'/%3E%3Crect x='64' y='64' width='32' height='32' fill='%23ffffff' fill-opacity='.07'/%3E%3Crect x='96' y='64' width='32' height='32' fill='%23f05690' fill-opacity='.09'/%3E%3Crect x='0' y='96' width='32' height='32' fill='%23bd005d' fill-opacity='.09'/%3E%3Crect x='32' y='96' width='32' height='32' fill='%23ff8fb3' fill-opacity='.08'/%3E%3Crect x='64' y='96' width='32' height='32' fill='%23cf0068' fill-opacity='.10'/%3E%3Crect x='96' y='96' width='32' height='32' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E"),
    linear-gradient(100deg, #d2196b 0%, #e31d72 48%, #f01d75 76%, #ff1f6b 100%);
  background-size: 100% 100%, 100% 100%, 128px 128px, 100% 100%;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}

.counter-hero svg {
  position: absolute;
  top: -1px;
  left: -2px;
  width: calc(100% + 4px);
  height: 50px;
  display: block;
}

.counter-hero .counter-wave-soft {
  fill: rgba(255,190,195,.58);
}

.counter-hero .counter-wave-white {
  fill: #fff;
}

.counter-hero + .site-footer {
  border-top: 0;
}

.counter-hero + .site-footer .footer-inner {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (max-width: 860px) {
  .counter-hero {
    height: 62px;
    background-image:
      linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,0) 62%),
      radial-gradient(circle at 92% 100%, rgba(255,112,47,.54), transparent 38%),
      linear-gradient(100deg, #d2196b 0%, #e31d72 48%, #f01d75 76%, #ff1f6b 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
  }

  .counter-hero svg {
    height: 42px;
  }
}


/* Footertext direkt im kompakten Gegen-Hero */
.counter-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 126px;
  color: #fff;
  border-top: 0;
  background-color: #d4006f;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,0) 62%),
    radial-gradient(circle at 92% 100%, rgba(255,112,47,.54), transparent 38%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Crect x='0' y='0' width='32' height='32' fill='%23ffffff' fill-opacity='.09'/%3E%3Crect x='32' y='0' width='32' height='32' fill='%23f45b96' fill-opacity='.10'/%3E%3Crect x='64' y='0' width='32' height='32' fill='%23c70064' fill-opacity='.11'/%3E%3Crect x='96' y='0' width='32' height='32' fill='%23ff8eb5' fill-opacity='.08'/%3E%3Crect x='0' y='32' width='32' height='32' fill='%23ca0065' fill-opacity='.10'/%3E%3Crect x='32' y='32' width='32' height='32' fill='%23ffffff' fill-opacity='.07'/%3E%3Crect x='64' y='32' width='32' height='32' fill='%23f36d9d' fill-opacity='.09'/%3E%3Crect x='96' y='32' width='32' height='32' fill='%23bc005c' fill-opacity='.10'/%3E%3Crect x='0' y='64' width='32' height='32' fill='%23ff7aa7' fill-opacity='.08'/%3E%3Crect x='32' y='64' width='32' height='32' fill='%23c30061' fill-opacity='.11'/%3E%3Crect x='64' y='64' width='32' height='32' fill='%23ffffff' fill-opacity='.07'/%3E%3Crect x='96' y='64' width='32' height='32' fill='%23f05690' fill-opacity='.09'/%3E%3Crect x='0' y='96' width='32' height='32' fill='%23bd005d' fill-opacity='.09'/%3E%3Crect x='32' y='96' width='32' height='32' fill='%23ff8fb3' fill-opacity='.08'/%3E%3Crect x='64' y='96' width='32' height='32' fill='%23cf0068' fill-opacity='.10'/%3E%3Crect x='96' y='96' width='32' height='32' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E"),
    linear-gradient(100deg, #d2196b 0%, #e31d72 48%, #f01d75 76%, #ff1f6b 100%);
  background-size: 100% 100%, 100% 100%, 128px 128px, 100% 100%;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}

.counter-footer > svg {
  position: absolute;
  z-index: 1;
  top: -1px;
  left: -2px;
  width: calc(100% + 4px);
  height: 58px;
  display: block;
}

.counter-footer .counter-wave-soft { fill: rgba(255,190,195,.58); }
.counter-footer .counter-wave-white { fill: #fff; }

.counter-footer .footer-inner,
.counter-footer .footer-area {
  position: relative;
  z-index: 2;
}

.counter-footer .footer-inner {
  padding-top: 4.25rem;
  padding-bottom: .75rem;
}

.counter-footer .footer-area {
  padding-bottom: .85rem;
}

.counter-footer .footer-area::before {
  margin-bottom: .7rem;
}

@media (max-width: 860px) {
  .counter-footer {
    min-height: 112px;
    background-image:
      linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,0) 62%),
      radial-gradient(circle at 92% 100%, rgba(255,112,47,.54), transparent 38%),
      linear-gradient(100deg, #d2196b 0%, #e31d72 48%, #f01d75 76%, #ff1f6b 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
  }

  .counter-footer > svg { height: 50px; }
  .counter-footer .footer-inner { padding-top: 3.7rem; }
}


/* Startseite: Kontaktbereich „Noch Fragen?“ wieder weiß */
#kontakt {
  background: #fff;
}


/* Mobile: Kachelmuster wieder sichtbar, auf 20 × 20 Pixel verkleinert */
@media (max-width: 860px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%, rgba(255,104,55,.30) 100%),
      radial-gradient(circle at 8% 100%, rgba(255,112,47,.74) 0%, rgba(255,112,47,.30) 23%, rgba(255,112,47,0) 50%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Crect x='0' y='0' width='32' height='32' fill='%23ffffff' fill-opacity='.11'/%3E%3Crect x='32' y='0' width='32' height='32' fill='%23f45b96' fill-opacity='.12'/%3E%3Crect x='64' y='0' width='32' height='32' fill='%23c70064' fill-opacity='.12'/%3E%3Crect x='96' y='0' width='32' height='32' fill='%23ff8eb5' fill-opacity='.10'/%3E%3Crect x='0' y='32' width='32' height='32' fill='%23ca0065' fill-opacity='.12'/%3E%3Crect x='32' y='32' width='32' height='32' fill='%23ffffff' fill-opacity='.08'/%3E%3Crect x='64' y='32' width='32' height='32' fill='%23f36d9d' fill-opacity='.11'/%3E%3Crect x='96' y='32' width='32' height='32' fill='%23bc005c' fill-opacity='.11'/%3E%3Crect x='0' y='64' width='32' height='32' fill='%23ff7aa7' fill-opacity='.10'/%3E%3Crect x='32' y='64' width='32' height='32' fill='%23c30061' fill-opacity='.12'/%3E%3Crect x='64' y='64' width='32' height='32' fill='%23ffffff' fill-opacity='.09'/%3E%3Crect x='96' y='64' width='32' height='32' fill='%23f05690' fill-opacity='.11'/%3E%3Crect x='0' y='96' width='32' height='32' fill='%23bd005d' fill-opacity='.10'/%3E%3Crect x='32' y='96' width='32' height='32' fill='%23ff8fb3' fill-opacity='.10'/%3E%3Crect x='64' y='96' width='32' height='32' fill='%23cf0068' fill-opacity='.11'/%3E%3Crect x='96' y='96' width='32' height='32' fill='%23ffffff' fill-opacity='.08'/%3E%3C/svg%3E"),
      linear-gradient(120deg, #d2196b 0%, #e31d72 46%, #f01d75 72%, #ff4f55 100%);
    background-size: 100% 100%, 100% 100%, 80px 80px, 100% 100%;
    background-position: center, left bottom, 0 0, center;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  }

  .subpage-hero {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%, rgba(255,104,55,.24) 100%),
      radial-gradient(circle at 8% 100%, rgba(255,112,47,.72) 0%, rgba(255,112,47,.26) 22%, rgba(255,112,47,0) 48%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Crect x='0' y='0' width='32' height='32' fill='%23ffffff' fill-opacity='.11'/%3E%3Crect x='32' y='0' width='32' height='32' fill='%23f45b96' fill-opacity='.12'/%3E%3Crect x='64' y='0' width='32' height='32' fill='%23c70064' fill-opacity='.12'/%3E%3Crect x='96' y='0' width='32' height='32' fill='%23ff8eb5' fill-opacity='.10'/%3E%3Crect x='0' y='32' width='32' height='32' fill='%23ca0065' fill-opacity='.12'/%3E%3Crect x='32' y='32' width='32' height='32' fill='%23ffffff' fill-opacity='.08'/%3E%3Crect x='64' y='32' width='32' height='32' fill='%23f36d9d' fill-opacity='.11'/%3E%3Crect x='96' y='32' width='32' height='32' fill='%23bc005c' fill-opacity='.11'/%3E%3Crect x='0' y='64' width='32' height='32' fill='%23ff7aa7' fill-opacity='.10'/%3E%3Crect x='32' y='64' width='32' height='32' fill='%23c30061' fill-opacity='.12'/%3E%3Crect x='64' y='64' width='32' height='32' fill='%23ffffff' fill-opacity='.09'/%3E%3Crect x='96' y='64' width='32' height='32' fill='%23f05690' fill-opacity='.11'/%3E%3Crect x='0' y='96' width='32' height='32' fill='%23bd005d' fill-opacity='.10'/%3E%3Crect x='32' y='96' width='32' height='32' fill='%23ff8fb3' fill-opacity='.10'/%3E%3Crect x='64' y='96' width='32' height='32' fill='%23cf0068' fill-opacity='.11'/%3E%3Crect x='96' y='96' width='32' height='32' fill='%23ffffff' fill-opacity='.08'/%3E%3C/svg%3E"),
      linear-gradient(100deg, #d2196b 0%, #e31d72 43%, #f01d75 73%, #ff1f6b 100%);
    background-size: 100% 100%, 100% 100%, 80px 80px, 100% 100%;
    background-position: center, left bottom, 0 0, center;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  }

  .counter-hero,
  .counter-footer {
    background-image:
      linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,0) 62%),
      radial-gradient(circle at 92% 100%, rgba(255,112,47,.54), transparent 38%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Crect x='0' y='0' width='32' height='32' fill='%23ffffff' fill-opacity='.11'/%3E%3Crect x='32' y='0' width='32' height='32' fill='%23f45b96' fill-opacity='.12'/%3E%3Crect x='64' y='0' width='32' height='32' fill='%23c70064' fill-opacity='.12'/%3E%3Crect x='96' y='0' width='32' height='32' fill='%23ff8eb5' fill-opacity='.10'/%3E%3Crect x='0' y='32' width='32' height='32' fill='%23ca0065' fill-opacity='.12'/%3E%3Crect x='32' y='32' width='32' height='32' fill='%23ffffff' fill-opacity='.08'/%3E%3Crect x='64' y='32' width='32' height='32' fill='%23f36d9d' fill-opacity='.11'/%3E%3Crect x='96' y='32' width='32' height='32' fill='%23bc005c' fill-opacity='.11'/%3E%3Crect x='0' y='64' width='32' height='32' fill='%23ff7aa7' fill-opacity='.10'/%3E%3Crect x='32' y='64' width='32' height='32' fill='%23c30061' fill-opacity='.12'/%3E%3Crect x='64' y='64' width='32' height='32' fill='%23ffffff' fill-opacity='.09'/%3E%3Crect x='96' y='64' width='32' height='32' fill='%23f05690' fill-opacity='.11'/%3E%3Crect x='0' y='96' width='32' height='32' fill='%23bd005d' fill-opacity='.10'/%3E%3Crect x='32' y='96' width='32' height='32' fill='%23ff8fb3' fill-opacity='.10'/%3E%3Crect x='64' y='96' width='32' height='32' fill='%23cf0068' fill-opacity='.11'/%3E%3Crect x='96' y='96' width='32' height='32' fill='%23ffffff' fill-opacity='.08'/%3E%3C/svg%3E"),
      linear-gradient(100deg, #d2196b 0%, #e31d72 48%, #f01d75 76%, #ff1f6b 100%);
    background-size: 100% 100%, 100% 100%, 80px 80px, 100% 100%;
    background-position: center, right bottom, 0 0, center;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  }
}


.tariff-page {
  max-width: 1080px;
}

.tariff-resource {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  padding: 1.75rem;
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 9px solid var(--komba-turquoise);
  box-shadow: 0 12px 30px rgba(90, 0, 45, .08);
}

.tariff-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 1rem;
  background: transparent;
  border: 0;
}

.tariff-logo {
  max-width: 100%;
  max-height: 130px;
  width: auto;
  height: auto;
  display: block;
}

.tariff-copy h2 {
  margin-bottom: .65rem;
}

.tariff-copy p {
  margin-bottom: .9rem;
}

.tariff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.1rem;
}

.tariff-note {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  background: rgba(21, 163, 179, .08);
  border-left: 4px solid var(--komba-turquoise);
}

.tariff-note p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .tariff-resource {
    grid-template-columns: 1fr;
  }

  .tariff-logo-wrap {
    min-height: 120px;
  }
}


.service-hub {
  max-width: 1200px;
}

.service-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 0;
}

.service-choice-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 170px;
  padding: 1.5rem;
  color: var(--text);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 9px solid var(--komba-turquoise);
  box-shadow: 0 12px 30px rgba(90, 0, 45, .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}


.service-choice-card--primary {
  grid-column: 1;
  grid-row: 1;
}

.service-choice-grid .service-choice-card:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.service-choice-grid .service-choice-card:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 780px) {
  .service-choice-card--primary,
  .service-choice-grid .service-choice-card:nth-child(2),
  .service-choice-grid .service-choice-card:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }
}

.service-choice-card:hover,
.service-choice-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 17px 38px rgba(90, 0, 45, .13);
  border-top-color: var(--komba-pink);
}

.service-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  color: var(--komba-turquoise);
  background: rgba(21, 163, 179, .12);
}

.service-choice-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-choice-copy {
  display: grid;
  gap: .45rem;
}

.service-choice-copy strong {
  color: var(--komba-pink-dark);
  font-size: 1.3rem;
  line-height: 1.2;
}

.service-choice-copy span {
  color: #445a68;
  line-height: 1.55;
}

.service-choice-arrow {
  color: var(--komba-pink);
  font-size: 1.65rem;
  font-weight: 800;
}

@media (max-width: 980px) {
  .service-choice-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 780px) {
  .service-choice-grid {
    grid-template-columns: 1fr;
  }

  .service-choice-card {
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .service-choice-arrow {
    display: none;
  }
}


.tariff-actions .button {
  text-align: center;
}

@media (max-width: 620px) {
  .tariff-actions {
    flex-direction: column;
  }

  .tariff-actions .button {
    width: 100%;
  }
}


/* Schaltflächen insgesamt etwas feiner */
.membership-button,
.dialog-cancel,
.dialog-confirm,
.calculator-button,
.calculator-reset,
.service-mail-button,
.service-print-button,
.service-reset-button,
.tariff-actions .button {
  font-weight: 700;
}

.service-choice-copy strong {
  font-size: 1.22rem;
  font-weight: 700;
}

.service-choice-arrow {
  font-weight: 700;
}

/* Einheitlich feinere Typografie für Navigation und Bedienelemente */
nav a,
.button,
.membership-button,
.dialog-cancel,
.dialog-continue,
.dialog-confirm,
.calculator-button,
.calculator-reset,
.service-mail-button,
.service-print-button,
.service-reset-button,
.community-link,
.recap-link,
.tariff-actions .button,
.service-choice-copy strong,
.service-choice-arrow,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-weight: 600;
}

/* Termin-Hinweis ebenfalls in der feineren Schriftstärke */
.event-label {
  font-weight: 600;
}