/*
    Visio / phpBB 3.3.x – barrierearme Komplettfassung
    Zielgruppe: stark sehbehinderte Nutzerinnen und Nutzer

    Version 0.6.2 (build 2026-04-30 1345)

    Installation:
    1. Diese Datei ersetzt die bisherige styles/visio/theme/visio.css bzw. eure bisherige angepasste CSS-Datei.
    2. Es ist keine zusätzliche Import-Regel erforderlich.
    3. phpBB-Cache und Browser-Cache leeren.

    Hinweise:
    - Bestehende Bildpfade des Visio-Styles bleiben unverändert.
    - Farbanpassungen erfolgen zentral über CSS Custom Properties.
    - Hover- und Fokuszustände ändern keine Border-Stärken, damit keine Layout-Sprünge entstehen.
*/

/* -----------------------------
   1. Design-Tokens
------------------------------ */
:root {
    --v-bg: #ffffff;
    --v-text: #000000;
    --v-muted-text: #202020;

    --v-brand: #0b6b2c;
    --v-brand-hover: #084f21;
    --v-brand-soft: #eaf6e2;
    --v-brand-soft-2: #d8edca;

    --v-panel: #eaf6e2;
    --v-panel-strong: #d8edca;
    --v-list-bg: #084f21;
    --v-list-bg-2: #0b6b2c;
    --v-topiclist-bg: #084f21;
    --v-row: #ffffff;
    --v-row-alt: #f7fbf3;
    --v-row-hover: #fff2a8;

    --v-link: #003b7a;
    --v-link-hover: #000000;
    --v-danger: #8b0000;
    --v-warning-bg: #fff8c9;

    --v-border: #000000;
    --v-border-soft: #6f6f6f;
    --v-focus: #ffd400;
    --v-focus-inner: #000000;

    --v-radius-sm: 4px;
    --v-radius-md: 8px;
    --v-radius-lg: 12px;

    --v-font-size: 20px;
    --v-line-height: 1.75;
    --v-hit-area: 44px;
}

/* -----------------------------
   2. Grundtypografie und Layout
------------------------------ */
@font-face {
    font-family: "tiresias";
    src: url("./font/Tiresias_Infofont.ttf");
    font-display: swap;
}

html {
    font-size: 100%;
    background: var(--v-bg);
}

html,
body {
    color: var(--v-text);
    background-color: var(--v-bg);
    padding: 0;
}

body,
h1,
h2,
h3,
h4,
dl.faq,
p.author,
.button,
.search-box .inputbox,
.dropdown-extended .header,
.notification_list p.notifications_title,
li.header dt,
li.header dd,
label {
    font-family: "tiresias", "Atkinson Hyperlegible", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

body {
    margin: 0;
    overflow-wrap: break-word;
    font-size: var(--v-font-size);
    line-height: var(--v-line-height);
    letter-spacing: 0.02em;
    font-variant: normal;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

#wrap {
    margin-top: 0;
    border: 0;
    background-color: var(--v-bg);
    max-width: 100%;
    min-width: 300px;
    padding-left: clamp(8px, 2vw, 24px);
    padding-right: clamp(8px, 2vw, 24px);
}

p,
.content,
.postbody,
.panel,
.stat-block,
table.table1 td,
dl.details dd,
dl.faq {
    color: var(--v-text);
    line-height: var(--v-line-height);
}

h1,
h2,
h3,
h4 {
    color: var(--v-text);
    line-height: 1.35;
    letter-spacing: 0.01em;
}

h2,
.content h2,
.panel h2 {
    border-bottom: 4px solid var(--v-brand);
    padding-bottom: 0.25em;
    text-transform: none;
}

h3 {
    border-bottom: 3px solid var(--v-border);
}

/* -----------------------------
   3. Links, Fokus und Tastaturbedienung
------------------------------ */
a,
a:visited,
dl.details dd a,
dl.faq a,
.postlink,
.copyright a {
    color: var(--v-link);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.18em;
}

.content a,
.postbody a,
.panel a,
dl.faq a,
.rules a {
    text-decoration: underline;
}

a:hover,
a:focus,
a:active,
h3 a:hover,
h3 a:focus {
    color: var(--v-link-hover);
    text-decoration: underline;
}

:focus {
    outline: 4px solid var(--v-focus);
    outline-offset: 3px;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
.tab > a:focus-visible,
#navigation a:focus-visible,
.dropdown a:focus-visible,
li.row:focus-within {
    outline: 4px solid var(--v-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--v-focus-inner);
}

/* Größere Klick-/Touch-Ziele */
a,
button,
.button,
a.button1,
a.button2,
input.button1,
input.button2,
input.button3,
.small-icon > a,
.dropdown a,
#navigation a,
#tabs .tab > a {
    min-height: var(--v-hit-area);
}

button,
.button,
a.button1,
a.button2,
input.button1,
input.button2,
input.button3 {
    box-sizing: border-box;
}

/* -----------------------------
   4. Header, Logo, Suche
------------------------------ */
.headerbar,
#page-header .headerbar {
    background-color: var(--v-bg);
    background-image: none;
    color: var(--v-text);
    border-bottom: 4px solid var(--v-brand);
}

