:root {
    /* Primary colors (2027: red / orange) */
    --color-primary:  #b3261e;
    --color-primary-hover: #c2410c;

    /* Accent / Secondary colors */
    --color-accent: #ffb703;
    --color-accent-hover: #fb8500;

    /* Text colors */
    --color-text: #2b2321;
    --color-text-light: #4a3b37;
    --color-text-lighter: #7a6a63;

    /* Background colors */
    --color-background-light: #fff4ec;
    --color-background-lighter: #ffe3d1;
    --color-background-navbar: #b3261e;
    --color-background-pagination: #b3261e;
    --color-background-pagination-active: #7a1010;
    --color-background-pagination-disabled: #f1e4dc;

    /* Navbar Gradient Colors */
    --navbar-gradient-start: #6b0f1a;
    --navbar-gradient-middle: #b3261e;
    --navbar-gradient-end: #c2410c;

    /* Tag colors (5 Levels) */
    --color-tag-0: #ff8a5c;
    --color-tag-1: #ff9f43;
    --color-tag-2: #ffb266;
    --color-tag-3: #ffc999;
    --color-tag-4: #ffd8a8;

    /* Audience colors */
    --color-audience-all: #6b7680;
    --color-audience-beginner: #247c39;
    --color-audience-intermediate: #9a6700;
    --color-audience-advanced: #be0f21;
    --color-audience-women: #904aa5;

    /* Sponsor tiers */
    --color-diamond-sponsors: #a8e6cf;
    --color-gold-sponsors: #ffd93d;
    --color-silver-sponsors: #d1d1d1;
    --color-bronze-sponsors: #cd7f32;
    --color-iron-sponsors: #e0e0e0;
    --color-partners: #999999;

    /* Miscellaneous colors and heights */
    --color-shadow: rgba(60, 20, 10, 0.08);
    --color-navbar-text: white;
    --color-navbar-text-hover: #fff1c9;
    --color-navbar-underline: #ffb703;
    --color-navbar-subtitle: #ffe1cc;
    --color-info-box-border: #f6e3d8;
    --color-dark-box: #2a1512;
    --color-dark-box-text: #fff1e8;
    --color-dark-box-link: #ffc999;
    --gradient-accent: linear-gradient(90deg, #b3261e, #e8590c 55%, #ffb703);
    --navbar-height: 70px;
    --navbar-height-sm: 60px;
    --navbar-underline-bottom: 12px; /* Distance of underline from bottom of navbar */
}

/* ===== Fonts ===== */
/* Normal + Bold */
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSans3-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* Italic + Italic Bold */
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSans3-Italic-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

/* ===== Base Typography ===== */
html, body, h1, h2, h3, h4, h5, h6, p, li, blockquote, .navbar, .sidebar, footer {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

#content p,
#content li,
.summary p,
.summary li {
    font-size: 1.7rem;
    line-height: 2.5rem;
}

p {
    padding-bottom: 1rem;
    line-height: 3.5rem;
}

.btn,
.btn-xs {
    font-size: 1.6rem;
}

/* Responsive formatting for headings */
#content h1, h1.entry-title { font-size: clamp(2.6rem, 4vw, 2.9rem); font-weight: 600; }  
#content h2, article h2 { font-size: clamp(2.3rem, 3.5vw, 2.6rem); font-weight: 500; } 
#content h3 { font-size: clamp(2.0rem, 3vw, 2.3rem); font-weight: 500; color: var(--color-text-light); }
#content h4 { font-size: clamp(1.8rem, 2.5vw, 2rem); font-weight: 500; color: var(--color-text-lighter); }

/* Header padding to fix visibility of anchor links */
#content h2, #content h3, #content h4 { padding: 1.5rem 0 0; }

/* ===== Blog Posts, Talks, and Workshops ===== */
.post-info .published,
.post-info .audience {
    margin-right: 2rem;
}

.speaker,
.article-date,
.audience {
    font-size: 1.7rem;
    color: var(--color-text);
}

.post-info .label {
    font-size: 1.5rem;
}

div.summary h2 {
    font-size: 2.8rem;
}

div.summary h3 {
    font-size: 2rem;
}

hr {
    border-width: 0.2rem;
}

.audience {
    text-transform: capitalize;
    white-space: nowrap;
}

/* ===== Footnotes ===== */
sup a.footnote-ref {
    white-space: nowrap;
    margin-left: 0.2rem;
    text-decoration: none;
}

/* ===== Links and Buttons ===== */
#content a, article a, footer a,
#content a:visited, article a:visited, footer a:visited {
    color: var(--color-primary);
}

#content a:hover, article a:hover, footer a:hover {
    color: var(--color-primary-hover);
}

#sidebar a {
    text-decoration: underline dotted var(--color-text-lighter);
    text-underline-offset: 0.5rem;
}

#sidebar a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline solid var(--color-primary-hover);
}

#content a.btn, article a.btn {
    background-color: var(--color-accent);
    color: var(--color-text);
    padding: 0.6rem 1rem;
    border: 0.2rem solid var(--color-text-lighter);
}

#content a.btn:hover, article a.btn:hover, #content a.btn:focus, article a.btn:focus  {
    background-color: var(--color-accent-hover);
    color: var(--color-text);
    border-color: var(--color-primary-hover);
}

a:focus-visible,
button:focus-visible {
    outline: 0.2rem solid var(--color-primary-hover);
    outline-offset: 0.2rem;
}

.navbar a:focus-visible { color: white !important; }

#content ul.pagination a {
    color: white;
    background-color: var(--color-background-pagination);
}

#content ul.pagination a:hover {
    background-color: var(--color-primary-hover);
}

#content ul.pagination li.active a {
    background-color: var(--color-background-pagination-active);
}

#content ul.pagination li.disabled a,
#content ul.pagination li.disabled a:hover {
    background-color: var(--color-background-pagination-disabled);
    color: black;
}

/* ===== Header ===== */
.page-header {
    margin: 0;
    padding: 0;
}

.page-header + article h2 {
    margin-top: 0.5rem;
}

h1.entry-title + .entry-content > p:first-of-type {
    margin-top: 3rem;
}

/* ===== Responsive YouTube Videos ===== */
.videobox,
.video-wrapper {
    position: relative;
    display: block;
    width: 100%;
    max-width: 64rem;
    margin: 2rem auto;
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
}

.videobox iframe,
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 992px) {
    .videobox,
    .video-wrapper {
        max-width: 100%;
        margin: 4rem auto;
    }
}

/* ===== Metadata in Article Listings ===== */
.meta span i,
.meta .audience i {
    margin-right: 0.4rem;
}

.meta .speaker,
.meta .audiences .audience {
    margin-right: 1rem;
}

.audience-all { color: var(--color-audience-all); }
.audience-beginner { color: var(--color-audience-beginner); }
.audience-intermediate { color: var(--color-audience-intermediate); }
.audience-advanced { color: var(--color-audience-advanced); }
.audience-women { color: var(--color-audience-women); }

/* ===== Speaker Box Styling ===== */
.speaker-box {
    margin: 3rem 0;
    padding: 2.5rem;
    background-color: var(--color-background-light);
    border-left: 0.4rem solid var(--color-primary-hover);
    border-radius: 0.5rem;
    box-shadow: 0 0.2rem 0.5rem var(--color-shadow);
    overflow: hidden;
    clear: both;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
}

.speaker-photo {
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
}

.speaker-info {
    flex: 1;
}

.speaker-info h3 {
    margin: 0 0 1.5rem;
    color: var(--color-text);
    font-size: 1.4em;
}

.speaker-bio {
    margin: 1.5rem 0;
    line-height: 1.6;
    color: inherit;
}

.speaker-bio p {
    margin-bottom: 1.5rem;
}

