/* =========================================================
   PREMIUM DARK GLASS – GLOBAL (Joomla Cassiopeia)
   Strukturierte Komplett-Version (Reihenfolge beibehalten!)
   ========================================================= */

/* ================================
   0) Fonts
================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ================================
   1) CSS Variablen (Basis)
================================ */
:root{
  --bg: url("/images/bg.jpg");
  --overlay1: rgba(2,6,23,.25);
  --overlay2: rgba(10,18,32,.35);

  --glass1: rgba(15,23,42,.78);
  --glass2: rgba(15,23,42,.62);
  --glass-border: rgba(255,255,255,.16);

  --txt: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.74);
  --title: #ffffff;

  --primary: #2563eb;
  --primary2:#1d4ed8;
  --gold: #c8a74a;

  --radius: 22px;
  --shadow: 0 26px 90px rgba(2,6,23,.45);
  --shadow2: 0 40px 140px rgba(2,6,23,.55);

  --maxw: 1180px;
}

/* ================================
   2) Background / Layout
================================ */
html, body{ height:100%; }

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg) center/cover no-repeat fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background: linear-gradient(
    180deg,
    var(--overlay1) 0%,
    var(--overlay2) 45%,
    rgba(2,6,23,.62) 100%
  );
  pointer-events:none;
  z-index:0;
}

body > *{ position:relative; z-index:1; }

.container, .container-fluid{ max-width: var(--maxw); }

/* ================================
   3) Header / Footer Glass
================================ */
#header, .header, .navbar,
#footer, .footer{
  background: rgba(15,23,42,.86);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 18px 45px rgba(2,6,23,.55);
  margin: 18px 0;
}

.navbar{ padding: 10px 16px; }
#footer, .footer{ padding: 18px 16px; color: rgba(255,255,255,.82); }

/* ================================
   4) Global Content Glass
================================ */
.container-component,
.com-content-article,
.com-content-category-blog,
.com-contact,
.item-page,
.blog,
.category-list{
  background: linear-gradient(180deg, var(--glass1), var(--glass2));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

/* Module Cards */
.moduletable, .card{
  background: linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.58));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  box-shadow: 0 18px 60px rgba(2,6,23,.28);
  padding: 18px;
  margin-bottom: 18px;
}

/* ================================
   5) Typography / Links / Buttons
================================ */
h1,h2,h3,h4,h5{
  color: var(--title);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

p, li{
  color: var(--muted);
  line-height: 1.75;
}

strong, b{ color: var(--txt); }

a{ color: rgba(255,255,255,.92); text-underline-offset: 3px; }
a:hover{ color: #fff; }

/* Buttons */
.btn, button, input[type="submit"]{
  border-radius: 999px;
  font-weight: 900;
}

.btn-primary{
  border:0;
  background: linear-gradient(180deg, var(--primary), var(--primary2));
}

/* =========================================================
   6) STARTSEITE – Kacheln / Kontakt Strip / Team
   ========================================================= */
.home-objects{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  margin: 18px 0 10px;
}

.object-card{
  background: linear-gradient(180deg, rgba(15,23,42,.82), rgba(15,23,42,.60));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 30px 120px rgba(2,6,23,.45);
  color:#fff;
  overflow:hidden;
  position:relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.object-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow2);
  border-color: rgba(255,255,255,.26);
}

.object-card h3{
  margin:0 0 8px;
  color:#fff;
  font-weight: 950;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

.object-card p{
  margin:0 0 12px;
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  word-break: break-word;
  hyphens: auto;
}

.object-card a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  color:#fff !important;
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  box-shadow: 0 18px 60px rgba(37,99,235,.40);
  text-decoration:none;
}

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

/* Kontakt Strip */
.contact-strip-inner{
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
  background: rgba(15,23,42,.62);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  padding: 18px 22px;
  box-shadow: 0 30px 90px rgba(2,6,23,.45);
}

.contact-item{ color: rgba(255,255,255,.90); font-weight: 800; }
.contact-item a{ color:#fff; text-decoration:none; font-weight:900; }

.contact-item.highlight a{
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(29,78,216,.95));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 60px rgba(37,99,235,.35);
}

/* Team */
.home-team{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top: 14px;
}

.team-card{
  background: linear-gradient(180deg, rgba(15,23,42,.82), rgba(15,23,42,.60));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 26px 90px rgba(2,6,23,.40);
  color:#fff;
  transition: transform .22s ease, box-shadow .22s ease;
}

.team-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow2); }

/* =========================================================
   7) KONTAKT – Formular Premium Dark
   ========================================================= */
.com-contact form,
.com-contact .contact-form,
.com-contact form#contact-form{
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 55px rgba(2,6,23,.30);
}

.com-contact label{ color: rgba(255,255,255,.86); font-weight: 800; }

.com-contact input,
.com-contact textarea,
.com-contact select{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 12px 12px;
}

.com-contact textarea{ min-height: 220px; resize: vertical; }

.com-contact input:focus,
.com-contact textarea:focus,
.com-contact select:focus{
  outline:none;
  border-color: rgba(200,167,74,.65);
  box-shadow: 0 0 0 3px rgba(200,167,74,.18);
}

.com-contact button,
.com-contact input[type="submit"]{
  background: var(--gold);
  color:#111;
  border:0;
  border-radius: 12px;
  padding: 14px 22px;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  transition: .2s ease;
}

