/* html { font-size: 100%; } */ /* Basis */
body.accessible-version {
    font-family: Hankook, Arial, sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.social-link:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--accessible-focus-width) var(--accessible-highlight);
    border-radius: var(--accessible-focus-radius);
}

/* =========================================================
   Shariff Share-Icons: stabil bei Schriftvergrößerung
   (Shariff setzt teils 25px width/height + overflow hidden)
   ========================================================= */
body.accessible-version .shariff ul {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    margin: 0 !important;
    padding: 0 !important;
}

body.accessible-version .shariff ul > li {
    list-style: none !important;
    float: none !important;        /* kill float-left Layout */
    width: auto !important;        /* kill 25px */
    height: auto !important;       /* kill 25px */
    overflow: visible !important;  /* kill clipping */
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
}

body.accessible-version .shariff ul > li > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important; /* keine Underline auf Icon-Buttons */
    border-radius: 4px;
}

/* FontAwesome-Icon sauber zentriert (und nicht text-bedingt verschoben) */
body.accessible-version .shariff ul > li > a > span {
    display: block;
    line-height: 1 !important;
    font-size: 22px; /* passend zu 44px */
}

/* Fokus: gleicher Ring wie sonst, ohne Hintergrund */
body.accessible-version .shariff ul > li > a:focus,
body.accessible-version .shariff ul > li > a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--accessible-focus-width) var(--accessible-highlight);
    border-radius: var(--accessible-focus-radius);
}

/* Shariff: keine Pfeil-After-Content (trifft sonst .mail::after) */
body.accessible-version .shariff .mail::after,
body.accessible-version .shariff li::after {
    content: none !important;
    margin: 0 !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    font-weight: bold;
}
body.accessible-version .navbar-default .navbar-nav > .active > a { color: var(--accessible-highlight) !important; }

body.accessible-version #headerNav {
    margin-top: 4px;
}

/* =========================================================
   Header-Logo: sauberer Fokus-Rahmen ohne Größenänderung
   ========================================================= */
body.accessible-version .navbar-header.logo a.navbar-brand.main-logo {
    /* Logo ist kein Textlink */
    text-decoration: none !important;
    padding: 0 !important;            /* verhindert Größen-/Layoutänderung */
    display: inline-block;            /* stabile Fokus-Box */
    line-height: 0;                   /* keine Text-Linebox */
    border-radius: var(--accessible-focus-radius);
}

/* Fokus: äußerer blauer Ring, ohne Layout-Shift */
body.accessible-version .navbar-header.logo a.navbar-brand.main-logo:focus,
body.accessible-version .navbar-header.logo a.navbar-brand.main-logo:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--accessible-focus-width) var(--accessible-highlight);
    background-color: transparent !important;
}

/* verhindert doppelte Effekte am Bild */
body.accessible-version .navbar-header.logo a.navbar-brand.main-logo:focus img,
body.accessible-version .navbar-header.logo a.navbar-brand.main-logo:focus-visible img {
    outline: none !important;
    box-shadow: none !important;
}

/* Links generell blau und unterstrichen (mit stabiler Box für Fokus-Ring) */
body.accessible-version a {
    color: var(--accessible-highlight) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    display: inline-block;
    padding: 0 2px; /* verhindert „Umrandung klebt am Text“ */
    border-radius: var(--accessible-focus-radius);
    background-color: #fff;
}

/* Link-Fokus: blaue Umrandung (ohne hellblauen Hintergrund) */
body.accessible-version a:focus,
body.accessible-version a:focus-visible {
    outline: none;
    /* Inset-Ring: bleibt immer komplett sichtbar (kein Abschneiden durch overflow) */
    box-shadow: inset 0 0 0 var(--accessible-focus-width) var(--accessible-highlight);
    background-color: transparent !important;
    color: var(--accessible-highlight) !important;
    text-decoration: underline !important;
    border-radius: var(--accessible-focus-radius);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.links a:focus-visible,
.links [role="button"]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--accessible-focus-width) var(--accessible-highlight);
    border-radius: var(--accessible-focus-radius);
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cc-revoke, .cc-bottom .cc-link, .cc-message { color: #0f0f0f !important; }

body.accessible-version {
    --accessible-bg: #ffffff;
    --accessible-fg: #000000;
    --accessible-highlight: #005fcc;
    --accessible-focus-width: 3px;
    --accessible-focus-radius: 2px;
}

body.accessible-version #stoerer { display: none; }

body.accessible-version #header-slider {
    display: none !important;
}

