[v-cloak] {
    display: none !important;
}

/* CSS-Variablen für moderne Farben und Schriftarten */
:root {
    --hdr-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    --card-bg: rgba(255, 255, 255, 0.8);
}

.container {
    /* max-width: 1140px; */ /* Removed max-width to allow full width */
}

/* Base gear animation for all devices */
/* Page layout: container, breadcrumb, header */
.page-container {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Breadcrumb styling (Downloads page first) */
.page-breadcrumb {
    --breadcrumb-separator-color: #c4c9d4;
    --breadcrumb-link-color: #212529;
    --breadcrumb-active-color: #000000;
    --breadcrumb-underline-color: #000000;
}

.page-breadcrumb .breadcrumb {
    margin-bottom: 0;
    background: transparent;
    padding: 0;
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: '\203A'; /* single chevron */
    color: var(--breadcrumb-separator-color);
    font-weight: 400;
}

.page-breadcrumb .breadcrumb-item a {
    color: var(--breadcrumb-link-color);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}

.page-breadcrumb .breadcrumb-item a:hover {
    border-bottom-color: var(--breadcrumb-underline-color);
}

.page-breadcrumb .breadcrumb-item.active {
    font-weight: 600;
}

.page-breadcrumb .breadcrumb-item.active::before {
    color: var(--breadcrumb-separator-color);
}

.rotating-gear {
    animation: rotate 10s linear infinite;
    transform-origin: center;
}

/* Desktop only hover effect */
@media (min-width: 768px) {
    .rotating-gear:hover {
        animation: rotate 2s linear infinite;
    }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Preview flag styling */
.preview-flag {
    background-color: #ff4444;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    top: -8px;
}

/* Mobile navigation adjustments */
@media (max-width: 767px) {
    .preview-flag {
        font-size: 0.65rem;
        padding: 1px 4px;
        top: -6px;
    }

    .navbar-collapse .dropdown {
        width: 100%;
    }
    
    .navbar-collapse .dropdown-menu {
        position: relative !important;
        width: 100%;
        transform: none !important;
        left: 0 !important;
        right: auto !important;
    }

    .navbar-collapse .dropdown .btn {
        width: 100%;
        text-align: left;
    }
    
    /* Add space between dropdowns in the navbar */
    .navbar .dropdown + .dropdown {
        margin-top: 8px;
    }

    .btn-outline-danger + .dropdown {
        margin-top: 8px;
    }

    .navbar-collapse .btn-outline-danger {
        width: 100%;
        text-align: left;
        padding: 0.375rem 0.75rem;  /* Bootstrap default button padding */
        margin-bottom: 8px;         /* Konsistenter Abstand wie bei Dropdowns */
        display: block;             /* Volle Breite */
    }
}

@media (min-width: 768px) {
    .navbar .dropdown + .dropdown {
        margin-left: 8px;
    }
    .btn-outline-danger + .dropdown {
        margin-left: 8px;
    }
}

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-bg);
    color: var(--color-fg);
}
main {
    flex: 1;
}



/* Footer Styles */
.rights-reserved {
    margin-left: 4px; /* Abstand im Desktop-Modus */
}

@media (max-width: 576px) {
    .rights-reserved {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }
}

/* Styles für die Card, die das Accordion umgibt */

/* Responsive profile image */
.profile-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--bs-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    object-fit: cover;
    padding: 0;
}

/* Wrapper for guest profile image to enable zoom without affecting border */
.profile-image-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--bs-primary);
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

/* Base styling for wrapper - will be overridden by specific classes below */
.profile-image-wrapper .profile-image {
    width: 100%;
    height: 100%;
    border: none;
    object-position: center center;
}

