/* ==========================================================================
   Innuvis — Seiten-CSS: Bausteine, die mehr als eine Seite braucht
   ==========================================================================

   Ergaenzt in-base.css (Tokens, Header, Footer, Buttons, Motion).
   Enthaelt nur, was mindestens zwei Seiten nutzen — alles Seitenspezifische
   bleibt im <style>-Block der jeweiligen Seite.

   Reihenfolge im <head>:
     in-base.css  →  in-page.css  →  ggf. in-modul.css / in-bereich.css
     →  in-consent.css  →  seitenspezifischer <style>
   ========================================================================== */

/* ==========================================================================
   Akzent-Tokens — der Hebel fuer die Bereichsfarbe
   ==========================================================================

   Komponenten greifen nie direkt auf --in-blue zu, sondern auf diese vier
   Tokens. Der Dienstleister-Bereich belegt sie in in-bereich.css neu; dadurch
   wechselt die Farbwelt, ohne dass eine einzige Komponente doppelt existiert.

     --in-accent          Textfarbe auf dunklem Grund. Muss dort AA erreichen.
     --in-accent-line     Linien, Rahmen, Trenner.
     --in-accent-surface  gefuellte Flaeche (Knopf, Kachel, Balken).
     --in-on-accent       Schrift AUF dieser Flaeche.

   Standard = Unternehmens- und Neutralbereich. --in-blue-bright (#5EA8E8)
   erreicht auf --in-bg 8,0:1, --in-blue (#2D7ABE) als Flaeche mit Weiss 4,7:1.
   ========================================================================== */

:root{
  --in-accent:var(--in-blue-bright);
  --in-accent-line:var(--in-blue);
  --in-accent-surface:var(--in-blue);
  --in-accent-surface-hover:var(--in-blue-deep);
  --in-on-accent:#ffffff;
}

/* ==========================================================================
   Hero — Grundform fuer alle Seiten ausser der Startseite
   ========================================================================== */

.in-hero{padding-top:96px;padding-bottom:64px;position:relative;overflow:hidden}
.in-hero::before{
  content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:900px;height:700px;
  background:radial-gradient(circle at 50% 50%,#18023A 0%,transparent 70%);
  pointer-events:none;z-index:-1;
}
.in-hero-label{
  font-family:'Inter',sans-serif;font-size:var(--in-t-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--in-text-dim);margin:0 0 20px;
}
.in-hero h1{
  margin:0 0 28px;font-size:clamp(var(--in-t-xl),5.2vw,var(--in-t-4xl));line-height:1.08;max-width:20ch;
}
.in-hero-sub{
  font-size:var(--in-t-m);line-height:1.6;color:var(--in-text-dim);max-width:58ch;margin:0 0 36px;
}
.in-hero-cta{display:flex;gap:16px;flex-wrap:wrap}

/* ==========================================================================
   Sektionen
   ========================================================================== */

.in-section{padding-top:64px;padding-bottom:64px;border-top:1px solid var(--in-border)}
.in-section-plain{padding-top:64px;padding-bottom:64px}
.in-section h2{font-size:var(--in-t-xl);margin:0 0 12px;line-height:1.2}
.in-section-sub{color:var(--in-text-dim);font-size:var(--in-t-s);margin:0 0 40px;max-width:58ch}

/* ==========================================================================
   Fliesstext — Rechtstexte, Magazin-Artikel, lange Erklaerstrecken
   ==========================================================================
   Zeilenlaenge bewusst auf ~70 Zeichen begrenzt. Die Grundschrift ist 17px
   statt 16px, weil diese Seiten am Stueck gelesen werden.
   ========================================================================== */

.in-prose{max-width:70ch;font-size:var(--in-t-m);line-height:1.75}
.in-prose h2{
  font-size:var(--in-t-l);line-height:1.25;margin:56px 0 16px;
  padding-top:24px;border-top:1px solid var(--in-border);
}
.in-prose h2:first-child{margin-top:0;padding-top:0;border-top:none}
.in-prose h3{font-size:var(--in-t-m);line-height:1.3;margin:32px 0 10px}
.in-prose p{margin:0 0 18px}
.in-prose ul,.in-prose ol{margin:0 0 18px;padding-left:22px}
.in-prose li{margin-bottom:8px}
.in-prose a{color:var(--in-accent);text-decoration:underline;text-underline-offset:3px}
.in-prose a:hover{color:var(--in-text)}
.in-prose strong{color:var(--in-text);font-weight:600}
.in-prose-dim{color:var(--in-text-dim)}
.in-prose-meta{
  font-size:var(--in-t-s);color:var(--in-text-dim);margin:0 0 40px;
  padding-bottom:24px;border-bottom:1px solid var(--in-border);
}

/* Tabellen im Fliesstext — schmale Viewports scrollen die Tabelle,
   nie die Seite. Der Rahmen macht sichtbar, dass hier etwas schiebbar ist. */
.in-prose figure{margin:28px 0;overflow-x:auto;border:1px solid var(--in-border);border-radius:10px}
.in-prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--in-t-s)}
.in-prose th,.in-prose td{
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--in-border);
  vertical-align:top;line-height:1.55;
}
.in-prose th{
  background:var(--in-surface);font-weight:600;font-size:var(--in-t-xs);
  letter-spacing:.04em;text-transform:uppercase;color:var(--in-text-dim);
}
.in-prose tbody tr:last-child td{border-bottom:none}
.in-prose blockquote{
  margin:28px 0;padding:4px 0 4px 24px;border-left:2px solid var(--in-accent-line);
  color:var(--in-text);font-size:var(--in-t-m);line-height:1.7;
}
.in-prose blockquote p:last-child{margin-bottom:0}
.in-prose hr{border:none;border-top:1px solid var(--in-border);margin:40px 0}
.in-prose h4{font-size:var(--in-t-m);line-height:1.35;margin:26px 0 8px}

