/* =====================================================================
   SORISTO – Cassiopeia-Child im Aussehen des früheren LessAllRounder
   Vorgabe: docs/migration/baseline/design.md + screens/
   Nur dieses Child ändern, Cassiopeia bleibt unberührt (update-sicher).
   ===================================================================== */

:root {
  --sor-bg: #cfe4fc;
  --sor-box: #efefef;
  --sor-text: #555555;
  --sor-link: #a52a2a;
  --sor-link-hover: #7a1f1f;
  --sor-dark: #555555;
  --sor-footer-bar: #313131;
  --sor-footer-blue: #356eb5;
  --cassiopeia-color-primary: #555555;
  --cassiopeia-color-link: #a52a2a;
  --cassiopeia-color-hover: #7a1f1f;
  --link-color: #a52a2a;
  --link-hover-color: #7a1f1f;
}

/* ---------- Grundlagen ---------- */
body.site {
  background: var(--sor-bg);
  color: var(--sor-text);
  font-family: Verdana, Geneva, "DejaVu Sans", Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

a { color: var(--sor-link); text-decoration: none; }
a:hover, a:focus { color: var(--sor-link-hover); text-decoration: underline; }

h1, h2, h3, h4, .page-header h1, .page-header h2 {
  color: #484848;
  font-family: inherit;
  font-weight: normal;
}

/* ---------- Seitenkasten ---------- */
.site-grid {
  background: var(--sor-box);
  border: 1px solid #fff;
  border-top: 0;
  max-width: 1180px;
  margin: 10px auto 0;
  padding: 10px 12px 30px; /* oben 25 -> 10px (Kundenwunsch 11/2026) */
  width: 100%;
}

@supports (display: grid) {
  .site-grid {
    grid-template-columns: [full-start main-start] minmax(0, 1fr) [main-end full-end];
    grid-template-areas:
      "banner" "top-a" "top-b" "comp" "side-r" "side-l" "bot-a" "bot-b";
    gap: 0;
  }

  @media (width >= 768px) {
    .site-grid {
      grid-template-columns: [full-start main-start] 236px minmax(0, 1fr) [main-end full-end];
      grid-template-areas:
        "banner banner"
        "top-a top-a"
        "top-b top-b"
        "side-l comp"
        "bot-a bot-a"
        "bot-b bot-b";
      column-gap: 16px;
    }
  }
}

.site-grid > [class^="container-"], .site-grid > [class*=" container-"] { column-gap: 0; }

/* ---------- Kopf (nur mobil: Seitenname + Hamburger-Menü) ---------- */
.container-header {
  background: linear-gradient(#666, #444);
  box-shadow: none;
}
.container-header .navbar-brand,
.container-header .navbar-brand a { color: #f2f2f2; font-size: 1.15rem; }
.container-header .grid-child { padding-top: .4rem; padding-bottom: .4rem; }
.container-header .mod-menu { color: #f2f2f2; }
.container-header .mod-menu a { color: #f2f2f2; }
.container-header .navbar-toggler { color: #f2f2f2; border-color: #888; }

@media (width >= 768px) {
  .container-header { display: none; }
}
@media (width < 768px) {
  .site-grid { margin-top: 0; padding: 10px 8px 20px; border: 0; }
  .container-header .container-nav { width: 100%; }
  .container-header .navbar { width: 100%; }
  .container-header .mod-menu > li { border-bottom: 1px solid #666; }
  .container-header .mod-menu ul { padding-left: 1rem; }
  /* Hauptmenü in der Seitenleiste ersetzt mobil das Kopf-Menü */
  .container-sidebar-left .card._menu { display: none; }
}

/* ---------- Kopf-Slideshow (Position top-a) ---------- */
.container-top-a { margin-bottom: 20px; } /* 40 -> 20px (Kundenwunsch 11/2026) */
.container-top-a .card {
  background: linear-gradient(#fdfdfd, #f1f1f1);
  border: 1px solid #dedede;
  border-radius: 0;
  box-shadow: 0 0 0 3px #fff, 0 8px 6px -6px rgba(0, 0, 0, .45);
  margin: 3px 3px 0; /* bündig mit Sidebar-Karte links und Inhaltsbox rechts */
  padding: 10px;
}
.container-top-a .card-header {
  background: linear-gradient(#ffffff, #ececec);
  border: 1px solid #dddddd;
  border-radius: 0;
  color: #444;
  font-size: 17px;
  font-weight: bold;
  margin: 0 0 10px;
  padding: 6px 8px;
  text-transform: uppercase;
}
.container-top-a .card-body { padding: 0; }
.soristo-slider.br-simple-slider-container {
  aspect-ratio: 1400 / 320; /* Kopfbilder 1400x320 (vorher 250) */
  background: #ddd;
  height: auto;
}
@media (width < 768px) {
  .container-top-a { margin-bottom: 15px; }
  .container-top-a .card { padding: 5px; }
  .container-top-a .card-header { font-size: 13px; padding: 4px 6px; margin-bottom: 5px; }
}

/* ---------- Seitenleiste ---------- */
.container-sidebar-left .card {
  background: #f9f9f9;
  border: 1px solid #dddddd;
  border-radius: 0;
  box-shadow: 0 0 0 3px #fff, 0 9px 6px -6px rgba(0, 0, 0, .45);
  margin: 3px 3px 22px;
}
.container-sidebar-left .card-header {
  background: linear-gradient(#6a6a6a, #444);
  border: 0;
  border-radius: 6px 6px 0 0;
  color: #f2f2f2;
  font-size: 15px;
  font-weight: bold;
  margin: -3px -4px 0 -25px;
  padding: 8px 10px 8px 30px;
  position: relative;
  text-shadow: 0 1px 1px #000;
}
.container-sidebar-left .card-header::after {
  border-left: 9px solid transparent;
  border-top: 9px solid #222;
  bottom: -9px;
  content: "";
  left: 0;
  position: absolute;
}
.container-sidebar-left .card-body { padding: 12px 8px 16px 12px; }
@media (width < 768px) {
  .container-sidebar-left .card-header { margin-left: -4px; border-radius: 0; }
  .container-sidebar-left .card-header::after { display: none; }
}

/* Hauptmenü */
.container-sidebar-left .mod-menu { margin: 0; padding: 0; }
.container-sidebar-left .mod-menu li { border-bottom: 1px dotted #cccccc; list-style: none; margin: 0; }
.container-sidebar-left .mod-menu a,
.container-sidebar-left .mod-menu .mod-menu__separator,
.container-sidebar-left .mod-menu .mod-menu__heading {
  color: #333;
  display: block;
  padding: 6px 0 6px 15px;
  position: relative;
}
.container-sidebar-left .mod-menu a::before {
  border-bottom: 4px solid transparent;
  border-left: 4px solid #555;
  border-top: 4px solid transparent;
  content: "";
  left: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.container-sidebar-left .mod-menu a:hover { color: #000; text-decoration: none; }
.container-sidebar-left .mod-menu .current > a,
.container-sidebar-left .mod-menu .active > a { color: #000; font-weight: bold; }
.container-sidebar-left .mod-menu ul { margin: 0 0 0 10px; padding: 0; }
.container-sidebar-left .mod-menu ul li:last-child { border-bottom: 0; }
.container-sidebar-left .mod-menu ul a { font-size: 11px; padding-top: 3px; padding-bottom: 3px; }

/* Login */
.mod-login .form-control,
.mod-login .input-group-text,
.mod-login .input-password-toggle { background: #efefef; border-color: #ddd; font-size: 12px; }
.mod-login .btn-primary {
  background: linear-gradient(#c0392b, #a52a2a 60%, #8e2222);
  border: 1px solid #7a1f1f;
  border-radius: 3px;
  color: #fff;
  width: auto;
  padding: 4px 14px;
}
.mod-login .btn-primary:hover { background: #8e2222; }
.mod-login .mod-login__options a { color: var(--sor-link); }

/* ---------- Inhalt ---------- */
.container-component {
  background: #f9f9f9;
  border: 1px solid #e9e9e9;
  box-shadow: 0 0 0 3px #fff, 0 9px 6px -6px rgba(0, 0, 0, .45);
  margin: 3px 3px 22px;
  padding: 20px 28px 28px;
}
/* Cassiopeia setzt width:100 % -> Box ragte mit margin 6px über das Raster hinaus */
.site-grid > .container-component { width: auto; }
.container-component > main {
  background: #fff;
  border: 1px solid #e9e9e9;
  min-height: 300px;
  padding: 16px 17px;
}
.container-component img { height: auto; max-width: 100%; }
.container-component video, .container-component iframe { max-width: 100%; }
@media (width < 768px) {
  .container-component { padding: 8px; margin: 0 0 15px; }
  .container-component > main { padding: 10px; min-height: 0; }
  .container-component video { height: auto; width: 100% !important; }
  .container-component table { display: block; overflow-x: auto; }
}

/* ---------- Fuss ---------- */
.container-footer {
  background: none;
  color: #555;
  margin-top: 0;
}
.container-footer .grid-child {
  background: linear-gradient(#6c9ee2, var(--sor-footer-blue));
  border: 1px solid #2c5c9c;
  display: block;
  max-width: 1212px;
  margin: 0 auto 10px;
  padding: 0 0 26px;
  position: relative;
}
.container-footer .grid-child::before,
.container-footer .grid-child::after {
  border-bottom: 10px solid #111;
  content: "";
  position: absolute;
  top: -10px;
}
.container-footer .grid-child::before { border-left: 16px solid transparent; left: -1px; }
.container-footer .grid-child::after { border-right: 16px solid transparent; right: -1px; }
.container-footer .soristo-copy {
  background: var(--sor-footer-bar);
  color: #777;
  font-size: 11px;
  font-weight: bold;
  margin: 0 15px 12px;
  padding: 5px;
  text-align: center;
  text-shadow: 0 1px 0 #000;
}
.container-footer p { margin: 0; }
.container-footer a { color: #555; font-weight: bold; text-shadow: 0 1px 0 #9fbde6; }
.container-footer a:hover { color: #222; }
@media (width < 768px) {
  .container-footer .grid-child::before, .container-footer .grid-child::after { display: none; }
}

/* Nach-oben-Link (Cassiopeia „backTop“) im alten Stil */
.back-to-top-link { background: var(--sor-footer-bar); }

/* ---------- Phoca Gallery ---------- */
.container-component .pg-category-items-box {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.container-component .pg-item-box { padding: 0; width: auto; }
.container-component .pg-item-box-image,
.container-component .pg-item-box-image a { display: block; width: 100%; }
.container-component .pg-item-box-image img { display: block; height: auto; max-width: 100%; width: 100%; }
@media (width < 768px) {
  .container-component .pg-category-items-box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .container-component .pg-item-box-info { font-size: 11px; }
}

/* ---------- Feinschliff nach Screenshot-Vergleich ---------- */
/* Kästen nicht auf gleiche Höhe strecken (wie im Original) */
.site-grid > .container-component,
.site-grid > .container-sidebar-left { align-self: start; }

/* Cassiopeia unterstreicht Links ohne Klasse – im Original nicht */
.site a:not([class]), .site .mod-menu a, .container-footer a { text-decoration: none; }
.site a:not([class]):hover, .site a:not([class]):focus { text-decoration: underline; }

/* Login-Button klein wie früher */
.mod-login .mod-login__submit .btn { font-size: 13px; width: auto; }

/* Mobil: Seitenname links, Menü-Knopf rechts in derselben Zeile, aufgeklapptes Menü volle Breite */
@media (width < 768px) {
  .container-header > .grid-child { position: relative; }
  .container-header .navbar-brand { margin: 0; padding: .35rem 4rem .35rem 0; }
  .container-header .container-nav { width: 100%; }
  .container-header .navbar-toggler { position: absolute; right: 1rem; top: .45rem; }
  .container-header .navbar-collapse { padding-bottom: .5rem; }
}

/* Aktiver Menüpunkt: fett statt unterstrichen; Menü-Knopf relativ zum Kopf */
.site .mod-list li.active > a, .site .mod-menu li.current > a { text-decoration: none; }
.container-header { position: relative; }
.container-header > .grid-child { position: static; }

/* Mobilmenü: Knopf an der Kopfzeile ausrichten, Unterpunkte der aktuellen Seite zeigen */
.container-header .navbar { position: static; }
.container-header .mod-menu .parent.active > ul { display: block; margin: 0 0 .3rem; padding-left: 1rem; }
.container-header .mod-menu .parent.active > ul li { border-bottom: 1px dotted #777; padding: 2px 0; }
.container-header .mod-menu .parent.active > ul a { font-size: 13px; }
.container-header .mod-menu .current > a { font-weight: bold; }

/* ---------- Beitrags-Icons Drucken / E-Mail (Layout soristo.icons) ---------- */
.item-page { position: relative; }
.soristo-icons {
  display: flex;
  float: right;
  font-size: 11px;
  list-style: none;
  margin: 0 0 6px 12px;
  padding: 0;
}
.soristo-icons li + li { border-left: 1px solid #a52a2a; margin-left: 6px; padding-left: 6px; }
.soristo-icons a { color: var(--sor-link); white-space: nowrap; }
.soristo-icons [class^="icon-"] { color: #666; margin-right: 2px; }

/* ---------- Druckansicht: nur der Inhalt ---------- */
@media print {
  body.site { background: #fff; font-size: 11pt; }
  .container-header, .container-top-a, .container-sidebar-left, .container-footer,
  .back-to-top-link, .soristo-icons { display: none !important; }
  .site-grid { border: 0; display: block; margin: 0; max-width: none; padding: 0; }
  .container-component, .container-component > main { border: 0; box-shadow: none; margin: 0; padding: 0; }
  a { color: #000; text-decoration: none; }
}

/* ---------- Kontaktblock mit Icons (Startseite, Beitrag 9: <ul class="soristo-kontakt">) ---------- */
.soristo-kontakt {
  display: inline-block;
  list-style: none;
  margin: .75rem 0 1.25rem;
  padding: 0;
}
.soristo-kontakt li {
  line-height: 1.5;
  padding: .3rem 0 .3rem 2rem;
  position: relative;
}
.soristo-kontakt li + li { border-top: 1px dotted #d6d6d6; }
.soristo-kontakt li::before {
  color: var(--sor-link);
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  left: 0;
  position: absolute;
  text-align: center;
  top: .3rem;
  width: 1.25rem;
}
.soristo-kontakt__adresse::before { content: "\f3c5" !important; }  /* Standort */
.soristo-kontakt__tel::before     { content: "\f095" !important; }  /* Telefon */
.soristo-kontakt__mail::before    { content: "\f0e0" !important; }  /* E-Mail */
.soristo-kontakt__anfahrt::before { content: "\f5a0" !important; }  /* Karte/Anfahrt */
.soristo-kontakt a { color: var(--sor-link); text-decoration: none; }
.soristo-kontakt a:hover, .soristo-kontakt a:focus { color: var(--sor-link-hover); text-decoration: underline; }
@media (width < 768px) {
  .soristo-kontakt { display: block; }
}