/* ==========================================================================
   inner pages — services, portfolio, about, contact
   ========================================================================== */

/* ---------- shared page hero ---------- */
.page-hero { padding-top: var(--space-lg); background: var(--surface-page); }
.page-hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
.page-hero__copy { display: grid; gap: var(--space-md); justify-items: start; }
.page-hero__copy .lead { max-width: 36rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.page-hero__media { position: relative; width: min(100%, 26rem); margin-inline: auto; padding-bottom: 1.5rem; }
.page-hero__wash { width: 115%; aspect-ratio: 1; left: -14%; top: -8%; color: var(--color-blue-soft); opacity: 0.4; z-index: -1; animation: drift var(--duration-drift) ease-in-out infinite alternate; }
.page-hero__arch { border-radius: var(--radius-arch); overflow: hidden; aspect-ratio: 4 / 5; border: 0.5rem solid var(--color-paper); box-shadow: var(--shadow-lift); }
.page-hero__arch img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__chip { position: absolute; left: -1rem; bottom: 0; transform: rotate(-3deg); box-shadow: var(--shadow-soft); }
.page-hero__branch { width: clamp(6rem, 12vw, 10rem); right: 1rem; top: 5rem; opacity: 0.45; z-index: -1; }
@keyframes drift { from { transform: rotate(0deg) scale(1); } to { transform: rotate(14deg) scale(1.06); } }
@media (min-width: 62em) {
  .page-hero { padding-top: var(--space-xl); }
  .page-hero__grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-2xl); }
}

/* ---------- breadcrumb ---------- */
.crumbs { display: flex; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--text-muted); text-transform: lowercase; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2xs); opacity: 0.6; }
.crumbs ol { display: flex; gap: var(--space-2xs); }

