/*
 * user.css für Cassiopeia (Joomla 5) – nachgebaut nach dem alten YOOtheme-Design
 * Ablageort: /var/www/logop/media/templates/site/cassiopeia/css/user.css
 * Cassiopeia lädt diese Datei automatisch; Joomla-Updates überschreiben sie nicht.
 * Die Schriften liegen in ../fonts/ (lokal, keine Anfragen an Google).
 */

/* ===================== Schriften ===================== */
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ===================== Farben und Grundwerte ===================== */
:root {
  --lp-petrol: #006767;
  --lp-petrol-dunkel: #005252;
  --lp-salbei: #559189;
  --lp-titel: #222;
  /* Fließtext: im alten Design #919191 – leicht abgedunkelt, damit er gut lesbar ist */
  --lp-text: #707070;
  --lp-linie: #e8e8e8;
  --lp-hell: #fafafa;
  --lp-hell-text: rgba(255, 255, 255, .85);

  --lp-font-text: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --lp-font-titel: "Roboto Condensed", "Roboto", system-ui, sans-serif;
  --lp-font-menu: "Open Sans", "Roboto", system-ui, sans-serif;

  /* Cassiopeia-Variablen */
  --cassiopeia-color-primary: var(--lp-petrol);
  --cassiopeia-color-link: var(--lp-petrol);
  --cassiopeia-color-hover: var(--lp-petrol-dunkel);
  --cassiopeia-font-family-headings: var(--lp-font-titel);
  --cassiopeia-font-weight-headings: 300;
  --body-font-family: var(--lp-font-text);
  --body-font-size: 17px;
  --body-font-weight: 300;
  --body-line-height: 1.625;
  --body-color: var(--lp-text);
  --body-bg: #fff;
  --link-color: var(--lp-petrol);
  --link-hover-color: #555;
}

body {
  overflow-x: clip; /* nötig für die Abschnitte über die volle Breite */
}

strong, b { font-weight: 700; }

a { color: var(--lp-petrol); text-decoration: none; }
a:hover { color: #555; }
a:focus-visible, button:focus-visible { outline: 3px solid #f8d027; outline-offset: 2px; }

/* ===================== Überschriften ===================== */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: var(--lp-font-titel);
  font-weight: 300;
  color: var(--lp-titel);
  margin: 0 0 20px;
  text-transform: none;
}
* + :is(h1, h2, h3, h4, h5, h6) { margin-top: 40px; }
h1, .lp-h1 { font-size: 44px; line-height: 1.2; font-weight: 300; text-transform: none; }
h2, .lp-h2 { font-size: 40px; line-height: 1.3; font-weight: 300; text-transform: none; }
h3, .lp-h3 { font-size: 22px; line-height: 1.4; font-weight: 700; text-transform: uppercase; }
h4, .lp-h4 { font-size: 18px; line-height: 1.4; font-weight: 700; text-transform: uppercase; }
.lp-heading-primary { font-size: 54px; line-height: 1.2; font-weight: 300; text-transform: none; }
@media (max-width: 959.98px) {
  h1, .lp-h1 { font-size: 34px; }
  h2, .lp-h2 { font-size: 30px; }
  .lp-heading-primary { font-size: 40px; }
}

.lp-lead { font-size: 20px; line-height: 1.5; color: var(--lp-titel); }
.lp-gross { font-size: 22px; line-height: 1.5; }
.lp-center { text-align: center; }
.lp-meta { color: var(--lp-text); font-size: 15px; }

/* ===================== Kopfbereich ===================== */
.container-header {
  background: var(--lp-petrol);
  background-image: none;
  box-shadow: none;
}
.container-header .navbar-brand { padding: 10px 0; }
.container-header .brand-logo img { width: 200px; max-width: 55vw; height: auto; display: block; }

/* Logo links, Menü rechts in einer Zeile (ab Tablet quer) */
@media (min-width: 992px) {
  .container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-inline: max(1rem, calc((100% - 1200px) / 2));
    min-height: 100px;
  }
  .container-header > .grid-child { width: auto; max-width: none; margin: 0; padding: 0; }
  .container-header .container-nav { padding: 0; }
  .container-header .container-nav nav { margin-top: 0; }
}