body.accessible-version .icon-menu li:not(:last-child) {
    display: none !important;
}

body.accessible-version iframe.video-embed-item {
    display: none !important;
}

/* Deutlicher Hover für Textlinks */
body.accessible-version a:hover {
    background-color: transparent !important;
    color: var(--accessible-highlight) !important;

    box-shadow: inset 0 0 0 2px var(--accessible-highlight);
    border-radius: var(--accessible-focus-radius);

    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Fokus bleibt stärker */
body.accessible-version a:focus,
body.accessible-version a:focus-visible {
    box-shadow: inset 0 0 0 var(--accessible-focus-width) var(--accessible-highlight);
}

/* =========================================================
   Meta-Icons (Cart / Suche / Favoriten / Sprache): Ausrichtung
   ========================================================= */

/* Meta-Leiste als saubere Flex-Zeile */
body.accessible-version #icons-meta {
    display: flex;
    align-items: center;
    gap: 10px; /* ersetzt alte margin-Hacks */
}

/* Cart-Wrapper darf nicht abweichen */
body.accessible-version #icons-meta #cart-badge,
body.accessible-version #icons-meta #cart-badge-icon {
    display: inline-flex;
    align-items: center;
}

/* Einheitliche Klickfläche für alle Controls */
body.accessible-version #icons-meta a,
body.accessible-version #icons-meta button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    line-height: 1;
    vertical-align: middle;
    border-radius: var(--accessible-focus-radius);
    background: transparent;
}

/* SVG / IMG nicht baseline-bedingt versetzen */
body.accessible-version #icons-meta img,
body.accessible-version #icons-meta svg {
    display: block;
    width: 22px;
    height: 22px;
}

/* FontAwesome-Stern optisch an SVGs angleichen */
body.accessible-version #icons-meta #fav-toggler {
    display: block;
    font-size: 22px;
    line-height: 1;
}

/* Zähler neben Cart */
body.accessible-version #icons-meta #cart-badge-cnt {
    line-height: 1;
    margin-left: 4px;
}

/* Header-Icons: gleicher Fokus wie Links */
body.accessible-version #icons-meta a:focus,
body.accessible-version #icons-meta a:focus-visible,
body.accessible-version #icons-meta button:focus,
body.accessible-version #icons-meta button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--accessible-focus-width) var(--accessible-highlight);
    background-color: transparent !important;
    color: var(--accessible-highlight) !important;
    text-decoration: underline !important;
    border-radius: var(--accessible-focus-radius);
}

/* Verhindert doppelte Hervorhebung durch Styles am inneren Icon */
body.accessible-version #icons-meta a:focus img,
body.accessible-version #icons-meta a:focus-visible img,
body.accessible-version #icons-meta button:focus img,
body.accessible-version #icons-meta button:focus-visible img,
body.accessible-version #icons-meta button:focus i,
body.accessible-version #icons-meta button:focus-visible i {
    outline: none !important;
    box-shadow: none !important;
}

body.accessible-version .bg-blue { background-color: transparent !important; }

/* Navigation Feinschliff */
body.accessible-version nav.navbar #primary { margin: 0; }
body.accessible-version nav li > a { padding: 5px 5px !important; margin-right: 10px; margin-left: 10px; }
body.accessible-version #primary ul.level2 { background-color: white !important; }
body.accessible-version nav.navbar #primary .dropdown.open .dropdown-menu.level2 {
    background-color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}
body.accessible-version .navbar-collapse { padding-left: 0 !important; }

/* end Navigation Feinschliff */


