/* The --career-* and --private-* values are set by theme_render_head() in the page head. */

/*
 * The background consists of two layers: the gradient sits on the body, the
 * optional background image above it in body::before. Only this way does the
 * image opacity from the settings really act as a cross-fade – as another
 * background layer the image would always have covered the gradient fully.
 * Which values apply is decided by the theme class (career.css / private.css).
 */
/* Headings may have a font of their own; without a choice they follow the
   body text (the variable is then set to the same value). */
/* Headings take the heading font, everything else inherits the body text font
   from <body>. Whoever needs an exception adds the class .display-font – a
   new element needs nothing else. */
h1, h2, h3, h4, h5, h6, .display-font {
    font-family: var(--heading-font, var(--site-font));
}

/*
 * The page is one column: header, content, footer. The content takes whatever
 * height is left over, so the footer sits directly under it on a long page and
 * at the bottom edge on a short one.
 *
 * That is why no section carries a minimum height of its own, and none should:
 * a fixed 100vh puts air under the content that nobody asked for, and whatever
 * follows - a quote, the footer - starts far too late.
 */
body {
    margin: 0;
    font-family: var(--site-font, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
    transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-gradient, #ffffff);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main { flex: 1 0 auto; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--bg-image, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: var(--bg-image-opacity, 1);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Every page starts at the same distance below the header. The value sits on
 * the one frame that all pages share, so no page brings a spacing of its own -
 * that is what made the content jump while clicking through.
 *
 * A title area is the exception: it reaches up to the header and pulls itself
 * back over this distance, then leaves the same distance below itself.
 */
:root {
    --space-page: clamp(32px, 4vw, 52px);
}

#content {
    padding-top: var(--space-page);
}

#content .container > :first-child,
#content .container > :first-child > :first-child {
    margin-block-start: 0;
}

#content .container > :last-child,
#content .container > :last-child > :last-child {
    margin-block-end: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
}

.hidden { display: none !important; }

.section { padding: 0 0 60px; }
.mb-5 { margin-bottom: 3rem; }
.text-center { text-align: center; }

/*
 * The line that divides content. It looks the same everywhere and takes its
 * colour from the settings, so one line never sits paler than another.
 *
 * As a class on an <hr>, or through --ui-rule as the border of a block.
 * --ui-line stays what it is: the quiet edge of a card or a field.
 */
.rule {
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--ui-rule);
}

.rule-above { border-top: 1px solid var(--ui-rule); }
.rule-below { border-bottom: 1px solid var(--ui-rule); }

/* A link that reads as text: an underline and an arrow, no box. */
.text-action {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    font-size: var(--type-sm);
    cursor: pointer;
    transition: transform 0.2s;
}

.text-action .icon--inline { font-size: var(--glyph-sm); }
.text-action:hover { transform: translateY(-3px); }

/* One look for every scrollbar - page, window, list, admin area.
 *
 * The standard properties are inherited, so setting them on the root is
 * enough; no component carries a rule of its own. An area that changes its
 * colours declares them again against its own tokens - the reading window at
 * night does that, and then its bar follows along.
 *
 * Older WebKit knows only the pseudo elements. Those do not inherit, but they
 * read the custom properties of the element they belong to, so the same two
 * tokens hold for both ways.
 */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--ui-rule, #c9ccd1) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track { background: transparent; }

/* The border is the gap: with background-clip the thumb keeps its distance
   from the edge without a track that would draw a second line. */
::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-color: var(--ui-rule, #c9ccd1);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover { background-color: var(--ui-ink-muted, #6b6459); }

::-webkit-scrollbar-corner { background: transparent; }
/*
 * The type scale of the whole site. Every font-size anywhere in the project
 * refers to one of these values - rule E4 in tests/architecture.php enforces
 * it. Changing a value here changes it everywhere at once.
 *
 * Text steps: the six small steps carry body copy, meta lines, buttons and
 * badges. The five heading steps grow with the viewport, so a page title never
 * needs its own media query.
 *
 * Glyph steps: sizes for single characters that act as pictures - close
 * crosses, stars, arrows, emoji. They are deliberately not text steps; a
 * bigger body text must not blow up a close button.
 */

:root {
    /* Only for spaced capitals - a kicker above a title. Too small for a line
       to be read in one go, big enough for three or four words in caps. */
    --type-3xs: 0.625rem;
    --type-2xs: 0.72rem;
    --type-xs: 0.8rem;
    --type-sm: 0.875rem;
    --type-md: 0.95rem;
    --type-base: 1rem;
    --type-lg: 1.1rem;

    --type-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
    --type-h4: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
    --type-h3: clamp(1.2rem, 1.05rem + 0.8vw, 1.5rem);
    --type-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem);
    --type-h1: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --type-display: clamp(2.6rem, 1.8rem + 4vw, 4.2rem);

    --glyph-sm: 1.2rem;
    --glyph-md: 1.5rem;
    --glyph-lg: 1.8rem;
    --glyph-xl: 2.2rem;
    --glyph-2xl: 3.5rem;
    --glyph-3xl: 4.5rem;

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-base: 1.6;
    --leading-loose: 1.8;

    --tracking-display: -0.03em;
    --tracking-tight: -0.01em;
    --tracking-wide: 0.06em;
    --tracking-eyebrow: 0.18em;
}
/*
 * Base typography of the pages. Headings get their size from the element, so a
 * new page needs no rule of its own. Whoever needs the look of another level
 * uses the matching class on the semantically correct element - for example
 * <h2 class="h1"> for a section that reads as a page title.
 *
 * The four name classes stand for roles, not for sizes: .display is the one
 * big line of a page, .eyebrow the small line above a title, .lead the opening
 * paragraph, .meta a line of details.
 */

/* A page title always stands at the top, so it never brings a distance of its
   own - that one comes from --space-page on the content frame. */
h1, .h1 {
    font-size: var(--type-h1);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-block: 0 0.5em;
}

h2, .h2 {
    font-size: var(--type-h2);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

h3, .h3 {
    font-size: var(--type-h3);
    line-height: var(--leading-snug);
}

h4, .h4 {
    font-size: var(--type-h4);
    line-height: var(--leading-snug);
}

h5, h6 {
    font-size: var(--type-md);
    line-height: var(--leading-snug);
}

.h1, .h2, .h3, .h4 {
    font-family: var(--heading-font, var(--site-font));
    font-weight: 700;
}

.display {
    font-size: var(--type-display);
    line-height: 1.02;
    letter-spacing: var(--tracking-display);
    font-family: var(--heading-font, var(--site-font));
    font-weight: 800;
}

.eyebrow {
    font-size: var(--type-3xs);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ui-accent);
}

.lead {
    font-size: var(--type-lead);
    line-height: var(--leading-base);
}

.meta {
    font-size: var(--type-sm);
    line-height: var(--leading-snug);
}

/* A line drawing inside a line of text, as large as the letters around it -
   site_icon('arrow-out', 'icon icon--inline'). Never a font character for
   this: a phone turns arrow characters into emoji. */
.icon--inline {
    display: inline-block;
    flex: none;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
    stroke-width: 2;
}

/* Lifts a part of a line into the secondary colour - the one from the
   settings, never a colour of its own. */
.accent { color: var(--ui-accent); }
/* Scroll offset for the sticky header. Applies to every target of a jump on
   the same page, otherwise the header slides over it. */
.category-section,
.category-navigation,
.news-wall,
.contact-section {
    scroll-margin-top: 90px;
}
/* The image row that carries a gallery entry or a recommendation. */
.media-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: pan-y;
}

.media-carousel-track,
.media-carousel-slide {
    width: 100%;
    height: 100%;
}

.media-carousel-slide {
    display: block;
    object-fit: inherit;
}

.media-carousel-slide[hidden] {
    display: none !important;
}

.media-carousel-slide[data-src],
.media-carousel-slide.is-loading {
    background: var(--ui-surface-muted, #f2f2f2);
}

[data-lightbox-image] { cursor: pointer; }

.media-carousel-button {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 30, 35, 0.68);
    color: white;
    font-size: var(--glyph-lg);
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.media-carousel-button--previous { left: 0.65rem; }
.media-carousel-button--next { right: 0.65rem; }

.media-carousel-counter {
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    z-index: 2;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(20, 30, 35, 0.68);
    color: white;
    font-size: var(--type-xs);
}

/* Dots at the bottom edge: they show that there is more than one image. They
   only appear from two images on - with one there are none at all. */
.media-carousel-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(20, 18, 16, 0.42);
    backdrop-filter: blur(3px);
    z-index: 2;
}

.media-carousel-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.media-carousel-dot:hover { background: rgba(255, 255, 255, 0.8); }

.media-carousel-dot.is-active {
    background: #fff;
    transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
    .media-carousel-dot { transition: none; }
}
/* The star rating. It appears with recommendations, with single entries and on
   a pinboard note, so it belongs to none of them. */
.rating { color: var(--ui-accent); font-size: var(--glyph-sm); }
.star.filled { color: var(--ui-accent); }
.star:not(.filled) { color: var(--ui-line); }
/* No distance of its own on top: what stands above the footer keeps the page
   spacing, and a second one here would make the footer sit lower on every
   page than anything else that follows the content. */
.main-footer {
    padding: 30px 0;
    font-size: var(--type-sm);
    color: var(--ui-ink-muted, #666);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.social-icon {
    color: #666;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8f9fa;
}

.theme-career .social-icon:hover {
    color: white;
    background: var(--career-primary);
    transform: translateY(-3px);
}

.theme-private .social-icon:hover {
    color: white;
    background: var(--private-primary);
    transform: translateY(-3px);
}

.footer-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #000;
}

.footer-links .separator {
    margin: 0 10px;
    opacity: 0.3;
}

/* The button back to the top belongs to the page frame, see layout.php. */
#scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 300; /* above header (100) and page content (50) */
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px;
    transition: all 0.3s ease;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

#scroll-to-top.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

#scroll-to-top .arrow-up {
    font-size: var(--glyph-sm);
    font-weight: bold;
}
/* ===========================================================================
   Title area – the first thing on every page. Colors exclusively from --ui-*.
   Mirror of templates/shared/hero.php.
   =========================================================================== */

/* Pulls itself back over the distance that #content keeps below the header, so
   the title area reaches up to it. Below itself it leaves that same distance. */
.hero {
    margin-top: calc(var(--space-page) * -1);
    margin-bottom: var(--space-page);
}

/* --- compact: every subpage ---------------------------------------------------
   No image, no buttons: the text starts exactly where the content of a page
   without a title area would start. */
.hero--compact {
    padding: var(--space-page) 0 0;
}

.hero--compact .hero-eyebrow { margin: 0 0 12px; }

.hero--compact .hero-title {
    margin: 0 0 16px;
}

.hero--compact .hero-claim {
    max-width: 620px;
    margin: 0;
    font-size: var(--type-sm);
    font-weight: 400;
    color: var(--ui-ink-muted);
}

.hero--compact .hero-text {
    max-width: 620px;
    margin: 14px 0 0;
}

/* --- full: the start page --------------------------------------------------- */
.hero--full {
    padding: 54px 0 46px;
    max-width: 720px;
}

/* --- feature: a showcase ------------------------------------------------------
   A dark band as the deliberate counterpart to the paper page: the text on the
   left, the picture of the thing in focus in the middle, its card on the
   right. All colours are the page's own, turned around. */
.hero--feature {
    overflow: clip;
    padding: clamp(40px, 6vw, 72px) 0;
    background: var(--ui-ink);
    color: var(--ui-page);
}

.hero--feature .hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr 0.62fr;
    gap: 26px;
    align-items: center;
}

.hero--feature .hero-title,
.hero--feature .hero-claim,
.hero--feature .hero-side-title { color: var(--ui-page); }

.hero--feature .hero-claim {
    max-width: 340px;
    font-size: var(--type-md);
    font-weight: 400;
    color: color-mix(in srgb, var(--ui-page) 76%, transparent);
}

.hero--feature .hero-text { color: color-mix(in srgb, var(--ui-page) 76%, transparent); }

.hero-facts {
    display: flex;
    gap: 28px;
    max-width: 320px;
    margin: clamp(30px, 5vw, 64px) 0 0;
    padding-top: 22px;
    border-top-color: color-mix(in srgb, var(--ui-page) 30%, transparent);
}

.hero-fact {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hero-fact dd {
    margin: 0;
    --type-display: var(--type-h1);
    color: var(--ui-accent);
}

.hero-fact dt {
    line-height: 1.9;
    color: color-mix(in srgb, var(--ui-page) 76%, transparent);
}

.hero-visual {
    position: relative;
    display: grid;
    place-items: center;
    height: 460px;
}

.hero-orbit {
    position: absolute;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--ui-accent) 45%, transparent);
    border-radius: 50%;
}

.hero-orbit--near { width: min(380px, 90%); }
.hero-orbit--far { width: min(500px, 118%); opacity: 0.45; }

.hero-visual-image,
.hero-visual-blank {
    position: relative;
    z-index: 1;
    max-width: 72%;
    max-height: 380px;
    object-fit: cover;
    transform: rotate(-6deg);
    box-shadow: 22px 28px 50px rgba(0, 0, 0, 0.55);
    transition: transform 0.35s;
}

.hero-visual-blank {
    display: grid;
    place-items: center;
    width: 220px;
    height: 300px;
    background: var(--ui-surface);
    color: var(--ui-ink);
}

.hero-visual:hover .hero-visual-image { transform: rotate(-1deg) scale(1.03); }

.hero-tag {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 50px;
    display: grid;
    align-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: var(--ui-page);
    color: var(--ui-ink);
    text-align: center;
    transform: rotate(12deg);
}

.hero-tag strong {
    display: block;
    margin-top: 4px;
    font-family: var(--heading-font, var(--site-font));
    font-size: var(--type-md);
    letter-spacing: 0;
    text-transform: none;
}

.hero-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    gap: 24px;
    padding: 60px 0 60px 27px;
    border-left: 1px solid color-mix(in srgb, var(--ui-page) 22%, transparent);
}

.hero-side-index { color: color-mix(in srgb, var(--ui-page) 70%, transparent); }
.hero-side-eyebrow { margin: 0 0 10px; }
.hero-side-title { margin: 8px 0; }

.hero-side-text {
    margin: 0 0 24px;
    font-size: var(--type-sm);
    color: color-mix(in srgb, var(--ui-page) 74%, transparent);
}

@media (max-width: 1050px) {
    .hero--feature .hero-inner { grid-template-columns: 1.1fr 1fr; }
    .hero-side {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        padding: 20px 0 0;
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--ui-page) 22%, transparent);
    }
    .hero-side-body { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
    .hero-side-title, .hero-side-text, .hero-side-eyebrow { margin: 0; }
    .hero-visual { height: 380px; }
}

@media (max-width: 760px) {
    .hero--feature .hero-inner { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
    .hero-visual { height: 330px; }
    .hero-visual-image, .hero-visual-blank { max-height: 280px; }
    .hero-tag { right: 6px; bottom: 6px; }
    .hero-side { display: block; }
    .hero-side-index { display: none; }
}

/* --- Title area with image -----------------------------------------------
   The image lies behind text and buttons and spans the full width – beyond
   the padding of the container as well. On top of it a veil in the page
   color: without it the text would no longer be safely readable on light
   spots of the photo, and that is exactly what happens depending on image
   and screen.
   ------------------------------------------------------------------------- */

/* The title area sits outside the content frame and is therefore screen
   wide by itself – without any math with vw, which produces an overhang on
   computers with a visible scrollbar. The text inside sits in a container of
   its own and thus stays aligned with the rest. */
.hero.has-image {
    position: relative;
    max-width: none;
    padding: 74px 0 66px;
    border-radius: 0;
    isolation: isolate;
}

/* The text stays in the zone where the veil is dense – otherwise it lies on
   the restless part of the image and becomes hard to read. */
.hero.has-image .hero-eyebrow,
.hero.has-image .hero-title,
.hero.has-image .hero-claim,
.hero.has-image .hero-text,
.hero.has-image .hero-actions { max-width: 620px; }

.hero.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center 42%;
    opacity: var(--hero-image-opacity, 1);
}