/* ---------- services: focus blocks (zig-zag) ---------- */
.focus { background: var(--surface-page); }
.focus-block { display: grid; gap: var(--space-lg); align-items: center; }
.focus-block + .focus-block { margin-top: var(--space-2xl); }
.focus-block__media { position: relative; }
.focus-block__media img { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 6rem; box-shadow: var(--shadow-lift); border: 0.4rem solid var(--color-paper); }
.focus-block__media--flip img { border-radius: var(--radius-lg) var(--radius-lg) 6rem var(--radius-lg); }
.focus-block__tag { position: absolute; top: -1rem; left: 1.5rem; z-index: var(--layer-raised); background: var(--color-ochre); color: var(--color-ink); border-color: transparent; }
.focus-block__copy { display: grid; gap: var(--space-md); justify-items: start; }
.focus-block__copy ul { display: grid; gap: var(--space-2xs); }
.focus-block__copy li { display: flex; gap: var(--space-xs); color: var(--text-heading); }
.focus-block__copy li img { width: 1.2rem; height: 1.2rem; margin-top: 0.3rem; flex: none; }
.fit { padding: 1rem 1.4rem; background: var(--color-blue-pale); border-radius: var(--radius-md); font-size: var(--text-sm); }
.fit strong { color: var(--color-blue-deep); text-transform: lowercase; }
@media (min-width: 62em) {
  .focus-block { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .focus-block--flip .focus-block__media { order: 2; }
}

/* ---------- services: supporting tools (bento) ---------- */
.tools { background: var(--surface-soft); }
.bento { display: grid; gap: var(--space-md); }
.bento__card { position: relative; padding: 1.9rem 1.7rem; background: var(--color-paper); border-radius: var(--radius-lg) var(--radius-md) var(--radius-lg) var(--radius-sm); box-shadow: var(--shadow-soft); overflow: hidden; display: grid; gap: var(--space-xs); align-content: start; }
.bento__card::after { content: ""; position: absolute; right: -2rem; bottom: -2rem; width: 7rem; aspect-ratio: 1; border-radius: var(--radius-blob-b); background: var(--color-blue-pale); z-index: 0; }
.bento__card > * { position: relative; z-index: 1; }
.bento__card:nth-child(2)::after { background: #f1d9a8; }
.bento__card:nth-child(3)::after { background: #ecc9b8; }
.bento__card:nth-child(4)::after { background: #dfe3cf; }
.bento__icon { width: 3.4rem; height: 3.4rem; padding: 0.75rem; background: var(--color-cream); border-radius: var(--radius-blob-a); }
.bento__card p { font-size: var(--text-sm); }
.bento__card--wide { background: var(--color-navy); color: var(--text-on-dark-soft); }
.bento__card--wide h3 { color: var(--text-on-dark); }
.bento__card--wide .bento__icon { background: var(--color-blue-pale); }
.bento__card--wide:nth-child(n)::after { background: var(--color-blue-deep); }
.bento__card p { position: relative; z-index: 1; }
@media (min-width: 48em) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento__card { grid-column: span 3; }
  .bento__card:nth-child(1) { grid-column: span 4; }
  .bento__card:nth-child(2) { grid-column: span 2; margin-top: var(--space-lg); }
  .bento__card:nth-child(3) { grid-column: span 2; }
  .bento__card:nth-child(4) { grid-column: span 4; }
}

/* ---------- shared: faq band + cta band ---------- */
.band { background: var(--surface-page); }
.faq-grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 62em) { .faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-2xl); } }
.cta-band { background: var(--surface-accent); color: var(--text-on-accent); }
.cta-band h2 { color: var(--text-on-accent); }
.cta-band h2 em { color: #f1d9a8; }
.cta-band .lead { color: var(--color-blue-pale); }
.cta-band .eyebrow { color: var(--color-blue-pale); }
.cta-band__inner { display: grid; gap: var(--space-md); justify-items: start; max-width: 40rem; }
.cta-band__wash { width: 32rem; max-width: 90vw; aspect-ratio: 1; right: -10rem; top: -6rem; color: var(--color-blue); opacity: 0.55; z-index: -1; }
.cta-band__fallback { font-size: var(--text-sm); color: var(--color-blue-pale); }
.cta-band__fallback a { color: var(--color-paper); font-weight: var(--weight-semibold); }

/* ---------- portfolio ---------- */
.showcase { background: var(--surface-page); }
.showcase__stage { display: grid; gap: var(--space-md); }
.showcase__frame { position: relative; }
.showcase__frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-lift); }
.showcase__panel { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--color-paper); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4rem; box-shadow: var(--shadow-soft); display: grid; gap: var(--space-sm); align-content: start; }
.showcase__panel[hidden] { display: none; }
.showcase__panel ul { display: grid; gap: var(--space-2xs); }
.showcase__panel li { display: flex; gap: var(--space-xs); color: var(--text-heading); font-size: var(--text-sm); }
.showcase__panel li img { width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; flex: none; }
.showcase__tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.showcase__tab { padding: 0.65rem 1.3rem; border-radius: var(--radius-pill); border: 1.5px solid var(--line-accent); background: transparent; color: var(--text-heading); font-weight: var(--weight-medium); text-transform: lowercase; transition: background var(--duration-base) var(--ease-soft); }
.showcase__tab:hover { background: var(--surface-raised); }
.showcase__tab[aria-selected="true"] { background: var(--color-navy); color: var(--text-on-dark); border-color: var(--color-navy); }
.showcase__note { font-size: var(--text-xs); font-style: italic; color: var(--text-muted); margin-top: var(--space-xs); }
@media (min-width: 62em) {
  .showcase__stage { grid-template-columns: 1.55fr 1fr; align-items: center; }
  .showcase__panel { margin-left: -4rem; position: relative; z-index: var(--layer-raised); }
}