@media (max-width: 992px) {
    .profile-image {
        width: 60px;
        height: 60px;
    }
    .profile-image-wrapper {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 768px) {
    .profile-image {
        width: 50px;
        height: 50px;
    }
    .profile-image-wrapper {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 576px) {
    .profile-image {
        width: 40px;
        height: 40px;
    }
    .profile-image-wrapper {
        width: 40px;
        height: 40px;
    }
}

.profile-image:hover {
    transform: scale(1.05);
}

/* Wrapper auch für normale User (ohne initialen Zoom) */
.profile-image-wrapper:not(.profile-image-wrapper-guest) .profile-image {
    transform: scale(1.0); /* Kein initialer Zoom für normale User */
}

.profile-image-wrapper:not(.profile-image-wrapper-guest):hover .profile-image {
    transform: scale(1.1); /* Gleicher relativer Zoom-Anstieg wie bei Guidy */
}

/* Feinjustierung: Icons im Card-Header leicht anheben */
.card-header svg[data-icon] {
    position: relative;
    top: -2px;
}

/* Spezielle Klasse für Gast mit Zoom */
.profile-image-wrapper-guest .profile-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
}

.profile-image-wrapper-guest:hover .profile-image {
    transform: scale(1.05);
}

@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
        
    /* Die status-card ist unabhängig und wächst mit dem Inhalt */
    .status-card {
        height: auto;
        min-height: 160px;
    }
}

/* Responsive Titelgrößen */
@media (max-width: 992px) {
    h1.mb-0, h1.h3, .card-body h1 {
        font-size: 1.75rem; /* etwas kleiner auf Laptops/Tablets */
    }
    h2 {
        font-size: 1.5rem;
    }
}
@media (max-width: 768px) {
    h1.mb-0, h1.h3, .card-body h1 {
        font-size: 1.5rem; /* noch kleiner auf Tablets */
    }
    h2 {
        font-size: 1.25rem;
    }
}
@media (max-width: 576px) {
    h1.mb-0, h1.h3, .card-body h1 {
        font-size: 1.25rem; /* mobil */
    }
    h2 {
        font-size: 1.1rem;
    }
}

