/* =====================================================================
   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;
  /* Zeilen brechen nicht um (Treppenform bleibt erhalten) */
  white-space: nowrap;
}

/* Treppenform (Prompt 1, 17.10.): „Euer Abenteuer.“ deutlich weiter rechts */
.kyno-claim--footer .kyno-claim__line:nth-child(2) {
  margin-left: 2.4em;
  max-width: calc(100% - 2.4em);
}

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

@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.8em;
    max-width: calc(100% - 1.8em);
  }

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

/* ---------------------------------------------------------------------
   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 6 (Nachbesserung, v7) – Footer-Dreizeiler: dritte Zeile
   „Euer Abenteuer.“ am Desktop deutlich weiter nach rechts (Kundenwunsch laut
   Referenzfoto: Kastenende etwa bis zur grünen Markierung vor „Sonstiges“).
   position:relative verschiebt nur die Zeile, ohne die Footer-Spalten
   (space-between) neu zu verteilen.
   Wunschwert des Kunden: clamp(40px, 4.6vw, 110px) (≈ 66 px bei 1440,
   70 px bei 1512, 88 px bei 1920). Vorrang hat aber die Pflicht „immer
   mind. 24 px Abstand zu Sonstiges“: der freie Raum zwischen Claim-Spalte und
   „Sonstiges“ ist bei 1440 px nur ca. 77 px, bei 1512 px ca. 89 px (PT Sans).
   Deshalb wird der Wunschwert durch calc(12.4vw - 132px) begrenzt (folgt dem
   mit der Breite wachsenden freien Raum, ca. 6–9 px Reserve über 24 px):
   ≈ 0 px bis ~1065, 14 px bei 1180, 27 px bei 1280, 37 px bei 1366,
   47 px bei 1440, 55 px bei 1512, 79 px bei 1728, 88 px bei 1920,
   110 px (Maximum) ab ca. 2390 px.
   Bei 992–1100 px ist die Footer-Zeile so voll, dass schon ohne Versatz kaum
   Luft bleibt: dort sorgt ein Spaltenabstand von 26 px für den
   Mindestabstand; nur die Logo-Spalte gibt dafür Breite ab (Claim, Kontakt
   und Sonstiges brechen nicht um).
   Zeilen 1 + 2 und Tablet/Handy (< 992 px) bleiben unverändert.
   ========================================================================== */
@media screen and (min-width: 992px) {
  /* Prompt 1 (17.10.): Versatz jetzt über margin-left 4.8em (siehe
     Abschnitt „Footer-Claim“) – der frühere left-Versatz würde sich addieren */
  .kyno-claim--footer .kyno-claim__line:nth-child(3) {
    position: static;
    left: auto;
  }

  .div-block-footer1:has(.kyno-claim--footer) {
    column-gap: 26px;
  }

  .div-block-footer1:has(.kyno-claim--footer) > .inhalt-footer:not(._100) {
    flex-shrink: 0;
  }
}

/* ==========================================================================
   PROMPT 1 (17.10.) – Footer-Dreizeiler Treppenform 2.4em / 4.8em:
   Auf Tablet (768–991 px) ist die Footer-Zeile (Logo, Kontakt, Claim,
   Sonstiges) für den breiteren Claim zu schmal – das Logo würde zusammen-
   gedrückt. Deshalb steht der Claim dort in einer eigenen Zeile unter Logo,
   Kontakt und Sonstiges (mittig, Treppenform und Einrückung unverändert).
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .div-block-footer1:has(.kyno-claim--footer) {
    flex-wrap: wrap;
    row-gap: 32px;
  }

  .div-block-footer1 > .inhalt-footer:has(.kyno-claim--footer) {
    order: 10;
    flex: 0 0 100%;
    align-items: center;
  }
}