/* TEST*/


:root {
    --darkblue: #176093;
    --orange: #e64919;
    --yellow: #fdce2c;
    --button-bg-0color: #ccc;
    --font-size-h1:      2em;       /* Haupt-Überschrift */
    --font-size-h2:      1.5em;     /* Unter-Überschrift */
    --font-size-h4:      1.125em;   /* 18px bei 16px Basis */
    --font-size-base:    1em;       /* Fließtext = 16px (Browser-Standard) */
    --font-size-small:   0.9375em;  /* 15px bei 16px Basis */
    --font-size-x-small: 0.875em;   /* 14px bei 16px Basis */
    --font-size-label:   0.8125em;  /* 13px bei 16px Basis */
    --spacing-unit: 8px;
}


.profile_user_links {
    background-color: #333;
}
.profile_user_links a,
.profile_user_links a:visited,
.profile_user_links a:hover {
    color: #fff;
}

/* #profile_menu_top: Avatar + Name vertikal zentriert */
#profile_menu_top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#profile_menu_top img.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* #profile_menu: Positionierung korrigieren */
#profile_menu.top_menu {
    top: 100%;
    margin-top: 4px;
}
#profile_menu .floatleft {
    float: none;
}
@media (max-width: 800px) {
    #profile_menu.top_menu {
        right: 0;
        left: auto;
        width: calc(100vw - 20px);
        max-width: 320px;
    }
}

/* #profile_menu: Links + Info in weiss */
#profile_menu a,
#profile_menu a:visited,
#profile_menu .profile_username a {
    color: #fff;
}
#profile_menu a:hover {
    color: #ff6a00;
}

/* #profile_menu: username + group Farben */
#profile_menu .profile_username a {
    color: #ff6a00;
}
#profile_menu .profile_group {
    color: #333;
}

/* .profile_user_links ol: mobil 1 Spalte */
@media (max-width: 800px) {
    .profile_user_links ol {
        column-count: 1;
    }
}

/* -----------------------------------------
    Default-Avatar: modernes SVG-Placeholder
    Ersetzt das graue Silhouetten-Bild wenn kein eigenes Avatar gesetzt ist.
    Funktioniert in Chromium-Browsern (Chrome, Edge) via CSS content-Ersatz.
    Firefox-Fallback: gradient + border-radius.
-------------------------------------------- */
img.avatar[src*="default.png"],
img.avatar[src*="default_avatar"] {
    content: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='nonzero'%3E%3Ccircle fill='%2364748B' cx='50' cy='50' r='50'/%3E%3Ccircle fill='%23E2E8F0' cx='50' cy='37' r='17'/%3E%3Cpath d='M14.3208661,85.264287 C14.3208661,66.5976204 26,60 50,60 C74,60 85.8761765,66.5976204 85.8761765,85.264287 C75.1497524,95.0880957 63.1910269,100 50,100 C36.8089731,100 24.9159285,95.0880957 14.3208661,85.264287 Z' fill='%23E2E8F0'/%3E%3C/g%3E%3C/svg%3E");
    background: linear-gradient(135deg, #64748b, #94a3b8);
    border-radius: 50%;
}

/* -----------------------------------------
    topic-item-poster-avatar: Avatar füllt den orange Ring (.avatar-bg = 61x61px)
-------------------------------------------- */

.topic-item-poster-avatar {
    width: 40px;
    height: 40px;
}

.topic-item-poster-avatar img.avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* -----------------------------------------
    Sidebar: #info_center (Neueste Beiträge, Statistiken, Online)
-------------------------------------------- */

#info_center {
    font-size: var(--font-size-small); /* alle Kindelemente erben 15px */
}

/* Überschriften in der Sidebar */
#info_center .sub_bar h4.subbg,
#info_center .sub_bar h4.subbg a {
    font-size: var(--font-size-base);
}

/* Avatar in den Recent Posts */
#info_center .contentRow-figure img.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Layout: Avatar + Text nebeneinander, vertikal zentriert */
#info_center .contentRow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

