/* ==========================================================================
   JJ Weiler — Design Tokens
   Abgeleitet aus dem bestehenden Joomla-Template (PIXELMECHANICS, 2014):
   Marke "Anthrazit + Melonengelb" (siehe Logo_Anthrazit_Melonengelb.png),
   Farbwerte 1:1 aus templates/pm_template/css/styles.css übernommen.
   ========================================================================== */

:root {
  /* Marke */
  --jjw-anthrazit: #272d33;      /* dominante dunkle Farbe, Header/Footer/Nav */
  --jjw-anthrazit-80: #3a4149;
  --jjw-melone: #f7a942;         /* Akzentfarbe, 46x im Original-CSS verwendet */
  --jjw-melone-dark: #e28327;    /* für Hover-Zustände, aus Original-Palette */

  /* Neutrale Töne (aus Original-CSS übernommen) */
  --jjw-grau: #6a6d6f;
  --jjw-grau-hell: #dadbdc;
  --jjw-hintergrund: #f5f5f5;
  --jjw-weiss: #ffffff;

  /* Typografie */
  --jjw-font-base: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --jjw-radius: 2px;             /* Original ist sehr kantig/technisch, kein starkes Abrunden */
  --jjw-container-max: 1200px;
  --jjw-transition: 180ms ease;

  /* Überschriften-Größen — benannt statt an jeder Stelle neu erfunden.
     xl  = H1/H2/H3-Normalform Unterseiten, Intro-Kicker, Feature-Box-Label
     lg  = große Slider-/Wide-Image-Banner-Überschrift
     md  = dünne Slider-/Wide-Image-Banner-Unterüberschrift */
  --jjw-heading-xl: clamp(1.8rem, 4.5vw, 3.4rem);
  --jjw-heading-lg: clamp(1.8rem, 5vw, 4rem);
  --jjw-heading-md: clamp(1.35rem, 2.6vw, 1.9rem);
  --jjw-heading-sm: clamp(1rem, 2vw, 1.3rem);

  /* Buttons */
  --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
}



/* ==========================================================================
   Fonts
   Raleway wird selbst gehostet (DSGVO-Praxis wie bei den anderen
   f3n-Projekten). Variable-Font-Datei deckt mit einer einzigen Datei den
   kompletten Schnittbereich 100–900 ab, statt fünf einzelne Dateien pro
   Schriftschnitt laden zu müssen.
   Format ist WOFF (nicht WOFF2). WOFF ist trotzdem ein reguläres,
   von allen gängigen Browsern unterstütztes Web-Font-Format, komplett
   selbst gehostet — nur etwas größer als WOFF2 wäre. Falls ihr auf einem
   Rechner mit funktionierendem `pip install brotli` (oder einem
   Font-Konvertierungs-Tool) seid, könnt ihr dieselbe TTF-Datei noch zu
   WOFF2 nachkonvertieren und hier einfach zusätzlich referenzieren.
   ========================================================================== */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../Fonts/Raleway-Variable.woff') format('woff');
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }

body {
  font-family: var(--jjw-font-base);
  font-size: 17px;
  color: #6a6d6f;
  background: var(--jjw-weiss);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Unterseiten-Normalfall — H1/H2/H3 unterschiedlich: H1 unverändert groß/fett, H2 dünn und mittelgroß, H3 kleiner und mittelfett. Alle drei hell (--jjw-melone) als Standard, dunkel (--jjw-melone-dark) bei Hover/Aktiv — einheitlich für alle Überschriften. 
   Startseiten-Sonderfälle (Slider, Feature-Box-Grid, Wide-Image-Banner,
   Produktliste/News, Footer) haben eigene, klassenbasierte Regeln mit
   höherer Spezifität und bleiben davon unberührt. */
h1, .jjw-display {
  font-family: var(--jjw-font-base);
  font-size: var(--jjw-heading-xl) !important;
  font-weight: 900 !important;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--jjw-melone) !important;
}
h2 {
  font-family: var(--jjw-font-base);
  font-size: var(--jjw-heading-md) !important;
  font-weight: 300 !important;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--jjw-melone) !important;
}
h3 {
  font-family: var(--jjw-font-base);
  font-size: var(--jjw-heading-sm) !important;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--jjw-melone) !important;
}
a:hover h1, h1 a:hover,
a:hover h2, h2 a:hover,
a:hover h3, h3 a:hover {
  color: var(--jjw-melone-dark) !important;
}

/* Sidebar-Überschrift "Menü"/"News" sieht aktuell wie H1 aus, ist aber
   bewusst eine eigene, unabhängige Regel— falls sich das
   künftig ändern soll, hier anpassen, ohne die echte H1-Regel anzufassen. */
.jjw-subpage-sidebar h2 {
  font-size: var(--jjw-heading-xl) !important;
  font-weight: 900 !important;
  line-height: 1.05;
  color: var(--jjw-melone) !important;
}