.com-contact button:hover,
.com-contact input[type="submit"]:hover{
  background: #e0c66a;
  transform: translateY(-2px);
}

/* reCAPTCHA Token-Feld verstecken (nur Token, nicht Captcha-Box) */
textarea[name*="recaptcha"],
input[name*="recaptcha"],
#recaptcha-token{ display:none !important; }

/* ================================
   8) Responsive (Start/Kontakt)
================================ */
@media (max-width: 992px){
  .home-objects{ grid-template-columns: 1fr; }
  .object-card.hm-wide{ grid-column:auto; }
  .home-team{ grid-template-columns: 1fr; }
  .contact-strip-inner{ flex-direction:column; align-items:stretch; text-align:center; }
}

/* =========================================================
   9) PREMIUM KACHEL-SYSTEM – GLOBAL (Overrides / 2. :root)
   Hinweis: Diese :root-Variablen überschreiben oben (so wie bisher)
   ========================================================= */
:root{
  --glass1: rgba(15,23,42,.82);
  --glass2: rgba(15,23,42,.62);
  --glass-border: rgba(255,255,255,.16);
  --txt: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.76);
  --shadow: 0 26px 90px rgba(2,6,23,.45);
  --shadowHover: 0 40px 140px rgba(2,6,23,.55);
  --r: 22px;
}

/* Alle Inhaltsbereiche als "Kachel-Container" */
.container-component,
.com-content-article,
.com-content-category-blog,
.item-page,
.com-contact{
  background: linear-gradient(180deg, var(--glass1), var(--glass2)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 28px !important;
}

/* Typo auf allen Seiten: weiß + gut lesbar */
.container-component h1,
.container-component h2,
.container-component h3,
.com-content-article h1,
.com-content-article h2,
.com-content-article h3,
.item-page h1,
.item-page h2,
.item-page h3{
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

.container-component p,
.container-component li,
.com-content-article p,
.com-content-article li,
.item-page p,
.item-page li{
  color: var(--muted) !important;
  line-height: 1.75;
}

/* =========================================================
   10) BAUSTEINE – Artikel HTML Helfer
   ========================================================= */
.is-section{
  margin: 22px 0;
  padding: 18px;
  border-radius: var(--r);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.is-section > h2,
.is-section > h3{
  margin-top: 0;
}

.is-grid{
  display: grid;
  gap: 16px;
}

.is-grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.is-grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

.is-card{
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(15,23,42,.86), rgba(15,23,42,.62));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 60px rgba(2,6,23,.30);
  padding: 18px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.is-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadowHover);
  border-color: rgba(255,255,255,.26);
}

.is-card h3{
  margin: 0 0 8px;
  color:#fff !important;
  font-weight: 950;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.is-card p{
  margin: 0 0 12px;
  color: rgba(255,255,255,.84) !important;
}

.is-card a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 900;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(29,78,216,.95));
  box-shadow: 0 18px 60px rgba(37,99,235,.35);
}

@media (max-width: 992px){
  .is-grid.cols-2,
  .is-grid.cols-3{ grid-template-columns: 1fr; }
}

/* =========================================================
   11) Startseite Fixes / Partner / HERO / Sections
   (Ab hier: genau wie von dir geliefert – nur sauber formatiert)
   ========================================================= */