/* The veil comes from the settings: color stops with opacity, just like the
   background. Without a setting of its own there is no veil at all. */
.hero.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hero-overlay, none);
}

.hero.has-image .hero-text { color: var(--ui-ink); }

.hero-eyebrow { margin: 0 0 10px; }

.hero-title {
    margin: 0 0 12px;
    color: var(--ui-ink);
}

.hero-claim {
    margin: 0 0 16px;
    font-weight: 500;
    color: var(--ui-ink);
}

.hero-text {
    margin: 0 0 26px;
    max-width: 46em;
    font-size: var(--type-base);
    line-height: var(--leading-base);
    color: var(--ui-ink-muted);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* The head of a section: eyebrow and heading on the left, a note on the right.
   Mirror of templates/shared/section-head.php. */

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin: 0 0 clamp(20px, 3vw, 28px);
}

.section-head :is(h2, h3, h4) { margin: 8px 0 0; }

.section-head .display { --type-display: var(--type-h1); }

.section-head > p {
    max-width: 260px;
    margin: 0;
    text-align: right;
    color: var(--ui-ink-muted);
}

@media (max-width: 760px) {
    .section-head { align-items: start; }
    .section-head > p { display: none; }
}
/* A ranked list: the first place as a showcase, the places after it as
   numbered rows. Mirror of templates/shared/ranked-list.php. */

.ranked-list { margin-bottom: clamp(30px, 4vw, 44px); }

/* --- The first place ---------------------------------------------------------- */

.ranked-lead {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    min-height: 460px;
    margin-bottom: clamp(36px, 5vw, 56px);
    overflow: hidden;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    box-shadow: 0 16px 50px rgba(20, 18, 16, 0.07);
}

.ranked-lead-media {
    position: relative;
    display: grid;
    place-items: center;
    padding: 36px;
    overflow: hidden;
    background: var(--ui-band);
}

/* The ring behind the picture - the same mark the title area gives the thing
   in focus. */
.ranked-lead-media::before {
    content: "";
    position: absolute;
    width: min(370px, 82%);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--ui-accent) 40%, transparent);
    border-radius: 50%;
}

.ranked-lead-media .media-carousel {
    position: relative;
    width: min(240px, 72%);
    height: min(380px, 100%);
    transform: rotate(-5deg);
    box-shadow: 22px 26px 30px rgba(24, 34, 55, 0.22);
    transition: transform 0.5s;
}

.ranked-lead:hover .ranked-lead-media .media-carousel { transform: rotate(-1deg) translateY(-7px); }

.ranked-lead-media img { object-fit: cover; cursor: zoom-in; }

.ranked-lead-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(28px, 4vw, 50px);
}

.ranked-lead-title {
    margin: 4px 0 10px;
    --type-display: var(--type-h1);
}

.ranked-lead-intro {
    max-width: 420px;
    margin: 16px 0 24px;
    color: var(--ui-ink-muted);
}

/* --- The number ----------------------------------------------------------------
   Set in the heading face and the accent colour, as the shelves count their
   tiles. */

.ranked-number {
    font-family: var(--heading-font, var(--site-font));
    font-size: var(--type-h1);
    font-weight: 700;
    line-height: 1;
    color: var(--ui-accent);
}

.ranked-number--lead {
    display: block;
    margin: 12px 0 0;
    font-size: var(--type-display);
}

/* --- The places after it ------------------------------------------------------ */

.ranked-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ranked-row {
    display: grid;
    grid-template-columns: 70px 90px minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    padding: 22px 0;
    border-top: 1px solid var(--ui-rule);
}

.ranked-row:last-child { border-bottom: 1px solid var(--ui-rule); }

.ranked-row-media {
    width: 90px;
    height: 120px;
    overflow: hidden;
    background: var(--ui-band);
    transition: transform 0.3s;
}

.ranked-row:hover .ranked-row-media { transform: rotate(-3deg); }

.ranked-row-media img { object-fit: cover; cursor: zoom-in; }

/* A thumbnail has no room for arrows; the picture window pages instead. */
.ranked-row-media .media-carousel-button { display: none; }

.ranked-row-title {
    margin: 0 0 6px;
    font-size: var(--type-h4);
}

.ranked-row-intro {
    max-width: 530px;
    margin: 6px 0 0;
    font-size: var(--type-sm);
    color: var(--ui-ink-muted);
}

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

.ranked-lead-title button,
.ranked-row-title button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ranked-lead-title button:hover,
.ranked-row-title button:hover { text-decoration: underline; }

/* Without a picture the initial stands in its place. */
.ranked-blank {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    color: var(--ui-ink-muted);
}

.ranked-lead-media .ranked-blank {
    position: relative;
    width: min(240px, 72%);
    min-height: 240px;
    background: var(--ui-surface);
}

@media (max-width: 760px) {
    .ranked-lead { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .ranked-lead-media { min-height: 315px; padding: 25px; }
    .ranked-lead-media .media-carousel { width: 174px; height: 260px; }
    .ranked-lead-media::before { width: 260px; }

    .ranked-row { grid-template-columns: 40px 62px minmax(0, 1fr); gap: 12px; padding: 18px 0; }
    .ranked-number { font-size: var(--type-h2); }
    .ranked-number--lead { font-size: var(--type-h1); }
    .ranked-row-media { width: 62px; height: 92px; }
    .ranked-row .text-action { grid-column: 3; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    .ranked-lead-media .media-carousel,
    .ranked-row-media { transition: none; }
    .ranked-lead:hover .ranked-lead-media .media-carousel,
    .ranked-row:hover .ranked-row-media { transform: none; }
}
/* ---------------------------------------------------------------------------
   Contact form – mirror of templates/career/contact-form.php.

   Own classes instead of Bootstrap – the website loads none.
   --------------------------------------------------------------------------- */

.contact-section {
    position: relative;
    z-index: 1;
    padding: 0 0 var(--space-page);
}

.contact-head {
    text-align: center;
    margin-bottom: 22px;
}

.contact-head h2 {
    margin: 0 0 6px;
    color: var(--ui-ink);
}

.contact-head p {
    margin: 0;
    color: var(--ui-ink-muted);
    font-size: var(--type-md);
}

.contact-card {
    padding: 26px 28px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20, 18, 16, 0.05);
}

/* Name and e-mail side by side as soon as there is room. */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.contact-field { margin-bottom: 16px; }

.contact-field label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--type-sm);
    font-weight: 600;
    color: var(--ui-ink-muted);
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-family: inherit;
    font-size: var(--type-base);
    line-height: 1.5;
    color: var(--ui-ink);
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-field textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder { color: var(--ui-ink-muted); opacity: 0.7; }

.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-accent-soft);
}

.contact-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

@media (max-width: 599px) {
    .contact-card { padding: 20px; border-radius: 16px; }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-actions .btn { width: 100%; justify-content: center; }
}
/* Game overlay: the visible height is synchronized via visualViewport.
   top ALWAYS stays 0 – an offset (e.g. from visualViewport.offsetTop) would
   expose the header after rotations and shift the touch targets in the iframe. */
.game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--game-overlay-height, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
    background: #000;
    box-sizing: border-box;
    z-index: 9999;
    display: block;
    isolation: isolate;
}

.game-overlay.hidden {
    display: none;
}

/* As long as a game is open: freeze the page behind it completely.
   JS additionally sets body.style.top to the negative scroll position and
   restores it on closing (iOS ignores overflow: hidden on its own). */
body.game-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* Safeguard: hide the header in case the overlay is ever shifted. */
body.game-open .main-header {
    visibility: hidden;
}

.btn-close-game {
    position: fixed;
    top: 8px;
    right: 8px;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    z-index: 10000;
    display: flex !important;
    visibility: visible;
    opacity: 1;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    color: white;
    font-size: var(--glyph-sm);
    line-height: 1;
    backdrop-filter: blur(5px);
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.btn-close-game:hover {
    color: #ff5252;
}

.game-controls-bar {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2100;
    display: flex;
    gap: 10px;
}

.game-controls-bar.hidden {
    display: none;
}

.game-ctrl-btn {
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: white;
    font-size: var(--glyph-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.game-ctrl-btn:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.9);
}

.game-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: var(--game-overlay-height, 100dvh);
    background: #000;
}

#game-iframe {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    border: 0;
    width: 100%;
    height: var(--game-overlay-height, 100dvh);
}

@media (max-width: 768px) {
    .game-controls-bar {
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10001;
    }

    .virtual-gamepad {
        position: fixed !important;
        bottom: 15px !important;
        left: 0;
        width: 100%;
        z-index: 10001;
    }
}
.career-access {
    display: flex;
    justify-content: center;
    padding: 0 20px 100px;
}

.career-access-dialog {
    width: min(100%, 430px);
    padding: 2rem;
    border-radius: 16px;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.career-access-dialog form { display: grid; gap: 0.75rem; }
.career-access-dialog input { width: 100%; padding: 0.8rem; border: 1px solid #cbd5e1; border-radius: 8px; }
.career-access-dialog button[type="submit"] { padding: 0.8rem; border: 0; border-radius: 8px; background: #5b21b6; color: #fff; cursor: pointer; }
.career-access-error { margin-bottom: 1rem; padding: 0.75rem; border-radius: 8px; background: #fee2e2; color: #991b1b; }

/* ===========================================================================
   Header bar and basic building blocks in the new draft

   All colors come from --ui-*. They sit in the head of every page and are
   computed in PHP from the two main colors of the area – surfaces, borders,
   pills and hover states included. No fixed color value is written here
   therefore, except for shadows (those are neutral on purpose).
   =========================================================================== */

/* Deliberately kept flat: the site was meant as a lean site, and the header is
   visible on every device. Everything extra (account, area switch) has to fit
   in without additional height. */
.main-header {
    padding: 8px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: all 0.5s ease;
    backdrop-filter: blur(10px);
}

.main-header {
    padding: 0;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-line);
    box-shadow: 0 1px 12px rgba(20, 18, 16, 0.06);
    backdrop-filter: none;
}

/* Only the height is its own. The distance to the left and right comes from
   .container, like everywhere - otherwise the header would stand wider than
   the content below it, and the page would not be flush at the top. */
.site-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 18px;
    min-height: 0;
    padding-block: 10px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* --- Logo with wordmark --------------------------------------------------- */

.site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--ui-ink);
}

.site-brand .logo { height: 34px; width: auto; display: block; }

.site-brand-name {
    font-family: var(--heading-font, var(--site-font));
    font-size: var(--type-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* --- Text navigation ------------------------------------------------------ */

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
    min-width: 0;
    overflow: hidden;
}

.site-nav a {
    padding: 8px 11px;
    border-radius: 10px;
    color: var(--ui-ink-muted);
    font-size: var(--type-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

.site-nav a:hover { color: var(--ui-ink); background: var(--ui-surface-muted); }

/* --- Right side ----------------------------------------------------------- */

.site-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.site-bar { --bar-control: 38px; }

.site-actions > .pill,
.site-actions > .nav-toggle,
.site-actions > .area-switch,
.site-actions .avatar-button {
    height: var(--bar-control);
    box-sizing: border-box;
}

.site-actions > .nav-toggle { width: var(--bar-control); }

.site-actions .avatar-button {
    width: calc(var(--bar-control) - 4px);
    height: calc(var(--bar-control) - 4px);
}

.site-actions .avatar-button .icon { width: 17px; height: 17px; }

.site-actions > .pill { padding-top: 0; padding-bottom: 0; }
.site-actions > .area-switch { padding: 3px; }
.site-actions > .area-switch a { height: calc(var(--bar-control) - 6px); padding: 0 15px; }

/* --- Second row (landscape only) ----------------------------------------- */

.site-subnav { display: none; }

.site-subnav .container {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 7px;
    padding-bottom: 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

.site-subnav .container::-webkit-scrollbar { display: none; }

.site-subnav a {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--ui-ink-muted);
    font-size: var(--type-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.site-subnav a:hover { color: var(--ui-ink); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 50px;
    font-size: var(--type-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
}

.pill .icon { width: 16px; height: 16px; }

.pill-accent {
    background: var(--ui-accent-soft);
    color: var(--ui-accent-ink);
    border-color: var(--ui-accent-soft);
}

.pill-accent:hover { filter: brightness(0.97); }

/* --- Area switch ---------------------------------------------------------- */

.area-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--ui-surface-muted);
    border-radius: 50px;
}


.area-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 7px 15px;
    border: none;
    border-radius: 50px;
    background: none;
    color: var(--ui-ink-muted);
    font: inherit;
    font-size: var(--type-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.area-switch a.is-active {
    background: var(--ui-primary);
    color: var(--ui-primary-ink);
}

/* --- Account button ------------------------------------------------------- */

.avatar-button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ui-primary);
    color: var(--ui-primary-ink);
    font-size: var(--type-md);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.avatar-button .icon { width: 19px; height: 19px; }
.avatar-button.as-static { cursor: default; }

.account-menu-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 8px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ui-line);
}

.account-menu-head strong { display: block; font-size: var(--type-md); }
.account-menu-head small { display: block; font-size: var(--type-xs); opacity: 0.65; }

.account-menu-panel a,
.account-menu-panel button {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-menu-panel .icon { width: 17px; height: 17px; opacity: 0.7; }

/* --- Menu button ---------------------------------------------------------- */

.nav-toggle {
    display: none;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-surface);
    color: var(--ui-ink);
    cursor: pointer;
}

.nav-toggle .icon { width: 20px; height: 20px; }

/* --- Menu panel ----------------------------------------------------------- */

.site-menu {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    flex-direction: column;
    padding: 18px;
    background: var(--ui-ink);
    color: var(--ui-surface);
    overflow-y: auto;
}

.site-menu[hidden] { display: none; }
body.menu-open { overflow: hidden; }

.site-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.site-menu-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    cursor: pointer;
}

/* The area switch sits on top: it answers the first question – where am I
   right now – before it comes to individual entries. */
.site-menu-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-menu-mode .area-switch { background: rgba(255, 255, 255, 0.14); }
.site-menu-mode .area-switch a { color: rgba(255, 255, 255, 0.78); }
.site-menu-mode .pill-accent { color: var(--ui-accent-ink); }

.site-menu-list { display: flex; flex-direction: column; }

.site-menu-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: inherit;
    font-size: var(--type-lg);
    font-weight: 600;
    text-decoration: none;
}

.site-menu-list .icon { width: 21px; height: 21px; opacity: 0.8; }

/* The crest also stands before the wordmark inside the menu panel. A row for
   account entries is deliberately missing – that is what the account button
   is for. */
.site-menu-brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

.site-menu-brand .logo {
    height: 30px;
    width: auto;
    display: block;
    /* The crest is drawn dark; on the dark panel it needs a light inversion,
       otherwise it disappears. */
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

/* --- Page not found ------------------------------------------------------- */

.not-found {
    /* Centered in the visible area, but without pushing the header away. */
    min-height: 58vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 64px 20px;
}

.not-found-code {
    font-family: var(--heading-font, var(--site-font));
    font-size: var(--type-display);
    font-weight: 700;
    line-height: 1;
    margin: 0;
    /* Clearly toned down: the number provides context, the statement is in
       the sentence below. */
    color: var(--ui-line);
}

.not-found h1 {
    margin: 8px 0 0;
}

.not-found p { color: var(--ui-ink-muted); margin: 0; }
.not-found .btn { margin-top: 22px; }

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

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 50px;
    border: 1px solid transparent;
    font-size: var(--type-md);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20, 18, 16, 0.16); }

