/* =============================
   Grundlayout & Variablen
   ============================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
               Noto Sans, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  color: #0f1220;
  background: #ffffff;
}

:root{
  --brand: #cc0000;         /* Akzent Rot */
  --ink:   #0f1220;         /* Text dunkel / im Darkmode hell gesetzt */
  --muted: #5b6472;         /* Sekundärtext */
  --bg:    #ffffff;         /* Seitenhintergrund */
  --card:  #f6f7f9;         /* Kartenhintergrund */
  --border:#e1e4ea;         /* Linien/Felder */
  --container: 1200px;      /* max Seitenbreite */
}

@media (prefers-color-scheme: dark){:root:not([data-theme]){
    --ink:#e9ecf1; --muted:#a9b0bd; --bg:#0d1117;
    --card:#161b22; --border:#2a2f37;
  }html:not([data-theme]) body{ background:var(--bg); color:var(--ink); }

}
html[data-theme="dark"]{
    --ink:#e9ecf1; --muted:#a9b0bd; --bg:#0d1117;
    --card:#161b22; --border:#2a2f37;
  }html[data-theme="dark"] body{ background:var(--bg); color:var(--ink); }


/* Hilfen */
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ width:min(100% - 2rem, var(--container)); margin-inline:auto; }

/* =============================
   Header (Banner scrollt mit)
   ============================= */
.site-header{
  position: relative;  /* nicht sticky → Banner verschwindet beim Scrollen */
  top: auto;
  z-index: auto;
  border-bottom: none;
}

.header-banner{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000; /* Fallback */
}

.header-img{
  display:block;
  width:100%;
  height: clamp(160px, 20vw, 260px); /* responsive Höhe */
  object-fit: cover;
  object-position: center 40%;
}

/* Titel/Untertitel im Banner – oben links */
.banner-text{
  position:absolute;
  top: 1rem;
  left: 1.5rem;
  color:#fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,.6);
  pointer-events:none; /* Klicks gehen „durch“ */
}
.site-title{
  margin:0;
  line-height:1.2;
  font-weight:700;
  font-size: clamp(1.2rem, 2.5vw + 0.8rem, 2.4rem);
  color: var(--brand);
}
.site-sub{
  font-size:1rem;
  color:#e9e9e9;
}

/* feiner Abschluss unter dem Banner */
.header-banner::after{
  content:"";
  display:block;
  height:1px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%);
}

/* =============================
   Navigation (sticky)
   ============================= */
.site-nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.site-nav .container{
  display:flex;
  align-items:center;
  gap:1rem;
  padding: .4rem 0;
  position: relative;
}

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background: transparent;
  padding:.5rem .75rem;
  border-radius:.5rem;
  color:inherit;
  cursor: pointer;
}

.menu{
  display:flex;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap: wrap;
}
.menu-item a{
  display:block;
  padding:.6rem .8rem;
  border-radius:.6rem;
}
.menu-item.active a,
.menu-item a:hover{
  background: var(--bg);
  text-decoration:none;
}

@media (max-width: 800px){
  .nav-toggle{ display:inline-block; }
  .menu{
    display:none;
    position:absolute;
    left:0; right:0; top: calc(100% + .25rem);
    background: var(--card);
    border:1px solid var(--border);
    border-radius:.6rem;
    padding:.5rem;
  }
  .menu.open{ display:grid; grid-template-columns:1fr; }
}

/* =============================
   Mobile-Menü – Darkmode Lesbarkeit
   ============================= */
@media (prefers-color-scheme: dark){html:not([data-theme]) .site-nav .menu{ background: var(--card); }html:not([data-theme]) .site-nav .menu a{ color: var(--brand); }html:not([data-theme]) /* Links rot */
  .site-nav .menu a:hover{
    background: var(--bg);
    color: var(--ink);                                  /* Hover hell */
  }html:not([data-theme]) .nav-toggle{
    color: var(--brand);                                 /* Button rot */
    border-color: var(--border);
  }

}
html[data-theme="dark"] .site-nav .menu{ background: var(--card); }html[data-theme="dark"] .site-nav .menu a{ color: var(--brand); }html[data-theme="dark"] /* Links rot */
  .site-nav .menu a:hover{
    background: var(--bg);
    color: var(--ink);                                  /* Hover hell */
  }html[data-theme="dark"] .nav-toggle{
    color: var(--brand);                                 /* Button rot */
    border-color: var(--border);
  }


/* =============================
   Seitenlayout (Content + Sidebar)
   ============================= */
main.container{
  display:grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 2rem;
  padding: 1.5rem 0;
}
@media (max-width: 900px){
  main.container{ grid-template-columns: 1fr; }
}

.content{ min-width:0; }
.sidebar{ display:grid; gap:1rem; }

