/* ===== 3knocks: Local Fonts (self-hosted) ===== */

/* Playfair Display */
@font-face{
  font-family:"PlayfairDisplay";
  src:url("/Portals/_default/Skins/Ozone/fonts/playfair/playfair-display-v40-latin-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PlayfairDisplay";
  src:url("/Portals/_default/Skins/Ozone/fonts/playfair/playfair-display-v40-latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PlayfairDisplay";
  src:url("/Portals/_default/Skins/Ozone/fonts/playfair/playfair-display-v40-latin-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}

/* Roboto Slab */
@font-face{
  font-family:"RobotoSlab";
  src:url("/Portals/_default/Skins/Ozone/fonts/roboto_slab/roboto-slab-v36-latin-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"RobotoSlab";
  src:url("/Portals/_default/Skins/Ozone/fonts/roboto_slab/roboto-slab-v36-latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

/* Open Sans */
@font-face{
  font-family:"OpenSans";
  src:url("/Portals/_default/Skins/Ozone/fonts/open_sans/open-sans-v44-latin-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"OpenSans";
  src:url("/Portals/_default/Skins/Ozone/fonts/open_sans/open-sans-v44-latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"OpenSans";
  src:url("/Portals/_default/Skins/Ozone/fonts/open_sans/open-sans-v44-latin-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}

/* Mapping erzwingen (Sizes weiter via StyleSwitcher möglich) */
body,p,li{ font-family:"OpenSans", Arial, sans-serif !important; }
h1,h2,h3{ font-family:"PlayfairDisplay", Georgia, serif !important; }
h4,h5,h6{ font-family:"RobotoSlab", Georgia, serif !important; }

/* ====== 3knocks: Responsive Typography (self-hosted fonts active) ====== */

/* Smartphones */
@media (max-width: 640px) {
  h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: 28px !important;
    line-height: 1.18 !important;
  }

  h3 {
    font-size: 22px !important;
    line-height: 1.22 !important;
  }

  h4 {
    font-size: 18px !important;
    line-height: 1.28 !important;
  }

  h5 {
    font-size: 16px !important;
    line-height: 1.32 !important;
  }

  h6 {
    font-size: 14px !important;
    line-height: 1.36 !important;
  }

  body,
  p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .btn,
  button {
    font-size: 14px !important;
    padding: 10px 18px !important;
  }

  blockquote {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
}

/* Tablets (Hoch- & Querformat) */
@media (min-width: 641px) and (max-width: 992px) {
  h1 {
    font-size: 38px !important;
    line-height: 1.12 !important;
  }

  h2 {
    font-size: 32px !important;
    line-height: 1.16 !important;
  }

  h3 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  h4 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  h5 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  h6 {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  body,
  p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .btn,
  button {
    font-size: 15px !important;
    padding: 12px 22px !important;
  }

  blockquote {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
}
/* ==========================================================
   3knocks :: Font Override Patch
   Ziel: Alle vererbten Ozone/PT Sans/Roboto Condensed Definitionen neutralisieren
   ========================================================== */

/* 1. Basis-Reset */
body, .Normal,
.eds_pageDetails .eds_pageDescription > span,
.eds_breadCrumbs .eds_breadCrumb,
.eds_breadCrumbs .eds_breadcrumbSeparator,
.edsCopyrightBg .edsCopyright,
.eds_footerBg,
.eds_footerBg *,
.dnnLogin,
.dnnRegister,
.dnnFormLabel,
.dnnFormMessage,
#dnn_dnnUser_enhancedRegisterLink,
#dnn_dnnUser_enhancedLoginLink {
  font-family: "OpenSans", Arial, sans-serif !important;
  font-weight: 400;
  letter-spacing: .2px;
}

/* 2. Header / Topbar / Login UI */
.eds_headerContainer,
.eds_headerContainer *,
.eds_headerBackground,
.eds_headerBackground *,
.eds_userLogin,
.eds_userLogin *,
.loginGroup,
.registerGroup,
.eds_search,
.eds_search *,
.dnnLogin,
.dnnLogin * {
  font-family: "OpenSans", Arial, sans-serif !important;
  font-weight: 400;
}

/* 3. Überschriften */
h1, h2, h3 {
  font-family: "PlayfairDisplay", Georgia, serif !important;
  font-weight: 400;
}
h4, h5, h6 {
  font-family: "RobotoSlab", Georgia, serif !important;
  font-weight: 400;
}

/* 4. Kleintexte in Modulen (z. B. Breadcrumbs, Copyright, Buttons) */
.eds_breadCrumbs, .eds_breadCrumbs *,
.eds_pageDetails, .eds_pageDetails *,
.edsCopyright, .edsCopyright *,
.dnnPrimaryAction, .dnnSecondaryAction,
.btn, button {
  font-family: "OpenSans", Arial, sans-serif !important;
}

/* 5. Username & Login Link Farben (Topbar) */
.header-username a {
  color: #F7F4EF;
  opacity: 0.9;
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.header-username a:hover {
  color: #3B2C25; /* Warm Brown Hover */
  opacity: 1;
}

/* 6. Sicherheit: Fallback gegen Theme-spezifische Font Imports */
@import url(''); /* deaktiviert mögliche Google Fonts-Calls aus Meta.json/Base.css */

/* ===== 3Knocks :: Main Menu Styling Override ===== */
.EasyDNNSkin_Ozone .eds_menuBg .edsmm_itemContainer,
.EasyDNNSkin_Ozone .responsAbilityMenu.eds_menuType2 .raMenuWrapper > ol > li > span > a.edsmm_itemContainer {
  font-family: "RobotoSlab", Georgia, serif !important;
  font-weight: 500;
  font-size: 21px;
  line-height: 56px;
  letter-spacing: 0.2px;
  color: #F7F4EF;
  text-decoration: none;
  text-transform: none;
  text-shadow: none;
  transition: all 0.25s ease-in-out;
}

/* Hover – sanft auf Soft Ocher (#C99E56) */
.EasyDNNSkin_Ozone .eds_menuBg .edsmm_itemContainer:hover,
.EasyDNNSkin_Ozone .responsAbilityMenu.eds_menuType2 .raMenuWrapper > ol > li > span > a.edsmm_itemContainer:hover {
  color: #C99E56 !important;
}

/* Active – Warm Brown (#3B2C25) */
.EasyDNNSkin_Ozone .eds_menuBg .edsmm_itemContainer.edsmm_active,
.EasyDNNSkin_Ozone .responsAbilityMenu.eds_menuType2 .raMenuWrapper > ol > li.edsmm_active > span > a.edsmm_itemContainer {
  color: #3B2C25 !important;
}

/* Optional: kleine Unterstreichung beim Hover oder Active */
.EasyDNNSkin_Ozone .eds_menuBg .edsmm_itemContainer::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8px;
  height: 0;
  background-color: #C99E56;
  transition: height 0.18s ease-in-out;
}
.EasyDNNSkin_Ozone .eds_menuBg .edsmm_itemContainer:hover::after {
  height: 2px;
}
.EasyDNNSkin_Ozone .eds_menuBg .edsmm_itemContainer.edsmm_active::after {
  height: 3px;
  background-color: #3B2C25;
}
/* 3knocks – Responsive Menu: keine Unterstreichung auf Hover/Focus */
@media (max-width: 992px) {
  .EasyDNNSkin_Ozone .responsAbilityMenu a,
  .EasyDNNSkin_Ozone .responsAbilityMenu a:hover,
  .EasyDNNSkin_Ozone .responsAbilityMenu a:focus {
    text-decoration: none !important;
    border-bottom: 0 !important;
  }

  /* Falls wir die Desktop-Hover-Linie via ::after verwenden: mobil ausblenden */
  .EasyDNNSkin_Ozone .eds_menuBg .edsmm_itemContainer::after {
    display: none !important;
  }
}
/* =========================================================
   3Knocks: Container Headings – Thematic Style System
   Connected to Nature  •  v2.0
   ========================================================= */

/* Basisstil für alle Container-Überschriften */
.eds_containers_Ozone .eds_containerTitle,
.eds_containers_Ozone .eds_containerTitle h2,
.eds_containers_Ozone .eds_containerTitle span {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.3px;
  color: #3B2C25 !important; /* Default: Warm Brown */
  margin-top: 0 !important;
  margin-bottom: 6px !important; /* harmonisch über Linie */
  transition: all 0.3s ease;
}

/* === Farbvarianten nach 3Knocks-Palette ================== */

/* BASE – Off-White Sand (Grundfläche) */
.eds_containers_Ozone .eds_containerTitle.base {
  color: #F7F4EF !important;
}

/* EARTH – Warm Brown (Erdung, Halt) */
.eds_containers_Ozone .eds_containerTitle.earth {
  color: #3B2C25 !important;
}

/* NATURE – Sage Green (Gleichgewicht, Natürlichkeit) */
.eds_containers_Ozone .eds_containerTitle.nature {
  color: #8A9A83 !important;
}

/* FREEDOM – Weathered Blue (Balance, Weite) */
.eds_containers_Ozone .eds_containerTitle.freedom {
  color: #5D7682 !important;
}

/* HEART – Dusty Bordeaux (Wärme, Menschlichkeit) */
.eds_containers_Ozone .eds_containerTitle.heart {
  color: #7C2D37 !important;
}

/* SPIRIT – Soft Ocher (Wärme, Verbundenheit, Licht) */
.eds_containers_Ozone .eds_containerTitle.spirit {
  color: #C99E56 !important;
}

/* SHADOW – Smoky Taupe (Tiefe, Kontrast, Ruhe) */
.eds_containers_Ozone .eds_containerTitle.shadow {
  color: #6B6259 !important;
}

/* ========================================================= */

/* === 3Knocks: Farbklassen – Connected to Nature === */
.base    { color:#F7F4EF; }
.earth   { color:#3B2C25; }
.nature  { color:#8A9A83; }
.freedom { color:#5D7682; }
.heart   { color:#7C2D37; }
.spirit  { color:#C99E56; }
.shadow  { color:#6B6259; }

/* Optional: Hintergrundvarianten */
.bg-base    { background:#F7F4EF; color:#3B2C25; }
.bg-earth   { background:#3B2C25; color:#F7F4EF; }
.bg-nature  { background:#8A9A83; color:#F7F4EF; }
.bg-freedom { background:#5D7682; color:#F7F4EF; }
.bg-heart   { background:#7C2D37; color:#F7F4EF; }
.bg-spirit  { background:#C99E56; color:#3B2C25; }
.bg-shadow  { background:#6B6259; color:#F7F4EF; }

/* ------------------------------------------------------------
   3Knocks Header Line – Soft Top Divider
   Version: 2.0  |  Styleguide: Connected to Nature
   ------------------------------------------------------------ */

.eds_headerBackground::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(107, 98, 89, 0.1); /* Smoky Taupe 10 % */
  z-index: 5;
}

/* ===== 3Knocks – Album Teaser (final) ===== */

.k3-album {
  /* Design-Parameter */
  --k3-cover-max: 500px;
  --k3-gap: 48px;
  --k3-shadow: 0 18px 38px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  --k3-radius: 18px;
  --k3-pill-bg: rgba(201,158,86,0.25);   /* warmer Ocker, transluzent */
  --k3-pill-text: #5b4327;

  margin-top: 47px; /* Luft unter dem Menü */
	 margin-bottom: 47px; /* Luft unter dem Album */
}

/* Zweispaltiges Layout: Cover | Content */
.k3-album__grid {
  display: grid;
  grid-template-columns: minmax(280px, var(--k3-cover-max)) 1fr;
  align-items: start;
  gap: var(--k3-gap);
}

/* Cover mit Schatten – wirkt auch auf Off-White */
.k3-album__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--k3-radius);
  box-shadow: var(--k3-shadow);
  background: #fff; /* kleine Kante, falls Bild transparente Ecken hätte */
}

/* Inhalt */
.k3-album__content {
  margin-top: -4px; /* optisch zu Cover-Unterkante ausbalancieren */
  max-width: 520px; /* verhindert zu lange Zeilen */
}

/* Headline nutzt die Seitenschriften; nur spacing justieren */
.k3-album__content h2 {
  margin: 0 0 10px 0;
  line-height: 1.05;
  color: #3B2C25;
}

/* 3Knocks-Zeile kräftiger */
.k3-album__meta {
  margin: 0 0 14px 0;
  color: #3B2C25;
font-family: "RobotoSlab", serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.28;
	  margin-bottom: 20px;
}

/* Trackliste */
.k3-album__tracks {
  margin: 0 0 12px 0;
  padding-left: 1.4em;  /* Platz für Ziffern */
}

.k3-album__tracks li {
  margin: 6px 0;
  line-height: 1.45;
  color: #3B2C25;
}

/* Coming-soon-Badge unter der Liste (links ausgerichtet) */
.k3-album__pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--k3-pill-bg);
  color: var(--k3-pill-text);
  border: 1px solid rgba(91,74,58,0.12);
  font-size: 1.0rem;
  line-height: 1;
  margin-top: 3px;
	  margin-bottom: 30px;
font-family: "RobotoSlab", serif;
}

/* ==== Responsive: unter 900px einspaltig, engerer Abstand ==== */
@media (max-width: 900px) {
  .k3-album__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .k3-album__content {
    margin-top: 0;
    max-width: 100%;
  }
}

/* ==== Quote im Bottom-Banner (responsive & sauber) ==== */

.k3-quote p {
  font-family: "Playfair Display", serif;   /* richtiger Font-Name */
  font-size: clamp(18px, 2.2vw, 22px);      /* skaliert zwischen 18–22px */
  color: #3B2C25;
  line-height: 1.4;                         /* mehr Luft für kleine Screens */
  text-align: center;
  margin: 15px auto;
  padding: 0 12px;                          /* seitliche Luft für kleine Geräte */
  letter-spacing: 0.2px;
  max-width: 42rem;                         /* verhindert zu lange Zeilen */
}

/* Emphasis wirklich kursiv (einige Skins neutralisieren <em>) */
.k3-quote,
.eds_mainTitle + p em,
p em {
  font-style: italic !important;
  font-family: "Playfair Display", serif;
  color: #3B2C25;
  letter-spacing: 0.2px;
}

/* — Mobile-Feinschliff — */
@media (max-width: 480px) {
  /* runde Bild-Thumbnail zentrieren & nicht zu groß */
  .eds_mainTitle + p .img-circle-thumbnail {
    display: block;
    margin: 10px auto 14px auto;
    max-width: 140px;     /* passe an, falls du größer/kleiner willst */
    height: auto;
  }

  .k3-quote {
    line-height: 1.35;
    margin: 12px auto 20px;
    padding: 0 10px;
  }
}

/* Tracklist in Music */
.tracklist-box {
  background-color: #F7F4EF;
  border: none; /* Kein gelber Rahmen */
  border-radius: 12px;
  padding: 32px 24px;
  margin: 60px auto;
  max-width: 720px;
  box-shadow: none; /* Kein Schatten */
}

.tracklist-title {
  font-family: 'Roboto Slab', serif;
  color: #3B2C25;
  font-size: 28px;
  text-align: center;
  margin-bottom: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tracklist-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: tracknumber;
}

.tracklist-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  justify-content: center;
font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  color: #3B2C25;
  padding: 6px 0;
  border-bottom: 1px solid #E0DAD2;
}

.tracklist-row:last-child {
  border-bottom: none;
}

.track-number::before {
  counter-increment: tracknumber;
  content: counter(tracknumber) ".";
 font-family: 'Open Sans', sans-serif;
  display: inline-block;
  width: 17px;
  text-align: right;
  color: #3B2C25; 
}
.tracklist-row .eds_btn:hover {
  color: #3B2C25 !important;
	justify-self: end;
}
/* get Music */
.icon-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 40px auto;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.icon-wrapper:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.icon-wrapper img {
  width: 45px;
  height: 45px;
  object-fit: contain;
}
.icon-wrapper img[src*="A_M.png"] {
  width: 40px;  /* Apple kleiner */
}

.icon-wrapper img[src*="am.png"] {
  width: 57px;  /* Amazon größer */
}