/* IntCase — Marketing-Site.
   Bewusst ohne externe Ressourcen (keine Webfonts von Drittanbietern,
   kein Tracking, keine Cookies): die Seite lädt ausschließlich Dateien
   von intcase.de. Das ist keine Stil-, sondern eine Datenschutzentscheidung
   — sie macht ein Cookie-Banner und eine Google-Fonts-Einbindung
   (LG München I, 3 O 17493/20) von vornherein überflüssig. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Dunkle Markenfläche — dasselbe Grün wie in der App, nur bis fast
     ins Schwarz gezogen. Hält Landingpage und Produkt visuell zusammen. */
  --ink:        #12201C;
  --ink-2:      #1B2E28;
  --ink-line:   #2C433B;

  /* Akzent: identisch mit --color-accent der debtor-app. */
  --green:      #1F6F5C;
  --green-600:  #175747;
  --green-soft: #E4F2EE;

  --bg:         #FAFAF8;
  --surface:    #FFFFFF;
  --border:     #E4E1DA;
  --text:       #24211C;
  --muted:      #6B6659;

  --radius:     14px;
  --radius-sm:  10px;
  --maxw:       1120px;
  --shadow:     0 1px 2px rgba(18, 32, 28, .05), 0 8px 24px -12px rgba(18, 32, 28, .18);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: var(--green-600); }

/* text-wrap: balance verteilt die Zeilen gleichmäßig, statt die erste
   bis an den Rand zu füllen — ohne das steht die Hero-Überschrift mit
   25 px Rest da und kippt bei einer minimal breiteren Systemschrift in
   eine dritte Zeile. */
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 650; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.25rem + 3.3vw, 3.55rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.35rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(64px, 8vw, 108px) 0; }
.section--tint { background: var(--surface); border-block: 1px solid var(--border); }

.eyebrow {
  font-size: .8rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--green-600); margin: 0 0 .9em;
}
.section-head { max-width: 62ch; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head p { color: var(--muted); font-size: 1.06rem; margin-bottom: 0; }
.lead { font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); color: var(--muted); max-width: 60ch; }

/* ── Skip-Link ───────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--text); padding: 12px 18px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 13px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-600); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--muted); }
.btn--onink { background: transparent; color: #EAF3F0; border-color: var(--ink-line); }
.btn--onink:hover { border-color: #4A6A5F; background: rgba(255,255,255,.04); }
.btn--lg { padding: 15px 28px; font-size: 1.05rem; }

/* ── Kopfzeile ───────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 248, .88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; }
/* Wortbildmarke: Die Klammern erben die Textfarbe (dunkel auf hellem
   Grund, weiß auf dunklem), nur der Punkt und die Silbe „Case" tragen
   die Akzentfarbe. Dadurch gibt es genau ein Markup für beide Kontexte. */
.brand { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); font-weight: 680; letter-spacing: -.02em; font-size: 1.16rem; }
.brand svg { display: block; }
/* Wortmarke als EIN Flex-Item: sonst würden „Int" und „Case" zu zwei
   getrennten Items und bekämen den gap der .brand-Zeile als Lücke. */