/* Menüpunkte */
.container-header .metismenu > li > a,
.container-header .metismenu > li > button {
  font-family: var(--lp-font-menu);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .8);
}
.container-header .metismenu > li > a:hover,
.container-header .metismenu > li > button:hover,
.container-header .metismenu > li.active > a,
.container-header .metismenu > li.active > button {
  color: #fff;
}
/* kurzer Strich unter dem aktiven Menüpunkt wie im alten Design */
.container-header .metismenu > li.active > a:after,
.container-header .metismenu > li.active > button:before {
  opacity: 1;
  background: #fff;
  height: 1px;
  left: calc(50% - 8px);
  right: calc(50% - 8px);
  bottom: -2px;
}
.container-header .metismenu > li > a:hover:after,
.container-header .metismenu > li > button:hover:before {
  opacity: .6;
  height: 1px;
}

/* Untermenü ("Mehr") in Petrol statt Weiß */
.container-header .metismenu.mod-menu .mm-collapse {
  background: var(--lp-petrol);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
  padding: 10px 20px;
  min-width: 18rem;
}
.container-header .metismenu.mod-menu .mm-collapse a {
  color: #fff;
  font-weight: 300;
  padding: 6px 0;
}
.container-header .metismenu.mod-menu .mm-collapse a:hover { color: rgba(255, 255, 255, .6); }

/* Handy-Menü: Logo links, Menü-Knopf rechts daneben, aufgeklapptes Menü darunter */
.container-header .navbar-toggler { color: #fff; border-color: rgba(255, 255, 255, .5); }
@media (max-width: 991.98px) {
  .container-header { position: relative; }
  .container-header .grid-child { padding: 0 1rem; }
  .container-header .container-nav { padding: 0 1rem; }
  .container-header .container-nav nav { margin-top: 0; position: static; }
  .container-header .navbar-toggler { position: absolute; top: 18px; right: 1rem; }
  .container-header .navbar-collapse.show,
  .container-header .navbar-collapse.collapsing { padding-bottom: 1rem; }
  .container-header .navbar-brand { padding: 12px 3.5rem 12px 0; }
  .container-header .brand-logo img { width: 150px; }
}

/* ===================== Inhaltsbereich ===================== */
/* kein Abstand zwischen Kopfbereich und erstem Abschnitt */
.container-component > main,
.container-component > :first-child { margin-top: 0; }
.com-content-article__body > :first-child { margin-top: 0; }
.com-content-article__body > .lp-section:last-child { margin-bottom: 0; }

/* ===================== Abschnitte (volle Breite) ===================== */
.lp-section {
  position: relative;
  isolation: isolate;
  margin-inline: calc(50% - 50vw);
  padding: 40px calc(50vw - 50%);
}
.lp-section--schmal > *,
.com-content-article__body .lp-section--schmal > hr { max-width: 900px; margin-inline: auto; }

.lp-pad-xsmall { padding-block: 20px; }
.lp-pad-small  { padding-block: 25px; }
.lp-pad-large  { padding-block: 70px; }
.lp-pad-xlarge { padding-block: 140px; }
.lp-pad-none   { padding-block: 0; }
.lp-pad-oben-0  { padding-top: 0; }
.lp-pad-unten-0 { padding-bottom: 0; }
@media (max-width: 959.98px) {
  .lp-pad-large  { padding-block: 40px; }
  .lp-pad-xlarge { padding-block: 80px; }
}

.lp-section--muted { background-color: var(--lp-hell); }
.lp-section--primary { background-color: #ddd; }
.lp-section--secondary { background-color: var(--lp-petrol); }

.lp-section--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lp-section--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lp-overlay, transparent);
}
.lp-fixed { background-attachment: fixed; }
@media (max-width: 959.98px), (hover: none) {
  .lp-fixed { background-attachment: scroll; }
}

/* helle Schrift auf dunklen Flächen */
.lp-section--secondary, .lp-hell,
.lp-col--tile-primary, .lp-col--tile-secondary,
.lp-card--card-primary, .lp-card--card-secondary {
  color: var(--lp-hell-text);
}
:is(.lp-section--secondary, .lp-hell, .lp-col--tile-primary, .lp-col--tile-secondary, .lp-card--card-primary, .lp-card--card-secondary)
  :is(h1, h2, h3, h4, h5, h6, a, strong, .lp-lead) {
  color: #fff;
}
:is(.lp-section--secondary, .lp-hell, .lp-col--tile-primary, .lp-col--tile-secondary) .lp-lead { color: var(--lp-hell-text); }
:is(.lp-section--secondary, .lp-hell) hr { border-top-color: rgba(255, 255, 255, .2); }