body.accessible-version .bg-dblue,
body.accessible-version #c9 .bg-white,
body.accessible-version .bg-grey { background-color: white !important; }
body.accessible-version .content,
body.accessible-version .bg-white,
body.accessible-version .bg-blue,
body.accessible-version footer,
body.accessible-version .container-fluid { max-width: 1600px !important; }
body.accessible-version .panel-title { font-size: 2.2em !important; }
body.accessible-version .breadcrumb a { font-size: 1.4em !important; }
body.accessible-version .btn {font-size: 1.8em; }
body.accessible-version footer .nav > li > a { padding: 10px 15px; margin: 0 10px; }
body.accessible-version .mx-font-size-controls .btn { margin-bottom: 10px !important; }
body.accessible-version .mx-link-shortcut { display: inline; }

body.accessible-version .fa-chevron-right::before {
    color: var(--green);
}

body.accessible-version .mx-font-size-controls { display: block !important; margin-top: 10px !important; }

body.accessible-version #searchFormHeader { padding-left: 0 !important; }
body.accessible-version #searchFormHeader #tx-indexedsearch-searchbox-sword {
    background-color: #fff !important;
    border: 1px solid #000 !important;
    color: #000 !important;
}
body.accessible-version .btn:focus,
body.accessible-version .btn:focus-visible,
body.accessible-version .btn-search:focus,
body.accessible-version .btn-search:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--accessible-focus-width) var(--accessible-highlight);
    background-color: transparent !important;
    border-radius: var(--accessible-focus-radius);
}
body.accessible-version img.gutes-tun-footer {  filter: invert(100%); }
body.accessible-version .mx-shortcuts { display: block; }

body.accessible-version  #accessibility-toggle { display: none; }

body.accessible-version #back-to-non-accessible { font-weight: bold; }
body.accessible-version .top-bg-grey { margin: 5px; }

body.accessible-version .calendar-start { background-color: white !important; padding: 5px !important}

@media (max-width: 767px) {
    body.accessible-version h1 { font-size: 2.5em; }
    body.accessible-version h2 { font-size: 2.2em; }
    body.accessible-version h3 { font-size: 2em; }
    h1.ce-headline-center { margin-top: 10px !important; }
    body.accessible-version .mx-link-shortcut { font-size: smaller; }
}

/* Do not shrink headings in accessible view (keep global h2 sizing above) */
/* body.accessible-version #content h2 {
    font-size: 0.75rem;
} */

/* Standardansicht: Tags/Meta & Kontakt-Tiles nicht winzig (statt 10px)
   NOTE: Use :not(.accessible-version) + !important to override legacy 10px rules reliably.
*/
body:not(.accessible-version) ul.tags,
body:not(.accessible-version) ul.tags li,
body:not(.accessible-version) ul.tags time {
    font-size: 1em !important; /* ~14px bei 16px root */
    line-height: 1.3;
}

body:not(.accessible-version) .tile-ctnd p {
    font-size: 1em !important;
    line-height: 1.4;
}

/* Accessibility: Tags/Meta nicht auf 10px festnageln */
.accessible-version ul.tags,
.accessible-version ul.tags li,
.accessible-version ul.tags time {
    font-size: 1em !important;     /* erbt von body und skaliert */
    line-height: 1.3;
}

.accessible-version .tile-ctnd p {
    font-size: 1em !important;
    line-height: 1.4;
}

#pid10.accessible-version #content .layout-arrowlist ul li {list-style-type: none; }
#pid10.accessible-version #content .layout-arrowlist ul li a { color: #000 !important; }
.accessible-version .navbar ul.nav > li { font-size: unset; }

body.accessible-version *,
body.accessible-version *::before,
body.accessible-version *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

body.accessible-version .tile-img a img:hover {
    transform: none;
}

body.accessible-version .tile-img a {
    position: relative;
    display: block;
    line-height: 0;
    border-radius: var(--accessible-focus-radius);
}

