/* Eintragungsseite Ratgeber */
.oi-hero { padding: clamp(120px, 13vw, 168px) 0 clamp(56px, 7vw, 96px); position: relative; overflow: hidden; }
.oi-hero::before { content: ""; position: absolute; right: -15%; top: -25%; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(255, 34, 97, .16), rgba(255, 34, 97, 0)); pointer-events: none; }
.oi-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.oi-hero h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: .98; letter-spacing: -.045em; font-weight: 600; margin: 0; }
.oi-hero h1 em { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--accent); font-size: .9em; margin-top: .06em; }
.oi-hero .lead { margin-top: 22px; }
.oi-get { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.oi-get li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.oi-get li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.oi-get b { color: var(--ink); }

.oi-form { padding: clamp(22px, 3vw, 30px); display: grid; gap: 14px; scroll-margin-top: 90px; }
.oi-form__head { display: flex; gap: 16px; align-items: center; margin-bottom: 6px; }
.oi-form__head h2 { font-size: 21px; letter-spacing: -.02em; margin: 0 0 4px; }
.oi-form__head p { font-size: 14px; color: var(--muted); }
.oi-cover { flex: none; width: 66px; height: 88px; border-radius: 8px; background: var(--d-bg); color: #fff; padding: 9px 8px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.oi-cover::before { content: ""; position: absolute; right: -40%; top: -40%; width: 120%; height: 90%; background: radial-gradient(closest-side, rgba(255, 34, 97, .6), rgba(255, 34, 97, 0)); }
.oi-cover b { position: relative; font-size: 10px; line-height: 1.1; letter-spacing: -.02em; }
.oi-cover i { position: relative; font: italic 9px var(--serif); color: var(--accent-2); }
.oi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oi-f { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.oi-f small { font-weight: 400; color: var(--muted-2); }
.oi-f input, .oi-f select { font: 400 16px var(--sans); color: var(--ink); width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); transition: border-color .2s, background .2s; -webkit-appearance: none; appearance: none; }
.oi-f select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%236B675F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.oi-f input:focus, .oi-f select:focus { outline: none; border-color: var(--ink); background: #fff; }
.oi-f.bad input { border-color: var(--accent); background: rgba(255, 34, 97, .05); }
.oi-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.oi-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--muted); cursor: pointer; margin-top: 2px; }
.oi-consent input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid var(--line-2); background: #fff; cursor: pointer; }
.oi-consent input:checked { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; border-color: var(--accent); }
.oi-consent a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.oi-submit { width: 100%; justify-content: center; margin-top: 4px; }
.oi-submit.is-busy { opacity: .6; pointer-events: none; }
.oi-msg { font-size: 14px; line-height: 1.45; padding: 12px 14px; border-radius: 12px; background: rgba(255, 34, 97, .08); color: var(--ink); }
.oi-msg a { color: var(--accent); font-weight: 600; }
.oi-fine { font-size: 12.5px; color: var(--muted-2); text-align: center; }

.oi-teaser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.oi-teaser .card { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.oi-n { font: 500 11px var(--mono); color: var(--accent); letter-spacing: .1em; }
.oi-teaser b { font-size: 32px; letter-spacing: -.04em; line-height: 1; color: var(--accent); margin: 6px 0 4px; }
.oi-teaser h3 { font-size: 17px; letter-spacing: -.015em; margin: 0; }
.oi-teaser p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.oi-author { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 36px); align-items: start; max-width: 900px; }
.oi-author .lead { margin-top: 14px; }
.oi-author img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }

@media (max-width: 960px) {
  .oi-hero__grid { grid-template-columns: 1fr; }
  .oi-teaser { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .oi-hero { padding-top: 108px; }
  .oi-row { grid-template-columns: 1fr; }
  .oi-teaser { grid-template-columns: 1fr; }
  .oi-author { grid-template-columns: 1fr; }
  .oi-author img { width: 72px; height: 72px; }
}