/*Ausgangspunkt für diese CSS war eine mit Oxygen Styles Basket erstellte CSS*/

/* Menü links, aktives Element. WebHelp only. */
@media screen {
  .wh_publication_toc .active > .topicref a {
    font-weight: bold;
    white-space: normal;        /* erlaubt Zeilenumbruch zwischen Wörtern */
  word-break: keep-all;       /* keine Trennung innerhalb von Wörtern */
    }
}

/* Mobiles Menü verstecken/anzeigen */
@media screen and (max-width: 768px) {
    .wh_top_menu > ul { 
        display: none; 
    }
    .wh_menu_mobile_button {
        display: block;  /* Hamburger sichtbar */
    }
}


/* Prevent left TOC from overlapping content on small screens */
@media screen and (max-width: 1124px) {
    .wh_publication_toc {
        position: relative !important;
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }

    .wh_content_area {
        margin-left: 0 !important;
    }
}

/* ------------------------------- SCHRIFTEN -------------------- */

/* -------------------- Oswald – Light (300) -------------------- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src:
    local('Oswald Light'),
    local('Oswald-Light'),
    url('https://www.semcosoft.com/files/theme/fonts/oswald-v49-latin-300.woff2') format('woff2'),
    url('https://www.semcosoft.com/files/theme/fonts/oswald-v49-latin-300.woff') format('woff'),
    url('https://www.semcosoft.com/files/theme/fonts/oswald-v49-latin-300.ttf') format('truetype');
  unicode-range: U+000-5FF; /* Latin charset */
}

/* -------------------- Open Sans – Regular (400) --------------- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src:
    local('Open Sans Regular'),
    local('OpenSans-Regular'),
    url('https://www.semcosoft.com/files/theme/fonts/open-sans-v34-latin-regular.woff2') format('woff2'),
    url('https://www.semcosoft.com/files/theme/fonts/open-sans-v34-latin-regular.woff') format('woff'),
    url('https://www.semcosoft.com/files/theme/fonts/open-sans-v34-latin-regular.ttf') format('truetype');
  unicode-range: U+000-5FF;
}

/* -------------------- Open Sans – Bold (700) -------------------- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src:
    local('Open Sans Bold'),
    local('OpenSans-Bold'),
    url('https://www.semcosoft.com/files/theme/fonts/open-sans-v34-latin-700.woff2') format('woff2'),
    url('https://www.semcosoft.com/files/theme/fonts/open-sans-v34-latin-700.woff') format('woff'),
    url('https://www.semcosoft.com/files/theme/fonts/open-sans-v34-latin-700.ttf') format('truetype');
  unicode-range: U+000-5FF;
}

/* -------------------- Font Awesome ----------------------------- */
@font-face {
  font-family: 'Font Awesome';
  font-style: normal;
  font-weight: normal;
  font-display: block;
  src:
    local('Font Awesome 5 Free'),
    local('FontAwesome'),
    url('https://www.semcosoft.com/files/theme/fonts/fontawesome-webfont.woff2') format('woff2'),
    url('https://www.semcosoft.com/files/theme/fonts/fontawesome-webfont.woff') format('woff'),
    url('https://www.semcosoft.com/files/theme/fonts/fontawesome-webfont.ttf') format('truetype');
  unicode-range: U+000-5FF;
}

/* -----Gedankenstrich ermöglichen---- */

@font-face {
  font-family: "DashFallback";
  src: local("Noto Sans"), local("Roboto"), local("Arial");
  unicode-range: U+2013, U+2014, U+2015; /* en-dash, em-dash, horizontal bar */
}

body,
.wh_content,
.wh_topic_content {
  font-family: "YourMainFont", "DashFallback", sans-serif !important;
}


/* ------------------------------------------------------ SCHRIFTEN ENDE -------------------- */



/* -------------------- RESPONSIVENESS TOP-MENÜ UND INTROTEXT STARTSEITE -------------------- */
@media screen and (orientation: portrait) {
  .wh_header,
  .wh_logo,
  .wh_top_menu {
    display: block !important;
    visibility: visible !important;
  }
}

