/* ========================================
   DIAMANTEN WERKSTATT MODERN
   Kopfbereich und Gorilla-Logo
   ======================================== */

/* Weißer Kopfbereich */
.headerbar {
    background: #ffffff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 20px 10px;
}

/* Logo mittig ausrichten */
.headerbar .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    position: relative;
}

/* Logo-Bereich */
#site-description {
    float: none;
    width: 100%;
    text-align: center;
    margin: 0;
}

/* Gorilla-Logo als Bild */
#site-description .logo {
    display: block;
    float: none;
    width: 290px;
    height: 225px;
    margin: 0 auto;
    background: url("images/logo_gorilla_webseite_tranz.webp")
                center center / contain no-repeat;
}

/* Altes phpBB-Logo ausblenden */
#site-description .site_logo {
    display: none;
}

/* Boardname und Beschreibung ausblenden */
#site-description h1,
#site-description > p:not(.skiplink) {
    display: none;
}

/* Suchfeld rechts oben */
.headerbar .search-header {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Smartphone-Anpassung */
@media (max-width: 700px) {

    .headerbar {
        padding: 15px 5px;
    }

    .headerbar .inner {
        min-height: 230px;
    }

    #site-description .logo {
        width: 220px;
        height: 175px;
    }

    .headerbar .search-header {
        position: static;
    }
}


/* ========================================
   DIAMANTEN MODERN – NAVIGATION
   Weiß mit dezenter grauer Trennlinie
   ======================================== */

/* Hauptnavigation */
#page-header .navbar {
    background: #ffffff;
    border: none;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 14px;
    color: #344054;
}

/* Navigationslinks */
#page-header .navbar a {
    color: #344054;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Links beim Darüberfahren */
#page-header .navbar a:hover,
#page-header .navbar a:focus-visible {
    color: #1688c5;
}

/* Navigationssymbole */
#page-header .navbar .icon {
    color: #526477;
}

/* Aktuelle Breadcrumb-Navigation */
#page-header .navbar .breadcrumbs a {
    color: #344054;
}

/* Trennlinien */
#page-header .navbar .inner {
    background: transparent;
}

/* Auf Smartphones kompakter */
@media (max-width: 700px) {
    #page-header .navbar {
        padding: 10px 8px;
    }
}


/* DIAMANTEN MODERN – FARBEN UND FORUMSKARTEN */

:root {
    --dw-bg: #ffffff;
    --dw-card: #ffffff;
    --dw-card-alt: #f7f9fc;
    --dw-text: #263445;
    --dw-muted: #66758a;
    --dw-border: #e3e8ee;
    --dw-gold: #e8bc48;
    --dw-blue: #1688c5;
}

/* Kategorie als elegante Karte */
.forabg,
.forumbg {
    background: var(--dw-card);
    border: 1px solid var(--dw-border);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(20, 35, 55, 0.05);
}

/* Kategorieüberschrift */
.forabg .header,
.forumbg .header {
    background: #fff8e8;
    border-bottom: 2px solid var(--dw-gold);
}

/* Überschriften lesbar */
.forabg .header a,
.forumbg .header a,
.forabg .header dt,
.forumbg .header dt,
.forabg .header dd,
.forumbg .header dd {
    color: #40351e;
}

/* Forumseinträge */
.forabg ul.topiclist li.row,
.forumbg ul.topiclist li.row {
    background: var(--dw-card);
    border-bottom: 1px solid var(--dw-border);
    transition: background-color 0.2s ease;
}

/* Abwechselnde Hintergrundfarbe */
.forabg ul.topiclist li.row:nth-child(even),
.forumbg ul.topiclist li.row:nth-child(even) {
    background: var(--dw-card-alt);
}

/* Hover */
.forabg ul.topiclist li.row:hover,
.forumbg ul.topiclist li.row:hover {
    background: #eef6fc;
}

/* Links und Beschreibungen */
.forabg a.forumtitle,
.forumbg a.topictitle {
    color: var(--dw-text);
}

.forabg a.forumtitle:hover,
.forumbg a.topictitle:hover {
    color: var(--dw-blue);
}

/* Abgerundete Karten auf Mobilgeräten */
@media (max-width: 700px) {
    .forabg,
    .forumbg {
        border-radius: 9px;
        margin-bottom: 12px;
    }
}
  

/* DIAMANTEN MODERN – KATEGORIEÜBERSCHRIFTEN */

.forabg ul.topiclist li.header dt,
.forabg ul.topiclist li.header dd,
.forumbg ul.topiclist li.header dt,
.forumbg ul.topiclist li.header dd {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

/* Etwas mehr Platz für die Überschriften */
.forabg ul.topiclist li.header,
.forumbg ul.topiclist li.header {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Smartphone-Anpassung */
@media (max-width: 700px) {
    .forabg ul.topiclist li.header dt,
    .forumbg ul.topiclist li.header dt {
        font-size: 13px;
    }
}
  

/* =========================================
   DIAMANTEN MODERN – DUNKELMODUS
   Schritt 20: Farbgrundlage
   ========================================= */

/* Dunkle Farbpalette */
html.dw-dark {
    --dw-bg: #171b23;
    --dw-card: #252b36;
    --dw-card-alt: #2b3240;
    --dw-text: #f1f4f8;
    --dw-muted: #aeb8c7;
    --dw-border: #394252;
    --dw-gold: #e8bc48;
    --dw-blue: #7dc8f4;
}

/* Seitenhintergrund */
html.dw-dark body,
html.dw-dark #wrap {
    background: var(--dw-bg);
    color: var(--dw-text);
}

/* Kopfbereich */
html.dw-dark .headerbar,
html.dw-dark #page-header .navbar {
    background: var(--dw-bg);
    color: var(--dw-text);
    border-color: var(--dw-border);
}

/* Navigation */
html.dw-dark #page-header .navbar a,
html.dw-dark #page-header .navbar .icon {
    color: var(--dw-text);
}

