/* generated-by: version_handling.pl v24.0 */
/* file: site.css */
/* build: 2026-03-06 */
/* version: 1.0 */
/* site.css */

/* ====== Design-Parameter aus Entwurf ====== */
:root{
  --blue: #002dd0;   /* RGB 0/45/208 */
  --black: #1a1a1a;  /* RGB 26/26/26 */
  --cream: #feecdb;  /* RGB 254/236/219 */

  --wrap: 1100px;
  --gap: 28px;

  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --mainnav-shift-x: 35px;  /* hier nach Geschmack: z.B. 12px oder -8px */
}

/* ====== Self-hosted Fonts (deine erzeugten Dateien) ====== */
@font-face{
  font-family:"Source Sans 3";
  src:url("/assets/fonts/SourceSans3-400.de.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("/assets/fonts/SourceSans3-600.de.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("/assets/fonts/SourceSans3-700.de.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Source Code Pro";
  src:url("/assets/fonts/SourceCodePro-400.de.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Source Code Pro";
  src:url("/assets/fonts/SourceCodePro-600.de.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Source Code Pro";
  src:url("/assets/fonts/SourceCodePro-700.de.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ====== Base ====== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--black);
  font-family:var(--font-body);
  line-height:1.55;
  text-align:left; /* kein Blocksatz */
}

img{ max-width:100%; height:auto; display:block; }

a{
  color:var(--blue);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 18px;
}

/* ====== Header + Main Menu ====== */
.site-header{
  padding:18px 0 10px;
}

.header-inner{
  display:flex;
  align-items:flex-end;
  gap:18px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--black);
  text-decoration:none;
}
.logo img{
  width:170px; /* ggf. anpassen */
  height:auto;
}
.logo-text{
  font-family:var(--font-head);
  font-weight:700;
  font-size:18px;
}

.main-nav{
  flex:1;
}
.main-nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  /* justify-content:flex-end; */
  justify-content:center;
  transform: translateX(var(--mainnav-shift-x));

  gap:14px;
}
.main-nav-link{
  display:inline-block;
  padding:6px 0;
  color:var(--black);
  border-bottom:2px solid transparent;
  font-weight:600;
}
.main-nav-link.is-active{
  color:var(--blue);
  border-bottom-color:var(--blue);
}


/* statt gap:14px; lieber ohne gap arbeiten */
.main-nav-list{
  gap: 0; /* überschreibt dein gap:14px */
}

/* Abstand um die Links */
.main-nav-item{
  position: relative;
}
.main-nav-link{
  padding: 6px 10px; /* horizontaler Abstand */
}

/* Pipe zwischen Items, aber nicht vor dem ersten */
.main-nav-item + .main-nav-item::before{
  content: "|";
  color: var(--black);
  opacity: .6;
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-60%);
  pointer-events: none;
}

@media (max-width: 900px){
  .main-nav-item + .main-nav-item::before{ content: ""; }
}

/* ====== Layout: Side Menu + Content ====== */
.site-main{
  padding:22px 0 28px;
}

.layout{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:var(--gap);
}

.side-nav{
  align-self:start;
}
.side-nav-list{
  list-style:none;
  margin:0;
  padding:0;
  min-height:420px; /* damit „Impressum“ zuverlässig nach unten kann */
  display:flex;
  flex-direction:column;
  gap:8px;
}
.side-nav-link{
  display:block;
  padding:6px 0;
  color:var(--black);
  font-weight:600;
}
.side-nav-link.is-active{
  color:var(--blue);
}

.side-nav-item--imprint{
  margin-top:auto; /* schiebt Impressum nach unten */
  padding-top:12px;
}

/* ====== Content ====== */
.content h1, .content h2, .content h3{
  font-family:var(--font-head);
  font-weight:700;
  margin:0 0 12px;
}
.content h1{
  font-size:26px;
  line-height:1.15;
}

.content h2{
  font-size:18px;
  font-weight: 600;
  line-height:1.15;
}

.content p{
  margin:0 0 12px;
}

div.text-single ~ header.content-header {
  margin-top: 35px;
}

.text-columns{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
}

/* ====== Footer ====== */
.site-footer{
  padding:22px 0 32px;
}
.footer-inner{
  display:flex;
  gap:18px;
  justify-content:space-between;
  font-size:14px;
}
.footer-left, .footer-right{
  max-width:520px;
}

/* Spacer-Variante: reserviert Platz links, wenn kein Submenü existiert */
.side-nav--spacer{
  visibility:hidden;
}

/* ====== Responsive ====== */
@media (max-width: 900px){
  .layout{
    grid-template-columns: 1fr;
  }
  .main-nav-list{
    justify-content:flex-start;
  }
  .side-nav-list{
    min-height:auto;
    flex-direction:row;
    flex-wrap:wrap;
    gap:14px;
  }
  .side-nav-item--imprint{
    margin-top:0;
  }
  .text-columns{
    grid-template-columns:1fr;
  }
}

/* Fix für Fancybox 1.3.1 + globale box-sizing Regeln */
#fancybox-wrap,
#fancybox-outer,
#fancybox-content,
#fancybox-inner,
#fancybox-frame,
#fancybox-img,
#fancybox-bg-n,
#fancybox-bg-ne,
#fancybox-bg-e,
#fancybox-bg-se,
#fancybox-bg-s,
#fancybox-bg-sw,
#fancybox-bg-w,
#fancybox-bg-nw {
  box-sizing: content-box;
}

/* Bild-Modus: Text links, Bilder rechts */
.portal-block.layout-img-right{
  display:grid;
  grid-template-columns: 1fr 320px; /* rechte Spaltenbreite */
  gap: 22px;
  align-items:start;
}

/* Im Bild-Modus: Text bleibt 1-spaltig */
.portal-block.layout-img-right .text{
  column-count: 1 !important;
}

/* Text-Modus: zweispaltiger Text (nur wenn KEIN Bild) */
.portal-block.layout-text-cols .text{
  column-count: 2;
  column-gap: 22px;
}

/* Optional: verhindert unschöne Spaltenumbrüche */
.portal-block.layout-text-cols .text > *{
  break-inside: avoid;
}

/* Responsive */
@media (max-width: 900px){
  .portal-block.layout-img-right{
    grid-template-columns: 1fr;
  }
  .portal-block.layout-text-cols .text{
    column-count: 1;
  }
}