/* =========================================================================
   Ergänzungen für die Bau-Seiten (automatisierung-bau.html und die drei
   Zielgruppen-Seiten). Baut auf style.css auf und nutzt dieselben Farben:
   keine neuen Farbtöne, nur neue Bausteine.
   ========================================================================= */

.bau-lead{
  font-size:20px;
  line-height:1.5;
  color:var(--navy-text);
  margin:0 0 26px;
  max-width:680px;
}

.bau-kicker{
  display:inline-block;
  font-size:14px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rule);
  margin:0 0 12px;
}

.bau-actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin:0 0 8px}
.bau-actions .btn-cta{margin:0}
.bau-actions .bau-secondary{font-weight:700;color:var(--navy)}

/* Zielgruppen-Kacheln */
.bau-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.bau-tile{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px 18px 16px;
  border:1px solid rgba(29,50,105,.18);
  border-radius:12px;
  text-decoration:none;
  color:var(--navy-text);
  background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.bau-tile:hover{border-color:var(--navy);box-shadow:0 6px 20px rgba(0,33,75,.08)}
.bau-tile strong{font-size:18px;color:var(--navy);line-height:1.25}
.bau-tile span{font-size:15px;line-height:1.45}
.bau-tile em{font-style:normal;font-weight:800;font-size:14px;color:var(--navy);margin-top:auto}

/* Vorher / Nachher */
.bau-flow{
  border:1px solid rgba(29,50,105,.18);
  border-radius:12px;
  padding:18px 20px;
  margin:16px 0;
}
.bau-flow h3{font-size:19px;font-weight:800;color:var(--navy);margin:0 0 10px}
.bau-flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bau-flow-grid p{margin:0;font-size:16px;line-height:1.5}
.bau-flow-grid b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--rule);margin-bottom:4px}
.bau-flow-note{font-size:14px;color:var(--rule);margin:10px 0 0}

/* Werkzeug-Liste für die IT */
.bau-tools{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px;padding:0;list-style:none}
.bau-tools li{
  margin:0;
  padding:6px 12px;
  border-radius:999px;
  background:#eef2f9;
  color:var(--navy);
  font-size:15px;
  font-weight:700;
  line-height:1.2;
}
.bau-tools li::before{content:none}

.bau-source{font-size:14px;color:var(--rule)}

/* Ablauf in vier Schritten */
.bau-steps{counter-reset:bau;list-style:none;padding:0;margin:14px 0 0}
.bau-steps li{counter-increment:bau;position:relative;padding-left:44px;margin:0 0 14px}
.bau-steps li::before{
  content:counter(bau);
  position:absolute;left:0;top:1px;
  width:30px;height:30px;border-radius:50%;
  background:var(--navy);color:var(--white);
  font-weight:800;font-size:15px;line-height:30px;text-align:center;
}