/* Kategorie-Karten */
html.dw-dark .forabg,
html.dw-dark .forumbg {
    background: var(--dw-card);
    border-color: var(--dw-border);
}

/* Kategorieüberschriften */
html.dw-dark .forabg .header,
html.dw-dark .forumbg .header {
    background: #30291e;
    border-bottom-color: var(--dw-gold);
}

html.dw-dark .forabg .header dt,
html.dw-dark .forabg .header dd,
html.dw-dark .forumbg .header dt,
html.dw-dark .forumbg .header dd,
html.dw-dark .forabg .header a,
html.dw-dark .forumbg .header a {
    color: #f3d28a;
}

/* Forumseinträge */
html.dw-dark .forabg ul.topiclist li.row,
html.dw-dark .forumbg ul.topiclist li.row {
    background: var(--dw-card);
    border-color: var(--dw-border);
    color: var(--dw-text);
}

html.dw-dark .forabg ul.topiclist li.row:nth-child(even),
html.dw-dark .forumbg ul.topiclist li.row:nth-child(even) {
    background: var(--dw-card-alt);
}

/* Hover */
html.dw-dark .forabg ul.topiclist li.row:hover,
html.dw-dark .forumbg ul.topiclist li.row:hover {
    background: #354356;
}

/* Forentitel */
html.dw-dark .forabg a.forumtitle,
html.dw-dark .forumbg a.topictitle {
    color: var(--dw-text);
}

/* Allgemeine Textbereiche */
html.dw-dark .forumtitle,
html.dw-dark .topictitle,
html.dw-dark .forum-description,
html.dw-dark .responsive-hide {
    color: var(--dw-text);
}

/* Links */
html.dw-dark a:hover {
    color: var(--dw-blue);
}


/* =========================================
   DIAMANTEN MODERN – THEME-SCHALTER
   ========================================= */

.dw-theme-controls {
    display: flex;
    justify-content: flex-end;
    padding: 5px 15px;
    background: #ffffff;
}

.dw-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #e3e8ee;
    border-radius: 50%;
    background: #f6f8fa;
    cursor: pointer;
    font-size: 19px;
    transition: background 0.2s ease,
                transform 0.2s ease;
}

.dw-theme-toggle:hover {
    background: #e9f3fa;
    transform: scale(1.06);
}

.dw-theme-toggle:focus-visible {
    outline: 2px solid #1688c5;
    outline-offset: 3px;
}

/* Dunkle Darstellung */
html.dw-dark .dw-theme-controls {
    background: #171b23;
}

html.dw-dark .dw-theme-toggle {
    background: #303848;
    border-color: #465163;
    color: #ffffff;
}

html.dw-dark .dw-theme-toggle:hover {
    background: #40516a;
}

/* Smartphone */
@media (max-width: 700px) {
    .dw-theme-controls {
        padding: 5px 10px;
    }
}


/* DIAMANTEN MODERN – DUNKELMODUS SCHRIFTFARBEN */

/* Standardlinks */
html.dw-dark #page-body a:link,
html.dw-dark #page-body a:visited {
    color: #82cfff;
}

/* Links beim Darüberfahren */
html.dw-dark #page-body a:hover,
html.dw-dark #page-body a:focus-visible {
    color: #f3cf75;
}

/* Forentitel */
html.dw-dark #page-body a.forumtitle,
html.dw-dark #page-body a.topictitle {
    color: #f1f4f8;
}

/* Letzte Beiträge */
html.dw-dark .lastpost a,
html.dw-dark .lastpost a:visited {
    color: #82cfff;
}

/* Allgemeine Beschreibungstexte */
html.dw-dark .forum-description,
html.dw-dark .responsive-hide,
html.dw-dark .lastpost,
html.dw-dark .lastpost span {
    color: #c2cbd7;
}

/* Benutzername – phpBB-Gruppenfarben erhalten */
html.dw-dark a.username,
html.dw-dark a.username-coloured {
    text-decoration-color: currentColor;
}

/* Foren als gelesen markieren */
html.dw-dark a.mark-read,
html.dw-dark .action-bar a {
    color: #82cfff;
}

/* Trennlinien dezenter */
html.dw-dark .forabg ul.topiclist li.row,
html.dw-dark .forumbg ul.topiclist li.row {
    border-color: #394252;
}
 

/* SCHRITT 25 – BEITRÄGE IM DUNKELMODUS */

/* Beitragskästen */
html.dw-dark .post,
html.dw-dark .post.bg1,
html.dw-dark .post.bg2,
html.dw-dark .post.bg3 {
    background-color: #252d39;
    color: #edf1f7;
    border: 1px solid #414c5d;
}

/* Beitragsinhalt */
html.dw-dark .postbody,
html.dw-dark .postbody .content,
html.dw-dark .postbody .content p,
html.dw-dark .postbody .content li {
    color: #edf1f7;
}

/* Überschriften und Links */
html.dw-dark .postbody h3,
html.dw-dark .postbody h3 a,
html.dw-dark .postbody a {
    color: #82cfff;
}

/* Datum und Zusatzinformationen */
html.dw-dark .postbody .author,
html.dw-dark .postbody .author span,
html.dw-dark .postprofile,
html.dw-dark .postprofile dd {
    color: #b9c5d4;
}

/* Benutzerprofil rechts */
html.dw-dark .postprofile {
    border-color: #414c5d;
}

/* Trennlinien innerhalb von Beiträgen */
html.dw-dark .postbody hr,
html.dw-dark .post hr {
    border-color: #414c5d;
}

/* Zitate */
html.dw-dark blockquote {
    background-color: #303a49;
    border: 1px solid #526174;
    color: #edf1f7;
}

/* Codefelder */
html.dw-dark .codebox {
    background-color: #1b222d;
    border-color: #526174;
    color: #edf1f7;
}
html.dw-dark .codebox code {
    color: #edf1f7;
}
 

