/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

:root {
  --bg-color: #000; /* Anthrazit #2b2b2b;*/
  --text-color: #ffffff; /* Weiß für normalen Text */
  --heading-color: #E6C07A; /* Hellgold für Überschriften */
  --link-color: #ffffff;
  --card-bg: #353535; /* Etwas helleres Dunkelgrau für Cards */
  --nav-height: 140px; /* Höhe des Navs für scroll offset */
  --title-max-font-size: 56px; /* Max font-size for main title on large viewports */
  --accent: #9b761e; /* Gold für Akzente (helles Design) */
  --accent-line: #b99542;
  --nav-bg: rgba(244, 241, 235, 0.96);
  --control-line: rgba(23, 23, 23, 0.25);
}
/* Increase base font size site-wide (rem-based sizing scales with this) */
@media only screen and (min-width: 0) { html { font-size: 17px; } }
@media only screen and (min-width: 992px) { html { font-size: 17.5px; } }
@media only screen and (min-width: 1200px) { html { font-size: 18px; } }

/* Smooth scroll and anchor offset for fixed headers */
html { scroll-behavior: smooth; }
.anchor { scroll-margin-top: var(--nav-height); }
body {
  font-family: "Manrope", Calibri, "Segoe UI", Arial, sans-serif;
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}
/* Force Manrope site-wide except for Material Icons which require their own font */
html, body, *:not(.material-icons) {
  font-family: "Manrope", Calibri, "Segoe UI", Arial, sans-serif !important;
}
/* Keep Materialize default fonts for menu/language controls and icon glyphs */
.material-icons,
nav .sidenav-trigger,
nav .language-toggle {
  font-family: "Material Icons" !important;
}
nav .lang-button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}
h1 {
  color: var(--heading-color);
}
/* Reduce vertical spacing between title and subtitle */
h1.header {
  margin-top: 0.25rem;
  margin-bottom: 0.15rem;
  line-height: 1;
}
h2.header {
  margin-top: 0;
  margin-bottom: 0.6rem;
  line-height: 1.0;
  font-weight: 400;
}
a { color: var(--link-color); }
a:hover { opacity: 0.9; }
/* Card background slightly lighter than page background */
.card,
.card-panel,
.card .card-content {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}
.lang-button {
  border: 1px solid rgba(241, 211, 111, 0.5);
  background-color: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  margin-left: 0.3rem;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.lang-button[data-lang="de"] {
  background-image: url("../assets/flags/de.svg");
}
.lang-button[data-lang="en"] {
  background-image: url("../assets/flags/gb.svg");
}
.lang-button[data-lang="zh"] {
  background-image: url("../assets/flags/cn.svg");
}
.lang-button:hover,
.lang-button.active {
  background-color: rgba(241, 211, 111, 0.18);
  transform: scale(1.05);
  border-color: #f1d36f;
}
.language-selector {
  display: flex;
  align-items: center;
}
nav {
  background-color: #090909 !important;
  min-height: 250px;
}
nav .nav-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 140px; /* tightened vertical space */
  padding: 0.35rem 0.75rem !important;
  margin: 0 !important;
  gap: 0.25rem;
}
nav .nav-wrapper.container {
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
}
nav .nav-left,
nav .nav-right {
  display: flex;
  align-items: center;
  z-index: 10;
  position: relative;
}
nav .nav-left {
  flex: 0 0 auto;
  padding-left: 1rem;
}
nav .nav-right {
  margin-left: auto;
  padding-right: 1rem;
}
/* Banner direkt in der Navigation */
nav .brand-logo.logo2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../assets/logo_highres_transparent.png);
  width: 75%;
  max-width: 1200px;
  height: 230px; /* explicit height so background-image is visible */
  max-height: 230px;
}
/* Entferne das separate Banner-Element */
.nav-banner { display: none; }
nav .sidenav-trigger {
  color: #f1d36f;
  margin: 0 !important;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
nav ul#nav-mobile {
  margin: 0;
  display: flex;
  align-items: center;
}
nav .language-selector {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-right: 0;
}
nav .language-selector .lang-button {
  box-sizing: border-box;
  line-height: 1;
  min-width: 2.8rem;
  min-height: 2.8rem;
  margin-right: 0;
}
.sidenav {
  background-color: #000 !important;
}
/* Keep sidenav hidden off-canvas by default so its right edge isn't visible */
.sidenav {
  transform: translateX(-120%);
  transition: transform 0.25s ease;
}
/* Force compact sidenav: show buttons inline (disable stacked vertical mode) */
.sidenav {
  width: auto !important;
  max-width: calc(100% - 2rem) !important;
  padding: 0.25rem 0.5rem !important;
}
.sidenav li {
  display: inline-block !important;
  margin: 0 0.25rem !important;
}
.sidenav li a {
  display: inline-block !important;
  padding: 0.5rem 0.75rem !important;
  color: #f1d36f !important;
}
.sidenav li a,
.sidenav li a:hover {
  color: #f1d36f !important;
}
.sidenav-overlay {
  background-color: rgba(0,0,0,0.65) !important;
}
/* Burger Menu für Sprachauswahl (Mobile) */
nav .language-burger {
  position: relative;
  margin-right: 0;
}
nav .language-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f1d36f;
  cursor: pointer;
  padding: 0.5rem;
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  transition: color 0.2s ease;
}
nav .language-toggle:hover {
  color: #f1d36f;
  opacity: 0.8;
}
nav .language-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #000;
  border: 1px solid #f1d36f;
  border-top: none;
  flex-direction: column;
  margin: 0;
  padding: 0.5rem 0;
  z-index: 3000;
  min-width: 80px;
  pointer-events: auto;
}
nav .language-dropdown.active {
  display: flex;
}
nav .language-dropdown button.lang-button {
  width: 100%;
  padding: 0.5rem;
  border: none;
  background-color: transparent;
  color: #f1d36f;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.9rem;
}
nav .language-dropdown button.lang-button:hover {
  background-color: rgba(241, 211, 111, 0.1);
}
/* Force dark background for Materialize dropdowns and sidenav (fix accidental white) */
.dropdown-content,
.dropdown-content li,
.dropdown-content a,
.sidenav,
.sidenav li {
  background-color: #000 !important;
  color: #f1d36f !important;
}
.dropdown-content a {
  color: #f1d36f !important;
}
/* Style Flag buttons inside Materialize dropdowns to match .lang-button appearance */
.dropdown-content a.lang-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  margin: 0.25rem;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
  color: transparent;
}
.dropdown-content a.lang-button:hover {
  background-color: rgba(241, 211, 111, 0.1) !important;
}
/* Desktop: stack nav links and language buttons vertically */
@media only screen and (min-width: 993px) {
  nav ul#nav-mobile {
    display: flex !important;
    flex-direction: column !important;
    padding-left: 0 !important;
    align-items: flex-start !important;
  }
  nav ul#nav-mobile li {
    display: block !important;
    margin: 1px 0 !important; /* much tighter vertical gap */
  }
  nav ul#nav-mobile li a {
    display: block !important;
    padding: 2px 6px !important; /* tighter padding */
    line-height: 1.1 !important;
  }
  nav .language-selector {
    flex-direction: column !important;
    gap: 0.12rem !important;
    padding-top: 4px !important;
    align-items: flex-end !important;
  }
}
/* Very specific override to ensure vertical nav on desktop (highest specificity) */
@media only screen and (min-width: 993px) {
  nav .nav-wrapper.container > .nav-left > ul#nav-mobile,
  nav .nav-wrapper > .nav-left > ul#nav-mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  nav .nav-wrapper.container > .nav-left > ul#nav-mobile > li,
  nav .nav-wrapper > .nav-left > ul#nav-mobile > li {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 6px 0 !important;
  }
}

/* Desktop: keep the two main index titles on a single row */
@media only screen and (min-width: 993px) {
  [data-i18n="index.header.title1"],
  [data-i18n="index.header.title2"] {
    display: inline-block;
    white-space: nowrap;
    vertical-align: baseline;
  }

  [data-i18n="index.header.title1"] {
    margin-right: 0.45rem;
  }
}

