/* Giebels.biz — design on top of Quark 2 (loaded last, replaces quark2/css/custom.css).
   Light only. Palette: three domain colours (blue = Hosting, orange = Entwicklung & IoT,
   green = Energie), orange is also the site accent. */

:root {
    --gb-blue: #2f6fed;
    --gb-orange: #e07d1a;
    --gb-green: #2e9e5b;
    --gb-ink: #14171c;
    --gb-paper: #fbfaf7;
    --gb-line: rgba(20, 23, 28, .09);
    --gb-card-shadow: 0 1px 2px rgba(20, 23, 28, .05), 0 12px 32px -14px rgba(20, 23, 28, .18);
}

/* ---------- Typography ----------
   Oxanium (variable wght 200-800, self-hosted, SIL OFL) echoes the squared, technical lettering of the
   logo and replaces Quark 2's Cal Sans for display text. Inter stays the body face. Chosen over
   Saira because Saira's lowercase "t" is a plain cross. */
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('../fonts/oxanium/oxanium-latin-ext.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: 'Oxanium'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('../fonts/oxanium/oxanium-latin.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; }
:root, :root[data-theme="light"] {
    --pico-font-family-display: "Oxanium", "Inter", sans-serif;
}

/* Headings and the small uppercase labels share the logo's technical lettering; the labels mirror the
   thin, wide-tracked "TECHNISCHE LÖSUNGEN" line under the wordmark. */
.gb-eyebrow, .gb-domain__kicker, .gb-refs__title, .gb-detail__kicker, .gb-about__tech b, .gb-status, .gb-chips li {
    font-family: var(--pico-font-family-display);
}
.gb-eyebrow, .gb-domain__kicker, .gb-refs__title, .gb-detail__kicker { font-weight: 500; letter-spacing: .16em; }

#header .navigation > li > a { font-family: var(--pico-font-family-display); font-weight: 500; letter-spacing: .01em; }

/* ---------- Shared bits ---------- */

#header .logo img, #header .logo svg { height: 54px; width: auto; }
img.rounded { border-radius: 10px; }
img.right { float: right !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.home-landing { background: var(--gb-paper); }
body.home-landing #header { border-bottom-color: var(--gb-line); }
body.home-landing main { overflow-x: clip; }

/* Quark 2 hyphenates headings/paragraphs; on the one-pager that only breaks short words. */
.gb-hero, .gb-domain, .gb-about, .gb-contact { hyphens: manual; -webkit-hyphens: manual; }
/* Quark 2 draws its own list markers; the chip/link lists here are not bulleted lists. */
.gb-chips li, .gb-docs li, .gb-about__points li, .gb-contact__list li { list-style: none; }
.gb-chips li::before, .gb-docs li::before, .gb-about__points li::before, .gb-contact__list li::before { content: none; }
.gb-chips li::marker, .gb-docs li::marker, .gb-about__points li::marker, .gb-contact__list li::marker { content: none; }

/* ---------- Hero ---------- */

.gb-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(calc(100vh - var(--q2-header-height)), 860px);
    padding-block: clamp(3rem, 7vw, 5.5rem);
    background: var(--gb-paper);
    overflow: hidden;
    isolation: isolate;
}
.gb-hero > .container { width: 100%; }

.gb-hero__bg { position: absolute; inset: 0; z-index: -1; }
.gb-hero__bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(38% 52% at 12% 18%, rgba(47, 111, 237, .20), transparent 72%),
        radial-gradient(36% 50% at 88% 22%, rgba(224, 125, 26, .22), transparent 72%),
        radial-gradient(42% 55% at 58% 100%, rgba(46, 158, 91, .20), transparent 72%);
}
/* blueprint grid, fading out towards the edges */
.gb-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(20, 23, 28, .06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(20, 23, 28, .06) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 100%);
    mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 100%);
}

.gb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.25rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--q2-text-muted);
}
.gb-eyebrow::before {
    content: "";
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gb-blue) 0 33%, var(--gb-orange) 33% 66%, var(--gb-green) 66%);
}