@media (max-width: 768px) {
  .wh_top_menu ul {
    display: flex;
    white-space: nowrap;
    overflow-x: auto;
  }
}

/* Auf mobilen Displays: keine Zeilenumbrüche beim Text über dem Suchfeld*/
@media (max-width: 600px) {
  .hero-text {
    word-break: keep-all !important;
  }
}


/*accent-colors-selector*/
.topictitle1,
.topictitle2,
.topictitle3,
.topictitle4,
.topictitle5,
.topictitle6,
*[class~='front-page/front-page-title'],
*[class~="toc/title"],
*[class~="placeholder/figurelist"] > *[class~="topic/title"],
*[class~="placeholder/tablelist"] > *[class~="topic/title"],
*[class~="index/groups"]::before {
  color: #272c61;
}
*[class~='topic/shortdesc']:before {
  color: #e954b7;
}
*[class~='topic/xref'],
*[class~='topic/link'] {
  color: #588bd7; /* Standardblau = #1d518a */
}
.related-links a,
.related-links a:visited {
  color: #588bd7;
}
a,
a:hover,
a:visited {
  color: #588bd7;
}
*[class~='topic/table'] th {
  background-color: #fafcff;
}

/*Verhalten für GLossarbegriffe im Text ----------------------*/
a:link > dfn.term,
a:visited > dfn.term,
a:hover > dfn.term,
a:active > dfn.term {
  text-decoration: none !important;
}


.topictitle1,
.topictitle2,
.topictitle3,
.topictitle4,
.topictitle5,
.topictitle6,
*[class~='front-page/front-page-title'],
*[class~="toc/title"],
*[class~="map/topicref"],
*[class~='topic/title'],
*[class~='topic/thead'],
*[class~="placeholder/figurelist"],
*[class~="placeholder/tablelist"],
*[class~="index/groups"]::before,
*[class~="index/group"] > *[class~="index/label"],
.wh_publication_title,
.wh_tile_title .topicref,
.wh_main_page_toc_entry .topicref,
.wh_index_terms span.wh_first_letter,
.wh-letters li a {
  font-family: 'Oswald', sans-serif;
}

/*title-font-size-medium*/
.topictitle1,
*[class~='toc/title'],
*[class~="placeholder/figurelist"] > *[class~="topic/title"],
*[class~="placeholder/tablelist"] > *[class~="topic/title"],
*[class~="index/groups"]::before {
  font-size: 21pt;
  font-family: Oswald; 
}
.topictitle2
 {
  font-size: 18pt;
  font-family: 'Oswald', sans-serif;
}
.topictitle3,
.topictitle4,
.topictitle5,
.topictitle6 {
  font-size: 15pt;
  font-family: 'Oswald', sans-serif;
}
/*content-font-size-12*/
body {
  font-size: 12pt;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
}
/*between-elements-small*/
*[class~='topic/p'],
*[class~='topic/lq'],
*[class~='topic/note'],
*[class~='topic/dl'],
*[class~='topic/ul'],
*[class~='topic/ol'],
*[class~='topic/li'],
*[class~='topic/sl'],
*[class~='topic/pre'],
*[class~='topic/lines'],
*[class~='topic/fig'],
*[class~='topic/table'],
*[class~='topic/simpletable'],
*[class~='topic/section'],
*[class~='topic/example'] {
  margin: 0.8em 0;
}




/* -------------------------TOP-MENÜ oben rechts -------------------  Schriftgröße */
.wh_top_menu {
    font-size: 1.4em !important;   /* z.B. 1.2em = 20% größer als Standard */
    font-weight: bold;   /* optional: fett */
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase; /* Hauptmenüpunkte in Großbuchstaben */
}

.wh_top_menu > ul a:hover {
    color: #e954b7;  /* beim Hovern wird der Menüpunkt pink wie der Suchbutton */
    
}

.wh_top_menu ul li {
    font-size: 0.8em !important;   /* z.B. 1.2em = 20% größer als Standard */
       
}
/* Schriftgröße Untermenü */
.wh_top_menu ul ul li {
    font-size: 0.8em !important; /* Untermenü bleibt kleiner */
    text-transform: none !important;
}