.features { background: var(--surface-sage); color: var(--color-ink); }
.features .eyebrow { color: var(--color-navy); }
.feature-row { display: grid; gap: var(--space-md); }
.feature { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: start; padding: 1.5rem 1.75rem; background: var(--color-paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.feature:nth-child(even) { margin-left: var(--space-lg); }
.feature__num { font-family: var(--font-heading); font-style: italic; font-size: var(--text-2xl); line-height: 1; color: var(--color-ochre-deep); }
.feature h3 { font-size: var(--text-lg); margin-bottom: var(--space-3xs); }
.feature p { font-size: var(--text-sm); }
@media (min-width: 62em) {
  .features__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-2xl); align-items: center; }
}

/* ---------- about ---------- */
.statement { background: var(--surface-soft); text-align: center; }
.statement blockquote { font-family: var(--font-heading); font-size: var(--text-2xl); line-height: 1.25; color: var(--text-heading); text-transform: lowercase; text-wrap: balance; max-width: 42rem; margin-inline: auto; }
.statement blockquote em { color: var(--color-terracotta); }
.statement .eyebrow { justify-content: center; margin-bottom: var(--space-md); }
.promises { background: var(--surface-page); }
.promise { display: grid; gap: var(--space-md); align-items: center; padding-block: var(--space-lg); border-top: 2px dashed var(--color-blue-soft); }
.promise:first-child { border-top: 0; }
.promise__num { font-family: var(--font-heading); font-style: italic; font-size: var(--text-4xl); line-height: 1; color: var(--color-blue); }
.promise p { max-width: 34rem; }
@media (min-width: 48em) {
  .promise { grid-template-columns: 8rem 1fr 1.2fr; gap: var(--space-xl); }
}
.audience { background: var(--surface-sage); color: var(--color-ink); }
.audience .eyebrow { color: var(--color-navy); }
.audience__grid { display: grid; gap: var(--space-xl); align-items: center; }
.audience__list { display: grid; gap: var(--space-sm); }
.audience__list li { padding: 1.2rem 1.5rem; background: var(--color-paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.audience__list li:nth-child(2) { margin-left: var(--space-lg); }
.audience__list strong { display: block; font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-lg); color: var(--text-heading); text-transform: lowercase; }
@media (min-width: 62em) { .audience__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }

/* ---------- contact ---------- */
.contact { background: var(--surface-page); }
.contact__grid { display: grid; gap: var(--space-lg); align-items: start; }
.contact-card { position: relative; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; }
.contact-card--main { background: var(--color-navy); color: var(--text-on-dark-soft); display: grid; gap: var(--space-md); justify-items: start; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 6rem; }
.contact-card--main h2 { color: var(--text-on-dark); font-size: var(--text-2xl); }
.contact-card--main::before { content: ""; position: absolute; right: -5rem; top: -5rem; width: 16rem; aspect-ratio: 1; background: var(--color-blue-deep); border-radius: var(--radius-blob-a); z-index: -1; }
.contact-card--qr { display: flex; gap: var(--space-sm); align-items: center; padding: 0.9rem 1.25rem 0.9rem 0.9rem; background: var(--color-paper); color: var(--text-body); border-radius: var(--radius-md); font-size: var(--text-sm); }
.contact-card--qr img { width: 6.5rem; height: 6.5rem; flex: none; }
.contact-card--soft { background: var(--color-paper); box-shadow: var(--shadow-soft); display: grid; gap: var(--space-sm); justify-items: start; border-radius: var(--radius-lg) var(--radius-lg) 6rem var(--radius-lg); }
.contact-card--soft h2 { font-size: var(--text-xl); }
.contact-card--soft .btn img { width: 1.25rem; height: 1.25rem; filter: none; }
.after { background: var(--surface-soft); }
.after-steps { display: grid; gap: var(--space-md); counter-reset: after; }
.after-steps li { position: relative; padding: 1.5rem 1.6rem 1.5rem 4.5rem; background: var(--color-paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.after-steps li::before { counter-increment: after; content: counter(after); position: absolute; left: 1.2rem; top: 1.2rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--radius-blob-b); background: var(--color-blue-deep); color: var(--text-on-accent); font-family: var(--font-heading); font-style: italic; font-size: var(--text-lg); }
.after-steps h3 { font-size: var(--text-lg); margin-bottom: var(--space-3xs); }
.after-steps p { font-size: var(--text-sm); }
@media (min-width: 62em) {
  .contact__grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-xl); }
  .contact-card--soft { margin-top: var(--space-xl); }
  .after-steps { grid-template-columns: repeat(3, 1fr); }
  .after-steps li:nth-child(2) { margin-top: var(--space-md); }
  .after-steps li:nth-child(3) { margin-top: var(--space-lg); }
}

