/* Self-hosted Lato. Regenerate with scripts/fetch_fonts.py.
   Filenames carry a content hash, so app/static_assets.py may serve them
   with an immutable one-year cache. See docs/webfonts-and-privacy.md. */

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/lato-300-latin-ext.5627143a.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/lato-300-latin.115f6a62.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/lato-400-latin-ext.8b9fc973.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/lato-400-latin.918b7dc3.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/lato-700-latin-ext.3a5797f4.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/lato-700-latin.c447dd76.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Color system and global custom properties */
:root {
    color-scheme: light only;  /* Force light mode, disable dark mode */
    --color-primary: #C84023;
    --color-accent-1: #5b3125;
    --color-accent-2: #933a27;
    --color-accent-3: #cb4329;
    --color-dark: #232923;
}

/* Base typography and body defaults */
html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    background: #ffffff;
    color: var(--color-dark);
    font-weight: 300;
    line-height: 1.6;
    /* No overflow or max-width here on purpose: setting overflow-x on the body
       computes its overflow-y to auto, which turns the body into a scroll
       container nested inside the document scroller. Scroll gestures then land
       in it, move its few pixels of range and stop, so the page appears stuck.
       Horizontal overflow is already clipped by the html element above. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}



/* Layout wrapper for main content */
.page-content {
    outline: none;
    padding-top: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f4f5f9;
}


/* Header layout container */
.app-header {
    background-color: rgba(255, 255, 255, 0.92);
    padding: 12px 1.5rem 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Navigation container */
.app-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Burger button */
.burger-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border: none;
    background: transparent;
    padding: 8px;
    cursor: pointer;
    z-index: 1200;
}

.burger-button:focus-visible {
    outline: 2px solid rgba(200, 64, 35, 0.6);
    outline-offset: 4px;
}

.burger-button .burger-line {
    width: 30px;
    height: 3px;
    background-color: #c84023;
    display: block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.burger-button-open .burger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.burger-button-open .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-button-open .burger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.nav-menu-link {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-menu-link:hover,
.nav-menu-link:focus {
    text-decoration: none;
    opacity: 0.85;
}

#nav-menu {
    position: absolute;
    top: 64px;
    right: 0;
    width: 220px;
    z-index: 1100;
}

#nav-menu.nav-menu-panel {
    background: linear-gradient(135deg, rgba(91, 49, 37, 0.92), rgba(148, 58, 39, 0.92));
    border-radius: 16px;
    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.4);
    padding: 18px;
}

#nav-menu .nav-menu-link {
    width: 100%;
    display: block;
    color: rgba(255, 255, 255, 0.92);
}

#nav-menu .nav-menu-link + .nav-menu-link {
    margin-top: 12px;
}

@media (min-width: 768px) {
    #nav-menu {
        top: 60px;
        width: 240px;
    }
}

.mantine-Button-root {
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 30px;
    height: 50px;
    padding: 0 24px;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background-color: transparent;
}


.theme-toggle {
    font-size: 0.85rem;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 10px;
    background: #ff6b00;
    color: rgba(255, 255, 255, 0.92);
    padding: 8px 12px;
    z-index: 1000;
}

.skip-link:focus {
    left: 16px;
}

.logo {
    height: 52px;
    width: auto;
}

.nav-link {
    color: var(--color-dark);
    text-decoration: none;
    font-weight: 500;
}

.nav-link:hover,
.nav-link:focus {
    text-decoration: none;
}

.home-sections {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Ensure all containers align properly */
.home-sections .mantine-Container-root {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .home-sections .mantine-Container-root {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Hero banner settings */
.hero-full {
    position: relative;
    background-size: cover;
    background-position: center;
    color: rgba(255, 255, 255, 0.92);
    padding-top: 180px;
    padding-bottom: 160px;
    background-color: rgba(200, 64, 35, 0.9);
    background-blend-mode: overlay;
}

.hero-full::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(35, 41, 35, 0.82), rgba(200, 64, 35, 0.55));
}

.hero-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;
}

.hero-text {
    max-width: 640px;
    align-items: flex-start;
}

.hero-heading {
    font-size: 3.4rem;
    line-height: 1.1;
    font-weight: 400;
}

.hero-subtitle {
    font-size: 1.15rem;
    max-width: 520px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 300;
}

.hero-scroll a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.12em;
}

/* KI-basierte Lösungen section overlay */
.work-strip {
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    position: relative;
    background-color: rgba(91, 49, 37, 0.75);
    background-blend-mode: overlay;
}

.work-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(203, 67, 41, 0.65), rgba(203, 67, 41, 0.45));
}

.work-strip::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 60px;
    background: rgba(31, 41, 55, 0.6);
    filter: blur(60px);
}

.work-container {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.92);
    max-width: 700px;
}

.work-container .mantine-Title-root {
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.work-container .mantine-Button-root {
    min-width: 190px;
}

.work-container .mantine-Text-root {
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.15rem;
    font-weight: 300;
    text-align: left;
}

.work-text {
    align-items: flex-start;
    text-align: left;
    width: 100%;
}


.section-title {
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 0.75rem 0;
    text-align: center;
    width: 100%;
}

.section-paragraph {
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.6;
    text-align: left;
    width: 100%;
    align-self: stretch;
}

/* Services grid section */
.services-section {
    margin-top: -60px;
    padding-top: 96px;
    padding-bottom: 96px;
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.09);
    overflow: hidden;
    position: relative;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Ensure services grid aligns all columns to top */
.services-section .mantine-Grid-root {
    align-items: stretch;
}

.services-section .mantine-Col-root {
    display: flex;
    align-items: stretch;
}

.services-section .mantine-Stack-root {
    text-align: center;
}

.services-section .mantine-Title-root {
    margin-bottom: 2rem;
}

.services-section::before {
    content: '';
    position: absolute;
    top: -120px;
    left: -40%;
    width: 180%;
    height: 180px;
    background: radial-gradient(circle at top, rgba(91, 49, 37, 0.18), rgba(91, 49, 37, 0));
    pointer-events: none;
}

.services-button {
    display: inline-flex;
    text-decoration: none;
}

.services-button:hover,
.services-button:focus {
    text-decoration: none;
}

/* Individual service card appearance */
.service-card {
    background-color: rgba(255, 255, 255, 0.92);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(35, 41, 35, 0.08);
}

.service-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.service-icon img {
    height: 64px;
    width: 64px;
    filter: brightness(0) saturate(100%) invert(29%) sepia(76%) saturate(2178%) hue-rotate(349deg) brightness(95%) contrast(89%);
}

.service-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.service-card-link:hover,
.service-card-link:focus {
    text-decoration: none;
}
.service-link {
    margin-top: auto;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.service-card-link:hover .service-card {
    transform: translateY(-6px);
    box-shadow: 0 20px 55px rgba(35, 41, 35, 0.18);
}

.service-link:hover,
.service-link:focus {
    text-decoration: none;
}

/* Unsere Werte banner styling */
.values-banner {
    background-size: cover;
    background-position: center;
    margin-top: 40px;
    padding: 100px 0;
    color: rgba(255, 255, 255, 0.92);
    position: relative;
    background-color: rgba(200, 64, 35, 0.9);
    background-blend-mode: overlay;
}

.values-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(35, 41, 35, 0.82), rgba(200, 64, 35, 0.55));
}

.values-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 100%;
}

.values-inner .mantine-Text-root {
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    text-align: left;
    width: 100%;
    align-self: stretch;
}

.values-inner > a {
    align-self: center;
    display: inline-flex;
    width: auto;
}

.values-inner .mantine-Anchor-root {
    align-self: center;
    display: inline-flex;
    width: auto;
}

.values-inner .mantine-Button-root {
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.92);
}

.values-inner .mantine-Button-root:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.work-link .mantine-Button-root {
    border-color: rgba(255, 255, 255, 0.92);
    color: rgba(255, 255, 255, 0.92);
}

.work-link .mantine-Button-root:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Footer layout */
.app-footer {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(35, 41, 35, 0.08);
    padding: 0.5rem 0 !important;
    min-height: 0 !important;
    max-height: 60px !important;
}

.footer-container {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem !important;
    align-items: center;
    min-height: 0 !important;
}

