/* styleneu.css — modernisiertes Stylesheet
   - Farben und Logo wie im alten Layout beibehalten
   - Responsive Sidebar -> mobile Topbar
   - Modernere Typographie und Abstände
 */

:root{
  --brand: #02266F; /* originale Blau-Nuance */
  --accent: #FFA517; /* warmes Gelb/Orange */
  --text: #5a5a5a;
  --muted: #777;
  --bg: #FFFFFF;
  --max-width: 980px;
}

/* Box sizing and sensible defaults */
*, *::before, *::after{box-sizing: border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-weight:400;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Headings */
h1,h2,h3{color:var(--brand);margin:0 0 .5rem}
h1{font-size:clamp(1.5rem, 2.6vw, 2.2rem);line-height:1.15}
h3{font-size:1.05rem}

.purple{color:var(--brand)}
.yellow{color:var(--accent)}

a{color:var(--brand)}
a:hover{text-decoration:underline}

/* Layout: responsive sidebar */
.left-sidebar{
  background:var(--brand);
  color:#fff;
  position:fixed;
  left:0;top:0;bottom:0;
  width:260px;
  padding:2.5rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

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

.left-nav{flex:1;overflow:auto}
.left-nav ul{list-style:none;padding:0;margin:0;}
.left-nav li{margin:0}
.left-nav a{display:block;padding:.6rem .9rem;border-radius:6px;color:#fff;transition:background .18s, color .18s}
.left-nav a:hover, .left-nav a:focus{background:#fff;color:var(--brand);text-decoration:none}
.left-nav .current a{background:#fff;color:var(--brand)}

/* Main wrapper to the right of the sidebar */
#main-wrapper{margin-left:260px;padding:2.5rem 2rem;min-height:100vh}
.main-content{max-width:var(--max-width);margin:0 auto}

.features{background:transparent;padding:0;margin-top:1.4rem;line-height:1.6;text-align:justify}
.welcome{margin-bottom:1.6rem}

/* Footer */
.footer-bottom{margin-top:2.5rem;padding-top:1rem;border-top:1px solid #eee;color:var(--muted)}

/* Utility classes kept small */
.center{text-align:center}
.title{margin:2.5rem 0 1rem}

/* Responsive adjustments */
@media (max-width: 900px){
  .left-sidebar{position:relative;width:100%;height:auto;padding:1rem;border-bottom:1px solid rgba(0,0,0,.06)}
  #main-wrapper{margin-left:0;padding:1rem}
  .left-nav ul{display:flex;gap:.35rem;overflow:auto}
  .left-nav a{white-space:nowrap;padding:.5rem .7rem}
  .logo{padding:0}
}

/* Hamburger button and mobile nav toggling */
.hamburger{
  display:none;
  background:transparent;
  border:0;
  color:#fff;
  cursor:pointer;
  padding:.25rem;
}
.hamburger:focus{outline:3px solid rgba(255,255,255,.12);outline-offset:4px}
.hamburger-box{display:inline-block;width:36px;height:18px;position:relative}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
  background:#fff;height:2px;width:100%;display:block;border-radius:2px;position:absolute;left:0;transition:transform .22s ease,opacity .2s ease}
.hamburger-inner{top:50%;transform:translateY(-50%)}
.hamburger-inner::before{content:"";top:-8px}
.hamburger-inner::after{content:"";top:8px}

@media (max-width:900px){
  .hamburger{display:block}
  /* hide the stacked nav by default on small screens; show via .open */
  .left-nav{display:none}
  .left-nav.open{display:block}
  .left-nav ul{display:block}
  .left-nav a{display:block;padding:.7rem 1rem}
}

/* Reduce very large widths on small screens */
@media (max-width:480px){
  h1{font-size:1.3rem}
  .features{font-size:.98rem}
}

/* Small visual polish */
section{padding:0;margin:0 0 1.5rem}
p{color:var(--text);margin:0 0 .8rem}

/* Preserve code block look for syntax highlighter */
.syntaxhighlighter{border-radius:6px;padding:1rem;background:#fafafa;border:1px solid #eee}

/* Accessibility: focus outline for keyboard users */
a:focus{outline:3px solid rgba(2,38,111,.12);outline-offset:2px}

/* Keep legacy helper classes used in markup */
.features > ul{padding-left:1.2rem}
.center{text-align:center}

/* end styleneu */