/* ============================================================
   bienle Laravel — Komponenten-Ergänzungen (Toggle, Formular,
   Flash-Banner). Getrennt von der auto-gemergten app.css.
   ============================================================ */

/* ---------- Theme-abhängige SVG-Label-Farben ---------- */
:root{--svg-strong:rgba(255,255,255,0.5);--svg-soft:rgba(255,255,255,0.4);--svg-check:#AAB6C8}
[data-theme="light"]{--svg-strong:#6B7280;--svg-soft:#7A8699;--svg-check:#4B5563}

/* ---------- Utility-Klassen (ersetzen Inline-Styles wegen CSP) ---------- */
.logo-link{display:flex;align-items:center;gap:10px}
.u-center{justify-content:center}
.u-mb0{margin-bottom:0}
.u-narrow-center{margin:0 auto}
.cta-sub{margin-bottom:1.5rem;max-width:640px}
.problem-visual{padding:2rem}
.wf-cta-inner{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.wf-cta-sub{margin:0 auto 2.4rem;text-align:center}

/* ---------- Theme-Toggle ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-left:1rem;flex:none;
  border-radius:999px;cursor:pointer;
  background:var(--glass);border:1px solid var(--line-soft);
  color:var(--text-bright);transition:all .25s;
}
.theme-toggle:hover{border-color:var(--amber);color:var(--amber-bright)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="light"] .theme-toggle .icon-sun{display:block}
[data-theme="light"] .theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle:hover{color:var(--amber-dim);border-color:var(--amber)}
@media (max-width:1024px){
  .theme-toggle{margin-left:auto;margin-right:.6rem}
}

/* ---------- Kontaktformular ---------- */
.contact-form{max-width:640px;margin:2.5rem auto 0;text-align:left}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.form-field.full{grid-column:1 / -1}
.form-field label{
  font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);
}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:.85rem 1rem;border-radius:10px;
  background:var(--glass);border:1px solid var(--line-soft);
  color:var(--text-bright);font-family:var(--font-body);font-size:15px;
  transition:border-color .2s,box-shadow .2s;
}
.form-field textarea{min-height:140px;resize:vertical}
.form-field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--amber) 50%),linear-gradient(135deg,var(--amber) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.6rem;
}
.form-field select option{background:var(--bg-2);color:var(--text-bright)}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  outline:none;border-color:var(--amber);
  box-shadow:0 0 0 3px var(--amber-glow);
}
.form-field .field-error{font-size:12.5px;color:#E06A5A;font-weight:500}
[data-theme="light"] .form-field .field-error{color:#C0392B}
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .btn-primary{border:none;cursor:pointer}
.form-note{font-size:12px;color:var(--text-muted);margin-top:1rem;line-height:1.6}
.u-optional{color:var(--text-muted);font-weight:400;text-transform:none;letter-spacing:0}

/* ---------- Kontakt: direkte Kontaktwege ---------- */
.kontakt-direct{padding-top:1rem}
.kontakt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:900px;margin:0 auto}
.kontakt-card{
  display:flex;flex-direction:column;gap:.4rem;padding:1.6rem 1.7rem;
  text-decoration:none;transition:border-color .2s,transform .2s;
}
.kontakt-card:hover{border-color:var(--amber);transform:translateY(-3px)}
.kontakt-card-label{
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--text-muted);
}
.kontakt-card-value{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--amber-bright);word-break:break-word}
[data-theme="light"] .kontakt-card-value{color:var(--amber-dim)}
.kontakt-card-note{font-size:14px;color:var(--text-body);line-height:1.6;margin-top:.2rem}
@media (max-width:768px){
  .kontakt-cards{grid-template-columns:1fr}
}