a { color: var(--jjw-melone-dark); text-decoration: none; }
a:hover { color: #545454; text-decoration: none; }

/* Globaler Fokus-Fix: der blaue Browser-Standard-Fokusring taucht sonst bei
   jeder neuen interaktiven Komponente wieder auf. Für Maus-Klicks kein Ring,
   für Tastatur-Fokus ein dezenter, markentreuer Ersatz. */
a:focus, button:focus, .dropdown-item:focus {
  outline: none;
}
a:focus-visible, button:focus-visible, .dropdown-item:focus-visible {
  outline: 2px solid var(--jjw-melone);
  outline-offset: 2px;
}

ul {
  list-style: none;
  padding-left: 1.1rem;
}

.jjw-container { max-width: var(--jjw-container-max); }

/* Topbar entfernt — Utility-Links (Karriere/Kontakt/Downloads/Suche) sitzen
   jetzt direkt im Header neben dem Logo, wie im Original. */

/* ==========================================================================
   Header — Logo links, Utility-Navigation rechts (Karriere/Kontakt/
   Downloads/Suche), alles in einer Zeile wie im Original.
   ========================================================================== */
.jjw-header {
  padding: 1.1rem 0;
  background: var(--jjw-weiss);
  border-bottom: 1px solid var(--jjw-grau-hell);
}
.jjw-header .logo { max-height: 56px; width: auto; }

.jjw-header-utility {
  font-size: 0.85rem;
}
.jjw-header-utility a {
  font-weight: 500;
  color: var(--jjw-grau);
}
.jjw-header-utility a:hover { color: var(--jjw-melone-dark); }

.jjw-search { border: 1px solid var(--jjw-grau-hell); }
.jjw-search input[type="search"] {
  border: none;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  outline: none;
  width: 130px;
}
.jjw-search button {
  background: var(--jjw-melone);
  border: none;
  color: var(--jjw-anthrazit);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
}
.jjw-search button:hover { background: var(--jjw-melone-dark); color: var(--jjw-weiss); }

/* ==========================================================================
   Hauptnavigation
   ========================================================================== */
.jjw-navbar {
  background: var(--jjw-anthrazit);
  padding-top: 0;
  padding-bottom: 0;
}
.jjw-navbar .navbar-collapse,
.jjw-navbar .navbar-nav {
  align-items: stretch;
}
/* Echter Zwischenraum zwischen den Items — verhindert, dass sich der
   border-bottom eines aktiven und eines gehoverten Nachbar-Items berühren
   (sah als durchgehende Linie unelegant aus, siehe Chat). */
.jjw-navbar .navbar-nav {
  gap: 10px;
}
.jjw-navbar .navbar-nav .nav-item {
  display: flex;
}
.jjw-navbar .navbar-nav .nav-link {
  display: flex;
  align-items: center;
  color: var(--jjw-weiss);
  font-weight: 600;
  font-size: 1.1875rem; /* 19px */
  text-transform: uppercase;
  letter-spacing: 0.01em;
  /* Horizontal wie spezifiziert (11px), vertikal bewusst großzügiger als
     die Original-Angabe (7px/5px) — damit wirkt die Navbar zu dünn im
     Vergleich zur Zertifikats-Leiste darunter */
  padding: 20px 11px 16px;
  border-bottom: 10px solid transparent;
  transition: border-color var(--jjw-transition);
}
.jjw-navbar .navbar-nav .nav-link:hover,
.jjw-navbar .navbar-nav .nav-link.active,
.jjw-navbar .navbar-nav .nav-item.dropdown:hover > .nav-link {
  color: var(--jjw-weiss);
  border-bottom: 10px solid var(--jjw-melone);
}
/* Kein Rahmen/Kasten mehr bei Fokus — weder blau (Browser-Default) noch
   orange. Tastatur-Fokus zeigt
   stattdessen dieselbe Bottom-Border-Optik wie Hover/Aktiv, kein Kasten. */
.jjw-navbar .navbar-nav .nav-link:focus,
.jjw-navbar .navbar-nav .nav-link:focus-visible,
.jjw-navbar .navbar-nav .nav-link:active,
.jjw-navbar .navbar-nav .nav-link.show {
  outline: none !important;
  box-shadow: none !important;
}
.jjw-navbar .navbar-nav .nav-link:focus-visible {
  border-bottom: 10px solid var(--jjw-melone);
}
.jjw-navbar-toggler {
  border: none;
  border-radius: 0;
  padding: 0.5rem 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.jjw-navbar-toggler:focus { box-shadow: none; }
.jjw-toggler-bar {
  display: block;
  width: 26px;
  height: 3px;
  background-color: var(--jjw-weiss);
  border-radius: 1px;
}

/* Mobil (<lg): Suche direkt neben dem Hamburger, kompakter als die
   Desktop-Variante im Header. */
.jjw-search-mobile {
  gap: 0;
}
.jjw-search-mobile input[type="search"] { width: 100px; }

/* Mobil (<lg): aufgeklapptes Panel ist laut Referenz-Screenshot des
   Originals WEISS (nicht dunkel wie die Desktop-Leiste) — Textfarbe und
   Aktiv-Zustand dementsprechend umgekehrt gegenüber der Desktop-Optik. */
@media (max-width: 991.98px) {
  .jjw-navbar .navbar-collapse {
    background: var(--jjw-weiss);
    margin: 0 -0.75rem;
    padding: 0 0.75rem;
  }
  /* Original-Regel .nav-item{display:flex} ist für die Desktop-
     Bottom-Border-Optik gedacht (Link + Rand nebeneinander in einer
     Zeile) — auf Mobil hat dasselbe li aber ZWEI Kinder (Link UND das
     verschachtelte Untermenü), die dadurch ungewollt nebeneinander statt
     übereinander standen. */
  .jjw-navbar .navbar-nav .nav-item {
    flex-direction: column;
    align-items: stretch;
  }
  .jjw-navbar .navbar-nav .nav-link {
    color: var(--jjw-anthrazit);
    border-bottom: 1px solid var(--jjw-grau-hell);
    padding: 0.9rem 0.5rem;
  }
  .jjw-navbar .navbar-nav .nav-link:hover,
  .jjw-navbar .navbar-nav .nav-link.active,
  .jjw-navbar .navbar-nav .nav-item.dropdown:hover > .nav-link {
    background: var(--jjw-melone);
    color: var(--jjw-weiss);
    border-bottom-color: var(--jjw-melone);
  }
  .jjw-navbar .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    background: var(--jjw-grau-hell);
    box-shadow: none;
    margin: 0.25rem 0 0.75rem;
    padding: 0.5rem 0;
  }
  .jjw-navbar .dropdown-menu .dropdown-item {
    padding: 0.6rem 1rem;
  }
  .jjw-mobile-utility .nav-link {
    font-weight: 500;
    font-size: 1rem;
    text-transform: none;
  }
}

/* Dropdown */
/* Original zeigt auf Desktop kein Dreieck als Untermenü-Indikator */
.jjw-navbar .dropdown-toggle::after { display: none; }
/* Mobil: "+"/"−" als Akkordeon-Indikator statt gar keinem Symbol — laut
   Referenz-Screenshot des Originals so auf Mobilgeräten gestaltet. */
@media (max-width: 991.98px) {
  .jjw-navbar .dropdown-toggle::after {
    display: inline-block;
    content: '+';
    font-weight: 700;
    margin-left: auto;
    border: none;
    vertical-align: middle;
  }
  .jjw-navbar .dropdown-toggle[aria-expanded="true"]::after {
    content: '\2212';
  }
}
.jjw-navbar .dropdown-menu {
  border-radius: 0;
  border-color: var(--jjw-grau-hell);
  padding: 0.25rem 0;
  margin-top: 0;
}
.jjw-navbar .dropdown-item {
  font-size: 0.92rem;
  padding: 0.55rem 1.25rem;
}
.jjw-navbar .dropdown-item.active {
  background-color: var(--jjw-weiss);
  color: var(--jjw-melone);
}
.jjw-navbar .dropdown-item:hover,
.jjw-navbar .dropdown-item:focus-visible {
  background: var(--jjw-melone);
  color: var(--jjw-anthrazit);
}

/* ==========================================================================
   Hero 
   ========================================================================== */
/* Original: 50px Abstand zum Menü, 3% (breitenbezogen, CSS-Eigenheit bei
   vertikalen Margins) zum Produktraster — hier bewusst vereinheitlicht auf
   feste Werte, siehe Chat-Begründung. */
.jjw-hero { position: relative; margin-top: 50px; margin-bottom: 40px; }
.jjw-hero .carousel-item {
  position: relative;
  height: 62vh;
  min-height: 380px;
  background-size: cover;
  background-position: center;
}
.jjw-hero .hero-slide-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: 3rem;
}
.jjw-hero .carousel-caption-box {
  max-width: 640px;
  background-color: rgba(247, 169, 66, 0.85);
  color: var(--jjw-weiss);
  padding: 2.25rem 2.5rem;
  text-align: left;
}
@media (max-width: 575.98px) {
  .jjw-hero .carousel-caption-box { padding: 1.5rem 1.25rem; }
}
/* Original: .slider_box .title { font:900 83px/78px Raleway; uppercase } */
.jjw-hero .carousel-caption-box h2 {
  color: var(--jjw-weiss) !important;
  font-weight: 900 !important;
  font-size: var(--jjw-heading-lg);
  line-height: 0.95;
  margin-bottom: 0.4rem;
}
/* Original: .slider_box .description { font:500 55px/58px Raleway; uppercase } */
.jjw-hero .carousel-caption-box h3 {
  color: var(--jjw-weiss) !important;
  font-weight: 500 !important;
  font-size: var(--jjw-heading-md);
  line-height: 1.05;
  margin-bottom: 0.75rem;
}
/* Original: .slider_box p.caption { width:75%; font:16px/26px Raleway; float:left } */
.jjw-hero .carousel-caption-box p.caption {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  text-transform: none;
  max-width: 85%;
  margin-bottom: 1.25rem;
}
/* Pfeil-Button rechtsbündig innerhalb der Caption-Box (war ohne diese
   Regel einfach ein links stehendes Block-Element unter dem Text). */