#page-header .headerbar h1 {
    color: var(--v-text);
}

#logo {
    padding-top: 20px;
    padding-bottom: 8px;
}

.site_logo {
    background: url("./images/campuslogo.png") no-repeat;
    background-size: contain;
    height: 80px;
    width: 245px;
}

.search-header {
    box-shadow: none;
}

#page-header .headerbar .search-box.search-header fieldset,
.search-box fieldset {
    display: inline-flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    border: 3px solid var(--v-border);
    border-radius: var(--v-radius-md);
    background: var(--v-bg);
}

.search-box .inputbox,
#page-header .headerbar .search-box.search-header fieldset .inputbox,
input.inputbox,
textarea.inputbox,
select {
    background-image: none;
    background-color: var(--v-bg);
    color: var(--v-text);
    border: 3px solid var(--v-border);
    border-radius: var(--v-radius-sm);
    box-sizing: border-box;
    min-height: var(--v-hit-area);
    padding: 6px 10px;
    font-size: 1rem;
    line-height: 1.4;
    margin-left: 0;
}

.search-box .button,
.search-box a.button,
.search-box input.button1,
.search-box input.button2,
.search-box input.button3,
.search-box .button-search,
.search-box .button-search-end,
.search-box .search-icon,
.search-box .search-adv-icon {
    box-sizing: border-box;
    min-height: var(--v-hit-area);
    height: var(--v-hit-area);
    max-height: var(--v-hit-area);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    line-height: 1;
    vertical-align: middle;
}

.search-box .search-icon::before,
.search-box .search-adv-icon::before {
    line-height: 1;
}

input.inputbox:hover,
textarea.inputbox:hover,
select:hover,
.search-box .inputbox:hover {
    border-width: 3px;
    border-style: solid;
    border-color: var(--v-brand);
    background-color: #fffef2;
}

input.inputbox:focus,
textarea.inputbox:focus,
select:focus,
.search-box .inputbox:focus,
input.inputbox:focus-visible,
textarea.inputbox:focus-visible,
select:focus-visible,
.search-box .inputbox:focus-visible {
    border-width: 3px;
    border-style: solid;
    border-color: var(--v-brand-hover);
    background-color: #fffef2;
}

/* -----------------------------
   5. Navigation und Breadcrumbs
------------------------------ */
.navbar {
    background-color: var(--v-brand-soft);
    color: var(--v-text);
    border: 3px solid var(--v-brand);
    border-radius: var(--v-radius-md);
}

.breadcrumbs .crumb a {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
}

.breadcrumbs .crumb::before {
    vertical-align: middle;
}

#quick-links a.responsive-menu-link::before {
    font-size: 2.4em;
    line-height: 1;
}

ul.linklist li.responsive-menu a.responsive-menu-link::before {
    border-color: var(--v-border);
}

#username_logged_in,
ul.linklist > li.rightside,
p.rightside,
a.rightside,
.responsive-center {
    font-size: 1.15rem;
    text-align: right;
    vertical-align: bottom;
    line-height: 1.5;
}

.right.responsive-center.time.rightside {
    display: none;
}