.object-card{
  background: linear-gradient(180deg, rgba(15,23,42,.86), rgba(15,23,42,.62)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 30px 120px rgba(2,6,23,.40) !important;
}
.object-card h3, .object-card p{ color:#fff; }

.partner-card{ margin-top: 30px !important; }

/* ================================
   HERO
================================ */
.hero{
  padding: 90px 0 80px;
  background:
    linear-gradient(
      180deg,
      #070f1f 0%,
      #0b1630 40%,
      #070f1f 100%
    );
  border-radius: 26px;
  overflow: hidden;
}

.hero-inner{
  max-width: 1100px;
  margin: auto;
}

.hero h1{
  font-size: clamp(2.6rem, 4.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 880px;
  background: linear-gradient(180deg, #ffffff 0%, #b8c9f2 60%, #8fa7d9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-focus{
  display: inline-block;
  background: linear-gradient(135deg, #ffffff, #9fb7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.hero-sub{
  max-width: 720px;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.8);
  margin-top: 20px;
}

.hero-points{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
  margin: 60px 0 50px;
}

.hero-points div{
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  padding: 26px 28px;
  font-weight: 600;
  font-size: 1.05rem;
  color: white;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.hero-cta{
  display: inline-block;
  padding: 18px 36px;
  border-radius: 40px;
  background: linear-gradient(135deg, #3a7cff, #1f4fd8);
  color: white;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 12px 30px rgba(47,124,255,0.35);
  transition: transform .15s ease, box-shadow .15s ease;
  margin-bottom: 10px;
}

.hero-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(47,124,255,0.45);
}

/* ================================
   ZIELGRUPPE
================================ */
.target-section{
  padding: 100px 0;
  border-radius: 26px;
  overflow: hidden;
}

.target-inner{
  max-width: 1100px;
  margin: auto;
  padding-left: 40px;
}

.target-sub{
  max-width: 720px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 60px;
  padding-left: 40px;
}

.target-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px;
}

.target-card{
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 30px;
}

.target-card h3{
  margin-bottom: 10px;
}

/* ================================
   PROBLEM
================================ */
.problem-section{
  padding: 100px 0;
  background: rgba(0,0,0,0.2);
  margin-top: 20px !important;
  border-radius: 26px;
  overflow: hidden;
}

.problem-inner{
  max-width: 1100px;
  margin:auto;
  padding-left: 40px;
  padding-right: 40px;
}

.problem-sub{
  max-width: 720px;
  margin-bottom: 60px;
  color: rgba(255,255,255,0.7);
}

.problem-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}

.problem-card{
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  padding: 28px;
  border-radius: 16px;
}

/* ================================
   LÖSUNG
================================ */
.solution-section{
  padding: 100px 0;
}

.solution-inner{
  max-width: 1100px;
  margin:auto;
}

.solution-grid{
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 32px;
  max-width: 900px;
  margin: 70px auto 0;
}

.solution-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  padding: 42px 56px;
  min-height: auto;

  padding: 56px 52px 52px;

  min-height: 360px;
  box-sizing: border-box;
}

.solution-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}

.solution-badge{
  display:inline-block;
  background: rgba(47,124,255,0.15);
  color:#2f7cff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .8rem;
  margin-bottom: 18px;
}

/* ================================
   OBJEKT CHECK
================================ */
.check-section{
  padding: 120px 0;
  background: linear-gradient(135deg, #1b2a4a, #3a4f7a, #6b5a2e);
  color: white;
  text-align:center;
  border-radius: 180px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 40px 80px rgba(0,0,0,0.65);
}

.check-inner{
  max-width: 1320px;
  margin:auto;
}

.check-cta-btn{
  background: linear-gradient(135deg, #d4b06a, #b58a3a);
  color: #1a1205;
  font-weight: 700;
  padding: 18px 36px;
  border-radius: 50px;
  box-shadow: 0 14px 40px rgba(180,140,60,0.45);
  transition: transform .15s ease, box-shadow .15s ease;
}

.check-cta-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 55px rgba(180,140,60,0.6);
}

/* --- nachfolgende Fix-Blöcke (wie bei dir) --- */
.hero{ padding-bottom: 30px !important; }

.target-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 24px;
}

.problem-inner > h2,
.problem-inner > .problem-sub,
.solution-inner > h2{
  padding-left: 40px;
}

/* FIX: Überschrift/Content muss IN der Kachel bleiben */
.solution-card{
  position: relative !important;
  overflow: hidden;
}

.solution-card h3,
.solution-card p,
.solution-badge{
  position: static !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.solution-card h3{
  margin-top: 18px !important;
  line-height: 1.2 !important;
}

.solution-card,
.solution-card *{
  min-width: 0;
}

.solution-grid{
  grid-template-columns: 1fr !important;
  gap: 28px !important;
  max-width: 720px;
  margin-left: 40px;
}

.solution-card{
  min-height: auto !important;
  padding: 36px 40px !important;
}

.solution-section{ padding-bottom: 48px !important; }

.hero{
  padding-bottom: 5px !important;
  margin-bottom: 0 !important;
}

.hero-inner{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.target-section{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.problem-section{
  margin-top: 10px !important;
  padding-top: 40px;
}

.solution-grid{
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

.logo{
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.15);
}

.target-card:hover,
.problem-card:hover,
.solution-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  border-color: rgba(120,170,255,0.45);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.04)
  );
}

.solution-card:hover .solution-badge,
.target-card:hover h3{
  color: #9bbcff;
}

.target-section{
  background:
    linear-gradient(
      180deg,
      #070f1f 0%,
      #0b1630 40%,
      #070f1f 100%
    );
  margin-top: 10px !important;
}

.target-card{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02)
  );
  border: 1px solid rgba(255,255,255,0.14);
}

.target-inner > h2,
.target-inner > .target-sub{
  padding-left: 40px;
  padding-right: 40px;
}

.target-inner > h2,
.target-inner > .target-sub,
.problem-inner > h2,
.problem-inner > .problem-sub{
  padding-left: 40px;
  padding-right: 40px;
}

.target-inner,
.problem-inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.target-inner > h2,
.target-inner > .target-sub,
.problem-inner > h2,
.problem-inner > .problem-sub{
  margin-left: 40px !important;
  padding-left: 0 !important;
}

.target-grid,
.problem-grid{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* =========================================================
   12) MENÜ – (Genau wie bei dir, nur strukturiert)
   Hinweis: Hier liegen viele doppelte Regeln. NICHT umsortiert.
   ========================================================= */

/* ===== Menü-Container (Glass Card) ===== */
.menu,
.nav-menu,
.sidebar-menu,
#menu,
#sidebar{
  background: linear-gradient(180deg, rgba(10,20,38,0.72), rgba(7,15,31,0.55));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  padding: 18px 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}

/* ===== Menü-Titel (z.B. "Menü") ===== */
.menu h3,
.nav-menu h3,
.sidebar-menu h3,
#menu h3,
#sidebar h3{
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.01em;
}

/* ===== Trennlinie ===== */
.menu hr,
.nav-menu hr,
.sidebar-menu hr,
#menu hr,
#sidebar hr{
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.14);
  margin: 10px 0 14px;
}

/* ===== Menü-Links ===== */
.menu a,
.nav-menu a,
.sidebar-menu a,
#menu a,
#sidebar a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 11px 12px;
  margin: 6px 0;

  border-radius: 14px;
  color: rgba(230,238,255,0.78);
  text-decoration: none;

  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}

.menu a:hover,
.nav-menu a:hover,
.sidebar-menu a:hover,
#menu a:hover,
#sidebar a:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.95);
  transform: translateY(-1px);
}

