/* ==========================================================
   AMcelerate WEBSITE – ZENTRALE STYLESHEET
   Bearbeitungstipp: Farben ganz oben unter :root ändern.
   ========================================================== */


:root{
  --blue:#004AAD;--orange:#FF8A3D;--bg:#F5F7FA;--navy:#172033;--white:#fff;
  --muted:#5F6B7D;--line:#DCE3EC;--softblue:#EAF2FC;--softorange:#FFF0E5;
  --shadow:0 18px 55px rgba(23,32,51,.11);--max:1180px;--header:76px
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:"Open Sans",Arial,sans-serif;color:var(--navy);background:var(--bg);line-height:1.65}
body.menu-open{overflow:hidden}a{text-decoration:none;color:inherit}button,input,textarea{font:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}section{padding:92px 0}
h1,h2,h3,h4{line-height:1.12;margin:0 0 18px;letter-spacing:-.03em}
h1{font-size:clamp(2.6rem,6vw,5.1rem);letter-spacing:-.05em}
h2{font-size:clamp(2rem,3.7vw,3.2rem)}h3{font-size:clamp(1.2rem,2vw,1.5rem)}
p{margin:0 0 18px;color:var(--muted)}.lead{font-size:clamp(1.05rem,1.7vw,1.23rem);max-width:760px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.12em;
font-size:.76rem;font-weight:800;color:var(--blue);margin-bottom:16px}
.eyebrow:before{content:"";width:28px;height:3px;border-radius:99px;background:var(--orange)}
.hero .eyebrow,.page-hero .eyebrow,.bg-navy .eyebrow{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:999px;
font-weight:800;border:1px solid transparent;transition:.2s}.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:var(--navy)}.btn-blue{background:var(--blue);color:#fff}
.btn-outline{border-color:rgba(255,255,255,.42);color:#fff}.btn-outline:hover{background:rgba(255,255,255,.1)}
.chip{display:inline-flex;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.83rem;font-weight:800}
.chips,.industry-band{display:flex;flex-wrap:wrap;gap:9px}.industry-band{padding:20px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.site-header{position:sticky;top:0;z-index:50;height:var(--header);background:rgba(245,247,250,.94);
backdrop-filter:blur(14px);border-bottom:1px solid rgba(220,227,236,.85)}
.navbar{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800}.brand-mark{width:44px;height:44px;border-radius:13px;background:var(--blue);
display:grid;place-items:center;color:#fff;font-size:1.05rem}.brand-mark span{color:var(--orange)}
.brand-copy{display:grid;line-height:1.05}.brand-copy small{font-size:.64rem;color:var(--muted);margin-top:5px}
.navlinks{display:flex;align-items:center;gap:23px;font-weight:700;font-size:.93rem}.navlinks a:not(.btn):hover{color:var(--blue)}
.mobile-toggle{display:none;width:46px;height:46px;border:0;border-radius:13px;background:#fff;color:var(--navy)}
.mobile-toggle span,.mobile-toggle:before,.mobile-toggle:after{content:"";display:block;width:22px;height:2px;background:currentColor;margin:5px auto}
.mobile-panel{display:none}
.hero{position:relative;overflow:hidden;background:var(--blue);color:#fff;padding:102px 0 92px}
.hero:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;border:1px solid rgba(255,255,255,.13);right:-160px;top:-240px}
.hero:after{content:"";position:absolute;width:410px;height:410px;border-radius:50%;background:rgba(255,138,61,.12);right:50px;bottom:-290px}
.hero-grid,.page-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero p,.page-hero p,.bg-navy p{color:rgba(255,255,255,.78)}.hero h1 span{color:var(--orange)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-card{background:#fff;color:var(--navy);border-radius:30px;padding:32px;box-shadow:0 28px 75px rgba(0,0,0,.23)}
.hero-card p{color:var(--muted)}
.am-lockup{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:18px;
  align-items:center;
  margin-bottom:25px;
}
.am-big{
  width:90px;
  height:64px;
  border-radius:18px;
  background:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-weight:800;
  font-size:1.55rem;
}
.am-a{
  color:#FFFFFF;
}
.am-m{
  color:var(--orange);
}
.am-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}
.am-copy strong{
  display:block;
  line-height:1.25;
}
.am-copy small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  line-height:1.35;
}
.modernization-m{
  color:var(--orange);
}
.am-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.am-box{padding:17px;border-radius:18px;border:1px solid var(--line);background:var(--bg)}.am-box b{display:block;color:var(--blue);margin-bottom:5px}
.outcome-line{margin-top:14px;padding:15px 16px;border-radius:16px;background:var(--softorange);font-weight:800}.outcome-line span{color:var(--orange)}
.section-head{display:flex;justify-content:space-between;gap:42px;align-items:end;margin-bottom:44px}.section-head>div:first-child{max-width:790px}
.section-head>p{max-width:390px;margin-bottom:6px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.card,.offer,.explorer,.step{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;
box-shadow:0 8px 22px rgba(23,32,51,.04);transition:.22s}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card.dark{background:var(--navy);border-color:var(--navy);color:#fff}.card.dark p{color:rgba(255,255,255,.72)}
.icon{width:48px;height:48px;border-radius:14px;background:var(--softblue);color:var(--blue);display:grid;place-items:center;font-weight:800;margin-bottom:20px}
.card.dark .icon{background:rgba(255,255,255,.13);color:var(--orange)}.card-cta{margin-top:22px}
/* Karten im Zweier-Raster sind per Grid gleich hoch, ihre Inhalte aber
   unterschiedlich lang. Ohne Flex haengt der Button der kuerzeren Karte
   mitten im Weiss statt auf einer Linie mit dem der laengeren.
   margin-top:auto schiebt ihn an den unteren Rand. */
.grid-2 .card{display:flex;flex-direction:column}
.grid-2 .card .card-cta{margin-top:auto;padding-top:22px}
.checklist{display:grid;gap:12px;margin-top:21px}.check{display:flex;gap:12px;align-items:flex-start}.check:before{content:"✓";display:grid;place-items:center;
flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--softorange);color:var(--orange);font-weight:900}
.challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.challenge{border-left:4px solid var(--orange);background:#fff;
border-radius:0 18px 18px 0;padding:22px 22px 22px 24px;box-shadow:0 7px 18px rgba(23,32,51,.045)}
.challenge h4{margin-bottom:8px}.challenge p{font-size:.93rem;margin:0}.spacer-20{height:20px}.spacer-40{height:40px}
.accelerator{display:grid;grid-template-columns:1fr;gap:22px;background:var(--navy);border-radius:32px;padding:34px;color:#fff}
.accel-tabs{display:grid;grid-auto-flow:column;justify-content:start;gap:10px;align-content:start}.accel-tab{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;
border-radius:17px;padding:15px 30px;font-weight:800;text-align:center;min-width:190px}.accel-tab.active{background:var(--orange);color:var(--navy);border-color:var(--orange)}
.accel-panel{background:#fff;color:var(--navy);border-radius:22px;padding:28px}.accel-panel p{color:var(--muted)}
.effect{display:grid;grid-template-columns:1fr 38px 1fr;gap:9px;align-items:center;margin-top:20px}.effect-box{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:16px}
.effect-arrow{text-align:center;color:var(--orange);font-size:1.4rem;font-weight:900}
.effect-box ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.effect-box li{position:relative;padding-left:15px;font-size:.94rem;line-height:1.45}
.effect-box li:before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--line)}
.effect-label{display:block;text-transform:uppercase;letter-spacing:.11em;font-size:.7rem;font-weight:800;color:var(--muted);margin-bottom:11px}
.effect-box.is-result li{font-weight:700}
.effect-box.is-result li:before{background:var(--orange)}
.effect-box.is-result .effect-label{color:var(--orange)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.step{border-radius:20px;padding:25px}.step-num{color:var(--orange);font-weight:800;font-size:.78rem;margin-bottom:18px}
.page-hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:84px 0 72px}.page-hero:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;
background:rgba(0,74,173,.55);right:-120px;top:-120px}.page-hero-grid{grid-template-columns:1.15fr .85fr;gap:48px}
.statbox{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);border-radius:24px;padding:26px}.statbox strong{display:block;color:var(--orange);margin-bottom:8px}
.bg-white{background:#fff}.bg-soft{background:linear-gradient(180deg,var(--bg),#fff)}.bg-navy{background:var(--navy);color:#fff}
.offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.offer-header{display:flex;gap:14px;align-items:flex-start}.offer-num{flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800}
.offer ul{padding-left:19px;color:var(--muted)}.offer li+li{margin-top:8px}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}.filter-btn{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:10px 15px;font-weight:800}
.filter-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}.usecase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.usecase{border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--bg)}.usecase.hide{display:none}.usecase small{color:var(--blue);font-weight:800;text-transform:uppercase}
.accordion{display:grid;gap:10px}.accordion-item{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.accordion-btn{width:100%;border:0;background:#fff;padding:19px 22px;display:flex;justify-content:space-between;gap:18px;text-align:left;font-weight:800}
.accordion-content{display:none;padding:0 22px 20px}.accordion-item.open .accordion-content{display:block}
.profile-grid{display:grid;grid-template-columns:.83fr 1.17fr;gap:58px;align-items:start}.photo-card{position:sticky;top:102px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:14px}
.photo-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px;background:var(--softblue)}.photo-note{padding:14px 8px 2px;font-size:.82rem;color:var(--muted)}
.timeline{position:relative;display:grid;gap:18px}.timeline:before{content:"";position:absolute;left:12px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline-item{position:relative;padding-left:42px}.timeline-item:before{content:"";position:absolute;left:5px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--orange)}
.contact-box{display:grid;grid-template-columns:1fr .92fr;gap:44px;background:var(--blue);border-radius:32px;padding:48px;color:#fff}
.contact-box p{color:rgba(255,255,255,.76)}.form{display:grid;gap:13px}.form input,.form textarea{width:100%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.09);color:#fff;border-radius:14px;padding:15px 16px}
.form textarea{min-height:145px;resize:vertical}.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.68)}
.form-message{display:none;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.12)}.form-message.show{display:block}
.footer{padding:34px 0 42px}.footer-grid{display:flex;justify-content:space-between;gap:24px;color:var(--muted);font-size:.88rem}.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.reveal{opacity:0;transform:translateY(20px);transition:.55s}.reveal.visible{opacity:1;transform:none}
@media(max-width:980px){
 .navlinks{display:none}.mobile-toggle{display:block}.mobile-panel{display:grid;position:fixed;inset:76px 0 0 0;background:rgba(245,247,250,.99);padding:24px 20px;align-content:start;gap:8px;transform:translateX(100%);transition:.25s;z-index:45}
 .mobile-panel.open{transform:none}.mobile-panel a{padding:15px 16px;border-radius:14px;background:#fff;font-weight:800;border:1px solid var(--line)}
 .hero-grid,.page-hero-grid,.profile-grid,.contact-box{grid-template-columns:1fr}.grid-4,.steps{grid-template-columns:1fr 1fr}.challenge-grid,.usecase-grid{grid-template-columns:1fr 1fr}
 .accel-tabs{grid-auto-flow:column;grid-template-columns:1fr 1fr;justify-content:stretch}.photo-card{position:relative;top:auto;max-width:560px}
}
@media(max-width:720px){
 .container{width:min(var(--max),calc(100% - 28px))}section{padding:72px 0}.hero{padding:72px 0 66px}.page-hero{padding:62px 0 58px}
 .section-head{display:block}.section-head>p{max-width:100%;margin-top:16px}.grid-2,.grid-3,.grid-4,.steps,.challenge-grid,.offer-grid,.usecase-grid{grid-template-columns:1fr}
 .am-pair{grid-template-columns:1fr}.accelerator{padding:22px}.accel-tabs{grid-auto-flow:row;grid-template-columns:1fr}.accel-tab{min-width:0}.effect{grid-template-columns:1fr}.effect-arrow{transform:rotate(90deg)}
 .contact-box{padding:30px 22px}.footer-grid{display:block}.footer-links{margin-top:10px}
}
@media(max-width:420px){.container{width:min(var(--max),calc(100% - 22px))}.hero-card,.card,.offer,.explorer{padding:22px}.btn{width:100%}.hero-actions{display:grid}.brand-copy small{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* ==========================================================
   AMcelerate LIGHT PROFESSIONAL THEME
   ----------------------------------------------------------
   ZENTRALE FARBEN:
   - Cool White:   #F5F7FA
   - Deep Navy:    #172033
   - Warm Orange:  #FF8A3D
   - Kobaltblau:   #004AAD (bewusst sparsam)
   ========================================================== */

body{
  background:#F5F7FA;
}

.site-header{
  background:rgba(245,247,250,.96);
  border-bottom:1px solid #E2E7EE;
  box-shadow:0 3px 18px rgba(23,32,51,.035);
}

.eyebrow{color:#172033}
.eyebrow:before{background:#FF8A3D}

.btn-primary{
  background:#FF8A3D;
  color:#172033;
  box-shadow:0 8px 22px rgba(255,138,61,.18);
}
.btn-primary:hover{
  box-shadow:0 12px 30px rgba(255,138,61,.28);
}
.btn-blue{
  background:#172033;
  color:#fff;
}

/* ---------- Echtes Logo im Header ----------
   Groesse ueber die HOEHE steuern, nie ueber die Breite: die Wortmarke
   ist 457x122 und damit knapp 3,75:1 breit. Eine feste Breite ergibt
   zwangslaeufig eine Hoehe, die nicht zu --header (76px) passt -- das
   Logo wuerde aus seinem eigenen Header herauslaufen.
   width:auto haelt das Seitenverhaeltnis, max-height deckelt gegen
   spaetere Logo-Varianten mit anderen Proportionen. */
.brand{
  gap:14px;
  flex:0 0 auto;
}
.site-logo{
  height:42px;
  width:auto;
  max-height:calc(var(--header) - 30px);
  object-fit:contain;
  object-position:left center;
  display:block;
}
.brand-mark,
.brand-copy{
  display:none;
}

/* ---------- Light Hero für Unterseiten ---------- */
.page-hero{
  background:
    radial-gradient(circle at 88% 5%, rgba(0,74,173,.06), transparent 29%),
    radial-gradient(circle at 76% 90%, rgba(255,138,61,.07), transparent 25%),
    #F5F7FA;
  color:#172033;
  padding:104px 0 92px;
  border-bottom:1px solid #E4E9EF;
}
.page-hero:after{
  width:390px;
  height:390px;
  right:-160px;
  top:-190px;
  background:transparent;
  border:1px solid rgba(23,32,51,.07);
}
.page-hero .eyebrow{color:#172033}
.page-hero p{color:#5F6B7D}
.hero-accent{color:#004AAD}

.statbox{
  background:#FFFFFF;
  color:#172033;
  border:1px solid #E1E6ED;
  box-shadow:0 18px 48px rgba(23,32,51,.07);
}
.statbox p{color:#5F6B7D}
.statbox strong{color:#FF8A3D}

section{background:#F5F7FA}
section.bg-white,
.bg-white{background:#FFFFFF}
.bg-navy{background:#172033}

.chip{
  background:#FFFFFF;
  border-color:#DDE3EB;
  color:#172033;
}

/* ---------- Karten ---------- */
.card,
.offer,
.explorer{
  background:#FFFFFF;
  border-color:#E1E6ED;
  box-shadow:0 8px 24px rgba(23,32,51,.035);
}
.card:hover,
.offer:hover{
  border-color:#CBD3DE;
  box-shadow:0 16px 36px rgba(23,32,51,.075);
}
.icon{
  background:#F0F3F7;
  color:#172033;
}

.challenge{
  background:#FFFFFF;
  border-left-color:#FF8A3D;
  box-shadow:0 7px 20px rgba(23,32,51,.035);
}
.challenge h4{color:#172033}

.offer-num{
  background:#172033;
  color:#FFFFFF;
}

/* ---------- Interaktive Use-Case Filter ---------- */
.explorer{
  box-shadow:0 10px 28px rgba(23,32,51,.045);
}
.filter-btn{
  background:#F5F7FA;
  border-color:#DDE3EB;
  color:#172033;
}
.filter-btn.active{
  background:#172033;
  border-color:#172033;
  color:#FFFFFF;
}
.usecase{
  background:#F8FAFC;
  border-color:#E1E6ED;
}
.usecase small{color:#004AAD}

/* ---------- Standard CTA auf Nicht-Kontaktseiten ---------- */
body:not(.page-contact) .contact-box{
  background:#172033;
  color:#fff;
  box-shadow:0 20px 52px rgba(23,32,51,.12);
}
body:not(.page-contact) .contact-box .eyebrow{color:#FFFFFF}
body:not(.page-contact) .contact-box p{color:rgba(255,255,255,.76)}


/* ==========================================================
   BUSINESS IMPACT (AM-Wirkungsnavigator)

   Zeigt die Markenlogik als Bild: Automation und Modernization
   laufen auf AM zusammen, daraus entsteht die Wirkungskette.
   Der Block gehoert ins .accelerator-Grid und spannt beide
   Spalten -- er gilt fuer beide Hebel und bleibt beim Wechsel
   stehen.
   ========================================================== */
.impact{grid-column:1/-1;margin-top:30px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.impact-head{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.impact-head span{text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:800;color:var(--orange);white-space:nowrap}
.impact-head:after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}

.impact-converge{display:grid;justify-items:center}
.conv-levers{display:grid;grid-template-columns:1fr 1fr;width:100%;justify-items:center}
.conv-lever{padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.06);font-weight:800;font-size:.86rem}
/* preserveAspectRatio="none" streckt das SVG auf die Containerbreite; die
   Strichstaerke haelt vector-effect im Markup konstant. */
.conv-lines{width:100%;height:44px;display:block}
.conv-lines path{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2}
.conv-am{display:flex;align-items:center;justify-content:center;gap:3px;width:66px;height:48px;
border-radius:15px;background:rgba(255,138,61,.13);border:1px solid var(--orange);font-weight:800;font-size:1.2rem}
.conv-a{color:#fff}
.conv-m{color:var(--orange)}

/* Wirkungskette: auf breiten Schirmen nebeneinander mit Pfeil dazwischen,
   auf schmalen untereinander -- der Verbinder dreht sich dann mit. */
.impact-chain{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.impact-chain li{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
border-radius:18px;padding:20px 18px;font-weight:800;font-size:1.02rem;line-height:1.3}
.impact-chain li+li:before{content:"→";position:absolute;left:-16px;top:50%;transform:translateY(-50%);
color:var(--orange);font-size:1.15rem;font-weight:900;line-height:1}
.chain-step{display:block;color:var(--orange);font-size:.7rem;letter-spacing:.13em;font-weight:800;margin-bottom:9px}

/* ==========================================================
   STARTSEITE
   ========================================================== */
.page-start .hero{
  background:
    radial-gradient(circle at 88% 8%, rgba(0,74,173,.07), transparent 28%),
    radial-gradient(circle at 80% 78%, rgba(255,138,61,.08), transparent 26%),
    #F5F7FA;
  color:#172033;
  padding:112px 0 100px;
}
.page-start .hero:before{
  width:560px;
  height:560px;
  right:-120px;
  top:-260px;
  border:1px solid rgba(23,32,51,.08);
}
.page-start .hero:after{
  width:340px;
  height:340px;
  right:120px;
  bottom:-230px;
  background:rgba(255,138,61,.07);
}
.page-start .hero .eyebrow{color:#172033}
.page-start .hero p{color:#5F6B7D}
.page-start .hero h1{max-width:900px}
.page-start .hero h1 span{color:#004AAD}
/* Der Basis-.btn-outline ist fuer DUNKLEN Grund gebaut: weisse Schrift,
   heller Rand. Das Light-Theme hat aber sowohl den Start-Hero als auch
   den Page-Hero der Unterseiten auf #F5F7FA gestellt -- dort stand
   weisse Schrift auf hellem Grund und war praktisch unlesbar.
   Beide Faelle teilen sich deshalb dieselbe Regel, damit sie nicht
   wieder auseinanderlaufen. */
.page-start .hero .btn-outline,
.page-hero .btn-outline,
.photo-links .btn-outline{
  border-color:#CCD4DF;
  color:#172033;
  background:rgba(255,255,255,.72);
}
.page-start .hero .btn-outline:hover,
.page-hero .btn-outline:hover,
.photo-links .btn-outline:hover{
  background:#fff;
  border-color:#AEB8C6;
}
.page-start .hero-card{
  background:#FFFFFF;
  color:#172033;
  border:1px solid #E2E7EE;
  box-shadow:0 22px 60px rgba(23,32,51,.09);
}
.page-start .am-big{background:#172033}
.page-start .am-box{
  background:#F8FAFC;
  border-color:#E3E8EF;
}
.page-start .am-box b{color:#172033}
.page-start .outcome-line{
  background:#FFF3EA;
  border:1px solid #FFE0CA;
}
.page-start .card.dark{
  background:#172033;
  border-color:#172033;
}
.page-start .card.dark .eyebrow{color:#fff}
.page-start .card.dark .icon{
  background:rgba(255,255,255,.10);
  color:#FF8A3D;
}
.page-start .industry-band{
  background:#F8FAFC;
  border-color:#E1E6ED;
}
.page-start .accelerator{
  background:#172033;
  box-shadow:0 20px 55px rgba(23,32,51,.12);
}
.page-start .accel-tab.active{
  background:#FF8A3D;
  border-color:#FF8A3D;
}
.page-start .accel-panel{background:#FFFFFF}
.page-start .effect-box{background:#F5F7FA}
.page-start .step{
  background:#FFFFFF;
  border-color:#E1E6ED;
}

/* ==========================================================
   INDUSTRIE-KMU
   ========================================================== */
.page-kmu .bg-navy .card.dark{
  background:#1C273A;
  border-color:#2B374A;
  box-shadow:none;
}
.page-kmu .bg-navy .card.dark:hover{
  border-color:#3B495E;
  transform:translateY(-3px);
}

/* ==========================================================
   HANDWERK
   ========================================================== */
.page-handwerk .bg-soft{
  background:linear-gradient(180deg,#F5F7FA,#FFFFFF);
}
.page-handwerk .accordion-item{
  background:#FFFFFF;
  border-color:#E1E6ED;
  box-shadow:0 5px 16px rgba(23,32,51,.025);
}
.page-handwerk .accordion-btn{
  background:#FFFFFF;
  color:#172033;
}
.page-handwerk .accordion-btn span:last-child{
  color:#FF8A3D;
}

/* ==========================================================
   ÜBER MICH
   ========================================================== */
.page-about .profile-grid{align-items:start}
.page-about .photo-card{
  background:#FFFFFF;
  border-color:#E1E6ED;
  box-shadow:0 16px 42px rgba(23,32,51,.07);
}
.page-about .timeline:before{background:#DCE3EC}
.page-about .timeline-item:before{
  background:#FF8A3D;
  border:4px solid #F5F7FA;
  box-sizing:content-box;
}
.page-about .craft-section{background:#FFFFFF}
.page-about .craft-story{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:28px;
  align-items:start;
}
.page-about .craft-quote{
  position:relative;
  background:#172033;
  color:#fff;
  border-radius:30px;
  padding:42px 38px 34px;
  box-shadow:0 18px 46px rgba(23,32,51,.12);
  overflow:hidden;
}
.page-about .craft-quote:after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  right:-110px;
  bottom:-140px;
  background:rgba(255,138,61,.10);
}
.page-about .craft-quote p{
  position:relative;
  z-index:1;
  color:rgba(255,255,255,.78);
  font-size:1.03rem;
}
.page-about .craft-quote p:first-of-type{
  color:#fff;
  font-size:1.18rem;
  font-weight:700;
}
.page-about .quote-mark{
  display:block;
  color:#FF8A3D;
  font-size:4.5rem;
  line-height:.65;
  font-weight:800;
  margin-bottom:20px;
}
.page-about .craft-reasons{
  display:grid;
  gap:12px;
}
.page-about .reason-card{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:16px;
  padding:21px 22px;
  background:#F5F7FA;
  border:1px solid #E1E6ED;
  border-radius:19px;
}
.page-about .reason-num{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#FFF0E5;
  color:#FF8A3D;
  font-size:.78rem;
  font-weight:800;
}
.page-about .reason-card h3{
  margin:2px 0 7px;
  font-size:1.05rem;
}
.page-about .reason-card p{
  margin:0;
  font-size:.91rem;
}
.page-about .bg-white{background:#F5F7FA}
.page-about .bg-white .card{background:#FFFFFF}

/* ==========================================================
   KONTAKT
   ========================================================== */
.page-contact .contact-box{
  position:relative;
  overflow:hidden;
  background:#FFFFFF;
  color:#172033;
  border:1px solid #E1E6ED;
  box-shadow:0 20px 52px rgba(23,32,51,.08);
}
.page-contact .contact-box:before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  right:-140px;
  top:-140px;
  background:rgba(0,74,173,.045);
}
.page-contact .contact-box .eyebrow{color:#172033}
.page-contact .contact-box p{color:#5F6B7D}
.page-contact .contact-box > *{
  position:relative;
  z-index:1;
}
.page-contact .form{
  background:#172033;
  border-radius:24px;
  padding:26px;
  box-shadow:0 14px 36px rgba(23,32,51,.12);
}
.page-contact .form input,
.page-contact .form textarea{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
}
.page-contact .form input::placeholder,
.page-contact .form textarea::placeholder{
  color:rgba(255,255,255,.62);
}
.page-contact .form input:focus,
.page-contact .form textarea:focus{
  outline:none;
  border-color:#FF8A3D;
  background:rgba(255,255,255,.11);
}
.page-contact .form-message{
  background:rgba(255,255,255,.10);
  color:#fff;
}
.page-contact .footer{background:#F5F7FA}

/* ==========================================================
   RESPONSIVE / TABLET / SMARTPHONE
   ========================================================== */
@media(max-width:980px){
  .site-logo{height:38px}
  .page-about .craft-story{grid-template-columns:1fr}
}
@media(max-width:720px){
  .page-start .hero{padding:78px 0 72px}
  .page-hero{padding:76px 0 68px}
  .site-logo{height:34px}
  .page-about .craft-quote{padding:32px 25px 27px}
  .page-about .reason-card{grid-template-columns:42px 1fr;padding:18px}
  .page-contact .contact-box{padding:28px 20px}
  .page-contact .form{padding:22px}
}


/* AM-Markenblock auf kleinen Smartphones */
@media(max-width:420px){
  .am-lockup{
    grid-template-columns:76px 1fr;
    gap:14px;
  }
  .am-big{
    width:76px;
    height:58px;
    font-size:1.35rem;
  }
}


/* ==========================================================
   RECHTSSEITEN (impressum.html, datenschutz.html)

   Fließtext braucht eine schmalere Spalte als das Raster der
   Startseite: bei den 1180px aus --max reißen die Zeilen so
   weit auf, dass das Auge die nächste Zeile nicht mehr findet.
   68 Zeichen sind die bequeme Lesebreite.

   .legal-todo markiert Angaben, die noch fehlen. Bewusst
   auffällig – wer die Seite freigibt, soll darüber stolpern.
   Wenn alle Angaben stehen, gibt es keinen Kasten mehr.
   ========================================================== */
.legal-hero{padding:64px 0 44px}
.legal-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.legal{max-width:68ch}
.legal h2{font-size:clamp(1.25rem,2.1vw,1.6rem);margin:44px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--muted)}
.legal ul{margin:0 0 18px;padding-left:22px}
.legal li{margin-bottom:7px}
.legal a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--orange)}
.legal code{font-size:.92em;background:var(--softblue);padding:2px 6px;border-radius:6px;color:var(--navy)}
.legal-todo{background:var(--softorange);border:1px solid var(--orange);border-radius:14px;
padding:16px 18px;color:var(--navy)}


/* ==========================================================
   KONTAKTFORMULAR – Zustände und Honeypot

   .hp ist das Honeypot-Feld: für Menschen unsichtbar, für
   Automaten sichtbar. Bewusst NICHT display:none – manche
   Bots überspringen ausgeblendete Felder gezielt. Es steht
   deshalb außerhalb des Sichtfelds statt versteckt.
   ========================================================== */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-note{margin:2px 0 0;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.62)}
.form-note a{color:#FF8A3D;text-decoration:underline;text-underline-offset:3px}
.form-message.is-error{background:rgba(255,138,61,.18);border:1px solid rgba(255,138,61,.55)}
.form button[type=submit][disabled]{opacity:.55;cursor:progress;transform:none}


/* ==========================================================
   BUSINESS IMPACT – RESPONSIVE

   Die Kette liegt auf breiten Schirmen nebeneinander. Wird sie
   einspaltig, muss der Verbinder von "→" auf "↓" kippen, sonst
   zeigt der Pfeil ins Leere.
   ========================================================== */
@media(max-width:820px){
  .impact-chain{grid-template-columns:1fr;gap:30px}
  .impact-chain li+li:before{left:50%;top:-22px;transform:translateX(-50%) rotate(90deg)}
}
@media(max-width:520px){
  .conv-lever{padding:8px 12px;font-size:.78rem}
  .conv-lines{height:36px}
  .impact-head{gap:12px}
  .impact-chain li{padding:17px 16px;font-size:.96rem}
}


/* ==========================================================
   AKKORDEON – Zustandsanzeige

   Das "+" stand fest im Markup und blieb beim Aufklappen ein
   "+". Zeichen kommt jetzt aus dem CSS und folgt dem Zustand.
   ========================================================== */
.accordion-icon{flex:0 0 auto;width:1em;text-align:center;color:var(--orange);font-weight:900;line-height:1}
.accordion-icon:before{content:"+"}
.accordion-item.open .accordion-icon:before{content:"\2212"}


/* Schaltflaeche unter dem Portrait (LinkedIn o. ae.) -- liegt bereit,
   greift erst, wenn der Block in ueber-mich.html aktiviert wird. */
.photo-links{padding:4px 8px 6px;display:grid}
.photo-links .btn{min-height:44px}
/* Die Karte ist weiss: der Button braucht hier einen kraeftigeren
   Rand als auf dem hellgrauen Hero-Grund, sonst verschwindet er. */
.photo-links .btn-outline{background:#fff;border-color:#C3CCDA}


/* ==========================================================
   UMBRUCH LANGER WOERTER

   Lange deutsche Komposita ("Transformationspartner") sind in
   grossen Ueberschriftgraden breiter als eine schmale Spalte.
   Grid- und Flex-Items schrumpfen per Default NICHT unter ihre
   Inhaltsbreite (min-width:auto) -- das Wort schiebt dann die
   ganze Seite auf und erzeugt horizontales Scrollen.
   hyphens:auto greift, weil <html lang="de"> gesetzt ist.
   ========================================================== */
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto}
/* Die grosse H1 wird NICHT getrennt: in diesem Schriftgrad faellt
   jede Trennfuge auf ("Accelerate pro-cesses"), und lange Komposita
   stehen ohnehin in den kleineren Graden. Gegen echten Ueberlauf
   schuetzt overflow-wrap weiterhin -- nur eben ohne Bindestrich. */
h1{hyphens:manual}
.contact-box>*,.hero-grid>*,.page-hero-grid>*,.profile-grid>*{min-width:0}


/* Portrait: Foto ist 2:3, die Karte zeigt 4:5. Mittiges "cover" wuerde
   oben in den Kopf schneiden -- der Beschnitt gehoert nach unten.
   height:auto ist noetig, weil das height-Attribut im HTML sonst die
   Hoehe festnagelt und aspect-ratio wirkungslos macht. Das Attribut
   bleibt trotzdem stehen: es reserviert den Platz vor dem Laden. */
.photo-card img{height:auto;object-position:50% 12%}


/* Das inaktive Panel steht im HTML und ist nur ausgeblendet.
   Ohne diese Regel wuerde eine spaetere display-Angabe das
   hidden-Attribut aushebeln. */
.accel-panel[hidden]{display:none}


/* ==========================================================
   SPRACHUMSCHALTER

   Sitzt in der Navigation direkt vor dem Kontakt-Button und
   traegt links einen Trenner, damit er nicht als weiterer
   Menuepunkt gelesen wird. Die aktive Sprache ist bewusst kein
   Link -- ein Link auf die Seite, auf der man schon steht,
   verwirrt mehr als er nuetzt.
   ========================================================== */
.lang-switch{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:800;
padding-left:20px;margin-left:2px;border-left:1px solid var(--line)}
.lang-switch .lang-active{color:var(--navy)}
.lang-switch a{color:#98A3B3}
.lang-switch a:hover{color:var(--blue)}

/* Im aufgeklappten Mobilmenue steht die andere Sprache als eigene,
   ausgeschriebene Zeile -- "DE | EN" waere dort zu klein zu treffen. */
.mobile-lang{color:var(--blue)}
@media(max-width:980px){
  .mobile-panel .mobile-lang{background:var(--softblue);border-color:#CBDCF3}
}


/* ==========================================================
   SELBSTTEST "Sechs Fragen, ein Bild" (selbsttest.html)

   Eigener Praefix st-, damit nichts mit bestehenden Klassen
   kollidiert. Das Formular heisst bewusst NICHT .form: script.js
   haengt sich an das erste .form der Seite und wuerde es sonst
   ein zweites Mal absenden.

   Farblogik wie im Workshop-Deck: Dach (Nutzen) orange, Ebenen
   navy, Saeulen kobalt. Der Engpass traegt einen orangen Rahmen.
   ========================================================== */
.st-section{padding:64px 0 92px}
.st-app{max-width:980px;margin:0 auto}
.st-screen[hidden],.st-app [hidden]{display:none!important}
.st-card{background:#fff;border:1px solid #E1E6ED;border-radius:28px;padding:40px;box-shadow:0 18px 48px rgba(23,32,51,.07);max-width:820px;margin:0 auto}
.st-kicker{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;font-weight:800;color:var(--orange);margin-bottom:10px}
.st-title{display:block;font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.2;letter-spacing:-.025em;font-weight:800;color:var(--navy);margin:0 0 12px;outline:none}
.st-hint{font-size:.95rem;margin:0 0 20px}
.st-noscript,.st-loadfail{background:var(--softorange);border:1px solid var(--orange);border-radius:14px;padding:16px 18px;color:var(--navy)}
.st-noscript a,.st-loadfail a{color:var(--blue);font-weight:700;text-decoration:underline}

/* Weiche */
.st-branches{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.st-branch{display:grid;gap:6px;text-align:left;padding:24px;border-radius:20px;border:1px solid var(--line);background:var(--bg);color:var(--navy);cursor:pointer;transition:.18s}
.st-branch strong{font-size:1.12rem}
.st-branch span{color:var(--muted);font-size:.92rem;line-height:1.45}
.st-branch:hover,.st-branch:focus-visible{border-color:var(--orange);background:#fff;box-shadow:0 12px 30px rgba(23,32,51,.08);transform:translateY(-2px);outline:none}

/* Fortschritt */
.st-progress{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.st-count{flex:0 0 auto;font-size:.85rem;font-weight:700;color:var(--muted)}
.st-count b{color:var(--navy)}
.st-bar{flex:1;height:6px;border-radius:99px;background:#EDF1F5;overflow:hidden}
.st-bar span{display:block;height:100%;width:0;background:var(--orange);border-radius:99px;transition:width .3s}

/* Frage + Antworten */
.st-q{border:0;margin:0;padding:0;min-width:0}
.st-q legend{padding:0;margin-bottom:6px;width:100%}
.st-options{display:grid;gap:10px}
.st-option{display:flex;gap:14px;align-items:flex-start;padding:15px 18px;border:1px solid var(--line);border-radius:16px;background:var(--bg);cursor:pointer;transition:.15s;line-height:1.5}
.st-option:hover{border-color:#C3CCDA;background:#fff}
.st-option input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--orange)}
.st-option span{color:var(--navy)}
.st-option:has(input:checked){border-color:var(--orange);background:var(--softorange)}
.st-option:has(input:focus-visible){outline:3px solid rgba(0,74,173,.35);outline-offset:2px}
.st-option.is-unknown{background:transparent;border-style:dashed}
.st-option.is-unknown span{color:var(--muted)}
.st-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px}
.st-back{border:0;background:none;padding:10px 0;font-weight:800;color:var(--muted);cursor:pointer}
.st-back:before{content:"\2190  "}
.st-back:hover{color:var(--navy)}
.st-nav .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* Ergebnis */
.st-result-head{max-width:820px;margin-bottom:34px}
.st-result-head .st-title{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.st-accent{color:var(--blue)}
.st-result-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start;margin-bottom:56px}
.st-result-grid>*{min-width:0}

/* Das Bild: Dach, drei Ebenen, zwei Saeulen */
.st-house{margin:0;background:#fff;border:1px solid #E1E6ED;border-radius:28px;padding:26px;box-shadow:0 18px 48px rgba(23,32,51,.07)}
.st-roof{position:relative;display:grid;justify-items:center;text-align:center;gap:4px;padding:30px 20px 18px;margin-bottom:10px;
background:var(--orange);color:var(--navy);clip-path:polygon(50% 0,100% 42%,100% 100%,0 100%,0 42%);border-radius:0 0 14px 14px}
.st-roof .st-block-el{color:var(--navy);opacity:.75;margin-top:14px}
.st-roof strong{font-size:1.02rem;line-height:1.3}
.st-body{display:grid;grid-template-columns:1fr 2.2fr 1fr;gap:10px}
.st-floors{display:grid;gap:10px}
.st-block{position:relative;display:grid;align-content:center;gap:3px;padding:16px;border-radius:14px;color:#fff;border:3px solid transparent}
.st-ebene{background:var(--navy)}
.st-saeule{background:var(--blue);align-content:center;text-align:center;justify-items:center}
.st-block-el{font-size:.95rem;font-weight:800;line-height:1.25;color:#fff}
.st-block-name{font-size:.74rem;opacity:.72;line-height:1.3}
.st-block-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:8px}
.st-saeule .st-block-row{justify-content:center}
.st-dots{display:inline-flex;gap:4px}
.st-dots i{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55)}
.st-dots i.on{background:#fff;border-color:#fff}
.st-block-lvl{font-size:.74rem;font-weight:800;letter-spacing:.04em;opacity:.85}
.st-block.is-engpass{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,138,61,.22)}
.st-block.is-engpass .st-dots i.on{background:var(--orange);border-color:var(--orange)}
.st-tag{position:absolute;top:-11px;right:12px;background:var(--orange);color:var(--navy);font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.st-saeule .st-tag{right:50%;transform:translateX(50%)}

/* Befunde rechts */
.st-findings{display:grid;gap:16px}
.st-step{background:#fff;border:1px solid #E1E6ED;border-left:4px solid var(--orange);border-radius:18px;padding:22px 24px}
.st-step p{color:var(--navy);margin:0;font-weight:600}
.st-note{margin:0;padding:15px 18px;border-radius:14px;background:var(--softblue);color:var(--navy);font-size:.94rem}
.st-limit{margin:0;font-size:.84rem;line-height:1.55}
.st-actions{display:flex;flex-wrap:wrap;gap:8px 18px}
.st-link{border:0;background:none;padding:4px 0;font-weight:800;font-size:.9rem;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.st-link:hover{color:var(--orange)}
.st-copy-msg{margin:0;font-size:.84rem;overflow-wrap:anywhere}
.st-copy-msg:empty{display:none}

/* Naechster Schritt + Formular (liegt auf der navy contact-box) */
.st-cta .checklist .check{color:#fff}
.st-cta .check:before{background:rgba(255,138,61,.2)}
.st-form{display:grid;gap:13px;align-content:start}
.st-form-intro{margin:0 0 4px;color:#fff!important;font-weight:700}
.st-form input[type=email],.st-form input[type=text]{width:100%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.09);color:#fff;border-radius:14px;padding:15px 16px}
.st-form input::placeholder{color:rgba(255,255,255,.68)}
.st-check{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid rgba(255,255,255,.22);border-radius:14px;cursor:pointer;line-height:1.45}
.st-check input{flex:0 0 auto;width:19px;height:19px;margin:1px 0 0;accent-color:var(--orange)}
.st-check span{color:#fff;font-size:.94rem}
.st-check:has(input:checked){border-color:var(--orange);background:rgba(255,138,61,.12)}
.st-form button[type=submit][disabled]{opacity:.55;cursor:progress;transform:none}

/* Einstiegs-Teaser auf Start, Industrie und Handwerk */
.st-teaser{display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center;background:#fff;border:1px solid #E1E6ED;border-left:5px solid var(--orange);border-radius:26px;padding:34px 38px;box-shadow:0 12px 32px rgba(23,32,51,.05)}
.st-teaser h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:10px}
.st-teaser p{margin:0}
.st-teaser-action{display:grid;gap:10px;justify-items:start}
.st-teaser-action small{color:var(--muted);font-size:.84rem}
.st-teaser>*{min-width:0}

@media(max-width:980px){
  .st-result-grid{grid-template-columns:1fr}
  .st-house{max-width:640px}
  .st-teaser{grid-template-columns:1fr;gap:20px}
}
@media(max-width:720px){
  .st-section{padding:40px 0 72px}
  .st-card{padding:26px 20px;border-radius:22px}
  .st-branches{grid-template-columns:1fr}
  .st-house{padding:16px}
  /* Auf schmalen Schirmen wandern die Saeulen unter die Ebenen --
     nebeneinander blieben fuer "Worauf wir uns verlassen" keine 120px. */
  .st-body{grid-template-columns:1fr 1fr}
  .st-floors{grid-column:1/-1;order:-1}
  .st-teaser{padding:26px 22px}
}
@media(max-width:420px){
  .st-nav .btn{width:auto;flex:1}
}

/* Druck / PDF: nur das Ergebnis, ohne Navigation und Formular. */
@media print{
  .site-header,.mobile-panel,.page-hero,.footer,.st-cta,.st-actions,.st-copy-msg{display:none!important}
  body,section{background:#fff!important}
  .st-section{padding:0}
  .st-result-grid{grid-template-columns:1fr 1fr;gap:20px}
  .st-house,.st-step{box-shadow:none}
  .st-roof,.st-block,.st-dots i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .reveal{opacity:1!important;transform:none!important}
}
/* Der Teaser steht direkt vor dem Abschluss-CTA: kein doppelter Abstand. */
.st-teaser-wrap{padding-bottom:0}