.action-bar {
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* -----------------------------
   6. Buttons
------------------------------ */
.button,
a.button1,
input.button1,
input.button3,
a.button2,
input.button2,
.button-secondary,
.action-bar .button {
    background-color: var(--v-brand);
    background-image: none;
    color: #ffffff;
    border: 3px solid var(--v-brand);
    border-radius: var(--v-radius-md);
    font-family: "tiresias", "Open Sans", Verdana, Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
    padding: 10px 14px;
    margin-right: 0;
    text-decoration: none;
}

.button .icon,
.button-secondary .icon,
.button-secondary {
    color: #ffffff;
}

.button:hover,
.button:focus,
a.button1:hover,
a.button1:focus,
input.button1:hover,
input.button1:focus,
a.button2:hover,
a.button2:focus,
input.button2:hover,
input.button2:focus,
input.button3:hover,
input.button3:focus,
.button-secondary:hover,
.button-secondary:focus,
.action-bar .button:hover,
.action-bar .button:focus {
    background-color: #ffffff;
    background-image: none;
    color: var(--v-brand-hover);
    border-color: var(--v-brand-hover);
}

.button:hover .icon,
.button:focus .icon,
.button .icon:hover,
.button .icon:focus,
.button-secondary:focus,
.button-secondary:hover {
    color: var(--v-brand-hover);
}

/* -----------------------------
   7. Foren-, Themen- und Beitragslisten
------------------------------ */
.forabg,
.forumbg {
    background-color: var(--v-brand);
    background-image: none;
    border: 3px solid var(--v-border);
    border-radius: var(--v-radius-lg);
    clear: both;
    margin-bottom: 8px;
    padding: 6px;
}

.forumbg {
    background-color: var(--v-brand-hover);
}

.forabg .header a,
.forumbg .header a,
li.header dt,
li.header dd,
li.header dl.icon dt .list-inner a {
    color: #ffffff;
}

.forabg .header a:hover,
.forabg .header a:focus,
.forumbg .header a:hover,
.forumbg .header a:focus,
li.header dl.icon dt .list-inner a:hover,
li.header dl.icon dt .list-inner a:focus {
    color: var(--v-focus);
}

li.header dt,
li.header dd,
label {
    height: auto;
    min-height: 40px;
    padding-top: 8px;
}

li.header dd {
    font-size: 0.95rem;
}

ul.forums,
ul.topics,
ul.topiclist {
    background-color: var(--v-list-bg);
    background-image: none;
    color: #ffffff;
}

ul.forums {
    background-color: var(--v-list-bg);
}

ul.topics,
ul.topiclist {
    background-color: var(--v-topiclist-bg);
}

ul.forums a,
ul.topics a,
ul.topiclist a {
    color: #ffffff;
}

ul.forums li.row,
ul.topics li.row,
ul.topiclist li.row {
    color: var(--v-text);
}

ul.topiclist li.row a,
ul.forums li.row a,
ul.topics li.row a {
    color: var(--v-link);
}

ul.forums a:hover,
ul.forums a:focus,
ul.topics a:hover,
ul.topics a:focus,
ul.topiclist a:hover,
ul.topiclist a:focus {
    color: var(--v-link-hover);
}

li.row,
.row,
.bg1,
.bg2,
.row.bg2 {
    background-color:#F7FBF3;
    border-bottom: 3px solid var(--v-border-soft);
    border-top: 3px solid var(--v-list-bg-2);
    color: var(--v-text);
}

li.row:nth-child(even),
.bg2 {
    background-color: var(--v-row-alt);
}

li.row:hover,
li.row:focus,
li.row:focus-within,
ul.topiclist li.row:hover,
ul.topiclist li.row:focus-within {
    background-color: var(--v-row-hover);
}

ul.forums li.row,
ul.topics li.row,
ul.topiclist li.row,
ul.topiclist li.row:hover,
dt label,
dt span,
.postprofile,
.copyright {
    color: var(--v-text);
}

li.header,
ul.forums li.header,
ul.topics li.header,
ul.topiclist li.header {
    background-color: var(--v-list-bg);
    color: #ffffff;
}

li.header a,
li.header dt,
li.header dd,
li.header span {
    color: #ffffff;
}

li.header a:hover,
li.header a:focus,
ul.forums li.header a:hover,
ul.forums li.header a:focus,
ul.topics li.header a:hover,
ul.topics li.header a:focus,
ul.topiclist li.header a:hover,
ul.topiclist li.header a:focus {
    color: var(--v-focus);
}

ul.topiclist li.row dd {
    border-left: 3px solid var(--v-border-soft);
}

li.header dl.icon dt .list-inner {
    text-align: center;
}

/* Große, gut erkennbare Status-Icons beibehalten */
dl.icon dt .list-inner {
    padding-left: 130px;
    min-height: 120px;
}

dl.row-item dt .list-inner {
    padding-left: 125px;
}

dl.row-item {
    background-size: 108px;
}

.icon,
.button .icon {
    font-size: 1.45rem;
}

.icon.icon-md {
    font-size: 1.1rem;
}

.icon.icon-gray,
a:hover .icon.icon-gray,
a:focus .icon.icon-gray {
    color: var(--v-text);
}

.small-icon > a {
    padding: 12px 0 12px 22px;
    font-size: 1rem;
}

.top {
    font-size: 1rem;
}

.unread:hover,
.unread:focus {
    text-decoration: underline;
}

/* Originale Visio/phpBB Bildzuordnung */
.forum_link                    { background-image: url("./images/forum_link.gif"); }
.forum_read                    { background-image: url("./images/forum_read.gif"); }
.forum_read_locked             { background-image: url("./images/forum_read_locked.gif"); }
.forum_read_subforum           { background-image: url("./images/forum_read_subforum.gif"); }
.forum_unread                  { background-image: url("./images/forum_unread.gif"); }
.forum_unread_locked           { background-image: url("./images/forum_unread_locked.gif"); }
.forum_unread_subforum         { background-image: url("./images/forum_unread_subforum.gif"); }
.global_read                   { background-image: url("./images/announce_read.gif"); }
.global_read_mine              { background-image: url("./images/announce_read_mine.gif"); }
.global_read_locked            { background-image: url("./images/announce_read_locked.gif"); }
.global_read_locked_mine       { background-image: url("./images/announce_read_locked_mine.gif"); }
.global_unread                 { background-image: url("./images/announce_unread.gif"); }
.global_unread_mine            { background-image: url("./images/announce_unread_mine.gif"); }
.global_unread_locked          { background-image: url("./images/announce_unread_locked.gif"); }
.global_unread_locked_mine     { background-image: url("./images/announce_unread_locked_mine.gif"); }
.announce_read                 { background-image: url("./images/announce_read.gif"); }
.announce_read_mine            { background-image: url("./images/announce_read_mine.gif"); }
.announce_read_locked          { background-image: url("./images/announce_read_locked.gif"); }
.announce_read_locked_mine     { background-image: url("./images/announce_read_locked_mine.gif"); }
.announce_unread               { background-image: url("./images/announce_unread.gif"); }
.announce_unread_mine          { background-image: url("./images/announce_unread_mine.gif"); }
.announce_unread_locked        { background-image: url("./images/announce_unread_locked.gif"); }
.announce_unread_locked_mine   { background-image: url("./images/announce_unread_locked_mine.gif"); }
.sticky_read                   { background-image: url("./images/sticky_read.gif"); }
.sticky_read_mine              { background-image: url("./images/sticky_read_mine.gif"); }
.sticky_read_locked            { background-image: url("./images/sticky_read_locked.gif"); }
.sticky_read_locked_mine       { background-image: url("./images/sticky_read_locked_mine.gif"); }
.sticky_unread                 { background-image: url("./images/sticky_unread.gif"); }
.sticky_unread_mine            { background-image: url("./images/sticky_unread_mine.gif"); }
.sticky_unread_locked          { background-image: url("./images/sticky_unread_locked.gif"); }
.sticky_unread_locked_mine     { background-image: url("./images/sticky_unread_locked_mine.gif"); }
.topic_moved                   { background-image: url("./images/topic_moved.gif"); }
.topic_read                    { background-image: url("./images/topic_read.gif"); }
.topic_read_mine               { background-image: url("./images/topic_read_mine.gif"); }
.topic_read_hot                { background-image: url("./images/topic_read.gif"); }
.topic_read_hot_mine           { background-image: url("./images/topic_read_mine.gif"); }
.topic_read_locked             { background-image: url("./images/topic_read_locked.gif"); }
.topic_read_locked_mine        { background-image: url("./images/topic_read_locked_mine.gif"); }
.topic_unread                  { background-image: url("./images/topic_unread.gif"); }
.topic_unread_mine             { background-image: url("./images/topic_unread_mine.gif"); }
.topic_unread_hot              { background-image: url("./images/topic_unread_hot.gif"); }
.topic_unread_hot_mine         { background-image: url("./images/topic_unread_hot_mine.gif"); }
.topic_unread_locked           { background-image: url("./images/topic_unread_locked.gif"); }
.topic_unread_locked_mine      { background-image: url("./images/topic_unread_locked_mine.gif"); }

/* -----------------------------
   8. Panels, FAQ, Statistik, Regeln
------------------------------ */
.panel,
.stat-block {
    background-color: var(--v-panel);
    background-image: none;
    border: 3px solid var(--v-brand);
    border-radius: var(--v-radius-md);
    color: var(--v-text);
    font-size: 1rem;
}

.stat-block p {
    padding: 15px;
    line-height: var(--v-line-height);
}

.stat-block h3 {
    background-color: var(--v-brand);
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    border-radius: var(--v-radius-md) var(--v-radius-md) 0 0;
    padding: 8px 12px;
}

.stat-block.statistics {
    display: none;
}

hr.dashed {
    border-top: 3px dashed var(--v-brand);
    margin: 12px 0;
}

dl.faq dt {
    color: var(--v-text);
    background-color: var(--v-row-hover);
    border-left: 6px solid var(--v-brand);
    padding: 8px 12px;
}

.rules.rules-link,
.rules {
    color: var(--v-danger);
    background-color: var(--v-warning-bg);
    border: 3px solid var(--v-danger);
    border-radius: var(--v-radius-md);
    padding: 10px 12px;
}

.rules.rules-link a,
.rules a {
    color: var(--v-danger);
    font-weight: 700;
}

/* -----------------------------
   9. Dropdowns und Jumpbox
------------------------------ */
.dropdown .dropdown-contents {
    background-color: var(--v-brand-soft);
    border: 4px solid var(--v-border);
    border-radius: var(--v-radius-md);
    font-size: 1rem;
    color: var(--v-text);
}

.dropdown li,
.dropdown li li {
    margin: 4px 0;
    border-top: 2px dotted var(--v-border-soft);
}

.dropdown li.separator {
    border-top: 3px solid var(--v-border);
    margin: 6px 0;
}

.dropdown .dropdown-contents .jumpbox-cat-link {
    background-color: var(--v-brand);
    color: #ffffff;
    border-top-color: var(--v-brand);
    font-weight: 700;
}

.dropdown .dropdown-contents .jumpbox-sub-link {
    background-color: var(--v-brand-soft);
    color: var(--v-text);
}

.dropdown .dropdown-contents .jumpbox-sub-link:hover,
.dropdown .dropdown-contents .jumpbox-sub-link:focus {
    background-color: var(--v-row-hover);
    color: var(--v-text);
    text-decoration: underline;
}

/* -----------------------------
   10. Benutzerkontrollzentrum / Navigation Panels
------------------------------ */
#navigation {
    padding-top: 50px;
}