/* SCHRITT 26 – PROFILTEXT IM DUNKELMODUS */

html.dw-dark .postprofile,
html.dw-dark .postprofile dt,
html.dw-dark .postprofile dd,
html.dw-dark .postprofile strong,
html.dw-dark .postprofile span {
    color: #dce4ee;
}

/* Profilüberschrift und Benutzerrolle */
html.dw-dark .postprofile .rank {
    color: #b9c5d4;
}

/* Links im Profil */
html.dw-dark .postprofile a:not(.username-coloured) {
    color: #82cfff;
}

/* Benutzergruppenfarben bleiben erhalten */
html.dw-dark .postprofile a.username-coloured {
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* SCHRITT 28 – ANTWORTEDITOR IM DUNKELMODUS */

/* Formularbereiche */
html.dw-dark #postingbox,
html.dw-dark #postingbox .panel,
html.dw-dark #options-panel,
html.dw-dark #attach-panel,
html.dw-dark .panel.bg1,
html.dw-dark .panel.bg2,
html.dw-dark .panel.bg3 {
    background-color: #252d39;
    color: #edf1f7;
}

/* Überschriften und Beschriftungen */
html.dw-dark #postingbox h3,
html.dw-dark #postingbox label,
html.dw-dark #postingbox dt,
html.dw-dark #postingbox dd,
html.dw-dark #options-panel label,
html.dw-dark #attach-panel label {
    color: #edf1f7;
}

/* Großes Texteingabefeld */
html.dw-dark #message {
    background-color: #1b222d;
    color: #edf1f7;
    border: 1px solid #526174;
}

/* Betreff und andere Texteingaben */
html.dw-dark #postingbox input.inputbox,
html.dw-dark #postingbox textarea.inputbox {
    background-color: #303a49;
    color: #edf1f7;
    border: 1px solid #526174;
}

/* BBCode-Schaltflächen */
html.dw-dark #format-buttons input,
html.dw-dark #format-buttons select {
    background-color: #303a49;
    color: #edf1f7;
    border: 1px solid #526174;
}

/* Smileys und Hilfetexte */
html.dw-dark #smiley-box,
html.dw-dark #smiley-box strong,
html.dw-dark #smiley-box a,
html.dw-dark #message-box {
    color: #edf1f7;
}

/* Optionen und Dateianhänge */
html.dw-dark #options-panel,
html.dw-dark #attach-panel {
    border-color: #526174;
}

/* Vorschau und Absenden */
html.dw-dark .submit-buttons input.button1 {
    background: #e8bc48;
    color: #1b222d;
    border-color: #c99b29;
}

html.dw-dark .submit-buttons input.button2 {
    background: #303a49;
    color: #edf1f7;
    border-color: #526174;
}


/* SCHRITT 29 – REITER IM DUNKELMODUS */

html.dw-dark .tabs .tab > a {
    background: #303a49;
    color: #dce4ee;
    border: 1px solid #526174;
}

html.dw-dark .tabs .tab.activetab > a,
html.dw-dark .tabs .tab > a:hover {
    background: #e8bc48;
    color: #1b222d;
    border-color: #c99b29;
}

html.dw-dark .tabs .tab.activetab > a span {
    color: #1b222d;
}



/* SCHRITT 32 – DEUTLICHE FETTSCHRIFT */

html.dw-dark .postbody .content strong,
html.dw-dark .postbody .content b,
html.dw-dark #preview .content strong,
html.dw-dark #preview .content b {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    color: #f3cf75;
}


/* SCHRITT 34 – UNTERE FORUMSBEREICHE */

/* Wer ist online / Berechtigungen */
html.dw-dark .stat-block h3,
html.dw-dark .stat-block h3 a,
html.dw-dark .forumbg h3,
html.dw-dark #page-body .permissions h3 {
    color: #f3cf75;
}

/* Allgemeine kleine Überschriften */
html.dw-dark #page-body h3 {
    color: #f3cf75;
}

/* Gesperrt-Schaltfläche */
html.dw-dark .button.locked,
html.dw-dark .button-icon-only.locked,
html.dw-dark .button .icon.fa-lock {
    color: #526174;
}

/* Forum-Informationsbereiche */
html.dw-dark .stat-block p,
html.dw-dark .stat-block li {
    color: #dce4ee;
}


/* SCHRITT 35 – FORENTITEL IM DUNKELMODUS */

html.dw-dark #page-body a.forumtitle:link,
html.dw-dark #page-body a.forumtitle:visited {
    color: #82cfff;
    font-weight: 700;
}

html.dw-dark #page-body a.forumtitle:hover,
html.dw-dark #page-body a.forumtitle:focus-visible {
    color: #f3cf75;
    text-decoration: underline;
}


/* SCHRITT 36 – BENUTZERNAMEN IM DUNKELMODUS */

/* Farbige Benutzernamen besser hervorheben */
html.dw-dark a.username-coloured {
    filter: brightness(1.5);
    font-weight: 700;
}

/* Beim Darüberfahren */
html.dw-dark a.username-coloured:hover {
    filter: brightness(1.8);
    text-decoration: underline;
}


/* SCHRITT 37 – GESPERRTE FOREN IM DUNKELMODUS */

/* Gesperrt-Schaltfläche */
html.dw-dark #page-body .button.locked,
html.dw-dark #page-body .button .icon.fa-lock {
    color: #dce4ee;
}

html.dw-dark #page-body .button.locked {
    background: #303a49;
    border: 1px solid #526174;
    box-shadow: none;
}

/* Hinweis: Das Forum ist gesperrt */
html.dw-dark #page-body .rules {
    background: #252d39;
    border: 1px solid #414c5d;
    border-radius: 6px;
    color: #dce4ee;
}

