/**
 * jentschel.com – Cassiopeia user.css
 * Joomla 5/6 · Header, Hauptnavigation, Inhaltsbereich und Footer
 *
 * Installation:
 * media/templates/site/cassiopeia/css/user.css
 */

:root {
  /* Primärfarben */
  --jentschel-navy: #052445;
  --jentschel-orange: #fd5623;

  /* Ergänzende Farben */
  --jentschel-navy-light: #0b3a69;
  --jentschel-navy-dark: #03172c;
  --jentschel-orange-dark: #d93e0d;
  --jentschel-surface: #ffffff;
  --jentschel-background: #f4f7fa;
  --jentschel-text: #172535;
  --jentschel-text-muted: #5d6b79;
  --jentschel-border: #dbe3ea;
  --jentschel-shadow: 0 16px 40px rgba(5, 36, 69, 0.09);

  /* Cassiopeia-Variablen */
  --cassiopeia-color-primary: var(--jentschel-navy);
  --cassiopeia-color-link: var(--jentschel-navy-light);
  --cassiopeia-color-hover: var(--jentschel-orange-dark);
}

/* ================================================================
   Grundlayout und Typografie
   ================================================================ */

html {
  scroll-behavior: smooth;
}

body.site {
  background: var(--jentschel-background);
  color: var(--jentschel-text);
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}

a {
  color: var(--jentschel-navy-light);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--jentschel-orange-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--jentschel-navy);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

h1 {
  font-size: clamp(2.1rem, 5vw, 4rem);
}

h2 {
  font-size: clamp(1.7rem, 3vw, 2.7rem);
}

::selection {
  background: var(--jentschel-orange);
  color: #ffffff;
}

/* Sichtbarer Tastaturfokus */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--jentschel-orange);
  outline-offset: 3px;
}

/* ================================================================
   Header
   ================================================================ */

.container-header {
  position: relative;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background: linear-gradient(120deg, var(--jentschel-navy-dark), var(--jentschel-navy));
  border-bottom: 4px solid var(--jentschel-orange);
  box-shadow: 0 10px 30px rgba(3, 23, 44, 0.2);
}

/* Optionale obere Modulpositionen bleiben über die gesamte Headerbreite. */
.container-header > .container-topbar,
.container-header > .container-below-top {
  grid-column: 1 / -1;
}

/* Brand links und Menü rechts in derselben Headerzeile. */
.container-header > .grid-child:has(.navbar-brand) {
  grid-column: 1;
  grid-row: auto;
  align-self: center;
  width: auto;
  margin: 0;
  padding-left: max(1rem, calc((100vw - 82rem) / 2));
}

.container-header > .container-nav {
  grid-column: 2;
  grid-row: auto;
  align-self: center;
  width: auto;
  margin: 0;
  padding-right: max(1rem, calc((100vw - 82rem) / 2));
}

.container-header .grid-child {
  width: min(100% - 2rem, 82rem);
  margin-inline: auto;
}

.container-header .navbar-brand {
  margin: 0;
  padding-block: 1.15rem;
}

.container-header .navbar-brand a,
.container-header .navbar-brand .site-title {
  color: #ffffff;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.015em;
  text-decoration: none;
}

.container-header .site-description {
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Falls ein Bildlogo eingesetzt wird */
.container-header .navbar-brand img {
  max-height: 68px;
  width: auto;
}

/* ================================================================
   Fullscreen-Hauptnavigation
   ================================================================ */

/* Cassiopeias Bootstrap-Collapse bleibt die technische Grundlage. */
.container-header .container-nav {
  position: static;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-bottom: 0;
}

.container-header .container-nav > nav,
.container-header .container-nav > .navbar,
.container-header .container-nav > .moduletable {
  margin: 0;
}

/* Hamburger mit Beschriftung – bewusst auf allen Größen sichtbar. */
.container-header .navbar-toggler {
  position: relative;
  z-index: 10002;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: 4.5rem;
  min-height: 4.5rem;
  margin: 0;
  padding: 0.55rem 0.65rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  line-height: 1;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    transform 0.2s ease;
}

.container-header .navbar-toggler::after {
  content: "Menü";
  display: block;
  color: currentColor;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.container-header .navbar-toggler-icon {
  width: 1.7rem;
  height: 1.35rem;
  background-size: 1.7rem 1.35rem;
  filter: brightness(0) invert(1);
}

.container-header .navbar-toggler:hover,
.container-header .navbar-toggler:focus-visible,
.container-header .navbar-toggler[aria-expanded="true"] {
  border-color: var(--jentschel-orange);
  background: var(--jentschel-orange);
  color: #ffffff;
}

.container-header .navbar-toggler[aria-expanded="true"]::after {
  content: "Schließen";
  font-size: 0.58rem;
}

/* Suchschalter neben dem Menüschalter */
.jentschel-search-toggle {
  position: relative;
  z-index: 10002;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: 4.5rem;
  min-height: 4.5rem;
  margin: 10px;
  padding: 0.55rem 0.65rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    transform 0.2s ease;
}

.jentschel-search-toggle__icon {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
}

.jentschel-search-toggle__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.jentschel-search-toggle__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.jentschel-search-toggle:hover,
.jentschel-search-toggle:focus-visible,
.jentschel-search-toggle[aria-expanded="true"] {
  border-color: var(--jentschel-orange);
  background: var(--jentschel-orange);
  color: #ffffff;
}

/* Das Originalmodul wird durch user.js in das Such-Overlay verschoben. */
.jentschel-search-overlay[hidden] {
  display: none !important;
}

.jentschel-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  overflow-y: auto;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 23, 44, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
}

html:has(.jentschel-search-overlay.is-open) {
  overflow: hidden;
}

.jentschel-search-overlay__panel {
  position: relative;
  width: min(100%, 62rem);
  padding: clamp(1.5rem, 5vw, 4rem);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.25rem;
  background: rgba(5, 36, 69, 0.72);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.jentschel-search-overlay__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--jentschel-orange);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.jentschel-search-overlay__title {
  max-width: calc(100% - 4rem);
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  color: #ffffff;
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  letter-spacing: -0.035em;
}

.jentschel-search-overlay__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    transform 0.2s ease;
}

