/* ==========================================================================
   RGN Marketing — Design-System „Raster & Klammer"
   Monochrom Ink/Graphit/Papier · Geist + Geist Mono · Klammer-Motiv + Raster
   Clean-Layer: Schatten 1,5–6 % · Headlines 400–500 · Button eckiger als Karte
   ========================================================================== */

@import url("../fonts/fonts.css");

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Flächen */
  --ink:#0E1113;            /* dunkle Sektion, Fließtext auf hell */
  --ink-2:#191D20;          /* Karte in dunkler Sektion */
  --ink-3:#23282C;          /* dritte Ebene, Rand auf dunkel */
  --graphit:#2A3033;        /* Logofarbe — Klammern, Rahmen, Akzentfläche */
  --papier:#FFFFFF;
  --papier-2:#F4F5F6;       /* zweite helle Fläche (98 % Helligkeit) */
  --papier-3:#ECEEEF;

  /* Text */
  --tx:#14181B;             /* Fließtext auf hell */
  --tx-mut:#5C6569;         /* gedämpft auf hell */
  --tx-inv:#FFFFFF;         /* auf dunkel */
  --tx-inv-mut:#A9B1B5;     /* gedämpft auf dunkel */

  /* Linien */
  --li:rgba(42,48,51,.12);
  --li-soft:rgba(42,48,51,.07);
  --li-inv:rgba(255,255,255,.14);
  --li-inv-soft:rgba(255,255,255,.08);

  /* Status — einzige Farbwerte außerhalb der Produkt-UIs */
  --live:#2FBF71;

  /* Verweise im Fließtext. Flo, 19.09.2026: sollen als Link erkennbar sein —
     farbig und unterstrichen. Kontrast gegen Weiß 6,1:1, gegen --ink 9,4:1,
     beide über der WCAG-AA-Grenze von 4,5:1. */
  --link:#2456D6; --link-inv:#8FB6FF;

  /* Akzent — sparsam, nur wo Bewegung eine Richtung zeigen soll
     (Kennzahl-Karten). Bewusst NICHT Google-Blau, das gehört den
     nachgebauten Produkt-Oberflächen. */
  --akz:#4C8DFF; --akz-tief:#2F6BFF;
  --akz-soft:rgba(76,141,255,.16); --akz-linie:rgba(76,141,255,.38);

  /* Google-Oberfläche — NUR in nachgebauten Produkt-Ansichten (Lastenheft A3).
     Werte aus den echten Konto-Screenshots abgenommen. */
  --g-blau:#1A73E8; --g-rot:#EA4335; --g-gelb:#FBBC04; --g-gruen:#34A853;
  --g-tx:#202124;        /* Google-Textfarbe  */
  --g-tx-mut:#5F6368;    /* sekundärer Text   */
  --g-rand:#DADCE0;      /* Tabellen- und Kartenrand */
  --g-rand-soft:#E8EAED;
  --g-flaeche:#F8F9FA;   /* Kopfzeilen, Zebra */
  --g-blau-soft:#E8F0FE; /* markierte Zeile   */
  --g-gruen-soft:#E6F4EA;
  --g-font:'Roboto','Helvetica Neue',Arial,-apple-system,system-ui,sans-serif;

  /* Radien */
  --r-btn:10px; --r-sm:14px; --r-card:20px; --r-lg:26px; --r-pill:999px;

  /* Schatten (1,5–6 %) */
  --sh-1:0 1px 2px rgba(14,17,19,.04);
  --sh-2:0 1px 2px rgba(14,17,19,.04), 0 14px 32px rgba(14,17,19,.06);
  --sh-3:0 2px 4px rgba(14,17,19,.05), 0 28px 60px rgba(14,17,19,.09);

  /* Raster */
  --raster:72px;
  --raster-li:rgba(42,48,51,.07);
  --raster-li-inv:rgba(255,255,255,.05);

  /* Maße */
  --wrap:1200px; --gut:clamp(20px,5vw,40px);
  --sec-y:clamp(72px,9vw,128px);

  /* Stern als Maskenform (Trustpilot-Kacheln) */
  --stern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='m10 0 2.5 6.1 6.6.5-5 4.3 1.5 6.4L10 13.9 4.4 17.3l1.5-6.4-5-4.3 6.6-.5z' fill='%23000'/%3E%3C/svg%3E");

  /* Haken für Aufzählungen (gefüllte Form, wird per mask eingefärbt) */
  --haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 15.3 2.7 10.4a1.2 1.2 0 0 1 1.7-1.7l3.2 3.2 8-8a1.2 1.2 0 1 1 1.7 1.7l-8.9 8.8a1.2 1.2 0 0 1-1.7 0z' fill='%23000'/%3E%3C/svg%3E");

  /* Feder-Kurven (Motion-System) */
  --fed:linear(0,.0063 3.4%,.0242 6.8%,.0917 13.6%,.5185 42.5%,.6169 49.4%,.6976,.7686 62.3%,.8261,.8749 73.6%,.9146,.946 84.4%,.9694,.9862 96.3%,.9973);
  --fed-weich:cubic-bezier(.22,.61,.36,1);
  --fed-kurz:cubic-bezier(.32,.72,0,1);
}

