@font-face {
    font-family: "default-font";
    src: url("../font/SourceSans3/SourceSans3vfw.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Material Symbols Outlined";
    src: url("../font/MaterialSymbols/MaterialSymbolsOutlined.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.icon {
    font-family: "Material Symbols Outlined" !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: top;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-flex;
    vertical-align: -0.15em;
    font-size: 120%;
}
/* Richtungs-Icons (Pfeile, Chevrons, Logout, ...): die Klasse icon-dir spiegelt sie
   bei Sprachen, die von rechts nach links laufen (<html dir="rtl">, Cms::RTL_LANGUAGES).
   Nicht für Icons ohne Richtung oder für Wiedergabe-Symbole (play_arrow). */
[dir="rtl"] .icon.icon-dir {
    transform: scaleX(-1);
}

body {
font-family: 'Source Sans 3',sans-serif;
margin: 0;
height: 100%;
background: #fff;
font-size:1.05rem;
}
p:last-child {
    margin-bottom: 0;
}

/* Farb-Tokens --c9-* (hell/dunkel): Bootstrap-Build, custom.scss */
.c9-grey-10, .c9-grey-10:focus { color: var(--c9-grey-10) !important; }
.c9-grey-15, .c9-grey-15:focus { color: var(--c9-grey-15) !important; }
.c9-grey-20, .c9-grey-20:focus { color: var(--c9-grey-20) !important; }
.c9-grey-30, .c9-grey-30:focus { color: var(--c9-grey-30) !important; }
.c9-grey-50, .c9-grey-50:focus { color: var(--c9-grey-50) !important; }
.c9-grey-90, .c9-grey-90:focus { color: var(--c9-grey-90) !important; }
.c9-text-yellow, .c9-text-yellow * { color:var(--c9-yellow) !important; }

.c9-monospace {
    font-family: var(--bs-font-monospace);
    font-size:90%;
}

#imprint {
    position: relative;
    margin-top: 100px;
}

#imprint img {
    width: 177px; 
    height: 140px; 
    border: none; 
    position: absolute; 
    left: 0; 
    top: 0;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#hero { padding-top: 10px; }
#stage {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    aspect-ratio: 1.444 / 1;
    max-height: max(320px, 65svh);
}
#stage canvas { display: block; }
/* Standbild (barrierefreie Version; auf der normalen Seite ersetzt es das Karussell) */
#stage picture, #stage picture img {
    display: block;
    width: 100%; height: 100%;
}
#stage picture img { object-fit: contain; object-position: center top; }

/* Seitennavigation unter der Bühne: ein Icon je Seite (config.js) */
#nav {
    padding: 16px 0 0;
}
/* Punkte mittig, Pause/Play-Knopf ganz rechts am Rand von .container */
#nav .nav-inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px;
}
#dots { grid-column: 2; }
#motion {
    grid-column: 3; justify-self: end;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;  /* Icon bündig mit dem Rand */
    color: #999; background: none; border: 0; padding: 0; cursor: pointer;
}
#motion .icon { font-size: 1.6rem; }
#motion:hover { color: #444; }
#dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
#nav a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px;              /* Zielgröße für Touch (WCAG 2.5.5) */
    color: #999; text-decoration: none; border-radius: 22px;
}
#nav a .icon { font-size: 1.6rem; }
#nav a:hover, #nav a:focus-visible, #nav a[aria-current="page"] { color: #444; }
#nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 #444; border-radius: 0; }
#nav a:focus-visible, #accessibility:focus-visible, .footer-nav a:focus-visible {
    outline: 2px solid #444; outline-offset: 2px;
}
#fps {
    position: absolute; left: 8px; top: 8px; z-index: 2; pointer-events: none;
    font: 12px/1.3 ui-monospace, monospace; background: rgba(0,0,0,.6); color: #fff;
    padding: 3px 6px; border-radius: 4px; white-space: pre;
    display:none;
}
main { padding: 50px 0; }
#logo-container {
    position: absolute;
    left: 0; right: 0; top: 10px;
}
#logo {
    border:none;
    width: 100%;
    max-width: min(28vw, 200px);
    height: auto;
}
#accessibility {
    position: absolute;
    right: 0; 
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #888;
    font-size: 90%;
    text-decoration: none;
    background: none; border: 0; padding: 0; cursor: pointer;
}
#accessibility:hover, #accessibility:focus-visible { color: #444; }
#accessibility .check { display: none; }
#accessibility[aria-pressed="true"] .check { display: inline-flex; }

#accessibility * {
    color: inherit;
}

#accessibility .label {
    white-space: nowrap;
}

#accessibility:hover .label,
#accessibility:focus-visible .label,
#accessibility:active .label {
    border-bottom: 1px solid currentColor;
}

#accessibility .icon {

    line-height: 1; 
}
code.code-large {
    font-weight:bold;
}
/* Tabs: dunklere Linien, kein grauer Hintergrund beim aktiven Tab.
   Bootstrap setzt diese Variablen direkt auf .nav-tabs, daher hier überschreiben. */
.nav-tabs {
    --bs-nav-tabs-border-color: #adb5bd;
    --bs-nav-tabs-link-hover-border-color: transparent transparent #adb5bd;
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: #adb5bd #adb5bd var(--bs-body-bg);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: transparent;
}

h4, .h4 {
    text-transform: none;
}

  .footer-nav .nav-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }

  .footer-nav .nav-item:not(:last-child)::after {
    content: "·";
    margin-left: 0.6rem;
    margin-right: 0.6rem;
    color: var(--bs-secondary);
  }

  .footer-nav a {
    color:#999 !important;
  }
  .footer-nav .nav-item a:hover,
  .footer-nav .nav-item a:focus-visible {
    color:#444 !important;
    text-decoration:underline;
  }

/* Startseite mit Hash: Inhalt verborgen, bis die Seite zum Hash geladen ist (boot.js, pages.js) */
html.pending #content > * { visibility: hidden; }
#content:focus { outline: none; }

/* Sprunglink zum Inhalt, sichtbar nur mit Tastaturfokus */
.skip-link:focus {
    position: absolute; left: 16px; top: 8px; z-index: 10;
    padding: 8px 16px; background: #fff; color: #000; outline: 2px solid #444;
}

/* Barrierefreie Version: Kontrast mindestens 4,5:1 (#999 auf Weiß erreicht nur 2,8:1) */
html.a11y #nav a, html.a11y #motion, html.a11y #accessibility, html.a11y .footer-nav a { color: #595959 !important; }
html.a11y #nav a:hover, html.a11y #motion:hover, html.a11y #nav a[aria-current="page"],
html.a11y #accessibility:hover, html.a11y .footer-nav a:hover { color: #000 !important; }