#info_center .contentRow-figure {
    flex-shrink: 0;
}

#info_center .contentRow-main {
    flex: 1;
    min-width: 0;
}

/* Spans innerhalb der Recent Posts */
#info_center .recentposter,
#info_center .post-link,
#info_center .recenttime,
#info_center .recentboard {
    display: block;
    font-size: var(--font-size-small);
}

/* -----------------------------------------
    Divers
-------------------------------------------- */

/* a general table class */
table.table_grid {
    font-size: var(--font-size-small);
}

.p-nav-opposite {
  font-size: var(--font-size-small)
}

#main_menu {
  font-size: var(--font-size-small)
}

@media (max-width: 800px) {
   #languages_form,
   .p-header-logo {
      display: none; 
   }
 
   .p-nav {padding: 0.5rem;}
 
   .menu_icon {
      display: inline-block;
      background: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTMgNmgxOHYySDNWNm0wIDVoMTh2Mkgzdi0ybTAgNWgxOHYySDN2LTJaIi8+PC9zdmc+') no-repeat !important;
      background-size: 100% !important;
      height: 40px !important;
      width: 40px !important;
      background-color: #333 !important; 
   } 
 
}

/* #advanced_panel_toggle: dunkles SVG-Icon, kein Rahmen, kein Schatten */
#advanced_panel_toggle::before {
    width: 24px;
    height: 24px;
    background-color: #333;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    border: none;
    box-shadow: none;
    border-radius: 3px;
}


/* #top_info li: Button-Stil wie dropbtn_search */
#top_info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
#top_info > li {
    display: flex;
    align-items: center;
}
#top_info > li > a {
    background-color: rgba(255, 255, 255, 0.18);
    color: white;
    border: none;
    border-radius: 5px;
    height: 2.55em;
    line-height: 2.55em;
    padding: 0 0.75em;
    box-shadow: none;
    display: inline-block;
}
#top_info > li > a:hover,
#top_info > li > a:focus,
#top_info > li > a.open {
    background-color: rgba(255, 255, 255, 0.32);
    color: white;
    border: none;
    box-shadow: none;
}

/* .amt: Badge-Hintergrund */
.amt {
    background: #ff6a00;
}

/* h2.page-title */
h2.page-title {
    font-size: var(--font-size-h2);
    line-height: 1.4em;
    margin-bottom: 0.8em;
}

/* .navigate_section ul: Breadcrumb */
.navigate_section ul {
    background: transparent;
    background-image: none;
    box-shadow: none;
    border: none;
    border-top: 1px dotted gray;
    border-bottom: 1px dotted gray;
    border-radius: 0;
}

/* .errorbox: orange Farbe + SVG-Icon */
.errorbox {
    background-color: #fff3ee;
    border-top: 2px solid #ff6a00;
    border-bottom: 2px solid #ff6a00;
    color: #ff6a00;
}
.errorbox::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}

/* input[name="b_search"]: Suchbutton */
input[name="b_search"] {
    background: #333;
    background-image: none;
    color: #fff;
    font-size: var(--font-size-small);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
}
input[name="b_search"]:hover,
input[name="b_search"]:focus {
    background: #ff6a00;
    background-image: none;
    color: #fff;
    border: none;
    box-shadow: none;
}

