/*
 * mobile.css – Responsive Styles für das RWTH WordPress Theme
 * Breakpoints:
 *   Mobile:  < 768px
 *   Tablet:  768px – 1024px
 *   Desktop: > 1024px (Basis-Layout bleibt unverändert)
 */

/* ============================================================
   TABLET (768px – 1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {

    #page {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #header {
        width: 100%;
        box-sizing: border-box;
    }

    #navigation.hauptnavigation ul li a {
        padding: 6px 10px;
        font-size: 0.9em;
    }

    #wrapper {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
    }

    #content {
        width: 65%;
        float: left;
        box-sizing: border-box;
    }

    #sidebar {
        width: 32%;
        float: right;
        box-sizing: border-box;
    }

    #headerimage,
    #headerimage img#titlepic {
        width: 100%;
        height: auto;
    }

    #footer {
        width: 100%;
        box-sizing: border-box;
        clear: both;
    }
}


/* ============================================================
   MOBILE (< 768px)
   ============================================================ */
@media screen and (max-width: 767px) {

    * {
        box-sizing: border-box;
    }

    body {
        font-size: 16px;
        overflow-x: hidden;
    }

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

    #page {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #topbar,
    #whitebar {
        width: 100%;
    }

    #header {
        width: 100%;
        position: relative;
        padding-bottom: 0;
    }

    /* Desktop-Navigation auf Mobile ausblenden */
    #navigation.hauptnavigation {
        display: none;
    }

    #moreblogs,
    #moreblogsmenu {
        display: none;
    }

    #header > #search {
        display: none;
    }

    #logo {
        position: static;
        float: none;
        text-align: right;
        padding: 8px 10px;
    }

    #logo img {
        max-height: 50px;
        width: auto;
    }

    /* Hamburger-Button */
    #mobileopennavi {
        display: block;
        width: 44px;
        height: 44px;
        background: url('images/menu.png') center center no-repeat;
        background-size: 30px 30px;
        cursor: pointer;
        position: absolute;
        top: 8px;
        left: 10px;
        z-index: 1000;
    }

    /* Banner */
    #headerimage {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    #headerimage img#titlepic {
        width: 100%;
        height: auto;
        display: block;
    }

    #title {
        position: absolute;
        bottom: 30px;
        left: 10px;
        right: 10px;
    }

    #titlename {
        font-size: 1.4em;
        word-break: break-word;
    }

    #yellowbar {
        width: 100%;
    }

    /* Mobile Navigation */
    #mobilenavigation {
        display: block;
        width: 100%;
        background: #f5f5f5;
        border-top: 2px solid #00519E;
        overflow: hidden;
    }

    .mobilenavitab {
        display: inline-block;
        width: 48%;
        padding: 12px 0;
        text-align: center;
        font-size: 0.95em;
        font-weight: bold;
        cursor: pointer;
        background: #ddd;
        color: #333;
        border-bottom: 3px solid transparent;
    }

    .mobilenavitabactive {
        background: #fff;
        border-bottom: 3px solid #00519E;
        color: #00519E;
    }

    .mobilenavicontent {
        display: none;
        padding: 10px;
    }

    .mobilenavicontentactive {
        display: block;
    }

    #mobilesearch {
        padding: 10px;
        background: #eee;
        border-bottom: 1px solid #ccc;
    }

    #mobilesearch input[type="text"],
    #mobilesearch input[type="search"] {
        width: 80%;
        padding: 8px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

    #mobilesearch input[type="submit"] {
        padding: 8px 12px;
        background: #00519E;
        color: #fff;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        font-size: 1em;
    }

    #mobilenavigation ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #mobilenavigation ul li {
        border-bottom: 1px solid #ddd;
    }

    #mobilenavigation ul li a {
        display: block;
        padding: 12px 15px;
        color: #333;
        text-decoration: none;
        font-size: 1em;
        min-height: 44px;
    }

    #mobilenavigation ul li a:hover,
    #mobilenavigation ul li a:active {
        background: #e8f0fa;
        color: #00519E;
    }

    .mobilelogin a {
        display: block;
        padding: 12px 15px;
        color: #666;
        font-size: 0.9em;
    }

    #mobilenavigation .close_menu {
        display: block;
        text-align: center;
        padding: 10px;
        background: #ddd;
        cursor: pointer;
        font-size: 0.85em;
        color: #555;
    }

    #mobilenavigation .close_menu::after {
        content: "✕ Menü schließen";
    }

    .invis {
        visibility: hidden;
        height: 0;
        overflow: hidden;
        font-size: 0;
    }

    /* Content & Sidebar untereinander */
    #wrapper {
        width: 100%;
        padding: 0 10px;
        clear: both;
    }

    #content {
        width: 100%;
        float: none;
        padding: 10px 0;
    }

    #sidebar {
        width: 100%;
        float: none;
        border-top: 2px solid #eee;
        padding-top: 15px;
        margin-top: 10px;
    }

    /* Beiträge */
    .post,
    div[id^="post-"] {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .post h2,
    div[id^="post-"] h2 {
        font-size: 1.3em;
        line-height: 1.3;
        word-break: break-word;
    }

    .aufmacher {
        font-size: 0.95em;
        line-height: 1.6;
    }

    .aufmacher img {
        max-width: 100%;
        height: auto;
    }

    .aufmacher table {
        width: 100%;
        overflow-x: auto;
        display: block;
    }

    /* Navigation Ältere/Neuere Beiträge */
    .navigation {
        overflow: hidden;
        margin: 15px 0;
    }

    .navigation .alignleft,
    .navigation .alignright {
        float: none;
        display: block;
        text-align: center;
        margin: 5px 0;
    }

    /* Footer */
    #footer {
        width: 100%;
        clear: both;
        padding: 10px;
        text-align: center;
    }

    #footlinks {
        text-align: center;
    }

    #footlinks ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #footlinks ul li {
        display: inline-block;
        margin: 4px 8px;
    }

    #footlinks ul li a {
        font-size: 0.9em;
        color: #555;
        text-decoration: none;
    }

    #jumptop {
        text-align: center;
        margin-bottom: 8px;
    }
}


/* ============================================================
   KLEINE MOBILE-GERÄTE (< 480px)
   ============================================================ */
@media screen and (max-width: 480px) {

    #titlename {
        font-size: 1.1em;
    }

    .post h2,
    div[id^="post-"] h2 {
        font-size: 1.15em;
    }

    #mobileopennavi {
        width: 40px;
        height: 40px;
    }

    .mobilenavitab {
        font-size: 0.85em;
        padding: 10px 0;
    }

    #mobilesearch input[type="text"],
    #mobilesearch input[type="search"] {
        width: 72%;
    }
}