/* ---------- about: bio ---------- */
.bio { background: var(--surface-page); }
.bio__grid { display: grid; gap: var(--space-xl); align-items: start; }
.bio__side { display: grid; gap: var(--space-md); }
.bio__side h2 { font-size: var(--text-2xl); }
.bio__creds { display: grid; gap: var(--space-xs); }
.bio__creds li { display: flex; gap: var(--space-xs); align-items: flex-start; padding: 0.85rem 1.2rem; background: var(--color-paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); color: var(--text-heading); font-weight: var(--weight-medium); text-transform: lowercase; }
.bio__creds li:nth-child(2) { margin-left: var(--space-md); }
.bio__creds img { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; flex: none; }
.bio__tools { display: grid; gap: var(--space-xs); }
.bio__tools h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: var(--weight-semibold); color: var(--text-muted); letter-spacing: var(--tracking-eyebrow); font-size: var(--text-xs); }
.bio__chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.bio__text { display: grid; gap: var(--space-md); max-width: 40rem; }
.bio__text p:not(.lead) { font-size: var(--text-base); }
.bio__text .lead { color: var(--text-heading); }
@media (min-width: 62em) {
  .bio__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2xl); }
  .bio__side { position: sticky; top: 7rem; }
}

/* ---------- services: what I deliver ---------- */
.deliver { background: var(--surface-dark); color: var(--text-on-dark-soft); }
.deliver h2 { color: var(--text-on-dark); }
.deliver .lead { color: var(--text-on-dark-soft); }
.deliver .eyebrow { color: var(--color-blue-soft); }
.deliver__grid { display: grid; gap: var(--space-md); }
.deliver__card { position: relative; padding: 2rem 1.9rem 2.1rem; background: var(--color-paper); color: var(--text-body); border-radius: var(--radius-lg) var(--radius-md) var(--radius-lg) var(--radius-sm); box-shadow: var(--shadow-lift); overflow: hidden; display: grid; gap: var(--space-xs); align-content: start; transition: transform var(--duration-base) var(--ease-soft); }
.deliver__card:hover { transform: translateY(-4px); }
.deliver__card::after { content: ""; position: absolute; right: -2.5rem; top: -2.5rem; width: 8rem; aspect-ratio: 1; border-radius: var(--radius-blob-b); background: var(--color-blue-pale); z-index: 0; }
.deliver__card:nth-child(2)::after { background: #f1d9a8; }
.deliver__card:nth-child(3)::after { background: #dfe3cf; }
.deliver__card:nth-child(4)::after { background: #ecc9b8; }
.deliver__card > * { position: relative; z-index: 1; }
.deliver__icon { width: 3.4rem; height: 3.4rem; padding: 0.75rem; background: var(--color-cream); border-radius: var(--radius-blob-a); }
.deliver__card h3 { font-size: var(--text-xl); }
.deliver__card p { font-size: var(--text-base); }
@media (min-width: 48em) {
  .deliver__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .deliver__card:nth-child(even) { margin-top: var(--space-xl); }
}

/* ---------- contact form ---------- */
.mailform { background: var(--surface-sage); }
.mailform__grid { display: grid; gap: var(--space-lg); align-items: center; }
.mailform__intro .eyebrow { color: var(--color-navy); }
.mailform__intro .lead { color: var(--color-navy); }
.mailform__card { position: relative; isolation: isolate; overflow: clip; padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--color-paper); border-radius: var(--radius-lg) var(--radius-lg) 5rem var(--radius-lg); box-shadow: var(--shadow-lift); }
.mailform__card::before { content: ""; position: absolute; right: -4rem; top: -4rem; width: 11rem; aspect-ratio: 1; background: var(--color-blue-pale); border-radius: var(--radius-blob-a); z-index: -1; }
.form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-3xs); }
.field label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-navy); }
.field input, .field textarea { width: 100%; padding: 0.85rem 1.1rem; font: inherit; font-size: var(--text-base); color: var(--text-heading); background: var(--color-cream); border: 1.5px solid var(--line-soft); border-radius: var(--radius-sm); transition: border-color var(--duration-fast) var(--ease-soft), box-shadow var(--duration-fast) var(--ease-soft), background var(--duration-fast); }
.field textarea { min-height: 9rem; resize: vertical; border-radius: var(--radius-md); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-blue); opacity: 0.8; }
.field input:hover, .field textarea:hover { border-color: var(--color-blue-soft); }
.field input:focus, .field textarea:focus { outline: none; background: var(--color-paper); border-color: var(--color-blue-deep); box-shadow: 0 0 0 4px rgb(74 122 153 / 0.25); }
.form.was-validated .field :is(input, textarea):invalid { border-color: var(--color-terracotta); box-shadow: 0 0 0 3px rgb(166 75 48 / 0.16); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__submit { justify-self: start; }
.form__submit img { width: 1.1rem; height: 1.1rem; }
.form__submit[disabled] { opacity: 0.7; cursor: progress; }
.form__status { display: flex; align-items: center; gap: var(--space-xs); padding: 0.85rem 1.1rem; border-radius: var(--radius-md); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.form__status[hidden] { display: none; }
.form__status--ok { background: var(--color-sage-pale); color: var(--color-sage-deep); }
.form__status--ok img { width: 1.25rem; height: 1.25rem; flex: none; }
.form__status--err { background: #f4ddd3; color: var(--color-terracotta-deep); }
@media (min-width: 62em) { .mailform__grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-xl); } }

/* ---------- portfolio projects ---------- */
.projects { background: var(--surface-soft); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.chips:empty { display: none; }
.chip { padding: 0.55rem 1.2rem; border-radius: var(--radius-pill); border: 1.5px solid var(--line-accent); background: transparent; color: var(--color-blue-deep); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; text-transform: lowercase; transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft); }
.chip:hover { background: var(--color-blue-pale); }
.chip[aria-pressed="true"] { background: var(--color-blue-deep); border-color: var(--color-blue-deep); color: var(--text-on-accent); }
.chip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.projects__grid { display: grid; gap: var(--space-md); }
.project { display: flex; flex-direction: column; background: var(--color-paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); overflow: clip; transition: transform var(--duration-base) var(--ease-soft), box-shadow var(--duration-base) var(--ease-soft); }
.project:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.project__media { position: relative; background: var(--color-blue-pale); }
.project__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.project__badge { position: absolute; left: 0.9rem; top: 0.9rem; background: var(--color-ochre); color: var(--color-navy); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.project__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: clamp(1.25rem, 3vw, 1.75rem); flex: 1; }
.project__tools { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.project__tools .pill { font-size: var(--text-xs); }
.project h3 { font-size: var(--text-xl); }
.project p { font-size: var(--text-sm); }
.project__lines { display: grid; gap: var(--space-xs); margin-top: var(--space-2xs); padding-top: var(--space-sm); border-top: 1.5px dashed var(--line-soft); }
.project__line { display: grid; gap: var(--space-3xs); }
.project__line dt { font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: lowercase; font-weight: var(--weight-semibold); color: var(--color-blue-deep); }
.project__line dd { margin: 0; font-size: var(--text-sm); color: var(--text-body); }
.project__links { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-sm); }
.project--empty { padding: var(--space-lg); text-align: center; color: var(--text-muted); }
.projects__note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--text-muted); text-align: center; }
@media (min-width: 48em) { .projects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .projects__grid { grid-template-columns: repeat(3, 1fr); } }
:root[data-lang="de"] .project__line dt { text-transform: none; }