.speaker-bio ul {
    margin-left: 2rem;
    padding-left: 0;
}

.speaker-social {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.speaker-social .social-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.2s ease;
    padding: 0.5rem 1rem;
    border-radius: 0.4rem;
}

.speaker-social .social-link:hover {
    color: var(--color-primary-hover);
    text-decoration: none;
    background-color: rgba(194, 65, 12, 0.1);
}

.speaker-social i {
    margin-right: 0.6rem;
    font-size: 1.1em;
    width: 1.8rem;
    text-align: center;
}

/* ===== Tag Cloud Styling ===== */
ul.tagcloud {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.tagcloud li {
    display: inline-block;
    margin: 0.3rem;
}

ul.tagcloud li a {
    border-radius: 0.4rem;
    color: #000;
    padding: 0.2rem 0.6rem;
}

ul.tagcloud li.tag-0 a {
    font-size: 2.1rem;
    background-color: var(--color-tag-0);
    padding: 0.6rem 1.2rem;
}

ul.tagcloud li.tag-1 a {
    font-size: 1.7rem;
    background-color: var(--color-tag-1);
    padding: 0.5rem 1rem;
}

ul.tagcloud li.tag-2 a {
    font-size: 1.4rem;
    background-color: var(--color-tag-2);
    padding: 0.4rem 0.8rem;
}

ul.tagcloud li.tag-3 a {
    font-size: 1.25rem;
    background-color: var(--color-tag-3);
    padding: 0.3rem 0.7rem;
}

ul.tagcloud li.tag-4 a {
    font-size: 1.1rem;
    background-color: var(--color-tag-4);
    padding: 0.2rem 0.6rem;
}

ul.tagcloud li a:hover {
    background-color: var(--color-primary-hover);
    color: #fff !important;
    text-decoration: none;
}


    /* Speaker box adjustments */
    .speaker-box {
        flex-direction: column;
        text-align: center;
    }

    .speaker-photo {
        margin: 0 auto 1.5rem;
    }

    .speaker-social {
        justify-content: center;
    }

/* ===== Hover Styles ===== */
a:hover,
button:hover {
    color: var(--color-primary-hover);
    text-decoration-style: solid;
}

/* ===== Info Box Styling ===== */
.info-box {
    border: 0.5rem solid var(--color-info-box-border);
    padding: 2rem;
    margin: 3rem 0;
}

/* ===== Sponsor Logos ===== */

/* Sponsor Grid Container (mit farbigem Rand) */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 2rem 0 4rem;
  padding: 1rem;
  background-color: var(--color-background-light);
  border-radius: 8px;
  border-left: 4px solid transparent; /* Farbiger Rand für die Gruppe */
}

/* Farbige Ränder für die Gruppen */
.sponsor-grid.partner { border-left-color: var(--color-partners); }
.sponsor-grid.iron { border-left-color: var(--color-iron-sponsors); }
.sponsor-grid.bronze { border-left-color: var(--color-bronze-sponsors); }
.sponsor-grid.silver { border-left-color: var(--color-silver-sponsors); }
.sponsor-grid.gold { border-left-color: var(--color-gold-sponsors); }
.sponsor-grid.diamond { border-left-color: var(--color-diamond-sponsors); }

/* Sponsor Item Styling (ohne eigenen Rand) */
.sponsor-item {
  text-align: center;
  padding: 1rem;
  transition: transform 0.2s;
}

.sponsor-item:hover {
  transform: translateY(-5px); /* Leichter Hover-Effekt */
}

/* Sponsor Logo Styling */
.sponsor-logo {
  display: block;
  margin: 0 auto;
  max-width: 200px;
  max-height: 120px;
  object-fit: contain;
  filter: grayscale(0%);
  transition: filter 0.2s;
}

.sponsor-item:hover .sponsor-logo {
  filter: grayscale(0%) brightness(1.1);
}

.sponsor-name {
  margin-top: 0.5rem;
  font-weight: 500;
  color: #555;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .sponsor-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================
   Navbar Styling with Unified Underline
   ================================ */

/* Base colors and sizes */
:root {
    --navbar-height: 9.5rem;           /* Gesamt-Höhe der Navbar */
    --navbar-height-sm: 70px;        /* Mobile Höhe */
    --navbar-underline-bottom: 8px;  /* Abstand der Unterlinie vom unteren Rand */
}

/* Navbar Container */
.navbar {
    min-height: var(--navbar-height);
    padding: 0 15px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;

    /* Smooth gradient background using custom properties */
    background: linear-gradient(
        90deg,
        var(--navbar-gradient-start),
        var(--navbar-gradient-middle),
        var(--navbar-gradient-end)
    );
    box-shadow: 0 0.4rem 0 var(--color-accent), 0 0.6rem 1.6rem rgba(60, 20, 10, 0.25);
}

/* Navbar Brand: Logo + Title + Subtitle */
.navbar-brand {
    display: flex;
    align-items: center;  /* Vertical alignment matches nav links */
    gap: 15px;
    height: var(--navbar-height);
}

/* Logo inside brand */
.navbar-brand img {
    height: 120%;
    width: auto;
    object-fit: contain;
}

/* Title + Subtitle Block */
.navbar-brand .title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative; /* Needed for underline */
    height: 100%;       /* Full height of navbar for alignment */
    margin-right: 1rem;
}

/* Site Title */
.navbar-brand .site-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-navbar-text);
}

/* Subtitle */
.navbar-brand .navbar-subtitle {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-navbar-subtitle);
    margin-top: 0.6rem;
}

/* Nav Links */
.navbar-nav > li > a {
    display: flex;
    align-items: center;
    height: var(--navbar-height);
    color: var(--color-navbar-text);
    position: relative; /* For underline */
    font-size: 1.6rem;
}

/* Hover: Text color */
.navbar-brand:hover .site-title,
.navbar-nav > li > a:hover {
    color: var(--color-navbar-text-hover) !important;
}

/* Unified underline for Title-Container & Nav Links */
.navbar-nav > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: var(--navbar-underline-bottom);
    width: 0;
    height: 3px;
    background-color: var(--color-navbar-underline);
    transition: width 0.3s ease;
}

/* Hover effect: expand underline */
.navbar-brand:hover .title-container::after,
.navbar-nav > li > a:hover::after {
    width: 100%;
}

/* Body padding for fixed navbar */
body {
    padding-top: calc(var(--navbar-height) + 10px);
}

/* ================================
   Responsive Adjustments
   ================================ */
@media (max-width: 768px) {
    :root {
        --navbar-height: var(--navbar-height-sm);
    }

    .navbar {
        min-height: var(--navbar-height-sm);
    }

    .navbar-brand {
        gap: 10px;
        height: var(--navbar-height-sm);
    }

    .navbar-brand img {
        height: 100%;
    }

    .navbar-brand .site-title {
        font-size: 1.8rem;
    }

    .navbar-brand .navbar-subtitle {
        font-size: 1.2rem;
    }

    .navbar-brand .title-container::after,
    .navbar-nav > li > a::after {
        bottom: var(--navbar-underline-bottom);
    }

    .navbar-nav > li > a {
        display: block;
        width: 100%;
        padding: 0.8rem 1rem;
        font-size: 1.5rem;
        height: auto;
        position: relative;
    } 
    
    body {
        padding-top: calc(var(--navbar-height-sm) + 10px);
    }
}


/* ================================
   2027: more dynamic look
   ================================ */

/* Warm text color (the Bootstrap theme sets a blue-grey one) */
body, #content, #content h1, #content h2, h1.entry-title, article h2 {
    color: var(--color-text);
}

.faq-question .fa {
    color: var(--color-primary);
}

/* Accent bar under page headings */
#content h1,
h1.entry-title {
    position: relative;
    padding-bottom: 1.2rem;
}

