/* Corvaly – Website. Gestaltung angelehnt an hermes-ajder.de (Creme, Serifenschrift, viel Ruhe),
   Marke von Corvaly (Wortmarke, Tinte, Koralle) wie in der App. Schriften selbst gehostet, immer heller Modus. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; src: url(/schriften/cormorant-300.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap; src: url(/schriften/cormorant-300-kursiv.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(/schriften/cormorant-500.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/schriften/jost.woff2) format("woff2"); }
/* Archivo nur für die Wortmarke „Corvaly“ (wie in der App) */
@font-face { font-family: "Archivo Variable"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/schriften/archivo.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --creme: #F4F1EC;
  --creme-tief: #E9E4DC;
  --papier: #FBFAF7;
  --linie: #D9D2C7;
  --text: #24262B;
  --text-leise: #5C5853;
  --tinte: #14233A;
  --tinte-tief: #0F1B2D;
  --auf-tinte: #F4F1EC;
  --auf-tinte-leise: #BFC6D1;
  --koralle: #E0614A;
  --koralle-text: #A8402B;
  --koralle-hell: #F49580;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --tipp-min: 48px;
  --breite: 1160px;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-marke: "Archivo Variable", "Archivo", "Arial", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--space-9); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--font-sans); font-weight: 350; font-size: 19px; line-height: 32px; letter-spacing: 0.01em; background: var(--creme); color: var(--text); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-serif); font-weight: 300; text-wrap: balance; font-variant-numeric: lining-nums; }
.eigenschaft .nr { font-variant-numeric: lining-nums; }
strong { font-weight: 500; }
a { color: inherit; text-decoration-color: var(--koralle); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--koralle-text); }
:focus-visible { outline: 2px solid var(--koralle); outline-offset: 3px; }

.huelle { max-width: var(--breite); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 720px) { .huelle { padding-inline: var(--space-7); } }

.sprung { position: absolute; left: var(--space-4); top: -100px; z-index: 20; background: var(--papier); padding: var(--space-3) var(--space-4); }
.sprung:focus { top: var(--space-4); }

/* Kleine Großbuchstaben-Zeile wie auf hermes-ajder.de */
.zeile { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-leise); }
.dunkel .zeile { color: var(--auf-tinte-leise); }

/* ---------- Wortmarke ---------- */
.wortmarke { display: inline-flex; align-items: center; gap: 0.32em; color: inherit; font-family: var(--font-marke); font-stretch: 112%; font-weight: 720; letter-spacing: -0.01em; line-height: 1; text-decoration: none; min-height: var(--tipp-min); }
.wortmarke svg { width: 1.15em; height: 1.15em; }
.marke-quadrat { fill: var(--koralle); }
.wortmarke:hover { color: inherit; }

/* ---------- Verweise und Knöpfe ---------- */
.pfeil { display: inline-flex; align-items: center; gap: var(--space-4); min-height: var(--tipp-min); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0.28em; text-transform: uppercase; text-decoration: none; color: var(--text); }
.pfeil::after { content: ""; width: 32px; height: 1px; background: currentColor; transition: width 200ms ease; }
.pfeil:hover { color: var(--koralle-text); }
.pfeil:hover::after { width: 48px; }
.dunkel .pfeil { color: var(--auf-tinte); }
.dunkel .pfeil:hover { color: var(--koralle-hell); }

.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tipp-min); padding: 0 var(--space-6); font-family: var(--font-sans); font-weight: 450; font-size: 14px; line-height: 20px; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; border: 1px solid currentColor; color: var(--text); background: transparent; transition: background-color 160ms ease, color 160ms ease; }
.knopf:hover { background: var(--text); color: var(--creme); }
.dunkel .knopf { color: var(--auf-tinte); }
.dunkel .knopf:hover { background: var(--auf-tinte); color: var(--tinte); }
.dunkel .knopf--voll { background: var(--auf-tinte); color: var(--tinte); border-color: var(--auf-tinte); }
.dunkel .knopf--voll:hover { background: transparent; color: var(--auf-tinte); }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--creme) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--linie) 60%, transparent); }
.kopf-innen { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-4); min-height: var(--space-8); }
.kopf .wortmarke { font-size: 24px; justify-self: start; }
.kopf-links, .kopf-rechts { display: flex; align-items: center; }
.kopf-links { display: none; }
.kopf-nav a { display: inline-flex; align-items: center; min-height: var(--tipp-min); padding: 0 var(--space-3); font-weight: 450; font-size: 13px; line-height: 20px; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; color: var(--text); }
.kopf-nav a:hover { color: var(--koralle-text); }
.kopf-nav .kopf-anmelden { border: 1px solid var(--text); padding: 0 var(--space-4); margin-left: var(--space-2); }
.kopf-nav .kopf-anmelden:hover { background: var(--text); color: var(--creme); }
.nur-breit { display: none !important; }
@media (min-width: 960px) {
  .kopf-innen { grid-template-columns: 1fr auto 1fr; }
  .kopf-links { display: flex; margin-left: calc(var(--space-3) * -1); }
  .kopf .wortmarke { justify-self: center; }
  .kopf-rechts { justify-content: flex-end; }
  .nur-breit { display: inline-flex !important; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--space-9); }