.jentschel-search-overlay__close:hover,
.jentschel-search-overlay__close:focus-visible {
  border-color: var(--jentschel-orange);
  background: var(--jentschel-orange);
  transform: rotate(90deg);
}

.jentschel-search-overlay .container-search,
.jentschel-search-overlay search,
.jentschel-search-overlay .mod-finder,
.jentschel-search-overlay .form-search {
  width: 100%;
  margin: 0;
}

.jentschel-search-overlay .mod-finder {
  position: relative;
}

.jentschel-search-overlay .mod-finder label.finder {
  display: block;
  margin-bottom: 0.65rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.jentschel-search-overlay .mod-finder .form-control,
.jentschel-search-overlay .mod-finder input[type="search"],
.jentschel-search-overlay .mod-finder input[type="text"] {
  width: 100%;
  min-height: clamp(4rem, 8vw, 5.5rem);
  padding: 0.9rem clamp(1rem, 3vw, 1.75rem);
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--jentschel-navy-dark);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  font-weight: 600;
}

.jentschel-search-overlay .mod-finder .form-control:focus,
.jentschel-search-overlay .mod-finder input[type="search"]:focus,
.jentschel-search-overlay .mod-finder input[type="text"]:focus {
  border-color: var(--jentschel-orange);
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgba(253, 86, 35, 0.2),
    0 18px 45px rgba(0, 0, 0, 0.2);
}

.jentschel-search-overlay .mod-finder .awesomplete,
.jentschel-search-overlay .mod-finder .awesomplete > input {
  width: 100%;
}

.jentschel-search-overlay .awesomplete > ul {
  z-index: 2;
  border: 0;
  border-radius: 0 0 0.75rem 0.75rem;
  background: #ffffff;
  box-shadow: var(--jentschel-shadow);
  color: var(--jentschel-text);
}

.jentschel-search-overlay__hint {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.82rem;
}

/* Login-Schalter neben Menü und Suche */
.jentschel-login-toggle {
  position: relative;
  z-index: 10002;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: 4.5rem;
  min-height: 4.5rem;
  margin: 0;
  padding: 0.55rem 0.65rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    transform 0.2s ease;
}

.jentschel-login-toggle__icon {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
}

.jentschel-login-toggle__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.jentschel-login-toggle__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.jentschel-login-toggle:hover,
.jentschel-login-toggle:focus-visible,
.jentschel-login-toggle[aria-expanded="true"] {
  border-color: var(--jentschel-orange);
  background: var(--jentschel-orange);
  color: #ffffff;
}

/* Vollflächiges Login-Overlay */
.jentschel-login-overlay[hidden] {
  display: none !important;
}

.jentschel-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  overflow-y: auto;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 23, 44, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
}

html:has(.jentschel-login-overlay.is-open) {
  overflow: hidden;
}

.jentschel-login-overlay__panel {
  position: relative;
  width: min(100%, 34rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.25rem;
  background: rgba(5, 36, 69, 0.76);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.jentschel-login-overlay__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--jentschel-orange);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.jentschel-login-overlay__title {
  max-width: calc(100% - 4rem);
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  color: #ffffff;
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: -0.035em;
}

.jentschel-login-overlay__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    transform 0.2s ease;
}

.jentschel-login-overlay__close:hover,
.jentschel-login-overlay__close:focus-visible {
  border-color: var(--jentschel-orange);
  background: var(--jentschel-orange);
  transform: rotate(90deg);
}

.jentschel-login-overlay .mod-login,
.jentschel-login-overlay .mod-login__userdata {
  width: 100%;
  margin: 0;
}

.jentschel-login-overlay .mod-login__userdata {
  display: grid;
  gap: 1rem;
}

.jentschel-login-overlay .form-group {
  margin: 0;
}

