/* default.css */
/* --- undo --- */
html, body, div, span, a, h1, h2, h3, h4, h5, h6, p, blockquote, img,
ol, ul, li, form, input, textarea, label, select, table, tbody, thead, tfoot, tr, th,
td, footer, header, menu, nav, section, video { padding: 0; margin: 0; box-sizing: border-box; }

img, a img, :link img, :visited img, fieldset, button { border: none; outline: none; }
a:visited { text-decoration: none; }
img { vertical-align: bottom; }
table, tr, th, td { border: none; border-spacing: 0; }
th, td { vertical-align: top; }
hr { clear: both; }
address { font-style: normal; }

ul, ol { list-style-image: none; margin: 0 0 1.25rem 0; padding: 0 0 0 1.25rem; list-style-position: outside; }
ol { padding: 0 0 0 1.875rem; }
ul li, ol li { margin: 0 0 0.625rem 0; padding: 0; }
ul, ul li { list-style-type: disc; }
ol, ol li { list-style-type: decimal; }
li > ul, li > ol { margin: 0.625rem 0; }
li > ul > li { list-style-type: circle; }
li > ol > li { list-style-type: decimal; }

html, body {
    height: 100%; /* Vertikalen Scrollbalken immer einblenden */
    word-wrap:break-word; /* Woerter in die naechste Zeile umbrechen, wenn sie das umschliessende Element verlassen */
    min-width: 300px;
}
html { overflow: scroll; overflow-x: auto; }

/* fuer responsive Webseiten */
img, object, iframe { max-width: 100%; height: auto; }

/*  Clearfix, um das Floating innerhalb der Container aufzuheben */
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

/* CSS-Formatierungen interne Module */
.flLeft, .float_left { float: left; }
.flRight, .float_right { float: right; }
.flClear, .float_clear { clear: both; }
.center { text-align: center; }
.small { font-size: small; }
.bold { font-weight: 700; }
.hide { display: none; }
.text_left { text-align: left; }
.text_center { text-align: center; }
.text_right { text-align: right; }

/* Flex-Ausrichtung innerhalb der Section - display:flex kommt direkt von der
   Breiten-Klasse (.section_full/.section_1200/... in main<datum>.css), nicht
   mehr von einer eigenen .section_flex-Klasse (bis 02.09.2026 - war ein
   Kaskade-Bug: die Breiten-Klasse lud NACH dieser Datei und ueberschrieb
   display:flex mit ihrem eigenen display:block). */
.justify_content_flex_start    { justify-content: flex-start; }
.justify_content_center        { justify-content: center; }
.justify_content_flex_end      { justify-content: flex-end; }
.justify_content_space_between { justify-content: space-between; }
.justify_content_space_around  { justify-content: space-around; }
.justify_content_space_evenly  { justify-content: space-evenly; }
.align_items_stretch    { align-items: stretch; }
.align_items_flex_start { align-items: flex-start; }
.align_items_center     { align-items: center; }
.align_items_flex_end   { align-items: flex-end; }
.align_items_baseline   { align-items: baseline; }

/* Erzwungener Zeilenumbruch in einer Flex-Section (z. B. 003_absaetze mit
   leerem Value als Umbruch zwischen zwei Box-Reihen): clear:both wirkt bei
   Flex-Items nicht mehr, flex-basis: 100% erzwingt stattdessen die volle
   Zeilenbreite und damit den Umbruch. Eigene Klasse statt .flClear, da die
   Bedeutung eine andere ist (Zeilenumbruch statt Float aufheben) - .flClear
   bleibt unveraendert fuer echte clear:both-Faelle (z. B. BwYFormHelper). */
.flex_break { flex-basis: 100%; width: 100%; }


/* main20261111.css */
/* main20261026.css — Projekt-CSS GFD / seals.de
   Abschnitte: 1) Typografie  2) Section  3) outer_box  4) Seitengerüst  5) Navigation
   6) Projektspezifisches */


/* --- Projektfarben -------------------------------------------------------- */
:root {
    --color-main:         #000000;   /* Grundtext */
    --color-link:         #ffffff;
    --color-link-hover:   #ee7202;
    --color-headline:     #000000;
    --color-subheadline:  #333333;

    --color-bg:           #807c7b;   /* Seitenhintergrund grau */
    --color-bg-alt:       #cccccc;
    --color-border:       #ee7202;   /* Trennlinie */
    --color-focus:        #000000;   /* auf dunklen Flächen per Variable auf Weiß gesetzt */

    --color-orange:       #ee7202;
    --color-orange-alt:   #ed752d;
    --color-gray:         #807c7b;
    --color-lightgray:    #cccccc;
    --color-darkgray:     #2f2d2e;
    --color-white:        #ffffff;
    --color-nav-bg:       #b2b0af;
    --color-overlay-bg:   rgba(0,0,0,0.75);
}

/* Schriften akagi-pro und rockwell kommen von Adobe Fonts (Template-Head), Typekit erlaubt kein Self-Hosting. */


/* =============================================================================
   1) Typografie
   ============================================================================= */

html { background-color: var(--color-bg); }

body {
    min-width: 300px;   /* darunter scrollt die Seite waagerecht, statt Inhalte abzuschneiden (passt zu #sticky_header_bg) */
    font-family: akagi-pro, Verdana, Geneva, sans-serif;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 300;
    color: var(--color-main);
}

/* Medien nie breiter als der Container (wie in main20240112.css) */
img, object, iframe { max-width: 100%; }
img { height: auto; }

a { color: var(--color-link); text-decoration: underline; }
a:hover { color: var(--color-link-hover); text-decoration: none; }
/* MH:FIX BFSG: Fokusring nicht entfernen */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* MH:/FIX */

a:hover img,
a:focus-visible img { opacity: 0.8; }