/* Keep dropdown compact and center flag buttons */
.dropdown-content#language-menu-mobile {
  padding: 0.4rem !important;
  min-width: auto !important;
}
.dropdown-content#language-menu-mobile li {
  display: flex !important;
  justify-content: center !important;
}
@media only screen and (max-width: 992px) {
  nav ul#nav-mobile {
    margin-left: 0;
  }
  nav .language-selector {
    margin-left: auto;
  }
}
@media only screen and (max-width: 992px) {
  :root {
    --nav-height: clamp(88px, 23vw, 170px);
  }

  nav {
    min-height: var(--nav-height);
  }

  nav .nav-wrapper {
    min-height: var(--nav-height);
  }

  /* Media query angepasst: compact sidenav for tablet and mobile widths
     This removes the large half-screen sidenav (Modus 2) and uses the
     compact inline-style sliding panel (Modus 3) instead. */
  nav .brand-logo.logo2 {
    /* Keep logo and navbar height in sync on narrow screens */
    width: 90%;
    max-width: none;
    height: calc(var(--nav-height) - 0.5rem);
    max-height: none;
    padding-top: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Make the opened navigation (sidenav) compact: only as big as the buttons need */
  .sidenav {
    position: absolute !important;
    top: var(--nav-height) !important;
    left: 1rem !important;
    right: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 2rem) !important;
    padding: 0.25rem 0.5rem !important;
    height: auto !important;
    /* Let Materialize control the transform when opening/closing the sidenav */
    transition: transform 0.25s ease;
    border-radius: 8px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5) !important;
    background-color: #000 !important;
    display: block !important;
    z-index: 3000 !important;
  }

  /* Stack sidenav buttons vertically when the burger menu opens */
  .sidenav li {
    display: block !important;
    margin: 6px 0 !important;
  }

  .sidenav li a {
    display: block !important;
    width: 100% !important;
    padding: 8px 12px !important;
    color: #f1d36f !important;
  }
  /* Remove page darkening overlay when sidenav opens */
  .sidenav-overlay {
    display: none !important;
  }
}
nav ul a,
nav .brand-logo,
nav a {
  color: #f1d36f !important;
}

#title-banner,
#index-banner .container,
#index-banner .section {
  text-align: center;
}

.card-image img.responsive-img,
#logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.parallax-container .section {
    width: 100%;
  }
@media only screen and (max-width : 992px) {
  .parallax-container .section {
    position: absolute;
    top: 40%;
  }
  #index-banner .section {
    top: 10%;
  }
}
@media only screen and (max-width : 600px) {
  #index-banner .section {
    top: 0;
  }
}

.icon-block .material-icons {
  font-size: inherit;
}
footer.page-footer {
  margin: 0;
}

/* Keep footer.aboutText in justified mode across pages */
[data-i18n="footer.aboutText"] {
  display: block;
  text-align: justify !important;
  text-justify: inter-word !important;
  text-align-last: left !important;
}

/* Footer: center Navigation, Kontakt, Soziales columns including list items */
footer.page-footer h5[data-i18n="footer.nav"],
footer.page-footer h5[data-i18n="footer.contact"],
footer.page-footer h5[data-i18n="footer.social"] {
  text-align: center !important;
}

footer.page-footer h5[data-i18n="footer.nav"] ~ ul,
footer.page-footer h5[data-i18n="footer.contact"] ~ ul,
footer.page-footer h5[data-i18n="footer.social"] ~ ul {
  text-align: center !important;
}

footer.page-footer h5[data-i18n="footer.nav"] ~ ul li,
footer.page-footer h5[data-i18n="footer.contact"] ~ ul li,
footer.page-footer h5[data-i18n="footer.social"] ~ ul li {
  text-align: center !important;
}

footer.page-footer h5[data-i18n="footer.nav"] ~ ul li a,
footer.page-footer h5[data-i18n="footer.contact"] ~ ul li a,
footer.page-footer h5[data-i18n="footer.social"] ~ ul li a {
  display: inline-block;
  width: 100%;
  text-align: center !important;
}

/* Product page has a global justified list rule; reset footer columns to centered */
.product-page footer.page-footer h5[data-i18n="footer.nav"] ~ ul,
.product-page footer.page-footer h5[data-i18n="footer.contact"] ~ ul,
.product-page footer.page-footer h5[data-i18n="footer.social"] ~ ul,
.product-page footer.page-footer h5[data-i18n="footer.nav"] ~ ul li,
.product-page footer.page-footer h5[data-i18n="footer.contact"] ~ ul li,
.product-page footer.page-footer h5[data-i18n="footer.social"] ~ ul li,
.product-page footer.page-footer h5[data-i18n="footer.nav"] ~ ul li a,
.product-page footer.page-footer h5[data-i18n="footer.contact"] ~ ul li a,
.product-page footer.page-footer h5[data-i18n="footer.social"] ~ ul li a {
  text-align: center !important;
  text-align-last: center !important;
  text-justify: auto !important;
  hyphens: none !important;
}

.product-page footer.page-footer h5[data-i18n="footer.nav"],
.product-page footer.page-footer h5[data-i18n="footer.contact"],
.product-page footer.page-footer h5[data-i18n="footer.social"] {
  display: block;
  width: 100%;
  text-align: center !important;
  text-align-last: center !important;
}

.impressum-layout {
  padding-bottom: 2rem;
}

.impressum-note {
  max-width: 900px;
  margin: 0.5rem auto 1.4rem auto;
  color: #d7d7d7;
}

.impressum-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.impressum-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(230,192,122,0.2);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}

.impressum-card h3 {
  margin-top: 0;
  margin-bottom: 0.65rem;
  color: var(--heading-color) !important;
}

.impressum-card p {
  margin: 0.3rem 0;
  color: #fff;
}

