/*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 ------- gar keine Umrandungen ---------   vorher: border: 1px solid; border-radius: 11px*/
*[class~="topic/note"]:not([class~="hazard-d/hazardstatement"]) {
  border: none !important;
  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,
*[class~="topic/note"].note_remember {
  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: #91d2f8; }  /* hellblau #91d2f8*/
.wh_tile:nth-child(3) { background-color: #948ddd; }  /* lila #948ddd*/
.wh_tile:nth-child(4) { background-color: #f5a62d; }  /* #ebd96a helles orange */
.wh_tile:nth-child(5) { background-color: #ebd96a; }  /* sandgelb #ebd96a, rot #fa697f*/

.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Ü ----------------------------------*/

/* Linkes Navigationsmenü – gleiche Schriftgröße wie Fließtext */
.wh_publication_toc,
.wh_publication_toc .title a
.wh_publication_toc .active > .topicref a {
  font-size: 1em;
}

/*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: #f7f7f7;   /* sehr helles Grau/Blau #eef3fa */
  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: 0 0 calc(50% - 2em); /* zwei Boxen pro Zeile vorher: flex: 1 1 calc(40% - 2em)*/ 
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 */
}

/* -------------------- Versionsanzeige über dem Suchfeld je nach Eingabe im Parameter "semco.doc.version" */
.semco-version::before{
  content: "SEMCO-Version " attr(data-version);
  display: block;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.65;
  margin-top: 0.75rem;
}


/* -------------------- outputclass-Definition: Trennlinie zwischen Absätzen. Zu verwenden mit: <p outputclass="separator"/> */

p.separator {
    border: 0;
    border-top: 1px solid #d9d9d9;
    margin: 2rem 0;
    padding: 0;
    height: 0;
}

/* ============================================================
   TIPPS & TRICKS – Einstiegsseite und Artikelseiten
   Stand 13, konsolidiert. Ersetzt alle vorherigen T&T-Bloecke.
   Ans Ende der bestehenden Custom-CSS haengen.

   Voraussetzungen im DITA:
     Einstiegsseite  section outputclass="tt-karte"
                     ul      outputclass="tt-filter"
                     li      outputclass="tt-video|tt-artikel|
                                          tt-beides|tt-geplant"
                     section outputclass="tt-abschluss"
                     ul      outputclass="tt-legende"
     Artikelseiten   p       outputclass="tt-meta tt-artikel"
                     div     outputclass="tt-antwort"
                     p       outputclass="tt-back"

   Ausserdem: Fragment fragments/tt-aktive-karte.xml am
   Platzhalter webhelp.fragment.after.body.topic.page.

   Kein !important ausser bei den Template-Abschaltungen:
   body#id .klasse (1,1,1) schlaegt die Attributselektoren des
   oXygen-Templates (0,1,0).
   ============================================================ */

/* ---------- Icon-Font -----------------------------------------
   Eigene Deklaration, weil der bestehende @font-face fuer
   'Font Awesome' unicode-range: U+000-5FF hat. Die FA-Glyphen
   liegen bei U+F000 und hoeher, also ausserhalb -> der Browser
   laedt die Datei, benutzt sie aber fuer diese Zeichen nicht.
   Gleiche Dateien, gleicher Cache, korrekter Bereich.
   -------------------------------------------------------------- */
@font-face {
    font-family: 'TT Icons';
    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+F000-F8FF;
}

/* ---------- Farbwerte, hell ---------- */
:root {
    --tt-card-bg:     #ffffff;
    --tt-card-border: #e2e2e2;
    --tt-row-border:  #ededed;
    --tt-title:       #272c61;
    --tt-link:        #588bd7;
    --tt-muted:       #7d7d7d;
    --tt-chip-bg:     #f0f4fc;
    --tt-badge-bg:    #f2f2f2;
    --tt-ring:        rgba(88, 139, 215, 0.35);

    /* Breiten.
       tt-rahmen = Breite des gemeinsamen Rahmens. Entspricht der
                   Breite des Suchfelds, damit Suchfeld, Brotkrumen,
                   Titel und Inhalt links auf einer Kante beginnen.
                   In Prozent, damit der Rahmen wie das Suchfeld
                   mitwaechst. Nachmessen in der Konsole:
                     var f = document.querySelector('#searchForm');
                     (f.getBoundingClientRect().width /
                      document.documentElement.clientWidth * 100)
                        .toFixed(1) + '%'
       tt-text   = Zeilenbreite fuer Fliesstext in Artikeln.
                   44rem ~ 704px, etwa 76 Zeichen. Mehr als 50rem
                   liest sich muehsam. Der Text bleibt linksbuendig,
                   nur seine Laenge wird begrenzt. */
    --tt-rahmen:      66%;
    --tt-text:        90rem;  /* Breite des Textlaufs, ursprüngliches Design war 44rem */
}

/* ---------- Farbwerte, dunkel ----------
   Selektor und media-Wrapper nach oXygen-Konvention, bestaetigt
   fuer WebHelp 28.1. */
@media screen {
    :root[data-wh-theme="dark"] {
        --tt-card-bg:     #1e2126;
        --tt-card-border: #3a3f47;
        --tt-row-border:  #33383f;
        --tt-title:       #cdd6ea;
        --tt-link:        #8db4ea;
        --tt-muted:       #9aa0a8;
        --tt-chip-bg:     #262b33;
        --tt-badge-bg:    #2c3138;
        --tt-ring:        rgba(141, 180, 234, 0.40);
    }
}


/* ============================================================
   1. TEMPLATE-ELEMENTE ABSCHALTEN
   ============================================================ */

/* Dropdown im Hauptmenue */
span.topicref[data-id="c_tipps_und_tricks"] + ul.dropdown-menu {
    display: none !important;
}

/* Linkes Publikations-TOC */
body#c_tipps_und_tricks nav#wh_publication_toc,
body[id^="c_tut_"] nav#wh_publication_toc {
    display: none !important;
}

/* Inhaltsspalte auf volle Breite */
body#c_tipps_und_tricks .wh_content_area > .row > main,
body#c_tipps_und_tricks .wh_content_area > .row > div[class*="col-"],
body[id^="c_tut_"] .wh_content_area > .row > main,
body[id^="c_tut_"] .wh_content_area > .row > div[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* "Auf dieser Seite": wird automatisch erzeugt, sobald ein Topic
   mindestens zwei sections mit id enthaelt. Auf einer Uebersicht
   redundant, die Karten SIND das Inhaltsverzeichnis. */
body#c_tipps_und_tricks [class*="wh_topic_toc"] {
    display: none !important;
}

/* Aufklapp-Chevrons und Permalink-Symbole an den Kartentiteln.
   Sections mit Titel gelten in WebHelp als collapsible elements.
   Absichtlich breit gefasst, auf diese Seite begrenzt. */
body#c_tipps_und_tricks .tt-karte [class*="collapsible"],
body#c_tipps_und_tricks .tt-karte [class*="expand"],
body#c_tipps_und_tricks .tt-karte [class*="collapse"],
body#c_tipps_und_tricks .tt-karte [class*="permalink"],
body#c_tipps_und_tricks .tt-karte [class*="hash"],
body#c_tipps_und_tricks .tt-karte > .title > a,
body#c_tipps_und_tricks .tt-karte > .sectiontitle > a {
    display: none !important;
}

/* Sanftes Scrollen auf der Einstiegsseite */
@media (prefers-reduced-motion: no-preference) {
    html:has(body#c_tipps_und_tricks) {
        scroll-behavior: smooth;
    }
}


/* ============================================================
   2. EINSTIEGSSEITE – LAYOUT
   ============================================================
   GEMEINSAMER RAHMEN fuer beide Seitentypen.

   Begrenzt wird #wh_topic_container, nicht der article: Brotkrumen
   (nav.wh_tools) und Inhaltsspalte (#wh_topic_body) sind
   Geschwister in #wh_topic_container > .row. Nur auf dieser Ebene
   bekommen beide dieselbe linke Kante.

   Der Rahmen selbst ist mittig, der Inhalt darin linksbuendig.
   Weil die Breite dieselbe Prozentzahl wie beim Suchfeld hat,
   liegt die linke Rahmenkante genau unter dem Suchfeld - bei
   jeder Fensterbreite. */

body#c_tipps_und_tricks #wh_topic_container,
body[id^="c_tut_"] #wh_topic_container {
    width: var(--tt-rahmen);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

/* Schmale Displays: volle Breite */
@media screen and (max-width: 768px) {
    body#c_tipps_und_tricks #wh_topic_container,
    body[id^="c_tut_"] #wh_topic_container {
        width: 100%;
    }
}

/* Das globale padding-left von 20px wuerde den Inhalt gegen die
   Brotkrumen verschieben */
body#c_tipps_und_tricks #wh_topic_body,
body[id^="c_tut_"] #wh_topic_body {
    padding-left: 0 !important;
}

