/* Falken Digital – eine Datei fuer alle Seiten.
   Schriften liegen im Projekt (public/fonts), nichts wird von Google oder einem anderen Dienst geladen:
   Ein Aufruf bei fonts.googleapis.com uebermittelt die IP-Adresse des Besuchers (LG Muenchen I, 3 O 17493/20).
   Bricolage Grotesque und Figtree stehen unter der SIL Open Font License und duerfen so ausgeliefert werden. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --paper: #f2f5f3;
  --surface: #ffffff;
  --ink: #0f1f1b;
  --ink-soft: #4b5c57;
  --line: #d6dfdb;
  --accent: #0f766e;
  --accent-ink: #ffffff;
  --accent-soft: #e0f0ec;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0c1412;
    --surface: #131e1b;
    --ink: #e7efec;
    --ink-soft: #9db0aa;
    --line: #24332f;
    --accent: #4fc4b4;
    --accent-ink: #06201c;
    --accent-soft: #15302b;
    color-scheme: dark;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprung {
  position: absolute;
  left: 16px;
  top: -100px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  z-index: 10;
}
.sprung:focus {
  top: 16px;
}

.rahmen {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Kopf */
.kopf {
  border-bottom: 1px solid var(--line);
}
.kopf .rahmen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}
.marke {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.marke span {
  color: var(--accent);
}
/* Einstieg */
.einstieg {
  padding-block: 72px 56px;
}
.ort {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 20px;
  font-variant-numeric: tabular-nums;
}
h1,
h2,
h3 {
  font-family: var(--display);
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.9rem);
  line-height: 1.04;
  max-width: 17ch;
}
.einstieg p {
  max-width: 58ch;
  margin: 24px 0 0;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

/* Abschnitte */
section {
  padding-block: 48px;
}
h2 {
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 24px;
}
.abschnitt-text {
  max-width: 62ch;
}
.abschnitt-text p {
  margin: 0 0 16px;
}

/* Produkte */
.produkte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.produkt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
}
.produkt .zielgruppe {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
}
.produkt h3 {
  font-weight: 800;
  font-size: 2rem;
}
.produkt p {
  margin: 0;
  color: var(--ink-soft);
  flex: 1;
}
.produkt a {
  align-self: flex-start;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 16px;
  margin-top: 8px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
}
.produkt a:hover {
  filter: brightness(1.08);
}