.impressum-card a {
  color: var(--heading-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.impressum-card-wide {
  grid-column: 1 / -1;
}

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

/* Container, der die Cards hält */
.card-container {
  display: grid;
  /* Erstellt 2 Spalten auf Desktop, bricht automatisch um, wenn sie unter 340px schrumpfen */
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
  justify-content: center; /* Zentriert die Cards, falls sie untereinander stehen */
}

/* Homepage two-column layout: left = intro text, right = stacked cards */
.home-split {
  max-width: 1600px; /* increase max width so columns occupy more horizontal space */
  margin: 0 auto;
  padding: 0 0.35rem;
}

.home-split.container {
  width: 94%;
  max-width: 1800px;
}
.home-split .home-left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem; /* reduce inner padding to allow wider content */
}
.home-split .home-left .container {
  width: 100%;
  max-width: none;
  padding: 0;
}
.home-split .home-left .row.center {
  justify-content: flex-start; /* keep text left-aligned inside column */
}
.home-split .home-left .section {
  width: 95%;
}
.home-split .home-right {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0.25rem; /* reduce inner padding */
}
.home-split .home-right .card-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

@media only screen and (max-width: 600px) {
  /* Mobile: all elements full-width, stacked */
  .home-split .home-left,
  .home-split .home-right {
    padding: 0.5rem;
  }
  .home-split .home-right .card-container {
    gap: 1rem;
  }
}

/* Die einzelnen Cards */
.custom-card {
  background-color: #000;/*#2b2b2b; /* Dunkler Hintergrund wie im Screenshot */
  color: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  
  /* Flexbox hier sorgt dafür, dass Inhalt und Bild sich den Platz aufteilen */
  display: flex;
  flex-direction: column;
}

/* Textbereiche in den Cards */
.card-text {
  padding: 1.5rem;
  flex-grow: 1; /* Zwingt den Text, den Raum auszufüllen, damit Buttons/Bilder bündig sind */
}

.card-text h3 {
  margin-top: 0;
  font-size: 1.3rem;
  font-weight: bold;
  color: #ffffff;
}

.card-text .flow-text {
  font-size: 1.3rem; /* Erhöht die Grundschriftgröße (vorher meist ~1rem) */
  line-height: 1.2;   /* Sorgt für einen angenehmen Zeilenabstand */
}

/* Blocksatz für Fließtexte und Card-Text: gleichmäßige Zeilenlängen */
.flow-text,
.card-text p,
.card-text .flow-text {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  /* Do not stretch the last line; keep it left-aligned for better readability */
  text-align-last: left;
}

/* Product page: force block (justified) layout for all common text elements */
.product-page,
.product-page p,
.product-page .flow-text,
.product-page li,
.product-page .card-text,
.product-page .product-feature-list,
.product-page .collection-item,
.product-page .results-cards-caption,
.product-page .result-val {
  text-align: justify !important;
  text-justify: inter-word !important;
  -webkit-hyphens: auto !important;
  -moz-hyphens: auto !important;
  hyphens: auto !important;
  text-align-last: left !important;
}

/* Keep headings visually distinct: left-align last line of headings but allow centered titles */
.product-page h1,
.product-page h2,
.product-page h4 {
  text-align: left !important;
}
.product-page h3 {
  text-align: justify !important;
  text-justify: inter-word !important;
  -webkit-hyphens: auto !important;
  -moz-hyphens: auto !important;
  hyphens: auto !important;
  text-align-last: left !important;
}

.product-page .product-feature-list {
  margin-top: 0.4rem;
  margin-bottom: 0.8rem;
}

.product-page .product-feature-list li {
  margin: 0;
  padding: 0;
}

.product-page .product-feature-list h4 {
  margin: 0.15rem 0 0.25rem;
}

.product-page .collection {
  margin-top: 0.4rem;
  margin-bottom: 0.8rem;
}

.product-page .collection-item li{
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.product-page .collection-item h4 {
  margin: 0;
}

section.anchor p[data-i18n$=".text"] {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  text-align-last: left;
}

section.anchor p[data-i18n$=".text"] {
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  text-align-last: left;
}

.card-text p {
  margin: 0; /* remove top and bottom margins inside cards to avoid extra gaps */
  font-size: 1rem;
  line-height: 1.5;
  color: #cccccc;
}

/* Link-Container für die Bilder */
.card-link {
  display: block;
  width: 100%;
  overflow: hidden;
}

/* Die Bilder selbst */
.card-media {
  display: block;
  width: 100%;          /* Das Bild nutzt die volle Breite der Card */
  height: auto;         /* ERSETZT 'relative': Berechnet die Höhe automatisch anhand des Seitenverhältnisses, verhindert Verzerrung! */
  max-height: 420px;    /* Optional: Verhindert, dass ein Bild auf riesigen Bildschirmen unendlich hoch wird */
  object-fit: contain;  /* Garantiert, dass das Bild innerhalb seiner Box niemals verzerrt oder beschnitten wird */
  transition: transform 0.3s ease;
}

/* Kleiner visueller Effekt beim Drüberfahren */
.card-link:hover .card-media {
  transform: scale(1.02);
}

/* Responsive Anpassung für kleinere Bildschirme (Mobile) */
@media (max-width: 768px) {
  .card-container {
    /* Begrenzt die Breite untereinander, damit die Cards auf Handys nicht zu riesig werden */
    max-width: 500px; 
  }
  
  .card-media {
    height: 200px; /* Leicht kleinere Bildhöhe auf Smartphones */
  }
}

/* Override Materialize footer color to a dark gray */
footer.page-footer {
  background-color: #333333 !important;
}

/* Embedded YouTube player inside cards */
.youtube-embed-wrap {
  width: calc(100% - 3rem);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.youtube-embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Collection list styling to match page colors */
.collection {
  background-color: var(--bg-color) !important; /* gleiche Hintergrundfarbe wie die Seite */
  border: 0 none !important;
  box-shadow: none !important;
  margin-top: 0.5rem;
}
.collection .collection-item {
  background-color: transparent !important;
  color: var(--text-color) !important; /* Standardtextfarbe (weiß) */
  border-bottom: 1px solid rgba(255,255,255,0.04) !important; /* dezente Trennung */
  padding-left: 0.5rem !important;
  font-size: 1.30rem !important; /* größere Schrift für bessere Lesbarkeit */
  line-height: 1.5 !important;
}
.collection .collection-item a {
  color: var(--heading-color) !important; /* Linkfarbe: Gold */
  text-decoration: none;
}
.collection .collection-item a:hover {
  text-decoration: underline;
}

.product-feature-list {
  margin: 1rem 0 1rem 1.5rem;
  padding-left: 0.5rem;
  font-size: 1.5rem;
}

.product-feature-list li {
  margin-bottom: 0.45rem;
  color: var(--text-color);
}

.product-feature-list a {
  color: var(--text-color);
}


/* Gallery thumbnails in cards */
.gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.06);
}
.gallery-thumb:hover {
  border-color: var(--heading-color);
  transform: translateY(-2px);
}

/* Mobile-specific header sizing and centering
   - Larger title on small screens
   - Force a comfortable line-height when title is split into two lines
*/
@media only screen and (max-width: 600px) {
  h1.header {
    font-size: 3.5rem !important;
    line-height: 1.02 !important;
    text-align: center !important;
    display: block !important;
    max-width: 90vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Prevent breaking words in the middle on narrow viewports */
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  h1.header br { display: block; line-height: 1.02; }
  /* Ensure inline spans injected by i18n don't override h1 sizing */
  h1.header span,
  h1.header span * {
    font-size: inherit !important;
    line-height: inherit !important;
  }
  /* Reduce space after subtitle and tighten spacing for mobile */
  h2.header {
    font-size: 1.6rem !important;
    line-height: 0.95 !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.4rem !important;
    text-align: center !important;
    color: var(--heading-color) !important;
    max-width: 90vw !important;
  }
  h2.header span,
  h2.header span * {
    font-size: inherit !important;
    line-height: inherit !important;
  }
  /* Reduce card-text padding on mobile so content sits closer to headings */
  .card-text {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

/* Modal override to center image and darken background a bit more */
.modal {
  /* remove Materialize's default constrained white card appearance */
  max-width: none !important;
  width: 100% !important;
  max-height: 90vh;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.modal .modal-content {
  /* ensure inner content is fully transparent and doesn't add extra padding/width */
  background: transparent !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}

/* Default styling for h3 as requested */
h3 {
  color: #ffffff !important;
  font-size: 1.9rem !important;
  font-weight: 400 !important;
}

/* Make h2 white by default */
h3 {
  color: #ffffff !important;
}

h4 {
  color: #ffffff !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
}

/* Make h2 white by default */
h4 {
  color: #ffffff !important;
}

/* Make section text match index sizing */
.anchor.section,
.section {
  font-size: 1.3rem !important;
}
.anchor.section p,
.anchor.section li,
.anchor.section a,
.anchor.section .flow-text,
.section p,
.section li,
.section a,
.section .flow-text {
  font-size: 1.3rem !important;
  line-height: 1.5 !important;
}

/* Gallery modal navigation buttons (overlayed on image) */
/* Ensure modal wrapper allows the image to grow and not be clipped */
/* Center the gallery modal using flexbox on the modal wrapper so Materialize's
   internal positioning doesn't conflict — this centers vertically + horizontally */
#gallery-modal.modal {
  overflow: visible !important;
  max-height: 90vh;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Apply flex centering only when Materialize sets the modal visible
   (Materialize toggles inline `display: block` on open). This prevents
   the modal from capturing pointer events when closed. */
#gallery-modal.modal[style*="display: block"] {
  display: flex !important; /* must beat Materialize's inline display: block */
  align-items: center;
  justify-content: center;
}

#gallery-modal .modal-content {
  /* fixed-size invisible box: 90vw x 90vh so buttons stay aligned */
  position: relative;
  z-index: 4000;
  width: 90vw;
  height: auto; /* allow caption below the box */
  max-width: none;
  box-sizing: border-box;
  padding: 0; /* remove extra padding so image positioning is predictable */
  display: flex;
  flex-direction: column; /* stack gallery-box above caption */
  align-items: center; /* center horizontally */
  justify-content: center;
  overflow: visible; /* allow caption to be visible outside the box */
}
#gallery-modal .gallery-prev,
#gallery-modal .gallery-next {
  position: absolute; /* positioned relative to .modal-content box */
  top: 50%; 
  transform: translateY(-50%); 
  background: rgba(0,0,0,0.72); /* less transparent for better contrast */
  color: var(--heading-color); /* golden arrows */
  border: none; 
  width: 56px; 
  height: 56px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 28px; 
  cursor: pointer; 
  z-index: 4100; /* above the image */ 
  box-shadow: 0 6px 18px rgba(0,0,0,0.6); 
  transition: background 0.18s ease, transform 0.12s ease, color 0.12s ease; 
}
#gallery-modal .gallery-prev { left: 14px; }
#gallery-modal .gallery-next { right: 14px; }
#gallery-modal .gallery-prev:hover,
#gallery-modal .gallery-next:hover {
  background: rgba(0,0,0,0.9);
  transform: translateY(-50%) scale(1.04);
  color: #fff; /* subtle invert on hover for clarity */
}

/* Smaller buttons for narrow screens */
@media (max-width: 480px) {
  #gallery-modal .gallery-prev,
  #gallery-modal .gallery-next {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
}

/* Ensure modal image fits within the invisible box and is centered */
#gallery-modal img#gallery-modal-img {
  display: block;
  /* make the image as large as possible inside the fixed 90vw x 90vh box */
  max-width: calc(90vw - 80px); /* leave space for buttons and small padding */
  max-height: 80vh; /* never taller than .gallery-box, which clips overflow (and the close button) */
  width: auto;
  height: auto;
  object-fit: contain; /* ensure scaling without cropping */
  margin: 0 auto;
}
.modal .modal-close {
  color: #fff;
}
/* Ensure the modal image fits the viewport without being cropped */
.modal .modal-content img {
  width: auto;
  height: auto;
  max-width: calc(85vw - 48px);
  max-height: calc(85vh - 96px);
  object-fit: contain;
  display: block;
}