/* ------------------------------------------------------------
   article > .body trifft nur den conbody. Ohne den Kindselektor
   wuerde auch der aeussere Wrapper .wh_topic_content.body zum
   Flex-Container, der traegt naemlich ebenfalls class="body". */

body#c_tipps_und_tricks article > .body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.2rem;
}

/* Alles, was keine Karte ist, ueber die volle Breite */
body#c_tipps_und_tricks article > .body > p,
body#c_tipps_und_tricks article > .body > ul.tt-filter,
body#c_tipps_und_tricks article > .body > .tt-abschluss,
body#c_tipps_und_tricks article > .body > .note {
    flex: 0 0 100%;
}

/* Zeilenlaenge begrenzen, da links kein TOC mehr steht.
   Nicht max-width: das wuerde als Flex-Basis wirken und zwei
   Absaetze in eine Zeile setzen. Stattdessen Innenabstand.
   Gilt nur hier – die Artikelseiten regeln das in Abschnitt 6
   ueber eine max-width auf dem Container. */
body#c_tipps_und_tricks article > .body > p {
    max-width: none;
    padding-right: max(0px, calc(100% - 75ch));
    box-sizing: border-box;
}


/* ============================================================
   3. EINSTIEGSSEITE – CHIP-LEISTE
   ============================================================ */