/* Text innerhalb des Hinweises */
html.dw-dark #page-body .rules,
html.dw-dark #page-body .rules strong,
html.dw-dark #page-body .rules p {
    color: #dce4ee;
}


/* SCHRITT 37 – KORREKTUR GESPERRTE FOREN */

/* Hinweisbalken für gesperrte Foren */
html.dw-dark #page-body .panel,
html.dw-dark #page-body .rules {
    background-color: #252d39;
    color: #dce4ee;
    border-color: #414c5d;
}

/* Gesperrt-Schaltfläche */
html.dw-dark #page-body .button,
html.dw-dark #page-body .button-secondary {
    background-color: #303a49;
    background-image: none;
    color: #dce4ee;
    border-color: #526174;
}

/* Symbole und Beschriftungen */
html.dw-dark #page-body .button .icon {
    color: #dce4ee;
}


/* SCHRITT 39 – FORENTITEL IM HELLMODUS */

html:not(.dw-dark) #page-body a.forumtitle:link,
html:not(.dw-dark) #page-body a.forumtitle:visited {
    color: #176b9a;
    font-weight: 700;
}

html:not(.dw-dark) #page-body a.forumtitle:hover,
html:not(.dw-dark) #page-body a.forumtitle:focus-visible {
    color: #b58419;
    text-decoration: underline;
}


/* SCHRITT 40 – THEMENTITEL IM HELLMODUS */

/* Normale Thementitel */
html:not(.dw-dark) #page-body a.topictitle:link,
html:not(.dw-dark) #page-body a.topictitle:visited {
    color: #176b9a;
    font-weight: 700;
}

/* Gold beim Darüberfahren */
html:not(.dw-dark) #page-body a.topictitle:hover,
html:not(.dw-dark) #page-body a.topictitle:focus-visible {
    color: #b58419;
    text-decoration: underline;
}


/* SCHRITT 41 – NEUES THEMA BUTTON */

/* Schaltfläche im Hellmodus */
html:not(.dw-dark) #page-body a.button.button-icon-only,
html:not(.dw-dark) #page-body a.button.button-secondary {
    /* Andere Schaltflächen bleiben unverändert */
}

/* Neues Thema / Antworten */
html:not(.dw-dark) #page-body a.button.button1 {
    background: #f3cf75;
    border: 1px solid #d6ad43;
    color: #263445;
    font-weight: 700;
}

/* Beschriftung und Symbol */
html:not(.dw-dark) #page-body a.button.button1 span,
html:not(.dw-dark) #page-body a.button.button1 .icon {
    color: #263445;
}

/* Hover */
html:not(.dw-dark) #page-body a.button.button1:hover {
    background: #e8bc48;
    border-color: #b58419;
}


/* SCHRITT 41 – NEUES THEMA IN GOLD */


/* SCHRITT 42 – GOLDENE HAUPTAKTIONEN */

/* Nur der Hauptbutton in den Aktionsleisten */
html:not(.dw-dark) #page-body .action-bar
a.button[href*="posting.php"] {
    background: #f3cf75;
    background-image: none;
    border: 1px solid #d6ad43;
    border-radius: 6px;
    box-shadow: none;
    color: #263445;
}

/* Schrift und Stiftsymbol */
html:not(.dw-dark) #page-body .action-bar
a.button[href*="posting.php"] span,
html:not(.dw-dark) #page-body .action-bar
a.button[href*="posting.php"] .icon {
    color: #263445;
    font-weight: 700;
}

/* Gold beim Darüberfahren */
html:not(.dw-dark) #page-body .action-bar
a.button[href*="posting.php"]:hover {
    background: #e8bc48;
    border-color: #b58419;
}

/* Andere Aktionsbuttons wieder dezent */
html:not(.dw-dark) #page-body .action-bar
a.button:not([href*="posting.php"]) {
    background: #f7f9fc;
    background-image: none;
    border: 1px solid #d6dde6;
    color: #526174;
}

html:not(.dw-dark) #page-body .action-bar
a.button:not([href*="posting.php"]) .icon {
    color: #526174;
}


/* SCHRITT 46 – PARTNERBEREICH NAUNHOF */

.dw-partner {
    margin: 30px auto 20px;
    max-width: 650px;
}

.dw-partner-link {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid #e3d5aa;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}

.dw-partner-link:hover {
    border-color: #d6ad43;
    box-shadow: 0 5px 18px rgba(0,0,0,0.12);
}

.dw-partner-logo {
    width: 110px;
    height: auto;
    flex-shrink: 0;
    border-radius: 8px;
}

.dw-partner-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dw-partner-text strong {
    color: #b58419;
    font-size: 17px;
}

.dw-partner-text span {
    color: #176b9a;
    font-size: 15px;
    font-weight: bold;
}

.dw-partner-text small {
    color: #64748b;
    font-size: 13px;
}

/* DUNKELMODUS */

html.dw-dark .dw-partner-link {
    background: #242d38;
    border-color: #66552b;
}

html.dw-dark .dw-partner-text strong {
    color: #f3cf75;
}

html.dw-dark .dw-partner-text span {
    color: #82cfff;
}

html.dw-dark .dw-partner-text small {
    color: #cbd5e1;
}

/* SMARTPHONE */

@media (max-width: 600px) {
    .dw-partner-link {
        flex-direction: column;
        text-align: center;
        padding: 18px 12px;
        gap: 12px;
    }

    .dw-partner-logo {
        width: 100px;
    }

    .dw-partner-text {
        align-items: center;
    }
}


/* SCHRITT 52 – SANFTES DASHBOARD */

/* Ruhiges Ein- und Ausblenden */
#sshg-dashboard {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        visibility 0.45s ease;
}

/* Sanft geschlossener Zustand */
#sshg-dashboard.dw-dashboard-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -48%);
}

/* Auch der kleine Öffnen-Button */
#sshg-dashboard-oeffnen {
    transition:
        opacity 0.4s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

