/* ==========================================================================
   Apptimieren – Designsystem
   Navy #0A2540 / Blau #2563EB / Hellblau #38BDF8 / Grau #F3F4F6 / Weiss
   Archivo (Display) + Inter (Text) + IBM Plex Mono (Labels)
   ========================================================================== */

:root{
  --blue:#2563EB;
  --blue-dark:#1D4FD8;
  --blue-light:#E8F0FE;
  --navy:#0A2540;
  --navy-70:#48607A;
  --navy-45:#7B8CA0;
  --white:#FFFFFF;
  --grey:#F3F4F6;
  --sky:#38BDF8;
  --line:#E2E5EA;

  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --wrap:1140px;
  --narrow:720px;
  --pad:clamp(1.25rem,5vw,3rem);
  --gap:clamp(2rem,4vw,3.5rem);
  --sect:clamp(4.5rem,9vw,8rem);
}

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

/* Grundsatz: das hidden-Attribut gewinnt immer.
   Ohne diese Regel ueberstimmt jedes display:flex/grid das Verstecken per JS. */
[hidden]{display:none !important}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--white);
  color:var(--navy);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","liga";
}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.018em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,1.3rem + 3.4vw,4rem);font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(1.65rem,1.15rem + 1.9vw,2.6rem)}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);letter-spacing:-.01em}
p{margin:0 0 1.1em}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}
.narrow{max-width:var(--narrow)}
.section{padding-top:var(--sect);padding-bottom:var(--sect);position:relative;overflow:hidden}

/* --- Eyebrow / Labels ---------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
  margin:0 0 1.4rem;display:flex;align-items:center;gap:.75rem;
}
.eyebrow::after{content:"";flex:0 0 44px;height:1px;background:var(--blue);opacity:.45}
.label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy-45);display:block;margin-bottom:.35rem;
}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-block;font-family:var(--body);font-size:.98rem;font-weight:550;
  padding:.95rem 1.7rem;border-radius:2px;text-decoration:none;border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:#1D4FD8;border-color:#1D4FD8}
.btn-outline{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff}
.btn-light{background:#fff;color:var(--blue);border-color:#fff}
.btn-light:hover{background:var(--grey);border-color:var(--grey)}
.btn-text{
  font-family:var(--body);font-size:.98rem;font-weight:500;color:var(--navy-70);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;
}
.btn-text:hover{color:var(--blue);border-color:var(--blue)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:1.9rem}

/* --- Kopf / Fuß ---------------------------------------------------------- */
.site-header{border-bottom:1px solid var(--line);background:var(--white)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.15rem;padding-bottom:1.15rem}
.brand{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;color:var(--navy);text-decoration:none}
.brand span{color:var(--blue)}
.brand small{display:block;font-family:var(--mono);font-size:.6rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-45);margin-top:.15rem}
.site-nav{display:flex;gap:1.6rem;align-items:center}
.site-nav a{font-size:.92rem;color:var(--navy-70);text-decoration:none}
.site-nav a:hover{color:var(--blue)}
.site-footer{background:var(--navy);color:#9FB0C4;padding-top:3rem;padding-bottom:3rem;font-size:.9rem}
.site-footer a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between}