/* Fokus: durchgehender Rahmen *innerhalb* der Box (funktioniert trotz overflow:hidden) */
body.accessible-version .tile-img a:focus,
body.accessible-version .tile-img a:focus-visible {
    outline: none;
}

/* Rahmen als Overlay, damit er nicht vom Bild „übermalt“ wird und nicht geclippt wird */
body.accessible-version .tile-img a:focus::after,
body.accessible-version .tile-img a:focus-visible::after {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: var(--accessible-focus-width) solid var(--accessible-highlight);
    border-radius: var(--accessible-focus-radius);
    pointer-events: none;
    z-index: 2;
}

/* Bild sauber als Block (kein extra Zeilenabstand) */
body.accessible-version .tile-img img {
    display: block;
    position: relative;
    z-index: 1;
}

#pid151 .ge_accordion_item .glyphicon-chevron-down {display: none; }

/* A11y: konsistenter blauer Fokus für Media-/Textpic-Links */
body.accessible-version .ce-textpic .ce-media > a:focus,
body.accessible-version .ce-textpic .ce-media > a:focus-visible,
body.accessible-version .ce-textpic .ce-gallery a:focus,
body.accessible-version .ce-textpic .ce-gallery a:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 var(--accessible-focus-width) var(--accessible-highlight);
    border-radius: var(--accessible-focus-radius);
}

/* Header bleibt normal, Content wächst */
body.accessible-version {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header bleibt normal, Content wächst */
body.accessible-version #content {
    flex: 1 0 auto;
}

/* Footer bleibt am Ende */
body.accessible-version #footertop {
    flex: 0 0 auto;
}

body.accessible-version #readspeaker_hankook { top: 280px !important; }

body.accessible-version .main-logo:focus-visible {  }

@media (min-width: 1500px) {
    .logo-navbar-header-right {
         top: 35px;
    }
}

/* Dropdown-Menü: Schriftgröße soll mit der Seite skalieren */
body.accessible-version #icons-meta .dropdown-menu {
    font-size: 1em !important;     /* statt Bootstrap px */
    line-height: 1.35;
}

/* Links im Dropdown ebenfalls skalierbar und „klickbar“ */
body.accessible-version #icons-meta .dropdown-menu a,
body.accessible-version #icons-meta .dropdown-menu .dropdown-item {
    font-size: 1em !important;
    padding: 0.6em 0.9em;          /* em => skaliert mit */
    display: block;
}

/* Hauptnavigation: Dropdown-Menüs müssen ebenfalls skalieren (legacy sets .dropdown-menu { font-size:14px; }) */
body.accessible-version nav.navbar .dropdown-menu,
body.accessible-version #primary .dropdown-menu,
body.accessible-version .navbar-nav .dropdown-menu {
    font-size: 1em !important;
    line-height: 1.35;
}

body.accessible-version nav.navbar .dropdown-menu a,
body.accessible-version #primary .dropdown-menu a,
body.accessible-version .navbar-nav .dropdown-menu a,
body.accessible-version nav.navbar .dropdown-menu .dropdown-item,
body.accessible-version #primary .dropdown-menu .dropdown-item,
body.accessible-version .navbar-nav .dropdown-menu .dropdown-item {
    font-size: 1em !important;
}

body.accessible-version .dropdown-menu li.disabled { margin-left: 0.8em; }

body.accessible-version .ge_accordion_item .glyphicon { display: none !important; }

body.accessible-version #leftColumnStart .arrowLink2022 a:hover { background-color: white !important; }

/* Logo: blaue Linie beim Hover */
body.accessible-version a.main-logo:hover {
    outline: 2px solid var(--accessible-highlight) !important;
    outline-offset: 2px;
}

body.accessible-version #content .ce-bodytext h3 { font-size: 1.25em; }

/* =========================================================
   A11y (PID 12 only): avoid overlap when font size increases
   Reason: fixed / equal heights + floats break at larger text
   ========================================================= */