/* MH:FIX Link als Button */
a.link_as_button { display: inline-block; margin: 0; padding: 0.5rem 1.25rem; border-radius: 4px;
  background-color: var(--color-link); color: #fff; text-decoration: none; }
a.link_as_button:hover { background-color: var(--color-link-hover); color: #fff; }
/* Kontrast des generischen Fokusrings (var(--color-focus)) gegen diesen Button-
   Hintergrund (var(--color-link)) liegt nur bei ~1,6:1 (WCAG SC 1.4.11 verlangt
   3:1) - gleiches Muster wie beim Footer weiter unten, deshalb hier ebenfalls
   auf Weiss umgestellt. */
a.link_as_button:focus-visible { outline-color: #fff; }
/* MH:/FIX */

h1, h2, h3, h4, h5, h6,
.like_h1, .like_h2, .like_h3, .like_h4, .like_h5, .like_h6
{ margin: 0 0 1.25rem 0; font-weight: 400; font-style: normal; font-size: 0.875rem; line-height: 1.43; color: var(--color-headline); }

h1, .like_h1 { font-size: 1.75rem; line-height: 1.07; font-family: rockwell, akagi-pro, Verdana, Geneva, sans-serif; }
h2, .like_h2 { font-size: 1.375rem; line-height: 1.09; }
h3, .like_h3 { font-size: 1.125rem; line-height: 1.11; }
h4, .like_h4 { font-size: 0.875rem; font-weight: 700; }
h5, .like_h5 { font-size: 0.875rem; }
h6, .like_h6 { font-size: 0.75rem; }

h2.like_h1 { font-size: 1.75rem; line-height: 1.07; }

@media all and (max-width: 480px) {
    h1, .like_h1, h2.like_h1 { font-size: 1.5rem; }
    h2, .like_h2 { font-size: 1.25rem; }
}

/* MH:FIX Overline: eigenständiges Element vor der Überschrift (p.headline_overline
   in 001_headline/001_headline_mit_text/002_text_bild), nie Teil des
   Heading-Tags. */
.headline_overline { display: block; margin: 0 0 0.5rem 0; color: var(--color-subheadline);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
/* MH:/FIX */

/* MH:FIX Subline: das AddOn schreibt sie als <span class="headline_subline"> in
   den Überschriften-Tag (h1-h6/.like_h1-.like_h6, nicht nur h1-h3). */
.headline_subline { display: block; color: var(--color-subheadline); font-size: 0.6em; line-height: 1.4; }
/* MH:/FIX */

p, .like_p { margin: 0 0 1.25rem 0; padding: 0; }
em { font-style: italic; font-weight: 400; }
strong { font-weight: 700; }

/* Aufzählungen mit dem orangen Listenpunkt aus dem Layout */
ul { margin: 0 0 0.625rem 0; padding: 0; list-style: none; }
ul li { list-style-type: none; margin: 0 0 0.625rem 0; padding: 0 0 0 1.25rem;
  background-image: url(listpoint.png); background-position: top left; background-repeat: no-repeat; }
ul ul { margin: 0.625rem 0 0 0; }

table { margin: 0 0 1.25rem 0; padding: 0; }
td { padding: 0 0.5rem 0.375rem 0; vertical-align: top; }

/* MH:FIX 004_trennlinie */
hr, hr.trennlinie { width: 100%; height: 1px; margin: 0 0 1.25rem 0; border: none; background-color: var(--color-border); }
/* MH:/FIX */
/* Seals: Trennlinie 2px und mit großem Abstand nach unten */
hr, hr.trennlinie { height: 2px; margin-bottom: 3.125rem; }

/* MH:FIX Bildunterschriften */
.small { display: block; margin: 0; padding-top: 5px; font-size: 0.8125rem; line-height: 1.5; font-style: italic; }
/* MH:/FIX */

/* MH:FIX Textfarbe auf dunklen Flächen */
.text_color_white,
.text_color_white h1, .text_color_white h2, .text_color_white h3,
.text_color_white p,  .text_color_white li, .text_color_white a { color: #fff; }
/* MH:/FIX */


/* =============================================================================
   2) Section
   ============================================================================= */

.section_bg_none,
.section_bg_gray,
.section_bg_lightgray,
.section_bg_darkgray,
.section_bg_white
{ clear: both; display: block; position: relative; width: 100%; margin: 0; z-index: 1; }

.section_bg_none      { background-color: transparent; }
.section_bg_gray      { background-color: var(--color-gray); }
.section_bg_lightgray { background-color: var(--color-lightgray); }
.section_bg_darkgray  { background-color: var(--color-darkgray); --color-focus: #fff; }
.section_bg_white     { background-color: var(--color-white); }

.section_bg_darkgray,
.section_bg_darkgray * { color: #fff; }

/* Links sind global weiß, auf weißer Fläche deshalb orange wie in .box_bg_white */
.section_bg_white a { color: var(--color-orange); text-decoration: none; }
.section_bg_white a:hover,
.section_bg_white a:focus-visible { color: #000; }

.section_bg_lightgray a { color: #000; text-decoration: underline; }
.section_bg_lightgray a:hover,
.section_bg_lightgray a:focus-visible{ color: var(--color-orange); text-decoration: none; }

.section_full,
.section_1900,
.section_1600,
.section_1200,
.section_980
{ display: flex; flex-flow: row wrap; position: relative; width: 100%; margin: 0 auto; padding: 0; z-index: 1; }

.section_full { width: 100%; margin: 0; }
.section_1900 { max-width: 1900px; margin: 0 auto; }
.section_1600 { max-width: 1600px; margin: 0 auto; }
.section_1200 { max-width: 1200px; margin: 0 auto; }
.section_980  { max-width: 980px; margin: 0 auto; }

@media all and (max-width: 480px) {
    .section_full,
    .section_1900,
    .section_1600,
    .section_1200,
    .section_980
    { flex-direction: column; flex-wrap: nowrap; }
}

/* MH:FIX Section mit Hintergrundbild */
.section_bg_image { display: block; position: static; width: 100%; min-height: 100px; margin: 0; z-index: 1;
  background-color: var(--color-bg); background-position: center center; background-attachment: scroll;
  background-repeat: no-repeat; background-size: cover; }
.section_bg_image.parallax { background-attachment: fixed; min-height: 500px; }
/* MH:/FIX */

/* MH:FIX Section-Padding, feste Auswahl im Backend (BwModulhelperSection.php,
   kein rex_config-Eintrag noetig). section_padding_normal entspricht exakt den
   frueher fest einprogrammierten Werten, keine optische Aenderung fuer
   Bestandsseiten. Bei section_bg_image groesser, damit ein Hintergrundbild
   genug Luft hat. */
.section_padding_normal { padding: 50px 0 10px 0; }
.section_padding_small  { padding: 25px 0 5px 0; }
.section_padding_big    { padding: 100px 0 40px 0; }
.section_padding_none   { padding: 0; }

.section_bg_image.section_padding_normal { padding: 100px 0 80px 0; }
.section_bg_image.section_padding_small  { padding: 50px 0 30px 0; }
.section_bg_image.section_padding_big    { padding: 150px 0 100px 0; }
.section_bg_image.section_padding_none   { padding: 0; }
/* MH:/FIX */


/* =============================================================================
   3) outer_box
   Seitenbreite 1900px, Abstand 2.5% (aus .outer_box)
   ============================================================================= */

/* MH:FIX */
.outer_box { display: block; width: 95%; margin: 0 0 20px 2.5%; padding: 0; }
/* MH:/FIX */
/* Seals: Abstand unter den Boxen wie bisher 50px */
.outer_box { margin-bottom: 3.125rem; }

.box_width_full { width: 100%; margin: 0 0 3.125rem 0; }
.box_width_1_2  { width: 46.25%; }
.box_width_1_3  { width: 30%; }
.box_width_2_3  { width: 62.5%; }
.box_width_1_4  { width: 21.875%; }
.box_width_3_4  { width: 70.625%; }
.box_width_1_5  { width: 17%; }
.box_width_2_5  { width: 36.5%; }
.box_width_3_5  { width: 56%; }
.box_width_4_5  { width: 75.5%; }

/* Box-Optiken: das Padding sitzt auf .text, damit Bilder randlos bleiben */
.box_bg_gray      { background-color: var(--color-gray); }
.box_bg_darkgray  { background-color: var(--color-darkgray); --color-focus: #fff; }
.box_bg_lightgray { background-color: var(--color-lightgray); }
.box_bg_white     { background-color: var(--color-white); }

.box_bg_gray,
.box_bg_gray *,
.box_bg_darkgray,
.box_bg_darkgray * { color: #fff; }
.box_bg_white,
.box_bg_white * { color: #000; }
.box_bg_white a { color: var(--color-orange); text-decoration: none; }
.box_bg_white a:hover,
.box_bg_white a:focus-visible { color: #000; }

.box_bg_gray .text,
.box_bg_darkgray .text,
.box_bg_lightgray .text,
.box_bg_white .text { padding: 20px 20px 1px 20px; }

.outer_box.box_bg_gray .image,
.outer_box.box_bg_darkgray .image,
.outer_box.box_bg_lightgray .image { margin: 0; }

/* MH:FIX Bilder in der outer_box */
.outer_box .image { margin: 0 0 25px 0; }
.outer_box .image a { text-decoration: none; border-bottom: none; }
.outer_box .image a:hover { opacity: 0.8; }
.outer_box .image a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* MH:/FIX */

/* MH:FIX 002_text_bild — text_img_left/right: Text fließt um das Bild.
   max-width (30%) und margin (15px) zusammen ergeben den Abstand zwischen
   Bild und Text - fuer mehr/weniger Abstand beide Werte gemeinsam anpassen,
   nicht nur den margin-Wert. */
.text_bild .flLeft  { float: left;  display: block; width: auto; max-width: 30%; margin: 0 15px 0 0; overflow: hidden; }
.text_bild .flRight { float: right; display: block; width: auto; max-width: 30%; margin: 0 0 0 15px; overflow: hidden; }
.text_bild .image span.small { display: block; }

/* 002_text_bild — two_column_*: zwei getrennte Spalten, per Flex (kein Float,
   kein Clearfix nötig). Der Abstand zwischen den Spalten kommt aus gap - für
   mehr/weniger Abstand gap und beide width-Werte gemeinsam anpassen. */
.zweispalter { display: flex; flex-wrap: wrap; gap: 7.5%; }
.zweispalter .flLeft,
.zweispalter .flRight { display: block; width: 46.25%; margin: 0; overflow: hidden; }

/* Clearfix für .text_bild - bekommt im Modul-Markup kein eigenes .clearfix,
   ohne das hier hätte der Wrapper Höhe 0, da beide Kinder floaten. */
.text_bild::after { content: ''; display: table; clear: both; }
/* MH:/FIX */

@media all and (max-width: 980px) {
    .box_width_1_4 { width: 46.25%; }
}

/* Ab 768px einspaltig. Die Box bleibt Flex-Item der Section, deshalb feste Breite statt auto. */
@media all and (max-width: 768px) {
    .outer_box { width: calc(100% - 20px); margin: 0 10px 2.5rem 10px; }
    .box_width_full { width: 100%; margin: 0 0 2.5rem 0; }

    .text_bild .flLeft,
    .text_bild .flRight { float: none; width: auto; max-width: none; margin: 0 0 15px 0; }

    .zweispalter { flex-direction: column; gap: 15px; }
    .zweispalter .flLeft,
    .zweispalter .flRight { width: auto; }
}


/* =============================================================================
   4) Seitengerüst
   #sticky_header_bg (fixiert) > #main_nav_bg (Menü-Panel) > #page_bg > #page
   > #header_bg (ctype 2) > #content_nav > #content_bg > #footer_bg
   ============================================================================= */

#page_bg, #page, #header_bg, #header, #content_nav, #content_bg, #content, #footer_bg, #footer
{ display: block; position: relative; width: 100%; margin: 0; padding: 0; z-index: 1; }

#page_bg { min-height: 100%; overflow: hidden; }
#page { min-height: 100%; }

/* Unter 980px liegt der Sticky-Header nicht mehr über dem Kopfbild */
@media all and (max-width: 980px) {
    #page { padding-top: 60px; }
}

/* --- Sticky-Header -------------------------------------------------------- */
#sticky_header_bg { display: block; position: fixed; top: 0; left: 0; width: 100%; min-width: 300px; height: 100px; margin: 0; padding: 0; z-index: 999;
  background-color: var(--color-overlay-bg); --color-focus: #fff; }

/* padding-left hält Platz für den fixierten #main_nav_button frei (Abschnitt 5) */
#sticky_header { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; width: 100%; max-width: 1900px; height: 100%; margin: 0 auto; padding: 0 20px 0 62px; }

#sticky_header_left { display: flex; align-items: center; gap: 1.875rem; flex: 0 0 auto; }

#lang_switcher { font-size: 1.25rem; line-height: 1; color: #fff; white-space: nowrap; }
#lang_switcher a.lang_switcher_button { display: inline-block; margin: 0 5px; color: #fff; text-decoration: none; }
#lang_switcher a.lang_switcher_button:hover,
#lang_switcher a.lang_switcher_button:focus-visible { color: var(--color-orange); }
#lang_switcher a.lang_switcher_button.active { color: var(--color-orange); font-weight: 400; }

/* Logo erscheint erst im Sticky-Zustand, beim Hover tauscht es auf die Hintergrundgrafik */
a#sticky_header_logo { display: none; width: 45px; background-image: url(gfd_sticky_hover.png); background-position: center; background-repeat: no-repeat; background-size: contain; }
a#sticky_header_logo img { display: block; width: 100%; height: auto; }
a#sticky_header_logo:hover img,
a#sticky_header_logo:focus-visible img { opacity: 0; }
body.sticky a#sticky_header_logo { display: block; }

#sticky_header_nav { display: none; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.625rem 1.25rem; text-align: center; }
body.sticky #sticky_header_nav { display: flex; }
#sticky_header_nav a { font-size: 1.125rem; line-height: 1.1; color: #fff; text-decoration: none; }
#sticky_header_nav a:hover,
#sticky_header_nav a:focus-visible,
#sticky_header_nav a.active { color: var(--color-orange); }
#sticky_header_nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }

#sticky_header_right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; white-space: nowrap; }
#sticky_header_right a { display: inline-flex; align-items: center; gap: 5px; font-size: 1rem; line-height: 2; color: #fff; text-decoration: none; }
#sticky_header_right a svg.svg_icon { display: block; width: 32px; height: 32px; fill: #fff; transform: scale(0.8); transition: 250ms ease-in-out; }
#sticky_header_right a:hover,
#sticky_header_right a:focus-visible,
#sticky_header_right a.active { color: var(--color-orange); }
#sticky_header_right a:hover svg.svg_icon,
#sticky_header_right a:focus-visible svg.svg_icon,
#sticky_header_right a.active svg.svg_icon { fill: var(--color-orange); transform: scale(1); }
body.sticky #sticky_header_right a span { display: none; }

@media all and (max-width: 980px) {
    #sticky_header_bg { height: 60px; }
    #sticky_header { gap: 0.625rem; padding-right: 10px; }
    #sticky_header_left { gap: 1.25rem; }
    #lang_switcher { font-size: 1.125rem; }
    #lang_switcher a.lang_switcher_button { margin: 0 4px; }
    a#sticky_header_logo { width: 40px; }
    body.sticky #sticky_header_nav { display: none; }
    #sticky_header_right a span { display: none; }
}

@media all and (max-width: 480px) {
    #sticky_header { padding-left: 52px; }
    #sticky_header_right { gap: 2px; }
    #lang_switcher { font-size: 1rem; }
}

@media all and (max-width: 360px) {
    body.sticky a#sticky_header_logo { display: none; }
}

/* --- Seitenkopf (ctype 2) ------------------------------------------------- */
#header_bg { }
#header { }

/* --- Lösungs-Links unter dem Seitenkopf ----------------------------------- */
#content_nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1.25rem; padding: 20px 10px 10px 10px; text-align: center; }
#content_nav a { display: inline-block; margin: 0 0 0.625rem 0; font-size: 1.125rem; line-height: 1.1; color: #fff; text-decoration: none; }
#content_nav a:hover,
#content_nav a:focus-visible { color: var(--color-orange); }
#content_nav a.active { color: #000; }
#content_nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }

@media all and (max-width: 980px) {
    #content_nav a { display: flex; flex-direction: column; justify-content: center; min-height: 2.5rem; }
    #content_nav a span { display: block; }
}

@media all and (max-width: 360px) {
    #content_nav a { width: 100%; }
}

/* --- Inhalt --------------------------------------------------------------- */
#content { min-height: 60vh; overflow: hidden; scroll-margin-top: 100px; }
@media all and (max-width: 980px) { #content { scroll-margin-top: 80px; } }

/* --- Footer --------------------------------------------------------------- */
#footer_bg { clear: both; background-color: var(--color-darkgray); --color-focus: #999; }
#footer { display: flex; flex-flow: row wrap; justify-content: space-between; max-width: 1900px; margin: 0 auto; padding: 33px 10px 13px 10px;
  color: #fff; font-size: 0.875rem; line-height: 1.43; }
.footer_box { flex: 0 1 auto; min-height: 100px; margin: 0 0 1.25rem 0; padding: 0 10px; color: #fff; }
#footer_box_break_4 { display: none; }

#footer p { margin: 0; }
#footer ul { margin: 0; padding: 0; list-style: none; }
#footer li { margin: 0; padding: 0; list-style: none; background-image: none; }
#footer_box_3 > ul > li:first-child { margin-bottom: 1.25rem; }

#footer a { color: #fff; text-decoration: none; hyphens: auto; }
#footer a:hover,
#footer a:focus-visible,
#footer a.active { color: #999; }
#footer a.sublink { display: inline-block; padding-left: 1.875rem; }

#footer #accessibility_toggle_box { text-align: left; }

#footer_box_6 a { display: inline-block; margin: 0 10px 10px 0; }

/* Usercentrics-Button sieht aus wie ein Footer-Link */
#footer .footer_cookie_settings { margin: 0; padding: 0; border: none; background: none; font: inherit; color: #999; text-align: left; cursor: pointer; }
#footer .footer_cookie_settings:hover,
#footer .footer_cookie_settings:focus-visible { color: #fff; }

@media all and (max-width: 980px) {
    #footer { justify-content: flex-start; }
    .footer_box { flex: 0 1 33.33%; }
    #footer_box_break_4 { display: block; width: 100%; }
}

@media all and (max-width: 768px) {
    .footer_box { flex: 0 1 50%; }
    #footer_box_break_4 { display: none; }
}

@media all and (max-width: 480px) {
    .footer_box { flex: 0 0 100%; padding: 0; }
}


/* =============================================================================
   5) Navigation
   Basis: AddOn main_nav_3_ebene.css. Desktop: Panel unter dem Sticky-Header, per
   #main_nav_button geöffnet, alle Ebenen offen untereinander (Ebene 2/3 per
   main_nav_deactivate_level_2_for_desktop ohne Dropdown). Mobil: Overlay.
   ============================================================================= */
:root {
	/* Menü-Button */
	--mh-nav-button-bar: #fff;
	--mh-nav-button-bar-active: var(--mh-nav-accent);
	--mh-nav-focus-outline: #fff;

	--mh-nav-accent: #ee7202;

	/* Desktop-Panel */
	--mh-nav-link-color: #fff;
	--mh-nav-link-hover: #000;

	/* Mobil */
	--mh-nav-mobile-overlay-bg: #b2b0af;
	--mh-nav-mobile-level2-bg: #f4f4f4;
	--mh-nav-mobile-level3-bg: #e4e4e4;
	--mh-nav-mobile-hover-bg: #aaa;
	--mh-nav-mobile-text: #000;
	--mh-nav-mobile-border: #ddd;
	--mh-nav-mobile-border-sub: #808080;
	--mh-nav-mobile-indent-marker: #666;
	--mh-nav-mobile-active-bg: #ddd;
}

/* MH:FIX Menue-Button */
#main_nav_button { display: none; position: fixed; top: 10px; right: 20px; width: 32px; height: auto; margin: 0 0 0 -16px; padding: 0; z-index: 1002; border: none; background-color: transparent; transition: all 200ms ease-in-out; cursor: pointer; }
#main_nav_button:before,
#main_nav_button:after { content: ''; display: block; height: 3px; background-color: var(--mh-nav-button-bar); transition: all 200ms ease-in-out; }
#main_nav_button:before { margin-bottom: 15px; box-shadow: 0 9px 0 var(--mh-nav-button-bar); }
/* Hover + Focus: nur skalieren, Farbe bleibt gleich */
#main_nav_button:hover,
#main_nav_button:focus-visible { transform: scale(1.1); }
/* Geoeffnet: X-Form + eigene Farbe */
#main_nav_button.active:before,
#main_nav_button.active:after { background-color: var(--mh-nav-button-bar-active); }
#main_nav_button.active:before { box-shadow: none; transform: translateY(9px) rotate(45deg); }
#main_nav_button.active:after  { transform: translateY(-9px) rotate(-45deg); }
/* Geoeffnet + Hover/Focus: nur skalieren */
#main_nav_button.active:hover,
#main_nav_button.active:focus-visible { transform: scale(1.1); }
/* Fokusring fuer Tastaturnavigation */
#main_nav_button:focus-visible { outline: 2px solid var(--mh-nav-focus-outline); outline-offset: 3px; }
/* MH:/FIX */

/* Seals: Position wie auf der alten Seite links im Sticky-Header vor der Sprachwahl,
   vertikal mittig (100px bzw. 60px Header, Button 21px hoch). Das Menü öffnet auch
   auf dem Desktop über den Button. */
#main_nav_button { top: 40px; right: auto; left: 20px; margin: 0; }
@media all and (min-width: 981px) {
	#main_nav_button { display: block; }
}
@media all and (max-width: 980px) {
	#main_nav_button { top: 20px; }
}
@media all and (max-width: 480px) {
	#main_nav_button { left: 10px; }
}


/* =========================================================================
   Desktop: Panel
   Geschlossen per visibility aus der Tab-Reihenfolge, die Verzögerung lässt
   die Einklapp-Animation erst zu Ende laufen.
   ========================================================================= */
#main_nav_bg { display: block; position: fixed; top: 0; left: 0; width: 100%; max-height: 0; margin: 0; padding: 0; z-index: 998; overflow: hidden; visibility: hidden;
  background-color: var(--color-nav-bg); --color-focus: #000;
  transition: max-height 1000ms ease-in-out, visibility 0s linear 1000ms; }
#main_nav_bg.active { max-height: 100vh; overflow-y: auto; visibility: visible; transition: max-height 1000ms ease-in-out, visibility 0s; }

#main_nav_content { display: block; position: relative; width: 100%; max-width: 1600px; margin: 0 auto; padding: 140px 2.5% 40px 2.5%; }

#main_nav { position: relative; width: 100%; margin: 0; padding: 0; z-index: 99; }

#main_nav ul { margin: 0; padding: 0; list-style: none; }
#main_nav li { display: block; margin: 0; padding: 0; list-style-type: none; background-image: none; }

/* Erste Ebene nebeneinander, Unterebenen offen darunter
   Reihenfolge: normal → current/active → hover gewinnt immer */
#main_nav ul.rex-navi1 { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem 1.875rem; }
#main_nav li a { display: block; padding: 5px 10px; font-size: 1rem; line-height: 1.25; color: var(--mh-nav-link-color); text-decoration: none; }
#main_nav li a.rex-current,
#main_nav li a.rex-active { color: var(--mh-nav-link-hover); }
#main_nav li a.rex-current { text-decoration: underline; text-underline-offset: 4px; }
#main_nav li a:hover,
#main_nav li a:focus-visible { color: var(--mh-nav-link-hover); }

#main_nav ul.rex-navi2 li a { padding: 0 0 0 20px; font-size: 0.9375rem; line-height: 1.2; }
#main_nav ul.rex-navi3 li a { padding: 0 0 0 40px; font-size: 0.875rem; line-height: 1.29; }

#main_nav ul.rex-navi4 { display: none !important; }

#main_nav li.rex-article-32 { max-width: 140px; }


/* =========================================================================
   Mobile Navigation (max-width: 980px)
   ========================================================================= */
@media all and (max-width: 980px) {
	/* Menue-Button einblenden */
	#main_nav_button { display: block; }
	#main_nav_button.active:focus-visible { outline-color: #000; }

	/* Desktop-Panel aufheben, das Overlay übernimmt #main_nav */
	#main_nav_bg { position: static; max-height: none; overflow: visible; visibility: visible; background-color: transparent; transition: none; }
	#main_nav_content { padding: 0; }

	/* Navigation: im mobilen Modus als Fullscreen-Overlay, über dem Sticky-Header */
	#main_nav { clear: both; display: none; position: fixed; top: 0; left: 0; width: 100%; height: auto; margin: 0; z-index: 1000; overflow: auto; overflow-x: hidden; background-color: var(--mh-nav-mobile-overlay-bg); }
	#main_nav_bg.active #main_nav { display: block; height: 100%; max-height: 100%; padding: 70px 0 20px 0; }

	#main_nav ul,
	#main_nav ul.rex-navi1 { display: block; }
	#main_nav li { display: block; float: none; height: auto; margin: 0; padding: 0; }
	#main_nav li.rex-article-32 { max-width: none; }

	/* Erste Ebene mobil (Reihenfolge: normal → current/active → hover gewinnt immer) */
	#main_nav li a { display: block; position: relative; padding: 10px; font-size: 1.125rem; line-height: 1.25; text-align: left; text-decoration: none; color: var(--mh-nav-mobile-text); background-color: var(--mh-nav-mobile-overlay-bg); border-bottom: 1px solid var(--mh-nav-mobile-border); }
	#main_nav li a.rex-current { background-color: var(--mh-nav-mobile-active-bg); color: var(--mh-nav-mobile-text); box-shadow: inset 4px 0 0 var(--mh-nav-accent); }
	#main_nav li a.rex-active  { background-color: var(--mh-nav-mobile-active-bg); color: var(--mh-nav-mobile-text); }
	#main_nav li a:hover,
	#main_nav li a:focus-visible { background-color: var(--mh-nav-mobile-hover-bg); color: var(--mh-nav-mobile-text); }

	/* --- Zweite Ebene --- */
	#main_nav ul.rex-navi2 { display: none; position: relative; width: 100%; }

	/* Hover und Focus ohne aria-expanded=true: Submenu bleibt geschlossen */
	#main_nav .rex-navi1 li.has-children:hover > ul,
	#main_nav .rex-navi1 li.has-children > a:hover ~ ul,
	#main_nav .rex-navi1 li.has-children > a:focus-visible ~ ul { display: none; }

	/* Submenu anzeigen wenn JS aria-expanded=true oder rex-active gesetzt hat */
	#main_nav .rex-navi1 li.has-children.rex-active:hover > ul,
	#main_nav .rex-navi1 li.has-children:hover > a[aria-expanded="true"] ~ ul,
	#main_nav .rex-navi1 li.has-children > a[aria-expanded="true"] ~ ul { display: block; }

	/* Aktive Seite: Submenu beim Laden offen halten */
	#main_nav_bg.active #main_nav li.rex-current > ul,
	#main_nav_bg.active #main_nav li.rex-active > ul { display: block; }

	#main_nav ul.rex-navi2 li a { padding: 10px 10px 10px 20px; font-size: 0.9375rem; border-bottom: 1px solid var(--mh-nav-mobile-border-sub); color: var(--mh-nav-mobile-text); background-color: var(--mh-nav-mobile-level2-bg); }
	#main_nav ul.rex-navi2 li a.rex-current { background-color: var(--mh-nav-mobile-active-bg); box-shadow: inset 4px 0 0 var(--mh-nav-accent); }
	#main_nav ul.rex-navi2 li a.rex-active  { background-color: var(--mh-nav-mobile-active-bg); }
	#main_nav ul.rex-navi2 li a:hover,
	#main_nav ul.rex-navi2 li a:focus-visible { background-color: var(--mh-nav-mobile-hover-bg); color: var(--mh-nav-mobile-text); }

	/* --- Dritte Ebene --- eingerueckt unterhalb des Eltern-Links */
	#main_nav ul.rex-navi3 { display: none; position: relative; width: 100%; }

	#main_nav_bg.active #main_nav li.rex-active > ul.rex-navi3,
	#main_nav ul.rex-navi2 li.has-children > a[aria-expanded="true"] ~ ul.rex-navi3 { display: block; }

	#main_nav ul.rex-navi3 li a { padding: 10px 10px 10px 30px; font-size: 0.875rem; color: var(--mh-nav-mobile-text); background-color: var(--mh-nav-mobile-level3-bg); }
	#main_nav ul.rex-navi3 li a.rex-current { background-color: var(--mh-nav-mobile-active-bg); box-shadow: inset 4px 0 0 var(--mh-nav-accent); }
	#main_nav ul.rex-navi3 li a.rex-active  { background-color: var(--mh-nav-mobile-active-bg); }
	#main_nav ul.rex-navi3 li a:hover,
	#main_nav ul.rex-navi3 li a:focus-visible { background-color: var(--mh-nav-mobile-hover-bg); color: var(--mh-nav-mobile-text); }

	/* Einrueckung per Pseudoelement */
	#main_nav ul.rex-navi2 li a:before { content: '-';  display: inline-block; margin-right: 5px; color: var(--mh-nav-mobile-indent-marker); }
	#main_nav ul.rex-navi3 li a:before { content: '--'; display: inline-block; margin-right: 5px; color: var(--mh-nav-mobile-indent-marker); }

	/* Pfeil-Indikator, dreht per aria-expanded */
	#main_nav .rex-navi1 > li > a.has-children-a,
	#main_nav .rex-navi2 > li > a.has-children-a { padding-right: 40px; }
	#main_nav .rex-navi1 > li > a.has-children-a::after,
	#main_nav .rex-navi2 > li > a.has-children-a::after { content: ''; display: block; position: absolute; top: 50%; right: 16px; width: 8px; height: 8px;
	  border-right: 2px solid var(--mh-nav-mobile-text); border-bottom: 2px solid var(--mh-nav-mobile-text); transform: translateY(-70%) rotate(45deg); transition: transform 200ms ease; }
	#main_nav .rex-navi1 > li > a.has-children-a[aria-expanded="true"]::after,
	#main_nav .rex-navi2 > li > a.has-children-a[aria-expanded="true"]::after { transform: translateY(-30%) rotate(225deg); }
}


/* =============================================================================
   6) Projektspezifisches
   ============================================================================= */

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

.text_color_black    { color: #000; }
.text_color_gray     { color: var(--color-gray); }
.text_color_darkgray { color: var(--color-darkgray); }
.text_color_orange   { color: var(--color-orange-alt); }

@media all and (max-width: 980px) {
    .break_mobile { display: block; width: 100%; height: 1px; overflow: hidden; }
}

/* Button-Links (TinyMCE-Klasse link_as_button) und Matchcode-Berechnung in der Optik
   der alten Seite. --color-link ist Weiß, deshalb eigener Hintergrund statt FIX-Wert. */
a.link_as_button,
a.button_back_to_matchcode { display: inline-block; margin: 0 0 0.625rem 0; padding: 5px 15px; border: none; border-radius: 0; background-color: var(--color-orange-alt); text-align: center; color: #fff; text-decoration: none; cursor: pointer; }
a.link_as_button:hover,
a.link_as_button:focus-visible,
a.button_back_to_matchcode:hover,
a.button_back_to_matchcode:focus-visible { background-color: #000; color: #fff; }
a.button_back_to_matchcode { margin: 0 0 1.25rem 2.5%; }

/* Scroll-to-top-Button (AddOn) in der Optik des alten Buttons. Am body gesetzt,
   weil scroll_to_top_button.css nach dieser Datei lädt und seine :root-Werte sonst gewinnen. */
body { --mh-scroll-top-bg: rgba(0,0,0,0.75); --mh-scroll-top-bg-hover: #000; --mh-scroll-top-color: #fff; }

/* --- Suchbox (Overlay von rechts, main20261026.js) ------------------------ */
#suchbox_bg { position: fixed; top: 0; right: 0; width: 240px; height: 100vh; margin: 0; padding: 0; z-index: 997; background-color: var(--color-overlay-bg);
  transform: translateX(100%); visibility: hidden; transition: transform 1000ms ease-in-out, visibility 0s linear 1000ms; }
#suchbox_bg.active { transform: none; visibility: visible; transition: transform 1000ms ease-in-out, visibility 0s; }

#suchbox { padding: 200px 15px 0 15px; }
#suchbox .search_it_form { position: relative; width: 100%; max-width: 210px; margin: 0; padding: 0; background-color: #f0f0f0; --color-focus: #000; }
#suchbox .search_it_flex { display: flex; align-items: center; }
#suchbox input.search_it_text { flex: 1 1 auto; min-width: 0; height: 30px; margin: 0; padding: 0 10px; border: none; background-color: transparent; font-family: inherit; font-size: 0.875rem; line-height: 2.14; color: #000; }
#suchbox .search_it_button { flex: 0 0 30px; width: 30px; height: 30px; margin: 0; padding: 0; border: none; overflow: hidden; color: transparent; font-size: 0;
  background-color: transparent; background-image: url(suchlupe.svg); background-position: center; background-repeat: no-repeat; background-size: 24px 24px; cursor: pointer; }
#suchbox .search_it_button:hover,
#suchbox .search_it_button:focus-visible { opacity: 0.5; }

.search_highlighter { background-color: #f0f0f0; color: #000; }

/* --- Kontakt-Overlay "?" (Einblenden per .visible, main20261026.js) ------- */
a#page_betrater_kontaktieren { display: block; position: fixed; top: 50%; right: 0; width: 40px; height: 40px; margin: 0; padding: 0; z-index: 900; overflow: hidden; text-decoration: none;
  background-color: rgba(238,114,2,0.85); background-image: url(icon_fragezeichen.png); background-position: center; background-repeat: no-repeat; background-size: 30px 30px;
  opacity: 0; visibility: hidden; transition: opacity 200ms ease-in-out, visibility 0s linear 200ms; }
a#page_betrater_kontaktieren.visible { opacity: 1; visibility: visible; transition: opacity 200ms ease-in-out, visibility 0s; }
a#page_betrater_kontaktieren span { display: none; }
a#page_betrater_kontaktieren:hover,
a#page_betrater_kontaktieren:focus-visible { background-color: var(--color-orange); }

/* --- Bewegung reduzieren -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #main_nav_bg,
    #main_nav_bg.active,
    #suchbox_bg,
    #suchbox_bg.active,
    a#page_betrater_kontaktieren,
    #sticky_header_right a svg.svg_icon { transition: none; }
}


/* skiplinks.css */
/* Skip-Link - ausserhalb des sichtbaren Bereichs */
.skiplinks { position: absolute; top: -300px; left: 0; width: 100%; min-width: 300px; display: flex; justify-content: center; z-index: 2000; transition: top 0.3s ease-in-out; }
.skiplinks a { margin: 0 0.5rem; padding: 0.5rem 1rem; text-decoration: none; color: #fff; background-color: #333; border-radius: 0 0 4px 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
.skiplinks a:hover, .skiplinks a:focus { background-color: blue; }
/* Wenn ein Skip-Link den Fokus bekommt, wird die Skip-Link-Leiste sichtbar */
.skiplinks:focus-within { top: 0; }

/* breadcrumb.css */
#breadcrumb_bg { clear: both; display: block; }
#breadcrumb { display: block; width: 100%; max-width: 1200px; padding: 10px 2.5%; margin: 0 auto; }
#breadcrumb ul, #breadcrumb li { list-style: none; list-style-type: none; background-image: none; }
#breadcrumb ul { display: block; margin: 0; padding: 0; }
#breadcrumb li { display: inline-block; margin: 0; padding: 0; color: #222; font-size: 0.8rem; }
#breadcrumb li::after { content: '>'; display: inline-block; margin: 0 5px 0 8px; padding: 0; }
#breadcrumb li:last-child::after { content: ''; display: none; }
#breadcrumb li a { display: inline-block; margin: 0; padding: 0; color: #444; text-decoration: none; }
#breadcrumb li a:hover,
#breadcrumb li a:focus {  color: #222; text-decoration: underline; }

/* accessibility_toggle_box.css */
#accessibility_toggle_box { display: block; margin: 10px 0; text-align: right; }

.accessibility-toggle {
    display: inline-block;
    padding: 8px 12px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
}
.accessibility-toggle:hover { background: #e0e0e0; }

/* Icon fuer den Kontrast-Button */
.icon-contrast {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM8 1v14A7 7 0 0 1 8 1z'/%3E%3C/svg%3E");
    background-size: contain;
    margin: 0;
    vertical-align: middle;
}
/* Schwarz/Weiss-Modus Styles */
.black-white-mode {
    filter: grayscale(100%) contrast(120%);
}
.black-white-mode * {
    color: #000 !important;
    background-color: #fff !important;
    border-color: #000 !important;
}
.black-white-mode svg.svg_icon { fill: #000 !important; }
/* Ausnahmen fuer wichtige UI-Elemente */
.black-white-mode a:focus,
.black-white-mode button:focus,
.black-white-mode input:focus {
    outline: 3px solid #000 !important;
}
.black-white-mode img,
.black-white-mode svg,
.black-white-mode video {
    filter: grayscale(100%) contrast(120%) !important;
}
.black-white-mode #content > div {
    border-bottom: 1px solid #ccc;
}
.black-white-mode #content > div:first-child {
    border-top: 1px solid #ccc;
}
/* Status des Buttons anzeigen */
.black-white-mode #black-white-toggle {
    background-color: #333 !important;
    color: white !important;
}

@media all and (max-width:768px) {
    #accessibility_toggle_box {
        margin: 20px 0 10px 0;
        text-align: center;
    }
}
@media all and (max-width:480px) {
    #accessibility_toggle_box {
        text-align: left;
    }
}


/* scroll_to_top_button.css */
:root {
	--mh-scroll-top-bg: #2a406e;
	--mh-scroll-top-bg-hover: #58698d;
	--mh-scroll-top-color: #fff;
}

#scroll_to_top { display: flex; align-items: center; justify-content: center; position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background-color: var(--mh-scroll-top-bg); color: var(--mh-scroll-top-color); cursor: pointer; z-index: 500; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease-in-out, background-color 200ms ease-in-out; }

#scroll_to_top.visible { opacity: 1; visibility: visible; pointer-events: auto; }

#scroll_to_top:hover,
#scroll_to_top:focus-visible { background-color: var(--mh-scroll-top-bg-hover); }

#scroll_to_top:focus-visible { outline: 2px solid blue; outline-offset: 3px; }

#scroll_to_top .icon-arrow-up { display: block; width: 12px; height: 12px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(-45deg) translate(-2px, 2px); }

@media (prefers-reduced-motion: reduce) {
	#scroll_to_top { transition: none; }
}

@media all and (max-width: 480px) {
	#scroll_to_top { right: 12px; bottom: 12px; width: 40px; height: 40px; }
}


/* andresmedia_link.css */
#andresmedia { clear: both; display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 10px; z-index: 1; background-color: #444; font-size: 0.8rem; color: #fff; text-align: center; }
#andresmedia a { color: #fff; text-decoration: none; }
#andresmedia a:hover,
#andresmedia a:focus { color: #fff; text-decoration: underline; }

/* wow_effekte.css */
/* ------ wow Effekte ------ */
.wow {
    animation-delay: 0.5s;
    animation-duration:2s;
    animation-fill-mode:both;
}
.wow.hide { visibility: hidden; }
.wow.animate { visibility: visible; }

@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
.wow.animate.effect_fadeIn{animation-name:fadeIn}

@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}
.wow.animate.effect_fadeInDown{animation-name:fadeInDown}

@keyframes rollInLeft{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}
.wow.animate.effect_rollInLeft{animation-name:rollInLeft}

@keyframes rollInRight{0%{opacity:0;transform:translate3d(100%,0,0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}
.wow.animate.effect_rollInRight{animation-name:rollInRight}

@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.wow.animate.effect_zoomIn{animation-name:zoomIn}

@keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}
.wow.animate.effect_zoomInDown{animation-name:zoomInDown}

@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}
.wow.animate.effect_zoomInLeft{animation-name:zoomInLeft}

@keyframes zoomInRight{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}
.wow.animate.effect_zoomInRight{animation-name:zoomInRight}

@keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}
.wow.animate.effect_zoomInUp{animation-name:zoomInUp}

@keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}
.wow.animate.effect_slideInDown{animation-name:slideInDown}

@keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}
.wow.animate.effect_slideInLeft{animation-name:slideInLeft}

@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}
.wow.animate.effect_slideInRight{animation-name:slideInRight}

@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}
.wow.animate.effect_slideInUp{animation-name:slideInUp}

/* Reduzierte Bewegung: Animation ueberspringen, Inhalt sofort und vollstaendig sichtbar */
@media (prefers-reduced-motion: reduce) {
    .wow { animation: none !important; }
    .wow.hide { visibility: visible; opacity: 1; }
}


/* 030_faq_accordion.css */
.m030_faq_accordion .faq_accordions { margin: 0 0 20px 0; }

.m030_faq_accordion .faq_accordions .faq_accordion { border: 1px solid #ddd; margin-bottom: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.m030_faq_accordion .faq_accordions .faq_question { margin: 0; }

.m030_faq_accordion .faq_accordions .faq_toggle { width: 100%; background: #f8f9fa; border: none; padding: 10px 20px; text-align: left; font-size: 1.125rem; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s ease; color: #333; }
.m030_faq_accordion .faq_accordions .faq_toggle:hover { background: #dee2e6; }
.m030_faq_accordion .faq_accordions .faq_toggle:focus-visible { outline: 2px solid blue; outline-offset: -3px; background: #dee2e6; }

.m030_faq_accordion .faq_accordions .faq_accordion.open .faq_toggle { background: #333; color: #fff; }
.m030_faq_accordion .faq_accordions .faq_accordion.open .faq_toggle:hover { background: #222; color: #fff; }

.m030_faq_accordion .faq_accordions .faq_icon { font-size: 1.5rem; font-weight: bold; flex-shrink: 0; margin-left: 15px; }
.m030_faq_accordion .faq_accordions .faq_answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #fff; }
/* max-height muss ein fester Wert sein, damit der Übergang animiert - großzügig
   gewählt, weil die Antwort TinyMCE-HTML mit Absätzen und Listen sein kann */
.m030_faq_accordion .faq_accordions .faq_accordion.open .faq_answer { max-height: 3000px; transition: max-height 0.5s ease-in; }
.m030_faq_accordion .faq_accordions .faq_answer_content { padding: 10px 20px; border-top: 1px solid #eee; line-height: 1.6; color: #555; }

.m030_faq_accordion .faq_accordions .faq_answer_content > :first-child { margin-top: 0; }
.m030_faq_accordion .faq_accordions .faq_answer_content > :last-child { margin-bottom: 0; }
.m030_faq_accordion .faq_accordions .faq_answer_content p { margin: 0 0 10px 0; }
.m030_faq_accordion .faq_accordions .faq_answer_content ul, .m030_faq_accordion .faq_accordions .faq_answer_content ol { margin: 0 0 10px 0; padding-left: 20px; }
.m030_faq_accordion .faq_accordions .faq_answer_content li { margin-bottom: 5px; }

/* Responsive Design */
@media (max-width: 768px) {
.m030_faq_accordion .faq_accordions .faq_toggle { padding: 8px 15px; font-size: 1rem; }
.m030_faq_accordion .faq_accordions .faq_answer_content { padding: 8px 15px; }
.m030_faq_accordion .faq_accordions .faq_icon { font-size: 1.25rem; margin-left: 10px; }
}

/* Hochkontrast-Modus Support */
@media (prefers-contrast: more) {
.m030_faq_accordion .faq_accordions .faq_accordion { border: 2px solid #000; }
.m030_faq_accordion .faq_accordions .faq_toggle { border-bottom: 2px solid #000; }
}

/* Bewegung / Animationen reduzieren bzw. abschalten */
@media (prefers-reduced-motion: reduce) {
.m030_faq_accordion .faq_accordions .faq_toggle, .m030_faq_accordion .faq_accordions .faq_answer { transition: none; }
}


/* 050_openstreetmap.css */
.m050_openstreetmap .openstreetmap { display: block; width: 100%; height: 500px; border: 1px solid #ccc; }

.m050_openstreetmap .openstreetmap_info { display: block; margin: 20px 0 40px 0; padding: 0 15px; text-align: center; }
.m050_openstreetmap .openstreetmap_info button { display: inline-block; margin: 0 10px 10px 10px; padding: 5px 20px; text-decoration: none; color: #fff; background-color: #000; border: none; border-radius: 0; cursor: pointer; transition: all 0.2s ease; }
.m050_openstreetmap .openstreetmap_info button:hover,
.m050_openstreetmap .openstreetmap_info button:active,
.m050_openstreetmap .openstreetmap_info button:focus { text-decoration: none; color: #fff; background-color: #999; }

.m050_openstreetmap .openstreetmap.blocked { display: flex; align-items: center; justify-content: center; background: #f9f9f9; border: 2px dashed #ddd; border-radius: 8px; }
.m050_openstreetmap .openstreetmap-cookie-notice { text-align: center; color: #666; padding: 30px 20px 10px 20px; }
.m050_openstreetmap .openstreetmap-cookie-notice h3 { color: #666; }
.m050_openstreetmap .openstreetmap-cookie-notice button { padding: 10px 20px; background: #007cba; color: #fff; border: none; cursor: pointer; }
.m050_openstreetmap .openstreetmap-cookie-notice button:hover,
.m050_openstreetmap .openstreetmap-cookie-notice button:focus { background: #005a87; }

@media (prefers-reduced-motion: reduce) {
.m050_openstreetmap .openstreetmap_info button { transition: none; }
}


/* extras_011_formular_yform_flex.css */
/* ==========================================================================
   ACHTUNG: CSS von extras_010_formular_yform und extras_011_formular_yform_flex IMMER exakt GLEICH halten !!!
   (Wichtig: Im Template daher nur eine der beiden CSS einbinden.)
   ========================================================================== */

.yform form { display: flex; flex-wrap: wrap; column-gap: 4%; margin: 0 0 20px 0; padding: 0; }
.yform form > * { flex-basis: 100%; }

/* .form-group ist ein Flex-Item, kollabiert sein margin-bottom deshalb nicht
   mit dem der Kinder - eigenes margin-bottom hier wuerde sich zum
   margin-bottom von .form-control (unten) addieren (40px statt 20px). */
.yform .form-group { margin-bottom: 0; }

/* Label-Styling für bessere Barrierefreiheit */
.yform label { display: block; margin-bottom: 6px; font-weight: 500; color: #333; }

/* Hervorhebung von Pflichtfeldern im Label */
.yform label .required { color: #a94442; margin-left: 3px; }

.yform .form-control { box-sizing: border-box; display: block; width: 100%; height: auto; margin: 0 0 20px 0; padding: 8px 10px; font-family: inherit; font-size: 0.8rem; color: #001f40; background-color: #fff; border: solid 1px #dfe6e7; border-radius: 5px; box-shadow: none; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.yform select.form-control { height: 36px; }
.yform .form-control:hover { border-color: #a8aeb5; }
.yform .form-control:focus, .yform .form-control:focus-visible { border-color: #37434f; outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); }

.yform textarea.form-control { height: 284px; }

.yform .form-check-group { clear: both; margin: 0 0 20px 0; }
.yform .form-check-group .control-label { clear: both; display: block; margin: 0 0 10px 0; }

/* Generelle Formatierung für Checkboxen und Radiobuttons */
.yform .checkbox,
.yform .radio { clear: both; position: relative; margin-bottom: 10px; }

.yform .checkbox label,
.yform .radio label { position: relative; cursor: pointer; margin-left: 0; padding: 0 0 0 30px; }

.yform .checkbox label input,
.yform .radio label input { position: absolute; top: 0; left: 0; width: 20px; height: 20px; margin: 0; padding: 0; }

.yform .checkbox input:focus,
.yform .checkbox input:focus-visible,
.yform .radio input:focus,
.yform .radio input:focus-visible { outline: 2px solid #0078d7; outline-offset: 2px; }

.yform .radio i.form-helper,
.yform .checkbox i.form-helper { display: none; }


/* Hilfetext-Stil */
.yform .help-text { display: block; font-size: 0.85rem; color: #666; margin-top: -15px; margin-bottom: 15px; }

/* Verbesserter Button für Barrierefreiheit */
.yform .btn-primary { clear: both; display: block; flex-basis: auto; width: fit-content; min-width: 40px; height: auto; margin: 0 0 10px 0; padding: 10px; border: none; border-radius: 5px; text-align: center; font-weight: bold; background-color: #58698d; color: #FFF; cursor: pointer; transition: background-color 0.2s, transform 0.1s; }
.yform .btn-primary:hover { background-color: #001f40; color: #FFF; }
.yform .btn-primary:focus, .yform .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); background-color: #001f40; }
.yform .btn-primary:active { transform: translateY(1px); }

/* Besser sichtbare Pflichtfeld-Markierung */
.yform .pflichtfelder { font-size: 0.9rem; margin-top: 15px; margin-bottom: 20px; color: #555; }

/* Fehlerhinweisbox, überm Formular */
.yform div.alert { padding: 15px 20px 5px 20px; margin-bottom: 20px; border-radius: 4px; }
.yform div.alert span { margin-right: 15px; }
.yform div.alert-danger { border: 2px solid #a94442; background-color: #FBF6F6; color: #a94442; }
.yform .alert ul { list-style-type: none; margin: 0; padding: 0; }
.yform .alert li { list-style-type: none; margin: 0 0 10px 0; padding: 0; color: #a94442; }

/* Grundlegende Fehlermarkierung für alle Formularelemente */
.yform .has-error { margin-bottom: 20px; }
.yform .has-error .control-label { color: #a94442; font-weight: 500; }
.yform .has-error label { color: #a94442; }
.yform .has-error .form-control { border-color: #a94442; box-shadow: 0 0 0 2px rgba(169, 68, 66, 0.25); }

/* Fehlermarkierung für reguläre Eingabefelder */
.yform .has-error .form-control { border-color: #a94442; box-shadow: 0 0 0 1px #EAD0D0; background-color: #FBF6F6; }
/* Spezielle Fehlermarkierung für die Checkbox */
.yform .formcheckbox.has-error label { color: #a94442; }
.yform .formcheckbox.has-error .form-helper { border-color: #a94442; box-shadow: 0 0 0 1px #EAD0D0; }

/* Optionale visuelle Verstärkung für die Checkbox */
.yform .formcheckbox.has-error { padding: 10px; border-radius: 4px; background-color: #FBF6F6; }

/* Fokus-Zustand für fehlerhafte Checkboxen verstärken */
.yform .formcheckbox.has-error input[type="checkbox"]:focus + .form-helper,
.yform .formcheckbox.has-error input[type="checkbox"]:focus-visible + .form-helper { border-color: #a94442; box-shadow: 0 0 0 3px rgba(169, 68, 66, 0.3); }

/* Verbesserte Fokusdarstellung für Tastaturbedienung */
.yform a:focus, .yform a:focus-visible { outline: 2px solid #0078d7; outline-offset: 2px; }

/* High-contrast mode Unterstützung */
@media (forced-colors: active) {
.yform .form-control:focus { outline: 2px solid CanvasText; }
.yform .btn-primary { border: 1px solid CanvasText; }
}


/* Honeypot gegen SPAM */
.yform .honeypot_box div.form-group { display: block; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; opacity: 0.1; }
/* Wird sichtbar, wenn das Feld den Fokus bekommt oder .has-error hat*/
.yform .honeypot_box div.form-group:focus-within,
.yform .honeypot_box div.form-group.has-error { display: block; width: auto; height: auto; margin: 0 0 20px 0; padding: 15px 20px 5px 20px; overflow: visible; opacity: 1; background-color: #f8f8f8; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
.yform .honeypot_box div.form-group.has-error { border-color: #a94442; }


/* Datenschutz Hinweis */
.yform .privacy_box { clear: both; position: relative; margin-bottom: 25px; padding: 5px 0; }
.yform .privacy_box a { color: #58698d; text-decoration: underline; font-weight: 500; }
.yform .privacy_box a:hover { color: #001f40; }
.yform .privacy_box a:focus, .yform .privacy_box a:focus-visible { outline: 2px solid #0078d7; outline-offset: 2px; }
/* Fehlerzustand für die Checkbox */
.yform .privacy_box.has-error label { color: #a94442; }
.yform .privacy_box.has-error .form-helper { border-color: #a94442; box-shadow: 0 0 0 1px rgba(169, 68, 66, 0.25); }
.yform .privacy_box.has-error { background-color: rgba(169, 68, 66, 0.05); padding: 10px; border-radius: 4px; }

/* hier ohne .yForm !!! */
.hinweis_email_erfolgreich_versendet { display: block; margin: 20px 0; padding: 20px; background-color: #5bb585; color: #fff; font-size: 1.5rem; text-align: center; }

/* ALTCHA-Widget (bw_altcha_captcha). Kommt als <altcha-widget> ins Formular. */
.yform altcha-widget { display: block; margin: 0 0 20px 0; }

/* Formular mit 2 Spalten: 48% + 4% column-gap (am form) + 48% = 100% */
.yform .form_left, .yform .form_right { flex-basis: 48%; min-width: 250px; margin: 0 0 20px 0; }
.yform .form_clear { flex-basis: 100%; }

@media all and (max-width:768px) {
.yform .form_left, .yform .form_right { flex-basis: 100%; }
}

/* Upload-Felder als Drop-Zone (Markup: yForm 5 value.upload.tpl.php). Natives
   <input type="file"> liegt unsichtbar über der ganzen Box - Klick und
   Drag-and-drop funktionieren dadurch ohne JS. styles_js.inc ergänzt nur
   Komfort (Dateiname, Dragover-Optik, Entfernen-Button); .has_file/.is_dragover
   kommen von dort. */
.yform .upload_felder { flex-basis: 100%; margin: 0 0 20px 0; }

/* Optionale Überschrift über den Upload-Boxen (im Formular-Code als html-Feld) */
.yform .upload_felder .upload_titel { display: block; margin: 0 0 10px 0; font-weight: 600; font-size: 1.1rem; color: #333; }

/* Box */
.yform .upload_felder .form-group { position: relative; display: block; margin: 0 0 15px 0; padding: 20px 56px 20px 64px; min-height: 72px; border: 2px dashed #b9c2cc; border-radius: 6px; background-color: #f7f9fb; transition: border-color 0.2s, background-color 0.2s; }
.yform .upload_felder .form-group:hover,
.yform .upload_felder .form-group.is_dragover { border-color: #37434f; background-color: #eef3f8; }
.yform .upload_felder .form-group:focus-within { outline: 2px solid #0078d7; outline-offset: 2px; }
.yform .upload_felder .form-group.is_dragover { border-style: solid; }

/* Upload-Icon (Pfeil nach oben), Farbe im Projekt-CSS über fill anpassen */
.yform .upload_felder .form-group::before { content: ""; position: absolute; top: 50%; left: 22px; width: 24px; height: 24px; transform: translateY(-50%); background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V6'/><path d='M6 12l6-6 6 6'/><path d='M5 21h14'/></svg>"); pointer-events: none; }

/* Label = sichtbarer Text der Box; Hinweis in Klammern über .upload_hint */
.yform .upload_felder .control-label { display: block; margin: 0; font-weight: 600; color: #333; cursor: pointer; }
.yform .upload_felder .upload_hint { display: block; margin: 4px 0 0 0; font-weight: 400; font-size: 0.85rem; color: #666; }

/* Natives Input unsichtbar über die ganze Box legen (klick- und drop-fähig) */
.yform .upload_felder .input-group { display: block; position: static; }
.yform .upload_felder .input-group input[type="file"] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; z-index: 1; }

/* Ausgewählte Datei (wird vom JS gefüllt) */
.yform .upload_felder .upload_filename { display: none; margin: 6px 0 0 0; font-size: 0.85rem; color: #333; word-break: break-all; }
.yform .upload_felder .form-group.has_file .upload_filename { display: block; }

/* Entfernen-Button (×) aus dem yForm-Template: nur mit Datei sichtbar, über dem Input */
.yform .upload_felder .input-group-btn { display: none; position: absolute; top: 10px; right: 10px; z-index: 2; }
.yform .upload_felder .form-group.has_file .input-group-btn { display: block; }
.yform .upload_felder .input-group-btn .btn-default { width: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid #b9c2cc; border-radius: 50%; background-color: #fff; color: #333; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.yform .upload_felder .input-group-btn .btn-default:hover { background-color: #a94442; border-color: #a94442; color: #fff; }
.yform .upload_felder .input-group-btn .btn-default:focus-visible { outline: 2px solid #0078d7; outline-offset: 2px; }

/* Hinweis-/Fehlertext unter dem Label (liegt unter dem transparenten Input, ist nur lesbar) */
.yform .upload_felder .help-block { position: relative; margin: 6px 0 0 0; font-size: 0.85rem; color: #666; }
.yform .upload_felder .help-block .text-warning { color: #a94442; }

/* Fehlerzustand */
.yform .upload_felder .form-group.has-error { border-color: #a94442; background-color: #FBF6F6; }
.yform .upload_felder .form-group.has-error .control-label { color: #a94442; }

/* Bereits hochgeladene Datei (nach fehlgeschlagener Validierung): yForm zeigt eine
   Checkbox "Häkchen setzen um die Datei zu entfernen" - normale Checkbox-Optik */
.yform .upload_felder .checkbox { margin: -5px 0 15px 0; }

@media (forced-colors: active) {
.yform .upload_felder .form-group { border-color: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
.yform .form-control,
.yform .btn-primary,
.yform .upload_felder .form-group { transition: none; }
}


/* extras_020_artikel_kategorie_teaser.css */
.extras_020_artikel_kategorie_teaser { display: flex; flex-flow: row wrap; justify-content: flex-start; }
.extras_020_artikel_kategorie_teaser a.teaser_category_box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 21.88%; height: auto; margin: 0 0 2.5% 2.5%; padding: 20px 10px; background-color: #000; color: #fff; text-decoration: none; text-align: center; transition: all 0.125s ease-in; }
.extras_020_artikel_kategorie_teaser a.teaser_category_box:hover { background-color: #999; color: #fff; text-decoration: none; }
.extras_020_artikel_kategorie_teaser a.teaser_category_box img { transition: all 500ms ease-in-out; }
.extras_020_artikel_kategorie_teaser a.teaser_category_box:hover img { transform: scale(1.1); }
.extras_020_artikel_kategorie_teaser a.teaser_category_box:focus, .extras_020_artikel_kategorie_teaser a.teaser_category_box:focus-visible { outline: 2px solid #0078d7; outline-offset: 2px; background-color: #999; color: #fff; }
.extras_020_artikel_kategorie_teaser a.teaser_category_box:focus img, .extras_020_artikel_kategorie_teaser a.teaser_category_box:focus-visible img { transform: scale(1.1); }
.extras_020_artikel_kategorie_teaser a.teaser_category_box.with_image { padding: 0; }
.extras_020_artikel_kategorie_teaser span.teaser_category_box_image { display: block; overflow: hidden; }
.extras_020_artikel_kategorie_teaser span.teaser_category_box_text { display: block; position: relative; z-index: 10; padding: 20px 10px; }

@media all and (max-width:980px) {
.extras_020_artikel_kategorie_teaser a.teaser_category_box { width: 30%; }
}

@media all and (max-width:768px) {
.extras_020_artikel_kategorie_teaser a.teaser_category_box { width: 46.25%; }
}

@media all and (max-width:480px) {
.extras_020_artikel_kategorie_teaser { display: block; }
.extras_020_artikel_kategorie_teaser a.teaser_category_box { display: block; width: 95%; }
}

@media (prefers-reduced-motion: reduce) {
.extras_020_artikel_kategorie_teaser a.teaser_category_box,
.extras_020_artikel_kategorie_teaser a.teaser_category_box img { transition: none; }
.extras_020_artikel_kategorie_teaser a.teaser_category_box:hover img,
.extras_020_artikel_kategorie_teaser a.teaser_category_box:focus img,
.extras_020_artikel_kategorie_teaser a.teaser_category_box:focus-visible img { transform: none; }
}


/* extras_021_artikel_kategorie_vor_zurueck.css */
.extras_021_artikel_kategorie_vor_zurueck { display: grid; grid-template-columns: 20% 1fr 20%; grid-template-areas: "back home next"; align-items: center; }
.extras_021_artikel_kategorie_vor_zurueck a { display: inline-block; padding: 5px 10px; text-decoration: none; color: #FFF; background-color: #000; white-space: nowrap; font-size: 0.8rem; }
.extras_021_artikel_kategorie_vor_zurueck a:hover { text-decoration: none; color: #FFF; background-color: #999; }
.extras_021_artikel_kategorie_vor_zurueck a:focus, .extras_021_artikel_kategorie_vor_zurueck a:focus-visible { outline: 2px solid #0078d7; outline-offset: 2px; }
.extras_021_artikel_kategorie_vor_zurueck .article_nav_back { grid-area: back; }
.extras_021_artikel_kategorie_vor_zurueck .article_nav_next { grid-area: next; text-align: right; }
.extras_021_artikel_kategorie_vor_zurueck .article_nav_home { grid-area: home; text-align: center; }


/* extras_030_suche_formular.css */
.extras_030_suche_formular { padding: 20px 30px; background-color: #333; color: #fff; }

.extras_030_suche_formular .search_it_form { display: block; width: 100%; height: auto; margin: 0; padding: 0; }
.extras_030_suche_formular .search_it_form fieldset { margin: 0; padding: 0; }

.extras_030_suche_formular .search_it_flex { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }

.extras_030_suche_formular .search_it_form input.search_it_text { display: block; width: 180px; height: auto; margin: 0 10px; padding: 5px 10px; color: #000; font-size: 15px; line-height: 25px; background-color: #fff; outline: none; border: 1px solid #666; transition: border-color 0.3s; }
.extras_030_suche_formular .search_it_form input.search_it_text:focus { border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }

.extras_030_suche_formular .search_it_form .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.extras_030_suche_formular .search_it_form input.hidden { display: none; }

.extras_030_suche_formular .search_it_form .search_it_button { display: block; width: 25px; height: 25px; margin: 0; padding: 0; z-index: 10; border: 1px solid transparent; color: #fff;
background-color: transparent;
/* background-image: url('/assets/addons/bw_modulhelper/icon_suchlupe_weiss.png'); */
/* oder inline mit %23fff für weiss oder %23000 fuer schwarz, (das %23 ist das # Zeichen) */
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.4 45.4"><path fill="%23fff" d="M27.9.3C19,.3,11.7,7.5,11.7,16.4s1.4,7.5,3.7,10.3l-13.2,13.2c-1,1-1,2.7,0,3.7l.9.9c1,1,2.7,1,3.7,0l13.2-13.2c.2-.2.3-.3.4-.5,2.2,1.2,4.8,1.9,7.5,1.9,8.9,0,16.1-7.2,16.1-16.1S36.8.3,27.9.3ZM27.9,29.5c-7.2,0-13.1-5.9-13.1-13.1S20.6,3.3,27.9,3.3s13.1,5.9,13.1,13.1-5.9,13.1-13.1,13.1Z"/></svg>');
background-repeat: no-repeat; background-position: center center; background-size: contain;
cursor: pointer; text-indent: -9999px; overflow: hidden; transition: opacity 0.3s, border-color 0.3s; }
.extras_030_suche_formular .search_it_form .search_it_button:hover { opacity: 0.5; }
.extras_030_suche_formular .search_it_form .search_it_button:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }

@media (prefers-reduced-motion: reduce) {
.extras_030_suche_formular .search_it_form input.search_it_text,
.extras_030_suche_formular .search_it_form .search_it_button { transition: none; }
}


/* extras_031_suche_ergebnis.css */
.search_highlighter { background-color: #F0F0f0; color: #000; }

.extras_031_suche_ergebnis { display: flex; flex-wrap: wrap; gap: 5%; }
.extras_031_suche_ergebnis_inhaltsseiten { width: 63%; }
.extras_031_suche_ergebnis_dateien { width: 32%; }

.extras_031_suche_ergebnis .download_box { display: flex; align-items: center; }
.extras_031_suche_ergebnis .download_icon { flex: 0 0 auto; margin-right: 15px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
.extras_031_suche_ergebnis .download_text { flex: 1; display: flex; flex-direction: column; }

@media all and (max-width: 480px) {
.extras_031_suche_ergebnis { flex-direction: column; gap: 20px; }
.extras_031_suche_ergebnis_inhaltsseiten,
.extras_031_suche_ergebnis_dateien { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
.extras_031_suche_ergebnis .download_icon { transition: none; }
}


/* matchcode20261028.css */
/* ----------------------------------------------------------------------------------
   Matchcode Seiten (Formular, Tabellen usw.)
---------------------------------------------------------------------------------- */ 

.matchbox_section { clear: both; display: block; }


#matchcode_placeholder { clear: both; display: block; margin: 0 0 20px 0; }    
#matchcode { display: block; position: relative; top: 0; left: 0; width: 740px; margin: 0; padding: 15px 30px 5px 30px; font-size: 30px; line-height: 40px; background-color: #FFF; border: 5px solid #ee7202; }

#matchcode.fixed { position: fixed; top: 105px; left: 2.63%; z-index: 999; }

#matchcode p { font-size: 16px; line-height: 20px; }

#matchcode_hover_info { display: block; font-size: 15px; line-height: 20px; }

#matchcode input { display: inline-block; width: 40px; height: auto; margin: 0 0 10px 0; padding: 0 2px; font-family: inherit; font-size: 30px; line-height: 40px; color: #000; text-align: center; cursor: pointer; 
border: 1px solid #CCC; border-radius: 5px; background-color: #FFF; }
#matchcode input:hover { border-color: #ED752D; }
#matchcode input:focus { border-color: #ED752D; outline: none; box-shadow: none; }


#matchcode input.matchcode_calculated { cursor: not-allowed; }
#matchcode input.matchcode_calculated:hover { border-color: #CCC; }

#matchcode input.matchcode_clickable:hover { box-shadow: 0 0 5px 0 #ED752D; }

#matchcode input#matchcode_federmaterial { background-color: #dfdfdb; }
#matchcode input#matchcode_ringmaterial { background-color: #fee7ef; }
#matchcode input#matchcode_nennquerschnitt { background-color: #E9F4F9; width: 80px; }
#matchcode input#matchcode_performance_index { background-color: #D1E5C9; }
#matchcode input#matchcode_aussendurchmesser_ring { background-color: #FFFBCF; width: 120px; }
#matchcode input#matchcode_innendurchmesser_ring { background-color: #FFFBCF; width: 120px; }
#matchcode input#matchcode_ausfuehrung { background-color: #e3d0b6; }
#matchcode input#matchcode_waermebehandlung { background-color: #e3d0b6; }
#matchcode input#matchcode_beschichtung { background-color: #cfc5da; }
#matchcode input#matchcode_beschichtungsstaerke { background-color: #fabf92; }



#matchcode .matchcode_input_box { display: inline-block; position: relative; top: 0; left: 0; width: auto; height: auto; margin: 0; padding: 0; z-index: auto; }

#matchcode .matchcode_input_box_info { position: absolute; top: -9px; left: auto; right: -9px; width: 18px; height: 18px; z-index: auto; background-image: url(icon_info.png); background-size: 18px 18px; background-position: right top; background-repeat: no-repeat; cursor: default; }

#matchcode .matchcode_input_box_info span { display: none; position: absolute; top: 50%; left: 50%; width: 200px; height: auto; min-height: 60px; margin: -30px 0 0 -100px; padding: 10px; z-index: 30; background-color: #ED752D; color: #FFF; font-size: 15px; line-height: 20px; }
#matchcode .matchcode_input_box_info:hover span { display: block; }


#matchcode_schritt_3 #matchcode input { cursor: not-allowed !important; }
#matchcode_schritt_3 #matchcode input:hover { border-color: #ccc !important; }
#matchcode_schritt_3 #matchcode input:focus { border-color: #ccc !important; }
#matchcode_schritt_3 #matchcode input.matchcode_clickable:hover { box-shadow: none !important; }

#matchcode_schritt_3 #matchcode .matchcode_input_box_info { display: none; }




#matchcode_hilfstabellen { clear: both; display: block; }
#matchcode_hilfstabellen .table_box { padding-top: 20px; }
#matchcode_hilfstabellen p { font-size: 16px; line-height: 20px; }

@media all and (max-width:980px) {
.matchbox_section .outer_box { clear: both; float: none; width: auto; margin: 0 10px 20px 10px; }

}

@media all and (max-width:768px) {
#matchcode { width: auto; max-width: 740px; margin: 0; padding: 15px 15px 5px 15px; font-size: 21px; line-height: 30px; }

#matchcode input { width: 30px; height: auto; margin: 0 2px 10px 2px; padding: 0 2px; font-size: 21px; line-height: 30px; }    
#matchcode input#matchcode_nennquerschnitt { width: 60px; }
#matchcode input#matchcode_aussendurchmesser_ring,
#matchcode input#matchcode_innendurchmesser_ring { width: 100px; }    
}
    
@media all and (max-width:480px) {
#matchcode { padding: 10px 10px 1px 10px; border: 3px solid #ee7202; }

#matchcode,    
#matchcode input { font-size: 18px; line-height: 25px; }

#matchcode input { width: 25px; }    
#matchcode input#matchcode_nennquerschnitt { width: 50px; }
#matchcode input#matchcode_aussendurchmesser_ring,
#matchcode input#matchcode_innendurchmesser_ring { width: 80px; }
}


/* ------------ Formular ------------ */ 

.matchcode_form { }    
.matchcode_form label {
clear: both; float: left; display: block; width: 120px; height: auto; margin: 0 0 10px 0; padding: 5px 0;
font-family: inherit; font-size: 16px; line-height: 20px; color: #000;
}

.matchcode_form input,
.matchcode_form textarea {
display: inline-block; height: auto; margin: 0 0 10px 0; padding: 5px 10px;
font-family: inherit; font-size: 16px; line-height: 20px; color: #000;
border: 1px solid #CCC; border-radius: 5px; background: #FFF;
}



.matchcode_form input:hover,
.matchcode_form textarea:hover { border-color: #a8aeb5; }

.matchcode_form input:focus,
.matchcode_form textarea:focus { border: 1px solid #ED752D; background-color: #f9f9f9; outline: none; box-shadow: none; }

.matchcode_form span.masseinheit { display: inline-block; width: auto; height: auto; margin: 0 0 0 5px; font-size: 12px; line-height: 20px; text-align: left; }


.matchcode_form button,
.matchcode_button,
.matchcode_berechnen,
#matchcode a.matchcode_link_button {
	clear: both; display: inline-block;
    width: auto; height: auto;
	margin: 0 0 10px 0; padding: 5px 15px;
    border: none; background-color: #ED752D;
    font-weight: 400; text-align: center; color: #FFF; border-radius: 5px;	
    font-size: 15px; line-height: 20px; vertical-align: middle;
    cursor: pointer; outline: none;
}
.matchcode_form button:hover,
.matchcode_button:hover,
.matchcode_berechnen:hover,
#matchcode a.matchcode_link_button:hover { background-color: #000; color: #FFF; }
   
#matchcode a.matchcode_link_button { text-decoration: none; }
#matchcode a.matchcode_link_button:hover { text-decoration: none; }
   


.matchbox_section .error,
.matchbox_section .success { display: block; padding: 5px 10px; margin: 0 0 10px 0; background-color: #c00; color: #FFF; font-size: 16px; line-height: 20px; }
.matchbox_section .success { background-color: #090; }



/* ------------ Formular: Kundendaten + Zusatzangaben ------------ */ 
#schritt_3 form .outer_box { margin-bottom: 0; }

#matchcode_form_kundendaten,
#matchcode_form_zusatzangaben,
#matchcode_form_email_versenden { display: block; margin: 0 0 20px 0; padding: 20px 20px 1px 20px; background-color: #eee; }

.form_input_box,
.form_checkbox_box { clear: both; display: block; margin: 0 0 10px 0; }

#matchcode_form_kundendaten label { display: inline-block; float: none; width: 120px; margin: 0 0 10px 0; padding: 0; }
    
#matchcode_form_kundendaten input {
display: inline-block; width: 240px; height: auto; margin: 0 0 10px 0; padding: 5px 15px; cursor: auto;
font-family: inherit; font-size: 16px; line-height: 20px; color: #000; text-align: left;
border: 1px solid #CCC; border-radius: 5px; background: #FFF; outline: none;
}
#matchcode_form_kundendaten input:hover { border-color: #a8aeb5; }
#matchcode_form_kundendaten input:focus { border-color: #37434f; outline: none; box-shadow: none; }

   
#matchcode_form_kundendaten button {
    box-sizing: border-box; 
	display: inline-block;
    width: auto; height: auto;
	margin: 0 0 10px 0; padding: 5px 15px;
    border: none; background-color: #ED752D;
    font-weight: bold; text-align: center; color: #FFF; border-radius: 5px;	
    cursor: pointer; outline: none;
}
#matchcode_form_kundendaten button:hover { background-color: #000; }
    
#matchcode_form_kundendaten .form_clear { clear: both; }

#matchcode_form_kundendaten .form_box_inline { display: inline-block; margin: 0 20px 10px 0; }
#matchcode_form_kundendaten .form_box_inline form { margin: 0; }


@media all and (max-width:768px) {
    #matchcode_form_kundendaten label, 
    #matchcode_form_kundendaten input { display: block; }
} 


/* Sonderfaelle */

#matchcode_form_kundendaten input { width: 240px; }

#matchcode_form_zusatzangaben input { width: 150px; }


#matchcode_form_email_versenden .form_input_box label { display: none; }
#matchcode_form_email_versenden .form_input_box textarea { max-width: 640px; height: 120px; }
#matchcode_form_email_versenden .form_checkbox_box label a { color: #000; text-decoration: underline; } 
#matchcode_form_email_versenden .form_checkbox_box label a:hover { color: #000; text-decoration: none; } 

#matchcode_form_email_versenden .form_button_box { clear: both; display: block; }


.form_text_pflichtfelder { font-size: 14px; line-height: 20px; }



/* ------------ Skizze / Bild mit Eingabefeldern  ------------ */ 
#matchcode_form_skizze { background-color: #FFF; max-width: 600px; margin: 0 auto; }

.matchcode_skizze { display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; }

.matchcode_skizze img { display: block; margin: 0 0 12px 0; }

.matchcode_skizze_input,
.matchcode_skizze_info { display: block; position: absolute; top: 0; left: auto; right: auto; width: auto; height: auto; margin: 0; padding: 0; z-index: 2; }

#matchcode_form_skizze input { display: block; width: 100%; margin: 0; border: 2px solid #ED752D; }
#matchcode_form_skizze input:focus { border: 2px solid #CCC; background-color: #f9f9f9; outline: none; box-shadow: none; }

#matchcode_form_skizze input.marked { background-color: #fcc; border-color: #c00; box-shadow: 0 0 5px 0 #c00;}


#matchcode_form_skizze span.masseinheit { display: block; position: absolute; top: auto; bottom: 5px; left: auto; right: -35px; width: 30px; height: auto; margin: 0; padding: 0; z-index: 1; font-size: 12px; line-height: 20px; text-align: left; background-color: #FFF; }


.matchcode_skizze_info { width: 60px; height: 80px; padding: 20px 0 0 0; z-index: 2; 
background-color: transparent; background-color: rgba(0,0,0,0.125); background-color: rgba(237,117,45,0.125); 
background-image: url(icon_info.png); background-size: 18px 18px; background-position: right top; background-repeat: no-repeat; cursor: default; }

.matchcode_skizze_info span { display: none; position: absolute; top: 50%; left: 50%; width: 200px; height: auto; min-height: 60px; margin: -30px 0 0 -100px; padding: 10px; z-index: 3; background-color: #ED752D; color: #FFF; }
.matchcode_skizze_info:hover span { display: block; }


/* Ausrichtung auf der jeweiligen Seite */

#matchcode_skizze_box_button_und_fehlerausgabe { display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 20; text-align: center; }

#matchcode_skizze_button_fehlerausgabe { display: block; margin: 0 0 10px 0; }


#matchcode_skizze_mor { }


.matchcode_skizze #matchcode_skizze_input_nuttiefe_d { width: 60px; width: 10%; }
.matchcode_skizze #matchcode_skizze_input_nutbreite_w {  width: 60px; width: 10%; }
.matchcode_skizze #matchcode_skizze_input_aussendurchmesser_nut_od,
.matchcode_skizze #matchcode_skizze_input_innendurchmesser_nut_id {  width: 100px; width: 16.66%; }
.matchcode_skizze #matchcode_skizze_info_csr { width: 50px; height: 90px; width: 8.33%; height: 15%; }
.matchcode_skizze #matchcode_skizze_info_odr,
.matchcode_skizze #matchcode_skizze_info_idr { width: 110px; height: 55px; width: 18.33%; height: 9.17%; }
.matchcode_skizze #matchcode_skizze_info_d { width: 50px; height: 60px; width: 8.33%; height: 10%; }
.matchcode_skizze #matchcode_skizze_info_w { width: 60px; height: 55px; width: 10%; height: 9.17%; }
.matchcode_skizze #matchcode_skizze_info_od,
.matchcode_skizze #matchcode_skizze_info_id { width: 100px; height: 55px; width: 16.66%; height: 9.17%; }



/* MOR Innendruck */
#matchcode_skizze_mor #matchcode_skizze_input_nuttiefe_d { top: 270px; left: 500px; top: 45%; left: 83.33%; }
#matchcode_skizze_mor #matchcode_skizze_input_nutbreite_w { top: 430px; left: 290px; top: 71.67%; left: 48.33%; }
#matchcode_skizze_mor #matchcode_skizze_input_aussendurchmesser_nut_od { top: 510px; left: 420px; top: 85%; left: 70%; }
#matchcode_skizze_mor #matchcode_skizze_info_csr { top: 225px; left: 0; top: 37.5%; left: 0; }
#matchcode_skizze_mor #matchcode_skizze_info_odr { top: 15px; left: 315px; top: 2.5%; left: 52.5%; }
#matchcode_skizze_mor #matchcode_skizze_info_d { top: 255px; left: 440px; top: 42.5%; left: 73.33%; }
#matchcode_skizze_mor #matchcode_skizze_info_w { top: 415px; left: 220px; top: 69.17%; left: 36.67%; }
#matchcode_skizze_mor #matchcode_skizze_info_od { top: 500px; left: 305px; top: 83.33%; left: 50.83%; }

/* MOR Aussendruck */
#page_52 #matchcode_skizze_mor #matchcode_skizze_input_nuttiefe_d { top: 270px; left: 125px; top: 45%; left: 20.83%; }
#page_52 #matchcode_skizze_mor #matchcode_skizze_input_nutbreite_w { top: 525px; left: 370px; top: 87.5%; left: 61.67%; }

#page_52 #matchcode_skizze_mor #matchcode_skizze_input_innendurchmesser_nut_id { top: 575px; left: 100px; top: 95.83%; left: 16.67%;}
#page_52 #matchcode_skizze_mor #matchcode_skizze_info_csr { top: 230px; left: 525px; top: 38.33%; left: 87.5%; }
#page_52 #matchcode_skizze_mor #matchcode_skizze_info_odr { top: 15px; left: 155px; top: 2.5%; left: 25.83%; }
#page_52 #matchcode_skizze_mor #matchcode_skizze_info_d { top: 255px; left: 65px; top: 42.5%; left: 10.83%; }
#page_52 #matchcode_skizze_mor #matchcode_skizze_info_w { top: 515px; left: 305px; top: 85.83%; left: 50.83%; }
#page_52 #matchcode_skizze_mor #matchcode_skizze_info_id { top: 515px; left: 100px; top: 85.83%; left: 16.67%; }



#matchcode_skizze_mci #matchcode_skizze_input_nuttiefe_d { top: 270px; left: 500px; top: 45%; left: 83.33%; }
#matchcode_skizze_mci #matchcode_skizze_input_nutbreite_w { top: 430px; left: 290px; top: 71.67%; left: 48.33%; }
#matchcode_skizze_mci #matchcode_skizze_input_aussendurchmesser_nut_od { top: 510px; left: 430px; top: 85%; left: 71.67%; }
#matchcode_skizze_mci #matchcode_skizze_info_csr { top: 225px; left: 5px; top: 37.5%; left: 0.83%; }
#matchcode_skizze_mci #matchcode_skizze_info_odr { top: 25px; left: 315px; top: 4.17%; left: 52.5%; }
#matchcode_skizze_mci #matchcode_skizze_info_d { top: 255px; left: 440px; top: 42.5%; left: 73.33%; }
#matchcode_skizze_mci #matchcode_skizze_info_w { top: 410px; left: 220px; top: 68.33%; left: 36.67%; }
#matchcode_skizze_mci #matchcode_skizze_info_od { top: 500px; left: 315px; top: 83.33%; left: 52.5%; }


#matchcode_skizze_mco #matchcode_skizze_input_nuttiefe_d { top: 280px; left: 50px; top: 46.67%; left: 8.33%; }
#matchcode_skizze_mco #matchcode_skizze_input_nutbreite_w { top: 475px; left: 275px; top: 79.17%; left: 45.83%; }
#matchcode_skizze_mco #matchcode_skizze_input_innendurchmesser_nut_id { top: 475px; left: 490px; top: 79.17%; left: 81.67%; }
#matchcode_skizze_mco #matchcode_skizze_info_csr { top: 240px; left: 400px; top: 40%; left: 66.67%; }
#matchcode_skizze_mco #matchcode_skizze_info_idr { top: 35px; left: 380px; top: 5.83%; left: 63.33%; }
#matchcode_skizze_mco #matchcode_skizze_info_d { top: 260px; left: 0; top: 43.33%; left: 0; }
#matchcode_skizze_mco #matchcode_skizze_info_w { top: 470px; left: 205px; top: 78.33%; left: 34.17%; }
#matchcode_skizze_mco #matchcode_skizze_info_id { top: 470px; left: 385px; top: 78.33%; left: 64.17%; }



#matchcode_skizze_mci-f #matchcode_skizze_input_nuttiefe_d { top: 270px; left: 500px; top: 45%; left: 83.33%; }
#matchcode_skizze_mci-f #matchcode_skizze_input_nutbreite_w { top: 430px; left: 290px; top: 71.67%; left: 48.33%; }
#matchcode_skizze_mci-f #matchcode_skizze_input_aussendurchmesser_nut_od { top: 510px; left: 420px; top: 85%; left: 70%; }
#matchcode_skizze_mci-f #matchcode_skizze_info_csr { top: 220px; left: 0; top: 36.67%; left: 0; }
#matchcode_skizze_mci-f #matchcode_skizze_info_odr { top: 5px; left: 315px; top: 0.83%; left: 52.5%; }
#matchcode_skizze_mci-f #matchcode_skizze_info_d { top: 250px; left: 440px; top: 41.67%; left: 73.33%; }
#matchcode_skizze_mci-f #matchcode_skizze_info_w { top: 410px; left: 220px; top: 68.33%; left: 36.67%; }
#matchcode_skizze_mci-f #matchcode_skizze_info_od { top: 490px; left: 305px; top: 81.67%; left: 50.83%; }


#matchcode_skizze_mco-f #matchcode_skizze_input_nuttiefe_d { top: 300px; left: 60px; top: 50%; left: 10%; }
#matchcode_skizze_mco-f #matchcode_skizze_input_nutbreite_w { top: 500px; left: 285px; top: 83.33%; left: 47.5%; }
#matchcode_skizze_mco-f #matchcode_skizze_input_innendurchmesser_nut_id { top: 500px; left: 495px; top: 83.33%; left: 82.5%; }
#matchcode_skizze_mco-f #matchcode_skizze_info_csr { top: 260px; left: 450px; top: 43.33%; left: 75%; }
#matchcode_skizze_mco-f #matchcode_skizze_info_idr { top: 40px; left: 395px; top: 6.67%; left: 65.83%; }
#matchcode_skizze_mco-f #matchcode_skizze_info_d { top: 290px; left: 5px; top: 48.33%; left: 0.83%; }
#matchcode_skizze_mco-f #matchcode_skizze_info_w { top: 480px; left: 220px; top: 80%; left: 36.67%; }
#matchcode_skizze_mco-f #matchcode_skizze_info_id { top: 480px; left: 390px; top: 80%; left: 65%; }




#matchcode_skizze_mui #matchcode_skizze_input_nuttiefe_d { top: 270px; left: 500px; top: 45%; left: 83.33%; }
#matchcode_skizze_mui #matchcode_skizze_input_nutbreite_w { top: 430px; left: 290px; top: 71.67%; left: 48.33%; }
#matchcode_skizze_mui #matchcode_skizze_input_aussendurchmesser_nut_od { top: 510px; left: 420px; top: 85%; left: 70%; }
#matchcode_skizze_mui #matchcode_skizze_info_csr { top: 225px; left: 0; top: 37.5%; left: 0; }
#matchcode_skizze_mui #matchcode_skizze_info_odr { top: 15px; left: 315px; top: 2.5%; left: 52.5%; }
#matchcode_skizze_mui #matchcode_skizze_info_d { top: 255px; left: 440px; top: 42.5%; left: 73.33%; }
#matchcode_skizze_mui #matchcode_skizze_info_w { top: 415px; left: 220px; top: 69.17%; left: 36.67%; }
#matchcode_skizze_mui #matchcode_skizze_info_od { top: 495px; left: 305px; top: 82.5%; left: 50.83%; }


#matchcode_skizze_muo #matchcode_skizze_input_nuttiefe_d { top: 290px; left: 60px; top: 48.33%; left: 10%; }
#matchcode_skizze_muo #matchcode_skizze_input_nutbreite_w { top: 485px; left: 285px; top: 80.83%; left: 47.5%; }
#matchcode_skizze_muo #matchcode_skizze_input_innendurchmesser_nut_id { top: 485px; left: 495px; top: 80.83%; left: 82.5%; }
#matchcode_skizze_muo #matchcode_skizze_info_csr { top: 245px; left: 425px; top: 40.83%; left: 70.83%; }
#matchcode_skizze_muo #matchcode_skizze_info_idr { top: 40px; left: 380px; top: 6.67%; left: 63.33%; }
#matchcode_skizze_muo #matchcode_skizze_info_d { top: 275px; left: 5px; top: 45.83%; left: 0.83%; }
#matchcode_skizze_muo #matchcode_skizze_info_w { top: 470px; left: 220px; top: 78.33%; left: 36.67%; }
#matchcode_skizze_muo #matchcode_skizze_info_id { top: 470px; left: 390px; top: 78.33%; left: 65%; }

@media screen and (max-width:600px) {
.matchcode_form input, .matchcode_form textarea { padding: 5px 10px; font-size: 15px; }
}
@media screen and (max-width:480px) {
.matchcode_form input, .matchcode_form textarea { padding: 3px 10px; font-size: 14px; }
}




/* ------------ Formular: Kundendaten ------------ */ 
.matchcode_hilfstabellen { display: block; margin: 0 0 20px 0; padding: 20px 20px 1px 20px; background-color: #eee; }

/* ------------ Tabellen ------------ */ 

/* Nur die Tabellen der Matchcode- und Datenblatt-Bereiche, nicht jede Tabelle der Website */
.table_box table,
.matchcode_abkuerzungen_table table,
.table_desktop table,
.table_responsive table,
.table_box tr,
.matchcode_abkuerzungen_table tr,
.table_desktop tr,
.table_responsive tr,
.table_box th,
.matchcode_abkuerzungen_table th,
.table_desktop th,
.table_responsive th,
.table_box td,
.matchcode_abkuerzungen_table td,
.table_desktop td,
.table_responsive td {
    margin: 0;
	border: 1px solid #808285;
	border-collapse: collapse;
	text-align: center; vertical-align: middle; 
	font-size: 15px; line-height: 20px;
}

.table_box table,
.matchcode_abkuerzungen_table table,
.table_desktop table,
.table_responsive table { width:100%; margin: 0 0 20px 0; padding: 0; }
.table_box th,
.matchcode_abkuerzungen_table th,
.table_desktop th,
.table_responsive th { padding: 5px 10px; font-weight: bold; }
.table_box td,
.matchcode_abkuerzungen_table td,
.table_desktop td,
.table_responsive td { padding: 5px 10px; }
.table_box th.left,
.matchcode_abkuerzungen_table th.left,
.table_desktop th.left,
.table_responsive th.left,
.table_box td.left,
.matchcode_abkuerzungen_table td.left,
.table_desktop td.left,
.table_responsive td.left { text-align: left; }

tr.selected { border: 2px solid #c00; }

tr.bg_orange th { background-color: #ED752D; color: #fff; }
tr.bg_white th,
tr.bg_white td { background-color: #fff; }
    
tr.bg_gray td { background-color: #d2d2d2; color: #000; padding: 5px 5px; vertical-align: middle; }
tr.bg_lightgray td { background-color: #e9e9e9; color: #333; padding: 5px 5px; vertical-align: middle; }

tr.bg_important td.datenblatt_nennquerschnitt,
tr.bg_important td.datenblatt_performance_index { font-weight: bold; }
    

tr td.bg_gray { background-color: #dfdfdb; }
tr td.bg_blue { background-color: #E9F4F9; }
tr td.bg_green { background-color: #D1E5C9; }
tr td.bg_yellow { background-color: #FFFBCF; }
tr td.bg_pink { background-color: #fee7ef; }
tr td.bg_brown_light { background-color: #e3d0b6; }
tr td.bg_lila { background-color: #cfc5da; }
tr td.bg_orange_light { background-color: #fabf92; }

tr.bg_lightgray td.bg_blue { background-color: #F0FAFF; }
tr.bg_lightgray td.bg_green { background-color: #DDF2D5; }

/* Nur in Schritt 2 sind die Zeilen anklickbar (Auswahl). Sonst bleibt der normale Cursor, ohne Abdunkeln. */
#schritt_2 tr.dataset:hover { opacity: 0.5; cursor: pointer; }

 
.matchcode_abkuerzungen_table th,
.matchcode_abkuerzungen_table td { text-align: left; vertical-align: top; color: #000; }
.matchcode_abkuerzungen_table tr:nth-child(even) { background: #F3F3F3; }
.matchcode_abkuerzungen_table tr:nth-child(odd) { background: #FFF; }

/* neu vorzugsgroessen */
tr.bg_normal td { background-color: #e9e9e9; }	
tr.bg_important td { background-color: #d2d2d2; }	
	

tr.bg_normal td span { color: #666; }	
tr.bg_important td span { color: #000; font-weight: bold; }	

tr.bg_normal td.bg_blue,
span.zwischengroessen span.bg_blue { background-color: #F0FAFF; }	
tr.bg_normal td.bg_green,
span.zwischengroessen span.bg_green { background-color: #DDF2D5; }	
	
tr.bg_important td.bg_blue,
span.vorzugsgroessen span.bg_blue { background-color: #D8E1E6; }	
tr.bg_important td.bg_green,
span.vorzugsgroessen span.bg_green { background-color: #C6D9BF; }	

/* Legende */
span.vorzugsgroessen,
span.zwischengroessen { display: inline-block; margin: 0 10px; padding: 0; border: 2px solid #808285; border-left: 1px solid #808285; background-color: #e9e9e9; }	
span.vorzugsgroessen { background-color: #d2d2d2; font-weight: bold; }

span.vorzugsgroessen span,
span.zwischengroessen span { display: inline-block; margin: 0 -5px 0 0; padding: 5px 20px 5px 15px; border-left: 1px solid #808285; }	



@media all and (max-width:1100px) {
#matchcode_hilfstabellen .table_box_1100,
#content .table_box_1100 { overflow: hidden; overflow-x: auto;
    padding: 10px 10px 1px 10px;
    border: 1px solid #575757; box-shadow: 0 0 10px 0 #575757; }
    
}

@media screen and (max-width:980px) {
#matchcode_hilfstabellen .table_box,
#content .table_box { overflow: hidden; overflow-x: auto;
    padding: 10px 10px 1px 10px;
    border: 1px solid #575757; box-shadow: 0 0 10px 0 #575757; }

}

@media all and (max-width:640px) {
    
#matchcode_hilfstabellen .table_box th,
#content .table_box th { hyphens: auto; 
}
#matchcode_hilfstabellen .table_box_1100 th,
#content .table_box_1100 th { hyphens: none; }
    
}







/* ------------ Katalog-Doppelseiten ------------ */ 
.matchode_vorschau { display: block; position: relative; top: 0; left: 0; width: auto; margin: 0 0 30px 0; padding: 15px 15px 5px 15px; font-size: 30px; line-height: 40px; background-color: #FFF; color: #000; border: 5px solid #ee7202; }

.matchode_vorschau span { color: #000; }
    
.matchode_vorschau_box { display: inline-block; position: relative; top: 0; left: 0; width: auto; height: auto; margin: 0 2px 10px 2px; padding: 0 5px; font-family: inherit; font-size: 30px; line-height: 40px; color: #000; text-align: center; cursor: pointer; 
border: 1px solid #CCC; border-radius: 5px; background-color: #FFF; }

.matchode_vorschau_info { position: absolute; top: -9px; left: auto; right: -9px; width: 18px; height: 18px; z-index: auto; background-image: url(./layout/icon_info.png); background-size: 18px 18px; background-position: right top; background-repeat: no-repeat; cursor: default; }

.matchode_vorschau_info span { display: none; position: absolute; top: 50%; left: 50%; width: 200px; height: auto; min-height: 60px; margin: -30px 0 0 -100px; padding: 10px; z-index: 30; background-color: #ED752D; color: #FFF; font-size: 15px; line-height: 20px; }
.matchode_vorschau_box:hover .matchode_vorschau_info span { display: block; }  
    
.matchode_vorschau_federmaterial { background-color: #dfdfdb; }
.matchode_vorschau_ringmaterial { background-color: #fee7ef; }
.matchode_vorschau_nennquerschnitt { background-color: #E9F4F9; }
.matchode_vorschau_performance_index { background-color: #D1E5C9; }
.matchode_vorschau_aussendurchmesser_ring { background-color: #FFFBCF; }
.matchode_vorschau_innendurchmesser_ring { background-color: #FFFBCF; }
.matchode_vorschau_ausfuehrung { background-color: #e3d0b6; }
.matchode_vorschau_waermebehandlung { background-color: #e3d0b6; }
.matchode_vorschau_beschichtung { background-color: #cfc5da; }
.matchode_vorschau_beschichtungsstaerke { background-color: #fabf92; }    
    
   
.matchode_erklaerung { clear: both; display: block; width: auto; margin: 0 0 10px 0; padding: 0; }    
.matchode_erklaerung_listpoint { display: block; float: left; width: 75px; margin: 0; padding: 0; }
.matchode_erklaerung_listpoint span { display: block; width: 75px; color: #000; margin: 0 0 5px 0; padding: 2px 0; text-align: center; }
.matchode_erklaerung_text { display: block; width: auto; margin: 0 0 0 90px; }

@media all and (max-width:768px) {
.matchode_vorschau,    
.matchode_vorschau_box { font-size: 21px; line-height: 30px; }

}

@media all and (max-width:480px) {
.matchode_vorschau { padding: 10px 10px 1px 10px; border: 3px solid #ee7202; }

.matchode_vorschau,    
.matchode_vorschau_box { font-size: 18px; line-height: 25px; }

}

/* ------------ Schritt 3 als yForm: Markup von yForm (.form-group, .control-label, .form-control) auf die bisherige Optik bringen ------------ */
#schritt_3 .yform .form-group { clear: both; margin: 0; }
#matchcode_form_kundendaten .form-group,
#matchcode_form_zusatzangaben .form-group { margin: 0 0 10px 0; }
#matchcode_form_kundendaten .control-label,
#matchcode_form_zusatzangaben .control-label { font-weight: inherit; }
#matchcode_form_zusatzangaben .control-label { display: inline-block; float: none; width: 120px; margin: 0 0 10px 0; padding: 0; }
#matchcode_form_kundendaten .form-control,
#matchcode_form_zusatzangaben .form-control { box-shadow: none; }
#matchcode_form_zusatzangaben input {
display: inline-block; height: auto; margin: 0 0 10px 0; padding: 5px 15px; cursor: auto;
font-family: inherit; font-size: 16px; line-height: 20px; color: #000; text-align: left;
border: 1px solid #CCC; border-radius: 5px; background: #FFF; outline: none;
}
#matchcode_form_zusatzangaben input:hover { border-color: #a8aeb5; }
#matchcode_form_zusatzangaben input:focus { border-color: #37434f; outline: none; box-shadow: none; }

/* Anmerkungen: Label bleibt wie vorher ausgeblendet (Name steckt in aria-label), Textarea in alter Optik */
#matchcode_form_email_versenden .form-group .control-label { display: none; }
#matchcode_form_email_versenden textarea { display: block; width: 100%; max-width: 640px; height: 120px; padding: 5px 15px; font-family: inherit; font-size: 16px; line-height: 20px; border: 1px solid #CCC; border-radius: 5px; background: #FFF; box-shadow: none; }

/* Datenschutz-Checkbox (yForm: .checkbox > label > input + i.form-helper) */
#matchcode_form_email_versenden .form_checkbox_box .checkbox { margin: 0 0 10px 0; }
/* Platz links für die Checkbox: das Addon positioniert sie absolut (.yform .checkbox label input), ohne Innenabstand läge sie über dem Text */
#matchcode_form_email_versenden .form_checkbox_box .checkbox label { clear: none; float: none; display: block; width: auto; margin: 0; padding: 0 0 0 30px; }
#matchcode_form_email_versenden .form_checkbox_box .checkbox label input { position: absolute; top: 2px; left: 0; float: none; display: block; width: 20px; height: 20px; margin: 0; padding: 0; accent-color: #ED752D; }

/* Absenden-Button wie die übrigen orangen Buttons des Matchcodes */
#matchcode_form_email_versenden .form_button_box .form-group { margin: 0 0 10px 0; }
#matchcode_form_email_versenden .form_button_box button,
#matchcode_form_email_versenden .form_button_box input[type="submit"] {
box-sizing: border-box; display: inline-block; width: auto; height: auto; margin: 0 0 10px 0; padding: 5px 15px;
border: none; border-radius: 5px; background-color: #ED752D; font-family: inherit; font-size: 16px; font-weight: bold; text-align: center; color: #FFF; cursor: pointer; }
#matchcode_form_email_versenden .form_button_box button:hover,
#matchcode_form_email_versenden .form_button_box button:focus-visible,
#matchcode_form_email_versenden .form_button_box input[type="submit"]:hover,
#matchcode_form_email_versenden .form_button_box input[type="submit"]:focus-visible { background-color: #000; }

/* yForm-Fehlermeldungen in Matchcode-Optik */
#schritt_3 .yform div.alert-danger { display: block; box-sizing: border-box; width: 95%; margin: 0 0 15px 2.5%; padding: 10px 15px; border: none; border-radius: 0; background-color: #c00; color: #FFF; font-size: 16px; line-height: 20px; }
#schritt_3 .yform .alert ul { margin: 0; padding: 0; list-style: none; }
#schritt_3 .yform .alert li { margin: 0 0 5px 0; padding: 0; color: #FFF; }
#schritt_3 .yform .alert li:last-child { margin-bottom: 0; }
#schritt_3 .yform .alert strong { color: inherit; }
#schritt_3 .has-error .control-label { color: #c00; }
#schritt_3 .has-error .form-control { border-color: #c00; }

/* Fehlerbox und Honeypot sitzen im Markup direkt im <form>, nicht in einer .outer_box (die erst
   danach kommt und sich selbst width:95%/margin-left:2.5% gibt). Beide bekommen hier dieselbe
   Einrückung, sonst stehen sie breiter und ohne Rand da als der Rest des Formulars. */
#schritt_3 .yform > form.rex-yform > .honeypot_box { width: 95%; margin-left: 2.5%; }
#schritt_3 .yform > form.rex-yform > .honeypot_box .form-group { box-sizing: border-box; }


/* module20261109.css */
/* module20261109.css — Feinanpassung der Module GFD / seals.de. Eingebunden per
   addCssOwn() NACH den Modul-CSS des AddOns. Zwei Blöcke: zuerst Anpassungen an
   Poolmodulen, danach die projekteigenen Module. Markup jedes Moduls: output.inc. */


/* =============================================================================
   Poolmodule (bw_modulhelper)
   ============================================================================= */


/* --- extras_011_formular_yform_flex: Kontakt-Overlay "Noch Fragen?" -------------
   Hülle im Haupt-Template, Inhalt (Texte + Formular) aus Artikel 70, Schalter: main20261020.js.
   Skelett-CSS des Moduls liefert Flex-Layout, Fehler, Honeypot und Datenschutz-Box. */
#overlay_bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1100; overflow-y: auto; background-color: rgba(0,0,0,0.8); }
#overlay_bg.active { display: block; }

#overlay_content { position: relative; width: 960px; max-width: calc(100% - 30px); margin: 100px auto 25px auto; padding: 25px; background-color: var(--color-white); border: 3px solid var(--color-orange-alt); color: #000; --color-focus: #000; }

#overlay_close { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; margin: 0; padding: 0; z-index: 1; border: none; cursor: pointer;
  background-color: transparent; background-image: url(overlay_close.png); background-position: center; background-repeat: no-repeat; }
#overlay_close:hover,
#overlay_close:focus-visible { opacity: 0.7; }

#overlay_content a { color: var(--color-orange); text-decoration: none; }
#overlay_content a:hover,
#overlay_content a:focus-visible { color: #000; }
#overlay_content h2 { margin: 0 0 0.625rem 0; }
#overlay_content .outer_box { margin-bottom: 1.25rem; }

/* Platzhalter statt sichtbarer Labels (wie bisher). Die Labels bleiben für Screenreader erhalten,
   Honeypot und Datenschutz liegen ausserhalb von form_left/form_right und bleiben sichtbar. */
#berater_form .yform :is(.form_left, .form_right) > .form-group > label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

#berater_form .yform .form-control { padding: 5px 10px; font-size: 0.9375rem; line-height: 1.33; color: #000; border: 1px solid #ccc; border-radius: 0; background-color: #fff; }
#berater_form .yform select.form-control { height: auto; }
#berater_form .yform textarea.form-control { height: 14.5rem; }
#berater_form .yform .form-control:hover { border-color: #a8aeb5; }
#berater_form .yform .form-control:focus,
#berater_form .yform .form-control:focus-visible { border-color: var(--color-orange); box-shadow: none; outline: 2px solid #000; outline-offset: 2px; }

#berater_form .yform .btn-primary { min-width: 145px; padding: 5px 15px; border-radius: 0; background-color: var(--color-darkgray); color: #fff; }
#berater_form .yform .btn-primary:hover,
#berater_form .yform .btn-primary:focus-visible { background-color: var(--color-orange); color: #fff; box-shadow: none; }
#berater_form .yform .btn-primary:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

#berater_form .yform .privacy_box a { color: var(--color-orange); font-weight: 400; }
#berater_form .yform .privacy_box a:hover,
#berater_form .yform .privacy_box a:focus-visible { color: #000; }
#berater_form .yform .pflichtfelder { font-size: 0.8em; color: #000; }

@media all and (max-width: 980px) {
    #overlay_content { margin: 50px auto 25px auto; }
}

/* Formular (z. B. Bewerbung) in einer Box mit Hintergrundfarbe: das Padding der Box sitzt sonst
   nur auf .text, das Formular hat keins. Die Überschrift über den Uploads erbt die Boxfarbe. */
.extras_011_formular_yform_flex[class*="box_bg_"] { padding: 20px 20px 1px 20px; }
.extras_011_formular_yform_flex .yform .upload_felder .upload_titel { color: inherit; }

/* Die Texte im Formular erben die Boxfarbe (dunkelgrau und grau: weiß). Das Skelett-CSS setzt
   sonst #333 auf Labels und Hinweise, das ist auf dunklem Grund unsichtbar. */
.extras_011_formular_yform_flex[class*="box_bg_"] .yform label,
.extras_011_formular_yform_flex[class*="box_bg_"] .yform .pflichtfelder { color: inherit; }
.extras_011_formular_yform_flex[class*="box_bg_"] .yform .privacy_box a { color: inherit; text-decoration: underline; }
.extras_011_formular_yform_flex[class*="box_bg_"] .yform .privacy_box a:hover,
.extras_011_formular_yform_flex[class*="box_bg_"] .yform .privacy_box a:focus-visible { color: var(--color-orange); }

/* Fehlertexte bleiben rot, auf den dunklen Boxen in einem helleren Rot (Kontrast) */
.extras_011_formular_yform_flex[class*="box_bg_"] .yform .has-error label { color: #a94442; }
.extras_011_formular_yform_flex.box_bg_darkgray .yform .has-error label,
.extras_011_formular_yform_flex.box_bg_gray .yform .has-error label { color: #ffb3b0; }

/* Nur bei der Bewerbung (#karriere_formular) wirkte #ffb3b0 auf dem Grau wie Orange, deshalb dort
   mit #ff8a80 (kräftiges Korallrot statt Rosa) überschrieben. Andere Formulare in derselben
   Box-Variante (z. B. #berater_form) bleiben beim bisherigen Ton. */
#karriere_formular .has-error label { color: #ff8a80; }

/* Ausnahme von der Ausnahme: Honeypot und Datenschutz-Checkbox bekommen bei .has-error vom
   Skelett-CSS einen eigenen hellen Hintergrund (#f8f8f8 bzw. #FBF6F6), kein Grau mehr dahinter.
   #ff8a80 ist dort zu blass (schlechter Kontrast auf Hell), deshalb hier wieder das dunkle
   Fehlerrot, mit der ID (höhere Spezifität als Zeile oben) statt der generischen Box-Klasse. */
#karriere_formular .honeypot_box .has-error label,
#karriere_formular .honeypot_box .has-error label *,
#karriere_formular .formcheckbox.has-error label { color: #a94442; }

/* Das Skelett-CSS setzt auf den Boxen ".box_bg_* *" einen Weiß-Reset auf jedes Element, auch auf
   strong in der Fehlerbox. Die Fehlerbox selbst bleibt hell/rot (eigene Regel im Skelett-CSS),
   das strong darin erbt sonst nicht mehr das Rot des umgebenden li, sondern wird weiß und
   verschwindet auf dem hellen Rot. */
.extras_011_formular_yform_flex[class*="box_bg_"] .yform .alert strong { color: inherit; }

/* Honeypot-Feld (SPAM-Schutz): unsichtbar, bis Fokus oder Fehler es mit einem eigenen hellen
   Hintergrund (#f8f8f8, Skelett-CSS) zeigen. Label und strong darin erben sonst weiterhin die für
   die dunkle/graue Box gedachte Schriftfarbe (Weiß per Box-Reset, bzw. das helle Fehlerrot der
   Zeilen oben) und sind auf dem hellen Honeypot-Hintergrund nicht lesbar. Hier wieder festes,
   dunkles Fehlerrot für Label und alle Kindelemente (auch strong). */
.extras_011_formular_yform_flex[class*="box_bg_"] .yform .honeypot_box div.form-group,
.extras_011_formular_yform_flex[class*="box_bg_"] .yform .honeypot_box div.form-group * { color: #a94442; }

/* Absende-Button in der Seals-Optik wie link_as_button (orange, eckig, beim Überfahren schwarz).
   Das Overlay hat unten mit #berater_form seine eigene, stärkere Regel. */
.extras_011_formular_yform_flex .yform .btn-primary { padding: 5px 15px; border-radius: 0; background-color: var(--color-orange-alt); color: #fff; }
.extras_011_formular_yform_flex .yform .btn-primary:hover,
.extras_011_formular_yform_flex .yform .btn-primary:focus-visible { background-color: #000; color: #fff; box-shadow: none; }
.extras_011_formular_yform_flex .yform .btn-primary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Die Upload-Boxen sind hell (Skelett-CSS), ihre Beschriftung bleibt deshalb dunkel */
.extras_011_formular_yform_flex[class*="box_bg_"] .yform .upload_felder label { color: #333; }
.extras_011_formular_yform_flex[class*="box_bg_"] .yform .upload_felder .has-error label { color: #a94442; }

/* Ausnahme: der "Häkchen setzen um die Datei zu entfernen"-Hinweis (bereits hochgeladene Datei)
   sitzt nicht in der hellen Upload-Box, sondern direkt auf der Boxfarbe. Die #333-Regel darüber
   macht ihn auf dunklen Boxen unlesbar, hier wieder die Boxfarbe erben lassen. */
.extras_011_formular_yform_flex[class*="box_bg_"] .yform .upload_felder .checkbox label { color: inherit; }


/* --- extras_020_artikel_kategorie_teaser: Kacheln als orange Buttons mit Pfeil --------
   Markup: .extras_020... (outer_box) > a.teaser_category_box(.with_image) > Text bzw.
   span.teaser_category_box_image + span.teaser_category_box_text.
   Das Skelett gibt jeder Kachel 2,5 % Abstand links, obendrauf kommt der der outer_box:
   die Kacheln sitzen dadurch eingerückt. Statt Prozent-Breiten ein Raster mit gleichem Abstand
   in beide Richtungen: drei Kacheln pro Zeile (1/3), mittlere Breite zwei, schmal eine. */
.extras_020_artikel_kategorie_teaser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media all and (max-width: 768px) {
    .extras_020_artikel_kategorie_teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media all and (max-width: 480px) {
    .extras_020_artikel_kategorie_teaser { grid-template-columns: minmax(0, 1fr); }
}

.extras_020_artikel_kategorie_teaser a.teaser_category_box { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: auto; margin: 0; padding: 20px 50px 20px 20px;
  font-size: 1rem; line-height: 1.25; text-align: left; color: #fff; background-color: var(--color-orange-alt); }
.extras_020_artikel_kategorie_teaser a.teaser_category_box:hover,
.extras_020_artikel_kategorie_teaser a.teaser_category_box:focus,
.extras_020_artikel_kategorie_teaser a.teaser_category_box:focus-visible { color: #fff; background-color: #000; }
.extras_020_artikel_kategorie_teaser a.teaser_category_box:focus,
.extras_020_artikel_kategorie_teaser a.teaser_category_box:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Pfeil rechts: Winkel aus zwei Rändern, rückt beim Überfahren nach rechts */
.extras_020_artikel_kategorie_teaser a.teaser_category_box::after,
.extras_020_artikel_kategorie_teaser a.teaser_category_box span.teaser_category_box_text::after { content: ''; position: absolute; top: 50%; right: 20px; width: 0.5rem; height: 0.5rem;
  border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg); transition: right 0.125s ease-in; }
.extras_020_artikel_kategorie_teaser a.teaser_category_box:hover::after,
.extras_020_artikel_kategorie_teaser a.teaser_category_box:focus-visible::after,
.extras_020_artikel_kategorie_teaser a.teaser_category_box:hover span.teaser_category_box_text::after,
.extras_020_artikel_kategorie_teaser a.teaser_category_box:focus-visible span.teaser_category_box_text::after { right: 14px; }

/* Mit Bild: Bild oben, darunter der orange Textbalken mit dem Pfeil. Der Pfeil gehört dann
   an den Textbalken und nicht an die ganze Kachel. */
.extras_020_artikel_kategorie_teaser a.teaser_category_box.with_image { align-items: stretch; padding: 0; background-color: transparent; }
.extras_020_artikel_kategorie_teaser a.teaser_category_box.with_image::after { content: none; }
.extras_020_artikel_kategorie_teaser a.teaser_category_box.with_image span.teaser_category_box_text { position: relative; padding: 15px 50px 15px 20px; background-color: var(--color-orange-alt); transition: background-color 0.125s ease-in; }
.extras_020_artikel_kategorie_teaser a.teaser_category_box.with_image:hover span.teaser_category_box_text,
.extras_020_artikel_kategorie_teaser a.teaser_category_box.with_image:focus-visible span.teaser_category_box_text { background-color: #000; }
/* Pfeil nur an den Textbalken von Bild-Kacheln, nicht an die Textkacheln doppelt */
.extras_020_artikel_kategorie_teaser a.teaser_category_box:not(.with_image) span.teaser_category_box_text::after { content: none; }

@media (prefers-reduced-motion: reduce) {
    .extras_020_artikel_kategorie_teaser a.teaser_category_box::after,
    .extras_020_artikel_kategorie_teaser a.teaser_category_box span.teaser_category_box_text,
    .extras_020_artikel_kategorie_teaser a.teaser_category_box span.teaser_category_box_text::after { transition: none; }
}


/* --- extras_021_artikel_kategorie_vor_zurueck: orange Buttons wie link_as_button -------
   Markup: .extras_021... (outer_box, Raster zurück | Übersicht | weiter) > div > a. Die Pfeile »/« stehen
   schon im Linktext. Spalten nach Inhalt statt feste 20 %, sonst bricht "Übersicht" um. */
.extras_021_artikel_kategorie_vor_zurueck { grid-template-columns: auto 1fr auto; gap: 0.625rem; }
.extras_021_artikel_kategorie_vor_zurueck a { padding: 5px 15px; font-size: 1rem; line-height: 1.25; color: #fff; background-color: var(--color-orange-alt); }
.extras_021_artikel_kategorie_vor_zurueck a:hover,
.extras_021_artikel_kategorie_vor_zurueck a:focus,
.extras_021_artikel_kategorie_vor_zurueck a:focus-visible { color: #fff; background-color: #000; }
.extras_021_artikel_kategorie_vor_zurueck a:focus,
.extras_021_artikel_kategorie_vor_zurueck a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }


/* --- 030_faq_accordion: Minus-Icon bei geöffneter Antwort --------------------
   faq_toggle setzt im offenen Zustand background:#333/color:#fff, faq_icon selbst
   hat in styles_css.inc keine eigene Farbe. Erbt daher die Textfarbe, wird aber
   von einer anderen, stärker spezifischen Projektregel auf Schwarz überschrieben. */
.faq_accordions .faq_accordion.open .faq_toggle .faq_icon { color: #fff; }


/* =============================================================================
   Projekteigene Module
   Klassennamen aus dem bestehenden Modul-Markup.
   ============================================================================= */


/* --- Seitenkopf: Bild mit Text, Logo, Messe-Badge ------------------------- */
.header_image_box { display: block; position: relative; width: 100%; margin: 0; padding: 0; z-index: 1; }
.header_image_box img { width: 100%; max-width: none; }

.header_image_text { display: block; position: absolute; bottom: 0; right: 30px; margin: 0; padding: 0; z-index: 2;
  font-family: rockwell, akagi-pro, Verdana, Geneva, sans-serif; font-size: 2rem; line-height: 1.06; color: var(--color-darkgray);
  text-align: right; text-transform: uppercase; text-shadow: 1px 1px 1px #fff; }
.header_image_top { margin: 0 0 5px 0; font-size: 1.5rem; line-height: 1.08; }
.header_image_text.text_color_white { color: #fff; text-shadow: 1px 1px 1px var(--color-darkgray); }

/* Header-Slider (Modul 8): Pfeile wie bisher erst beim Ueberfahren, per Tastatur immer erreichbar */
.header_slider .swiper-navigation { opacity: 0; transition: opacity 200ms ease-in-out; }
.header_slider:hover .swiper-navigation,
.header_slider:focus-within .swiper-navigation { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .header_slider .swiper-navigation { transition: none; }
}

#content_image_logo { position: absolute; bottom: clamp(50px, 3.7vw, 70px); left: 10%; width: auto; max-width: 12.5%; min-width: 50px; height: auto; margin: 0; padding: 0; z-index: 10; }

#gfd_valveworld_2026 { position: absolute; bottom: 90px; right: 30px; width: 200px; max-width: 12.5%; min-width: 100px; height: auto; margin: 0; padding: 0; z-index: 10;
  transform: scale(0.8); transform-origin: center center; animation: gfdPulse 5s ease-in-out infinite; }

@keyframes gfdPulse {
    0%   { transform: scale(0.8); }
    20%  { transform: scale(1); }
    40%  { transform: scale(0.8); }
    100% { transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
    #gfd_valveworld_2026 { animation: none; }
}

@media all and (max-width: 980px) {
    .header_image_top { font-size: 1.125rem; line-height: 1.11; }
    .header_image_bottom { font-size: 1.875rem; line-height: 1.07; }

    #content_image_logo { top: 20px; bottom: auto; }
    #gfd_valveworld_2026 { top: 5px; bottom: auto; }
}

@media all and (max-width: 768px) {
    .header_image_text { position: relative; bottom: auto; right: auto; padding: 10px 20px; background-color: var(--color-darkgray); text-shadow: 1px 1px 1px var(--color-gray); }
    .header_image_text,
    .header_image_text [class^="text_color_"] { color: #fff; }
    .header_image_top { font-size: 1rem; line-height: 1.125; }
    .header_image_bottom { font-size: 1.625rem; line-height: 1.08; }

    #content_image_logo { left: 15px; }
    #gfd_valveworld_2026 { right: 10px; min-width: 80px; }
}

@media all and (max-width: 480px) {
    .header_image_top { font-size: 0.875rem; line-height: 1.14; }
    .header_image_bottom { font-size: 1.25rem; line-height: 1.1; }
}

@media all and (max-width: 360px) {
    .header_image_text { hyphens: auto; }
}


/* --- Swiper-Slider (Module 8, 23, 27, 69): Steuerleiste umgebaut -----------------------
   Die gemeinsame Leiste des AddOns (swiper-navigation.css) liegt sonst als Reihe unten im Slider.
   Hier: Pfeile links und rechts vertikal mittig, Play/Stop unten rechts in der Ecke, Pagination
   (nur News-Teaser) in einer eigenen Leiste unter dem Slider, Punkte im Seals-Orange.
   --swiper-bar = Höhe der Leiste unter dem Slider, damit die Pfeile in der Mitte des Inhalts bleiben. */
.swiper { --swiper-theme-color: var(--color-orange); --swiper-bar: 0px; }

.swiper > .swiper-navigation { position: static; padding: 0; }

.swiper .swiper-navigation .swiper-button-prev,
.swiper .swiper-navigation .swiper-button-next { position: absolute; top: calc((100% - var(--swiper-bar)) / 2); z-index: 11; margin: 0; transform: translateY(-50%); }
.swiper .swiper-navigation .swiper-button-prev { left: 10px; right: auto; }
.swiper .swiper-navigation .swiper-button-next { right: 10px; left: auto; }

.swiper .swiper-navigation .swiper-playpause { position: absolute; right: 10px; bottom: 20px; z-index: 11; margin: 0; }

/* Punkte: weiß mit dünnem Rand (auf hellem und dunklem Grund sichtbar), aktiv orange */
.swiper .swiper-pagination-bullet { width: 12px; height: 12px; margin: 0; background-color: #fff; opacity: 0.8; box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
.swiper .swiper-pagination-bullet-active { background-color: var(--color-orange); opacity: 1; box-shadow: none; }

/* News-Teaser: Pagination unter dem Slider, Play/Stop rechts in derselben Leiste */
/* .swiper.news_teaser_box: das Swiper-CSS lädt nach diesem und setzt .swiper { padding: 0 } - die
   doppelte Klasse gewinnt. overflow: hidden bleibt (Swiper braucht es für die Folien), die Leiste
   für die Punkte liegt deshalb im Padding des Sliders und wird nicht abgeschnitten. */
.swiper.news_teaser_box { --swiper-bar: 68px; padding-bottom: var(--swiper-bar); }
.news_teaser_box .swiper-navigation .swiper-pagination { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; max-width: none; height: var(--swiper-bar); padding: 0 60px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.news_teaser_box .swiper-navigation .swiper-playpause { bottom: calc((var(--swiper-bar) - var(--nav-size, 44px)) / 2); }

/* Text der News mit Seitenabstand, damit die Pfeile nicht darüber liegen */
.news_teaser_box .swiper-slide .text { padding: 0 60px; }

/* Alle Folien gleich hoch (so hoch wie die längste), das Bild bleibt oben. Swiper setzt per autoHeight
   eine feste Höhe am Wrapper und richtet die Folien oben aus, beides wird hier aufgehoben. */
.swiper.news_teaser_box.swiper-autoheight .swiper-wrapper { align-items: stretch; height: auto !important; }
.news_teaser_box .swiper-slide { height: auto; }
.news_teaser_box .swiper-slide .image { margin: 0 0 20px 0; }

/* Das AddOn blendet die Punkte unter 420px aus, weil sie dort mit den Pfeilen konkurrierten.
   Jetzt haben sie eine eigene Leiste, deshalb bleiben sie sichtbar. */
@media (max-width: 420px) {
    .news_teaser_box .swiper-navigation .swiper-pagination { display: flex; }
}


/* --- Bildergalerie-Slider (Modul 27): Text liegt beim Überfahren über dem Bild ------------
   Die Regeln der alten CSS (.bildergalerie_*), die bei der Umstellung auf Swiper gefehlt haben.
   Der Text ist für Screenreader ausgeblendet, das Bild trägt seinen Alt-Text selbst. */
/* Die Section ist ein Flex-Container: ohne feste Breite richtet sich der Slider nach der Summe seiner Folien
   (14 Bilder x 420px) statt nach der Section, Swiper rechnet dann mit einem riesigen Container. */
.bildergalerie_slider { clear: both; display: block; width: 100%; min-width: 0; }
.bildergalerie_box { display: block; position: relative; width: 100%; margin: 0; padding: 0; z-index: 1; }
.bildergalerie_box img { display: block; width: 100%; height: auto; }
.bildergalerie_text { display: none; position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; padding: 10px; z-index: 1; overflow: hidden;
  background-color: rgba(255,255,255,0.75); color: #000; text-align: center; }
.bildergalerie_box:hover .bildergalerie_text { display: block; }


/* --- Bild-Hover-Kacheln ---------------------------------------------------- */
.bild_hover_box { display: block; width: 30%; height: 20vw; margin: 0 0 2.5% 2.5%; overflow: hidden; background-color: #999; }
.bild_hover_box_2_3 { width: 62.5%; }

.bild_hover_box a { display: block; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 1; transition: all 400ms ease-in-out; }

.bild_hover_box_image { display: block; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 1;
  background-position: center center; background-repeat: no-repeat; background-size: cover; filter: saturate(40%); transition: all 400ms ease-in-out; }

.bild_hover_box_text { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 10; color: #fff; text-shadow: 1px 1px 1px #333; }
.bild_hover_box_text_table { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.bild_hover_box_text_table_cell { width: 100%; text-align: center; }
.bild_hover_box_text_table_cell h2 { color: #fff; font-size: 2.25rem; line-height: 1; }
.bild_hover_box_text_table_cell p { color: #fff; font-size: 1.125rem; line-height: 1.33; font-weight: 700; }

.bild_hover_box a:hover .bild_hover_box_image,
.bild_hover_box a:focus-visible .bild_hover_box_image { transform: scale(1.05); filter: saturate(100%); }
.bild_hover_box a:focus-visible { outline-offset: -4px; outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .bild_hover_box a,
    .bild_hover_box_image { transition: none; }
}

@media all and (max-width: 980px) {
    .bild_hover_box { width: 46.25%; height: 30vw; }
    .bild_hover_box_text_table_cell h2 { margin: 0 0 0.625rem 0; font-size: 1.75rem; line-height: 1.07; }
    .bild_hover_box_text_table_cell p { margin: 0 0 0.625rem 0; font-size: 1rem; line-height: 1.125; }
}

@media all and (max-width: 640px) {
    .bild_hover_box { width: 95%; height: 45vw; }
    .bild_hover_box_text_table_cell h2 { margin: 0 0 0.3125rem 0; font-size: 1.5rem; line-height: 1.08; }
    .bild_hover_box_text_table_cell p { margin: 0 0 0.3125rem 0; font-size: 0.9375rem; line-height: 1.13; }
}

@media all and (max-width: 480px) {
    .bild_hover_box_text_table_cell h2 { font-size: 1.3125rem; line-height: 1.1; }
}


/* --- Slidedown (Module 15 und 20, Schalter: main20261020.js) --------------- */
.bwd_slidedown_box { clear: both; display: block; margin: 0; padding: 0; }
.bwd_slidedown_head { margin: 0; }
.bwd_slidedown_button { display: block; position: relative; width: 100%; margin: 0; padding: 5px 45px 5px 15px; border: none; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 1.3125rem; line-height: 1.43; font-weight: 400; color: #000;
  background-color: #dadada; }
/* arrow_down/up.png sind weiß gezeichnet, auf dem hellen Grau sonst unsichtbar — eigenes
   Pseudo-Element statt Button-Background, damit nur der Pfeil invertiert wird, nicht Text/Fläche */
.bwd_slidedown_button::after { content: ''; position: absolute; top: 50%; right: 15px; width: 40px; height: 40px;
  transform: translateY(-50%); background-image: url(arrow_down.png); background-position: center; background-repeat: no-repeat; filter: invert(1); }
/* Heller Balken: Schrift immer schwarz, auch in grauen/dunklen Sections und Reitern (die setzen sonst per .xxx * Weiß) */
.bwd_slidedown_box .bwd_slidedown_button,
.bwd_slidedown_box .bwd_slidedown_button * { color: #000; }
.bwd_slidedown_button span { display: block; font-size: 1rem; line-height: 1.875; font-weight: 300; }
.bwd_slidedown_button[aria-expanded="true"]::after { background-image: url(arrow_up.png); }
.bwd_slidedown_button:hover,
.bwd_slidedown_button:focus-visible { background-color: #cfcfcf; color: #000; }
.bwd_slidedown_text { display: block; padding: 10px 15px 1px 15px; }
.bwd_slidedown_text[hidden] { display: none; }

/* PDF-Download am Ende von Modul 15, Icon aus bw_modulhelper/download_icons */
.bwd_slidedown_text .download_box { display: flex; align-items: center; gap: 15px; margin: 0 0 1.25rem 0; }
.bwd_slidedown_text .download_icon img { display: block; width: 48px; height: auto; }


/* --- Timeline (Modul 26) --------------------------------------------------- */
.timeline_items_box { clear: both; display: block; position: relative; width: 95%; min-height: 100%; margin: 0 0 3.125rem 2.5%; padding: 0; z-index: 1; overflow: hidden; }
.timeline_line { display: block; position: absolute; top: 0; left: 50%; width: 3px; height: 100%; margin: 0 0 0 -1px; padding: 0; z-index: 1; background-color: #f0f0f0; }
.timeline_items { display: block; position: relative; width: 100%; margin: 0; padding: 10px 0 0 0; z-index: 2; }

/* Ende der Timeline mit einem Punkt markieren */
.timeline_items::after { content: ''; display: block; position: absolute; left: 50%; bottom: -10px; width: 0; height: 0; margin-left: -3px; z-index: 1;
  border-width: 3px; border-style: solid; border-radius: 100%; }

.timeline_items > li { list-style: none; display: block; position: relative; width: auto; margin: 0; padding: 0 0 25px 55%; z-index: 2; background-image: none; }
.timeline_items > li:nth-child(even) { padding: 0 55% 25px 0; }
.timeline_items > li:nth-child(even) .desc { text-align: right; }

.timeline_items > li h3 { font-size: 1.875rem; line-height: 1.17; }
.timeline_items > li:nth-child(even) h3 { text-align: right; }

.timeline_items > li h3::before { content: ''; display: block; position: absolute; top: 10px; left: 50%; width: 20px; height: 20px; margin: 0 0 0 -10px; padding: 0; z-index: 2; overflow: hidden;
  background-image: url(timeline_icon.png); background-position: center center; background-repeat: no-repeat; }

.timeline_items > li h3 span { display: inline-block; position: absolute; top: 8px; right: 55%; padding: 2px 6px; font-size: 0.875rem; line-height: 1.43; background-color: var(--color-gray); color: #fff; }
.timeline_items > li:nth-child(even) h3 span { left: 55%; right: auto; }
.timeline_items > li h3 span::after { content: ''; display: block; position: absolute; top: 6px; right: -5px; width: 0; height: 0; margin: 0; padding: 0;
  border-style: solid; border-width: 5.5px 0 5.5px 5px; border-color: transparent; border-left-color: var(--color-gray); }

.timeline_items > li .desc ol { list-style-position: inside; }
.timeline_items > li .desc ul { list-style: disc inside none; }

@media all and (min-width: 769px) {
    /* Desktop: bei der Jahreszahl rechts den Pfeil nach links setzen */
    .timeline_items > li:nth-child(2n) h3 span::after { left: -5px; right: auto; border-width: 5.5px 5.5px 5.5px 0; border-right-color: var(--color-gray); }
}

@media all and (max-width: 768px) {
    .timeline_line { left: 60px; }
    .timeline_items > li,
    .timeline_items > li:nth-child(even) { padding: 0 0 25px 100px; }
    .timeline_items > li h3,
    .timeline_items > li:nth-child(even) h3 { font-size: 1.5625rem; line-height: 1.2; text-align: left; }
    .timeline_items > li h3::before { top: 5px; left: 60px; }
    .timeline_items > li h3 span,
    .timeline_items > li:nth-child(even) h3 span { top: 4px; left: 0; right: auto; text-align: left; }
    .timeline_items > li .desc,
    .timeline_items > li:nth-child(even) .desc { text-align: left; }
}

@media all and (max-width: 480px) {
    .timeline_line { left: 20px; }
    .timeline_items > li h3,
    .timeline_items > li:nth-child(even) h3 { font-size: 1.3125rem; line-height: 1.19; }
    .timeline_items > li h3::before { left: 20px; }
    .timeline_items > li h3 span,
    .timeline_items > li:nth-child(even) h3 span { top: 0; z-index: 99; }
    .timeline_items > li,
    .timeline_items > li:nth-child(even) { padding: 0 0 25px 50px; }
}


/* --- Download-Kachel ------------------------------------------------------- */
.download_image { display: block; margin: 0 0 1.25rem 0; }
.download_hdl { display: block; margin: 0 0 0.25rem 0; text-align: left; }
.download_button { display: block; margin: 0; text-align: center; }


/* --- Reiter (Template "reiter_als_ctype") ---------------------------------- */
.reiter_bg_none,
.reiter_bg_gray,
.reiter_bg_lightgray,
.reiter_bg_darkgray,
.reiter_bg_white { clear: both; display: flow-root; width: 100%; margin: 0; padding: 50px 0 30px 0; }
/* In den Reitern bleiben die Boxen wie früher Floats: hohe Box links, kleine Boxen stapeln sich daneben (Flex kann das nicht). flow-root ersetzt das clearfix. */
.reiter_bg_none > .outer_box,
.reiter_bg_gray > .outer_box,
.reiter_bg_lightgray > .outer_box,
.reiter_bg_darkgray > .outer_box,
.reiter_bg_white > .outer_box { float: left; }
/* Umbrüche, Anker-Divs und Back-Buttons stehen immer in einer eigenen Zeile */
.reiter_bg_none > *:not(.outer_box),
.reiter_bg_gray > *:not(.outer_box),
.reiter_bg_lightgray > *:not(.outer_box),
.reiter_bg_darkgray > *:not(.outer_box),
.reiter_bg_white > *:not(.outer_box) { clear: both; }

.reiter_bg_none      { background-color: transparent; }
.reiter_bg_gray      { background-color: var(--color-gray); }
.reiter_bg_lightgray { background-color: var(--color-lightgray); }
.reiter_bg_darkgray  { background-color: var(--color-darkgray); --color-focus: #fff; }
.reiter_bg_white     { background-color: var(--color-white); }

.reiter_bg_gray, .reiter_bg_gray *,
.reiter_bg_darkgray, .reiter_bg_darkgray * { color: #fff; }
.reiter_bg_lightgray, .reiter_bg_lightgray *,
.reiter_bg_white, .reiter_bg_white * { color: #000; }

.reiter_nav_bg { clear: both; display: block; width: 100%; margin: 0; padding: 0; }
.reiter_nav { display: flex; width: 95%; margin: 0 0 0 2.5%; padding: 0; }
/* Platz für den Pfeil am aktiven Reiter (start: unten, ende: oben) */
.reiter_nav_start { margin-bottom: 15px; }
.reiter_nav_ende { margin-top: 15px; margin-bottom: 30px; }

.reiter_nav a { display: block; position: relative; width: 25%; margin: 0; padding: 15px 25px; font-size: 0.9375rem; line-height: 1.33; font-weight: 700; color: #fff; text-align: center; text-decoration: none;
  background-color: #575757; background-image: radial-gradient(#676767, #575757); box-shadow: 4px 4px 8px 0 #222; cursor: pointer; }
.reiter_nav a:hover,
.reiter_nav a:focus-visible { color: #fff; background-color: var(--color-orange); background-image: radial-gradient(#fe8212, #ee7202); }
.reiter_nav a:focus-visible { outline-color: #fff; outline-offset: -4px; }
.reiter_nav a.active { color: #000; background-color: var(--color-orange); background-image: radial-gradient(#fe8212, #ee7202); }

.reiter_nav a.active::after { content: ''; display: block; position: absolute; bottom: -15px; left: 50px; width: 22px; height: 15px; margin: 0; padding: 0;
  background-image: url(reiter_nav_arrow_down.png); background-position: center; background-repeat: no-repeat; }
.reiter_nav_ende a.active::after { top: -15px; bottom: auto; background-image: url(reiter_nav_arrow_top.png); }

.reiter_anzahl_1 a  { width: 100%; }
.reiter_anzahl_2 a  { width: 50%; }
.reiter_anzahl_3 a  { width: 33.33%; }
.reiter_anzahl_4 a  { width: 25%; }
.reiter_anzahl_5 a  { width: 20%; }
.reiter_anzahl_6 a  { width: 16.66%; }
.reiter_anzahl_7 a  { width: 14.28%; }
.reiter_anzahl_8 a  { width: 12.5%; }
.reiter_anzahl_9 a  { width: 11.11%; }
.reiter_anzahl_10 a { width: 10%; }

.reiter_content { clear: both; display: block; margin: 0; padding: 0; width: 100%; }
.reiter_content[hidden] { display: none; }

@media all and (max-width: 980px) {
    .reiter_nav { flex-wrap: wrap; }

    .reiter_anzahl_6 a  { width: 33.33%; }
    .reiter_anzahl_7 a,
    .reiter_anzahl_8 a  { width: 25%; }
    .reiter_anzahl_9 a,
    .reiter_anzahl_10 a { width: 20%; }
}

@media all and (max-width: 768px) {
    .reiter_bg_none > .outer_box,
    .reiter_bg_gray > .outer_box,
    .reiter_bg_lightgray > .outer_box,
    .reiter_bg_darkgray > .outer_box,
    .reiter_bg_white > .outer_box { float: none; }

    /* Raster statt Flex-Grow: alle Buttons gleich breit, auch der letzte in einer umgebrochenen Zeile */
    .reiter_nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
    .reiter_nav a { flex: none; width: auto !important; }
}


/* --- Flip-Boxen (Branchen) ------------------------------------------------- */
.modul_67 .view { display: block; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 1; overflow: hidden;
  border: 1px solid #e0e0e0; background-color: #fff; text-align: center; cursor: default; }
.modul_67 .view .mask,
.modul_67 .view .flip_box { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 1; overflow: hidden; }
.modul_67 .view .flip_text { display: block; padding: 0; text-align: left; font-size: 0.9375rem; line-height: 1.33; }
.modul_67 .view img { display: block; position: relative; }

.modul_67 .view .flip_image_headline { display: block; position: absolute; top: 50px; left: 0; width: 100%; margin: 0; padding: 0; z-index: 10; overflow: hidden; text-align: center;
  color: #fff; font-size: 1.5rem; line-height: 1.25; font-weight: 700; text-shadow: 1px 1px 1px #333; }
.modul_67 .view .flip_image_headline span { font-size: 1.125rem; line-height: 1.39; font-weight: 300; }

.modul_67 .view .flip_text_image_band { display: none; position: absolute; bottom: 25px; left: 0; width: 100%; height: 25px; margin: 0; padding: 0; z-index: 1; overflow: hidden; background-color: rgba(0,0,0,0.8); }
.modul_67 .view .flip_text_image { display: none; position: absolute; bottom: 0; left: 30px; width: auto; max-width: 120px; margin: 0; padding: 0; z-index: 2; overflow: hidden; }

.modul_67 .flip_text_slidedown { display: block; padding: 20px 20px 1px 20px; background-color: var(--color-orange); color: #fff; border: 1px solid #fff; border-top: none; }

.flip_text_button { display: none; position: absolute; bottom: 25px; right: 25px; margin: 0; padding: 0; z-index: 1; overflow: hidden; }

.modul_67 .view-first img { transition: all 0.2s linear; }
.modul_67 .view-first .mask { opacity: 0; background-color: rgba(200,200,200,0.9); transition: all 0.4s ease-in-out; }
.modul_67 .view-first h2 { margin: 0 0 1.25rem 0; padding: 50px 0 0 0; color: #000; font-size: 1.5rem; line-height: 1.25; font-weight: 700; text-align: center;
  opacity: 0; transform: translateY(-100px); transition: all 0.2s ease-in-out; }
.modul_67 .view-first h2 span { color: #000; font-size: 1.125rem; line-height: 1.39; font-weight: 300; }
.modul_67 .view-first p { display: block; position: relative; width: auto; max-width: 360px; margin: 0 auto 1.25rem auto; z-index: 10;
  opacity: 0; transform: translateY(100%); transition: all 0.2s linear; }
.modul_67 .view-first a.info { opacity: 0; transition: all 0.2s ease-in-out; }

/* Aufdecken per Maus und per Tastatur-Fokus innerhalb der Box */
.modul_67 .view-first:hover { cursor: pointer; }
.modul_67 .view-first:hover img,
.modul_67 .view-first:focus-within img { transform: scale(1.1); }
.modul_67 .view-first:hover .mask,
.modul_67 .view-first:focus-within .mask { opacity: 1; }
.modul_67 .view-first:hover h2,
.modul_67 .view-first:hover p,
.modul_67 .view-first:hover a.info,
.modul_67 .view-first:focus-within h2,
.modul_67 .view-first:focus-within p,
.modul_67 .view-first:focus-within a.info { opacity: 1; transform: translateY(0); }
.modul_67 .view-first:hover p,
.modul_67 .view-first:focus-within p { transition-delay: 0.1s; }
.modul_67 .view-first:hover a.info,
.modul_67 .view-first:focus-within a.info { transition-delay: 0.2s; }

.modul_67 .view:hover .flip_image_headline,
.modul_67 .view:focus-within .flip_image_headline,
.modul_67 .view:hover .flip_text_image_band,
.modul_67 .view:focus-within .flip_text_image_band { display: none; }
.modul_67 .view:hover .flip_text_image,
.modul_67 .view:focus-within .flip_text_image { display: block; }

/* Der Schalter bleibt per Tab erreichbar (opacity statt display:none) und erscheint mit dem Fokus */
.modul_67 .flip_text_button { display: block; opacity: 0; }
.modul_67 .view:hover .flip_text_button,
.modul_67 .view:focus-within .flip_text_button { opacity: 1; }

.modul_67 .flip_text_slidedown[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .modul_67 .view-first img,
    .modul_67 .view-first .mask,
    .modul_67 .view-first h2,
    .modul_67 .view-first p,
    .modul_67 .view-first a.info { transition: none; }
}

/* Hilfsmenü (Modul 66): Mobil normal an seiner Stelle, wie eine outer_box. */
#seite_branchen_hilfsmenue { display: block; width: 95%; margin: 0 0 1.25rem 2.5%; padding: 0; }

/* Desktop: oben rechts in der Section. Die Section ist ein Flex-Container, float wirkt dort nicht,
   deshalb absolut. Bewusst kein freier Streifen für das Menü: die Boxen (z. B. #seite_branchen_inhalt
   mit box_width_1_2) behalten ihre Prozentbreiten von der vollen Section-Breite, wie vorher. */
@media all and (min-width: 981px) {
    #seite_branchen_hilfsmenue { position: absolute; top: 0; right: 2.5%; width: 21.875%; margin: 0; }
}

#seite_branchen_hilfsmenue a { color: #fff; text-decoration: none; }
#seite_branchen_hilfsmenue a:hover,
#seite_branchen_hilfsmenue a:focus-visible,
#seite_branchen_hilfsmenue a.active { color: var(--color-orange); }

#seite_branchen_inhalt .outer_box { float: none; width: 100%; margin: 0 0 3.125rem 0; }

@media all and (max-width: 980px) {
    .modul_67 .view .flip_text { font-size: 0.9375rem; line-height: 1.2; }
    .modul_67 .view-first h2 { margin: 0 0 0.3125rem 0; padding: 10px 0 0 0; font-size: 1.3125rem; line-height: 1.19; }
    .modul_67 .view-first h2 span { font-size: 1rem; line-height: 1.25; }
    .modul_67 .view-first p { max-width: none; margin: 0 15px 1.25rem 15px; }
    .modul_67 .view .flip_text_image { left: 15px; max-width: 100px; }
    .flip_text_button { bottom: 15px; right: 15px; }

    #seite_branchen_inhalt { clear: both; float: none; width: 100%; margin: 0; }
    #seite_branchen_inhalt .outer_box { display: block; float: left; width: 46.25%; margin: 0 0 3.125rem 2.5%; }
}

@media all and (max-width: 768px) {
    .modul_67 .view .flip_text_image { left: 10px; max-width: 90px; }
    .flip_text_button { bottom: 10px; right: 10px; }

    #seite_branchen_hilfsmenue { width: calc(100% - 20px); margin: 0 10px 1.875rem 10px; }
    #seite_branchen_inhalt .outer_box { float: none; width: auto; margin: 0 10px 1.875rem 10px; }
}


/* --- Hexagon-Grafiken ------------------------------------------------------ */
.hexagon_container { clear: both; display: block; position: relative; width: auto; min-height: 150px; margin: 0 2.5% 1.25rem 2.5%; padding: 0; z-index: 1; }
.hexagon_container strong { color: var(--color-orange); }

.hexagon_box { display: inline-block; width: 175px; margin: 0; padding: 0; }

.hexagon,
.hexagon-in1,
.hexagon-in2 { display: block; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 1; overflow: hidden; visibility: hidden; }

.hexagon { width: 172px; height: 150px; }
.hexagon.hexagon_image { transform: rotate(120deg); }
.hexagon.glightbox { cursor: pointer; transform: scale(1) rotate(120deg); transition: transform 500ms ease-in-out; }
.hexagon.glightbox:hover,
.hexagon.glightbox:focus-visible { transform: scale(1.2) rotate(120deg); }

.hexagon-in1 { transform: rotate(-60deg); }
.hexagon-in2 { transform: rotate(-60deg); background-repeat: no-repeat; background-position: center; background-size: cover; visibility: visible; }

/* Rahmen: je eine Kante oben und unten pro Ebene, zusammen ergibt das das Sechseck */
.hexagon::before,
.hexagon-in1::before,
.hexagon-in2::before,
.hexagon::after,
.hexagon-in1::after,
.hexagon-in2::after { content: ''; display: block; position: absolute; top: 0; left: 25%; width: 50%; height: 1px; background-color: #fff; z-index: 10; visibility: visible; }
.hexagon::after,
.hexagon-in1::after,
.hexagon-in2::after { top: auto; bottom: 0; }

.border_white .hexagon::before, .border_white .hexagon-in1::before, .border_white .hexagon-in2::before,
.border_white .hexagon::after, .border_white .hexagon-in1::after, .border_white .hexagon-in2::after { background-color: #fff; }
.border_orange .hexagon::before, .border_orange .hexagon-in1::before, .border_orange .hexagon-in2::before,
.border_orange .hexagon::after, .border_orange .hexagon-in1::after, .border_orange .hexagon-in2::after { background-color: var(--color-orange); }
.border_lightgray .hexagon::before, .border_lightgray .hexagon-in1::before, .border_lightgray .hexagon-in2::before,
.border_lightgray .hexagon::after, .border_lightgray .hexagon-in1::after, .border_lightgray .hexagon-in2::after { background-color: #dadada; }
.border_gray .hexagon::before, .border_gray .hexagon-in1::before, .border_gray .hexagon-in2::before,
.border_gray .hexagon::after, .border_gray .hexagon-in1::after, .border_gray .hexagon-in2::after { background-color: var(--color-gray); }

/* Hintergrundfarbe, wenn Hexagon ohne Bild */
.bg_white .hexagon-in2     { background-color: #fff; }
.bg_orange .hexagon-in2    { background-color: var(--color-orange); }
.bg_lightgray .hexagon-in2 { background-color: #dadada; }
.bg_gray .hexagon-in2      { background-color: var(--color-gray); }

.hexagon_container .hexagon_box { display: block; position: absolute; top: 0; left: 0; width: 172px; height: 150px; margin: 0; padding: 0; z-index: 10; text-align: center; }
.hexagon_container .hexagon_text { display: block; position: absolute; top: 50%; left: 0; width: 100%; margin: 0; padding: 0; z-index: 10; transform: translateY(-50%);
  text-align: center; color: #fff; font-size: 1.25rem; line-height: 1.5; font-weight: 700; }
.hexagon_container .hexagon_full_text { display: block; width: auto; max-width: 980px; margin: 0; padding: 0; z-index: 10; text-align: left; }

.bg_white .hexagon_text,
.bg_lightgray .hexagon_text { color: #000; }

#s7_messmittel_container { height: 700px; }
#s7_messmittel_container .hexagon_box { display: block; position: absolute; top: 0; left: 0; width: 172px; height: 150px; margin: 0; padding: 0; z-index: 10; text-align: center; }
#s7_messmittel_container #s7_messmittel_empty_1 { top: 90px; left: 20px; z-index: 1; }
#s7_messmittel_container #s7_messmittel_empty_2 { top: 190px; left: 110px; z-index: 1; }
#s7_messmittel_container #s7_messmittel_empty_3 { top: 0; left: 210px; z-index: 1; }
#s7_messmittel_container #s7_messmittel_empty_4 { top: 100px; left: 300px; z-index: 1; }
#s7_messmittel_container #s7_messmittel_1 { top: 170px; left: 220px; }
#s7_messmittel_container #s7_messmittel_2 { top: 80px; left: 360px; }
#s7_messmittel_container #s7_messmittel_3 { top: 260px; left: 360px; }
#s7_messmittel_container #s7_messmittel_4 { top: 170px; left: 500px; }

@media (prefers-reduced-motion: reduce) {
    .hexagon.glightbox { transition: none; }
}

@media all and (max-width: 980px) {
    .hexagon_container { margin: 0 2.5% 2.5rem 2.5%; }
    .hexagon_container .hexagon_full_text { margin: 0 0 0 200px !important; padding: 10px 0 0 0 !important; }
    .hexagon_container .hexagon_box { position: absolute; top: 0 !important; left: 0 !important; }
    .hexagon_container .empty_1,
    .hexagon_container .empty_2 { display: none !important; }
}

@media all and (max-width: 768px) {
    .hexagon_container .hexagon_full_text { margin: 0 !important; }
    .hexagon_container .hexagon_box { position: relative; }
}


/* --- Matchcode: Dichtungsbezeichnung mit Links ----------------------------- */
.matchode_dichtungsbezeichnung { display: block; position: relative; width: 680px; max-width: 100%; margin: 0 0 1.875rem 0; padding: 15px 30px 5px 30px;
  font-size: 1.875rem; line-height: 1.33; color: #000; background-color: #fff; border: 5px solid var(--color-orange); }
.matchode_dichtungsbezeichnung span { color: #000; }

.matchode_dichtungsbezeichnung a { display: inline-block; position: relative; min-width: 40px; margin: 0 0 0.625rem 0; padding: 2px 10px;
  font-family: inherit; font-size: 1.875rem; line-height: 1.33; color: #000; text-align: center; text-decoration: none; cursor: pointer;
  border: 1px solid #ccc; border-radius: 5px; background-color: #fff; }
.matchode_dichtungsbezeichnung a:hover,
.matchode_dichtungsbezeichnung a:focus-visible { border-color: var(--color-orange-alt); color: #000; }

.matchode_dichtungsbezeichnung a.field_light { background-color: #ececec; }
.matchode_dichtungsbezeichnung a.field_dark  { background-color: #dadada; }

.matchode_dichtungsbezeichnung .info { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px;
  background-image: url(icon_info.png); background-size: 18px 18px; background-position: right top; background-repeat: no-repeat; cursor: default; }
.matchode_dichtungsbezeichnung .info span { display: none; position: absolute; top: 50%; left: 50%; min-width: 100px; min-height: 40px; margin: -30px 0 0 -50px; padding: 10px; z-index: 30;
  background-color: var(--color-orange-alt); color: #fff; font-size: 0.9375rem; line-height: 1.33; }
.matchode_dichtungsbezeichnung .info:hover span { display: block; }


/* --- Matchcode: Schritt 3, Kundendaten und Zusatzangaben nebeneinander ------ */
/* Die outer_box floatet nicht mehr, deshalb ist das Formular selbst der Flex-Container (yForm: form.rex-yform in div.yform, daher kein Kind-Selektor auf #schritt_3).
   Nur Schritt 3: das Formular in Schritt 1 (Skizze) darf nicht umbrechen. */
.matchbox_section { width: 100%; }
#schritt_3 form.rex-yform { display: flex; flex-flow: row wrap; align-items: flex-start; gap: 0; width: 100%; }
#schritt_3 form.rex-yform > .form_clear { flex-basis: 100%; }
/* Das yForm-Addon setzt .yform form > * { flex-basis: 100% }, damit stuende jede Box allein in einer Zeile. Die Breite kommt von box_width_*. */
#schritt_3 form.rex-yform > .outer_box { flex: 0 0 auto; }

@media all and (max-width: 980px) {
    /* matchcode20220426.css setzt hier width: auto, im Flex-Container wuerde die Box dann schrumpfen */
    #schritt_3 form.rex-yform > .outer_box { width: calc(100% - 20px); }
}


/* --- Produkt-Boxen: Radial-, Metall- und Wellendichtungen ------------------ */
.radialdichtung_box_container,
.metall_ringe_box_container,
.wellendichtringe_box_container { clear: both; display: flex; flex-flow: row wrap; position: relative; width: 100%; margin: 0 0 1.875rem 0; padding: 0; z-index: 1; }

/* senkrechte Trennlinien zwischen den Spalten */
.radialdichtung_box_container_bg_line,
.metall_ringe_box_container_bg_line_1,
.metall_ringe_box_container_bg_line_2,
.wellendichtringe_box_container_bg_line { display: block; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; margin: 0 0 0 -1px; padding: 0; z-index: 1; background-color: #fff; }
.metall_ringe_box_container_bg_line_1 { left: 33.33%; }
.metall_ringe_box_container_bg_line_2 { left: 66.66%; }

.radialdichtung_box_container .outer_box,
.metall_ringe_box_container .outer_box,
.wellendichtringe_box_container .outer_box { margin-bottom: 0; }

.radialdichtung_box_container img,
.metall_ringe_box_container img,
.wellendichtringe_box_container img { display: block; border: 2px solid #fff; background-color: #ccc; }

.radialdichtung_box_container h2,
.wellendichtringe_box_container h2 { display: block; padding: 60px 0; }
.metall_ringe_box_container h2 { display: block; padding: 0; }

.radialdichtung_box_container h3,
.wellendichtringe_box_container h3 { color: var(--color-orange); }
.metall_ringe_box_container h3 { margin: 0 0 0.625rem 0; color: var(--color-orange); font-weight: 700; }

.radialdichtung_box,
.metall_ringe_box,
.wellendichtringe_box { clear: both; display: block; margin: 0 0 1.875rem 0; }
.radialdichtung_box::after,
.metall_ringe_box::after,
.wellendichtringe_box::after { content: ''; display: table; clear: both; }

.radialdichtung_box_text { float: left; display: block; width: 65%; }
.radialdichtung_box_img { float: right; display: block; width: 30%; }
.radialdichtung_box_big .radialdichtung_box_text { width: 50%; }
.radialdichtung_box_big .radialdichtung_box_img { width: 45%; }

.metall_ringe_box_text { float: left; display: block; width: 75%; margin: 0; padding: 10px 0 0 20px; }
.metall_ringe_box_img { float: left; display: block; width: 25%; margin: 0; }

.wellendichtringe_box_img_1 { float: left; display: block; width: 25%; margin: 0; }
.wellendichtringe_box_text { float: left; display: block; width: 50%; margin: 0; padding: 0 20px; }
.wellendichtringe_box_img_2 { float: left; display: block; width: 25%; margin: 0; }
.wellendichtringe_box_text_full { float: left; display: block; width: 75%; margin: 0; padding: 0 0 0 20px; }

@media all and (max-width: 980px) {
    .radialdichtung_box_container .outer_box,
    .metall_ringe_box_container .outer_box,
    .wellendichtringe_box_container .outer_box { width: 95%; margin: 0 0 3.125rem 2.5%; }

    .radialdichtung_box_container_bg_line,
    .metall_ringe_box_container_bg_line_1,
    .metall_ringe_box_container_bg_line_2,
    .wellendichtringe_box_container_bg_line { position: relative; left: 0; width: 95%; height: 2px; margin: 0 0 3.125rem 2.5%; }
}


/* --- Tabellen Elastische Metalldichtungen: Desktop- und Mobilfassung ------- */
.table_desktop { display: block; overflow-x: auto; }
.table_desktop img { min-width: 120px; }
.table_desktop td { vertical-align: top; }
.table_desktop table { width: 100%; }
.table_responsive { display: none; }

.table_responsive table,
.table_responsive tr,
.table_responsive th.headline { border: none; }
.table_responsive td.description { padding: 10px 5px 50px 5px; border: none; }

@media all and (max-width: 980px) {
    .table_desktop { display: none; }
    .table_responsive { display: block; }
}


/* --- Karriere Stellenanzeige (Modul extras_510): Abstände Überschrift und Liste ---------------- */
/* Die h2 hängt näher an ihrer Liste, nach der Liste kommt mehr Abstand zur nächsten Überschrift. Nur in diesem Modul. */
.extras_510_karriere_stellenanzeige h2 { margin: 0 0 0.625rem 0; }
.extras_510_karriere_stellenanzeige ul { margin: 0 0 1.875rem 0; }
.extras_510_karriere_stellenanzeige .stelle_eckdaten { margin: 0 0 1.25rem 0; padding: 20px 20px 10px 20px; background-color: var(--color-white); color: #000; }
.extras_510_karriere_stellenanzeige .stelle_eckdaten ul { margin: 0; }


/* --- Suche: Ergebnisliste (extras_031_suche_ergebnis) und Formular (extras_030_suche_formular) ----------- */
/* Titel (h4) und Absätze der Treffer rücken enger zusammen, zwischen den Treffern bleibt 1,5rem. */
li.search_it-result h4.search_it-title,
li.search_it-result p.search_it-teaser,
li.search_it-result p.search_it-url { margin-bottom: 0.25rem; }
li.search_it-result { margin-bottom: 1.5rem; }

/* Dateitreffer (extras_031_suche_ergebnis): Abstand zwischen den Download-Kacheln */
.search_it-file-results .download_box { margin-bottom: 1.5rem; }

/* Formular im Inhalt linksbündig (das Addon zentriert es). Die Suchbox im Header (#suchbox) liegt außerhalb von #content und bleibt unberührt. */
#content .search_it_flex { justify-content: flex-start; }

/* Zweispaltig 50 % + 45 % (Lücke 5 % aus dem Addon) statt 63 % + 32 %: in der schmalen Spalte stand der Dateiname breiter als die Kachel.
   min-width: 0 und overflow-wrap, damit lange Dateinamen umbrechen statt aus der Kachel zu laufen. */
.extras_031_suche_ergebnis_inhaltsseiten { width: 50%; }
.extras_031_suche_ergebnis_dateien { width: 45%; }
.search_it-file-results .download_text { min-width: 0; overflow-wrap: anywhere; }
@media all and (max-width: 768px) {
    .extras_031_suche_ergebnis_inhaltsseiten,
    .extras_031_suche_ergebnis_dateien { width: 100%; }
}

/* --- yForm-Fehlermeldungen (Kontaktformular, Bewerbung): Platz für den orangen Listenpunkt ------------
   Das Addon setzt .yform .alert li { padding: 0 }, dadurch lag der Listenpunkt (ul li aus main) unter dem Text. */
.yform .alert li { padding: 0 0 0 1.25rem; }


/* --- Nach-oben-Button: mittig, jetzt bündig mit dem Cookie-Einstellungen-Button bei 20px --------- */
#scroll_to_top { right: auto; left: 50%; bottom: 20px; transform: translateX(-50%); }

/* --- Cookie-Einstellungen-Button (Consent-Addon): 40px von unten auf 20px, wie Nach-oben-Button.
   !important, weil das Consent-Addon die Position inline bzw. mit eigener, später ladender CSS setzt. */
.ccm-settings-summoner {
  position: fixed;
  bottom: 20px !important;
}