:root {
    /* --- Custom Colors --- */
    --akzentfarbe: #1A6ECC;
    --akzentfarbedunkel: #1466c3;
    --standardfarbe: #54616d;
    --standardfarbedunkel: #505c68;
    --weiss: white;
    --rot: #E60000;
    --gruen: #00802B;
    --hellgrau: whitesmoke;
    --dunkelgrau: #515151;
    --mittelgrau: #eaeaea;
    --mittelgrau2: #ccc;
    --akzenthintergrund: aliceblue;
    --seitenleiste: #18202E;
    --menueleiste: #4B545E;
    --seitenleistetext: #c2c7d0;
    --warnung: lightyellow;


    /* --- Bootstrap 5 Variable Overrides --- */
    /* By setting these, all Bootstrap components (buttons, badges, alerts, etc.)
       will automatically use the custom theme colors. */
    --bs-primary: var(--akzentfarbe);
    --bs-primary-rgb: 26, 110, 204; /* RGB equivalent of #1A6ECC */
    --bs-secondary: var(--standardfarbe);
    --bs-secondary-rgb: 84, 97, 109; /* RGB equivalent of #54616d */    
}

 @font-face {
     font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 300;
     src: url("fonts/SourceSansPro-Regular.ttf") format("truetype");
 }
 
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: italic;
   font-weight: 400;
   src: url('fonts/source-sans-pro-v21-latin-ext_latin-italic.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 600;
   src: url('fonts/source-sans-pro-v21-latin-ext_latin-600.ttf') format('truetype');
 }


body {
  font-family: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.42857143;
  color: var(--standardfarbe);
  background-color: var(--weiss);
  /* Sticky footer setup */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Center the main content area based on the data- attributes in the HTML */
.r-body[data-body-align="center"] {
    margin-left: auto;
    margin-right: auto;
    float: none; /* Ensure floating doesn't prevent centering */
}

/* Apply a standard width to the content container */
.r-body[data-body-width="standard"] {
    max-width: 1140px; /* A common width for standard containers */
    padding-left: 15px;  /* Add padding to prevent content from touching screen edges */
    padding-right: 15px;
}

/* Apply a wider width for grid-based overview pages to allow for wider cards */
.r-body[data-body-width="wide"] {
    max-width: 1320px; /* Corresponds to Bootstrap's .container-xxl breakpoint */
    padding-left: 15px;
    padding-right: 15px;
}

/* Override Bootstrap's default container padding for content from the CMS */
.container {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 40px;
}

/* Set margin for the main content container, overriding inline styles */
.r-body {
    margin-top: 40px !important;
}

/* Main content wrapper for sticky footer */
.r-topbar-page {
    flex: 1 0 auto;
}

a {
  color: var(--akzentfarbe);
  text-decoration: none;
}

a:hover {
  color: var(--akzentfarbedunkel);
  text-decoration: none;
}

hr {
    margin-top: 21px;
    margin-bottom: 21px;
    border: 0;
    border-top: 4px solid var(--akzentfarbe);
    opacity: 1; /* Override Bootstrap's default opacity */
    width: 50px;
    margin-left: 0;
}

/* Button Customization */
.btn {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 20px;
    margin-right: 10px;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 150px;
}

/* Remove the default top margin from buttons when they are inside a table cell.
   This allows for proper vertical alignment within table rows. */
.table .btn {
    margin-top: 0;
}

.btn-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.btn:hover,
a.btn:hover {
    filter: brightness(90%); /* Fallback hover effect */
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Setzen der Grund-, Hover- und Aktiv-Farben für primäre Buttons. */
.btn-primary {
    background-color: var(--akzentfarbe) !important;
    border-color: var(--akzentfarbe) !important;
}
.btn-primary:hover {
    background-color: var(--akzentfarbedunkel) !important;
    border-color: var(--akzentfarbedunkel) !important;
}
/* Verhindert den blauen Fokus-Ring von Bootstrap, indem der Standard-Schatten beibehalten wird. */
.btn-primary:focus, .btn-primary:active, .btn-secondary:focus, .btn-secondary:active {
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
}

/* Setzen der Grund-, Hover- und Aktiv-Farben für sekundäre Buttons. */
.btn-secondary {
    background-color: var(--standardfarbe) !important;
    border-color: var(--standardfarbe) !important;
}
.btn-secondary:hover {
    --bs-btn-hover-bg: var(--akzentfarbedunkel);
    --bs-btn-hover-border-color: var(--akzentfarbedunkel);
}

/* Add a gap between Font Awesome icons and text in buttons and nav links */
.btn > i,
.nav-link > i {
    margin-right: 5px;
}

/* Navbar Customization */
.navbar.bg-dark {
    /* Override Bootstrap's default dark background */
    background-color: var(--menueleiste) !important;
    height: 50px;
}

/* Remove all padding from the navbar and its immediate container */
.navbar {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.navbar-brand {
    background-color: var(--akzentfarbe);
    padding-left: 1rem;
    padding-right: 1rem;
    height: 50px;
    display: flex;
    align-items: center;
}

/* Ensure brand name has no hover effects and text stays white */
.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--weiss);
    text-decoration: none;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--weiss);
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 16px;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    background-color: var(--akzentfarbe);
    text-decoration: none; /* Remove underline on hover */
    color: var(--weiss); /* Ensure text stays white on hover */
}

/* Darken nav-links that act as buttons (have a pre-set background) on hover */
.navbar-dark .navbar-nav .nav-link[style*="background"]:hover {
    background-color: var(--akzentfarbedunkel);
}

/* Style for the currently active page link */
.navbar-dark .navbar-nav .nav-item.active .nav-link {
    background-color: #1d2124;
}

/* --- Mobile Navbar Styling --- */
/* This media query targets screens smaller than the 'lg' breakpoint (992px) */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: var(--menueleiste);
        padding: 0.5rem 1rem; /* Add some padding for better spacing */
        margin-top: 1px; /* Add a small gap below the main navbar bar */
        /* Set a high z-index to ensure the collapsed menu appears above all other content,
           especially above .service-card elements which create their own stacking context. */
        position: relative; /* z-index requires a position other than static */
        z-index: 1050; /* A value higher than Bootstrap's sticky navbar (1020) and the cards (10) */
    }
}

/* On desktop, add padding to the right-aligned navbar items to create space from the edge of the viewport. */
@media (min-width: 992px) {
    .navbar .navbar-nav.ms-auto {
        padding-right: 1rem;
    }
}


/* Footer Customization */
footer {
    background-color: var(--hellgrau);
    padding: 0 15px 1.5rem;
    width: 100%;
    margin-top: 40px;
}

/* Ensure the footer content container aligns with the main body container */
footer .container {
    max-width: 1140px;
}

/* --- Footer Button Styling --- */

/* Center icons in all footer buttons */
footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto; /* Override general button min-width for footer icon buttons */
}

/* Make the standard (non-floating) footer buttons square for a cleaner look */
footer .btn:not(#topflow) {
    width: 60px;
    height: 40px;
    padding: 0;
}


/* Typography */
h1, .h1 {
    margin-top: 20px;
}

h2, .h2 {
    margin-top: 10px;
}

h3, .h3 {
    margin-top: 10px;
    /* Slightly smaller than Bootstrap's default (1.75rem) to better accommodate long German words. */
    font-size: 1.6rem;
}

/* Improve readability for main content elements by optimizing line breaks and setting an ideal line length.
   This rule is scoped to .r-content to avoid affecting UI components like the navbar. */
.r-content p, 
.r-content ul, 
.r-content li {
    max-width: 65ch;
    text-wrap: pretty;
    line-height: 1.6;
}

.dachzeile {
    font-size: 20px;
    font-weight: normal;
    margin-top: 40px;
    margin-bottom: 1rem;
}

/* Component Overrides: Badges */
.badge {
    /* Reduziert die Schriftgröße und -dicke, um die Badges subtiler zu machen. */
    /* Use 'rem' instead of 'em' to make the font size relative to the root font size (16px),
       not the parent element's font size. This ensures a consistent, smaller size.
       0.75rem = 12px */
    font-size: 0.75rem;
    font-weight: normal;

    /* Passt das Padding für ein kompakteres Aussehen an. */
    padding: 0.3em 0.6em;
}

/* Provide backward compatibility for Bootstrap 4 .badge-primary class.
   This ensures badges with the old class name still get the correct primary color. */
.badge.badge-primary {
    background-color: var(--bs-primary) !important;
    color: var(--weiss) !important;
}

/* Component Overrides: Accordion */
.accordion {
    --bs-accordion-border-color: var(--akzentfarbe);
    --bs-accordion-bg: var(--weiss);
    --bs-accordion-btn-bg: var(--akzentfarbe);
    --bs-accordion-btn-color: var(--weiss);
    --bs-accordion-active-bg: var(--akzentfarbe);
    --bs-accordion-active-color: var(--weiss);
    --bs-accordion-btn-focus-box-shadow: none; /* Remove focus ring */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    /* Add gap between items */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Ensure all accordion items have rounded corners to look like separate blocks */
.accordion-item {
    border-radius: var(--bs-accordion-border-radius) !important;
}

/* Restore the top border that Bootstrap removes for a connected look */
.accordion-item:not(:first-of-type) {
    border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

/* Override heading margin for accordion headers */
h2.accordion-header {
    margin-top: 0;
}

/* New wrapper link for service cards to make the entire card clickable
   without relying on the tricky .stretched-link class. */
a.service-card-link {
    text-decoration: none;
    color: inherit;
    display: flex; /* Ensure the link takes up the full space of the flex column */
    width: 100%;
}

/* Custom Component Styles: Service Cards */
.service-card {
    position: relative; /* Needed for the stretched-link to cover the card */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /* Force hardware acceleration to prevent font blurring on transform in some browsers (like Edge).
       This promotes the card to its own composite layer, leading to smoother animations and crisper text. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Apply hover effects to both the old structure (.service-card with a stretched-link inside)
   and the new, more robust structure (a.service-card-link wrapping the .service-card). */
.service-card:hover,
.service-card-link:hover .service-card {
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.service-card .card-header {
    /* Reduce font size to prevent long German words from breaking the layout in multi-column views. */
    font-size: 1.1rem;
    /* Enable hyphenation for very long words. Requires <html lang="de">. */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    /* As a fallback, allow words to break to prevent overflow. */
    overflow-wrap: break-word;
}

.service-card .card-body {
    color: var(--standardfarbe);
    /* Reduce vertical padding to better accommodate more text. */
    padding: 0.5rem 1rem;
    /* Add a smooth transition for the background color change on hover. */
    transition: background-color 0.2s ease-in-out;
}

/* On hover, change the background color of the card body. This now works reliably. */
.service-card-link:hover .card-body {
    background-color: var(--akzenthintergrund);
}

.service-card .card-body p {
    /* Remove default browser margin from paragraphs to reduce extra spacing. */
    margin-bottom: 0;
    /* Slightly reduce font size for a more compact look. */
    font-size: 0.9rem;
}

.service-card .card-body-highlight {
    background-color: var(--akzenthintergrund);
}

/* Special highlight for unique cards like 'AI' */
.service-card .card-body-highlight-special {
    background-color: var(--akzentfarbe);
    color: var(--weiss);
    border-top: 2px dotted var(--weiss);
    /* Inherit the parent card's bottom border radius to prevent the background
       from overflowing and hiding the rounded corners and box-shadow. */
    border-bottom-left-radius: var(--bs-card-border-radius);
    border-bottom-right-radius: var(--bs-card-border-radius);
}

/* --- Component Overrides: Tables --- */
/* Custom styling for table headers with .table-primary */
.table-primary {
    --bs-table-bg: var(--akzentfarbe);
    --bs-table-color: var(--weiss);
    --bs-table-border-color: var(--akzentfarbedunkel);
}

/* Custom hover effect for tables */
.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: var(--akzenthintergrund);
    /* Ensure text color remains consistent on hover */
    --bs-table-hover-color: var(--standardfarbe);
}

/* Custom styling for group headers within tables. */
.table > tbody > .link-group-header > * {
    background-color: var(--akzenthintergrund);
    /* This is the crucial part:
       Bootstrap's .table-striped uses an inset box-shadow to create the stripes.
       We must remove this shadow on our group headers to prevent the "mixed" color effect. */
    box-shadow: none;
}

/* --- Component Overrides: Nav Tabs --- */
/* Custom styling for nav-tabs to match the site's theme. */
.nav-tabs {
    /* Set the color for the full-width bottom border of the tab container. */
    --bs-nav-tabs-border-color: var(--mittelgrau2);
    --bs-nav-tabs-link-hover-border-color: var(--akzentfarbedunkel);
    --bs-nav-tabs-link-active-color: var(--dunkelgrau);
    --bs-nav-tabs-link-active-bg: var(--weiss);
    --bs-nav-tabs-link-active-border-color: var(--mittelgrau2);
}

.nav-tabs .nav-link {
    color: var(--akzentfarbe);
    font-weight: normal; /* Remove bold text as requested */
    border: 1px solid transparent; /* Set border to transparent for inactive tabs */
    margin: 0 1px -1px 1px; /* Reduced horizontal margin */
    padding: 0.5rem 0.75rem; /* Reduced horizontal padding to make tabs more compact */
    font-size: 1rem; /* Restore default font size for better readability */
    white-space: nowrap; /* Prevent text inside a tab from wrapping */
}

.nav-tabs .nav-link.active {
    border-bottom: 2px solid var(--akzentfarbe); /* Add the 2px solid bottom border for the active tab */
    border-color: var(--mittelgrau2) var(--mittelgrau2) var(--akzentfarbe) var(--mittelgrau2); /* Restore borders for active tab */
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    /* Invert colors on hover for a clear visual feedback */
    color: var(--weiss);
    background-color: var(--akzentfarbe);
    border-color: var(--akzentfarbe);
}

/* --- Component Overrides: Scrollable Nav Tabs --- */
/* This container enables horizontal scrolling for tab lists that are too wide for the viewport. */
.nav-tabs-scrollable-container {
    overflow-x: auto;
    overflow-y: hidden; /* Prevent vertical scrollbar from appearing */
    border-bottom: 1px solid var(--mittelgrau2); /* Add the bottom border to the container itself */
    /* For Firefox, make the scrollbar thin and match the theme */
    scrollbar-width: thin;
    scrollbar-color: var(--mittelgrau) transparent; /* Thumb color, Track color (invisible) */
}

/* Style the scrollbar for Webkit browsers (Chrome, Safari, Edge) to be visible but subtle. */
.nav-tabs-scrollable-container::-webkit-scrollbar {
    height: 6px; /* Make the scrollbar a bit thinner */
}

.nav-tabs-scrollable-container::-webkit-scrollbar-track {
    background: transparent; /* Make the track invisible */
}

.nav-tabs-scrollable-container::-webkit-scrollbar-thumb {
    background-color: var(--mittelgrau); /* The color of the scrollbar thumb */
    border-radius: 4px;
}

.nav-tabs-scrollable-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--dunkelgrau); /* Darken on hover for better feedback */
}

.nav-tabs-scrollable-container .nav-tabs {
    flex-wrap: nowrap; /* Crucial: Prevents the tabs from wrapping to the next line */
    border-bottom: none; /* Remove the border from the UL itself, as it's now on the container */
}

/* --- Component Overrides: Pagination --- */
/* Custom styling for the pagination component to match the site's theme. */
.pagination {
    --bs-pagination-color: var(--akzentfarbe);
    --bs-pagination-hover-bg: var(--akzenthintergrund);
    --bs-pagination-hover-border-color: var(--akzentfarbedunkel);
    --bs-pagination-active-bg: var(--akzentfarbe);
    --bs-pagination-active-border-color: var(--akzentfarbe);
    --bs-pagination-active-color: var(--weiss);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* --- Component Overrides: Forms --- */
/* Custom "glow" effect for focused input fields to match the theme's accent color. */
.form-control:focus {
    border-color: var(--akzentfarbe);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.4);
}

/* Styles for pages with a full-screen background image */
.page-with-bg {
    background-image: url('https://www.intex-publishing.de/cms/images/cms/loginscreen.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.page-with-bg .r-content {
    background-color: rgba(255, 255, 255, 0.97); /* Semi-transparent white background for content */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}


/* Mindestbreiten für Tabellen - etwa Preisliste */
.table-fixed tbody th,
.table-fixed tbody td {
  width: 200px;
  min-width: 200px;
  white-space: nowrap;
}


.r-body {
  min-height: calc(100vh - 100px); /* 100px = Footer-Höhe plus Padding */
}