.menu a.active,
.menu a.current,
.menu a[aria-current="page"],
.nav-menu a.active,
.nav-menu a.current,
.nav-menu a[aria-current="page"],
.sidebar-menu a.active,
.sidebar-menu a.current,
.sidebar-menu a[aria-current="page"]{
  background: linear-gradient(135deg, rgba(47,124,255,0.22), rgba(85,214,194,0.10));
  border-color: rgba(120,170,255,0.35);
  color: rgba(255,255,255,0.98);
}

/* ===== Dropdown-Pfeil ===== */
.menu .chevron,
.nav-menu .chevron,
.sidebar-menu .chevron{
  opacity: 0.8;
  transform: translateY(1px);
}

.menu .arrow,
.nav-menu .arrow,
.sidebar-menu .arrow{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(160,190,255,0.7);
  border-bottom: 2px solid rgba(160,190,255,0.7);
  transform: rotate(45deg);
  margin-left: auto;
}

@media (max-width: 700px){
  .menu a,
  .nav-menu a,
  .sidebar-menu a,
  #menu a,
  #sidebar a{
    padding: 13px 14px;
  }
}

/* =========================================================
   MENU – PREMIUM DARK GLASS (Sidebar / Modul-Menü)
   ========================================================= */
.mod-menu,
.moduletable .mod-menu,
.sidebar .mod-menu,
.menu,
#menu,
#sidebar{
  background: linear-gradient(180deg, rgba(10,20,38,.72), rgba(7,15,31,.55));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  padding: 16px 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.mod-menu > h3,
.moduletable h3{
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  letter-spacing: -0.01em;
}

.mod-menu ul,
.menu ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.mod-menu hr,
.menu hr{
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.14);
  margin: 10px 0 14px;
}

.mod-menu > ul > li > a,
.menu > ul > li > a,
.mod-menu .nav > li > a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 12px;
  margin: 6px 0;

  border-radius: 14px;
  color: rgba(230,238,255,.80);
  text-decoration: none;

  border: 1px solid transparent;
  background: rgba(255,255,255,0.02);

  transition: background .15s ease, border-color .15s ease,
              transform .15s ease, color .15s ease, box-shadow .15s ease;
}

.mod-menu a:hover,
.menu a:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.96);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(2,6,23,.25);
}

.mod-menu a:focus-visible,
.menu a:focus-visible{
  outline: none;
  border-color: rgba(200,167,74,.55);
  box-shadow: 0 0 0 3px rgba(200,167,74,.20);
}

.mod-menu a[aria-current="page"],
.mod-menu li.current > a,
.mod-menu li.active > a,
.mod-menu li.alias-parent-active > a,
.menu a[aria-current="page"],
.menu li.current > a,
.menu li.active > a{
  background: linear-gradient(135deg,
    rgba(37,99,235,.28),
    rgba(200,167,74,.12)
  );
  border-color: rgba(120,170,255,.38);
  color: rgba(255,255,255,.98);
  box-shadow: 0 16px 50px rgba(37,99,235,.18);
}

.mod-menu li.current > a,
.mod-menu li.active > a,
.menu li.current > a,
.menu li.active > a{
  position: relative;
}

.mod-menu li.current > a::before,
.mod-menu li.active > a::before,
.menu li.current > a::before,
.menu li.active > a::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(200,167,74,.9), rgba(37,99,235,.85));
  opacity: .9;
}

.mod-menu li ul,
.menu li ul{
  margin: 6px 0 10px;
  padding: 6px 0 0 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.mod-menu li ul li a,
.menu li ul li a{
  padding: 10px 12px 10px 38px;
  margin: 5px 0;
  border-radius: 12px;
  font-size: .96rem;
  color: rgba(230,238,255,.76);
  background: rgba(255,255,255,0.015);
}

.mod-menu li ul li a:hover,
.menu li ul li a:hover{
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.95);
}

.mod-menu li ul li.current > a,
.mod-menu li ul li.active > a,
.menu li ul li.current > a,
.menu li ul li.active > a{
  background: rgba(37,99,235,.16);
  border-color: rgba(120,170,255,.28);
}

.mod-menu li.parent > a::after,
.menu li.parent > a::after{
  content:"";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid rgba(160,190,255,0.65);
  border-bottom: 2px solid rgba(160,190,255,0.65);
  transform: rotate(45deg);
  opacity: .85;
}

@media (max-width: 700px){
  .mod-menu > ul > li > a,
  .menu > ul > li > a,
  .mod-menu li ul li a,
  .menu li ul li a{
    padding-top: 13px;
    padding-bottom: 13px;
  }
}

/* =========================================================
   AB HIER: Deine weiteren Menü-Overrides / Fixes
   (Alle bleiben drin, Reihenfolge unverändert)
   ========================================================= */

/* MENU – LESBAR + BUTTON LOOK */
.moduletable:has(.mod-menu) > h3,
.moduletable .mod-menu + h3,
.moduletable h3,
.mod-menu > h3,
.menu > h3{
  color: rgba(255,255,255,.96) !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.01em;
  margin: 0 0 14px !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.65) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.moduletable h3::after,
.mod-menu > h3::after,
.menu > h3::after{
  content:"";
  display:block;
  height: 1px;
  margin-top: 10px;
  background: rgba(255,255,255,.16);
}

