/* Judith Biedenkapp · uxexpert.de
   Editorial layout ("Feldnotizen"): masthead, portrait-led hero with pull-quote,
   alternating case-study spreads, colophon-style skills index. Built on the
   real design tokens in css/tokens/ (see tokens/colors.css etc. for values). */

/* ---------- Layout primitives ---------- */
.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-12);
}
@media (max-width: 640px) { .wrap { padding-inline: var(--space-5); } }

section { padding-block: var(--space-20); }
@media (max-width: 640px) { section { padding-block: var(--space-12); } }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-900); color: var(--paper);
  padding: var(--space-3) var(--space-5);
  z-index: 100; border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus { left: 0; }

.kicker {
  font: var(--type-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--mint-700);
}

/* ---------- Header / masthead ---------- */
.site-header {
  border-bottom: var(--border-width-strong) solid var(--ink-900);
  padding-block: var(--space-4);
}
.site-header .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap; position: relative;
}
.wordmark {
  font: var(--weight-bold) var(--text-l) / 1 var(--font-core);
  letter-spacing: 0.01em; color: var(--ink-900); text-decoration: none;
}

.main-nav { display: flex; align-items: center; gap: var(--space-6); }
.main-nav ul { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.main-nav a {
  font: var(--weight-medium) var(--text-s) / 1 var(--font-core);
  text-decoration: none; color: var(--text-body);
}
.main-nav a:hover, .main-nav a:focus-visible { color: var(--mint-700); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.lang-toggle {
  display: inline-flex; border: 1.5px solid var(--ink-900);
  border-radius: var(--radius-pill); overflow: hidden; flex-shrink: 0;
}
.lang-toggle button {
  font: var(--weight-bold) var(--text-xs) / 1 var(--font-meta); letter-spacing: 0.08em;
  border: 0; background: transparent; color: var(--ink-900);
  padding: var(--space-2) var(--space-4); cursor: pointer; transition: var(--transition-control);
}
.lang-toggle button[aria-pressed="true"] { background: var(--ink-900); color: var(--paper); }
.lang-toggle button:hover:not([aria-pressed="true"]) { background: var(--neutral-100); }

.nav-toggle {
  display: none; flex-shrink: 0; border: 1px solid var(--border-hairline); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink-900); padding: var(--space-2) var(--space-3); cursor: pointer;
}
@media (max-width: 860px) {
  .main-nav ul { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header.nav-open .main-nav ul {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: var(--rule-page); padding: var(--space-4) var(--space-5); gap: var(--space-3);
    margin-top: var(--space-3);
  }
}
@media (max-width: 480px) {
  .wordmark { font-size: var(--text-m); }
  .lang-toggle button { padding: var(--space-1) var(--space-2); }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 88% 10%, var(--wash-blush-soft) 0%, transparent 65%);
  pointer-events: none;
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-10); align-items: end; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }
/* the stats sit in a second .wrap inside .hero, so they must opt out of the
   two-column hero grid and span the full measure instead */
.hero .wrap.wrap-stats { display: block; }

.hero h1 {
  font-size: clamp(38px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
}
.hero h1 em {
  display: block; font-style: italic; font-weight: var(--weight-regular);
  font-size: 0.62em; letter-spacing: 0; color: var(--mint-700); margin-top: var(--space-1);
}
.hero .pull { margin-top: var(--space-8); max-width: 640px; }
.hero .pull p {
  font: italic var(--weight-regular) 24px/1.4 var(--font-core);
  color: var(--ink-900); letter-spacing: -0.005em;
}
@media (max-width: 640px) { .hero .pull p { font-size: 19px; } }

.hero-actions { margin-top: var(--space-8); display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hero-portrait img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-s);
}

.stat-strip {
  margin-top: var(--space-16); display: flex; gap: var(--space-12); flex-wrap: wrap;
  border-top: var(--rule-page); padding-top: var(--space-6);
}
.stat-strip strong { display: block; font: var(--weight-bold) 26px/1 var(--font-core); color: var(--ink-900); }
.stat-strip span { font: var(--type-meta); }
/* four items stack into a tall single column on phones, so switch to a 2x2 grid */
@media (max-width: 900px) { .stat-strip { gap: var(--space-8); } }
@media (max-width: 640px) {
  .stat-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border-radius: var(--radius-pill); padding: var(--space-4) var(--space-6);
  font: var(--weight-bold) var(--text-s) / 1 var(--font-meta); letter-spacing: 0.04em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: var(--transition-control), transform var(--duration-fast) var(--ease-out);
}
.btn:active { transform: translateY(var(--press-offset)); }
.btn-primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--mint-700); color: var(--paper); }
.btn-secondary { background: var(--action-secondary-bg); color: var(--action-secondary-fg); border-color: var(--border-strong); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--ink-900); color: var(--paper); }
.btn-accent { background: var(--action-accent-bg); color: var(--action-accent-fg); border-radius: var(--radius-s); }
.btn-accent:hover, .btn-accent:focus-visible { background: var(--action-accent-bg-hover); }
.btn:focus-visible { box-shadow: var(--shadow-focus); }

