/* CashFlow durch Bestand, kurz CDB Consulting
   Gemeinsames Design aller Seiten. Vor dem 12.08.2026 lag dieser Block
   in jeder HTML-Datei einzeln. Aenderungen hier wirken auf allen Seiten. */


  :root{
    --paper:#f6f4ee;
    --paper-dim:#efece3;
    --ink:#14213d;
    --ink-soft:#3b4a63;
    --amber:#e3a83c;
    --amber-deep:#b9791f;
    --teal:#3e7c6b;
    --rule:#cfc9b8;
    --white:#fffdf9;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.eyebrow,.label{
    font-family:'IBM Plex Sans Condensed', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.02em;
  }
  /* Lange deutsche Zusammensetzungen wie SICHERHEITSBESTAND oder
     LAGERUMSCHLAGSHAEUFIGKEIT sonst ueber den Rand ragen, auf schmalen
     Bildschirmen wird deshalb sauber getrennt statt abgeschnitten. */
  h1,h2,h3{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;}
  .mono{font-family:'IBM Plex Mono', monospace;}
  a{color:inherit;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px;}

  /* BREITEN, eine Regel fuer die ganze Website
     .wrap      aeusserer Rahmen, 1080 px. Gilt fuer jeden Abschnitt, damit alle
                Inhalte dieselbe linke Lesekante haben.
     .lesetext  Lesebreite fuer Fliesstext, 760 px. Wird zusaetzlich zu .wrap
                gesetzt und begrenzt die direkten Kindelemente.
     Bewusste Ausnahmen: Kartenraster und Schrittfolgen nutzen die volle
     Rahmenbreite, das Zitat im Bildband steht mittig, Formelbloecke und
     Grafiken duerfen breiter sein. Keine weiteren Breiten in den Seiten. */
  .wrap.lesetext > *{max-width:760px;}
  .wrap.lesetext > h1, .wrap.lesetext > h2, .wrap.lesetext > h3{max-width:none;}
  .lesetext-block{max-width:760px;}
  /* Formelbloecke duerfen etwas breiter laufen als Fliesstext, damit lange
     Gleichungen nicht umbrechen. Eine der drei benannten Ausnahmen. */
  .formelblock{max-width:780px;margin:0 auto;}
  .section-head{max-width:760px;}
  .section-head p{max-width:none;}
  .lead{max-width:none;}

  /* NAV */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(246,244,238,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--rule);
  }
  nav{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;max-width:1080px;margin:0 auto;position:relative;}
  .logo-mark{display:flex;align-items:center;gap:9px;text-decoration:none;}
  .logo-word{font-family:'IBM Plex Sans Condensed';font-size:1.05rem;letter-spacing:0.01em;color:var(--ink);text-transform:none;white-space:nowrap;}
  @media (max-width:480px){.logo-word{font-size:0.82rem;letter-spacing:0;}}
  @media (max-width:360px){.logo-word{font-size:0.72rem;}}
  .logo-word b{font-weight:700;color:var(--amber-deep);font-size:1.08em;}
  /* Sechs Menuepunkte plus Telefonnummer brauchen 1024 px Innenbreite.
     Abstand und Schriftgroesse sind darauf ausgelegt. Kommt ein siebter Punkt
     dazu, passt es nicht mehr, dann gehoert ein Punkt unter den Ratgeber. */
  .navlinks{display:flex;gap:18px;font-size:0.82rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;}
  .navlinks a{text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;padding-bottom:4px;transition:border-color .2s;}
  .navlinks a:hover{border-color:var(--amber);}
  .nav-toggle-checkbox{position:absolute;opacity:0;pointer-events:none;width:0;height:0;}
  .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;cursor:pointer;z-index:60;flex-shrink:0;}
  .hamburger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .25s, opacity .25s;}
  @media (max-width:1080px){
    .hamburger{display:flex;}
    .navlinks{
      display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
      background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:0 12px 24px rgba(20,33,61,0.12);padding:6px 0;
    }
    .navlinks a{padding:15px 28px;border-bottom:1px solid var(--rule);}
    .navlinks a:last-child{border-bottom:none;}
    .nav-toggle-checkbox:checked ~ .navlinks{display:flex;}
    .nav-toggle-checkbox:checked ~ .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .nav-toggle-checkbox:checked ~ .hamburger span:nth-child(2){opacity:0;}
    .nav-toggle-checkbox:checked ~ .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  }

  /* HERO */
  .hero{padding:96px 0 72px;position:relative;overflow:hidden;}
  .hero-bg-illustration{position:absolute;top:0;right:-60px;width:640px;max-width:60%;height:auto;opacity:0.09;pointer-events:none;z-index:0;}
  .hero-grid{position:relative;z-index:1;}
  .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  @media (max-width:860px){.hero-grid{grid-template-columns:1fr;}}
  .eyebrow{font-size:0.8rem;font-weight:600;color:var(--teal);margin-bottom:14px;display:flex;align-items:center;gap:10px;}
  .eyebrow::before{content:'';width:26px;height:2px;background:var(--teal);display:inline-block;}
  h1{font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.08;font-weight:700;margin:0 0 22px;}
  h1 em{font-style:normal;color:var(--amber-deep);}
  .lead{font-size:1.08rem;color:var(--ink-soft);margin:0 0 30px;}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{
    display:inline-block;padding:13px 26px;border-radius:2px;font-weight:600;font-size:0.92rem;
    text-decoration:none;font-family:'IBM Plex Sans Condensed';text-transform:uppercase;letter-spacing:0.03em;
    transition:transform .15s, box-shadow .15s;
  }
  .btn-primary{background:var(--ink);color:var(--white);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,33,61,0.25);}
  .btn-ghost{border:1.5px solid var(--ink);color:var(--ink);}
  .btn-ghost:hover{background:var(--ink);color:var(--white);}

  .gauge-card{
    background:var(--white);border:1px solid var(--rule);padding:26px 24px;border-radius:3px;
    box-shadow:0 14px 40px rgba(20,33,61,0.08);
  }
  .gauge-label{font-size:0.72rem;font-weight:600;color:var(--ink-soft);letter-spacing:0.06em;margin-bottom:4px;}
  .gauge-sku{font-family:'IBM Plex Mono';font-size:0.78rem;color:var(--ink-soft);margin-bottom:18px;}
  .gauge-foot{display:flex;justify-content:space-between;font-family:'IBM Plex Mono';font-size:0.72rem;color:var(--ink-soft);}
  .gauge-foot b{color:var(--ink);}

  /* BILDBAND, der dunkle Streifen mit Foto und Zitat am Seitenanfang */
  .bildband{position:relative;padding:120px 0;overflow:hidden;background-size:cover;background-position:center;}
  .bildband::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,33,61,0.55), rgba(20,33,61,0.82));}
  .bildband-inhalt{position:relative;z-index:1;text-align:center;}
  .bildband h1{color:var(--white);margin:0 0 24px;}
  .bildband-zitat{color:#e8e4d8;font-size:1.15rem;line-height:1.7;max-width:640px;margin:0 auto;font-style:italic;}

  /* SECTION shared */
  section{padding:76px 0;border-top:1px solid var(--rule);}
  .section-head{margin-bottom:44px;}
  h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;margin:0 0 14px;}
  .section-head p{color:var(--ink-soft);font-size:1rem;}

  /* CCC DIAGRAM */
  .ccc-copy p{color:var(--ink-soft);margin-bottom:16px;}
  .ccc-copy .highlight{background:rgba(227,168,60,0.22);padding:1px 5px;font-weight:600;}
  svg{max-width:100%;height:auto;display:block;}

  /* PROCESS STEPS */
  /* Das Raster richtet sich nach der Anzahl der Schritte, zwei Schritte ergeben
     zwei Spalten, drei Schritte drei Spalten. Vorher standen drei Schritte in
     einem Zweispalter, wodurch der Pfeil am rechten Rand abgeschnitten wurde. */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border:1px solid var(--rule);border-radius:3px;overflow:hidden;}
  @media (max-width:720px){.steps{grid-template-columns:1fr;}}
  .step{background:var(--white);padding:36px 32px;position:relative;}
  .step:not(:last-child){border-right:1px solid var(--rule);}
  @media (max-width:720px){.step:not(:last-child){border-right:none;border-bottom:1px solid var(--rule);}}
  .step-num{font-family:'IBM Plex Mono';font-size:0.78rem;color:var(--amber-deep);font-weight:600;margin-bottom:10px;}
  .step h3{font-size:1.2rem;margin:0 0 10px;text-transform:none;letter-spacing:normal;}
  .step p{color:var(--ink-soft);font-size:0.95rem;margin:0;}
  .step-arrow{
    position:absolute;top:36px;right:-13px;width:26px;height:26px;background:var(--ink);color:var(--white);
    border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.9rem;z-index:2;
  }
  @media (max-width:720px){.step-arrow{top:auto;bottom:-13px;right:32px;transform:rotate(90deg);}}

  /* B/C PARTS + AUTOMATION */
  .twocol{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
  @media (max-width:800px){.twocol{grid-template-columns:1fr;}}
  .card{background:var(--white);border:1px solid var(--rule);padding:32px;border-radius:3px;}
  @media (max-width:480px){.card{padding:22px 16px;}}
  .card .tag{display:inline-block;font-family:'IBM Plex Mono';font-size:0.7rem;background:var(--paper-dim);color:var(--ink-soft);padding:3px 8px;border-radius:2px;margin-bottom:14px;}
  .card h3{font-size:1.1rem;margin:0 0 12px;text-transform:none;letter-spacing:normal;}
  .card p{color:var(--ink-soft);font-size:0.95rem;margin:0 0 10px;}
  .card p:last-child{margin-bottom:0;}
  .abcbar{display:flex;height:14px;border-radius:2px;overflow:hidden;margin:18px 0;border:1px solid var(--rule);}
  .abcbar div{height:100%;}
  .abc-a{width:15%;background:var(--ink);}
  .abc-b{width:25%;background:var(--teal);}
  .abc-c{width:60%;background:var(--amber);}
  .abclegend{display:flex;gap:18px;font-family:'IBM Plex Mono';font-size:0.7rem;color:var(--ink-soft);flex-wrap:wrap;}
  .abclegend span{display:flex;align-items:center;gap:6px;}
  .dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

  /* ABOUT */
  .about-wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:start;}
  @media (max-width:860px){.about-wrap{grid-template-columns:1fr;}}
  .about-photo{
    aspect-ratio:4/5;background:var(--ink);border-radius:3px;position:relative;overflow:hidden;
  }
  .about-photo img{
    width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);
  }
  .about-photo .photo-tag{
    position:absolute;left:0;right:0;bottom:0;padding:14px 18px;
    background:linear-gradient(0deg, rgba(20,33,61,0.88), transparent);
    font-family:'IBM Plex Mono';color:var(--white);font-size:0.7rem;letter-spacing:0.03em;
  }
  .credlist{list-style:none;margin:22px 0 0;padding:0;}
  .credlist li{
    display:grid;grid-template-columns:90px 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--rule);
  }
  .credlist li:first-child{border-top:none;}
  .credlist .yr{font-family:'IBM Plex Mono';font-size:0.78rem;color:var(--amber-deep);font-weight:600;}
  .credlist .desc b{display:block;font-size:0.98rem;margin-bottom:3px;}
  .credlist .desc span{color:var(--ink-soft);font-size:0.9rem;}

  /* CONTACT */
  .contact{background:var(--ink);color:var(--white);border-radius:4px;padding:56px 48px;text-align:center;}
  @media (max-width:640px){.contact{padding:44px 24px;}}
  .contact h2{color:var(--white);}
  .contact p{color:#c7cede;max-width:48ch;margin:0 auto 28px;}
  .contact .btn-primary{background:var(--amber);color:var(--ink);}
  .contact .btn-primary:hover{box-shadow:0 6px 16px rgba(227,168,60,0.35);}

  .soon-banner{
    margin-top:28px;background:var(--white);border:1px dashed var(--teal);border-radius:3px;
    padding:20px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  }
  .soon-badge{
    flex-shrink:0;font-family:'IBM Plex Mono';font-size:0.68rem;font-weight:600;letter-spacing:0.04em;
    text-transform:uppercase;background:var(--teal);color:var(--white);padding:5px 10px;border-radius:2px;
  }
  .soon-banner p{margin:0;color:var(--ink-soft);font-size:0.92rem;}

  footer{padding:32px 0;text-align:center;font-size:0.8rem;color:var(--ink-soft);}


  .saw-vorher{animation:fadeVorher 9s ease-in-out infinite;}
  .saw-nachher{animation:fadeNachher 9s ease-in-out infinite;}
  @keyframes fadeVorher{
    0%,38%{opacity:1;}
    50%,88%{opacity:0.12;}
    100%{opacity:1;}
  }
  @keyframes fadeNachher{
    0%,38%{opacity:0.12;}
    50%,88%{opacity:1;}
    100%{opacity:0.12;}
  }
  @media (prefers-reduced-motion: reduce){
    .saw-vorher, .saw-nachher{animation:none;opacity:1;}
  }

  /* FORMULAR UND AUFKLAPPBARE FRAGEN */
  .formfield{margin-bottom:16px;text-align:left;}
  .formfield label{display:block;font-size:0.8rem;font-weight:600;margin-bottom:6px;color:#c7cede;}
  .formfield input, .formfield textarea{
    width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,0.25);border-radius:3px;
    font-family:'IBM Plex Sans',sans-serif;font-size:0.95rem;background:rgba(255,255,255,0.06);color:var(--white);
  }
  .formfield input::placeholder, .formfield textarea::placeholder{color:#8b96ad;}
  .formfield input:focus, .formfield textarea:focus{outline:2px solid var(--amber);outline-offset:1px;}
  .contact-form{max-width:480px;margin:0 auto;text-align:left;}
  .kontakt-raster{display:grid;grid-template-columns:0.8fr 1.2fr;gap:40px;align-items:start;text-align:left;}
  @media (max-width:800px){.kontakt-raster{grid-template-columns:1fr;gap:32px;}}
  .kontakt-raster .contact-form{max-width:none;margin:0;}
  .kontaktwege{list-style:none;margin:0;padding:0;}
  .kontaktwege li{margin-bottom:22px;}
  .kontaktwege .art{display:block;font-family:'IBM Plex Sans Condensed';font-size:0.72rem;
    text-transform:uppercase;letter-spacing:0.06em;color:#8b96ad;margin-bottom:5px;}
  .kontaktwege a{font-family:'IBM Plex Mono';font-size:0.98rem;color:var(--white);text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,0.3);transition:color .2s, border-color .2s;}
  .kontaktwege a:hover{color:var(--amber);border-color:var(--amber);}
  .form-success{display:none;color:var(--amber);font-weight:600;margin-top:16px;}

  details{border-bottom:1px solid var(--rule);padding:18px 0;}
  details:first-of-type{border-top:1px solid var(--rule);}
  summary{font-weight:600;cursor:pointer;font-size:1rem;list-style:none;position:relative;padding-right:28px;}
  summary::-webkit-details-marker{display:none;}
  summary::after{
    content:'+';position:absolute;right:0;top:0;font-family:'IBM Plex Mono';font-size:1.2rem;color:var(--teal);
  }
  details[open] summary::after{content:'−';}
  details p{color:var(--ink-soft);margin:12px 0 0;font-size:0.95rem;}

  /* KONTAKTWEGE
     Telefonnummer im Kopfbereich (nur Desktop), schmale Leiste am unteren
     Bildschirmrand (nur Handy und Tablet), ruhiger Abschlussblock am Seitenende. */

  .tel-nav{
    display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono';
    font-size:0.82rem;color:var(--ink);text-decoration:none;white-space:nowrap;
    padding-bottom:4px;border-bottom:2px solid transparent;transition:border-color .2s;
  }
  .tel-nav:hover{border-color:var(--amber);}
  .tel-nav svg{flex-shrink:0;}
  @media (max-width:1080px){.tel-nav{display:none;}}

  .mobile-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
    background:var(--white);border-top:1px solid var(--rule);
    box-shadow:0 -6px 18px rgba(20,33,61,0.08);
    transform:translateY(0);transition:transform .25s ease;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-cta.ist-versteckt{transform:translateY(115%);}
  .mobile-cta a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:15px 8px;text-decoration:none;color:var(--ink);
    font-family:'IBM Plex Sans Condensed';font-weight:600;font-size:0.9rem;
    text-transform:uppercase;letter-spacing:0.04em;
  }
  .mobile-cta a + a{border-left:1px solid var(--rule);}
  .mobile-cta svg{flex-shrink:0;}
  @media (max-width:1080px){
    .mobile-cta{display:flex;}
    body{padding-bottom:62px;}
  }
  @media (prefers-reduced-motion: reduce){.mobile-cta{transition:none;}}

  .cta-abschluss{
    background:var(--paper-dim);border:1px solid var(--rule);border-radius:3px;
    padding:44px 40px;
  }
  @media (max-width:640px){.cta-abschluss{padding:32px 22px;}}
  .cta-abschluss h2{margin:0 0 12px;}
  .cta-abschluss p{color:var(--ink-soft);max-width:760px;margin:0 0 26px;}
  .cta-abschluss .tel-zeile{margin:20px 0 0;font-size:0.88rem;color:var(--ink-soft);}
  .cta-abschluss .tel-zeile a{color:var(--ink);text-decoration:underline;}