/* Lorca & Pauly – Webseite. Werte aus tokens.css, Regeln aus ci-ruleset.md. */

/* Schriften, selbst gehostet (OFL, Quelle: @fontsource 5.3.0) */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/barlow-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/barlow-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/barlow-condensed-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Grundlage */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--lp-space-7); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-fg);
  font-family: var(--lp-font-text);
  font-weight: var(--lp-weight-text);
  font-size: var(--lp-size-text);
  line-height: var(--lp-leading-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
strong, b { font-weight: var(--lp-weight-strong); }

a { color: inherit; text-decoration-thickness: var(--lp-rule-width); text-underline-offset: 0.2em; text-decoration-color: var(--lp-accent); }
a:hover { text-decoration-color: var(--lp-fg); }
:focus-visible { outline: var(--lp-rule-width) solid var(--lp-accent); outline-offset: var(--lp-space-1); }

.skip { position: absolute; left: var(--lp-space-4); top: -100px; padding: var(--lp-space-2) var(--lp-space-3); background: var(--lp-fg); color: var(--lp-bg); z-index: 10; }
.skip:focus { top: var(--lp-space-4); }

.wrap {
  max-width: calc(var(--lp-content-max) + 2 * var(--lp-gutter));
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}
:root { --lp-gutter: clamp(var(--lp-gutter-min), 5vw, var(--lp-space-6)); }

/* Typografie */
.display, h1, h2, h3 {
  font-family: var(--lp-font-display);
  font-weight: var(--lp-weight-display);
  letter-spacing: var(--lp-tracking-display);
  line-height: var(--lp-leading-display);
  text-transform: uppercase;
}
h2 { font-size: var(--lp-size-h2); }
h3 { font-size: var(--lp-size-h3); }
.label {
  font-family: var(--lp-font-text);
  font-weight: var(--lp-weight-strong);
  font-size: var(--lp-size-label);
  letter-spacing: var(--lp-tracking-label);
  text-transform: uppercase;
  line-height: 1.3;
}
.muted { color: var(--lp-muted); }
.accent { color: var(--lp-accent); }
.measure { max-width: var(--lp-text-max); }

/* Logo */
.logo {
  display: inline-flex;
  align-items: stretch;
  gap: 0.2em;
  font-family: var(--lp-font-display);
  font-weight: var(--lp-weight-display);
  text-transform: uppercase;
  letter-spacing: var(--lp-tracking-display);
  text-decoration: none;
  color: var(--lp-fg);
}
.logo::before { content: ""; flex: 0 0 auto; width: 0.1em; background: var(--lp-accent); }
.logo--stacked { font-size: var(--lp-size-h1); line-height: var(--lp-leading-logo); padding: 0.02em 0; }
.logo--stacked span { display: block; }
.logo--line { font-size: 1.25rem; line-height: 1; gap: 0.35em; padding-block: var(--lp-space-1); }
.logo--line::before { width: 0.22em; }

/* Kopfzeile */
.site-head { border-bottom: var(--lp-rule-width) solid var(--lp-rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--lp-space-5); min-height: var(--lp-space-7); padding-block: var(--lp-space-3); }
.site-nav { display: flex; gap: var(--lp-space-5); }
.site-nav a { text-decoration: none; color: var(--lp-muted); }
.site-nav a:hover { color: var(--lp-fg); }
@media (max-width: 40rem) { .site-nav a:not(.keep) { display: none; } }

/* Abschnitte */
section { padding-block: var(--lp-space-7); border-top: var(--lp-rule-width) solid var(--lp-rule); }
section:first-of-type { border-top: 0; }
.head { display: grid; gap: var(--lp-space-3); margin-bottom: var(--lp-space-6); }
.head p:not(.label) { color: var(--lp-muted); max-width: var(--lp-text-max); }
.stack > * + * { margin-top: var(--lp-space-5); }

/* Start */
.hero { padding-block: var(--lp-space-7) var(--lp-space-7); }
.hero .logo--stacked { margin-bottom: var(--lp-space-5); }
.hero .tagline { color: var(--lp-muted); margin-bottom: var(--lp-space-7); }
.hero .claim { font-size: var(--lp-size-h2); max-width: 18ch; margin-bottom: var(--lp-space-5); }
.hero .lead { max-width: var(--lp-text-max); font-size: 1.25rem; margin-bottom: var(--lp-space-6); }
.hero .people { margin-top: var(--lp-space-6); color: var(--lp-muted); }

/* Schaltflächen */
.actions { display: flex; flex-wrap: wrap; gap: var(--lp-space-3); }
.btn {
  display: inline-block;
  padding: var(--lp-space-3) var(--lp-space-5);
  font-family: var(--lp-font-display);
  font-weight: var(--lp-weight-display);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: var(--lp-tracking-display);
  text-transform: uppercase;
  text-decoration: none;
  border: var(--lp-rule-width) solid var(--lp-fg);
  border-radius: var(--lp-radius);
}
.btn--primary { background: var(--lp-fg); color: var(--lp-bg); }
.btn--primary:hover { background: var(--lp-bg); color: var(--lp-fg); }
.btn--ghost { color: var(--lp-fg); border-color: var(--lp-rule); }
.btn--ghost:hover { border-color: var(--lp-fg); }

/* Zeilenliste */
.rows { border-top: var(--lp-rule-width) solid var(--lp-rule); }
.rows > li, .rows > div { padding-block: var(--lp-space-4); border-bottom: var(--lp-rule-width) solid var(--lp-rule); }
.rows q { quotes: "„" "“"; font-size: 1.25rem; }
.rows .link { display: inline-block; margin-top: var(--lp-space-2); color: var(--lp-muted); }
.rows .link:hover { color: var(--lp-fg); }
.rows h3 { margin-bottom: var(--lp-space-2); }
.after { margin-top: var(--lp-space-5); color: var(--lp-muted); max-width: var(--lp-text-max); }

/* Leistungen */
.offer { display: grid; gap: var(--lp-space-4); padding-block: var(--lp-space-6); border-top: var(--lp-rule-width) solid var(--lp-rule); }
.offer:last-child { border-bottom: var(--lp-rule-width) solid var(--lp-rule); }
.offer h3 { font-size: clamp(1.75rem, 4.5vw, 2.25rem); }
.offer > p { max-width: var(--lp-text-max); }
.facts { display: grid; gap: var(--lp-space-3); margin-top: var(--lp-space-2); }
.facts div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--lp-space-4); }
.facts dt { color: var(--lp-muted); padding-top: 0.2em; }
@media (max-width: 36rem) { .facts div { grid-template-columns: 1fr; gap: var(--lp-space-1); } }

