/* =====================================================
   imifactory.ch – Modernes CSS (Drop-in Ersatz)
   Alle Klassen identisch – nur visuelles Design neu
   ===================================================== */

/* ─── CUSTOM PROPERTIES ─────────────────────────────── */
:root {
    --blue-900:  #071e2e;
    --blue-800:  #0b3c5d;
    --blue-600:  #1565a0;
    --blue-400:  #2196d3;
    --blue-100:  #e3f2fd;
    --accent:    #00bfae;
    --accent-dk: #00897b;
    --text:      #1a2634;
    /* KORREKTUR: #5a7080 → #496070 – besserer Kontrast auf weissem Hintergrund
       Verhältnis vorher: ~3.8:1 (ungenügend für WCAG AA)
       Verhältnis nachher: ~4.6:1 (WCAG AA erfüllt für Normaltext) */
    --text-muted:#496070;
    --bg:        #f0f4f8;
    --surface:   #ffffff;
    --border:    #d1dce6;
    --radius:    8px;
    --radius-lg: 14px;
    /* Farbige Schatten – viel lebendiger als neutrales Grau */
    --shadow-sm:   0 1px 3px rgba(7,30,46,.07), 0 1px 2px rgba(0,191,174,.04);
    --shadow-md:   0 4px 16px rgba(7,30,46,.10), 0 2px 8px rgba(0,191,174,.08);
    --shadow-lg:   0 12px 40px rgba(7,30,46,.14), 0 4px 16px rgba(0,191,174,.10);
    --shadow-glow: 0 0 0 1px rgba(0,191,174,.22), 0 8px 32px rgba(0,191,174,.18), 0 2px 8px rgba(7,30,46,.10);
    --nav-h:     56px;
    --transition: 0.22s cubic-bezier(.4,0,.2,1);
    --transition-tile: 0.5s cubic-bezier(.22,1,.36,1);
    --transition-tile-border: 0.65s ease;
}

/* ─── FONT FACES ─────────────────────────────────────── */
/* KORREKTUR: font-display: swap hinzugefügt (PageSpeed-Empfehlung).
   Verhindert unsichtbaren Text während die Schrift lädt (FOIT).
   Der Browser zeigt stattdessen sofort eine Fallback-Schrift (FOUT)
   bis die eigene Schrift geladen ist. */