.btn-primary { background: var(--ui-primary); color: var(--ui-primary-ink); }
.btn-primary:hover { background: var(--ui-primary-hover); }

.btn-ghost {
    background: var(--ui-surface);
    color: var(--ui-ink);
    border-color: var(--ui-line);
}

.icon-inline { width: 17px; height: 17px; }

/* ---------------------------------------------------------------------------
   Tablet: text navigation gives way to the menu panel
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .site-nav { display: none; }
    .nav-toggle { display: grid; }
    .site-brand { margin-right: auto; }
}

/* Two steps, set by the header script as soon as the entries no longer fit
   side by side: first tightened up, then down to the menu icon. */
.main-header.nav-tight .site-bar { gap: 12px; }
.main-header.nav-tight .site-nav { gap: 0; }
.main-header.nav-tight .site-nav a { padding: 8px 7px; font-size: var(--type-sm); }
.main-header.nav-collapsed .site-nav { display: none; }
.main-header.nav-collapsed .nav-toggle { display: grid; }
.main-header.nav-collapsed .site-brand { margin-right: auto; }

/* ---------------------------------------------------------------------------
   Phone
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* No padding of its own: otherwise the light surface of the header peeks
       out as a stripe above the bar. The height comes from .site-bar. */
    .main-header { padding: 0; }

    /* On the phone the account button is the most important target for the
       thumb – there it stays as large as the other controls. */
    .site-actions .avatar-button {
        width: var(--bar-control);
        height: var(--bar-control);
    }

    /* Not flatter than necessary: the bar keeps height and air so that the
       targets can be hit safely with the thumb. The wordmark stays – in the
       draft it also sits next to the crest on the phone. */
    .site-bar { gap: 9px; padding-block: 9px; }
    .site-brand { gap: 8px; }
    .site-brand .logo { height: 30px; }
    .site-brand-name { font-size: var(--type-md); }

    .site-actions { gap: 7px; }
    .pill { padding: 8px 12px; font-size: var(--type-xs); gap: 5px; }
    .pill .icon { width: 14px; height: 14px; }

    /* On the phone the area switch is better placed inside the menu panel –
       up top there would be no room for two text buttons. */
    .site-bar .area-switch { display: none; }

    .site-bar { --bar-control: 38px; }
    .nav-toggle { border-radius: 13px; }
}

/* From here on the wordmark gets narrower so that the pill keeps its label –
   at 390 px both still fit side by side. */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 620px) and (max-width: 1100px) {
    .site-subnav { display: block; }

    /* Only the upper row gets one accent darker; the lower one keeps the
       light surface. Both tones come from the derived colors, so the
       difference moves along with every color change. */
    .site-bar-row { background: var(--ui-surface-sunken); }

    .site-bar { padding-top: 8px; padding-bottom: 8px; }
}

@media (orientation: landscape) and (max-height: 480px) {
    .site-menu { padding: 12px 16px; }
    .site-menu-head { margin-bottom: 12px; }
    .site-menu-mode { padding-bottom: 12px; }
    .site-menu-list a { padding: 10px 6px; font-size: var(--type-md); }
}

@media (max-width: 430px) {
    .site-bar { gap: 7px; padding: 9px 14px; }
    .site-brand { gap: 7px; }
    .site-brand .logo { height: 27px; }
    .site-brand-name { font-size: var(--type-sm); }
    .site-bar .pill { padding: 8px 10px; font-size: var(--type-2xs); }
    .site-bar { --bar-control: 36px; }
}


@media (max-width: 339px) {
    .site-bar .site-brand-name { display: none; }
}

@media (max-width: 379px) {
    .site-bar .pill { padding: 8px 9px; gap: 4px; }
    .site-bar .pill .icon { width: 13px; height: 13px; }
    .site-brand .logo { height: 25px; }
    .site-brand-name { font-size: var(--type-xs); }
    .site-bar { gap: 6px; padding: 9px 12px; }
    .site-bar { --bar-control: 34px; }
}

@media (max-width: 480px) {
}
/*
 * The one window that lays itself over the page. It is always built the same
 * way - bar, head, body, foot - and the appearance decides which zones carry
 * content and how wide the card gets:
 *
 *   text     running text, as before
 *   kompakt  panels and lists, as before
 *   lesen    picture and title in a band, reading tools below them
 *   bild     a picture at full size, counter and actions in the foot
 *
 * Colours come from the page design (--ui-*). Only the picture appearance sets
 * a dark ground of its own, because a picture needs a neutral surrounding.
 */

body.mk-overlay-open { overflow: hidden; }

.mk-overlay[hidden] { display: none; }

.mk-overlay {
    --overlay-pad: clamp(18px, 3vw, 30px);
    /* The columns of the head while it carries a picture. An appearance sets
       its own value here, never the columns themselves. */
    --overlay-picture-columns: 230px minmax(0, 1fr);
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 4vw, 40px);
    background: rgba(20, 18, 16, 0.55);
    backdrop-filter: blur(3px);
    box-sizing: border-box;
}

/* A zone without content carries [hidden]. The rule needs more weight than the
   class that gives the zone its display - otherwise an empty zone would keep
   its grid or flex box and stand on the window as a gap. */
.mk-overlay-card [hidden] { display: none; }

/* Sharp edges: the window is a sheet that lies on the page, not a rounded
   card floating on it. */
.mk-overlay-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    background: var(--ui-surface, #fff);
    color: var(--ui-ink, #141210);
    border: 0;
    box-shadow: 0 25px 80px rgba(13, 20, 35, 0.6);
    box-sizing: border-box;
}

.mk-overlay-card:focus { outline: none; }

/* --- Bar ------------------------------------------------------------------ */

.mk-overlay-bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 10px var(--overlay-pad);
}