/* -----------------------------------------
    POPUP Window
-------------------------------------------- */
   .popup_window {

    }
    
   .popup_window,
   #main_menu .popup_window,
   #genericmenu .popup_window,
   #adm_submenus .popup_window {
       position: relative;
       width: auto;
       z-index: 99;
       box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
       border: 1px solid #777;
       border-radius: 7px 7px 3px 3px;
       margin: 0 auto;
       padding: 0;
       background-image: none;
         background-color: #333;
         color: white; 
   }
   .popup_window {
       top: 15%;
       width: 480px;
       padding: 0 6px 6px 6px;
   }

 /* -----------------------------------------
     Helpbar
 -------------------------------------------- */

 .helpbox {
   margin-bottom: 2rem;
   width: 100%;
 }

 .helpbar_ {
   display: flex;
   align-items: center;
   gap: 6px;
   background: #333;
   padding: 8px 12px;
   border: 1px solid #444;
   box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
   width: 100%;
   flex-wrap: wrap;
 }

 .helpbar___label {
   font-size: var(--font-size-label);
   color: #fff;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   padding-right: 10px;
   border-right: 1px solid #444;
   margin-right: 4px;
   white-space: nowrap;
   flex-shrink: 0;
 }

 /* Toggle nur mobil – desktop ausgeblendet */
 .helpbar___toggle {
   display: none;
 }

 .helpbar___toggle-arrow {
   display: inline-block;
   margin-left: 5px;
   transition: transform 0.2s;
 }

 .helpbar___button,
 .infobar___button {
   font-family: 'ShareTechMono', 'Courier New', monospace;
   font-size: 0.9375em; /* 15px bei 16px Basis */
   color: #fff;
   background: #5b5b5b;
   border: 1px solid #444;
   border-radius: 3px;
   padding: 6px 10px;
   cursor: pointer;
   letter-spacing: 0.05em;
   transition: background 0.15s, color 0.15s, border-color 0.15s;
   white-space: nowrap;
   user-select: none;
   flex: 1;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
 }

 .helpbar___button:hover,
 .infobar___button:hover {
   background: #ff6a00;
   color: #fff;
   border-color: #ff6a00;
 }

 .helpbar___button:visited,
 .infobar___button:visited {
   color: #fff;
 }

 /* ── Block: infobar ── */
 .infobar_ {
   background: #333;
   padding: 8px 12px;
   border: 1px solid #444;
   border-top: none;
   box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
   width: 100%;
 }

 .infobar_container {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
   width: 100%;
   max-width: 1150px;
   margin: 0 auto;
 }

 .infobar___text {
   font-size: var(--font-size-base);
   color: #ccc;
   letter-spacing: 0.03em;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
 }

 .infobar___text--highlight {
   color: #ff6a00;
   font-weight: bold;
 }

 .infobar___actions {
   display: flex;
   gap: 6px;
   flex-shrink: 0;
   margin-left: auto;
 }

 /* ── Responsive: Mobile ── */
 @media (max-width: 800px) {

   .helpbar_ {
     gap: 4px;
     padding: 6px 8px;
   }

   /* Label ausblenden, Toggle einblenden */
   .helpbar___label {
     display: none;
   }

   .helpbar___toggle {
     display: inline-flex;
     align-items: center;
     font-family: 'ShareTechMono', 'Courier New', monospace;
     font-size: var(--font-size-base);
     color: #ff6a00;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     text-decoration: none !important;
     cursor: pointer;
     padding-right: 10px;
     border-right: 1px solid #444;
     margin-right: 4px;
     white-space: nowrap;
     flex-shrink: 0;
   }

   /* Buttons + Infobar standardmäßig ausgeblendet */
   .helpbar___button {
     display: none;
   }

   .infobar_ {
     display: none;
   }

   /* Aufgeklappt */
   .helpbox.is-open .helpbar___toggle-arrow {
     transform: rotate(-90deg);
   }

   .helpbox.is-open .helpbar___button {
     display: inline-flex;
     font-size: var(--font-size-label);
     padding: 5px 4px;
     flex: 1 1 calc(50% - 4px);
     min-width: 0;
   }

   .helpbox.is-open .infobar_ {
     display: block;
     padding: 8px 10px;
   }

   .helpbox.is-open .infobar___text {
     white-space: normal;
     overflow: visible;
     text-overflow: unset;
     font-size: var(--font-size-x-small);
     text-align: center;
     width: 100%;
   }

   .helpbox.is-open .infobar___actions {
     margin-left: 0;
     width: 100%;
   }

   .helpbox.is-open .infobar___button {
     flex: 1;
     justify-content: center;
   }
 }