/* =============================
   Cards, Listen, Helfer
   ============================= */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: 1rem;
}
.fm-parameters, .meshcore-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  table-layout: fixed;
}
.fm-parameters caption, .meshcore-table caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: .75rem;
}
.fm-parameters th, .fm-parameters td, .meshcore-table th, .meshcore-table td {
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.fm-parameters th { width: 45%; }
.fm-parameters tr:nth-child(odd), .meshcore-table tr:nth-child(odd) { background: var(--card); }
.meshcore-table-wrap { margin: 1.5rem 0; overflow-x: auto; }
.meshcore-table-wrap .meshcore-table { margin: 0; }
.meshcore-content { overflow-wrap: anywhere; }
.meshcore-content > figure:not(.meshcore-table-wrap) { margin: 1.5rem 0; }
.meshcore-content > figure img { display: block; max-width: 100%; height: auto; border-radius: .6rem; }
.meshcore-content figcaption { margin-top: .5rem; color: var(--muted); font-size: .9rem; }
.list-plain{ list-style:none; padding:0; margin:0; }
.news{ list-style:none; padding:0; margin:0; display:grid; gap:.3rem; }
.news li{ border-left:3px solid var(--border); padding-left:.6rem; }

.db0kli-intro { display: flow-root; }
.db0kli-photo { float: right; width: 169px; max-width: 40%; margin: 0 0 1rem 1.25rem; }
.db0kli-photo img { border-radius: .6rem; }
.db0kli-photo figcaption { margin-top: .4rem; text-align: center; color: var(--muted); font-size: .9rem; }
@media (max-width: 480px) {
  .db0kli-photo { float: none; max-width: 100%; margin: 0 auto 1rem; }
}

.float-right{
  float:right;
  margin:0 0 1rem 1rem;
  width: min(35%, 320px);
  border-radius: .6rem;
}
@media (max-width: 900px){
  .float-right{ float:none; width:100%; margin:0 0 1rem 0; }
}

/* Bilder in Sidebar sicher darstellen */
.sidebar img{ display:block !important; height:auto; max-width:100%; }
.sidebar .sidebar-logo { width: 160px; margin-inline: auto; }

/* =============================
   Footer
   ============================= */
.site-footer{
  border-top:1px solid var(--border);
  padding:1rem 0;
  margin-top:1rem;
  color: var(--muted);
}

/* =============================
   Druck
   ============================= */
@media print{
  .site-nav, .sidebar, .nav-toggle{ display:none !important; }
  .header-banner{ height:auto; }
  main.container{ display:block; }
}

/* ===== Sub-Navigation (unter dem Hauptmenü) ===== */
.sub-nav{
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.sub-nav .container{
  padding: .35rem 0;
}
.sub-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.sub-item a{
  display: block;
  padding: .45rem .7rem;
  border-radius: .5rem;
  color: var(--muted);
}
.sub-item.active a,
.sub-item a:hover{
  color: var(--brand);
  background: var(--card);
  text-decoration: none;
}

/* Dark-Mode Feinheiten */
@media (prefers-color-scheme: dark){html:not([data-theme]) .sub-nav{ background: var(--card); }html:not([data-theme]) .sub-item a{ color: var(--ink); }html:not([data-theme]) .sub-item.active a, html:not([data-theme]) .sub-item a:hover{
    background: var(--bg);
    color: var(--brand);
  }

}
html[data-theme="dark"] .sub-nav{ background: var(--card); }html[data-theme="dark"] .sub-item a{ color: var(--ink); }html[data-theme="dark"] .sub-item.active a, html[data-theme="dark"] .sub-item a:hover{
    background: var(--bg);
    color: var(--brand);
  }


/* Mobile: Submenü umbrechen */
@media (max-width: 800px){
  .sub-menu{ gap: .4rem; }
  .sub-item a{ padding: .4rem .6rem; }
}

/* Button immer oberhalb des ausgeklappten mobilen Menüs */
.site-nav .container { position: relative; }
.nav-toggle { position: relative; z-index: 2; }

/* Footer zweispaltig */
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-left {
  color: var(--muted);
}

.footer-right a {
  color: var(--brand);
  text-decoration: none;
}
.footer-right a:hover {
  text-decoration: underline;
}

/* Sidebar-Kästchen direkt untereinander, ohne Stretch */
main.container{
  align-items: start;                  /* Content & Sidebar starten oben */
}

.sidebar{
  display: grid;
  gap: 1rem;
  align-content: start;                /* Sidebar selbst nicht strecken */
  align-items: start;                  /* Kinder (Karten) nicht strecken */
  grid-auto-rows: max-content;         /* Reihen so hoch wie Inhalt */
}

/* Sicherheitsnetz: Karten nie auf volle Höhe strecken */
.card{
  height: auto;                        /* falls irgendwo 100% gesetzt war */
}


/* ===== Galerie ===== */
.sonde-gallery, .meshcore-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1.5rem;
  margin: 1rem 0;
}
.sonde-gallery figure, .meshcore-gallery figure { margin: 0; min-width: 0; }
.sonde-gallery a, .meshcore-gallery a { display: block; }
.sonde-gallery img, .meshcore-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--card);
  border-radius: .6rem;
}
.sonde-gallery figcaption {
  margin-top: .5rem;
  color: var(--muted);
  font-size: .9rem;
}
.meshcore-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.meshcore-gallery img { aspect-ratio: 3 / 4; }
.meshcore-content a:has(> img) { cursor: zoom-in; }
@media (min-width: 1100px) {
  .meshcore-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .meshcore-gallery { grid-template-columns: 1fr; }
}
.image-lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  color: #fff;
}
.image-lightbox:not([open]) { display: none; }
.image-lightbox figure { margin: 0; text-align: center; max-width: 90vw; }
.image-lightbox .lb-img { display: block; margin: auto; max-height: 74vh; max-width: 86vw; }
.image-lightbox figcaption { margin: .75rem auto 0; max-width: 70ch; }
.image-lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.gallery-grid{
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(160px, 1fr) );
  gap: .75rem;
}
.gallery-item{
  display:block;
  border-radius:.6rem;
  overflow:hidden;
  background: var(--card);
  border: 1px solid var(--border);
}
.gallery-item img{
  display:block;
  width:100%;
  height: 160px;
  object-fit: cover;
  transition: transform .2s ease;
}
.gallery-item:hover img{
  transform: scale(1.03);
}