/* Vorgehen */
.steps { counter-reset: step; border-top: var(--lp-rule-width) solid var(--lp-rule); }
.step { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--lp-space-4); padding-block: var(--lp-space-5); border-bottom: var(--lp-rule-width) solid var(--lp-rule); }
.step .num { font-family: var(--lp-font-display); font-weight: var(--lp-weight-display); font-size: 3.5rem; line-height: 0.88; }
.step .label { color: var(--lp-muted); margin-bottom: var(--lp-space-2); }
.step h3 { margin-bottom: var(--lp-space-2); }
.step p + p { margin-top: var(--lp-space-3); }
@media (max-width: 30rem) { .step { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--lp-space-3); } .step .num { font-size: 2.5rem; } }

/* Personen */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--lp-space-6); margin-bottom: var(--lp-space-6); }
.card { display: grid; grid-template-columns: var(--lp-portrait) minmax(0, 1fr); gap: var(--lp-space-5); align-items: start; padding: var(--lp-space-6); background: var(--lp-panel); }
.card img { width: var(--lp-portrait); height: var(--lp-portrait); object-fit: cover; }
.card h3 { font-size: 2rem; }
.card .label { color: var(--lp-muted); margin: var(--lp-space-2) 0 var(--lp-space-3); }
@media (max-width: 26rem) { .card { grid-template-columns: 1fr; padding: var(--lp-space-5); } }

/* Fragen */
.faq { border-top: var(--lp-rule-width) solid var(--lp-rule); }
.faq details { border-bottom: var(--lp-rule-width) solid var(--lp-rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--lp-space-4);
  padding-block: var(--lp-space-4); cursor: pointer; list-style: none; font-weight: var(--lp-weight-strong);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--lp-font-display); font-weight: var(--lp-weight-display); font-size: 1.75rem; line-height: 0.8; color: var(--lp-muted); }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: var(--lp-space-5); max-width: var(--lp-text-max); color: var(--lp-muted); }

/* Kontakt */
.contact .lead { font-size: 1.25rem; max-width: var(--lp-text-max); margin-bottom: var(--lp-space-6); }

/* Fußzeile */
.site-foot { border-top: var(--lp-rule-width) solid var(--lp-fg); padding-block: var(--lp-space-6) var(--lp-space-7); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--lp-space-5); align-items: center; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--lp-space-5); }
.site-foot nav a { color: var(--lp-muted); text-decoration: none; }
.site-foot nav a:hover { color: var(--lp-fg); }
.site-foot small { color: var(--lp-muted); font-size: var(--lp-size-label); width: 100%; }

/* Rechtsseiten */
.legal { padding-block: var(--lp-space-7); }
.legal h1 { font-size: var(--lp-size-h2); margin-bottom: var(--lp-space-6); }
.legal h2 { font-size: var(--lp-size-h3); margin: var(--lp-space-6) 0 var(--lp-space-3); }
.legal p, .legal ul, .legal dl { max-width: var(--lp-text-max); }
.legal p + p { margin-top: var(--lp-space-3); }
.legal ul { list-style: none; border-top: var(--lp-rule-width) solid var(--lp-rule); margin-top: var(--lp-space-3); }
.legal ul li { padding-block: var(--lp-space-2); border-bottom: var(--lp-rule-width) solid var(--lp-rule); }
.legal dl { border-top: var(--lp-rule-width) solid var(--lp-rule); }
.legal dl div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--lp-space-4); padding-block: var(--lp-space-3); border-bottom: var(--lp-rule-width) solid var(--lp-rule); }
.legal dt { color: var(--lp-muted); }
@media (max-width: 36rem) { .legal dl div { grid-template-columns: 1fr; gap: var(--lp-space-1); } }
.back { display: inline-block; margin-bottom: var(--lp-space-6); color: var(--lp-muted); }

/* Platzhalter – vor Veröffentlichung entfernen (Prüfliste ci-ruleset.md, Abschnitt 10) */
.todo { outline: var(--lp-rule-width) dashed var(--lp-accent); outline-offset: 2px; }