/* -----------------------------------------
	Ikons
-------------------------------------------- */
#messageindex .user_reply {
    font-size: var(--font-size-small);
    color: darkorange;
}

#topic_container div.info.info_block div.icons i.fa-solid {
    margin-left: 0.5rem;
    font-size: 0.9375em; /* 15px bei 16px Basis */
}

#messageindex .board_icon i.fa-comments {
    color: var(--darkblue);
}

.ikon_legend {
    width: 15px;
    aspect-ratio: 1/1;
    display: inline-block;
    margin-right: 0.5rem;
    text-align: center;
    /* outline: 1px solid red; */
}

.fa-member-state {
    color: var(--darkblue);
}

.user_info .icons {
    text-align: center;
}

/* -----------------------------------------
	Mesage Index
-------------------------------------------- */

.message_index_title span.preview {
    font-size: 1.2em; /* kein exakter Variable-Treffer – bleibt em */
}

/* -----------------------------------------
	 New Header
-------------------------------------------- */

.fags-header {
    border-bottom: 1px solid white;

    background: #fdce2c;
}

.fags-banner {
    height: 120px;
    background: url('../images/back-forum.png');
    background-repeat: no-repeat;
    background-position: left, center;
    background-size: auto 100%;
    position: relative;
}

@media (max-width: 800px) {
    .fags-banner {
        background: url('../images/back-forum-mobil.png') no-repeat right center;
        background-position: left, center;
        background-size: 100% auto;
        height: 70px;    
    }
}


/* -----------------------------------------
	 Footer
-------------------------------------------- */
#fags-footer {
    border-top: 1px solid #d9d9d9;
    background: #333;
    padding: 2.5em;
    color: white;
}
#footer-content * {
    text-align: center;
    color: white;
    font-size: var(--font-size-base);
    line-height: 1.5rem;
}
#footer-content .smalltext {
    font-size: var(--font-size-x-small);
}

#footer-content h2 {
    font-size: var(--font-size-h1);
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 300;
}

#footer-content h2 {
    font-size: var(--font-size-h2);
    color: #efefef;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
#footer-content p.footer__byline {
    font-size: var(--font-size-base);
    /* font-style: italic; */
    line-height: 1.7em;
    margin-bottom: 2em;
    width: 80%;
    margin: 2em auto;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
}

/* -----------------------------------------
	 Promobox
-------------------------------------------- */

.promobox {
    padding-bottom: 1em;
    color: #333;
}

.promobox b {
    font-weight: 900;
}

@media (max-width: 800px) {
    .promobox img {
        width: 100%;
        height: auto;
    }
    .promobox .susy-1 {
        display: block;
        padding-right: 10px;
    }

    .promobox .susy-item {
        font-size: var(--font-size-label); /* ~11px */
    }
    .promobox .susy {
        display: flex;
    }

    .account > .navbar-nav {
        margin: 0;
    }
}

.promofooter {
    background: #009038;
    border-top: 1px solid #d9d9d9;
}
.promofooter img {
    height: 50px;
    max-width: 100%;
    max-height: auto;
}
.promofooter p {
    color: white;
    padding-top: 1em;
}

.promofooter_wrapper {
    width: 1280px;
    max-width: 90%;
    margin: 0 auto;
}

@media (max-width: 800px) {
    .promofooter {
        padding-top: 2em;
        padding-bottom: 2em;
    }
    .promofooter .susy {
        padding: 2em auto !important;
        display: block;
    }
    .promofooter .susy .susy-item {
        display: block;
        width: 100%;
        text-align: center;
    }

    .promofooter .susy .susy-item p {
        font-size: var(--font-size-small);
    }
}

/* -----------------------------
	SUSY-GRID System
   ----------------------------- */

/* Float or flex… */
.susy {
    display: flex;
}

/* Setup… */
.susy-item {
    --span: initial; /* avoid inheritance */
    --percentage: calc(var(--span) * 100%);
    width: var(--percentage, initial);
}