/* Buttons als Pills */
.mod-menu a,
.menu a{
  display: block !important;
  padding: 12px 14px !important;
  margin: 8px 0 !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: rgba(255,255,255,.90) !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 28px rgba(2,6,23,.35) !important;
  transition: transform .15s ease, box-shadow .15s ease,
              border-color .15s ease, background .15s ease, color .15s ease;
}

.mod-menu a:hover,
.menu a:hover{
  transform: translateY(-2px) !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 55px rgba(2,6,23,.55) !important;
}

.mod-menu a:focus-visible,
.menu a:focus-visible{
  outline: none !important;
  border-color: rgba(200,167,74,.60) !important;
  box-shadow: 0 0 0 3px rgba(200,167,74,.22), 0 18px 55px rgba(2,6,23,.55) !important;
}

.mod-menu li.active > a,
.mod-menu li.current > a,
.mod-menu a[aria-current="page"],
.menu li.active > a,
.menu li.current > a,
.menu a[aria-current="page"]{
  color: rgba(255,255,255,.98) !important;
  background: linear-gradient(135deg, rgba(37,99,235,.32), rgba(200,167,74,.14)) !important;
  border-color: rgba(120,170,255,.40) !important;
  box-shadow: 0 22px 70px rgba(37,99,235,.20) !important;
}

.mod-menu li ul,
.menu li ul{
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

.mod-menu li ul a,
.menu li ul a{
  margin: 6px 0 !important;
  padding-left: 34px !important;
  font-weight: 750 !important;
  font-size: .96rem !important;
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* MENU – PREMIUM BUTTON UI */
.mod-menu,
.menu{
  padding: 18px 16px !important;
}

.moduletable h3,
.mod-menu > h3{
  color: rgba(255,255,255,.96) !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
  margin-bottom: 16px !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.6) !important;
}

.moduletable h3::after,
.mod-menu > h3::after{
  content:"";
  display:block;
  height:1px;
  margin-top:10px;
  background: rgba(255,255,255,.14);
}

.mod-menu ul,
.menu ul{
  list-style:none;
  margin:0;
  padding:0;
}

.mod-menu a,
.menu a{
  display:flex !important;
  align-items:center;
  gap:12px;

  height:48px;
  padding: 0 16px !important;

  margin: 8px 0 !important;
  border-radius: 14px !important;

  text-decoration:none !important;
  font-weight: 800 !important;
  font-size: .95rem;

  color: rgba(255,255,255,.90) !important;

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 32px rgba(2,6,23,.45) !important;

  transition: all .16s ease;
}

.mod-menu a:hover,
.menu a:hover{
  transform: translateY(-2px);
  color:#fff !important;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) !important;
  border-color: rgba(255,255,255,.25) !important;
  box-shadow: 0 22px 60px rgba(2,6,23,.65) !important;
}

.mod-menu li.active > a,
.mod-menu li.current > a,
.mod-menu a[aria-current="page"],
.menu li.active > a,
.menu li.current > a,
.menu a[aria-current="page"]{
  background: linear-gradient(135deg, rgba(37,99,235,.38), rgba(200,167,74,.16)) !important;
  border-color: rgba(120,170,255,.45) !important;
  box-shadow: 0 24px 70px rgba(37,99,235,.25) !important;
  color:#fff !important;
}

/* Icon (Kugel) – später durch Haus ersetzt */
.mod-menu a::before,
.menu a::before{
  content:"";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;

  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.08));

  box-shadow:
    inset 0 0 6px rgba(255,255,255,.35),
    0 4px 10px rgba(0,0,0,.5);
}

.mod-menu li.active > a::before,
.mod-menu li.current > a::before,
.mod-menu a[aria-current="page"]::before,
.menu li.active > a::before,
.menu li.current > a::before,
.menu a[aria-current="page"]::before{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(150,190,255,.55));
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.9),
    0 0 14px rgba(100,160,255,.7);
}

.mod-menu li ul,
.menu li ul{
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.mod-menu li ul a,
.menu li ul a{
  height: 44px;
  font-size: .9rem;
  margin: 6px 0;
  padding-left: 42px !important;
  background: rgba(255,255,255,.03) !important;
}

/* MENU FIX: Breite + Haus-Icon */
.moduletable .mod-menu,
.mod-menu,
.menu{
  width: 100% !important;
  max-width: 320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.moduletable:has(.mod-menu){
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.moduletable h3,
.mod-menu > h3,
.menu > h3{
  color: #fff !important;
  opacity: 1 !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.75) !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.mod-menu a,
.menu a{
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
  gap: 12px !important;

  height: 52px !important;
  padding: 0 16px !important;
}

/* Haus-Icon (Mask) */
.mod-menu a::before,
.menu a::before{
  content:"";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;

  background-color: rgba(255,255,255,.86);

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2.5 11h2.7v10h5.8v-6h2v6h5.8V11H21.5L12 3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2.5 11h2.7v10h5.8v-6h2v6h5.8V11H21.5L12 3z'/%3E%3C/svg%3E") center/contain no-repeat;

  border-radius: 0 !important;
  box-shadow: none !important;
}

.mod-menu a:hover::before,
.menu a:hover::before{
  background-color: rgba(255,255,255,.98);
}

.mod-menu li.active > a::before,
.mod-menu li.current > a::before,
.mod-menu a[aria-current="page"]::before,
.menu li.active > a::before,
.menu li.current > a::before,
.menu a[aria-current="page"]::before{
  background-color: rgba(200,167,74,.95);
}

/* MENU PANEL PADDING */
.moduletable .mod-menu,
.mod-menu,
.menu{
  padding: 22px 22px !important;
}

.mod-menu a,
.menu a{
  width: 100% !important;
  box-sizing: border-box !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  max-width: calc(100% - 6px) !important;
  margin-left: 3px !important;
  margin-right: 3px !important;
}

/* MENU LAYOUT FIX – saubere Ränder & kein Überlaufen */
.moduletable .mod-menu,
.mod-menu,
.menu{
  padding: 20px !important;
  box-sizing: border-box !important;
}

.mod-menu a,
.menu a{
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  margin: 8px 0 !important;
}

.mod-menu li,
.menu li{
  padding: 0 !important;
}

.mod-menu,
.menu{
  overflow: hidden !important;
}

/* MENU TITLE – FORCE VISIBILITY + PREMIUM PANEL */
.moduletable h3,
.mod-menu > h3,
.menu > h3{
  position: relative !important;
  z-index: 999 !important;

  display: inline-flex !important;
  align-items: center;
  gap: 10px;

  padding: 12px 18px !important;
  margin: 0 0 16px !important;

  color: #fff !important;
  font-weight: 900 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.02em;

  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.35)) !important;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  text-shadow:
    0 2px 10px rgba(0,0,0,.9),
    0 0 24px rgba(0,0,0,.6);

  box-shadow:
    0 18px 45px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.08);

  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}