/* --- 2. Basis ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
/* .btn setzt display:inline-flex — ohne !important bliebe ein verstecktes
   Element sichtbar. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--tx);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;font-weight:400;letter-spacing:-.009em;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--graphit);outline-offset:3px;border-radius:4px}
.s-dark :focus-visible{outline-color:#fff}

/* --- 3. Typografie (sieben Stufen) --------------------------------------- */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em;text-wrap:balance}

/* Display-Rezept: alles in EINER Familie — Fließtext normal breit, die großen
   Grade schmal und fett über die Breitenachse. Versalien vertragen keine
   negative Laufweite, deshalb 0 statt der sonst üblichen -.03em. */
.t-d1,.t-d2,.t-d3{
  font-stretch:76%;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0;
  line-height:.95;
}
/* Schmale Schrift trägt mehr Zeichen pro Zeile — die Grade dürfen wachsen */
.t-d1{font-size:clamp(2.0625rem,1.1rem + 3.6vw,3.25rem)}
.t-d2{font-size:clamp(1.5rem,1.12rem + 2.05vw,2.75rem)}
.t-d3{font-size:clamp(1.1875rem,1rem + .8vw,1.75rem);line-height:1}
/* Umlaute stoßen bei enger Zeile an die Zeile darüber */
.t-d1,.t-d2{padding-top:.06em}
.t-lead{font-size:1.0625rem;line-height:1.6;color:var(--tx-mut);max-width:34rem}
.t-body{font-size:1rem;line-height:1.65}
.t-sm{font-size:.9375rem;line-height:1.6}
.t-xs{font-size:.8125rem;line-height:1.5}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* Kicker: nur Text, kein Strich, kein Kasten (Dauerregel) */
.kicker{
  display:block;margin-bottom:.75rem;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.8125rem;font-weight:500;letter-spacing:.01em;
  color:var(--tx-mut);
}
.s-dark .kicker{color:var(--tx-inv-mut)}

/* Mono-Label für Messwerte */
.mono{font-family:'Geist Mono',ui-monospace,monospace;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* --- 4. Layout ----------------------------------------------------------- */
.wrap,.wrap--breit{position:relative;z-index:1}
.wrap{width:min(100% - var(--gut) * 2,var(--wrap));margin-inline:auto}
.wrap--breit{width:min(100% - var(--gut) * 2,1340px);margin-inline:auto}
.sec{padding-block:var(--sec-y);position:relative;isolation:isolate}
.sec--alt{background:var(--papier-2)}
.sec--dark{background:var(--ink);color:var(--tx-inv)}
.s-dark{color:var(--tx-inv)}
.s-dark .t-lead{color:var(--tx-inv-mut)}
.sec__kopf{max-width:44rem;margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.sec__kopf h2 + .t-lead,.sec__kopf h3 + .t-lead{margin-top:1.05rem}
.sec__kopf--mitte{margin-inline:auto;text-align:center}
.sec__kopf--mitte .t-lead{margin-inline:auto}

/* --- 5. Das Raster (Flächenmotiv) ---------------------------------------- */
.raster{position:relative}
.raster::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--raster-li) 1px,transparent 1px),
    linear-gradient(to bottom,var(--raster-li) 1px,transparent 1px);
  background-size:var(--raster) var(--raster);
  mask-image:radial-gradient(ellipse 92% 75% at 50% 38%,#000 32%,transparent 82%);
}
.sec--dark.raster::before{
  background-image:
    linear-gradient(to right,var(--raster-li-inv) 1px,transparent 1px),
    linear-gradient(to bottom,var(--raster-li-inv) 1px,transparent 1px);
}