#content h1::after,
h1.entry-title::after {
    content: "";
    display: block;
    width: 8rem;
    height: 0.6rem;
    margin-top: 1rem;
    background: var(--gradient-accent);
    transform: skewX(-25deg);
    transform-origin: left;
}

/* Sidebar: warm background with a colored top edge */
.well {
    background-color: var(--color-background-light);
    border: 0;
    border-top: 0.5rem solid transparent;
    border-image: var(--gradient-accent) 1;
    box-shadow: 0 0.4rem 1.2rem var(--color-shadow);
}

.well .list-group-item {
    background: transparent;
    border-color: var(--color-background-lighter);
}

#sidebar h4 {
    color: var(--color-primary);
}

/* Inline code / address blocks */
pre {
    background: var(--color-background-light);
    border: 0;
    border-left: 0.5rem solid var(--color-accent-hover);
    color: var(--color-text-light);
}

/* Buttons and links react to hover / focus */
#content a.btn, article a.btn {
    border-color: var(--color-primary);
    box-shadow: 0 0.3rem 0 var(--color-primary);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

#content a.btn:hover, article a.btn:hover,
#content a.btn:focus, article a.btn:focus {
    transform: translateY(-0.2rem);
    box-shadow: 0 0.5rem 0 var(--color-primary-hover);
}

#content a, article a, footer a {
    transition: color 0.15s ease;
}

#content ul.pagination a {
    transition: background-color 0.15s ease, transform 0.15s ease;
}

#content ul.pagination a:hover {
    transform: translateY(-0.2rem);
}

/* Tags */
ul.tagcloud li a {
    color: #000;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

ul.tagcloud li a:hover {
    background-color: var(--color-primary-hover);
    color: #fff !important;
    transform: rotate(-3deg) scale(1.08);
}

.label-default, .tag a, #sidebar .label {
    color: #000;
}

/* Speaker box: gradient edge */
.speaker-box {
    border-left: 0;
    border-image: none;
    position: relative;
    background-color: var(--color-background-light);
}

.speaker-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.6rem;
    background: linear-gradient(180deg, #b3261e, #ffb703);
}

/* Sponsor tiles: livelier hover */
.sponsor-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sponsor-item:hover {
    box-shadow: 0 0.6rem 1.4rem var(--color-shadow);
}

/* Notice for two-click content: warm dark box instead of the neutral default */
.embed-consent[data-ready] {
    background: var(--color-dark-box);
    color: var(--color-dark-box-text);
    border-left: 0.6rem solid var(--color-accent);
}

.embed-consent .embed-consent-box a {
    color: var(--color-dark-box-link) !important;
    border-bottom-color: var(--color-dark-box-link) !important;
}

.embed-consent .embed-consent-box .embed-consent-load {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-dark-box);
}

.embed-consent .embed-consent-box .embed-consent-load:hover,
.embed-consent .embed-consent-box .embed-consent-load:focus {
    background: #fff1c9;
    border-color: #fff1c9;
    color: var(--color-dark-box);
}

/* Footer */
footer hr {
    border-top: 0.4rem solid transparent;
    border-image: var(--gradient-accent) 1;
}

/* ===== Motion (only for visitors who do not reduce motion) ===== */
@media (prefers-reduced-motion: no-preference) {
    /* Content fades in from below */
    #content, #sidebar aside {
        animation: fade-up 0.5s ease-out both;
    }

    #sidebar aside {
        animation-delay: 0.1s;
    }

    @keyframes fade-up {
        from { opacity: 0; transform: translateY(1.2rem); }
        to   { opacity: 1; transform: none; }
    }

    /* Accent bar under headings grows in */
    #content h1::after,
    h1.entry-title::after {
        animation: bar-grow 0.7s 0.2s ease-out both;
    }

    @keyframes bar-grow {
        from { transform: skewX(-25deg) scaleX(0); }
        to   { transform: skewX(-25deg) scaleX(1); }
    }
}