/* ===================== Spalten ===================== */
.lp-row {
  display: grid;
  gap: 40px;
  align-items: start;
  margin-block: 0 40px;
}
.lp-row:last-child { margin-bottom: 0; }
.lp-gap-small    { gap: 15px; }
.lp-gap-medium   { gap: 30px; }
.lp-gap-large    { gap: 70px; }
.lp-gap-collapse { gap: 0; }
@media (min-width: 960px) {
  .lp-row { grid-template-columns: var(--lp-cols, 1fr); }
}
.lp-row--mitte { align-items: center; }
.lp-row:has(> [class*="lp-col--tile"]) { align-items: stretch; }
.lp-col > :first-child { margin-top: 0; }
.lp-col > :last-child { margin-bottom: 0; }

.lp-col--tile-primary, .lp-col--tile-secondary { background: var(--lp-petrol); padding: 40px 30px; }
.lp-col--tile-muted { background: var(--lp-hell); padding: 40px 30px; }
.lp-col--tile-default { background: #fff; padding: 40px 30px; }
[class*="lp-col--tile"] { display: flex; flex-direction: column; justify-content: center; }

/* ===================== nur mobil / nur größer ===================== */
@media (min-width: 640px)  { .lp-bis-s  { display: none !important; } }
@media (max-width: 639.98px) { .lp-ab-s { display: none !important; } }
@media (min-width: 960px)  { .lp-bis-m  { display: none !important; } }
@media (max-width: 959.98px) { .lp-ab-m { display: none !important; } }
@media (min-width: 1200px) { .lp-bis-l  { display: none !important; } }
@media (max-width: 1199.98px) { .lp-ab-l { display: none !important; } }

/* ===================== Text, Bilder, Trennlinien ===================== */
.lp-text > :last-child { margin-bottom: 0; }
.lp-text + *, .lp-image + *, .lp-list + * { margin-top: 20px; }
.lp-image { margin: 0 0 20px; }
.lp-image img, .lp-text img { max-width: 100%; height: auto; }
.lp-image.lp-center img { margin-inline: auto; display: block; }
.lp-bild-circle { border-radius: 50%; }
.lp-bild-rounded { border-radius: 8px; }

.com-content-article__body hr,
.container-footer hr {
  border: 0;
  border-top: 5px solid var(--lp-petrol);
  opacity: 1;
  margin: 20px 0;
}

/* ===================== Listen ===================== */
.lp-list { list-style: none; padding: 0; margin: 0 0 20px; }
.lp-list > li + li { margin-top: 10px; }
.lp-list--divider > li + li { padding-top: 10px; border-top: 1px solid var(--lp-linie); }
:is(.lp-section--secondary, .lp-hell) .lp-list--divider > li + li { border-top-color: rgba(255, 255, 255, .2); }
.lp-list--bullet > li { position: relative; padding-left: 1.6em; }
.lp-list--bullet > li::before {
  content: "";
  position: absolute;
  left: .4em;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}
.lp-list--fett { font-weight: 400; color: var(--lp-titel); }
/* Dreiecke vor den Listenpunkten – per CSS, damit der Editor sie beim Speichern nicht entfernt */
.lp-list--icons > li { position: relative; padding-left: 26px; }
.lp-list--icons > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(.8em - 8px);
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent var(--lp-text);
}
.lp-list--divider.lp-list--icons > li + li::before { top: calc(10px + .8em - 8px); }
.lp-icon { display: none; } /* ältere Fassung des Umbauskripts */
.lp-list-img { width: 2.5rem; height: auto; margin-right: .5rem; }

