/* ======================================================
   GLOBAL RESET
====================================================== */

*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
    width:100%;
    overflow-x:hidden;
}

/* ======================================================
   TYPOGRAPHY + FONT SWITCH
====================================================== */

body{
    font-family:"Instrument Serif", serif;
    font-size:18px;
    line-height:1.65;
    background:#f8f8f8;
    color:#222;
}

body.open-sans{
    font-family:"Open Sans", sans-serif;
    font-weight:300;
    font-size:16px;
}

/* ======================================================
   DARK MODE GLOBAL
====================================================== */

body.dark-mode{
    background:#121212;
    color:#e0e0e0;
}

body.dark-mode a{ color:#e0e0e0; }

body.dark-mode .box{
    background:#1e1e1e;
    border-color:#333;
}

body.dark-mode .link-box:hover{
    box-shadow:0 10px 25px rgba(0,0,0,0.6);
}
/* ======================================================
   NAVBAR
====================================================== */

.navbar{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:35px;
    padding:12px 30px;
    background:#f6f6f6;
    border-bottom:1px solid #dee2e6;
    box-shadow:0 1px 6px rgba(0,0,0,0.08);
}

.navbar a{
    text-decoration:none;
}

.navbar a:hover{ text-decoration:underline; }

.navbar button{
    padding:6px 10px;
    border-radius:6px;
    border:1px solid #ccc;
    background:white;
    cursor:pointer;
}

body.dark-mode .navbar{
    background:#1e1e1e;
    border-color:#333;
}

body.dark-mode .navbar button{
    background:#1e1e1e;
    border:1px solid #333;
    color:#eee;
}

/* ======================================================
   HEADINGS
====================================================== */

h1{
    text-align:center;
    margin:40px auto 10px;
    font-size:1.8rem;
    max-width:900px;
}

h2{
    text-align:center;
}

/* ======================================================
   STARTSEITE BOXEN
====================================================== */

.container{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:30px;
    padding:30px 20px;
    max-width:1200px;
    margin:auto;
}

.box{
    flex:1 1 300px;
    max-width:420px;
    padding:25px;
    background:#fefefe;
    border:1px solid #eee;
    border-radius:12px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.link-box{
    text-decoration:none;
    color:inherit;
    transition:0.25s;
}

.link-box:hover{
    transform:scale(1.05);
    box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.red-text{ color:#c40000; }

/* ======================================================
   STARTSEITE TEXTBLOCKE
====================================================== */

.content p{
    max-width:1100px;
    margin:18px auto;
    padding:14px 18px;
    background:#f6f6f6;
    border:1px solid #dee2e6;
    border-radius:22px;
}

body.dark-mode .content p{
    background:#1e1e1e;
    border-color:#333;
}

/* ======================================================
   WIKI / VERFASSUNG SEITEN
====================================================== */

.text{
    max-width:950px;
    margin:auto;
    padding:40px 5vw;
}

.text h1{
    margin-top:0;
}

.text h3{
    text-align:center;
    margin:40px 0 10px;
    font-size:1.4rem;
}

.text p{
    text-align:left;
    margin:10px 0;
}

/* ======================================================
   INHALTSVERZEICHNIS (TOC)
====================================================== */

.toc{
    position:sticky;
    top:90px;
    max-width:900px;
    margin:40px auto;
    padding:20px 30px;
    background:#f3f3f3;
    border:1px solid #ddd;
    border-radius:12px;
}

.toc ul{ list-style:none; padding-left:0; }

.toc a{ text-decoration:none; color:#111; }

.toc li.chapter > a{ font-weight:bold; }

.toc .h3{ margin-left:18px; font-size:0.95rem; }

body.dark-mode .toc{
    background:#1e1e1e;
    border-color:#333;
}

/* ======================================================
   DIAGRAMM BLOCK
====================================================== */

.diagram-section{
    width:min(900px,92vw);
    margin:40px auto;
    padding:10px;
    background:#f6f6f6;
    border:1px solid #dee2e6;
    border-radius:25px;
    text-align:center;
}

.diagram-section img{
    display:block;
    width:100%;
    max-width:650px;
    margin:auto;
    border-radius:18px;
    border:1px solid #dee2e6;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.diagram-caption{
    margin-top:6px;
    font-size:0.9rem;
    opacity:0.8;
}

body.dark-mode .diagram-section{
    background:#1e1e1e;
    border-color:#333;
}

body.dark-mode .diagram-section img{
    border-color:#333;
}

/* ======================================================
   FOOTER
====================================================== */

.footer{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:25px;
    padding:18px;
    margin-top:60px;
    background:#f6f6f6;
    border-top:1px solid #dee2e6;
    font-size:0.9rem;
}

.footer a:hover{ text-decoration:underline; }

body.dark-mode .footer{
    background:#1e1e1e;
    border-color:#333;
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:800px){

    .navbar{
        justify-content:center;
        gap:15px;
        padding:10px;
    }

    h1{ font-size:1.5rem; }

    .container{ flex-direction:column; align-items:center; }

    .box{ width:95%; }
}