#navigation a {
    background-color: #ffffff;
    background-image: none;
    color: var(--v-text);
    border: 4px solid var(--v-brand);
    border-radius: var(--v-radius-md) 0 0 var(--v-radius-md);
    font-weight: 700;
    padding: 10px 12px;
}

#navigation a:hover,
#navigation a:focus,
#navigation #active-subsection a,
#navigation #active-subsection a:hover,
#navigation #active-subsection a:focus {
    color: #ffffff;
    background-color: var(--v-brand);
    background-image: none;
}

.panel-container h3,
.panel-container hr,
#cp-menu hr {
    border-color: var(--v-brand);
}

#cp-main .panel {
    min-height: 320px;
    padding: 10px 14px;
}

/* -----------------------------
   11. Tabs
------------------------------ */
#tabs .tab > a {
    background-color: var(--v-brand-soft);
    background-image: none;
    color: var(--v-text);
    border-radius: var(--v-radius-md) var(--v-radius-md) 0 0;
    border: 3px solid var(--v-brand);
    font-weight: 700;
}

#tabs .tab > a:hover,
#tabs .tab > a:focus,
#tabs .activetab > a,
#tabs .activetab > a:hover,
#tabs .activetab > a:focus {
    background-color: var(--v-brand);
    background-image: none;
    border-color: var(--v-brand);
    box-shadow: none;
    color: #ffffff;
}