/* Inhaltsverzeichnis fuer lange Rechtstexte */
.in-toc{
  background:var(--in-surface);border:1px solid var(--in-border);border-radius:10px;
  padding:24px 28px;margin:0 0 48px;max-width:70ch;
}
.in-toc h2{font-size:var(--in-t-s);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 16px;padding:0;border:none;color:var(--in-text)}
.in-toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px;font-size:var(--in-t-s)}
.in-toc li{margin-bottom:1px;break-inside:avoid}
/* Die Eintraege sind eine Navigationsliste, kein Fliesstext — die
   Inline-Ausnahme von WCAG 2.5.8 greift hier nicht. Der Innenabstand
   bringt jedes Tippziel von 17px auf 25px und damit ueber die
   AA-Schwelle von 24px, ohne die zweispaltige Liste zu sprengen. */
.in-toc a{display:inline-block;padding:4px 0;
  color:var(--in-text-dim);text-decoration:none}
.in-toc a:hover{color:var(--in-accent);text-decoration:underline}

/* ==========================================================================
   Karten-Raster — Modul-Uebersicht, Vorteilslisten, Anwendungsfaelle
   ========================================================================== */

.in-grid{display:grid;gap:20px}
.in-grid-2{grid-template-columns:repeat(2,1fr)}
.in-grid-3{grid-template-columns:repeat(3,1fr)}
.in-grid-4{grid-template-columns:repeat(4,1fr)}

.in-card{
  background:var(--in-surface);border:1px solid var(--in-border);border-radius:10px;
  padding:28px 24px;display:flex;flex-direction:column;gap:10px;
}
.in-card h3{font-size:var(--in-t-m);margin:0;line-height:1.3}
.in-card p{font-size:var(--in-t-s);color:var(--in-text-dim);margin:0;line-height:1.55}
.in-card-note{font-size:var(--in-t-xs);color:var(--in-text-dim);margin:0}

/* Verlinkte Karte — nur diese Variante hebt sich beim Hover */
a.in-card{
  text-decoration:none;color:inherit;
  transition:border-color .15s ease, transform .2s ease, box-shadow .2s ease;
}
a.in-card:hover{
  border-color:var(--in-accent-line);transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(45,122,190,.18);
}
a.in-card:focus-visible{outline:2px solid var(--in-accent);outline-offset:3px}
.in-card-more{
  font-size:var(--in-t-s);font-weight:600;color:var(--in-accent);margin:8px 0 0;
}

/* Nummerierte Schrittfolge */
.in-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:in-step}
.in-step{position:relative;padding-top:52px}
.in-step::before{
  counter-increment:in-step;content:counter(in-step);
  position:absolute;top:0;left:0;
  width:36px;height:36px;border-radius:50%;
  background:var(--in-surface-2);border:1px solid var(--in-accent-line);
  color:var(--in-accent);
  font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--in-t-s);
  display:flex;align-items:center;justify-content:center;
}
.in-step h3{font-size:var(--in-t-m);margin:0 0 8px}
.in-step p{font-size:var(--in-t-s);color:var(--in-text-dim);margin:0;line-height:1.55}