/* ===================== Karten ===================== */
.lp-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 0 0 20px;
}
@media (min-width: 640px) and (max-width: 959.98px) {
  .lp-grid[style*="--lp-grid-cols"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .lp-grid[style*="--lp-grid-cols"] { grid-template-columns: repeat(var(--lp-grid-cols), minmax(0, 1fr)); }
}
/* Kachel ohne Rahmen (z. B. Team-Fotos auf "Über uns") */
.lp-card { padding: 0; }
.lp-card-img { display: block; width: 100%; height: auto; margin: 0 0 15px; }
.lp-card-titel { font-size: 22px; line-height: 1.4; font-weight: 700; text-transform: uppercase; margin: 0 0 5px; }
.lp-card.lp-center .lp-card-img { margin-inline: auto; }
/* Kachel mit Hintergrund (z. B. Hinweis-Kasten) */
.lp-card[class*="lp-card--card"] { padding: 25px; }
.lp-card[class*="lp-card--card"] .lp-card-img { width: calc(100% + 50px); max-width: none; margin: -25px -25px 20px; }
.lp-card[class*="lp-card--card"] .lp-card-titel { font-weight: 300; text-transform: none; margin-bottom: 15px; }
.lp-card--card-default { background: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, .08); }
.lp-card--card-primary { background: var(--lp-salbei); }
.lp-card--card-secondary { background: var(--lp-petrol); }
.lp-card > :last-child { margin-bottom: 0; }

/* ===================== Buttons ===================== */
.lp-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.lp-buttons.lp-center { justify-content: center; }
.lp-button {
  display: inline-block;
  padding: 0 30px;
  line-height: 42px;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  transition: box-shadow .1s, color .1s, background-color .1s;
}
.lp-button--default { background: #fff; color: var(--lp-titel) !important; box-shadow: 0 3px 12px rgba(0, 0, 0, .07); }
.lp-button--default:hover { color: var(--lp-petrol) !important; box-shadow: 0 6px 30px rgba(0, 0, 0, .1); }
.lp-button--primary { background: var(--lp-petrol); color: #fff !important; }
.lp-button--primary:hover { background: var(--lp-petrol-dunkel); }
.lp-button--secondary { background: var(--lp-titel); color: #fff !important; }
.lp-button--text, .lp-button--link { padding: 0; background: none; color: var(--lp-petrol) !important; }

/* ===================== Bildergalerie (Ersatz für Widgetkit) ===================== */
.lp-galerie {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  margin: 30px 0;
}
.lp-galerie--voll { margin: 40px calc(50% - 50vw); }
@media (max-width: 959.98px) { .lp-galerie { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .lp-galerie { grid-template-columns: 1fr; } }
.lp-galerie a { display: block; overflow: hidden; }
.lp-galerie img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .4s ease;
}
.lp-galerie a:hover img { transform: scale(1.04); }

/* ===================== Karte ===================== */
.lp-section > .lp-map { margin-inline: calc(50% - 50vw); }
.lp-col .lp-map { margin-block: 30px; }
.lp-map iframe { display: block; width: 100%; height: 300px; border: 0; }
.lp-map-link { text-align: center; font-size: 14px; margin: 8px 0 0; }

/* ===================== Fußzeile ===================== */
.container-footer {
  background: var(--lp-petrol);
  background-image: none;
  color: var(--lp-hell-text);
  margin-top: 0;
  padding: 70px 1rem 40px;
}
/* weißes Logo über den Spalten */
.container-footer::before {
  content: "";
  display: block;
  height: 90px;
  margin: 0 auto 60px;
  background: url("/images/Logo-weiss.png") center / contain no-repeat;
}
.container-footer .grid-child {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
  max-width: 900px;
  padding: 0;
}
.container-footer .grid-child > .mod-custom h2 {
  font-size: 40px;
  line-height: 1.3;
  color: #fff;
  margin: 0;
}
.container-footer .grid-child > .mod-custom h2::after {
  content: "";
  display: block;
  margin: 20px 0;
  border-top: 5px solid rgba(255, 255, 255, .2);
}
.container-footer .grid-child > .mod-custom p { margin: 0; }
.container-footer a { color: #fff; }
.container-footer a:hover { color: rgba(255, 255, 255, .7); }

/* Fußzeilen-Menü: Kontakt · Impressum · Datenschutz */
.container-footer .grid-child > ul.mod-menu {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.container-footer .grid-child > ul.mod-menu a {
  display: block;
  padding: 5px 10px;
  color: rgba(255, 255, 255, .6);
  font-weight: 400;
}
.container-footer .grid-child > ul.mod-menu a:hover,
.container-footer .grid-child > ul.mod-menu .current > a { color: #fff; }