/* ---------- Section headings ---------- */
.section-head { max-width: 68ch; margin-bottom: var(--space-10); }
.section-head h2 { font-size: clamp(28px, 3.4vw, 44px); margin-top: var(--space-3); letter-spacing: var(--tracking-display); }
.section-head p { margin-top: var(--space-4); font-size: var(--text-l); color: var(--text-body); }

/* ---------- About ---------- */
.about-index { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-10); align-items: start; }
@media (max-width: 780px) { .about-index { grid-template-columns: 1fr; } }
.about-cols { margin-top: var(--space-8); columns: 2; column-gap: var(--space-10); }
@media (max-width: 780px) { .about-cols { columns: 1; } }
.about-cols p { break-inside: avoid; margin: 0 0 var(--space-5); font-size: var(--text-m); line-height: var(--leading-loose); }
.pill-row { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); }

.minor-head {
  font: var(--type-label); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  font-size: var(--text-s); color: var(--text-muted);
  margin: var(--space-8) 0 var(--space-4); padding-bottom: var(--space-2);
  border-bottom: var(--rule-page);
}

/* ---------- Approach ---------- */
.approach-grid { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-10); align-items: start; }
@media (max-width: 780px) { .approach-grid { grid-template-columns: 1fr; } }
.approach-grid > div { grid-column: 2; }
@media (max-width: 780px) { .approach-grid > div { grid-column: 1; } }
.approach-grid h2, .approach-grid h3 { font-size: clamp(26px, 3vw, 38px); letter-spacing: var(--tracking-display); }
.approach-grid p { margin-top: var(--space-4); font-size: var(--text-m); line-height: var(--leading-loose); max-width: 68ch; }
.approach-grid .about-cols p { margin-top: 0; }

.statement {
  margin: var(--space-12) 0; padding: var(--space-8) 0;
  border-top: var(--rule-page); border-bottom: var(--rule-page);
}
.statement p {
  font: italic var(--weight-regular) clamp(22px, 3vw, 34px) / 1.3 var(--font-core);
  color: var(--mint-700); letter-spacing: -0.005em; max-width: 24ch;
}

/* ---------- Services ---------- */
.service-list {
  list-style: none; margin: 0; padding: 0;
  counter-reset: svc;
  border-top: var(--rule-page);
}
.service-list li {
  counter-increment: svc;
  display: flex; align-items: baseline; gap: var(--space-5);
  padding-block: var(--space-5); border-bottom: var(--rule-page);
  font: var(--weight-medium) var(--text-l) / 1.35 var(--font-core); color: var(--ink-900);
}
.service-list li::before {
  content: counter(svc, decimal-leading-zero);
  font: var(--weight-bold) var(--text-xs) / 1 var(--font-meta);
  letter-spacing: 0.06em; color: var(--mint-700); flex-shrink: 0; min-width: 2.2em;
}
@media (max-width: 640px) {
  .service-list li { font-size: var(--text-m); gap: var(--space-4); }
}

.tag {
  display: inline-flex; align-items: center; border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4); font: var(--weight-medium) var(--text-s) / 1 var(--font-core);
  background: var(--wash-blush-soft); color: var(--ink-900); white-space: nowrap;
}
.tag.tag-neutral { background: var(--neutral-100); color: var(--text-body); font: var(--type-meta); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); }

/* ---------- Case-study spreads ---------- */
.spread {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center;
  padding-block: var(--space-12); border-top: var(--rule-page);
}
.spread:last-child { border-bottom: var(--rule-page); }
@media (max-width: 860px) { .spread { grid-template-columns: 1fr; gap: var(--space-5); } }
.spread:nth-of-type(even) .spread-art { order: 2; }
@media (max-width: 860px) { .spread:nth-of-type(even) .spread-art { order: 0; } }