/* Rücksicht auf Menschen mit reduzierten Animationen */
@media (prefers-reduced-motion: reduce) {
    #sshg-dashboard,
    #sshg-dashboard-oeffnen {
        transition: none !important;
    }
}


/* SCHRITT 57 – DASHBOARD-LAYOUT REPARIEREN */

/* DASHBOARD – ERGÄNZENDE AUSRICHTUNG */

#sshg-dashboard {
    align-items: center;
    justify-content: center;
}

#sshg-dashboard .dashboard-buttons {
    justify-content: center;
    align-items: center;
}

#sshg-dashboard .dashboard-button {
    min-width: 75px;
    min-height: 75px;
    box-sizing: border-box;
}

/* DASHBOARD – HANDYANSICHT */

@media (max-width: 500px) {
    #sshg-dashboard .dashboard-buttons {
        grid-template-columns: repeat(3, 52px);
        gap: 12px;
    }

    #sshg-dashboard .dashboard-button {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
    }
}




/* SCHRITT 84 – GLEICHMÄSSIGE DASHBOARD-ANIMATION */

#sshg-dashboard {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
}

#sshg-dashboard.dw-dashboard-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #sshg-dashboard {
        transition: none !important;
    }
}


/* SCHRITT 106 – FOOTER IN CHAMPAGNER-GOLD */

html:not(.dw-dark) #page-footer .navbar {
    background: #fff8e8 !important;
    border: 1px solid #e7d7a5 !important;
    border-bottom: 2px solid #dfbf55 !important;
    border-radius: 10px !important;
}



/* SCHRITT 108 – BRONZE-GOLDENER FOOTER IM DARKMODUS */

html.dw-dark #page-footer .navbar {
    background: #30291d !important;
    border: 1px solid #66552b !important;
    border-bottom: 2px solid #dfbf55 !important;
    border-radius: 10px !important;
}

/* Helle Schrift für gute Lesbarkeit */

html.dw-dark #page-footer .navbar,
html.dw-dark #page-footer .navbar a,
html.dw-dark #page-footer .navbar .icon {
    color: #f3cf75 !important;
}

html.dw-dark #page-footer .navbar a:hover {
    color: #82cfff !important;
}


/* SCHRITT 111 – WHATSAPP UND TELEGRAM */

/* WhatsApp – Grün */
#sshg-dashboard .dashboard-button.whatsapp-button {
    background: #25D366 !important;
    color: #ffffff !important;
    border: 1px solid #1eae52 !important;
}

/* Telegram – Blau */
#sshg-dashboard .dashboard-button.telegram-button {
    background: #229ED9 !important;
    color: #ffffff !important;
    border: 1px solid #1686bc !important;
}

/* Weiße Symbole */
#sshg-dashboard .whatsapp-button .icon,
#sshg-dashboard .telegram-button .icon {
    color: #ffffff !important;
    font-size: 34px !important;
}

/* Dezenter Effekt beim Darüberfahren */
#sshg-dashboard .whatsapp-button:hover,
#sshg-dashboard .telegram-button:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}


/* SCHRITT 112 – WHATSAPP UND TELEGRAM ZENTRIEREN */

#sshg-dashboard .dashboard-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 255px !important;
    gap: 15px !important;
}


/* SCHRITT 120 – BLOG-BUTTON IN GOLD */

#sshg-dashboard .dashboard-button.blog-button {
    background: #fff3d4 !important;
    border: 1px solid #d6ad43 !important;
    color: #b58419 !important;
}

#sshg-dashboard .dashboard-button.blog-button .icon {
    color: #b58419 !important;
    font-size: 34px !important;
}

#sshg-dashboard .dashboard-button.blog-button:hover {
    background: #ffe8a3 !important;
    box-shadow: 0 4px 12px rgba(181,132,25,0.25);
}

/* SCHRITT 133 – SUCHLEISTE NACH UNTEN RECHTS */

@media (min-width: 701px) {
    #page-header #search-box.search-header {
        position: relative !important;
        top: 185px !important;
        right: 90px !important;
        bottom: auto !important;
        z-index: 100 !important;
    }
}

/* SCHRITT 134 – SUCHLEISTE WAAGERECHT AUSRICHTEN */

@media (min-width: 701px) {
    #page-header #search-box.search-header {
        width: 210px !important;
        box-sizing: border-box !important;
    }

    #page-header #search-box.search-header form {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    #page-header #search-box.search-header fieldset {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #page-header #search-box.search-header input.inputbox {
        width: 150px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
}

/* SCHRITT 139 – DIAMANTEN-SEITENMENÜ */

#dw-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 999998;
    display: none;
}

#dw-side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: min(380px, 85vw);
    height: 100vh;
    box-sizing: border-box;
    background: #ffffff;
    color: #24364a;
    z-index: 999999;
    overflow-y: auto;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0.35s;
    padding: 30px 25px;
}

#dw-side-menu .dw-menu-logo {
    text-align: center;
    margin: 45px 0 30px;
}

#dw-side-menu .dw-menu-logo img {
    width: 100%;
    max-width: 290px;
    height: auto;
}

#dw-side-menu .dw-menu-links a {
    display: block;
    padding: 18px 15px;
    border-bottom: 1px solid #dddddd;
    color: #24364a;
    font-size: 20px;
    text-decoration: none;
}

#dw-side-menu #dw-menu-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 36px;
    background: transparent;
    border: none;
    color: #24364a;
    cursor: pointer;
}

/* SCHRITT 140 – MENÜ ÖFFNEN */

#dw-side-menu.dw-menu-active {
    transform: translateX(0);
    visibility: visible;
}

/* SCHRITT 142 – HAMBURGER-SYMBOL IM FORUM POSITIONIEREN */

@media (min-width: 701px) {
    #dw-menu-open {
        position: relative !important;
        top: 390px !important;
        left: 5px !important;
        z-index: 100 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 8px !important;
        cursor: pointer;
        font-size: 24px !important;
        color: #24364a !important;
    }

    html.dw-dark #dw-menu-open {
        color: #f1f1f1 !important;
    }
}

