/*
 * Juwelier Krebs — Cassiopeia Child Template
 * Joomla 6 / Cassiopeia
 * Brand colour: #830f24
 */

:root {
  --krebs-red: #830f24;
  --krebs-red-dark: #650b1b;
  --krebs-red-soft: #f5e9ec;
  --krebs-ink: #202124;
  --krebs-muted: #686868;
  --krebs-paper: #f7f5f2;
  --krebs-white: #fff;
  --krebs-line: #e6e0dd;
  --krebs-radius: .35rem;
  --krebs-shadow: 0 18px 50px rgba(26, 20, 21, .08);

  --cassiopeia-color-primary: var(--krebs-red);
  --cassiopeia-color-link: var(--krebs-red);
  --cassiopeia-color-hover: var(--krebs-red-dark);
  --link-color: var(--krebs-red);
  --link-hover-color: var(--krebs-red-dark);
}

html {
  scroll-behavior: smooth;
}

body.site {
  background: var(--krebs-white);
  color: var(--krebs-ink);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--krebs-red);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
  transition: color .18s ease, opacity .18s ease, border-color .18s ease, background-color .18s ease;
}

a:hover,
a:focus {
  color: var(--krebs-red-dark);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--krebs-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
}

h1, .h1 {
  font-size: clamp(2.3rem, 5vw, 4.65rem);
  margin-bottom: 1.4rem;
}

h2, .h2 {
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  margin-top: 2.5rem;
  margin-bottom: 1.15rem;
}

h3, .h3 {
  font-size: clamp(1.35rem, 2vw, 2rem);
}

p {
  margin-bottom: 1.2rem;
}

/* ---------- Page width / rhythm ---------- */

.site-grid {
  grid-gap: 0;
}

.grid-child,
.container-component > * {
  max-width: 78rem;
}

main {
  min-height: 45vh;
}