.moduletable h3::before,
.mod-menu > h3::before,
.menu > h3::before{
  content:"";
  width: 10px;
  height: 22px;
  border-radius: 999px;

  background: linear-gradient(180deg, #e0c66a, #b58a3a);

  box-shadow:
    0 0 14px rgba(200,167,74,.8),
    0 6px 16px rgba(180,140,60,.6);
}

.moduletable h3::after,
.mod-menu > h3::after,
.menu > h3::after{
  content:"";
  display:block;
  height:1px;
  margin-top: 14px;
  background: linear-gradient(90deg, rgba(200,167,74,.7), rgba(255,255,255,.25), rgba(255,255,255,0)) !important;
}

.moduletable:has(.mod-menu){
  overflow: visible !important;
}

/* HARD FIX: Modultitel */
.moduletable h1, .moduletable h2, .moduletable h3, .moduletable h4,
.moduletable .module-title,
.moduletable .mod-title,
.moduletable .module-header,
.moduletable .module-header .title,
.moduletable .module-title span,
.moduletable .mod-title span{
  color: #fff !important;
  opacity: 1 !important;

  background: none !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-background-clip: initial !important;

  filter: none !important;
  mix-blend-mode: normal !important;

  font-weight: 950 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.85) !important;
}

/* SIDEBAR-RIGHT Overrides */
.sidebar-right,
.sidebar-right *{
  mix-blend-mode: normal !important;
}

.sidebar-right .moduletable > h3,
.sidebar-right .moduletable > h2,
.sidebar-right .moduletable > h4,
.sidebar-right .module-title,
.sidebar-right .mod-title,
.sidebar-right .module-header .title,
.sidebar-right .module-title span,
.sidebar-right .mod-title span{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: initial !important;

  opacity: 1 !important;
  filter: none !important;

  font-weight: 950 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.02em !important;

  position: relative !important;
  z-index: 9999 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 12px 18px !important;
  margin: 0 0 16px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  background: linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.30)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  text-shadow: 0 2px 14px rgba(0,0,0,.90) !important;

  box-shadow:
    0 18px 45px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.sidebar-right .moduletable > h3::before,
.sidebar-right .moduletable > h2::before,
.sidebar-right .moduletable > h4::before,
.sidebar-right .module-title::before,
.sidebar-right .mod-title::before,
.sidebar-right .module-header .title::before{
  content:"";
  width: 10px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e0c66a, #b58a3a);
  box-shadow: 0 0 14px rgba(200,167,74,.75), 0 6px 16px rgba(180,140,60,.55);
}

.sidebar-right .moduletable > h3::after,
.sidebar-right .moduletable > h2::after,
.sidebar-right .moduletable > h4::after,
.sidebar-right .module-title::after,
.sidebar-right .mod-title::after,
.sidebar-right .module-header .title::after{
  content:"";
  display:block;
  height:1px;
  margin-top: 14px;
  background: linear-gradient(90deg, rgba(200,167,74,.75), rgba(255,255,255,.22), rgba(255,255,255,0));
}

.sidebar-right .moduletable{
  overflow: visible !important;
}

/* =========================================================
   SIDEBAR-RIGHT (Cassiopeia) – exakter Fix per DOM:
   <div class="sidebar-right card">
     <h3 class="card-header">Menü</h3>
     <div class="card-body"> ... </div>
   ========================================================= */

/* 1) Titel: wirklich weiß & lesbar */
.container-sidebar-right .sidebar-right.card > .card-header{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;

  font-weight: 950 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.02em !important;

  text-shadow: 0 2px 14px rgba(0,0,0,.9) !important;

  /* optional: kleines dunkles Panel, damit es IMMER kontrast hat */
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 10px 16px !important;
  margin: 0 0 14px 0 !important;
}

/* Gold-Akzent links im Titel */
.container-sidebar-right .sidebar-right.card > .card-header::before{
  content:"";
  width: 8px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e0c66a, #b58a3a);
  box-shadow: 0 0 10px rgba(200,167,74,.75);
}