/* Gallery box: fixed-size invisible container inside modal-content */
.gallery-box {
  width: 90vw;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* Shrink-wraps the image so the close button is positioned on the image */
.gallery-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

/* Close button in the top right corner of the image */
.gallery-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4200;
  background: rgba(255, 255, 255, 0.897); /* stronger contrast */
  color: black; /* golden cross */
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.gallery-close:hover { background: rgba(0,0,0,0.9); color: #fff; transform: scale(1.04); }

/* Caption below the gallery box */
.gallery-caption {
  display: inline-block; /* shrink to text width */
  margin-top: 8px;
  text-align: center;
  color: black;
  font-size: 0.95rem;
  max-width: calc(90vw - 40px);
  overflow-wrap: break-word;
  background: rgba(255, 255, 255, 0.822);
  padding: 8px 12px;
  border-radius: 6px;
  box-sizing: border-box;
}

/* Force theme consistency on small screens: ensure dark backgrounds and intended heading colors */
@media only screen and (max-width: 992px) {
  body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
  }
  h2.header { color: var(--text-color) !important; }
  .gallery-caption { background: rgba(0,0,0,0.6) !important; color: var(--text-color) !important; }
  .card, .card-panel, .card .card-content { background-color: var(--card-bg) !important; color: var(--text-color) !important; }
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  background: transparent;
}
.results-table th,
.results-table td {
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 12px;
  text-align: left;
}
.results-table thead th {
  background: rgba(0,0,0,0.6);
  font-weight: 700;
}
.results-table .group-heading th {
  background: rgba(0,0,0,0.75);
  text-align: left;
  font-weight: 700;
  padding-top: 10px;
  padding-bottom: 6px;
}
.results-table th[scope="row"] { font-weight: 600; } /* Zeilenköpfe */
.results-table td { font-weight: 400; }

@media (max-width: 600px){
  .results-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .results-table caption {
    white-space: normal;
  }
}

blockquote {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid rgba(241,211,111,0.9);
  background: rgba(255,255,255,0.02);
  color: rgba(241,211,111,0.9);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.1;
}
blockquote footer { font-size: inherit; color: white; margin-top:0.5rem; }

blockquote-artist {
  display: block;
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid rgba(241,211,111,0.9);
  background: rgba(255,255,255,0.02);
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.1;
}
blockquote-artist .artist-photo {
  width: 110px;
  height: 110px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(241,211,111,0.9);
  flex: 0 0 auto;
}
blockquote-artist .artist-quote-content {
  display: block;
}
blockquote-artist .artist-signature {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 0.75rem;
  flex-wrap: nowrap;
}
blockquote-artist footer {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  font-size: inherit;
  color: rgba(241,211,111,0.9);
  margin-top: 0;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  blockquote-artist .artist-photo {
    width: 96px;
    height: 96px;
  }
}

/* Small reusable vertical spacer */
.spacer-sm {
  display: block;
  margin-block: 0.5rem;
}

/* Middle reusable vertical spacer */
.spacer-md {
  display: block;
  margin-block: 1rem;
}

.spacer-bg {
  display: block;
  margin-block: 2rem;
}

/* Product page: a quieter, image-led storefront layout. */
.product-page {
  --product-ink: #171717;
  --product-muted: #65635d;
  --product-paper: #f4f1eb;
  --product-line: #d8d1c5;
  background: var(--product-paper) !important;
  color: var(--product-ink) !important;
}

.product-page nav {
  min-height: 76px;
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--product-line);
}

.product-page nav .nav-wrapper {
  min-height: 76px;
  max-width: 1280px !important;
  padding: 0 1.5rem !important;
}

.product-page nav .brand-logo.logo2 {
  left: 1.5rem;
  transform: translateY(-50%);
  width: min(360px, 32vw);
  height: 68px;
  background-image: url(../assets/logo_highres_transparent.png);
  background-size: contain;
}

.product-page nav .nav-left,
.product-page nav .nav-right {
  z-index: 2;
}

.product-page nav .nav-left {
  margin-left: min(380px, 30vw);
}

.product-page nav ul#nav-mobile {
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.2rem;
}

.product-page nav .nav-wrapper.container > .nav-left > ul#nav-mobile {
  flex-direction: row !important;
  align-items: center !important;
}

.product-page nav .language-selector {
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.product-page nav ul#nav-mobile li,
.product-page nav ul#nav-mobile li a {
  margin: 0 !important;
  padding: 0.65rem 0.8rem !important;
  color: var(--product-ink) !important;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-page nav ul#nav-mobile li.active a {
  color: var(--accent) !important;
  border-bottom: 1px solid var(--accent-line);
}

.product-page nav .lang-button {
  border-color: var(--control-line);
  background-color: transparent;
}

.product-page nav .lang-button:hover,
.product-page nav .lang-button.active {
  background-color: rgba(185, 149, 66, 0.12);
  border-color: var(--accent-line);
}

.product-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
}

.product-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(420px, 1.22fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 8rem);
  min-height: min(720px, calc(100vh - 76px));
  padding: 4rem 0 3rem;
}

.product-hero-copy {
  max-width: 430px;
  padding-left: clamp(0rem, 3vw, 3rem);
}

.product-eyebrow {
  margin: 0 0 1.6rem !important;
  color: var(--accent) !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: left !important;
}

.product-hero h1 {
  margin: 0 0 1.4rem;
  color: var(--product-ink) !important;
  font-size: clamp(3rem, 6vw, 6.2rem) !important;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-align: left !important;
  hyphens: none !important;
  overflow-wrap: normal;
  word-break: normal;
}

.product-hero-intro {
  max-width: 390px;
  margin: 0 0 2rem !important;
  color: var(--product-muted) !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

.product-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.3rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--accent);
  color: var(--product-ink) !important;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-hero-cta span:last-child {
  color: var(--accent);
  font-size: 1.2rem;
}