.footer-container .mantine-Text-root {
    font-size: 0.8rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.footer-container .mantine-Anchor-root {
    font-size: 0.8rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.footer-container .mantine-Group-root {
    gap: 0.5rem !important;
}

.footer-container a {
    color: var(--color-primary);
    text-decoration: none;
}

.footer-container a:hover,
.footer-container a:focus {
    text-decoration: none;
}

/* Prevent all Mantine Anchor components from showing underlines on hover */
.mantine-Anchor-root:hover,
.mantine-Anchor-root:focus {
    text-decoration: none !important;
}

/* Ensure footer and navigation links never show underlines */
.footer-container .mantine-Anchor-root,
.nav-menu-link,
a.nav-menu-link {
    text-decoration: none !important;
}

.footer-container .mantine-Anchor-root:hover,
.footer-container .mantine-Anchor-root:focus,
.nav-menu-link:hover,
.nav-menu-link:focus,
a.nav-menu-link:hover,
a.nav-menu-link:focus {
    text-decoration: none !important;
}

.projects-page {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding-bottom: 80px;
}

.projects-hero {
    background-color: #c84a28;
    color: rgba(255, 255, 255, 0.92);
    padding: 80px 0 67px;
}

.projects-hero-container {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.projects-hero-title {
    font-size: 3.2rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.projects-hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.88);
}

.projects-intro {
    margin-top: 0;
    padding: 0 0 16px;
}

.projects-intro .mantine-Text-root {
    font-size: 1.05rem;
    color: rgba(35, 41, 35, 0.78);
}

.projects-list {
    padding-top: 20px;
}

.projects-empty .mantine-Alert-root {
    border-radius: 16px;
}

.project-tile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 32px;
    border-bottom: 3px solid var(--color-primary);
}

.project-tile-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.project-tile-link:hover .project-tile,
.project-tile-link:focus .project-tile {
    border-bottom-color: #a83418;
}

.project-tile-image-wrapper {
    display: block;
    overflow: hidden;

}

.project-tile-image {
    width: 100%;
    /* The height attribute responsive_img() emits is a presentational hint, and a
       resolved height makes the browser ignore aspect-ratio. Keep height auto. */
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.project-tile-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-primary);
}

.project-tile-summary {
    color: rgba(35, 41, 35, 0.76);
    font-size: 0.95rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-detail-page {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding-bottom: 96px;
}

.project-detail-hero {
    position: relative;
    padding: 140px 0 120px;
    color: rgba(255, 255, 255, 0.92);
    background-color: #c84a28;
    overflow: hidden;
}

.project-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(35, 41, 35, 0.7), rgba(200, 74, 40, 0.65));
    z-index: 0;
}

.project-detail-hero-container {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
}