/* 2) Buttons: rechts/links Abstand erzwingen (ohne Layout kaputt zu machen) */
.container-sidebar-right .sidebar-right.card > .card-body .mod-menu a,
.container-sidebar-right .sidebar-right.card > .card-body .menu a{
  width: calc(100% - 24px) !important;  /* 12px links + 12px rechts */
  margin-left: 12px !important;
  margin-right: 12px !important;
  box-sizing: border-box !important;
}

/* 3) Sicherheit: UL/LI sollen nicht gegenarbeiten */
.container-sidebar-right .sidebar-right.card > .card-body .mod-menu ul,
.container-sidebar-right .sidebar-right.card > .card-body .menu ul{
  padding: 0 !important;
  margin: 0 !important;
}

.container-sidebar-right .sidebar-right.card > .card-body .mod-menu li,
.container-sidebar-right .sidebar-right.card > .card-body .menu li{
  padding: 0 !important;
}

/* =========================================================
   SIDEBAR-RIGHT – Menü-Glasbox breiter
   (mehr Luft rechts neben den Buttons)
   ========================================================= */

/* Der innere Glas-Kasten mit den Buttons */
.container-sidebar-right .sidebar-right.card > .card-body{
  padding-left: 26px !important;
  padding-right: 26px !important;   /* ← das ist der Abstand rechts */
}

/* Sicherheit: Buttons bleiben normal breit */
.container-sidebar-right .sidebar-right.card > .card-body .mod-menu a,
.container-sidebar-right .sidebar-right.card > .card-body .menu a{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* =========================================================
   SIDEBAR-RIGHT – Menü-Kasten breiter als der Grid-Slot
   ========================================================= */

/* Der innere Glas-Kasten mit den Buttons */
.container-sidebar-right .sidebar-right.card > .card-body{
  position: relative !important;
  left: -18px;                 /* zieht den Kasten nach links */
  width: calc(100% + 36px);    /* macht ihn insgesamt breiter */
  padding-left: 22px;
  padding-right: 22px;
  box-sizing: border-box;
}

/* Sicherheit: Buttons füllen den neuen Kasten sauber */
.container-sidebar-right .sidebar-right.card > .card-body .mod-menu a{
  width: 100% !important;
}

/* =========================================================
   JOOMLA CASSIOPEIA LOGO – HARD FIX (img + wrapper)
   ========================================================= */

/* 1) Häufigster Fall: Logo ist ein <img> in der Navbar/Brand */
header .navbar-brand img,
header .brand-logo img,
.header .navbar-brand img,
.navbar-brand img,
.brand-logo img{
  border-radius: 18px !important;
  display: block !important;
  overflow: hidden !important;
}

/* 2) Falls das <a> / Wrapper das Bild "abschneidet": Wrapper auch runden */
header .navbar-brand,
header .brand-logo,
.header .navbar-brand,
.navbar-brand,
.brand-logo{
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* =========================================================
   ÜBER UNS (Itemid 104) – Premium Glass Stil nur für diese Seite
   ========================================================= */

body.itemid-104.view-article .com-content-article.item-page{
  padding: 34px !important;
}

/* H1 wie Premium Headline */
body.itemid-104.view-article .com-content-article.item-page h1{
  font-size: clamp(2.1rem, 3.2vw, 3rem) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 14px !important;

  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.75) !important;
}

/* Intro-Text direkt nach H1 */
body.itemid-104.view-article .com-content-article.item-page h1 + p{
  font-size: 1.08rem !important;
  color: rgba(255,255,255,.82) !important;
  max-width: 70ch !important;
  margin: 0 0 18px !important;
}

/* H2 als Section-Panel mit Gold-Akzent */
body.itemid-104.view-article .com-content-article.item-page h2{
  position: relative !important;
  margin: 28px 0 12px !important;
  padding: 12px 14px 12px 18px !important;

  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.18)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;

  font-weight: 950 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.7) !important;
}

body.itemid-104.view-article .com-content-article.item-page h2::before{
  content:"" !important;
  position:absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 8px !important;
  height: 18px !important;
  border-radius: 999px !important;

  background: linear-gradient(180deg, #e0c66a, #b58a3a) !important;
  box-shadow: 0 0 10px rgba(200,167,74,.65) !important;
}

/* Absätze schöner/lesbarer */
body.itemid-104.view-article .com-content-article.item-page p{
  color: rgba(255,255,255,.80) !important;
  line-height: 1.75 !important;
}

/* Listen als Premium-Card */
body.itemid-104.view-article .com-content-article.item-page ul{
  margin: 12px 0 18px !important;
  padding: 16px 16px 16px 18px !important;

  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 14px 40px rgba(2,6,23,.28) !important;
}

body.itemid-104.view-article .com-content-article.item-page ul li{
  margin: 10px 0 !important;
  color: rgba(255,255,255,.86) !important;
}

/* CTA-Links (Kontakt/Objekt-Check) als Gold Button */
body.itemid-104.view-article .com-content-article.item-page a[href*="kontakt"],
body.itemid-104.view-article .com-content-article.item-page a[href*="objekt"],
body.itemid-104.view-article .com-content-article.item-page p > a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 14px 18px !important;
  border-radius: 999px !important;

  text-decoration: none !important;
  font-weight: 900 !important;

  color: #101018 !important;
  background: linear-gradient(135deg, #e0c66a, #b58a3a) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 16px 45px rgba(180,140,60,.28) !important;

  transition: transform .15s ease, box-shadow .15s ease !important;
}

body.itemid-104.view-article .com-content-article.item-page p > a:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 60px rgba(180,140,60,.38) !important;
}