/* Abschluss-Aufruf */
.bau-cta{
  margin:52px 0 12px;
  padding:26px 24px;
  border-radius:14px;
  background:var(--grad);
  color:var(--white);
}
.bau-cta p{color:var(--white);font-size:18px;line-height:1.5;margin:0 0 16px}
.bau-cta a.bau-cta-btn{
  display:inline-block;
  padding:10px 26px;
  border-radius:8px;
  background:var(--white);
  color:var(--navy);
  font-weight:800;
  text-decoration:none;
}
.bau-cta a.bau-cta-btn:hover{background:#e8edf6}
.bau-cta .bau-cta-alt{color:var(--white);margin-left:16px;font-weight:700}

.bau-faq{margin-top:40px}

@media (max-width:720px){
  .bau-lead{font-size:18px}
  .bau-tiles{grid-template-columns:1fr}
  .bau-flow-grid{grid-template-columns:1fr}
  .bau-cta .bau-cta-alt{display:block;margin:12px 0 0}
}

/* Die Textseiten (.legal) rücken Listen ein und unterstreichen Links – für
   Kacheln, Werkzeug-Liste und Schritte nicht gewollt. */
.legal .bau-tiles,.legal .bau-tools,.legal .bau-steps{padding-left:0}
.legal .bau-tiles > li,.legal .bau-tools > li{margin-bottom:0}
.legal a.bau-tile,.legal a.bau-tile:hover{text-decoration:none;opacity:1}
.legal .bau-cta a.bau-cta-btn,.legal .bau-cta a.bau-cta-alt{text-decoration:none}
.legal .bau-cta a.bau-cta-alt{color:var(--white)}
.legal .bau-cta a.bau-cta-alt:hover{text-decoration:underline}
.bau-actions .btn-cta{min-width:0}
.site-header .btn-nav{white-space:nowrap}

/* =========================================================================
   Kopfbereich mit bewegtem Farbverlauf in der Microsoft-Copilot-Palette
   (#ee5091 · #199fd7 · #99bd3c · #fc7942 · #8a50d8). Reines CSS: große,
   weichgezeichnete Farbflächen wandern langsam. Bei „weniger Bewegung“ stehen
   sie still. Kopfleiste und Hero liegen gemeinsam auf dem Verlauf.
   ========================================================================= */
:root{
  --cp-pink:#ee5091; --cp-blue:#199fd7; --cp-green:#99bd3c; --cp-orange:#fc7942; --cp-purple:#8a50d8;
}
.bau-top{position:relative;isolation:isolate;overflow:hidden;background:#fbfbfe}
.bau-mesh{position:absolute;inset:-25% -10% -10%;z-index:-2;filter:blur(70px) saturate(1.15);opacity:.62;pointer-events:none}
.bau-mesh span{position:absolute;width:48vmax;height:48vmax;border-radius:50%;will-change:transform}
.bau-mesh .m1{background:radial-gradient(circle,var(--cp-blue) 0%,transparent 64%);left:-8%;top:-4%;animation:bau-drift-a 22s ease-in-out infinite alternate}
.bau-mesh .m2{background:radial-gradient(circle,var(--cp-purple) 0%,transparent 64%);left:28%;top:-18%;animation:bau-drift-b 26s ease-in-out infinite alternate}
.bau-mesh .m3{background:radial-gradient(circle,var(--cp-pink) 0%,transparent 62%);right:-10%;top:-6%;animation:bau-drift-c 24s ease-in-out infinite alternate}
.bau-mesh .m4{background:radial-gradient(circle,var(--cp-orange) 0%,transparent 60%);right:8%;top:30%;animation:bau-drift-b 30s ease-in-out infinite alternate-reverse}
.bau-mesh .m5{background:radial-gradient(circle,var(--cp-green) 0%,transparent 60%);left:4%;top:34%;animation:bau-drift-a 28s ease-in-out infinite alternate-reverse}
@keyframes bau-drift-a{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.12)}100%{transform:translate(-4vw,10vh) scale(.95)}}
@keyframes bau-drift-b{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-10vw,8vh) scale(1.08)}100%{transform:translate(6vw,-4vh) scale(1.15)}}
@keyframes bau-drift-c{0%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-6vw,12vh) scale(.92)}100%{transform:translate(-12vw,2vh) scale(1.1)}}
/* weicher Übergang in die weiße Seite */
.bau-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:-1;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
@media (prefers-reduced-motion:reduce){.bau-mesh span{animation:none}}