.project-detail-hero-subtitle {
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-detail-description .dash-markdown {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(35, 41, 35, 0.82);
}

.project-detail-description .dash-markdown h2 {
    font-size: 1.4rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.project-detail-description .dash-markdown p {
    margin-bottom: 1.1rem;
}

.project-detail-description .dash-markdown p:first-of-type {
    background-color: #C84023;
    color: rgba(255, 255, 255, 0.92);
    padding: 1.5rem;
    border-radius: 8px;
    font-size: 1.1rem;
    line-height: 1.8;
}

.project-detail-gallery {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.project-detail-gallery-heading {
    color: var(--color-primary);
    letter-spacing: 0.08em;
}

.project-detail-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.project-detail-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid rgba(35, 41, 35, 0.18);
}

/* Dark mode disabled - force light mode for all devices */
/* Removed @media (prefers-color-scheme: dark) block to ensure consistent appearance */

/* Tablet breakpoint adjustments */
@media (max-width: 960px) {
    .hero-heading {
        font-size: 2.8rem;
    }

    .hero-container {
        gap: 32px;
    }
}

/* Mobile breakpoint adjustments */
@media (max-width: 768px) {
/* Header layout container */
    .app-header {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding-bottom: 18px;
    }

/* Navigation area with buttons */
    .app-nav {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        max-width: 280px;
        margin-top: 8px;
        justify-content: center;
    }

    .nav-button {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .nav-button:last-child {
        margin-bottom: 12px;
    }

/* Hero banner settings */
    .hero-full {
        padding-top: 140px;
        padding-bottom: 140px;
    }

/* Outline button styling */
    .nav-button .mantine-Button-root {
        width: 100%;
    }

/* Services grid section */
    .services-section {
        padding: 56px 0;
        margin-top: -60px;
    }

/* Unsere Werte banner styling */
    .values-banner {
        padding: 72px 0;
    }
}

/* Skip-link bounce animation */
@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(4px);
    }

    60% {
        transform: translateY(2px);
    }
}

/* Services section call-to-action button */
.services-cta {
    margin-top: 24px;
}

.services-portfolio-button {
    border-width: 2px;
    border-color: #c84023;
    color: #c84023;
    background-color: rgba(203, 67, 41, 0.08);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.services-portfolio-button:hover,
.services-portfolio-button:focus {
    background-color: rgba(203, 67, 41, 0.16);
    color: #c84023;
}

/* Portfolio Carousel Styling - Horizontal Scroll with Auto-scroll */
.portfolio-carousel-container {
    margin: 32px auto 0;
    width: 100%;
    max-width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: auto;
    position: relative;
    box-sizing: border-box;
    /* pan-x alone discards vertical swipes that start on the carousel,
       so the page could not be scrolled with a finger on this strip. */
    touch-action: pan-x pan-y;
}

.portfolio-carousel-container::-webkit-scrollbar {
    display: none;
}

.portfolio-carousel-track {
    display: flex;
    gap: 12px;
}

/* Mobile: Conservative calculation to prevent overflow */
/* Account for: container padding (32px), gaps (48px), and safety margin (20px) */
.portfolio-slide {
    flex: 0 0 calc((100vw - 100px) / 5);
    max-width: calc((100vw - 100px) / 5);
    min-width: 50px;
}

/* Tablet: Account for larger container padding */
@media (min-width: 768px) {
    .portfolio-slide {
        flex: 0 0 calc((100vw - 130px) / 5);
        max-width: calc((100vw - 130px) / 5);
        min-width: 100px;
    }
}

/* Desktop: Use container max-width */
@media (min-width: 1200px) {
    .portfolio-slide {
        flex: 0 0 calc((1140px - 80px) / 5);
        max-width: calc((1140px - 80px) / 5);
        min-width: 180px;
    }
}

.portfolio-carousel-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.portfolio-slide a:hover .portfolio-carousel-image,
.portfolio-slide a:focus .portfolio-carousel-image {
    transform: scale(1.05);
    opacity: 0.9;
}

.portfolio-slide a {
    cursor: pointer;
}

.portfolio-slide a:focus {
    outline: 2px solid rgba(200, 64, 35, 0.6);
    outline-offset: 4px;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .portfolio-carousel-image {
        height: 160px;
    }
}

@media (min-width: 1200px) {
    .portfolio-carousel-image {
        height: 200px;
    }
}

/* Contact page styling */
.contact-page {
    display: flex;
    flex-direction: column;
}

.contact-hero {
    background-color: #C84023;
    color: rgba(255, 255, 255, 0.92);
    padding: 80px 0 67px;
}

.contact-hero-container {
    max-width: 960px;
    margin: 0 auto;
}

.contact-hero-title {
    font-size: 3.2rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
}

/* Contact form textarea height */
#contact-message,
#contact-message textarea,
#contact-message .mantine-Textarea-input {
    min-height: 250px !important;
    height: 250px !important;
}

/* Contact form button - match CI design */
#contact-submit {
    border-width: 2px;
    border-color: #c84023;
    color: #c84023;
}

/* Imprint page styling */
.imprint-page {
    display: flex;
    flex-direction: column;
}

.imprint-hero {
    background-color: #C84023;
    color: rgba(255, 255, 255, 0.92);
    padding: 80px 0 67px;
}

.imprint-hero-container {
    max-width: 960px;
    margin: 0 auto;
}

.imprint-hero-title {
    font-size: 3.2rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    background-color: rgba(203, 67, 41, 0.08);
}

#contact-submit:hover,
#contact-submit:focus {
    background-color: rgba(203, 67, 41, 0.16);
    color: #c84023;
    text-decoration: none;
}

/* Mobile Touch Event Handling - Burger Menu Overlay */
/* Based on MOBILE_TOUCH_EVENT_HANDLING.md blueprint */

/* Container - Wrapper for menu and backdrop */
.menu-overlay-container {
    position: relative;
}

/* Backdrop - Blocks touch events from reaching page when menu is open */
.menu-overlay-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1000;
    touch-action: none;          /* Block ALL gestures */
    overscroll-behavior: contain; /* Prevent pull-to-refresh */
    pointer-events: all;         /* Capture all events */
    overflow: hidden;            /* Prevent scrolling */
}

/* Menu panel - Ensure proper z-index above backdrop */
#nav-menu {
    z-index: 1001;  /* Above backdrop */
}

/* Imprint page mobile text wrapping */
.imprint-page .mantine-Text-root,
.imprint-page .dash-markdown,
.imprint-page p,
.imprint-page ul,
.imprint-page li {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Ensure links in imprint page wrap properly */
.imprint-page a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
}

/* Container padding for imprint content on mobile */
@media (max-width: 768px) {
    .imprint-page .mantine-Container-root {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
        overflow-x: hidden;
    }
}