.gb-hero__title h1 {
    margin: 0;
    font-size: clamp(2.6rem, 7.6vw, 6.25rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--gb-ink);
}
.gb-hero__title h1 strong {
    font-weight: inherit;
    background: linear-gradient(100deg, var(--gb-blue) 0%, var(--gb-orange) 52%, var(--gb-green) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.gb-hero__title h1 + h2 {
    margin: .9rem 0 0;
    font-size: clamp(1.15rem, 2.2vw, 1.7rem);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--q2-text-muted);
}

.gb-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    margin-top: clamp(2.25rem, 5vw, 3.75rem);
}
.gb-tile {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: .35rem;
    align-items: center;
    padding: 1.35rem 1.4rem 1.4rem;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--gb-line);
    border-radius: 18px;
    box-shadow: var(--gb-card-shadow);
    color: var(--gb-ink);
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.gb-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--dom);
}
.gb-tile:hover { transform: translateY(-4px); color: var(--gb-ink); text-decoration: none; box-shadow: 0 2px 4px rgba(20, 23, 28, .06), 0 20px 40px -16px rgba(20, 23, 28, .28); }
.gb-tile__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.35rem;
    color: var(--dom);
    background: color-mix(in oklab, var(--dom) 13%, #fff);
}
.gb-tile__title {
    font-family: var(--pico-font-family-display);
    font-size: 1.45rem;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 1.1;
}
.gb-tile__text { grid-column: 1 / -1; margin-top: .35rem; font-size: .95rem; line-height: 1.5; color: var(--q2-text-muted); }
.gb-tile__arrow {
    position: absolute;
    top: 1.5rem;
    right: 1.4rem;
    font-size: .95rem;
    color: var(--dom);
    transition: transform .2s ease;
}
.gb-tile:hover .gb-tile__arrow { transform: translateY(4px); }

/* ---------- Domain bands ---------- */

.gb-domain {
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    background: color-mix(in oklab, var(--dom) 6%, var(--gb-paper));
    border-top: 1px solid color-mix(in oklab, var(--dom) 18%, transparent);
}
.gb-domain__kicker {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1.1rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dom);
}
.gb-domain__num {
    display: inline-grid;
    place-items: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding-inline: .3rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.gb-domain__intro { max-width: 760px; }
.gb-domain__intro h2 {
    margin: 0 0 .9rem;
    font-size: clamp(1.9rem, 4.2vw, 3.1rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.01em;
    word-spacing: .06em;
    color: var(--gb-ink);
}
.gb-domain__intro h2::before { display: none; }
.gb-domain__intro p { margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--q2-text-muted); }

.gb-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1rem;
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.gb-service {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.3rem 1.4rem;
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--dom) 16%, var(--gb-line));
    border-radius: 16px;
}
.gb-service__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 1.25rem;
    color: #fff;
    background: var(--dom);
}
.gb-service h3 { margin: .1rem 0 .3rem; font-size: 1.1rem; font-weight: 600; letter-spacing: -.005em; color: var(--gb-ink); }
.gb-service p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--q2-text-muted); }
.gb-service:only-child { grid-column: 1 / -1; align-items: center; padding: 1.6rem 1.8rem; }
.gb-service:only-child .gb-service__icon { width: 58px; height: 58px; border-radius: 16px; font-size: 1.5rem; }
.gb-service:only-child h3 { font-size: 1.3rem; }
.gb-service:only-child p { font-size: 1.05rem; }

/* References */
.gb-refs__title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: clamp(2.5rem, 6vw, 4rem) 0 1.25rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--q2-text-muted);
}
.gb-refs__title::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--dom) 22%, transparent); }

/* Reference carousel: a scroll-snap track (native touch swipe / trackpad / shift+wheel), 3 cards per view,
   2 on tablets, 1 (+ a peek of the next) on phones. js/landing.js adds arrows + dots; without js it is
   still a swipeable row. The vertical padding/negative margin keeps the hover lift and shadow unclipped. */