/* Mobile */
@media (max-width: 700px){
  body.itemid-104.view-article .com-content-article.item-page{
    padding: 22px !important;
  }
}

/* =========================================================
   OBJEKT-CHECK / GOLD CTA komplett ausblenden
   ========================================================= */

.check-section,
.check-inner,
.check-cta-btn,
a[href*="objekt-check"],
a[href*="objekt"],
a:has(.check-cta-btn){
  display: none !important;
}

/* Google Reviews – Dark Style passend zur Seite */
.google-reviews{
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  padding: 48px 44px;
  border-radius: 22px;
  max-width: 1000px;
  margin: 70px auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Überschrift */
.google-reviews h2{
  color: #ffffff;
  text-align: center;
  margin-bottom: 36px;
  font-weight: 600;
}

/* Einzelne Bewertung */
.google-reviews .review{
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.google-reviews .review:last-child{
  border-bottom: none;
}

/* Sterne */
.google-reviews .stars{
  color: #f5c451; /* edler als Google-Gelb */
  font-size: 18px;
  margin-bottom: 8px;
}

/* Bewertungstext */
.google-reviews .review p{
  color: rgba(255,255,255,0.9);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 6px;
}

/* Name */
.google-reviews .review span{
  color: rgb(255,255,255);
  font-size: 14px;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}

/* Google-Link */
.google-reviews .google-link{
  display: inline-block;
  margin-top: 26px;
  color: #f5c451;
  font-weight: 600;
  text-decoration: none;
}

.google-reviews .google-link:hover{
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 768px){
  .google-reviews{
    padding: 28px 20px;
    margin: 40px 16px;
  }
}

/* Zwischenebene entfernen (Section-Wrapper) */
.is-section{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;      /* nimmt die zusätzliche Innenfläche weg */
}

/* falls das Template ein Overlay über ::before/::after macht */
.is-section::before,
.is-section::after{
  content: none !important;
}

/* === HELLERES DARK-GLASS (Drop-in Patch) === */
:root{
  /* Overlays: deutlich weniger abdunkeln */
  --overlay1: rgba(2,6,23,.12);
  --overlay2: rgba(10,18,32,.18);

  /* Glass: weniger deckend = mehr Licht */
  --glass1: rgba(15,23,42,.58);
  --glass2: rgba(15,23,42,.42);
  --glass-border: rgba(255,255,255,.18);

  /* Text: etwas weniger „knallig weiß“ + bessere Lesbarkeit */
  --txt: rgba(255,255,255,.88);
  --muted: rgba(255,255,255,.72);
}

/* Der stärkste Abdunkler sitzt hier: mach das Ende nicht so schwarz */
body::before{
  background: linear-gradient(
    180deg,
    var(--overlay1) 0%,
    var(--overlay2) 45%,
    rgba(2,6,23,.32) 100%   /* vorher .62 */
  );
}

h1,h2,h3,h4,h5{
  text-shadow: 0 1px 8px rgba(0,0,0,.35); /* vorher deutlich stärker */
}

p, li{
  color: rgba(255,255,255,.78); /* etwas heller als dein muted */
}

/* Google Reviews – Text vs. Meta sauber trennen */
.google-reviews .review p{
  color: rgba(255,255,255,.88) !important;  /* Bewertungstext */
}

.google-reviews .review :is(span, small, cite){
  color: rgba(255,255,255,.78) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.45) !important;
}

.google-reviews{
  margin-top: 10px !important;   /* Abstand oben kleiner */
}

#hm-gallery{
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  isolation: isolate;
}

/* Optional: oben/unten Abstände */
#hm-gallery{ margin-top: 40px; margin-bottom: 40px; }

#hm-gallery .gallery-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000; 
  opacity: 0;
  animation: galleryFade 60s infinite;
  animation-delay: var(--d); /* <-- Delay kommt aus HTML */
}

@keyframes galleryFade{
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  20%  { opacity: 1; }
  26%  { opacity: 0; }
  100% { opacity: 0; }
}

#hm-gallery .gallery-image:nth-child(1)  { animation-delay: 0s; }
#hm-gallery .gallery-image:nth-child(2)  { animation-delay: 4s; }
#hm-gallery .gallery-image:nth-child(3)  { animation-delay: 8s; }
#hm-gallery .gallery-image:nth-child(4)  { animation-delay: 12s; }
#hm-gallery .gallery-image:nth-child(5)  { animation-delay: 16s; }
#hm-gallery .gallery-image:nth-child(6)  { animation-delay: 20s; }
#hm-gallery .gallery-image:nth-child(7)  { animation-delay: 24s; }
#hm-gallery .gallery-image:nth-child(8)  { animation-delay: 28s; }
#hm-gallery .gallery-image:nth-child(9)  { animation-delay: 32s; }
#hm-gallery .gallery-image:nth-child(10) { animation-delay: 36s; }
#hm-gallery .gallery-image:nth-child(11) { animation-delay: 40s; }
#hm-gallery .gallery-image:nth-child(12) { animation-delay: 44s; }
#hm-gallery .gallery-image:nth-child(13) { animation-delay: 48s; }
#hm-gallery .gallery-image:nth-child(14) { animation-delay: 52s; }
#hm-gallery .gallery-image:nth-child(15) { animation-delay: 56s; }