@media (min-width: 720px) { .abschnitt { padding-block: var(--space-10); } }
.dunkel { background: var(--tinte); color: var(--auf-tinte); }
.tief { background: var(--creme-tief); }
.titel { font-size: 36px; line-height: 44px; letter-spacing: 0.01em; }
@media (min-width: 720px) { .titel { font-size: 48px; line-height: 56px; } }
.lead { font-size: 21px; line-height: 36px; color: var(--text-leise); }
.dunkel .lead { color: var(--auf-tinte-leise); }
.kopfzeilen { display: grid; gap: var(--space-5); max-width: 760px; justify-items: start; }
.kopfzeilen--mitte { justify-items: center; text-align: center; margin-inline: auto; }

/* ---------- Start ---------- */
.held { background: var(--tinte); color: var(--auf-tinte); position: relative; overflow: hidden; }
.held::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(224,97,74,0.16), transparent 70%); pointer-events: none; }
.held-innen { position: relative; min-height: min(84vh, 800px); display: grid; align-content: center; justify-items: center; text-align: center; gap: var(--space-6); padding-block: var(--space-9); }
.held-marke { width: 56px; height: 56px; }
.held h1 { max-width: 900px; font-size: 48px; line-height: 52px; letter-spacing: 0.005em; }
@media (min-width: 720px) { .held h1 { font-size: 76px; line-height: 80px; } }
.held h1 em { font-style: italic; color: var(--koralle-hell); }
.held .lead { max-width: 640px; color: var(--auf-tinte-leise); }
.held-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }

.einleitung { display: grid; gap: var(--space-6); justify-items: center; text-align: center; max-width: 840px; margin-inline: auto; }
.einleitung .titel { font-size: 34px; line-height: 44px; }
@media (min-width: 720px) { .einleitung .titel { font-size: 46px; line-height: 56px; } }
.linie-kurz { width: 48px; height: 1px; background: var(--koralle); border: 0; margin: 0; }

/* Vier Eigenschaften, nummeriert */
.vier { display: grid; gap: var(--space-7); margin-top: var(--space-8); }
@media (min-width: 720px) { .vier { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-7); } }
@media (min-width: 1100px) { .vier { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }
.eigenschaft { display: grid; gap: var(--space-4); align-content: start; padding-top: var(--space-5); border-top: 1px solid var(--linie); }
.eigenschaft .nr { font-family: var(--font-serif); font-size: 32px; line-height: 36px; color: var(--koralle-text); }
.eigenschaft h3 { font-family: var(--font-sans); font-weight: 450; font-size: 15px; line-height: 24px; letter-spacing: 0.22em; text-transform: uppercase; }
.eigenschaft p { color: var(--text-leise); }

/* Ablauf */
.ablauf { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; }
.ablauf li { display: grid; gap: var(--space-3); padding-block: var(--space-6); border-top: 1px solid var(--linie); }
.ablauf li:last-child { border-bottom: 1px solid var(--linie); }
@media (min-width: 820px) { .ablauf li { grid-template-columns: 160px 1fr 1.5fr; gap: var(--space-6); align-items: baseline; } }
.ablauf .zeile { color: var(--koralle-text); }
.ablauf h3 { font-size: 36px; line-height: 44px; }
.ablauf p { color: var(--text-leise); }

/* Beispiel Crijonic */
.beispiel { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 960px) { .beispiel { grid-template-columns: 1fr 0.9fr; gap: var(--space-9); } }
.beispiel-text { display: grid; gap: var(--space-5); justify-items: start; }
.beispiel-liste { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; width: 100%; }
.beispiel-liste li { display: grid; grid-template-columns: 16px 1fr; gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--linie); }
.beispiel-liste li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--koralle); margin-top: 11px; }
.hinweis-klein { font-size: 17px; line-height: 28px; color: var(--text-leise); }