/* SCHRITT 144 – HAMBURGER-MENÜ IM DIAMANTEN-STIL */

#dw-menu-open {
    background: #fff4d8 !important;
    border: 1px solid #d6ad43 !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.10) !important;
    color: #8a6414 !important;
    padding: 3px 5px !important;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

#dw-menu-open:hover {
    background: #ffe5a3 !important;
    box-shadow: 0 3px 10px rgba(181, 132, 25, 0.25) !important;
}

/* Passend zum Dunkelmodus */
html.dw-dark #dw-menu-open {
    background: #30291d !important;
    border-color: #b58a36 !important;
    color: #f3cf75 !important;
}

html.dw-dark #dw-menu-open:hover {
    background: #493b23 !important;
}

/* SCHRITT 149 – KONTAKTFORMULAR IM DUNKELMODUS */

html.dw-dark #page-body h2,
html.dw-dark #page-body .panel dt,
html.dw-dark #page-body .panel dt label,
html.dw-dark #page-body .panel .explain,
html.dw-dark #page-body .panel .explain *,
html.dw-dark #page-body .panel .checkbox {
    color: #e4eaf2 !important;
}
/* SCHRITT 150 – KONTAKTFORMULAR: RESTLICHE TEXTE */

html.dw-dark #page-body .panel dd,
html.dw-dark #page-body .panel dd label,
html.dw-dark #page-body .panel dd span {
    color: #e4eaf2 !important;
}

/* SCHRITT 151 – HAMBURGER-MENÜ AUF DEM HANDY */

@media (max-width: 700px) {
    #dw-menu-open {
        position: relative !important;
        top: 300px !important;
        left: 10px !important;
        z-index: 100 !important;
    }
}

/* SCHRITT 163 – GORILLA AM PC FEIN ZENTRIEREN */

@media (min-width: 701px) {
    #page-header #site-description a.logo {
        position: relative !important;
        left: 50px !important;
    }
}

/* SCHRITT 166 – SEITENMENÜ MIT GOLDENEM KLICK-EFFEKT */

/* Sanfte Animation */
#dw-side-menu a {
    display: block;
    transition: background-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease;
    border-radius: 6px;
}

/* Maus darüber */
#dw-side-menu a:hover {
    background-color: #fff3d4 !important;
    color: #8b6412 !important;
    box-shadow: inset 3px 0 0 #d6ad43;
}

/* Beim Anklicken oder Berühren */
#dw-side-menu a:active {
    background-color: #f2d27c !important;
    color: #503900 !important;
    box-shadow: inset 4px 0 0 #b58419;
}

/* Tastaturbedienung */
#dw-side-menu a:focus-visible {
    outline: 2px solid #d6ad43;
    outline-offset: 2px;
}

/* SCHRITT 167 – DATUMS- UND UHRZEITSTREIFEN */

#dw-topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px;
    margin-bottom: 10px;
    background: #fff3d4;
    color: #755314;
    border-bottom: 2px solid #dfbf55;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
}

#dw-topbar .icon {
    color: #b58419;
    margin-right: 5px;
}

/* Dunkelmodus */
html.dw-dark #dw-topbar {
    background: #30291d;
    color: #f3cf75;
    border-bottom-color: #dfbf55;
}

html.dw-dark #dw-topbar .icon {
    color: #f3cf75;
}

/* Smartphone */
@media (max-width: 700px) {
    #dw-topbar {
        gap: 12px;
        padding: 10px 12px;
        font-size: 12px;
        flex-wrap: wrap;
    }
}


/* ==========================================
   DW – NEUE FORENÜBERSICHT 2026
   Blau-Gold-Design
   ========================================== */

/* Kategorie als goldumrandete Karte */
#page-body .forabg {
    border: 2px solid #e2b83f;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 22px;
    background: #f7faff;
    box-shadow: 0 4px 16px rgba(12, 38, 78, 0.12);
}

/* Dunkelblauer Kategorie-Kopf */
#page-body .forabg .topiclist > li.header {
    background: linear-gradient(
        110deg,
        #061b3c 0%,
        #07539a 55%,
        #061b3c 100%
    );
    border-bottom: 2px solid #e2b83f;
    padding: 10px 12px;
}

/* Weiße Überschriften */
#page-body .forabg .topiclist > li.header dt,
#page-body .forabg .topiclist > li.header dd,
#page-body .forabg .topiclist > li.header a {
    color: #ffffff;
    font-weight: 700;
}

/* Einzelne Forumszeilen */
#page-body .forabg ul.topiclist.forums {
    padding: 7px;
}

#page-body .forabg ul.topiclist.forums > li.row {
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #edf4fc 100%
    );
    border: 1px solid #d6e0eb;
    border-radius: 12px;
    margin: 5px 0 9px;
    padding: 8px 5px;
    box-shadow: 0 2px 5px rgba(15, 45, 80, 0.05);
    transition: background 0.2s, box-shadow 0.2s;
}

#page-body .forabg ul.topiclist.forums > li.row:hover {
    background: #e7f2ff;
    box-shadow: 0 3px 10px rgba(15, 45, 80, 0.12);
}

/* Forentitel */
#page-body .forabg a.forumtitle {
    font-weight: 700;
    font-size: 1.08em;
}

/* Dunkelmodus */
html.dw-dark #page-body .forabg {
    background: #202a39;
    border-color: #b58a36;
}

html.dw-dark #page-body .forabg ul.topiclist.forums > li.row {
    background: #293547;
    border-color: #46566c;
    color: #e8eef8;
}

html.dw-dark #page-body .forabg ul.topiclist.forums > li.row:hover {
    background: #34465e;
}

