@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
    --paper: #f3f0e8;
    --paper-light: #fbfaf6;
    --ink: #171918;
    --muted: #62665f;
    --line: #c9c6bb;
    --blue: #165ddb;
    --orange: #ef5b36;
}

html { scroll-behavior: smooth; }
body.workshop-subpage {
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    background: var(--paper);
    font-family: 'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.workshop-subpage::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .42;
    background-image: linear-gradient(rgba(23,25,24,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(23,25,24,.03) 1px, transparent 1px);
    background-size: 24px 24px;
}
body.workshop-subpage h1,
body.workshop-subpage h2,
body.workshop-subpage h3,
body.workshop-subpage h4 {
    font-family: 'Barlow Semi Condensed', sans-serif;
    letter-spacing: -.025em;
}
body.workshop-subpage .text-gray-300,
body.workshop-subpage .text-gray-400,
body.workshop-subpage .text-gray-500 { color: var(--muted) !important; }
body.workshop-subpage .text-primary,
body.workshop-subpage .text-secondary { color: var(--blue) !important; }
body.workshop-subpage .border-white\/10 { border-color: var(--line) !important; }
body.workshop-subpage .divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; }

.workshop-nav {
    background: rgba(243,240,232,.95) !important;
    border-bottom: 1px solid var(--ink) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.workshop-nav .brand-logo {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border: 1px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}
.workshop-nav .brand-name { font: 700 1.25rem/1 'Barlow Semi Condensed', sans-serif; }
.workshop-nav .brand-note {
    display: block;
    margin-top: .3rem;
    color: var(--muted);
    font: 600 .58rem/1 'IBM Plex Mono', monospace;
    letter-spacing: .14em;
}
.workshop-nav nav a { color: var(--muted) !important; }
.workshop-nav nav a:hover,
.workshop-nav nav a[aria-current='page'] { color: var(--blue) !important; }
.workshop-nav .nav-cta {
    color: #fff;
    background: var(--blue);
    border: 1px solid var(--blue);
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 var(--ink);
}
.workshop-nav .nav-cta:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

.device-hero {
    min-height: 0 !important;
    padding-top: 9rem !important;
    padding-bottom: 5.5rem !important;
    border-bottom: 1px solid var(--ink);
}
.device-hero::before {
    content: attr(data-record);
    position: absolute;
    right: max(1rem, calc((100vw - 80rem) / 2));
    top: 8.5rem;
    color: rgba(23,25,24,.055);
    font: 800 clamp(5rem,15vw,13rem)/.8 'Barlow Semi Condensed', sans-serif;
    letter-spacing: -.08em;
    pointer-events: none;
}
.device-hero > .absolute { display: none; }
.device-hero .hero-inner {
    max-width: 80rem !important;
    text-align: left !important;
    margin: 0 auto;
}
.device-hero .hero-badge {
    display: inline-flex;
    color: var(--blue);
    background: var(--paper-light) !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
    font: 600 .7rem/1 'IBM Plex Mono', monospace;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.device-hero h1 {
    max-width: 58rem;
    margin-bottom: 1.5rem !important;
    font-size: clamp(3.4rem,7.2vw,6.4rem) !important;
    line-height: .92 !important;
    font-weight: 800 !important;
}
.device-hero .gradient-text {
    color: var(--blue) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}
.device-hero .hero-copy { max-width: 42rem; margin-left: 0 !important; color: var(--muted) !important; }
.device-hero .hero-actions { justify-content: flex-start !important; }
.device-hero .hero-trust {
    justify-content: flex-start !important;
    max-width: 58rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.device-hero .hero-trust i { color: var(--orange) !important; }
.gradient-bg {
    color: #fff !important;
    background: var(--blue) !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 var(--ink);
}
.gradient-bg:hover { opacity: 1 !important; transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

body.workshop-subpage main { max-width: 72rem !important; }
body.workshop-subpage main > section { scroll-margin-top: 6rem; }
body.workshop-subpage main > section > h2 {
    position: relative;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ink);
    font-size: clamp(2rem,4vw,3rem) !important;
}
body.workshop-subpage main > section > h2::before {
    content: 'WERKSTATTAKTE';
    display: block;
    margin-bottom: .65rem;
    color: var(--orange);
    font: 600 .66rem/1 'IBM Plex Mono', monospace;
    letter-spacing: .13em;
}
body.workshop-subpage .glass {
    color: var(--ink);
    background: var(--paper-light) !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
}
body.workshop-subpage div.glass { transition: border-color .25s, transform .25s, box-shadow .25s; }
body.workshop-subpage div.glass:hover { border-color: var(--ink) !important; }
body.workshop-subpage .glass .gradient-bg { box-shadow: none; background: var(--orange) !important; }
body.workshop-subpage table { background: var(--paper-light); }
body.workshop-subpage th { color: #fff; background: var(--ink); font-family: 'IBM Plex Mono', monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
body.workshop-subpage td { color: var(--ink) !important; }
body.workshop-subpage tbody tr:hover { background: #e8e4da; }
body.workshop-subpage .faq-content { border-top: 1px solid var(--line); padding-top: 1rem; }
body.workshop-subpage .bg-white\/5 { background: #e8e4da !important; border-radius: 0 !important; }
body.workshop-subpage iframe { border-radius: 0 !important; }
body.workshop-subpage main > section.text-center.glass {
    color: #fff;
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    box-shadow: 8px 8px 0 var(--orange);
}
body.workshop-subpage main > section.text-center.glass .text-gray-400 { color: #bec1bb !important; }

body.workshop-subpage footer { color: #fff; background: var(--ink); border-color: var(--ink) !important; }
body.workshop-subpage footer .brand-logo { width: 3rem; height: 3rem; object-fit: cover; border: 1px solid #fff; }
body.workshop-subpage footer .text-gray-400,
body.workshop-subpage footer .text-gray-500 { color: #aeb2ab !important; }
body.workshop-subpage footer a:hover { color: #fff !important; }
.mobile-actions { display: none; }

@media (max-width: 767px) {
    body.workshop-subpage { padding-bottom: 4.65rem; }
    .workshop-nav { padding-block: .55rem !important; }
    .workshop-nav > div { flex-direction: row !important; }
    .workshop-nav .brand-logo { width: 2.5rem; height: 2.5rem; }
    .workshop-nav .brand-name { font-size: 1.05rem; }
    .workshop-nav .brand-note { font-size: .5rem; }
    .workshop-nav .nav-cta { padding: .65rem .8rem !important; }
    .device-hero { padding-top: 6.5rem !important; padding-bottom: 2rem !important; }
    .device-hero .hero-inner { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .device-hero::before { top: 8rem; right: .5rem; font-size: 7rem; }
    .device-hero h1 { max-width: 100%; overflow-wrap: anywhere; font-size: clamp(2.55rem,12.5vw,3.35rem) !important; }
    .device-hero .hero-copy { font-size: 1.08rem !important; line-height: 1.55; }
    .device-hero .hero-trust { gap: .75rem 1.1rem !important; }
    body.workshop-subpage main { padding-top: 3.5rem !important; }
    body.workshop-subpage main > section.text-center.glass { padding: 2.2rem 1.2rem !important; }
    body.workshop-subpage table { min-width: 34rem; }
    body.workshop-subpage .glass.overflow-hidden:has(table) { overflow-x: auto !important; }
    .mobile-actions {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        position: fixed;
        left: .65rem;
        right: .65rem;
        bottom: .65rem;
        z-index: 60;
        color: var(--ink);
        background: var(--paper-light);
        border: 1px solid var(--ink);
        box-shadow: 4px 4px 0 var(--ink);
    }
    .mobile-actions a { display: flex; min-height: 3.5rem; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; border-right: 1px solid var(--line); font: 600 .65rem/1.1 'IBM Plex Mono', monospace; text-transform: uppercase; }
    .mobile-actions a:last-child { color: #fff; background: var(--blue); border-right: 0; }
    body.workshop-subpage > a.fixed.bottom-6 { display: none !important; }
}

@media print {
    body.workshop-subpage { background: #fff; color: #000; }
    body.workshop-subpage::before, .workshop-nav, .mobile-actions { display: none !important; }
}