/*
 * aih2026 -- Kindtemplate von Cassiopeia
 *
 * Farben, Schriftbild und Anordnung wie auf der bisherigen Seite (aih2015):
 * Orange #f07d22 als Akzent, Indigo #312e80 fuer Titelbaender, dunkle
 * vierspaltige Fusszeile, Open Sans. Abstaende, Typografie und das
 * Verhalten auf schmalen Bildschirmen sind neu aufgesetzt; Bootstrap-2-
 * Raster und feste Pixelbreiten gibt es nicht mehr.
 */

/* ---------------------------------------------------------------- Schrift */
@font-face {
    font-family: 'Open Sans AIH';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans AIH';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/open-sans-v34-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans AIH';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/open-sans-v34-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans AIH';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/open-sans-v34-latin-800.woff2') format('woff2');
}

/* ---------------------------------------------------------------- Variablen */
:root {
    --aih-orange: #f07d22;
    --aih-orange-dark: #cf6512;
    --aih-indigo: #312e80;
    --aih-indigo-light: #4a46a8;
    --aih-text: #4a4a4a;
    --aih-text-muted: #6d6d6d;
    --aih-page-bg: #eef1f3;
    --aih-surface: #ffffff;
    --aih-surface-alt: #f7f8f9;
    --aih-line: #e2e5e8;
    --aih-footer-bg: #181715;
    --aih-footer-text: #d8d6d2;
    --aih-copy-bg: #121212;
    --aih-copy-text: #8a8a8a;

    --aih-max: 1200px;
    --aih-gap: clamp(1rem, 3vw, 2.25rem);
    --aih-radius: 8px;
    --aih-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);

    --aih-font: 'Open Sans AIH', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    /* Cassiopeias eigene Variablen mitziehen, damit geerbte Bausteine passen */
    --link-color: var(--aih-indigo);
    --template-link-color: var(--aih-indigo);
    --template-special-color: var(--aih-indigo);
    --template-bg-light: var(--aih-surface-alt);
    --template-text-dark: var(--aih-text);
}

/* ---------------------------------------------------------------- Grundlage */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.aih {
    margin: 0;
    padding-block: clamp(0rem, 1.6vw, 1.5rem);
    background: var(--aih-page-bg);
    color: var(--aih-text);
    font-family: var(--aih-font);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
    overflow-wrap: break-word;
}

body.aih a { color: var(--aih-indigo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
body.aih a:hover,
body.aih a:focus-visible { color: var(--aih-orange-dark); }

body.aih img { max-width: 100%; height: auto; }

body.aih :focus-visible {
    outline: 3px solid var(--aih-orange);
    outline-offset: 2px;
}

/* Die Seitenflaeche: Kopf, Inhalt und Fuss stehen gemeinsam darin und haben
   dadurch dieselbe Breite. Entspricht dem alten .body_container. */
.aih-sheet {
    width: 100%;
    max-width: var(--aih-max);
    margin-inline: auto;
    background: var(--aih-surface);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: var(--aih-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .06);
    overflow: hidden;
}

body.aih.wrapper-fluid .aih-sheet {
    max-width: none;
    border-radius: 0;
    border-inline: 0;
}

/* Innerhalb der Flaeche sorgt .aih-inner nur noch fuer den Seitenrand,
   die Breite gibt die Flaeche vor. */
.aih-inner {
    width: 100%;
    padding-inline: var(--aih-gap);
}

.aih-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--aih-indigo);
    color: #fff;
    padding: .75rem 1.25rem;
}
.aih-skip:focus { left: 0; }

/* ---------------------------------------------------------------- Kopf */
.aih-header {
    background: var(--aih-surface);
}

.aih-topbar {
    background: var(--aih-indigo);
    color: #fff;
    font-size: .875rem;
}
.aih-topbar a { color: #fff; }

/* Das Schwungband aus den Hausfarben sitzt am unteren Rand des Kopfstreifens,
   wie frueher b.png. Logo und Knopf stehen darueber am oberen Rand, wo die
   Flaeche frei bleibt. */
.aih-band {
    position: relative;
    background:
        url('../images/kopfband.svg') left bottom / 100% 58px no-repeat,
        linear-gradient(180deg, #fff 0%, #fcfcfc 100%);
}

.aih-band__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1rem;
    min-height: 118px;
    padding-block: .9rem;
}

.aih-brand {
    display: inline-flex;
    flex-direction: column;
    gap: .15rem;
    text-decoration: none;
}
.aih-brand:hover { text-decoration: none; }

.aih-logo {
    display: block;
    width: auto;
    height: 48px;
}

.aih-site-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--aih-indigo);
    line-height: 1.1;
}