.gb-refs {
    --per: 3;
    --gap: 1.25rem;
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: .25rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding: .5rem .25rem 1.75rem;
    margin: -.5rem -.25rem -1.25rem;
}
.gb-refs::-webkit-scrollbar { display: none; }
.gb-refs > .gb-ref {
    flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
    min-width: 0;
    scroll-snap-align: start;
}
.gb-carousel__nav { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: 1.5rem; }
.gb-carousel__nav[hidden] { display: none; }
.gb-carousel__nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    font-size: .85rem;
    color: var(--dom);
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--dom) 35%, var(--gb-line));
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.gb-carousel__nav button:hover:not(:disabled) { color: #fff; background: var(--dom); }
.gb-carousel__nav button:focus-visible { outline: 3px solid var(--dom); outline-offset: 2px; }
.gb-carousel__nav button:disabled { opacity: .35; cursor: default; }
.gb-carousel__dots { display: flex; align-items: center; gap: .15rem; }
.gb-carousel__dots button {
    width: 1.5rem;
    height: 1.5rem;
    background: none;
    border: 0;
    border-radius: 0;
}
.gb-carousel__dots button::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--dom) 28%, #fff);
    transition: width .2s ease, background .2s ease;
}
.gb-carousel__dots button:hover:not(:disabled) { background: none; }
.gb-carousel__dots button[aria-current="true"]::before { width: 1.5rem; background: var(--dom); }
.gb-ref {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--gb-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--gb-card-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.gb-ref:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(20, 23, 28, .06), 0 20px 40px -18px rgba(20, 23, 28, .3); }
.gb-ref__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: color-mix(in oklab, var(--dom) 10%, #fff);
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: none;
}
.gb-ref__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gb-ref__media:hover img { transform: scale(1.04); }
.gb-ref__media:focus-visible { outline: 3px solid var(--dom); outline-offset: -3px; }
.gb-ref__count {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: rgba(20, 23, 28, .66);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 999px;
}
.gb-ref__body { display: flex; flex: 1; flex-direction: column; gap: .7rem; padding: 1.2rem 1.4rem 1.4rem; }
.gb-ref__body h3 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--gb-ink); }
.gb-ref__body p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--q2-text-muted); }