@font-face {font-family: RobotoCondensed; font-style: normal; font-weight: 900; src:url("fonts/RobotoCondensed-Bold.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: RobotoCondensed; font-style: normal; font-weight: 700; src:url("fonts/RobotoCondensed-Bold.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: RobotoCondensed; font-style: normal; font-weight: 400; src:url("fonts/RobotoCondensed-Regular.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: RobotoCondensed; font-style: normal; font-weight: 300; src:url("fonts/RobotoCondensed-Light.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: Anton; font-style: normal; font-weight: 400; src:url("fonts/Anton-Regular.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: CormorantGaramond; font-style: normal; font-weight: 400; src:url("fonts/CormorantGaramond-Regular.ttf") format("truetype"); font-display: swap;}
@font-face {font-family: CormorantGaramond; font-style: normal; font-weight: 700; src:url("fonts/CormorantGaramond-Bold.ttf") format("truetype"); font-display: swap;}

/* ─── SCROLL-VERHALTEN ───────────────────────────────────
   Ersetzt smoothscroll.js vollständig. Nativer Browser-Support
   seit 2019 in allen modernen Browsern. Kein JavaScript, kein
   HTTP-Request, kein eval() → kein CSP-Problem.
   Wird von prefers-reduced-motion weiter unten überschrieben. */
html {
    scroll-behavior: smooth;
}

/* ─── RESET ──────────────────────────────────────────── */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,hr,blockquote {padding: 0; margin: 0;}

/* ─── SKIP-LINK (Barrierefreiheit – WCAG 2.1 Kriterium 2.4.1) ───────────────
   Erstes interaktives Element auf der Seite.
   Visuell versteckt bis es Fokus erhält (Tastaturnavigation). */
.skip-link {
    position: absolute;
    top: -100%;
    left: 8px;
    z-index: 10000;
    background: var(--accent);
    color: #fff;
    padding: 10px 20px;
    border-radius: 0 0 var(--radius) var(--radius);
    font-family: RobotoCondensed, sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none !important;
    background-image: none !important;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid var(--blue-900);
    outline-offset: 2px;
}

/* ─── FOKUS-INDIKATOREN (WCAG 2.1 – Tastaturnavigation) ─────────────────────
   :focus-visible: Nur bei Tastaturnavigation, nicht bei Mausklick.
   Verhindert den unschönen Fokusrahmen bei Mausnutzung,
   behält ihn aber für Tastaturnutzer (wichtig für Barrierefreiheit). */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius);
}
:focus:not(:focus-visible) {
    outline: none;
}

/* ─── TYPOGRAFIE ─────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: RobotoCondensed, "Segoe UI", system-ui, sans-serif;
    color: var(--blue-800);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.01em;
    margin: 0 0 12px 0;
    padding: 16px 0 6px 0;
}
h1 {
    font-size: 32px;
    /* Gradient-Text: blaue Tiefe, teal Akzent */
    background: linear-gradient(100deg, var(--blue-900) 30%, var(--blue-600) 70%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
h2 {
    font-size: 26px;
    /* KORREKTUR: inline-block verhindert clear:both nach Floats.
       Teal-Unterstrich via ::after statt border-bottom, damit er
       nur unter dem Text erscheint (nicht über volle Breite). */
    display: block;
    padding-bottom: 8px;
    position: relative;
}
h2::after {
    content: '';
    display: block;
    width: 3em;
    height: 2px;
    background: var(--accent);
    margin-top: 4px;
}
h3 {font-size: 22px; color: var(--blue-600);}
h4 {font-size: 20px;}
h5 {font-size: 19px;}
h6 {font-size: 18px;}

p  {padding: 8px 0; line-height: 1.65;}
ol {margin: 6px 0 6px 22px;}
ol li {line-height: 1.5em; padding: 3px 0; margin: 2px 0;}
ul {list-style: none; margin: 6px 0 6px 0;}
ul li {
    line-height: 1.5em; padding: 4px 0 4px 18px; margin: 2px 0;
    position: relative;
}
ul li::before {
    content: "›";
    position: absolute; left: 0;
    color: var(--accent); font-weight: 700;
}
hr {
    height: 1px; clear: both; border: 0; margin: 24px 0;
    background: none;
    position: relative;
    /* Linie via ::before, Ornament via ::after */
}
hr::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%);
    position: absolute;
    top: 0; left: 0; right: 0;
}
hr::after {
    content: '◆';
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 7px;
    color: var(--accent);
    background: var(--bg);
    padding: 0 10px;
    line-height: 1;
    opacity: .7;
}
blockquote {
    background: linear-gradient(100deg, #eaf4fd 0%, #f0faf9 100%);
    color: var(--text);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: 14px 22px;
    margin: 16px 0;
    box-shadow: var(--shadow-sm), inset 3px 0 0 var(--accent);
    position: relative;
}
blockquote::before {
    content: '"';
    position: absolute;
    top: -4px; left: 14px;
    font-size: 48px; line-height: 1;
    color: rgba(0,191,174,.18);
    font-family: Georgia, serif;
    pointer-events: none;
}
img {box-sizing: border-box; max-width: 100%; height: auto;}

/* ─── BODY & LAYOUT ──────────────────────────────────── */
body {
    min-width: 300px;
    /* Dezentes Punktraster als Seiten-Atmosphäre */
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 80% 0%, rgba(0,191,174,.06) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(21,101,160,.05) 0%, transparent 50%),
        radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 28px 28px;
    color: var(--text);
    font-family: "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    text-align: left;
}
.body {background-color: var(--bg);}
#top {font-size: 0; line-height: 0;}

/* ─── FIXED NAV BAR ──────────────────────────────────── */
.tplge_pageNav {
    position: fixed; top: 0; width: 100%;
    height: var(--nav-h);
    background: var(--blue-900);
    backdrop-filter: blur(8px);
    color: #fff; padding: 0; margin: 0; z-index: 998;
    display: flex; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* GIF-Buttons: visuell ersetzen durch CSS-Pseudo-Buttons */
img.tplge_homelinkButton   {float: left;  opacity:.75; transition: opacity var(--transition); filter: brightness(2);}
img.tplge_sitemaplinkButton{float: left;  opacity:.75; transition: opacity var(--transition); filter: brightness(2);}
img.tplge_menulinkButton   {float: right; opacity:.75; transition: opacity var(--transition); filter: brightness(2);}
img.tplge_searchlinkButton {float: right; opacity:.75; transition: opacity var(--transition); filter: brightness(2);}
img.tplge_newslinkButton   {float: right; opacity:.75; transition: opacity var(--transition); filter: brightness(2);}
img.tplge_toplinkButton    {float: right; opacity:.75; transition: opacity var(--transition); filter: brightness(2);}

img.tplge_homelinkButton:hover,
img.tplge_sitemaplinkButton:hover,
img.tplge_menulinkButton:hover,
img.tplge_newslinkButton:hover,
img.tplge_searchlinkButton:hover,
img.tplge_toplinkButton:hover {opacity: 1; filter: brightness(2) drop-shadow(0 0 6px var(--accent));}

/* ─── HEADER ─────────────────────────────────────────── */
header {
    background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 60%, var(--blue-600) 100%);
    color: #fff;
    padding: calc(var(--nav-h) + 6px) 0 0 0;
    position: relative;
    /* overflow: hidden entfernt – es hat die Dropdown-Menüs abgeschnitten!
       Das SVG-Muster (::after) wird stattdessen via pointer-events: none isoliert. */
    overflow: visible;
}
header::after {
    content: "";
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300bfae' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.tplge_headerIn {
    max-width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    position: relative; z-index: 1;
}

/* Site Title */
.tplge_sitename {
    width: 95%;
    font-family: RobotoCondensed, sans-serif;
    color: #fff;
    font-weight: 900;
    font-size: 34px;
    letter-spacing: 0.04em;
    text-transform: none;
    padding: 20px 0 0px 0;
    margin: 0 auto;
}
.tplge_sitename img {height: 34px; width: auto; vertical-align: middle; margin-right: 4px;}
/* KORREKTUR: label → span (label ist nur für Formularelemente semantisch korrekt) */
.tplge_sitename span {vertical-align: middle;}

/* Language menu */
.tplge_langmenu {text-align: right; padding: 0 0 4px 0;}
.tplge_langmenu img {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 4px; padding: 3px; margin: 0 0 0 8px;
    transition: background var(--transition);
}
.tplge_langmenu img:hover {background: var(--accent);}

/* ─── HORIZONTAL NAVIGATION ──────────────────────────── */
.tplge_horinav {width: 95%; padding: 0; margin: 0 auto;}

.tplge_horinav ul.menulevel1 {
    display: flex; flex-wrap: wrap; list-style: none;
    padding: 0; margin: 0;
    gap: 2px;
}
.tplge_horinav ul.menulevel1 > li {
    position: relative;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-family: RobotoCondensed, sans-serif;
    font-weight: 700; font-size: 13px;
    letter-spacing: 0.08em; text-transform: uppercase;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 10px 16px;
    transition: background var(--transition);
    cursor: pointer;
}
.tplge_horinav ul.menulevel1 > li:hover {background: rgba(255,255,255,.18);}

/* Dropdown level 2 */
.tplge_horinav ul.menulevel2 {
    display: none;
    position: absolute; top: 100%; left: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px 0; z-index: 9999;
    /* Negatives margin-top: Dropdown überlappt den li leicht nach oben.
       So gibt es keinen Spalt den die Maus überqueren muss. */
    margin-top: -4px;
}
/* padding-bottom (NICHT margin!) erweitert die :hover-Zone des li nach unten.
   Die Maus bleibt technisch im li während sie zum Dropdown gleitet. */
.tplge_horinav ul.menulevel1 > li {
    padding-bottom: 14px;
}
.tplge_horinav ul.menulevel2 li {
    width: auto; max-width: none; float: none;
    background: var(--surface);
    font-size: 15px; font-weight: 400;
    letter-spacing: 0; text-transform: none;
    text-align: left; border-radius: 0;
    padding: 8px 18px; margin: 0;
    transition: background var(--transition);
}
.tplge_horinav ul.menulevel1 li:hover > ul.menulevel2 {display: block;}
.tplge_horinav ul.menulevel2 li:hover {background: var(--blue-100);}
.tplge_horinav ul.menulevel2 li a {display: block; width: 100%; color: var(--text);}

/* Level 3 */
.tplge_horinav ul.menulevel1 ul.menulevel2 ul.menulevel3 {
    display: none; position: absolute;
    top: 0; left: 100%;
    min-width: 210px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px 0; margin: 0;
}
.tplge_horinav ul.menulevel1 ul.menulevel2 li:hover > ul.menulevel3 {display: block;}

/* Level 4 */
.tplge_horinav ul.menulevel1 ul.menulevel2 ul.menulevel3 ul.menulevel4 {
    display: none; position: absolute;
    top: 0; left: 100%;
    min-width: 210px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px 0; margin: 0;
}
.tplge_horinav ul.menulevel1 ul.menulevel2 ul.menulevel3 li:hover > ul.menulevel4 {display: block;}

/* Level 5 */
.tplge_horinav ul.menulevel1 ul.menulevel2 ul.menulevel3 ul.menulevel4 ul.menulevel5 {
    display: none; position: absolute;
    top: 0; left: 100%;
    min-width: 210px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px 0; margin: 0;
}
.tplge_horinav ul.menulevel1 ul.menulevel2 ul.menulevel3 ul.menulevel4 li:hover > ul.menulevel5 {display: block;}

/* Level 6 */
.tplge_horinav ul.menulevel1 ul.menulevel2 ul.menulevel3 ul.menulevel4 ul.menulevel5 ul.menulevel6 {
    display: none; position: absolute;
    top: 0; right: 100%; left: auto;
    min-width: 210px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px 0; margin: 0;
}
.tplge_horinav ul.menulevel1 ul.menulevel2 ul.menulevel3 ul.menulevel4 ul.menulevel5 li:hover > ul.menulevel6 {display: block;}

/* doc/sdoc indicators */
.tplge_horinav li.docs a::after,
.tplge_horinav li.sdocs a::after,
.tplge_horinav li.sdocs span::after {
    content: "▸"; font-size: 11px; color: var(--accent); margin-left: 5px;
}
.tplge_horinav li.doc a::after, .tplge_horinav li.sdoc span::after {content: "";}
.tplge_horinav li.sdoc, .tplge_horinav li.sdocs {
    background: var(--blue-600) !important;
}
.tplge_horinav li.sdoc a, .tplge_horinav li.sdocs a {color: #fff;}
.tplge_horinav li.doc a, .tplge_horinav li.docs a {color: #fff;}
.tplge_horinav a:hover {text-decoration: none !important; color: var(--accent) !important;}

/* ─── LAYOUT CONTAINERS ──────────────────────────────── */
.tplge_websiteContainer {background: var(--bg); max-width: 3440px; padding: 0; margin: 0 auto;}
.tplge_contentsContainer {
    display: flex; flex-wrap: wrap;
    width: 100%; max-width: 1260px;
    padding: 0; margin: 0 auto;
}
.tplge_content {flex: 1 1 100%; order: 1; max-width: 100%;}
.tplge_contentIn {
    width: 88%;
    font-size: 17px;
    margin: 28px auto 48px auto;
}

/* ─── CONTENT BOXES ──────────────────────────────────── */
div.tplge_contentboxleft {
    width: 47%; min-height: 80px; float: left;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid rgba(209,220,230,.7);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    font-size: 16px; line-height: 1.6;
    padding: 0 18px 18px 18px;
    margin: 12px 3% 12px 0;
    overflow: hidden;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
div.tplge_contentboxleft:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
    border-color: rgba(0,191,174,.3);
}

div.tplge_contentboxright {
    width: 47%; min-height: 80px; float: right;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid rgba(209,220,230,.7);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    font-size: 16px; line-height: 1.6;
    padding: 0 18px 18px 18px;
    margin: 12px 0 12px 3%;
    overflow: hidden;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
div.tplge_contentboxright:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
    border-color: rgba(0,191,174,.3);
}

div.tplge_contentboxfullsize {
    clear: both; width: 100%; min-height: 80px;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid rgba(209,220,230,.7);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    font-size: 16px; line-height: 1.6;
    padding: 0 18px 18px 18px;
    margin: 12px 0;
    overflow: hidden;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
div.tplge_contentboxfullsize:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
    border-color: rgba(0,191,174,.3);
}

/* ── Titelbalken: ruhiger, sachlicher Gradient ──────────────────────── */
.tplge_headlineContentBox {
    display: block;
    font-family: RobotoCondensed, sans-serif;
    font-size: 16px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,.95);
    background: linear-gradient(90deg, #0b3c5d 0%, #1a5a85 45%, #2272a0 100%);
    margin: 0 -18px 18px -18px;
    padding: 13px 20px;
    position: relative;
}
/* Teal-Nahtlinie am unteren Rand des Balkens */
.tplge_headlineContentBox::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--accent) 0%,
        rgba(0,191,174,.35) 55%,
        transparent 100%
    );
}