/* Items… */
.susy-1 {
    --span: 1/12;
}
.susy-2 {
    --span: 2/12;
}
.susy-3 {
    --span: 3/12;
}
.susy-4 {
    --span: 4/12;
}
.susy-5 {
    --span: 5/12;
}
.susy-6 {
    --span: 6/12;
}
.susy-7 {
    --span: 7/12;
}
.susy-8 {
    --span: 8/12;
}
.susy-9 {
    --span: 9/12;
}
.susy-10 {
    --span: 10/12;
}
.susy-11 {
    --span: 11/12;
}
.susy-12 {
    --span: 12/12;
}

@media (max-width: 400px) {
    .susy {
        display: block;
    }
    .susy-item {
        width: 50%;
    }
}

/* ---------- ENDE Susy-GRID */

/* -----------------------------------------
Fundraising Button
-------------------------------------------- */

.fundbanner {
    position: absolute;
    top: 50%;
    right: 0;
    width: 250px;
    height: auto;
    transform: translateY(-50%);
}

.fundbanner .fags-button {
    display: inline-block;
    width: auto;
    border: 1px solid #e64919;
    background-color: #e64919;
    border-radius: 7px;
    color: white !important;
    font-size: 1.1em; /* 24px bei 16px Basis = var(--font-size-h2) */
    padding: 0.5em 1em 0.7em;
    animation: pulse 2s infinite;
}

.fags-button small {
    display: block;
    font-size: var(--font-size-x-small);
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(230, 73, 25, 0.2);
        box-shadow: 0 0 0 0 rgba(230, 73, 25, 0.2);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(230, 73, 25, 0.2);
        box-shadow: 0 0 0 10px rgba(230, 73, 25, 0.2);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(230, 73, 25, 0.2);
        box-shadow: 0 0 0 0 rgba(230, 73, 25, 0.2);
    }
}

@media (max-width: 800px) {
    .fundbanner {
        position: fixed;
        bottom: 0px;
        top: auto;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        text-align: center;
        height: auto;
        z-index: 1000;
    }

    .fundbanner .fags-button {
        display: inline-block;
        width: auto;
        border: 1px solid #e64919;
        background-color: #e64919;
        border-radius: 6px 6px 0 0;
        color: white !important;
        font-size: var(--font-size-small);
        letter-spacing: 2px;
        padding: 10px 8px 6px;
        width: 100%;
        animation: pulse 2s infinite;
        text-transform: uppercase;
    }

    .fags-button small {
        display: none;
    }
}

textarea.editor {
    width: 100% !important;
    max-width: 100% !important;
}

/* =============================================
   PM-Nachrichten: Modernes Redesign
   Hinzugefügt: 2026-02-23
   Quelle: pm-redesign-vorschau.css (v2)
============================================= */

.postblock {
  margin: 0 0 16px 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: visible; /* visible statt hidden – sonst wird das Dropdown-Menü abgeschnitten */
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  background: #fff;
}

.post_wrapper {
  display: flex;
  align-items: stretch;
}

/* Signatur + Banner ausblenden */
.post_wrapper .moderatorbar { display: none; }
.poster .postbit-banner     { display: none; }

/* ::before-Bullet aus lok.css entfernen */
.post_wrapper .poster .user_info li::before {
  content: "" !important;
  display: none;
}

/* -----------------------------------------------
   LINKE SPALTE: User-Info
   Mindestschriftgröße: 14px
----------------------------------------------- */
.post_wrapper > .poster {
  width: 170px;
  min-width: 170px;
  max-width: 170px;
  flex-shrink: 0;
  background: #065c932b;
  border-right: 1px solid #e2e8f0;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  border-radius: 12px 0 0 12px; /* Ecken links – da .postblock overflow:visible */
}

.poster .avatar img.avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  object-fit: cover;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
}

.poster .user_info,
.poster .profile_icons  { list-style: none; padding: 0; margin: 0; }
.poster .user_info li   { list-style: none; }