.spread-n { font: var(--weight-bold) var(--text-s) / 1 var(--font-core); color: var(--mint-700); }
.spread h3 { font-size: var(--text-xl); margin-top: var(--space-3); letter-spacing: var(--tracking-display); }
.spread p.desc { margin-top: var(--space-4); font-size: var(--text-m); line-height: var(--leading-normal); max-width: 50ch; color: var(--text-body); }
.spread-tags { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }

.spread-art { border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-plate); border: var(--border-width-hairline) solid var(--border-hairline); }
.spread-art svg { display: block; width: 100%; height: auto; }

/* ---------- Skills colophon ---------- */
.colophon { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-8); }
@media (max-width: 900px) { .colophon { grid-template-columns: repeat(2, 1fr); } }
.colophon h3 {
  font: var(--type-label); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--mint-700); font-size: var(--text-s); margin: 0 0 var(--space-4);
}
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { font-size: var(--text-s); padding-block: var(--space-2); border-top: var(--rule-page); color: var(--text-body); }
.colophon li:first-child { border-top: 0; }

/* ---------- Portfolio gate / contact "subscribe" boxes ---------- */
.subscribe-box {
  background: var(--wash-blush-soft); border-radius: var(--radius-m); padding: var(--space-10);
}
@media (max-width: 640px) { .subscribe-box { padding: var(--space-6); } }
.subscribe-box.is-outline { background: transparent; border: var(--border-width-hairline) solid var(--border-hairline); }
.subscribe-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }
@media (max-width: 860px) { .subscribe-inner { grid-template-columns: 1fr; } }

.gate-card { max-width: 100%; }
.gate-form { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.gate-form .field { flex: 1 1 220px; }
/* the field is a label-over-input stack, so the button must align to its
   bottom edge to sit on the same line as the input, not the label */
.gate-form .btn { align-self: flex-end; }
.gate-status { margin-top: var(--space-4); font: var(--type-meta); }
.gate-status[data-state="error"] { color: var(--status-critical); }
.gate-status[data-state="success"] { color: var(--status-positive); }
.gate-download { margin-top: var(--space-6); display: none; }
.gate-download.is-visible { display: block; }
.gate-hint { margin-top: var(--space-5); font: var(--type-meta); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.field input, .field textarea {
  font: var(--weight-regular) var(--text-m) / 1.4 var(--font-core);
  border: 1px solid var(--border-field); border-radius: var(--radius-s);
  padding: var(--inset-field); background: var(--paper); color: var(--text-body);
  transition: var(--transition-control);
}
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.field textarea { min-height: 130px; resize: vertical; }

.contact-form { display: grid; gap: var(--space-5); }
.form-msg { font: var(--type-meta); margin-top: var(--space-2); min-height: 1.4em; }
.form-msg[data-state="error"] { color: var(--status-critical); }
.form-msg[data-state="success"] { color: var(--status-positive); }
.contact-side p { margin-top: var(--space-2); font-size: var(--text-m); }

/* ---------- Footer ---------- */
.site-footer { border-top: var(--border-width-strong) solid var(--ink-900); padding-block: var(--space-8); }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.footer-links { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.footer-links a { font: var(--type-meta); }
.copyright { font: var(--type-meta); }

/* ---------- Legal pages ---------- */
.legal-page main { padding-block: var(--space-16); }
.legal-content { max-width: var(--measure-doc); }
.legal-content .kicker { display: block; margin-bottom: var(--space-4); }
.legal-content h1 {
  font-size: clamp(30px, 4vw, 52px); line-height: 1; letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-10); padding-bottom: var(--space-6);
  border-bottom: var(--border-width-strong) solid var(--ink-900);
}
.legal-content h2 {
  font-size: var(--text-xl); margin-top: 0; margin-bottom: var(--space-4);
  padding-top: var(--space-8); border-top: var(--rule-page);
}
.legal-content h2:first-of-type { padding-top: 0; border-top: 0; }
.legal-content p, .legal-content li { font: var(--type-body-doc); }
.legal-content p + p, .legal-content ul + p, .legal-content p + ul { margin-top: var(--space-4); }
.legal-content ul { padding-left: 1.2em; }
.legal-content li + li { margin-top: var(--space-2); }
.back-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-10); font: var(--weight-medium) var(--text-s) / 1 var(--font-core);
  color: var(--text-body); text-decoration: none;
}
.back-link:hover { color: var(--mint-700); }

.lang-note {
  background: var(--wash-blush-soft); border-radius: var(--radius-s);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-8);
  font: var(--type-meta); color: var(--text-body);
}
.lang-note:empty { display: none; }

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}