.gb-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: auto 0 0; padding: .35rem 0 0; list-style: none; }
.gb-chips li {
    margin: 0;
    padding: .28rem .65rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
    color: color-mix(in oklab, var(--dom) 72%, #000);
    background: color-mix(in oklab, var(--dom) 11%, #fff);
    border-radius: 999px;
}
.gb-docs { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; padding: 0; list-style: none; }
.gb-docs li { margin: 0; font-size: .85rem; }
.gb-docs a { color: var(--gb-ink); text-decoration: none; border-bottom: 1px solid var(--gb-line); }
.gb-docs a:hover { border-bottom-color: var(--dom); color: var(--dom); }
.gb-docs i { color: var(--dom); margin-right: .25rem; }

/* ---------- About ---------- */

.gb-about { background: #fff; border-top: 1px solid var(--gb-line); }
.gb-about__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.gb-about__text h2 { margin: 0 0 1rem; font-size: clamp(1.8rem, 3.8vw, 2.8rem); font-weight: 600; line-height: 1.1; letter-spacing: -.01em;
    word-spacing: .06em; color: var(--gb-ink); }
.gb-about__text h2::before { display: none; }
.gb-about__text p { margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--q2-text-muted); }
.gb-about__points { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.gb-about__points li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0;
    padding: 1.1rem 1.3rem;
    background: var(--gb-paper);
    border: 1px solid var(--gb-line);
    border-radius: 16px;
}
.gb-about__points i { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 1.1rem; color: var(--gb-orange); background: color-mix(in oklab, var(--gb-orange) 13%, #fff); }
.gb-about__points b { font-family: var(--pico-font-family-display); display: block; font-size: 1.05rem; color: var(--gb-ink); }
.gb-about__points span { display: block; font-size: .95rem; line-height: 1.5; color: var(--q2-text-muted); }

/* ---------- Contact ---------- */

.gb-contact { background: var(--gb-paper); border-top: 1px solid var(--gb-line); }
.gb-contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.gb-contact__info h2 { margin: 0 0 1.5rem; font-size: clamp(1.8rem, 3.8vw, 2.8rem); font-weight: 600; line-height: 1.1; letter-spacing: -.01em;
    word-spacing: .06em; color: var(--gb-ink); }
.gb-contact__info h2::before { display: none; }
.gb-contact__list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.gb-contact__list li { display: flex; gap: 1rem; align-items: flex-start; margin: 0; line-height: 1.5; }
.gb-contact__list i { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--gb-orange); background: color-mix(in oklab, var(--gb-orange) 13%, #fff); }
.gb-contact__list a { color: var(--gb-ink); font-weight: 600; }
.gb-contact__note { margin: 1.5rem 0 0; font-size: .95rem; color: var(--q2-text-muted); }
.gb-contact__form { padding: clamp(1.4rem, 3vw, 2.2rem); background: #fff; border: 1px solid var(--gb-line); border-radius: 20px; box-shadow: var(--gb-card-shadow); }
.gb-contact__form form > :last-child { margin-bottom: 0; }

/* Form result banner (templates/partials/form-messages.html.twig): fixed below the header, because a submit
   reloads the one-pager at the top while the form is far below. */
.gb-formmsg { position: fixed; z-index: 1000; top: calc(var(--q2-header-height, 70px) + .75rem); left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: .75rem; width: min(640px, calc(100vw - 2rem)); padding: .9rem 1.1rem; box-sizing: border-box;
    color: #fff; font-weight: 500; line-height: 1.4; border-radius: 12px; box-shadow: 0 12px 32px -10px rgba(20, 23, 28, .45);
    animation: gb-formmsg-in .35s ease-out; }
.gb-formmsg--success { background: var(--gb-green); }
.gb-formmsg--error { background: #c62f3b; }
.gb-formmsg.is-hidden { display: none; }
.gb-formmsg i { flex: 0 0 auto; font-size: 1.25rem; }
.gb-formmsg__text { flex: 1 1 auto; }
.gb-formmsg__close { flex: 0 0 auto; padding: 0 .25rem; font-size: 1.5rem; line-height: 1; color: inherit; background: none; border: 0; cursor: pointer; opacity: .8; }
.gb-formmsg__close:hover { opacity: 1; }
@keyframes gb-formmsg-in { from { opacity: 0; transform: translate(-50%, -12px); } }
@media (prefers-reduced-motion: reduce) { .gb-formmsg { animation: none; } }

/* "Kopie an mich selbst" checkbox row */
.gb-contact__form .form-field:has(input[type=checkbox]) .form-label-wrapper { display: none; }
.gb-contact__form .form-input-wrapper:has(> input[type=checkbox]) { display: flex; align-items: center; gap: .6rem; }
.gb-contact__form input[type=checkbox] { margin: 0; flex: 0 0 auto; }
.gb-contact__form input[type=checkbox] + label { margin: 0; font-weight: 400; cursor: pointer; }

/* ---------- Plain pages & reference detail (still routable) ---------- */

.hero h1, .hero h2 { color: #fff !important; text-shadow: 0 2px 5px rgba(0, 0, 0, .6); }

.item-gallery { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.item-gallery img { display: block; }
.pdf-downloads { list-style: none; padding-left: 0; }

/* ---------- Overlay (subpages + reference details), js/landing.js ---------- */

/* Pico styles every <dialog> as a full-viewport flex overlay; reset that for this one. */
.gb-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: min(1120px, 94vw);
    min-width: 0;
    height: fit-content;
    min-height: 0;
    max-width: none;
    max-height: 92vh;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: #fff;
    color: var(--gb-ink);
    box-shadow: 0 30px 80px -20px rgba(20, 23, 28, .45), 0 0 0 1px var(--gb-line);
    overflow: hidden;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.gb-modal--page { width: min(900px, 94vw); }
.gb-modal[open] { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.gb-modal::backdrop { background: rgba(20, 23, 28, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html:has(dialog.gb-modal[open]) { overflow: hidden; }

.gb-modal__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 1rem 1.75rem;
    background: #fff;
    border-bottom: 1px solid var(--gb-line);
}
.gb-modal--ref .gb-modal__head { border-top: 5px solid var(--dom, var(--gb-orange)); }
.gb-modal__title { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--gb-ink); }
.gb-modal__title::before { display: none; }
.gb-modal .gb-modal__close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--gb-ink);
    background: #f1efea;
    cursor: pointer;
    box-shadow: none;
}
.gb-modal .gb-modal__close:hover { background: #e6e3db; }
.gb-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.gb-modal__loading { padding: 2rem 1.75rem; color: var(--q2-text-muted); }

/* subpage content */
.gb-modal__content { padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem); }
.gb-modal__content .content-item { max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.gb-modal__content > :first-child, .gb-modal__content .content-item > :first-child { margin-top: 0; }
.gb-modal__content h2 { font-size: 1.35rem; margin-top: 1.6em; }
.gb-modal__content h2::before { display: none; }
.gb-modal__content img { max-width: 100%; height: auto; }
.gb-modal__content a { color: var(--q2-accent); }

/* reference view: gallery left, details right */
.gb-refview { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); padding: clamp(1.1rem, 2.6vw, 1.75rem); align-items: start; }
.gb-refview--nogal { grid-template-columns: minmax(0, 1fr); }
.gb-gal { position: sticky; top: 0; }
.gb-gal__stage {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: color-mix(in oklab, var(--dom, #e07d1a) 7%, #f4f2ec);
    border: 1px solid var(--gb-line);
    overflow: hidden;
}
.gb-gal__stage > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gb-modal .gb-gal__nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    font-size: .95rem;
    line-height: 1;
    color: var(--gb-ink);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(20, 23, 28, .22);
    cursor: pointer;
}
.gb-modal .gb-gal__nav:hover { background: #fff; }
.gb-gal__prev { left: .65rem; }
.gb-gal__next { right: .65rem; }
.gb-gal__count { position: absolute; right: .65rem; bottom: .65rem; padding: .2rem .6rem; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gb-ink); background: rgba(255, 255, 255, .92); border-radius: 999px; }
.gb-gal__thumbs { display: flex; gap: .5rem; margin-top: .65rem; padding-bottom: .25rem; overflow-x: auto; }
.gb-modal .gb-gal__thumb {
    flex: 0 0 auto;
    width: 76px;
    height: 54px;
    margin: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    opacity: .7;
    background: #f1efea;
    cursor: pointer;
    box-shadow: none;
    transition: opacity .15s ease, border-color .15s ease;
}
.gb-modal .gb-gal__thumb:hover { opacity: 1; }
.gb-modal .gb-gal__thumb.is-active { opacity: 1; border-color: var(--dom, var(--gb-orange)); }
.gb-gal__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gb-detail { min-width: 0; }
.gb-detail__kicker { margin: 0 0 .35rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dom, var(--gb-orange)); }
.gb-detail__subtitle { margin: 0 0 .9rem; font-size: 1.05rem; font-weight: 600; color: var(--gb-ink); }
.gb-detail .gb-chips { margin: 0 0 1.1rem; padding: 0; }
.gb-detail__text { font-size: 1rem; line-height: 1.65; color: var(--q2-text); }
.gb-detail__text p { margin: 0 0 .9rem; color: var(--q2-text); }
.gb-detail__text ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.gb-detail__text li { margin: .15rem 0; }
.gb-detail__text img { max-width: 100%; height: auto; }
.gb-detail__text img.right { float: right; margin: 0 0 .75rem 1rem; }
.gb-detail__text a { color: var(--dom, var(--q2-accent)); }
.gb-docs--buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.gb-docs--buttons a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; font-size: .88rem; font-weight: 600; border: 1px solid color-mix(in oklab, var(--dom) 35%, var(--gb-line)); border-radius: 10px; background: color-mix(in oklab, var(--dom) 7%, #fff); }

/* reference card: click target + "Details" */
.gb-ref { cursor: pointer; }
.gb-modal .gb-ref__more, .gb-ref__more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: .35rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: .9rem;
    font-weight: 700;
    color: var(--dom);
    cursor: pointer;
}
.gb-ref__more i { transition: transform .2s ease; }
.gb-ref:hover .gb-ref__more i { transform: translateX(4px); }

/* ---------- Standalone page header (subpages opened directly) ---------- */

.gb-about__text p + p { margin-top: 1rem; }
.gb-about__tech { display: grid; gap: .85rem; margin-top: 1.5rem; }
.gb-about__tech b { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gb-ink); }
.gb-about__tech .gb-chips { margin: .4rem 0 0; padding: 0; }
.gb-about__more { display: inline-block; margin-top: 1.25rem; font-weight: 600; color: var(--gb-ink); text-decoration: none; border-bottom: 1px solid var(--gb-orange); }
.gb-about__more span { font-weight: 400; color: var(--q2-text-muted); }
.gb-about__more:hover { color: var(--gb-orange); }

/* ---------- Profile (profile.html.twig, behind login) ---------- */
.gb-profile { max-width: 52rem; }
.gb-profile h2 { margin: 3rem 0 1rem; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.01em; color: var(--gb-ink); }
.gb-profile h2::before { display: none; }
.gb-profile h2:first-child { margin-top: 0; }
.gb-profile h3 { position: relative; margin: 2rem 0 .15rem; padding-left: 1.4rem; font-size: 1.1rem; font-weight: 600; color: var(--gb-ink); }
.gb-profile h3::before { content: ""; position: absolute; left: 0; top: .5em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--gb-orange); }
.gb-profile h3 + p { margin: 0 0 .5rem; padding-left: 1.4rem; font-size: .92rem; color: var(--q2-text-muted); }
.gb-profile h3 ~ ul { margin: 0 0 0 .3rem; padding: .25rem 0 .25rem 1.1rem; border-left: 2px solid var(--gb-line); font-size: .95rem; line-height: 1.5; }
.gb-profile li { margin: .15rem 0; }
.gb-lock { max-width: 28rem; }
.gb-lock__form label { display: block; margin-bottom: .35rem; font-weight: 600; }
.gb-lock__form div { display: flex; gap: .5rem; }
.gb-lock__form input { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.gb-lock__form .button { flex: 0 0 auto; width: auto; margin: 0; }
.gb-lock__error { margin-top: .75rem; color: #b3261e; }
@media print { .gb-profile h3, .gb-profile ul { break-inside: avoid; } }

.gb-pagehead { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--gb-paper); }
.gb-pagehead h1 { margin: 0; font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 600; letter-spacing: -.01em; color: var(--gb-ink); }

/* ---------- Buttons ---------- */

.gb-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    align-self: flex-start;
    margin-top: .5rem;
    padding: .65rem 1.1rem;
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    background: var(--dom, var(--gb-orange));
    border-radius: 12px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.gb-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -10px var(--dom, var(--gb-orange)); }

/* ---------- Own projects ---------- */

.gb-projects__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1.5rem; }
.gb-project { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gb-line); border-radius: 22px; overflow: hidden; box-shadow: var(--gb-card-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.gb-project:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20, 23, 28, .06), 0 24px 48px -20px rgba(20, 23, 28, .3); }
.gb-project__visual { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 1.25rem; background: color-mix(in oklab, var(--dom) 9%, #fff); border-bottom: 3px solid var(--dom); }
.gb-project__visual > img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(20, 23, 28, .18)); }
.gb-status { position: absolute; top: .9rem; left: .9rem; display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .7rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in oklab, var(--dom) 70%, #000); background: rgba(255, 255, 255, .92); border-radius: 999px; }
.gb-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--dom); box-shadow: 0 0 0 3px color-mix(in oklab, var(--dom) 25%, transparent); }
.gb-status--soon::before { background: var(--q2-text-muted); box-shadow: none; }
.gb-project__body { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.4rem 1.6rem 1.6rem; }
.gb-project__logo { display: block; height: 36px; width: auto; max-width: 100%; margin-bottom: .2rem; align-self: flex-start; }
.gb-project__body h3 { margin: 0; font-size: 1.5rem; color: var(--gb-ink); }
.gb-project__body p { margin: 0; line-height: 1.55; color: var(--q2-text-muted); }
.gb-project__body .gb-project__tagline { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; color: var(--gb-ink); }
.gb-project__body .gb-chips { margin: .35rem 0 .35rem; padding: 0; }
.gb-project--soon { border-style: dashed; box-shadow: none; }
.gb-project--soon .gb-project__visual { border-bottom-style: dashed; }

/* ---------- Footer ---------- */

#footer { text-align: left; background: #fff; border-top: 1px solid var(--gb-line); }
#footer .footer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
#footer .footer-col-right { text-align: right; }
#footer .copyright { font-size: .9em; margin: 1.25rem 0 0; }

/* janolaw legal texts */
.janolaw-paragraph { font-weight: bold; font-size: 1.5em; }
.janolaw-text { text-align: justify; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
    .gb-refs { --per: 2; }
}
@media (max-width: 900px) {
    .gb-refview { grid-template-columns: minmax(0, 1fr); }
    .gb-gal { position: static; }
    .gb-tiles { grid-template-columns: 1fr; }
    .gb-about__grid, .gb-contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    #footer .footer-columns { grid-template-columns: 1fr; gap: 1rem; }
    #footer .footer-col-right { text-align: left; }
    .gb-hero { min-height: 0; }
    .gb-refs { --per: 1.12; }
}