/* -----------------------------
   12. Tabellen und Formulare
------------------------------ */
table.table1 {
    border-collapse: separate;
    border-spacing: 0;
}

table.table1 th,
table.table1 td {
    border-bottom: 2px solid var(--v-border-soft);
    padding: 10px;
}

table.table1 th {
    background: var(--v-brand);
    color: #ffffff;
    font-weight: 700;
}

label {
    color: var(--v-text);
    font-weight: 700;
}

fieldset.fields1 dl,
fieldset.fields2 dl {
    margin-bottom: 10px;
}

/* -----------------------------
   13. Footer
------------------------------ */
.footer-row {
    font-size: 0.85rem;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

/* -----------------------------
   14.1 Border-Normalisierung gegen Layout-Sprünge
------------------------------ */
input.inputbox,
textarea.inputbox,
select,
.search-box .inputbox,
.button,
a.button1,
input.button1,
input.button3,
a.button2,
input.button2,
.button-secondary,
#tabs .tab > a,
#navigation a,
.panel,
.stat-block,
.rules,
.dropdown .dropdown-contents,
.forabg,
.forumbg {
    box-sizing: border-box;
}

input.inputbox:hover,
input.inputbox:focus,
textarea.inputbox:hover,
textarea.inputbox:focus,
select:hover,
select:focus,
.search-box .inputbox:hover,
.search-box .inputbox:focus {
    border-width: 3px;
}

/* -----------------------------
   14.1 Zusätzliche Normalisierung für phpBB-Suchbuttons
------------------------------ */
.search-box .button-search,
.search-box .button-search-end {
    border-radius: var(--v-radius-md);
}

.search-box .button-search-end {
    margin-left: 0;
}

/* -----------------------------
   14. Responsive Optimierungen
------------------------------ */
@media (max-width: 700px) {
    :root {
        --v-font-size: 18px;
    }

    #wrap {
        padding-left: 8px;
        padding-right: 8px;
    }

    #username_logged_in,
    ul.linklist > li.rightside,
    p.rightside,
    a.rightside,
    .responsive-center {
        text-align: left;
        font-size: 1rem;
    }

    dl.icon dt .list-inner,
    dl.row-item dt .list-inner {
        padding-left: 0;
        padding-top: 112px;
        min-height: auto;
    }

    ul.topiclist li.row dd {
        border-left: 0;
        border-top: 2px solid var(--v-border-soft);
    }

    #navigation {
        padding-top: 10px;
    }

    #navigation a {
        border-radius: var(--v-radius-md);
    }
}