.bau-hero{padding:64px 0 96px}
.bau-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px 7px 8px;border-radius:999px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 12px rgba(0,33,75,.08);
  color:var(--navy);font-size:15px;font-weight:800;margin:0 0 22px;
}
.bau-badge i{display:inline-grid;grid-template-columns:7px 7px;gap:2px}
.bau-badge i b{width:7px;height:7px;border-radius:1.5px;display:block}
.bau-badge i b:nth-child(1){background:var(--cp-orange)}.bau-badge i b:nth-child(2){background:var(--cp-green)}
.bau-badge i b:nth-child(3){background:var(--cp-blue)}.bau-badge i b:nth-child(4){background:var(--cp-purple)}
.bau-hero h1{font-size:50px;font-weight:800;line-height:1.08;letter-spacing:-.015em;color:var(--navy);margin:0 0 20px;max-width:760px}
.bau-hero h1 .bau-grad{
  background:linear-gradient(90deg,var(--cp-blue),var(--cp-purple) 45%,var(--cp-pink) 80%,var(--cp-orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bau-hero .bau-lead{max-width:640px}
.bau-hero .bau-actions .btn-cta{padding:13px 22px 14px;border-radius:8px;box-shadow:0 8px 24px rgba(0,33,75,.18)}
.bau-hero .bau-secondary{color:var(--navy)}
.bau-hero-apps{display:flex;flex-wrap:wrap;gap:8px 18px;margin:30px 0 0;padding:0;list-style:none;font-size:15px;font-weight:700;color:var(--navy-text)}
.bau-hero-apps li{display:flex;align-items:center;gap:7px}
.bau-hero-apps li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot,var(--cp-blue))}
.legal.bau-main{padding-top:8px}
@media (max-width:720px){
  .bau-hero{padding:40px 0 64px}
  .bau-hero h1{font-size:34px}
  .bau-mesh{filter:blur(50px) saturate(1.15)}
}

/* =========================================================================
   „So läuft eine Automatisierung“: Prozesskette mit Schritt-Auswahl und
   Schalter für die KI-Variante (EU / lokal). Ohne JavaScript bleiben alle
   Schritte als Liste lesbar.
   ========================================================================= */
.pipe-box{border:1px solid rgba(29,50,105,.16);border-radius:16px;padding:20px;margin:18px 0 8px;background:linear-gradient(180deg,#fbfbfe,#fff)}
.pipe-switch{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;font-size:15px;font-weight:700;color:var(--navy)}
.pipe-seg{display:inline-flex;padding:4px;border-radius:999px;background:#eef2f9}
.pipe-seg button{border:0;background:transparent;font:inherit;font-size:14px;font-weight:800;color:var(--navy-text);padding:7px 14px;border-radius:999px;cursor:pointer}
.pipe-seg button[aria-pressed="true"]{background:var(--white);color:var(--navy);box-shadow:0 2px 8px rgba(0,33,75,.12)}
.pipe-steps{position:relative;z-index:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin:0;padding:0;list-style:none}
.pipe-steps li{margin:0;position:relative}
.pipe-steps li::before{content:none}
.pipe-step{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;font:inherit;cursor:pointer;padding:0 2px;color:var(--navy-text)}
.pipe-dot{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px solid rgba(29,50,105,.18);color:var(--navy);transition:transform .2s ease,border-color .35s ease,box-shadow .2s ease,background-color .35s ease,color .35s ease}
.pipe-dot svg{width:24px;height:24px}
.pipe-step b{font-size:15px;color:var(--navy);line-height:1.2;text-align:center}
.pipe-step small{font-size:13px;color:var(--rule);text-align:center;line-height:1.3}
.pipe-step[aria-selected="true"] .pipe-dot{border-color:var(--c,var(--cp-blue));box-shadow:0 0 0 6px color-mix(in srgb,var(--c,var(--cp-blue)) 18%,transparent);transform:scale(1.06)}
.pipe-step:hover .pipe-dot{border-color:var(--c,var(--cp-blue))}
.pipe-step:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:8px}
/* Ladebalken: graue Schiene, darüber der Farbverlauf, per clip-path Knoten für Knoten freigegeben */
.pipe-rail{position:absolute;left:0;top:0;width:0;height:3px;border-radius:3px;background:rgba(29,50,105,.10);pointer-events:none}
.pipe-fill{position:absolute;inset:0;border-radius:3px;overflow:hidden;
  background:linear-gradient(90deg,var(--cp-blue),var(--cp-purple),var(--cp-pink),var(--cp-orange),var(--cp-green));
  box-shadow:0 0 10px color-mix(in srgb,var(--cp-purple) 45%,transparent);
  clip-path:inset(0 100% 0 0);transition-property:clip-path,opacity;transition-timing-function:cubic-bezier(.65,0,.35,1)}
.pipe-rail.is-v .pipe-fill{background:linear-gradient(180deg,var(--cp-blue),var(--cp-purple),var(--cp-pink),var(--cp-orange),var(--cp-green));clip-path:inset(0 0 100% 0)}
.pipe-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.75) 50%,transparent 100%);
  background-size:120px 100%;background-repeat:no-repeat;animation:pipe-sheen 1.6s linear infinite}
