/* lorenzstoeckert.de. Werte aus dem Sortengold Design System (tokens), Name statt Wortmarke.
   Keine externen Schriften: Das Adobe-Kit der Marke ist auf sortengold.de lizenziert und
   wuerde Besucherdaten an Adobe senden. Deshalb greift die Fallbackkette des Systems. */
:root {
  --surface-card:   #ffffff;
  --surface-raised: #fbf8f1;
  --surface-sunken: #ede3cc;
  --text-primary:   #171310;
  --text-body:      #443b34;
  --text-secondary: #7a6f63;
  --text-eyebrow:   #8c2e1b;
  --border-subtle:  #cbc0b2;
  --border-strong:  #443b34;
  --action-primary: #f25428;
  --font-sans:    Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-raised); color: var(--text-body);
       font-family: var(--font-sans); font-size: 17px; line-height: 1.6; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
header.top { background: var(--surface-card); border-bottom: 2px solid var(--border-strong); }
header.top .wrap { display: flex; justify-content: space-between; align-items: center;
                   gap: 16px; padding-top: 22px; padding-bottom: 18px; flex-wrap: wrap; }
.wordmark { font-family: var(--font-display); font-size: 22px; letter-spacing: .12em;
            text-transform: uppercase; color: var(--text-primary); text-decoration: none; }
.top .sub { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
main { padding: 48px 0 56px; }
.eyebrow { font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
           color: var(--text-eyebrow); margin: 0 0 8px; }
h1 { font-size: 34px; line-height: 1.2; font-weight: 500; color: var(--text-primary); margin: 0 0 18px; }
h2 { font-size: 22px; font-weight: 500; color: var(--text-primary); margin: 44px 0 12px; }
.lead { font-size: 20px; color: var(--text-primary); margin: 0 0 28px; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-subtle);
        border: 1px solid var(--border-subtle); margin: 0 0 8px; }
.keys div { background: var(--surface-card); padding: 14px 16px; }
.keys span { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.keys b { font-size: 19px; font-weight: 500; color: var(--text-primary); }
ol.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
ol.steps li { counter-increment: s; background: var(--surface-card); border-left: 3px solid var(--action-primary);
              padding: 14px 18px; margin: 0 0 10px; }
ol.steps li strong { color: var(--text-primary); }
ol.steps li strong::before { content: counter(s) ". "; }
ol.steps .where { float: right; font-size: 13px; color: var(--text-secondary); margin-left: 12px; }
.panel { background: var(--surface-sunken); padding: 18px 22px; }
.panel ul { margin: 0; padding-left: 20px; }
ul li { margin-bottom: 6px; }
.cta { background: var(--surface-card); border: 1px solid var(--border-subtle); padding: 24px; margin-top: 44px; }
.cta h2 { margin-top: 0; }
a { color: var(--text-eyebrow); }
a.button { display: inline-block; background: var(--action-primary); color: #fff; text-decoration: none;
           padding: 12px 22px; font-weight: 500; letter-spacing: .02em; }
a.button:hover { background: var(--text-eyebrow); }
footer { border-top: 1px solid var(--border-subtle); padding: 24px 0 40px; font-size: 14px; color: var(--text-secondary); }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--text-secondary); }
.legal h2 { font-size: 19px; margin-top: 32px; }
.legal p, .legal li { font-size: 16px; }
@media (max-width: 600px) {
  body { font-size: 16px; }
  h1 { font-size: 27px; }
  .lead { font-size: 18px; }
  .keys { grid-template-columns: 1fr; }
  ol.steps .where { float: none; display: block; margin: 0 0 4px; }
}