/* -----------------------------
   15. Systemeinstellungen respektieren
------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    :focus-visible,
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 3px solid CanvasText;
        box-shadow: none;
    }

    .button,
    a.button1,
    input.button1,
    input.button3,
    a.button2,
    input.button2 {
        border: 2px solid ButtonText;
    }
}

/* Ergänzungen */

a.button1:hover,
a.button1:focus,
input.button1:hover,
input.button1:focus,
a.button2:hover,
a.button2:focus,
input.button2:hover,
input.button2:focus,
input.button3:hover,
input.button3:focus {
    border: 3px solid var(--v-brand-hover);
}

.footer-row a {
    min-height: 0;
}

/* -------------------------------------------------
   Header-Suche: Buttons sauber ausrichten + Hover/Focus
-------------------------------------------------- */

#page-header .search-box fieldset,
#page-header .headerbar .search-box.search-header fieldset {
    overflow: visible;
    align-items: center;
}

/* Beide Suchbuttons oben rechts neben dem Suchfeld */
#page-header .search-box .button-search,
#page-header .search-box .button-search-end,
#page-header .search-box button.button-search,
#page-header .search-box a.button-search-end {
    box-sizing: border-box;
    min-width: var(--v-hit-area);
    min-height: var(--v-hit-area);
    height: var(--v-hit-area);
    max-height: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 12px;
    margin: 0;

    background-color: var(--v-brand);
    background-image: none;
    color: #ffffff;

    border: 3px solid var(--v-brand);
    border-radius: var(--v-radius-md);

    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
}