/* ---------- project detail pages ---------- */
.proj-hero__tools { margin-top: var(--space-md); }
.pstats { padding-block: 0 var(--space-xl); background: var(--surface-page); }
.pstats__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
.pstat { display: grid; gap: var(--space-3xs); padding: 1.1rem 1.25rem; background: var(--color-paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); border-left: 6px solid var(--color-blue-deep); }
.pstat:nth-child(2) { border-left-color: var(--color-ochre); }
.pstat:nth-child(3) { border-left-color: var(--color-terracotta); }
.pstat:nth-child(4) { border-left-color: var(--color-blue-soft); }
.pstat strong { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--text-heading); line-height: 1.1; }
.pstat span { font-size: var(--text-sm); color: var(--text-muted); }
@media (min-width: 48em) { .pstats__row { grid-template-columns: repeat(4, 1fr); } }

.pfigure { background: var(--surface-page); }
.pfigure__frame { margin-top: var(--space-md); padding: clamp(0.5rem, 1.5vw, 1rem); background: var(--color-paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.pfigure__frame img { width: 100%; height: auto; border-radius: var(--radius-md); }
.pfigure__frame--report iframe { display: block; width: 100%; height: 46rem; border: 0; border-radius: var(--radius-md); background: var(--color-cream); }
.pfigure__note { margin-top: var(--space-md); max-width: 46rem; font-size: var(--text-sm); color: var(--text-muted); }
.pfigure__sub { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-xl); }
.ba { display: grid; gap: var(--space-lg); margin-top: var(--space-md); }
.ba__title { margin-bottom: var(--space-xs); font-size: var(--text-lg); }
.ba__title::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.55rem; border-radius: 50%; background: var(--color-terracotta); }
.ba__title--after::before { background: var(--color-sage-deep); }
.dtable__wrap { overflow-x: auto; background: var(--color-paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--text-xs); white-space: nowrap; }
.dtable th { padding: 0.65rem 0.9rem; background: var(--color-navy); color: var(--text-on-dark); text-align: left; font-weight: var(--weight-semibold); }
.dtable td { padding: 0.55rem 0.9rem; border-top: 1px solid #e8e0cf; color: var(--text-body); }
.dtable .muted { color: var(--color-terracotta); font-style: italic; }
.dtable--log { font-size: var(--text-sm); white-space: normal; }
.dtable--log td:last-child, .dtable--log th:last-child { text-align: right; width: 9rem; }
@media (min-width: 75em) { .ba { grid-template-columns: 1fr 1fr; } }

.story { background: var(--surface-soft); }
.story__grid { display: grid; gap: var(--space-md); counter-reset: story; }
.story__card { position: relative; padding: 1.75rem 1.6rem; background: var(--color-paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.story__card::before { counter-increment: story; content: counter(story); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-sm); border-radius: var(--radius-blob-b); background: var(--color-blue-pale); color: var(--color-blue-deep); font-family: var(--font-heading); font-weight: var(--weight-semibold); }
.story__card h3 { margin-bottom: var(--space-2xs); font-size: var(--text-xl); }
.story__card p { font-size: var(--text-sm); }
@media (min-width: 62em) { .story__grid { grid-template-columns: repeat(3, 1fr); } .story__card:nth-child(2) { margin-top: var(--space-md); } .story__card:nth-child(3) { margin-top: var(--space-lg); } }

.files { background: var(--surface-page); }
.files__grid { display: grid; gap: var(--space-lg); align-items: start; }
.files__readme { margin-top: var(--space-md); }
.files__list { display: grid; gap: var(--space-2xs); }
.file { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem var(--space-sm); padding: 0.8rem 1.1rem; background: var(--color-paper); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); }
.file__name { grid-column: 1; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-blue-deep); word-break: break-all; }
.file__size { grid-column: 2; grid-row: 1; font-size: var(--text-xs); color: var(--text-muted); align-self: center; }
.file__desc { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--text-body); }
.files__runlabel { margin: var(--space-md) 0 var(--space-2xs); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: lowercase; font-weight: var(--weight-semibold); color: var(--color-blue-deep); }
.code { margin: 0; padding: 1.1rem 1.3rem; overflow-x: auto; background: var(--color-navy); color: var(--color-navy-text); border-radius: var(--radius-md); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--text-sm); line-height: 1.7; }
@media (min-width: 62em) { .files__grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-xl); } }
.ba__col { min-width: 0; }
.project__badge { padding: 0.2rem 0.75rem; font-size: 0.72rem; line-height: 1.4; }