.jjw-hero .carousel-caption-box .jjw-arrow-btn {
  display: flex;
  margin-left: auto;
}

.jjw-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--jjw-weiss);
  color: var(--jjw-weiss);
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 700;
  transition: background var(--jjw-transition), color var(--jjw-transition);
}
.jjw-arrow-btn:hover { background: var(--jjw-weiss); color: var(--jjw-anthrazit); }

/* ==========================================================================
   Feature-Boxen (Konstruktion / Werkzeugbau / Prototypenbau / Stanzerei)
   Gradients 1:1 aus dem Original-CSS von pm_template übernommen.
   ========================================================================== */
/* Direkt hier statt über .frame — derselbe Grund wie beim
   Wide-Image-Banner (siehe Chat). */
.jjw-feature-box-grid { margin-bottom: 50px; }
.jjw-feature-box {
  position: relative;
  height: 260px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: block;
  color: var(--jjw-weiss);
}
.jjw-feature-box .gray_gradient {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(106,109,111,1) 0%, rgba(106,109,111,1) 3%, rgba(106,109,111,0.13) 100%);
}
.jjw-feature-box .orange_gradient {
  z-index: 2;
  opacity: 0;
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(247,169,66,1) 0%, rgba(253,233,206,0.44) 74%, rgba(255,255,255,0) 100%);
  transition: opacity 300ms ease-in-out;
}
.jjw-feature-box:hover .orange_gradient { opacity: 1; }
/* Original: .box .title { font:900 50px/1em Raleway; uppercase; margin-bottom:6px } */
.jjw-feature-box .feature-label {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  z-index: 3;
  color: var(--jjw-weiss) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  font-size: var(--jjw-heading-xl) !important;
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 0;
  max-width: 75%;
}
.jjw-feature-box .feature-arrow {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jjw-melone);
  color: var(--jjw-weiss);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