/* ---------- Flash-Banner ---------- */
.flash-banner{
  max-width:640px;margin:0 auto 1.5rem;padding:1rem 1.3rem;
  border-radius:12px;display:flex;align-items:center;gap:.8rem;
  font-size:14.5px;line-height:1.5;text-align:left;
}
.flash-success{
  background:rgba(80,180,120,0.12);border:1px solid rgba(80,180,120,0.4);
  color:#7FD8A6;
}
[data-theme="light"] .flash-success{background:rgba(46,160,90,0.10);border-color:rgba(46,160,90,0.35);color:#1E7A47}
.flash-error{
  background:rgba(224,106,90,0.12);border:1px solid rgba(224,106,90,0.4);color:#E7A79B;
}
[data-theme="light"] .flash-error{background:rgba(192,57,43,0.08);border-color:rgba(192,57,43,0.3);color:#A5342A}
.flash-banner svg{width:20px;height:20px;flex:none}

/* ---------- Katalog-Suche + Ergebnis-Karten ---------- */
.wf-search{max-width:560px;margin:0 auto 1rem;display:flex;gap:.6rem}
.wf-search input{
  flex:1;padding:.8rem 1.1rem;border-radius:999px;
  background:var(--glass);border:1px solid var(--line-soft);
  color:var(--text-bright);font-family:var(--font-body);font-size:14.5px;
}
.wf-search input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-glow)}
.wf-search button{padding:.8rem 1.6rem}
.wf-result-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.7rem}
.wf-tag{
  font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line-soft);color:var(--text-muted);background:var(--glass);
}
.wf-empty{text-align:center;color:var(--text-muted);padding:3rem 0;font-size:1rem}
.wf-search-info{text-align:center;color:var(--text-muted);font-size:13.5px;margin-bottom:2rem}
.wf-search-info a{font-weight:600}

/* ---------- Legal-Seiten (Impressum/Datenschutz) ---------- */
.legal-page .container{max-width:900px}
.legal-page strong{color:var(--text-bright)}
.legal-sub{margin-top:-1.6rem;margin-bottom:2.4rem;color:var(--text-muted)}
.legal-sep{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-soft);margin-bottom:0}
.legal-fineprint{margin-top:2rem;color:var(--text-muted);font-size:13px}
.u-mt0{margin-top:0}
.u-mb05{margin-bottom:.5rem}
.u-mb15{margin-bottom:1.5rem}
.u-mb2{margin-bottom:2rem}
.legal-page table{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;font-size:.92rem}
.legal-page th,.legal-page td{text-align:left;padding:.7rem .9rem;border:1px solid var(--line-soft);color:var(--text-body)}
.legal-page th{font-family:var(--font-display);color:var(--text-bright);background:rgba(213,126,54,0.07)}

@media (max-width:768px){
  .contact-grid{grid-template-columns:1fr}
}

/* ============================================================
   Unterseiten Leistungen / Einsatzbereiche / Ablauf
   ============================================================ */

/* ---------- Teaser-Button-Zeile (Startseite) ---------- */
.teaser-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2.5rem}

/* ---------- Vertiefungen (Detail-Rows) ---------- */
.detail-list{display:flex;flex-direction:column;gap:1.5rem;max-width:900px;margin:0 auto}
.detail-row{padding:2rem 2.2rem;border-radius:var(--radius);background:var(--glass);border:1px solid var(--line-soft)}
.detail-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.detail-step{
  font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:1px;
  width:44px;height:50px;flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--amber-bright);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 50'%3E%3Cpath d='M22 2.5L41 13.5V36.5L22 47.5L3 36.5V13.5Z' fill='%232A2427' stroke='%23E69D45' stroke-opacity='0.45' stroke-width='1.5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
[data-theme="light"] .detail-step{color:var(--amber-dim);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 50'%3E%3Cpath d='M22 2.5L41 13.5V36.5L22 47.5L3 36.5V13.5Z' fill='%23FCF3E9' stroke='%23D57E36' stroke-opacity='0.5' stroke-width='1.5'/%3E%3C/svg%3E")}
.detail-head h3{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--text-bright);margin:0}
.detail-row>p{color:var(--text-body);line-height:1.8;margin-bottom:1.1rem}
.detail-points{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin:0}
.detail-points li{position:relative;padding-left:1.6rem;font-size:14px;color:var(--text-body);line-height:1.6}
.detail-points li::before{
  content:'';position:absolute;left:0;top:.5rem;width:7px;height:7px;
  background:linear-gradient(135deg,var(--amber-bright),var(--amber-dim));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.detail-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.4rem}