/* Aufzaehlung mit Haken — ersetzt die Emoji-Listen der Altsite */
.in-checklist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.in-checklist li{position:relative;padding-left:30px;font-size:var(--in-t-s);line-height:1.55}
.in-checklist li::before{
  content:"";position:absolute;left:0;top:6px;
  width:16px;height:9px;border-left:2px solid var(--in-accent);
  border-bottom:2px solid var(--in-accent);transform:rotate(-45deg);
}
.in-checklist-2{grid-template-columns:repeat(2,1fr);gap:12px 32px}

/* ==========================================================================
   Kennzahlen — Belege aus der Praxis
   ========================================================================== */

.in-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.in-kpi{
  background:var(--in-surface);border:1px solid var(--in-border);border-radius:10px;
  padding:24px;
}
.in-kpi-value{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--in-t-2xl);line-height:1.1;
  margin:0 0 6px;color:var(--in-accent);
}
.in-kpi-label{font-size:var(--in-t-s);color:var(--in-text-dim);margin:0;line-height:1.45}

/* ==========================================================================
   FAQ — Muster von /preise/, hier fuer alle Seiten
   ========================================================================== */

.in-faq-layout{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:56px;align-items:start}
.in-faq-intro{position:sticky;top:112px}
.in-faq-intro h2{margin:0 0 12px}
.in-faq-intro p{color:var(--in-text-dim);font-size:var(--in-t-s);margin:0;line-height:1.6}
.in-faq-list{display:grid;gap:0}
.in-faq-item{padding:28px 0;border-top:1px solid var(--in-border)}
.in-faq-item:first-child{padding-top:0;border-top:none}
.in-faq-item h3{font-size:var(--in-t-m);margin:0 0 10px;line-height:1.35}
.in-faq-item p{color:var(--in-text-dim);font-size:var(--in-t-s);line-height:1.7;margin:0}

/* ==========================================================================
   Abschluss-Band — CTA am Seitenende
   ========================================================================== */

.in-cta-band{
  background:linear-gradient(165deg,var(--in-surface-2),var(--in-surface));
  border:1px solid var(--in-accent-line);border-radius:12px;
  padding:48px;text-align:center;max-width:760px;margin:0 auto;
}
.in-cta-band h2{font-size:var(--in-t-xl);margin:0 0 14px;line-height:1.2}
.in-cta-band p{color:var(--in-text-dim);font-size:var(--in-t-s);line-height:1.6;max-width:52ch;margin:0 auto 28px}
.in-cta-band-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* ==========================================================================
   Bilder
   ========================================================================== */

.in-figure{margin:0}
.in-figure img{display:block;width:100%;height:auto;border-radius:10px}
.in-figure figcaption{
  font-size:var(--in-t-xs);color:var(--in-text-dim);margin-top:10px;line-height:1.5;
}

/* ==========================================================================
   Schmale Viewports
   ==========================================================================
   Die Umbrueche sitzen dort, wo der Inhalt es verlangt, nicht auf runden
   Geraetebreiten: vier Spalten brechen frueher als zwei.
   ========================================================================== */

@media (max-width:1000px){
  .in-grid-4{grid-template-columns:repeat(2,1fr)}
  .in-kpis{grid-template-columns:repeat(2,1fr)}
  .in-faq-layout{grid-template-columns:1fr;gap:32px}
  .in-faq-intro{position:static}
}

@media (max-width:760px){
  .in-hero{padding-top:56px;padding-bottom:48px}
  .in-section,.in-section-plain{padding-top:48px;padding-bottom:48px}
  .in-section h2{font-size:var(--in-t-l)}
  .in-grid-2,.in-grid-3,.in-grid-4{grid-template-columns:1fr}
  .in-steps{grid-template-columns:1fr;gap:28px}
  .in-checklist-2{grid-template-columns:1fr}
  .in-toc ol{columns:1}
  .in-cta-band{padding:32px 24px}
  .in-cta-band h2{font-size:var(--in-t-l)}
  .in-prose{font-size:var(--in-t-s)}
  .in-prose h2{margin-top:40px}
}

@media (max-width:400px){
  .in-kpis{grid-template-columns:1fr}
}

/* Bewegungsreduktion: die Hover-Verschiebung der Karten entfaellt.
   Die Reveal-Logik selbst deckt in-base.css ab. */
@media (prefers-reduced-motion:reduce){
  a.in-card{transition:border-color .15s ease}
  a.in-card:hover{transform:none;box-shadow:none}
}