.jentschel-login-overlay .input-group {
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.75rem;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jentschel-login-overlay .input-group:focus-within {
  border-color: var(--jentschel-orange);
  box-shadow: 0 0 0 0.3rem rgba(253, 86, 35, 0.2);
}

.jentschel-login-overlay .form-control {
  min-height: 3.6rem;
  padding: 0.8rem 1rem;
  border: 0;
  background: #ffffff;
  color: var(--jentschel-navy-dark);
  font-size: 1rem;
  box-shadow: none;
}

.jentschel-login-overlay .form-control:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.jentschel-login-overlay .input-group-text,
.jentschel-login-overlay .input-password-toggle {
  border: 0;
  border-left: 1px solid var(--jentschel-border);
  background: #f4f7fa;
  color: var(--jentschel-navy);
}

.jentschel-login-overlay .mod-login__remember {
  color: rgba(255, 255, 255, 0.78);
}

.jentschel-login-overlay .form-check-input:checked {
  border-color: var(--jentschel-orange);
  background-color: var(--jentschel-orange);
}

.jentschel-login-overlay .mod-login__submit .btn {
  min-height: 3.5rem;
  border-color: var(--jentschel-orange);
  border-radius: 0.75rem;
  background: var(--jentschel-orange);
  color: #ffffff;
  font-weight: 750;
}

.jentschel-login-overlay .mod-login__submit .btn:hover,
.jentschel-login-overlay .mod-login__submit .btn:focus-visible {
  border-color: var(--jentschel-orange-dark);
  background: var(--jentschel-orange-dark);
}

.jentschel-login-overlay .mod-login__options {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}

.jentschel-login-overlay .mod-login__options a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.jentschel-login-overlay .mod-login__options a:hover,
.jentschel-login-overlay .mod-login__options a:focus {
  color: var(--jentschel-orange);
}

.jentschel-login-overlay__hint {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.82rem;
}

/* Bootstrap blendet .navbar-collapse ab Desktop sonst dauerhaft ein. */
.container-header .navbar-collapse:not(.show):not(.collapsing) {
  display: none !important;
}

/* Vollflächige, leicht transparente Menüebene mit Hintergrundunschärfe. */
.container-header .navbar-collapse.show,
.container-header .navbar-collapse.collapsing {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block !important;
  width: 100vw;
  height: 100dvh !important;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(7rem, 15vh, 10rem) max(1.25rem, calc((100vw - 82rem) / 2)) 4rem;
  background: rgba(3, 23, 44, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
}

/* Verhindert Scrollen der Seite, solange das Overlay geöffnet ist. */
html:has(.container-header .navbar-collapse.show) {
  overflow: hidden;
}

.container-header .navbar-collapse.show::before,
.container-header .navbar-collapse.collapsing::before {
  content: "Navigation";
  display: block;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.container-header .navbar-collapse .mod-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.4rem clamp(1.5rem, 5vw, 5rem);
  width: 100%;
  margin: 0;
  padding: 0;
}

.container-header .navbar-collapse .mod-menu > li {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.container-header .navbar-collapse .mod-menu > li > a,
.container-header .navbar-collapse .mod-menu > li > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 4.25rem;
  padding: 0.8rem 0.25rem;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.container-header .navbar-collapse .mod-menu > li > a:hover,
.container-header .navbar-collapse .mod-menu > li > a:focus,
.container-header .navbar-collapse .mod-menu > li > button:hover,
.container-header .navbar-collapse .mod-menu > li > button:focus {
  padding-left: 0.65rem;
  color: var(--jentschel-orange);
}

.container-header .navbar-collapse .mod-menu > li.active > a,
.container-header .navbar-collapse .mod-menu > li.current > a {
  color: var(--jentschel-orange);
}

.container-header .navbar-collapse .mod-menu > li.active > a::before,
.container-header .navbar-collapse .mod-menu > li.current > a::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.75rem;
  border-radius: 50%;
  background: var(--jentschel-orange);
  box-shadow: 0 0 0 0.35rem rgba(253, 86, 35, 0.14);
}

/* Untermenüs öffnen innerhalb des Overlays statt als Dropdown. */
.container-header .navbar-collapse .metismenu.mod-menu .mm-collapse,
.container-header .navbar-collapse .metismenu.mod-menu .mm-collapsing {
  position: static;
  min-width: 0;
  margin: 0 0 1rem;
  padding: 0.15rem 0 0.5rem 1rem;
  border: 0;
  border-left: 2px solid var(--jentschel-orange);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.container-header .navbar-collapse .metismenu.mod-menu .mm-collapse .metismenu-item > a,
.container-header .navbar-collapse .metismenu.mod-menu .mm-collapsing .metismenu-item > a {
  min-height: auto;
  padding: 0.5rem 0.75rem;
  border-radius: 0.35rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  font-weight: 550;
}

.container-header .navbar-collapse .metismenu.mod-menu .mm-collapse .metismenu-item > a:hover,
.container-header .navbar-collapse .metismenu.mod-menu .mm-collapse .metismenu-item > a:focus,
.container-header .navbar-collapse .metismenu.mod-menu .mm-collapsing .metismenu-item > a:hover,
.container-header .navbar-collapse .metismenu.mod-menu .mm-collapsing .metismenu-item > a:focus {
  background: rgba(253, 86, 35, 0.12);
  color: #ffffff;
}

/* ================================================================
   Hauptbereich
   ================================================================ */

.site-grid {
  gap: clamp(1.25rem, 3vw, 2.5rem);
  width: min(100% - 2rem, 82rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 4.5rem);
}

main,
.container-component {
  min-width: 0;
}

.container-component {
  padding: clamp(1.35rem, 3vw, 3rem);
  border: 1px solid var(--jentschel-border);
  border-radius: 1rem;
  background: var(--jentschel-surface);
  box-shadow: var(--jentschel-shadow);
}

.page-header,
.article-info,
.com-content-article__body {
  max-width: 76rem;
}

.page-header h1,
.page-header h2,
.com-content-article h1 {
  position: relative;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
}

.page-header h1::after,
.page-header h2::after,
.com-content-article h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4rem;
  height: 4px;
  border-radius: 999px;
  background: var(--jentschel-orange);
}

/* Seitenmodule und Karten */
.card,
.sidebar-left .moduletable,
.sidebar-right .moduletable,
.container-sidebar-left > *,
.container-sidebar-right > * {
  border: 1px solid var(--jentschel-border);
  border-radius: 0.85rem;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(5, 36, 69, 0.06);
}

.sidebar-left .moduletable,
.sidebar-right .moduletable,
.container-sidebar-left > *,
.container-sidebar-right > * {
  padding: 1.25rem;
}

/* Schaltflächen */
.btn-primary,
.btn.btn-primary {
  border-color: var(--jentschel-orange);
  background: var(--jentschel-orange);
  color: #ffffff;
  font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  border-color: var(--jentschel-orange-dark);
  background: var(--jentschel-orange-dark);
  color: #ffffff;
}

.btn-secondary,
.btn.btn-secondary {
  border-color: var(--jentschel-navy);
  background: var(--jentschel-navy);
  color: #ffffff;
}

/* Breadcrumbs */
.breadcrumb {
  padding: 0.75rem 1rem;
  border: 1px solid var(--jentschel-border);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.8);
}

/* ================================================================
   Footer
   ================================================================ */

.container-footer {
  margin-top: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 4px solid var(--jentschel-orange);
  background: var(--jentschel-navy-dark);
  color: rgba(255, 255, 255, 0.78);
}

.container-footer .grid-child {
  width: min(100% - 2rem, 82rem);
  margin-inline: auto;
}

.container-footer h2,
.container-footer h3,
.container-footer h4,
.container-footer h5,
.container-footer h6 {
  color: #ffffff;
}

.container-footer a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration-color: rgba(253, 86, 35, 0.7);
}