/* Personen */
.personen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.personen li {
  border-top: 2px solid var(--ink);
  padding-top: 14px;
}
.personen p {
  margin: 0;
}
.personen .name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.personen .rolle {
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Fuss */
.fuss {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-block: 28px 40px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.fuss .rahmen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
}
.fuss p {
  margin: 0;
}
.fuss ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fuss a {
  color: var(--ink-soft);
}

/* Rechtstexte */
.recht {
  padding-block: 48px 24px;
  max-width: 68ch;
}
.recht h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin-bottom: 8px;
}
.recht h2 {
  font-size: 1.25rem;
  margin: 36px 0 10px;
}
.recht p,
.recht ul,
.recht address {
  margin: 0 0 14px;
}
.recht address {
  font-style: normal;
}
.recht ul {
  padding-left: 1.2em;
}
.recht .stand {
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.recht .hervor {
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 20px 0;
}

@media (max-width: 520px) {
  .einstieg {
    padding-block: 48px 32px;
  }
  .produkt {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .produkt a {
    transition: filter 0.15s ease;
  }
}

/* Markenhaus: eigene Komposition; Rechtstexte behalten ihre vorhandene Gestaltung.
   Keine Skripte, kein Tracking und keine extern geladenen Assets. */
.startseite { --paper:#faf9f6; --surface:#fff; --ink:#242823; --ink-soft:#535a52; --line:#dedfd7; --accent:#a6343d; --accent-ink:#fff; color-scheme:light; }
.startseite .rahmen { max-width:1200px; padding-inline:32px; }
.startseite .kopf { border:0; }
.startseite .kopf .rahmen { min-height:96px; }
.startseite .marke { font-size:1.5rem; letter-spacing:-.04em; }
.startseite .marke span { color:var(--ink); }
.startseite .kopf nav { display:flex; align-items:center; gap:32px; }
.startseite .kopf nav a { display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; font-weight:650; text-decoration:none; color:var(--ink); }
.startseite .kopf nav .nav-kontakt { border:1px solid var(--line); border-radius:99px; padding:10px 20px; gap:20px; }
.startseite .einstieg { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:45px; padding-block:65px 100px; }
.startseite .ort { display:inline-flex; align-items:center; gap:9px; background:#e8eee5; color:#36583e; padding:7px 13px; border-radius:99px; font-size:.75rem; letter-spacing:.025em; text-transform:none; margin:0 0 24px; }
.startseite .ort span { font-size:1.1rem; }
.startseite h1 { font-size:clamp(2.6rem,4.7vw,4.15rem); line-height:1.08; letter-spacing:-.055em; max-width:none; }
.startseite h1 em { font-style:normal; color:#b6424b; }
.startseite .hero-text > p:not(.ort):not(.hero-note) { max-width:450px; font-size:1.0625rem; line-height:1.75; margin-top:25px; }
.startseite .button { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:54px; margin-top:30px; padding:14px 22px; border-radius:12px; background:#bc444e; color:white; text-decoration:none; font-size:.9375rem; font-weight:700; }
.startseite .einstieg .hero-note { font-size:.75rem; margin-top:17px; }
.hero-art { position:relative; min-height:425px; }
.orbit { position:absolute; inset:15px 0 0; background:#e7ece0; border-radius:46% 54% 53% 47%; transform:rotate(-15deg); }
.art-spark { position:absolute; right:4px; top:-10px; color:#b6424b; font-size:5rem; line-height:1; }
.mini-card { position:absolute; width:215px; height:282px; border-radius:22px; padding:23px; display:flex; flex-direction:column; box-shadow:0 18px 38px #24282313; }
.mini-local { top:28px; left:15px; transform:rotate(-10deg); background:#176b60; color:white; }
.mini-find { top:111px; right:2px; transform:rotate(10deg); background:#f3d7d8; color:#87333b; }
.mini-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:1.65rem; }
.mini-label { font-size:.625rem; text-transform:uppercase; letter-spacing:.08em; margin-top:19px; font-weight:650; }
.mini-card strong { font-family:var(--display); font-size:2rem; line-height:1.07; letter-spacing:-.04em; margin-top:9px; }
.mini-brand { display:flex; justify-content:space-between; border-top:1px solid #ffffff50; margin-top:auto; padding-top:12px; font-weight:750; }
.mini-find .mini-brand { border-color:#87333b30; }
.art-sticker { position:absolute; bottom:-9px; left:10px; background:#f3e5ac; color:#534a28; font-size:.75rem; font-weight:650; line-height:1.5; padding:15px 20px; border-radius:13px; transform:rotate(-7deg); }
.startseite .produkt-bereich { padding-block:35px 60px; scroll-margin-top:24px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:34px; }
.eyebrow { font-size:.6875rem; text-transform:uppercase; letter-spacing:.12em; font-weight:750; margin:0 0 13px; color:var(--ink-soft); }
.startseite h2 { font-size:clamp(2rem,3.2vw,2.85rem); line-height:1.12; letter-spacing:-.045em; margin:0; }
.section-heading > p { color:var(--ink-soft); font-size:.9375rem; max-width:330px; margin:0; line-height:1.7; }
.startseite .produkte { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.startseite .produkt { padding:34px; border:0; border-radius:26px; gap:0; }
.startseite .produkt.lokalon { background:#e3ece5; --product-ink:#205b4c; --product-button:#246b5b; }
.startseite .produkt.findalon { background:#f2e1df; --product-ink:#87353d; --product-button:#a83c48; }
.produkt-top { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--product-ink); }
.produkt-top > span:last-child { font-size:2rem; line-height:1; }
.startseite .produkt .zielgruppe { background:#ffffff70; color:var(--product-ink); font-size:.625rem; letter-spacing:.04em; padding:7px 11px; }
.startseite .produkt h3 { font-size:3.25rem; letter-spacing:-.06em; margin-top:35px; color:var(--product-ink); }
.startseite .produkt h3 > span { color:#c54e55; }
.startseite .produkt .produkt-versprechen { flex:0; font-family:var(--display); font-size:1.65rem; font-weight:700; line-height:1.2; letter-spacing:-.025em; color:var(--ink); margin-top:14px; }
.startseite .produkt p:not(.produkt-versprechen) { font-size:.9375rem; line-height:1.75; margin-top:20px; }
.produkt-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.produkt-tags span { font-size:.6875rem; border:1px solid #64746440; padding:5px 11px; border-radius:99px; color:var(--product-ink); }
.produkt-ende { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-top:30px; }
.startseite .produkt a { margin:0; background:var(--product-button); padding:12px 17px; min-height:48px; font-size:.875rem; display:inline-flex; align-items:center; gap:20px; }
.produkt-ende > span { font-size:.6875rem; color:var(--ink-soft); }
.startseite .produkt a.business-link { color:var(--product-ink); background:transparent; font-size:.75rem; padding:10px 0; text-decoration:underline; }
.startseite #wir { padding-block:48px 60px; }
.team-panel { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.team-intro > p:last-child { color:var(--ink-soft); font-size:.9375rem; line-height:1.75; max-width:410px; margin-top:20px; }
.startseite .personen { grid-template-columns:1fr; gap:0; }
.startseite .personen li { position:relative; border-top:1px solid var(--line); padding:22px 0 22px 70px; }
.startseite .personen li:last-child { border-bottom:1px solid var(--line); }
.initialen { position:absolute; left:0; top:24px; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#e5ebdf; color:#355440; font-weight:700; font-size:.875rem; }
.startseite .personen li:last-child .initialen { background:#f2e0dd; color:#87353d; }
.startseite .personen .name { font-size:1.25rem; }
.startseite .personen .rolle { font-size:.8125rem; }
.startseite #kontakt { padding:35px 32px 10px; }
.startseite #kontakt .rahmen { max-width:1136px; padding:58px 32px; background:#eceede; border-radius:28px; text-align:center; }
.startseite #kontakt p:not(.eyebrow) { max-width:450px; margin:22px auto; color:var(--ink-soft); font-size:.9375rem; }
.kontakt-mail { display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:15px; min-height:48px; font-family:var(--display); font-size:clamp(1rem,2.5vw,1.5rem); font-weight:700; color:#7e303a; overflow-wrap:anywhere; }
.startseite .fuss { margin-top:62px; border:0; }
.startseite .fuss .rahmen { border-top:1px solid var(--line); padding-top:28px; font-size:.75rem; align-items:center; }
.startseite .fuss a { min-height:44px; display:inline-flex; align-items:center; }
@media (max-width:1000px) {
 .startseite .einstieg { gap:20px; }.mini-card { width:185px; height:265px; padding:20px; }.mini-local { left:0; }.mini-find { right:0; }.mini-card strong { font-size:1.8rem; }.team-panel { gap:35px; }
}
@media (max-width:760px) {
 .startseite .rahmen { padding-inline:22px; }.startseite .kopf .rahmen { min-height:80px; }.startseite .marke { font-size:1.2rem; }.startseite .kopf nav { gap:0; }.startseite .kopf nav > a:first-child { display:none; }.startseite .kopf nav .nav-kontakt { font-size:.75rem; padding:8px 12px; gap:10px; }
 .startseite .einstieg { grid-template-columns:1fr; padding-block:35px 60px; gap:40px; }.startseite h1 { font-size:clamp(2.25rem,7.4vw,3.5rem); }.startseite .hero-text > p:not(.ort):not(.hero-note) { font-size:1rem; }.startseite .hero-note { max-width:290px; }.hero-art { width:min(380px,100%); min-height:390px; margin-inline:auto; }.mini-card { width:185px; }.mini-find { top:85px; right:8px; }.mini-local { left:9px; }.art-spark { font-size:4rem; right:10px; }.art-sticker { bottom:2px; }
 .section-heading { display:block; }.section-heading > p { margin-top:20px; max-width:450px; }.startseite .produkte { grid-template-columns:1fr; gap:20px; }.startseite .produkt { padding:27px; }.startseite .produkt h3 { margin-top:25px; }.startseite .produkt-bereich { padding-top:10px; padding-bottom:30px; }.team-panel { grid-template-columns:1fr; gap:25px; }.startseite #wir { padding-block:35px; }.startseite #kontakt { padding:25px 22px 0; }.startseite #kontakt .rahmen { padding:38px 20px; }.startseite #kontakt .eyebrow { font-size:.625rem; }.startseite .fuss { margin-top:35px; }.startseite .fuss .rahmen { padding-top:20px; }
}
@media (max-width:370px) { .mini-card { width:165px; padding:17px; }.mini-local { left:4px; }.mini-find { right:0; }.mini-card strong { font-size:1.6rem; }.startseite .button { gap:12px; font-size:.8125rem; }.startseite .marke { font-size:1.05rem; } }
@media (prefers-reduced-motion:no-preference) { .startseite .button,.startseite .produkt a { transition:transform .18s ease,filter .18s ease; }.startseite .button:hover,.startseite .produkt a:hover { transform:translateY(-2px); filter:brightness(1.07); } }