.poster .poster-name h4         { font-size: var(--font-size-h4); font-weight: 700; margin: 10px 0 2px 0; }
.poster .poster-name h4 a       { color: #1e293b; text-decoration: none; font-size: var(--font-size-small); }
.poster .postgroup              { font-size: var(--font-size-small); color: #64748b; padding: 2px 0; }
.poster .postcount              { font-size: var(--font-size-small); color: #64748b; border-top: 1px solid #e2e8f0; padding-top: 8px; margin-top: 8px; }
.poster .postcount .floatright  { float: none; display: inline; }
.poster .poster_ip              { font-size: var(--font-size-small); color: #94a3b8; margin-top: 4px; }
.poster .poster-name .off,
.poster .poster-name .on        { font-size: var(--font-size-small); }
.poster .profile                { margin-top: 10px; }
.poster .profile_icons          { display: flex; gap: 8px; justify-content: center; }

/* -----------------------------------------------
   RECHTE SPALTE: Nachrichteninhalt
----------------------------------------------- */
.post_wrapper > .postarea {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Kopfzeile: Betreff links – Datum rechts */
.postarea .keyinfo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 18px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0 12px 0 0; /* Ecke oben-rechts */
}

.postarea .subject_title        { flex: 1; min-width: 0; }
.postarea .subject_title h5     { margin: 0; font-size: var(--font-size-small); font-weight: 600; color: #1e293b; }
.postarea .postinfo             { font-size: var(--font-size-small); color: #64748b; white-space: nowrap; flex-shrink: 0; }
.postarea .postinfo strong a    { color: #f59e0b; text-decoration: none; font-weight: 600; }

.postarea .post                 { flex: 1; padding: 16px 18px; }
.postarea .post .inner          { font-size: 1em; line-height: 1.75; color: #374151; }

/* -----------------------------------------------
   ACTION-BUTTONS
----------------------------------------------- */
.under_message {
  padding: 10px 18px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  border-radius: 0 0 12px 0; /* Ecke unten-rechts */
}

.quickbuttons_pm                { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.quickbuttons_pm > li           { list-style: none; }

.quickbuttons_pm > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: var(--font-size-small);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  background: #e2e8f0;
  color: #475569;
  transition: background 0.15s;
  cursor: pointer;
}

.quickbuttons_pm > li > a:hover           { background: #cbd5e1; color: #1e293b; }
.quickbuttons_pm > li.you_sure > a        { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.quickbuttons_pm > li.you_sure > a:hover  { background: #fca5a5; }
.quickbuttons_pm > li.post_options > a    { background: #ede9fe; color: #7c3aed; }

/* Forum-Beiträge: quickbuttons_post – gleiche Optik wie quickbuttons_pm */
.quickbuttons_post                { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.quickbuttons_post > li           { list-style: none; }

.quickbuttons_post > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: var(--font-size-small);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  background: #e2e8f0;
  color: #475569;
  transition: background 0.15s;
  cursor: pointer;
}

.quickbuttons_post > li > a:hover           { background: #cbd5e1; color: #1e293b; }
.quickbuttons_post > li.quick_edit > a      { background: #e2e8f0; color: #475569; }
.quickbuttons_post > li.quick_edit > a:hover { background: #cbd5e1; }
.quickbuttons_post > li.post_options > a    { background: #ede9fe; color: #7c3aed; }
.quickbuttons_post > li.post_options > a:hover { background: #ddd6fe; }

/* li.inline_mod_check als Button – gleicher Hintergrund wie andere Buttons */
.inline_mod_check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 6px;
  background: #e2e8f0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s;
  list-style: none;
}

.inline_mod_check:hover { background: #cbd5e1; }

/* Checkbox-Input darin: transparent, nur Rand als Markierung */
.inline_mod_check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid #94a3b8;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
  flex-shrink: 0;
  margin: 0;
}

.inline_mod_check input[type="checkbox"]:checked {
  background: #475569;
  border-color: #475569;
}

.inline_mod_check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* Dropdown-Menü über nachfolgende Karten legen */
.quickbuttons_post > li.post_options,
.quickbuttons_pm  > li.post_options {
  position: relative;
  z-index: 100;
}

/* =============================================
   MOBILE: max-width 640px
   – Profil horizontal oben
   – Buttons zentriert
============================================= */
@media (max-width: 640px) {

  .postblock {
    border-radius: 8px;
    margin: 0 0 10px 0;
  }

  .post_wrapper {
    flex-direction: column;
  }

  .post_wrapper > .poster {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    gap: 12px;
    border-radius: 8px 8px 0 0; /* Mobile: Ecken oben, da Poster jetzt oben liegt */
  }

  .poster .avatar img.avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin: 0;
  }

  .poster .user_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    text-align: left;
    flex: 1;
  }

  .poster .user_info li       { padding: 0; margin: 0; }
  .poster .poster-name        { width: 100%; margin-bottom: 2px; }
  .poster .poster-name h4     { margin: 0; }
  .poster .postcount          { border-top: none; padding-top: 0; margin-top: 0; }
  .poster .poster_ip          { display: none; }
  .poster .profile            { display: none; }

  .postarea .keyinfo {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 0; /* Mobile: kein Radius, Poster liegt oben */
  }

  .postarea .postinfo { white-space: normal; font-size: var(--font-size-x-small); }
  .postarea .post     { padding: 12px 14px; }

  .under_message {
    justify-content: center;
    padding: 10px 12px;
    flex-wrap: wrap;
    border-radius: 0 0 8px 8px; /* Mobile: Ecken unten vollständig */
  }

  .quickbuttons_pm,
  .quickbuttons_post {
    justify-content: center;
    width: 100%;
  }
}

/* =============================================
   Globale Button-Klasse
   Basis-Definition ohne Kontext-Einschränkung
   Hinzugefügt: 2026-02-24
============================================= */

.button {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  font-size: 0.9em;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.05em;
  border-radius: 6px;
  border: 1px solid #a5b3c4;
  background: #f8fafc;
  color: #334466;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.button:hover {
  background: #e2e8f0;
  border-color: #176093;
  color: #176093;
  box-shadow: 0 2px 6px rgba(23, 96, 147, 0.15);
}

/* Primärer / aktiver Button */
.button.active {
  background: linear-gradient(135deg, #176093 0%, #1a72ad 100%);
  border-color: #176093;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(23, 96, 147, 0.35);
}

.button.active:hover {
  background: linear-gradient(135deg, #1a72ad 0%, #1e7ec0 100%);
  border-color: #1a72ad;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(23, 96, 147, 0.45);
}

/* =============================================
   Popup-Fenster: Modernes Menü-Design
   Generisch – gilt für alle .popup_window
   Hinzugefügt: 2026-02-24
============================================= */

.popup_window {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 0;
  overflow: visible; /* NICHT hidden – sonst werden absolute Sub-Menüs abgeschnitten */
  min-width: 200px;
  max-width: 92vw;
}

/* Header-Leiste: Ecken oben runden (da overflow:visible auf Container) */
.popup_window .popup_heading {
  background: #333333;
  color: #ffffff;
  text-shadow: none;
  padding: 8px 14px;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px 10px 0 0;
}

/* Letztes Element: Ecken unten runden */
.popup_window .buttonlist .button:last-child {
  border-radius: 0 0 10px 10px;
}

/* Close-Link im Header */
.popup_window .popup_heading a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  text-shadow: none;
  transition: color 0.15s;
}
.popup_window .popup_heading a:hover {
  color: #ffffff;
}

/* Menü-Liste */
.popup_window .buttonlist {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #ffffff;
}

/* Einträge: Menü-Stil, mit Trennlinie */
.popup_window .buttonlist .button {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background: transparent !important;
  padding: 9px 16px !important;
  font-size: 0.875em !important;
  font-weight: 400 !important;
  color: #334466 !important;
  justify-content: flex-start !important;
  letter-spacing: 0 !important;
  transition: background 0.12s !important;
}

/* Letzter Eintrag ohne Trennlinie */
.popup_window .buttonlist .button:last-child {
  border-bottom: none !important;
}

.popup_window .buttonlist .button:hover {
  background: #f1f5f9 !important;
  color: #176093 !important;
  text-shadow: none !important;
}

/* Aktiver Eintrag: var(--orange) mit linkem Akzentstreifen */
.popup_window .buttonlist .button.active {
  background: #fff5f0 !important;
  color: #e64919 !important;
  font-weight: 600 !important;
  border-left: 3px solid #e64919 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-left: 13px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.popup_window .buttonlist .button.active:hover {
  background: #fee8de !important;
  color: #e64919 !important;
  text-shadow: none !important;
}

/* =============================================
   #profile_menu: Admin/Profil-Dropdown
   Analoges Design zu .popup_window
   Hinzugefügt: 2026-02-24
============================================= */

#profile_menu {
  background: #333333;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 0;
  overflow: hidden;
}

/* Avatar-Bereich */
#profile_menu .profile_user_avatar {
  padding: 14px 8px 14px 14px;
  background: transparent;
}
#profile_menu .profile_user_avatar img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: block;
}

/* Name + Rolle */
#profile_menu .profile_user_info {
  padding: 14px 14px 14px 4px;
  background: transparent;
}
#profile_menu .profile_username a {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1em;
  text-shadow: none;
  text-decoration: none;
  line-height: 1.3 !important;
}
#profile_menu .profile_group {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.8em;
  margin-top: 2px;
  text-shadow: none;
}

/* Weißer Menü-Bereich */
#profile_menu .profile_user_links {
  background: #ffffff !important;
  clear: both;
  padding: 0;
}

/* ol: Flexbox statt column-count */
#profile_menu .profile_user_links ol {
  display: flex !important;
  flex-direction: column !important;
  column-count: unset !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* li: Flex-Row → Icon links, Link rechts, Trennlinie */
#profile_menu .profile_user_links li {
  list-style: none;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  padding: 0;
}
#profile_menu .profile_user_links li:last-child {
  border-bottom: none;
}

/* Icon-Span: feste Breite, zentriert */
#profile_menu .profile_user_links li .main_icons {
  display: inline-flex !important;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: auto;
  padding-left: 12px;

}

/* Hover: gesamte Zeile reagiert */
#profile_menu .profile_user_links li:hover {
  background: #f1f5f9;
}
#profile_menu .profile_user_links li:hover a {
  color: #176093 !important;
}

/* Links: Menü-Einträge */
#profile_menu .profile_user_links a,
#profile_menu .profile_user_links a:visited {
  display: flex !important;
  align-items: center;
  flex: 1;
  height: auto !important;
  box-sizing: border-box;
  padding: 9px 16px 9px 8px !important;
  line-height: 1.4 !important;
  font-size: 0.875em;
  font-weight: 400;
  color: #334466 !important;
  text-decoration: none;
  text-shadow: none;
  text-indent: 0 !important;
  background: transparent;
  background-image: none !important;
  transition: background 0.12s, color 0.12s;
}
#profile_menu .profile_user_links a:hover {
  background: #f1f5f9 !important;
  color: #176093 !important;
}

/* =============================================
   Alarm-Popup (.top_menu.scrollable): Positionskorrektur
   Problem: JS berechnet top=-208px → Popup außerhalb Viewport
   Ursache: Parent-<li> hat position:static → absolute relativ zu #top_info
   Fix: li bekommt position:relative → Popup öffnet sich unterhalb des Icons
   Hinzugefügt: 2026-02-24
============================================= */

#top_info > li {
  position: relative !important;
}

#top_info > li .top_menu.scrollable {
  top: 100% !important;
  bottom: auto !important;
  margin-top: 4px !important;
  left: auto !important;
  right: 0 !important;
}