.detail-boxes>div{
  padding:1.1rem 1.2rem;border-radius:12px;background:var(--bg-2);border:1px solid var(--line-soft);
  font-size:14.5px;color:var(--text-body);line-height:1.6;
}
[data-theme="light"] .detail-boxes>div{background:#FFFFFF}
.detail-box-label{
  display:block;font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--amber-dim);margin-bottom:.4rem;
}

/* ---------- Vergleichstabelle ---------- */
.compare-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line-soft)}
.compare-table{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.compare-table th,.compare-table td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--line-soft)}
.compare-table thead th{
  font-family:var(--font-display);font-size:12px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--text-bright);background:rgba(213,126,54,0.08);
}
.compare-table thead th:nth-child(2){color:var(--amber-bright)}
[data-theme="light"] .compare-table thead th:nth-child(2){color:var(--amber-dim)}
.compare-table tbody th{font-weight:600;color:var(--text-bright)}
.compare-table td{color:var(--text-body)}
.compare-table td.ja{color:var(--text-bright)}
.compare-table td.ja::before{content:'\2713\00a0';color:var(--amber);font-weight:800}
.compare-table td.nein{color:var(--text-muted)}
.compare-table td.nein::before{content:'\2717\00a0';color:var(--text-muted);font-weight:800}
.compare-table td.teils::before{content:'\2248\00a0';color:var(--amber-dim);font-weight:800}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:none}