.pipe-rail.is-v .pipe-fill::after{background:linear-gradient(180deg,transparent 0,rgba(255,255,255,.75) 50%,transparent 100%);background-size:100% 120px;background-repeat:no-repeat;animation-name:pipe-sheen-v}
@keyframes pipe-sheen{from{background-position:-120px 0}to{background-position:calc(100% + 120px) 0}}
@keyframes pipe-sheen-v{from{background-position:0 -120px}to{background-position:0 calc(100% + 120px)}}
.pipe-rail.is-fade .pipe-fill{opacity:0;transition-duration:.7s!important}
.pipe-step.is-lit .pipe-dot{background:var(--c,var(--cp-blue));border-color:var(--c,var(--cp-blue));color:var(--white)}
.pipe-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--c,var(--cp-blue));opacity:0;pointer-events:none}
.pipe-step.is-lit .pipe-dot::after{animation:pipe-pop .75s ease-out}
@keyframes pipe-pop{from{transform:scale(1);opacity:.7}to{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){.pipe-fill::after,.pipe-step.is-lit .pipe-dot::after{animation:none}.pipe-fill,.pipe-dot{transition:none}}
.pipe-panel{margin:20px 0 0;padding:16px 18px;border-radius:12px;background:#f6f8fc;min-height:120px}
.pipe-panel h3{font-size:18px;font-weight:800;color:var(--navy);margin:0 0 6px}
.pipe-panel p{margin:0 0 8px;font-size:16px;line-height:1.55}
.pipe-panel .pipe-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.pipe-panel .pipe-tags li{margin:0;padding:4px 10px;border-radius:999px;background:var(--white);font-size:13px;font-weight:700;color:var(--navy)}
.pipe-panel .pipe-tags li::before{content:none}
.pipe-where{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--navy-text)}
.pipe-where::before{content:"";flex:0 0 10px;height:10px;margin-top:6px;border-radius:50%;background:var(--cp-green)}
.pipe-fallback{margin:0;padding-left:20px}
@media (max-width:720px){
  .pipe-steps{grid-auto-flow:row;grid-template-columns:1fr;gap:8px}
  .pipe-step{flex-direction:row;align-items:center;gap:12px;text-align:left}
  .pipe-step b,.pipe-step small{text-align:left}
  .pipe-step span.pipe-txt{display:flex;flex-direction:column}
}

/* Konnektoren: zwei Spalten, Microsoft-Ökosystem und eigene Konnektoren */
.conn-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 6px}
.conn-card{border:1px solid rgba(29,50,105,.16);border-radius:14px;padding:18px}
.conn-card h3{font-size:18px;font-weight:800;color:var(--navy);margin:0 0 6px}
.conn-card p{font-size:15px;line-height:1.5;margin:0 0 10px}
.conn-card.is-own{background:linear-gradient(135deg,rgba(138,80,216,.07),rgba(238,80,145,.07))}
@media (max-width:720px){.conn-grid{grid-template-columns:1fr}}
.pipe-track{position:relative}
.bau-badge a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.bau-badge i b{border-radius:50%}
.pipe-txt{display:flex;flex-direction:column;align-items:center;gap:3px}
@media (max-width:720px){.pipe-txt{align-items:flex-start}}

/* Abzeichen mit Logo */
.bau-badge img{display:block;width:22px;height:auto}