body#c_tipps_und_tricks ul.tt-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body#c_tipps_und_tricks ul.tt-filter li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body#c_tipps_und_tricks ul.tt-filter a {
    display: inline-block;
    padding: 0.35em 0.95em;
    border-radius: 999px;
    background: var(--tt-chip-bg);
    color: var(--tt-title);
    font-size: 10.5pt;
    text-decoration: none;
}

body#c_tipps_und_tricks ul.tt-filter a:hover {
    background: var(--tt-link);
    color: #ffffff;
    text-decoration: none;
}


/* ============================================================
   4. EINSTIEGSSEITE – KARTEN
   ============================================================
   Keine width-, inline-block- oder margin-Angaben: die Breite
   kommt allein aus flex-basis. */

body#c_tipps_und_tricks .tt-karte {
    box-sizing: border-box;
    flex: 0 0 calc(50% - 0.6rem);
    min-width: 0;
    margin: 0;
    padding: 1.1rem 1.35rem;
    background: var(--tt-card-bg);
    border: 1px solid var(--tt-card-border);
    border-radius: 12px;
    scroll-margin-top: 2rem;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

@media screen and (max-width: 800px) {
    body#c_tipps_und_tricks .tt-karte {
        flex: 0 0 100%;
    }
}

/* Kartentitel: Oswald behalten, Template-Rahmen entfernen.
   Beide Klassenvarianten, je nach WebHelp-Version. */
body#c_tipps_und_tricks .tt-karte > .title,
body#c_tipps_und_tricks .tt-karte > .sectiontitle {
    margin: 0 0 0.7rem;
    padding: 0;
    border: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 15pt;
    color: var(--tt-title);
}

body#c_tipps_und_tricks .tt-karte ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body#c_tipps_und_tricks .tt-karte li {
    position: relative;
    margin: 0;
    padding: 0.6em 0 0.6em 1.9em;
    border-top: 1px solid var(--tt-row-border);
    font-size: 11pt;
    line-height: 1.45;
    list-style: none;
}

body#c_tipps_und_tricks .tt-karte a {
    color: var(--tt-link);
    text-decoration: none;
}