/* ---------- Vorher / Nachher ---------- */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1rem}
.vs-col{padding:1.8rem 2rem;border-radius:var(--radius);border:1px solid var(--line-soft);background:var(--glass)}
.vs-after{border-color:rgba(213,126,54,0.35)}
.vs-label{
  display:inline-block;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem;
  padding:4px 12px;border-radius:999px;border:1px solid var(--line-soft);
}
.vs-label-after{color:#0A0F1C;background:linear-gradient(135deg,var(--amber-bright),var(--amber));border-color:transparent}
[data-theme="light"] .vs-label-after{color:#FFFFFF}
.vs-visual{margin:.4rem auto 1.2rem;max-width:230px}
.vs-visual svg{display:block;width:100%;height:auto}
.vs-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin:0}
.vs-col li{position:relative;padding-left:1.6rem;font-size:14px;color:var(--text-body);line-height:1.6}
.vs-before li::before{content:'\2013';position:absolute;left:.2rem;color:var(--text-muted);font-weight:700}
.vs-after li::before{content:'\2713';position:absolute;left:.1rem;color:var(--amber);font-weight:700}
.vs-benefits{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 1.9rem;margin-top:2.2rem}
.vs-benefits span{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.3px;
  color:var(--text-body);
}
.vs-benefits span::before{
  content:'';width:12px;height:12px;flex:none;
  background:linear-gradient(135deg,var(--amber-bright),var(--amber-dim));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* ---------- ROI-Rechner ---------- */
.roi-card{max-width:820px;margin:0 auto;padding:2.2rem 2.4rem;display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center}
.roi-inputs{display:flex;flex-direction:column;gap:1.6rem}
.roi-field{display:flex;flex-direction:column;gap:.6rem}
.roi-label{font-size:14px;color:var(--text-body);font-weight:500}
.roi-label output{font-family:var(--font-display);font-weight:700;color:var(--amber-bright)}
[data-theme="light"] .roi-label output{color:var(--amber-dim)}
.roi-field input[type="range"]{width:100%;accent-color:var(--amber);cursor:pointer}
.roi-results{display:flex;flex-direction:column;gap:1rem}
.roi-result{padding:1.3rem 1.5rem;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line-soft);text-align:center}
[data-theme="light"] .roi-result{background:#FFFFFF}
.roi-result-highlight{border-color:rgba(213,126,54,0.4);background:linear-gradient(180deg,rgba(213,126,54,0.10),transparent)}
.roi-result-label{display:block;font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}
.roi-result-value{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--text-bright)}
.roi-result-highlight .roi-result-value{
  background:linear-gradient(120deg,var(--amber-bright),var(--amber-dim));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.roi-disclaimer{max-width:820px;margin:1.5rem auto 0;font-size:12.5px;color:var(--text-muted);line-height:1.7;text-align:center}

/* ---------- FAQ (native details/summary) ---------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
.faq-item{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--glass);overflow:hidden}
.faq-item summary{
  cursor:pointer;list-style:none;padding:1.2rem 1.5rem;
  font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--text-bright);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'';flex:none;width:11px;height:11px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:rotate(45deg);transition:transform .25s;margin-top:-4px;
}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.faq-item[open] summary{color:var(--amber-bright)}
[data-theme="light"] .faq-item[open] summary{color:var(--amber-dim)}
.faq-answer{padding:0 1.5rem 1.3rem}
.faq-answer p{font-size:14.5px;color:var(--text-body);line-height:1.75;margin:0}
.faq-more{text-align:center;margin-top:1.8rem;color:var(--text-muted);font-size:14px}

/* ---------- Workflow-Blöcke (Seite /workflows) ---------- */
.wf-list{display:flex;flex-direction:column;gap:1.5rem;max-width:900px;margin:0 auto}
.wf-block{padding:2rem 2.2rem;border-radius:var(--radius);background:var(--glass);border:1px solid var(--line-soft)}
.wf-block-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.wf-block-titles{display:flex;flex-direction:column;gap:.5rem}
.wf-block-titles h3{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--text-bright);margin:0;line-height:1.3}
.wf-block-meta{display:flex;gap:.35rem 1.2rem;flex-wrap:wrap;align-items:center}
.wf-tag-ki{color:var(--amber-bright);border-color:var(--amber-glow);background:rgba(213,126,54,0.1)}
[data-theme="light"] .wf-tag-ki{color:var(--amber-dim)}
/* Meta-Tags über den Workflow-Titeln: dezente Punkte statt Rahmen-Pillen */
.wf-block-meta .wf-tag{
  border:none;background:none;padding:0;border-radius:0;
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--text-muted);
}
.wf-block-meta .wf-tag::before{
  content:'';width:9px;height:9px;flex:none;
  background:var(--amber-dim);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.wf-block-meta .wf-tag-ki{color:var(--amber-bright)}
.wf-block-meta .wf-tag-ki::before{background:linear-gradient(135deg,var(--amber-bright),var(--amber-dim))}
[data-theme="light"] .wf-block-meta .wf-tag-ki{color:var(--amber-dim)}
.wf-block-text{color:var(--text-body);line-height:1.8;margin-bottom:1.3rem}
.wf-outcome{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.4rem}
.wf-outcome-box{
  padding:1.1rem 1.2rem;border-radius:12px;background:var(--bg-2);border:1px solid var(--line-soft);
  font-size:14.5px;color:var(--text-body);line-height:1.6;
}
[data-theme="light"] .wf-outcome-box{background:#FFFFFF}
.wf-outcome-win{border-color:var(--amber-glow);background:rgba(213,126,54,0.06)}
[data-theme="light"] .wf-outcome-win{background:rgba(213,126,54,0.05)}
.wf-outcome-box .detail-box-label{color:var(--text-muted)}
.wf-outcome-win .detail-box-label{color:var(--amber-dim)}

/* ---------- Glossar (Seite /faq) ---------- */
.glossar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:.5rem}
.glossar-card{padding:1.6rem 1.7rem;display:flex;flex-direction:column}
.glossar-card h4{font-family:var(--font-display);font-size:1.02rem;font-weight:700;color:var(--amber-bright);margin-bottom:.6rem}
[data-theme="light"] .glossar-card h4{color:var(--amber-dim)}
.glossar-card p{font-size:14.5px;color:var(--text-body);line-height:1.7;margin:0}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .glossar-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .detail-boxes{grid-template-columns:1fr}
  .vs-grid{grid-template-columns:1fr}
  .roi-card{grid-template-columns:1fr;gap:1.8rem}
  .wf-outcome{grid-template-columns:1fr}
  .glossar-grid{grid-template-columns:1fr}
}