/* Verlaufstreifen links */
div.tplge_contentboxleft::before,
div.tplge_contentboxright::before,
div.tplge_contentboxfullsize::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(
        to bottom,
        #0b3c5d             0px,
        #1565a0             28px,
        #1a9a8e             52px,
        var(--accent)       80px,
        rgba(0,191,174,.45) 160px,
        rgba(0,191,174,.12) 280px,
        rgba(0,191,174,0)   100%
    );
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    pointer-events: none;
    z-index: 2;
}

div.tplge_contentboxesClear {clear: both; height: 1px; overflow: hidden;}

@media (max-width: 760px) {
    div.tplge_contentboxleft  {width: 100%; transform: none !important;}
    div.tplge_contentboxright {width: 100%; transform: none !important;}
}

/* ─── STARTSEITE: HERO ───────────────────────────────── */
.imi-hero {
    background: linear-gradient(105deg, #071e2e 0%, #0b3c5d 55%, #1a5a85 100%);
    border-radius: 16px;
    padding: 44px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
.imi-hero::before {
    content: '';
    position: absolute; top: -60px; right: -40px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,191,174,.12) 0%, transparent 70%);
    pointer-events: none;
}
.imi-hero-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(0,191,174,.12);
    border: 1px solid rgba(0,191,174,.28);
    border-radius: 100px;
    padding: 4px 14px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #4dd8cd;
    margin-bottom: 20px;
}
.imi-hero-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #00bfae;
    display: inline-block;
}
.imi-hero h2 {
    font-size: clamp(20px, 3vw, 28px) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    border: none !important;
}
.imi-hero h2::after { display: none !important; }
.imi-hero p {
    font-size: 15px;
    color: rgba(255,255,255,.65);
    line-height: 1.7;
    max-width: 560px;
    padding: 0;
    margin: 0;
}