/* Lightbox */
.lightbox[hidden]{ display:none !important; }
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  display: grid;
  place-items: center;
  z-index: 2000;
  padding: 1rem;
}
.lb-img{
  max-width: min(92vw, 1200px);
  max-height: 82vh;
  border-radius: .6rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.lb-close, .lb-prev, .lb-next{
  position: absolute;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--brand);
  padding: .4rem .7rem;
  border-radius: .6rem;
  cursor: pointer;
  user-select: none;
}
.lb-close{ top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (prefers-color-scheme: dark){html:not([data-theme]) .lb-close, html:not([data-theme]) .lb-prev, html:not([data-theme]) .lb-next{
    background: var(--card);
    color: var(--brand);
    border-color: var(--border);
  }

}
html[data-theme="dark"] .lb-close, html[data-theme="dark"] .lb-prev, html[data-theme="dark"] .lb-next{
    background: var(--card);
    color: var(--brand);
    border-color: var(--border);
  }

/* ===== Galerie-Tabs (Kategorien) ===== */
.tabs{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 1rem;
}
.tab{
  display:inline-block;
  padding:.45rem .7rem;
  border:1px solid var(--border);
  border-radius:.6rem;
  background: var(--card);
  color: var(--muted);
  text-decoration:none;
}
.tab:hover{ background: var(--bg); color: var(--brand); }
.tab.active{
  color: var(--brand);
  background: var(--bg);
  border-color: var(--border);
}

/* (falls noch nicht vorhanden) Galerie-Grid & Lightbox kurz recap */
.gallery-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:.75rem; }
.gallery-item{ display:block; border-radius:.6rem; overflow:hidden; background:var(--card); border:1px solid var(--border); }
.gallery-item img{ width:100%; height:160px; object-fit:cover; transition:transform .2s ease; }
.gallery-item:hover img{ transform:scale(1.03); }
.lightbox[hidden]{ display:none !important; }
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.8); display:grid; place-items:center; z-index:2000; padding:1rem; }
.lb-img{ max-width:min(92vw,1200px); max-height:82vh; border-radius:.6rem; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.lb-close,.lb-prev,.lb-next{
  position:absolute; border:1px solid var(--border); background:var(--card); color:var(--brand);
  padding:.4rem .7rem; border-radius:.6rem; cursor:pointer; user-select:none;
}
.lb-close{ top:1rem; right:1rem; }
.lb-prev{ left:1rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1rem; top:50%; transform:translateY(-50%); }
@media (prefers-color-scheme: dark){html:not([data-theme]) .lb-close, html:not([data-theme]) .lb-prev, html:not([data-theme]) .lb-next{ background:var(--card); color:var(--brand); border-color:var(--border); }

}
html[data-theme="dark"] .lb-close, html[data-theme="dark"] .lb-prev, html[data-theme="dark"] .lb-next{ background:var(--card); color:var(--brand); border-color:var(--border); }



/* clearfix für Karten: verhindert Überschneidungen mit float-right */
.card::after { content: ""; display: block; clear: both; }

:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}
.theme-toggle {
  margin-left: auto;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.theme-toggle svg { display: block; }
.theme-toggle:hover { background: var(--card); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }