/* Home showcase: brand palette (Navy / White / Teal / Brass), warmwhite reading
   bands, product-first layout. Screenshots and native details carry the page,
   so there is no generic card grid. */
.home-showcase {
    --home-navy: #08131a;
    --home-panel: #0c1a23;
    --home-white: #edf2f4;
    --home-teal: #6dc6bc;
    --home-teal-hover: #8ad7ce;
    --home-brass: #c7a162;
    --home-paper: var(--color-paper);
    --home-line: var(--color-paper-border);
    --home-ink: var(--color-ink);
    --home-muted: var(--color-paper-muted);
    --home-accent: var(--color-primary-on-paper);
    --home-dark-muted: #a9bac1;
    --home-dark-line: #24343e;
}
.home-wrap { width: min(1320px, 100%); margin-inline: auto; padding-inline: clamp(22px, 5vw, 64px); }
.home-wrap a, .home-wrap p { color: inherit; }
.home-showcase .site-main { font-family: 'IBM Plex Sans', sans-serif; }
.home-showcase .site-main :is(h1, h2, h3, p, figure) { margin: 0; }
.home-showcase .site-main :is(h1, h2, h3) { font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; font-weight: 500; }
.home-showcase .site-main :is(a, button, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.home-showcase .site-main [hidden] { display: none !important; }
.home-showcase .site-main [id] { scroll-margin-top: 90px; }
.home-showcase .home-label { font-size: .8rem; line-height: 1.5; font-weight: 600; letter-spacing: .02em; }

/* Actions: one geometry everywhere, one colour per surface. */
.home-showcase .home-button {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-height: 44px;
    padding: 12px 20px;
    background: var(--home-teal);
    color: var(--home-navy);
    border: 1px solid var(--home-teal);
    border-radius: var(--radius-button);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.4;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}
.home-showcase .home-button:hover { background: var(--home-teal-hover); border-color: var(--home-teal-hover); }
.home-showcase .home-button > span { font-size: 1.15rem; }
.home-showcase .home-button--ink { background: var(--home-ink); border-color: var(--home-ink); color: var(--home-white); }
.home-showcase .home-button--ink:hover { background: #17262e; border-color: #17262e; }
.home-showcase .home-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}
.home-showcase .home-link:hover,
.home-showcase .home-link > span { color: var(--home-teal); }
.home-showcase .home-shop-band .home-link:hover,
.home-showcase .home-shop-band .home-link > span { color: var(--home-accent); }

/* ---------- Cover: dark entry with the offer ---------- */
.home-cover { background: var(--home-navy); color: var(--home-white); }
.home-intro-band { padding-block: calc(var(--nav-height) + 40px) 30px; }
.home-intro .home-label { color: var(--home-brass); }
.home-showcase .home-intro h1 {
    margin-top: 14px;
    color: var(--home-white);
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 1.03;
    letter-spacing: -.045em;
}
.home-showcase .home-intro h1 > span { display: block; text-wrap: balance; }
.home-showcase .home-intro h1 > span:last-child { color: var(--home-teal); }
.home-intro__offer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: clamp(18px, 2.4vw, 30px) clamp(24px, 4vw, 56px);
    margin-top: clamp(20px, 2.6vw, 32px);
}
.home-showcase .home-intro__copy { max-width: 58ch; color: #cad6db; font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.7; }
.home-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.home-showcase #home-discovery {
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(20px, 3vw, 40px);
    margin-top: clamp(18px, 2.4vw, 30px);
    padding-top: 8px;
    border-top: 1px solid var(--home-dark-line);
}
.home-showcase #home-discovery a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--home-white);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}
.home-showcase #home-discovery a span { color: var(--home-teal); }
.home-showcase #home-discovery a:hover { color: var(--home-teal); }

/* ---------- Crazy-Shop: warmwhite product band ---------- */
.home-shop-band {
    background: var(--home-paper);
    color: var(--home-ink);
    padding-block: clamp(28px, 3.4vw, 44px) clamp(26px, 3vw, 40px);
}
.home-shop-band .home-label { color: var(--home-accent); }
.home-product-title {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 14px 30px;
    padding-bottom: clamp(18px, 2.2vw, 28px);
}
.home-showcase .home-product-title .home-label { margin-bottom: 8px; }
.home-showcase .home-product-title h2 {
    max-width: 24ch;
    color: var(--home-ink);
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    overflow-wrap: break-word;
}
.home-showcase .home-product-title h2 > span { color: var(--home-accent); }
.home-edition {
    display: grid;
    gap: 2px;
    border-left: 1px solid var(--home-line);
    padding-left: 16px;
    color: var(--home-muted);
    font-size: .875rem;
    line-height: 1.4;
}
.home-edition strong {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--home-ink);
}
.home-shop-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.55fr); align-items: start; gap: clamp(28px, 4vw, 64px); }
.home-shop-copy { padding-top: 4px; }
.home-showcase .home-shop-copy h3 {
    max-width: 18ch;
    color: var(--home-ink);
    font-size: clamp(1.55rem, 2.2vw, 2.05rem);
    line-height: 1.18;
    letter-spacing: -.025em;
}
.home-showcase .home-shop-copy > p { margin-top: 18px; color: var(--home-muted); font-size: 1rem; line-height: 1.75; max-width: 46ch; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.home-showcase .home-shop-copy > .home-demo-note { margin-top: 14px; color: var(--home-muted); font-size: .875rem; line-height: 1.6; }
.home-showcase .home-demo-note a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--home-ink); text-decoration: underline; text-underline-offset: 3px; }
.home-shop-update { margin-top: clamp(22px, 3vw, 34px); padding-left: 16px; border-left: 3px solid var(--home-accent); }
.home-showcase .home-shop-update .home-label { display: block; margin-bottom: 6px; color: var(--home-accent); }
.home-showcase .home-shop-update > p { margin-top: 8px; color: var(--home-muted); font-size: .95rem; line-height: 1.7; }
.home-showcase .home-shop-update .home-link { margin-top: 4px; color: var(--home-ink); font-size: .9rem; }

.home-gallery { min-width: 0; }
.home-gallery__tabs { display: flex; gap: clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--home-line); margin-bottom: 16px; }
.home-showcase .home-gallery__tabs button {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 10px 10px 0 0;
    margin-bottom: -1px;
    background: none;
    color: var(--home-muted);
    padding: 12px 4px;
    min-height: 44px;
    cursor: pointer;
    font: 600 .88rem/1.4 'IBM Plex Sans', sans-serif;
}
.home-showcase .home-gallery__tabs button[aria-selected='true'] { border-bottom-color: var(--home-ink); color: var(--home-ink); }
.home-showcase .home-gallery__tabs button:hover { color: var(--home-accent); }
.home-gallery__panel > summary { padding: 14px 0; border-color: var(--home-line); }
.home-screen {
    position: relative;
    display: block;
    overflow: hidden;
    background: #090c10;
    aspect-ratio: 1.48;
    border: 1px solid #24333b;
    border-radius: 6px;
}
.home-screen img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.home-screen--catalog img { width: 185%; max-width: none; height: auto; margin-left: -42.5%; }
.home-screen__zoom {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--home-paper);
    color: var(--home-ink);
    border-radius: 6px;
    font-size: 1.25rem;
    transition: background .2s;
}
.home-screen:hover .home-screen__zoom { background: var(--home-teal); }
.home-gallery figcaption { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; color: var(--home-muted); font-size: .875rem; line-height: 1.5; }
.home-gallery figcaption > span { font-size: .875rem; color: var(--home-muted); }
.home-shop-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-top: clamp(26px, 3vw, 40px);
    padding-top: 22px;
    border-top: 1px solid var(--home-line);
    font-size: .875rem;
    line-height: 1.6;
}
.home-shop-foot > p { color: var(--home-muted); }
.home-showcase .home-shop-foot > p a { position: relative; display: inline-block; min-height: 24px; color: var(--home-ink); text-decoration: underline; text-underline-offset: 4px; }
/* Grows the tap area without changing the line rhythm of the sentence. */
.home-showcase .home-shop-foot > p a::after { content: ''; position: absolute; inset: -10px -6px; }
.home-showcase .home-shop-foot > a { display: grid; gap: 3px; min-height: 44px; color: var(--home-ink); font-weight: 600; text-decoration: none; }
.home-shop-foot > a span { color: var(--home-muted); font-size: .875rem; font-weight: 400; }
.home-showcase .home-shop-foot > a:hover { color: var(--home-accent); }

/* ---------- Helpdesk: dark band ---------- */
.home-helpdesk {
    background: var(--home-panel);
    color: var(--home-white);
    padding-block: clamp(48px, 6vw, 76px);
}
.home-helpdesk .home-label { color: var(--home-brass); }
.home-helpdesk-heading { display: grid; grid-template-columns: 1.45fr 1fr; align-items: end; gap: clamp(28px, 5vw, 72px); margin-bottom: clamp(26px, 3vw, 40px); }
.home-showcase .home-helpdesk-heading h2 { color: var(--home-white); font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1.06; letter-spacing: -.04em; }
.home-showcase .home-helpdesk-heading h2 > span { color: var(--home-teal); }
.home-showcase .home-helpdesk-heading > p { color: #cad6db; max-width: 32ch; line-height: 1.7; font-size: 1.05rem; }
.home-helpdesk-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.home-helpdesk .home-gallery__tabs { border-bottom-color: var(--home-dark-line); }
.home-showcase .home-helpdesk .home-gallery__tabs button { color: var(--home-dark-muted); }
.home-showcase .home-helpdesk .home-gallery__tabs button[aria-selected='true'] { border-bottom-color: var(--home-teal); color: var(--home-white); }
.home-showcase .home-helpdesk .home-gallery__tabs button:hover { color: var(--home-teal); }
.home-helpdesk .home-gallery__panel > summary { border-color: var(--home-dark-line); }
.home-helpdesk .home-screen { aspect-ratio: 1.7; background: #0e1117; border-color: #33454e; }
.home-helpdesk .home-screen img { height: auto; }
.home-helpdesk .home-screen__zoom { color: var(--home-ink); }
.home-helpdesk .home-gallery figcaption { color: var(--home-dark-muted); }
.home-helpdesk .home-gallery figcaption > span { color: #97a8b0; }
.home-showcase .home-helpdesk-copy h3 { max-width: 22ch; color: var(--home-white); font-size: 1.6rem; line-height: 1.25; }
.home-showcase .home-helpdesk-copy > p { margin-top: 18px; color: #cad6db; line-height: 1.8; font-size: .95rem; }
.home-showcase .home-helpdesk-copy > .home-helpdesk-fact { padding-bottom: 22px; border-bottom: 1px solid var(--home-dark-line); color: var(--home-teal); font-size: .8rem; }
.home-price { padding-block: 22px; }
.home-price strong { color: var(--home-white); font-size: 1.7rem; font-weight: 500; }
.home-price > span { color: var(--home-dark-muted); font-size: .85rem; }
.home-price small { display: block; margin-top: 3px; color: var(--home-dark-muted); font-size: .75rem; }
.home-showcase .home-helpdesk-copy > .home-link { display: flex; justify-content: start; margin-top: 8px; color: var(--home-white); }

/* ---------- Hosting: warmwhite band ---------- */
.home-operations { background: var(--home-paper); color: var(--home-ink); padding-block: clamp(48px, 6vw, 76px); }
.home-operations-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 110px); }
.home-operations .home-label { color: var(--home-accent); }
.home-showcase .home-operations h2 { color: var(--home-ink); font-size: clamp(2.4rem, 3.6vw, 3.2rem); font-weight: 500; line-height: 1.08; letter-spacing: -.04em; }
.home-server-list { margin-top: 28px; border-top: 1px solid var(--home-line); margin-bottom: 12px; }
.home-server-list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding-block: 18px; border-bottom: 1px solid var(--home-line); }
.home-showcase .home-server-list h3 { color: var(--home-ink); font-size: 1.3rem; font-weight: 500; }
.home-server-list p { grid-column: 1; color: var(--home-muted); font-size: .84rem; line-height: 1.6; }
.home-server-list a > span { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--home-accent); font-size: 1.5rem; }
.home-server-list a:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
.home-operations .home-link { color: var(--home-ink); }
.home-service-note {
    align-self: start;
    margin-top: 4px;
    padding: clamp(24px, 2.6vw, 32px);
    background: var(--home-navy);
    color: var(--home-white);
    border-radius: 10px;
}
.home-service-note .home-label { color: var(--home-brass); }
.home-showcase .home-service-note h2 { color: var(--home-white); font-size: clamp(1.7rem, 2vw, 2.1rem); line-height: 1.2; letter-spacing: -.025em; }
.home-showcase .home-service-note > p:not(.home-label) { margin-top: 18px; margin-bottom: 22px; color: #cad6db; font-size: .9rem; line-height: 1.8; }
.home-service-note > a { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding-block: 14px; border-top: 1px solid rgba(237, 242, 244, .22); }
.home-showcase .home-service-note > a strong { color: var(--home-white); font-size: .95rem; font-weight: 600; }
.home-showcase .home-service-note > a span { grid-column: 1; color: var(--home-dark-muted); font-size: .75rem; line-height: 1.5; }
.home-service-note > a i { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; color: var(--home-teal); }
.home-service-note > a:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Closing contact ---------- */
.home-conversation { background: var(--home-navy); color: var(--home-white); padding-block: clamp(36px, 4vw, 52px); }
.home-conversation > .home-wrap { display: flex; justify-content: space-between; gap: clamp(24px, 4vw, 56px); align-items: center; }
.home-conversation .home-label { color: var(--home-brass); }
.home-showcase .home-conversation h2 { color: var(--home-white); font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -.035em; margin-block: 10px; }
.home-showcase .home-conversation p:not(.home-label) { max-width: 60ch; color: #cad6db; line-height: 1.7; font-size: .92rem; }
.home-conversation .home-button { flex-shrink: 0; }

@media (max-width: 1000px) {
    .home-shop-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; }
    .home-shop-copy { padding-top: 0; }
    .home-helpdesk-heading { gap: clamp(24px, 4vw, 44px); }
    .home-helpdesk-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; }
    .home-operations-layout { gap: 40px; }
}
@media (max-width: 760px) {
    .home-intro-band { padding-block: calc(var(--nav-height) + 26px) 24px; }
    .home-showcase .home-label { font-size: .75rem; }
    .home-showcase .home-intro h1 { margin-top: 10px; font-size: clamp(2rem, 8.2vw, 3rem); letter-spacing: -.03em; }
    .home-intro__offer { flex-direction: column; align-items: start; margin-top: 18px; }
    .home-showcase .home-intro__copy { font-size: .97rem; }
    .home-intro__actions { margin-top: 2px; }
    .home-showcase #home-discovery { margin-top: 18px; gap: 0 20px; }
    .home-showcase #home-discovery a { font-size: .85rem; }

    .home-shop-band { padding-block: 24px 26px; }
    .home-product-title { padding-bottom: 18px; gap: 10px 18px; }
    .home-showcase .home-product-title h2 { font-size: clamp(1.75rem, 7vw, 2.55rem); }
    .home-edition { border-left: 0; padding-left: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
    .home-edition strong { font-size: .95rem; }
    .home-edition strong::before { content: 'v'; }

    .home-shop-layout, .home-helpdesk-layout, .home-helpdesk-heading, .home-operations-layout { grid-template-columns: 1fr; }
    .home-showcase .home-shop-copy h3 { max-width: 24ch; font-size: 1.5rem; }
    .home-showcase .home-shop-copy > p { margin-top: 14px; max-width: 55ch; font-size: .95rem; }
    .home-shop-update { margin-top: 22px; }
    .home-actions { margin-top: 20px; gap: 10px 18px; }
    .home-gallery__tabs { gap: 18px; }
    .home-showcase .home-gallery__tabs button { font-size: .8rem; }
    /* Auf kleinen Screens zeigen die Produktbilder ihre natürliche Proportion
       (volle Breite, Höhe nach Seitenverhältnis), statt im festen Kasten
       gequetscht oder beschnitten zu werden. Der Katalog-Screenshot (Hochformat)
       nutzt damit die gesamte verfügbare Breite; die Vergrößerung übernimmt
       weiterhin die Lightbox (data-experience-enlarge). */
    .home-showcase .home-screen { aspect-ratio: auto; }
    .home-showcase .home-screen img { width: 100%; height: auto; }
    .home-showcase .home-screen--catalog img { max-width: 100%; margin-left: 0; }
    .home-shop-foot { flex-direction: column; align-items: start; gap: 14px; margin-top: 24px; padding-top: 20px; }
    .home-showcase .home-demo-note a { min-height: 44px; }
    .home-showcase .home-shop-foot > p a::after { inset: -12px -8px; }

    .home-helpdesk { padding-block: 44px; }
    .home-helpdesk-heading { gap: 18px; margin-bottom: 22px; }
    .home-showcase .home-helpdesk-heading h2 { font-size: clamp(2.1rem, 7vw, 3rem); }
    .home-showcase .home-helpdesk-heading > p { max-width: 46ch; font-size: .95rem; }
    .home-helpdesk-layout { gap: 26px; }
    .home-showcase .home-helpdesk-copy h3 { max-width: 30ch; }
    .home-price { padding-block: 18px; }

    .home-operations { padding-block: 44px; }
    .home-service-note { margin-top: 0; padding: 22px; }
    .home-conversation > .home-wrap { flex-direction: column; align-items: start; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-showcase .site-main * { transition: none !important; animation: none !important; }
}