body#c_tipps_und_tricks .tt-karte a:hover {
    text-decoration: underline;
}

/* Noch nicht veroeffentlichte Themen */
body#c_tipps_und_tricks .tt-karte li.tt-geplant {
    color: var(--tt-muted);
}

body#c_tipps_und_tricks .tt-karte li.tt-geplant::after {
    content: "in Arbeit";
    margin-left: 0.5em;
    padding: 0.1em 0.6em;
    border-radius: 999px;
    background: var(--tt-badge-bg);
    font-size: 0.72em;
    white-space: nowrap;
}

/* Kartenfuss: Link auf eine Unterseite. Erst noetig, wenn eine
   Kategorie eine eigene Seite bekommt. Bis dahin ohne Wirkung,
   weil die Klasse nicht vorkommt. */
body#c_tipps_und_tricks .tt-karte p.tt-mehr {
    margin: 0;
    padding: 0.7em 0 0;
    border-top: 1px solid var(--tt-row-border);
    font-size: 10.5pt;
}

body#c_tipps_und_tricks .tt-karte p.tt-mehr a::after {
    content: "\f061";
    margin-left: 0.45em;
    font-family: 'TT Icons', 'Font Awesome';
    font-size: 0.8em;
}


/* ============================================================
   5. FORMAT-SYMBOLE, LEGENDE, ABSCHLUSSBLOCK
   ============================================================ */

body#c_tipps_und_tricks .tt-karte li::before,
body#c_tipps_und_tricks ul.tt-legende li::before {
    position: absolute;
    left: 0;
    font-family: 'TT Icons', 'Font Awesome';
    color: var(--tt-muted);
}

body#c_tipps_und_tricks .tt-karte li::before {
    top: 0.75em;
    font-size: 0.85em;
}

body#c_tipps_und_tricks li.tt-video::before   { content: "\f03d"; }
body#c_tipps_und_tricks li.tt-artikel::before { content: "\f0f6"; }
body#c_tipps_und_tricks li.tt-geplant::before { content: "\f017"; }

/* ---------- Gemischter Inhalt: Video UND Beitrag ----------
   Eigenes SVG statt Font-Awesome-Glyph, weil es in FA4 kein
   Zeichen fuer "Kamera plus Dokument" gibt. Kamera oben links,
   Dokument unten rechts, bewusst ohne Ueberschneidung: bei reinen
   Konturlinien kreuzen sich sonst die Striche und das Symbol
   wirkt bei 20px unruhig.

   Eingebunden als content: url() mit Data-URI, nicht als
   mask-image. Grund: oXygens CSS-Validator kennt die
   mask-Eigenschaften nicht und meldet sie als Fehler, obwohl alle
   Browser sie unterstuetzen. content ist ihm bekannt.

   Preis dafuer: die Farbe steckt im SVG und kann nicht per
   currentColor erben. Der Dark Mode braucht deshalb eine zweite
   Regel mit dem hellen Grauwert. Wenn --tt-muted geaendert wird,
   muessen die beiden Hexwerte hier mitgeaendert werden:
     hell   #7d7d7d
     dunkel #9aa0a8
   Die Groesse steckt ebenfalls im SVG (width/height 15). */

body#c_tipps_und_tricks li.tt-beides::before,
body[id^="c_tut_"] p.tt-meta.tt-beides::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237d7d7d' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2' y='3' width='9' height='6.5' rx='1.2'/%3E%3Cpath d='M11 4.9 L15 3 L15 9.6 L11 7.6 Z'/%3E%3Crect x='11' y='12.5' width='9' height='9.5' rx='1.2'/%3E%3Cline x1='13.6' y1='17.2' x2='17.4' y2='17.2'/%3E%3C/svg%3E");
}

@media screen {
    :root[data-wh-theme="dark"] body#c_tipps_und_tricks li.tt-beides::before,
    :root[data-wh-theme="dark"] body[id^="c_tut_"] p.tt-meta.tt-beides::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239aa0a8' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2' y='3' width='9' height='6.5' rx='1.2'/%3E%3Cpath d='M11 4.9 L15 3 L15 9.6 L11 7.6 Z'/%3E%3Crect x='11' y='12.5' width='9' height='9.5' rx='1.2'/%3E%3Cline x1='13.6' y1='17.2' x2='17.4' y2='17.2'/%3E%3C/svg%3E");
    }
}