.mail-alt { margin-top: var(--space-sm); font-size: var(--text-sm); }
.mail-alt__addr { word-break: break-all; text-transform: none; user-select: all; }
.mail-copy { margin-left: var(--space-2xs); padding: 0.25rem 0.8rem; border: 1.5px solid var(--line-accent); border-radius: var(--radius-pill); background: transparent; color: var(--color-blue-deep); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer; }
.mail-copy:hover { background: var(--color-blue-pale); }
.mail-alt__q { display: block; color: var(--text-muted); margin-bottom: var(--space-3xs); }
.mail-alt__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.mail-alt__row strong { color: var(--text-heading); }
.mail-alt__row .mail-copy { margin-left: 0; }

/* ---------- blog ---------- */
.posts { background: var(--surface-soft); }
.posts__grid { display: grid; gap: var(--space-md); }
@media (min-width: 40em) { .posts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .posts__grid { grid-template-columns: repeat(3, 1fr); } }
.post { display: flex; }
.post__link { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--color-paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); text-decoration: none; color: inherit; transition: transform .25s var(--ease-soft), box-shadow .25s var(--ease-soft); }
.post__link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.post__link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.post__link h3 { font-size: var(--text-lg); text-transform: none; }
.post__link p { margin: 0; font-size: var(--text-sm); }
.post__meta { color: var(--text-muted); text-transform: none; }
.post__badge { background: var(--color-ochre); color: var(--color-navy); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.post .svc__more { margin-top: auto; padding-top: var(--space-2xs); }
.post--empty { padding: var(--space-lg); }
/* single post */
html[data-lang="de"] [data-lang-block="en"], html:not([data-lang="de"]) [data-lang-block="de"] { display: none; }
.post-page { background: var(--surface-page); }
.post-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; color: var(--text-muted); font-size: var(--text-sm); text-transform: none; }
.post-hero h1 { text-transform: none; }
.post__body { max-width: 44rem; margin-inline: auto; display: grid; gap: var(--space-sm); }
.post__body h2 { font-size: var(--text-xl); margin-top: var(--space-md); text-transform: none; }
.post__body p, .post__body li { font-size: var(--text-base); line-height: 1.7; text-transform: none; }
.post__body ol, .post__body ul { padding-left: 1.4rem; display: grid; gap: var(--space-2xs); list-style: revert; }
.post__body code { padding: 0.1rem 0.4rem; border-radius: 0.4rem; background: var(--color-blue-pale); font-size: 0.92em; }
.post__body pre { margin: 0; padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-navy); color: var(--color-cream); overflow-x: auto; font-size: var(--text-sm); }
.post__body pre code { background: none; padding: 0; color: inherit; }
.post__note { padding: var(--space-sm) var(--space-md); border-left: 4px solid var(--color-ochre); background: var(--color-paper); border-radius: var(--radius-sm); }
.post__back { margin-top: var(--space-md); }
.post .svc__more { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: var(--weight-semibold); color: var(--color-blue-deep); font-size: var(--text-sm); text-transform: lowercase; }
.post .svc__more img { width: 1rem; height: 1rem; transition: transform .2s; }
.post__link:hover .svc__more img { transform: translateX(4px); }