/* =====================================================================
   Kyno Adventure – eigene Ergänzungen zum Webflow-Export
   Wird auf allen Seiten NACH css/24visu5288-…webflow.css geladen.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Claim „Eure Zeit. / Eure Verbindung. / Euer Abenteuer.“ – Grundgestaltung
   (wird im Footer verwendet, siehe Abschnitt „Footer-Claim“ am Dateiende)
   --------------------------------------------------------------------- */
.kyno-claim {
  align-self: stretch;
  box-sizing: border-box;
  /* volle Breite trotz Seiten-Padding der Section */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 70px clamp(20px, 7.6vw, 110px) 0;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.kyno-claim__line,
.kyno-claim__line.heading-1 {
  display: block;
  box-sizing: border-box;
  box-shadow: none;
  border: 0;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: .16em .42em;
  background-color: #bab6ad;
  color: #000;
  font-size: clamp(1.25rem, 6.4vw, 3.25rem);
  line-height: 1.24;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: break-word;
}

.kyno-claim__line:nth-child(2) {
  margin-left: 6%;
}

.kyno-claim__line:nth-child(3) {
  margin-left: 12%;
}

/* Getrennte graue Blöcke: Lücke = schwarzer Container-Hintergrund (Flyer-Vorlage) */
.kyno-claim > .kyno-claim__line + .kyno-claim__line {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .kyno-claim {
    padding-top: 48px;
    gap: 8px;
  }

  .kyno-claim__line:nth-child(2) {
    margin-left: 4%;
  }

  .kyno-claim__line:nth-child(3) {
    margin-left: 8%;
  }
}

/* ---------------------------------------------------------------------
   Aufgabe 5 – Porträt im Bereich "Über mich"
   --------------------------------------------------------------------- */
.kyno-portrait {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 50% 50%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 991px) {
  .relative.kyno-portrait-wrap {
    width: 100%;
    height: auto;
  }

  .kyno-portrait {
    max-width: 420px;
  }
}

@media screen and (max-width: 767px) {
  .relative.kyno-portrait-wrap {
    height: auto;
  }

  .kyno-portrait {
    max-width: 320px;
  }
}

/* ---------------------------------------------------------------------
   Aufgabe 6 – Section MyKyno
   --------------------------------------------------------------------- */
.section-angebote.dark-gray-to-black.kyno-mykyno {
  min-height: 0;
  padding: 100px 150px 40px;
  color: #fff;
}

.kyno-mykyno__inner {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.kyno-mykyno__intro {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  align-items: center;
}

.kyno-mykyno__intro .heading-87 {
  margin: 0;
}

.kyno-mykyno .paragraph-links.flie-text {
  color: #fff;
}

.kyno-mykyno__lead {
  margin: 0;
}

.kyno-mykyno__text {
  margin-top: 16px;
}

.kyno-mykyno__text p {
  margin: 0 0 16px;
}

.kyno-mykyno__text strong {
  font-weight: 700;
}

/* Akkordeon "Mehr erfahren" (eigenes Skript, unabhängig von Webflow-IX2) */
.kyno-acc {
  margin-top: 10px;
  margin-bottom: 40px;
}

.kyno-acc__btn {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  color: #fff;
  font: inherit;
  text-align: left;
}

.kyno-acc__title {
  display: block;
}

.kyno-acc__arrow-wrap,
.kyno-acc__arrow {
  display: flex;
}

.kyno-acc__arrow span {
  display: block;
}

.kyno-acc__arrow {
  transition: transform .3s ease;
}

.kyno-acc.is-open .kyno-acc__arrow {
  transform: rotate(180deg);
}

.kyno-acc__pane {
  height: 0;
  overflow: hidden;
  transition: height .35s ease;
}

.kyno-acc__content {
  padding-top: 16px;
}

.kyno-acc__content p {
  margin: 0 0 16px;
}

/* 4 Teaser-Kacheln */
.kyno-teasers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 1.6vw;
  row-gap: 40px;
  width: 100%;
  margin-top: 20px;
}

.kyno-teaser.inhalt.effect {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  height: auto;
  color: #fff;
  text-decoration: none;
}

.kyno-teaser__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 20px;
}

