* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #eef3f7;
    color: #263746;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
}


/* =========================================================
   GRUNDLAYOUT
   ========================================================= */

.container {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================================================
   ÖFFENTLICHER HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #0b2232;
    color: #fff;
    border-bottom: 3px solid #f28c28;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .16);
}

.nav {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #fff;
    white-space: nowrap;
}

.logo span {
    font-weight: 400;
    color: #8fc9e8;
}


/* Öffentliche Navigation */

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-links a {
    font-size: 14px;
    color: #d7e5ed;
    transition: .2s;
}

.nav-links a:hover {
    color: #f5a04b;
}


/* Bestehendes Icon-Menü */

.chathost-header-menu-placeholder {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


/* Öffentliches Hamburger */

.mobile-menu-toggle {
    display: none;
    width: 42px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: #f28c28;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.mobile-menu-toggle:hover {
    background: #db7515;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: 4px;
    background: #f28c28;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(242, 140, 40, .22);
}

.btn:hover {
    background: #db7515;
}

.btn-light {
    background: #fff;
    color: #0b4c6c;
    border: 1px solid #c9dbe6;
    box-shadow: none;
}

.btn-light:hover {
    background: #eaf4f8;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    padding: 100px 0 90px;
    background: linear-gradient(
        135deg,
        #0b2232 0%,
        #0f587b 62%,
        #147da5 100%
    );
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero:after {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    right: -140px;
    top: -170px;
    background: rgba(242, 140, 40, .16);
}

.hero .container {
    position: relative;
    z-index: 1;
}

.eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #f5a04b;
    font-weight: 700;
}

.hero h1 {
    font-size: 54px;
    line-height: 1.08;
    margin: 15px auto 20px;
    max-width: 880px;
    letter-spacing: -1.5px;
}

.hero p {
    max-width: 760px;
    margin: 0 auto 30px;
    color: #d9edf5;
    font-size: 18px;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero .btn-light {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.hero .btn-light:hover {
    background: rgba(255, 255, 255, .2);
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {
    padding: 78px 0;
    background: #fff;
}

.section:nth-of-type(even) {
    background: #eef5f8;
}

.section-head {
    text-align: center;
    margin-bottom: 44px;
}

.section-head h2 {
    font-size: 36px;
    margin: 8px 0 12px;
    letter-spacing: -.8px;
    color: #0b3449;
}

.section-head p {
    color: #687b88;
    max-width: 700px;
    margin: auto;
}


/* =========================================================
   KARTEN / GRID
   ========================================================= */

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.card {
    border: 1px solid #d9e4ea;
    background: #fff;
    border-radius: 7px;
    overflow: hidden;
    transition: .2s;
    box-shadow: 0 8px 25px rgba(11, 34, 50, .07);
    border-top: 4px solid #147da5;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(11, 34, 50, .14);
    border-top-color: #f28c28;
}

.card-image {
    height: 190px;
    background: linear-gradient(135deg, #dfeef4, #f5f9fb);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}

.placeholder {
    font-size: 42px;
    color: #147da5;
}

.card-body {
    padding: 23px;
}

.card-body h3 {
    margin: 0 0 8px;
    font-size: 21px;
    color: #0b3449;
}

.card-body p {
    margin: 0 0 18px;
    color: #687b88;
    font-size: 14px;
}

.card-meta {
    font-size: 12px;
    color: #147da5;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 700;
}


/* =========================================================
   WERBUNG
   ========================================================= */

.ad {
    border: 1px dashed #a9c2cf;
    background: #e8f1f5;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #78909c;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 26px 0;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.breadcrumb {
    padding: 25px 0 0;
    font-size: 13px;
    color: #6e8490;
}

.breadcrumb a {
    text-decoration: underline;
    color: #147da5;
}


/* =========================================================
   DETAIL / PORTFOLIO
   ========================================================= */

.detail {
    padding: 50px 0 80px;
    background: #eef5f8;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 48px;
    align-items: start;
}

.detail-image {
    min-height: 380px;
    background: #dfeef4;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #c8dce5;
    box-shadow: 0 12px 35px rgba(11, 34, 50, .1);
}

.detail-image img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
}

.detail h1 {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 16px;
    color: #0b3449;
}

.detail p {
    color: #5f7480;
    font-size: 17px;
}


/* =========================================================
   ÖFFENTLICHER FOOTER
   ========================================================= */

.site-footer {
    background: #081b28;
    color: #fff;
    margin-top: 0;
    border-top: 4px solid #f28c28;
}

.footer-inner {
    padding: 48px 0;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-inner p {
    margin: 5px 0;
    color: #a9bfcb;
    font-size: 13px;
}

.footer-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 12px !important;
}

.footer-pages a {
    color: #d7e5ed;
}

.footer-pages a:hover {
    color: #f5a04b;
}


/* =========================================================
   ADMIN GRUNDLAYOUT
   ========================================================= */

.admin-wrap {
    min-height: 100vh;
    background: #eef3f7;
}

.admin-main {
    width: min(1200px, 94%);
    margin: 30px auto;
}

.admin-box {
    background: #fff;
    border: 1px solid #d9e4ea;
    padding: 24px;
    border-radius: 7px;
    margin-bottom: 22px;
    box-shadow: 0 5px 18px rgba(11, 34, 50, .05);
}


/* =========================================================
   ADMIN NAVIGATION
   ========================================================= */

.admin-nav {
    background: #0b2232;
    color: #fff;
    border-bottom: 3px solid #f28c28;
    position: relative;
    z-index: 1000;
}

.admin-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 64px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.admin-brand {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-brand span {
    color: #f28c28;
}


/* Admin Menü */

.admin-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.admin-menu > a,
.admin-menu > details > summary {
    color: #fff;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 15px;
}

.admin-menu > a:hover,
.admin-menu > details > summary:hover {
    background: rgba(255, 255, 255, .12);
}

.admin-menu a.active {
    background: #f28c28;
    color: #fff;
}


/* Admin Dropdown */

.admin-menu details {
    position: relative;
}

.admin-menu summary {
    list-style: none;
}

.admin-menu summary::-webkit-details-marker {
    display: none;
}

.admin-menu summary::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid #f28c28;
    border-bottom: 2px solid #f28c28;
    transform: rotate(45deg) translateY(-2px);
}

.admin-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 210px;
    background: #0b2232;
    border: 1px solid rgba(255, 255, 255, .12);
    border-top: 2px solid #f28c28;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
    padding: 6px;
    display: none;
}

.admin-menu details[open] .admin-dropdown {
    display: block;
}

.admin-dropdown a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 5px;
    white-space: nowrap;
}

.admin-dropdown a:hover {
    background: rgba(255, 255, 255, .12);
}

.admin-dropdown a.active {
    background: #f28c28;
}


/* Admin Hamburger */

.admin-menu-toggle {
    display: none;
    border: 0;
    background: #fff;
    color: #0b2232;
    border-radius: 4px;
    width: 38px;
    height: 34px;
    font-size: 20px;
    cursor: pointer;
}


/* =========================================================
   ADMIN TABELLEN
   ========================================================= */

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 12px;
    border-bottom: 1px solid #e5edf1;
    text-align: left;
    font-size: 14px;
    vertical-align: middle;
}

.admin-table th {
    background: #eef5f8;
    color: #0b3449;
}


/* =========================================================
   FORMULARE
   ========================================================= */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field.full {
    grid-column: 1 / -1;
}

.field input,
.field textarea,
.field select {
    font: inherit;
    border: 1px solid #cbdbe3;
    border-radius: 4px;
    padding: 10px;
    background: #fbfdfe;
    color: #263746;
}

.field textarea {
    min-height: 120px;
    resize: vertical;
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.thumb {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 3px;
    background: #e5edf1;
}

.notice {
    padding: 12px 15px;
    background: #edf8f0;
    border: 1px solid #b9ddc2;
    color: #356744;
    margin-bottom: 15px;
}


/* =========================================================
   MOBILE – ÖFFENTLICHE WEBSITE
   ========================================================= */

@media (max-width: 850px) {

    .site-header .nav {
        min-height: 64px;
        height: auto;
        padding: 10px 0;
        gap: 10px;
        flex-wrap: wrap;
    }

    .site-header .logo {
        flex: 1;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .site-header .nav-links {
        display: none;
        width: 100%;
        order: 10;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 8px 0 4px;
    }

    .site-header .nav-links.mobile-open {
        display: flex;
    }

    .site-header .nav-links a {
        display: block;
        width: 100%;
        padding: 12px 10px;
        border-radius: 5px;
        font-size: 15px;
    }

    .site-header .nav-links a:hover {
        background: rgba(255, 255, 255, .10);
        color: #f5a04b;
    }

    .site-header .chathost-header-menu-placeholder {
        order: 5;
    }

    .grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 40px;
    }
}


/* =========================================================
   MOBILE – ADMIN
   ========================================================= */

@media (max-width: 850px) {

    .admin-nav-inner {
        min-height: 60px;
        padding: 10px 15px;
        flex-wrap: wrap;
        gap: 0;
    }

    .admin-brand {
        flex: 1;
    }

    .admin-menu-toggle {
        display: block;
    }

    .admin-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 12px 0 5px;
    }

    .admin-menu.open {
        display: flex;
    }

    .admin-menu > a,
    .admin-menu > details > summary {
        display: block;
        width: 100%;
        padding: 12px 10px;
        box-sizing: border-box;
    }

    .admin-menu details {
        width: 100%;
    }

    .admin-dropdown {
        position: static;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border: 0;
        border-left: 3px solid #f28c28;
        border-radius: 0;
        box-shadow: none;
        margin: 2px 0 5px;
        padding: 3px 0 3px 10px;
        background: rgba(255, 255, 255, .04);
    }

    .admin-menu details[open] .admin-dropdown {
        display: block;
    }

    .admin-dropdown a {
        padding: 10px 12px;
    }
}


/* =========================================================
   TABLET / KLEINE BILDSCHIRME
   ========================================================= */

@media (max-width: 700px) {

    .hero {
        padding: 75px 0 65px;
    }

    .section {
        padding: 60px 0;
    }

    .section-head h2 {
        font-size: 30px;
    }

    .detail h1 {
        font-size: 36px;
    }

    .admin-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 560px) {

    .container {
        width: 92%;
    }

    .logo {
        font-size: 22px;
    }

    .mobile-menu-toggle {
        width: 40px;
        height: 36px;
        font-size: 20px;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: auto;
    }

    .hero {
        padding: 65px 0;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero p {
        font-size: 16px;
    }

    .section {
        padding: 55px 0;
    }

    .footer-inner {
        padding: 35px 0;
        flex-direction: column;
    }

    .footer-pages {
        flex-direction: column;
        gap: 6px;
    }

    .detail {
        padding: 35px 0 55px;
    }

    .detail h1 {
        font-size: 32px;
    }

    .detail-image,
    .detail-image img {
        min-height: 260px;
    }

    .admin-main {
        width: 94%;
        margin: 20px auto;
    }

    .admin-box {
        padding: 16px;
    }
}


/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 480px) {

    .admin-nav-inner {
        padding: 8px 12px;
    }

    .admin-brand {
        font-size: 16px;
    }

    .admin-menu > a,
    .admin-menu > details > summary {
        font-size: 15px;
    }
}
/* =========================================================
   CHATHOST LIGHT DESIGN – HEADER & FOOTER
   Ergänzende Overrides: bestehende Modul- und Adminstyles bleiben erhalten.
   ========================================================= */
:root {
    --ch-light-bg: #ffffff;
    --ch-light-soft: #f7f5f8;
    --ch-light-text: #292631;
    --ch-light-muted: #77717d;
    --ch-pink: #e94f91;
    --ch-pink-dark: #d83d80;
    --ch-border: #eee7ed;
}
.site-header {
    background: rgba(255,255,255,.97);
    color: var(--ch-light-text);
    border-bottom: 1px solid var(--ch-border);
    box-shadow: 0 5px 22px rgba(40,24,38,.07);
    backdrop-filter: blur(12px);
}
.site-header .nav { min-height: 78px; }
.site-header .logo { color: #282431; font-size: 28px; letter-spacing: -.8px; }
.site-header .logo span { color: var(--ch-pink); font-weight: 800; }
.site-header .nav-links { gap: 8px; }
.site-header .nav-links a {
    color: #514b57;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
}
.site-header .nav-links a:hover {
    color: var(--ch-pink-dark);
    background: #fff0f6;
}
.mobile-menu-toggle {
    background: var(--ch-pink);
    border-radius: 12px;
    box-shadow: 0 5px 14px rgba(233,79,145,.2);
}
.mobile-menu-toggle:hover { background: var(--ch-pink-dark); }
.chathost-header-menu-placeholder .topbar-right { gap: 8px; }
.chathost-header-menu-placeholder .icon-btn {color: #ffffff !important;border-radius: 12px;}
.chathost-header-menu-placeholder .icon-btn:hover { background: #fff0f6; }
.chathost-header-menu-placeholder .app-icon { background: var(--ch-pink); }
.chathost-header-menu-placeholder #app-grid-panel {
    border-color: var(--ch-border);
    box-shadow: 0 14px 35px rgba(40,24,38,.14);
}
.site-footer {
    background: #292431;
    color: #fff;
    border-top: 4px solid var(--ch-pink);
}
.footer-inner {
    padding: 46px 0 24px;
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) minmax(180px, 1fr);
    gap: 30px 60px;
}
.footer-logo { display: inline-block; color: #fff; font-size: 25px; font-weight: 800; letter-spacing: -.5px; }
.footer-logo span { color: #ff83b5; }
.footer-brand p { max-width: 390px; color: #c9c2ce; font-size: 14px; }
.footer-nav { display: flex; flex-wrap: wrap; align-content: start; gap: 10px 18px; }
.footer-nav strong { flex-basis: 100%; color: #fff; margin-bottom: 3px; }
.footer-nav a { color: #d8d1dc; font-size: 13px; }
.footer-nav a:hover { color: #ff83b5; }
.footer-bottom {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,.13);
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    color: #bcb4c2;
    font-size: 12px;
}
@media (max-width: 850px) {
    .site-header .nav-links { background: #fff; border-top: 1px solid var(--ch-border); }
    .site-header .nav-links a { border-radius: 10px; color: #514b57; }
    .site-header .nav-links a:hover { background: #fff0f6; color: var(--ch-pink-dark); }
}
@media (max-width: 560px) {
    .site-header .logo { font-size: 24px; }
    .footer-inner { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; }
}


/* ChatHost blue visual refresh – public portal overrides */
:root{--ch-pink:#0875e7;--ch-pink-dark:#075fc7;--ch-pink-soft:#e7f3ff;--ch-border:#dceafa}
body{background:#f4f9ff;color:#102344}
.site-header{background:#fff;color:#102344;border-bottom:1px solid #e0ebf7;box-shadow:0 3px 18px rgba(11,54,102,.08)}
.logo{color:#102344}.logo span{color:#0875e7}.nav-links a{color:#102344;font-weight:700}.nav-links a:hover{color:#0875e7}.nav-links .nav-start{padding:10px 18px;background:#0868d8;color:#fff;border-radius:10px}.mobile-menu-toggle{background:#0868d8}.mobile-menu-toggle:hover{background:#075fc7}
.site-footer{background:linear-gradient(105deg,#104c82,#06396f);border-top:0;color:#fff}.footer-logo{color:#fff}.footer-logo span{color:#72caff}.footer-brand p,.footer-nav a,.footer-bottom{color:#dceeff}.footer-nav a:hover{color:#8bd6ff}
@media(max-width:850px){.nav-links{background:#fff;border:1px solid #dceafa;box-shadow:0 8px 22px rgba(11,54,102,.12)}.nav-links a{color:#102344}.nav-links a:hover{background:#eaf5ff;color:#075fc7}}


/* Zentrale Werbeplätze */
.chathost-ad-slot{box-sizing:border-box;max-width:100%;margin:18px auto;padding:8px;text-align:center;overflow:hidden}
.chathost-ad-slot img{max-width:100%;height:auto}
.chathost-ad-slot iframe{max-width:100%}


/* Ergänzende, auf den Mitgliederbereich begrenzte Styles */
/* ChatHost Mitgliederbereich */
.member-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:8px}
.member-nav-link{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:1px solid rgba(255,255,255,.32);border-radius:9px;color:inherit;text-decoration:none;font-size:13px;font-weight:650;white-space:nowrap}
.member-nav-register{background:#087fa5;color:#fff;border-color:#087fa5}
.member-nav-link:hover{filter:brightness(.96)}
.member-page{max-width: 1000px;margin:38px auto 60px;padding:0 18px;min-height:48vh}
.member-card{background:#fff;border:1px solid #dce7ed;border-radius:16px;padding:28px;box-shadow:0 8px 28px rgba(12,53,75,.07);color:#173b4e}
.member-card h1{margin:0 0 8px;color:#103d55}.member-card>p{color:#637987;margin:0 0 22px}
.member-card form{display:grid;gap:15px}.member-card label{display:grid;gap:7px;font-weight:650}.member-card input{width:100%;box-sizing:border-box;border:1px solid #cbd9e1;border-radius:9px;padding:12px 13px;font:inherit;color:#173b4e;background:#fff}.member-card input:focus{outline:2px solid rgba(8,127,165,.2);border-color:#087fa5}
.member-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:linear-gradient(135deg,#087fa5,#07527d);color:#fff!important;text-decoration:none;font:inherit;font-weight:700;padding:12px 18px;cursor:pointer}
.member-btn.secondary{background:#edf3f6;color:#17445b!important;border:1px solid #d6e1e7}.member-foot{margin:20px 0 0;color:#617987}.member-foot a{color:#087fa5;font-weight:700}
.member-alert{padding:12px 14px;border-radius:9px;margin:0 0 17px}.member-alert.error{background:#fff0f0;border:1px solid #efcaca;color:#8c2525}.member-alert.success{background:#eaf8ef;border:1px solid #bfe5ca;color:#176438}
.profile-summary{display:flex;align-items:center;gap:17px;margin:22px 0}.profile-avatar{width:86px;height:86px;border-radius:50%;object-fit:cover;border:3px solid #e6f0f4}.profile-initial{display:grid;place-items:center;background:#087fa5;color:#fff;font-size:34px;font-weight:800}.profile-summary h2{margin:0 0 4px}.profile-summary p{margin:0 0 8px;color:#6b7d87}.member-role{display:inline-block;background:#eaf3f7;border-radius:30px;padding:4px 10px;font-size:12px;color:#24566e}.profile-data{display:grid;grid-template-columns:120px 1fr;gap:10px;border-top:1px solid #e5edf1;padding-top:18px}.profile-data dt{font-weight:700;color:#58717e}.profile-data dd{margin:0}.member-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
@media(max-width:850px){.member-nav{width:100%;margin:8px 0 0;justify-content:flex-end}.member-page{margin-top:24px}.member-card{padding:22px}}
@media(max-width:480px){.member-nav{justify-content:flex-start}.member-nav-link{padding:7px 10px}.member-card{padding:18px}.member-actions .member-btn{flex:1}.profile-data{grid-template-columns:1fr;gap:4px}.profile-data dd{margin-bottom:9px}}


/* ChatHost Header-Menü – kompakte, einheitliche Ausrichtung */
.chathost-header-menu-placeholder{display:flex;align-items:center;flex-shrink:0}
.chathost-header-menu-placeholder .topbar-right{display:flex;align-items:center;gap:8px;position:relative}
.app-grid-menu,.member-menu{position:relative;display:flex;align-items:center}
.chathost-header-menu-placeholder .icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:#334155;cursor:pointer}
.chathost-header-menu-placeholder .icon-btn:hover{background:#edf4fa}
#app-grid-panel,.member-menu-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:1000;background:#fff;border:1px solid #d9e4ec;border-radius:12px;box-shadow:0 12px 32px rgba(15,45,70,.16)}
#app-grid-panel[hidden],.member-menu-panel[hidden]{display:none!important}
#app-grid-panel{width:260px;padding:12px}
.app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.app-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:8px;font-size:11px;text-align:center;color:#24445a;text-decoration:none}
.app-grid a:hover{background:#edf4fa}
.app-icon{width:36px;height:36px;border-radius:9px;background:#087fa5;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.member-menu-trigger{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid #d9e4ec;border-radius:22px;background:#fff;color:#173b4e;font:inherit;font-size:13px;font-weight:650;cursor:pointer;white-space:nowrap}
.member-menu-trigger:hover{background:#f3f8fb;border-color:#b9d0df}
.member-avatar{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#087fa5;color:#fff;font-weight:750}
.member-menu-chevron{font-size:12px;color:#647b89}
.member-menu-panel{width:220px;padding:7px;display:flex;flex-direction:column}
.member-menu-heading{display:flex;flex-direction:column;gap:2px;padding:10px 11px 12px;border-bottom:1px solid #e7eef2;margin-bottom:5px;color:#173b4e}
.member-menu-heading small{color:#718491;font-size:12px}
.member-menu-panel a{display:flex;align-items:center;gap:8px;padding:10px 11px;border-radius:8px;color:#23465c;text-decoration:none;font-size:13px}
.member-menu-panel a:hover{background:#edf4fa}
.member-menu-panel .member-menu-logout{border-top:1px solid #e7eef2;margin-top:5px;padding-top:12px;color:#a43b3b}
@media(max-width:850px){.chathost-header-menu-placeholder{order:5}.chathost-header-menu-placeholder .topbar-right{gap:5px}.member-menu-trigger{font-size:12px}}


/* ChatHost Hauptnavigation V1 */
.nav-links{gap:clamp(9px,1.1vw,18px)}
.nav-links>a,.nav-dropdown-trigger{font:600 13px Arial,Helvetica,sans-serif;color:#d7e5ed;white-space:nowrap}
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-trigger{border:0;background:transparent;padding:10px 0;cursor:pointer}
.nav-dropdown-trigger span{color:#f28c28;margin-left:3px}
.nav-dropdown-trigger:hover,.nav-links>a:hover{color:#f5a04b}
.nav-dropdown-panel{display:none;position:absolute;top:100%;left:-12px;min-width:190px;padding:8px;background: #0b2232;color: #ffffff;border:1px solid #dce7ee;border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.18);z-index:1200}
.nav-dropdown.is-open .nav-dropdown-panel{display:block}
.nav-dropdown-panel a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:7px;color:#17384d;font-size:13px;white-space:nowrap}
.nav-dropdown-panel a:hover{background:#edf5fa;color:#075b8c}
.nav-dropdown-panel small{margin-left:auto;color:#8a9aa5;font-size:10px}
.nav-dropdown-right{left:auto;right:0}
.nav-coming-soon{opacity:.7}
.topbar-right{display:flex;align-items:center;gap:9px;position:relative}
.guest-menu{display:flex;align-items:center;gap:8px}
.guest-menu a{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap}
.guest-login{background:#f28c28;color:#fff}
.guest-register{border:1px solid #8fc9e8;color:#eaf7ff}
.guest-menu a:hover{filter:brightness(1.08)}
.member-list-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.member-list-item{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #dce7ee;border-radius:11px;background:#fff;min-width:0}
.member-list-avatar{width:54px;height:54px;flex:0 0 54px;border-radius:50%;object-fit:cover}
.member-list-initial{display:flex;align-items:center;justify-content:center;background:#0f6d9a;color:white;font-weight:800;font-size:20px}
.member-list-info{display:flex;flex-direction:column;min-width:0}
.member-list-info strong{color:#17384d;overflow-wrap:anywhere}
.member-list-info span,.member-list-info small{font-size:12px;color:#6a7f8e;overflow-wrap:anywhere}
@media(max-width:1150px){.nav{gap:12px}.nav-links{gap:9px}.nav-links>a,.nav-dropdown-trigger{font-size:12px}}
@media(max-width:900px){
 .nav{flex-wrap:wrap;min-height:68px;padding:10px 0}
 .mobile-menu-toggle{display:block;margin-left:auto}
 .chathost-header-menu-placeholder{order:3}
 .nav-links{display:none;order:4;width:100%;flex-basis:100%;align-items:stretch;flex-direction:column;gap:2px;padding:10px 0 4px}
 .nav-links.mobile-open{display:flex}
 .nav-links>a,.nav-dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 12px;font-size:14px;text-align:left}
 .nav-dropdown{display:block;width:100%}
 .nav-dropdown-panel,.nav-dropdown-right{position:static;box-shadow:none;border:0;border-radius:8px;background:#102f43;margin:0 0 5px 10px;padding:5px 8px}
 .nav-dropdown-panel a{color:#e2f0f7}
 .nav-dropdown-panel a:hover{background:#1a4a65;color:#fff}
 .member-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){.member-list-grid{grid-template-columns:1fr}.guest-menu a{padding:7px 9px;font-size:11px}.member-menu-name{max-width:85px;overflow:hidden;text-overflow:ellipsis}}


/* Klickbare Mitgliederkarten */
.member-list-link{display:flex;text-decoration:none;color:inherit;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.member-list-link:hover{transform:translateY(-2px);border-color:#83b9d5;box-shadow:0 8px 20px rgba(15,65,95,.12)}
.member-list-link:focus-visible{outline:3px solid #f28c28;outline-offset:3px}
.member-list-arrow{margin-left:auto;align-self:center;font-size:27px;line-height:1;color:#6b8da2}


/* ChatHost V1 – zentrale Informationsseiten */
.info-page-wrap{padding-top:38px;padding-bottom:54px;min-height:48vh}
.info-page-card{max-width:920px;margin:0 auto;background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:clamp(24px,4vw,42px);box-shadow:0 12px 34px rgba(15,35,65,.07)}
.info-page-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2875c7;margin-bottom:10px}
.info-page-card h1{margin:0 0 24px;color:#12345a;font-size:clamp(1.8rem,4vw,2.45rem);line-height:1.2}
.info-page-content{color:#34465d;font-size:1rem;line-height:1.75}
.info-page-content p{margin:0 0 16px}
.info-placeholder{padding:20px 22px;border:1px solid #f0d9a5;background:#fffaf0;border-radius:12px;color:#57472b}
.info-placeholder strong{display:block;color:#76520e;margin-bottom:8px}
.info-placeholder p:last-child{margin-bottom:0}