/* --- Signature: Prozessleiste -------------------------------------------- */
.prozess{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;
  gap:0;margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1.35rem;
}
.prozess-step{padding-right:1.5rem}
.prozess-step .k{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:.4rem;
}
.prozess-step .t{font-family:var(--display);font-size:1.1rem;font-weight:600;display:block}
.prozess-step .d{font-size:.92rem;color:var(--navy-70);margin:.4rem 0 0;max-width:26ch}
.prozess-arr{
  width:clamp(28px,5vw,72px);height:1px;background:var(--blue);opacity:.5;position:relative;
  margin-right:1.5rem;
}
.prozess-arr::after{
  content:"";position:absolute;right:0;top:-3px;
  border-left:7px solid var(--blue);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;opacity:.9;
}
.on-dark .prozess{border-color:rgba(255,255,255,.2)}
.on-dark .prozess-step .k{color:#7DD3FC}
.on-dark .prozess-step .d{color:rgba(255,255,255,.72)}
.on-dark .prozess-arr{background:#7DD3FC}
.on-dark .prozess-arr::after{border-left-color:#7DD3FC}
@media (max-width:760px){
  .prozess{grid-template-columns:1fr;gap:1.25rem}
  .prozess-arr{width:1px;height:22px;margin:0 0 0 2px}
  .prozess-arr::after{top:auto;bottom:0;right:-3px;border:none;border-top:7px solid var(--blue);border-left:3.5px solid transparent;border-right:3.5px solid transparent}
  .prozess-step{padding-right:0}
}

/* --- Hero ---------------------------------------------------------------- */
.section-hero{padding-top:clamp(2.5rem,4.5vw,4.25rem);padding-bottom:clamp(3rem,5vw,4.5rem);background:var(--white)}
.section-hero h1{max-width:19ch}
.section-hero .lead{font-size:clamp(1.08rem,1rem + .45vw,1.28rem);color:var(--navy-70);max-width:56ch;line-height:1.6}
.trust-row{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin:2rem 0 0;padding:0;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--navy-45)}
.trust-row li{display:flex;align-items:center;gap:.55rem}
.trust-row li::before{content:"";width:5px;height:5px;background:var(--sky);border-radius:50%;flex:none}

/* --- Problem (dunkel) ---------------------------------------------------- */
.section-problem{background:var(--navy);color:#E8EDF3}
.section-problem h2{color:#fff;max-width:22ch}
.section-problem .intro{color:rgba(255,255,255,.7);max-width:52ch}
.problem-list{display:grid;gap:1px;background:rgba(255,255,255,.14);margin:3rem 0 2.5rem}
.problem-list li{list-style:none;background:var(--navy);padding:1.5rem 0 1.5rem 1.6rem;
  border-left:2px solid var(--blue);margin-left:0;color:rgba(255,255,255,.86);font-size:1.02rem}
.section-problem .outro{max-width:58ch;color:rgba(255,255,255,.8)}
.section-problem .outro strong{color:#fff}

/* --- Ursache ------------------------------------------------------------- */
.section-ursache{background:var(--white)}
.gruende{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap);margin-top:3rem}
.grund{border-top:2px solid var(--blue);padding-top:1.25rem}
.grund h3{margin-bottom:.5rem}
.grund p{color:var(--navy-70);font-size:.98rem;margin:0}
.schluss{font-family:var(--display);font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem);font-weight:600;
  letter-spacing:-.02em;margin-top:3.5rem;padding-left:1.5rem;border-left:3px solid var(--sky);max-width:30ch}

/* --- Lösung (petrol) ----------------------------------------------------- */
.section-loesung{background:var(--blue);color:#fff}
.section-loesung h2{color:#fff;max-width:20ch}
.section-loesung h3{color:#fff;margin-top:2.5rem}
.section-loesung p{color:rgba(255,255,255,.85);max-width:62ch}
.section-loesung strong{color:#fff}
.section-loesung .btn-light{margin-top:1.5rem}

/* --- Use Cases ----------------------------------------------------------- */
.section-use-cases{background:var(--grey)}
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:2.5rem 0 2.5rem}
.filter button{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem 1rem;border:1px solid var(--line);background:transparent;color:var(--navy-70);
  border-radius:2px;cursor:pointer;transition:all .15s ease;
}
.filter button:hover{border-color:var(--blue);color:var(--blue)}
.filter button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.25rem}
.case{background:#fff;border:1px solid var(--line);padding:1.75rem;display:flex;flex-direction:column}
/* display:flex wuerde das hidden-Attribut sonst ueberstimmen – Filter waere wirkungslos */
.case[hidden]{display:none}
.case .bereich{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:.75rem}
.case h3{font-size:1.1rem;margin-bottom:1.25rem}
.case dl{margin:0;display:grid;gap:1rem}
.case dt{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--navy-45);margin-bottom:.25rem}
.case dd{margin:0;font-size:.92rem;line-height:1.55;color:var(--navy-70)}
.case .nutzen dd{color:var(--navy);border-left:2px solid var(--blue);padding-left:.85rem}
.cases-outro{max-width:60ch;margin-top:3rem;color:var(--navy-70)}

/* --- Nutzen -------------------------------------------------------------- */
.section-nutzen{background:var(--white)}
.nutzen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap) 2.5rem;margin-top:3rem}
.nutzen-item h3{font-size:1.08rem;margin-bottom:.45rem}
.nutzen-item p{font-size:.95rem;color:var(--navy-70);margin:0}
.rechnung{margin-top:4rem;background:#fff;border:1px solid var(--line);border-left:3px solid var(--sky);padding:2rem 2.25rem;max-width:64ch}
.rechnung h3{margin-bottom:.75rem}
.rechnung .hinweis{font-size:.9rem;color:var(--navy-45);font-style:italic;margin:0}

/* --- CEO ----------------------------------------------------------------- */
.section-ceo{background:var(--grey);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-ceo .narrow{max-width:660px}
.section-ceo h2{max-width:18ch}
.section-ceo h3{margin-top:3rem;font-size:1.2rem;color:var(--blue)}
.section-ceo p{color:var(--navy-70);line-height:1.78}
.section-ceo .cta-row{margin-top:3rem}

/* --- Ablauf -------------------------------------------------------------- */
.section-ablauf{background:var(--white)}
.schritte{display:grid;gap:0;margin-top:3rem;border-top:1px solid var(--line)}
.schritt{display:grid;grid-template-columns:5rem 1fr 14rem;gap:2rem;padding:2.25rem 0;border-bottom:1px solid var(--line);align-items:start}
.schritt .nr{font-family:var(--mono);font-size:1.6rem;color:var(--blue);line-height:1;letter-spacing:-.02em}
.schritt h3{margin-bottom:.5rem}
.schritt .dauer{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-45);margin-bottom:.75rem}
.schritt p{margin:0;color:var(--navy-70);font-size:.97rem;max-width:56ch}
.schritt .aufwand{background:var(--blue-light);padding:.9rem 1.1rem;font-size:.88rem;color:var(--blue-dark)}
.schritt .aufwand .label{color:var(--blue);opacity:.75}
@media (max-width:860px){
  .schritt{grid-template-columns:3.5rem 1fr;gap:1.25rem}
  .schritt .aufwand{grid-column:2}
}

/* --- Vertrauen ----------------------------------------------------------- */
.section-vertrauen{background:var(--navy);color:#E8EDF3}
.section-vertrauen h2{color:#fff}
.section-vertrauen .intro{color:rgba(255,255,255,.75);max-width:60ch}
.zusagen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:3rem}
.zusage h3{color:#fff;font-size:1.02rem;margin-bottom:.4rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.25)}
.zusage p{color:rgba(255,255,255,.72);font-size:.93rem;margin:0}
.redaktionshinweis{margin-top:2.5rem;font-family:var(--mono);font-size:.75rem;color:#7DD3FC;border:1px dashed rgba(143,207,201,.4);padding:.9rem 1.1rem}

/* --- FAQ ----------------------------------------------------------------- */
.section-faq{background:var(--white)}
.faq{border-top:1px solid var(--line);margin-top:2.5rem;max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);
  font-family:var(--mono);color:var(--blue);font-size:1.2rem;
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--blue)}
.faq p{padding:0 3rem 1.5rem 0;margin:0;color:var(--navy-70);max-width:70ch}

/* --- CTA ----------------------------------------------------------------- */
.section-cta{background:var(--blue);color:#fff}
.section-cta h2{color:#fff;max-width:20ch}
.section-cta p{color:rgba(255,255,255,.85);max-width:58ch}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.ergebnisse{list-style:none;padding:0;margin:2rem 0 0}
.ergebnisse li{padding:.65rem 0 .65rem 1.5rem;position:relative;color:rgba(255,255,255,.88);border-bottom:1px solid rgba(255,255,255,.16)}
.ergebnisse li::before{content:"→";position:absolute;left:0;color:#7DD3FC;font-family:var(--mono)}
.direkt{margin-top:2rem;font-family:var(--mono);font-size:.85rem;color:rgba(255,255,255,.8)}
.direkt a{color:#fff}
.form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);padding:2rem}
.form label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:.4rem}
.form input,.form textarea{
  width:100%;background:rgba(255,255,255,.95);border:1px solid transparent;padding:.8rem .9rem;
  font-family:var(--body);font-size:.97rem;color:var(--navy);border-radius:2px;margin-bottom:1.25rem;
}
.form textarea{resize:vertical;min-height:110px}
.form .btn{width:100%;text-align:center;cursor:pointer;font-size:1rem}
@media (max-width:820px){.cta-grid{grid-template-columns:1fr}}

/* --- Vorschau-Banner ----------------------------------------------------- */
.preview-note{background:var(--navy);color:#fff;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.06em;padding:.6rem 1.5rem;text-align:center;margin:0}

/* ==========================================================================
   Menü, mobiles Menü, Mehrseiten-Ergänzungen
   ========================================================================== */

/* --- Skip-Link ------------------------------------------------------------ */
.skip-link{
  position:fixed;top:-100%;left:1rem;z-index:1000;
  background:var(--navy);color:#fff;padding:.85rem 1.25rem;font-family:var(--mono);
  font-size:.8rem;border-radius:2px;
}
.skip-link:focus{top:1rem}

/* --- Header: sticky, zwei Zeilen der Nav ---------------------------------- */
.site-header{
  position:sticky;top:0;z-index:200;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);
  transition:box-shadow .2s ease;
}
.site-header.is-scrolled{box-shadow:0 6px 20px -12px rgba(10,37,64,.25)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:.85rem;padding-bottom:.85rem}

.brand{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--navy);text-decoration:none;line-height:1;white-space:nowrap}
.brand span{color:var(--blue)}
.brand small{display:block;font-family:var(--mono);font-size:.58rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-45);margin-top:.3rem}

.site-nav{flex:1;display:flex;justify-content:center}
.site-nav ul{list-style:none;display:flex;gap:2.1rem;margin:0;padding:0}
.site-nav a{
  font-size:.92rem;color:var(--navy-70);text-decoration:none;position:relative;padding:.3rem 0;
}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--sky);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease;
}
.site-nav a:hover{color:var(--navy)}
.site-nav a:hover::after,.site-nav a.is-active::after{transform:scaleX(1)}
.site-nav a.is-active{color:var(--navy);font-weight:600}

.header-actions{display:flex;align-items:center;gap:1rem;flex:none}
.btn-sm{padding:.6rem 1.15rem;font-size:.87rem}
.header-cta{white-space:nowrap}

/* --- Hamburger -------------------------------------------------------- */
.menu-toggle{
  display:none;flex:none;width:42px;height:42px;padding:0;border:1px solid var(--line);
  background:#fff;border-radius:2px;cursor:pointer;align-items:center;justify-content:center;
}
.menu-toggle-bars{position:relative;width:18px;height:12px;display:block}
.menu-toggle-bars span{
  position:absolute;left:0;right:0;height:2px;background:var(--navy);transition:transform .22s ease,opacity .18s ease,top .22s ease;
}
.menu-toggle-bars span:nth-child(1){top:0}
.menu-toggle-bars span:nth-child(2){top:5px}
.menu-toggle-bars span:nth-child(3){top:10px}
.menu-toggle.is-open .menu-toggle-bars span:nth-child(1){top:5px;transform:rotate(45deg)}
.menu-toggle.is-open .menu-toggle-bars span:nth-child(2){opacity:0}
.menu-toggle.is-open .menu-toggle-bars span:nth-child(3){top:5px;transform:rotate(-45deg)}

/* --- Mobiles Vollbild-Menü ---------------------------------------------- */
html.menu-open{overflow:hidden}
.mobile-menu{
  position:fixed;inset:0;z-index:190;background:var(--navy);
  align-items:flex-start;overflow-y:auto;
  padding:calc(var(--header-h, 5.5rem) + 1.5rem) 1.5rem 3rem;
  display:none;
  animation:menuIn .22s ease both;
}
.mobile-menu:not([hidden]){display:flex}
.mobile-menu[hidden]{display:none}
@keyframes menuIn{from{opacity:0}to{opacity:1}}
.mobile-menu nav{width:100%;max-width:420px;margin-inline:auto}
.mobile-menu ul{list-style:none;margin:0 0 2.5rem;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.mobile-menu li{border-bottom:1px solid rgba(255,255,255,.14)}
.mobile-menu a{
  display:block;padding:1.15rem .1rem;font-family:var(--display);font-weight:600;
  font-size:1.5rem;letter-spacing:-.01em;color:#fff;text-decoration:none;
}
.mobile-menu a.is-active{color:#7DD3FC}
.mobile-menu .btn{display:block;text-align:center;width:100%}
.mobile-menu-contact{margin-top:1.5rem;text-align:center;font-family:var(--mono);font-size:.82rem;color:rgba(255,255,255,.68)}
.mobile-menu-contact a{color:#fff}

@media (max-width:899px){
  .site-nav,.header-cta{display:none}
  .menu-toggle{display:inline-flex}
}

/* --- Footer-Nav ergänzen -------------------------------------------------- */
.footer-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.footer-nav a{border-bottom:1px solid rgba(255,255,255,.25)}

/* ==========================================================================
   Startseite: schlanke, direkt an CEOs adressierte Zusatzsektionen
   ========================================================================== */

/* --- Seiten-Intro (Kopf der Unterseiten) --------------------------------- */
.section-page-intro{background:var(--white);padding-top:clamp(2.5rem,4.5vw,4rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.section-page-intro h1{max-width:22ch}
.section-page-intro .lead{color:var(--navy-70);max-width:58ch;font-size:1.1rem}

/* --- Problem kurz (dunkel, zweispaltig) ---------------------------------- */
.section-problem-kurz{background:var(--navy);color:#fff;padding-top:clamp(3rem,5vw,4.5rem);padding-bottom:clamp(3rem,5vw,4.5rem)}
.kurz-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.section-problem-kurz h2{color:#fff;max-width:16ch;margin:0}
.section-problem-kurz p{color:rgba(255,255,255,.78);font-size:1.05rem}
.btn-text.on-dark{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.3)}
.btn-text.on-dark:hover{color:#7DD3FC;border-color:#7DD3FC}
@media (max-width:760px){.kurz-grid{grid-template-columns:1fr;gap:1.5rem}}

/* --- Lösung kurz ----------------------------------------------------------- */
.section-loesung-kurz{background:var(--white);padding-block:clamp(3.5rem,7vw,5.5rem)}
.section-loesung-kurz h2{max-width:18ch}
.section-loesung-kurz p{color:var(--navy-70);font-size:1.03rem}

/* --- Nutzen kurz ------------------------------------------------------------ */
.section-nutzen-kurz{background:var(--grey);padding-block:clamp(3.5rem,7vw,5.5rem)}
.nutzen-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.nutzen-grid-3{grid-template-columns:1fr}}

/* --- CTA-Teaser (kompakter Zwischenbanner) --------------------------------- */
.section-cta-teaser{background:var(--blue);color:#fff;padding-block:clamp(2.75rem,5vw,3.5rem)}
.cta-teaser-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.section-cta-teaser h2{color:#fff;font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);margin:0 0 .35rem;max-width:32ch}
.section-cta-teaser p{color:rgba(255,255,255,.82);margin:0;max-width:44ch}
.section-cta-teaser .btn{flex:none}


/* ==========================================================================
   Logo, Marke, Icon-Wasserzeichen
   ========================================================================== */

/* --- Marke im Header ------------------------------------------------------ */
.brand{display:flex;align-items:center;gap:.7rem}
.brand-icon{width:34px;height:34px;flex:none;display:block}
.brand-text{display:block;line-height:1}
.brand-text b{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--navy);display:block}
.brand-text b i{font-style:normal;color:var(--blue)}
.brand-text small{display:block;font-family:var(--mono);font-size:.58rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-45);margin-top:.3rem}

/* --- Marke im mobilen Menü und Footer (auf Dunkel) ------------------------ */
.site-footer .brand-text b{color:#fff}
.site-footer .brand-text b i{color:var(--sky)}
.footer-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:.35rem}
.footer-brand img{width:30px;height:30px}

/* --- Icon als Wasserzeichen im Hintergrund -------------------------------- */
/* Dezent, nie hinter Fliesstext: sitzt am Rand und wird auf Mobil ausgeblendet. */
.section[data-watermark]::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:clamp(280px,34vw,520px);aspect-ratio:1;
  background-image:var(--wm-src);background-repeat:no-repeat;background-size:contain;
  opacity:var(--wm-opacity,.05);
}
.section[data-watermark] > .wrap{position:relative;z-index:1}

/* Positionsvarianten */
.section[data-watermark="right"]::before{right:-6%;top:50%;transform:translateY(-50%) rotate(-8deg)}
.section[data-watermark="left"]::before{left:-8%;top:50%;transform:translateY(-50%) rotate(6deg)}
.section[data-watermark="top-right"]::before{right:-5%;top:-14%;transform:rotate(10deg)}
.section[data-watermark="bottom-left"]::before{left:-7%;bottom:-16%;transform:rotate(-6deg)}

/* Quelle je nach Untergrund: Navy-Icon auf hell, weisses Icon auf dunkel */
.section[data-watermark]{--wm-src:url("../images/icon-navy.svg");--wm-opacity:.07}
.section-problem[data-watermark],
.section-problem-kurz[data-watermark],
.section-vertrauen[data-watermark],
.section-loesung[data-watermark],
.section-cta[data-watermark],
.section-cta-teaser[data-watermark]{--wm-src:url("../images/icon-white.svg");--wm-opacity:.10}

@media (max-width:760px){
  .section[data-watermark]::before{display:none}
}
@media (prefers-reduced-motion:no-preference){
  /* rein statisch, keine Animation - bewusst ruhig gehalten */
}

/* --- Buttons auf blauen Flaechen ------------------------------------------
   Der Primaerbutton ist blau; auf blauem Grund waere er unsichtbar.
   Dort wird er weiss mit blauer Schrift ausgegeben. */
.section-cta .btn-primary,
.section-cta-teaser .btn-primary,
.section-loesung .btn-primary{background:#fff;color:var(--blue);border-color:#fff}
.section-cta .btn-primary:hover,
.section-cta-teaser .btn-primary:hover,
.section-loesung .btn-primary:hover{background:var(--grey);border-color:var(--grey);color:var(--blue-dark)}

/* Wasserzeichen nicht hinter den CTA-Button legen */
.section-cta-teaser[data-watermark]::before{--wm-opacity:.07}

/* Weiterfuehrende Links unter einer Kurz-Sektion */
.weiterlesen{display:flex;flex-wrap:wrap;gap:.9rem 2.25rem;margin-top:2.75rem}

/* ==========================================================================
   Kontaktformular – gilt auch fuer das Markup des Grav-Form-Plugins
   Das Plugin rendert <button class="button"> und .form-field-Wrapper,
   nicht die Theme-eigene .btn-Klasse. Beides wird hier bedient.
   ========================================================================== */
.form .form-field{margin-bottom:1.25rem}
.form .form-label,
.form label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:.45rem;line-height:1.5}
.form .form-label .required,
.form label .required{color:var(--sky)}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea,
.form select{
  width:100%;background:#fff;border:1px solid transparent;padding:.85rem .95rem;
  font-family:var(--body);font-size:.97rem;color:var(--navy);border-radius:2px;
}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(56,189,248,.35);
}
.form textarea{resize:vertical;min-height:120px}
.form ::placeholder{color:var(--navy-45)}

/* Datenschutz-Checkbox: Kaestchen und Text nebeneinander, Text normal lesbar */
.form .checkboxes,
.form .form-field-checkbox{margin:1.5rem 0 .5rem}
.form .checkboxes label,
.form label.inline,
.form .form-field-checkbox label{
  display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
  font-family:var(--body);font-size:.88rem;letter-spacing:normal;text-transform:none;
  color:rgba(255,255,255,.85);line-height:1.55;cursor:pointer;margin:0;
}
.form input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin:.15rem 0 0;border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.1);border-radius:2px;cursor:pointer;position:relative;
}
.form input[type="checkbox"]:checked{background:#fff;border-color:#fff}
.form input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--blue);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.form input[type="checkbox"]:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* Absenden-Button: deckt .btn, .button und nacktes <button> ab */
.form .btn,
.form .button,
.form button[type="submit"],
.form input[type="submit"]{
  display:block;width:100%;margin-top:1.5rem;text-align:center;cursor:pointer;
  font-family:var(--body);font-size:1rem;font-weight:550;padding:.95rem 1.7rem;
  background:#fff;color:var(--blue);border:1px solid #fff;border-radius:2px;
  transition:background .18s ease,color .18s ease;
}
.form .btn:hover,
.form .button:hover,
.form button[type="submit"]:hover,
.form input[type="submit"]:hover{background:var(--grey);border-color:var(--grey);color:var(--blue-dark)}

.form-hinweis{margin:1.25rem 0 0;font-size:.82rem;color:rgba(255,255,255,.7)}
.form-hinweis a{color:#fff}

/* Fehler- und Statusmeldungen des Form-Plugins */
.form .form-errors,
.form .form-message{margin-top:1rem;padding:.85rem 1rem;border-radius:2px;font-size:.9rem}
.form .form-errors{background:rgba(255,255,255,.14);color:#fff;border-left:3px solid var(--sky)}

/* ==========================================================================
   Wegweiser auf der Startseite
   ========================================================================== */
.section-wegweiser{background:var(--grey);padding-top:clamp(2.75rem,5vw,4rem);padding-bottom:clamp(2.75rem,5vw,4rem)}
.section-wegweiser .lead{color:var(--navy-70);max-width:56ch}
.wegweiser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:0}
.wegweiser-karte{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  padding:1.4rem 1.5rem;text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease;
}
.wegweiser-karte:hover{border-color:var(--blue);transform:translateY(-2px)}
.wegweiser-karte h3{font-size:1.02rem;margin-bottom:.4rem;color:var(--navy)}
.wegweiser-karte p{font-size:.9rem;color:var(--navy-70);margin:0 0 1rem;line-height:1.5}
.wegweiser-link{margin-top:auto;font-size:.9rem;font-weight:550;color:var(--blue)}
.wegweiser-karte:hover .wegweiser-link{color:var(--blue-dark)}
@media (max-width:860px){.wegweiser-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Footer – dreispaltig, klare Abstaende, ohne Unterstrich-Optik
   ========================================================================== */
.site-footer{background:var(--navy);color:#9FB0C4;padding-top:4rem;padding-bottom:2rem;font-size:.92rem}
.site-footer a{color:#C8D4E0;text-decoration:none;border-bottom:0;transition:color .15s ease}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:var(--gap);align-items:start}
.footer-col-brand{max-width:34ch}
.footer-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.footer-brand img{width:32px;height:32px}
.footer-claim{color:#9FB0C4;margin:0 0 1.25rem;line-height:1.6}
.footer-kontakt{margin:0;font-family:var(--mono);font-size:.85rem;line-height:1.9}
.footer-kontakt a{color:#fff}

.footer-head{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#6F8299;margin:0 0 1rem}
.footer-list{list-style:none;margin:0;padding:0}
.footer-list li{margin-bottom:.6rem}

.footer-bottom{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
  margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:.85rem;color:#6F8299}
.footer-bottom p{margin:0}

@media (max-width:860px){
  .footer-top{grid-template-columns:1fr;gap:2.5rem}
  .footer-bottom{margin-top:2.5rem}
}

.vertrauen-backlink{margin-top:2.5rem;color:rgba(255,255,255,.8)}
.vertrauen-backlink a{color:#fff;text-underline-offset:3px}

/* ==========================================================================
   Unternehmerperspektive – strukturierte Argumentation statt Fliesstext
   ========================================================================== */
.narrow-wide{max-width:800px}

.section-ceo .argumente{margin-top:3rem;border-top:1px solid var(--line)}
.argument{padding:2.5rem 0;border-bottom:1px solid var(--line)}
.argument-kopf{display:grid;grid-template-columns:3.25rem 1fr;gap:1rem;align-items:baseline;margin-bottom:1.1rem}
.argument-nr{font-family:var(--mono);font-size:1.35rem;font-weight:500;color:var(--blue);letter-spacing:-.01em;line-height:1}
.argument-kopf h3{margin:0;font-size:1.2rem;color:var(--navy)}
.argument-body{padding-left:calc(3.25rem + 1rem)}
.argument-body p{color:var(--navy-70);font-size:1.01rem;line-height:1.72;margin:0 0 1.1em}
.argument-body p:last-of-type{margin-bottom:0}

.kernsatz{
  margin-top:1.3rem !important;padding:1.1rem 1.4rem;background:var(--blue-light);
  border-left:3px solid var(--blue);font-family:var(--display);font-weight:600;
  font-size:1.03rem;color:var(--navy);letter-spacing:-.005em;line-height:1.5;
}

@media (max-width:640px){
  .argument-kopf{grid-template-columns:auto 1fr}
  .argument-body{padding-left:0;margin-top:.25rem}
}

/* ==========================================================================
   Breadcrumbs und Use-Case-Landingpages
   ========================================================================== */
.breadcrumb{background:var(--white);border-bottom:1px solid var(--line);font-size:.85rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:.85rem 0}
.breadcrumb li{display:flex;align-items:center;gap:.5rem;color:var(--navy-45)}
.breadcrumb li+li::before{content:"/";color:var(--line)}
.breadcrumb a{color:var(--navy-70);text-decoration:none}
.breadcrumb a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

.uc-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media (max-width:860px){.uc-split{grid-template-columns:1fr;gap:2.5rem}}
.uc-split p{color:var(--navy-70)}
.uc-sub{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy-45);margin-bottom:1.25rem}

.uc-schritte{counter-reset:s;list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.uc-schritte li{counter-increment:s;position:relative;padding:.95rem 0 .95rem 2.5rem;
  border-bottom:1px solid var(--line);color:var(--navy-70);font-size:.96rem}
.uc-schritte li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.95rem;
  font-family:var(--mono);font-size:.8rem;color:var(--blue)}

.section-uc-ausgang{background:var(--white)}
.section-uc-technik{background:var(--white)}
.section-uc-vorgehen{background:var(--grey)}

.uc-probleme{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 2.5rem;margin-top:2.5rem}
@media (max-width:760px){.uc-probleme{grid-template-columns:1fr}}
.uc-problem h3{color:#fff;font-size:1.05rem;margin-bottom:.45rem;padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.25)}
.uc-problem p{color:rgba(255,255,255,.75);font-size:.95rem;margin:0}

.uc-liste{list-style:none;margin:2.5rem 0;padding:0;max-width:70ch}
.uc-liste li{position:relative;padding:.85rem 0 .85rem 1.9rem;border-bottom:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.9)}
.uc-liste li::before{content:"→";position:absolute;left:0;color:#7DD3FC;font-family:var(--mono)}

.uc-bullets{list-style:none;margin:1.5rem 0 0;padding:0}
.uc-bullets li{position:relative;padding:.7rem 0 .7rem 1.4rem;border-bottom:1px solid var(--line);
  color:var(--navy-70);font-size:.96rem}
.uc-bullets li::before{content:"";position:absolute;left:0;top:1.15rem;width:6px;height:6px;
  background:var(--blue);border-radius:50%}

.uc-vorgehen{counter-reset:v;list-style:none;margin:2.5rem 0 0;padding:0;max-width:74ch}
.uc-vorgehen li{counter-increment:v;position:relative;padding:1rem 0 1rem 3rem;
  border-bottom:1px solid var(--line);color:var(--navy-70)}
.uc-vorgehen li::before{content:"0" counter(v);position:absolute;left:0;top:1rem;
  font-family:var(--mono);color:var(--blue);font-size:.95rem}
.uc-vorgehen strong{color:var(--navy)}

.case-link{display:inline-block;margin-top:1.25rem;font-size:.9rem;font-weight:550;color:var(--blue);
  text-decoration:none;border-bottom:1px solid transparent}
.case-link:hover{border-color:var(--blue)}