/* Typenschild aus der App, als Sinnbild für „Ihre eigene App“ */
.schild-buehne { display: grid; gap: var(--space-5); max-width: 440px; width: 100%; justify-self: center; }
.platte { position: relative; background: var(--tinte); color: #fff; border-radius: 6px; box-shadow: 0 1px 0 0 rgba(255,255,255,0.14) inset, 0 1px 2px rgba(15,27,45,0.18), 0 18px 40px -16px rgba(15,27,45,0.45); padding: var(--space-5) var(--space-6) var(--space-4); }
.platte::after { content: ""; position: absolute; inset: 3px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.16); pointer-events: none; }
.niete { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--koralle); box-shadow: 0 0 0 1px rgba(0,0,0,0.28) inset, 0 1px 0 rgba(255,255,255,0.35); }
.niete.ol { top: 10px; left: 10px; } .niete.or { top: 10px; right: 10px; } .niete.ul { bottom: 10px; left: 10px; } .niete.ur { bottom: 10px; right: 10px; }
.platte-zeile { display: flex; align-items: center; gap: var(--space-3); }
.platte-zeichen { flex: none; width: 44px; height: 44px; border-radius: 4px; display: grid; place-items: center; background: rgba(255,255,255,0.12); font-family: var(--font-marke); font-stretch: 125%; font-weight: 750; font-size: 15px; letter-spacing: 0.04em; }
.platte-name { font-family: var(--font-marke); font-stretch: 125%; font-weight: 750; font-size: 22px; line-height: 26px; letter-spacing: 0.04em; text-transform: uppercase; }
.platte-fuss { margin-top: var(--space-4); padding: var(--space-2) var(--space-2) 0; border-top: 1px solid rgba(255,255,255,0.22); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: 12px; line-height: 16px; font-weight: 450; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.platte-hersteller { display: inline-flex; align-items: center; gap: 6px; }
.platte-hersteller svg { width: 14px; height: 14px; }
.platte--hell { background: var(--papier); color: var(--text); box-shadow: 0 1px 2px rgba(15,27,45,0.08), 0 18px 40px -20px rgba(15,27,45,0.3); }
.platte--hell::after { border-color: var(--linie); }
.platte--hell .platte-zeichen { background: var(--creme-tief); }
.platte--hell .platte-fuss { border-top-color: var(--linie); }
.platte--koralle { background: #7A2E20; }
.schild-unter { text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 32px; color: var(--text-leise); }

/* Sicherheit */
.sicher { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: 0 var(--space-7); }
@media (min-width: 820px) { .sicher { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sicher { grid-template-columns: repeat(3, 1fr); } }
.sicher li { display: grid; gap: var(--space-2); align-content: start; padding-block: var(--space-5) var(--space-6); border-top: 1px solid rgba(244,241,236,0.2); }
.sicher h3 { font-size: 30px; line-height: 36px; }
.sicher p { color: var(--auf-tinte-leise); font-size: 18px; line-height: 30px; }

/* Gründer */
.gruender { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 960px) { .gruender { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-9); } }
.gruender-bild { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gruender-text { display: grid; gap: var(--space-5); justify-items: start; }

/* Zugang */
.zugang { display: grid; gap: var(--space-5); justify-items: center; text-align: center; max-width: 720px; margin-inline: auto; }

/* Kontakt */
.kontakt { display: grid; gap: var(--space-6); justify-items: center; text-align: center; }
.personen { display: grid; gap: var(--space-7); width: 100%; max-width: 760px; margin-top: var(--space-5); }
@media (min-width: 720px) { .personen { grid-template-columns: repeat(2, 1fr); } }
.person { display: grid; gap: var(--space-2); justify-items: center; }
.person img { width: 160px; height: 200px; object-fit: cover; object-position: 50% 25%; margin-bottom: var(--space-3); }
.person strong { font-family: var(--font-serif); font-weight: 500; font-size: 28px; line-height: 36px; }
.person a { font-size: 17px; line-height: 28px; color: var(--auf-tinte-leise); min-height: var(--tipp-min); display: inline-flex; align-items: center; }
.person a:hover { color: var(--auf-tinte); }

/* ---------- Fuß ---------- */
.fuss { background: var(--tinte-tief); color: var(--auf-tinte-leise); padding-block: var(--space-7); font-size: 16px; line-height: 26px; }
.fuss-innen { display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.fuss .wortmarke { font-size: 20px; color: var(--auf-tinte); }
.fuss-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-2); }
.fuss-nav a { display: inline-flex; align-items: center; min-height: var(--tipp-min); padding: 0 var(--space-3); font-weight: 450; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; color: var(--auf-tinte); }
.fuss-nav a:hover { color: var(--koralle-hell); }

/* ---------- Rechtliches ---------- */
.recht { padding-block: var(--space-8) var(--space-9); display: grid; gap: var(--space-6); }
.recht > * { max-width: 760px; margin-inline: auto; width: 100%; }
.recht-kopf { display: grid; gap: var(--space-4); text-align: center; justify-items: center; margin-bottom: var(--space-4); }
.recht h1 { font-size: 48px; line-height: 56px; }
.recht-lead { color: var(--text-leise); }
.recht section { display: grid; gap: var(--space-3); }
.recht h2 { font-size: 32px; line-height: 40px; font-weight: 500; }
.recht ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.recht a { overflow-wrap: anywhere; }
.recht-liste { margin: 0; border-top: 1px solid var(--linie); }
.recht-liste > div { padding-block: var(--space-4); display: grid; gap: var(--space-1); border-bottom: 1px solid var(--linie); }
@media (min-width: 640px) { .recht-liste > div { grid-template-columns: 200px 1fr; gap: var(--space-4); } }
.recht-liste dt { font-weight: 450; font-size: 14px; line-height: 32px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-leise); }
.recht-liste dd { margin: 0; overflow-wrap: anywhere; }

.leer { min-height: 70vh; display: grid; align-content: center; justify-items: center; text-align: center; gap: var(--space-5); padding-block: var(--space-9); }
.leer p { color: var(--text-leise); }