/* Bildunterschriften kleinere Schriftgröße als normal */
*[class~='topic/fig'] > *[class~='topic/title'] {
    font-size: 0.8em;  /* 80% der vererbten Schriftgröße */
}



/* Schrift der Short Descriptions = Text in den Boxen auf der Startseite  */
.wh_tile_shortdesc {
margin-top: 1em;
margin-bottom: 0.5em;
text-align: center;
color: #588bd7;
font-size: 14pt;
font-family: 'Oswald', sans-serif;
}




/* ---------------------------------Style von GLOSSAR-Begriffen -> anders als Linksprünge darzustellen  */


/* Farbe, kein Unterstrich und kursiv */
a > dfn.term {
  color: #0a403f !important;       /* your turquoise */
  text-decoration: none !important;
  font-style: italic;              /* keep italic if desired */
}


/* Hover-Farbe*/
a > dfn.term:hover {
  color: #18908e !important;
  text-decoration: none !important;
}

/* ---------------------------------ENDE GLOSSAR-Begriffe  */



/*between-lines-medium*/
*[class~='topic/topic'],
*[class~='topic/body'],
*[class~='topic/title'] {
  line-height: 1.4;
}
/*titles-borders-burger*/
.topictitle1,
.topictitle2:not(*[class ~= "glossentry/glossterm"]),
*[class~="toc/title"],
*[class~="placeholder/figurelist"] > *[class~="topic/title"],
*[class~="placeholder/tablelist"] > *[class~="topic/title"],
*[class~="index/groups"]::before {
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 0.25em;
}
/*unordered-list-bullet-circle*/
*[class="- topic/ul ul"] > *[class="- topic/li li"] {
  list-style-type: circle;
}
/*unordered-list-bullet-color-links*/
*[class="- topic/ul ul"] > *[class="- topic/li li"]::marker,
*[class="- topic/ul ul"] > *[class="- topic/li li"]::before {
  
  font-size: 0.7em;          /* kleiner Kreis */
  color: inherit;            /* gleiche Farbe wie Text */
}
/*ordered-list-counter-decimal*/
*[class="- topic/ol ol"] > *[class="- topic/li li"] {
  list-style-type: decimal;
}
/*hazard-content-header*/
*[class~="hazard-d/hazardstatement"] thead {
  display: none;
}
/*notes-layout-two-lines*/
span.note__title {
  display: block;
}
/*notes-style-borders-box*/
*[class~="topic/note"]:not([class~="hazard-d/hazardstatement"]) {
  border: 1px solid;
  border-radius: 11px;
}
/*notes-colors-colorful*/
*[class~="topic/note"]:not([class~="hazard-d/hazardstatement"]) {
  background-color: rgba(0, 120, 160, 0.09);
  border-color: #0078A0;
}
*[class~="topic/note"].note_danger,
*[class~="topic/note"].note_caution {
  background-color: rgba(255, 202, 45, 0.1);
  border-color: #606060;
}


/*WICHTIG Meldungen - orange*/
*[class~="topic/note"].note_warning,
*[class~="topic/note"].note_attention,
*[class~="topic/note"].note_important {
  background-color: #f8c06a; /* lila: #948ddd, orange kräftig: #f5a62d, orange transparenter: #f8c06a*/
  background-image: url('images/wichtig_doku.png') !important; /* dein eigenes Icon */
  background-repeat: no-repeat;
  background-position: 1em 1em;  /* Position des Icons */
  background-size: 32px 32px;    /* Icongröße anpassen */
  padding-left: 1.5em;                               /* Platz schaffen links für ein Icon, falls nötig mit "padding-left: 4em" */
  padding-right: 1em;
  margin: 2em 2em;   /* Abstand über und unter den Boxen */                               
}

/*HINWEIS Meldungen - hellblau */

