/* assets/css/custom.css */

/* Gesamthöhe ausnutzen */
html {
	font-size: calc(16px * (1920.0 / 1920.0));
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
	background: #303D4D;
}

/* Konstanten für Header/Footer-Höhe (kannst du anpassen) */
:root {
    --ds-header-height: 20%;
    --ds-footer-height: 10%;
	--bs-border-width: 2px;
}

/* Footer unten */
.ds-footer {
    height: var(--ds-footer-height);
    background: #303D4D;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 0 1rem;
    color: #ffffff;
	font-size:2rem;
}


/* Hauptbereich zwischen Header und Footer */
.ds-main-container {
    height: calc(100vh - var(--ds-header-height) - var(--ds-footer-height));
    padding: 0;
}

/* Menü rechts */
.ds-menu-wrapper {
    height: 100%;
    overflow-y: auto;
    padding: 1rem;
	background: #303D4D;
	color:#ffffff;
}

.ds-menu-button {
    width: 100%;
	height: 6rem;
    margin-bottom: 0.5rem;
    font-size: 3rem;   /* Etwas größer für 86"-Touch */
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}


/* Hover für diesen Button komplett neutralisieren (BS5-Variablen überschreiben) */
.ds-menu-button.btn.btn-outline-primary{

  /* Hover = Normalzustand */
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);

  /* Focus “Glow” aus */
  --bs-btn-focus-shadow-rgb: 0,0,0; /* verhindert den farbigen Ring */
}

/* Zusätzlich: Browser/Bootstrap-Focus optisch weg (optional aber meist nötig) */
.ds-menu-button.btn.btn-outline-primary:focus,
.ds-menu-button.btn.btn-outline-primary:focus-visible{
  box-shadow: none !important;
  outline: none !important;
}
/* Content links */
.ds-content-wrapper {
    height: 100%;
	background: #303D4D;
}

#ds-content-frame {
    border: none;
    width: 100%;
    height: 100%;
}

/* Ticker unten */
.ds-ticker {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.ds-ticker-content {
    display: inline-block;
    padding-left: 100%;
    animation: ds-ticker-scroll 40s linear infinite;
}

.ds-ticker-item {
    display: inline-flex;
    align-items: center;
    margin-right: 3rem;
    font-size: 2rem;
    color: #ffffff;
}

.ds-ticker-cat {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 2rem;
    font-weight: 600;
    margin-right: 0.7rem;
    color: #000000; /* bleibt so, damit die farbige Kategorie lesbar ist */
}

.ds-ticker-date {
    opacity: 0.85;
    margin-right: 0.7rem;
}

.ds-ticker-title {
    font-weight: 500;
}

/* Animation */
@keyframes ds-ticker-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}


/* Uhr & Datum etwas größer */
#ds-date {
    font-size: 5.1rem;
}
#ds-clock {
    font-size: 5.8rem;
}

/* ===== Header Bigger Typography ===== */

.ds-header {
    height: var(--ds-header-height);
    background: #303D4D;
    color: #ffffff;
    padding: 0 3rem;
}

/* Titel links */
.ds-header .ds-title {
    font-size: 3.6rem;   /* vorher ~1.5–1.8rem */
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Datum */
#ds-date {
    font-size: 3.5rem !important;   /* vorher 1.1rem */
    font-weight: 500;
}

/* Uhrzeit */
#ds-clock {
    font-size: 4rem !important;  /* vorher 1.8rem */
    font-weight: 500;
    margin-top: -0.2rem;
}

/* ===== HEADER LAYOUT OPTIMIERT ===== */

.ds-header {
    height: var(--ds-header-height);
    background: #303D4D;
    padding: 0 3rem;
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 links, 1/3 rechts */
    align-items: center;
    color: #ffffff;
}

/* Linker Bereich: Logo + Titel */
.ds-header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Logogröße: optimal für 86" Touch bei 1080p */
.ds-logo {
    height: 6rem;
    width: auto;
    object-fit: contain;
}

/* Titel größer & prominenter */
.ds-title {
    font-size: 2.8rem;     /* Kannst du nach Wunsch anpassen */
    font-weight: 700;
    letter-spacing: 1px;
}

/* Rechter Bereich: Datum + Uhrzeit */
.ds-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;   /* <<< Sorgt für echte Rechtsbündigkeit */
    justify-content: center;
    text-align: right;       /* <<< Text ebenfalls rechts ausrichten */
    line-height: 1.2;
}


/* Datum (du hast es schon vergrößert – hier optimiert) */
.ds-header-date {
    font-size: 1.8rem;
    font-weight: 500;
	white-space: nowrap;   /* verhindert Zeilenumbruch */
}

/* Uhrzeit (auch schon vergrößert – hier fokussiert) */
.ds-header-clock {
    font-size: 3.2rem;
    font-weight: 700;
    margin-top: 0.25rem;
	white-space: nowrap;   /* verhindert Zeilenumbruch */
}