/* Stil der neuen Startseite fuer Unterseiten (Quelle: index.html "index-neu" und agentische-bereitschaft.html "ab-index-stil").
   Skala: Display 4.5rem, Zahlen 4.5rem, H2 2.5rem, H3 1.375rem, Lead 1.25rem, Text 1.0625rem, Klein 0.875rem.
   Abschnittstoene je Seite ueber die Klassen ton-weiss, ton-grau, ton-blau an der <section>. */

/* Schrift */
#main-content p, #main-content li { font-size: 1.0625rem; line-height: 1.65; color: #0f172a; }
#main-content p { max-width: 62ch; }
/* In zentrierten Bloecken den schmaleren Absatz mittig setzen, sonst klebt er links unter der zentrierten Ueberschrift */
#main-content :is(.text-block, .section-header, .hero-content, .contact-wrapper, [style*="text-align: center"], [style*="text-align:center"]) > p { margin-left: auto; margin-right: auto; }
#main-content #hero .hero-content > p:not(.hero-trust), #main-content .section-header p { font-size: 1.25rem; line-height: 1.55; }
#main-content h2.fluid-type, #main-content .section-header h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; animation: none; text-wrap: balance; }
#main-content h3 { line-height: 1.3; }
/* Ueberschriften einfarbig wie auf der Startseite: Akzentwoerter nicht blau */
#main-content :is(h1, h2, h3) .text-gradient { color: inherit !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
#main-content .section-header { margin-bottom: 3rem; text-align: center; }
#main-content .section-header p { color: #0f172a; margin-left: auto; margin-right: auto; }
#main-content .section-padding { padding: 6rem 0; }
@media (max-width: 768px) { #main-content .section-padding { padding: 4rem 0; } }

/* Links im Fliesstext */
#main-content p a:not(.btn-primary):not(.btn-secondary), #main-content li a:not(.btn-primary):not(.btn-secondary), #main-content figcaption a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; }

/* Hero */
#main-content #hero { min-height: 0; padding: 9rem 0 3rem; }
@media (min-width: 1024px) { #main-content #hero { padding-top: 11rem; } }
#hero h1 { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; max-width: 1360px; margin-left: auto; margin-right: auto; text-wrap: balance; overflow-wrap: break-word; }
#hero .hero-content { max-width: 1360px; }
#hero .hero-content > p { margin-left: auto; margin-right: auto; }
#hero .a-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: center; margin-bottom: 2rem; font-size: 0.875rem; color: #475569; }
#hero .a-breadcrumb a { color: #1d4ed8; text-decoration: none; }
#hero .a-breadcrumb a:hover { text-decoration: underline; }
#main-content #hero .hero-trust { margin: 1.75rem auto 0; font-size: 0.9375rem; color: #475569; }
#main-content #hero .hero-trust a { color: #0f172a; text-decoration: underline; text-underline-offset: 0.2em; }
#main-content .hero-btns { justify-content: center; }

/* Abschnittstoene */
#main-content .ton-weiss { background: #ffffff; }
#main-content .ton-grau { background: #f4f4f2; }
#main-content .ton-blau { background: #2563eb; }
#main-content .ton-blau h2, #main-content .ton-blau h3, #main-content .ton-blau p, #main-content .ton-blau li,
#main-content .ton-blau .section-header p, #main-content .ton-blau strong { color: #ffffff; }
#main-content .ton-blau p a:not(.btn-primary):not(.btn-secondary), #main-content .ton-blau li a { color: #ffffff; }

/* Buttons: gefuellt statt umrandet */
body #main-content .btn-primary, body #main-content .btn-secondary { font-size: 1.0625rem; border: 0 !important; }
body #main-content .btn-secondary { background-color: #e9e9e5 !important; color: #0f172a !important; }
body #main-content .btn-secondary:hover { background-color: #dedfd9 !important; }
body #main-content .ton-blau .btn-secondary { background-color: #ffffff !important; color: #1d4ed8 !important; }
body #main-content .ton-blau .btn-secondary:hover { background-color: #eaf0fe !important; }

/* Karten: Flaeche statt Rand, kein Schatten. Auf weissem Abschnitt grau, auf grauem weiss. */
#main-content :is(.card, .home-card, .produkt-card, .website-detail-card, .method-card, .pain-point-card, .service-item-card,
  .stat-box, .q-card, .rv-card, .faq-item, .contact-wrapper, .case-study-card, .term-card, .tool-card, .ratgeber-card, .in-card) {
  border: 0 !important; box-shadow: none !important; border-radius: 16px; backdrop-filter: none;
}
#main-content .ton-weiss :is(.card, .home-card, .produkt-card, .website-detail-card, .method-card, .pain-point-card, .service-item-card,
  .stat-box, .q-card, .rv-card, .faq-item, .contact-wrapper, .case-study-card, .tool-card, .ratgeber-card, .in-card) { background: #f4f4f2; }
#main-content :is(.ton-grau, .ton-blau) :is(.card, .home-card, .produkt-card, .website-detail-card, .method-card, .pain-point-card, .service-item-card,
  .stat-box, .q-card, .rv-card, .faq-item, .contact-wrapper, .case-study-card, .tool-card, .ratgeber-card, .in-card) { background: #ffffff; }
#main-content .ton-blau :is(.card, .produkt-card, .website-detail-card, .in-card, .rv-card) :is(h3, p, li, strong) { color: #0f172a; }
@media (hover: hover) and (pointer: fine) {
  #main-content :is(.card, .home-card, .produkt-card, .website-detail-card, .pain-point-card, .service-item-card, .stat-box):hover { transform: none; box-shadow: none !important; }
}

/* Einblenden: nur mit JS (html.in-js), nur transform und opacity; ohne JS oder bei reduzierter Bewegung sofort sichtbar */
.in-js [data-in-reveal]:not(.is-in) { opacity: 0; transform: translateY(20px); }
.in-js [data-in-reveal] { transition: opacity 600ms ease-out, transform 600ms ease-out; }
.in-js [data-in-reveal].is-in { transition-delay: calc(var(--d, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) {
  .in-js [data-in-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .in-js [data-in-reveal] { transition: none; }
}