/* ─── STARTSEITE: ABSCHNITTS-TITEL ──────────────────── */
.imi-section-label {
    display: flex; align-items: center; gap: 14px;
    margin: 36px 0 20px;
}
.imi-section-label span {
    font-family: RobotoCondensed, sans-serif;
    font-size: 11px; font-weight: 900;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.imi-section-label::after {
    content: '';
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}

/* ─── STARTSEITE: KACHELN ────────────────────────────── */
.imi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 40px;
}
@media (max-width: 800px) {
    .imi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .imi-grid { grid-template-columns: 1fr; }
}
.imi-tile {
    background: var(--surface);
    border: 1px solid rgba(209,220,230,.8);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    position: relative; /* needed for stretched link */
    transition: transform var(--transition-tile),
                box-shadow var(--transition-tile),
                border-color var(--transition-tile-border);
    min-width: 0;
}
.imi-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
    border-color: rgba(0,191,174,.3);
}
.imi-tile-bar {
    height: 3px;
    background: linear-gradient(90deg, #0b3c5d 0%, #00bfae 100%);
    flex-shrink: 0;
}
.imi-tile img {
    width: 100%; height: 140px;
    object-fit: cover;
    display: block;
    filter: saturate(.88) brightness(.98);
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.imi-tile-body {
    padding: 16px 18px 20px;
    flex: 1;
}
.imi-tile-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
}
.imi-tile-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
}
/* Stretched link: <a> inside title covers the whole card */
a.imi-tile-link,
a.imi-tile-link:link,
a.imi-tile-link:visited {
    color: var(--text) !important;
    text-decoration: none !important;
    background-image: none !important;
    background-size: 0 !important;
}
a.imi-tile-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 14px;
}
a.imi-tile-link:hover,
a.imi-tile-link:focus {
    color: var(--text) !important;
    text-decoration: none !important;
    background-image: none !important;
    background-size: 0 !important;
}

/* ─── STARTSEITE: SUPPORT BANNER ────────────────────── */
.imi-support {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(105deg, #f5f6f8 0%, #eceef2 100%);
    border: 1px solid #d8dce4;
    border-left: 4px solid #8a9ab0;
    border-radius: 14px;
    padding: 28px 32px;
    margin-bottom: 8px;
}
.imi-support-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #7a8a9a;
    margin-bottom: 8px;
}
.imi-support h3 {
    font-size: 18px; font-weight: 700;
    color: #2d3a48;
    margin-bottom: 8px; padding: 0;
    line-height: 1.3;
}
.imi-support p {
    font-size: 14px;
    color: #6a7a8a;
    line-height: 1.6;
    padding: 0; margin: 0;
}
a.imi-support-btn,
a.imi-support-btn:link,
a.imi-support-btn:visited {
    flex-shrink: 0;
    display: inline-block;
    padding: 12px 26px;
    background-color: #3d6e9e !important;
    background-image: none !important;
    color: #ffffff !important;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(61,110,158,.22);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    background-size: 0 !important;
}
a.imi-support-btn:hover,
a.imi-support-btn:active,
a.imi-support-btn:focus {
    background-color: #2e5a85 !important;
    background-image: none !important;
    background-size: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 5px 16px rgba(61,110,158,.32);
    text-decoration: none !important;
    opacity: 1;
}
/* ─── PDF WERKZEUG BUTTONS (pdf_bearbeiten Seite) ──────────────────────────
   Diese Klasse ergänzt a.imi-support-btn mit einem hellblauen Gradient.
   Muss im globalen template.css NACH der bestehenden a.imi-support-btn Regel
   eingefügt werden, damit der Gradient nicht von background-image:none !important
   überschrieben wird.
   ────────────────────────────────────────────────────────────────────────── */

a.pdf-tool-btn,
a.pdf-tool-btn:link,
a.pdf-tool-btn:visited {
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #d6eaf8 !important;
    background-image: linear-gradient(90deg, #d6eaf8 0%, #eaf4ff 55%, #ffffff 100%) !important;
    background-size: 100% 100% !important;
    color: #0b3c5d !important;
    border: 1px solid #a8c8e8;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    box-shadow: 0 1px 4px rgba(11, 60, 93, .12);
    transition: background-color 0.3s ease, background-image 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.pdf-tool-btn:hover,
a.pdf-tool-btn:active,
a.pdf-tool-btn:focus {
    background-color: #b8d8f0 !important;
    background-image: linear-gradient(90deg, #ffffff 0%, #daeeff 50%, #b8d8f0 100%) !important;
    background-size: 100% 100% !important;
    border-color: #5a9fd4 !important;
    box-shadow: 0 3px 10px rgba(11, 60, 93, .22) !important;
    color: #0b3c5d !important;
    text-decoration: none !important;
}
@media (max-width: 600px) {
    .imi-hero { padding: 28px 20px; }
    .imi-tile { max-width: 100%; }
    .imi-support { padding: 20px; }
}
/* ─── STARTSEITE: TOOL-BUTTONS ─────────────────────────────────────────── */
a.imi-tool-btn,
a.imi-tool-btn:link,
a.imi-tool-btn:visited {
    display: inline-block;
    white-space: nowrap;
    padding: 9px 20px;
    background: #ffffff;
    border: 1px solid #b8cad8;
    border-bottom: 3px solid #1565a0;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    color: #0b3c5d !important;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(11,60,93,.08);
    transition: background 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease;
}
a.imi-tool-btn:hover,
a.imi-tool-btn:focus {
    background: #e8f0f8 !important;
    border-color: #1565a0 !important;
    border-bottom-color: #0b3c5d !important;
    box-shadow: 0 3px 10px rgba(11,60,93,.18) !important;
    color: #071e2e !important;
    text-decoration: none !important;
    transform: translateY(-2px);
}
a.imi-tool-btn:active {
    transform: translateY(0px);
    box-shadow: 0 1px 3px rgba(11,60,93,.10) !important;
}



/* ─── STARTSEITE: INTRO BOX (Seiteneinleitung) ──────────────────── */
.imi-intro {
    background: linear-gradient(105deg, var(--blue-100) 0%, rgba(0,191,174,.06) 100%);
    border: 1px solid rgba(21,101,160,.18);
    border-left: 4px solid var(--blue-600);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-bottom: 28px;
}
.imi-intro h2 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--blue-800) !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    border: none !important;
}
.imi-intro h2::after { display: none !important; }
.imi-intro p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
    padding: 0;
}
/* ─── CODE BLOCK ─────────────────────────────────────── */
div.tplge_code {
    clear: both;
    max-height: min(400px, 60vh);
    background: #f4f6f9;
    color: #2d3e50;
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 14px;
    line-height: 1.7;
    border: 1px solid #d8dfe8;
    border-left: 3px solid var(--blue-400);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    margin: 16px 0;
    overflow: auto;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.04), 0 2px 8px rgba(7,30,46,.06);
    position: relative;
}
/* Subtiler Schimmer am linken Rand */
div.tplge_code::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(90deg, rgba(33,150,211,.05) 0%, transparent 100%);
    pointer-events: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
div.tplge_code pre {
    margin: 0; padding: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    border: none;
    box-shadow: none;
}