.product-hero-image {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.product-hero-image img {
  display: block;
  width: 100%;
  max-height: 650px;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
}

.product-hero-tag {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  max-width: 190px;
  padding: 0.7rem 0.8rem;
  background: rgba(23, 23, 23, 0.9);
  color: #f7f3ec;
  font-size: 0.7rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.product-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 1.8rem 0 2.2rem;
  border-top: 1px solid var(--product-line);
  border-bottom: 1px solid var(--product-line);
}

.product-benefits > div {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  column-gap: 0.8rem;
  align-items: baseline;
}

.benefit-number {
  grid-row: span 2;
  color: var(--accent);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.product-benefits strong {
  color: var(--product-ink);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-benefits p {
  margin: 0.35rem 0 0 !important;
  color: var(--product-muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

.product-main > .container {
  width: 100%;
  margin: 0;
}

.product-main section.anchor {
  max-width: 900px;
  margin: 0 auto;
  padding: 6rem 0 1rem;
  border-top: 1px solid var(--product-line);
}

.product-main section.anchor:first-child {
  border-top: 0;
}

.product-main section.anchor h3 {
  margin: 0 0 1.5rem;
  color: var(--product-ink) !important;
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: left !important;
}

.product-main section.anchor h4,
.product-main section.anchor p,
.product-main section.anchor li,
.product-main section.anchor .collection-item {
  color: var(--product-muted) !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}

.product-main section.anchor h4 {
  margin: 1rem 0;
  text-align: left !important;
}

.product-main section.anchor ul {
  padding-left: 1.2rem;
}

.product-main section.anchor .collection {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.product-main section.anchor .collection,
.product-main section.anchor .collection-item {
  background-color: transparent !important;
}

.product-main section.anchor .collection-item span {
  color: var(--product-muted) !important;
}

.product-main section.anchor .collection-item {
  border-bottom: 1px solid var(--product-line);
  background: transparent;
}

.product-main .results-table {
  color: var(--product-ink);
  border-color: var(--product-line);
}

.product-main .results-table thead th {
  background: var(--product-ink);
  color: #f7f3ec;
}

.product-main .results-table th,
.product-main .results-table td {
  border-color: var(--product-line);
}

.product-main blockquote,
.product-main blockquote-artist {
  border-left-color: var(--accent-line);
  background: rgba(255, 255, 255, 0.45);
  color: var(--product-ink);
}

.product-page footer.page-footer {
  background: var(--product-ink) !important;
}

@media (max-width: 800px) {
  .product-page nav .nav-wrapper {
    padding: 0 0.75rem !important;
  }

  .product-page nav .brand-logo.logo2 {
    left: 4.5rem;
    transform: translateY(-50%);
    width: min(260px, 58vw);
    height: 62px;
  }

  .product-page nav .nav-left {
    margin-left: 0;
  }

  .product-main {
    padding: 0 1rem 3rem;
  }

  .product-hero {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 2rem;
    min-height: 0;
    padding: 2rem 0 2.5rem;
  }

  .product-hero-copy {
    max-width: none;
    padding-left: 0;
  }

  .product-hero h1 {
    font-size: clamp(3rem, 16vw, 5rem) !important;
  }

  .product-hero-image img {
    max-height: 65vh;
  }

  .product-benefits {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .product-main section.anchor {
    padding-top: 4rem;
  }
}

/* Shared visual language for the supporting pages. */
.home-page,
.tutorial-page,
.impressum-page {
  --site-ink: #171717;
  --site-muted: #65635d;
  --site-paper: #f4f1eb;
  --site-line: #d8d1c5;
  background: var(--site-paper) !important;
  color: var(--site-ink) !important;
}

.home-page nav,
.tutorial-page nav,
.impressum-page nav {
  min-height: 76px;
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--site-line);
}

.home-page nav .nav-wrapper,
.tutorial-page nav .nav-wrapper,
.impressum-page nav .nav-wrapper {
  min-height: 76px;
  max-width: 1280px !important;
  padding: 0 1.5rem !important;
}

.home-page nav .brand-logo.logo2,
.tutorial-page nav .brand-logo.logo2,
.impressum-page nav .brand-logo.logo2 {
  left: 1.5rem;
  transform: translateY(-50%);
  width: min(360px, 32vw);
  height: 68px;
  background-image: url(../assets/logo_highres_transparent.png);
  background-size: contain;
}

.home-page nav ul#nav-mobile,
.tutorial-page nav ul#nav-mobile,
.impressum-page nav ul#nav-mobile {
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.2rem;
}

.home-page nav .nav-wrapper.container > .nav-left > ul#nav-mobile,
.tutorial-page nav .nav-wrapper.container > .nav-left > ul#nav-mobile,
.impressum-page nav .nav-wrapper.container > .nav-left > ul#nav-mobile {
  flex-direction: row !important;
  align-items: center !important;
}

.home-page nav .language-selector,
.tutorial-page nav .language-selector,
.impressum-page nav .language-selector {
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.home-page nav ul#nav-mobile li,
.home-page nav ul#nav-mobile li a,
.tutorial-page nav ul#nav-mobile li,
.tutorial-page nav ul#nav-mobile li a,
.impressum-page nav ul#nav-mobile li,
.impressum-page nav ul#nav-mobile li a {
  margin: 0 !important;
  padding: 0.65rem 0.8rem !important;
  color: var(--site-ink) !important;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-page nav ul#nav-mobile li.active a,
.tutorial-page nav ul#nav-mobile li.active a,
.impressum-page nav ul#nav-mobile li.active a {
  color: var(--accent) !important;
  border-bottom: 1px solid var(--accent-line);
}

.home-page nav .nav-left,
.tutorial-page nav .nav-left,
.impressum-page nav .nav-left {
  margin-left: min(380px, 30vw);
}

.home-page nav .lang-button,
.tutorial-page nav .lang-button,
.impressum-page nav .lang-button {
  border-color: var(--control-line);
  background-color: transparent;
}

.home-page nav .lang-button:hover,
.home-page nav .lang-button.active,
.tutorial-page nav .lang-button:hover,
.tutorial-page nav .lang-button.active,
.impressum-page nav .lang-button:hover,
.impressum-page nav .lang-button.active {
  background-color: rgba(185, 149, 66, 0.12);
  border-color: var(--accent-line);
}

.home-page > .row {
  display: block;
  max-width: 1600px;
  margin: 0 auto;
  padding: 6rem 1.5rem 10rem;
}

.home-page > .row > .container {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 3rem;
  padding: 0;
}

.home-page > .row > .container h1.header,
.home-page > .row > .container h2.header {
  display: inline;
  margin: 0;
  color: var(--site-ink) !important;
  font-size: clamp(2.4rem, 5vw, 5rem) !important;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.home-page > .row > .container h1.header:nth-of-type(2)::before {
  content: " ";
}

.home-page > .row > .container h1.header:first-of-type {
  margin-right: 0.28em;
}

.home-page > .row > .container h1.header span,
.home-page > .row > .container h2.header span {
  color: inherit !important;
  font-size: inherit !important;
}

.home-page > .row > .container h2.header {
  display: block;
  margin-top: 1rem;
  color: var(--accent) !important;
  font-size: clamp(1.1rem, 2vw, 1.7rem) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-page .home-left,
.home-page .home-right {
  float: none;
  width: 100% !important;
  justify-self: stretch !important;
  padding: 0;
}

.home-page .home-left {
  margin-bottom: 7rem;
}

.home-page .home-left > .container,
.home-page .home-right > .container {
  width: 100%;
  max-width: none !important;
  padding: 0;
}

.home-page .custom-card {
  height: 100%;
  background: transparent;
  color: var(--site-ink);
  border-radius: 0;
  box-shadow: none;
}

.home-page .home-left .custom-card {
  padding: 0;
}

.home-page .home-right .custom-card {
  padding-left: 0;
}

.home-page .custom-card h2,
.home-page .custom-card h3,
.home-page .custom-card h4 {
  color: var(--site-ink) !important;
  text-align: left !important;
}

.home-page .custom-card h4,
.home-page .custom-card .flow-text {
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
}

.home-page .home-right .custom-card h2,
.home-page .home-right .custom-card h3 {
  margin: 0 0 0.5rem !important;
  line-height: 1.1 !important;
  font-size: 1.4rem !important;
}

.home-page .card-link {
  margin: 2rem 0 3rem;
  background: #fff;
}

.home-page .card-link .card-media {
  max-height: 880px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.home-page #hero-video {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #111;
}

.home-page .home-left .card-media {
  margin-top: 2rem !important;
  aspect-ratio: 16 / 9;
  height: min(calc((100vw - 3rem) * 0.5625), 800px) !important;
  max-height: none !important;
  background: #111;
}

.home-page .home-product-copy {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--site-line);
}

.home-page .home-product-copy h3 {
  margin: 0 0 1.2rem;
  color: var(--site-ink) !important;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem) !important;
  font-weight: 500;
  text-align: left !important;
}

.home-page .gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 3.5rem;
}

.home-page .gallery-thumb {
  width: 100%;
  height: 280px;
  border: 1px solid var(--site-line);
  object-fit: cover;
  background: #fff;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.home-page .gallery-thumb:hover {
  border-color: var(--accent-line);
  transform: scale(1.02);
}

.home-page .home-product-links {
  margin-top: 8rem;
  padding-top: 2rem;
  border-top: 1px solid var(--site-line);
}

.home-page .home-product-links h3 {
  margin: 0 0 1.2rem;
  color: var(--site-ink) !important;
  font-size: 1.6rem !important;
  text-align: left !important;
}

.home-page .home-product-links .collection {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2rem;
  margin-top: 0;
}

.home-page .collection {
  margin-top: 1.8rem;
  background: transparent !important;
}

.home-page .collection .collection-item {
  padding: 0.65rem 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--site-line) !important;
}

.home-page .collection .collection-item a {
  color: var(--site-ink) !important;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-page .home-contact-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--accent-line);
  background: rgba(185, 149, 66, 0.07);
  color: var(--site-ink);
  font-size: 1.08rem;
  line-height: 1.6;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.home-page .home-contact-note:hover {
  background: rgba(185, 149, 66, 0.14);
}

.home-page .home-contact-note b {
  color: var(--accent);
  font-weight: 700;
}

.home-page .home-contact-note .material-icons {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 1.5rem;
}

@media (max-width: 600px) {
  .home-page .home-contact-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

.home-page .page-footer,
.tutorial-page .page-footer,
.impressum-page .page-footer {
  background: var(--site-ink) !important;
}

.tutorial-page > .row {
  max-width: 1000px;
  min-height: calc(100vh - 76px);
  margin: 0 auto;
  padding: 7rem 2rem 8rem;
}

.tutorial-page > .row > .col {
  float: none;
  width: 100%;
  padding: 0;
}

.tutorial-page .header {
  max-width: 760px;
  margin: 0 auto 1.2rem;
  color: var(--site-ink) !important;
  text-align: center !important;
}

.tutorial-page h1.header {
  font-size: clamp(3rem, 7vw, 6rem) !important;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.tutorial-page h2.header {
  max-width: 620px;
  color: var(--site-muted) !important;
  font-size: 1.1rem !important;
  font-weight: 400;
  line-height: 1.6 !important;
}

.impressum-page .impressum-layout {
  max-width: 1080px;
  padding: 5rem 2rem 6rem;
}

.impressum-page .impressum-layout > h1,
.impressum-page .impressum-layout > h2 {
  color: var(--site-ink) !important;
  text-align: left !important;
}

.impressum-page .impressum-layout > h1 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 6rem) !important;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.impressum-page .impressum-layout > h2 {
  margin: 1rem 0 0;
  color: var(--accent) !important;
  font-size: 1rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.impressum-page .impressum-note {
  max-width: 620px;
  margin: 2rem 0 3rem;
  color: var(--site-muted) !important;
  font-size: 1rem !important;
  text-align: left !important;
}

.impressum-page .impressum-grid {
  gap: 1px;
  background: var(--site-line);
  border: 1px solid var(--site-line);
}

.impressum-page .impressum-card {
  min-height: 170px;
  padding: 1.6rem;
  border: 0;
  border-radius: 0;
  background: var(--site-paper);
}

.impressum-page .impressum-card h3 {
  margin: 0 0 1rem;
  color: var(--site-ink) !important;
  font-size: 1rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.impressum-page .impressum-card p,
.impressum-page .impressum-card a {
  color: var(--site-muted) !important;
  font-size: 0.95rem;
  line-height: 1.55;
}

.impressum-page .impressum-card a {
  text-decoration-color: var(--accent-line);
}

@media (max-width: 800px) {
  .home-page nav .nav-wrapper,
  .tutorial-page nav .nav-wrapper,
  .impressum-page nav .nav-wrapper {
    padding: 0 0.75rem !important;
  }

  .home-page nav .brand-logo.logo2,
  .tutorial-page nav .brand-logo.logo2,
  .impressum-page nav .brand-logo.logo2 {
    left: 4.5rem;
    transform: translateY(-50%);
    width: min(260px, 58vw);
    height: 62px;
  }

  .home-page nav .nav-left,
  .tutorial-page nav .nav-left,
  .impressum-page nav .nav-left {
    margin-left: 0;
  }

  .home-page > .row {
    display: flex;
    flex-direction: column;
    padding: 3rem 1rem 4rem;
  }

  .home-page .home-left {
    margin-bottom: 4rem;
  }

  .home-page > .row > .container {
    margin-bottom: 2.5rem;
  }

  .home-page .home-left .custom-card {
    padding: 0 0 2.5rem;
    border-bottom: 1px solid var(--site-line);
  }

  .home-page .home-right .custom-card {
    padding: 2.5rem 0 0;
  }

  .home-page .card-link .card-media {
    height: auto !important;
    max-height: none;
    transform: scale(1.1);
  }

  .home-page .home-left .card-media {
    height: calc((100vw - 2rem) * 0.5625) !important;
  }

  .home-page .gallery-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .home-page .gallery-thumb {
    height: 220px;
  }

  .home-page .home-product-links {
    margin-top: 5rem;
  }

  .home-page .home-product-links .collection {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .tutorial-page > .row {
    min-height: calc(100vh - 76px);
    padding: 5rem 1rem 6rem;
  }

  .impressum-page .impressum-layout {
    padding: 4rem 1rem 5rem;
  }
}

/* Increase reading sizes without changing the display hierarchy. */
.product-hero-intro {
  font-size: 1.18rem !important;
}

.product-benefits strong {
  font-size: 1rem;
}

.product-benefits p {
  font-size: 1rem !important;
}

.product-main section.anchor h4,
.product-main section.anchor p,
.product-main section.anchor li,
.product-main section.anchor .collection-item {
  font-size: 1.16rem !important;
}

.home-page .custom-card h4,
.home-page .custom-card .flow-text {
  font-size: 1.28rem !important;
}

.home-page .collection .collection-item a {
  font-size: 0.9rem;
}

.tutorial-page h2.header {
  font-size: 1.25rem !important;
}

.impressum-page .impressum-note,
.impressum-page .impressum-card p,
.impressum-page .impressum-card a {
  font-size: 1.08rem !important;
}

@media (max-width: 800px) {
  /* Headline wraps on phones: drop the word-gap margin so each line centres exactly */
  .home-page > .row > .container h1.header:first-of-type {
    margin-right: 0;
  }
}

/* Theme toggle in the header */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin-right: 0.4rem;
  padding: 0;
  border: 1px solid var(--control-line);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--site-ink, var(--product-ink, #171717));
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background-color: rgba(185, 149, 66, 0.12);
  border-color: var(--accent-line);
  transform: scale(1.05);
}

.theme-toggle .material-icons {
  display: block;
  height: auto;
  font-size: 1.35rem;
  line-height: 1;
}

@media (max-width: 992px) {
  .theme-toggle {
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 0.2rem;
  }
}

/* Dark mode: set by js/theme.js from the visitor's choice or the system setting. */
html[data-theme="dark"] {
  color-scheme: dark;
  background: #121212;
  --accent: #d9b25a;
  --accent-line: #c9a24e;
  --nav-bg: rgba(18, 18, 18, 0.95);
  --control-line: rgba(242, 238, 230, 0.28);
}

[data-theme="dark"] .home-page,
[data-theme="dark"] .tutorial-page,
[data-theme="dark"] .impressum-page {
  --site-ink: #f2eee6;
  --site-muted: #b5aea2;
  --site-paper: #121212;
  --site-line: #2e2b26;
}

[data-theme="dark"] .product-page {
  --product-ink: #f2eee6;
  --product-muted: #b5aea2;
  --product-paper: #121212;
  --product-line: #2e2b26;
}

/* Footer keeps a dark surface (it used the ink colour, which turns light in dark mode) */
[data-theme="dark"] body .page-footer {
  background: #0a0a0a !important;
  border-top: 1px solid #2e2b26;
}

[data-theme="dark"] .page-footer .footer-copyright a {
  color: #8a847a !important;
}

[data-theme="dark"] .product-main .results-table thead th {
  background: #2a2723;
  color: var(--product-ink);
}

[data-theme="dark"] .product-main blockquote,
[data-theme="dark"] .product-main blockquote-artist {
  background: rgba(255, 255, 255, 0.04);
}

/* Product photos sit on white; soften the frame so they don't glare */
[data-theme="dark"] .product-hero-image,
[data-theme="dark"] .home-page .card-link,
[data-theme="dark"] .home-page .gallery-thumb {
  border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* Phones and small tablets: centred header logo, calmer type sizes.   */
/* ------------------------------------------------------------------ */
@media (max-width: 800px) {
  /* Header logo centred between the menu button and the controls */
  .product-page nav .brand-logo.logo2,
  .tutorial-page nav .brand-logo.logo2,
  .impressum-page nav .brand-logo.logo2 {
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(180px, 44vw);
    height: 52px;
  }
}

@media (max-width: 600px) {
  .home-page > .row {
    padding-top: 2.25rem;
  }

  .home-page > .row > .container h1.header {
    font-size: 2rem !important;
    line-height: 1.1;
  }

  .home-page > .row > .container h2.header {
    font-size: 0.95rem !important;
    margin-top: 0.75rem;
  }

  .home-page .custom-card h4,
  .home-page .custom-card .flow-text {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
  }

  .home-page .home-right .custom-card h2,
  .home-page .home-right .custom-card h3,
  .home-page .home-product-copy h3,
  .home-page .home-product-links h3 {
    font-size: 1.3rem !important;
  }

  .home-page .home-contact-note {
    font-size: 1rem;
  }

  /* Product page: centred hero, smaller headings and body text */
  .product-page .product-hero-copy {
    text-align: center !important;
    text-align-last: center !important;
  }

  .product-page .product-hero .product-eyebrow,
  .product-page .product-hero h1,
  .product-page .product-hero .product-hero-intro {
    text-align: center !important;
    text-align-last: center !important;
  }

  .product-hero h1 {
    font-size: 2.4rem !important;
    line-height: 1.02;
  }

  .product-hero-intro {
    max-width: none;
    font-size: 1.05rem !important;
  }

  .product-benefits strong {
    font-size: 0.9rem;
  }

  .product-benefits p {
    font-size: 0.95rem !important;
  }

  .product-main section.anchor {
    padding-top: 3rem;
  }

  .product-main section.anchor h3 {
    font-size: 1.75rem !important;
  }

  .product-main section.anchor h4,
  .product-main section.anchor p,
  .product-main section.anchor li,
  .product-main section.anchor .collection-item {
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
  }

  /* Inline-styled highlights (e.g. gold intro lines, table captions) */
  .product-main [style*="font-size"] {
    font-size: 1.2rem !important;
    line-height: 1.35;
  }

  /* Justified text leaves big gaps on narrow screens */
  .product-page p,
  .product-page li,
  .product-page h3,
  .product-page .flow-text,
  .product-page .collection-item,
  [data-i18n="footer.aboutText"] {
    text-align: left !important;
  }

  /* Result tables fit the screen instead of scrolling sideways */
  .product-main .results-table {
    display: table;
    white-space: normal;
    font-size: 0.85rem;
  }

  .product-main .results-table th,
  .product-main .results-table td {
    padding: 6px 8px;
  }

  /* Tutorial and Impressum: centred titles, readable sizes */
  .tutorial-page > .row {
    padding: 3.5rem 1rem 4rem;
    min-height: 0;
  }

  .tutorial-page h1.header {
    font-size: 2.4rem !important;
  }

  .tutorial-page h2.header {
    font-size: 1.05rem !important;
  }

  .impressum-page .impressum-layout {
    width: 100%;
    padding: 3rem 1rem 4rem;
  }

  .impressum-page .impressum-layout > h1,
  .impressum-page .impressum-layout > h2,
  .impressum-page .impressum-note {
    text-align: center !important;
  }

  .impressum-page .impressum-layout > h1 {
    font-size: 2.4rem !important;
  }

  .impressum-page .impressum-layout > h2 {
    font-size: 0.85rem !important;
  }

  .impressum-page .impressum-note {
    margin: 1.5rem auto 2rem;
    font-size: 0.95rem !important;
  }

  .impressum-page .impressum-card {
    min-width: 0;
    min-height: 0;
    padding: 1.2rem 1rem;
    overflow-wrap: anywhere;
  }

  .impressum-page .impressum-card p,
  .impressum-page .impressum-card a {
    font-size: 0.95rem !important;
  }

  /* Footer: smaller headings and links so the three columns fit */
  footer.page-footer h5 {
    font-size: 1.1rem;
  }

  footer.page-footer ul li a {
    font-size: 0.9rem;
  }

  footer.page-footer .row .col.s4 {
    padding: 0 0.3rem;
  }
}

/* Key results list: tighter spacing between the check-mark items */
.product-main section.anchor .collection .collection-item {
  padding: 0.55rem 0 !important;
}

.product-main section.anchor .collection .collection-item h4 {
  margin: 0 !important;
}

/* Quotes (test report + artist voices): comfortable reading size on phones */
@media (max-width: 600px) {
  .product-main blockquote,
  .product-main blockquote-artist,
  .product-main blockquote *,
  .product-main blockquote-artist * {
    text-align: left !important;
  }

  .product-main blockquote,
  .product-main blockquote-artist {
    padding: 0.8rem 0.9rem;
    font-size: 1.02rem;
    line-height: 1.5;
  }

  .product-main blockquote footer,
  .product-main blockquote-artist footer {
    font-size: 0.92rem;
    line-height: 1.4;
  }

  .product-main blockquote-artist .artist-photo {
    width: 72px;
    height: 72px;
  }
}

/* Quote source was white on the light background */
.product-main blockquote footer {
  color: var(--product-muted);
}

/* ================================================================== */
/* Compact scale: smaller logo, tighter spacing, less scrolling.       */
/* ================================================================== */
@media only screen and (min-width: 0) { html { font-size: 16px; } }
@media only screen and (min-width: 992px) { html { font-size: 16.5px; } }
@media only screen and (min-width: 1200px) { html { font-size: 17px; } }

/* Front page */
.home-page > .row {
  max-width: 1100px;
  padding: 2.5rem 1.5rem 4rem;
}

.home-page > .row > .container {
  margin-bottom: 2rem;
}

.home-page > .row > .container h1.header {
  font-size: clamp(2rem, 3.6vw, 3.4rem) !important;
}

.home-page > .row > .container h2.header {
  margin-top: 0.6rem;
  font-size: clamp(0.95rem, 1.4vw, 1.2rem) !important;
}

.home-page .custom-card h4,
.home-page .custom-card .flow-text {
  font-size: 1.1rem !important;
  line-height: 1.55 !important;
}

.home-page .home-left {
  margin-bottom: 3.5rem;
}

.home-page .home-left .card-media {
  margin-top: 1.25rem !important;
  height: min(calc((100vw - 3rem) * 0.5625), 560px) !important;
}

.home-page .card-link {
  margin: 1.25rem 0 1.75rem;
}

.home-page .card-link .card-media {
  max-height: 480px;
}

.home-page .gallery-thumbs {
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.home-page .gallery-thumb {
  height: 190px;
}

.home-page .home-product-copy {
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.home-page .home-product-links {
  margin-top: 3rem;
  padding-top: 1.5rem;
}

/* Product page */
.product-hero {
  min-height: 0;
  padding: 2.5rem 0 2rem;
  gap: clamp(2rem, 5vw, 5rem);
}

.product-hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 4.4rem) !important;
}

.product-hero-image img {
  max-height: 460px;
  /* Show the whole product instead of cropping it at the lower height */
  object-fit: contain;
}

.product-benefits {
  padding: 1.4rem 0 1.6rem;
}

.product-main {
  padding-bottom: 3rem;
}

.product-main section.anchor {
  padding: 3rem 0 0.5rem;
}

.product-main section.anchor h3 {
  margin-bottom: 1rem;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important;
}

.product-main section.anchor h4,
.product-main section.anchor p,
.product-main section.anchor li,
.product-main section.anchor .collection-item {
  font-size: 1.05rem !important;
}

.product-main [style*="font-size"] {
  font-size: 1.3rem !important;
  line-height: 1.35;
}

.product-main .card-media {
  max-height: 380px;
}

.product-main blockquote,
.product-main blockquote-artist {
  font-size: 1.15rem;
  line-height: 1.5;
}

.product-main blockquote-artist .artist-photo {
  width: 80px;
  height: 80px;
}

.product-main .spacer-md {
  margin-block: 0.5rem;
}

.product-main .spacer-bg {
  margin-block: 1rem;
}

.product-main .youtube-embed-wrap {
  max-width: 640px;
}

/* Tutorial and Impressum */
.tutorial-page > .row {
  min-height: 0;
  padding: 4rem 1.5rem 4.5rem;
}

.tutorial-page h1.header {
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
}

.tutorial-page h2.header {
  font-size: 1.1rem !important;
}

.impressum-page .impressum-layout {
  padding: 3rem 1.5rem 3.5rem;
}

.impressum-page .impressum-layout > h1 {
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
}

.impressum-page .impressum-note {
  margin: 1.25rem 0 2rem;
}

.impressum-page .impressum-card {
  min-height: 0;
  padding: 1.2rem 1.4rem;
}

.impressum-page .impressum-note,
.impressum-page .impressum-card p,
.impressum-page .impressum-card a {
  font-size: 0.98rem !important;
}

/* Footer: wider container so the "Über uns" text isn't squeezed into a tall column */
footer.page-footer {
  padding-top: 2rem;
}

footer.page-footer > .container {
  width: 92%;
  max-width: 1200px;
}

footer.page-footer h5 {
  margin: 0 0 0.8rem;
  font-size: 1.2rem;
}

footer.page-footer p,
footer.page-footer ul li a {
  font-size: 0.92rem;
  line-height: 1.55;
}

footer.page-footer .footer-copyright {
  padding: 0.6rem 0;
}

@media only screen and (min-width: 993px) {
  footer.page-footer .row .col.l4 {
    width: 46%;
    padding-right: 2.5rem;
  }

  footer.page-footer .row .col.l2,
  footer.page-footer .row .col.l3 {
    width: 18%;
  }
}

/* Phones */
@media (max-width: 600px) {
  .home-page > .row {
    padding: 1.75rem 1rem 3rem;
  }

  .home-page > .row > .container h1.header {
    font-size: 1.75rem !important;
  }

  .home-page > .row > .container h2.header {
    font-size: 0.85rem !important;
  }

  .home-page .custom-card h4,
  .home-page .custom-card .flow-text {
    font-size: 1rem !important;
  }

  .home-page .home-left {
    margin-bottom: 2.5rem;
  }

  .home-page .home-left .card-media {
    height: calc((100vw - 2rem) * 0.5625) !important;
  }

  .home-page .card-link .card-media {
    transform: none;
  }

  .home-page .gallery-thumb {
    height: 130px;
  }

  .home-page .home-product-links {
    margin-top: 2.5rem;
  }

  .product-hero {
    padding: 1.25rem 0 1.75rem;
    gap: 1.25rem;
  }

  .product-hero-image img {
    max-height: 300px;
  }

  .product-page .product-hero h1 {
    font-size: 2rem !important;
  }

  .product-main section.anchor {
    padding-top: 2.25rem;
  }

  .product-main section.anchor h3 {
    font-size: 1.5rem !important;
  }

  .product-main section.anchor h4,
  .product-main section.anchor p,
  .product-main section.anchor li,
  .product-main section.anchor .collection-item {
    font-size: 0.98rem !important;
  }

  .product-main [style*="font-size"] {
    font-size: 1.1rem !important;
  }

  .product-main blockquote,
  .product-main blockquote-artist {
    font-size: 0.98rem;
  }

  .product-main .card-media {
    height: auto;
    max-height: 260px;
  }

  .product-main .youtube-embed-wrap {
    width: 100%;
  }

  .tutorial-page > .row {
    padding: 2.5rem 1rem 3rem;
  }

  .tutorial-page h1.header,
  .impressum-page .impressum-layout > h1 {
    font-size: 2rem !important;
  }

  .impressum-page .impressum-layout {
    padding: 2rem 1rem 2.5rem;
  }

  footer.page-footer {
    padding-top: 1.5rem;
  }

  footer.page-footer h5 {
    font-size: 1.05rem;
  }

  footer.page-footer p,
  footer.page-footer ul li a {
    font-size: 0.88rem;
  }
}

/* ================================================================== */
/* Header: menu on the left, logo in the centre, controls on the right */
/* ================================================================== */
nav .nav-wrapper,
.product-page nav .nav-wrapper,
.home-page nav .nav-wrapper,
.tutorial-page nav .nav-wrapper,
.impressum-page nav .nav-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
}

nav .nav-wrapper > .nav-left,
.product-page nav .nav-left,
.home-page nav .nav-left,
.tutorial-page nav .nav-left,
.impressum-page nav .nav-left {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin-left: 0;
  padding-left: 0;
}

nav .nav-wrapper > .nav-right {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin-left: 0;
  padding-right: 0;
}

nav .brand-logo.logo2,
.product-page nav .brand-logo.logo2,
.home-page nav .brand-logo.logo2,
.tutorial-page nav .brand-logo.logo2,
.impressum-page nav .brand-logo.logo2 {
  grid-column: 2;
  grid-row: 1;
  position: static;
  left: auto;
  top: auto;
  transform: none;
  pointer-events: auto;
  width: min(240px, 22vw);
  height: 60px;
  max-height: none;
}

@media (max-width: 992px) {
  nav .brand-logo.logo2,
  .product-page nav .brand-logo.logo2,
  .home-page nav .brand-logo.logo2,
  .tutorial-page nav .brand-logo.logo2,
  .impressum-page nav .brand-logo.logo2 {
    width: min(200px, 44vw);
    height: 52px;
  }
}

/* Only the link carries padding, so the menu stays clear of the centred logo */
.product-page nav ul#nav-mobile li,
.home-page nav ul#nav-mobile li,
.tutorial-page nav ul#nav-mobile li,
.impressum-page nav ul#nav-mobile li {
  padding: 0 !important;
}

/* Narrow desktops: tighten the menu so it never runs into the centred logo */
@media (min-width: 993px) and (max-width: 1180px) {
  nav .brand-logo.logo2,
  .product-page nav .brand-logo.logo2,
  .home-page nav .brand-logo.logo2,
  .tutorial-page nav .brand-logo.logo2,
  .impressum-page nav .brand-logo.logo2 {
    width: 180px;
    height: 52px;
  }

  .product-page nav ul#nav-mobile li a,
  .home-page nav ul#nav-mobile li a,
  .tutorial-page nav ul#nav-mobile li a,
  .impressum-page nav ul#nav-mobile li a {
    padding: 0.65rem 0.45rem !important;
    letter-spacing: 0.06em;
  }
}

/* ================================================================== */
/* Front page: one even spacing rhythm between the blocks              */
/* ================================================================== */
.home-page {
  --home-gap: 2rem;
  --home-gap-sm: 0.9rem;
}

.home-page > .row {
  padding-top: var(--home-gap);
  padding-bottom: calc(var(--home-gap) * 1.25);
}

.home-page > .row > .container {
  margin-bottom: var(--home-gap);
}

.home-page .home-left {
  margin-bottom: var(--home-gap);
}

.home-page .custom-card h4,
.home-page .custom-card .flow-text {
  margin-top: 0;
  margin-bottom: var(--home-gap-sm);
}

.home-page .home-left .card-media {
  margin-top: 0 !important;
  margin-bottom: var(--home-gap-sm);
}

.home-page .home-right .custom-card h2,
.home-page .home-right .custom-card h3 {
  margin-bottom: 0.4rem;
}

.home-page .card-link {
  margin-top: var(--home-gap-sm);
  margin-bottom: var(--home-gap-sm);
}

.home-page .gallery-thumbs {
  margin-bottom: var(--home-gap);
}

.home-page .home-product-copy,
.home-page .home-product-links {
  margin-top: var(--home-gap);
  padding-top: var(--home-gap);
}

.home-page .home-product-copy {
  margin-top: 0;
}

.home-page .home-product-copy h3,
.home-page .home-product-links h3 {
  margin-bottom: var(--home-gap-sm) !important;
}

.home-page .custom-card > :last-child,
.home-page .home-product-copy > :last-child {
  margin-bottom: 0;
}

.home-page .home-product-links .collection {
  margin-bottom: 0;
}

.home-page .home-contact-note {
  margin-top: var(--home-gap-sm);
}

@media (max-width: 800px) {
  /* Divider between the two columns sits exactly in the middle of the gap */
  .home-page .home-left {
    margin-bottom: 0;
  }

  .home-page .home-left .custom-card {
    padding-bottom: var(--home-gap);
  }

  .home-page .home-right .custom-card {
    padding-top: var(--home-gap);
  }
}

@media (max-width: 600px) {
  .home-page {
    --home-gap: 1.5rem;
    --home-gap-sm: 0.75rem;
  }
}

/* Product page: collapsible sections (<details>), so visitors pick what to read */
.product-main section.anchor {
  padding: 0;
}

/* Sections are split over two containers; keep the divider above the second group */
.product-main > .container + .container section.anchor:first-child {
  border-top: 1px solid var(--product-line);
}

.product-main > .container:last-child section.anchor:last-child {
  border-bottom: 1px solid var(--product-line);
}

.product-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 0;
  cursor: pointer;
  list-style: none;
}

.product-accordion > summary::-webkit-details-marker {
  display: none;
}

.product-accordion > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.product-main section.anchor .product-accordion > summary h3 {
  margin: 0;
  transition: color 0.15s ease;
}

.product-main section.anchor .product-accordion > summary:hover h3 {
  color: var(--accent) !important;
}

.product-accordion-icon {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 2rem;
  transition: transform 0.2s ease;
}

.product-accordion[open] .product-accordion-icon {
  transform: rotate(180deg);
}

.product-accordion-body {
  padding-bottom: 2.5rem;
}

@media (max-width: 600px) {
  .product-accordion > summary {
    padding: 1.2rem 0;
  }
}