*[class~="topic/note"].note_notice {
  background-color: #b6def6; /*  hellblau kräftig: #91d2f8, hellblau transparenter: #b6def6 */
  background-image: url('../images/hinweis_doku.png') !important;
  background-repeat: no-repeat;
  background-position: 1em 1em;
  background-size: 32px 32px;
  padding-left: 1.5em;                               /* Platz schaffen links für ein Icon, falls nötig mit "padding-left: 4em" */
  padding-right: 1em;
  margin: 2em 2em;   /* Abstand über und unter den Boxen */
}

/*ANMERKUNG Meldungen - dunkelgrün */
*[class~="topic/note"].note_note {
  background-color: #8fd4d4; /*  dunkelgrün kräftig: #5abebe, dunkelgrün transparenter: #8fd4d4 */
  background-image: none !important;
  padding-left: 1.5em;
  padding-right: 1em;
                                 /* Platz schaffen links für ein Icon, falls nötig mit "padding-left: 4em" */
  margin: 2em 2em;   /* Abstand über und unter den Boxen */
}



/* HINWEISE, ANMERKUNGEN, WICHTIG ----- Boxen ganz links am Inhaltsbereich------------------------------------ */

/* 1. außerhalb von Tabellen - bündig am linken Rand */
*[class~="topic/note"]:not([class~="hazard-d/hazardstatement"]):not(table * ) {
    margin-left: 0 !important;    /* links bündig */
    padding-left: 1.5em !important; /* Platz für Icon/Text */
    padding-right: 1em !important;
    max-width: 90% !important;         /* falls maximal 2/3 der Content-Breite: max-width: 75% !important; */
    box-sizing: border-box;            /* padding wird innerhalb der max-width gerechnet */
}

/* 2. innerhalb von Tabellen - etwas eingerückt */
table .td *[class~="topic/note"]:not([class~="hazard-d/hazardstatement"]) {
    margin-left: 0 !important;    /* kein extra Offset */
    padding-left: 1em !important;  /* Standard-Padding innerhalb Tabelle */
    padding-right: 1em !important;
}



*[class~="topic/note"].note_restriction {
  background-color: rgba(255, 226, 225, 0.32);
  border-color: #FF342D;
}
/*links-style-underline*/
*[class~='topic/xref'],
*[class~='topic/link'] {
  text-decoration: underline;
}
*[class~='topic/xref']:hover,
*[class~='topic/link']:hover {
  text-decoration: underline;
}
.related-links a,
.related-links a:visited,
a,
a:visited {
  text-decoration: underline;
}
.related-links a:hover,
a:hover {
  text-decoration: underline;
}
/*related-links-background-accent-color-rounded-light*/
*[class~="topic/linklist"] {
  padding: 15px;
  background-color: #f0f4fc;
  border-radius: 15px;
}




/*-------->STARTSEITE BOXEN = wh-tiles*/
/*wh-tiles-themes-titles-and-link-bg*/
.wh_tile {
  border-radius: 8px 8px 8px 8px;                /* leicht abgerundeten Ecken */
  background-color: rgb(169,225,95); /* grün (R169 G225 B95) */
}