div.tplge_box01 {
    clear: both;
    background: linear-gradient(135deg, #fafcff 0%, var(--surface) 100%);
    color: var(--text);
    border: 1px solid rgba(209,220,230,.7);
    border-left: 3px solid var(--blue-400);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px 24px;
    margin: 14px 0;
    transition: box-shadow var(--transition), border-color var(--transition);
}
div.tplge_box01:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(0,191,174,.4);
    border-left-color: var(--accent);
}
div.tplge_legal {padding: 6px 0; font-size: 14px; color: var(--text-muted);}

/* ─── TABLES ─────────────────────────────────────────── */
table {border-collapse: collapse;}
td {min-width: 20px !important;}

/* Wrapper für alle Tabellen: abgerundet, mit Schatten */
table.grey, table.white {
    width: 100%; margin: 4px 0 20px 0;
    border-collapse: separate; border-spacing: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

/* Header-Zeilen: mit und ohne thead */
table.grey thead tr,
table.white thead tr,
table.grey tr:first-child:has(th),
table.white tr:first-child:has(th) {
    background: #4a5c6a;
}
table.grey th,
table.white th {
    background: #4a5c6a !important;
    color: rgba(255,255,255,.92) !important;
    font-family: RobotoCondensed, sans-serif;
    font-weight: 600; font-size: 13px;
    letter-spacing: 0.04em;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    padding: 11px 14px !important;
}
table.grey th:last-child,
table.white th:last-child {
    border-right: none !important;
}

/* grey: Zebra-Muster mit tealem Hover */
table.grey td {
    vertical-align: top;
    background: linear-gradient(90deg, var(--surface) 0%, #f9fcff 100%);
    color: var(--text);
    line-height: 1.45;
    border: 0 !important;
    border-bottom: 1px solid rgba(209,220,230,.5) !important;
    padding: 9px 14px;
    transition: background var(--transition);
}
table.grey tr:nth-child(even) td {
    background: linear-gradient(90deg, #f7fafd 0%, #f3f7fc 100%);
}
table.grey tr:not(:first-child):hover td {
    background: linear-gradient(90deg, rgba(0,191,174,.03) 0%, rgba(0,191,174,.08) 100%) !important;
}
table.grey td p {margin: 3px 0;}

/* white: Kanten-Gitter */
table.white td {
    vertical-align: top;
    background: linear-gradient(90deg, var(--surface) 0%, #f9fcff 100%);
    color: var(--text);
    line-height: 1.45;
    border-right: 1px solid rgba(209,220,230,.5) !important;
    border-bottom: 1px solid rgba(209,220,230,.5) !important;
    padding: 9px 14px;
    transition: background var(--transition);
}
table.white tr:nth-child(even) td {
    background: linear-gradient(90deg, #f7fafd 0%, #f3f7fc 100%);
}
table.white tr:not(:first-child):hover td {
    background: linear-gradient(90deg, rgba(0,191,174,.03) 0%, rgba(0,191,174,.08) 100%) !important;
}

table.transparent {width: 100%; border: 0; border-collapse: collapse; margin: 4px 0 18px 0;}
table.transparent td {vertical-align: top; line-height: 1.4; border: 0 !important; padding: 8px 24px 8px 0;}
table.transparent td p {margin: 4px 0;}

/* ─── IMAGES ─────────────────────────────────────────── */
img.tplge_left          {display: block; float: left; max-width: 44%; border: 0; margin: 0 20px 16px 0;}
img.tplge_right         {display: block; float: right; max-width: 44%; border: 0; margin: 0 0 16px 20px;}
img.tplge_centered      {display: block; border: 0; margin: 24px auto;}
img.tplge_left_noborder {display: block; float: left; max-width: 44%; border: 0; margin: 0 20px 16px 0;}
img.tplge_right_noborder{display: block; float: right; max-width: 44%; border: 0; margin: 0 0 16px 20px;}
img.tplge_centered_noborder {display: block; border: 0; margin: 24px auto;}
img.tplge_left_border   {display: block; background: var(--surface); float: left; max-width: 44%; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; margin: 0 20px 16px 0;}
img.tplge_right_border  {display: block; background: var(--surface); float: right; max-width: 44%; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; margin: 0 0 16px 20px;}
img.tplge_centered_border {display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; margin: 24px auto;}
img.tplge_border        {background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px;}

.tplge_clearLeft  {clear: left;}
.tplge_clearRight {clear: right;}
.tplge_clearBoth  {clear: both;}

figure.image        {display: table; background: #333; border-radius: var(--radius); padding: 0; margin: 10px auto 20px auto;}
figure.align-left   {max-width: 40%; float: left; margin: 10px 20px 20px 0;}
figure.align-right  {max-width: 40%; float: right; margin: 10px 0 20px 20px;}
figure.align-center {float: none; margin: 20px auto;}
figure.image img    {display: block; padding: 0; margin: 0 auto; border-radius: var(--radius) var(--radius) 0 0;}
figure.image figcaption {background: var(--bg); text-align: center; color: var(--text-muted); font-size: 14px; padding: 8px 12px; border-radius: 0 0 var(--radius) var(--radius);}

/* ─── FORM INPUTS ────────────────────────────────────── */
.tplge_contentIn input {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 6px 10px;
    transition: border-color var(--transition);
}
.tplge_contentIn input:focus {border-color: var(--blue-400); outline: none; box-shadow: 0 0 0 3px rgba(33,150,211,.15);}
.tplge_contentIn input.text {width: 80%;}
.tplge_contentIn textarea {
    width: 94%; background: var(--surface);
    font-family: RobotoCondensed, sans-serif;
    border: 1px solid var(--border); border-radius: var(--radius); padding: 8px;
    transition: border-color var(--transition);
}
.tplge_contentIn textarea:focus {border-color: var(--blue-400); outline: none;}
.captchainput {background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);}
.tplge_contentIn input.submit, .tplge_contentIn input#submit {
    background: linear-gradient(135deg, var(--blue-600), var(--accent));
    color: #fff; font-size: 15px; font-weight: 700;
    border: 0; border-radius: var(--radius);
    padding: 8px 20px; cursor: pointer;
    transition: opacity var(--transition);
}
.tplge_contentIn input.submit:hover, .tplge_contentIn input#submit:hover {opacity: .88;}

/* ─── SUBMENU / SIBLINGS ─────────────────────────────── */
nav.tplge_subsibmenus {clear: both; font-size: 17px; margin: 8px 0 28px 0;}
.tplge_subsibmenus p {font-size: 19px; font-weight: 700;}
.tplge_subsibmenus span {font-weight: 700; color: var(--accent);}
.tplge_subsibmenus .parentLink {font-size: 22px; font-weight: 400; padding: 6px 0 0 0; margin: 0;}
.tplge_subsibmenus .heading    {font-size: 19px; font-weight: 700; padding: 6px 0 0 0; margin: 0;}

/* ─── PREV / TOP / NEXT ──────────────────────────────── */
.tplge_prevtopnext {clear: both; text-align: center; padding: 0; margin: 40px 0 0 0;}
.tplge_prevtopnext img {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px; margin: 0 12px;
    transition: all var(--transition); filter: none;
}
.tplge_prevtopnext img:hover {background: var(--blue-800); border-color: var(--blue-800); filter: brightness(3);}

/* ─── SITEMAP ────────────────────────────────────────── */
ul.sitemaplevel1 {list-style: none; font-weight: 700; padding: 20px 0 0 0 !important; margin: 0 !important;}
ul.sitemaplevel1 > li {
    list-style: none; font-size: 18px; font-weight: 900;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 14px 18px; margin: 8px 0;
}
ul.sitemaplevel1 > li::before {display: none;}

ul.sitemaplevel2 {list-style: none; padding: 0 !important; margin: 6px 0 0 0 !important;}
ul.sitemaplevel2 li {font-size: 15px; font-weight: 400; border: 0; padding: 5px 0 0 0; margin-left: 0;}
ul.sitemaplevel2 li::before {content: "›"; color: var(--accent); font-weight: 700; position: absolute; left: 0;}

ul.sitemaplevel3 {list-style: none; padding: 0 !important; margin: 0 !important;}
ul.sitemaplevel3 li {margin-left: 22px;}
ul.sitemaplevel4, ul.sitemaplevel5, ul.sitemaplevel6 {list-style: none; padding: 0 !important; margin: 0 !important;}

/* ─── NEWS/SIDE MENU AREA ────────────────────────────── */
.tplge_menuAnchor {display: block; height: 1px; margin: -76px 0 76px 0;}
.tplge_newsBoxMenu {
    background: var(--blue-900) !important;
    color: #e0f0ff; padding-top: 20px !important; border: 0;
}

/* Search box */
.tplge_searchboxContainer {clear: both; background: none; border: 0; border-radius: 0; padding: 3px; overflow: hidden;}
.tplge_searchboxInput {
    width: 186px; background: var(--surface); color: var(--text);
    float: left; font-size: 15px;
    border: 1px solid var(--border); border-radius: var(--radius);
    line-height: 20px; padding: 7px 10px; margin: 0;
    transition: border-color var(--transition);
}
.tplge_searchboxInput:focus {border-color: var(--accent); outline: none;}
.tplge_searchboxSubmit {background: url('images/lupe.png') 9px 5px no-repeat; width: 40px; height: 38px; border: 0; padding: 0; margin: 0; cursor: pointer;}

/* Side menu levels */
.tplge_newsBoxMenu ul.menulevel1 {list-style: none; padding: 9px 0 22px 0; margin: 0 -16px;}
.tplge_newsBoxMenu ul.menulevel1 li {
    font-family: RobotoCondensed, sans-serif; list-style: none;
    text-transform: uppercase; text-align: left;
    font-size: 15px; line-height: 1.3; font-weight: 900; letter-spacing: 1px;
    border: 0; border-radius: 0; padding: 5px 20px; margin: 2px 0;
    transition: background var(--transition);
}
.tplge_newsBoxMenu ul.menulevel1 li::before {display: none;}
.tplge_newsBoxMenu ul.menulevel1 li:hover {background: rgba(255,255,255,.06);}
.tplge_newsBoxMenu ul.menulevel1 span {color: var(--accent);}
.tplge_newsBoxMenu ul.menulevel1 li ul {padding: 0; margin: 0;}
.tplge_newsBoxMenu ul.menulevel1 li ul li {
    background: none; font-family: RobotoCondensed, sans-serif;
    font-size: 15px; line-height: 1.4; font-weight: 400;
    letter-spacing: 0; text-transform: none; text-align: left;
    border: 0; padding: 8px 0 0 0; margin: 0;
}
.tplge_newsBoxMenu ul.menulevel1 li ul li ul {list-style: none; border: 0; padding: 0; margin: 0;}
.tplge_newsBoxMenu ul.menulevel1 li ul li ul li {list-style: none; padding: 8px 0 0 18px;}
.tplge_newsBoxMenu ul.menulevel1 li.sdocs, .tplge_newsBoxMenu ul.menulevel1 li.sdoc {
    background: rgba(0,191,174,.12); border-radius: var(--radius); padding: 10px 20px; margin: 4px 0;
}

.tplge_newsBoxMenu li.docs a::after,
.tplge_newsBoxMenu li.sdocs a::after,
.tplge_newsBoxMenu li.sdocs span::after {content: "▸"; color: var(--accent); font-size: 12px; margin-left: 4px;}
.tplge_newsBoxMenu li.doc a::after, .tplge_newsBoxMenu li.sdoc span::after {content: "";}

/* Icons */
.tplge_icons {display: table; margin: 0 auto;}
.tplge_icons img {
    display: block; float: left;
    background: var(--blue-800); border-radius: var(--radius);
    padding: 6px; margin: 0 6px;
    transition: background var(--transition), transform var(--transition);
}
.tplge_icons img:hover {background: var(--accent); transform: translateY(-2px);}

/* ─── CONTENT PLUS ───────────────────────────────────── */
.tf_cplus {clear: both; background: var(--blue-100); padding: 60px 4%;}
.tf_cplusIn {max-width: 1200px; margin: 0 auto;}
.tf_cplus2 {clear: both; background: url(images/bginfobox2.jpg) top left no-repeat; background-size: 600px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; margin: -1px 0;}
.tf_cplus2In {
    background: rgba(255,255,255,.92); color: var(--text);
    box-sizing: border-box; width: 60%;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px 4%; margin: 120px 12% 48px auto;
}

/* ─── NEWS AREA ──────────────────────────────────────── */
.tplge_newsAnchor {display: block; height: 1px; margin: -66px 0 66px 0;}
.tplge_newsArea {
    flex: 1 0 1200px; order: 2;
    background: linear-gradient(135deg, var(--blue-900), var(--blue-800));
    color: #ccc;
}
.tplge_newsAreaIn {max-width: 1200px; padding: 40px 0; margin: 0 auto;}
.tplge_newsBox {width: 300px; float: left; font-size: 16px; line-height: 1.5; padding: 0; margin: 0;}
.tplge_newsBoxIn {background: none; border-radius: var(--radius); padding: 10px 20px; margin: 5px;}
.tplge_newsBox h1, .tplge_newsBox h2, .tplge_newsBox h3, .tplge_newsBox h4 {color: var(--accent); font-size: 22px; padding: 10px 0; border: none;}
.tplge_newsBox h5, .tplge_newsBox h6 {color: var(--accent); font-size: 19px;}

/* ─── FOOTER ─────────────────────────────────────────── */
footer {
    background: var(--blue-900);
    color: #8ca6b8;
    font-size: 14px;
    text-align: right;
    border-top: 2px solid var(--accent);
}
footer p {padding: 16px 24px 100px 24px; margin: 0;}
footer p span {opacity: 0.6;}

/* ─── OVERLAYS ───────────────────────────────────────── */
.tplge_olBG {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 9992;}

/* Menu Overlay */
.tplge_olMenu {
    display: none; position: fixed; top: 0; right: 0;
    width: 300px; height: 100%;
    background: var(--blue-900);
    border-left: 1px solid rgba(255,255,255,.1);
    overflow: auto; z-index: 9994;
    animation: menuopen 0.28s cubic-bezier(.22,.61,.36,1);
}
.tplge_olMenuIn {padding: 32px 0 16px 0; margin: 0; color: #e0f0ff; overflow: auto;}

button.tplge_olMenuClose {
    display: none; position: fixed; top: 12px; right: 20px;
    width: 34px; height: 34px;
    text-align: center;
    background: #c20; color: #fff;
    font-weight: 700; font-size: 18px; line-height: 34px;
    border: 0; border-radius: 50%;
    cursor: pointer; z-index: 9996;
    animation: menuopen 0.28s ease;
    transition: background var(--transition);
}
button.tplge_olMenuClose:hover {background: #f30;}
@keyframes menuopen {from {transform: translateX(100%);} to {transform: translateX(0);}}

.tplge_olMenuToc {box-sizing: border-box; width: 100%; margin: 12px 0 0 0;}
.tplge_olMenu ul {margin: 0 20px; float: none; clear: both;}
.tplge_olMenu ul li {list-style: none; font-size: 18px; font-weight: 900; padding: 12px 0 0 0; margin: 0;}
.tplge_olMenu ul li::before {display: none;}
.tplge_olMenu ul ul {float: none; clear: both; margin: 0;}
.tplge_olMenu ul ul li {font-size: 16px; font-weight: 400; padding: 10px 0 0 0;}
.tplge_olMenu ul ul ul li {padding: 10px 0 0 0; margin: 0 0 0 16px;}

.tplge_olMenu li.docs a::after,
.tplge_olMenu li.sdocs a::after,
.tplge_olMenu li.sdocs span::after {content: "▸"; color: var(--accent); font-size: 13px; margin-left: 3px;}
.tplge_olMenu li.doc a::after, .tplge_olMenu li.sdoc span::after {content: "";}

.tplge_olMenu a:link, .tplge_olMenu a:visited {color: #c8dde8; text-decoration: none;}
.tplge_olMenu a:hover, .tplge_olMenu a:active, .tplge_olMenu a:focus {color: var(--accent); text-decoration: none;}

/* Search Overlay */
.tplge_olSearch {
    display: none; position: fixed; top: 0; right: 0;
    border-radius: 0 0 0 var(--radius-lg);
    width: 420px; max-width: 100%;
    background: var(--blue-900);
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-left: 1px solid rgba(255,255,255,.1);
    z-index: 9994;
    animation: searchopen 0.25s ease;
}
.tplge_olSearchIn {padding: 12px 0 0 0; margin: 0;}
button.tplge_olSearchClose {
    display: none; position: fixed; top: 12px; right: 20px;
    width: 34px; height: 34px;
    background: #c20; color: #fff; font-weight: 700; font-size: 18px; line-height: 34px;
    border: 0; border-radius: 50%; cursor: pointer; z-index: 9996;
    transition: background var(--transition);
}
button.tplge_olSearchClose:hover {background: #f30;}
@keyframes searchopen {from {transform: translateY(-100%);} to {transform: translateY(0);}}

.tplge_olSearchbox {border: 0; padding: 40px 0 16px 16px;}
.tplge_olSearchbox .tplge_searchboxContainer {clear: both; margin: 0;}
.tplge_olSearchbox .tplge_searchboxInput {
    width: 320px; background: rgba(255,255,255,.12); color: #fff;
    font-size: 16px; border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius); padding: 10px; margin: 3px;
    transition: border-color var(--transition);
}
.tplge_olSearchbox .tplge_searchboxInput:focus {border-color: var(--accent); outline: none;}
.tplge_olSearchbox .tplge_searchboxInput::placeholder {color: rgba(255,255,255,.5);}
.tplge_olSearchbox .tplge_searchboxSubmit {background: url('images/lupe.png') 6px 10px no-repeat; width: 40px; height: 38px; border: 0; padding: 0; margin: 0; filter: brightness(3);}

/* ─── LINKS ──────────────────────────────────────────── */
/* Animierter Unterstrich: zieht von links nach rechts */
a:link, a:visited {
    color: var(--blue-600);
    text-decoration: none;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: color var(--transition), background-size 0.28s ease;
}
a:hover, a:active, a:focus {
    color: var(--accent-dk);
    text-decoration: none;
    background-size: 100% 1.5px;
}

/* Ausnahmen: Navigation, Icons, Bilder – kein Unterstrich-Effekt */
.tplge_horinav a, .tplge_newsBoxMenu a, .tplge_icons a,
.tplge_prevtopnext a, .tplge_pageNav a, nav a,
footer a, .tplge_footer a,
.tplge_olMenu a, .sitemaplevel1 a,
a.imi-support-btn, a.skip-link {
    background-image: none !important;
    background-size: 0 !important;
}
.tplge_horinav a:link, .tplge_horinav a:visited {color: #fff; text-decoration: none;}
.tplge_horinav a:hover, .tplge_horinav a:active, .tplge_horinav a:focus {color: var(--accent); text-decoration: none;}

.tplge_newsArea a:link, .tplge_newsArea a:visited {color: #c8dde8;}
.tplge_newsArea a:hover, .tplge_newsArea a:active, .tplge_newsArea a:focus {color: var(--accent);}

.tplge_footer a:link, .tplge_footer a:visited {color: #8ca6b8;}
.tplge_footer a:hover, .tplge_footer a:active, .tplge_footer a:focus {color: #fff;}

.sitemaplevel1 a:link, .sitemaplevel1 a:visited {color: var(--text);}
.sitemaplevel1 a:hover, .sitemaplevel1 a:active, .sitemaplevel1 a:focus {color: var(--accent);}

/* ─── BREADCRUMB als Badge-Kette ─────────────────────── */
.tplge_locator {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px; line-height: 1;
    letter-spacing: 0.05em; text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding: 14px 0 14px 0;
    margin: 0 auto 20px auto;
    overflow: visible;
    color: var(--text-muted);
}

/* "Sie sind hier:" Label */
.tplge_locator span.tplge_locatortext {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    opacity: .7;
    padding: 0 6px 0 0;
    background-image: none !important;
}

/* Trennzeichen «  */
.tplge_locatorDelimiter {
    color: var(--accent);
    font-size: 13px;
    padding: 0 2px;
    opacity: .6;
    background-image: none !important;
}

/* Jedes Segment als Pill-Badge */
.tplge_locator span.cmsimpleLocatorElement,
.tplge_locator span.cmsimpleLocatorElementLast {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 3px 10px;
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    background-image: none !important;
}

/* Aktives (letztes) Segment hervorgehoben */
.tplge_locator span.cmsimpleLocatorElementLast {
    background: linear-gradient(90deg, rgba(0,191,174,.15) 0%, rgba(0,191,174,.08) 100%);
    border-color: rgba(0,191,174,.4);
    color: var(--accent-dk);
    font-weight: 700;
}

/* Links innerhalb Breadcrumb: kein Unterstrich-Effekt */
.tplge_locator a {
    background-image: none !important;
    color: var(--blue-600);
    transition: color var(--transition);
}
.tplge_locator a:hover { color: var(--accent); }
img.tplge_scrolltoTopButton {
    background: var(--blue-800); position: fixed; bottom: 70px; right: 0;
    display: block; border-radius: 20px 0 0 20px;
    opacity: .8; transition: all var(--transition);
}
img.tplge_scrolltoTopButton:hover {background: var(--accent); opacity: 1;}

/* ─── PLUGINS ────────────────────────────────────────── */
div.ddfmwrap {font-family: RobotoCondensed, sans-serif !important; font-size: 17px !important;}
div.ddfmwrap input.ddmf_text {width: 360px !important; min-width: 240px !important; max-width: 90% !important; background: var(--surface) !important; color: var(--text) !important; font-family: RobotoCondensed, sans-serif !important; font-size: 17px !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 6px 10px !important;}
div.ddfmwrap input.ddmf_verify {min-width: 106px !important; background: var(--surface) !important; color: var(--text) !important; font-size: 17px !important; border: 1px solid var(--border) !important; width: 106px !important;}
div.ddfmwrap textarea {width: 99% !important; background: var(--surface) !important; color: var(--text) !important; font-size: 17px !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 6px 10px !important;}
div.ddfmwrap div.submitButton {width: 116px !important;}
div.ddfmwrap div.submitButton input {width: 100% !important;}

.cookielawHinttop {display: block; padding-top: 56px !important;}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1258px) {
    .tplge_newsAreaIn {width: 900px;}
    .tplge_sitename  {font-size: 30px;}
    .tplge_horinav   {display: none;}
}
@media (max-width: 990px) {
    .tplge_sitename  {font-size: 28px;}
    .tplge_newsAreaIn {width: 600px;}
}
@media (max-width: 740px) {
    .tplge_sitename {font-size: 26px;}
    body, .tplge_contentIn {font-size: 16px;}
    div.tplge_contentboxleft, div.tplge_contentboxright {width: 100%;}
}
@media (max-width: 680px) {
    .tplge_newsAreaIn {width: 300px;}
}
@media (max-width: 580px) {
    .tplge_sitename {font-size: 22px; letter-spacing: 0.06em; padding: 0 0 14px 0;}
    figure.image {width: auto !important; max-width: 100% !important; float: none; margin: 10px auto;}
}
@media (max-width: 480px) {
    h1 {font-size: 24px;}
    h2 {font-size: 21px;}
    h3 {font-size: 19px;}
    h4 {font-size: 18px;}
    h5, h6 {font-size: 17px;}
    .tplge_locator {font-size: 12px;}
    .tplge_locatorDelimiter {font-size: 15px;}
    .tf_cplus2In {width: 90%; margin: 80px auto 40px auto;}
    img.tplge_right_border, img.tplge_left_border,
    img.tplge_right_noborder, img.tplge_left_noborder,
    img.tplge_right, img.tplge_left {display: block; float: none; max-width: 100%; margin: 0 0 16px 0;}
    .tplge_olSearch {width: 300px;}
    .tplge_olSearchbox .tplge_searchboxInput {width: 210px;}
}

/* ─── REDUZIERTE BEWEGUNG (Barrierefreiheit) ─────────────────────────────────
   Nutzer mit vestibulären Störungen oder Photosensitivität können im Betriebssystem
   "Bewegung reduzieren" aktivieren. Diese Media-Query respektiert das.
   Alle Animationen und Transitions werden auf ein Minimum reduziert. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .skip-link {
        transition: none;
    }
}

/* ─── DRUCKSTILE ─────────────────────────────────────────────────────────────
   Optimiert die Druckausgabe: Navigation, Sidebar und dekorative Elemente
   werden ausgeblendet. Links werden mit ihrer URL ausgegeben.
   Relevant, da das Template eine Druckfunktion (tf_printlink) enthält. */
@media print {
    /* Navigation und Seitenelemente ausblenden */
    .tplge_pageNav,
    .tplge_newsArea,
    header nav.tplge_horinav,
    nav.tplge_prevtopnext,
    nav.tplge_icons,
    nav.tplge_subsibmenus,
    nav.tplge_locator,
    .tplge_olMenu,
    .tplge_olSearch,
    .tplge_olBG,
    button.tplge_olMenuClose,
    button.tplge_olSearchClose,
    img.tplge_scrolltoTopButton,
    .skip-link,
    footer { display: none !important; }

    /* Hauptinhalt auf volle Breite */
    .tplge_contentIn {
        width: 100% !important;
        margin: 0 !important;
        font-size: 11pt !important;
    }

    /* Header minimal halten */
    header {
        background: none !important;
        color: #000 !important;
        padding: 0 !important;
    }
    .tplge_sitename {
        color: #000 !important;
        font-size: 18pt !important;
    }

    /* Gradient-Text für Druck deaktivieren */
    h1 {
        background: none !important;
        -webkit-text-fill-color: #000 !important;
        color: #000 !important;
        font-size: 18pt !important;
    }
    h2 { font-size: 15pt !important; color: #000 !important; }
    h3 { font-size: 13pt !important; }

    /* Content-Boxes: kein Schatten, einfacher Rahmen */
    div.tplge_contentboxfullsize,
    div.tplge_contentboxleft,
    div.tplge_contentboxright {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    /* Links: URL nach dem Linktext ausgeben */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
        font-weight: normal;
    }
    /* Ausnahmen: interne Anker und # Links */
    a[href^="#"]::after,
    a[href^="?"]::after { content: ""; }

    /* Seitenumbruch vor grossen Überschriften */
    h1, h2 { page-break-after: avoid; }
    table { page-break-inside: avoid; }
}

/* ─── BOX 01 ─────────────────────────────────────────── */