.com-content-article,
.blog,
.blog-featured,
.contact,
.com-contact-contact {
  padding-top: clamp(2.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(3rem, 7vw, 6.5rem);
}

.com-content-article > .page-header,
.blog > .page-header,
.blog-featured > .page-header {
  margin-bottom: 2.5rem;
}

.page-header h1,
.page-header h2,
.item-title {
  position: relative;
}

.page-header h1::after,
.page-header h2::after {
  content: "";
  display: block;
  width: 3.75rem;
  height: 2px;
  margin-top: 1rem;
  background: var(--krebs-red);
}

/* ---------- Header ---------- */

.container-header {
  position: relative;
  z-index: 100;
  background: rgba(255, 255, 255, .97);
  background-image: none;
  color: var(--krebs-ink);
  border-top: 4px solid var(--krebs-red);
  border-bottom: 1px solid var(--krebs-line);
  box-shadow: 0 5px 22px rgba(31, 25, 26, .04);
}

.container-header .grid-child {
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.container-header .navbar-brand {
  color: var(--krebs-ink);
  padding: .55rem 0;
}

.container-header .navbar-brand a {
  color: inherit;
  text-decoration: none;
}

.container-header .site-title,
.container-header .navbar-brand .site-title {
  color: var(--krebs-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 400;
  letter-spacing: .02em;
}

.container-header .site-description {
  color: var(--krebs-muted);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.container-header .navbar-toggler {
  color: var(--krebs-red);
  border: 1px solid rgba(131, 15, 36, .28);
}

.container-header .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(131, 15, 36, .14);
}

/* ---------- Main navigation ---------- */

.container-header .mod-menu {
  display: flex;
  align-items: center;
  gap: clamp(.25rem, 1vw, 1.15rem);
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu .nav-link {
  position: relative;
  color: var(--krebs-ink);
  padding: .8rem .6rem;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-decoration: none;
}

.container-header .mod-menu > li > a::after,
.container-header .mod-menu > li > span::after,
.container-header .mod-menu .nav-link::after {
  content: "";
  position: absolute;
  left: .6rem;
  right: .6rem;
  bottom: .48rem;
  height: 1px;
  background: var(--krebs-red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus,
.container-header .mod-menu .nav-link:hover,
.container-header .mod-menu .nav-link:focus {
  color: var(--krebs-red);
}

.container-header .mod-menu > li.active > a::after,
.container-header .mod-menu > li.current > a::after,
.container-header .mod-menu > li > a:hover::after,
.container-header .mod-menu > li > a:focus::after {
  transform: scaleX(1);
}

.container-header .metismenu > li.level-1 > ul {
  background: var(--krebs-white);
  border: 1px solid var(--krebs-line);
  border-top: 2px solid var(--krebs-red);
  border-radius: 0 0 var(--krebs-radius) var(--krebs-radius);
  box-shadow: var(--krebs-shadow);
  padding: .55rem;
}

.container-header .metismenu > li.level-1 > ul a {
  color: var(--krebs-ink);
  padding: .65rem .85rem;
  text-decoration: none;
}

.container-header .metismenu > li.level-1 > ul a:hover,
.container-header .metismenu > li.level-1 > ul a:focus {
  color: var(--krebs-red);
  background: var(--krebs-red-soft);
}

/* ---------- Buttons ---------- */

.btn-primary,
.btn.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  --btn-bg: var(--krebs-red);
  --btn-border-color: var(--krebs-red);
  --btn-hover-bg: var(--krebs-red-dark);
  --btn-hover-border-color: var(--krebs-red-dark);
  --btn-active-bg: var(--krebs-red-dark);
  --btn-active-border-color: var(--krebs-red-dark);
  background: var(--krebs-red);
  border-color: var(--krebs-red);
  border-radius: 2px;
  color: var(--krebs-white);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .8rem 1.3rem;
  text-transform: uppercase;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--krebs-red-dark);
  border-color: var(--krebs-red-dark);
  color: var(--krebs-white);
}

.btn-outline-primary {
  color: var(--krebs-red);
  border-color: var(--krebs-red);
}

.btn-outline-primary:hover {
  color: var(--krebs-white);
  background: var(--krebs-red);
  border-color: var(--krebs-red);
}

/* ---------- Content / imagery ---------- */

.com-content-article img,
.blog img,
.blog-featured img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

.com-content-article figure,
.blog figure,
.blog-featured figure {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.com-content-article .item-image,
.blog .item-image,
.blog-featured .item-image {
  overflow: hidden;
  background: var(--krebs-paper);
}

.com-content-article .item-image img,
.blog .item-image img,
.blog-featured .item-image img {
  display: block;
  width: 100%;
  transition: transform .45s ease;
}

.blog-item:hover .item-image img {
  transform: scale(1.015);
}

/* Blog cards — also useful later for "Aktuelles" */
.blog-items[class*="columns-"] {
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.blog-item {
  background: var(--krebs-white);
  border-bottom: 1px solid var(--krebs-line);
  padding-bottom: 2rem;
}

.blog-item .item-content {
  padding-top: 1.15rem;
}

.article-info {
  color: var(--krebs-muted);
  font-size: .8rem;
  letter-spacing: .04em;
}

.readmore .btn,
a.btn-secondary {
  color: var(--krebs-red);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(131, 15, 36, .35);
  border-radius: 0;
  padding: .25rem 0;
}

.readmore .btn:hover,
a.btn-secondary:hover {
  color: var(--krebs-red-dark);
  border-color: var(--krebs-red-dark);
}

/* ---------- Modules / cards ---------- */

.card,
.moduletable.card,
.moduletable.krebs-card {
  border: 1px solid var(--krebs-line);
  border-radius: var(--krebs-radius);
  box-shadow: none;
}

.card-header {
  color: var(--krebs-ink);
  background: var(--krebs-paper);
  border-bottom: 1px solid var(--krebs-line);
}

.krebs-section,
.moduletable.krebs-section {
  padding-top: clamp(3rem, 7vw, 7rem);
  padding-bottom: clamp(3rem, 7vw, 7rem);
}

.krebs-section--paper,
.moduletable.krebs-section--paper {
  background: var(--krebs-paper);
}

/* Optional classes for future homepage modules */
.krebs-eyebrow {
  color: var(--krebs-red);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.krebs-lead {
  max-width: 52rem;
  color: #3f3f3f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.55;
}

.krebs-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.krebs-tile {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  background: var(--krebs-paper);
}

.krebs-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.krebs-tile:hover img {
  transform: scale(1.025);
}

.krebs-tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem 1.35rem;
  color: var(--krebs-white);
  background: linear-gradient(transparent, rgba(20, 16, 17, .78));
}

/* ---------- Contact / forms ---------- */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  border-color: #d7cfcb;
  border-radius: 2px;
  padding: .7rem .8rem;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: var(--krebs-red);
  box-shadow: 0 0 0 .2rem rgba(131, 15, 36, .1);
}

label {
  color: #383838;
  font-weight: 600;
}

/* ---------- Breadcrumbs ---------- */

.breadcrumb {
  background: transparent;
  color: var(--krebs-muted);
  font-size: .82rem;
}

.breadcrumb a {
  text-decoration: none;
}

/* ---------- Footer ---------- */

.container-footer {
  margin-top: 0;
  background: #201d1e;
  background-image: none;
  color: rgba(255, 255, 255, .76);
  border-top: 4px solid var(--krebs-red);
}

.container-footer .grid-child {
  padding-top: 2.2rem;
  padding-bottom: 2.2rem;
}

.container-footer a {
  color: var(--krebs-white);
}

.container-footer a:hover,
.container-footer a:focus {
  color: #f3cbd2;
}

.container-footer .mod-menu {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.25rem;
}

.container-footer .mod-menu a {
  font-size: .8rem;
  letter-spacing: .04em;
  text-decoration: none;
}

/* ---------- Utility ---------- */

::selection {
  color: var(--krebs-white);
  background: var(--krebs-red);
}

hr {
  border-color: var(--krebs-line);
  opacity: 1;
}

blockquote {
  margin: 2rem 0;
  padding: .4rem 0 .4rem 1.4rem;
  border-left: 2px solid var(--krebs-red);
  color: #444;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
}

/* ---------- Responsive ---------- */

@media (min-width: 992px) {
  .container-header {
    position: sticky;
    top: 0;
  }
}

@media (max-width: 991.98px) {
  .container-header .mod-menu {
    display: block;
    padding: .5rem 0 1rem;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span,
  .container-header .mod-menu .nav-link {
    display: block;
    padding: .7rem .2rem;
  }

  .container-header .mod-menu > li > a::after,
  .container-header .mod-menu > li > span::after,
  .container-header .mod-menu .nav-link::after {
    left: .2rem;
    right: auto;
    width: 2rem;
    bottom: .4rem;
    transform-origin: left;
  }

  .krebs-tiles {
    grid-template-columns: 1fr;
  }

  .krebs-tile {
    min-height: 20rem;
  }
}

@media (max-width: 575.98px) {
  body.site {
    font-size: .98rem;
  }

  .com-content-article,
  .blog,
  .blog-featured,
  .contact,
  .com-contact-contact {
    padding-top: 2.25rem;
    padding-bottom: 3rem;
  }

  h1, .h1 {
    font-size: clamp(2.1rem, 12vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================
   Version 1.1 — navigation / dropdown / refined page layout
   ========================================================== */

/* Header: compact, calm and jewellery-like rather than bulky */
.container-header .container-nav,
.container-header .container-below-top {
  width: min(100% - 2rem, 78rem);
  margin-inline: auto;
}

.container-header .container-nav {
  min-height: 4.6rem;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
}

.container-header .mod-menu {
  margin: 0;
}

.container-header .mod-menu > li {
  position: relative;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li > button,
.container-header .mod-menu .nav-link {
  min-height: 4.6rem;
  display: flex;
  align-items: center;
  padding: 0 .8rem;
}

.container-header .mod-menu > li > a::after,
.container-header .mod-menu > li > span::after,
.container-header .mod-menu .nav-link::after {
  left: .8rem;
  right: .8rem;
  bottom: .9rem;
}

/* Desktop dropdowns: supports Cassiopeia's metismenu output as well as
   Joomla's normal nested mod_menu output. */
@media (min-width: 992px) {
  .container-header .mod-menu > li > ul,
  .container-header .metismenu.mod-menu > li > ul,
  .container-header .metismenu.mod-menu > li > .mm-collapse {
    position: absolute;
    z-index: 1000;
    top: calc(100% - .15rem);
    left: .35rem;
    min-width: 16rem;
    margin: 0;
    padding: .55rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--krebs-line);
    border-top: 2px solid var(--krebs-red);
    box-shadow: 0 20px 45px rgba(30, 20, 22, .13);
  }

  /* Normal nested menu: show on keyboard focus and hover. Metismenu's
     own .mm-show class continues to handle click/touch opening. */
  .container-header .mod-menu > li > ul:not(.mm-show) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(.45rem);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  }

  .container-header .mod-menu > li:hover > ul,
  .container-header .mod-menu > li:focus-within > ul,
  .container-header .mod-menu > li > ul.mm-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .container-header .mod-menu > li > ul li {
    position: relative;
    display: block;
    width: 100%;
  }

  .container-header .mod-menu > li > ul a,
  .container-header .mod-menu > li > ul span,
  .container-header .mod-menu > li > ul button {
    display: block;
    width: 100%;
    min-height: 0;
    padding: .72rem .85rem;
    color: var(--krebs-ink);
    background: transparent;
    border: 0;
    text-align: left;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .025em;
    text-transform: none;
    text-decoration: none;
  }

  .container-header .mod-menu > li > ul a:hover,
  .container-header .mod-menu > li > ul a:focus,
  .container-header .mod-menu > li > ul button:hover,
  .container-header .mod-menu > li > ul button:focus {
    color: var(--krebs-red);
    background: var(--krebs-red-soft);
  }
}

/* Parent menu indicator */
.container-header .metismenu .metismenu-item.parent > a::before,
.container-header .metismenu .metismenu-item.parent > button::before {
  content: none;
}

.container-header .metismenu .metismenu-item.parent > a::after,
.container-header .metismenu .metismenu-item.parent > button::after {
  /* leave Cassiopeia's own caret behaviour intact */
}

/* Content feels too narrow/empty on large monitors in the migrated site. */
.container-component {
  width: min(100% - 2rem, 78rem);
  margin-inline: auto;
}

.com-content-article,
.blog,
.blog-featured {
  max-width: 72rem;
  margin-inline: auto;
}

.com-content-article > *:not(.item-image),
.blog > *:not(.blog-items),
.blog-featured > *:not(.blog-items) {
  max-width: 64rem;
}

.page-header h1 {
  font-size: clamp(2.6rem, 4.6vw, 4.35rem);
}

/* Large migrated article images get a restrained editorial treatment. */
.com-content-article img,
.blog img,
.blog-featured img {
  box-shadow: 0 12px 35px rgba(27, 20, 21, .06);
}

@media (max-width: 991.98px) {
  .container-header .container-nav,
  .container-header .container-below-top {
    width: min(100% - 1.25rem, 78rem);
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span,
  .container-header .mod-menu > li > button,
  .container-header .mod-menu .nav-link {
    min-height: 0;
    padding: .8rem .25rem;
  }

  .container-header .mod-menu ul {
    margin: 0 0 .4rem .6rem;
    padding-left: .9rem;
    border-left: 1px solid rgba(131, 15, 36, .22);
  }

  .container-header .mod-menu ul a,
  .container-header .mod-menu ul button,
  .container-header .mod-menu ul span {
    display: block;
    padding: .55rem .25rem;
    color: var(--krebs-ink);
    text-decoration: none;
  }
}

/* ==========================================================
   Krebs 1.2 — Navigation + refined storefront presentation
   ========================================================== */

/* More compact and deliberately framed header */
.container-header {
  min-height: 0;
}

.container-header .container-nav,
.container-header .grid-child {
  max-width: 86rem;
  margin-inline: auto;
}

.container-header .container-nav {
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.container-header .container-nav nav {
  width: 100%;
}

/* Main menu: clean horizontal navigation */
.container-header .metismenu.mod-menu {
  width: 100%;
  justify-content: center;
  margin: 0;
}

.container-header .metismenu.mod-menu > .metismenu-item {
  position: relative;
}

.container-header .metismenu.mod-menu > .metismenu-item > a,
.container-header .metismenu.mod-menu > .metismenu-item > button,
.container-header .metismenu.mod-menu > .metismenu-item > span {
  min-height: 3.4rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--krebs-ink);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .075em;
  text-transform: uppercase;
  text-decoration: none;
}

.container-header .metismenu.mod-menu > .metismenu-item.active > a,
.container-header .metismenu.mod-menu > .metismenu-item.current > a,
.container-header .metismenu.mod-menu > .metismenu-item > a:hover,
.container-header .metismenu.mod-menu > .metismenu-item > a:focus,
.container-header .metismenu.mod-menu > .metismenu-item > button:hover,
.container-header .metismenu.mod-menu > .metismenu-item > button:focus {
  color: var(--krebs-red);
}

/* Joomla/MetisMenu submenu states. These selectors intentionally support
   both the Cassiopeia MetisMenu classes and Bootstrap-style states. */
.container-header .metismenu.mod-menu .mm-collapse,
.container-header .metismenu.mod-menu .mod-menu__sub {
  z-index: 1000;
}

.container-header .metismenu.mod-menu .mm-collapse.mm-show,
.container-header .metismenu.mod-menu .mod-menu__sub.mm-show,
.container-header .metismenu.mod-menu .mod-menu__sub.show {
  display: block;
  height: auto !important;
  visibility: visible;
  opacity: 1;
}

@media (min-width: 992px) {
  .container-header .metismenu.mod-menu > .metismenu-item > ul,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub {
    position: absolute;
    top: calc(100% - .15rem);
    left: 0;
    min-width: 15.5rem;
    margin: 0;
    padding: .55rem;
    background: #fff;
    border: 1px solid var(--krebs-line);
    border-top: 3px solid var(--krebs-red);
    border-radius: 0 0 .45rem .45rem;
    box-shadow: 0 20px 45px rgba(25, 18, 20, .13);
  }

  /* Desktop fallback: submenu is also accessible by hover/focus-within. */
  .container-header .metismenu.mod-menu > .metismenu-item:hover > ul,
  .container-header .metismenu.mod-menu > .metismenu-item:focus-within > ul,
  .container-header .metismenu.mod-menu > .metismenu-item:hover > .mod-menu__sub,
  .container-header .metismenu.mod-menu > .metismenu-item:focus-within > .mod-menu__sub {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .container-header .metismenu.mod-menu > .metismenu-item > ul > li,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub > li {
    display: block;
    width: 100%;
  }

  .container-header .metismenu.mod-menu > .metismenu-item > ul a,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub a {
    display: block;
    width: 100%;
    padding: .72rem .85rem;
    color: var(--krebs-ink);
    font-size: .87rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
    border-radius: .25rem;
  }

  .container-header .metismenu.mod-menu > .metismenu-item > ul a:hover,
  .container-header .metismenu.mod-menu > .metismenu-item > ul a:focus,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub a:hover,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub a:focus {
    color: var(--krebs-red);
    background: var(--krebs-red-soft);
  }
}

/* Mobile dropdowns remain in document flow */
@media (max-width: 991.98px) {
  .container-header .metismenu.mod-menu {
    align-items: stretch;
  }

  .container-header .metismenu.mod-menu > .metismenu-item {
    width: 100%;
    border-bottom: 1px solid var(--krebs-line);
  }

  .container-header .metismenu.mod-menu > .metismenu-item > a,
  .container-header .metismenu.mod-menu > .metismenu-item > button,
  .container-header .metismenu.mod-menu > .metismenu-item > span {
    width: 100%;
    min-height: 3rem;
    justify-content: space-between;
  }

  .container-header .metismenu.mod-menu .mod-menu__sub,
  .container-header .metismenu.mod-menu .mm-collapse {
    position: static;
    width: 100%;
    margin: 0;
    padding: .15rem 0 .65rem 1rem;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* Content no longer looks like a narrow legacy column on large screens */
.site-grid .container-component {
  max-width: 86rem;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.com-content-article,
.blog,
.blog-featured {
  max-width: 76rem;
  margin-inline: auto;
}

.com-content-article .item-image,
.blog .item-image,
.blog-featured .item-image {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.com-content-article img,
.blog img,
.blog-featured img {
  max-width: 100%;
  height: auto;
  border-radius: .25rem;
}

/* Editorial heading treatment */
.page-header h1,
.com-content-article h1 {
  max-width: 18ch;
}

.page-header h1::after,
.com-content-article h1::after {
  width: 2.75rem;
  height: 2px;
  margin-top: .9rem;
  background: var(--krebs-red);
}

/* Footer as a calm, premium closing band */
.container-footer {
  margin-top: 3rem;
  background: #211d1e;
  background-image: none;
  color: rgba(255,255,255,.82);
  border-top: 3px solid var(--krebs-red);
}

.container-footer a {
  color: #fff;
}

.container-footer a:hover,
.container-footer a:focus {
  color: #f0cbd3;
}

/* ========================================================================
   Version 1.3 — refined storefront header + homepage-ready editorial system
   ======================================================================== */

/* Keep the header deliberately slim. Cassiopeia can otherwise reserve a lot
   of visual space when only a menu module is published. */
.container-header {
  position: sticky;
  top: 0;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

.container-header .grid-child,
.container-header .container-nav {
  min-height: 0;
}

.container-header .container-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  width: min(92rem, 100%);
  margin-inline: auto;
  padding: .2rem clamp(1rem, 3vw, 2.5rem);
}

.container-header .navbar-brand {
  flex: 0 0 auto;
  margin: 0 auto 0 0;
  padding: .65rem 0;
}

.container-header .navbar-brand img {
  display: block;
  width: auto;
  max-width: min(17rem, 42vw);
  max-height: 3.6rem;
  object-fit: contain;
}

.container-header .site-title {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: .025em;
  white-space: nowrap;
}

.container-header nav.navbar,
.container-header .navbar-collapse {
  flex: 1 1 auto;
  justify-content: flex-end;
}

.container-header .metismenu.mod-menu {
  justify-content: flex-end;
  gap: clamp(.15rem, .6vw, .65rem);
}

.container-header .metismenu.mod-menu > .metismenu-item > a,
.container-header .metismenu.mod-menu > .metismenu-item > button,
.container-header .metismenu.mod-menu > .metismenu-item > span {
  padding: 1.05rem .65rem .95rem;
  font-size: .78rem;
  letter-spacing: .085em;
}

/* More restrained premium underline */
.container-header .metismenu.mod-menu > .metismenu-item > a::after,
.container-header .metismenu.mod-menu > .metismenu-item > button::after {
  bottom: .58rem;
  height: 2px;
}

/* Dropdowns need enough breathing room for long jewellery category names. */
@media (min-width: 992px) {
  .container-header .metismenu.mod-menu > .metismenu-item > ul,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub {
    min-width: 17.5rem;
    padding: .65rem;
  }

  .container-header .metismenu.mod-menu > .metismenu-item > ul a,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub a {
    padding: .8rem .95rem;
    white-space: normal;
    line-height: 1.35;
  }
}

/* Main canvas: warm paper at the edges, white editorial content area. */
body.site {
  background: #f8f6f3;
}

.site-grid {
  background: transparent;
}

.site-grid .container-component {
  width: min(100%, 92rem);
  margin-inline: auto;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(32, 33, 36, .025);
}

.com-content-article,
.blog,
.blog-featured {
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}

/* Editorial intro treatment; useful on the current 'Aktuelles' landing page. */
.com-content-article > .page-header,
.blog > .page-header,
.blog-featured > .page-header {
  padding-top: clamp(.25rem, 1vw, .75rem);
}

.com-content-article > .page-header h1,
.blog > .page-header h1,
.blog-featured > .page-header h1 {
  font-size: clamp(2.4rem, 4.5vw, 4.4rem);
  letter-spacing: -.035em;
}

.com-content-article > p,
.com-content-article > div:not(.page-header):not(.item-image) {
  max-width: 72rem;
}

/* Jewellery photography should feel like imagery, not legacy article content. */
.com-content-article img,
.blog img,
.blog-featured img {
  display: block;
  width: auto;
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
}

.com-content-article .item-image img,
.blog .item-image img,
.blog-featured .item-image img {
  width: 100%;
  object-fit: cover;
}

/* Optional module class: "krebs-hero" — can be assigned to a Custom module
   in position banner without any template override. */
.krebs-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(28rem, 64vh, 48rem);
  display: grid;
  place-items: end start;
  overflow: hidden;
  color: #fff;
  background: #282224;
}

.krebs-hero > img,
.krebs-hero .hero-image,
.krebs-hero picture,
.krebs-hero picture img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.krebs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 15, 16, .72) 0%, rgba(20, 15, 16, .34) 52%, rgba(20, 15, 16, .06) 100%);
}

.krebs-hero .custom,
.krebs-hero .mod-custom,
.krebs-hero > div {
  width: min(46rem, 90%);
  padding: clamp(2rem, 7vw, 6.5rem);
}

.krebs-hero h1,
.krebs-hero h2,
.krebs-hero h3 {
  color: #fff;
  max-width: 12ch;
  margin: 0 0 1rem;
  font-size: clamp(2.7rem, 6vw, 5.8rem);
  line-height: .98;
}

.krebs-hero p {
  max-width: 34rem;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

/* Optional module class: "krebs-tiles" for three/four large category links. */
.krebs-tiles .custom,
.krebs-tiles .mod-custom,
.krebs-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--krebs-line);
}

.krebs-tiles a {
  position: relative;
  min-height: clamp(18rem, 34vw, 30rem);
  display: flex;
  align-items: flex-end;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  overflow: hidden;
  color: #fff;
  background: #2b2627;
  text-decoration: none;
}

.krebs-tiles a::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(0deg, rgba(20,15,16,.68), transparent);
  pointer-events: none;
}

.krebs-tiles a img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}

.krebs-tiles a:hover img,
.krebs-tiles a:focus img {
  transform: scale(1.035);
}

.krebs-tiles a strong,
.krebs-tiles a span {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  font-weight: 400;
  line-height: 1.05;
}

/* Optional module class: "krebs-feature" for split text/image sections. */
.krebs-feature .custom,
.krebs-feature .mod-custom,
.krebs-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: #fff;
}

.krebs-feature .krebs-feature__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem);
}

.krebs-feature .krebs-feature__image img,
.krebs-feature > img {
  width: 100%;
  height: 100%;
  min-height: 28rem;
  object-fit: cover;
}

.krebs-eyebrow {
  display: inline-block;
  margin-bottom: .85rem;
  color: var(--krebs-red);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Footer becomes a proper store-information band. */
.container-footer {
  margin-top: 0;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  font-size: .93rem;
}

.container-footer .grid-child {
  width: min(92rem, 100%);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

@media (max-width: 991.98px) {
  .container-header {
    position: relative;
  }

  .container-header .container-nav {
    justify-content: space-between;
    padding-block: .45rem;
  }

  .container-header .navbar-brand {
    margin-right: auto;
  }

  .container-header .navbar-collapse {
    flex-basis: 100%;
  }

  .krebs-tiles .custom,
  .krebs-tiles .mod-custom,
  .krebs-tiles,
  .krebs-feature .custom,
  .krebs-feature .mod-custom,
  .krebs-feature {
    grid-template-columns: 1fr;
  }

  .krebs-tiles a {
    min-height: 22rem;
  }
}

@media (max-width: 575.98px) {
  .site-grid .container-component {
    padding-inline: 0;
  }

  .com-content-article,
  .blog,
  .blog-featured {
    padding-inline: 1.15rem;
  }

  .krebs-hero {
    min-height: 34rem;
  }

  .krebs-hero .custom,
  .krebs-hero .mod-custom,
  .krebs-hero > div {
    padding: 2rem 1.25rem 2.5rem;
  }
}


/* ============================================================
   Juwelier Krebs 1.4 — visual refinement
   ============================================================ */

/* Slightly warmer overall canvas and more generous desktop width. */
body.site {
  background: #fbfaf8;
}

.site-grid > * {
  min-width: 0;
}

.grid-child,
.container-component > * {
  width: min(92rem, calc(100% - 3rem));
  max-width: 92rem;
  margin-inline: auto;
}

/* Header: restrained, editorial and brand-led. */
.container-header {
  border-top-width: 3px;
  box-shadow: 0 8px 32px rgba(32, 18, 22, .045);
}

.container-header .container-nav {
  width: min(92rem, calc(100% - 3rem));
  margin-inline: auto;
}

.container-header .navbar-brand {
  min-width: max-content;
}

.container-header .site-title,
.container-header .navbar-brand .site-title {
  font-size: clamp(1.55rem, 2.25vw, 2.25rem);
  letter-spacing: .015em;
}

.container-header .site-description {
  margin-top: .1rem;
  color: #777071;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .17em;
}

.container-header .container-nav nav {
  margin-left: auto;
}

.container-header .mod-menu {
  gap: clamp(.15rem, .75vw, .85rem);
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu .nav-link {
  padding: 1rem .52rem .95rem;
  font-size: .78rem;
  letter-spacing: .075em;
}

/* Make Cassiopeia / MetisMenu dropdowns usable and visually distinct. */
.container-header .metismenu > li.level-1 {
  position: relative;
}

.container-header .metismenu > li.level-1 > ul {
  min-width: 15rem;
  margin-top: 0;
  padding: .6rem;
  border-radius: 0 0 .4rem .4rem;
}

.container-header .metismenu > li.level-1 > ul > li + li {
  border-top: 1px solid rgba(0,0,0,.045);
}

.container-header .metismenu > li.level-1 > ul a {
  display: block;
  white-space: nowrap;
  padding: .72rem .9rem;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .025em;
}

@media (min-width: 992px) {
  .container-header {
    position: sticky;
    top: 0;
  }

  .container-header .metismenu > li.level-1 > ul {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1000;
  }

  .container-header .metismenu > li.level-1:hover > ul,
  .container-header .metismenu > li.level-1:focus-within > ul,
  .container-header .metismenu > li.level-1 > ul.mm-show,
  .container-header .metismenu > li.level-1 > ul.show {
    display: block;
    height: auto !important;
    visibility: visible;
    opacity: 1;
  }
}

/* Main content feels like a jewellery editorial instead of a CMS default. */
.container-component {
  background: transparent;
}

.com-content-article,
.blog,
.blog-featured {
  max-width: 74rem;
  margin-inline: auto;
}

.com-content-article .page-header h1,
.blog .page-header h1,
.blog-featured .page-header h1,
.blog .page-header h2,
.blog-featured .page-header h2 {
  max-width: 18ch;
}

.com-content-article .item-image,
.blog .item-image,
.blog-featured .item-image {
  margin-block: 2rem 2.5rem;
  overflow: hidden;
  background: #f0ece9;
}

.com-content-article .item-image img,
.blog .item-image img,
.blog-featured .item-image img {
  display: block;
  max-height: 46rem;
  object-position: center;
}

/* News / blog cards: subtle, not shop-like. */
.blog-items[class*="columns-"] {
  gap: clamp(1.5rem, 3vw, 3rem);
}

.blog-item {
  background: #fff;
  border: 1px solid var(--krebs-line);
  box-shadow: 0 12px 40px rgba(45, 32, 35, .045);
}

.blog-item .item-content {
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

/* Section primitives for the new home page. */
.krebs-section {
  padding-block: clamp(4rem, 8vw, 8rem);
}

.krebs-section--paper {
  background: var(--krebs-paper);
}

.krebs-section--wine {
  color: #fff;
  background: var(--krebs-red);
}

.krebs-section--wine h1,
.krebs-section--wine h2,
.krebs-section--wine h3,
.krebs-section--wine a {
  color: #fff;
}

.krebs-inner {
  width: min(86rem, calc(100% - 3rem));
  margin-inline: auto;
}

.krebs-intro {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}

.krebs-intro h2 {
  margin-top: 0;
}

.krebs-intro__lead {
  max-width: 42rem;
  color: #544e50;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
}

.krebs-link {
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  color: var(--krebs-red);
  font-weight: 700;
  text-decoration: none;
}

.krebs-link::after {
  content: "→";
  transition: transform .18s ease;
}

.krebs-link:hover::after,
.krebs-link:focus::after {
  transform: translateX(.25rem);
}

/* A restrained outline button for secondary calls to action. */
.krebs-button,
a.krebs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: .72rem 1.15rem;
  border: 1px solid var(--krebs-red);
  color: var(--krebs-red);
  background: transparent;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-decoration: none;
  text-transform: uppercase;
}

.krebs-button:hover,
.krebs-button:focus,
a.krebs-button:hover,
a.krebs-button:focus {
  color: #fff;
  background: var(--krebs-red);
}

/* Footer: stronger hierarchy and better line breaks on narrow screens. */
.container-footer {
  background: #211d1e;
  color: rgba(255,255,255,.82);
  border-top: 3px solid var(--krebs-red);
}

.container-footer a {
  color: #fff;
}

.container-footer a:hover,
.container-footer a:focus {
  color: #f3dfe4;
}

@media (max-width: 991.98px) {
  .grid-child,
  .container-component > *,
  .container-header .container-nav,
  .krebs-inner {
    width: min(100% - 2rem, 92rem);
  }

  .container-header .container-nav nav {
    width: 100%;
    margin-left: 0;
  }

  .container-header .mod-menu {
    align-items: stretch;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span,
  .container-header .mod-menu .nav-link {
    padding: .8rem 0;
  }

  .krebs-intro {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .grid-child,
  .container-component > *,
  .container-header .container-nav,
  .krebs-inner {
    width: min(100% - 1.5rem, 92rem);
  }

  .container-header .site-title,
  .container-header .navbar-brand .site-title {
    font-size: 1.45rem;
  }
}

/* ==========================================================
   v1.5 — homepage composition using stock Cassiopeia positions
   banner = hero, top-a = category cards, top-b = feature,
   bottom-a = visit/contact. No parent index.php override needed.
   ========================================================== */

/* Hero / banner */
.container-banner {
  position: relative;
  overflow: hidden;
  background: var(--krebs-ink);
  color: #fff;
}

.container-banner .mod-custom {
  position: relative;
  min-height: clamp(32rem, 68vh, 50rem);
  display: grid;
  align-content: center;
  padding: clamp(4rem, 9vw, 8rem) max(1.5rem, calc((100vw - 78rem) / 2));
  isolation: isolate;
}

.container-banner .mod-custom > img:first-child,
.container-banner .mod-custom > picture:first-child img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container-banner .mod-custom::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20,17,18,.80) 0%, rgba(20,17,18,.48) 50%, rgba(20,17,18,.12) 100%);
}

.container-banner h1,
.container-banner h2,
.container-banner h3 {
  max-width: 12ch;
  margin: 0 0 1.2rem;
  color: #fff;
  font-size: clamp(3rem, 7vw, 6.4rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.container-banner p {
  max-width: 38rem;
  margin-bottom: 1.8rem;
  color: rgba(255,255,255,.9);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
}

.container-banner a {
  display: inline-flex;
  width: fit-content;
  padding: .82rem 1.3rem;
  border: 1px solid rgba(255,255,255,.82);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.container-banner a:hover,
.container-banner a:focus {
  background: #fff;
  color: var(--krebs-red);
}

/* top-a: three image cards */
.container-top-a {
  max-width: 78rem;
  padding-top: clamp(4rem, 7vw, 7rem);
  padding-bottom: clamp(4rem, 7vw, 7rem);
}

.container-top-a > .card,
.container-top-b > .card,
.container-bottom-a > .card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.container-top-a .card-body,
.container-top-b .card-body,
.container-bottom-a .card-body {
  padding: 0;
}

.container-top-a .mod-custom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

.krebs-card {
  position: relative;
  display: block;
  min-height: 29rem;
  overflow: hidden;
  background: #e9e7e4;
  color: #fff;
}

.krebs-card > img,
.krebs-card > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.krebs-card::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, rgba(13,10,11,.78));
  pointer-events: none;
}

.krebs-card:hover > img,
.krebs-card:hover > picture img {
  transform: scale(1.025);
}

.krebs-card__content {
  position: absolute;
  z-index: 2;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
}

.krebs-card__content h2,
.krebs-card__content h3 {
  margin: 0 0 .4rem;
  color: #fff;
  font-size: clamp(1.7rem, 2.5vw, 2.4rem);
}

.krebs-card__content p {
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: .95rem;
}

.krebs-card__content a,
a.krebs-card {
  color: #fff;
  text-decoration: none;
}

/* top-b: editorial feature / workshop */
.container-top-b {
  max-width: none;
  padding: 0;
  background: var(--krebs-paper);
}

.container-top-b .mod-custom {
  width: min(78rem, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.container-top-b .mod-custom > img,
.container-top-b .mod-custom > picture img {
  width: 100%;
  min-height: 30rem;
  max-height: 44rem;
  object-fit: cover;
}

.container-top-b h2,
.container-top-b h3 {
  margin-top: 0;
}

/* Main component becomes a quieter news area */
body.view-featured .container-component,
body.view-category .container-component {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

body.view-featured .blog-featured,
body.view-category .blog {
  padding-top: 0;
  padding-bottom: 0;
}

/* bottom-a: visit/contact band */
.container-bottom-a {
  max-width: none;
  margin-top: 0;
  padding: 0;
  background: var(--krebs-red);
  color: #fff;
}

.container-bottom-a .mod-custom {
  width: min(78rem, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.container-bottom-a h2,
.container-bottom-a h3,
.container-bottom-a p,
.container-bottom-a a {
  color: #fff;
}

.container-bottom-a a {
  text-decoration-color: rgba(255,255,255,.55);
}

@media (max-width: 900px) {
  .container-top-a .mod-custom,
  .container-top-b .mod-custom {
    grid-template-columns: 1fr;
  }

  .krebs-card {
    min-height: 23rem;
  }

  .container-banner .mod-custom {
    min-height: 30rem;
  }

  .container-top-b .mod-custom > img,
  .container-top-b .mod-custom > picture img {
    min-height: 23rem;
  }
}


/* ==========================================================
   v1.6 — homepage layout correction
   Fix nested Custom-module wrappers: the actual .krebs-hero and
   .krebs-tiles sections own the layout, not the Joomla .mod-custom.
   ========================================================== */

/* Do not let Joomla's module wrapper create a second hero layout. */
.container-banner {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  background: var(--krebs-ink);
}

.container-banner > .card,
.container-banner .card-body {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.container-banner .mod-custom {
  display: block;
  min-height: 0;
  padding: 0;
  margin: 0;
}

.container-banner .moduletable > h3,
.container-banner .card-header,
.container-top-a .moduletable > h3,
.container-top-a .card-header {
  display: none;
}

/* The actual hero section */
.container-banner .krebs-hero {
  position: relative;
  width: 100%;
  min-height: clamp(34rem, 68vh, 46rem);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(110deg, #171315 0%, #241b1e 58%, #171315 100%);
  color: #fff;
}

.container-banner .krebs-hero::after {
  content: none;
}

.container-banner .krebs-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 78% 35%, rgba(131,15,36,.13), transparent 34%),
    linear-gradient(90deg, rgba(12,10,11,.15), rgba(12,10,11,0));
  pointer-events: none;
}

.container-banner .krebs-hero__content {
  width: min(78rem, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(4.25rem, 7vw, 6.5rem) 0;
}

.container-banner .krebs-hero__eyebrow {
  margin: 0 0 1.25rem;
  color: rgba(255,255,255,.82);
  font-size: .92rem;
  line-height: 1.4;
  letter-spacing: .025em;
}

.container-banner .krebs-hero h1 {
  max-width: 11.5ch;
  margin: 0 0 1.4rem;
  color: #fff;
  font-size: clamp(3.35rem, 5.1vw, 5.5rem);
  line-height: .94;
  letter-spacing: -.045em;
}

.container-banner .krebs-hero__text {
  max-width: 38rem;
  margin: 0 0 2rem;
  color: rgba(255,255,255,.84);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.65;
}

.container-banner .krebs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.container-banner .krebs-hero__actions a {
  margin: 0;
}

/* top-a wrapper should contain ONE .krebs-tiles section, not become the 3-col grid itself. */
.container-top-a {
  width: min(78rem, calc(100% - 3rem));
  max-width: 78rem;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.container-top-a .mod-custom {
  display: block;
  width: 100%;
}

.container-top-a .krebs-tiles {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.7vw, 1.5rem);
  margin: 0;
  padding: 0;
}

.container-top-a .krebs-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  min-height: clamp(22rem, 31vw, 30rem);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  overflow: hidden;
  background: linear-gradient(145deg, #282326, #181516);
  color: #fff;
  text-decoration: none;
  border: 0;
}

.container-top-a .krebs-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(10,8,9,.78), rgba(10,8,9,.05) 72%),
    radial-gradient(circle at 78% 18%, rgba(131,15,36,.18), transparent 38%);
  pointer-events: none;
}

.container-top-a .krebs-tile__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.container-top-a .krebs-tile__eyebrow {
  display: block;
  margin-bottom: .65rem;
  color: rgba(255,255,255,.68);
  font-family: var(--body-font-family, system-ui, sans-serif);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.container-top-a .krebs-tile h2 {
  margin: 0 0 1.35rem;
  color: #fff;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.container-top-a .krebs-tile__link {
  display: inline-block;
  color: #fff;
  font-family: var(--body-font-family, system-ui, sans-serif);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .035em;
}

.container-top-a .krebs-tile:hover,
.container-top-a .krebs-tile:focus-visible {
  background: linear-gradient(145deg, #34272b, #1b1618);
  color: #fff;
}

/* Keep the legacy component visually separated below the editorial cards. */
body.view-featured .container-component {
  margin-top: 0;
}

@media (max-width: 900px) {
  .container-banner .krebs-hero {
    min-height: 31rem;
  }

  .container-banner .krebs-hero__content {
    width: min(100% - 2rem, 42rem);
    padding: 4rem 0;
  }

  .container-banner .krebs-hero h1 {
    max-width: 10.5ch;
    font-size: clamp(2.75rem, 10vw, 4.2rem);
  }

  .container-top-a {
    width: min(100% - 2rem, 42rem);
    padding: 2.5rem 0 3.5rem;
  }

  .container-top-a .krebs-tiles {
    grid-template-columns: 1fr;
  }

  .container-top-a .krebs-tile {
    min-height: 18rem;
  }
}

@media (max-width: 480px) {
  .container-banner .krebs-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .container-banner .krebs-hero__actions a {
    justify-content: center;
    width: 100%;
  }
}

/* ==========================================================
   Version 1.7 — decisive header + controlled hero typography
   ========================================================== */

/* HEADER: reset inherited Cassiopeia spacing and turn the empty header into
   a deliberate two-stage brand/navigation bar. */
.container-header {
  position: sticky !important;
  top: 0;
  z-index: 1100;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(255,255,255,.97) !important;
  color: #201d1e !important;
  border-top: 4px solid #830f24 !important;
  border-bottom: 1px solid #e8e2e3 !important;
  box-shadow: 0 8px 28px rgba(35,20,24,.07) !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.container-header .grid-child,
.container-header .container-nav {
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.container-header .container-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  width: min(92rem, calc(100% - 3rem)) !important;
  max-width: 92rem !important;
  margin-inline: auto !important;
  padding: 0 !important;
}

/* When no Joomla logo/site-title is published, supply a restrained visual
   wordmark so the header does not look like an empty menu strip. */
@supports selector(:has(*)) {
  .container-header .container-nav:not(:has(.navbar-brand))::before {
    content: "JUWELIER KREBS\A HERBORN";
    display: block;
    padding: 1.15rem 0 .95rem;
    color: #231f20;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.72rem;
    font-weight: 400;
    line-height: .82;
    letter-spacing: .055em;
    text-align: center;
    white-space: pre;
  }

  .container-header .container-nav:not(:has(.navbar-brand))::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 3.78rem;
    width: 2.4rem;
    height: 1px;
    transform: translateX(-50%);
    background: #830f24;
    pointer-events: none;
  }
}

.container-header .container-nav nav,
.container-header nav.navbar,
.container-header .navbar-collapse {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: center !important;
}

.container-header .metismenu.mod-menu,
.container-header .mod-menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(.4rem, 1.5vw, 1.8rem) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid #f0ebec;
}

.container-header .metismenu.mod-menu > .metismenu-item,
.container-header .mod-menu > li {
  margin: 0 !important;
  padding: 0 !important;
}

.container-header .metismenu.mod-menu > .metismenu-item > a,
.container-header .metismenu.mod-menu > .metismenu-item > button,
.container-header .metismenu.mod-menu > .metismenu-item > span,
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu .nav-link {
  position: relative;
  display: flex !important;
  align-items: center;
  min-height: 3.65rem;
  padding: 0 .35rem !important;
  color: #292526 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--body-font-family, system-ui, sans-serif);
  font-size: .74rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .095em !important;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: color .18s ease;
}

.container-header .metismenu.mod-menu > .metismenu-item > a::after,
.container-header .metismenu.mod-menu > .metismenu-item > button::after,
.container-header .mod-menu > li > a::after {
  content: "";
  position: absolute;
  left: .35rem;
  right: .35rem;
  bottom: 0 !important;
  height: 3px !important;
  background: #830f24;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.container-header .metismenu.mod-menu > .metismenu-item > a:hover,
.container-header .metismenu.mod-menu > .metismenu-item > a:focus,
.container-header .metismenu.mod-menu > .metismenu-item > button:hover,
.container-header .metismenu.mod-menu > .metismenu-item > button:focus,
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus,
.container-header .metismenu.mod-menu > .current > a,
.container-header .metismenu.mod-menu > .active > a,
.container-header .mod-menu > .current > a,
.container-header .mod-menu > .active > a {
  color: #830f24 !important;
}

.container-header .metismenu.mod-menu > .metismenu-item > a:hover::after,
.container-header .metismenu.mod-menu > .metismenu-item > a:focus::after,
.container-header .metismenu.mod-menu > .metismenu-item > button:hover::after,
.container-header .metismenu.mod-menu > .metismenu-item > button:focus::after,
.container-header .metismenu.mod-menu > .current > a::after,
.container-header .metismenu.mod-menu > .active > a::after,
.container-header .mod-menu > .current > a::after,
.container-header .mod-menu > .active > a::after {
  transform: scaleX(1);
}

@media (min-width: 992px) {
  .container-header .metismenu.mod-menu > .metismenu-item > ul,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub {
    top: calc(100% - 1px) !important;
    min-width: 17rem !important;
    padding: .55rem !important;
    background: #fff !important;
    border: 1px solid #e8e2e3 !important;
    border-top: 3px solid #830f24 !important;
    border-radius: 0 0 .3rem .3rem !important;
    box-shadow: 0 18px 42px rgba(35,20,24,.14) !important;
  }

  .container-header .metismenu.mod-menu > .metismenu-item > ul a,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub a {
    padding: .72rem .82rem !important;
    color: #292526 !important;
    border-radius: .15rem;
    font-size: .82rem !important;
    font-weight: 500 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
  }

  .container-header .metismenu.mod-menu > .metismenu-item > ul a:hover,
  .container-header .metismenu.mod-menu > .metismenu-item > ul a:focus,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub a:hover,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub a:focus {
    color: #830f24 !important;
    background: #f8f3f4 !important;
  }
}

/* HERO: make the two intended desktop lines deterministic. The HTML already
   contains one <br>, so nowrap prevents additional accidental wrapping. */
.container-banner .krebs-hero {
  min-height: clamp(31rem, 58vh, 39rem) !important;
  background:
    radial-gradient(circle at 79% 28%, rgba(131,15,36,.28), transparent 31%),
    radial-gradient(circle at 62% 80%, rgba(131,15,36,.11), transparent 28%),
    linear-gradient(112deg, #171315 0%, #25191d 58%, #151213 100%) !important;
}

.container-banner .krebs-hero__content {
  width: min(80rem, calc(100% - 4rem)) !important;
  padding: clamp(3.4rem, 5vw, 5.1rem) 0 !important;
}

.container-banner .krebs-hero h1 {
  max-width: none !important;
  margin-bottom: 1.45rem !important;
  font-size: clamp(3.6rem, 4.65vw, 5.25rem) !important;
  line-height: .98 !important;
  letter-spacing: -.042em !important;
}

@media (min-width: 1200px) {
  .container-banner .krebs-hero h1 {
    white-space: nowrap;
  }
}

.container-banner .krebs-hero__text {
  max-width: 42rem !important;
}

@media (max-width: 1199.98px) {
  .container-banner .krebs-hero h1 {
    max-width: 14ch !important;
    white-space: normal;
  }
}

@media (max-width: 991.98px) {
  .container-header .container-nav {
    width: min(100% - 2rem, 92rem) !important;
  }

  @supports selector(:has(*)) {
    .container-header .container-nav:not(:has(.navbar-brand))::before {
      padding: .85rem 0 .75rem;
      font-size: 1.35rem;
    }
    .container-header .container-nav:not(:has(.navbar-brand))::after {
      top: 2.95rem;
    }
  }

  .container-header .metismenu.mod-menu,
  .container-header .mod-menu {
    display: block !important;
    padding: .45rem 0 .75rem !important;
    border-top: 1px solid #f0ebec;
  }

  .container-header .metismenu.mod-menu > .metismenu-item > a,
  .container-header .metismenu.mod-menu > .metismenu-item > button,
  .container-header .metismenu.mod-menu > .metismenu-item > span,
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span,
  .container-header .mod-menu .nav-link {
    min-height: 2.8rem;
    padding: .5rem 0 !important;
  }

  .container-banner .krebs-hero {
    min-height: 30rem !important;
  }

  .container-banner .krebs-hero__content {
    width: min(100% - 2rem, 42rem) !important;
    padding: 3.5rem 0 !important;
  }

  .container-banner .krebs-hero h1 {
    max-width: 11ch !important;
    font-size: clamp(2.8rem, 9.2vw, 4.2rem) !important;
    line-height: .98 !important;
  }
}

/* ============================================================
   KREBS 1.8.0 — dark brand header + larger primary navigation
   ============================================================ */
.container-header {
  background: #171315 !important;
  background-image: none !important;
  border-top: 4px solid #830f24 !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.12) !important;
}

/* Do not synthesize a second brand: Joomla's configured Cassiopeia brand is
   the single source of truth. */
.container-header .container-nav::before,
.container-header .container-nav::after {
  content: none !important;
  display: none !important;
}

.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .site-description {
  color: #fff !important;
}

.container-header .navbar-brand img {
  max-height: 4.6rem !important;
  width: auto !important;
}

.container-header .container-nav {
  width: min(100% - 4rem, 92rem) !important;
  min-height: 6.6rem !important;
  margin-inline: auto !important;
  padding-block: .75rem !important;
  gap: clamp(1.5rem, 3vw, 3.5rem) !important;
}

.container-header .metismenu.mod-menu,
.container-header .mod-menu {
  border: 0 !important;
  background: transparent !important;
}

.container-header .metismenu.mod-menu > .metismenu-item > a,
.container-header .metismenu.mod-menu > .metismenu-item > button,
.container-header .metismenu.mod-menu > .metismenu-item > span,
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu .nav-link {
  min-height: 4rem !important;
  padding-inline: .55rem !important;
  color: #f4f0f1 !important;
  font-size: .92rem !important;
  font-weight: 650 !important;
  letter-spacing: .065em !important;
}

.container-header .metismenu.mod-menu > .metismenu-item > a:hover,
.container-header .metismenu.mod-menu > .metismenu-item > a:focus,
.container-header .metismenu.mod-menu > .metismenu-item > button:hover,
.container-header .metismenu.mod-menu > .metismenu-item > button:focus,
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
  color: #d96a7e !important;
}

.container-header .metismenu.mod-menu > .current > a,
.container-header .metismenu.mod-menu > .active > a,
.container-header .mod-menu > .current > a,
.container-header .mod-menu > .active > a {
  color: #fff !important;
}

.container-header .metismenu.mod-menu > .metismenu-item > a::after,
.container-header .metismenu.mod-menu > .metismenu-item > button::after,
.container-header .mod-menu > li > a::after {
  background: #830f24 !important;
  height: 3px !important;
}

@media (min-width: 992px) {
  .container-header .metismenu.mod-menu > .metismenu-item > ul,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub {
    background: #211b1d !important;
    border-color: #3b3033 !important;
    border-top-color: #830f24 !important;
    box-shadow: 0 20px 46px rgba(0,0,0,.30) !important;
  }

  .container-header .metismenu.mod-menu > .metismenu-item > ul a,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub a {
    color: #f4f0f1 !important;
    font-size: .9rem !important;
  }

  .container-header .metismenu.mod-menu > .metismenu-item > ul a:hover,
  .container-header .metismenu.mod-menu > .metismenu-item > ul a:focus,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub a:hover,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub a:focus {
    color: #fff !important;
    background: #830f24 !important;
  }
}

/* Hero visually continues the dark header and uses fluid type rather than
   forcing a single nowrap line. */
.container-banner .krebs-hero {
  min-height: clamp(29rem, 54vh, 36rem) !important;
  border-top: 0 !important;
}

.container-banner .krebs-hero h1 {
  max-width: 16ch !important;
  font-size: clamp(3.25rem, 4.15vw, 4.75rem) !important;
  line-height: 1.01 !important;
  white-space: normal !important;
  text-wrap: balance;
}

@media (max-width: 991.98px) {
  .container-header .container-nav {
    width: min(100% - 2rem, 92rem) !important;
    min-height: 5.2rem !important;
  }

  .container-header .navbar-toggler {
    color: #fff !important;
    border-color: rgba(255,255,255,.28) !important;
  }

  .container-header .metismenu.mod-menu,
  .container-header .mod-menu {
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }

  .container-header .metismenu.mod-menu > .metismenu-item > a,
  .container-header .metismenu.mod-menu > .metismenu-item > button,
  .container-header .metismenu.mod-menu > .metismenu-item > span,
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span,
  .container-header .mod-menu .nav-link {
    color: #f4f0f1 !important;
    font-size: .95rem !important;
  }

  .container-banner .krebs-hero h1 {
    max-width: 12ch !important;
    font-size: clamp(2.7rem, 9vw, 4rem) !important;
  }
}


/* ============================================================
   KREBS 1.9.0 — restrained navigation hover + unified footer
   ============================================================ */

/* Primary navigation: no pink hover. Text stays white, the brand colour is
   used as a precise underline/accent instead of tinting the lettering. */
.container-header .metismenu.mod-menu > .metismenu-item > a,
.container-header .metismenu.mod-menu > .metismenu-item > button,
.container-header .metismenu.mod-menu > .metismenu-item > span,
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu .nav-link {
  font-size: 1rem !important;
  color: #f4f0f1 !important;
}

.container-header .metismenu.mod-menu > .metismenu-item > a:hover,
.container-header .metismenu.mod-menu > .metismenu-item > a:focus-visible,
.container-header .metismenu.mod-menu > .metismenu-item > button:hover,
.container-header .metismenu.mod-menu > .metismenu-item > button:focus-visible,
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible,
.container-header .mod-menu .nav-link:hover,
.container-header .mod-menu .nav-link:focus-visible {
  color: #ffffff !important;
}

/* Keep the active/hover signal in the corporate red. */
.container-header .metismenu.mod-menu > .metismenu-item > a::after,
.container-header .metismenu.mod-menu > .metismenu-item > button::after,
.container-header .mod-menu > li > a::after,
.container-header .mod-menu .nav-link::after {
  background-color: #830f24 !important;
}

@media (min-width: 992px) {
  .container-header .metismenu.mod-menu > .metismenu-item > ul a:hover,
  .container-header .metismenu.mod-menu > .metismenu-item > ul a:focus,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub a:hover,
  .container-header .metismenu.mod-menu > .metismenu-item > .mod-menu__sub a:focus {
    color: #ffffff !important;
    background: #6a0c1d !important;
  }
}

/* Footer deliberately mirrors the header rather than introducing another
   visual language. */
.container-footer {
  background: #171315 !important;
  background-image: none !important;
  color: #f4f0f1 !important;
  border-top: 4px solid #830f24 !important;
  box-shadow: none !important;
}

.container-footer .grid-child {
  width: min(100% - 4rem, 92rem) !important;
  margin-inline: auto !important;
  padding-block: 2.4rem !important;
}

.container-footer,
.container-footer p,
.container-footer li,
.container-footer span,
.container-footer address,
.container-footer .mod-custom {
  color: #d8d1d3 !important;
}

.container-footer a {
  color: #ffffff !important;
  text-decoration-color: #830f24 !important;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}

.container-footer a:hover,
.container-footer a:focus-visible {
  color: #ffffff !important;
  text-decoration-color: #830f24 !important;
}

@media (max-width: 991.98px) {
  .container-footer .grid-child {
    width: min(100% - 2rem, 92rem) !important;
    padding-block: 2rem !important;
  }
}