/* Kennzahlen „Warum sich das lohnt“ */
.legal .bau-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 8px;padding:0;list-style:none}
.legal .bau-stats li{margin:0;padding:18px;border-radius:14px;border:1px solid rgba(29,50,105,.14);background:linear-gradient(160deg,rgba(25,159,215,.08),rgba(138,80,216,.08) 55%,rgba(238,80,145,.06))}
.bau-stats strong{display:block;font-size:34px;line-height:1.1;font-weight:800;margin-bottom:8px;
  background:linear-gradient(90deg,var(--cp-blue),var(--cp-purple),var(--cp-pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.bau-stats span{display:block;font-size:15px;line-height:1.45;color:var(--navy-text)}
@media (max-width:720px){.legal .bau-stats{grid-template-columns:1fr}}


.bau-badge img{width:26px}

/* =========================================================================
   Workflow-Check: Betrieb → Ablauf → Programme → Zahlen → ehrliche Auswertung
   ========================================================================= */
.wc-intro{font-size:17px}
.wc{margin:18px 0 12px;padding:22px;border-radius:18px;border:1px solid rgba(29,50,105,.14);
  background:linear-gradient(160deg,rgba(25,159,215,.06),rgba(138,80,216,.06) 50%,rgba(238,80,145,.04))}
.wc-noscript{margin:0;font-size:16px}
.wc-q{border:0;margin:0 0 22px;padding:0;min-width:0}
.wc-q legend{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;color:var(--navy);margin:0 0 10px;padding:0}
.wc-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--white);font-size:14px;flex:none}
.wc-sub{font-size:15.5px;font-weight:800;color:var(--navy);margin:12px 0 8px}
.wc-opt{font-weight:600;font-size:13px;color:var(--rule);margin-left:6px}
.wc-hint{font-size:14px;color:var(--rule);margin:-4px 0 10px}
.wc-pills{display:flex;flex-wrap:wrap;gap:8px}
.wc-pills label{position:relative;cursor:pointer;margin:0}
.wc-pills input{position:absolute;opacity:0;pointer-events:none}
.wc-pills span{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--white);border:1px solid rgba(29,50,105,.2);
  font-size:15px;font-weight:700;color:var(--navy);transition:background .15s ease,border-color .15s ease,color .15s ease}
.wc-pills label:hover span{border-color:var(--navy)}
.wc-pills input:checked + span{background:var(--navy);border-color:var(--navy);color:var(--white)}
.wc-pills input:focus-visible + span,.wc-card input:focus-visible + span{outline:2px solid var(--cp-blue);outline-offset:2px}
.wc-range-label{display:block;font-size:15.5px;font-weight:800;color:var(--navy);margin:16px 0 8px}
.wc-range{display:flex;align-items:center;gap:14px;max-width:520px}
.wc-range input{flex:1;accent-color:var(--cp-purple)}
.wc-range output{min-width:48px;padding:6px 10px;border-radius:8px;background:var(--white);border:1px solid rgba(29,50,105,.2);font-weight:800;color:var(--navy);text-align:center}
.wc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.wc-card{position:relative;cursor:pointer;margin:0}
.wc-card input{position:absolute;opacity:0;pointer-events:none}
.wc-card span{display:flex;flex-direction:column;gap:4px;height:100%;padding:14px 16px;border-radius:12px;background:var(--white);
  border:1px solid rgba(29,50,105,.16);transition:border-color .15s ease,box-shadow .15s ease}
.wc-card b{font-size:16px;color:var(--navy);line-height:1.3}
.wc-card small{font-size:14px;line-height:1.45;color:var(--navy-text)}
.wc-card em{font-style:normal;font-size:13px;font-weight:700;color:var(--cp-purple)}
.wc-card:hover span{border-color:var(--navy)}
.wc-card input:checked + span{border-color:var(--cp-purple);box-shadow:0 0 0 3px color-mix(in srgb,var(--cp-purple) 22%,transparent)}
.wc-card.is-eigen span{border-style:dashed}
.wc-eigen{margin:0 0 18px}
.wc-eigen label{display:block;font-weight:800;color:var(--navy);margin:0 0 8px}
.wc-eigen textarea{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid rgba(29,50,105,.25);border-radius:10px;resize:vertical;box-sizing:border-box}
.wc-preview{margin:0 0 22px}
.wc-preview .pipe-box{margin:0;background:var(--white)}
.wc-slot + .wc-slot{margin-top:4px}
.wc-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wc-zahl{display:flex;flex-direction:column;gap:8px;font-size:15px;font-weight:700;color:var(--navy);margin:0}
.wc-zahl input{font:inherit;font-size:17px;font-weight:800;color:var(--navy);padding:10px 12px;border:1px solid rgba(29,50,105,.25);border-radius:10px;max-width:220px;background:var(--white)}
.wc-go .btn-cta{min-width:0;padding:12px 22px;border-radius:8px}
.wc-privacy{font-size:13.5px;color:var(--rule);margin:12px 0 0}
/* Ablauf: Zeitgewinn-Markierung erscheint mit der Auswertung */
.pipe-wert{display:none;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.02em;color:#3f6212;background:color-mix(in srgb,var(--cp-green) 22%,#fff);
  border-radius:999px;padding:2px 8px;margin-top:4px;align-self:center}