/* Feinjustierung der Grundlinie, weil hier ein Bild statt eines
   Schriftzeichens positioniert wird */
body#c_tipps_und_tricks li.tt-beides::before {
    top: 0.6em;
}

body[id^="c_tut_"] p.tt-meta.tt-beides::before {
    top: 0.1em;
}

body#c_tipps_und_tricks .tt-abschluss {
    padding-top: 0.5rem;
}

body#c_tipps_und_tricks ul.tt-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    font-size: 9.5pt;
    color: var(--tt-muted);
}

body#c_tipps_und_tricks ul.tt-legende li {
    position: relative;
    margin: 0;
    padding: 0 0 0 1.5em;
    border: 0;
    list-style: none;
}

body#c_tipps_und_tricks ul.tt-legende li::before {
    top: 0.15em;
    font-size: 0.95em;
}


/* ============================================================
   6. ARTIKELSEITEN (Textbeitraege)
   ============================================================ */

/* Der Rahmen wird in Abschnitt 2 fuer beide Seitentypen gesetzt.
   Hier nur, was Artikelseiten zusaetzlich brauchen. */

body[id^="c_tut_"] article > .body {
    max-width: none;
}

/* Videos responsiv. Die Attribute width="800" height="450" am
   object-Element wuerden sonst auf schmalen Fenstern verzerren. */
body[id^="c_tut_"] article > .body iframe,
body[id^="c_tut_"] article > .body video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

body[id^="c_tut_"] article > .body img {
    max-width: 100%;
    height: auto;
}

/* Absatz um ein Video herum braucht keinen eigenen Abstand */
body[id^="c_tut_"] article > .body > p:has(iframe) {
    margin: 1.4rem 0;
}

/* Meta-Zeile mit Formatsymbol */
body[id^="c_tut_"] p.tt-meta {
    position: relative;
    margin: 1rem 0 1.2rem;
    padding-left: 1.6em;
    font-size: 9.5pt;
    color: var(--tt-muted);
}

body[id^="c_tut_"] p.tt-meta::before {
    position: absolute;
    left: 0;
    top: 0.1em;
    font-family: 'TT Icons', 'Font Awesome';
    color: var(--tt-muted);
}

body[id^="c_tut_"] p.tt-meta.tt-video::before   { content: "\f03d"; }
body[id^="c_tut_"] p.tt-meta.tt-artikel::before { content: "\f0f6"; }

/* Antwortblock. Kein border-radius: einseitige Rahmen mit runden
   Ecken sehen unsauber aus. */
body[id^="c_tut_"] .tt-antwort {
    margin: 0 0 1.4rem;
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--tt-link);
    background: var(--tt-chip-bg);
}

body[id^="c_tut_"] .tt-antwort::before {
    content: "Kurz & knapp";
    display: block;
    margin-bottom: 0.35em;
    font-size: 8.5pt;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tt-title);
}

body[id^="c_tut_"] .tt-antwort > p {
    margin: 0;
    max-width: none;
}

/* Externe Links kennzeichnen */
body[id^="c_tut_"] .body a[href^="http"]::after {
    content: "\f08e";
    margin-left: 0.35em;
    font-family: 'TT Icons', 'Font Awesome';
    font-size: 0.75em;
    text-decoration: none;
}

/* Rueckweg als Pille */
body[id^="c_tut_"] p.tt-back {
    margin: 2.2rem 0 0;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--tt-row-border);
}

body[id^="c_tut_"] p.tt-back a {
    display: inline-block;
    padding: 0.4em 1.1em;
    border-radius: 999px;
    background: var(--tt-chip-bg);
    color: var(--tt-title);
    font-size: 10.5pt;
    text-decoration: none;
}

body[id^="c_tut_"] p.tt-back a::before {
    content: "\f053";
    margin-right: 0.5em;
    font-family: 'TT Icons', 'Font Awesome';
    font-size: 0.8em;
}

body[id^="c_tut_"] p.tt-back a:hover {
    background: var(--tt-link);
    color: #ffffff;
    text-decoration: none;
}


