/* Persönliche Vorstellung, klare Zielgruppe und Mika Office. */
.personal-card { margin: 0; padding: 32px; background: var(--white); border: 1px solid var(--line); border-radius: 26px; text-align: center; }
.personal-photo { width: 184px; height: 240px; margin: 0 auto 24px; object-fit: cover; object-position: center 43%; border-radius: 18px; }
.personal-card figcaption strong, .personal-card figcaption span { display: block; }
.personal-card figcaption strong { font-size: 23px; }
.personal-card figcaption span { color: var(--ink-soft); font-size: 14px; }
.personal-card a { display: inline-block; margin-top: 20px; color: var(--blue); font-weight: 700; }
.about-grid { grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 75px; }
.about-copy h2 { font-size: clamp(2.2rem, 3.5vw, 3.5rem); }
.office-teaser { padding: 82px 0; background: #e9eee8; border-block: 1px solid #d7e0d5; }
.office-teaser-grid { display: grid; grid-template-columns: 1.3fr .8fr; gap: 70px; align-items: center; }
.office-teaser h2 { font-size: clamp(2rem, 3.7vw, 3.3rem); margin-bottom: 18px; }
.office-teaser p { color: var(--ink-soft); }
.office-note { padding: 26px; background: var(--white); border-radius: 20px; border: 1px solid #d1dccf; }
.office-note strong { display: block; font-size: 20px; margin-bottom: 10px; }
.office-note ul { padding-left: 20px; color: var(--ink-soft); }
.office-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #dce8db; color: #244e31; font-size: 12px; font-weight: 800; letter-spacing: .025em; }
.office-main { padding: 140px 0 80px; min-height: 80vh; }
.office-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 70px; align-items: start; }
.office-main h1 { margin: 18px 0 22px; font-size: clamp(2.6rem, 4.9vw, 4.3rem); }
.office-main h2 { font-size: 26px; margin: 0 0 16px; }
.office-main .office-lead { color: var(--ink-soft); font-size: 19px; }
.office-form-card { padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--white); }
.office-form { display: grid; gap: 20px; }
.office-form label { display: grid; gap: 7px; font-weight: 700; }
.office-form input[type="email"] { width: 100%; min-height: 52px; padding: 12px; border: 1px solid #788597; border-radius: 10px; font: inherit; background: white; }
.office-form .office-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; }
.office-check input { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 3px; }
.office-form .button { cursor: pointer; border: 0; }
.office-form a, .office-small a { text-underline-offset: 3px; }
.office-small { font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.office-status { margin-block: 20px; padding: 18px; border: 1px solid #c4d5e5; border-radius: 12px; background: #edf4fb; }
.office-steps { display: grid; gap: 16px; padding-left: 22px; color: var(--ink-soft); }
.office-steps strong { color: var(--ink); }
.office-details { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
.office-details p, .office-details li { color: var(--ink-soft); }
.office-result { max-width: 750px; }
.office-result h1 { font-size: clamp(2rem, 5vw, 3.4rem); overflow-wrap: anywhere; }
.office-result code { display: block; overflow-wrap: anywhere; font-size: 12px; padding: 16px; background: var(--white); }
.office-result .button { margin-top: 18px; }
.office-nav { display: flex; gap: 22px; font-size: 14px; align-items: center; }
.office-nav a { text-decoration: none; font-weight: 700; }
@media (max-width: 1040px) {
  .about-grid, .office-layout { gap: 38px; }
}
@media (max-width: 820px) {
  .about-grid, .office-layout, .office-teaser-grid { grid-template-columns: 1fr; }
  .personal-card { width: min(100%, 330px); justify-self: center; }
  .office-teaser-grid { gap: 30px; }
}
@media (max-width: 560px) {
  .office-main { padding-top: 112px; }
  .office-form-card { padding: 24px 20px; }
  .office-nav a:first-child { display: none; }
  .office-nav { gap: 12px; }
  .audience-list { flex-wrap: wrap; gap: 9px 15px; padding-block: 20px; }
  .audience-list > *:nth-child(n) { display: inline; }
  .audience-list > span[aria-hidden] { display: none; }
  .audience-list > span:first-child { flex-basis: 100%; }
}