/* Buttons — über die "Formate"-Dropdown im RTE direkt auf einen markierten
   Link anwendbar (siehe Configuration/RTE/Default.yam)
   Beide: Melone-Hintergrund, weißer Text, dunkleres Orange bei Hover, keine abgerundeten Ecken. "CTA" plakativer (fetter, größer), "dezent" zurückhaltender (leichteres Gewicht, kleiner). */
.jjw-btn-cta,
.jjw-btn-secondary {
  display: inline-block;
  background: var(--jjw-melone);
  color: var(--jjw-weiss) !important;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 0;
  transition: background var(--jjw-transition);
}
.jjw-btn-cta:hover,
.jjw-btn-secondary:hover {
  background: var(--jjw-melone-dark);
  color: var(--jjw-weiss) !important;
}
.jjw-btn-cta {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  padding: 1rem 2.5rem;
}
.jjw-btn-secondary {
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 0.65rem 1.75rem;
}

.btn-primary {
    --bs-btn-color: var(--jjw-weiss);
    --bs-btn-bg:var(--jjw-melone);
    --bs-btn-border-color: var(--jjw-melone);
    --bs-btn-hover-color: var(--jjw-weiss);
    --bs-btn-hover-bg:var(--jjw-melone-dark);
    --bs-btn-hover-border-color:var(--jjw-melone-dark);
    /* Erwartet ein RGB-Zahlentripel ohne rgb(), nicht eine Farbe:
       Bootstrap setzt daraus rgba(var(--bs-btn-focus-shadow-rgb), .5).
       #e28327 = 226, 131, 39 (--jjw-melone-dark). */
    --bs-btn-focus-shadow-rgb: 226, 131, 39;
    --bs-btn-active-color: var(--jjw-weiss);
    --bs-btn-active-bg:var(--jjw-melone-dark);
    --bs-btn-active-border-color: var(--jjw-melone-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--jjw-grau);
    /* War noch Bootstrap-Blau aus der Vorlage — deaktivierte Buttons
       waeren damit blau statt grau gewesen. */
    --bs-btn-disabled-bg: var(--jjw-grau-hell);
    --bs-btn-disabled-border-color: var(--jjw-grau-hell);
}

.btn-outline-primary {
    --bs-btn-color: var(--jjw-melone);
    --bs-btn-border-color: var(--jjw-melone);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--jjw-melone);
    --bs-btn-hover-border-color: var(--jjw-melone);
    /* Zahlentripel, kein Farbwert — war noch Bootstrap-Blau (13,110,253).
       #f7a942 = 247, 169, 66 (--jjw-melone). */
    --bs-btn-focus-shadow-rgb: 247, 169, 66;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--jjw-melone);
    --bs-btn-active-border-color: var(--jjw-melone);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--jjw-melone);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--jjw-melone);
    --bs-gradient: none;
}

/* ==========================================================================
   Kompetenzen / Leistungen — Kartenraster
   Entspricht den vorhandenen Bildordnern: Werkzeugbau, Werkzeuge, Stanzerei,
   Stanz-Umformteile, Prototypenbau, Qualitätsmanagement.
   ========================================================================== */
.jjw-section { padding: 4.5rem 0; }
.jjw-section-alt { background: var(--jjw-hintergrund); }