.container-footer a:hover,
.container-footer a:focus {
  color: var(--jentschel-orange);
}

.container-footer .mod-menu {
  gap: 0.3rem;
}

.container-footer .mod-menu a {
  padding-block: 0.3rem;
}

/* ================================================================
   Responsive Anpassungen
   ================================================================ */

@media (max-width: 991.98px) {
  .container-header .navbar-collapse .mod-menu {
    grid-template-columns: 1fr;
  }

  .container-header .navbar-collapse.show,
  .container-header .navbar-collapse.collapsing {
    padding-top: 7rem;
    background: rgba(3, 23, 44, 0.93);
  }
}

@media (max-width: 575.98px) {
  .container-header .grid-child,
  .container-footer .grid-child,
  .site-grid {
    width: min(100% - 1.25rem, 82rem);
  }

  .container-component {
    padding: 1.2rem;
    border-radius: 0.75rem;
  }

  .container-header .navbar-brand img {
    max-height: 54px;
  }

  .container-header .navbar-toggler {
    width: 4rem;
    min-height: 4rem;
  }

  .jentschel-search-toggle {
    width: 4rem;
    min-height: 4rem;
  }

  .jentschel-login-toggle {
    width: 4rem;
    min-height: 4rem;
  }

  .container-header .navbar-collapse.show,
  .container-header .navbar-collapse.collapsing {
    padding-inline: 1rem;
  }

  .container-header .navbar-collapse .mod-menu > li > a,
  .container-header .navbar-collapse .mod-menu > li > button {
    min-height: 3.7rem;
    font-size: 1.25rem;
  }

  .jentschel-search-overlay__panel {
    padding: 1.5rem;
  }

  .jentschel-login-overlay__panel {
    padding: 1.5rem;
  }
}

/* Reduzierte Animationen respektieren */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* === JENTSCHEL PHASE 17.6 NAVIGATION START === */