.mk-overlay-kicker {
    color: var(--ui-ink-muted, #6b6459);
}

.mk-overlay-kicker[hidden] + .mk-overlay-close { margin-left: auto; }

/* The reading tools are a row of their own directly under the head band, right
   where the text they change begins. A picture window has none - nothing to
   read there. */
.mk-overlay-tools {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 var(--overlay-pad);
    margin: 0 0 18px;
}

.mk-overlay-tools button {
    padding: 6px 11px;
    border: 1px solid var(--ui-line, #d8d3ca);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--type-2xs);
    font-weight: 600;
    cursor: pointer;
}

.mk-overlay-tools button:hover { background: var(--ui-surface-muted, #f2f2f2); }

.mk-overlay-tools button[aria-pressed="true"],
.mk-overlay-tools button[aria-expanded="true"] {
    background: var(--ui-ink, #141210);
    border-color: var(--ui-ink, #141210);
    color: var(--ui-page, #fff);
}

.mk-overlay-tools button[disabled] { opacity: 0.4; cursor: default; }

.mk-overlay-listen .icon--inline { margin-right: 0.35em; }

/* Reading aloud: the speaker opens the player on a row of its own under the
   tools - play or pause, from the start, where the reading stands. */
.mk-overlay-player {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.mk-overlay-player[hidden] { display: none; }

.mk-overlay-tools .mk-overlay-player-button {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
}

.mk-overlay-player-button .icon {
    width: 18px;
    height: 18px;
}

.mk-overlay-player-seek {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: var(--ui-accent, #59d95b);
    cursor: pointer;
}

.mk-overlay-player-seek[disabled] { cursor: default; }

.mk-overlay-player-time {
    flex: none;
    font-size: var(--type-2xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ui-ink-muted, #6b6459);
}

/* A finger needs more room than a pointer. */
@media (pointer: coarse) {
    .mk-overlay-tools .mk-overlay-player-button {
        width: 44px;
        height: 44px;
    }
}

/* Just the character, no ring around it. */
.mk-overlay-close {
    flex: none;
    padding: 0 6px;
    border: 0;
    background: none;
    color: inherit;
    font-size: var(--glyph-md);
    line-height: 1;
    opacity: 0.75;
    cursor: pointer;
}

.mk-overlay-close:hover { opacity: 1; }

/* --- Head ----------------------------------------------------------------- */

.mk-overlay-head {
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 3vw, 28px);
    align-items: start;
    padding: 0 var(--overlay-pad) var(--overlay-pad);
}

.mk-overlay-head[data-picture="shown"] { grid-template-columns: var(--overlay-picture-columns); }

.mk-overlay-figure {
    overflow: hidden;
    background: var(--ui-surface-muted, #f2f2f2);
}

/* The picture may open the large view - then it is a button, and it has to
   fill the box exactly as the picture did. */
.mk-overlay-figure button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.mk-overlay-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mk-overlay-eyebrow { margin: 0 0 6px; }

.mk-overlay-title {
    margin: 0;
    font-family: var(--heading-font, var(--site-font));
    font-size: var(--type-h3);
}

.mk-overlay-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
    margin: 14px 0 0;
    font-size: var(--type-sm);
}

.mk-overlay-meta dt {
    color: var(--ui-ink-muted, #6b6459);
    font-weight: 600;
}

.mk-overlay-meta dd { margin: 0; }

.mk-overlay-rating {
    display: block;
    margin-top: 10px;
    letter-spacing: 0.12em;
}

/* The line under the heading: what the thing is, in one breath. */
.mk-overlay-subtitle {
    margin: 8px 0 0;
    font-size: var(--type-xs);
    line-height: var(--leading-snug);
    color: var(--ui-ink-muted, #777);
}

/* --- Body ----------------------------------------------------------------- */

/* The only zone that scrolls. It declares the scrollbar colours again so they
   follow its own tokens - at night those are the dark ones. */
.mk-overlay-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--overlay-pad) var(--overlay-pad);
    scrollbar-width: thin;
    scrollbar-color: var(--ui-rule) transparent;
}

/* --- Foot ----------------------------------------------------------------- */

.mk-overlay-foot {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 12px var(--overlay-pad);
    border-top: 1px solid var(--ui-rule, rgba(0, 0, 0, 0.16));
}

/* Without counter and name the place is an empty box that would push the
   actions to the far side - a window with only a link starts on the left. */
.mk-overlay-place:has(.mk-overlay-count[hidden]):has(.mk-overlay-caption[hidden]) { display: none; }

/* The counter is a small note, the name carries the line - that difference has
   to be visible, otherwise both read as equally important. */
.mk-overlay-count {
    display: block;
    color: var(--ui-accent, #d3b673);
    font-size: var(--type-2xs);
    letter-spacing: 0.15em;
    font-variant-numeric: tabular-nums;
}

.mk-overlay-caption {
    display: block;
    margin-top: 3px;
    font-family: var(--heading-font, var(--site-font));
    font-size: var(--type-h3);
    font-weight: 700;
    line-height: 1.15;
}

.mk-overlay-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.mk-overlay-actions button,
.mk-overlay-actions a {
    padding: 8px 15px;
    border: 1px solid var(--ui-line, #d8d3ca);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--type-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.mk-overlay-actions .icon--inline { margin-left: 0.35em; }

.mk-overlay-actions button[aria-pressed="true"] {
    border-color: var(--ui-accent, #c9a227);
    color: var(--ui-accent, #c9a227);
}

/* --- Appearance: running text --------------------------------------------- */

.mk-overlay[data-appearance="text"] .mk-overlay-card { max-width: 720px; }

/* Running text that is meant to be read, not skimmed: the lines stand further
   apart than in the rest of the page. */
.mk-overlay[data-appearance="text"] .mk-overlay-body,
.mk-overlay[data-appearance="lesen"] .mk-overlay-body {
    font-size: calc(var(--type-base) * var(--reader-scale, 1));
    line-height: var(--leading-loose);
    color: var(--ui-ink-muted, #4e555d);
}

.mk-overlay[data-appearance="text"] .mk-overlay-body h2,
.mk-overlay[data-appearance="text"] .mk-overlay-body h3,
.mk-overlay[data-appearance="lesen"] .mk-overlay-body h2,
.mk-overlay[data-appearance="lesen"] .mk-overlay-body h3 { color: var(--ui-ink, #141210); }

.mk-overlay[data-appearance="text"] .mk-overlay-body p,
.mk-overlay[data-appearance="lesen"] .mk-overlay-body p { margin: 0 0 1em; }

.mk-overlay[data-appearance="text"] .mk-overlay-body h2,
.mk-overlay[data-appearance="text"] .mk-overlay-body h3,
.mk-overlay[data-appearance="lesen"] .mk-overlay-body h2,
.mk-overlay[data-appearance="lesen"] .mk-overlay-body h3 {
    margin: 1.6em 0 0.5em;
    font-family: var(--heading-font, var(--site-font));
}

/* --- Appearance: panels --------------------------------------------------- */

.mk-overlay[data-appearance="kompakt"] .mk-overlay-card {
    max-width: 560px;
    height: min(520px, 86vh);
}

/* --- Appearance: reading --------------------------------------------------
   The head is a band of its own: a picture of fixed height on the left, the
   heading beside it, the reading tools below. Everything that is not the text
   sits in that band, so the running text below starts unencumbered.
   --------------------------------------------------------------------------- */

.mk-overlay[data-appearance="lesen"] {
    --overlay-pad: clamp(22px, 4vw, 44px);
}

.mk-overlay[data-appearance="lesen"] .mk-overlay-card { max-width: 750px; }

/* The close sits on the band instead of on a row of its own - a line above the
   picture would only push the window's beginning down. On the light band it is
   a disc, so it stays findable without a line of its own. */
.mk-overlay[data-appearance="lesen"] .mk-overlay-bar {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 12px 14px;
}

.mk-overlay[data-appearance="lesen"] .mk-overlay-close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background: var(--ui-ink, #142039);
    color: var(--ui-page, #fff);
    opacity: 1;
}

.mk-overlay[data-appearance="lesen"] .mk-overlay-close:hover {
    background: var(--ui-primary, #142039);
    color: var(--ui-primary-ink, #fff);
}

.mk-overlay[data-appearance="lesen"] .mk-overlay-head {
    gap: 0;
    align-items: center;
    padding: 0;
    margin-bottom: 16px;
    background: var(--ui-band, #f0ece2);
}

/* A band, not a column: the picture keeps its height even when the heading
   beside it runs over two lines. */
.mk-overlay[data-appearance="lesen"] .mk-overlay-figure {
    align-self: stretch;
    min-height: 240px;
    border-radius: 0;
}

.mk-overlay[data-appearance="lesen"] .mk-overlay-intro { padding: 32px 38px 32px 32px; }

.mk-overlay[data-appearance="lesen"] .mk-overlay-title {
    margin: 8px 0;
    font-size: var(--type-h1);
    line-height: 1.1;
}

/* The way onward is a line of text, not a button: it belongs to the reading,
   not to the frame. */
.mk-overlay[data-appearance="lesen"] .mk-overlay-foot {
    justify-content: flex-start;
    padding-top: 0;
    border-top: 0;
}

.mk-overlay[data-appearance="lesen"] .mk-overlay-actions a,
.mk-overlay[data-appearance="lesen"] .mk-overlay-actions button {
    padding: 0 0 4px;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
}

.mk-overlay[data-appearance="lesen"] .mk-overlay-body > h3:first-child { margin-top: 0; }

/* The link follows the last line of the text, not a zone of its own - between
   them stands one line, not the whole bottom margin of the body. */
.mk-overlay[data-appearance="lesen"] .mk-overlay-card:has(.mk-overlay-foot:not([hidden])) .mk-overlay-body {
    padding-bottom: 12px;
}

/* Night mode is for reading, so it takes only what lies below the head band:
   the tools, the text, the foot. The band carries the picture and the heading
   in the page's own tones - turning those around would put light type on a
   light band, and the window would be harder to read, not easier. The page
   behind the window stays as it is either way.

   --ui-page turns with the rest: whatever sits on the ink colour - a pressed
   tool - would otherwise be light on light. A window without running text -
   a picture, a panel - is left alone; there is nothing to read there. */
.mk-overlay-card.is-night { --overlay-night: #14171d; }

/* The card turns with them. The zones do not touch each other - between band
   and tools, between tools and text lies air - and through that air the light
   card would show as a stripe across the window. Only its ground changes; its
   text colour stays, so the band keeps its dark type on a light ground. */
.mk-overlay[data-appearance="text"] .mk-overlay-card.is-night,
.mk-overlay[data-appearance="lesen"] .mk-overlay-card.is-night {
    background: var(--overlay-night);
}

/* The reading window protects its band, a window of running text has none. */
.mk-overlay[data-appearance="text"] .is-night .mk-overlay-head,
.mk-overlay[data-appearance="text"] .is-night .mk-overlay-tools,
.mk-overlay[data-appearance="text"] .is-night .mk-overlay-body,
.mk-overlay[data-appearance="text"] .is-night .mk-overlay-foot,
.mk-overlay[data-appearance="lesen"] .is-night .mk-overlay-tools,
.mk-overlay[data-appearance="lesen"] .is-night .mk-overlay-body,
.mk-overlay[data-appearance="lesen"] .is-night .mk-overlay-foot {
    --ui-surface: #14171d;
    --ui-surface-muted: #1d222b;
    --ui-page: #14171d;
    --ui-ink: #e9e5dd;
    --ui-ink-muted: #a0a7b4;
    --ui-line: rgba(255, 255, 255, 0.16);
    --ui-rule: rgba(255, 255, 255, 0.24);
    background: var(--overlay-night);
    color: #e9e5dd;
}

/* --- Appearance: picture -------------------------------------------------- */

.mk-overlay[data-appearance="bild"] .mk-overlay-card {
    max-width: 1240px;
    background: #111827;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
}

.mk-overlay[data-appearance="bild"] .mk-overlay-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* A picture window has nothing to read, so it never shows reading tools. */
.mk-overlay[data-appearance="bild"] .mk-overlay-head,
.mk-overlay[data-appearance="bild"] .mk-overlay-tools {
    display: none;
}

.mk-overlay[data-appearance="bild"] .mk-overlay-close {
    background: transparent;
    border: 0;
    color: #fff;
}

.mk-overlay[data-appearance="bild"] .mk-overlay-kicker { color: rgba(255, 255, 255, 0.72); }

.mk-overlay[data-appearance="bild"] .mk-overlay-body {
    padding: 0;
    overflow: hidden;
}

.mk-overlay[data-appearance="bild"] .mk-overlay-foot {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.mk-overlay[data-appearance="bild"] .mk-overlay-count { color: var(--ui-accent, #d3b673); }

.mk-overlay[data-appearance="bild"] .mk-overlay-actions button,
.mk-overlay[data-appearance="bild"] .mk-overlay-actions a {
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
}

.mk-overlay-media {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr) 55px;
    align-items: center;
    height: min(72vh, 730px);
    background: #080d16;
}

.mk-overlay-media > button {
    height: 80px;
    border: 0;
    background: none;
    color: #fff;
    font-size: var(--glyph-xl);
    line-height: 1;
    cursor: pointer;
}

.mk-overlay-media > button[disabled] { opacity: 0; cursor: default; }

.mk-overlay-media-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: auto;
}

.mk-overlay-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- Phone ---------------------------------------------------------------- */

@media (max-width: 560px) {
    /* The window stays a sheet in the middle here too, it does not dock to the
       bottom edge - the picture needs room above and below it. */
    .mk-overlay {
        padding: 10px;
        --overlay-picture-columns: minmax(0, 1fr);
    }

    .mk-overlay-card { max-height: 94vh; }

    /* The reading band keeps its two columns here as well - picture beside the
       heading is what it is; only the measurements get smaller. */
    .mk-overlay[data-appearance="lesen"] { --overlay-picture-columns: 110px minmax(0, 1fr); }

    .mk-overlay[data-appearance="lesen"] .mk-overlay-figure { min-height: 140px; }

    .mk-overlay[data-appearance="lesen"] .mk-overlay-intro { padding: 18px 46px 18px 18px; }
    .mk-overlay[data-appearance="lesen"] .mk-overlay-title { font-size: var(--type-h2); }
    .mk-overlay[data-appearance="lesen"] .mk-overlay-close { width: 34px; height: 34px; font-size: var(--glyph-sm); }
    .mk-overlay[data-appearance="lesen"] .mk-overlay-bar { padding: 8px 9px; }

    .mk-overlay-media {
        height: 65vh;
        grid-template-columns: 35px minmax(0, 1fr) 35px;
    }

    .mk-overlay-media > button { font-size: var(--glyph-lg); }
    .mk-overlay-foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-overlay { backdrop-filter: none; }
}
/* Career Theme & Sections - Modernized Corporate Design */

/* Fill the background layers from base.css with the career values. The two
   older names point at the computed tones – see private.css. */
body.theme-career {
    --career-text: var(--ui-ink);
    --career-card: var(--ui-surface);

    --bg-gradient: var(--career-bg-style);
    --bg-image: var(--career-bg-image);
    --bg-image-opacity: var(--career-bg-image-opacity);
    color: var(--career-text);
}

/* Header */
/* Look and color of the header live in base.css and come from the derived
   tones. Nothing is defined here on purpose – the earlier rule with a white
   stripe and a colored bottom edge would have overridden them. */

/* Intro Header */
.career-main-title {
    font-size: var(--type-h1);
    font-weight: 900;
    line-height: 1.1;
    color: var(--ui-ink);
    text-transform: uppercase;
    letter-spacing: -2px;
}

.career-highlight-box {
    background: white;
    padding: 30px;
    border-left: 10px solid var(--career-primary);
    box-shadow: 20px 20px 0 rgba(0,0,0,0.03);
}

/* Resume Card (structure kept, design sharpened) */
.resume-card {
    border-radius: 0;
    border: 1px solid var(--ui-line);
    box-shadow: 30px 30px 0 rgba(0,0,0,0.02);
    overflow: hidden;
}

.resume-card .row {
    display: flex;
    flex-wrap: nowrap; /* columns stay side by side on desktops */
    margin: 0;
}

.col-left {
    background: var(--resume-left-bg-style, #0f172a);
    padding: 50px 35px;
    flex: 0 0 300px;
    max-width: 300px;
}

.resume-contact-info {
    color: white;
}

.name-title {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-size: var(--type-h2);
    line-height: 1;
    color: white;
}

.resume-contact-info p {
    font-size: var(--type-sm);
    margin-bottom: 8px;
    opacity: 0.9;
}

.resume-link {
    color: inherit;
    text-decoration: none;
}

.resume-contact-info p strong {
    color: var(--career-primary);
    text-transform: uppercase;
    font-size: var(--type-2xs);
    letter-spacing: 0.5px;
}

.resume-profile-img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 6px solid rgba(255,255,255,0.1);
    object-fit: cover;
}

.info-group h5 {
    color: var(--career-primary);
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--type-sm);
    letter-spacing: 2px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
}

.skill-badge {
    background: rgba(255,255,255,0.1);
    color: white;
    border-radius: 0;
    border: none;
    padding: 6px 12px;
    font-weight: 600;
    font-size: var(--type-2xs);
    text-transform: uppercase;
}

.resume-main-content {
    background: var(--resume-right-bg-style, #f4f4f4);
    padding: 50px 45px;
    flex: 1;
}

/* Mobile adjustment for the resume */
@media (max-width: 767px) {
    .resume-card .row {
        flex-wrap: wrap;
    }
    .col-left, .resume-main-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Timeline Resume - Modernized & Restored */
.resume-section-title {
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--type-h4);
    letter-spacing: 1px;
    margin-bottom: 35px;
    color: var(--ui-ink);
    display: flex;
    align-items: center;
    gap: 12px;
}

.resume-timeline-wrapper {
    position: relative;
    padding-left: 35px;
    margin-left: 5px;
}

.resume-timeline-wrapper::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background: var(--ui-line);
}

.resume-entry {
    position: relative;
    margin-bottom: 45px;
}

.resume-entry:last-child {
    margin-bottom: 0;
}

.resume-entry::before {
    content: '';
    position: absolute;
    left: -31px; /* (4px line + 1px half width) - 5px radius? - Wait. The line is 2px wide. Center of the line at left: 4px + 1px = 5px.  */
    /* The dot is 10px wide. Half its width is 5px. So if we set left: -31px relative to .resume-timeline-wrapper { padding-left: 35px } */
    /* 35 - 31 = 4.  */
    /* The dot is 10px wide. transform: translateX(-50%) puts the center of the dot at left: 4px. */
    /* The line sits at left: 4px and is 2px wide. Center of the line is at 5px. */
    /* So the center of the dot should sit at 5px. */
    /* left: -30px (35-30=5) + translateX(-50%) = center of the dot at 5px. */
    left: -30px; 
    top: 6px;
    width: 10px;
    height: 10px;
    background: var(--career-primary);
    border: 2px solid white;
    z-index: 1;
    transform: translateX(-50%);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.resume-entry:hover::before {
    transform: translateX(-50%) scale(1.5);
    background: var(--career-secondary);
}

.entry-role {
    font-weight: 800;
    font-size: var(--type-lg);
    margin: 0;
    color: var(--ui-ink);
}

.entry-date {
    font-weight: 700;
    font-size: var(--type-sm);
    background: var(--ui-surface-muted);
    padding: 4px 12px;
    color: var(--ui-ink-muted);
    text-transform: uppercase;
}

.entry-company {
    font-weight: 700;
    font-size: var(--type-md);
    color: var(--career-primary) !important;
    text-transform: uppercase;
    margin-top: 5px;
}

.entry-description {
    font-size: var(--type-md);
    line-height: 1.6;
    margin-top: 12px;
}

/* Projects Modernized */
.section-title-modern {
    font-size: var(--type-h2);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.section-title-modern::after {
    content: '';
    flex: 1;
    height: 4px;
    background: var(--ui-line);
}

.projects-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px; /* more room for the shadow */
}

.project-card-modern {
    background: white;
    border: 1px solid var(--ui-line);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
    box-shadow: 20px 20px 0 rgba(0,0,0,0.02); /* consistent shadow */
}

.project-accent-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 6px;
    background: var(--career-primary);
    transition: width 0.4s ease;
}

.project-card-modern:hover {
    z-index: 10;
    transform: translate(-5px, -5px); /* small "lift" on hover */
    box-shadow: 30px 30px 0 rgba(0,0,0,0.05); /* stronger shadow */
}

.project-card-modern:hover .project-accent-line {
    width: 100%;
}

.project-content {
    padding: 40px;
}

.project-title {
    font-weight: 800;
    font-size: var(--type-h3);
    margin-bottom: 15px;
    text-transform: uppercase;
}

.project-description {
    color: var(--ui-ink-muted);
    line-height: 1.6;
    margin-bottom: 25px;
}

.tech-badge-modern {
    display: inline-block;
    background: var(--ui-surface-muted);
    color: var(--ui-ink-muted);
    padding: 4px 10px;
    font-size: var(--type-2xs);
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 5px;
    margin-bottom: 5px;
}

.project-link-modern {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    color: var(--career-primary);
    text-decoration: none;
    font-weight: 800;
    font-size: var(--type-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.project-link-modern:hover {
    color: var(--career-secondary);
}

/* Print Button Modernized */
.btn-print-resume {
    background: var(--ui-primary);
    color: var(--ui-primary-ink);
    border: none;
    padding: 12px 25px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--type-xs);
    position: relative;
    box-shadow: 8px 8px 0 var(--career-primary);
    transition: all 0.2s;
}

.btn-print-resume:hover {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 var(--career-primary);
}


/* Career Scroll to Top Button */
body.theme-career #scroll-to-top {
    background-color: var(--ui-primary);
    color: var(--ui-primary-ink);
    border: none;
    box-shadow: 8px 8px 0 var(--career-primary);
}

body.theme-career #scroll-to-top:hover {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 var(--career-primary);
}

/* Recommendations Styles for Career Theme */
.theme-career .rec-category-title {
    color: var(--career-primary);
    border-left-color: var(--career-primary);
}

.theme-career .rec-intro {
    color: var(--career-primary);
}

.theme-career .rec-button {
    background: var(--career-primary);
    border-radius: 0;
    box-shadow: 6px 6px 0 var(--career-secondary);
    transition: all 0.2s;
}

.theme-career .rec-button:hover {
    background: var(--career-secondary);
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 var(--career-primary);
}

.theme-career .rec-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .theme-career .rec-header {
        flex-direction: column;
        gap: 10px;
    }
}

.theme-career .rating { color: #ffc107; font-size: var(--glyph-sm); }
.theme-career .star.filled { color: #ffc107; }
.theme-career .star:not(.filled) { color: #e4e5e9; }

/* Responsive */
@media (max-width: 991px) {
    .career-main-title { margin-bottom: 20px !important; }
}

/* Print Styles (optimized for the new design) */
@media print {
    @page { size: portrait; margin: 0; }
    body { background: white !important; padding: 0 !important; margin: 0 !important; }
    
    .no-print, .main-header, .theme-switch-wrapper, .print-header, .career-intro-header, .projects-container {
        display: none !important; 
    }
    
    /* layout container at full width and flush with the edge */
    .section, .container-fluid, .resume-modern-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .resume-card {
        border: none !important;
        box-shadow: none !important;
        display: block !important;
        width: 100% !important;
    }

    .resume-card .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }

    .col-left {
        flex: 0 0 300px !important;
        max-width: 300px !important;
        min-height: 100vh !important;
        background: var(--resume-left-bg-style, #0f172a) !important;
        padding: 40px 30px !important;
        color: white !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    .resume-main-content {
        flex: 1 !important;
        min-height: 100vh !important;
        background: var(--resume-right-bg-style, #f4f4f4) !important;
        padding: 40px !important;
        color: var(--career-text, #1e293b) !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    /* texts in print */
    .name-title, .resume-contact-info p, .resume-contact-info p strong, .info-group h5, .skill-badge {
        color: inherit !important;
    }

    .resume-contact-info p.text-muted {
        color: rgba(255,255,255,0.7) !important;
    }

    .info-group h5 {
        color: var(--career-primary) !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    .entry-company {
        color: var(--career-primary) !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    /* timeline flush in print */
    .resume-timeline-wrapper::before {
        background: #e2e8f0 !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }
    
    .resume-entry::before {
        background: var(--career-primary) !important;
        border: 2px solid white !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    .entry-date {
        background: #f1f5f9 !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }
}
/* Private Theme & Sections */

body.theme-private {
    --private-text: var(--ui-ink);
    --private-card: var(--ui-surface);

    --bg-gradient: var(--private-bg-style);
    --bg-image: var(--private-bg-image);
    --bg-image-opacity: var(--private-bg-image-opacity);
    color: var(--private-text);
}

/* Header */
/* Look and color of the header live in base.css and come from the derived
   tones. Nothing is defined here on purpose – the earlier rule with a white
   stripe and a colored bottom edge would have overridden them. */

.theme-private .intro {
    padding-top: 10px;
    margin-bottom: 20px;
}

/* The pinnwand page around the board: the filter pills. Mirror of
   templates/pinnwand/news.php; the board itself is in board.css. */

.news-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}

.news-filter-pill {
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--ui-ink);
    text-decoration: none;
    font-size: var(--type-sm);
    font-weight: 600;
    border: 1px solid var(--ui-line);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.news-filter-pill:hover {
    border-color: var(--ui-ink);
}

.news-filter-pill.is-active {
    background: var(--ui-ink);
    color: var(--ui-page);
    border-color: var(--ui-ink);
}
/* The board. Mirror of templates/pinnwand/board.php. The notes themselves are
   in note.css, which the admin preview shares; the controls of the stack in
   stack.css for the same reason. */

/* Only the notes live in the container, not the heading above them: the
   container query measures the width of the board, and the heading follows the
   page grid. The spacing above therefore belongs to the heading, not here –
   otherwise it would be added on top of the one the page container already
   brings along. */
.news-wall {
    margin: 0 0 clamp(42px, 7vw, 80px);
    container-type: inline-size;
    container-name: pinnwand;
}

.news-wall-title {
    margin: 0 0 18px;
    color: var(--private-text);
    font-size: var(--type-h2);
}

/* On the home page the board follows another section directly and has to keep
   its distance itself; on the subpage the container already provides it. */
.news-wall-title:first-child {
    margin-top: clamp(28px, 5vw, 60px);
}

.news-wall-empty {
    margin: 0;
    padding: 32px 0;
    color: var(--ui-ink-muted);
}
/* The controls of the swipe stack.
 *
 * Its own file because both the page and the board editor in the admin area
 * need it: the phone preview there is a real stack, not a list. The admin area
 * does not carry the --ui-* variables of the design system, so every colour
 * names a fallback. */

.news-stack-controls[hidden] {
    display: none;
}

.news-stack-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
}

.news-stack-button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--ui-line, #d5d8dd);
    border-radius: 999px;
    background: var(--ui-card, #fff);
    color: var(--ui-ink, #2f3337);
    font-size: var(--glyph-sm);
    line-height: 1;
    cursor: pointer;
}

.news-stack-button:hover {
    border-color: var(--ui-ink, #2f3337);
}

.news-stack-counter {
    min-width: 4.5em;
    text-align: center;
    color: var(--ui-muted, #6b7178);
    font-size: var(--type-sm);
    font-variant-numeric: tabular-nums;
}
/* The icons of the start page, drawn in CSS instead of loaded as images:
   book, gamepad, check mark and the rest. */
.private-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.preview-box {
    background: var(--private-card);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border: 2px solid transparent;
}

.preview-box:hover {
    transform: translateY(-10px);
    border-color: var(--private-primary);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.preview-icon {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
}

/* Stories - book/paper stack look */
.book-icon {
    width: 50px;
    height: 60px;
    background: #81c784;
    border-radius: 4px;
    position: relative;
    box-shadow: 2px 2px 0 #66bb6a;
}
.book-page {
    position: absolute;
    width: 35px;
    height: 2px;
    background: rgba(255,255,255,0.6);
    left: 7px;
}
.book-page:nth-child(1) { top: 15px; }
.book-page:nth-child(2) { top: 30px; }
.book-page:nth-child(3) { top: 45px; width: 20px; }

/* Recommendations - badge/seal look */
.recommendation-badge {
    width: 60px;
    height: 60px;
    background: #64b5f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 10px rgba(100, 181, 246, 0.4);
    border: 3px double white;
}
.star-rating {
    color: #ffd54f;
    font-size: var(--glyph-md);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.check-mark {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #4caf50;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: var(--type-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

/* Interests - collage/bubble look */
.interests-collage {
    position: relative;
    width: 80px;
    height: 60px;
}
.interest-bubble {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--glyph-sm);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.interest-bubble:nth-child(1) { background: #ff7043; top: 0; left: 0; z-index: 2; }
.interest-bubble:nth-child(2) { background: #ffb74d; top: 20px; left: 25px; z-index: 1; }
.interest-bubble:nth-child(3) { background: #4db6ac; top: -5px; left: 45px; z-index: 0; }

.preview-box:hover .interest-bubble:nth-child(1) { transform: translate(-5px, -5px) scale(1.1); }
.preview-box:hover .interest-bubble:nth-child(2) { transform: scale(1.2); }
.preview-box:hover .interest-bubble:nth-child(3) { transform: translate(5px, 5px) scale(1.1); }

/* Gallery - photo stack look */
.photo-stack {
    position: relative;
    width: 60px;
    height: 60px;
}
.photo-frame {
    position: absolute;
    background: white;
    padding: 3px 3px 10px 3px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
}
.photo-frame.p1 { width: 45px; height: 45px; transform: rotate(-10deg); top: 5px; left: 0; background: #f5f5f5; }
.photo-frame.p2 { width: 45px; height: 45px; transform: rotate(5deg); top: 0; left: 15px; background: #eeeeee; }
.photo-frame.p3 { width: 45px; height: 45px; transform: rotate(0); top: 10px; left: 8px; z-index: 3; }
.photo-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ba68c8, #9c27b0);
    border-radius: 2px;
}

.preview-box:hover .photo-frame.p1 { transform: rotate(-20deg) translate(-5px, -5px); }
.preview-box:hover .photo-frame.p2 { transform: rotate(15deg) translate(5px, -5px); }
.preview-box:hover .photo-frame.p3 { transform: scale(1.1); }

/* Games - gamepad look */
.gamepad-icon {
    position: relative;
    width: 60px;
    height: 40px;
    margin-top: 10px;
}
.gamepad-body {
    width: 60px;
    height: 35px;
    background: #455a64;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 4px #263238;
}
.gamepad-button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    background: #ff5252;
}
.gb1 { right: 10px; top: 10px; }
.gb2 { right: 20px; top: 18px; background: #ffd740; }
.gamepad-dpad {
    width: 14px;
    height: 14px;
    background: #263238;
    position: absolute;
    left: 10px;
    top: 10px;
    clip-path: polygon(33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%, 33% 33%);
}
.preview-box:hover .gamepad-icon { transform: scale(1.1) rotate(-5deg); transition: transform 0.3s ease; }

/* The frame every subpage sits in. It ends where its content ends - what
   follows, a quote or the footer, keeps the page distance and nothing more. */
.subpage {
    position: relative;
    width: 100%;
    z-index: 50; /* lower than the header (100) */
    padding-bottom: var(--space-page);
}
/* The library: the categories as a row to narrow down, every story a card on
   one shelf. Mirror of templates/private/stories.php. */

.library-empty {
    margin: 0;
    color: var(--ui-ink-muted);
}

/* --- The categories --------------------------------------------------------- */

.library-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ui-rule);
}

.library-filter button {
    padding: 8px 14px;
    border: 1px solid var(--ui-line);
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--ui-ink);
    font: inherit;
    font-size: var(--type-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.library-filter button:hover { border-color: var(--ui-ink); }

.library-filter button[aria-pressed="true"] {
    background: var(--ui-ink);
    border-color: var(--ui-ink);
    color: var(--ui-page);
}

.library-filter sup {
    color: var(--ui-accent);
    font-size: var(--type-3xs);
    font-weight: 700;
}

/* --- The shelf ---------------------------------------------------------------- */

.library-shelf {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.library-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--ui-line);
    background: var(--ui-surface);
    color: var(--ui-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(18, 24, 39, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.library-card[hidden] { display: none; }

.library-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 45px rgba(17, 24, 39, 0.13);
}

.library-card:focus-visible {
    outline: 3px solid var(--ui-accent);
    outline-offset: 3px;
}

/* --- The cover ----------------------------------------------------------------
   With a picture the picture; without one a quiet cover in the colors of the
   page: dark ground, two thin rings, the number of the story. */

.library-cover {
    position: relative;
    display: block;
    height: 285px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at 50% 75%, color-mix(in srgb, var(--ui-accent) 24%, var(--ui-ink)), var(--ui-ink) 62%);
}

.library-cover:not(.has-picture)::before,
.library-cover:not(.has-picture)::after {
    content: "";
    position: absolute;
    border: 1px solid var(--ui-accent);
    border-radius: 50%;
    pointer-events: none;
}

.library-cover:not(.has-picture)::before { inset: 8%; opacity: 0.45; transform: scaleX(0.78); }
.library-cover:not(.has-picture)::after { inset: 17%; opacity: 0.32; transform: scaleX(0.87); }

.library-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.library-card:hover .library-cover img { transform: scale(1.05); }

.library-cover-index {
    position: absolute;
    bottom: 16px;
    left: 18px;
    z-index: 1;
    color: var(--ui-accent);
    font-size: var(--type-3xs);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
}

/* On a picture the number needs a ground of its own. */
.library-cover.has-picture .library-cover-index {
    padding: 3px 9px;
    background: var(--ui-surface);
    color: var(--ui-ink-muted);
}

/* --- What the card says ------------------------------------------------------- */

.library-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px;
}

.library-card-title {
    margin: 9px 0;
    font-family: var(--heading-font, var(--site-font));
    font-size: var(--type-h3);
    font-weight: 700;
    line-height: 1.25;
}

.library-card-lead {
    color: var(--ui-ink-muted);
    font-size: var(--type-sm);
    line-height: var(--leading-snug);
}

.library-card-more {
    margin-top: auto;
    padding-top: 24px;
    font-size: var(--type-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 1050px) {
    .library-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .library-shelf { grid-template-columns: minmax(0, 1fr); }
    .library-cover { height: 230px; }
    .library-card-title { font-size: var(--type-h4); }
}

@media (prefers-reduced-motion: reduce) {
    .library-card,
    .library-cover img { transition: none; }
    .library-card:hover { transform: none; }
}
/* The collection: the cabinet of shelves, the panels of the categories, the
   quote at the end. Mirror of templates/private/recommendations.php; one card
   is in recommendation-card.css. */

.rec-empty {
    margin: 0;
    color: var(--ui-ink-muted);
}

/* --- The cabinet: one shelf per category ---------------------------------- */

/* No distance below: the cabinet is the last thing on the page as long as no
   fach is open, and the panels below it are hidden. What the page keeps to the
   bottom belongs to the section, not to the grid. */
.shelf-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 225px;
    gap: 14px;
}

/* The first shelf is the largest, the next two are wide, the rest share a row. */
.shelf-item { grid-column: span 2; }
.shelf-item:first-child { grid-column: span 3; grid-row: span 2; }
.shelf-item:nth-child(2),
.shelf-item:nth-child(3) { grid-column: span 3; }

/* Inside a fach the sub-shelves are followed by the cards of the fach. */
.shelf-grid--sub {
    grid-auto-rows: 200px;
    margin-bottom: clamp(30px, 4vw, 44px);
}
.shelf-grid--sub .shelf-item,
.shelf-grid--sub .shelf-item:first-child,
.shelf-grid--sub .shelf-item:nth-child(2),
.shelf-grid--sub .shelf-item:nth-child(3) { grid-column: span 2; grid-row: span 1; }

.shelf-item {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: var(--ui-ink);
    color: var(--ui-page);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.shelf-item .cat-image,
.shelf-item .cat-image img {
    display: block;
    width: 100%;
    height: 100%;
}

.shelf-item .cat-image { position: absolute; inset: 0; }
.shelf-item .cat-image img { object-fit: cover; transition: transform 0.55s; }
.shelf-item:hover .cat-image img { transform: scale(1.07); }

.shelf-item::after {
    content: "";
    position: absolute;
    inset: 20% 0 0;
    background: linear-gradient(transparent, color-mix(in srgb, var(--ui-ink) 78%, transparent));
}

.shelf-item:focus-visible {
    outline: 3px solid var(--ui-accent);
    outline-offset: 3px;
}

.shelf-item-number {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 19px;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 1px solid color-mix(in srgb, var(--ui-page) 60%, transparent);
    border-radius: 50%;
    color: var(--ui-page);
    font-size: var(--type-3xs);
}

.shelf-item-bottom {
    position: absolute;
    z-index: 1;
    right: 20px;
    bottom: 18px;
    left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 8px;
}

.shelf-item-name {
    font-family: var(--heading-font, var(--site-font));
    font-size: var(--type-h2);
    font-weight: 700;
    line-height: 1.1;
}

.shelf-item-bottom small {
    color: var(--ui-page);
    white-space: nowrap;
}

/* --- A category as a panel ------------------------------------------------- */

.rec-panel { animation: rec-panel-in 0.3s ease; }
.rec-panel.hidden,
.shelf-grid.hidden { display: none; }

.rec-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 clamp(20px, 3vw, 30px);
    font-size: var(--type-sm);
    color: var(--ui-ink-muted);
}

.rec-crumb {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.rec-crumb:hover { color: var(--ui-ink); text-decoration: underline; }
.rec-crumb.is-current { font-weight: 700; color: var(--ui-ink); }
.rec-crumb-sep { color: var(--ui-rule); }

.rec-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    margin-bottom: clamp(30px, 4vw, 44px);
}

/* What ends a fach ends the page here; the distance below comes from the
   section, so nothing of it escapes downwards. */
.rec-panel > :last-child { margin-bottom: 0; }

/* --- The quote -------------------------------------------------------------- */

.rec-quote {
    padding: clamp(50px, 7vw, 85px) 0 clamp(60px, 8vw, 100px);
    background: var(--ui-surface-muted);
    text-align: center;
}

.rec-quote-text {
    max-width: 800px;
    margin: 15px auto 20px;
    font-family: var(--heading-font, var(--site-font));
    font-weight: 700;
    line-height: 1.4;
}

.rec-quote-author { margin: 0 0 24px; color: var(--ui-ink-muted); }

@keyframes rec-panel-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
    .shelf-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 175px;
        gap: 9px;
    }
    .shelf-item,
    .shelf-item:nth-child(2),
    .shelf-item:nth-child(3) { grid-column: span 1; }
    .shelf-item:first-child { grid-column: span 2; grid-row: span 2; }
    .shelf-grid--sub .shelf-item { grid-column: span 1; }
    .shelf-item-bottom { right: 10px; bottom: 12px; left: 10px; display: block; }
    .shelf-item-name { display: block; font-size: var(--type-h3); }
}

@media (prefers-reduced-motion: reduce) {
    .rec-panel { animation: none; }
    .shelf-item .cat-image img { transition: none; }
}
/* One recommendation as a card. Mirror of templates/private/recommendation-card.php. */

.rec-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    box-shadow: 0 10px 25px rgba(20, 18, 16, 0.06);
    transition: transform 0.25s, box-shadow 0.25s;
}

.rec-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(20, 18, 16, 0.12);
}

.rec-card-media {
    background: var(--ui-surface-muted);
}

.rec-card-media .media-carousel { aspect-ratio: 4 / 3; }
.rec-card-media img { object-fit: contain; cursor: zoom-in; }

.rec-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 20px 20px;
}

.rec-card-number { color: var(--ui-accent); }

.rec-card-title {
    margin: 0;
    font-size: var(--type-h4);
}

.rec-card-title button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rec-card-title button:hover { text-decoration: underline; }

.rec-card-intro {
    margin: 0;
    font-size: var(--type-sm);
    color: var(--ui-ink-muted);
}

.rec-card-body .text-action { margin-top: auto; padding-top: 10px; }
/* A gallery image on a page of its own. */
.entry-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 34px 38px;
    background: var(--ui-surface, #fff);
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.entry-card h1 { margin: 0 0 18px; }
.entry-meta { margin: 0 0 10px; }
.entry-images { margin: 22px 0; border-radius: 14px; overflow: hidden; }
.entry-images .media-carousel { aspect-ratio: 3 / 2; }
.entry-images img { object-fit: cover; }

@media (max-width: 600px) {
    .entry-card { padding: 24px 20px; }
}
/* The image of a category tile: a quiet surface until the preview arrives,
   then the picture fills it. How a tile places it - height in the small
   variant, the zoom on hover - is the tile's business and lives with it. */
.cat-image {
    height: 160px;
    overflow: hidden;
    background: var(--ui-surface-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    .cat-image img { transition: none; }
}
/* The interests: one tile per topic. Mirror of templates/private/interests.php.

   Two sizes, and which tile gets which comes from its place, not from a field
   nobody would maintain: of every five tiles the first two take half a row,
   the other three a third. Five tiles are therefore exactly two full rows, and
   the pattern repeats - so no row ever keeps a column free, however many
   interests there are. Only the last row may be short, as any last row is. */

.interests-empty {
    margin: 0;
    color: var(--ui-ink-muted);
}

.interests-gallery {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 17px;
}

.interest-card { grid-column: span 2; }

.interest-card:nth-child(5n + 1),
.interest-card:nth-child(5n + 2) { grid-column: span 3; }

.interest-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--ui-line);
    background: var(--ui-surface);
    color: var(--ui-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.interest-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(16, 24, 39, 0.15);
}

.interest-card:focus-visible {
    outline: 3px solid var(--ui-accent);
    outline-offset: 3px;
}

/* --- The picture ----------------------------------------------------------
   With a picture it fills the field; without one the field stays quiet. It
   keeps its place either way, so the tiles stay in one line. */

.interest-picture {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--ui-band);
}

/* A wide tile also shows a wider picture - otherwise it would only be a
   stretched version of the small one. */
.interest-card:nth-child(5n + 1) .interest-picture,
.interest-card:nth-child(5n + 2) .interest-picture { aspect-ratio: 16 / 9; }

.interest-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.interest-card:hover .interest-picture img { transform: scale(1.05); }

.interest-picture-number {
    position: absolute;
    bottom: 12px;
    left: 14px;
    padding: 3px 9px;
    background: var(--ui-surface);
    color: var(--ui-ink-muted);
    font-size: var(--type-3xs);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
}

/* --- What the tile says ---------------------------------------------------- */

.interest-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 22px 22px;
}

.interest-card-title {
    margin: 0 0 8px;
    font-family: var(--heading-font, var(--site-font));
    font-size: var(--type-h4);
    font-weight: 700;
    line-height: 1.15;
}

.interest-card:nth-child(5n + 1) .interest-card-title,
.interest-card:nth-child(5n + 2) .interest-card-title { font-size: var(--type-h3); }

.interest-card-lead {
    color: var(--ui-ink-muted);
    font-size: var(--type-sm);
    line-height: var(--leading-snug);
}

.interest-card-more {
    margin-top: auto;
    padding-top: 20px;
    font-size: var(--type-xs);
    font-weight: 700;
}

/* Two columns: the first of every five takes the whole row, the other four fill
   two rows - again nothing stays free. */
@media (max-width: 900px) {
    .interests-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .interest-card,
    .interest-card:nth-child(5n + 2) { grid-column: span 1; }
    .interest-card:nth-child(5n + 1) { grid-column: span 2; }
    .interest-card:nth-child(5n + 2) .interest-picture { aspect-ratio: 3 / 2; }
    .interest-card:nth-child(5n + 2) .interest-card-title { font-size: var(--type-h4); }
    .interest-card-body { padding: 15px 16px 17px; }
}

@media (max-width: 520px) {
    .interests-gallery { grid-template-columns: minmax(0, 1fr); }
    .interest-card,
    .interest-card:nth-child(5n + 1),
    .interest-card:nth-child(5n + 2) { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
    .interest-card,
    .interest-picture img { transition: none; }
    .interest-card:hover { transform: none; }
}
/* The picture wall: albums on the left, pictures on the right. */

.gallery-shell {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    border-top: 1px solid var(--ui-rule);
    border-bottom: 1px solid var(--ui-rule);
}

/* --- Albums --------------------------------------------------------------- */

.gallery-albums {
    position: sticky;
    top: 0;
    align-self: start;
    padding: 30px 20px 30px 0;
    border-right: 1px solid var(--ui-rule);
}

.gallery-albums-label {
    display: block;
    margin-bottom: 18px;
    color: var(--ui-accent, #9d8253);
}

.gallery-album-list,
.gallery-album-children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-album-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 4px 14px calc(4px + var(--album-depth, 0) * 14px);
    border: 0;
    border-top: 1px solid var(--ui-rule);
    background: transparent;
    color: var(--ui-ink-muted);
    font: inherit;
    font-size: var(--type-xs);
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease;
}

.gallery-album-button:hover,
.gallery-album-button.is-active {
    color: var(--ui-ink);
    font-weight: 700;
}

.gallery-album-count { color: var(--ui-accent, #ad925d); }

/* The selection is not an album, and it may show that: a star in front of it
   and a line below it set it apart from the list without another look. */
.gallery-album--marked .gallery-album-button { border-bottom: 1px solid var(--ui-rule); }

.gallery-album--marked .gallery-album-name::before {
    content: "★";
    margin-right: 7px;
    color: var(--ui-accent);
}

.gallery-album--marked .gallery-album-button.is-active .gallery-album-name::before,
.gallery-album--marked .gallery-album-button:hover .gallery-album-name::before { color: inherit; }

/* An album with sub-albums shows where it leads. */
.gallery-album-button[data-album-parent] .gallery-album-name::after {
    content: "›";
    display: inline-block;
    margin-left: 7px;
    transition: transform 0.15s ease;
}

.gallery-album-button[aria-expanded="true"] .gallery-album-name::after {
    transform: rotate(90deg);
}

/* --- The wall ------------------------------------------------------------- */

.gallery-wall {
    min-width: 0;
    padding: 30px 0 50px 29px;
}

.gallery-wall-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-bottom: 21px;
}

.gallery-wall-head h2 { margin: 0; }
.gallery-wall-head .meta { color: var(--ui-ink-muted); }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    gap: 12px;
}

.gallery-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.05;
    background: var(--ui-surface-muted);
}

/* The first picture of an album carries the wall, so it gets four fields. */
.gallery-card.is-large {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

.gallery-card[hidden] { display: none; }

.gallery-card .media-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease, filter 0.45s ease;
}

.gallery-card:hover .media-carousel img {
    transform: scale(1.055);
    filter: brightness(0.8);
}

.gallery-card-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 28px 15px 12px;
    background: linear-gradient(transparent, rgba(13, 20, 35, 0.73));
    color: #fff;
    font-size: var(--type-xs);
    font-weight: 700;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.gallery-card:hover .gallery-card-name,
.gallery-card:focus-within .gallery-card-name {
    opacity: 1;
    transform: none;
}

.gallery-card-count {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 3px 9px;
    background: rgba(13, 20, 35, 0.66);
    color: #fff;
    pointer-events: none;
}

.gallery-empty {
    padding: 40px 0;
    color: var(--ui-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
    .gallery-card .media-carousel img,
    .gallery-card-name,
    .gallery-album-button,
    .gallery-album-button[data-album-parent] .gallery-album-name::after { transition: none; }
}

/* --- Tablet and phone ------------------------------------------------------ */

@media (max-width: 900px) {
    .gallery-shell { grid-template-columns: minmax(0, 1fr); }

    .gallery-albums {
        position: static;
        padding: 18px 0;
        border-right: 0;
        border-bottom: 1px solid var(--ui-rule);
    }

    .gallery-albums-label { display: none; }

    .gallery-album-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .gallery-album-children {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .gallery-album-button {
        width: auto;
        border: 1px solid var(--ui-rule);
        border-radius: 999px;
        padding: 8px 13px;
        font-size: var(--type-2xs);
    }

    .gallery-album-button.is-active {
        background: var(--ui-ink);
        border-color: var(--ui-ink);
        color: var(--ui-page);
    }

    .gallery-album-button.is-active .gallery-album-count { color: inherit; }

    .gallery-wall { padding: 25px 0 45px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    .gallery-card.is-large {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 1.65;
    }

    .gallery-card-name { opacity: 1; transform: none; }
}
/* The games page: the heading, the grids that hold tiles and rows, and the
   virtual gamepad. What one game looks like lives in game-card.css. */
.bg-games {
    --games-accent: #673ab7;
}

.games-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: clamp(30px, 5vw, 52px) 0 clamp(14px, 2vw, 22px);
}

/* The first section follows the title area directly, which already keeps the distance. */
.games-section-head:first-child {
    margin-top: 0;
}

.games-section-head h2 {
    margin: 0;
}

.games-count {
    flex: none;
    color: var(--ui-ink-muted, #777);
    font-size: var(--type-sm);
}

.games-empty {
    padding: 48px 0;
    color: var(--ui-ink-muted, #666);
    text-align: center;
}

.game-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: clamp(16px, 2vw, 26px);
}

.game-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

@media (max-width: 900px) {
    .game-rows { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 600px) {
    .game-tiles { grid-template-columns: 1fr; }
    .game-rows { grid-template-columns: 1fr; gap: 10px; }
}

/* Mobile: game gamepad adjusted */
@media (max-width: 768px) {
    .gamepad-btn {
        width: 50px;
        height: 50px;
        font-size: var(--glyph-sm);
    }
    .gamepad-btn.action {
        width: 80px;
        height: 80px;
    }
}

/* Virtual Gamepad */
.virtual-gamepad {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none; /* clicks pass through the container div */
    z-index: 2100;
}

.virtual-gamepad .dpad, .virtual-gamepad .actions {
    display: grid;
    gap: 10px;
    pointer-events: auto; /* buttons are clickable */
}

.virtual-gamepad .dpad {
    grid-template-areas:
        ". up ."
        "left . right"
        ". down .";
}

.gamepad-btn {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: white;
    font-size: var(--glyph-md);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.gamepad-btn:active {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0.9);
}

.gamepad-btn.up { grid-area: up; }
.gamepad-btn.down { grid-area: down; }
.gamepad-btn.left { grid-area: left; }
.gamepad-btn.right { grid-area: right; }

.gamepad-btn.action {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(217, 70, 239, 0.4); /* private primary color, transparent */
    border-color: rgba(217, 70, 239, 0.6);
    font-size: var(--type-base);
    font-weight: bold;
}
/* The presentation of one game: the large tile of a selected game and the
   narrow row of a further one. The grids that hold them live in game-list.css. */

.game-tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 200px;
    padding: clamp(16px, 2vw, 24px);
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    background: #16181d;
    color: #fff;
}

.game-tile-cover {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}

/* The veil keeps the type readable, no matter how light the cover is. */
.game-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(10, 12, 16, 0.92) 0%, rgba(10, 12, 16, 0.72) 38%, rgba(10, 12, 16, 0.12) 78%, rgba(10, 12, 16, 0.02) 100%);
}

.game-tile--plain {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-ink));
}

.game-tile-inner {
    position: relative;
    width: 100%;
}

.game-badge {
    display: inline-block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--type-2xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.game-tile-title {
    margin: 0 0 5px;
    color: #fff;
    font-size: var(--type-h2);
    line-height: 1.08;
    letter-spacing: var(--tracking-tight);
}

.game-tile-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin: 0 0 13px;
    max-width: 48ch;
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--type-sm);
    line-height: 1.4;
}

.game-tile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.game-play {
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #14161a;
    font: inherit;
    font-size: var(--type-md);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.game-play:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.game-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 13px;
    row-gap: 5px;
    width: 100%;
    height: 82px;
    padding: 0 16px;
    border: 1px solid var(--ui-line, #e7e3dc);
    border-radius: 16px;
    background: var(--ui-surface, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.game-row:hover {
    transform: translateY(-2px);
    border-color: var(--ui-primary, #2d6a4f);
    box-shadow: 0 10px 22px rgba(20, 18, 16, 0.08);
}

.game-row-icon {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    overflow: hidden;
    background: var(--ui-surface-muted, #f1ede6);
}

.game-row-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-row-icon--symbol img {
    box-sizing: border-box;
    padding: 6px;
    object-fit: contain;
}

.game-row-icon .icon {
    width: 20px;
    height: 20px;
}

.game-row-title {
    grid-column: 2 / 4;
    grid-row: 1;
    align-self: end;
    overflow: hidden;
    font-family: var(--heading-font, var(--site-font));
    font-size: var(--type-md);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.game-badge--small {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-bottom: 0;
    padding: 0 7px;
    border-radius: 5px;
    background: var(--ui-surface-muted, #efeae1);
    color: var(--ui-ink-muted, #6b6459);
    font-size: var(--type-2xs);
}

.game-badge--small:empty { visibility: hidden; }

.game-row-open {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    color: var(--ui-ink-muted, #77706a);
    font-size: var(--type-xs);
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .game-row { height: 78px; }
}

@media (max-width: 600px) {
    .game-tile { min-height: 170px; }
    .game-tile-text { display: none; }
    .game-tile-actions { gap: 8px; }
    .game-play { padding: 8px 15px; font-size: var(--type-xs); }

    .game-row { height: 74px; column-gap: 12px; padding: 0 14px; }
    .game-row-icon { width: 38px; height: 38px; border-radius: 10px; }
    .game-row-title { font-size: var(--type-sm); }
}
/* The start page on narrow screens – media queries only. */
@media (max-width: 768px) {
    .rec-highlight-card {
        flex-direction: column;
    }

    .rec-highlight-card .rec-image {
        flex: 0 0 auto;
    }

    .rec-image-grid {
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
    }

    .rec-highlight-card--image-mode {
        max-width: 100%;
    }

    .rec-highlight-card--image-mode .rec-image img {
        max-height: 70vh;
    }

    .rec-highlight-card--image-mode .rec-content {
        padding: 22px;
    }

    .games-grid {
        grid-template-columns: 1fr;
    }
}

/* Private Scroll to Top Button */
body.theme-private #scroll-to-top {
    background: linear-gradient(135deg, var(--private-primary) 0%, var(--private-secondary) 100%);
    color: white;
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

body.theme-private #scroll-to-top:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 15px 30px rgba(217, 70, 239, 0.4);
}

/* --- Tiles ---------------------------------------------------------------- */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 60px;
}

.tile {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    color: var(--ui-ink);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tile:hover {
    transform: translateY(-3px);
    border-color: var(--ui-accent);
    box-shadow: 0 14px 32px rgba(20, 18, 16, 0.12);
}

.tile-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--ui-surface-muted);
    color: var(--ui-ink);
}

.tile-icon .icon { width: 22px; height: 22px; }
.tile:hover .tile-icon { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }

.tile-body { flex: 1 1 auto; min-width: 0; }

.tile-title {
    display: block;
    font-family: var(--heading-font, var(--site-font));
    font-size: var(--type-lg);
    font-weight: 700;
    margin-bottom: 3px;
}

.tile-teaser {
    display: block;
    font-size: var(--type-sm);
    line-height: 1.45;
    color: var(--ui-ink-muted);
}

.tile-arrow { flex: 0 0 auto; color: var(--ui-ink-muted); }
.tile-arrow .icon { width: 17px; height: 17px; display: block; }
.tile:hover .tile-arrow { color: var(--ui-accent-ink); }

/* --- Values --------------------------------------------------------------- */

.value-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 64px 0 30px;
    padding-top: 30px;
    border-top: 1px solid var(--ui-rule);
}

.value { display: flex; align-items: flex-start; gap: 12px; }

.value-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    color: var(--ui-ink);
}

.value-icon .icon { width: 19px; height: 19px; }
.value strong { display: block; font-size: var(--type-md); color: var(--ui-ink); }
.value small { display: block; font-size: var(--type-sm); line-height: 1.45; color: var(--ui-ink-muted); }

/* --- Tablet --------------------------------------------------------------- */

@media (max-width: 1100px) {
    .hero.has-image { padding: 56px 0 50px; margin-bottom: 34px; }
    .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .value-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .hero { padding: 40px 0 34px; }
}

/* --- Phone ---------------------------------------------------------------- */

@media (max-width: 767px) {
    .hero { padding: 26px 0 26px; }

    /* On the phone the text does not tolerate a gradient towards the side –
       there the veil covers evenly and the image stays as mood underneath. */
    .hero.has-image {
        margin-bottom: 28px;
        padding: 34px 0 32px;
        background-position: center;
    }

    .hero.has-image .hero-eyebrow,
    .hero.has-image .hero-title,
    .hero.has-image .hero-claim,
    .hero.has-image .hero-text,
    .hero.has-image .hero-actions { max-width: none; }

    .hero.has-image::before { background-position: center 38%; }

    .hero-text { margin-bottom: 20px; }
    /* The two buttons stay side by side as in the draft. They share the row
       (flex-basis 0) and may shrink below the width their text needs
       (min-width 0) – font and spacing are chosen so that nothing
       overflows. */
    .hero-actions { gap: 10px; flex-wrap: nowrap; }

    .hero-actions .btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 12px 12px;
        font-size: var(--type-sm);
        white-space: nowrap;
    }

    .hero-actions .btn .icon-inline { width: 15px; height: 15px; }

    .tile-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 42px; }
    .tile { padding: 15px 16px; gap: 13px; border-radius: 16px; }
    .tile-icon { width: 40px; height: 40px; }

    .value-row { grid-template-columns: 1fr; gap: 16px; margin: 44px 0 20px; }
}

/* Portrait on the phone: the separate tiles become one continuous list –
   icon, name, arrow. Six stacked cards with a subline otherwise make for a
   very long slide; as a list all entries are visible at a glance. */
@media (max-width: 767px) and (orientation: portrait) {
    /* Portrait: the text runs across the full width and therefore also over
       the transparent part of the veil. An additional, even layer secures
       readability without overriding the setting. In landscape the text sits
       left in the dense part – there it would only be a light stripe at the
       edges. */
    .hero.has-image .hero-inner { position: relative; }

    .hero.has-image .hero-inner::before {
        content: "";
        position: absolute;
        inset: -34px 0;
        z-index: -1;
        background: color-mix(in srgb, var(--ui-surface) 62%, transparent);
    }

    .tile-grid {
        display: block;
        background: var(--ui-surface);
        border: 1px solid var(--ui-line);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(20, 18, 16, 0.04);
    }

    .tile {
        padding: 14px 16px;
        background: none;
        border: none;
        border-bottom: 1px solid var(--ui-rule);
        border-radius: 0;
        box-shadow: none;
        gap: 14px;
    }

    .tile:last-child { border-bottom: none; }

    /* No lift and no shadow – inside a list that would look restless. */
    .tile:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--ui-line);
        background: var(--ui-surface-muted);
    }

    /* The icon stands on its own, without a surface of its own. */
    .tile-icon,
    .tile:hover .tile-icon {
        width: auto;
        height: auto;
        background: none;
        border-radius: 0;
        color: var(--ui-ink);
    }

    .tile-icon .icon { width: 21px; height: 21px; }
    .tile-title { font-size: var(--type-base); margin-bottom: 0; }
    .tile-teaser { display: none; }
}

/* Very narrow devices: the arrow gives way, the text stays complete. */
@media (max-width: 379px) {
    .hero-actions { gap: 8px; }
    .hero-actions .btn { font-size: var(--type-xs); padding: 11px 9px; gap: 5px; }
    .hero-actions .btn .icon-inline { display: none; }
}

/* --- Phone landscape: little height --------------------------------------- */

@media (max-height: 500px) and (orientation: landscape) {
    /* The big line takes a smaller scale here instead of a size of its own,
       so it keeps following the type scale. */
    .hero {
        padding: 20px 0 18px;
        --type-display: clamp(1.9rem, 1.4rem + 2vw, 2.4rem);
    }

    /* Landscape: little height. The title area becomes flatter, the image
       moves up so that the lake and not the table is visible. */
    .hero.has-image { padding: 26px 0 24px; margin-bottom: 22px; }
    .hero.has-image::before { background-position: center 30%; }
    .hero-text { margin-bottom: 16px; }
    /* Two columns: at 667 px (iPhone SE landscape) three tiles do not fit
       without their content pushing the page sideways. */
    .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The board and the notes on it. In both bundles, because the live preview in
   the admin area draws the same note – see src/design/pinnwand/note.php. */

.news-board {
    box-sizing: border-box;
    overflow: hidden;
    padding: clamp(16px, 2.4cqi, 34px);
    border: clamp(22px, 3.6cqi, 52px) solid transparent;
    border-image-source: var(--board-frame);
    border-image-slice: var(--board-frame-slice);
    border-image-width: clamp(22px, 3.6cqi, 52px);
    border-image-repeat: stretch;
    background-color: #e5c49f;
    background-image: var(--board-cork);
    background-repeat: repeat;
    background-size: var(--board-cork-size, 300px);
    box-shadow: inset 0 0 50px rgba(132, 92, 50, 0.16), 0 14px 34px rgba(90, 62, 34, 0.2);
}

/* How many notes stand next to each other follows from the room, not from a
   fixed number per breakpoint. Counted columns made a note on a wide screen
   smaller than on a phone – four columns of 240px where three of 320px had
   room. The upper bound keeps them from growing into posters when few are
   pinned, so a note stays between roughly 250 and 310 pixels everywhere. */
.news-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 360px));
    grid-auto-flow: row dense;
    gap: clamp(4px, 1cqi, 16px);
    align-items: center;
    justify-content: center;
    --stack: 0;
}

.news-note-slot[hidden] {
    display: none;
}

.news-note-slot {
    display: grid;
    min-width: 0;
    padding-top: 13%;
    padding-bottom: 6%;
    place-items: center;
}

/* Every note fills its slot the same way. How big it actually becomes is
   decided by the number of columns, and on the desktop by the width placed in
   the board editor. */
.news-note {
    position: relative;
    width: 86%;
    max-width: 100%;
    aspect-ratio: var(--note-ratio, 1) / 1;
    transform: rotate(var(--news-rotation, 0deg));
    transform-origin: var(--paper-pin-x, 50%) var(--paper-pin-y, 12%);
    filter: drop-shadow(0 12px 9px rgba(49, 25, 8, 0.28));
    isolation: isolate;
    container-type: inline-size;
}

/* Modes of the wall. Only the mode hangs off the width – how many notes fit in
   a row the grid works out on its own. */
@container pinnwand (min-width: 1100px) {
    /* Placed by hand: the board keeps its aspect ratio so that y holds up */
    .news-board.is-free {
        position: relative;
        aspect-ratio: var(--board-ratio, 16 / 10);
    }

    .news-board.is-free .news-board-grid {
        display: block;
        height: 100%;
    }

    .news-board.is-free .news-note-slot {
        position: absolute;
        left: var(--layout-x);
        top: var(--layout-y);
        width: var(--layout-w);
        padding: 0;
        z-index: var(--layer, 1);
    }
}

@container pinnwand (max-width: 1099px) {
    .news-note { transform: rotate(clamp(-3deg, var(--news-rotation, 0deg), 3deg)); }
}

@container pinnwand (max-width: 560px) {
    .news-board-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; --stack: 1; }
    .news-note-slot { grid-column: auto; }
    .news-note {
        width: min(86%, 340px);
        transform: rotate(clamp(-5deg, var(--news-rotation, 0deg), 5deg));
    }
}

.news-note picture {
    display: contents;
}

.news-note-paper {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.news-note-pin {
    position: absolute;
    top: var(--pin-top);
    left: var(--pin-left);
    z-index: 3;
    width: var(--pin-width);
    height: auto;
    object-fit: contain;
    pointer-events: none;

    /* The head is drawn whole, the shaft fades out where it enters the paper.
       Cut off hard it would end in mid-air; fading it reads as stuck in. The
       two points come from news_design_style(). */
    -webkit-mask-image: linear-gradient(to bottom, #000 var(--pin-solid, 100%), transparent var(--pin-fade, 100%));
    mask-image: linear-gradient(to bottom, #000 var(--pin-solid, 100%), transparent var(--pin-fade, 100%));
    transform-origin: var(--pin-origin-x) var(--pin-origin-y);
    filter: drop-shadow(0 5px 4px rgba(24, 12, 5, 0.38));
}

.news-note-content {
    position: absolute;
    z-index: 2;
    top: var(--text-y);
    left: var(--text-x);
    width: var(--text-width);
    height: var(--text-height);
    color: var(--note-ink, #2f2924);
    font-family: var(--news-font, cursive);
    overflow: hidden;

    /* Text that does not fit is cut off at the lower edge - without a sign of
       it nothing tells the reader that something is missing. The last line
       fades out instead, so the cut is visible. Short text ends before the
       gradient and stays untouched; a picture sits at the top and is out of
       its reach. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 0.9em), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 0.9em), transparent);
}

/* In the band below a picture the type has a fraction of the room it has on a
   plain sheet, so it is set smaller there. Without this the heading alone fills
   the band and everything under it fades away. */
.news-note.has-media .news-note-content h3,
.news-note.has-media .news-note-content strong {
    margin: 0 0 1cqi;
    font-size: max(0.68rem, 5.2cqi);
}

.news-note.has-media .news-note-content p {
    font-size: max(0.54rem, 3.7cqi);
    line-height: 1.28;
}

.news-note.has-media .news-note-tag {
    margin: 0 0 1cqi;
    padding: 0.4cqi 1.6cqi;
    font-size: max(0.44rem, 2.8cqi);
}

.news-note.has-media .news-note-link {
    margin-top: 0.8cqi;
    font-size: max(0.52rem, 3.2cqi);
}

.news-note-content::before {
    content: "";
    display: block;
    pointer-events: none;
}

.news-note.corner-top-right .news-note-content::before {
    float: right;
    width: var(--corner-width);
    height: var(--corner-height);
    shape-outside: polygon(18% 0, 100% 0, 100% 100%, 62% 76%);
}

.news-note.corner-bottom-right .news-note-content::before {
    float: right;
    width: var(--corner-width);
    height: 100%;
    shape-outside: polygon(100% calc(100% - var(--corner-height)), 100% 100%, 0 100%);
}

.news-note.corner-bottom-left .news-note-content::before {
    float: left;
    width: var(--corner-width);
    height: 100%;
    shape-outside: polygon(0 calc(100% - var(--corner-height)), 100% 100%, 0 100%);
}

/* The type is a share of the note, so the same amount of text fits on every one
   of them. Only the lower bound stays, as a limit of legibility: where it takes
   effect the note is too small, and that is what has to change, not the type.
   An upper bound would make the type shrink in relation the larger a note is
   placed - on the freely arranged board that is exactly the wrong way round. */
.news-note-content h3,
.news-note-content strong {
    display: block;
    margin: 0 0 2cqi;
    color: inherit;
    font-family: inherit;
    font-size: max(0.82rem, 7cqi);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.news-note-content p {
    margin: 0;
    color: inherit;
    opacity: 0.88;
    font-size: max(0.64rem, 4.7cqi);
    line-height: 1.36;
}

.news-note.is-lined .news-note-content h3,
.news-note.is-lined .news-note-content strong,
.news-note.is-lined .news-note-content p,
.news-note.is-lined .news-note-link {
    line-height: var(--note-line-step);
}

/* The spacing alone does not make the text sit on the rules - it also has to
   start on the first one. Where that is comes from line_start of the paper. */
.news-note.is-lined .news-note-content {
    padding-top: var(--note-line-offset, 0);
}

/* On ruled paper the spacing of the rules sets the size of the type, not the
   width of the sheet - one writes to the lines that are there. Set apart, the
   two drifted: on a sheet where two printed rules were taken as one line to
   write on, the line grew to two and a half times the type and the writing
   swam in the middle of it. Derived, the type follows every spacing, including
   one set by hand in the paper tool. The lower bounds stay as the limit of
   legibility - where they take effect, the rules are too narrow to write
   between, and two of them belong together. */
.news-note.is-lined .news-note-content h3,
.news-note.is-lined .news-note-content strong {
    margin: 0;
    font-size: max(0.72rem, calc(var(--note-line-step) / 1.1));
}

.news-note.is-lined .news-note-content p {
    font-size: max(0.58rem, calc(var(--note-line-step) / 1.3));
}

.news-note.is-lined .news-note-link {
    font-size: max(0.6rem, calc(var(--note-line-step) / 1.45));
}

.news-note-thumb {
    position: relative;
    display: block;
    margin: 0 0 6cqi;
    border-radius: 6cqi;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

/* The preview in the admin area keeps its frame in the markup and switches it
   off when the chosen kind has no picture. Without this the display above
   would win and leave an empty frame on the note. */
.news-note-thumb[hidden] {
    display: none;
}

/* Instant photo: the image sits in the window of the paper, the text in the band
   below. It is placed on the note itself, not inside the text area - the text
   area cuts off what does not fit, and the window lies outside it. */
.news-note.has-media > .news-note-thumb {
    position: absolute;
    z-index: 1;
    left: var(--thumb-left);
    top: var(--thumb-top);
    width: var(--thumb-width);
    height: var(--thumb-height);
    margin: 0;
    border-radius: 0;
    aspect-ratio: auto;
}

.news-note-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* The image ends where the paper ends. The paper is its own mask: laid over the
   image exactly where it lies underneath it, so a tear, a deckle edge or a
   folded corner cuts the image along its real outline instead of a straight
   line. The four values come from news_design_style(). */
.news-note-thumb {
    -webkit-mask-image: var(--note-paper);
    mask-image: var(--note-paper);
    -webkit-mask-size: var(--paper-width) var(--paper-height);
    mask-size: var(--paper-width) var(--paper-height);
    -webkit-mask-position: var(--paper-offset-x) var(--paper-offset-y);
    mask-position: var(--paper-offset-x) var(--paper-offset-y);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* The same paper once more on top of the image, multiplied into it: creases,
   fibres and shadows run across the photo instead of stopping at its edge.
   Without this the picture looks pasted on rather than lying on paper. */
.news-note-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--note-paper);
    background-size: var(--paper-width) var(--paper-height);
    background-position: var(--paper-offset-x) var(--paper-offset-y);
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
    opacity: var(--paper-grain, 0.45);
    pointer-events: none;
}

.news-note.has-media > .news-note-thumb {
    -webkit-mask-position: calc(-1 * var(--thumb-left)) calc(-1 * var(--thumb-top));
    mask-position: calc(-1 * var(--thumb-left)) calc(-1 * var(--thumb-top));
}

.news-note.has-media > .news-note-thumb::before {
    background-position: calc(-1 * var(--thumb-left)) calc(-1 * var(--thumb-top));
}

/* The shadow that the curled corner casts onto the image. */
.news-note.corner-top-right .news-note-thumb::after,
.news-note.corner-bottom-right .news-note-thumb::after,
.news-note.corner-bottom-left .news-note-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.news-note.corner-top-right .news-note-thumb::after {
    background: radial-gradient(
        circle at 100% 0,
        rgba(28, 20, 10, 0.32) 0,
        rgba(28, 20, 10, 0.12) calc(var(--corner-text-width) * 0.8),
        transparent calc(var(--corner-text-width) * 1.4)
    );
}

.news-note.corner-bottom-right .news-note-thumb::after {
    background: radial-gradient(
        circle at 100% 100%,
        rgba(28, 20, 10, 0.32) 0,
        rgba(28, 20, 10, 0.12) calc(var(--corner-text-width) * 0.8),
        transparent calc(var(--corner-text-width) * 1.4)
    );
}

.news-note.corner-bottom-left .news-note-thumb::after {
    background: radial-gradient(
        circle at 0 100%,
        rgba(28, 20, 10, 0.32) 0,
        rgba(28, 20, 10, 0.12) calc(var(--corner-text-width) * 0.8),
        transparent calc(var(--corner-text-width) * 1.4)
    );
}

.news-note-tag {
    display: inline-block;
    margin: 0 0 3cqi;
    padding: 0.6cqi 2.2cqi;
    border-radius: 999px;
    background: rgba(20, 23, 35, 0.08);
    font-size: max(0.52rem, 3.6cqi);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.news-note-rating {
    display: block;
    margin: 0 0 2cqi;
    color: var(--ui-accent, #d4af37);
    font-size: max(0.7rem, 5cqi);
    letter-spacing: 0.1em;
}

.news-note-link {
    display: inline-block;
    margin-top: 2cqi;
    color: inherit;
    font-size: max(0.6rem, 4cqi);
    font-weight: 800;
    text-underline-offset: 3px;
}

button.news-note-link {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.news-note-link:focus-visible {
    outline: 2px solid #4b2d16;
    outline-offset: 3px;
}
/* ---------------------------------------------------------------------------
   Account area /account

   Builds on base.css and private.css and uses their color variables.
   Design line: no heavy white boxes any more, but quiet surfaces with hair
   lines. What belongs together sits in one field; separation comes from
   lines instead of shadows. That looks tidier and stays readable on small
   screens, where stacked boxes otherwise turn into a slide.

   The header menu below is used on EVERY page, not only here –
   account.css is loaded everywhere.
   --------------------------------------------------------------------------- */

:root {
    --account-surface: #fff;
    --account-line: rgba(45, 40, 35, 0.09);
    --account-muted: #7d736a;
    --account-radius: 16px;
}

/* --- Page ----------------------------------------------------------------- */

.account-page {
    padding: 26px 0 var(--space-page);
}

.account-page .container {
    max-width: 760px;
}

.account-page h1 {
    color: var(--private-text);
    margin: 0 0 6px;
}

.account-page .account-lead {
    color: var(--private-text);
    opacity: 0.7;
    margin: 0 0 24px;
    font-size: var(--type-lead);
}

/* --- Account navigation ---------------------------------------------------
   The second way next to the header menu: right on the page, because that
   is where people look. On the phone a horizontally scrollable row – tabs
   that wrap would otherwise lose their order.                               */

.account-nav {
    border-bottom: 1px solid var(--account-line);
    margin-bottom: 26px;
}

.account-nav .container {
    max-width: 760px;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.account-nav .container::-webkit-scrollbar { display: none; }

.account-nav a,
.account-nav button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--private-text);
    font: inherit;
    font-size: var(--type-md);
    font-weight: 600;
    text-decoration: none;
    opacity: 0.62;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.account-nav a:hover,
.account-nav button:hover { opacity: 1; }

.account-nav a[aria-current="page"] {
    opacity: 1;
    border-bottom-color: var(--private-primary);
    color: var(--private-primary);
}

.account-nav svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

/* Sign out moves to the right and is visually quieter. */
.account-nav form { margin: 0 0 0 auto; }
.account-nav form button { opacity: 0.5; }

/* --- Head with name -------------------------------------------------------
   Replaces the "your account" card: who am I, is it confirmed, since when. */

.account-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}

.account-avatar {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--private-primary);
    color: #fff;
    font-size: var(--glyph-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.account-identity-body { min-width: 0; }

.account-identity h1 {
    margin: 0 0 3px;
    font-size: var(--type-h3);
}

.account-identity p {
    margin: 0;
    color: var(--account-muted);
    font-size: var(--type-md);
    overflow-wrap: anywhere;
}

/* --- Fields instead of boxes ---------------------------------------------- */

.account-card {
    background: var(--account-surface);
    border: 1px solid var(--account-line);
    border-radius: var(--account-radius);
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(45, 40, 35, 0.04);
}

.account-card h2 {
    margin: 0 0 10px;
    font-size: var(--type-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--account-muted);
}

.account-card > p:last-child,
.account-card > form:last-child,
.account-card > dl:last-child { margin-bottom: 0; }

.account-card p {
    color: var(--ui-ink-muted);
    line-height: 1.6;
    margin: 0 0 14px;
}

.account-card a {
    color: var(--private-primary);
    font-weight: 600;
}

/* A field that urges caution – without being an alarm color. */
.account-card.quiet {
    background: transparent;
    box-shadow: none;
}

/* --- Row lists ------------------------------------------------------------
   Label on the left, value on the right, separated by hair lines.           */

.account-rows {
    margin: 0;
    display: grid;
    grid-template-columns: 11rem 1fr;
}

.account-rows dt,
.account-rows dd {
    padding: 12px 0;
    border-top: 1px solid var(--account-line);
}

.account-rows dt:first-of-type,
.account-rows dt:first-of-type + dd { border-top: none; padding-top: 0; }

.account-rows dt {
    font-size: var(--type-sm);
    font-weight: 600;
    color: var(--account-muted);
}

.account-rows dd {
    margin: 0;
    color: var(--private-text);
    overflow-wrap: anywhere;
}

.account-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: var(--type-2xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--ui-surface-muted);
    color: var(--ui-ink-muted);
    vertical-align: 1px;
}

.account-badge.ok { background: #e4f4ea; color: #1b6b42; }
.account-badge.warn { background: #fdeae7; color: #b23a22; }

/* --- Messages ------------------------------------------------------------- */

.account-notice {
    padding: 14px 18px;
    border-radius: var(--account-radius);
    margin-bottom: 22px;
    font-size: var(--type-md);
    line-height: 1.55;
    border: 1px solid transparent;
}

.account-notice a { font-weight: 700; }

.account-notice.info {
    background: var(--account-surface);
    border-color: var(--account-line);
    border-left: 3px solid var(--private-primary);
    color: var(--private-text);
}

.account-notice.success { background: #e4f4ea; border-color: #bfe3cd; color: #14603b; }
.account-notice.error { background: #fdeae7; border-color: #f3c9c0; color: #93211f; }

/* --- Forms ---------------------------------------------------------------- */

.account-field { margin-bottom: 18px; }

.account-field label {
    display: block;
    margin-bottom: 7px;
    font-size: var(--type-sm);
    font-weight: 600;
    color: var(--private-text);
}

.account-field input[type="text"],
.account-field input[type="email"],
.account-field input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    font-family: inherit;
    font-size: var(--type-base);
    color: var(--private-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.account-field input:focus {
    outline: none;
    border-color: var(--private-primary);
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.14);
}

.account-hint {
    margin-top: 7px;
    font-size: var(--type-sm);
    color: var(--account-muted);
    line-height: 1.5;
}

.account-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.account-check input { width: 17px; height: 17px; accent-color: var(--private-primary); }
.account-check label { margin: 0; font-size: var(--type-md); color: var(--private-text); font-weight: 500; }

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

.account-btn {
    display: inline-block;
    padding: 11px 22px;
    font-family: inherit;
    font-size: var(--type-md);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--private-primary);
    border-radius: 12px;
    background: var(--private-primary);
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.account-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(45, 40, 35, 0.14);
}

.account-btn.secondary {
    background: var(--account-surface);
    color: var(--private-text);
    border-color: var(--ui-line);
}

.account-btn.danger { background: #b8341f; border-color: #b8341f; color: #fff; }

.account-btn.link {
    background: none;
    border: none;
    padding: 6px 2px;
    color: var(--private-primary);
    text-decoration: underline;
}

.account-btn.link:hover { transform: none; box-shadow: none; }

/* --- Devices -------------------------------------------------------------- */

.account-device {
    padding: 14px 0;
    border-top: 1px solid var(--account-line);
}

.account-device:first-of-type { border-top: none; padding-top: 0; }

.account-device > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    list-style: none;
    cursor: pointer;
}

.account-device > summary::-webkit-details-marker { display: none; }

.account-device > summary::after {
    content: '';
    order: 1;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid var(--account-muted);
    border-bottom: 2px solid var(--account-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.account-device[open] > summary::after { transform: rotate(-135deg); }

.account-device > summary .account-device-meta {
    order: 2;
    flex-basis: 100%;
    margin-top: 0;
}

.account-device-name { font-weight: 600; color: var(--private-text); overflow-wrap: anywhere; }
.account-device-meta { font-size: var(--type-sm); color: var(--account-muted); margin-top: 3px; }

/* --- Logins on a device --------------------------------------------------- */

.account-device-sessions {
    margin: 12px 0 0;
    padding: 0 0 0 14px;
    list-style: none;
    border-left: 2px solid var(--account-line);
}

.account-device-sessions li {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.account-device-sessions li + li { border-top: 1px solid var(--account-line); }

.account-device-browser { font-weight: 600; color: var(--private-text); }

.account-device-all { margin: 10px 0 0 16px; }

.account-device-note { margin: 16px 0 0; font-size: var(--type-sm); color: var(--account-muted); }
/* --- Thank-you card --------------------------------------------------------- */

.account-thanks h2 { display: flex; align-items: center; gap: 8px; }

.account-thanks-heart { color: #c2414b; }
/* ---------------------------------------------------------------------------
   Pages of the modules below /account (template module-page.php)

   The module brings the content, the frame stays the one of the account
   area. A page that needs room – an editor, a canvas – asks for the wide
   frame (account_page returns 'wide' => true); then the page and the
   navigation above it grow together, so the tabs stay aligned with the
   content.
   --------------------------------------------------------------------------- */

.account-module-page {
    min-width: 0;
}

.account-page--wide .container,
.account-nav--wide .container {
    max-width: 1320px;
}
/* --- Footer --------------------------------------------------------------- */

.account-footer { margin-top: 34px; text-align: center; }

.account-footer a {
    color: var(--private-text);
    opacity: 0.6;
    font-size: var(--type-sm);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Header menu – on every page of the website
   --------------------------------------------------------------------------- */

.account-menu { position: relative; }
.account-menu summary { list-style: none; cursor: pointer; }
.account-menu summary::-webkit-details-marker { display: none; }

.account-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 230px;
    padding: 8px;
    overflow: hidden;
    background: #fff;
    border-radius: var(--account-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    z-index: 200;
}

.account-menu-panel a,
.account-menu-panel button {
    /* Flex instead of block: otherwise icon and label stand right next to
       each other without spacing and sit at different heights. */
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* Without border-box the padding would be added to the width – the green
       bar of the active entry would then stick out past the edge. */
    box-sizing: border-box;
    padding: 11px 14px;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--private-text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.account-menu-panel a:hover,
.account-menu-panel button:hover { background: var(--ui-surface-muted); }
.account-menu-panel a[aria-current="page"] { background: var(--private-primary); color: #fff; }
.account-menu-panel form { margin: 6px 0 0; border-top: 1px solid #eee; padding-top: 6px; }

/* ---------------------------------------------------------------------------
   Tablet
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .account-page .container,
    .account-nav .container { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   Phone
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .account-page { padding: 18px 0 64px; }

    .account-nav { margin-bottom: 20px; }
    /* The row may slide past the page edge, otherwise it looks cut off
       instead of scrollable. */
    .account-nav .container { padding-right: 0; }
    /* Set tighter so that all four entries fit side by side at 390 px.
       If the room is not enough after all, the row scrolls sideways. */
    .account-nav a,
    .account-nav button { padding: 12px 8px; font-size: var(--type-sm); }
    .account-nav form { margin-left: 4px; }
    .account-nav .container { gap: 0; }

    .account-identity { gap: 13px; margin-bottom: 20px; }
    .account-avatar { width: 46px; height: 46px; font-size: var(--type-lg); }

    .account-card { padding: 18px; margin-bottom: 14px; }

    .account-rows { grid-template-columns: 1fr; }
    .account-rows dt { padding: 12px 0 0; font-size: var(--type-xs); }
    .account-rows dt + dd { padding-top: 2px; border-top: none; }
    .account-rows dt:first-of-type + dd { padding-top: 2px; }

    .account-btn { width: 100%; text-align: center; }
    .account-btn.link { width: auto; }

    .account-device-sessions li { align-items: flex-start; }
    .account-device form { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Phone landscape: only about 390 pixels of height are available.
   --------------------------------------------------------------------------- */

@media (max-height: 500px) and (orientation: landscape) {
    /* Little height: the page title takes a smaller scale instead of a size
       of its own, so it keeps following the type scale. */
    .account-page {
        padding: 12px 0 36px;
        --type-h1: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
    }
    .account-nav { margin-bottom: 14px; }
    .account-nav a,
    .account-nav button { padding: 9px 12px; }

    .account-identity { margin-bottom: 14px; }
    .account-page h1 { margin-bottom: 2px; }
    .account-page .account-lead { margin-bottom: 12px; font-size: var(--type-md); }

    .account-card { padding: 15px 17px; margin-bottom: 12px; }
    .account-field { margin-bottom: 12px; }
    .account-field input[type="text"],
    .account-field input[type="email"],
    .account-field input[type="password"] { padding: 9px 13px; }
    .account-check { margin-bottom: 12px; }
    .account-btn { padding: 9px 20px; }
    .account-footer { margin-top: 20px; }
}
/* ---------------------------------------------------------------------------
   Toasts

   Confirmations and errors appear fixed at the top edge of the screen and
   disappear on their own – at the top of the content, whoever works further
   down would never see them.

   Without JavaScript they stay put instead of being missing: the message is
   rendered server side, the script only adds the fading out.

   This file is loaded both in the admin area and on the website so that
   messages look the same everywhere.
   --------------------------------------------------------------------------- */

.mk-toast-stack {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(560px, calc(100vw - 24px));
    pointer-events: none;
}

.mk-toast {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border-radius: 14px;
    background: #ffffff;
    color: #23201d;
    font-size: var(--type-md);
    line-height: 1.45;
    box-shadow: 0 10px 30px rgba(20, 18, 16, 0.18);
    border-left: 4px solid #6b7280;
    pointer-events: auto;
    animation: mk-toast-in 0.22s ease-out both;
}

.mk-toast-icon { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; }
.mk-toast-text { flex: 1 1 auto; overflow-wrap: anywhere; }

.mk-toast-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: inherit;
    opacity: 0.45;
    cursor: pointer;
    font-size: var(--glyph-sm);
    line-height: 1;
}

.mk-toast-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }

.mk-toast-success { border-left-color: #1b6b42; }
.mk-toast-error { border-left-color: #b8341f; }
.mk-mk-toast-info { border-left-color: #2f6f9e; }

.mk-toast-success .mk-toast-icon { color: #1b6b42; }
.mk-toast-error .mk-toast-icon { color: #b8341f; }
.mk-mk-toast-info .mk-toast-icon { color: #2f6f9e; }

.mk-toast.is-leaving { animation: mk-toast-out 0.25s ease-in both; }

@keyframes mk-toast-in {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: none; }
}

@keyframes mk-toast-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-10px); }
}

/* Whoever has opted out of motion does not get it here either. */
@media (prefers-reduced-motion: reduce) {
    .mk-toast, .mk-toast.is-leaving { animation: none; }
}

@media (max-width: 767px) {
    .mk-toast-stack { top: 10px; width: calc(100vw - 20px); }
    .mk-toast { padding: 12px 13px; font-size: var(--type-sm); border-radius: 12px; }
}