/* Smartphone */
@media (max-width: 700px) {
    #page-body .forabg {
        border-radius: 13px;
        margin-bottom: 15px;
    }

    #page-body .forabg ul.topiclist.forums {
        padding: 5px;
    }

    #page-body .forabg ul.topiclist.forums > li.row {
        border-radius: 9px;
        padding: 8px 4px;
    }
}


/* ==========================================
   DW – INDIVIDUELLE FOREN-ICONS 2026
   ========================================== */

/* Standard-Forensymbole optisch ersetzen */
#page-body .forabg ul.topiclist.forums
dl.row-item {
    position: relative;
    background-image: none !important;
}

/* Einheitlicher Icon-Kreis */
#page-body .forabg ul.topiclist.forums
dl.row-item > dt::before {
    content: "💎";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1.5px solid #d6ad43;
    border-radius: 50%;
    background: #edf5ff;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    pointer-events: none;
}

/* Platz für die Icons */
#page-body .forabg ul.topiclist.forums
dl.row-item > dt .list-inner {
    padding-left: 70px;
}

/* NEWS */
#page-body .forabg
dl.row-item:has(a[href*="f=106"]) > dt::before {
    content: "📰";
}

/* VERANSTALTUNGEN */
#page-body .forabg
dl.row-item:has(a[href*="f=151"]) > dt::before {
    content: "📅";
}

/* WIKKI KLÄRT AUF */
/* ID bei Bedarf später ergänzen */

/* THEMA DES TAGES */
#page-body .forabg
dl.row-item:has(a[href*="f=147"]) > dt::before {
    content: "💬";
}

/* WISSENSBIBLIOTHEK */
#page-body .forabg
dl.row-item:has(a[href*="f=146"]) > dt::before {
    content: "📚";
}

/* Dunkelmodus */
html.dw-dark #page-body .forabg
ul.topiclist.forums dl.row-item > dt::before {
    background: #26384d;
    border-color: #d6ad43;
}

/* Smartphone */
@media (max-width: 700px) {
    #page-body .forabg ul.topiclist.forums
    dl.row-item > dt::before {
        width: 36px;
        height: 36px;
        left: 7px;
        font-size: 19px;
    }

    #page-body .forabg ul.topiclist.forums
    dl.row-item > dt .list-inner {
        padding-left: 58px;
    }
}


/* ==========================================
   DW – INDIVIDUELLE RUBRIK-ICONS
   ========================================== */

/* News */
#page-body .dw-forum-106 > dt::before {
    content: "📰";
}

/* Veranstaltungen */
#page-body .dw-forum-151 > dt::before {
    content: "📅";
}

/* Thema des Tages */
#page-body .dw-forum-147 > dt::before {
    content: "💬";
}

/* Wissensbibliothek */
#page-body .dw-forum-146 > dt::before {
    content: "📚";
}


/* ==========================================
   DW – RUBRIK-ICONS: KORRIGIERTE ZUORDNUNG
   ========================================== */

/* News */
#page-body .forabg ul.topiclist.forums
dl.row-item.dw-forum-106 > dt::before {
    content: "📰";
}

/* Veranstaltungen */
#page-body .forabg ul.topiclist.forums
dl.row-item.dw-forum-151 > dt::before {
    content: "📅";
}

/* Thema des Tages */
#page-body .forabg ul.topiclist.forums
dl.row-item.dw-forum-147 > dt::before {
    content: "💬";
}

/* Wissensbibliothek */
#page-body .forabg ul.topiclist.forums
dl.row-item.dw-forum-146 > dt::before {
    content: "📚";
}


/* DW – Diamanten-Talk */
#page-body .forabg ul.topiclist.forums
dl.row-item.dw-forum-150 > dt::before {
    content: "💬";
}


/* DW – Wikki klärt auf */
#page-body .forabg ul.topiclist.forums
dl.row-item.dw-forum-107 > dt::before {
    content: "🧠";
}


/* DW – Hinter der Maske */
#page-body .forabg ul.topiclist.forums
dl.row-item.dw-forum-148 > dt::before {
    content: "🎭";
}


/* DW – Sucht Selbsthilfe: Aktuelle Themen */
#page-body .forabg ul.topiclist.forums
dl.row-item.dw-forum-134 > dt::before {
    content: "👥";
}



/* Blog-News */
#page-body .forabg ul.topiclist.forums
dl.row-item.dw-forum-132 > dt::before {
    content: "📖";
}

/* Forum-News */
#page-body .forabg ul.topiclist.forums
dl.row-item.dw-forum-12 > dt::before {
    content: "📢";
}

/* Hilfe & Feedback */
#page-body .forabg ul.topiclist.forums
dl.row-item.dw-forum-15 > dt::before {
    content: "🛠️";
}


/* ==========================================
   DW – CHAMPAGNER-GOLDENE ICON-INNENFLÄCHEN
   ========================================== */

/* Helle Ansicht */
html:not(.dw-dark) #page-body .forabg
ul.topiclist.forums dl.row-item > dt::before {
    background: linear-gradient(
        145deg,
        #fff9e9 0%,
        #f8e8bb 100%
    ) !important;

    border: 1.5px solid #d6ad43;
    box-shadow: 0 2px 7px rgba(181, 132, 25, 0.18);
}

/* Dunkelmodus – dezentes Bronze-Gold */
html.dw-dark #page-body .forabg
ul.topiclist.forums dl.row-item > dt::before {
    background: linear-gradient(
        145deg,
        #493c27 0%,
        #30291d 100%
    ) !important;

    border-color: #d6ad43;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
}


/* ==========================================
   DW – THEMENÜBERSICHT IM BLAU-GOLD-STIL
   ========================================== */

/* Äußerer Rahmen der Themenübersicht */
#page-body .forumbg {
    background: #f7faff;
    border: 2px solid #e2b83f;
    border-radius: 18px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 4px 16px rgba(12, 38, 78, 0.12);
}