/* --- 6. Das Klammer-Motiv (CI aus dem Logo) ------------------------------ */
/* Zwei L-Ecken: oben rechts + unten links, wie in der Wortmarke */
.kl{position:relative}
.kl::before,.kl::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  border-color:var(--graphit);border-style:solid;opacity:.34;
  transition:opacity .5s var(--fed-weich),transform .5s var(--fed-weich);
}
.kl::before{top:0;right:0;border-width:1.5px 1.5px 0 0}
.kl::after{bottom:0;left:0;border-width:0 0 1.5px 1.5px}
.s-dark .kl::before,.s-dark .kl::after{border-color:#fff;opacity:.28}
/* Klammern fahren beim Hover ein Stück heraus */
.kl--hover:hover::before{transform:translate(3px,-3px);opacity:.75}
.kl--hover:hover::after{transform:translate(-3px,3px);opacity:.75}
/* Aufzählung mit Haken — das Klammer-Motiv bleibt den Flächen und Karten vorbehalten */
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.check-list li{position:relative;padding-left:1.75rem;font-size:.9375rem;line-height:1.55}
.check-list li::before{
  content:"";position:absolute;left:0;top:.28em;width:17px;height:17px;
  background:var(--tx);
  -webkit-mask:var(--haken) center/contain no-repeat;mask:var(--haken) center/contain no-repeat;
}
.s-dark .check-list li::before{background:#fff}

/* --- 7. Knöpfe (Radius 10 px, Gewicht 500, ohne Schatten) ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.4rem;border-radius:var(--r-btn);border:1px solid transparent;
  font-size:.9375rem;font-weight:500;letter-spacing:-.011em;cursor:pointer;
  transition:background .25s var(--fed-kurz),color .25s var(--fed-kurz),
             border-color .25s var(--fed-kurz),transform .25s var(--fed-kurz);
}
.btn:active{transform:translateY(1px)}
.btn--pri{background:var(--ink);color:#fff}
.btn--pri:hover{background:var(--graphit)}
.btn--sek{background:transparent;color:var(--tx);border-color:var(--li)}
.btn--sek:hover{border-color:var(--graphit);background:var(--papier-2)}
.s-dark .btn--pri{background:#fff;color:var(--ink)}
.s-dark .btn--pri:hover{background:var(--papier-2)}
.s-dark .btn--sek{color:#fff;border-color:var(--li-inv)}
.s-dark .btn--sek:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.btn__pfeil{transition:transform .3s var(--fed-kurz)}
.btn:hover .btn__pfeil{transform:translateX(3px)}

/* --- 8. Karten ----------------------------------------------------------- */
.karte{
  background:var(--papier);border:1px solid var(--li);border-radius:var(--r-card);
  padding:clamp(1.25rem,2.4vw,1.75rem);box-shadow:var(--sh-1);
}
.s-dark .karte,.karte--dark{
  background:var(--ink-2);border-color:var(--li-inv-soft);box-shadow:none;color:var(--tx-inv);
}

/* --- 9. Reveal (Motion-Basis, 10-px-Regel) ------------------------------- */
[data-reveal]{opacity:0;transform:translateY(10px);
  transition:opacity .7s var(--fed-weich),transform .7s var(--fed-weich)}
[data-reveal].ist-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* Harter Umbruch, der nur auf breiten Schirmen gilt — auf dem Handy würde er
   die Überschrift in vier statt drei Zeilen zerlegen. */
@media (max-width:760px){ .br-ab-md{display:none} }