.kyno-teaser__title {
  width: 100%;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .kyno-teasers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

@media screen and (max-width: 991px) {
  .section-angebote.dark-gray-to-black.kyno-mykyno {
    padding: 80px 40px 40px;
  }
}

@media screen and (max-width: 767px) {
  .section-angebote.dark-gray-to-black.kyno-mykyno {
    padding: 60px 20px 24px;
  }

  .kyno-mykyno__intro {
    display: block;
  }
}

/* ---------------------------------------------------------------------
   Button „Ansehen“ (Produktkacheln auf ausrustung/pullover-t-shirts.html)
   --------------------------------------------------------------------- */
.kyno-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-top: auto;
  padding: 0 22px;
  border: 1.5px solid #fff;
  border-radius: 999px;
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.kyno-card__btn:hover,
.kyno-card__btn:focus-visible {
  background-color: #fff;
  color: #000;
}

/* Ausrüstungsseite: „Ansehen“ unter Titel/Hinweis der Produktkachel */
.kyno-product .kyno-product__hint {
  margin-bottom: 12px;
}

.kyno-product__btn,
.kyno-product .kyno-card__btn {
  margin-top: auto;
}

@media screen and (max-width: 767px) {
  .kyno-card__btn {
    width: 100%;
    padding: 0 8px;
    font-size: 15px;
    letter-spacing: .03em;
  }
}

/* ---------------------------------------------------------------------
   Aufgaben 7 + 8 – Produktkacheln (Ausrüstungsseiten)
   --------------------------------------------------------------------- */
.kyno-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 24px;
  width: 100%;
}

.kyno-products--1 {
  grid-template-columns: minmax(0, 1fr);
}

.kyno-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
}

.kyno-product__link {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1.5px solid #fff;
  border-radius: 20px;
}

.kyno-product__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform .3s ease;
}

.kyno-product__link:hover .kyno-product__img,
.kyno-product__link:focus-visible .kyno-product__img {
  transform: scale(1.03);
}

.kyno-product__title {
  width: 100%;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}

.kyno-product__hint {
  margin: 6px 0 0;
  color: #cfcfcf;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

@media screen and (max-width: 991px) {
  .kyno-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kyno-products--1 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------
   Aufgabe 9 – Gutscheine & 10er-Karten: 3 gleich breite Spalten
   --------------------------------------------------------------------- */
.w-layout-layout.quick-stack-3.kyno-voucher-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 40px 24px;
  width: 100%;
}

.kyno-voucher-grid .w-layout-cell {
  min-width: 0;
}

.kyno-voucher-link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.kyno-voucher-grid .small-heading {
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Aufgabe 11 – Mobile Ansicht (Tablet 768 px / Handy 375 px)
   --------------------------------------------------------------------- */

/* Überschriften nie abschneiden, sondern umbrechen */
.titelheading,
.heading-1,
.heading-3,
.heading-87,
.small-heading {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Bilder und Einbettungen nie breiter als der Bildschirm */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
}

/* Lautstärke-Knopf des Startvideos (überschreibt den Inline-Stil des Embeds) */
#home .audio-container {
  position: absolute;
  top: auto;
  left: auto;
  z-index: 60;
}

#home .audio-container .play-button {
  width: 56px;
  height: 56px;
}

@media screen and (max-width: 991px) {
  /* Kopfbereich: Platz für den Sprachumschalter oberhalb des Logos */
  .navbar-hover.hauptfarbe {
    padding-top: 52px;
  }

  .navbar-hover .code-embed-2 {
    inset: -52px 12px auto auto;
    width: auto;
    height: 52px;
    margin-right: 0;
  }

  .gtranslate_wrapper,
  .gtranslate_wrapper a,
  .gt_switcher,
  .gt_switcher .gt_selected a,
  .gt_switcher .gt_option a {
    font-size: 13px !important;
    white-space: nowrap;
  }

  /* Burger-Menü */
  .w-nav-button.hauptfarbe-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    align-self: center;
  }

  /* Geöffnetes Menü vollständig scroll- und bedienbar */
  .w-nav-overlay {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-menu-3[data-nav-menu-open] {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-link-3,
  .nav-link-3.flie-text {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Tippflächen mind. 44 px */
  .button,
  .w-button,
  input[type="submit"],
  .pdf-button,
  .pdf-button-2,
  .accordion-tab-button,
  .accordion-tab-button-dark,
  .accordion-tab-button-dark-2,
  .w-dropdown-toggle {
    min-height: 44px;
  }

  .div-block-back a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Lautstärke-Knopf Tablet */
  #home .audio-container {
    right: 16px;
    bottom: 16px;
  }

  #home .audio-container .play-button {
    width: 52px;
    height: 52px;
  }
}