.aih-site-description {
    font-size: .875rem;
    color: var(--aih-text-muted);
}

/* Schaltflaeche fuer das Menue auf schmalen Bildschirmen */
.aih-burger {
    display: none;
    align-items: center;
    gap: .55rem;
    background: var(--aih-orange);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: .6rem .9rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.aih-burger:hover { background: var(--aih-orange-dark); }

.aih-burger__bars,
.aih-burger__bars::before,
.aih-burger__bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    content: '';
}
.aih-burger__bars { position: relative; }
.aih-burger__bars::before { position: absolute; top: -6px; }
.aih-burger__bars::after  { position: absolute; top: 6px; }

body.aih.nav-open .aih-burger__bars { background: transparent; }
body.aih.nav-open .aih-burger__bars::before { top: 0; transform: rotate(45deg); }
body.aih.nav-open .aih-burger__bars::after  { top: 0; transform: rotate(-45deg); }

/* ---------------------------------------------------------------- Navigation */
/* Keine Linie unter der Leiste: der orangene Balken am aktiven Punkt
   reicht als Abgrenzung. */
.aih-navbar {
    background: linear-gradient(180deg, #fcfcfc 0%, #eeeeee 100%);
    border-top: 1px solid var(--aih-line);
}

/* In der Leiste steht nur noch das Menue -- Suche und Fernwartung sind
   oben im Kopf. Dadurch hat das Menue die volle Breite. */
.aih-navbar__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.aih-nav { flex: 1 1 auto; min-width: 0; }

.aih-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ACHTUNG: Cassiopeia setzt .mod-menu { flex-direction: column } und nimmt das
   nur innerhalb von .container-header zurueck. Unsere Huelle heisst anders,
   also muss die Zeilenrichtung hier ausdruecklich gesetzt werden -- sonst
   steht das Hauptmenue untereinander statt nebeneinander. */
.aih-nav > ul,
.aih-nav > div > ul,
.aih-nav > .mod-menu,
.aih-nav > div > .mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aih-nav > ul > li,
.aih-nav > div > ul > li { flex: 0 0 auto; }

.aih-nav li { position: relative; }

.aih-nav a,
.aih-nav .mod-menu__heading,
.aih-nav span.separator {
    display: block;
    padding: .9rem .7rem;
    color: var(--aih-text);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

/* In der Menueleiste nie unterstreichen -- sonst stehen zwei Striche
   untereinander: die Textunterstreichung und der orangene Balken.
   ACHTUNG Spezifitaet: Cassiopeia hat `.mod-list li.active > a
   { text-decoration: underline }` -- das sind (0,2,2). Ein schlichtes
   `.aih-nav a` (0,1,1) verliert dagegen. Darum hier mit drei Klassen. */
.aih-nav .mod-menu li a,
.aih-nav .mod-menu li a:hover,
.aih-nav .mod-menu li a:focus,
.aih-nav .mod-menu li a:focus-visible,
.aih-nav .mod-menu li a:active,
.aih-nav .mod-menu li.active > a,
.aih-nav .mod-menu li.current > a,
.aih-nav .mod-list li.active > a { text-decoration: none; }

/* Zwischen 900 und 1150 px wird es eng -- dort etwas zusammenruecken,
   damit die Leiste eine Zeile bleibt. */
@media (min-width: 56.25rem) and (max-width: 71.875rem) {
    .aih-nav a { padding-inline: .5rem; font-size: .84rem; }
}

.aih-nav > ul > li > a:hover,
.aih-nav > ul > li > a:focus-visible,
.aih-nav > div > ul > li > a:hover,
.aih-nav > div > ul > li > a:focus-visible {
    color: var(--aih-indigo);
    border-bottom-color: var(--aih-orange);
}

.aih-nav > ul > li.active > a,
.aih-nav > ul > li.current > a,
.aih-nav > div > ul > li.active > a,
.aih-nav > div > ul > li.current > a {
    color: var(--aih-indigo);
    border-bottom-color: var(--aih-orange);
}

/* Untermenues: auf grossen Bildschirmen als Klappmenue.
   mod_menu blendet sie selbst ueber aria-hidden aus (mod-menu.css nutzt
   :where(), hat also Spezifitaet 0) und zeigt sie per Knopf wieder an.
   Darum hier display:block und das Ein-/Ausblenden ueber Sichtbarkeit --
   dann wirken Zeigen mit der Maus, Tastatur und der Knopf gleichermassen. */
.aih-nav ul ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 15rem;
    padding: .35rem 0;
    background: var(--aih-surface);
    border: 1px solid var(--aih-line);
    border-bottom: 3px solid var(--aih-orange);
    border-radius: 0 0 var(--aih-radius) var(--aih-radius);
    box-shadow: var(--aih-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

.aih-nav ul ul ul { top: -.35rem; left: 100%; border-radius: var(--aih-radius); }

.aih-nav li:hover > ul,
.aih-nav li:focus-within > ul,
.aih-nav ul ul.show-menu,
.aih-nav ul ul[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Der Klappknopf, den mod_menu selbst mitliefert.
   Auf breiten Bildschirmen stoert er -- dort oeffnen die Untermenues ueber
   Mauszeiger und Tastaturfokus, und die Pfeile zeichnet das CSS oben selbst.
   Auf schmalen Bildschirmen ist er dagegen der einzige Weg, ein Untermenue
   aufzuklappen, und muss sichtbar bleiben. */
@media (min-width: 56.25rem) {
    .aih-nav .mod-menu__toggle-sub { display: none; }
}

.aih-nav ul ul a {
    padding: .5rem 1.1rem;
    font-weight: 400;
    font-size: .92rem;
    color: var(--aih-orange-dark);
    border-bottom: 0;
    white-space: normal;
}

.aih-nav ul ul a:hover,
.aih-nav ul ul a:focus-visible {
    background: var(--aih-surface-alt);
    color: var(--aih-indigo);
}

.aih-nav ul ul li.active > a { color: var(--aih-indigo); font-weight: 600; }

/* Pfeil bei Eintraegen mit Untermenue */
.aih-nav li.deeper > a::after,
.aih-nav li.parent > a::after {
    content: '';
    display: inline-block;
    width: .4em;
    height: .4em;
    margin-left: .45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-.1em);
    opacity: .7;
}
.aih-nav ul ul li.deeper > a::after,
.aih-nav ul ul li.parent > a::after {
    float: right;
    transform: rotate(-45deg);
}

/* Suche -- sitzt oben im Kopf, nicht mehr in der Menueleiste */
.aih-search { flex: 0 0 auto; }

.aih-search form { margin: 0; display: flex; gap: .4rem; align-items: center; }

.aih-search input[type="text"],
.aih-search input[type="search"],
.aih-search .form-control {
    height: 2.4rem;
    width: 12rem;
    max-width: 100%;
    padding: 0 .9rem;
    border: 1px solid #ccc;
    border-radius: 999px;
    background: #fff;
    color: var(--aih-text);
    font: inherit;
    font-size: .9rem;
}

.aih-search input:focus {
    border-color: var(--aih-orange);
    box-shadow: 0 0 0 3px rgba(240, 125, 34, .18);
    outline: none;
}

.aih-search button,
.aih-search .btn {
    border: 0;
    border-radius: 999px;
    background: var(--aih-orange);
    color: #fff;
    padding: .45rem .9rem;
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}
.aih-search button:hover { background: var(--aih-orange-dark); }

/* ---------------------------------------------------------------- Inhalt */
.aih-banner { background: var(--aih-surface); }

/* Kein Abstand nach unten: sonst steht zwischen dem Inhalt und dem
   Fussband ein grauer Streifen. Die Luft kommt aus dem Innenabstand
   von .aih-content. */
.aih-main {
    background: var(--aih-surface);
    padding-block: 0;
}

.aih-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--aih-gap);
    align-items: start;
}

@media (min-width: 62rem) {
    body.aih.has-sidebar-right .aih-grid { grid-template-columns: minmax(0, 1fr) 20rem; }
    body.aih.has-sidebar-left  .aih-grid { grid-template-columns: 20rem minmax(0, 1fr); }
    body.aih.has-sidebar-left.has-sidebar-right .aih-grid { grid-template-columns: 17rem minmax(0, 1fr) 17rem; }
    body.aih.has-sidebar-left .aih-aside--left { grid-column: 1; grid-row: 1; }
}

/* Der Inhalt ist jetzt Teil der Seitenflaeche, also keine zweite Karte --
   nur Weissraum. Der Seitenrand steckt hier drin, damit das Titelband
   darunter bis an den Rand der Flaeche reichen kann. */
.aih-main > .aih-inner { padding-inline: 0; }

.aih-content {
    min-width: 0;
    background: var(--aih-surface);
    padding: clamp(1.25rem, 3vw, 2.5rem) var(--aih-gap) clamp(2rem, 4vw, 3.25rem);
    overflow: hidden;
}

/* Titelband wie bisher: Indigo, Titel mit orangener Unterkante */
/* Das Titelband reicht bis an die Raender der Seitenflaeche */
.aih-content .page-header,
.aih-content .com-content-category-blog__title,
.aih-content .com-content-article__header .page-header {
    margin: calc(-1 * clamp(1.25rem, 3vw, 2.5rem)) calc(-1 * var(--aih-gap)) clamp(1.5rem, 3vw, 2.25rem);
    padding: clamp(1.25rem, 3vw, 2rem) var(--aih-gap) 0;
    background: var(--aih-indigo);
    border: 0;
}

/* com_contact setzt seine Seitenueberschrift OHNE die Huelle .page-header,
   anders als com_content. Damit die Kontaktseiten dasselbe Titelband
   bekommen wie alle anderen Seiten, hier gesondert. */
.aih-content .com-contact > h1 {
    margin: calc(-1 * clamp(1.25rem, 3vw, 2.5rem)) calc(-1 * var(--aih-gap)) clamp(1.5rem, 3vw, 2.25rem);
    padding: clamp(1.25rem, 3vw, 2rem) var(--aih-gap) clamp(1rem, 2vw, 1.5rem);
    background: var(--aih-indigo);
    border: 0;
    color: #fff;
    font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    font-weight: 400;
    line-height: 1.2;
}

.aih-content .com-contact > h1::after {
    content: '';
    display: block;
    width: clamp(6rem, 22%, 12rem);
    height: 4px;
    margin-top: .85rem;
    background: var(--aih-orange);
}

/* Die Ueberschrift direkt ueber dem Formular wiederholt nur den Seitentitel */
.aih-content .com-contact > h2:has(+ .com-contact__form) { display: none; }

/* Reihenfolge auf den Kontaktseiten: Titelband, dann der Einleitungstext,
   dann das Formular. Joomla stellt den Text von Haus aus ganz nach unten
   unter die Ueberschrift "Weitere Informationen". */
.aih-content .com-contact {
    display: flex;
    flex-direction: column;
}
.aih-content .com-contact > *            { order: 3; }
.aih-content .com-contact > h1           { order: 0; }
.aih-content .com-contact__miscinfo      { order: 1; }
.aih-content .com-contact__form          { order: 2; }

/* Die Ueberschrift ueber dem Einleitungstext braucht es nicht */
.aih-content .com-contact > h2:has(+ .com-contact__miscinfo),
.aih-content .com-contact > h3:has(+ .com-contact__miscinfo) { display: none; }

/* Joomla setzt den Text in eine Definitionsliste mit Info-Symbol. Hier soll
   er wie gewoehnlicher Fliesstext lesen. Die Spezifitaeten sind bewusst
   hoch genug, um Cassiopeias dl.dl-horizontal (Raster) zu schlagen. */
.aih-content .com-contact__miscinfo { margin-bottom: 1.75rem; }
.aih-content .com-contact__miscinfo dl.dl-horizontal { display: block; margin: 0; }
.aih-content .com-contact__miscinfo dl.dl-horizontal dt { display: none; }
.aih-content .com-contact__miscinfo dl.dl-horizontal dd { margin: 0; padding: 0; }
.aih-content .com-contact__miscinfo p:last-child { margin-bottom: 0; }

/* Ein leeres Titelband nicht zeichnen -- sonst steht ein blauer Balken
   ohne Text auf der Seite (ist bei den Kontaktformularen passiert). */
.aih-content .page-header:not(:has(h1, h2, h3)),
.aih-content .page-header:has(h1:empty),
.aih-content .page-header:has(h2:empty) { display: none; }

.aih-content .page-header > h1,
.aih-content .page-header > h2,
.aih-content .page-header > h1 > a,
.aih-content .page-header > h2 > a,
.aih-content .com-content-category-blog__title {
    display: inline-block;
    margin: 0;
    padding-bottom: .85rem;
    border-bottom: 4px solid var(--aih-orange);
    color: #fff;
    font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
}

.aih-content .page-header { padding-bottom: 0; }
.aih-content .page-header::after { content: ''; display: block; height: clamp(1rem, 2vw, 1.5rem); }

/* Typografie */
.aih-content h1, .aih-content h2, .aih-content h3,
.aih-content h4, .aih-content h5, .aih-content h6 {
    color: var(--aih-orange);
    font-weight: 600;
    line-height: 1.25;
    margin: 1.8em 0 .6em;
    text-wrap: balance;
}
.aih-content > *:first-child,
.aih-content main > *:first-child { margin-top: 0; }

.aih-content h1 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.1rem); }
.aih-content h2 { font-size: clamp(1.35rem, 1rem + 1.3vw, 1.7rem); }
.aih-content h3 { font-size: clamp(1.15rem, .95rem + .8vw, 1.4rem); }
.aih-content h4 { font-size: 1.1rem; }
.aih-content h5 { font-size: 1rem; }
.aih-content h6 { font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }

.aih-content p { margin: 0 0 1.15rem; }
.aih-content ul, .aih-content ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.aih-content li { margin-bottom: .3rem; }

.aih-content hr {
    border: 0;
    height: 1px;
    margin: 2.25rem 0;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, .18), transparent);
}

.aih-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: .95rem;
}
.aih-content th, .aih-content td {
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--aih-line);
    text-align: left;
    vertical-align: top;
}
.aih-content thead th { background: var(--aih-surface-alt); color: var(--aih-indigo); }

/* Tabellen und eingebettete Inhalte duerfen auf dem Telefon rollen */
.aih-content .table-responsive,
.aih-content .aih-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Eingebettete Videos und Werkzeugkaesten skalieren mit */
.aih-content iframe {
    display: block;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    margin-bottom: 1.25rem;
    border-radius: var(--aih-radius);
    background: #000;
}

/* Die Inhaltskaesten der alten Seite behalten ihr Aussehen */
.aih-content .sub_contentbox {
    background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
    border: 1px solid var(--aih-line);
    border-top: 2px solid #e8eaec;
    border-radius: var(--aih-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: clamp(1rem, 2.5vw, 1.75rem);
    margin: 1.25rem 0;
}
.aih-content .sub_contentbox h1,
.aih-content .sub_contentbox h2,
.aih-content .sub_contentbox h3,
.aih-content .sub_contentbox h4,
.aih-content .sub_contentbox h5,
.aih-content .sub_contentbox h6 { color: var(--aih-indigo); margin-top: 0; }

/* Der Einbettungsbehaelter der LX-Tools */
.aih-content #lx-tools { margin: 1.5rem 0; }
.aih-content #lx-tools .toolInfo > h1 { display: none !important; }
.aih-content #lexware_menu { margin: 1.5rem 0; }

/* Blog-/Kategorieansicht */
.aih-content .com-content-category-blog__items,
.aih-content .blog-items { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }

.aih-content .com-content-category-blog__item,
.aih-content .blog-item {
    padding-bottom: clamp(1.25rem, 3vw, 2rem);
    border-bottom: 1px solid var(--aih-line);
}
.aih-content .com-content-category-blog__item:last-child { border-bottom: 0; padding-bottom: 0; }

.aih-content .item-image img { border-radius: var(--aih-radius); }

/* Schaltflaechen */
.aih-content .btn,
.aih-content .readmore .btn,
.aih-content button[type="submit"],
.aih-content input[type="submit"] {
    display: inline-block;
    background: var(--aih-orange);
    border: 0;
    border-radius: 6px;
    color: #fff;
    font: inherit;
    font-weight: 600;
    padding: .6rem 1.2rem;
    text-decoration: none;
    cursor: pointer;
}
.aih-content .btn:hover,
.aih-content button[type="submit"]:hover,
.aih-content input[type="submit"]:hover { background: var(--aih-orange-dark); color: #fff; }

/* Formulare */
.aih-content input[type="text"],
.aih-content input[type="email"],
.aih-content input[type="tel"],
.aih-content input[type="url"],
.aih-content input[type="number"],
.aih-content select,
.aih-content textarea {
    width: 100%;
    max-width: 32rem;
    padding: .55rem .75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: var(--aih-text);
    font: inherit;
    font-size: .95rem;
}
.aih-content textarea { min-height: 9rem; resize: vertical; }
.aih-content input:focus,
.aih-content select:focus,
.aih-content textarea:focus {
    border-color: var(--aih-orange);
    box-shadow: 0 0 0 3px rgba(240, 125, 34, .18);
    outline: none;
}
.aih-content label { display: inline-block; font-weight: 600; margin-bottom: .25rem; }
.aih-content .control-group { margin-bottom: 1rem; }
.aih-content .control-label { display: block; }

/* Alles neben dem Inhalt braucht den Seitenrand selbst, weil der
   Inhaltsbereich ihn fuer das randlose Titelband abgegeben hat. */
.aih-main > .aih-inner > .mod-breadcrumbs__wrapper,
.aih-main > .aih-inner > nav,
.aih-main > .aih-inner > #system-message-container,
.aih-main > .aih-inner > .aih-top-a,
.aih-main > .aih-inner > .aih-top-b,
.aih-main > .aih-inner > .aih-bottom-a,
.aih-main > .aih-inner > .aih-bottom-b,
.aih-grid > .aih-aside { padding-inline: var(--aih-gap); }

/* Systemmeldungen: ueber dem Inhalt, in dessen Breite, ohne Hoehe zu
   beanspruchen, solange keine Meldung da ist. */
.aih-main > .aih-inner > #system-message-container:not(:empty) {
    padding-block: 0 1rem;
}
.aih-main #system-message-container joomla-alert { display: block; }

/* Navigationspfad */
.aih-main .breadcrumb,
.aih-main nav[aria-label="Breadcrumbs"] ol,
.aih-main .mod-breadcrumbs__wrapper ol {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: 1rem 0;
    background: none;
    font-size: .85rem;
    color: var(--aih-text-muted);
}
.aih-main .breadcrumb a { color: var(--aih-text-muted); }
.aih-main .breadcrumb a:hover { color: var(--aih-orange-dark); }

/* Nebenspalten */
.aih-aside .card,
.aih-aside .moduletable {
    background: var(--aih-surface);
    border: 1px solid var(--aih-line);
    border-radius: var(--aih-radius);
    box-shadow: var(--aih-shadow);
    margin-bottom: var(--aih-gap);
    overflow: hidden;
}
.aih-aside .card-header,
.aih-aside h3 {
    margin: 0;
    padding: .9rem 1.1rem;
    background: var(--aih-indigo);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}
.aih-aside .card-body { padding: 1.1rem; }

/* ---------------------------------------------------------------- Fusszeile */
/* Das umgekehrte Schwungband leitet vom hellen Inhalt in die dunkle
   Fusszeile ueber, wie frueher b2.png. */
.aih-footband {
    height: 76px;
    background: url('../images/fussband.svg') left bottom / 100% 100% no-repeat;
}

@media (max-width: 40rem) {
    .aih-footband { height: 46px; }
}

.aih-footer {
    background: var(--aih-footer-bg);
    color: var(--aih-footer-text);
    padding-block: clamp(2rem, 5vw, 3.25rem);
    font-size: .9rem;
}

.aih-footer__cols {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
    .aih-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
    .aih-footer__cols[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aih-footer__cols[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.aih-footmod__title {
    margin: 0 0 .85rem;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
}

.aih-footmod__body p { margin: 0 0 .6rem; }
.aih-footmod__body a { color: #fff; }
.aih-footmod__body a:hover { color: var(--aih-orange); }

.aih-footmod ul { list-style: none; margin: 0; padding: 0; }
.aih-footmod li { margin-bottom: .35rem; line-height: 1.6; }
.aih-footmod li a { display: inline-block; color: #fff; text-decoration: none; }
.aih-footmod li a:hover { color: var(--aih-orange); text-decoration: underline; }

/* Die orangenen Knoepfe der Spalte "Footer buttons".
   flex-direction muss hier stehen, weil Cassiopeia .mod-menu auf column
   setzt und diese Liste ebenfalls die Klasse mod-menu traegt. */
.aih-footcol--foot-4 ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .6rem;
}
.aih-footcol--foot-4 li { margin: 0; }
.aih-footcol--foot-4 li a {
    display: block;
    min-width: 9rem;
    padding: .7rem 1rem;
    background: var(--aih-orange);
    border-radius: 6px;
    color: #fff !important;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.aih-footcol--foot-4 li a:hover { background: var(--aih-orange-dark); text-decoration: none; }

@media (min-width: 60rem) {
    .aih-footcol--foot-4 ul { flex-direction: column; }
    .aih-footcol--foot-4 li a { min-width: 0; width: 100%; }
}

.aih-footer__extra { margin-top: 1.5rem; }
.aih-footer__extra a { color: #fff; }

/* ---------------------------------------------------------------- Urheberrecht */
.aih-copyright {
    background: var(--aih-copy-bg);
    border-top: 2px solid #151515;
    color: var(--aih-copy-text);
    font-size: .85rem;
    padding-block: 1.5rem;
}
.aih-copyright__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.aih-copyright p { margin: 0; }
.aih-copyright a { color: #fff; }
.aih-copyright a:hover { color: var(--aih-orange); }

/* ---------------------------------------------------------------- Video-Platzhalter */
/* Steht im Artikel anstelle des iframes. Enthaelt keine Adresse, es geht
   also vor dem Klick nichts an YouTube hinaus. */
.aih-content .aih-video {
    display: grid;
    place-content: center;
    gap: .75rem;
    aspect-ratio: 16 / 9;
    margin: 0 0 1.25rem;
    padding: clamp(1rem, 3vw, 2rem);
    background: var(--aih-surface-alt);
    border: 1px dashed var(--aih-line);
    border-radius: var(--aih-radius);
    text-align: center;
}

.aih-content .aih-video__text {
    margin: 0;
    max-width: 34rem;
    color: var(--aih-text-muted);
    font-size: .92rem;
    line-height: 1.5;
}

.aih-content .aih-video__actions { margin: 0; }

.aih-content .aih-video__load {
    display: inline-block;
    background: var(--aih-orange);
    border: 0;
    border-radius: 6px;
    color: #fff;
    font: inherit;
    font-weight: 600;
    padding: .6rem 1.4rem;
    text-decoration: none;
    cursor: pointer;
}
.aih-content .aih-video__load:hover,
.aih-content .aih-video__load:focus-visible { background: var(--aih-orange-dark); color: #fff; }

/* ---------------------------------------------------------------- Fernwartung */
/* Frueher eine Lasche am rechten Bildschirmrand, jetzt ein Knopf oben rechts
   im Kopfbereich. */
.aih-band__tools {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
}

/* Nur das Sinnbild, ohne Hintergrund, auf der Hoehe des Suchknopfes. */
.aih-fernwartung {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--aih-orange);
    text-decoration: none;
}
.aih-fernwartung:hover,
.aih-fernwartung:focus-visible {
    background: none;
    color: var(--aih-orange-dark);
    text-decoration: none;
}
.aih-fernwartung svg {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Die Beschriftung bleibt fuer Vorleseprogramme erhalten, ist aber nicht
   zu sehen -- nicht display:none, sonst faellt sie auch dort weg. */
.aih-fernwartung span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.aih-backtotop {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--aih-indigo);
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
body.aih.scrolled .aih-backtotop { opacity: .9; pointer-events: auto; }
.aih-backtotop:hover { background: var(--aih-indigo-light); color: #fff; opacity: 1; }

/* ---------------------------------------------------------------- Altlasten aus den Artikeln */
/* Die uebernommenen Artikel sind in Bootstrap 2 geschrieben. Diese Klassen
   gibt es in Bootstrap 5 nicht mehr, deshalb standen die Partnerlogos
   mitten im Text statt rechts daneben. Hier nachgebildet. */
.aih-content .pull-right {
    float: right;
    margin: .25rem 0 1rem 1.5rem;
}

.aih-content .pull-left {
    float: left;
    margin: .25rem 1.5rem 1rem 0;
}

.aih-content .pull-center,
.aih-content img.pull-center {
    display: block;
    float: none;
    margin-inline: auto;
}

/* Floats duerfen nicht aus ihrem Kasten herauslaufen */
.aih-content .sub_contentbox::after,
.aih-content .com-content-article__body::after,
.aih-content .item-page::after {
    content: '';
    display: table;
    clear: both;
}

/* Auf dem Telefon kein Umfliessen -- dafuer ist zu wenig Platz */
@media (max-width: 34rem) {
    .aih-content .pull-right,
    .aih-content .pull-left {
        float: none;
        display: block;
        margin: 0 0 1rem;
    }
}

/* Knopfreihe, die in zwei Artikeln im Text steht */
.aih-content .footer_buttons ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .6rem;
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
}
.aih-content .footer_buttons li { margin: 0; }
.aih-content .footer_buttons li a {
    display: block;
    min-width: 9rem;
    padding: .7rem 1rem;
    background: var(--aih-orange);
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.aih-content .footer_buttons li a:hover,
.aih-content .footer_buttons li a:focus-visible {
    background: var(--aih-orange-dark);
    color: #fff;
}

/* ---------------------------------------------------------------- schmale Bildschirme */

@media (max-width: 56.24rem) {
    .aih-burger { display: inline-flex; }

    .aih-navbar__inner {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
    }

    body.aih.nav-open .aih-navbar__inner {
        max-height: 85vh;
        overflow-y: auto;
        padding-block: .75rem;
    }

    /* Dieselben Selektoren wie oben, sonst gewinnt dort .aih-nav > .mod-menu
       (zwei Klassen) gegen ein einfaches .aih-nav > ul hier. */
    .aih-nav > ul,
    .aih-nav > div > ul,
    .aih-nav > .mod-menu,
    .aih-nav > div > .mod-menu {
        display: block;
    }

    .aih-nav li { border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .aih-nav li:last-child { border-bottom: 0; }

    .aih-nav a {
        padding: .85rem .25rem;
        border-bottom: 0;
        font-size: 1rem;
    }

    .aih-nav li.deeper > a,
    .aih-nav li.parent > a { padding-right: 3.25rem; }

    .aih-nav > ul > li.active > a,
    .aih-nav > div > ul > li.active > a {
        border-left: 3px solid var(--aih-orange);
        padding-left: .6rem;
    }

    /* Untermenues klappen auf Knopfdruck auf -- den Knopf liefert mod_menu */
    .aih-nav ul ul {
        position: static;
        min-width: 0;
        padding: 0 0 .4rem 1rem;
        border: 0;
        border-left: 2px solid var(--aih-line);
        border-radius: 0;
        box-shadow: none;
        background: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    /* Nur das, was mod_menu als offen markiert, wird gezeigt --
       Zeigen mit dem Finger soll hier nichts aufklappen. */
    .aih-nav ul ul[aria-hidden="true"] { display: none; }
    .aih-nav li:hover > ul[aria-hidden="true"],
    .aih-nav li:focus-within > ul[aria-hidden="true"] { display: none; }

    .aih-nav li.deeper > a::after,
    .aih-nav li.parent > a::after { display: none; }

    .aih-nav .mod-menu__toggle-sub {
        position: absolute;
        right: 0;
        top: .3rem;
        width: 3rem;
        height: 2.75rem;
        justify-content: center;
        color: inherit;
        cursor: pointer;
    }
    .aih-nav ul ul .mod-menu__toggle-sub { height: 2.2rem; top: .1rem; }

    .aih-search { width: 100%; padding-block: .75rem .25rem; }
    .aih-search input[type="text"],
    .aih-search input[type="search"],
    .aih-search .form-control { width: 100%; }

    .aih-content .page-header {
        margin-inline: calc(-1 * clamp(1.25rem, 3vw, 2.5rem));
    }
}

@media (max-width: 34rem) {
    /* Nur noch das Sinnbild, die Beschriftung waere zu breit */
    .aih-fernwartung { padding: .5rem .6rem; }
    .aih-fernwartung span { display: none; }
    .aih-fernwartung svg { width: 1.35em; height: 1.35em; }
}

@media (max-width: 30rem) {
    .aih-logo { height: 40px; }
    .aih-band__inner { min-height: 96px; padding-block: .7rem; }
    .aih-band { background-size: 100% 42px, auto; }
}

/* ---------------------------------------------------------------- Druck */
@media print {
    .aih-navbar, .aih-burger, .aih-footer, .aih-copyright, .aih-footband,
    .aih-fernwartung, .aih-backtotop, .aih-search { display: none !important; }
    .aih-band { background-image: none; }
    body.aih { background: #fff; }
    .aih-content { border: 0; box-shadow: none; padding: 0; }
    .aih-content .page-header { background: none; margin: 0; padding: 0; }
    .aih-content .page-header > h1,
    .aih-content .page-header > h2 { color: #000; border-bottom-color: #000; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.aih *, body.aih *::before, body.aih *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ------------------------------------------------------------ Fehlerseite
   Die Fehlerseite laeuft nicht durch das normale Layout; sie bringt Kopf und
   Fuss in error.php selbst mit. Hier nur der Inhaltsteil -- bewusst ohne
   Titelband, weil es dort keinen Menuepunkt und keinen Seitentitel gibt. */
.aih-fehler {
    padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1rem, 3vw, 2rem);
    max-width: 44rem;
}

.aih-fehler > h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
    line-height: 1.2;
    color: var(--aih-indigo);
}

.aih-fehler__text {
    margin: 0 0 1rem;
    color: var(--aih-text);
    font-size: 1.05rem;
    line-height: 1.6;
}

.aih-fehler__code {
    margin: 0 0 1.25rem;
    color: var(--aih-text-muted);
    font-size: .95rem;
}

.aih-fehler__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.aih-fehler__links a {
    display: inline-block;
    padding: .55rem 1.1rem;
    border: 1px solid var(--aih-line);
    border-radius: var(--aih-radius);
    background: var(--aih-surface-alt);
    color: var(--aih-indigo);
    text-decoration: none;
    font-weight: 600;
}

.aih-fehler__links a:hover,
.aih-fehler__links a:focus-visible {
    border-color: var(--aih-orange);
    background: var(--aih-surface);
    color: var(--aih-orange-dark);
}

.aih-fehler__debug {
    margin-top: 2rem;
    font-size: .85rem;
    overflow-x: auto;
}

@media (max-width: 36rem) {
    .aih-fehler__links { flex-direction: column; }
    .aih-fehler__links a { text-align: center; }
}