/* Desktop: echtes Mega-Menü statt großer Accordion-Zeilen */
@media (min-width: 992px) {
  .container-header .navbar-collapse.show,
  .container-header .navbar-collapse.collapsing {
    padding-top: clamp(7.4rem, 12vh, 9rem);
    padding-bottom: 2.5rem;
    overflow-y: auto;
  }

  .container-header .navbar-collapse.show::before,
  .container-header .navbar-collapse.collapsing::before {
    width: 100%;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(255,255,255,.13);
    color: rgba(255,255,255,.45);
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    align-items: start;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li.jentschel-menu-home {
    display: none !important;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li:not(.jentschel-menu-home) {
    position: relative;
    display: block !important;
    min-width: 0;
    padding: 1.05rem 1.05rem 1.15rem;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: .8rem;
    background: linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
    overflow: hidden;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li:not(.jentschel-menu-home)::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: rgba(253,86,35,.48);
    opacity: .42;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li.active::before,
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li.current::before {
    width: 3px;
    background: var(--jentschel-orange);
    opacity: 1;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > a {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 .78rem !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 760;
    line-height: 1.2;
    text-decoration: none;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > a::after {
    content: "↗";
    margin-left: auto;
    color: rgba(255,255,255,.24);
    font-size: .78rem;
    transition: .2s ease;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > a:hover,
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > a:focus-visible,
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li.active > a,
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li.current > a {
    color: var(--jentschel-orange);
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > .mm-toggler {
    display: none !important;
  }

  /* Desktop-Untermenüs immer sichtbar */
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > ul,
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > .mm-collapse,
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > .mm-collapsing {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: .68rem 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 .mm-collapse > li,
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > ul > li {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 .mm-collapse > li > a,
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > ul > li > a {
    display: block !important;
    width: 100%;
    padding: .34rem 0 !important;
    color: rgba(255,255,255,.62);
    font-size: .84rem;
    font-weight: 540;
    line-height: 1.35;
    text-decoration: none;
    border: 0 !important;
    background: transparent !important;
    transition: color .18s ease, transform .18s ease;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 .mm-collapse > li > a:hover,
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 .mm-collapse > li > a:focus-visible {
    color: #fff;
    transform: translateX(.2rem);
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 .mm-collapse > li.active > a,
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 .mm-collapse > li.current > a {
    color: var(--jentschel-orange);
  }

  /* gezielte 4x2-Anordnung */
  .jentschel-menu-leistungen { grid-column:1; grid-row:1; }
  .jentschel-menu-joomla     { grid-column:2; grid-row:1; }
  .jentschel-menu-seo        { grid-column:3; grid-row:1; }
  .jentschel-menu-software   { grid-column:4; grid-row:1; }
  .jentschel-menu-projekte   { grid-column:1; grid-row:2; }
  .jentschel-menu-wissen     { grid-column:2; grid-row:2; }
  .jentschel-menu-ueber-mich { grid-column:3; grid-row:2; }
  .jentschel-menu-contact    { grid-column:4; grid-row:2; }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li.jentschel-menu-contact {
    border-color: rgba(253,86,35,.34);
    background:
      radial-gradient(circle at 100% 0%,rgba(253,86,35,.14),transparent 48%),
      rgba(255,255,255,.025);
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li.jentschel-menu-contact > a {
    padding-bottom: 0 !important;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li.jentschel-menu-contact > a::after {
    content: "→";
    color: var(--jentschel-orange);
    font-size: 1.05rem;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li.jentschel-menu-contact::after {
    content: "Projekt, Website oder Joomla-Lösung besprechen";
    display: block;
    margin-top: .85rem;
    color: rgba(255,255,255,.5);
    font-size: .8rem;
    line-height: 1.45;
  }
}

/* Mobile: kompakte Accordion-Navigation */
@media (max-width: 991.98px) {
  .container-header .navbar-collapse.show,
  .container-header .navbar-collapse.collapsing {
    padding-top: 6.7rem;
    padding-inline: max(1rem,calc((100vw - 44rem)/2));
    overflow-y: auto;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 {
    display: block !important;
    width: 100%;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li.jentschel-menu-home {
    display: none !important;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li:not(.jentschel-menu-home) {
    position: relative;
    display: block !important;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > a {
    display: flex !important;
    align-items: center;
    min-height: 4rem;
    padding: .8rem 3.2rem .8rem .1rem !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.94);
    font-size: 1.08rem;
    font-weight: 720;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > .mm-toggler {
    position: absolute !important;
    top: .8rem !important;
    right: 0 !important;
    display: grid !important;
    place-items: center;
    width: 2.3rem !important;
    height: 2.3rem !important;
    min-width: 2.3rem !important;
    min-height: 2.3rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > .mm-toggler::after {
    display: block !important;
    content: "+" !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    color: currentColor;
    font-size: 1.12rem !important;
    line-height: 1;
    transform: none !important;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > .mm-toggler[aria-expanded="true"] {
    border-color: var(--jentschel-orange) !important;
    color: var(--jentschel-orange) !important;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > .mm-toggler[aria-expanded="true"]::after {
    content: "−" !important;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > .mm-collapse,
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 > li > .mm-collapsing {
    margin: 0 0 .65rem !important;
    padding: .15rem 0 .5rem .9rem !important;
    border-left: 1px solid rgba(253,86,35,.38) !important;
    background: transparent !important;
  }

  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 .mm-collapse a,
  .container-header .navbar-collapse .mod-menu.jentschel-menu-v3 .mm-collapsing a {
    display: block;
    padding: .45rem .7rem !important;
    color: rgba(255,255,255,.65);
    font-size: .9rem;
    text-decoration: none;
  }
}

/* === JENTSCHEL PHASE 17.6 NAVIGATION END === */

/* =========================================================
   JENTSCHEL.COM – MOBILE UX OPTIMIERUNG
   ========================================================= */

@media (max-width: 767.98px) {

  /* ---------------------------------------------------------
     HEADER
     Logo links, Menü / Suche / Login rechts in EINER Zeile
     --------------------------------------------------------- */

  .container-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 0 !important;
    border-bottom-width: 3px !important;
  }

  .container-header > .grid-child:has(.navbar-brand) {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.3rem !important;
  }

  .container-header > .container-nav {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    min-width: 0 !important;

    gap: 0.35rem !important;

    margin: 0 !important;
    padding-right: 0.75rem !important;
  }

  .container-header .navbar-brand {
    display: flex !important;
    align-items: center !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
  }

  .container-header .navbar-brand img {
    display: block !important;

    width: auto !important;
    max-width: min(38vw, 185px) !important;
    max-height: 45px !important;

    object-fit: contain !important;
  }

  /* Menü / Suche / Login kompakter */

  .container-header .navbar-toggler,
  .jentschel-search-toggle,
  .jentschel-login-toggle {
    flex: 0 0 3.25rem !important;

    width: 3.25rem !important;
    min-width: 3.25rem !important;

    height: 3.25rem !important;
    min-height: 3.25rem !important;

    gap: 0.15rem !important;

    padding: 0.3rem 0.2rem !important;

    border-radius: 0.6rem !important;
  }

  .container-header .navbar-toggler-icon {
    width: 1.3rem !important;
    height: 1rem !important;

    background-size: 1.3rem 1rem !important;
  }

  .jentschel-search-toggle__icon,
  .jentschel-login-toggle__icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  .container-header .navbar-toggler::after,
  .jentschel-search-toggle__label,
  .jentschel-login-toggle__label {
    font-size: 0.5rem !important;
    letter-spacing: 0.06em !important;
  }


  /* ---------------------------------------------------------
     HOMEPAGE HERO
     --------------------------------------------------------- */

  body:has(.oj-homepage) .oj-homepage .container {
    width: min(100% - 1.5rem, 1180px) !important;
  }

  body:has(.oj-homepage) .oj-homepage .hero {
    padding-top: 2.3rem !important;
    padding-bottom: 2.5rem !important;
  }

  body:has(.oj-homepage) .oj-homepage .hero-inner {
    gap: 1.25rem !important;
  }

  body:has(.oj-homepage) .oj-homepage .hero .eyebrow {
    margin-bottom: 0.75rem !important;

    font-size: 0.7rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.1em !important;
  }

  body:has(.oj-homepage) .oj-homepage .hero h1 {
    max-width: 100% !important;

    margin-bottom: 1rem !important;
    padding-bottom: 0.8rem !important;

    font-size: clamp(2.25rem, 8.5vw, 2.7rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.04em !important;

    text-wrap: balance;
  }

  body:has(.oj-homepage) .oj-homepage .hero h1::after {
    width: 3rem !important;
    height: 3px !important;
  }

  body:has(.oj-homepage) .oj-homepage .hero .lead {
    margin-bottom: 1rem !important;

    font-size: 1rem !important;
    line-height: 1.55 !important;
  }


  /* ---------------------------------------------------------
     HERO BUTTONS
     --------------------------------------------------------- */

  body:has(.oj-homepage) .oj-homepage .hero .btn-row {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 0.65rem !important;

    width: 100% !important;

    margin-top: 1rem !important;
  }

  body:has(.oj-homepage) .oj-homepage .hero .btn-row .btn {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 3.1rem !important;

    padding: 0.7rem 0.55rem !important;

    font-size: 0.86rem !important;
    line-height: 1.2 !important;

    text-align: center !important;
  }


  /* ---------------------------------------------------------
     TECHNISCHER SCHWERPUNKT / HERO CARD
     --------------------------------------------------------- */

  body:has(.oj-homepage) .oj-homepage .hero-card {
    margin-top: 1.2rem !important;

    padding: 1rem !important;

    border-radius: 0.8rem !important;
  }


  /* ---------------------------------------------------------
     FOLGESEKTIONEN
     --------------------------------------------------------- */

  body:has(.oj-homepage) .oj-homepage .section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  body:has(.oj-homepage) .oj-homepage .section h2 {
    margin-bottom: 0.9rem !important;

    font-size: clamp(1.75rem, 7vw, 2.1rem) !important;
    line-height: 1.08 !important;

    letter-spacing: -0.03em !important;

    text-wrap: balance;
  }

  body:has(.oj-homepage) .oj-homepage .section h3 {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
  }

  body:has(.oj-homepage) .oj-homepage .card,
  body:has(.oj-homepage) .oj-homepage .cta-box,
  body:has(.oj-homepage) .oj-homepage .problem-box {
    padding: 1.15rem !important;

    border-radius: 0.8rem !important;
  }
}


/* =========================================================
   SEHR SCHMALE SMARTPHONES
   ========================================================= */

@media (max-width: 419.98px) {

  .container-header > .grid-child:has(.navbar-brand) {
    padding-left: 0.55rem !important;
  }

  .container-header > .container-nav {
    gap: 0.25rem !important;
    padding-right: 0.55rem !important;
  }

  .container-header .navbar-brand img {
    max-width: min(34vw, 150px) !important;
    max-height: 40px !important;
  }

  .container-header .navbar-toggler,
  .jentschel-search-toggle,
  .jentschel-login-toggle {
    flex-basis: 3rem !important;

    width: 3rem !important;
    min-width: 3rem !important;

    height: 3rem !important;
    min-height: 3rem !important;
  }

  body:has(.oj-homepage) .oj-homepage .hero {
    padding-top: 2rem !important;
  }

  body:has(.oj-homepage) .oj-homepage .hero h1 {
    font-size: clamp(2.05rem, 10vw, 2.4rem) !important;
  }

  /* Unter 420px Buttons wieder untereinander */
  body:has(.oj-homepage) .oj-homepage .hero .btn-row {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   JENTSCHEL.COM – TABLET / SMALL DESKTOP HEADER FIX
   768px bis 1100px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

  .container-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 0 !important;
  }

  .container-header > .grid-child:has(.navbar-brand) {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 0.5rem !important;
  }

  .container-header > .container-nav {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    min-width: 0 !important;

    gap: 0.5rem !important;

    margin: 0 !important;
    padding-right: 1rem !important;
  }

  .container-header .navbar-brand {
    display: flex !important;
    align-items: center !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
  }

  .container-header .navbar-brand img {
    display: block !important;

    width: auto !important;
    max-width: min(52vw, 440px) !important;
    max-height: 62px !important;

    object-fit: contain !important;
  }

  .container-header .navbar-toggler,
  .jentschel-search-toggle,
  .jentschel-login-toggle {
    flex: 0 0 3.6rem !important;

    width: 3.6rem !important;
    min-width: 3.6rem !important;

    height: 3.6rem !important;
    min-height: 3.6rem !important;

    gap: 0.18rem !important;

    padding: 0.35rem 0.25rem !important;

    border-radius: 0.65rem !important;
  }

  .container-header .navbar-toggler-icon {
    width: 1.4rem !important;
    height: 1.1rem !important;

    background-size: 1.4rem 1.1rem !important;
  }

  .jentschel-search-toggle__icon,
  .jentschel-login-toggle__icon {
    width: 1.35rem !important;
    height: 1.35rem !important;
  }

  .container-header .navbar-toggler::after,
  .jentschel-search-toggle__label,
  .jentschel-login-toggle__label {
    font-size: 0.54rem !important;
    letter-spacing: 0.06em !important;
  }
}


/* Noch etwas enger zwischen 768 und 900px */
@media (min-width: 768px) and (max-width: 900px) {

  .container-header .navbar-brand img {
    max-width: min(47vw, 360px) !important;
    max-height: 56px !important;
  }

  .container-header .navbar-toggler,
  .jentschel-search-toggle,
  .jentschel-login-toggle {
    flex-basis: 3.35rem !important;

    width: 3.35rem !important;
    min-width: 3.35rem !important;

    height: 3.35rem !important;
    min-height: 3.35rem !important;
  }

  .container-header > .container-nav {
    gap: 0.35rem !important;
  }
}

/* =========================================================
   JENTSCHEL.COM – IMPRESSUM / RECHTLICHE SEITEN
   ========================================================= */

body:has(.oj-legalpage) {
  overflow-x: hidden;
}


/* Joomla Standardausgabe auf dieser Seite ausblenden */

body:has(.oj-legalpage) .page-header,
body:has(.oj-legalpage) .page-heading,
body:has(.oj-legalpage) .componentheading,
body:has(.oj-legalpage) .component-heading,
body:has(.oj-legalpage) .article-title,
body:has(.oj-legalpage) .item-title,
body:has(.oj-legalpage) .com-content-article__heading,
body:has(.oj-legalpage) h1.page-title,
body:has(.oj-legalpage) h2.page-title,
body:has(.oj-legalpage) .breadcrumbs,
body:has(.oj-legalpage) .breadcrumb,
body:has(.oj-legalpage) .mod-breadcrumbs {
  display: none !important;
}


/* Joomla Content Wrapper */

body:has(.oj-legalpage) .site-grid:has(.oj-legalpage) {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: 0 !important;
}


body:has(.oj-legalpage) .container-component:has(.oj-legalpage),
body:has(.oj-legalpage) .grid-child.container-component:has(.oj-legalpage),
body:has(.oj-legalpage) main:has(.oj-legalpage),
body:has(.oj-legalpage) #content:has(.oj-legalpage) {
  grid-column: 1 / -1 !important;

  width: 100% !important;
  max-width: none !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


body:has(.oj-legalpage) .com-content-article:has(.oj-legalpage),
body:has(.oj-legalpage) .com-content-article__body:has(.oj-legalpage),
body:has(.oj-legalpage) [itemprop="articleBody"]:has(.oj-legalpage),
body:has(.oj-legalpage) .item-page:has(.oj-legalpage) {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  background: transparent !important;
}


/* =========================================================
   BASIS
   ========================================================= */

.oj-legalpage {
  width: 100%;

  color: #24384c;

  background: #f6f8fa;
}


.oj-legal-inner {
  width: min(1180px, calc(100% - 3rem));

  max-width: 1180px;

  margin-inline: auto;
}


/* =========================================================
   HERO
   ========================================================= */

.oj-legal-hero {
  position: relative;

  padding: clamp(4rem, 8vw, 7rem) 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(253, 86, 35, 0.12),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f4f7f9 62%,
      #eef2f5 100%
    );
}


.oj-legal-hero::after {
  content: "";

  position: absolute;

  right: -10rem;
  bottom: -14rem;

  width: 32rem;
  height: 32rem;

  border-radius: 50%;

  background: rgba(5, 36, 69, 0.035);

  pointer-events: none;
}


.oj-legal-eyebrow {
  margin: 0 0 1rem;

  color: #fd5623;

  font-size: 0.78rem;
  font-weight: 750;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


.oj-legal-hero h1 {
  position: relative;

  max-width: 850px;

  margin: 0 0 1.5rem;

  padding-bottom: 1.3rem;

  color: #052445;

  font-size: clamp(2.8rem, 6vw, 5rem);

  font-weight: 800;

  line-height: 1.02;

  letter-spacing: -0.045em;
}


.oj-legal-hero h1::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 4rem;
  height: 4px;

  border-radius: 10px;

  background: #fd5623;
}


.oj-legal-lead {
  max-width: 720px;

  margin: 0;

  color: #53687c;

  font-size: clamp(1.05rem, 2vw, 1.25rem);

  line-height: 1.65;
}


/* =========================================================
   CONTENT
   ========================================================= */

.oj-legal-content {
  padding: clamp(3rem, 6vw, 5rem) 0;
}


.oj-legal-card {
  margin-bottom: 1.3rem;

  padding: clamp(1.4rem, 3vw, 2rem);

  border: 1px solid #dbe5ed;

  border-radius: 0.9rem;

  background: #ffffff;

  box-shadow:
    0 12px 32px rgba(5, 36, 69, 0.055);
}


.oj-legal-card h2 {
  position: relative;

  margin: 0 0 1.2rem;

  padding-bottom: 0.75rem;

  color: #052445;

  font-size: clamp(1.3rem, 2.5vw, 1.65rem);

  font-weight: 760;

  line-height: 1.2;
}


.oj-legal-card h2::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 2.5rem;
  height: 2px;

  background: #fd5623;
}


.oj-legal-card p {
  margin: 0 0 1rem;

  line-height: 1.7;
}


.oj-legal-card p:last-child {
  margin-bottom: 0;
}


.oj-legal-card a {
  color: #052445;

  font-weight: 650;

  text-decoration-color: rgba(253, 86, 35, 0.65);

  text-decoration-thickness: 2px;

  text-underline-offset: 0.2em;
}


.oj-legal-card a:hover,
.oj-legal-card a:focus-visible {
  color: #fd5623;
}


/* =========================================================
   PLATZHALTER
   ========================================================= */

.oj-legal-placeholder {
  padding: 0.8rem 1rem;

  border-left: 3px solid #fd5623;

  background: #fff4ef;

  color: #7b4532;

  font-size: 0.9rem;
}


.oj-legal-example {
  color: #687b8c;

  font-size: 0.93rem;

  font-style: italic;
}


/* =========================================================
   HINWEIS UNTEN
   ========================================================= */

.oj-legal-note {
  margin-top: 2rem;

  padding: 1.35rem 1.5rem;

  border-radius: 0.85rem;

  background:
    linear-gradient(
      135deg,
      #052445 0%,
      #0b365d 100%
    );

  color: rgba(255, 255, 255, 0.82);
}


.oj-legal-note strong {
  display: block;

  margin-bottom: 0.45rem;

  color: #ffffff;
}


.oj-legal-note p {
  margin: 0;

  line-height: 1.6;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

  .oj-legal-inner {
    width: min(100% - 1.5rem, 1180px);
  }


  .oj-legal-hero {
    padding: 3rem 0;
  }


  .oj-legal-hero h1 {
    font-size: clamp(
      2.35rem,
      11vw,
      3.2rem
    );
  }


  .oj-legal-content {
    padding: 2.5rem 0;
  }


  .oj-legal-card {
    margin-bottom: 1rem;

    padding: 1.25rem;
  }


  .oj-legal-card h2 {
    font-size: 1.3rem;
  }


  .oj-legal-placeholder {
    padding: 0.75rem 0.85rem;

    font-size: 0.85rem;
  }

}