.wc-has-result .pipe-wert{display:inline-block}
.wc-has-result .pipe-step.is-wert .pipe-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--cp-green) 45%,transparent)}
.pipe-tool{font-size:15px;margin:8px 0 0}
.pipe-tool.is-mensch{color:var(--cp-orange);font-weight:700}
.pipe-tool.is-wert{color:#3f6212;font-weight:700}
.wc-weg{display:inline-block;font-size:12px;font-weight:800;border-radius:999px;padding:2px 9px;margin-right:6px;vertical-align:1px;white-space:nowrap}
.wc-weg.is-m365{background:#e8f5e9;color:#256029}
.wc-weg.is-mail,.wc-weg.is-datei{background:#e3f2fd;color:#0d4f8b}
.wc-weg.is-api,.wc-weg.is-nas{background:#fff3e0;color:#8a4b00}
.wc-weg.is-intern{background:#fff8d6;color:#6b5400}
.wc-weg.is-manuell{background:#eceff1;color:#37474f}
/* Ergebnis */
.wc-result{margin-top:4px;padding:20px;border-radius:14px;background:var(--white);border:1px solid rgba(29,50,105,.14)}
.wc-ehrlich{margin:0 0 14px;padding:12px 14px;border-radius:10px;background:#fff8d6;border:1px solid #f2dc7b;font-size:15.5px}
.wc-res-lead{margin:0;font-size:16px}
.wc-res-big{margin:2px 0;font-size:18px;color:var(--navy)}
.wc-res-big strong{font-size:40px;font-weight:800;margin-right:6px;
  background:linear-gradient(90deg,var(--cp-blue),var(--cp-purple),var(--cp-pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.wc-res-sub,.wc-res-wo{margin:0 0 8px;font-size:16px}
.wc-rechenweg{margin:10px 0 0;padding:10px 14px;border-radius:10px;background:#f6f8fc}
.wc-rechenweg summary{cursor:pointer;font-weight:800;color:var(--navy)}
.wc-rechenweg p{font-size:15px;margin:8px 0 0}
.wc-res-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin:20px 0 0}
.wc-res-grid section{min-width:0}
.wc-res-grid h4{font-size:17px;font-weight:800;color:var(--navy);margin:0 0 8px}
.wc-anb{list-style:none;margin:0;padding:0}
.wc-anb li{margin:0 0 12px;padding:0}
.wc-anb li::before{content:none}
.wc-anb p{font-size:14.5px;margin:4px 0 0;line-height:1.5}
.wc-unsicher{color:#8a4b00}
.wc-doku{font-size:13.5px}
.wc-wege{display:grid;gap:10px;margin:8px 0}
.wc-weg-karte{padding:12px 14px;border-radius:10px;border:1px solid rgba(29,50,105,.14);background:#fbfbfe}
.wc-weg-karte p{font-size:14.5px;margin:4px 0 0;line-height:1.5}
.wc-lizenz-ok{padding:12px 14px;border-radius:10px;background:#e8f5e9;font-size:15px}
.wc-liste{margin:0;padding-left:18px}
.wc-liste li{font-size:15px;margin:0 0 6px}
.wc-quellen,.wc-klein{font-size:13px;color:var(--rule)}
.wc-klein{margin:8px 0 0}
.wc-problem{font-size:15px;margin:18px 0 0}
.wc-stand{font-size:13px;color:var(--rule);margin:14px 0 10px}
.wc-again{border:1px solid rgba(29,50,105,.25);background:var(--white);color:var(--navy);font:inherit;font-weight:800;font-size:15px;padding:9px 16px;border-radius:8px;cursor:pointer}
.wc-again:hover{border-color:var(--navy)}
/* Bericht */
.wc-bericht{margin-top:16px;padding:18px 20px;border-radius:14px;background:var(--white);border:1px solid rgba(29,50,105,.14)}
.wc-bericht h3{font-size:19px;font-weight:800;color:var(--navy);margin:0 0 4px}
.wc-bericht p{font-size:15px;margin:0 0 10px}
.wc-bericht-row{display:flex;gap:10px;flex-wrap:wrap}
.wc-bericht-row input{flex:1;min-width:220px;font:inherit;font-size:16px;padding:10px 12px;border:1px solid rgba(29,50,105,.25);border-radius:8px}
.wc-bericht-row .btn-cta{min-width:0;padding:11px 20px;border-radius:8px}
.wc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wc-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--navy-text);margin:10px 0 0}
.wc-consent input{margin-top:3px}
.wc-msg{font-size:14px;font-weight:700;color:var(--navy);margin:8px 0 0;min-height:1em}
.wc-alt{font-size:15px;margin:10px 0 0}
@media (max-width:720px){
  .wc{padding:16px}
  .wc-zahlen,.wc-res-grid{grid-template-columns:1fr}
  .wc-res-big strong{font-size:32px}
  .wc-result{padding:16px}
  .pipe-wert{align-self:flex-start}
}

/* Auswahl direkt im Ablauf: Knoten füllen sich erst mit der Auswahl, offene Knoten werden angemahnt */
.wc-legend{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;color:var(--navy);margin:0 0 10px}
.pipe-box.is-config .pipe-step.is-offen .pipe-dot{border-style:dashed;border-color:rgba(29,50,105,.35)}
.pipe-waehlen{color:var(--cp-purple);font-weight:800}
.pipe-warn{display:none;position:absolute;top:-5px;right:-5px;width:21px;height:21px;border-radius:50%;background:#d32f2f;color:#fff;
  font-style:normal;font-weight:800;font-size:13px;line-height:21px;text-align:center;box-shadow:0 0 0 2px #fff}
.pipe-box.is-gemahnt .pipe-step.is-offen .pipe-warn{display:block;animation:pipe-warn-pop .45s ease-out}
@keyframes pipe-warn-pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.pipe-frage{margin:12px 0 0;padding:2px 0 2px 12px;border-left:3px solid transparent}
.pipe-frage.is-offen{border-left-color:var(--cp-purple)}
.pipe-box.is-gemahnt .pipe-frage.is-offen{border-left-color:#d32f2f}
.pipe-frage .wc-sub{margin-top:4px}
.pipe-frage .wc-ehrlich{margin:10px 0 0}
.pipe-weiter{margin:14px 0 0;border:0;background:var(--navy);color:var(--white);font:inherit;font-weight:800;font-size:14.5px;padding:9px 14px;border-radius:8px;cursor:pointer}
.pipe-fertig{margin:12px 0 0;font-weight:800;color:#3f6212}
.wc-mahnung{display:flex;align-items:center;gap:10px;width:100%;margin:12px 0 0;padding:10px 14px;border:1px solid #f1b8b8;border-radius:10px;
  background:#fdecec;color:#8e1c1c;font:inherit;font-size:15px;font-weight:700;text-align:left;cursor:pointer}
.wc-mahnung span,.wc-toast span{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#d32f2f;color:#fff;font-weight:800}
.wc-mahnung[hidden],.wc-toast[hidden]{display:none}
.wc-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;
  width:max-content;max-width:calc(100vw - 32px);padding:12px 16px;border:0;border-radius:12px;background:var(--navy);color:var(--white);
  font:inherit;font-size:15px;text-align:left;cursor:pointer;box-shadow:0 10px 30px rgba(0,20,60,.3);animation:wc-toast-in .35s ease-out}
.wc-toast b{white-space:nowrap}
@keyframes wc-toast-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.wc-toast,.pipe-box.is-gemahnt .pipe-step.is-offen .pipe-warn{animation:none}}
/* Kompakte Auswertung, Details auf Klick */
.wc-kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 12px}
.wc-kacheln div{padding:14px 16px;border-radius:12px;background:#f6f8fc;display:flex;flex-direction:column;gap:2px}
.wc-kacheln strong{font-size:26px;font-weight:800;line-height:1.15;
  background:linear-gradient(90deg,var(--cp-blue),var(--cp-purple),var(--cp-pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.wc-kacheln span{font-size:14px;color:var(--navy-text)}
.wc-res-lizenz{font-size:15px;margin:0 0 12px}
.wc-res-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.wc-details-btn{border:0;background:var(--navy);color:var(--white);font:inherit;font-weight:800;font-size:15px;padding:9px 16px;border-radius:8px;cursor:pointer}
.wc-details{margin:18px 0 0;padding:16px 0 0;border-top:1px solid rgba(29,50,105,.12)}
.wc-details .wc-rechenweg{margin:0;padding:12px 14px;border-radius:10px;background:#f6f8fc}
.wc-details .wc-rechenweg h4{font-size:16px;font-weight:800;color:var(--navy);margin:0}
@media (max-width:720px){.wc-kacheln{grid-template-columns:1fr}.wc-kacheln strong{font-size:24px}}

.wc-pills[hidden]{display:none}

/* =========================================================================
   Marke und Seitenrahmen: Logo in Kopfleiste und Fußzeile, Seitenköpfe der
   Unterseiten, Gründer-Bereich, Adresse. Kopf und Fuß setzt werkzeuge/seiten.py.
   ========================================================================= */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-logo{height:26px;width:auto;display:block;flex:none}
.nav{gap:12px 18px}
.nav-link{font-size:16px}
.nav-link[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
@media (max-width:860px){.brand-logo{height:22px}}

/* Unterseiten: gleicher Farbverlauf wie die Startseite, nur flacher */
.bau-top--seite::after{height:90px}
.bau-top--seite:not(:has(.bau-hero)){padding-bottom:28px}
.bau-hero--seite{padding:48px 0 56px}
.bau-hero--seite h1{font-size:44px;margin:0}
.bau-hero--404{text-align:left}
.bau-404-logo{display:block;height:58px;width:auto;margin:0 0 22px}
@media (max-width:720px){.bau-hero--seite{padding:28px 0 40px}.bau-hero--seite h1{font-size:32px}}

/* Fußzeile: Links, darunter das Logo als Abschluss */
.fuss{margin-top:75px;padding-bottom:40px}
.fuss .site-footer{flex-wrap:wrap;gap:10px 28px;margin-top:0;padding-bottom:0}
.fuss-marke{display:flex;flex-direction:column;align-items:center;gap:10px;margin:44px 0 0;padding:28px 16px 0;
  border-top:1px solid rgba(29,50,105,.08);font-size:13.5px;color:var(--rule);text-align:center}
.fuss-marke img{height:28px;width:auto;opacity:.9}
@media (max-width:860px){.fuss{margin-top:46px}.fuss .site-footer{gap:6px 22px}.fuss-marke{margin-top:28px}}

/* Gründer: Text mit Zitat, daneben das Foto am Server */
.bau-person{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center;margin:8px 0 10px}
.bau-person-text p{margin:0 0 14px}
.bau-zitat{margin:18px 0;padding:4px 0 4px 18px;border-left:3px solid var(--cp-purple)}
.bau-zitat p{font-size:19px;font-style:italic;color:var(--navy);line-height:1.5;margin:0 0 6px}
.bau-zitat footer{font-size:14.5px;color:var(--rule)}
.bau-person-kontakt{font-weight:700;color:var(--navy)}
.bau-person-foto{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 12px 30px rgba(0,33,75,.14)}
@media (max-width:720px){.bau-person{grid-template-columns:1fr}}

/* Anschrift im Regionalteil */
.bau-adresse{font-style:normal;margin:14px 0 26px;padding:14px 18px;border-left:3px solid var(--navy);background:#f6f8fc;border-radius:0 10px 10px 0;line-height:1.7}
@media (min-width:861px){.nav{justify-content:flex-end;gap:12px 20px}.brand{margin-right:auto}}
@media (min-width:861px){.brand{padding-right:26px}.nav-link{font-size:15.5px}.nav{gap:12px 17px}}

/* Punkte in einer Reihe, nicht im 2x2-Raster (keine Ähnlichkeit zum Microsoft-Logo) */
.bau-badge i{grid-template-columns:repeat(4,7px);gap:3px}
/* LinkedIn-Link in der Fußzeile */
.fuss-social{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(29,50,105,.15);color:var(--navy);font-size:14px;font-weight:700;text-decoration:none;transition:border-color .15s ease,background .15s ease}
.fuss-social:hover{border-color:var(--navy);background:#f6f8fc}
.fuss-social svg{display:block}