/* ============================== */
/* 1. CSS Variables (Design Tokens)
/* ============================== */
:root {
    /* Grautöne laut Corporate Design */
    --ppw-white: #ffffff;
    --ppw-gray-100: #f8f9fa; /* Sekundär 1 – Page-Hintergründe, große Flächen */
    --ppw-gray-200: #f5f5f5; /* Sekundär 1b – Box-Hintergründe, zarte Panels */
    --ppw-gray-300: #e0e0e0; /* Sekundär 3a – feine Trennlinien, leichte Umrandungen */
    --ppw-gray-400: #cccccc; /* Sekundär 3 – Linien, dezente Icons */
    --ppw-gray-500: #999999; /* Sekundär 3b – disabled Text, sekundäre Icons */
    --ppw-gray-600: #666666; /* Sekundär 4 – Metainfos, Labels, Footer */
    --ppw-gray-700: #444444; /* Sekundär 4b – Sekundärtext, passive Überschriften */
    --ppw-gray-800: #2a2a2a; /* Sekundär 2b – starke Texte auf hellem Hintergrund */
    --ppw-gray-900: #1a1a1a; /* Sekundär 2 – Fließtext, Überschriften */

    /* Alternative Kurzformen (optional, für Bootstrap-Kompatibilität) */
    --ppw-bg: var(--ppw-white); /* Hintergrund */
    --ppw-border: var(--ppw-gray-300); /* Border / Divider */
    --ppw-text: var(--ppw-gray-900); /* Haupttext */
    --ppw-text-muted: var(--ppw-gray-600); /* Meta/Fußzeile */


    --ppw-primary: #0077cc;
    --ppw-primary-rgb: 0, 119, 204;
    --ppw-primary-dark: #0061aa;

    --ppw-secondary-1: #f5f5f5;

    --bs-body-bg: var(--ppw-bg);
    --bs-body-color: var(--ppw-text);
    --bs-secondary-color: var(--ppw-text-muted);
    --bs-border-color: var(--ppw-border);


    --bs-primary: var(--ppw-primary);
    --bs-primary-rgb: var(--ppw-primary-rgb);

    --bs-btn-color: #00ff00;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);

    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;


    --color-primary: #ff0000;
    --bs-tertiary-bg: #729fcf;
    --bs-tertiary-bg-rgb: 114, 159, 207;
}

/* ============================== */
/* Typography
/* ============================== */

@font-face {
    font-family: 'Inter';
    src: url("../fonts/inter/Inter-Light-NVLth-z.woff2") format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url("../fonts/inter/Inter-Regular-ofDvCin.woff2") format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url("../fonts/inter/Inter-Medium-A6fsSHA.woff2") format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url("../fonts/inter/Inter-SemiBold-GyZPrHn.woff2") format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url("../fonts/inter/Inter-Bold-ZKGpacb.woff2") format('woff2');
    font-weight: 700;
    font-display: swap;
}

body {
    font-weight: 400; /* Inter Regular */

}

h1 {
    font-weight: 700; /* Inter Bold */
}

h2 {
    font-weight: 600; /* Inter SemiBold */
}

h3 {
    font-weight: 500; /* Inter Medium */
}

footer,
.small,
.text-muted {
    font-weight: 300; /* Inter Light */
}

strong,
b {
    font-weight: 600; /* Inter SemiBold */
}

em {
    font-style: italic;
}

/* ============================== */
/* Components
/* ============================== */

/* ---------- Breadcrumb ---------- */
/* -- Divider (ersetzt durch SVG icon) -- */
.breadcrumb-item + .breadcrumb-item::before {
    content: none !important;
}

/* -- Link-Farben und Hover-Verhalten -- */
.breadcrumb-item a {
    color: var(--ppw-gray-900);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--ppw-gray-700);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--ppw-gray-600);
}

/* -- Einzeilige Darstellung mit Ellipsis -- */
/*
Stellt sicher, dass Breadcrumbs nicht umbrechen.
Nur der letzte Eintrag (breadcrumb-item.active) wird bei Platzmangel
abgeschnitten und mit "…" versehen. Vorherige Items behalten volle Breite.
*/
.breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

.breadcrumb li {
    flex-shrink: 0;
    max-width: max-content;
}

.breadcrumb-item.active {
    flex-shrink: 1;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------- Navbar ---------- */

.navbar {
    border-bottom: 1px solid var(--ppw-gray-300);
}

.navbar-nav .nav-link {
    font-weight: 500;
    color: #1a1a1a;
    padding: 0.75rem 1rem;
    transition: color 0.2s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--ppw-primary);
}

.navbar-nav .nav-link.active {
    color: var(--ppw-primary);
    border-bottom: 2px solid var(--ppw-primary);
}

.navbar-toggler:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}


/* ---------- Button ---------- */

.btn-primary {
    background-color: var(--ppw-primary);
    color: white;
    border: 1px solid var(--ppw-primary);
}

.btn-primary:hover {
    background-color: var(--ppw-primary-dark);
    border-color: var(--ppw-primary-dark);
}

.btn-subtle {
    background-color: rgba(var(--ppw-primary-rgb), 0.08);
    color: var(--ppw-primary);
    border: 1px solid rgba(var(--ppw-primary-rgb), 0.2);
}

.btn-subtle:hover {
    background-color: rgba(var(--ppw-primary-rgb), 0.15);
    border-color: rgba(var(--ppw-primary-rgb), 0.3);
}

.btn-ghost {
    background-color: transparent;
    color: var(--ppw-primary);
    border: 1px solid var(--ppw-primary);
    padding: 0.375rem 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.btn-ghost:hover,
.btn-ghost:focus {
    background-color: rgba(var(--ppw-primary-rgb), 0.05);
    border-color: var(--ppw-primary-dark);
    color: var(--ppw-primary-dark);
    text-decoration: none;
}

.btn-ghost:disabled,
.btn-ghost[disabled] {
    opacity: 0.5;
    pointer-events: none;
    color: var(--ppw-primary);
    border-color: var(--ppw-primary);
}
/* ============================== */
/* Drill Detail
/* ============================== */
.layout-wrapper {
    aspect-ratio: 289 / 162;
    width: 100%;
    position: relative;
}

/* ============================== */
/* Turbo Frames
/* ============================== */

.layout-wrapper {
    position: relative;
}

.turbo-spinner {
    display: none;
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 10;
}

turbo-frame[busy] .layout-wrapper .turbo-spinner {
    display: flex;
}