/* Icons innerhalb der beiden Suchbuttons */
#page-header .search-box .button-search .icon,
#page-header .search-box .button-search-end .icon {
    color: #ffffff;
    line-height: 1;
    margin: 0;
}

/* Hover: invers, wie die anderen Buttons */
#page-header .search-box .button-search:hover,
#page-header .search-box .button-search-end:hover,
#page-header .search-box button.button-search:hover,
#page-header .search-box a.button-search-end:hover {
    background-color: #ffffff;
    background-image: none;
    color: var(--v-brand-hover);
    border-color: var(--v-brand-hover);
    text-decoration: none;
}

/* Focus + Focus-visible: ebenfalls invers und deutlich sichtbar */
#page-header .search-box .button-search:focus,
#page-header .search-box .button-search-end:focus,
#page-header .search-box .button-search:focus-visible,
#page-header .search-box .button-search-end:focus-visible,
#page-header .search-box button.button-search:focus,
#page-header .search-box button.button-search:focus-visible,
#page-header .search-box a.button-search-end:focus,
#page-header .search-box a.button-search-end:focus-visible {
    background-color: #ffffff;
    background-image: none;
    color: var(--v-brand-hover);
    border-color: var(--v-brand-hover);
    text-decoration: none;

    outline: 4px solid var(--v-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--v-focus-inner);
}

/* Icon-Farbe bei Hover/Focus mitwechseln */
#page-header .search-box .button-search:hover .icon,
#page-header .search-box .button-search:focus .icon,
#page-header .search-box .button-search:focus-visible .icon,
#page-header .search-box .button-search-end:hover .icon,
#page-header .search-box .button-search-end:focus .icon,
#page-header .search-box .button-search-end:focus-visible .icon {
    color: var(--v-brand-hover);
}

/* Abstand zwischen Eingabefeld und Buttons stabil halten */
#page-header .search-box fieldset > .inputbox,
#page-header .search-box fieldset > .button,
#page-header .search-box fieldset > a.button {
    flex: 0 0 auto;
}

#page-header .search-box {
    overflow: visible;
    padding-top: 6px;
    padding-bottom: 6px;
}

.forum_read {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 108'%3E%3Cpath d='M10 3H98C101.866 3 105 6.13401 105 10V69C105 72.866 101.866 76 98 76H58L39 94L21 76H10C6.13401 76 3 72.866 3 69V10C3 6.13401 6.13401 3 10 3Z' fill='%2300A3C6' stroke='white' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.forum_unread,
.forum_unread_subforum {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 108'%3E%3Cpath d='M10 3H98C101.866 3 105 6.13401 105 10V69C105 72.866 101.866 76 98 76H58L39 94L21 76H10C6.13401 76 3 72.866 3 69V10C3 6.13401 6.13401 3 10 3Z' fill='%23FF0B0B' stroke='white' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 700px) {
    dl.icon dt .list-inner, dl.row-item dt .list-inner {
        padding-left: 150px;
        padding-top: 0;
        min-height: 80px;
    }
}

dl.row-item dt, dl.row-item dd {
    min-height: 80px;
}

.breadcrumbs .crumb.wrapped-max a  {
    max-width: 0;
}

@media (max-width: 700px) {

    .breadcrumbs {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.5;
    }

    .breadcrumbs .crumb {
        display: inline;
        white-space: normal;
    }

    .breadcrumbs .crumb a {
        display: inline;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

}