/* Kill inline heights set by matchHeight / equal-height helpers */
#pid12.accessible-version [data-mh][style*="height"],
#pid12.accessible-version [data-mh] > [style*="height"],
#pid12.accessible-version .sameHeight[style*="height"],
#pid12.accessible-version .equalizeDefunc[style*="height"],
#pid12.accessible-version .mh[style*="height"],
#pid12.accessible-version .matchHeight[style*="height"],
#pid12.accessible-version .rightCol[data-mh][style*="height"] {
    height: auto !important;
    min-height: 0 !important;
}

/* Columns must grow naturally with content */
#pid12.accessible-version .row [class*="col-"] {
    height: auto !important;
}

/* Prevent clipping when content grows */
#pid12.accessible-version .row,
#pid12.accessible-version [class*="col-"] {
    overflow: visible !important;
}

/* =========================================================
   A11y FIX nur für Element #c75523 (pid1 Subscribe-CTA)
   Problem: <a><button>... doppelte Skalierung / Bootstrap btn-lg px-Layout
   ========================================================= */

/* 1) Container als stabile Basis */
body.accessible-version #c75523 {
    font-size: 1em; /* erbt A+-Skalierung normal */
}

/* 2) CTA deckeln: Button-Schrift NICHT weiter hochskalieren */
body.accessible-version #c75523 a > button.btn {
    font-size: 1.1em !important;      /* kleiner als deine globalen h2/h3 etc. */
    line-height: 1.2 !important;
    padding: 0.55em 1em !important;   /* em => skaliert mit, aber kontrolliert */
    white-space: nowrap;
}

/* 3) Bootstrap btn-lg neutralisieren (nur hier) */
body.accessible-version #c75523 a > button.btn-lg {
    font-size: 1.1em !important;
}

/* 4) Icon/Span im Button sauber */
body.accessible-version #c75523 a > button.btn .email {
    font-size: 1em !important;
    line-height: 1 !important;
}

/* 5) Fokus-Ring auf dem A behalten (weil A ist der echte Link) */
body.accessible-version #c75523 a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--accessible-focus-width) var(--accessible-highlight);
    border-radius: var(--accessible-focus-radius);
}

/* 6) Verhindert, dass der Button selbst nochmal “Boxen” erzeugt */
body.accessible-version #c75523 a > button.btn:focus,
body.accessible-version #c75523 a > button.btn:focus-visible {
    outline: none;
    box-shadow: none;
}

body.accessible-version .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: #fff !important;
    background-color: #000 !important;
}

/* body.accessible-version #navbarSupportedContentFooter a:focus { color: #000 !important; } */
body.accessible-version #navbarSupportedContentFooter  a:focus, body.accessible-version #navbarSupportedContentFooter  a:hover {
    background-color: #000 !important;
    color: #fff !important;
    outline: 3px solid var(--accessible-highlight);
}

body.accessible-version #content .layout-arrowlist ul li a,
body.accessible-version #content .row .fileLinkGal .links.nobullets,
body.accessible-version #content .row .newsRelFalmedia .links.nobullets {
    display: block;
    position: relative;
    z-index: 2;
}
body.accessible-version #content .layout-arrowlist ul li a:hover,
body.accessible-version #content .layout-arrowlist ul li a:focus {
    background-color: #ffffff !important;
}


body.accessible-version #content .row .fileLinkGal .links.nobullets li a:focus {
    box-shadow: rgb(0, 95, 204) 0px 0px 0px 2px inset
}

/* body.accessible-version #content .row.fileLinkGal a, */
body.accessible-version #content .links.nobullets a {
    background-color: transparent !important;
}

body.accessible-version #content .layout-arrowlist ul:not(.nav-tabs):not(.tags):not(.links) li::after {
    right: 1px;
    top: 0;
    z-index: 2;
}
#pid10.accessible-version .layout-arrowlist ul li a {
    padding-right: 20px;
    padding-left: 0px;
    height: 34px;
    margin-bottom: 41px;
    width: 100%;
    display: inline !important;
}
#pid10.accessible-version .ge_tile.layout-arrowlist .tile-ctnd li.big > a::after {
    content: none;
}