/* ===== KANZLEI JÜSTEL – komplette custom.css (ohne SlimMenu) ===== */

/* --- Basis --- */
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;
  background:#fff;
  color:#333;
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
a{color:#0b63bd;text-decoration:none}
a:hover,a:focus{text-decoration:underline}

h1{font-size:28px;line-height:1.25;margin:0 0 12px;color:#ff6600;letter-spacing:.2px}
h2{font-size:22px;line-height:1.35;margin:18px 0 10px;color:#333}
h3{font-size:18px;margin:14px 0 8px;color:#333}
p{margin:0 0 12px}
ul,ol{margin:0 0 14px 1.2em;padding:0}
li{margin:4px 0}
small{font-size:88%;color:#666}

/* --- Bilder & Tabellen --- */
img{max-width:100%;height:auto;display:block;border-radius:8px}
table{width:100%;border-collapse:collapse;margin:8px 0 16px}
td,th{vertical-align:top;padding:12px;border:1px solid #eee}
thead th{background:#f6f6f6}

/* --- Content-Breite --- */
#tplge_contentin{max-width:1000px;margin:40px auto;padding:0 20px}

/* --- Kartenbox --- */
.box{background:#fff;border:1px solid #eee;border-radius:6px;padding:16px}
.box+.box{margin-top:12px}

/* --- Footer --- */
.footer a{color:#666}
.footer a:hover{color:#333}

/* =====================================================
   NAVIGATION (ohne SlimMenu)
   - Handy: Liste untereinander, immer sichtbar
   - Desktop: nebeneinander via Flex
   CMSimple gibt z.B. <ul class="menulevel1"> … aus.
   Wir fassen alles generisch unter #mainnav zusammen.
   ===================================================== */
#mainnav{
  background:#fff;
  border-bottom:1px solid #ddd;
}
#mainnav ul{
  list-style:none;
  margin:0;
  padding:10px 16px;
}
#mainnav li{ margin:6px 0; }
#mainnav a{
  color:#333;
  text-decoration:none;
  font-weight:600;
  display:block;
  padding:8px 0;
}
#mainnav a:hover{ color:#ff6600; }

/* Submenüs leicht eingerückt */
#mainnav ul ul{ padding-left:16px; border-left:3px solid #eee; margin-left:6px; }

/* Desktop: Menüpunkte nebeneinander */
@media (min-width:861px){
  #mainnav ul{ display:flex; gap:40px; align-items:center; padding:12px 0; justify-content:center; }
  #mainnav li{ margin:0; }
  #mainnav a{ font-weight:500; padding:6px 0; }
  #mainnav ul ul{
    position:absolute;               /* optional: Dropdown bei Unterpunkten */
    background:#fff;
    border:1px solid #eee;
    padding:8px 12px;
    margin:0;
    display:none;
  }
  #mainnav li:hover > ul{ display:block; }
}

/* --- Mobile Feinschliff --- */
@media(max-width:768px){
  h1{font-size:22px}
  h2{font-size:18px}
  table, tr, td, th{display:block;width:100%}
  td, th{padding-left:0;padding-right:0;border-left:0;border-right:0}
}