@media screen and (max-width: 767px) {
  /* Große Abschnittsüberschriften */
  .titelheading.heading-1,
  .heading.heading-1,
  .heading-left.heading-1:not(.smaller),
  .heading-sml.heading-1:not(.smaller) {
    font-size: 44px;
    line-height: 48px;
  }

  .heading.links.heading-1.kontakt {
    font-size: 34px;
    line-height: 40px;
  }

  .accordion-question-header,
  .accordion-question-header-3,
  .accordion-question-header-4 {
    font-size: 18px;
    line-height: 24px;
  }

  /* Lautstärke-Knopf Handy */
  #home .audio-container {
    right: 12px;
    bottom: 12px;
  }

  #home .audio-container .play-button {
    width: 48px;
    height: 48px;
  }

  /* Kontaktformular */
  .contact-form {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
  }

  .contact-form .form-grid {
    width: 100%;
  }

  .text-field-4,
  .contact-form input[type="submit"] {
    width: 100%;
  }

  .checkbox-field-2 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-left: 0;
  }

  .checkbox-field-2::before,
  .checkbox-field-2::after {
    display: none;
  }

  .checkbox-field-2 .checkbox-2 {
    flex: none;
    float: none;
    width: 22px;
    height: 22px;
    margin: 0 4px 0 0;
  }

  /* Kachel-Raster einspaltig */
  ._3er,
  ._3er.space.smaller-space.yop-space-gap,
  .kyno-teasers,
  .kyno-products,
  .w-layout-layout.quick-stack-3.kyno-voucher-grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 24px;
  }

  .kyno-teaser.inhalt.effect {
    grid-column: auto;
    justify-self: center;
    width: 100%;
    max-width: 360px;
  }
}

@media screen and (max-width: 991px) {
  /* Ausrüstungsseiten: Zurück-Button nicht über den Beschriftungen */
  .no-overflow.hauptfarbe.bg-image.center {
    padding-bottom: 120px;
  }

  .no-overflow.hauptfarbe.bg-image.center .div-block-back {
    top: auto;
    bottom: 24px;
  }
}

/* Aufgabe 9 – Reparatur: Webflow-ID-Regel (#w-node-…{1fr 1fr}) übersteuern */
#w-node-_1893943f-02da-ca88-c0d2-e72b2aea3980-1f0cf73e.kyno-voucher-grid {
  grid-template-rows: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 767px) {
  #w-node-_1893943f-02da-ca88-c0d2-e72b2aea3980-1f0cf73e.kyno-voucher-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------
   Mobile Ansicht 390×844 / 375×667 – Nachbesserung
   --------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  /* Geöffnetes Menü: Höhe auf den sichtbaren Bereich unter dem Kopf begrenzen,
     damit auch bei gesperrtem Seiten-Scroll (data-no-scroll) alle Punkte erreichbar sind */
  .w-nav-overlay,
  .nav-menu-3[data-nav-menu-open] {
    max-height: calc(90vh - 62px);
    max-height: calc(100svh - 10vh - 62px);
  }

  /* Footer-Kontakt (Webflow: 0.95vw) lesbar machen */
  .email.flie-text._0-73vw,
  .email-1.flie-text {
    font-size: 15px;
    line-height: 22px;
    overflow-wrap: anywhere;
  }

  /* Footer-Links (Social-Icons, Telefon/Mail/Web) mit Tippfläche ≥ 44 px */
  .footer-1 .link-block.w-inline-block,
  .footer-1 .link.w-inline-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

@media screen and (max-width: 767px) {
  /* Lange deutsche Wörter (z. B. „Geruchskonditionierung“) umbrechen statt abschneiden */
  h1,
  h2,
  h3,
  .titelheading,
  .heading-1,
  .heading-2,
  .heading-3,
  .heading-87,
  .small-heading {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

@media screen and (max-width: 479px) {
  /* Handy: Logo und Burger-Knopf stehen untereinander (+48 px Kopfhöhe) */
  .w-nav-overlay,
  .nav-menu-3[data-nav-menu-open] {
    max-height: calc(90vh - 110px);
    max-height: calc(100svh - 10vh - 110px);
  }
}

/* ---------------------------------------------------------------------
   Bereich „Matthias“: Das große Porträt wurde aus dem HTML entfernt; das Foto
   (1791924528801-matthias-mp.jpg) öffnet sich nur noch über den Button
   „Matthias“ (Lightbox ohne Bildunterschrift). Regeln bleiben als Absicherung.
   --------------------------------------------------------------------- */
.kyno-portrait {
  object-position: 50% 30%;
}

@media screen and (max-width: 991px) {
  .relative.kyno-portrait-wrap {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Mobile Ansicht – Prüfung 375 / 414 / 768 px
   --------------------------------------------------------------------- */
/* Abschnitt „Über mich“ darf nie seitlich überlaufen */
#matthias {
  overflow-x: clip;
}

@media screen and (max-width: 767px) {
  /* Teaser-Kacheln: zwei kleine Kacheln nebeneinander statt fünf großer untereinander */
  .kyno-teasers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 20px;
  }

  .kyno-teaser.inhalt.effect {
    width: 100%;
    max-width: none;
  }

  .kyno-teaser__img {
    border-radius: 12px;
  }

  .kyno-teaser__title.small-heading.heading-2 {
    margin-top: 10px;
    font-size: 16px;
    line-height: 21px;
  }

  /* Ausrüstungsseiten: Produktkacheln zwei kleine nebeneinander */
  .kyno-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 28px;
  }

  .kyno-products--1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .kyno-product__link {
    border-radius: 12px;
  }

  .kyno-product__title.small-heading.heading-2 {
    margin-top: 10px;
    font-size: 16px;
    line-height: 21px;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .kyno-product__hint {
    font-size: 15px;
    line-height: 20px;
  }

  .kyno-product__btn {
    width: 100%;
    padding: 0 8px;
  }
}

@media screen and (max-width: 359px) {
  .kyno-teasers,
  .kyno-products {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 479px) {
  /* Fließtext mind. 15 px (Webflow setzt hier 14 px) */
  .paragraph-links,
  .paragraph-links.flie-text {
    font-size: 15px;
    line-height: 22px;
  }
}

@media screen and (max-width: 991px) {
  /* Footer-Überschriften (Webflow: 12 px) lesbar */
  .heading-footer.heading-3 {
    font-size: 15px;
    line-height: 20px;
  }
}

@media screen and (max-width: 991px) {
  /* Burger-Menü: Unterpunkt „Matthias“ unter „Über mich“ immer sichtbar,
     da Tippen auf „Über mich“ selbst zum Abschnitt springt (kein Hover am Handy) */
  .nav-menu-3 .dropdown-menu-2 .dropdown-list-17.w-dropdown-list {
    display: block;
    position: static;
    padding-top: 0;
    background-color: transparent;
  }

  .nav-menu-3 .dropdown-menu-2 .dropdown-list-17 .nav-link-3 {
    padding-left: 24px;
  }

  .nav-menu-3 .dropdown-menu-2 .image-105 {
    display: none;
  }
}

/* Webflow-Export behält 150 px Seitenabstand auch am Handy bei –
   Inhalte der Abschnitte „Über mich“/„Philosophie“ wurden dadurch abgeschnitten */
@media screen and (max-width: 991px) {
  .no-overflow-1 {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media screen and (max-width: 767px) {
  .no-overflow-1 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 991px) {
  /* Textspalten im 2er-Raster dürfen schrumpfen (sonst ragen sie rechts aus dem Bild) */
  ._2er-grid > .inhalt-rechts,
  ._2er-grid > .inhalt-right {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }
}

/* Kurze Kachel-Titel nicht unnötig trennen („Tas-sen“) */
.kyno-teaser__title,
.kyno-teaser__title.small-heading.heading-2 {
  -webkit-hyphens: manual;
  hyphens: manual;
}

@media screen and (max-width: 991px) {
  /* „Mehr erfahren“ nicht doppelt: ab Tablet zeigt Webflow die umrandete
     Variante (.pdf-button-2.dropdwon) – die Desktop-Variante davor ausblenden */
  .accordion-item-wrapper:not(.kyno-acc):has(+ .pdf-button-2.dropdwon) {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Footer-Claim „Eure Zeit. / Eure Verbindung. / Euer Abenteuer.“
   Gestaltung wie .kyno-claim__line (Schrift .heading-1, Kasten #bab6ad,
   Schrift #000, Versalien, padding .16em .42em, line-height 1.24).
   Lücke zwischen den Kästen = 8 px schwarzer Container-Hintergrund.
   --------------------------------------------------------------------- */
.kyno-claim.kyno-claim--footer {
  margin: 0;
  padding: 0;
  align-self: auto;
  width: fit-content;
  max-width: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

.kyno-claim--footer .kyno-claim__line,
.kyno-claim--footer .kyno-claim__line.heading-1 {
  font-size: clamp(1.1rem, 1.6vw, 1.75rem);
  -webkit-hyphens: manual;
  hyphens: manual;
}

.kyno-claim--footer .kyno-claim__line:nth-child(2) {
  margin-left: 1.2em;
  max-width: calc(100% - 1.2em);
}

.kyno-claim--footer .kyno-claim__line:nth-child(3) {
  margin-left: 2.4em;
  max-width: calc(100% - 2.4em);
}

@media screen and (max-width: 767px) {
  .kyno-claim.kyno-claim--footer {
    margin-left: auto;
    margin-right: auto;
    /* Abstand zur nächsten Footer-Spalte („Sonstiges“) im gestapelten Footer */
    margin-bottom: 16px;
    padding-top: 0;
  }

  .kyno-claim--footer .kyno-claim__line,
  .kyno-claim--footer .kyno-claim__line.heading-1 {
    font-size: 18px;
  }

  .kyno-claim--footer .kyno-claim__line:nth-child(2) {
    margin-left: 1.2em;
  }

  .kyno-claim--footer .kyno-claim__line:nth-child(3) {
    margin-left: 2.4em;
  }
}

/* ---------------------------------------------------------------------
   MyKyno – Rubrik-Kacheln (Buttons) + Karussell je Rubrik
   --------------------------------------------------------------------- */
.kyno-rubric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kyno-rubric:focus-visible,
.kyno-carousel__slide:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 20px;
}

.kyno-rubric .kyno-teaser__title {
  color: #fff;
}

/* Bildrahmen: Vergrößerung bleibt innerhalb der runden Ecken */
.kyno-img-frame {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  isolation: isolate;
}

.kyno-rubric .kyno-teaser__img,
.kyno-carousel__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 20px;
}

/* Bildeffekt: schwarz-weiß, Hover = farbig + leicht größer (nur dieses Bild) */
.kyno-fx-img {
  filter: grayscale(100%);
  transition: filter .35s ease, transform .35s ease;
}

@media (hover: hover) {
  .kyno-fx-img:hover {
    filter: grayscale(0);
    transform: scale(1.05);
  }
}

.kyno-rubric.is-active .kyno-fx-img,
.kyno-rubric:focus-visible .kyno-fx-img,
.kyno-carousel__slide:focus-visible .kyno-fx-img {
  filter: grayscale(0);
}

/* Karussell */
.kyno-carousel {
  grid-column: 1 / -1;
  order: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.kyno-carousel[hidden] {
  display: none;
}

.kyno-carousel__prev,
.kyno-carousel__next {
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}

.kyno-carousel__prev svg,
.kyno-carousel__next svg {
  display: block;
  width: 22px;
  height: 22px;
}

.kyno-carousel__prev:focus-visible,
.kyno-carousel__next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.kyno-carousel__prev:disabled,
.kyno-carousel__next:disabled {
  opacity: .3;
  cursor: default;
}

.kyno-carousel.no-arrows .kyno-carousel__prev,
.kyno-carousel.no-arrows .kyno-carousel__next {
  display: none;
}

.kyno-carousel__track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kyno-carousel__track::-webkit-scrollbar {
  display: none;
}

.kyno-carousel__slide {
  flex: 0 0 calc((100% - 3 * 16px) / 4);
  min-width: 0;
  scroll-snap-align: start;
  color: #fff;
  text-decoration: none;
}

.kyno-carousel__caption,
.kyno-mykyno .kyno-carousel__caption {
  margin: 10px 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Anordnung: Desktop – Karussell unter der Rubrik-Reihe */
.kyno-rubric--1 { order: 1; }
.kyno-rubric--2 { order: 2; }
.kyno-rubric--3 { order: 3; }
.kyno-rubric--4 { order: 4; }

@media screen and (max-width: 991px) {
  /* Tablet/Handy (2 Spalten): Karussell direkt unter der Reihe der Rubrik */
  .kyno-rubric--1 { order: 1; }
  .kyno-rubric--2 { order: 2; }
  .kyno-carousel--1,
  .kyno-carousel--2 { order: 3; }
  .kyno-rubric--3 { order: 4; }
  .kyno-rubric--4 { order: 5; }
  .kyno-carousel--3,
  .kyno-carousel--4 { order: 6; }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .kyno-carousel__slide {
    flex-basis: calc((100% - 2 * 16px) / 3);
  }
}

@media screen and (max-width: 767px) {
  .kyno-rubric .kyno-teaser__img {
    border-radius: 20px;
  }

  .kyno-carousel {
    gap: 8px;
  }

  .kyno-carousel__slide {
    flex-basis: 78%;
  }

  .kyno-carousel__caption,
  .kyno-mykyno .kyno-carousel__caption {
    font-size: 15px;
    line-height: 20px;
  }
}

@media screen and (max-width: 359px) {
  /* einspaltig: Karussell direkt unter seiner Rubrik (DOM-Reihenfolge) */
  .kyno-rubric--1, .kyno-rubric--2, .kyno-rubric--3, .kyno-rubric--4,
  .kyno-carousel--1, .kyno-carousel--2, .kyno-carousel--3, .kyno-carousel--4 {
    order: 0;
  }
}

/* ---------------------------------------------------------------------
   Handy: „Willkommen bei Kyno Adventure“ linksbündig, ohne Blocksatz-Lücken
   --------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  #matthias .grid-19._3 > .paragraph-links.flie-text.text-bigger {
    text-align: left;
    text-align-last: left;
    word-spacing: normal;
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: normal;
  }
}

/* ==========================================================================
   MyKyno-Kollektion: am Smartphone hinter Button „Kollektion ansehen“
   (Desktop/Tablet ≥768px unverändert, Button dort ausgeblendet)
   ========================================================================== */
.kyno-collection-toggle {
  display: none;
}

@media screen and (max-width: 767px) {
  .kyno-collection-toggle,
  .kyno-collection-toggle.accordion-tab-button {
    display: flex;
    width: 100%;
    min-height: 44px;
    margin: 0 0 20px;
    padding: 11px 16px;
    border: 0;
    border-radius: 0;
    color: #fff;
    font: inherit;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    justify-content: flex-start;
    align-items: center;
  }

  .kyno-teasers:not(.is-open) {
    display: none;
  }
}

/* ==========================================================================
   PROMPT 3 – Aufgabe 1: Desktop (ab 992 px) Porträt bei „Über mich“ ausblenden,
   Textspalte nimmt die volle Breite ein (Porträt-Element inzwischen aus dem HTML entfernt)
   ========================================================================== */
@media screen and (min-width: 992px) {
  #matthias .relative.kyno-portrait-wrap {
    display: none;
  }

  #matthias ._2er-grid.center {
    grid-template-columns: minmax(0, 1fr);
  }

  #matthias ._2er-grid.center > .inhalt-rechts {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

/* ==========================================================================
   PROMPT 3 – Aufgabe 2: MyKyno einheitlich schwarz statt Grauverlauf
   (Buttons „Mehr lesen“/„Kollektion ansehen“ behalten ihre Button-Fläche)
   ========================================================================== */
.kyno-mykyno,
.section-angebote.dark-gray-to-black.kyno-mykyno {
  background: #000 !important;
  background-image: none !important;
}

.kyno-mykyno__inner,
.kyno-mykyno__intro,
.kyno-mykyno__text,
.kyno-mykyno .kyno-acc,
.kyno-mykyno .kyno-acc__pane,
.kyno-mykyno .kyno-acc__content,
.kyno-mykyno .kyno-teasers,
.kyno-mykyno .kyno-rubric,
.kyno-mykyno .kyno-img-frame,
.kyno-mykyno .kyno-carousel,
.kyno-mykyno .kyno-carousel__track,
.kyno-mykyno .kyno-carousel__slide {
  background-color: transparent;
  background-image: none;
}

/* ==========================================================================
   PROMPT 3 – Aufgabe 3: Lehrgangsseiten – Fließtext am Handy in voller Breite,
   linksbündig ohne Blocksatz-Lücken
   ========================================================================== */
@media screen and (max-width: 991px) {
  .no-overflow.hauptfarbe.bg-image-2.top {
    overflow-x: clip;
  }

  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media screen and (max-width: 767px) {
  .no-overflow.hauptfarbe.bg-image-2.top {
    padding-left: 20px;
    padding-right: 20px;
  }

  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper .paragraph-links.flie-text {
    text-align: left;
    text-align-last: left;
    word-spacing: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 1em;
  }
}

/* ==========================================================================
   PROMPT 3 – Aufgabe 4: Handy – „Willkommen bei / Kyno Adventure“ zweizeilig
   ========================================================================== */
@media screen and (max-width: 767px) {
  #matthias .grid-19._3 {
    align-items: center;
    gap: 12px;
  }

  #matthias .grid-19._3 > .small-icon {
    flex: 0 0 auto;
  }

  #matthias .grid-19._3 > .paragraph-links.flie-text.text-bigger {
    font-size: clamp(1.5rem, 8.2vw, 2rem);
    line-height: 1.2;
  }

  #matthias .kyno-welcome-name {
    display: block;
    white-space: nowrap;
  }

  #matthias .inhalt-rechts > p.paragraph-links.flie-text:not(.text-bigger) {
    margin-top: 0;
  }
}

/* ==========================================================================
   PROMPT 4 – Aufgabe 2: MyKyno – auch die Buttons „Mehr lesen“ /
   „Kollektion ansehen“ ohne graue Fläche (schwarz mit weißem Rahmen)
   ========================================================================== */
.kyno-mykyno .accordion-tab-button,
.kyno-mykyno .kyno-acc__btn,
.kyno-mykyno .kyno-collection-toggle.accordion-tab-button {
  background-color: #000;
  background-image: none;
  border: 1.5px solid #fff;
  color: #fff;
}

.kyno-mykyno .accordion-tab-button:hover,
.kyno-mykyno .accordion-tab-button:focus-visible {
  background-color: #fff;
  color: #000;
}

.kyno-mykyno .accordion-tab-button:hover .accordion-question-header,
.kyno-mykyno .accordion-tab-button:focus-visible .accordion-question-header {
  color: #000;
}

.kyno-mykyno .accordion-tab-button:hover .arrow-left,
.kyno-mykyno .accordion-tab-button:hover .arrow-right,
.kyno-mykyno .accordion-tab-button:focus-visible .arrow-left,
.kyno-mykyno .accordion-tab-button:focus-visible .arrow-right {
  background-color: #000;
}

/* ==========================================================================
   PROMPT 4 – Aufgabe 3: Lehrgangsseiten + Startseite am Handy (≤767 px):
   16 px Seitenabstand, Textspalte 100 %, 16 px / 1.6
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* Lehrgangsseiten */
  .no-overflow.hauptfarbe.bg-image-2.top {
    padding-left: 16px;
    padding-right: 16px;
  }

  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    align-items: stretch;
  }

  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper > *,
  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper .heading-left,
  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper .divider,
  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper .pdf-button-2.dropdwon,
  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper .accordion-pane-2,
  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper .accordion-pane-content,
  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper ul,
  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper ol {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper .accordion-pane-content {
    padding-left: 0;
    padding-right: 0;
  }

  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper ul,
  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper ol {
    padding-left: 1.2em;
  }

  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper .paragraph-links.flie-text,
  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper li {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Startseite */
  .no-overflow-1 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .no-overflow-1 .inhalt-rechts,
  .no-overflow-1 .inhalt-right {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .section-angebote.dark-gray-to-black.kyno-mykyno {
    padding-left: 16px;
    padding-right: 16px;
  }

  .no-overflow-1 .paragraph-links.flie-text:not(.text-bigger),
  .kyno-mykyno__text p,
  .kyno-acc__content p {
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
  }
}

/* ==========================================================================
   PROMPT 4 – Aufgabe 4: Handy – Zwischenüberschrift „Über mich“ unter
   „Willkommen bei / Kyno Adventure“ (Desktop ausgeblendet = unverändert)
   ========================================================================== */
.kyno-about-heading {
  display: none;
}

@media screen and (max-width: 767px) {
  /* abschließendes <br> nach dem Block „Kyno Adventure“ erzeugt sonst eine Leerzeile */
  #matthias .grid-19._3 > .text-bigger > br {
    display: none;
  }

  #matthias .kyno-about-heading {
    display: block;
    margin: 24px 0 12px;
    font-size: clamp(1.25rem, 5.5vw, 1.5rem);
    line-height: 1.3;
    color: #fff;
  }
}

/* ==========================================================================
   PROMPT 5 – Aufgabe 1: Desktop „Über mich“ ohne Porträt – Textspalte links
   mit lesbarer Zeilenlänge, die Wolfs-Grafik rechts bleibt sichtbar
   ========================================================================== */
@media screen and (min-width: 992px) {
  #matthias ._2er-grid.center > .inhalt-rechts {
    max-width: 860px;
    justify-self: start;
  }
}

/* ==========================================================================
   PROMPT 5 – Aufgabe 3: Handy (≤767 px) – restliche Textblöcke volle Breite,
   mind. 16 px / 1.6 (schlägt auch die globale 15-px-Regel ≤479 px)
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* Lehrgangsseiten: Zwischenüberschriften + „Mehr erfahren“ volle Breite */
  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper .heading-left.heading-1,
  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper .accordion-tab-button-dark {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
  }

  .no-overflow.hauptfarbe.bg-image-2 .text-image-wrapper .accordion-question-header-3 {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Startseite: Akkordeon-Texte Über mich / Philosophie */
  .no-overflow-1 .accordion-pane-content-2 .paragraph-links.flie-text,
  .no-overflow-1 .accordion-pane-content .paragraph-links.flie-text {
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
  }

  /* MyKyno-Fließtext: 16 px statt 15 px, linksbündig ohne Blocksatz-Lücken */
  .kyno-mykyno .kyno-mykyno__text .paragraph-links.flie-text,
  .kyno-mykyno .kyno-acc__content .paragraph-links.flie-text {
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
  }

  /* Gästebuch-Karten: 16 px / 1.6, linksbündig */
  #gstebuch .text-mittig-1.flie-text {
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* ==========================================================================
   PROMPT 5 – Aufgabe 5: Footer-Dreizeiler – dritte Zeile „Euer Abenteuer.“
   am Desktop weiter nach rechts (Kundenwunsch: bis etwa zur grünen Markierung).
   position:relative verschiebt nur die Zeile, ohne die Footer-Spalten
   (space-between) neu zu verteilen. Der Versatz wächst mit der Breite und
   lässt mit Sicherheitsreserve (Schrift-Metriken der Footer-Spalten
   schwanken je nach geladener Webfont um ca. 20 px) mind. 40 px Abstand zur
   Spalte „Sonstiges“ (≈ 12 px bei 1440, 21 px bei 1512, 48 px bei 1728,
   72 px bei 1920 px; unter ca. 1345 px kein Versatz).
   Zeilen 1 + 2 und Tablet/Handy bleiben unverändert.
   ========================================================================== */
@media screen and (min-width: 992px) {
  .kyno-claim--footer .kyno-claim__line:nth-child(3) {
    position: relative;
    left: clamp(0px, calc(12.5vw - 168px), 110px);
  }
}