/* ---------- Zeilenbreite in Artikeln ----------
   Fliesstext wird in der Laenge begrenzt, aber NICHT zentriert:
   margin-left bleibt 0, damit alles an derselben linken Kante
   beginnt wie Brotkrumen, Titel und Suchfeld.

   Steht absichtlich am Ende von Abschnitt 6, damit diese Werte
   die margin-Angaben der Einzelregeln oben ueberschreiben. */

body[id^="c_tut_"] article > .body > p,
body[id^="c_tut_"] article > .body > ul,
body[id^="c_tut_"] article > .body > ol,
body[id^="c_tut_"] article > .body > dl,
body[id^="c_tut_"] article > .body > .tt-antwort,
body[id^="c_tut_"] article > .body > .note,
body[id^="c_tut_"] article > .body > p.tt-meta,
body[id^="c_tut_"] article > .body > p.tt-back {
    max-width: var(--tt-text);
    margin-left: 0;
    margin-right: 0;
}

/* Titel, Video, Bilder und Abbildungen nutzen den ganzen Rahmen,
   ebenfalls linksbuendig */
body[id^="c_tut_"] article > .topictitle1,
body[id^="c_tut_"] article > .body > p:has(iframe),
body[id^="c_tut_"] article > .body > p:has(video),
body[id^="c_tut_"] article > .body > p:has(img),
body[id^="c_tut_"] article > .body > figure,
body[id^="c_tut_"] article > .body > .fig {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}


/* ============================================================
   7. AKTIVE KARTE HERVORHEBEN
   ============================================================
   Zwei Wege, weil WebHelp den Klick abfaengt und die URL ueber
   die History-API setzt. Ein so geaendertes Fragment aktualisiert
   das Sprungziel des Dokuments NICHT, :target matcht dann nie.

   .tt-aktiv wird vom Fragment tt-aktive-karte.xml gesetzt und ist
   der Weg, der zuverlaessig funktioniert. Die :target-Regeln
   bleiben als Rueckfall fuer normale Ankernavigation, etwa wenn
   die Seite direkt mit einem Anker aufgerufen wird.

   Bewusst getrennte Regeln statt einer Selektorliste.
   ============================================================ */

@keyframes tt-hervorheben {
    0%   { box-shadow: 0 0 0 0    var(--tt-ring); }
    25%  { box-shadow: 0 0 0 10px var(--tt-ring); }
    100% { box-shadow: 0 0 0 0    var(--tt-ring); }
}

body#c_tipps_und_tricks .tt-karte.tt-aktiv {
    border-color: var(--tt-link);
    background-color: var(--tt-chip-bg);
    animation: tt-hervorheben 1.8s ease-out 0.5s 1;
}

body#c_tipps_und_tricks .tt-karte:target {
    border-color: var(--tt-link);
    background-color: var(--tt-chip-bg);
    animation: tt-hervorheben 1.8s ease-out 0.5s 1;
}

body#c_tipps_und_tricks .tt-karte.tt-aktiv > .title,
body#c_tipps_und_tricks .tt-karte.tt-aktiv > .sectiontitle {
    color: var(--tt-link);
}

body#c_tipps_und_tricks .tt-karte:target > .title,
body#c_tipps_und_tricks .tt-karte:target > .sectiontitle {
    color: var(--tt-link);
}

/* Trennlinien in der markierten Karte kraeftiger, damit die
   Tonung nicht flach wirkt */
body#c_tipps_und_tricks .tt-karte.tt-aktiv li,
body#c_tipps_und_tricks .tt-karte:target li {
    border-top-color: var(--tt-card-border);
}

@media (prefers-reduced-motion: reduce) {
    body#c_tipps_und_tricks .tt-karte.tt-aktiv,
    body#c_tipps_und_tricks .tt-karte:target {
        animation: none;
    }
}

/* Publikationstitel im Header ausblenden.
   Map-Titel ist gesetzt (füllt Browser-Tab und beseitigt
   "Cannot get the map title"-Warnungen), soll aber nicht
   sichtbar sein - Banner erfüllt die Funktion bereits. */
.wh_publication_title {
    display: none;
}