/* Support modal heading refinements */
.support-heading { line-height: 1.15; font-size: .95rem; }
.support-heading .dept-line { white-space: nowrap; display: flex; align-items: baseline; gap: .35rem; }
.support-heading .dept-abbr { font-weight: 600; letter-spacing: .5px; }
.support-heading .dept-full { font-weight: 400; font-size: .85rem; }
.support-heading .dept-subline { font-weight: 500; font-size: .75rem; color: var(--bs-secondary-color, #6c757d); }
.support-hours { line-height: 1.2; font-size:.68rem; }
.support-hours i { font-size: .68rem; }

/* Support item layout tweaks */
/* --- Unified Support Entries --- */
.support-entry { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; padding: .65rem .85rem; border: 1px solid #e6e8eb; border-radius: .5rem; background: #fff; }
.support-stack { display:flex; flex-direction:column; gap:.3rem; }
.support-entry.support-link { cursor:pointer; transition: background .15s ease, border-color .15s ease; }
.support-entry.support-link:hover { background:#eef4ff; border-color:#d0e0ff; text-decoration:none; }
.support-entry.support-link .support-title .abbr { color: var(--color-primary, #2f6bb3); }
.support-entry + .support-entry { margin-top: 0; }
.support-entry:hover { background:#f8f9fa; }
.support-icon { width: 34px; height:34px; border-radius:8px; background: rgba(var(--color-primary-rgb,47,107,179),0.12); color: var(--color-primary, #2f6bb3); display:flex; align-items:center; justify-content:center; font-size:1.15rem; }

.support-main { min-width:0; }
.support-title { font-weight:600; font-size:.9rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem; }
.support-title .abbr { font-weight:700; letter-spacing:.5px; }
.support-title .sep { opacity:.5; }
.support-sub { font-size:.68rem; text-transform:uppercase; letter-spacing:.7px; margin-top:1px; color:#6c757d; font-weight:500; }
.support-hours { margin-top:2px; display:flex; gap:.35rem; font-size:.68rem; color:#495057; line-height:1.25; }
.support-hours i { font-size:.68rem; margin-top:1px; color:#6c757d; }
.support-hours .nowrap { white-space:nowrap; }

.support-phones { display:flex; flex-direction:column; justify-content:center; gap:.45rem; font-size:.73rem; }
.support-phones .phone { display:flex; align-items:center; gap:.5rem; line-height:1.12; }
.support-phones .label { font-weight:600; color:#20262d; font-size:.74rem; }
.support-phones .pill { display:inline-block; background: var(--color-primary, #2f6bb3); color:#fff; padding:.3rem .62rem; border-radius:.7rem; font-size:.74rem; text-decoration:none; font-weight:600; line-height:1.05; letter-spacing:.15px; box-shadow:0 0 0 1px rgba(var(--color-primary-rgb,47,107,179),0.12); transition: background var(--transition-fast,120ms) ease, transform 120ms ease; }
.support-phones .pill:hover { background: var(--color-primary-hover, #245488); }
.support-phones .pill:active { transform:translateY(1px); }

/* Variante ohne Telefon-Spalte */
.support-entry.no-phones { grid-template-columns: auto 1fr; }
.support-entry.no-phones .support-main { display:flex; flex-direction:column; justify-content:center; }

@media (max-width: 575.98px) {
    .support-entry { grid-template-columns: auto 1fr; }
    .support-phones { flex-direction:row; flex-wrap:wrap; margin-top:.35rem; }
    .support-phones .phone { font-size:.68rem; }
}

@media (min-width: 992px) {
    .support-title { font-size:.95rem; }
    .support-sub { font-size:.65rem; }
    .support-hours { font-size:.68rem; }
}

@media (max-width: 767.98px) {
    /* On small screens hide the long ICT name to keep one line compact */
    .support-heading .dept-full { display: none !important; }
    .support-heading { font-size: .95rem; }
}

@media (min-width: 1200px) {
    .support-heading { font-size: 1rem; }
    .support-heading .dept-full { font-size: .9rem; }
}
/* Collapsible Cards */
.cursor-pointer {
    cursor: pointer;
}

.user-select-none {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Bootstrap Collapse Indicator Animation */
.card-header[data-bs-toggle="collapse"] .collapse-indicator {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

.card-header[data-bs-toggle="collapse"][aria-expanded="false"] .collapse-indicator {
    transform: rotate(-90deg);
}

/* Guidy Image Responsive Styling */
.guidy-image {
    max-width: 180px;
    width: 100%;
    height: auto;
}
/* Page layout: breadcrumb + header */
.page-breadcrumb {
    font-size: 0.875rem;
    /* Modern separator for Bootstrap breadcrumb (arrow instead of slash) */
    --bs-breadcrumb-divider: '›';
}

@media (max-width: 767px) {
    .guidy-image {
        max-width: 80px;
    }
}

.page-breadcrumb .breadcrumb {
    background-color: transparent;
    padding: 0;
}

.page-header {
    padding: .5rem 0 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.page-title {
    font-weight: 600;
}

.page-subtitle {
    font-size: 1.0rem;
}

@media (max-width: 575.98px) {
    .page-subtitle {
        font-size: 0.7rem;
    }
}

.guidy-image-small {
    height: 100px;
    width: auto;
}

@media (max-width: 575.98px) {
    .guidy-image-small {
        height: 60px;
    }
}


.page-toolbar.modern-toolbar {
    padding: 0;
    border-bottom: none;
}

.page-toolbar .toolbar-inner {
    width: 100%;
}

.page-toolbar .toolbar-search {
    min-width: 260px;
}

.page-toolbar .toolbar-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

.page-toolbar .toolbar-filter {
    min-width: 180px;
}

.page-toolbar .toolbar-clear {
    white-space: nowrap;
}

.page-toolbar .toolbar-result-count {
    min-width: 120px;
    text-align: left;
}

.page-toolbar .toolbar-card {
    max-width: 100%;
}

.toolbar-section-dropdown .dropdown-toggle {
    border-radius: 0.375rem;
}

.toolbar-section-dropdown .dropdown-menu {
    max-height: 260px;
    overflow-y: auto;
}

.toolbar-section-dropdown .dropdown-item.active {
    font-weight: 500;
}

/* Subtile mobile tuning for collection/directprint toolbars */
@media (max-width: 575.98px) {
    .page-toolbar .toolbar-card {
        padding-top: 0.85rem;
        padding-bottom: 0.9rem;
    }

    .page-toolbar .toolbar-result-count {
        min-width: 0;
    }

    /* Shrink and wrap long option labels in section filter on very small screens */
    .page-toolbar .form-select {
        font-size: 0.9rem;
        white-space: normal;
    }
}

/* Unified app card styling for welcome/tool/filter cards */
.app-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    background-color: #ffffff;
}

/* Datacenter specific styles cleaned up: no separate left search card anymore */

@media (max-width: 575.98px) {
    .page-header {
        flex-direction: row;
        align-items: center;
    }
}