.brand .wordmark { display: inline; }
.brand .dot { fill: var(--green); }
.brand .b { color: var(--green); }
.site-footer .brand .dot { fill: #7FC0AD; }
.site-footer .brand .b { color: #7FC0AD; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--muted); text-decoration: none; font-size: .96rem; font-weight: 550; padding: 8px 12px; border-radius: 8px; }
.nav a:hover { color: var(--text); background: rgba(31, 111, 92, .07); }
.nav .btn { margin-left: 10px; padding: 10px 18px; color: #fff; }
@media (max-width: 880px) {
  .nav a:not(.btn) { display: none; }
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(31, 111, 92, .30), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #F2F7F5;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(22px, 2.2vw, 28px);
  /* stretch statt start: Nur wenn beide Zellen auf Zeilenhöhe gezogen
     werden, kann der Claim-Block die Resthöhe aufnehmen und bündig mit
     der Karte abschließen. */
  align-items: stretch;
  /* Oben großzügig, unten knapp: Seit die Buttons ans Ende der linken
     Spalte gewandert sind, stand zwischen ihnen und der Vertrauensleiste
     eine unmotivierte Lücke von rund 130 px. */
  padding-top: clamp(34px, 4vw, 56px);
  padding-bottom: clamp(30px, 3vw, 40px);
}
/* Die Überschrift läuft über beide Spalten — nur so passt sie in zwei
   Zeilen. Dadurch starten Fließtext und Produktdarstellung darunter auf
   derselben Höhe, statt dass die Karte neben der Überschrift schwebt. */
.hero-head { grid-column: 1 / -1; margin-bottom: clamp(0px, 1.2vw, 16px); }

/* Fließtext und Produktkarte stehen in derselben Zeile und werden beide
   auf die Zeilenhöhe gestreckt — dadurch enden Claim-Block und weiße
   Karte exakt bündig. Notiz und Buttons liegen deshalb in einer eigenen
   dritten Zeile: blieben sie in der linken Spalte, würde die Karte bis
   unter die Buttons gezogen. */
.hero-body { display: flex; flex-direction: column; }
.hero-body .claims { flex: 1; align-content: space-between; }
.hero-visual { display: flex; flex-direction: column; }
.hero-visual .mock { flex: 1; }
.hero-foot { grid-column: 1 / 2; }
@media (max-width: 880px) { .hero-foot { grid-column: 1 / -1; } }
.hero h1 { color: #fff; }
.hero .lead { color: #B9CEC7; }
.hero .eyebrow {
  color: #7FC0AD;
  font-size: clamp(1rem, .9rem + .35vw, 1.2rem);
  font-weight: 700; letter-spacing: .1em; margin-bottom: 1.1em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Die beiden Zusagen, die im Erstgespräch am häufigsten kommen — bewusst
   groß und als eigener Block, nicht als Kleingedrucktes unter den Buttons. */
.claims {
  list-style: none; margin: 26px 0 0; padding: 20px 22px;
  display: grid; gap: 16px;
  border: 1px solid var(--ink-line); border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
}
.claims li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; }
.claims svg { margin-top: 3px; }
.claims b {
  display: block; color: #fff; font-weight: 680; letter-spacing: -.02em;
  font-size: clamp(1.18rem, 1.05rem + .45vw, 1.4rem); line-height: 1.2;
}
.claims span { display: block; margin-top: 4px; font-size: .93rem; color: #A9C2BA; }

/* Stilisierte Produktdarstellung (kein Screenshot, keine echten Daten). */
.mock {
  background: var(--surface); border-radius: var(--radius); box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
  overflow: hidden; border: 1px solid rgba(255,255,255,.08); color: var(--text);
  display: flex; flex-direction: column;
}
.mock__body { flex: 1; }
.mock__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: #F6F5F1; }
.mock__dot { width: 9px; height: 9px; border-radius: 50%; background: #D9D5CC; }
.mock__title { margin-left: 6px; font-size: .82rem; color: var(--muted); font-weight: 600; }
.mock__body { padding: 18px 18px 20px; }
.mock__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.mock__row:last-of-type { border-bottom: 0; }
.mock__row span:first-child { font-size: .94rem; font-weight: 550; }
.mock__meta { font-size: .82rem; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 650; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill--ok    { background: var(--green-soft); color: var(--green-600); }
.pill--wait  { background: #FDF3E2; color: #8A5A17; }
.pill--check { background: #EDF1F7; color: #3D5479; }
.mock__foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--muted); }
.mock__progress { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 10px; }
.mock__progress i { display: block; height: 100%; width: 72%; background: var(--green); }
/* Sitzt jetzt als Fußleiste in der Karte statt darunter im Dunkeln —
   sonst müsste ihre Höhe in die Ausrichtung eingerechnet werden, und der
   Hinweis stünde als einzelne Zeile verloren auf dem dunklen Grund. */
.mock-caption {
  margin: 0; padding: 10px 18px; font-size: .76rem; color: var(--muted);
  background: #F6F5F1; border-top: 1px solid var(--border);
}

@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; }
}

/* ── Vertrauensleiste ────────────────────────────────────────── */
.trustbar { background: var(--ink-2); color: #A9C2BA; border-bottom: 1px solid var(--border); }
.trustbar ul { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; padding: 15px 0; font-size: .88rem; font-weight: 550; }
.trustbar li { display: flex; align-items: center; gap: 9px; }
.trustbar svg { flex: none; color: #7FC0AD; }

/* ── Karten-Raster ───────────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow);
}
.section--tint .card { background: var(--bg); box-shadow: none; }
.card p { color: var(--muted); margin-bottom: 0; font-size: .97rem; }
.card__icon {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-600); margin-bottom: 16px;
}

/* Problem-Liste */
.pain { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pain li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--border); }
.pain li:last-child { border-bottom: 0; }
.pain b { display: block; font-weight: 620; }
.pain span { color: var(--muted); font-size: .97rem; }
.pain svg { color: #B9835C; margin-top: 3px; }

/* ── Ablauf ──────────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
.steps li { position: relative; padding-top: 26px; border-top: 2px solid var(--border); }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -17px; left: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center; font-size: .9rem; font-weight: 700;
}
.steps h3 { margin-bottom: .35em; }
.steps p { color: var(--muted); font-size: .96rem; margin-bottom: 0; }
.steps .who { display: inline-block; font-size: .74rem; font-weight: 680; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

/* ── Nutzen ──────────────────────────────────────────────────── */
.benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 40px; }
@media (max-width: 760px) { .benefits { grid-template-columns: 1fr; } }
.benefits li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.benefits svg { color: var(--green); margin-top: 5px; }
.benefits b { font-weight: 620; }
.benefits span { color: var(--muted); }

/* ── Preise ──────────────────────────────────────────────────── */
/* Beide Spalten tragen ihre Überschrift außerhalb der Box. Nur so
   beginnen dunkle Karte und weiße Boxen auf derselben Höhe — vorher saß
   die Überschrift der linken Spalte in der Karte, die rechte darüber,
   und dadurch war alles um eine Zeilenhöhe versetzt. align-items:
   stretch zieht zusätzlich die dunkle Karte auf die Höhe der drei
   weißen Boxen, sodass auch die Unterkanten bündig sind. */
.pricing { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.pricing-col { display: flex; flex-direction: column; }
.pricing-col > .price-card { flex: 1; }
/* Auch die rechte Spalte darf wachsen: welche der beiden Seiten am Ende
   höher ist, hängt an der Textlänge und kann sich mit jeder Textänderung
   drehen. So bleiben die Unterkanten in beiden Fällen bündig. */
.pricing-col > .flow-money { flex: 1; align-content: space-between; }
@media (max-width: 880px) { .pricing { grid-template-columns: 1fr; } }
.price-card { background: var(--ink); color: #EAF3F0; border-radius: var(--radius); padding: clamp(28px, 3vw, 38px); display: flex; flex-direction: column; }
/* Nimmt die überschüssige Höhe auf, damit Button und Fußnote unten
   bündig mit der letzten weißen Box abschließen statt mittig zu hängen. */
.price-card ul { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 12px; flex: 1; align-content: start; }
.price-card li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: .98rem; color: #C6DAD3; }
.price-card svg { color: #7FC0AD; margin-top: 5px; }
.price-card .btn { width: 100%; }
.price-note { font-size: .86rem; color: #8FA9A1; margin: 16px 0 0; }

.flow-money { display: grid; gap: 14px; }
.flow-money div { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: var(--radius-sm); padding: 16px 18px; }
.flow-money b { display: block; font-size: .95rem; }
.flow-money span { color: var(--muted); font-size: .93rem; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq { max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-weight: 620; font-size: 1.03rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq p { color: var(--muted); margin: 0 0 20px; max-width: 70ch; }

/* ── Kontakt ─────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }
.form { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow); }
.field { display: grid; gap: 6px; }
.field label { font-size: .9rem; font-weight: 620; }
.field .hint { font-size: .82rem; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; color: var(--text);
  padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); width: 100%;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); background: var(--surface); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.form .consent { display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start; font-size: .88rem; color: var(--muted); }
.form .consent input { width: 17px; height: 17px; margin-top: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: .93rem; padding: 12px 14px; border-radius: var(--radius-sm); margin: 0; }
.form-status[data-state="ok"]   { background: var(--green-soft); color: var(--green-600); }
.form-status[data-state="err"]  { background: #FBECE7; color: #8B3D22; }
.form-status[data-state="info"] { background: #F1F0EA; color: var(--muted); }
.form-status[hidden] { display: none; }

.contact-aside dl { margin: 22px 0 0; display: grid; gap: 16px; }
.contact-aside dt { font-size: .8rem; font-weight: 680; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.contact-aside dd { margin: 4px 0 0; font-size: 1rem; }

/* ── Fußzeile ────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: #9DB6AE; padding: 56px 0 40px; font-size: .93rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } }
/* Die Schlusszeile steht unter den Spalten, nicht in der ersten davon. */
.site-footer .wrap--reset { display: block; }
.site-footer .brand { color: #fff; margin-bottom: 12px; }
.site-footer p { max-width: 42ch; }
.site-footer h4 { color: #E6F0ED; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: #B9CEC7; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
/* Die Schlusszeile ist ein <p> gewesen und erbte damit .site-footer p's
   max-width: 42ch — Trennlinie und Text hörten mitten in der ersten
   Spalte auf. Jetzt ein eigener Container über die volle Breite, mit
   Copyright links und dem Hinweis für Schuldner rechts. */
.footer-bottom {
  border-top: 1px solid var(--ink-line); margin-top: 40px; padding-top: 22px;
  font-size: .85rem; color: #7D958D;
  display: flex; flex-wrap: wrap; gap: 10px 40px; justify-content: space-between; align-items: baseline;
}
.footer-bottom p { margin: 0; max-width: 62ch; }
.footer-bottom p:first-child { white-space: nowrap; }
@media (max-width: 760px) { .footer-bottom p:first-child { white-space: normal; } }

/* ── Kleine Hilfsklassen ─────────────────────────────────────
   Bewusst statt style="…"-Attributen: die Content-Security-Policy
   (siehe Caddyfile) erlaubt kein Inline-CSS. */
.u-muted        { color: var(--muted); }
.u-onink-muted  { color: #B9CEC7; }
.u-fineprint    { font-size: .83rem; color: var(--muted); margin: 0; }
.u-mb-16        { margin-bottom: 16px; }
.u-mb-32        { margin-bottom: 32px; }
.u-mt-28        { margin-top: 28px; }

/* ── Rechtstext-Seiten (Impressum / Datenschutz) ─────────────── */
.legal { max-width: 76ch; padding-block: clamp(48px, 6vw, 80px); }
.legal h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin-bottom: .6em; }
.legal h2 { font-size: 1.3rem; margin-top: 2em; }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: .5em; }
.legal .notice {
  background: #FDF3E2; border: 1px solid #EBD9B7; color: #6E4A15;
  border-radius: var(--radius-sm); padding: 16px 18px; font-size: .93rem;
}
.legal .back { display: inline-block; margin-bottom: 28px; font-size: .93rem; text-decoration: none; }