.jjw-kicker {
  color: var(--jjw-melone-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

/* ==========================================================================
   Zertifizierungen — ISO 9001 / IATF 16949
   ========================================================================== */
.jjw-cert-strip {
  background: var(--jjw-anthrazit);
  color: var(--jjw-grau-hell);
  padding: 1.5rem 0;
}
.jjw-cert-strip .cert-badge {
  border: 1px solid rgba(255,255,255,0.2);
  padding: 1rem 1.5rem;
  font-weight: 700;
  color: var(--jjw-weiss);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

/* ==========================================================================
   Kundenlogos
   ========================================================================== */
.jjw-logo-strip { padding: 3rem 0; }
.jjw-logo-strip img {
  max-height: 42px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: opacity var(--jjw-transition), filter var(--jjw-transition);
}
.jjw-logo-strip img:hover { filter: grayscale(0); opacity: 1; }

/* ==========================================================================
   Intro-Textblock ("JOH. JEAN WEILER" — Unternehmensbeschreibung)
   ========================================================================== */
/* ==========================================================================
   Heading-Utility-Klassen — Optik unabhängig vom Heading-Level.
   Original: h1 { 900 55px/1em }, #content .title { 900 55px/58px },
   #content .description { 300 55px/58px } — alle drei sichtbar sehr
   ähnlich (orange, uppercase, ~55px), aber bewusst getrennte Klassen, damit
   nur genau ein Element pro Seite als echtes <h1> ausgezeichnet wird.
   Auf beliebige Heading-Tags (h1/h2/h3) anwendbar.
   ========================================================================== */
.jjw-heading-hero-bold,
.frame-jjw_heading_hero_bold h1,
.frame-jjw_heading_hero_bold h2,
.frame-jjw_heading_hero_bold h3,
.frame-jjw_heading_hero_bold h4,
.frame-jjw_heading_hero_bold h5,
.frame-jjw_heading_hero_bold h6 {
  font-weight: 900;
  font-size: var(--jjw-heading-xl);
  line-height: 1.05;
  color: var(--jjw-melone);
}
/* Laut Absprache "ähnlich der dünnen Slider-Überschrift, aber nicht zu
   100% identisch" — vorläufig auf --jjw-heading-md gesetzt (Näherung).
   Bitte im Browser gegen das Original gegenchecken und bei Bedarf eine
   eigene, vierte Größenvariable daraus machen, statt hier zu raten. */
.jjw-heading-hero-light,
.frame-jjw_heading_hero_light h1,
.frame-jjw_heading_hero_light h2,
.frame-jjw_heading_hero_light h3,
.frame-jjw_heading_hero_light h4,
.frame-jjw_heading_hero_light h5,
.frame-jjw_heading_hero_light h6 {
  font-weight: 300 !important;
  font-size: var(--jjw-heading-md) !important;
  line-height: 1.05;
  color: var(--jjw-melone);
}
/* nur die echte, einmalige Seiten-H1 bekommt zusätzlich den Original-Margin */
h1.jjw-heading-hero-bold, .frame-jjw_heading_hero_bold h1 { margin: -0.05em 0 0.5em 0; }

/* Intro-Textblock (H1-Kicker, H2-Claim, 2-spaltiger Text) braucht keine
   eigene CSS-Klasse mehr: Absatz-/Bullet-Farbe entsprechen exakt der
   ererbten body-Farbe (#6a6d6f), die beiden Überschriften laufen über
   jjw-heading-hero-bold/-light oben. Reine Standard-Elemente, keine
   Sonderformatierung nötig (siehe Chat — war vorher unnötig doppelt). */

/* ==========================================================================
   Wide-Image-Banner (Qualität / Leadinghouse) — großes Hintergrundbild mit
   halbtransparenter Farbbox darüber, plus Parallax-Effekt beim Scrollen.
   Zwei Varianten: orange (Qualität) und dunkel/anthrazit (Leadinghouse),
   gleiche Struktur, andere Akzentfarbe.
   Original nutzt skrollr (2014, unsupported) — hier mit purem JS nachgebaut
   (siehe js/parallax.js), keine alte Abhängigkeit reingeholt.
   ========================================================================== */
.jjw-wide-image-banner {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Original: .wide_image .custom { padding:110px; padding-left:18% } */
  padding: 110px 0;
  /* Direkt hier statt über .frame — Content Blocks scheint dieses Element
     nicht zuverlässig in den Standard-.frame-Wrapper zu packen (siehe
     Chat), also lieber der sichere, direkte Weg. */
  margin-bottom: 50px;
}
.jjw-wide-image-banner .jjw-parallax-bg {
  position: absolute;
  inset: -20% 0;
  background-size: cover;
  background-position: center 50%;
  will-change: transform;
  z-index: 0;
}
.jjw-wide-image-banner .container {
  position: relative;
  z-index: 1;
  padding-left: 18%;
}
@media (max-width: 991.98px) {
  .jjw-wide-image-banner .container { padding-left: var(--bs-gutter-x, 0.75rem); }
  .jjw-wide-image-banner { padding: 60px 0; min-height: 360px; }
}
.jjw-promo-box {
  max-width: 620px;
  padding: 2.25rem 2.5rem;
  color: var(--jjw-weiss);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
@media (max-width: 991.98px) {
  .jjw-promo-box { max-width: none; }
}
.jjw-promo-box.is-orange { background-color: rgba(247, 169, 66, 0.85); }
.jjw-promo-box.is-dark   { background-color: rgba(39, 45, 51, 0.85); }
.jjw-promo-box .promo-title { flex: 0 0 auto; }
.jjw-promo-box .promo-text { flex: 1 1 320px; }
/* Original: .wide_below .title { font:900 83px/78px Raleway; uppercase } */
.jjw-promo-box h2 {
  color: var(--jjw-weiss) !important;
  font-weight: 900 !important;
  font-size: var(--jjw-heading-lg);
  line-height: 0.95;
  margin: 0;
}
/* Original: .wide_below .description { font:500 55px/58px Raleway; uppercase } */
.jjw-promo-box h3 {
  color: var(--jjw-weiss) !important;
  font-size: var(--jjw-heading-md);
  font-weight: 500 !important;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
/* Original: p.caption { width:75%; font:16px/26px Raleway; float:left } */
.jjw-promo-box p.caption {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  text-transform: none;
  max-width: 85%;
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   "Unsere Produkte" — Container-Überschrift. Die eigentliche Linkliste
   läuft über menu_pages/menu_subpages und wird universell weiter unten
   formatiert (siehe "TYPO3-Menü-Inhaltselemente").
   ========================================================================== */

/* ==========================================================================
   TYPO3-Menü-Inhaltselemente — universell für ALLE Menütypen, die TYPO3
   mit einer Klasse wie "frame-type-menu_pages", "frame-type-menu_subpages"
   usw. kennzeichnet ([class*="frame-type-menu"] fängt sie alle automatisch
   ab, auch künftige, ohne dass hier je etwas nachgepflegt werden muss).
   Betrifft z. B. die Produktliste UND das Unterseiten-Menü in der
   Seitenspalte — beide sehen dadurch garantiert identisch aus.
   Unterstrich sitzt bewusst auf dem <li>, nicht dem <a> (siehe Chat):
   nur so ist die volle Zeilenbreite unabhängig vom <a>-Aufbau garantiert.
   ========================================================================== */
[class*="frame-type-menu"] ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
[class*="frame-type-menu"] li {
  display: flex !important;
  align-items: center;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--jjw-grau-hell) !important;
  transition: background var(--jjw-transition), color var(--jjw-transition);
}
[class*="frame-type-menu"] li::before {
  content: '>' !important;
  margin-right: 0.6rem;
  font-weight: 700;
  color: var(--jjw-melone);
  transition: color var(--jjw-transition);
}
[class*="frame-type-menu"] li a {
  display: block;
  flex: 1;
  color: var(--jjw-melone) !important;
  font-weight: 600 !important;
  font-size: 1.1875rem !important;
  line-height: 1em;
  text-transform: uppercase !important;
  text-decoration: none;
}
[class*="frame-type-menu"] li:hover {
  background-color: var(--jjw-melone-dark);
}
[class*="frame-type-menu"] li:hover::before,
[class*="frame-type-menu"] li:hover a {
  color: var(--jjw-weiss) !important;
}

/* ==========================================================================
   News
   ========================================================================== */
.jjw-products-list h2, .frame-jjw_products_list h2,
.jjw-news h2 {
  font-size: 1.7rem !important;
  font-weight: 900 !important;
  color: var(--jjw-melone) !important;
  margin-bottom: 2rem;
}
.jjw-news h2 .split-strong { font-weight: 700; color: var(--jjw-melone-dark); }
.jjw-news h2 .split-light { font-weight: 300; color: var(--jjw-melone-dark); }
/* News-Plugin (georgringer/news) rendert Artikel-Überschriften mit seinem
   eigenen Markup (Schema.org itemprop="headline") — braucht daher einen
   eigenen Selektor, der direkt am Plugin-Markup ansetzt. */
.news h3 {
  color: #6a6d6f !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
}

/* ==========================================================================
   Footer — Kontakt mit zwei Standorten + Karten
   ========================================================================== */
.jjw-contact-block { margin-bottom: 1rem; }
.jjw-contact-block strong { color: var(--jjw-weiss); display: block; margin-bottom: 0.3rem; font-weight: normal }
.jjw-contact-label { color: var(--jjw-melone); }
/* Original: E-Mail-Link in #34aed6. Telefonnummer bewusst gleich behandelt
   (siehe Chat) — jetzt ebenfalls ein echter tel:-Link, muss also auch wie
   ein Link aussehen, nicht nur wie einer funktionieren.
   Höhere Spezifität (.jjw-footer .jjw-contact-link) nötig, sonst gewinnt
   die generische .jjw-footer a Regel weiter unten im Stylesheet. */
.jjw-footer .jjw-contact-link { color: #34aed6; }
.jjw-footer .jjw-contact-link:hover { color: var(--jjw-weiss); }

.jjw-map-embed {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border: 0;
  filter: grayscale(0.3);
}
.jjw-map-caption {
  font-size: 0.8rem;
  margin-top: 0.4rem;
  display: flex;
  justify-content: space-between;
}

.jjw-footer-badges { margin: 1.5rem 0; }
.jjw-footer-badges img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--jjw-weiss);
  padding: 8px 10px;
}

.jjw-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--jjw-grau-hell);
  margin-right: 0.5rem;
  color: var(--jjw-grau-hell);
}
.jjw-social a img {
  height: 16px;
  width: auto;
  /* Original-Icons sind schwarz auf transparent — für den dunklen Footer
     auf Weiß invertieren, bei Hover (oranger Hintergrund) zurück auf Schwarz. */
  filter: brightness(0) invert(1);
  transition: filter var(--jjw-transition);
}
.jjw-social a:hover { background: var(--jjw-melone); border-color: var(--jjw-melone); }
.jjw-social a:hover img { filter: none; }
.jjw-footer {
  background: var(--jjw-anthrazit);
  color: var(--jjw-grau-hell);
  padding: 3.5rem 0 0;
}
.jjw-footer h4 {
  color: var(--jjw-weiss);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1.1rem;
}
/* Original-CSS: #footer h2 { color:#f7a942; font:900 55px/1em Raleway; } —
   einziger Fund im Original, wo tatsächlich eine echte Überschrift verwendet
   wird. 55px als starre Größe durch clamp() responsive gemacht. */
.jjw-footer h2 {
  color: var(--jjw-melone) !important;
  font-weight: 900 !important;
  font-size: clamp(1.8rem, 4vw, 3.4rem) !important;
  line-height: 1;
  margin-bottom: 1.75rem;
}
.jjw-footer a { color: var(--jjw-grau-hell); }
.jjw-footer a:hover { color: var(--jjw-melone); }

/* "Rechtliches"-Leiste — entspricht der Modulposition "rechtliches" im
   Original-Template (Impressum/Datenschutz-Links) */
.jjw-rechtliches {
  border-top: 1px solid var(--jjw-anthrazit-80);
  margin-top: 2.5rem;
  padding: 1.1rem 0;
  font-size: 0.85rem;
  color: var(--jjw-grau);
}
.jjw-rechtliches a { color: var(--jjw-grau-hell); margin-right: 1.25rem; }

/* ==========================================================================
   Breadcrumb (Unterseiten) — direkt unter der Navbar, kein Abstand.
   Original: #breadcrumb { background:#f5f5f5; margin-bottom:20px; ... }
   ========================================================================== */
.jjw-breadcrumb {
  background-color: #f5f5f5;
  margin-bottom: 20px;
}
.jjw-breadcrumb .breadcrumb {
  margin: 0;
  padding: 12px 0;
  font-size: 0.85rem;
  color: #6a6d6f;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.jjw-breadcrumb li { display: inline-flex; align-items: center; }
.jjw-breadcrumb a.pathway { color: var(--jjw-melone-dark); }
.jjw-breadcrumb a.pathway:hover { color: var(--jjw-anthrazit); }
.jjw-breadcrumb .divider { margin: 0 0.5em; color: #b3b3b3; }
.jjw-breadcrumb .active span { color: #6a6d6f; }

/* ==========================================================================
   Unterseiten — zweispaltiges Layout.
   Linke Spalte: H1 + Fließtext mit eingestreuten Bildern (kein Hero-Bild).
   Rechte Spalte: Unterseiten-Menü (H3, optisch wie H1) + News-Teaser.
   Verschwindet unter 800px (eigener Breakpoint, nicht Bootstraps lg=992px).
   ========================================================================== */
.jjw-subpage { padding-top: 2.5rem; padding-bottom: 4rem; }
.jjw-subpage h1 { margin: -2px 0 22px 0; }
.jjw-subpage-content img { max-width: 100%; height: auto; margin-bottom: 1.25rem; }
.jjw-subpage-content p { margin-bottom: 1.25rem; }
.jjw-back-to-top { font-size: 0.85rem; font-weight: 600; }

.jjw-subpage-sidebar { margin-bottom: 2.5rem; }
@media (max-width: 800px) {
  .jjw-subpage-sidebar { display: none; }
}

/* H2 "News" bleibt bewusst bei der normalen H2-Optik (dünn, mittelgroß) —
   explizit gegen die neue .jjw-subpage-sidebar-h2-Regel (die "Menü" wie H1
   aussehen lässt) abgegrenzt, da beide Überschriften dieselbe Sidebar-Spalte
   teilen und sonst gleich behandelt würden. */
.jjw-sidebar-news h2 {
  font-size: var(--jjw-heading-md) !important;
  font-weight: 300 !important;
  color: var(--jjw-melone) !important;
  margin-bottom: 1rem;
}
.jjw-sidebar-news .moduleItemTitle {
  display: block;
  color: #6a6d6f;
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.jjw-sidebar-news .moduleItemTitle:hover { color: #545454; }


.jjw-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--jjw-melone);
  color: var(--jjw-anthrazit);
  padding: 0.75rem 1.25rem;
  z-index: 2000;
}
.jjw-skip-link:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .jjw-btn-cta, .jjw-btn-secondary, .jjw-logo-strip img {
    transition: none;
  }
}

/* ==========================================================================
   Einheitlicher Standard-Abstand zwischen Inhaltselementen (50px).
   fluid_styled_content wrappt JEDES Inhaltselement in <div class="frame ...">
   — hier greift die Regel automatisch für alles, ohne dass man sich pro
   Element merken muss, welcher Abstand "der richtige" ist (siehe Chat).
   Die beiden Titel-Inhaltselemente auf der Startseite (H1-Kicker, H2-Claim)
   sind bewusst ausgenommen — die sitzen absichtlich eng aufeinander, das
   ist über deren eigene margin-Regeln oben schon geregelt.
   ========================================================================== */
.frame, .jjw-content-container { margin-bottom: 50px; }
/* H1-Kicker sitzt eng auf dem H2-Claim direkt darunter (kein Abstand),
   danach (nach dem H2-Claim) wieder der normale 50px-Abstand zum
   nächsten Abschnitt. */
.frame-jjw_heading_hero_bold { margin-bottom: 0; }

/* ==========================================================================
   Fluid-Styled-Content-Galerie (Text & Medien, Nur Bilder)

   FSC gruppiert die Bilder im HTML bereits zeilenweise:
     .ce-gallery > .ce-row > .ce-column > figure > img
   Es liefert dafür aber KEIN CSS mit — ohne eigene Regeln richtet sich die
   Darstellung allein nach den von FSC berechneten Pixelbreiten, und die
   Spalten brechen um, sobald die Summe der Bildbreiten die tatsächlich
   verfügbare Breite übersteigt (Container-Padding, Sidebar, Gutter).

   Deshalb hier flexbasiert: Die Spaltenzahl kommt aus dem HTML, die Breite
   aus dem Flexbox-Layout. Die Einstellung maxW steuert dann nur noch, wie
   groß die Bilder verarbeitet werden (Schärfe), nicht mehr das Layout.
   ========================================================================== */
.ce-gallery {
  --jjw-gallery-gap: 10px;
}

/* Grid statt Flexbox: Bei Flexbox muessen Spaltenbreite und Abstand von
   Hand gegeneinander verrechnet werden, was bei Rundungen und geerbten
   Innenabstaenden leicht ueber die Zeilenbreite hinauslaeuft. Das Grid
   verteilt den verfuegbaren Platz selbst — `minmax(0, 1fr)` sorgt dafuer,
   dass die Spalten nie breiter werden als ihr Anteil, unabhaengig von der
   Eigenbreite der Bilder. `justify-content: start` haelt eine nicht voll
   besetzte letzte Zeile linksbuendig, die Spalten bleiben gleich breit. */
.ce-gallery .ce-row {
  display: grid;
  justify-content: start;
  gap: var(--jjw-gallery-gap);
  margin-bottom: var(--jjw-gallery-gap);
}
.ce-gallery[data-ce-columns="1"] .ce-row { grid-template-columns: minmax(0, 1fr); }
.ce-gallery[data-ce-columns="2"] .ce-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ce-gallery[data-ce-columns="3"] .ce-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ce-gallery[data-ce-columns="4"] .ce-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ce-gallery[data-ce-columns="5"] .ce-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ce-gallery[data-ce-columns="6"] .ce-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.ce-gallery .ce-column {
  min-width: 0;
}
/* display:block ist hier entscheidend: Das Default-Stylesheet von Fluid
   Styled Content setzt `.ce-gallery figure { display: table }`. Eine
   Table-Box schrumpft auf ihren Inhalt, und ein Bild mit width:100%
   bezieht sich dann auf diese geschrumpfte Breite — also auf die
   Eigenbreite der Bilddatei statt auf die Spalte. Das Bild bleibt so
   klein, obwohl die Galerie darueber korrekt 100 % breit ist. */
.ce-gallery figure {
  display: block;
  width: 100%;
  margin: 0;
}
.ce-gallery img {
  width: 100%;
  height: auto;
  display: block;
}

/* Auf schmalen Viewports die starren Zeilen aufbrechen, sonst werden die
   Bilder bei vier Spalten unlesbar klein. */
/* Auf sehr schmalen Viewports mehrspaltige Galerien auf zwei Spalten
   eindampfen. WICHTIG: nur ab drei Spalten aufwaerts. Der frueher hier
   stehende Selektor `[data-ce-columns]` ohne Wert traf JEDE Galerie —
   auch die einspaltige eines Bildes im Fliesstext. Die bekam dadurch
   zwei Spalten, und das einzelne Bild belegte nur eine davon, also die
   halbe Breite. */
@media (max-width: 575.98px) {
  .ce-gallery[data-ce-columns="3"] .ce-row,
  .ce-gallery[data-ce-columns="4"] .ce-row,
  .ce-gallery[data-ce-columns="5"] .ce-row,
  .ce-gallery[data-ce-columns="6"] .ce-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==========================================================================
   Bilder im Fließtext (Text & Medien, Position "im Text")

   Fluid Styled Content liefert für diese Anordnung kein CSS mit. Die
   Bildspalte bekommt daher hier eine feste Breite von 31,8 % des
   Inhaltselements und wird umflossen. Die Klassen stammen alle aus FSC:
     .ce-textpic.ce-intext.ce-left   Bild links, Text rechts daneben
     .ce-textpic.ce-intext.ce-right  Bild rechts, Text links daneben
     .ce-textpic.ce-intext.ce-nowrap Bild daneben, Text bricht NICHT um
   ========================================================================== */
.ce-textpic {
  --jjw-intext-width: 40%;
  --jjw-intext-space: 1.5rem;
}

/* Umflossen: Bildspalte floatet, Text laeuft darum herum. */
.ce-textpic.ce-intext .ce-gallery {
  width: var(--jjw-intext-width);
}
.ce-textpic.ce-intext.ce-left .ce-gallery {
  float: left;
  margin-right: var(--jjw-intext-space);
  margin-bottom: var(--jjw-intext-space);
}
.ce-textpic.ce-intext.ce-right .ce-gallery {
  float: right;
  margin-left: var(--jjw-intext-space);
  margin-bottom: var(--jjw-intext-space);
}

/* Nebeneinander ohne Umfluss: der Textblock bildet einen eigenen
   Formatierungskontext und laeuft nicht unter das Bild. */
.ce-textpic.ce-intext.ce-nowrap .ce-bodytext {
  overflow: hidden;
}

/* Floats einschliessen, damit nachfolgende Elemente nicht hochrutschen. */
.ce-textpic::after {
  content: "";
  display: block;
  clear: both;
}

/* Bild ueber oder unter dem Text: kein Float, nur Abstand. */
.ce-textpic.ce-above .ce-gallery { margin-bottom: var(--jjw-intext-space); }
.ce-textpic.ce-below .ce-gallery { margin-top: var(--jjw-intext-space); }

/* Unterhalb von Bootstraps lg-Breakpoint bleibt neben einem 40-%-Bild zu
   wenig Platz fuer lesbaren Text — daher volle Breite und kein Umfluss.
   991.98px = derselbe Umschaltpunkt wie bei navbar-expand-lg. */
@media (max-width: 991.98px) {
  /* Die Selektoren fuer links/rechts muessen hier mit aufgefuehrt werden:
     `.ce-textpic.ce-intext.ce-left .ce-gallery` ist spezifischer als
     `.ce-textpic.ce-intext .ce-gallery`, der Float aus der Grundregel
     wuerde eine allein stehende Aufhebung sonst schlagen — mit width:100%
     PLUS Float und Aussenabstand laeuft das Bild dann ueber den Rand. */
  .ce-textpic.ce-intext .ce-gallery,
  .ce-textpic.ce-intext.ce-left .ce-gallery,
  .ce-textpic.ce-intext.ce-right .ce-gallery {
    width: 100%;
    float: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--jjw-intext-space);
  }
}

/* ==========================================================================
   Karten-Einbettung mit Zwei-Klick-Loesung
   ========================================================================== */
.jjw-map-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  min-height: 180px;
  background: var(--jjw-hintergrund);
  border: 1px solid var(--jjw-grau-hell);
  text-align: center;
}
.jjw-map-consent--loaded {
  display: block;
  padding: 0;
  min-height: 0;
  background: none;
  border: 0;
}
.jjw-map-consent-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--jjw-grau);
}
.jjw-map-consent-button {
  padding: 0.4rem 1rem;
  border: 0;
  background: var(--jjw-melone);
  color: var(--jjw-weiss);
  font-weight: 600;
  cursor: pointer;
}
.jjw-map-consent-button:hover,
.jjw-map-consent-button:focus-visible {
  filter: brightness(0.92);
}

/* ==========================================================================
   Listen in Inhaltselementen

   Weiter oben steht ein globales `ul { list-style: none }` — das ist für
   die Navigationslisten (Navbar, Dropdown, Breadcrumb) gedacht, hat aber
   auch den Redaktionsinhalt getroffen. Bislang hat das mitgeladene
   FSC-Default-CSS die Aufzählungszeichen zurückgeholt; seit das Set
   draußen ist, fehlten sie.

   Hier gezielt für Inhaltselemente wiederhergestellt: `.frame` umschließt
   jedes FSC-Inhaltselement, aber keine der Navigationen. Menü-Elemente
   bleiben ausgenommen, die haben weiter oben ihre eigene Regel mit
   !important.
   ========================================================================== */
.frame ul,
.frame ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.frame ul { list-style: disc; }
.frame ol { list-style: decimal; }

/* Verschachtelte Ebenen optisch unterscheidbar */
.frame ul ul { list-style: circle; }
.frame ul ul ul { list-style: square; }
.frame ol ol { list-style: lower-alpha; }
.frame ol ol ol { list-style: lower-roman; }

.frame li { margin-bottom: 0.35rem; }
.frame li:last-child { margin-bottom: 0; }