root {
  --gold: #bfa36f;
  --beige: #d6c8a6;
  --dark-bg: #141312;
  --panel-bg: radial-gradient(circle at 50% 20%, #2f2c29 0%, #1f1d1b 100%);
  --panel-inner: #2b2927;
  --paper-dark: #1e1d1b;
  --shadow-outer: 0 24px 60px rgba(0,0,0,0.75);
  --shadow-inner: inset 0 0 25px rgba(255,255,255,0.03);
  --font-main: 'Cormorant Garamond', serif;
}

/* ================================
   Grundstruktur & Farben
   ================================ */
html, body {
  margin: 0;
  padding: 0;
  background: var(--dark-bg);
  color: var(--beige);
  font-family: var(--font-main);
  line-height: 1.7em;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color .3s ease;
}
a:hover { color: #f1e4c4; }

/* ================================
   Layout & Rahmen
   ================================ */
body > header,
body > section,
body > main,
body > footer {
  max-width: 1350px;
  margin: 0 auto 48px auto; /* nur unten Abstand */
  background: var(--panel-bg);
  border-radius: 14px;
  box-shadow: var(--shadow-outer), var(--shadow-inner);
  overflow: hidden;
  position: relative;
}

/* Header soll ganz oben kleben */
body > header {
  margin-top: 0 !important;
}

/* Footer soll ganz unten kleben */
body > footer {
  margin-bottom: 0 !important;
}

html {
  background-color: var(--dark-bg);
}
body {
  background-color: var(--dark-bg);
}

/* ================================
   Header / Navigation
   ================================ */
header.topbar {
  background: linear-gradient(180deg, #1f1d1b 0%, #2b2927 100%);
  color: var(--beige);
  padding: 2em 6vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand .h2 { font-size: 1.9em; color: var(--beige); }
.brand .h3 { font-size: 1.15em; color: var(--gold); }

.main-menu a {
  font-size: 1.15em;
  color: var(--beige);
  text-decoration: none;
  margin-left: 1.4em;
  font-weight: 600;
}
.main-menu a:hover { color: #f1e4c4; }


/* ================================
   Kontaktbereich
   ================================ */
.kontakt {
  background-color: var(--panel-inner);
  color: var(--beige);
  padding: 3em 6vw;
  text-align: center;
}
.kontakt-heading { font-size: 2em; margin-bottom: 0.5em; }
.kontakt-grid { display: flex; justify-content: center; gap: 5em; }
.kontakt-left, .kontakt-right {
  width: 280px;
  font-size: 1.5em;
  line-height: 1.8em;
}
.kontakt a {
  color: var(--beige);
  border-bottom: 1px solid var(--beige);
  text-decoration: none;
}
.kontakt a:hover { color: #f1e4c4; }
.kontakt-sep { width: 1px; background: var(--gold); opacity: 0.5; }
.map-link-wrapper { margin-top: 1.5em; }
.map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--beige);
  border-bottom: 1px solid var(--beige);
  text-decoration: none;
}
.map-link i { color: var(--gold); }

/* ================================
   Footer
   ================================ */
.footer {
  background-color: var(--paper-dark);
  color: var(--beige);
  padding: 1.5em 6vw;
  border-top: 1px solid #5a5040;
}
.footer-inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer a { color: var(--beige); text-decoration: none; }
.footer a:hover { color: #f1e4c4; }

/* ================================
   Unterseiten-Design
   ================================ */
.page {
  padding: 3em 6vw;
  background: radial-gradient(circle at 50% 20%, #2f2c29 0%, #1f1d1b 100%);
}
.page-inner {
  max-width: 1100px;
  margin: auto;
  color: var(--beige);
}
.backlink-wrapper { margin-bottom: 1.5em; }
.page-title {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 2.4em;
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
  display: inline-block;
  padding-bottom: 0.3em;
  margin-bottom: 1.2em;
}
.page p, .page li {
  font-size: 1.15em;
  line-height: 1.8em;
  color: var(--beige);
}

/* ================================
   Accordion / FAQs
   ================================ */
.uk-accordion-title {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 1.35em;
  color: var(--beige);
}
.uk-open > .uk-accordion-title { color: var(--gold); }
.uk-accordion-content {
  font-family: var(--font-main);
  color: var(--beige);
  font-size: 1.1em;
  line-height: 1.75em;
}
.uk-accordion-title::before,
.uk-accordion-title::after {
  color: var(--gold);
}

/* ================================
   Überschriften
   ================================ */
h1, h2, h3, .page-title, .uk-article-title, .item-title, .page-header h1 {
  font-family: var(--font-main);
  font-weight: 600;
  color: var(--gold);
  text-shadow: 0 0 6px rgba(0,0,0,.3);
}
h2, h3 {
  color: var(--beige);
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto; text-align: center; }
  .panel { padding: 2.5em 1.5em; }
  .copy .h1 { font-size: 2.2em; margin-bottom: 0.6em; }
  .copy p { font-size: 1.1em; line-height: 1.8em; }
  .hero-portrait { order: 2; margin-top: 2em; }
  .hero-portrait img { max-width: 80%; }
  .hero-portrait .zitat { font-size: 1.2em; margin-top: 0.6em; }

  .kontakt-grid { flex-direction: column; gap: 1.5em; }
  .kontakt-sep { display: none; }
  .kontakt-left, .kontakt-right { width: auto; font-size: 1.4em; line-height: 1.8em; }

  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 0.6em; }
}

/* Joomla-Standardtitel innerhalb des Inhalts ausblenden */
.page .page-inner .page-header h1,
.com-content-article .page-header h1,
.uk-article-title,
.item-page .page-header h1 {
  display: none !important;
}

/* Weitere Titelvarianten aus Joomla/YOOtheme unterdrücken */
.page .page-inner h1.uk-h1,
.page .page-inner h1.componentheading,
.view-article h1,
.view-category h1,
.uk-article-title,
.page .content-title,
.yootheme-content h1 {
  display: none !important;
}
/* ============================================
   HERO – FEINABSTIMMUNG ÜBERSCHRIFT + BUTTON
   ============================================ */

/* Hauptüberschrift */
.hero-content h1,
.hero .h1 {
  color: #2f2c26 !important;
  font-weight: 700 !important;          /* wirklich fett */
  text-shadow: none !important;
  line-height: 1.1em;                   /* kompakter Zeilenabstand */
  margin-top: 0.2em;                    /* enger zum oberen Rand */
  margin-bottom: 0.3em;                 /* kleiner Abstand zum h2 */
  letter-spacing: 0.02em;               /* leicht geöffnet */
}

/* Unterüberschrift ("Willkommen") */
.hero-content h2 {
  color: #2f2c26 !important;
  font-weight: 500 !important;
  margin-top: 0.2em;
  margin-bottom: 0.8em;
}

/* Lauftext */
.hero-content p {
  color: #2f2c26 !important;
  font-size: 1.2em;
  line-height: 1.7em;
  margin-top: 1em;
}

/* ============================================
   HERO-BEREICH – SCHRIFTFARBE WIE HEADER-HINTERGRUND
   ============================================ */

.hero,
.hero h1,
.hero h2,
.hero p,
.hero .h1,
.hero .h2,
.hero .copy,
.hero-left,
.hero-content,
.logo-text .name,
.logo-text .sub {
  color: #2b2927 !important;  /* gleiche Farbe wie Header-Hintergrund */
  text-shadow: none !important;
}

/* Button – dunkelbrauner Hintergrund, helle Schrift */
.hero .uk-button,
.hero .uk-button-default,
.hero .uk-button-primary,
.hero a.uk-button {
  background-color: #2b2927 !important;   /* dunkler Grundton wie Header */
  color: #f6f1e7 !important;              /* helle, edle Schrift */
  border: 1px solid #bfa36f !important;   /* goldener Rand */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75em 2em;
  border-radius: 8px;
  transition: all .3s ease;
  text-decoration: none;
}

/* Hover-Effekt: leicht hellere Fläche, Schrift bleibt hell */
.hero .uk-button:hover,
.hero .uk-button-default:hover,
.hero .uk-button-primary:hover,
.hero a.uk-button:hover {
  background-color: #3b352f !important;
  color: #f1e4c4 !important;
  border-color: #d6c8a6 !important;
}

/* Basis-Hintergrund: komplett dunkel bis Seitenrand */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #2b2927 !important; /* dein var(--dark-bg) */
  color: var(--beige);
  font-family: var(--font-main);
  line-height: 1.7em;
}

body > header {
  margin-top: 0 !important;
}

body > footer {
  margin-bottom: 0 !important;
}

#system-message-container {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}