/* Dunkelblauer Kopfbereich */
#page-body .forumbg ul.topiclist > li.header {
    background: linear-gradient(
        110deg,
        #061b3c 0%,
        #07539a 55%,
        #061b3c 100%
    );
    border-bottom: 2px solid #e2b83f;
    padding: 10px 12px;
}

/* Weiße Spaltenüberschriften */
#page-body .forumbg ul.topiclist > li.header dt,
#page-body .forumbg ul.topiclist > li.header dd,
#page-body .forumbg ul.topiclist > li.header a {
    color: #ffffff !important;
    font-weight: 700;
}

/* Themenliste bleibt kompakt */
#page-body .forumbg ul.topiclist.topics {
    margin: 0;
    padding: 0;
}

/* Dunkelmodus */
html.dw-dark #page-body .forumbg {
    background: #202a39;
    border-color: #b58a36;
}

/* Smartphone */
@media (max-width: 700px) {
    #page-body .forumbg {
        border-radius: 13px;
    }
}


/* ==========================================
   DW – FÜNF SCHNELLZUGRIFF-KACHELN 2026
   ========================================== */

#page-body .dw-quicknav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0 26px;
}

#page-body .dw-quicknav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 125px;
    padding: 18px 12px;
    box-sizing: border-box;
    background: linear-gradient(145deg, #ffffff, #edf5ff);
    border: 1.5px solid #d6ad43;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(12, 38, 78, 0.08);
    text-align: center;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#page-body .dw-quicknav-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(12, 38, 78, 0.16);
}

#page-body .dw-quicknav-card:focus-visible {
    outline: 3px solid #1688c5;
    outline-offset: 3px;
}

#page-body .dw-quicknav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border: 1px solid #d6ad43;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff9e9, #f8e8bb);
    font-size: 25px;
    line-height: 1;
}

#page-body .dw-quicknav-card .dw-quicknav-title {
    color: #123e70;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

#page-body .dw-quicknav-card .dw-quicknav-desc {
    color: #526477;
    font-size: 13px;
    line-height: 1.4;
}

/* Fünfte Kachel über die gesamte Breite */
#page-body .dw-quicknav-feature {
    grid-column: 1 / -1;
}

/* Dunkelmodus */
html.dw-dark #page-body .dw-quicknav-card {
    background: linear-gradient(145deg, #293547, #202a39);
    border-color: #b58a36;
}

html.dw-dark #page-body .dw-quicknav-icon {
    background: linear-gradient(145deg, #493c27, #30291d);
    border-color: #d6ad43;
}

html.dw-dark #page-body .dw-quicknav-card .dw-quicknav-title {
    color: #f3cf75;
}

html.dw-dark #page-body .dw-quicknav-card .dw-quicknav-desc {
    color: #dce4ee;
}

/* Smartphone: alle Kacheln untereinander */
@media (max-width: 700px) {
    #page-body .dw-quicknav {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin: 12px 0 20px;
    }

    #page-body .dw-quicknav-card {
        min-height: 90px;
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #page-body .dw-quicknav-card {
        transition: none;
    }
}


/* ==========================================
   DW – FOTOMOTIVE IN DEN SCHNELLZUGRIFFEN
   ========================================== */
#page-body .dw-quicknav-card {
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
    gap: 18px;
    padding: 16px 22px;
    min-height: 130px;
}
#page-body .dw-quicknav-card .dw-quicknav-icon {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: contain;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    flex: 0 0 100px;
}
#page-body .dw-quicknav-copy {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
#page-body .dw-quicknav-feature {
    justify-content: center;
}
html.dw-dark #page-body .dw-quicknav-card .dw-quicknav-icon {
    background: transparent;
    border: 0;
}
@media (max-width: 700px) {
    #page-body .dw-quicknav-card {
        gap: 12px;
        padding: 12px;
        min-height: 100px;
    }
    #page-body .dw-quicknav-card .dw-quicknav-icon {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }
    #page-body .dw-quicknav-feature {
        justify-content: flex-start;
    }
}

/* ==========================================
   DW – DEIN MOMENT DER RUHE (KOMPAKT)
   ========================================== */
#page-body .dw-ruhe {
    margin: 16px 0 22px;
    padding: 7px 12px 9px;
    text-align: center;
    color: #123e70;
}
#page-body .dw-ruhe h2 {
    margin: 0 0 3px;
    color: #123e70;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}
#page-body .dw-ruhe-wave {
    width: min(100%, 560px);
    height: 43px;
    margin: 0 auto 1px;
    overflow: hidden;
}
#page-body .dw-ruhe-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}
#page-body .dw-ruhe-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    animation: dw-ruhe-flow 16s linear infinite alternate;
}
#page-body .dw-ruhe-line-gold { stroke: #d6ad43; opacity: .9; }
#page-body .dw-ruhe-line-blue {
    stroke: #1688c5;
    opacity: .55;
    animation-duration: 20s;
    animation-direction: alternate-reverse;
}
@keyframes dw-ruhe-flow {
    from { transform: translateX(-12%); }
    to { transform: translateX(12%); }
}
#page-body .dw-ruhe-timer {
    display: inline-block;
    margin: 0;
    padding: 4px 13px;
    border: 1px solid #d6ad43;
    border-radius: 20px;
    background: #fff8e8;
    color: #123e70;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
html.dw-dark #page-body .dw-ruhe,
html.dw-dark #page-body .dw-ruhe h2 { color: #f3cf75; }
html.dw-dark #page-body .dw-ruhe-timer {
    background: #30291d;
    color: #f3cf75;
    border-color: #b58a36;
}
@media (max-width: 700px) {
    #page-body .dw-ruhe { margin: 14px 0 20px; padding: 6px 8px 8px; }
    #page-body .dw-ruhe h2 { font-size: 15px; }
    #page-body .dw-ruhe-wave { height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    #page-body .dw-ruhe-line { animation: none; }
}