/* Farben für die 4 Startseiten-Boxen */
.wh_tile:nth-child(1) { background-color: #a0b91e; }   /* hellgrün */
.wh_tile:nth-child(2) { background-color: #948ddd; }  /* lila */
.wh_tile:nth-child(3) { background-color: #91d2f8; }  /* hellblau */
.wh_tile:nth-child(4) { background-color: #f5a62d; }  /* helles orange */

.wh_tile_title {
  text-align: center;
  font-size: 1.5em;
}
.wh_tile_title a {
  color: rgb(11,88,148);
  text-decoration: none; /* keine Unterstreichung */
  padding-right: 0.5em; /* Platz für Pfeil */
  position: relative;
}

/* --- Startseite Boxen Pfeil-Symbol hinzufügen --- */
.wh_tile_title a::after {
  content: "→";              /* Unicode-Pfeil */
  font-size: 0.9em;
  color: rgb(11,88,148);
  margin-left: 0.4em;        /* Abstand zwischen Text und Pfeil */
  vertical-align: top;    /* gleiche Grundlinie wie Text */
  font-weight: normal;
}

.wh_tile_shortdesc {
  margin-top: 1em;
  margin-bottom: 0.5em;
  text-align: center;
  color: #272c61;
  
  
    
/*---------      Breadcrumbs ----------------------------------*/ 
  
}
/*wh-breadcrumb-links*/
.wh_breadcrumb ol a {
  color: #588bd7;
}
/*wh-breadcrumb-separator-arrow*/
.wh_breadcrumb li:not(:last-of-type):after {
  content: ' > ';
}


/*--------- Linkes NAVIGATIONSMENÜ ----------------------------------*/

/*Navigationsmenü links mit farblich abgesetztem Menüpunkt, wenn dieser ausgewählt ist*/
.wh_publication_toc .title a {
  color: #000;
}
.wh_publication_toc .active > .topicref a {
  color: #588bd7;
}
.wh_publication_toc .title a:hover {
  text-decoration: none;
}
/* Alle Links im Navigationsmenü keine Unterstreichung, korrekte Worttrennung */
.wh_publication_toc .title a {
  text-decoration: none; /* entfernt Unterstreichung */
  white-space: normal;        /* erlaubt Zeilenumbruch zwischen Wörtern */
  word-break: normal;    /* keine radikale Worttrennung */
  overflow-wrap: normal; /* zusätzliche Unterstützung für alte Browser */
  hyphens: auto;                  /* Silbentrennung aktivieren */
  }

/* Aktive Links hervorheben, ohne Unterstreichung */
.wh_publication_toc .active > .topicref a {
  text-decoration: none; /* verhindert Unterstreichung auch bei aktiven Einträgen */
}


.wh_publication_toc .title a:hover,
.wh_publication_toc .active > .topicref a:hover {
  color: #588bd7;       /* bestehende Hover-Farbe */
  text-decoration: none; /* keine Unterstreichung */
}

/* ----------- Abstand zwischen linkem Navi-Menü und Haupttextfeld */
.wh_topic_body {
    padding-left: 20px !important;  /* Adjust value as needed */
}

/* --- Linkes Navigationsmenü: Hintergrundfarbe --- */
.wh_publication_toc {
  background-color: #eef3fa;   /* sehr helles Grau/Blau */
  padding-top: 1em;
  padding-bottom: 1em;
}





/*wh-right-toc-style-bar-selection*/
.wh_topic_toc .section-item .section-title a {
  border-left: 3px solid transparent;
  padding-left: 5px;
}
.wh_topic_toc .section-item .section-title a:hover {
  border-left: 3px solid #C0C0C0;
}
.wh_topic_toc .section-item .section-title .current_node {
  border-left: 3px solid #A9A9A9;
  text-decoration: none;
}
/*wh-right-toc-borders-borderless*/
.wh_topic_toc {
  border-left: none;
}
/*wh-right-toc-colors-labels-for-selection-black-foreground*/
.wh_topic_toc .section-item .section-title a {
  color: #000;
}
.wh_topic_toc .section-item .section-title a.current_node {
  color: #e954b7;
}
/*wh-index-terms-colors-links-colors*/
.wh_index_terms span.wh_first_letter,
.wh-letters li a,
.wh_term_target {
  color: #588bd7;
}
/*wh-index-terms-background-background*/
.wh-letters {
  background-color: #bbcdec;
}
/*wh-index-terms-styles-titles-bold*/
.wh-letters li a,
.wh_first_letter {
  font-weight: bold;
}
.wh_index_terms .wh_first_letter {
  border-bottom: none;
}
/*wh-menu-page-colors-link-color-lighten*/
.wh_header {
  background-color: rgb(255,255,255);
}
.wh_top_menu > ul > li a,
.wh_indexterms_link a::before {
  color: rgb(58,91,143);
}
.wh_indexterms_link a span {
  display: none;
}

/* Aktuellen Menüpunkt (Topic) deutlich hervorheben */
.wh_publication_toc .active > .topicref a {
  color: #588bd7;                    /* dein vorhandenes Blau */
  font-weight: 450;                  /* deutlicher */
  background-color: #e6eefb;         /* kräftigere Markierung */
  border-left: 3px solid #588bd7;
  padding-left: 5px;
}

/* Kinder-Themen (Unterpunkte) des aktiven Bereichs */
.wh_publication_toc li.expanded ul li {
  background-color: #fafcff;        /* sehr leichte Hervorhebung */
  border-left: 3px solid #d3e1f7;
  padding-left: 5px;
}

/* --- Linkes Menü schmaler machen --- */
.wh_publication_toc,
.wh_tree_toc,
.wh_main_toc {
  width: 300px !important;   /* Wunschbreite (Standard ist ~260–300px) */
}
/*---------NAVIGATION LINKS ENDE ----------------------------------*/




/* *Menü oben rechts anpassen an Webseite-Look */
.wh_top_menu ul li:hover {
  background-color: rgb(255,255,255);
}
.wh_top_menu ul ul {
  background-color: rgb(255,255,255);
}
.wh_top_menu ul ul li {
  border-top-color: #bbcdec;
  
  
  
  
}
#wh_menu_mobile_button {
  background-color: rgb(255,255,255);
}
/*wh-search-component-colors-labels*/
.wh_search_button {
  background-color: #e954b7;
}
/*wh-search-component-background-color-light*/
.wh_search_input {
  background-color: #ffffff;
}
/*wh-search-component-padding-medium*/
.wh_search_input {
  padding: 50px 0;
}

/* ------------------------  Header LOGO Look ---------------------- */
.wh_header .wh_logo img {
  max-height: 70px;  /* oder gewünschte Höhe */
  width: auto;       /* behält Seitenverhältnis bei */
}

/* Begrüßungstext Startseite */
.wh_welcome:not(:empty) {
  display: block;
  color: rgb(11,88,148);
  font-size: 2.5em;
  font-family: 'Oswald', sans-serif;
  padding: .5em;
  text-align: center;
  text-shadow: none;
  width: 80%;
}




/* ------------ Stil für das Suchfeld ---------------------------------*/
.wh_search_textfield {
  border: 2px solid rgb(142,142,142);   /* Farbe und Stärke des Rahmens */
  border-radius: 8px;          /* optional: abgerundete Ecken */
  padding: 6px 10px;
  font-size: 1em;
  color: #333;
}

/* Rahmenfarbe beim Fokussieren (wenn man hineinklickt) */
.wh_search_textfield:focus {
  border-color: rgb(255,0,144);       /* dunkleres Grün beim Fokus */
  outline: none;               /* Standard-Outline entfernen */
}

/* Stil für den Platzhaltertext */
.wh_search_textfield::placeholder {
  color: rgb(142,142,142);                 /* Farbe des Platzhaltertextes */
  font-style: italic;          /* optional: kursiv */
}





/* Einheitliches Styling für UI-Elemente */
*[class~="uicontrol"] {
  font-weight: 500;                        /* mittlere Stärke */
  font-size: 0.8em;
  color: rgb(25, 60, 120);                 /* dezentes Dunkelblau */
  font-style: normal;                      /* kein Kursiv */
  text-shadow: none;                       /* clean */
  text-transform: uppercase;               /* Großbuchstaben für Small-Caps-Effekt */
  letter-spacing: 0.01em;                  /* etwas mehr Abstand */
  transition: background 0.2s ease;        /* sanfter Hover-Effekt */
}

*[class~="menucascade"] {
  text-transform: none;   /* normale Schreibweise */
  font-weight: 500;                        /* mittlere Stärke */
  color: rgb(25, 60, 120);                 /* dezentes Dunkelblau */
  font-style: normal;                      /* kein Kursiv */
  text-shadow: none;                       /* clean */
  letter-spacing: 0.01em;                  /* etwas mehr Abstand */
  transition: background 0.2s ease;        /* sanfter Hover-Effekt */
}




/* Padding rund um alle Abbildungen global */
figure {
  padding: 0em 1em 2em 0em; /* Abstand oben rechts unten links */
  margin: 0;    /* optional: entfernt Standard-Margin, falls nötig */
}

/* Leerzeile - in oXygen geschrieben als <p outputclass="blankline"/>  */
p.blankline {
  margin: 2.5em 0;
}

/* ---- Layout für Startseite mit 4 Boxen in 2x2-Anordnung ---- */ /* Container für alle Tiles */ 
.wh_main_page_tiles { display: flex; flex-wrap: wrap; /* Zeilenumbruch nach 2 Boxen */ 
justify-content: center; /* zentriert die Boxen horizontal */ 
gap: 4em; /* Abstand zwischen Boxen */ 
margin: 2em auto; /* Abstand oben/unten und zentriert auf der Seite */ 
max-width: 550px; /* optional: Gesamtbreite begrenzen */ } /* Einzelne Tiles auf der Startseite */ 

.wh_tile { flex: 1 1 calc(40% - 2em); /* zwei Boxen pro Zeile */ 
box-sizing: border-box; padding: 2.5em; 
text-align: center; 
min-width: 300px; /* sorgt für gutes Verhalten bei schmalen Bildschirmen */ }



/* --------- Shortdescription (= Textbody in den Kacheln auf der Startseite) wird in den Related Links und 
 * in den eigentlichen Kapiteln NICHT eingeblendet ---------*/
.related_links .desc,
.related_links [class~="topic/desc"],
.wh_related_links .desc,
.wh_related_links [class~="topic/desc"] {
  display: none !important;
}

.shortdesc,
[class~="topic/shortdesc"],
.wh_topic_shortdesc,
.wh_shortdesc {
  display: none !important;
}


/* --------------------------- BANNER  (im Zusammenspiel mit banner_mainpage.xhtml Fragment ----------- */


.hero-banner {
  position: relative;
  display: flex;
  align-items: center;      /* vertikale Zentrierung */
  padding-left: 9%;       /* Abstand zum linken Rand */
  height: 400px;            /* Banner-Höhe */
  overflow: hidden;         /* für responsive Zuschnitte */
  margin: 0;
  padding: 0;
}

/* Banner-Hintergrundbild immer rechts, immer vollflächig */
.hero-image {
  position: relative;
  right: 0;
  top: 0;
  height: auto;
  width: 100%;               
  object-fit: contain;         
  object-position: right;
  overflow: visible;
}

/* Text über dem Bannerbild */
.wh_main_page .hero-banner .hero-text {
  position: absolute !important;       /* damit Text über dem Bild liegt */
  z-index: 10;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.5rem, 2.5vw + 1rem, 10rem) !important;  /* Responsive Schriftgröße (2.5rem Handy, dynamisch auf 4% der Viewport-Breite +1rem, maximum 5rem Desktop)*/
  color: white;
  text-align: left;
  top: 10%;               /* Abstand vom oberen Rand */
  line-height: 1.5;
  max-width: 85%;           /* damit keine zu langen Zeilen */
  left: 9% !important; /* ungefährer Abstand vom linken Rand - wie Logo */
  
}

.wh_main_page,
.wh_page_wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.wh_header {
  position: relative !important;
}

/* Logo nach rechts verschieben */
.wh_logo img {
  margin-left: 9% !important;  /* Abstand vom linken Rand anpassen */
}

.breadcrumb-sticky {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}


/* Tabellen alle gleich breit*/
table {
    width: 90% !important;
}

/* Versionsauswahl rechts neben dem Suchfeld ----------------------------- noch nicht fertig! */


.after-search {
    position: absolute;
    right: 35px;       /* distance from right edge */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 9999;     /* stays above header */
}

/* Versionsauswahl ENDE ------------*/


fig img {
    max-width: 600px;
    height: auto;
}


/* -------------------- LINKS IN HINWEISEN dunklere Farbe für bessere Lesbarkeiton */
*[class~="topic/note"] a {
    color: #0054a8 !important;   /* dark blue */
      /* slightly bolder for readability */
}

*[class~="topic/note"] a:hover {
    color: #001f4d !important;   /* even darker on hover */
}