@font-face{
    font-family:'Space Grotesk'; src:url('../../fonts/SpaceGrotesk-Var.woff2') format('woff2-variations'), url('../../fonts/SpaceGrotesk-Var.woff2') format('woff2');
    font-weight:300 700; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'IBM Plex Sans'; src:url('../../fonts/IBMPlexSans-Var.woff2') format('woff2-variations'), url('../../fonts/IBMPlexSans-Var.woff2') format('woff2');
    font-weight:100 700; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'IBM Plex Mono'; src:url('../../fonts/IBMPlexMono-Var.woff2') format('woff2-variations'), url('../../fonts/IBMPlexMono-Var.woff2') format('woff2');
    font-weight:100 700; font-style:normal; font-display:swap;
  }
  :root{
    --paper:#F3F1EA; --paper-line:#DAD8CE; --ink:#14181C; --steel:#4C5B6B; --steel-light:#626C77; --steel-dark-bg:#A3ADB6;
    --amber:#D98F3F; --amber-ink:#5C3A12; --green:#3F8F5F; --red:#B14A3D; --card:#FFFFFF; --radius:2px; --max:1180px;
  
    --cf-ds-paper:var(--paper,#F1F2ED);
  --cf-ds-ink:var(--ink,#14181C);
  --cf-ds-steel:var(--steel,#5E686F);
  --cf-ds-line:var(--paper-line,#D7D4CA);
  --cf-ds-amber:var(--amber,#D98F3F);
  --cf-ds-green:var(--green,#3F8F5F);
  --cf-ds-red:var(--red,#B14A3D);
  --cf-ds-surface:#F8F7F2;
  --cf-ds-surface-alt:#EDEAE2;
  --cf-ds-dark:#141B1F;
  --cf-ds-space-1:8px;
  --cf-ds-space-2:14px;
  --cf-ds-space-3:22px;
  --cf-ds-space-4:34px;
  --cf-ds-space-5:52px;
  --cf-ds-space-6:82px;
  --cf-ds-radius:2px;
  --cf-ds-shadow:0 22px 46px -42px rgba(12,17,20,.55);
  --cf-ds-copy:68ch;
    --cf-type-display:'Space Grotesk',sans-serif;
  --cf-type-body:'IBM Plex Sans',Arial,sans-serif;
  --cf-type-mono:'IBM Plex Mono',monospace;
  --cf-type-marketing:clamp(17px,1.22vw,19px);
  --cf-type-marketing-compact:16px;
  --cf-type-technical-value:clamp(15px,1.05vw,17px);
  --cf-type-technical-meta:clamp(12px,.78vw,13px);
  --cf-type-micro:clamp(10.5px,.68vw,11.5px);
  --cf-type-measure:68ch;
    --cf-motion-fast:160ms;
  --cf-motion-standard:220ms;
  --cf-motion-slow:320ms;
  --cf-motion-ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  section[id], footer{scroll-margin-top:84px;}
  /* Einwilligung: nicht-blockierende, touch-sichere Leiste über allen Website-Layern. */
  .consent-layer{
    position:fixed; left:0; right:0; bottom:0; z-index:2147483646;
    display:flex; justify-content:center; padding:16px;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
    pointer-events:auto; background:transparent; isolation:isolate;
  }
  .consent-layer[hidden]{display:none!important;}
  .consent-box{
    position:relative; z-index:1; pointer-events:auto; touch-action:auto;
    background:var(--card); border:1px solid var(--paper-line);
    box-shadow:0 10px 34px rgba(20,24,28,0.18);
    max-width:760px; width:100%; padding:20px 22px 16px;
  }
  .consent-box h2{font-family:'Space Grotesk', sans-serif; font-size:1.02rem; font-weight:600; margin:0 0 8px; color:var(--ink);}
  .consent-box p{font-size:0.86rem; line-height:1.55; color:var(--steel); margin:0 0 14px;}
  .consent-actions{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .consent-box .consent-btn{
    position:relative; z-index:2; flex:1 1 220px; min-height:48px;
    background:#fff; color:var(--ink); border:1px solid var(--steel);
    font-family:'IBM Plex Sans', sans-serif; font-size:0.86rem; font-weight:600;
    border-radius:var(--radius); cursor:pointer; letter-spacing:0; text-transform:none;
    pointer-events:auto; touch-action:manipulation; -webkit-tap-highlight-color:rgba(217,143,63,.18);
  }
  .consent-box .consent-btn:hover{background:var(--paper); border-color:var(--ink); color:var(--ink);}
  .consent-legal{font-size:0.76rem; color:var(--steel-light); margin:12px 0 0;}
  .consent-legal a{color:var(--steel); text-decoration:underline; text-underline-offset:2px;}
  .consent-reopen{background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
    text-decoration:underline; text-underline-offset:2px; min-height:44px;}

  @media(max-width:820px){
    .consent-layer{
      padding:8px 10px calc(8px + env(safe-area-inset-bottom));
      align-items:flex-end;
    }
    .consent-box{
      max-width:520px; max-height:min(56dvh,460px); overflow:auto;
      -webkit-overflow-scrolling:touch; padding:15px; border-radius:10px;
    }
    .consent-box h2{font-size:1rem; line-height:1.2; margin-bottom:6px;}
    .consent-box p{font-size:.80rem; line-height:1.42; margin-bottom:9px;}
    .consent-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
    .consent-box .consent-btn{min-width:0; min-height:48px; padding:9px 7px; font-size:.80rem; line-height:1.15;}
    .consent-legal{font-size:.70rem; line-height:1.35; margin-top:8px;}
  }
  @media(max-width:360px){
    .consent-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
    .consent-box{max-height:min(62dvh,500px);}
  }
  
  
  /* Aus einem Konfigurator mitgebrachte Auswahl im Kontaktabschnitt. */
  .cta-handover{border:1px solid var(--amber); background:#FBF1E3; text-align:left; padding:14px 16px; margin:0 0 18px; border-radius:var(--radius);}
  .cta-handover[hidden]{display:none;}
  .cta-handover-head{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:0.85rem; margin:0 0 8px; color:var(--ink);}
  .cta-handover-head button{background:none; border:0; font-size:1.2rem; line-height:1; color:var(--steel); cursor:pointer; min-width:44px; min-height:44px;}
  .cta-handover-head button:hover{color:var(--ink);}
  .cta-handover-body{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--steel); margin:0; white-space:pre-wrap; word-break:break-word;}
  /* Kontaktformular im bestehenden Designsystem — kompakt, kein SaaS-Kasten. */
  .cta-form{text-align:left; max-width:620px; margin:0 auto;}
  .cta-fields{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin:0 0 16px;}
  .cta-field{display:flex; flex-direction:column; gap:5px; min-width:0;}
  .cta-field-wide{grid-column:1 / -1;}
  .cta-field > span{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel);}
  .cta-field input, .cta-field textarea{
    font-family:'IBM Plex Sans', sans-serif; font-size:0.92rem; color:var(--ink);
    background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius);
    padding:11px 12px; min-height:46px; width:100%; box-sizing:border-box;
  }
  .cta-field textarea{min-height:104px; resize:vertical; line-height:1.5;}
  .cta-field input:focus, .cta-field textarea:focus{outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber);}
  .cta-field input[aria-invalid="true"], .cta-field textarea[aria-invalid="true"]{border-color:var(--red);}
  .cta-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
  .cta-form .cta-row{justify-content:flex-start; align-items:center; gap:16px; margin:0;}
  #kontakt-send{min-height:46px;}
  .cta-status{font-size:0.85rem; margin:0; color:var(--steel); min-height:20px; text-align:left;}
  .cta-form .cta-mail{text-align:left; margin:14px 0 0;}
  .cta-expect{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;margin:-12px auto 24px;max-width:760px;color:var(--steel);font:500 .875rem/1.5 'IBM Plex Sans',sans-serif;}
  .cta-expect span{display:inline-flex;align-items:center;gap:7px;}
  .cta-expect span::before{content:'✓';color:var(--green);font-weight:800;}
  .cta-form-hint{max-width:none!important;margin:0 0 14px!important;text-align:left!important;font-size:.82rem!important;line-height:1.5;color:var(--steel)!important;}
  .cta-field-help{font-size:.875rem;line-height:1.4;color:var(--steel-light);margin-top:1px;}
  .cta-field-error{font-size:.76rem;line-height:1.4;color:var(--red);font-weight:600;margin-top:1px;}
  .cta-field-error[hidden]{display:none;}
  .cta-handover-note{margin:10px 0 0!important;max-width:none!important;text-align:left!important;font-size:.76rem!important;line-height:1.45;color:var(--steel)!important;}
  .cta-status.is-error{color:var(--red);}
  .cta-done{border:1px solid var(--green,#3F8F5F); background:#F2F8F4; padding:18px 20px; text-align:left; max-width:620px; margin:0 auto;}
  .cta-done h3{font-family:'Space Grotesk', sans-serif; font-size:1.05rem; margin:0 0 6px; color:var(--ink);}
  .cta-done p{margin:0; font-size:0.88rem; color:var(--steel);}
  #kontakt-send[disabled]{opacity:1; background:#EDEBE3; border-color:#DCDAD0; color:#8B8B80; cursor:progress;}
  @media(max-width:640px){
    .cta-fields{grid-template-columns:minmax(0,1fr); gap:11px; margin-bottom:14px;}
    /* Der Kontaktbereich nahm auf dem Telefon zu viel Höhe ein — kompakter,
       ohne Felder zu entfernen oder zu quetschen. */
    .cta-section{padding:44px 0;}
    .cta-box{padding:26px 20px;}
    .cta-field textarea{min-height:92px;}
    .cta-mail{margin-top:12px;}
    .cta-expect{justify-content:flex-start;margin:-8px 0 18px;gap:6px 14px;font-size:.875rem;}
    .cta-handover{padding:12px 14px; margin-bottom:14px;}
  }
  /* Seitenscroll sperren, solange ein Sheet offen ist. */
  body.sheet-scroll-locked{position:fixed; left:0; right:0; width:100%; overflow:hidden;}
  /* Sprungleiste: auf Mobil die einzige Navigation, ohne Overlay und ohne Zustand. */
  @media(max-width:960px){
    section[id], footer{scroll-margin-top:76px;}

    /* Kompakter Header: beim Einstieg volle Marke, beim Arbeiten deutlich flacher.
       Umschaltpunkte mit Abstand (Hysterese), damit nichts bei jedem Pixel zappelt. */
    header{transition:none;}
    /* Kompakter Mobilkopf: Marke links, Menü rechts, rund 56 px. */
    .wrap.nav{transition:padding .18s ease; padding:4px 20px; min-height:56px;}
    .logo-mark{font-size:1.18rem;}
    .logo-mark, .btn-magnetic{transition:font-size .18s ease, padding .18s ease;}
  }
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }
  body::before{content:""; position:fixed; top:0; left:0; right:0; height:3px; background:var(--amber); z-index:100;}
  body{
    margin:0;
    background: linear-gradient(var(--paper-line) 1px, transparent 1px) 0 0/100% 40px, linear-gradient(90deg, var(--paper-line) 1px, transparent 1px) 0 0/40px 100%, var(--paper);
    background-attachment:fixed; color:var(--ink); font-family:'IBM Plex Sans', sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
  .mono{font-family:'IBM Plex Mono', monospace;}
  ::selection{background:var(--amber); color:var(--ink);}
  :focus-visible{outline:2.5px solid var(--amber); outline-offset:3px;}

  header{position:sticky; top:0; z-index:50; background:rgba(241,242,237,0.88); backdrop-filter:blur(6px); border-bottom:1px solid var(--paper-line);}
  .nav{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 0; min-height:72px;}
  .logo{display:flex; align-items:baseline; gap:8px; text-decoration:none;}
  .logo-mark{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.35rem; letter-spacing:-0.01em; color:var(--ink);}
  .logo-tag{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--steel); letter-spacing:0.08em; text-transform:uppercase;}
  nav.links{display:none; gap:26px; align-items:center;}
  @media(min-width:960px){nav.links{display:flex;}}
  nav.links a{text-decoration:none; color:var(--steel); font-size:0.9rem; font-weight:500; border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .15s, color .15s;}
  nav.links a:hover{color:var(--ink); border-color:var(--amber);}
  .btn{font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:0.9rem; border:1px solid var(--ink); background:var(--ink); color:var(--paper); padding:11px 20px; border-radius:var(--radius); text-decoration:none; display:inline-block; cursor:pointer; transition:background .15s, color .15s, transform .1s;}
  .btn:hover{background:var(--amber); border-color:var(--amber); color:var(--ink);}
  .btn:active{transform:translateY(1px);}
  .btn:disabled{opacity:0.35; cursor:not-allowed;}
  .btn:disabled:hover{background:var(--ink); color:var(--paper);}
  .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--steel-light);}
  .btn-ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}
  /* Der Kopf-CTA ist bewusst ruhig: Amber gehört der Hauptaktion im Hero. */
  .nav-cta{display:none; flex-shrink:0; padding:9px 16px; font-size:0.86rem; min-height:42px;
    background:transparent; border:1px solid var(--ink); color:var(--ink);}
  .nav-cta:hover{background:var(--ink); color:var(--paper);}
  @media(min-width:961px){.nav-cta{display:inline-flex; align-items:center;}}
  .menu-btn{display:flex; flex-direction:column; justify-content:center; gap:4px; width:48px; height:48px;
    background:none; border:0; cursor:pointer; padding:0 12px 0 0; margin-left:auto;}
  .menu-btn span{display:block; height:2px; background:var(--ink); border-radius:1px;}
  @media(min-width:961px){.menu-btn{display:none;}}
  /* Der Menüknopf lag unter der Overlay-Fläche und war deshalb nicht mehr
     klickbar — das Menü ließ sich nicht wieder schließen. */
  body.menue-offen .menu-btn{position:relative; z-index:320;}
  body.menue-offen .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  body.menue-offen .menu-btn span:nth-child(2){opacity:0;}
  body.menue-offen .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .menu-btn span{transition:transform .18s ease, opacity .18s ease;}
  .mobil-menue{position:fixed; inset:0; z-index:300; background:var(--paper); padding:76px 24px 24px;
    overflow-y:auto; overscroll-behavior:contain;}
  .mobil-menue[hidden]{display:none;}
  .mobil-menue nav{display:flex; flex-direction:column; gap:4px; max-width:520px; margin:0 auto;}
  .mobil-menue nav a{font-family:'Space Grotesk', sans-serif; font-size:1.32rem; font-weight:600; color:var(--ink);
    text-decoration:none; padding:14px 0; min-height:56px; display:flex; align-items:center; border-bottom:1px solid var(--paper-line);}
  .mobil-menue nav a.btn{justify-content:center; border-bottom:0; margin-top:22px; font-size:1rem;}
  body.menue-offen{position:fixed; left:0; right:0; width:100%; overflow:hidden;}
  @media(max-width:480px){.logo-tag{display:none;}}

  /* ===== Premium-Hero =====
     Desktop: das Keyvisual liegt randabfallend hinter der Kommunikation; die linke
     Bildzone ist hell genug (gemessen 240/255) für dunkle Schrift ohne Overlay.
     Mobil: Bild oben, Text darunter auf Paper — kein Text über dunklem Bild. */
  /* Hintergrund exakt auf die linke Randfarbe des Keyvisuals abgestimmt
     (gemessen: rgb(242,242,242)), damit links keine sichtbare Nahtkante entsteht. */
  
  
  /* Das Keyvisual enthält rechts den Konfigurator und unten die technische
     Zeichnung — beides darf nie angeschnitten werden. Deshalb "contain" und
     rechtsbündig: auf sehr breiten Schirmen entsteht links mehr ruhige Fläche,
     statt dass oben und unten etwas verloren geht. */
  
  /* Weicher Anschluss der Bildkante an die Paper-Fläche */
  
  /* Auf schmaleren Desktops rückt das Keyvisual nach rechts, damit Text und
     Schaltflächen nicht auf der Armatur liegen. Gemessen bei 1024 und 1280. */
  @media(min-width:861px) and (max-width:1500px){
    
  }
  /* Bei 1024 reicht auch das nicht: dort steht die zweite Schaltfläche unter der
     ersten, statt auf der Armatur zu liegen. */
  @media(min-width:861px) and (max-width:1100px){
    
    
    
    
  }
  
  .eyebrow{font-family:'IBM Plex Sans', sans-serif; font-size:0.82rem; font-weight:600; letter-spacing:0.09em;
    text-transform:uppercase; color:var(--amber-ink); display:flex; align-items:center; gap:12px; margin:0 0 20px;}
  .eyebrow-mark{width:26px; height:2px; background:var(--amber); flex:none;}
  /* Größe so gewählt, dass „Komplexe Produkte." in eine Zeile passt und der Text
     die Armatur nicht erreicht. */
  h1{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:clamp(2.2rem, 3.5vw, 3.35rem);
    line-height:1.06; letter-spacing:-0.022em; margin:0 0 22px; color:var(--ink); max-width:none;}
  .lede{font-size:clamp(1rem, 1.35vw, 1.22rem); color:var(--steel); max-width:44ch; margin:0 0 32px; line-height:1.55;}
  
  .btn-amber{background:var(--amber); border-color:var(--amber); color:var(--ink); min-height:52px;
    display:inline-flex; align-items:center; gap:10px; padding:13px 26px; font-size:1rem;}
  .btn-amber:hover{background:#E9A052; border-color:#E9A052; color:var(--ink);}
  .btn-outline{background:transparent; border:1px solid var(--ink); color:var(--ink); min-height:52px;
    display:inline-flex; align-items:center; padding:13px 24px; font-size:1rem;}
  .btn-outline:hover{background:var(--ink); color:var(--paper);}

  /* Kurzüberblick — bereits der nächste Abschnitt, nicht mehr Teil des Heros. */
  .hero-benefits{background:var(--card); border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); padding:34px 0 28px;}
  .hero-benefits-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:30px;}
  .benefit{display:flex; flex-direction:column; gap:6px; padding-left:18px; border-left:2px solid var(--amber);}
  .benefit-num{font-family:'IBM Plex Mono', monospace; font-size:0.74rem; letter-spacing:0.12em; color:var(--steel-light);}
  /* Technische Strichzeichnung statt bunter Symbole — dieselbe Sprache wie die Zeichnungen. */
  .benefit-ico{width:38px; height:38px; display:block; color:var(--steel); margin:2px 0 4px;}
  .benefit strong{font-size:1rem; color:var(--ink); font-weight:600; line-height:1.3;}
  .benefit-lead{font-size:0.9rem; color:var(--steel); line-height:1.45;}
  .benefit-sub{font-size:0.82rem; color:var(--steel-light); line-height:1.45;}
  .hero-benefits-note{
    margin:26px 0 0; padding:12px 16px; font-size:0.88rem; color:var(--ink);
    background:var(--paper); border-left:2px solid var(--ink);
  }

  @media(max-width:860px){
    /* Bild oben, Text darunter: die Mobilaufnahme ist durchgehend dunkel. */
    
    /* URSACHE des schmalen Hochkant-Posters: object-fit:contain stammt aus dem
       Desktop-Layout, wo der Konfigurator im Bild nicht angeschnitten werden darf.
       Auf dem Telefon führte dieselbe Regel bei einem hochformatigen Asset dazu,
       dass das Bild nur noch die Höhe ausfüllte und seitlich weiße Flächen ließ.
       Hier gilt deshalb cover mit bewusstem Zuschnitt. */
    
    /* Kurzfassung der Subheadline: im Hero zählt Tempo, der Produktfinder wird unten erklärt. */
    
    
    
    
    
    /* Weniger Luft zwischen Bild und Eyebrow — die Zeile ist ein Orientierungssignal,
       kein eigener Block. */
    
    .eyebrow{margin-bottom:12px;}
    h1{font-size:clamp(1.7rem, 8.2vw, 2.35rem); max-width:none;}
    .lede{font-size:1.02rem; max-width:none; margin-bottom:22px;}
    
    
    .btn-amber{min-height:54px;}
    /* Der zweite Weg bleibt gut erreichbar, tritt aber sichtbar zurück:
       erst ausprobieren, dann sprechen. */
    .btn-outline{min-height:46px; font-size:0.92rem; font-weight:500;
      border-color:var(--paper-line); color:var(--steel); background:transparent;}
    .hero-benefits-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px 20px;}
    .benefit-ico{width:32px; height:32px;}
    .hero-benefits-note{margin-top:20px; font-size:0.85rem;}
  }
  @media(max-width:360px){
    /* Bei 320 px bleibt das Bild großflächig; dafür rücken Text und Schaltflächen
       enger zusammen, damit der folgende Abschnitt weiter angeschnitten sichtbar ist. */
    
    
    .lede{margin-bottom:20px;}
    .hero-benefits-grid{grid-template-columns:minmax(0,1fr);}
  }

  section{padding:84px 0;}
  @media(max-width:640px){section{padding:52px 0;}}
  .section-head{max-width:640px; margin:0 0 48px;}
  .section-kicker{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel); margin:0 0 12px;}
  .section-example{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--steel); margin-top:10px;}
  .type-cards{display:grid; grid-template-columns:1fr; gap:16px; margin-top:32px;}
  /* Technische Strichzeichnung zur schnellen Unterscheidung der vier Prinzipien —
     Orientierung, keine Dekoration. */
  /* Kleine Mockups statt Symbole: sie zeigen, wie der jeweilige Konfigurator
     arbeitet. Gleiche Höhe auf allen vier Karten, damit die Titel auf einer
     Linie beginnen. */
  .type-card-vis{
    width:100%; height:96px; display:block; margin:0 0 18px; color:var(--steel);
    flex:none; background:var(--paper); border:1px solid var(--paper-line); border-radius:var(--radius);
  }
  .type-card:hover .type-card-vis{color:var(--ink); border-color:var(--steel-light);}
  .type-card-text{font-size:0.88rem; color:var(--steel); line-height:1.5; margin:0;}
  .type-card-lead{font-weight:600; color:var(--ink); margin:0;}
  /* Aktionszeile immer auf derselben Grundlinie am unteren Kartenrand. */
  .type-card{display:flex; flex-direction:column; gap:9px;}
  .type-card .type-card-cta{margin-top:auto; padding-top:14px;}
  .type-card:hover{transform:translateY(-2px); border-color:var(--steel-light);}
  .type-card{transition:transform .16s ease, border-color .16s ease;}
  @media(prefers-reduced-motion:reduce){ .type-card:hover{transform:none;} }
  @media(max-width:720px){ .type-card-vis{height:104px;} }
  @media(min-width:720px){.type-cards{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1040px){.type-cards{grid-template-columns:repeat(4,1fr);}}
  .type-card{display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius); padding:24px 22px 22px; text-decoration:none; color:inherit; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
  .type-card:hover{border-color:var(--amber); transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(20,24,28,0.25);}
  .type-card-num{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--amber-text,#8F5A1F); font-weight:700;}
  .type-card h3{margin:2px 0 0; font-size:1.05rem;}
  .type-card-lead{font-weight:600; color:var(--ink); font-size:0.9rem; margin:0;}
  .type-card p:not(.type-card-lead){color:var(--steel); font-size:0.86rem; line-height:1.5; margin:0;}
  .type-card-tags{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--steel-light); margin-top:4px;}
  .type-card-cta{font-size:0.84rem; font-weight:600; color:var(--ink); margin-top:auto; padding-top:8px;}
  .type-card:hover .type-card-cta{color:var(--amber-text,#8F5A1F);}
  .type-cards-note{max-width:640px; margin:26px auto 0; text-align:center; color:var(--steel); font-size:0.9rem; line-height:1.6;}
  h2{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:clamp(1.6rem, 2.6vw, 2.15rem); letter-spacing:-0.01em; margin:0 0 14px;}
  .section-head p{color:var(--steel); font-size:1.02rem; margin:0; max-width:52ch;}

  /* demo 1 */
  .demo-section{background:#EAEBE4; border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);}
  /* Kapitelwechsel vor Beispiel 4: sichtbar neuer Demonstrator, aber kein eigener
     Farbblock — feine Amber-Marke, minimal abweichende Fläche, mehr Luft davor. */
  #demo4{position:relative; background:#DFE0D7; padding-top:30px;}
  #demo4::before{content:''; position:absolute; top:-1px; left:0; width:120px; height:3px; background:var(--amber);}
  @media(max-width:860px){
    #demo3{padding-bottom:60px;}
    #demo4{padding-top:38px;}
    #demo4 .section-head{margin-top:6px;}
  }
  .viewer3d-block{background:var(--card); padding:18px 20px 20px; border-top:1px solid var(--paper-line);}
  .viewer3d-canvas-wrap{position:relative; z-index:1; min-width:0; max-width:100%; background:#F7F5EE; border:1px solid var(--paper-line); border-radius:var(--radius); overflow:hidden; height:260px; cursor:grab; transition:all .25s ease;}
  /* Hotspots — ausschließlich auf #viewer3d-wrap (Konfigurator 1) gescoped, niemals auf die
     gemeinsame Klasse .viewer3d-canvas-wrap, die auch Demo 3 (#c3-wrap) verwendet. */
  #viewer3d-wrap .hotspot-layer{position:absolute; inset:0; pointer-events:none; z-index:3;}
  /* Maßebene: technische Linien in Ink/Steel, Werte in Mono. Keine Schatten,
     kein Glow — die Optik folgt der technischen Zeichnung, nicht dem Web. */
  /* width/height sind bei einem SVG nicht verzichtbar: Ein ersetztes Element mit
     position:absolute und inset:0, aber ohne viewBox, nimmt seine Eigengröße von
     300×150 an statt den Rahmen zu füllen. Vor dem ersten Zeichnen der Maße war
     die Ebene deshalb 300×150 groß — auf einem 320-px-Gerät breiter als der
     Viewer selbst. Sichtbar wurde davon nichts (leer, pointer-events:none), es
     blieb aber eine falsch dimensionierte Fläche im Layout. */
  #viewer3d-wrap .dim-layer{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2;}
  #viewer3d-wrap .dim-layer[hidden]{display:none;}
  #viewer3d-wrap .dim-line, #viewer3d-wrap .dim-ext{stroke:#4C5B6B; stroke-width:1; fill:none;}
  #viewer3d-wrap .dim-ext{stroke-dasharray:none; opacity:0.7;}
  #viewer3d-wrap .dim-tick{stroke:#4C5B6B; stroke-width:1.4;}
  #viewer3d-wrap .dim-halo{fill:#F3F1EA; stroke:none;}
  #viewer3d-wrap .dim-text{
    font-family:'IBM Plex Mono', monospace; font-size:11px; fill:#14181C;
    dominant-baseline:middle; text-anchor:middle;
  }
  #viewer3d-wrap.dims-an .viewer3d-explode-btn[aria-pressed="true"]{border-color:var(--amber);}
  #viewer3d-dims[aria-pressed="true"]{background:#FBF1E3; border-color:var(--amber); color:#8F5A1F;}
  /* Der Marker sitzt NICHT mehr auf dem Bauteil, sondern daneben: ein kleiner Anker
     am exakten 3D-Punkt, eine dünne Leader-Line und der eigentliche, dezente Marker.
     Das Zubehör bleibt dadurch sichtbar. Die Trefferfläche bleibt 44 × 44 px. */
  /* Am Bauteil steht KEIN eigener Punkt mehr. Es gibt genau einen sichtbaren und
     interaktiven Hotspot — den ausgelagerten Marker. Am Bauteil endet lediglich die
     Linie mit einer sehr kleinen neutralen Kappe (Pseudo-Element, kein eigenes
     DOM-Element, keine Events). */
  #viewer3d-wrap .hotspot-leader{position:absolute; height:1px; transform-origin:0 50%; background:linear-gradient(90deg, rgba(217,143,63,0.45), #D98F3F); pointer-events:none; z-index:2;}
  #viewer3d-wrap .hotspot-leader::after{content:''; position:absolute; left:-1.5px; top:-1px; width:3px; height:3px; border-radius:50%; background:rgba(217,143,63,0.75); pointer-events:none;}
  #viewer3d-wrap .hotspot-leader[hidden]{display:none !important;}
  /* Leader Lines zu verdeckt liegenden Bauteilen. Zwei Stricharten wie in der
     technischen Zeichnung: durchgezogen außerhalb der Silhouette, gestrichelt
     über dem Gehäuse. Die gestrichelte Linie behauptet damit nicht, durch das
     Bauteil zu zeigen, sondern kennzeichnet den verdeckten Verlauf. */
  #viewer3d-wrap .hotspot-leader-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible;}
  #viewer3d-wrap .hs-leader-frei{stroke:#D98F3F; stroke-width:1; fill:none; opacity:0.9;}
  #viewer3d-wrap .hs-leader-verdeckt{stroke:#D98F3F; stroke-width:1; fill:none; stroke-dasharray:4 3; opacity:0.45;}
  #viewer3d-wrap .hs-leader-punkt{fill:#D98F3F; opacity:0.8;}
  /* Marker eines verdeckten Bauteils: hohler Punkt — unterscheidbar vom
     direkt am sichtbaren Bauteil liegenden Marker, ohne zweite Farbe. */
  #viewer3d-wrap .hotspot-marker.is-hidden-part .dot{background:#fff; border-color:#D98F3F;}
  #viewer3d-wrap .hotspot-marker.is-hidden-part:hover .dot,
  #viewer3d-wrap .hotspot-marker.is-hidden-part:focus-visible .dot,
  #viewer3d-wrap .hotspot-marker.is-hidden-part.is-active .dot{background:#D98F3F;}
  #viewer3d-wrap .hotspot-marker{position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; pointer-events:auto; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:3;}
  /* Kritischer Fix: [hidden] muss die display:flex-Basisregel oben zuverlässig überschreiben.
     Ohne diese explizite Regel gewinnt die Klassenregel gegen die CSS-Browser-Standardregel
     [hidden]{display:none} durch höhere Spezifität (#id .class > [attr]) — el.hidden=true hätte
     dann KEINE sichtbare Wirkung, obwohl das Attribut korrekt gesetzt wird. */
  #viewer3d-wrap .hotspot-marker[hidden]{display:none !important;}
  #viewer3d-wrap .hotspot-marker .dot{position:absolute; left:50%; top:50%; margin:-5px 0 0 -5px; width:10px; height:10px; border-radius:50%; background:#D98F3F; border:1.5px solid #fff; box-shadow:0 1px 3px rgba(20,24,28,0.3); transition:transform .15s ease, background .15s ease;}
  #viewer3d-wrap .hotspot-marker .ring{position:absolute; left:50%; top:50%; margin:-9px 0 0 -9px; width:18px; height:18px; border-radius:50%; border:1px solid rgba(217,143,63,0.55); opacity:0;}
  #viewer3d-wrap .hotspot-marker:hover .dot,
  #viewer3d-wrap .hotspot-marker:focus-visible .dot,
  #viewer3d-wrap .hotspot-marker.is-active .dot{transform:scale(1.5); background:#C97F2E;}
  #viewer3d-wrap .hotspot-marker.is-active .ring{opacity:1;}
  /* Einmaliger dezenter Hinweis beim ersten Erscheinen statt Dauerpuls. */
  #viewer3d-wrap .hotspot-marker.is-new .ring{animation:hotspot-pulse 2.2s ease-out 3;}
  /* Verdeckte Hotspots werden per hidden-Attribut komplett aus dem Rendering genommen
     (JS: renderHotspots), keine halbtransparente Darstellung mehr. */
  #viewer3d-wrap .hotspot-marker .tip{position:absolute; bottom:100%; left:50%; transform:translateX(-50%) translateY(-6px); background:#14181C; color:#fff; font-size:0.72rem; font-weight:500; padding:4px 9px; border-radius:5px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s ease; font-family:'IBM Plex Mono',monospace;}
  #viewer3d-wrap .hotspot-marker:hover .tip{opacity:1;}
  /* Auf schmalen Geräten war der Kurzhinweis mit white-space:nowrap bis zu
     288 px breit — bei einem 222 px schmalen Viewer wurde er links und rechts
     abgeschnitten und damit unlesbar. Jetzt umbricht er und bleibt innerhalb
     der Viewerbreite. Der vollständige Text steht ohnehin zusätzlich im
     aria-label. */
  @media (max-width:860px){
    #viewer3d-wrap .hotspot-marker .tip{white-space:normal; max-width:min(190px, 62vw);
      text-align:center; line-height:1.3;}
  }
  @keyframes hotspot-pulse{0%{transform:scale(0.85); opacity:0.7;} 100%{transform:scale(1.9); opacity:0;}}
  #viewer3d-wrap .hotspot-first-hint{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); background:rgba(20,24,28,0.88); color:#fff; font-size:0.78rem; font-weight:500; padding:7px 14px; border-radius:20px; z-index:4; display:flex; align-items:center; gap:6px; opacity:0; pointer-events:none; transition:opacity .35s ease;}
  #viewer3d-wrap .hotspot-first-hint.visible{opacity:1;}
  #viewer3d-wrap .hotspot-first-hint-icon{font-size:0.85rem;}
  #viewer3d-wrap .hotspot-card{position:absolute; right:12px; top:12px; width:230px; background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius); box-shadow:0 10px 28px -8px rgba(20,24,28,0.28); padding:14px 14px 12px; z-index:5;}
  #viewer3d-wrap .hotspot-card-close{position:absolute; top:8px; right:8px; width:22px; height:22px; border:none; background:none; color:var(--steel); font-size:0.85rem; cursor:pointer; border-radius:4px;}
  /* Auf Touch bekommen kleine Bedienelemente eine unsichtbare 44-px-Trefferfläche.
     Die sichtbare Größe bleibt unverändert. */
  /* Auf Touch bekommen kleine Bedienelemente eine unsichtbare 44-px-Trefferfläche.
     Die sichtbare Größe bleibt unverändert. Gemessen bei 390 px nachgezogen:
     Zusatzmodul-Kästchen, Explosions- und Vollbildschalter, Etagenreiter,
     Schrittzähler und die Fußzeilenlinks waren darunter. */
  @media (pointer:coarse){
    #viewer3d-wrap .hotspot-card-close::before,
    .c-viewfit-controls button::before,
    .addon-item input::before,
    .viewer3d-expand-btn::before,
    .info-btn::before{ content:''; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
    #viewer3d-wrap .hotspot-card-close, .c-viewfit-controls button,
    .addon-item input, .viewer3d-expand-btn{ position:relative; }
    .viewer3d-explode-btn, .stepper-btn, .floor-tab, .floor-tab-add,
    .ab-save-btn, .quote-cta .btn, .cta-row .btn, .btn, .k4-btn{ min-height:44px; }
    .stepper-btn{ min-width:44px; }
    .logo{ display:inline-flex; align-items:center; min-height:44px; }
    .foot-row a, .foot-row button, .consent-legal a, .cta-mail a{
      display:inline-flex; align-items:center; min-height:44px;
    }
  }
  #viewer3d-wrap .hotspot-card-close:hover{background:var(--card);}
  #viewer3d-wrap .hotspot-card-title{font-weight:700; font-size:0.88rem; color:var(--ink); padding-right:20px;}
  #viewer3d-wrap .hotspot-card-current{font-size:0.78rem; color:var(--amber-text,#8F5A1F); font-weight:600; margin-top:3px;}
  #viewer3d-wrap .hotspot-card-desc{font-size:0.78rem; color:var(--steel); line-height:1.4; margin-top:7px;}
  #viewer3d-wrap .hotspot-card-cta{margin-top:11px; width:100%; min-height:40px; padding:9px 10px; border:1px solid var(--amber); background:var(--amber); color:var(--ink); border-radius:6px; font-size:0.78rem; font-weight:600; cursor:pointer;}
  #viewer3d-wrap .hotspot-card-cta:hover{background:#E9A052; border-color:#E9A052;}
  #demo .hotspot-target-highlight{animation:hotspot-target-flash 1.6s ease-out;}
  @keyframes hotspot-target-flash{0%,100%{box-shadow:none;} 15%,55%{box-shadow:0 0 0 3px rgba(217,143,63,0.55);}}
  @media (max-width: 640px){
    #viewer3d-wrap .hotspot-card{left:10px; right:10px; width:auto;}
  }
  .viewer3d-canvas-wrap:active{cursor:grabbing;}
  #viewer3d{width:100%; height:100%;}
  #viewer3d canvas{display:block;}
  /* Dezente technische Rückmeldung, dass der Viewer die Radbedienung übernimmt. */
  #viewer3d-wrap.is-aktiv{border-color:var(--amber); box-shadow:inset 0 0 0 1px var(--amber);}
  #viewer3d-wrap.is-aktiv .viewer3d-hint{color:var(--ink); background:rgba(251,241,227,0.92);}
  /* Bei aktiver Bemaßung tritt die Bedienhilfe zurück.

     Sie belegt 365 von 428 px der unteren Zone — praktisch die gesamte Breite,
     in der die Breitenbemaßung liegen will. Gemessen fand der Maßtext „300 mm"
     bei manchen Kamerawinkeln keine Lage, die weder aus dem Viewport ragt noch
     diese Zeile überdeckt, und nahm nach der Rangfolge die am wenigsten
     schlechte — er landete auf dem Hinweis.

     Wer die Maße einschaltet, hat den Viewer bereits bedient und braucht den
     Hinweis „Ziehen zum Drehen" nicht mehr. Er kommt zurück, sobald die
     Bemaßung wieder aus ist. Reine Sichtbarkeit, keine Logikänderung. */
  #viewer3d-wrap.dims-an .viewer3d-hint{display:none;}
  .viewer3d-hint{position:absolute; bottom:10px; left:12px; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--steel); background:rgba(243,241,234,0.85); padding:4px 9px; border-radius:2px; pointer-events:none;}
  .viewer3d-note{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--steel); margin-top:8px; line-height:1.5;}
  .stack-controls{display:flex; gap:28px; flex-wrap:wrap; margin-top:10px;}
  .stack-control label{display:block; font-size:0.8rem; color:var(--steel); margin-bottom:8px;}
  .stepper{display:inline-flex; align-items:center; border:1px solid var(--paper-line); border-radius:2px;}
  .stepper-btn{width:34px; height:34px; background:#fff; border:none; font-size:1.1rem; color:var(--ink); cursor:pointer; line-height:1;}
  .stepper-btn:hover{background:var(--paper);}
  .stepper span{display:inline-block; min-width:28px; text-align:center; font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:0.95rem;}
  .stack-view-box{padding:14px; display:flex; justify-content:center;}
  .stack-view-box svg{max-width:100%; height:auto;}
  .stack-view-box .c-unit{cursor:pointer;}
  .stack-view-box .c-unit:hover{opacity:0.7;}
  #c-timeline{background:#F7F5EE; border:1px solid var(--paper-line); border-radius:2px; padding:14px;}
  #c-timeline svg{display:block; width:100%; height:auto;}
  /* Orientierungsanzeige der 3D-Ansicht: dreht sich mit der Kamera mit. */
  .c3-compass{position:absolute; left:10px; bottom:10px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:6px;}
  .c3-compass svg{display:block; filter:drop-shadow(0 1px 3px rgba(20,24,28,0.18));}
  .c3-compass button{
    font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.06em;
    background:rgba(247,245,238,0.94); border:1px solid var(--paper-line); color:var(--steel);
    border-radius:2px; padding:5px 8px; min-height:32px; cursor:pointer;
  }
  .c3-compass button:hover{border-color:var(--ink); color:var(--ink);}
  @media(pointer:coarse){ .c3-compass button{min-height:44px;} }
  @media(max-width:600px){ .c3-compass svg{width:52px; height:52px;} .c3-compass button{font-size:0.58rem;} }
  .c3-legend{display:flex; gap:16px; flex-wrap:wrap; margin:12px 0 4px; font-family:'IBM Plex Sans',sans-serif; font-size:0.78rem; color:var(--ink);}
  .c3-legend-item{display:flex; align-items:center; gap:6px;}
  .c3-legend-swatch{width:12px; height:12px; border-radius:2px; display:inline-block;}
  .place-mode-row{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px;}
  .place-mode-btn{background:#fff; border:1px solid var(--paper-line); border-radius:2px; padding:9px 14px; font-family:'IBM Plex Sans',sans-serif; font-size:0.82rem; font-weight:600; color:var(--ink); cursor:pointer;}
  .place-mode-btn.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
  .grundriss-grid{display:inline-grid; gap:4px; background:#F7F5EE; border:1px solid var(--paper-line); padding:10px; border-radius:2px;}
  /* Kantenbeschriftung: liegt außerhalb des SVG, damit sie beim Zoomen und
     Verschieben stehen bleibt — die Orientierung ändert sich dabei ja nicht. */
  .c-canvas-wrap{position:relative; min-width:0; max-width:100%; background:#F7F5EE; border:1px solid var(--paper-line); border-radius:2px; padding:8px 26px 22px;}
  .c-edge{position:absolute; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.12em; color:var(--steel); pointer-events:none; user-select:none;}
  .c-edge-back{top:2px; left:50%; transform:translateX(-50%);}
  .c-edge-front{bottom:5px; left:50%; transform:translateX(-50%); color:var(--steel);}
  .c-edge-left{left:3px; top:50%; transform:translateY(-50%) rotate(-90deg); transform-origin:center;}
  .c-edge-right{right:3px; top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:center;}
  @media(max-width:700px){ .c-edge{font-size:0.55rem; letter-spacing:0.1em;} }
  /* Die viewBox gibt dem SVG eine intrinsische Breite. Ohne diese beiden Angaben
     zieht Safari die Spalte auf diese Breite auf. */
  /* §2 — touch-action: gemessene Entscheidung, nicht bequeme Voreinstellung.

     Versuch mit 'pan-y' (Seite ueber der Flaeche weiter vertikal scrollbar):
     Der Browser beansprucht die Geste dann selbst, sobald sie einen vertikalen
     Anteil hat. Gemessen fielen dadurch der Ein-Finger-Pan bei 320 px und das
     Container-Ziehen bei 768 px komplett aus — beides sind ausdrueckliche
     Anforderungen. 'pan-y' und Ein-Finger-Pan schliessen einander aus.

     Deshalb bleibt es bei 'none', aber ausschliesslich auf dieser einen Flaeche
     von 340 px Hoehe. Das ist keine globale Sperre: Die uebrige Seite scrollt
     normal, der Browserzoom ist nirgends abgeschaltet, das Viewport-Meta setzt
     weder user-scalable=no noch maximum-scale. gesteAktiv() haelt zusaetzlich
     fest, wann eine Planergeste tatsaechlich laeuft. */
  .c-canvas-svg{width:100%; max-width:100%; min-width:0; height:340px; display:block; touch-action:none; cursor:default;}
  .c-canvas-svg .c-container-group, .c-canvas-svg .c-stair-group,
  .c-canvas-svg .c-rotate-handle{touch-action:none;}
  .c-canvas-svg.placing{cursor:crosshair;}
  .c-canvas-svg .c-grid-line{stroke:#DAD8CE; stroke-width:0.012;}
  .c-canvas-svg .c-container-rect{stroke:#14181C; stroke-width:0.025; cursor:grab;}
  .c-canvas-svg .c-container-rect.dragging{cursor:grabbing; opacity:0.85;}
  .c-canvas-svg .c-container-rect.selected{stroke:#D98F3F; stroke-width:0.045;}
  .c-canvas-svg .c-container-rect.unsupported{stroke:#B3512A; stroke-width:0.035; stroke-dasharray:0.12,0.08;}
  .c-canvas-svg .c-container-rect.unsupported.selected{stroke:#D98F3F; stroke-width:0.045; stroke-dasharray:0.12,0.08;}
  .c-canvas-svg .c-rotate-handle{cursor:pointer;}
  .c-canvas-svg .c-rotate-handle circle{fill:#1B6FD1; stroke:#fff; stroke-width:0.04;}
  .c-canvas-svg .c-rotate-handle:hover circle{fill:#154F99;}
  .c-canvas-svg .c-rotate-handle text{fill:#fff; pointer-events:none; user-select:none;}
  .c-canvas-svg .c-rotate-handle:focus-visible circle{stroke:#14181C; stroke-width:0.06;}
  .c-canvas-svg .c-container-label{fill:#fff; pointer-events:none; font-family:'IBM Plex Mono',monospace;}
  .c-canvas-svg .c-ghost-valid{fill:#8FCB9E; fill-opacity:0.35; stroke:#3F8F5F; stroke-width:0.025; stroke-dasharray:0.08,0.05; pointer-events:none;}
  .c-canvas-svg .c-ghost-invalid{fill:#E07A5F; fill-opacity:0.3; stroke:#C0392B; stroke-width:0.025; stroke-dasharray:0.08,0.05; pointer-events:none;}
  .c-canvas-svg .c-add-target{fill:transparent; cursor:pointer;}
  .c-canvas-svg .c-add-target:hover{fill:#8FA88F; fill-opacity:0.12;}
  .c-canvas-svg .c-floor-below-rect{fill:#E4E1D5; fill-opacity:0.5; stroke:#B8B4A5; stroke-width:0.02; stroke-dasharray:0.06,0.06; pointer-events:none;}
  .c-canvas-svg .c-container-group:focus-visible .c-container-rect{stroke:#1B6FD1; stroke-width:0.05; stroke-dasharray:0.1,0.06;}
  .c-canvas-svg .c-stair-group:focus-visible .c-stair-rect{stroke:#1B6FD1; stroke-width:0.06; stroke-dasharray:0.1,0.06;}
  .c-canvas-svg .c-container-group:focus,
  .c-canvas-svg .c-stair-group:focus,
  .c-canvas-svg .c-rotate-handle:focus{outline:none;}
  .c-canvas-svg .c-snap-edge-highlight{stroke:#3F8F5F; stroke-width:0.09; stroke-linecap:round; pointer-events:none; filter:drop-shadow(0 0 0.04px #3F8F5F);}
  .c-canvas-svg .c-stair-rect{fill:#F0DCC0; stroke:#B3712A; stroke-width:0.03; cursor:grab;}
  .c-canvas-svg .c-stair-incoming .c-stair-rect{fill:#F5E9D6; fill-opacity:0.55; stroke:#B3712A; stroke-opacity:0.55; stroke-dasharray:0.08,0.06;}
  .c-canvas-svg .c-stair-incoming .c-stair-step{opacity:0.5;}
  .c-canvas-svg .c-stair-rect.selected{stroke:#D98F3F; stroke-width:0.05;}
  .c-canvas-svg .c-stair-step{stroke:#B3712A; stroke-width:0.012; opacity:0.7;}
  .c-canvas-svg .c-stair-ghost-valid{fill:#8FCB9E; fill-opacity:0.4; stroke:#3F8F5F; stroke-width:0.03; stroke-dasharray:0.08,0.05; pointer-events:none;}
  .c-canvas-svg .c-stair-ghost-invalid{fill:#E07A5F; fill-opacity:0.3; stroke:#C0392B; stroke-width:0.03; stroke-dasharray:0.08,0.05; pointer-events:none;}
  .c-sel-label{font-size:0.8rem; font-weight:600; color:var(--ink); margin-right:4px; white-space:nowrap;}
  .c-viewfit-controls{position:absolute; bottom:14px; right:14px; display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid var(--paper-line); border-radius:4px; padding:4px; box-shadow:0 2px 8px rgba(0,0,0,0.1);}
  .c-viewfit-controls button{width:32px; height:32px; border:1px solid var(--paper-line); background:#fff; border-radius:3px; cursor:pointer; font-size:1rem; color:var(--ink); display:flex; align-items:center; justify-content:center;}
  /* §4 — Auf Touchgeraeten reichten 32x32 px nicht an die 44-px-Marke heran; alle
     uebrigen Bedienelemente des Planers erfuellen sie bereits. Die Regel MUSS
     nach der Grundregel stehen: bei gleicher Spezifitaet gewinnt sonst die
     spaeter notierte 32-px-Deklaration, auch wenn die Medienabfrage zutrifft. */
  @media(pointer:coarse){
    .c-viewfit-controls button{width:44px; height:44px;}
  }
  .c-viewfit-controls button:hover{background:#F7F5EE;}
  .c-canvas-actionbar{position:absolute; top:14px; right:14px; display:flex; gap:6px; background:#fff; border:1px solid var(--paper-line); border-radius:4px; padding:6px; box-shadow:0 2px 8px rgba(0,0,0,0.1);}
  .place-mode-indicator{background:#EFF4FA; border:1px solid #B8D0E8; border-radius:3px; padding:7px 12px; font-size:0.8rem; font-weight:600; color:#1B4D7A; margin:8px 0 4px;}
  .c-canvas-actionbar[hidden]{display:none;}
  .c-canvas-actionbar button{border:1px solid var(--paper-line); background:#fff; border-radius:3px; padding:12px 14px; font-size:0.78rem; cursor:pointer; color:var(--ink); min-height:44px;}
  .c-canvas-actionbar button:disabled{opacity:0.4; cursor:not-allowed; color:var(--steel);}
  .c-canvas-actionbar button:hover{background:#F7F5EE;}
  .c-canvas-actionbar #c-sel-delete{color:#C0392B; border-color:#E0C9BE;}
  .grundriss-cell{width:88px; height:38px; border:1.5px dashed var(--paper-line); border-radius:3px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-family:'IBM Plex Mono',monospace; color:#fff; text-align:center; line-height:1.15; transition:transform .1s; position:relative;}
  .grundriss-cell:not(.empty):not(.treppe)::before, .grundriss-cell:not(.empty):not(.treppe)::after{content:""; position:absolute; top:2px; bottom:2px; width:3px; background:rgba(0,0,0,0.25);}
  .grundriss-cell:not(.empty):not(.treppe)::before{left:2px;}
  .grundriss-cell:not(.empty):not(.treppe)::after{right:2px;}
  .grundriss-cell:hover{transform:scale(1.05);}
  .grundriss-cell.empty{background:#fff; color:var(--steel-light);}
  .grundriss-cell.empty.valid-target{color:#8FA88F; font-weight:600; cursor:pointer;}
  .grundriss-cell.empty.valid-target:hover{background:#F3F7F3; border-color:#8FA88F;}
  .grundriss-cell.treppe{background:var(--amber); color:var(--amber-ink); border-style:solid;}
  .cell-btn-wrap{position:absolute; top:1px; right:1px; display:flex; gap:2px; z-index:2;}
  .cell-rotate-btn{position:static; min-width:22px; height:22px; padding:0 2px; background:rgba(255,255,255,0.95); border:1.5px solid rgba(0,0,0,0.3); border-radius:6px; font-size:11px; line-height:1; color:#14181C; cursor:pointer;}
  .cell-rotate-btn.active{background:var(--amber); border-color:var(--amber-ink);}
  .cell-rotate-btn.extend{background:#3F8F5F; color:#fff; border-color:#2D6B44; width:auto; padding:0 4px; font-size:9px; font-weight:700;}
  .cell-rotate-btn.blocked{opacity:0.35; cursor:not-allowed;}
  .cell-rotate-btn.shake{animation:shake-btn .4s;}
  @keyframes shake-btn{0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-3px);} 40%,80%{transform:translateX(3px);}}
  .cell-label{display:inline-block; transition:transform .15s;}
  .cell-label.rotated{transform:rotate(90deg); font-size:0.6rem;}

  .builder-block{background:#F7F5EE; border:1px solid var(--paper-line); border-radius:var(--radius); padding:20px;}
  .type-picker{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; min-width:0;}
  .type-picker-btn{--tc:#4C6B8A; display:flex; flex-direction:column; align-items:center; gap:4px; width:78px; padding:10px 6px; background:#fff; border:2px solid var(--paper-line); border-radius:6px; font-size:1.4rem; cursor:pointer; font-family:'IBM Plex Sans',sans-serif;}
  .type-picker-btn span{font-size:0.68rem; font-weight:600; color:var(--ink);}
  .type-picker-btn.active{border-color:var(--tc); background:color-mix(in srgb, var(--tc) 14%, white);}
  .type-picker-btn.treppe-btn{--tc:var(--amber);}
  .type-picker-btn.treppe-btn.armed{border-color:var(--amber); background:#FBEFD6; animation:pulse-treppe 1s ease-in-out infinite;}
  @keyframes pulse-treppe{0%,100%{transform:scale(1);} 50%{transform:scale(1.06);}}
  .floor-tabs{display:flex; gap:6px; align-items:center; margin:14px 0 10px; flex-wrap:wrap; min-width:0;}
  .floor-tab{background:#fff; border:1px solid var(--paper-line); border-radius:2px; padding:8px 14px; font-family:'IBM Plex Mono',monospace; font-size:0.8rem; font-weight:600; color:var(--steel); cursor:pointer;}
  .floor-tab.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
  .floor-tab-add{background:transparent; border:1.5px dashed var(--paper-line); border-radius:2px; padding:8px 12px; font-size:0.8rem; color:var(--steel); cursor:pointer;}
  .floor-tab-remove{background:transparent; border:none; color:#C0392B; font-size:0.9rem; cursor:pointer; padding:8px 4px;}
  .viewer3d-expand-btn{
    position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:2px; border:1px solid var(--paper-line);
    background:rgba(255,255,255,0.9); color:var(--ink); font-size:0.95rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .12s;
  }
  .viewer3d-expand-btn:hover{background:#fff;}
  #viewer3d-wrap .viewer3d-explode-btn{
    position:absolute; top:10px; left:10px; z-index:2; padding:6px 11px; border-radius:6px; border:1px solid var(--paper-line);
    background:rgba(255,255,255,0.92); color:var(--ink); font-size:0.76rem; font-weight:600; cursor:pointer;
    font-family:'IBM Plex Sans', sans-serif; transition:background .12s, border-color .12s;
  }
  #viewer3d-wrap .viewer3d-explode-btn:hover{background:#fff; border-color:var(--amber);}
  #viewer3d-wrap .viewer3d-explode-btn.active{background:#FBF1E3; color:#8F5A1F; border-color:var(--amber); font-weight:600;}
  #viewer3d-wrap .viewer3d-explode-btn.active::before{content:'✓ ';}
  .viewer3d-backdrop{display:none; position:fixed; inset:0; background:rgba(20,24,28,0.62); z-index:290;}
  .viewer3d-backdrop.active{display:block;}
  .demo-layout{display:grid; grid-template-columns:minmax(0,1fr); border:1px solid var(--paper-line); align-items:stretch;}
  /* Grid- und Flex-Kinder dürfen unter ihre Inhaltsbreite schrumpfen. Ohne
     min-width:0 erzwingt ein einziges breites Kind die Breite des ganzen Blocks. */
  .options-panel, .quote-column{min-width:0;}
  @media(min-width:980px){.demo-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);}}
  .options-panel{background:var(--card); padding:26px 26px 30px; border-bottom:1px solid var(--paper-line);}
  @media(min-width:980px){.options-panel{border-bottom:none; border-right:1px solid var(--paper-line);}}
  .options-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:0 28px; min-width:0;}
  @media(min-width:680px){.options-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
  .opt-group{margin-bottom:22px;}
  .opt-title{font-size:0.85rem; font-weight:600; margin-bottom:4px; display:flex; justify-content:space-between;}
  .opt-title span.k{font-family:'IBM Plex Mono',monospace; font-weight:400; color:var(--steel-light); font-size:0.72rem;}
  .opt-hint{font-size:0.85rem; color:var(--steel); margin:0 0 9px;}
  .info-btn{
    width:16px; height:16px; border-radius:50%; border:1px solid var(--steel-light); background:#fff; color:var(--steel);
    font-size:0.78rem; line-height:1; display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; margin-left:7px; vertical-align:middle; padding:0; font-family:'IBM Plex Mono',monospace; transition:background .12s, color .12s, border-color .12s;
  }
  .info-btn:hover{border-color:var(--ink); color:var(--ink);}
  .info-btn[aria-expanded="true"]{background:#FBF1E3; color:#8F5A1F; border-color:var(--amber);}
  /* Auf Touch bekommt der 16-px-Punkt eine unsichtbare 42-px-Trefferfläche. */
  @media (pointer:coarse){
    .info-btn{position:relative;}
    .info-btn::before{content:''; position:absolute; inset:-13px; border-radius:50%;}
  }
  .info-panel{overflow:hidden; max-height:0; transition:max-height .3s ease, margin .3s ease; font-size:0.82rem; color:var(--steel); line-height:1.55;}
  .info-panel.open{max-height:220px; margin:2px 0 12px;}
  .opt-row{display:flex; gap:8px; flex-wrap:wrap;}
  .opt-btn{font-family:'IBM Plex Sans', sans-serif; font-size:0.92rem; font-weight:500; padding:9px 13px; min-height:40px; display:inline-flex; align-items:center; border-radius:var(--radius); border:1px solid var(--paper-line); background:#fff; color:var(--ink); cursor:pointer; transition:border-color .12s, background .12s, color .12s;}
  @media (pointer:coarse), (max-width:860px){ .opt-btn{min-height:44px;} }
  /* Demo-2-gescopte Touch-Ziel-Vergrößerung (Bedienbarkeits-Audit) — Konfigurator 1s eigene
     .opt-btn-Basisregel bleibt unangetastet, dies ist eine reine Zusatzregel nur für #demo2. */
  #demo2 .opt-btn{min-height:44px; padding:10px 14px;}
  .opt-btn:hover:not(:disabled){border-color:var(--steel-light);}
  /* AUSGEWÄHLT — heller Amber-Grund, Amber-Rand, Häkchen. Das Häkchen ist ein
     Pseudo-Element und damit nicht Teil von textContent (Code liest Button-Labels aus). */
  /* Der Häkchenplatz ist IMMER reserviert und die Schrift behält ihren Schnitt —
     sonst ändert die Auswahl die Buttonbreite und die Liste springt beim Klicken. */
  .opt-btn::before{
    content:'✓'; flex:0 0 0.85em; width:0.85em; margin-right:7px; text-align:center;
    color:#8F5A1F; font-weight:700; visibility:hidden;
  }
  .opt-btn[aria-pressed="true"]{background:#FBF1E3; color:var(--ink); border-color:var(--amber);}
  .opt-btn[aria-pressed="true"]::before{visibility:visible;}
  .opt-btn[aria-pressed="true"]:hover:not(:disabled){border-color:#C97F2E; background:#F6E6CE;}
  /* KONFLIKT (nicht "disabled"): technisch aktuell nicht möglich, aber bewusst weiter
     anklickbar, weil der Klick die Begründung öffnet. Deshalb kein Transparenz-Trick. */
  .opt-btn.opt-btn-locked,
  .opt-btn.opt-btn-locked[aria-pressed="true"]{
    opacity:1; background:#EDEBE3; border-color:#CFCDC3; border-style:dashed;
    color:var(--steel-light); font-weight:500; cursor:help;
  }
  .opt-btn.opt-btn-locked[aria-pressed="true"]::before{visibility:hidden;}
  .opt-btn.opt-btn-locked:hover{background:#E6E4DB; border-color:var(--steel-light); color:var(--steel);}
  .opt-btn.opt-btn-locked::after{content:' 🔒'; font-size:0.78em;}
  /* ECHT DEAKTIVIERT — falls irgendwo verwendet: klar erkennbar, keine Hover-Reaktion. */
  .opt-btn:disabled{background:#EDEBE3; border-color:#DCDAD0; color:#A6A69B; cursor:not-allowed;}
  .opt-btn:disabled:hover{background:#EDEBE3; border-color:#DCDAD0;}

  .lock-popover{position:fixed; z-index:340; width:264px; background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius); box-shadow:0 16px 34px -12px rgba(20,24,28,0.32); padding:14px 15px;}
  .lock-popover-reason{font-size:0.85rem; color:var(--ink); line-height:1.5; margin:0 0 11px;}
  .lock-popover-solutions{display:flex; flex-direction:column; gap:7px;}
  .lock-popover-solutions button{font-family:'IBM Plex Sans', sans-serif; font-size:0.82rem; font-weight:600; padding:9px 12px; min-height:40px; border-radius:6px; border:1px solid var(--amber); background:var(--amber); color:var(--ink); cursor:pointer; text-align:left;}
  .lock-popover-solutions button:hover{background:#E9A052; border-color:#E9A052;}
  .addon-block{grid-column:1 / -1; margin-top:4px; padding-top:18px; border-top:1px dashed var(--paper-line);}
  .addon-list{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
  .addon-item{display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--paper-line); border-radius:var(--radius); background:#fff; cursor:pointer; transition:border-color .12s, background .12s;}
  .addon-item:hover{border-color:var(--steel-light);}
  .addon-item input{width:16px; height:16px; accent-color:var(--ink); flex:none;}
  .addon-item .a-label{font-size:0.87rem; font-weight:500; flex:1;}
  .addon-item .a-price{font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--steel);}
  .addon-item.checked{background:#F7F5EE; border-color:var(--amber);}
  .quote-column{display:flex; flex-direction:column;}
  /* Der letzte Block jeder Spalte füllt die verbleibende Höhe, damit beide Spalten
     auf derselben Linie abschließen. */
  .quote-column > :last-child{flex:1 1 auto;}
  .quote-panel{background:var(--ink); color:var(--paper); padding:26px 24px 24px;}
  /* Auf dunkler Fläche braucht Grau einen helleren Ton, sonst kippt der Kontrast. */

  .quote-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .quote-head-label{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.06em; color:var(--steel-light); text-transform:uppercase;}
  .demo-dot{width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; margin-right:7px; box-shadow:0 0 0 3px rgba(63,143,95,0.15);}
  #quote-lines{border-bottom:1px solid rgba(241,242,237,0.16); padding-bottom:6px; margin-bottom:6px;}
  .q-line{display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-family:'IBM Plex Mono', monospace; font-size:0.79rem;}
  .q-line .ql{color:#C4CBD1;}
  .q-line .qv{font-weight:500; white-space:nowrap;}
  .q-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0 4px; font-family:'IBM Plex Mono', monospace;}
  .q-total .ql{min-width:0;}
  .q-total-vat{display:flex; justify-content:flex-end; font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--steel); padding-bottom:6px; white-space:nowrap;}
  /* Beträge und Kennwerte nie zwischen Zahl und Einheit trennen —
     auf schmalen Geräten brach sonst das €-Zeichen in die nächste Zeile. */
  .qv, .a-price, .q-meta .qv, .q-line .qv{white-space:nowrap;}
  @media(max-width:560px){
    .q-total .qv{font-size:1.15rem;}
    .summary-specs .q-total .qv{font-size:1.3rem;}
  }
  .q-total .ql{font-size:0.85rem; color:var(--steel-light);}
  /* Sammelregel für die dunkle Angebotsfläche: dort ist --steel-light zu dunkel.
     Steht bewusst am Ende des Angebotsblocks, damit sie die Einzelregeln überschreibt. */
  .quote-panel .ql, .quote-panel .k, .quote-panel .quote-head-label,
  .quote-panel .ab-save-btn, .quote-panel .q-total-vat, .quote-panel .quote-foot,
  .quote-panel .advisor-label, .quote-panel .q-total .ql, .quote-panel .btn-small,
  .quote-panel .rec-badge{color:var(--steel-dark-bg);}
  .q-total .qv{font-size:1.3rem; font-weight:600; color:var(--amber); transition:color .25s; white-space:nowrap;}
  .q-total .qv.flash{color:#fff;}
  .q-meta{margin-top:14px; padding-top:14px; border-top:1px solid rgba(241,242,237,0.16);}
  .q-meta .spec-row{display:flex; justify-content:space-between; padding:5px 0; font-family:'IBM Plex Mono', monospace; font-size:0.78rem;}
  .q-meta .spec-row .k{color:var(--steel-dark-bg);}
  .q-meta .spec-row .v{font-weight:600; word-break:break-all; text-align:right;}
  .quote-foot{margin-top:16px; font-size:0.72rem; color:var(--steel-light); font-family:'IBM Plex Mono', monospace; line-height:1.5;}
  /* Änderungsanzeige direkt am Live-Angebot: was hat die letzte Auswahl bewirkt? */
  @keyframes quoteDeltaIn{ from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:none;} }
  .ab-delta{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:#F0B877;}
  .ab-delta[hidden]{display:none;}
  .advisor-more{
    margin-top:8px; background:none; border:0; padding:4px 0; font-family:'IBM Plex Sans', sans-serif;
    font-size:0.76rem; color:var(--steel-light); text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  }
  .advisor-more:hover{color:var(--paper);}
  .advisor{margin-top:14px;}
  .advisor-label{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--steel-light); margin:0 0 6px;}
  .advisor-valid{font-size:0.82rem; color:var(--steel-light); display:flex; align-items:center; gap:6px;}
  .advisor-valid .tick{color:#3F8F5F; font-weight:700;}
  .advisor-card{background:rgba(217,143,63,0.18); border-left:2px solid var(--amber); border-radius:0 6px 6px 0; padding:10px 12px; font-size:0.82rem; color:var(--paper); line-height:1.5; margin-bottom:8px;}
  .advisor-card:last-child{margin-bottom:0;}
  .advisor-card-title{font-weight:700; display:block; margin-bottom:3px;}
  .advisor-card button{margin-top:8px; font-family:'IBM Plex Sans', sans-serif; font-size:0.78rem; font-weight:600; padding:8px 12px; min-height:36px; border-radius:6px; border:1px solid var(--amber); background:var(--amber); color:var(--ink); cursor:pointer;}
  .advisor-card button:hover{background:#E9A052; border-color:#E9A052;}
  .advisor-card .advisor-dismiss{
    background:none; border:0; padding:8px 10px; margin-left:4px; min-height:36px;
    color:var(--steel-light); font-size:0.76rem; font-weight:500; text-decoration:underline;
    text-underline-offset:2px; cursor:pointer;
  }
  .advisor-card .advisor-dismiss:hover{background:none; border:0; color:var(--paper);}
  .quote-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
  .quote-cta .btn{width:auto; text-align:center;}
  /* Hauptaktion: volle Breite, Amber auf dunklem Panel. */
  #demo .quote-cta .btn:not(.btn-ghost){
    flex:1 1 100%; background:var(--amber); border-color:var(--amber); color:var(--ink);
    font-size:0.95rem; padding:13px 20px;
  }
  #demo .quote-cta .btn:not(.btn-ghost):hover{background:#E9A052; border-color:#E9A052; color:var(--ink);}
  /* Werkzeuge: kompakt nebeneinander, deutlich leichter. */
  #demo .quote-cta .btn-ghost{flex:1 1 28%; min-width:112px; font-size:0.78rem; font-weight:500; padding:9px 8px;}
  .quote-cta .btn-ghost{background:transparent; color:var(--paper); border-color:rgba(241,242,237,0.35);}
  .quote-cta .btn-ghost:hover{background:var(--paper); color:var(--ink); border-color:var(--paper);}
  .share-panel{margin-top:12px; padding:14px; background:rgba(241,242,237,0.06); border:1px solid rgba(241,242,237,0.15); border-radius:2px;}
  .share-choice{display:flex; gap:8px;}
  .btn-small{flex:1 1 auto; min-width:0; background:transparent; color:var(--paper); border:1px solid rgba(241,242,237,0.3); border-radius:2px; padding:9px 10px; font-family:'IBM Plex Sans', sans-serif; font-size:0.82rem; font-weight:600; cursor:pointer; transition:background .12s;}
  .btn-small:hover{background:rgba(241,242,237,0.12);}
  /* Undo/Redo liegen auf hellem Grund und brauchen eigene, eindeutige Zustände:
     aktiv = bedienbar, deaktiviert = sichtbar deaktiviert statt nur blass. */
  .undo-redo-row .btn-small{
    color:var(--ink); border-color:var(--paper-line); background:#fff; min-height:40px;
    transition:background .12s, border-color .12s, color .12s;
  }
  .undo-redo-row .btn-small:hover:not(:disabled){background:var(--paper); border-color:var(--steel);}
  .undo-redo-row .btn-small:disabled{
    background:#EDEBE3; border-color:#DCDAD0; color:#A6A69B; cursor:not-allowed;
  }
  .undo-redo-row .btn-small:disabled:hover{background:#EDEBE3; border-color:#DCDAD0;}
  @media(pointer:coarse){ .undo-redo-row .btn-small{min-height:44px;} }
  .share-confirm{margin:10px 0 0; font-size:0.8rem; color:#8FCB9E;}
  #share-qr-wrap{margin-top:12px; text-align:center;}
  #share-qr{display:inline-block; background:#fff; padding:10px; border-radius:2px; line-height:0;}
  .share-note{margin:10px 0 0; font-size:0.72rem; color:var(--steel-light); line-height:1.5; font-family:'IBM Plex Mono', monospace;}

  .drawing-overlay{display:none; position:fixed; inset:0; z-index:310; align-items:center; justify-content:center; padding:24px; background:rgba(20,24,28,0.62);}
  .drawing-overlay.active{display:flex;}
  .drawing-sheet{background:#fff; width:100%; max-width:960px; max-height:92vh; display:flex; flex-direction:column; box-shadow:0 30px 70px -20px rgba(0,0,0,0.5);}
  .drawing-toolbar{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--paper-line); background:var(--paper);}
  .drawing-toolbar-label{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--steel);}
  /* Bei 320–375 px liefen die Blattreiter aus dem Bild — das letzte Blatt war
     nicht erreichbar. Jetzt scrollt die Leiste waagerecht in sich. */
  .drawing-tabs{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; max-width:100%;}
  .drawing-tabs::-webkit-scrollbar{display:none;}
  .drawing-tabs .drawing-tab{flex:0 0 auto;}
  .drawing-tab{background:transparent; border:1px solid var(--paper-line); color:var(--steel); font-family:'IBM Plex Mono', monospace; font-size:0.76rem; padding:7px 12px; border-radius:2px; cursor:pointer;}
  .drawing-tab.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
  .drawing-toolbar .btn-small, .ab-toolbar .btn-small{color:var(--ink); border-color:var(--paper-line); background:#fff;}
  /* Auf Touchgeräten waren „Als PNG speichern" und „Schließen" nur 35 px hoch.
     Für die Undo/Redo-Leiste war die 44-px-Regel bereits gesetzt, für die
     Werkzeugleiste der Zeichnung fehlte sie. */
  @media(pointer:coarse){
    .drawing-toolbar .btn-small, .ab-toolbar .btn-small{min-height:44px;}
  }
  .drawing-toolbar .btn-small:hover{background:var(--paper);}
  #drawing-canvas-wrap{overflow:auto; padding:16px;}
  #drawing-canvas-wrap svg{width:100%; height:auto; display:block;}
  .btn-magnetic{transition:transform .15s cubic-bezier(.2,.8,.2,1);}
  /* ===== A/B-Vergleich (Feature B) — ausschließlich Konfigurator 1 (#demo, #ab-*) ===== */
  .ab-compare-row{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:8px 0 0;}
  .ab-save-btn{background:none; border:none; padding:0; color:var(--steel-light); font-size:0.8rem; font-weight:500; cursor:pointer; text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--steel);}
  .ab-save-btn:hover{color:var(--paper); text-decoration-color:var(--paper);}
  .ab-save-feedback{font-size:0.8rem; color:var(--green); font-weight:500;}
  .ab-compare-btn{background:#fff; border:1px solid var(--ink); color:var(--ink); font-size:0.8rem; font-weight:600; padding:7px 13px; border-radius:6px; cursor:pointer;}
  .ab-compare-btn:hover{background:var(--ink); color:#fff;}
  .ab-overlay{display:none; position:fixed; inset:0; z-index:310; align-items:center; justify-content:center; padding:24px; background:rgba(20,24,28,0.62);}
  .ab-overlay.active{display:flex;}
  .ab-sheet{background:#fff; width:100%; max-width:720px; max-height:88vh; display:flex; flex-direction:column; box-shadow:0 30px 70px -20px rgba(0,0,0,0.5); border-radius:var(--radius);}

  .ab-toolbar{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--paper-line);}
  .ab-toolbar-title{font-weight:700; font-size:0.98rem; color:var(--ink);}
  .ab-body{overflow:auto; padding:18px 20px 20px;}
  .ab-summary{background:var(--card); border-radius:var(--radius); padding:13px 15px; margin-bottom:16px;}
  .ab-summary-delta{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:0.95rem; color:var(--ink);}
  .ab-summary-changed{font-size:0.8rem; color:var(--steel); margin-top:5px; line-height:1.5;}
  .ab-summary-same{font-size:0.85rem; color:var(--steel);}
  .ab-table{width:100%; border-collapse:collapse; font-size:0.85rem;}
  .ab-table th{text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--steel); padding:6px 10px; border-bottom:1px solid var(--paper-line);}
  .ab-table td{padding:8px 10px; border-bottom:1px solid var(--paper-line); color:var(--ink);}
  .ab-table tr.ab-row-same td{color:var(--steel);}
  .ab-table tr.ab-row-diff td.ab-col-a, .ab-table tr.ab-row-diff td.ab-col-b{font-weight:600; color:var(--ink);}
  .ab-table tr.ab-row-diff{background:#FBF8F1;}
  .ab-cards{display:none;}
  .ab-actions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
  @media (max-width: 560px){
    .ab-table-wrap .ab-table{display:none;}
    .ab-cards{display:block;}
    .ab-card{border:1px solid var(--paper-line); border-radius:8px; padding:11px 13px; margin-bottom:8px;}
    .ab-card.ab-row-diff{background:#FBF8F1; border-color:#E8D9B8;}
    .ab-card-label{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--steel); margin-bottom:5px;}
    .ab-card-vals{display:flex; justify-content:space-between; font-size:0.85rem;}
    .ab-card-val-label{color:var(--steel); font-size:0.72rem;}
    .ab-card-val{font-weight:600; color:var(--ink);}
  }


  /* demo 2 */
  .demo2-section{background:var(--paper);}
  .wizard-shell{background:var(--card); border:1px solid var(--paper-line);}
  .wizard-progress{display:flex; border-bottom:1px solid var(--paper-line); overflow-x:auto; scrollbar-width:none;}
  .wizard-progress::-webkit-scrollbar{display:none;}
  /* Auf schmalen Geräten wird die Schrittleiste abgeschnitten. Der Zähler sagt
     unmissverständlich, wo man steht und wie viele Schritte es gibt. */
  .wizard-count{display:none;}
  @media(max-width:760px){
    .wizard-count{
      display:block; font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
      letter-spacing:0.06em; text-transform:uppercase; color:var(--steel);
      margin:0; padding:12px 16px 0;
    }
    /* Die abgeschnittenen Schrittkästchen wirkten unfertig. Auf dem Telefon
       ersetzt sie eine schlanke Fortschrittslinie unter dem Zähler. */
    .wizard-progress{display:none;}
    .wizard-count{padding:14px 16px 0; display:flex; flex-direction:column; gap:8px;}
    .wizard-count::after{
      content:''; display:block; height:3px; border-radius:2px;
      background:linear-gradient(90deg, var(--amber) 0 var(--fortschritt,25%), var(--paper-line) var(--fortschritt,25%) 100%);
    }
  }
  .wp-step{flex:1; min-width:118px; padding:14px 16px; border-right:1px solid var(--paper-line); position:relative; overflow:hidden;}
  .wp-step:last-child{border-right:none;}
  .wp-num{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--steel-light); display:block; margin-bottom:3px;}
  .wp-label{font-size:0.8rem; font-weight:600; color:var(--steel-light); line-height:1.25; display:block;}
  .wp-step.active{background:#F7F5EE;}
  .wp-step.active .wp-num, .wp-step.active .wp-label{color:var(--ink);}
  .wp-step.done .wp-num::after{content:" ✓"; color:var(--green);}
  .wp-step.done .wp-label{color:var(--ink);}

  .wizard-body{padding:34px 30px 30px;}
  .wizard-step-panel{display:none;}
  .wizard-step-panel.active{display:block;}
  .wizard-step-title{font-family:'Space Grotesk', sans-serif; font-size:1.2rem; font-weight:600; margin:0 0 6px;}
  .wizard-step-sub{color:var(--steel); font-size:0.92rem; margin:0 0 26px; max-width:60ch;}

  .choice-grid{display:grid; grid-template-columns:1fr; gap:14px;}
  @media(min-width:640px){.choice-grid{grid-template-columns:repeat(3,1fr);}}
  .choice-card{text-align:left; border:1.5px solid var(--paper-line); background:#fff; border-radius:var(--radius); padding:18px 16px; cursor:pointer; transition:border-color .12s, box-shadow .12s, opacity .12s; position:relative;}
  .choice-card:hover:not(:disabled){border-color:var(--steel-light);}
  .choice-card[aria-pressed="true"]{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink);}
  .choice-card:disabled{opacity:0.4; cursor:not-allowed;}
  .choice-card h4{font-family:'Space Grotesk', sans-serif; font-size:1rem; margin:0 0 6px; font-weight:600;}
  .choice-card p{font-size:0.83rem; color:var(--steel); margin:0;}
  .choice-card .c-thumb{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:2px; margin-bottom:12px; display:block; background:#F7F5EE;}

  .pump-illustration .accent{fill:var(--accent, var(--amber));}
  .pump-illustration .accent2{fill:var(--accent2, var(--amber));}
  .pump-illustration .stroke-line{fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;}
  .pump-illustration .shade{fill:#000; opacity:0.06;}

  .param-grid{display:grid; grid-template-columns:1fr; gap:0 28px;}
  @media(min-width:680px){.param-grid{grid-template-columns:1fr 1fr;}}

  .wizard-nav{display:flex; justify-content:space-between; align-items:center; margin-top:32px; padding-top:22px; border-top:1px solid var(--paper-line);}

  .summary-grid{display:grid; grid-template-columns:1fr; gap:28px;}
  @media(min-width:800px){.summary-grid{grid-template-columns:0.8fr 1.2fr;}}
  .summary-visual{background:#F7F5EE; border:1px solid var(--paper-line); border-radius:var(--radius); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; color:var(--ink); position:relative;}
  .curve-block{margin-top:24px; padding-top:20px; border-top:1px solid var(--paper-line);}

  .why-quality-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:22px; padding-top:20px; border-top:1px solid var(--paper-line);}
  @media(min-width:800px){.why-quality-grid{grid-template-columns:1.1fr 0.9fr;}}
  .why-title{font-family:'Space Grotesk', sans-serif; font-size:0.92rem; font-weight:600; margin:0 0 10px; color:var(--ink);}
  .why-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
  .why-list li{font-size:0.85rem; color:var(--steel); line-height:1.4; display:flex; gap:8px; align-items:flex-start;}
  .why-list li .mark{flex-shrink:0; font-weight:700;}
  .why-list li.ok .mark{color:#3F8F5F;}
  .why-list li.warn .mark{color:var(--amber-ink,#8F5A1F);}
  .quality-bar-row{margin-bottom:10px;}
  .quality-bar-label{display:flex; justify-content:space-between; font-size:0.78rem; color:var(--steel); margin-bottom:4px;}
  .quality-bar-track{height:8px; background:var(--card); border-radius:4px; overflow:hidden;}
  .quality-bar-fill{height:100%; border-radius:4px; background:var(--amber); transition:width .3s ease;}
  .quality-bar-fill.warn{background:#C0512F;}
  .quality-bar-fill.low{background:#8B96A0;}
  .quality-verdict{font-size:0.85rem; color:var(--ink); margin:10px 0 0; padding-top:10px; border-top:1px solid var(--paper-line);}
  .quality-verdict .verdict-head{font-weight:700; display:block; margin-bottom:3px;}
  .curve-title{font-family:'Space Grotesk', sans-serif; font-size:1rem; font-weight:600; margin:0 0 14px;}
  .pump-curve-wrap{position:relative;}
  .curve-tooltip{position:absolute; z-index:5; background:var(--ink); color:var(--paper); font-family:'IBM Plex Mono',monospace; font-size:0.76rem; padding:6px 10px; border-radius:6px; pointer-events:none; transform:translate(-50%,-115%); white-space:nowrap; box-shadow:0 6px 16px -6px rgba(0,0,0,0.4);}
  .curve-op-hit{cursor:pointer;}
  .curve-op-hit:hover ~ .curve-op-dot, .curve-op-group:hover .curve-op-dot{r:7.5;}
  #pump-curve{background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius);}
  #pump-curve svg{display:block; width:100%; height:auto;}
  .curve-caption{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--steel); margin:10px 0 0; line-height:1.5;}
  .tco-block{margin-top:30px;}

  .optional-block{margin-top:22px; padding-top:18px;}
  .optional-toggle{background:none; border:none; padding:0; font-family:'Space Grotesk',sans-serif; font-size:0.92rem; font-weight:600; color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:6px;}
  .optional-toggle .chev{transition:transform .18s ease; color:var(--steel);}
  .optional-toggle[aria-expanded="true"] .chev{transform:rotate(90deg);}
  .optional-panel{margin-top:14px;}

  .alt-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .alt-table{width:100%; border-collapse:collapse; font-size:0.83rem;}
  .alt-table th{text-align:left; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--steel); padding:6px 10px; border-bottom:1px solid var(--paper-line);}
  .alt-table td{padding:9px 10px; border-bottom:1px solid var(--paper-line); color:var(--ink);}
  .alt-table td.alt-col-rec{background:rgba(217,143,63,0.08); font-weight:600;}
  .alt-table th.alt-col-rec{background:rgba(217,143,63,0.14);}
  .alt-adopt-btn{font-size:0.74rem; font-weight:600; padding:5px 9px; border-radius:5px; border:1px solid var(--ink); background:#fff; color:var(--ink); cursor:pointer;}
  .alt-adopt-btn:hover{background:var(--ink); color:#fff;}
  .alt-current-tag{font-size:0.72rem; color:var(--steel);}

  .scenario-inputs{display:grid; grid-template-columns:1fr; gap:16px;}
  @media(min-width:640px){.scenario-inputs{grid-template-columns:1fr 1fr;}}
  .scenario-input-group label{display:block; font-size:0.82rem; color:var(--steel); margin-bottom:6px;}
  .scenario-input-group label span{font-weight:700; color:var(--ink);}
  .scenario-stepper{display:flex; align-items:center; gap:8px;}
  .scenario-stepper button{width:28px; height:28px; border-radius:6px; border:1px solid var(--paper-line); background:#fff; font-size:1rem; cursor:pointer; flex-shrink:0;}
  .scenario-stepper button:hover{border-color:var(--ink);}
  .scenario-stepper input[type="range"]{flex:1;}
  .scenario-result{margin-top:16px; padding:12px 14px; border-radius:6px; font-size:0.85rem; line-height:1.5;}
  .scenario-result.ok{background:rgba(63,143,95,0.1); color:#2b6b45;}
  .scenario-result.warn{background:rgba(217,143,63,0.12); color:var(--amber-ink,#8F5A1F);}
  .scenario-result.upgrade{background:rgba(192,81,47,0.1); color:#8f3a1f;}
  .scenario-result .verdict-head{font-weight:700; display:block; margin-bottom:4px;}
  .scenario-result button{margin-top:8px;}
  .scenario-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
  .tco-sliders{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px;}
  @media(min-width:640px){.tco-sliders{grid-template-columns:1fr 1fr;}}
  .tco-slider-group label{display:block; font-size:0.82rem; font-weight:600; margin-bottom:8px; color:var(--ink);}
  .tco-slider-group input[type="range"]{width:100%; accent-color:var(--amber);}
  #tco-chart svg{display:block; width:100%; height:auto;}
  .tco-stats{display:grid; grid-template-columns:1fr; gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:14px;}
  @media(min-width:640px){.tco-stats{grid-template-columns:repeat(3,1fr);}}
  .tco-stat{background:#fff; padding:14px 16px;}
  .tco-headline{margin:18px 0; padding:14px 16px; border-radius:6px; background:var(--card);}
  .tco-headline.positive{background:rgba(63,143,95,0.1);}
  .tco-headline.neutral{background:rgba(139,150,160,0.12);}
  .tco-headline-title{font-family:'Space Grotesk',sans-serif; font-size:0.88rem; font-weight:700; color:var(--ink); display:block; margin-bottom:6px;}
  .tco-headline-text{font-size:0.85rem; color:var(--ink); line-height:1.5;}
  .tco-savings-row{display:flex; gap:24px; margin-top:12px; flex-wrap:wrap;}
  .tco-saving{font-size:0.82rem; color:var(--steel);}
  .tco-saving strong{display:block; font-size:1.05rem; color:var(--ink); font-family:'Space Grotesk',sans-serif;}
  .tco-saving strong.neg{color:#8f3a1f;}
  .tco-stat .tco-label{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--steel); display:block; margin-bottom:4px;}
  .tco-stat .tco-value{font-family:'Space Grotesk', sans-serif; font-size:1.3rem; font-weight:700; color:var(--ink);}
  .tco-formula{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--steel-light); margin:12px 0 0; line-height:1.5;}
  .rec-badge{position:absolute; top:12px; left:12px; background:var(--green); color:#fff; font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.04em; text-transform:uppercase; padding:4px 9px; border-radius:2px;}
  .demo-note{font-family:'IBM Plex Mono', monospace; font-size:0.74rem; color:var(--steel); background:#F7F5EE; border-left:2px solid var(--amber); padding:8px 12px; margin-top:14px;}
  .summary-visual .pump-illustration{width:60%; margin-bottom:14px;}
  .summary-media img{width:100%; max-width:260px; border-radius:2px; margin-bottom:14px; display:block;}
  .summary-visual .s-name{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.05rem;}
  .summary-visual .s-desc{font-size:0.82rem; color:var(--steel); margin-top:4px;}
  .summary-specs .q-line{border-bottom:1px solid var(--paper-line); font-family:'IBM Plex Mono', monospace; font-size:0.84rem; padding:8px 0; color:var(--ink);}
  .summary-specs .q-line .ql{color:var(--steel);}
  .summary-specs .q-total{border-top:1.5px solid var(--ink); margin-top:6px; padding-top:14px;}
  .summary-specs .q-total .qv{color:var(--amber-ink); font-size:1.5rem; white-space:nowrap;}
  #demo2 .summary-specs{background:#fff; border:1px solid var(--paper-line); border-left:5px solid #4C6B8A; border-radius:2px; padding:24px;}
  #demo2 .summary-specs .q-total{border-top:1.5px solid #DCE3EA;}
  #demo2 .summary-specs .q-total .qv{color:#4C6B8A;}
  #demo4 .quote-panel{background:#1B2530; border-top:4px solid var(--amber);}
  .summary-specs .q-total .qv.flash{color:var(--red);}
  .summary-cta{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap;}


  /* === STEP 6 · K2 PREMIUM AUSLEGUNGSSTUDIO === */
  #demo2 .wp-summary{display:block;margin-top:4px;font-family:'IBM Plex Mono',monospace;font-size:.64rem;line-height:1.3;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #demo2 .wp-step.active .wp-summary{color:#4C6B8A;}
  #demo2 .k2-live-strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--paper-line);background:#FBFAF6;}
  #demo2 .k2-live-item{padding:12px 16px;border-right:1px solid var(--paper-line);min-width:0;}
  #demo2 .k2-live-item:last-child{border-right:0;}
  #demo2 .k2-live-k{display:block;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--steel-light);margin-bottom:3px;}
  #demo2 .k2-live-item strong{display:block;font-size:.8rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #demo2 .k2-live-item.is-warn strong{color:#9A4E2B;}
  #demo2 .k2-param-section{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;margin:8px 0 2px;padding:14px 0 8px;border-bottom:1px solid var(--paper-line);}
  #demo2 .k2-param-section>span{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:#4C6B8A;}
  #demo2 .k2-param-section>strong{font-family:'Space Grotesk',sans-serif;font-size:1rem;}
  #demo2 .k2-param-section>p{grid-column:2;margin:3px 0 0;color:var(--steel);font-size:.79rem;line-height:1.45;max-width:68ch;}
  #demo2 .k2-duty-preview{grid-column:1/-1;margin:4px 0 10px;padding:12px 14px;border:1px solid #D8E0E7;border-left:4px solid #4C6B8A;background:#F7FAFC;font-size:.82rem;line-height:1.45;color:var(--steel);}
  #demo2 .k2-duty-preview strong{color:var(--ink);font-family:'Space Grotesk',sans-serif;}
  #demo2 .k2-duty-preview.is-warn{border-left-color:#C0512F;background:#FFF7F3;}
  #demo2 .k2-field-help{font-size:.74rem;color:#53636b;margin:6px 0;line-height:1.45}
  #demo2 .k2-field-error{font-size:.8rem;font-weight:600;color:#8e3429;margin:6px 0;line-height:1.45}
  #demo2 .k2-field-error[hidden],#demo2 .k2-draft-notice[hidden]{display:none!important}
  #demo2 .k2-duty-entry:has([aria-invalid="true"]){outline:2px solid #ad4838;outline-offset:2px}
  #demo2 .k2-draft-notice{padding:12px;border:1px solid #bc8060;border-radius:8px;background:#fff4e7;color:#663a22;line-height:1.5;font-size:.82rem}
  #demo2 [data-k2-stale="true"]{border-color:#bc8060}
  #demo2 button:disabled{cursor:not-allowed;opacity:.55}
  #demo2 .k2-result-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin:0 0 12px;padding:16px 18px;border:1px solid #D8E0E7;background:#F7FAFC;}
  #demo2 .k2-result-status{display:flex;gap:11px;align-items:flex-start;min-width:0;}
  #demo2 .k2-status-dot{width:10px;height:10px;border-radius:50%;background:#3F8F5F;margin-top:5px;box-shadow:0 0 0 4px rgba(63,143,95,.1);flex:0 0 auto;}
  #demo2 .k2-status-dot.warn{background:#C0512F;box-shadow:0 0 0 4px rgba(192,81,47,.1);}
  #demo2 .k2-result-kicker{display:block;font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-light);margin-bottom:3px;}
  #demo2 #k2-result-status{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.02rem;}
  #demo2 #k2-result-context{margin:3px 0 0;color:var(--steel);font-size:.8rem;line-height:1.4;}
  #demo2 .k2-result-nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding-bottom:2px;}
  #demo2 .k2-result-nav::-webkit-scrollbar{display:none;}
  #demo2 .k2-result-nav button{min-height:42px;white-space:nowrap;border:1px solid var(--paper-line);background:#fff;color:var(--ink);padding:8px 12px;font-size:.76rem;font-weight:600;border-radius:999px;}
  #demo2 .k2-result-nav button:hover{border-color:#4C6B8A;color:#36526F;}
  #demo2 .k2-assumption-strip{margin:0 0 20px;padding:10px 12px;background:#F7F5EE;border-left:3px solid var(--amber);font-family:'IBM Plex Mono',monospace;font-size:.68rem;line-height:1.5;color:var(--steel);}
  #demo2 .k2-assumption-strip strong{color:var(--ink);}
  #demo2 .k2-quality-context{margin:-3px 0 10px;color:var(--steel);font-size:.78rem;line-height:1.4;}
  #demo2 .k2-curve-hero{margin-top:28px;padding:22px;border:1px solid #D8E0E7;background:#fff;}
  #demo2 .k2-curve-hero .curve-title{font-size:1.05rem;}
  #demo2 .k2-scenario-hero{padding:18px;border:1px solid rgba(217,143,63,.35);background:rgba(217,143,63,.055);}
  #demo2 .k2-scenario-hero .optional-toggle{font-size:1rem;width:100%;justify-content:space-between;text-align:left;}
  #demo2 .summary-grid{align-items:stretch;}
  #demo2 .summary-visual,#demo2 .summary-specs{min-height:100%;}
  @media(min-width:980px){#demo2 .wizard-body{padding:38px 38px 34px;}#demo2 .summary-grid{grid-template-columns:minmax(280px,.78fr) minmax(380px,1.22fr);gap:22px;}#demo2 .k2-curve-hero #pump-curve svg{max-height:430px;}}
  @media(max-width:760px){
    #demo2 .k2-live-strip{grid-template-columns:1fr 1fr;}
    #demo2 .k2-live-item{padding:9px 12px;}
    #demo2 .k2-live-item:nth-child(2){border-right:0;}
    #demo2 .k2-live-item:nth-child(-n+2){border-bottom:1px solid var(--paper-line);}
    #demo2 .k2-live-item strong{font-size:.74rem;}
    #demo2 .wizard-body{padding:24px 14px 18px;}
    #demo2 .wizard-nav{position:sticky;bottom:0;z-index:12;margin-left:-14px;margin-right:-14px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(250,249,245,.96);backdrop-filter:blur(10px);box-shadow:0 -8px 20px rgba(20,24,28,.06);}
    #demo2 .wizard-nav .btn{min-height:48px;}
    #demo2 .k2-result-head{align-items:flex-start;flex-direction:column;padding:14px;}
    #demo2 .k2-result-head-actions{width:100%;}#demo2 .k2-result-head-actions .btn{width:100%;min-height:46px;}
    #demo2 .k2-result-nav{margin-left:-2px;margin-right:-2px;}#demo2 .k2-result-nav button{min-height:44px;}
    #demo2 .k2-curve-hero{padding:14px;margin-left:-2px;margin-right:-2px;}
    #demo2 .scenario-stepper button{width:44px;height:44px;}
  }
  @media(max-width:360px){#demo2 .k2-live-strip{grid-template-columns:1fr;}#demo2 .k2-live-item{border-right:0!important;border-bottom:1px solid var(--paper-line)!important;}#demo2 .k2-live-item:last-child{border-bottom:0!important;}#demo2 .k2-param-section{grid-template-columns:auto 1fr;}}


  /* ==========================================================================
     KONFIGURATOR-SHOWCASES

     Zweite Stufe: Vorher lag der Text direkt auf dem Bild. Das trug, war aber
     unruhig — der Untergrund wechselte je Karte und je Bildausschnitt, und die
     Lesbarkeit musste ueber einen starken Verlauf erkauft werden.

     Jetzt eine klare Zweiteilung, wie beim Hero: ruhige helle Informationsflaeche
     neben eigenstaendiger dunkler Bildflaeche. Die Textseite ist auf allen vier
     Karten identisch hell — die Karten unterscheiden sich ueber Motiv und Inhalt,
     nicht ueber wechselnde Flaechenfarben. Dadurch wirkt die Reihe als Serie.

     Aufteilung ab 560 px: 38 % Text, 62 % Bild. Darunter gestapelt, Bild oben,
     Textflaeche darunter — nicht wieder Text auf Bild.
     ========================================================================== */
  
  
  
  

  /* Volle Breite statt 2x2.

     Im zweispaltigen Raster war die Karte nur 551 px breit; bei 40 % Textanteil
     blieben 220 px, abzueglich Innenabstand 176 px. "Variantenkonfigurator"
     braucht rund 190 px — die Ueberschriften mussten zweizeilig brechen, und die
     Feature-Zeile ebenfalls. Das wirkte gedraengt und damit weniger souveraen
     als die Vorlage.

     Ueber die volle Breite hat die Textspalte bei 36 % rund 420 px. Ueberschrift
     und Feature-Zeile stehen einzeilig, die Proportion bleibt im vorgegebenen
     Rahmen, und jede Karte wirkt wie ein eigenstaendiges Case-Study-Cover statt
     wie eine Kachel. */
  
  @media(min-width:900px){  }

  
  /* Textflaeche links, Bildflaeche rechts. Im Markup steht das Bild zuerst
     (damit es auf Mobile oben liegt); ab 560 px drehen order-Werte die Reihenfolge
     um, ohne die Lesereihenfolge fuer Screenreader zu veraendern. */
  @media(min-width:560px){
    /* minmax(0, …) ist noetig: Ohne die Null-Untergrenze respektiert fr die
       min-content-Breite des Textblocks, und aus 36/64 wuerde gemessen 50/50. */
    
    
  }

  /* --- Bildflaeche --- */
  
  /* order MUSS hier stehen, nicht im Grid-Block weiter oben: Die Grundregel
     .showcase-visual{order:-1} folgt im Stylesheet danach und hat dieselbe
     Spezifitaet — sie haette ein frueheres order:2 wieder ueberschrieben und
     das Bild blieb links. */
  @media(min-width:560px){  }
  @media(min-width:900px){  }
  /* Ab 1200 px ist die Karte ueber 1100 px breit; bei 320 px Hoehe ergaebe das
     ein Bildfenster von 3,5:1, und vom 3:2-Motiv blieben nur zwei Drittel der
     Hoehe uebrig. Etwas mehr Hoehe holt das Motiv zurueck und gibt der
     Textspalte gleichzeitig ruhigere Proportionen. */
  @media(min-width:1200px){  }
  
  @media(min-width:560px){  }

  /* Weicher Uebergang zur hellen Textflaeche: das Bild laeuft an der Kante aus,
     statt hart abzuschneiden. Auf Mobile nach unten, auf Desktop nach links. */
  
  @media(min-width:560px){
    
  }

  /* Lichtkorridor nur ueber dem Motiv — die Textflaeche bleibt vollstaendig ruhig. */
  
  
  
  
  @keyframes showcase-licht{ from{transform:translateX(0);} to{transform:translateX(320%);} }

  /* --- Informationsflaeche --- */
  
  @media(min-width:560px){  }
  @media(min-width:900px){  }

  /* Wie im Hero: orangener Strich, aber DUNKLER Text. Orange auf der hellen
     Flaeche erreicht nur 2,4:1 — fuer 10-px-Grossbuchstaben zu wenig (AA
     verlangt 4,5:1 fuer normalen Text). Der Akzent bleibt trotzdem sichtbar,
     weil er im Strich sitzt. */
  
  /* Feiner Trenner wie im Hero — der einzige zusaetzliche Orange-Akzent. */
  
  /* Die Textspalte ist bei zweispaltigem Raster nur rund 220 px breit, abzueglich
     Innenabstand bleiben 176 px. "Variantenkonfigurator" braucht bei 1,34 rem
     aber rund 195 px — die Ueberschriften wurden abgeschnitten. Deutsche
     Komposita trennen sauber, sobald hyphens erlaubt ist (das Dokument ist
     lang="de"); break-word ist die Rueckfallebene fuer Browser ohne Trennmuster. */
  /* Trennstellen stehen als ­ im Markup, nicht ueber hyphens:auto. Ohne
     geladene deutsche Trennmuster brach der Browser sonst willkuerlich mitten
     im Wort ("Variantenkonfigur-ator"). Mit weichen Trennzeichen bricht es an
     der Fuge: "Varianten-/konfigurator". */
  
  
  
  
  
  

  @media(hover:hover){
    
    
    
  }
  

  /* Zaesur zur Sektion "Individuell": eine feine Linie, die aus dem orangenen
     Lichtmotiv der Karten auslaeuft. */
  
  
  
  

  @media (prefers-reduced-motion:reduce){
    
    
  }

  /* ==========================================================================
     INDIVIDUELL — ersetzt die frühere Sektion #branchen.

     Warum ersetzt und nicht ergänzt: #branchen bestand aus zehn Branchen-Chips
     plus einer Wand aus sechs gleich großen Fähigkeitskarten. Beide Teile sagten
     eine engere Fassung dessen, was diese Sektion breiter und klarer sagt —
     „nicht an eine Branche gebunden" und „auch komplexere Systeme möglich" sind
     Vorstufen von „Ihre Produkte, Ihre Prozesse, Ihre Lösung". Die Seite wird
     dadurch um eine Sektion kürzer statt länger.

     Gestaltung bewusst ohne Kartenraster: eine durchgehende Prozesslinie,
     feine Linien, viel Weißraum, Typografie trägt. Der einzige bewegte Teil
     erklärt die Botschaft — je nach Aufgabe leuchtet ein anderer Weg durch
     dieselben Bausteine.
     ========================================================================== */
  
  .ind-lead{max-width:62ch;}
  .ind-lead .ind-claim{font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--ink); line-height:1.5; margin:0 0 10px;}

  /* --- Aufgabenwähler: reine Typografie, keine Buttons-Optik --- */
  .ind-tasks{display:flex; flex-wrap:wrap; gap:0; margin:36px 0 0; border-top:1px solid var(--paper-line);}
  .ind-task{flex:1 1 200px; min-width:0; appearance:none; background:none; border:0;
    border-bottom:2px solid transparent; padding:16px 14px 14px; text-align:left; cursor:pointer;
    font-family:inherit; color:var(--steel); transition:color .18s ease, border-color .18s ease, background .18s ease;}
  .ind-task:hover{background:var(--paper); color:var(--ink);}
  .ind-task[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--amber); background:var(--paper);}
  .ind-task .ind-task-no{display:block; font-family:'IBM Plex Mono',monospace; font-size:0.68rem;
    letter-spacing:0.14em; color:var(--steel-light); margin-bottom:5px;}
  .ind-task .ind-task-name{display:block; font-weight:600; font-size:0.95rem; line-height:1.3;}
  .ind-task:focus-visible{outline:2px solid var(--amber); outline-offset:-2px;}

  /* --- Prozesslinie --- */
  .ind-flow-wrap{margin-top:2px; border-bottom:1px solid var(--paper-line); padding:34px 0 26px; overflow:hidden;}
  .ind-flow{width:100%; height:auto; display:block;}
  .ind-flow .ind-track{stroke:var(--paper-line); stroke-width:1; fill:none;}
  .ind-flow .ind-path{stroke:var(--amber); stroke-width:1.6; fill:none;
    stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:ind-draw .55s ease forwards;}
  .ind-flow .ind-node{fill:var(--card); stroke:var(--paper-line); stroke-width:1;}
  .ind-flow .ind-node.on{stroke:var(--amber); stroke-width:1.6;}
  .ind-flow .ind-dot{fill:var(--paper-line);}
  .ind-flow .ind-dot.on{fill:var(--amber);}
  .ind-flow text{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.08em;
    fill:var(--steel-light); text-anchor:middle;}
  .ind-flow text.on{fill:var(--ink);}
  @keyframes ind-draw{to{stroke-dashoffset:0;}}
  .ind-flow-note{margin:16px 0 0; color:var(--steel); font-size:0.92rem; max-width:58ch; min-height:2.8em;}

  /* --- Für Ihre Kunden / Für Ihr Team --- */
  .ind-split{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:46px; border-top:1px solid var(--paper-line);}
  .ind-side{padding:26px 30px 24px;}
  .ind-side + .ind-side{border-left:1px solid var(--paper-line);}
  .ind-side h3{margin:0 0 4px; font-size:1.02rem;}
  .ind-side .ind-side-kicker{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--steel-light); margin:0 0 8px;}
  .ind-side p{margin:0; color:var(--steel); font-size:0.93rem; line-height:1.6;}

  /* --- Abschluss --- */
  .ind-close{margin-top:46px; padding-top:30px; border-top:1px solid var(--paper-line);
    display:flex; flex-wrap:wrap; align-items:flex-end; gap:26px; justify-content:space-between;}
  .ind-close h3{margin:0 0 8px; font-size:clamp(1.2rem,2.6vw,1.55rem); line-height:1.25;}
  .ind-close p{margin:0; color:var(--steel); max-width:52ch;}

  @media (max-width:760px){
    .ind-tasks{border-top:0;}
    .ind-task{flex:1 1 100%; border-bottom:1px solid var(--paper-line); padding:14px 12px;}
    .ind-task[aria-selected="true"]{border-bottom-color:var(--amber);}
    .ind-split{grid-template-columns:1fr;}
    .ind-side + .ind-side{border-left:0; border-top:1px solid var(--paper-line);}
    .ind-side{padding:22px 0 20px;}
    .ind-close{display:block;}
    .ind-close .btn{margin-top:20px;}
  }
  @media (pointer:coarse){
    .ind-task{min-height:44px;}
  }
  @media (prefers-reduced-motion:reduce){
    .ind-flow .ind-path{animation:none; stroke-dashoffset:0;}
    .ind-task{transition:none;}
  }
  .industry-grid{display:flex; flex-wrap:wrap; gap:10px;}
  .industry-chip{
    font-family:'IBM Plex Sans', sans-serif; font-size:0.85rem; font-weight:500; color:var(--ink);
    border:1px solid var(--paper-line); background:var(--card); padding:9px 16px; border-radius:999px;
    transition:border-color .15s, transform .15s;
  }
  .industry-chip:hover{border-color:var(--amber); transform:translateY(-1px);}
  .capability-grid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--paper-line); border:1px solid var(--paper-line);}
  @media(min-width:720px){.capability-grid{grid-template-columns:repeat(2,1fr);}}
  .capability-card{background:var(--card); padding:22px 24px; transition:transform .18s ease, box-shadow .18s ease;}
  .capability-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px -14px rgba(20,24,28,0.25); position:relative; z-index:1;}
  .capability-card h3{font-family:'Space Grotesk', sans-serif; font-size:1rem; font-weight:600; margin:0 0 8px;}
  .capability-card p{color:var(--steel); font-size:0.9rem; margin:0;}

  .capability-cats{display:grid; grid-template-columns:1fr; gap:1px; background:var(--paper-line); border:1px solid var(--paper-line);}
  @media(min-width:720px){.capability-cats{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1080px){.capability-cats{grid-template-columns:repeat(3,1fr);}}
  .capability-cat{background:var(--card); padding:22px 24px; transition:transform .18s ease, box-shadow .18s ease;}
  .capability-cat:hover{transform:translateY(-3px); box-shadow:0 10px 24px -14px rgba(20,24,28,0.25); position:relative; z-index:1;}
  .capability-cat h4{font-family:'Space Grotesk', sans-serif; font-size:1rem; font-weight:600; margin:0 0 4px;}
  .capability-cat .cat-sub{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--amber-text,#8F5A1F); margin:0 0 10px;}
  .capability-cat p:not(.cat-sub){color:var(--steel); font-size:0.87rem; line-height:1.55; margin:0;}

  .process{border-top:1px solid var(--paper-line);}
  .steps{display:grid; grid-template-columns:1fr; gap:0;}
  .step{display:grid; grid-template-columns:64px 1fr; gap:22px; padding:26px 0; border-bottom:1px solid var(--paper-line);}
  .step:first-child{padding-top:0;}
  .step-num{font-family:'Space Grotesk', sans-serif; font-size:1.5rem; font-weight:600; color:var(--steel);}
  .step h3{font-family:'Space Grotesk', sans-serif; font-size:1.12rem; margin:0 0 8px; font-weight:600;}
  .step p{color:var(--steel); margin:0; max-width:60ch; font-size:0.95rem;}

  /* Übergabe-Sheet: eine Oberfläche für alle vier Konfiguratoren. */
  .handover-overlay{position:fixed; inset:0; z-index:320; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(20,24,28,0.6);}
  .handover-overlay[hidden]{display:none;}
  .handover-sheet{background:#fff; width:100%; max-width:620px; max-height:88vh; max-height:88dvh; overflow:auto; border:1px solid var(--paper-line); display:flex; flex-direction:column;}
  .handover-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 24px 12px; position:sticky; top:0; background:#fff;}
  .handover-kicker{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel-light); margin:0 0 4px;}
  .handover-head h3{font-family:'Space Grotesk', sans-serif; font-size:1.25rem; font-weight:600; margin:0;}
  .handover-close{background:none; border:0; font-size:1.5rem; line-height:1; color:var(--steel); cursor:pointer; padding:4px 8px; min-width:44px; min-height:44px;}
  .handover-close:hover{color:var(--ink);}
  .handover-body{padding:0 24px 8px; font-size:0.9rem;}
  .handover-row{display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--paper-line);}
  .handover-row .k{color:var(--steel); font-size:0.82rem;}
  .handover-row .v{font-variant-numeric:tabular-nums; text-align:right;}
  .handover-quality{display:flex; gap:8px; align-items:center; font-size:0.85rem; font-weight:600; color:#2E6B45; margin:14px 0 0;}
  .handover-note{font-size:0.8rem; color:var(--steel); margin:10px 0 0;}
  .handover-actions{display:flex; flex-wrap:wrap; gap:10px; padding:16px 24px calc(22px + env(safe-area-inset-bottom)); position:sticky; bottom:0; background:#fff; border-top:1px solid var(--paper-line);}
  .handover-primary{background:var(--amber); border-color:var(--amber); color:var(--ink);}
  .handover-primary:hover{background:#E9A052; border-color:#E9A052; color:var(--ink);}
  @media(max-width:860px){
    .handover-overlay{padding:0; align-items:flex-end;}
    .handover-sheet{max-height:92dvh; height:92dvh;}
  }
  .stats-band{background:var(--ink); color:var(--paper);}
  .stats-band .section-kicker{color:var(--steel-dark-bg);}
  .stats-band h2{color:var(--paper);}
  .stats-band .section-head p{color:#B7C0C7;}
  .stat-grid{display:grid; grid-template-columns:1fr; gap:1px; background:rgba(241,242,237,0.14);}
  @media(min-width:820px){.stat-grid{grid-template-columns:repeat(3,1fr);}}
  .stat{padding:30px 26px; background:var(--ink);}
  .stat .big{font-family:'Space Grotesk', sans-serif; font-size:2.3rem; font-weight:600; color:var(--amber); display:block; margin-bottom:8px;}
  .benefit-head{font-family:'Space Grotesk', sans-serif; font-size:1.15rem; font-weight:600; color:var(--amber); display:block; margin-bottom:8px;}
  .stat p{color:#B7C0C7; font-size:0.88rem; margin:0;}
  .stats-source{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--steel-light); margin-top:22px;}
  .capability-note{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--steel); margin-top:22px;}

  .about-grid{display:grid; grid-template-columns:1fr; gap:40px;}
  @media(min-width:900px){.about-grid{grid-template-columns:0.9fr 1.1fr;}}
  .about-card{background:var(--card); border:1px solid var(--paper-line); padding:26px; border-radius:var(--radius);}
  .about-card .initials{width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--amber); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk', sans-serif; font-weight:700; margin-bottom:16px;}
  .about-card .name{font-weight:600; margin-bottom:2px;}
  .about-card .role{font-size:0.85rem; color:var(--steel); font-family:'IBM Plex Mono', monospace;}
  .about-text p{color:var(--ink); font-size:1.02rem; margin:0 0 16px;}
  .about-text p:last-child{margin-bottom:0;}

  .cta-section{border-top:1px solid var(--paper-line);}
  .cta-box{background:var(--card); border:1px solid var(--paper-line); border-radius:var(--radius); padding:52px 40px; text-align:center;}
  .cta-box h2{margin-bottom:14px;}
  .cta-box p{color:var(--steel); max-width:52ch; margin:0 auto 30px;}
  .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .cta-mail{font-family:'IBM Plex Mono', monospace; font-size:0.85rem; color:var(--steel); margin-top:38px;}
  .cta-mail a{color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px;}

  footer{border-top:1px solid var(--paper-line); padding:30px 0;}
  .foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px 24px;}
  .foot-row .mono{font-size:0.8rem; color:var(--steel-light); flex-wrap:wrap; min-width:0;}
  .foot-brand{max-width:620px;}
  .foot-links{display:flex;gap:14px 18px;align-items:center;justify-content:flex-end;}
  .foot-links a{color:var(--steel);text-decoration:underline;text-underline-offset:2px;}
  .foot-links a:hover{color:var(--ink);}
  @media(max-width:760px){.foot-row{align-items:flex-start;flex-direction:column}.foot-links{justify-content:flex-start}.foot-brand{line-height:1.55}}

  /* scroll polish */
  header{transition:box-shadow .25s ease;}
  header.scrolled{box-shadow:0 1px 0 rgba(20,24,28,0.05), 0 12px 24px -20px rgba(20,24,28,0.35);}
  .reveal{opacity:1; transform:none;}
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  .reveal-d1{transition-delay:.08s;} .reveal-d2{transition-delay:.16s;} .reveal-d3{transition-delay:.24s;}
  .reveal-d4{transition-delay:.32s;} .reveal-d5{transition-delay:.4s;} .reveal-d6{transition-delay:.48s;}
  .reveal-d7{transition-delay:.56s;} .reveal-d8{transition-delay:.64s;}
  @keyframes stepFadeIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
  .wizard-step-panel.active{animation:stepFadeIn .4s cubic-bezier(.16,.8,.24,1) both;}


/* =============================================================
   STEP 2 · K1 PRODUCT CONFIGURATION STUDIO
   Cumulative build on top of Step 1 (K2 canonical sizing model).
   Focus: stronger product stage, progressive configuration,
   restrained change impact and mobile-first observe→act→observe.
   ============================================================= */
#demo .demo-layout{
  --k1-left: minmax(250px, .78fr);
  --k1-stage: minmax(420px, 1.48fr);
  --k1-result: minmax(280px, .84fr);
}
#demo .k1-studio-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--paper-line)}
#demo .k1-studio-head small{display:block;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--steel-light);margin-bottom:3px}
#demo .k1-studio-head strong{font-family:'Space Grotesk',sans-serif;font-size:1rem;letter-spacing:-.01em}
#demo .k1-view-all{border:1px solid var(--paper-line);background:#fff;color:var(--steel);border-radius:7px;min-height:38px;padding:7px 10px;font-size:.76rem;font-weight:600;white-space:nowrap;cursor:pointer}
#demo .k1-view-all[aria-pressed="true"]{border-color:var(--amber);background:#FBF1E3;color:#8F5A1F}
#demo .k1-cat-nav{display:grid;grid-template-columns:1fr;gap:5px;margin-bottom:18px}
#demo .k1-cat-btn{width:100%;min-height:48px;display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;text-align:left;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);padding:7px 9px;cursor:pointer}
#demo .k1-cat-btn:hover{background:#F7F5EE;border-color:var(--paper-line)}
#demo .k1-cat-btn[aria-current="step"]{background:#fff;border-color:var(--amber);box-shadow:0 4px 15px -12px rgba(20,24,28,.35)}
#demo .k1-cat-num{grid-row:1/3;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--amber-text,#8F5A1F);font-weight:700;padding-top:2px}
#demo .k1-cat-label{font-size:.78rem;font-weight:650;line-height:1.2}
#demo .k1-cat-summary{font-family:'IBM Plex Mono',monospace;font-size:.66rem;line-height:1.25;color:var(--steel-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#demo .k1-cat-footer{display:flex;justify-content:space-between;gap:8px;margin-top:5px;padding-top:14px;border-top:1px solid var(--paper-line)}
#demo .k1-cat-footer button{min-height:42px;border-radius:7px;border:1px solid var(--paper-line);background:#fff;color:var(--ink);font-size:.78rem;font-weight:650;padding:8px 11px;cursor:pointer}
#demo .k1-cat-footer button:last-child{border-color:var(--ink);background:var(--ink);color:#fff}
#demo .k1-cat-footer button:disabled{opacity:.42;cursor:not-allowed}
#demo .k1-stage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
#demo .k1-stage-head small{display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--steel-light);margin-bottom:2px}
#demo .k1-stage-head strong{font-family:'Space Grotesk',sans-serif;font-size:1rem}
#demo .k1-stage-state{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:#356F50;white-space:nowrap}
#demo .k1-stage-state::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(63,143,95,.12)}
#demo .k1-stage-status{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;margin-top:10px;padding:10px 11px;border:1px solid var(--paper-line);border-radius:8px;background:#fff}
#demo .k1-stage-summary{min-width:0;font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#demo .k1-stage-metric{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ink);white-space:nowrap}
#demo .k1-stage-metric strong{font-size:.84rem}
#demo .k1-impact{position:absolute;left:12px;top:12px;z-index:7;max-width:min(330px,calc(100% - 24px));padding:10px 12px;border-radius:8px;background:rgba(20,24,28,.94);color:#fff;border:1px solid rgba(255,255,255,.10);box-shadow:0 12px 28px -16px rgba(20,24,28,.55);opacity:0;transform:translateY(-5px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
#demo .k1-impact.show{opacity:1;transform:none}
#demo .k1-impact-title{display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#F0B877;margin-bottom:3px}
#demo .k1-impact-change{font-size:.8rem;font-weight:650;line-height:1.35}
#demo .k1-impact-meta{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:#C4CBD1;margin-top:3px}
#demo .quote-head-label:first-child{font-family:'Space Grotesk',sans-serif;font-size:.92rem;letter-spacing:0;text-transform:none;color:#fff;font-weight:650}
#demo .quote-head-label:first-child .demo-dot{vertical-align:1px}
#demo .ab-sheet.ab-only-diff .ab-row-same{display:none!important}
#demo .ab-diff-toggle[aria-pressed="true"]{background:#FBF1E3;border-color:var(--amber);color:#8F5A1F}

@media(min-width:1180px){
  #demo .wrap{max-width:1320px}
  #demo .demo-layout{grid-template-columns:var(--k1-left) var(--k1-stage) var(--k1-result);grid-template-areas:'options viewer quote';align-items:start;border:0;gap:12px;background:transparent}
  #demo .options-panel{grid-area:options;border:1px solid var(--paper-line)!important;border-radius:10px;padding:18px 16px 16px;position:sticky;top:86px;max-height:calc(100vh - 108px);overflow:auto;background:#F3F1EA}
  #demo .quote-column{display:contents}
  #demo .viewer3d-block{grid-area:viewer;border:1px solid var(--paper-line);border-radius:10px;padding:16px;background:var(--card);position:sticky;top:86px}
  #demo .viewer3d-canvas-wrap{height:min(62vh,650px);min-height:500px;border-radius:9px}
  #demo .quote-panel{grid-area:quote;border-radius:10px;position:sticky;top:86px;max-height:calc(100vh - 108px);overflow:auto;padding:22px 20px}
  #demo .options-grid{grid-template-columns:minmax(0,1fr)}
  #demo .opt-group,#demo .addon-block{margin-bottom:18px}
  #demo .addon-block{grid-column:auto}
}

@media(min-width:980px) and (max-width:1179px){
  #demo .demo-layout{grid-template-columns:minmax(280px,.9fr) minmax(0,1.45fr);grid-template-areas:'options viewer' 'quote viewer';align-items:start;gap:10px;border:0;background:transparent}
  #demo .options-panel{grid-area:options;border:1px solid var(--paper-line)!important;border-radius:10px;padding:18px;background:#F3F1EA}
  #demo .quote-column{display:contents}
  #demo .viewer3d-block{grid-area:viewer;border:1px solid var(--paper-line);border-radius:10px;padding:15px;position:sticky;top:86px}
  #demo .viewer3d-canvas-wrap{height:540px}
  #demo .quote-panel{grid-area:quote;border-radius:10px;padding:20px}
  #demo .options-grid{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:979px){
  #demo .demo-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'viewer' 'options' 'quote';gap:10px;border:0;background:transparent}
  #demo .quote-column{display:contents}
  #demo .viewer3d-block{grid-area:viewer;border:1px solid var(--paper-line);border-radius:10px;padding:12px;background:var(--card)}
  #demo .options-panel{grid-area:options;border:1px solid var(--paper-line)!important;border-radius:10px;padding:16px;background:#F3F1EA}
  #demo .quote-panel{grid-area:quote;border-radius:10px}
  #demo .options-grid{grid-template-columns:minmax(0,1fr)}
  #demo .k1-cat-nav{grid-template-columns:repeat(5,minmax(132px,1fr));overflow-x:auto;scrollbar-width:thin;padding-bottom:3px;scroll-snap-type:x proximity}
  #demo .k1-cat-btn{scroll-snap-align:start}
  #demo .k1-stage-head{margin-bottom:8px}
  #demo .viewer3d-canvas-wrap{height:320px}
}

@media(max-width:640px){
  #demo{padding-left:0;padding-right:0}
  #demo>.wrap>.section-head{padding-left:16px;padding-right:16px}
  #demo .demo-layout{gap:8px}
  #demo .viewer3d-block{position:sticky;top:56px;z-index:22;border-radius:0;padding:8px 10px 9px;box-shadow:0 10px 24px -20px rgba(20,24,28,.7)}
  #demo .k1-stage-head{margin:0 0 6px}
  #demo .k1-stage-head strong{font-size:.9rem}
  #demo .k1-stage-state{font-size:.62rem}
  #demo .viewer3d-canvas-wrap{height:210px;min-height:0}
  #demo .viewer3d-hint{display:none}
  #demo .viewer3d-note{display:none}
  #demo .k1-stage-status{grid-template-columns:minmax(0,1fr) auto;padding:7px 8px;margin-top:6px;gap:7px}
  #demo .k1-stage-summary{grid-column:1/-1;font-size:.62rem}
  #demo .k1-stage-metric{font-size:.66rem}
  #demo .k1-stage-metric strong{font-size:.78rem}
  #demo .options-panel{border-radius:0;padding:13px 12px 14px}
  #demo .k1-studio-head{margin-bottom:10px;padding-bottom:9px}
  #demo .k1-studio-head strong{font-size:.9rem}
  #demo .k1-view-all{display:none}
  #demo .k1-cat-nav{grid-template-columns:repeat(5,minmax(120px,1fr));margin:0 -2px 13px;padding-bottom:4px}
  #demo .k1-cat-btn{min-height:46px;padding:6px 8px;grid-template-columns:23px minmax(0,1fr)}
  #demo .k1-cat-label{font-size:.73rem}
  #demo .k1-cat-summary{font-size:.61rem}
  #demo .opt-title{font-size:.84rem}
  #demo .opt-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #demo .opt-btn{justify-content:flex-start;width:100%;padding:9px 10px;font-size:.84rem}
  #demo .addon-list{gap:6px}
  #demo .addon-item{min-height:48px}
  #demo .quote-panel{border-radius:0;padding:20px 16px}
  #demo .k1-impact{left:8px;top:8px;max-width:calc(100% - 16px);padding:8px 10px}
  #demo .k1-impact-change{font-size:.75rem}
}
@media(max-width:360px){
  #demo .viewer3d-canvas-wrap{height:190px}
  #demo .opt-row{grid-template-columns:minmax(0,1fr)}
  #demo .k1-cat-nav{grid-template-columns:repeat(5,minmax(112px,1fr))}
  #demo .viewer3d-explode-btn{font-size:.66rem;padding:6px 7px}
}
@media(prefers-reduced-motion:reduce){
  #demo .k1-impact{transition:none}
}



/* ================================================================
   CONFYRA STEP 3 — K4 PLANNING WORKSPACE
   Reorganisiert ausschließlich Demo 4. Bestehende IDs, Geometrie-,
   Preis-, Undo/Redo-, Share-, 3D- und Zeichnungslogik bleiben erhalten.
   ================================================================ */
#demo4 .demo-layout.c-ws-layout{
  display:block; border:0; background:transparent; overflow:visible;
}
#demo4 .c-ws-shell{
  --cws-line:#D7D4C8; --cws-soft:#F5F3EC; --cws-ink:#14181C; --cws-steel:#566474;
  display:grid; grid-template-columns:176px minmax(0,1fr) 308px;
  min-height:650px; border:1px solid var(--paper-line); background:#fff;
  box-shadow:0 18px 50px rgba(20,24,28,.07); position:relative;
}
#demo4 .c-ws-toolbar{
  grid-column:1/-1; min-height:58px; display:flex; align-items:center; gap:14px;
  padding:8px 12px; border-bottom:1px solid var(--paper-line); background:#FAF9F5;
  position:sticky; top:0; z-index:18;
}
#demo4 .c-ws-viewtabs{display:inline-flex; border:1px solid var(--paper-line); background:#fff; border-radius:4px; overflow:hidden; flex:0 0 auto;}
#demo4 .c-ws-viewtab{border:0; border-right:1px solid var(--paper-line); background:#fff; min-height:40px; padding:8px 15px; font:600 .78rem 'IBM Plex Sans',sans-serif; color:var(--steel); cursor:pointer;}
#demo4 .c-ws-viewtab:last-child{border-right:0;}
#demo4 .c-ws-viewtab[aria-selected="true"]{background:var(--ink); color:#fff;}
#demo4 .c-ws-viewtab:hover:not([aria-selected="true"]){background:#F2F0E8; color:var(--ink);}
#demo4 .c-ws-toolbar .floor-tabs{margin:0; flex:1 1 auto; flex-wrap:nowrap; overflow-x:auto; padding:2px 0; scrollbar-width:none;}
#demo4 .c-ws-toolbar .floor-tabs::-webkit-scrollbar{display:none;}
#demo4 .c-ws-toolbar .floor-tab,#demo4 .c-ws-toolbar .floor-tab-add,#demo4 .c-ws-toolbar .floor-tab-remove{white-space:nowrap; min-height:40px;}
#demo4 .c-ws-toolbar .undo-redo-row{margin:0!important; display:flex!important; flex-wrap:nowrap!important; gap:5px!important; flex:0 0 auto;}
#demo4 .c-ws-toolbar .undo-redo-row .btn-small{min-height:40px; padding:8px 10px; font-size:.72rem;}
#demo4 .c-ws-toolbar #c-reset-anlage{margin-left:0!important;}

#demo4 .c-ws-rail{border-right:1px solid var(--paper-line); background:#F6F4ED; padding:16px 12px; min-width:0;}
#demo4 .c-ws-rail-head{font:700 .7rem 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--steel); margin:0 0 10px;}
#demo4 .c-ws-rail-note{font-size:.75rem; line-height:1.45; color:var(--steel); margin:12px 2px 0;}
#demo4 .c-ws-rail .type-picker{display:grid; grid-template-columns:1fr; gap:7px; margin:0;}
#demo4 .c-ws-rail .type-picker-btn{width:100%; min-height:62px; flex-direction:row; justify-content:flex-start; text-align:left; padding:10px 9px; border-width:1px; font-size:1.15rem; gap:9px;}
#demo4 .c-ws-rail .type-picker-btn span{font-size:.72rem;}
#demo4 .c-ws-rail .type-picker-btn.active{border-width:2px;}
#demo4 .c-ws-mobile-close{display:none;}
#demo4 .c-ws-helper-slot{margin-top:10px;display:grid;gap:8px;}
#demo4 .c-ws-helper-slot .opt-hint,#demo4 .c-ws-helper-slot .place-mode-indicator{margin:0;font-size:.74rem;line-height:1.45;padding:8px 10px;background:#FBFAF6;border:1px solid var(--paper-line);border-radius:10px;color:var(--steel);}
#demo4 .c-ws-helper-slot #c-status-msg{background:#FFF5F1;border-color:#E8C4BC;color:#B3512A!important;font-weight:600;}
#demo4 .c-ws-helper-slot #c-place-mode-indicator{background:#F3F7FB;border-color:#D5E2F0;color:#35526F;}

#demo4 .c-ws-main{min-width:0; background:#fff; position:relative;}
#demo4 .c-ws-mainhead{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border-bottom:1px solid var(--paper-line); background:#fff;}
#demo4 .c-ws-mainhead-copy strong{display:block; font:700 .92rem 'Space Grotesk',sans-serif;}
#demo4 .c-ws-mainhead-copy span{display:block; margin-top:2px; font-size:.73rem; color:var(--steel);}
#demo4 .c-ws-statebar{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
#demo4 .c-ws-selection-slot{padding:10px 14px 0; background:#fff;}
#demo4 .c-ws-selection-slot .c-ws-selection-card{margin:0; border:1px solid var(--paper-line); background:#FBFAF6;}
#demo4 .c-ws-chip{display:inline-flex; align-items:center; min-height:28px; padding:4px 8px; border:1px solid var(--paper-line); background:#F7F5EE; border-radius:999px; font:600 .68rem 'IBM Plex Mono',monospace; color:var(--steel); white-space:nowrap;}
#demo4 .c-ws-chip.is-ok{color:#2F714A; background:#EDF6F0; border-color:#BFD8C8;}
#demo4 .c-ws-view{min-width:0; padding:12px 14px 16px;}
#demo4 .c-ws-view[hidden]{display:none!important;}
#demo4 .c-ws-plan #c-canvas-wrap{border:0; background:#F8F6EF; padding:8px 28px 24px; min-height:540px;}
#demo4 .c-ws-plan #c-canvas-svg{height:500px;}
#demo4 .c-ws-plan .c-viewfit-controls{bottom:18px; right:18px;}
#demo4 .c-ws-plan #c-canvas-actionbar{display:none!important;}
#demo4 .c-ws-hints{padding:0 3px;}
#demo4 .c-ws-hints .opt-hint{font-size:.76rem;}
#demo4 .c-ws-view-3d{padding:14px;}
#demo4 .c-ws-view-3d .viewer3d-block{margin:0; padding:0; border:0; background:transparent;}
#demo4 .c-ws-view-3d .curve-title{margin:0 0 9px!important;}
#demo4 .c-ws-view-3d #c3-wrap{height:min(62vh,650px); min-height:500px;}
#demo4 .c-ws-view-3d .c3-legend{margin-top:9px;}

#demo4 .c-ws-inspector{border-left:1px solid var(--paper-line); background:#FAF9F5; min-width:0; padding:14px; overflow:visible;}
#demo4 .c-ws-project-card,#demo4 .c-ws-selection-card{background:#fff; border:1px solid var(--paper-line); padding:13px; margin-bottom:9px;}
#demo4 .c-ws-costs{position:sticky; top:72px; z-index:8;}
#demo4 .c-ws-card-kicker{font:600 .65rem 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--steel); margin-bottom:5px;}
#demo4 .c-ws-project-card h4,#demo4 .c-ws-selection-card h4{font-size:1rem; margin:0 0 8px;}
#demo4 .c-ws-summary-grid{display:grid; grid-template-columns:1fr 1fr; gap:7px;}
#demo4 .c-ws-summary-item{padding:7px 8px; background:#F6F4ED; border:1px solid #E4E1D7;}
#demo4 .c-ws-summary-item span{display:block; font-size:.62rem; color:var(--steel); text-transform:uppercase; letter-spacing:.05em;}
#demo4 .c-ws-summary-item strong{display:block; margin-top:2px; font:700 .78rem 'IBM Plex Mono',monospace; color:var(--ink); overflow-wrap:anywhere;}
#demo4 .c-ws-selection-body{font-size:.78rem; line-height:1.5; color:var(--steel);}
#demo4 .c-ws-selection-body strong{color:var(--ink);}
#demo4 .c-ws-selection-actions{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px;}
#demo4 .c-ws-selection-actions button{min-height:42px; border:1px solid var(--paper-line); background:#fff; font-size:.72rem; cursor:pointer;}
#demo4 .c-ws-selection-actions button:hover:not(:disabled){background:#F6F4ED;}
#demo4 .c-ws-selection-actions button:disabled{opacity:.42; cursor:not-allowed;}
#demo4 #c-ws-delete{color:#A33E32;}
#demo4 .c-ws-details{background:#fff; border:1px solid var(--paper-line); margin:0 0 8px;}
#demo4 .c-ws-details>summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; cursor:pointer; font-size:.76rem; font-weight:700;}
#demo4 .c-ws-details>summary::-webkit-details-marker{display:none;}
#demo4 .c-ws-details>summary::after{content:'+'; font:500 .95rem 'IBM Plex Mono',monospace; color:var(--steel);}
#demo4 .c-ws-details[open]>summary::after{content:'−';}
#demo4 .c-ws-details-content{border-top:1px solid var(--paper-line); padding:12px;}
#demo4 .c-ws-settings .opt-group{margin:0 0 18px;}
#demo4 .c-ws-settings .opt-group:last-child{margin-bottom:0;}
#demo4 .c-ws-settings .opt-row{display:grid; grid-template-columns:1fr; gap:5px;}
#demo4 .c-ws-settings .opt-btn{width:100%; justify-content:flex-start; text-align:left;}
#demo4 .c-ws-settings .addon-list{display:grid; grid-template-columns:1fr;}
#demo4 .c-ws-costs #c-live-angebot-panel{position:static; border-radius:0; box-shadow:none; margin:0; border-top-width:3px;}
#demo4 .c-ws-costs #c-live-angebot-panel .quote-head{padding-top:12px;}
#demo4 .c-ws-costs #c-live-angebot-panel .quote-foot{font-size:.68rem;}
#demo4 .c-ws-timeline .viewer3d-block{border:0; padding:0; margin:0;}

#demo4 .c-ws-mobilebar{display:none;}
#demo4 .c-ws-mobile-backdrop{display:none;}

@media(max-width:1180px){
  #demo4 .c-ws-shell{grid-template-columns:150px minmax(0,1fr) 270px;}
  #demo4 .c-ws-toolbar{gap:8px;}
  #demo4 .c-ws-toolbar .undo-redo-row .btn-small{padding:7px 8px; font-size:.68rem;}
  #demo4 .c-ws-plan #c-canvas-svg{height:440px;}
  #demo4 .c-ws-plan #c-canvas-wrap{min-height:480px;}
}
@media(max-width:920px){
  #demo4 .c-ws-shell{grid-template-columns:132px minmax(0,1fr);}
  #demo4 .c-ws-inspector{grid-column:1/-1; border-left:0; border-top:1px solid var(--paper-line); display:grid; grid-template-columns:1fr 1fr; gap:10px;}
    #demo4 .c-ws-project-card,#demo4 .c-ws-selection-card{margin:0;}
  #demo4 .c-ws-details{margin:0;}
  #demo4 .c-ws-plan #c-canvas-svg{height:390px;}
  #demo4 .c-ws-plan #c-canvas-wrap{min-height:430px;}
  #demo4 .c-ws-view-3d #c3-wrap{height:470px; min-height:420px;}
}
@media(max-width:700px){
  #demo4{padding-bottom:22px;}
  #demo4 .c-ws-shell{display:block; min-height:0; padding-bottom:58px;}
  #demo4 .c-ws-toolbar{position:sticky; top:0; padding:7px 8px; flex-wrap:wrap; z-index:25;}
  #demo4 .c-ws-viewtabs{order:1; flex:1 1 auto;}
  #demo4 .c-ws-viewtab{flex:1 1 0; padding:7px 8px; font-size:.72rem;}
  #demo4 .c-ws-toolbar .floor-tabs{order:3; flex-basis:100%;}
  #demo4 .c-ws-toolbar .undo-redo-row{order:2;}
  #demo4 .c-ws-toolbar .undo-redo-row #c-reset-anlage{display:none;}
  #demo4 .c-ws-rail{position:fixed; z-index:340; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); max-height:72vh; overflow:auto; transform:translateY(115%); transition:transform .22s ease; border:1px solid var(--paper-line); border-radius:14px; box-shadow:0 24px 70px rgba(20,24,28,.28); padding:12px;}
  #demo4 .c-ws-rail.is-mobile-open{transform:translateY(0);}
  #demo4 .c-ws-rail .type-picker{grid-template-columns:1fr 1fr;}
  #demo4 .c-ws-rail .type-picker-btn{min-height:58px;}
  #demo4 .c-ws-mobile-close{display:inline-flex; position:absolute; right:10px; top:8px; width:44px; height:44px; align-items:center; justify-content:center; border:0; background:transparent; font-size:1.4rem; cursor:pointer;}
  #demo4 .c-ws-mainhead{padding:9px 10px; align-items:flex-start;}
  #demo4 .c-ws-statebar{max-width:48%;}
  #demo4 .c-ws-chip{font-size:.6rem; min-height:26px;}
  #demo4 .c-ws-view{padding:5px 5px 12px;}
  #demo4 .c-ws-plan #c-canvas-wrap{min-height:330px; padding:5px 22px 20px;}
  #demo4 .c-ws-plan #c-canvas-svg{height:310px;}
  #demo4 .c-ws-view-3d{padding:6px;}
  #demo4 .c-ws-view-3d #c3-wrap{height:330px; min-height:300px;}
  #demo4 .c-ws-view-3d .curve-title{font-size:.8rem; padding-left:4px;}
  #demo4 .c-ws-inspector{display:block; position:fixed; z-index:340; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); max-height:76vh; overflow:auto; transform:translateY(115%); transition:transform .22s ease; border:1px solid var(--paper-line); border-radius:14px; box-shadow:0 24px 70px rgba(20,24,28,.28); padding:12px; background:#FAF9F5;}
  #demo4 .c-ws-inspector.is-mobile-open{transform:translateY(0);}
  #demo4 .c-ws-inspector .c-ws-mobile-close{display:inline-flex; z-index:2;}
  #demo4 .c-ws-project-card,#demo4 .c-ws-selection-card{margin-bottom:8px;}
  #demo4 .c-ws-mobile-backdrop{position:fixed; inset:0; z-index:330; background:rgba(20,24,28,.48);}
  #demo4 .c-ws-mobile-backdrop.is-open{display:block;}
  #demo4 .c-ws-mobilebar{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; position:sticky; bottom:0; z-index:24; background:#14181C; padding:6px 6px calc(6px + env(safe-area-inset-bottom));}
  #demo4 .c-ws-mobilebar button{min-height:48px; border:1px solid #3C4650; background:#1E252C; color:#fff; font-size:.68rem; border-radius:4px; cursor:pointer;}
  #demo4 .c-ws-mobilebar button:first-child{background:#D98F3F; color:#201306; border-color:#D98F3F; font-weight:700;}
  #demo4 .c-ws-hints{padding:0 5px;}
}
@media(max-width:380px){
  #demo4 .c-ws-toolbar .undo-redo-row .btn-small{font-size:0; width:42px; padding:0;}
  #demo4 .c-ws-toolbar #c-undo::before{content:'↶'; font-size:1rem;}
  #demo4 .c-ws-toolbar #c-redo::before{content:'↷'; font-size:1rem;}
  #demo4 .c-ws-plan #c-canvas-svg{height:285px;}
  #demo4 .c-ws-plan #c-canvas-wrap{min-height:305px;}
  #demo4 .c-ws-statebar .c-ws-chip:nth-child(n+3){display:none;}
  #demo4 .c-ws-summary-grid{grid-template-columns:1fr 1fr;}
}
@media(prefers-reduced-motion:reduce){
  #demo4 .c-ws-rail,#demo4 .c-ws-inspector{transition:none!important;}
}

/* Step 45 – Desktop: Angebots-/Projektspalte bleibt beim Arbeiten sichtbar.
   Sticky sitzt bewusst auf der gesamten rechten Spalte statt nur auf dem
   inneren Preis-Accordion. Der Workspace darf Sticky nicht durch overflow:clip
   zu einem falschen Scroll-Container machen. */
@media (min-width:921px){
  #demo4 .c-ws-shell{
    overflow:visible !important;
  }
  #demo4 .c-ws-inspector{
    position:sticky !important;
    top:72px;
    align-self:start;
    max-height:calc(100vh - 88px);
    overflow:auto !important;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    z-index:10;
  }
  #demo4 .c-ws-costs{
    position:static !important;
    top:auto !important;
  }
}


/* Step 47 – Confi 4 neu priorisiert:
   links nur Module, oben kompakte Projekt-/Ausstattungsleiste,
   Mitte als enger 2D/3D-Workflow, rechts nur Angebot/Business. */
#demo4 .c-ws-shell{
  grid-template-columns:158px minmax(0,1fr) 286px;
  min-height:600px;
}
#demo4 .c-ws-toolbar{min-height:54px;padding:6px 10px;gap:10px;}
#demo4 .c-ws-viewtab{min-height:36px;padding:7px 13px;font-size:.74rem;}
#demo4 .c-ws-toolbar .floor-tab,#demo4 .c-ws-toolbar .floor-tab-add,#demo4 .c-ws-toolbar .floor-tab-remove,
#demo4 .c-ws-toolbar .undo-redo-row .btn-small{min-height:36px;}

#demo4 .c-ws-rail{padding:12px 10px;background:linear-gradient(180deg,#F7F5EF 0%,#F4F1EA 100%);} 
#demo4 .c-ws-rail-head{margin-bottom:8px;font-size:.67rem;}
#demo4 .c-ws-rail .type-picker{gap:6px;}
#demo4 .c-ws-rail .type-picker-btn{min-height:52px;padding:8px 10px;gap:10px;border-radius:14px;}
#demo4 .c-ws-rail .type-picker-btn span{font-size:.68rem;line-height:1.2;}
#demo4 .c-ws-helper-slot{margin-top:8px;gap:6px;}
#demo4 .c-ws-helper-slot .opt-hint,#demo4 .c-ws-helper-slot .place-mode-indicator{font-size:.69rem;padding:7px 9px;}
#demo4 .c-ws-rail-note{font-size:.7rem;margin:8px 3px 0;}

#demo4 .c-ws-mainhead{padding:9px 12px 8px;}
#demo4 .c-ws-mainhead-copy strong{font-size:.98rem;}
#demo4 .c-ws-mainhead-copy span{font-size:.7rem;}
#demo4 .c-ws-statebar{gap:5px;}
#demo4 .c-ws-chip{min-height:25px;padding:4px 7px;font-size:.64rem;}

#demo4 .c-ws-config-strip{padding:7px 12px 0;background:#fff;}
#demo4 .c-ws-config-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:7px;}
#demo4 .c-ws-config-head span{font:600 .6rem 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);}
#demo4 .c-ws-config-head strong{font-size:.82rem;color:var(--ink);font-weight:700;}
#demo4 .c-ws-config-scroll{display:flex;gap:8px;overflow:auto;padding-bottom:2px;scrollbar-width:thin;}
#demo4 .c-ws-config-scroll .opt-group{flex:0 0 min(252px,31%);min-width:210px;margin:0;background:#FCFBF7;border:1px solid var(--paper-line);border-radius:14px;padding:9px 10px 10px;}
#demo4 .c-ws-config-scroll .opt-group h3{margin:0 0 7px;font-size:.83rem;line-height:1.2;display:flex;align-items:center;justify-content:space-between;gap:8px;}
#demo4 .c-ws-config-scroll .opt-group h3 .mono{font-size:.65rem;color:var(--steel);font-weight:500;}
#demo4 .c-ws-config-scroll .opt-row{gap:6px;}
#demo4 .c-ws-config-scroll .opt-btn,#demo4 .c-ws-config-scroll .addon-list .opt-btn{min-height:42px;padding:8px 10px;border-radius:10px;font-size:.73rem;line-height:1.25;justify-content:flex-start;text-align:left;}
#demo4 .c-ws-config-scroll .opt-help,#demo4 .c-ws-config-scroll .opt-note,#demo4 .c-ws-config-scroll .opt-subrow{font-size:.67rem;line-height:1.35;}
#demo4 .c-ws-config-scroll .addon-list{gap:6px;}

#demo4 .c-ws-selection-slot{padding:7px 12px 0;background:#fff;}
#demo4 .c-ws-selection-slot .c-ws-selection-card{padding:10px 11px;}
#demo4 .c-ws-selection-card h4{font-size:.92rem;margin-bottom:5px;}
#demo4 .c-ws-selection-body{font-size:.74rem;line-height:1.4;}
#demo4 .c-ws-selection-actions button{min-height:36px;font-size:.69rem;}

#demo4 .c-ws-view{padding:8px 12px 12px;}
#demo4 .c-ws-plan #c-canvas-wrap{padding:5px 18px 12px;min-height:300px;}
#demo4 .c-ws-plan #c-canvas-svg{height:258px;}
#demo4 .c-ws-live3d{margin-top:2px;}
#demo4 .c-ws-live3d-head{padding:8px 11px;}
#demo4 .c-ws-live3d-head strong{font-size:.82rem;}
#demo4 .c-ws-preview3d-slot{padding:8px 10px 9px;}
#demo4 .c-ws-preview3d-slot #c3-wrap{height:min(46vh,392px)!important;min-height:308px!important;}
#demo4 #c-stack-caption{margin-top:5px;font-size:.67rem;}

#demo4 .c-ws-inspector{padding:10px;background:#FBFAF6;}
#demo4 .c-ws-details{margin:0 0 6px;}
#demo4 .c-ws-details>summary{padding:9px 10px;font-size:.74rem;}
#demo4 .c-ws-details-content{padding:10px;}
#demo4 .c-ws-project-card-compact{padding:10px;margin-top:6px;}
#demo4 .c-ws-project-card-compact h4{font-size:.83rem;}
#demo4 .c-ws-summary-grid{gap:6px;}
#demo4 .c-ws-summary-item{padding:6px 7px;}
#demo4 .c-ws-summary-item span{font-size:.57rem;}
#demo4 .c-ws-summary-item strong{font-size:.71rem;}
#demo4 .c-ws-costs #c-live-angebot-panel .quote-head{margin-bottom:10px;padding-top:8px;}
#demo4 .c-ws-costs #c-live-angebot-panel .q-line{padding:4px 0;font-size:.72rem;}
#demo4 .c-ws-costs #c-live-angebot-panel .q-total .qv{font-size:1.08rem;}
#demo4 .c-ws-costs #c-live-angebot-panel .quote-foot{margin-top:9px;font-size:.63rem;}

@media(max-width:1180px){
  #demo4 .c-ws-shell{grid-template-columns:148px minmax(0,1fr) 258px;}
  #demo4 .c-ws-config-scroll .opt-group{flex-basis:230px;min-width:196px;}
}
@media(max-width:920px){
  #demo4 .c-ws-shell{grid-template-columns:132px minmax(0,1fr);} 
  #demo4 .c-ws-config-strip{padding:7px 10px 0;}
  #demo4 .c-ws-config-scroll .opt-group{flex-basis:220px;min-width:220px;}
}
@media(max-width:700px){
  #demo4 .c-ws-config-head{display:block;margin-bottom:6px;}
  #demo4 .c-ws-config-head strong{display:block;margin-top:2px;font-size:.78rem;}
  #demo4 .c-ws-config-strip{padding:6px 10px 0;}
  #demo4 .c-ws-config-scroll .opt-group{flex-basis:84vw;min-width:84vw;}
  #demo4 .c-ws-view{padding:8px 10px 12px;}
}


/* Step 48 – 2D-Plan wieder nach oben holen: Auswahl wird kompakt und erscheint
   erst bei echter Auswahl direkt unter dem 2D-Plan statt als großer Block davor. */
#demo4 .c-ws-selection-slot{padding:6px 0 0!important;background:transparent!important;}
#demo4 .c-ws-selection-slot[hidden]{display:none!important;}
#demo4 .c-ws-selection-slot .c-ws-selection-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:3px 12px;
  align-items:center;
  margin:0;
  padding:8px 10px;
  border-radius:12px;
  background:#FCFBF7;
}
#demo4 .c-ws-selection-slot .c-ws-selection-card.is-empty{display:none;}
#demo4 .c-ws-selection-slot .c-ws-card-kicker,
#demo4 .c-ws-selection-slot #c-ws-selection-title,
#demo4 .c-ws-selection-slot #c-ws-selection-body{grid-column:1;}
#demo4 .c-ws-selection-slot .c-ws-card-kicker{margin:0;font-size:.58rem;}
#demo4 .c-ws-selection-slot #c-ws-selection-title{margin:0;font-size:.88rem;line-height:1.15;}
#demo4 .c-ws-selection-slot #c-ws-selection-body{margin:0;font-size:.72rem;line-height:1.4;color:var(--steel);}
#demo4 .c-ws-selection-slot #c-ws-selection-body strong{color:var(--ink);font-weight:700;}
#demo4 .c-ws-selection-slot .c-ws-selection-actions{
  grid-column:2;
  grid-row:1 / span 3;
  display:flex;
  flex-direction:row;
  gap:8px;
  align-self:center;
  justify-self:end;
}
#demo4 .c-ws-selection-slot .c-ws-selection-actions button{min-height:36px;padding:8px 14px;border-radius:10px;min-width:132px;font-size:.69rem;}
#demo4 .c-ws-selection-slot .c-ws-selection-actions #c-ws-delete{color:#B3512A;}
@media(max-width:980px){
  #demo4 .c-ws-selection-slot .c-ws-selection-card{grid-template-columns:1fr;gap:5px;}
  #demo4 .c-ws-selection-slot .c-ws-selection-actions{grid-column:1;grid-row:auto;justify-self:start;flex-wrap:wrap;}
}


/* ================================================================
   Step 49 – Confi 4: echte kompakte Planungsoberfläche
   - Projektstandard nur noch als flache Quick-Bar
   - Optionen öffnen als Popover und drücken den 2D-Plan nicht nach unten
   - Auswahl liegt als Kontextleiste im 2D-Plan
   - möglichst wenig ungenutzte Vertikalfläche
   ================================================================ */
@media (min-width:701px){
  #demo4 .c-ws-mainhead{
    padding:7px 11px 6px !important;
  }
  #demo4 .c-ws-mainhead-copy strong{font-size:.94rem !important;}
  #demo4 .c-ws-mainhead-copy span{font-size:.67rem !important;}
  #demo4 .c-ws-chip{
    min-height:23px !important;
    padding:3px 7px !important;
    font-size:.61rem !important;
  }

  #demo4 .c-ws-config-strip{
    position:relative;
    z-index:16;
    padding:5px 11px 6px !important;
    border-bottom:1px solid var(--paper-line);
    background:#FBFAF6 !important;
  }
  #demo4 .c-ws-config-head{
    margin:0 0 5px !important;
    min-height:0;
    align-items:center !important;
  }
  #demo4 .c-ws-config-head span{
    font-size:.57rem !important;
    letter-spacing:.09em;
  }
  #demo4 .c-ws-config-head strong{
    font-size:.72rem !important;
    color:var(--steel) !important;
    font-weight:500 !important;
  }

  #demo4 .c-ws-config-scroll{
    overflow:visible !important;
    display:block !important;
    padding:0 !important;
  }
  #demo4 .c-ws-config-quick{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px;
    width:100%;
  }
  #demo4 .c-ws-quick-item{
    position:relative;
    min-width:0;
  }
  #demo4 .c-ws-quick-trigger{
    width:100%;
    min-height:48px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:2px;
    padding:7px 9px;
    border:1px solid #D9D5CA;
    border-radius:11px;
    background:#fff;
    color:var(--ink);
    text-align:left;
    cursor:pointer;
    transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
  }
  #demo4 .c-ws-quick-trigger:hover,
  #demo4 .c-ws-quick-trigger[aria-expanded="true"]{
    border-color:#D98F3F;
    background:#FFF9F2;
    box-shadow:0 5px 16px rgba(20,24,28,.06);
  }
  #demo4 .c-ws-quick-label{
    display:block;
    width:100%;
    font:650 .56rem 'IBM Plex Mono',monospace;
    letter-spacing:.065em;
    text-transform:uppercase;
    color:#6B7681;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #demo4 .c-ws-quick-value{
    display:flex;
    align-items:center;
    gap:6px;
    width:100%;
    font:700 .71rem 'IBM Plex Sans',sans-serif;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #demo4 .c-ws-quick-value::after{
    content:'⌄';
    margin-left:auto;
    flex:0 0 auto;
    color:#7B858E;
    font-size:.72rem;
  }
  #demo4 .c-ws-color-dot{
    width:10px;height:10px;border-radius:50%;
    border:1px solid rgba(20,24,28,.25);
    flex:0 0 auto;
  }

  #demo4 .c-ws-quick-popover{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    z-index:80;
    width:min(340px,calc(100vw - 48px));
    max-height:min(68vh,560px);
    overflow:auto;
    display:none;
    padding:10px;
    border:1px solid #D7D2C6;
    border-radius:14px;
    background:#fff;
    box-shadow:0 20px 52px rgba(20,24,28,.16);
  }
  #demo4 .c-ws-quick-item:nth-child(4) .c-ws-quick-popover,
  #demo4 .c-ws-quick-item:nth-child(5) .c-ws-quick-popover{
    left:auto;
    right:0;
  }
  #demo4 .c-ws-quick-item.is-open .c-ws-quick-popover{display:block;}

  #demo4 .c-ws-quick-popover .opt-group{
    min-width:0 !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }
  #demo4 .c-ws-quick-popover .opt-group + .opt-group{
    margin-top:12px !important;
    padding-top:12px !important;
    border-top:1px solid var(--paper-line) !important;
  }
  #demo4 .c-ws-quick-popover .opt-title{
    margin-bottom:7px;
    font-size:.79rem;
  }
  #demo4 .c-ws-quick-popover .opt-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:5px !important;
  }
  #demo4 .c-ws-quick-popover .opt-btn{
    min-height:40px !important;
    padding:8px 10px !important;
    border-radius:9px !important;
    font-size:.73rem !important;
  }
  #demo4 .c-ws-quick-popover .addon-list{
    grid-template-columns:1fr !important;
    gap:5px !important;
  }
  #demo4 .c-ws-quick-popover .addon-item{
    padding:8px 9px !important;
    font-size:.7rem !important;
  }
  #demo4 .c-ws-quick-popover .info-panel{
    font-size:.68rem !important;
    line-height:1.4 !important;
  }
  #demo4 .c-ws-quick-popover .stack-control{
    margin-top:9px !important;
  }

  /* alten "offenen Karten"-Look innerhalb der Quick-Bar vollständig neutralisieren */
  #demo4 .c-ws-config-scroll > .opt-group{display:none !important;}

  /* 2D beginnt direkt nach der flachen Quick-Bar */
  #demo4 .c-ws-view{
    padding:7px 11px 10px !important;
  }
  #demo4 .c-ws-plan #c-canvas-wrap{
    position:relative;
    min-height:292px !important;
    padding:4px 17px 10px !important;
    border-radius:13px !important;
  }
  #demo4 .c-ws-plan #c-canvas-svg{
    height:258px !important;
  }

  /* Auswahl als echte Kontextleiste IM 2D-Plan – keine zusätzliche Höhe */
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot{
    position:absolute;
    left:10px;
    right:64px;
    bottom:10px;
    z-index:12;
    padding:0 !important;
    background:transparent !important;
    pointer-events:none;
  }
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot[hidden]{
    display:none !important;
  }
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot .c-ws-selection-card{
    pointer-events:auto;
    display:flex !important;
    align-items:center;
    gap:9px;
    width:max-content;
    max-width:100%;
    min-height:42px;
    padding:7px 8px 7px 10px !important;
    margin:0 !important;
    border:1px solid rgba(20,24,28,.16) !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.94) !important;
    box-shadow:0 8px 22px rgba(20,24,28,.10);
    backdrop-filter:blur(8px);
  }
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot .c-ws-card-kicker{
    display:none !important;
  }
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot #c-ws-selection-title{
    margin:0 !important;
    font-size:.76rem !important;
    line-height:1.2;
    white-space:nowrap;
  }
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot #c-ws-selection-body{
    margin:0 !important;
    font-size:.65rem !important;
    line-height:1.25 !important;
    color:#64707B !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:330px;
  }
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot .c-ws-selection-actions{
    display:flex !important;
    gap:5px !important;
    margin:0 0 0 4px !important;
    flex:0 0 auto;
  }
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot .c-ws-selection-actions button{
    min-width:auto !important;
    min-height:32px !important;
    padding:6px 9px !important;
    border-radius:8px !important;
    font-size:.65rem !important;
  }

  #demo4 .c-ws-live3d{
    margin-top:4px !important;
  }
  #demo4 .c-ws-live3d-head{
    padding:7px 10px !important;
  }
  #demo4 .c-ws-preview3d-slot{
    padding:7px 9px 8px !important;
  }
  #demo4 .c-ws-preview3d-slot #c3-wrap{
    height:min(46vh,390px) !important;
    min-height:305px !important;
  }
}

/* Zwischenbreiten: Quick-Bar bleibt einzeilig, Werte dürfen kürzen */
@media (min-width:701px) and (max-width:1120px){
  #demo4 .c-ws-config-quick{grid-template-columns:repeat(5,minmax(105px,1fr));}
  #demo4 .c-ws-quick-trigger{padding:7px 7px;}
  #demo4 .c-ws-quick-value{font-size:.67rem;}
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot #c-ws-selection-body{max-width:220px;}
}

/* Mobil: kompakte horizontale Quick-Bar; Popover als breites Panel */
@media (max-width:700px){
  #demo4 .c-ws-config-strip{padding:6px 10px 7px !important;}
  #demo4 .c-ws-config-head{margin-bottom:5px !important;}
  #demo4 .c-ws-config-head strong{display:none !important;}
  #demo4 .c-ws-config-scroll{overflow:visible !important;display:block !important;}
  #demo4 .c-ws-config-quick{
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  #demo4 .c-ws-config-quick::-webkit-scrollbar{display:none;}
  #demo4 .c-ws-quick-item{position:static;flex:0 0 126px;}
  #demo4 .c-ws-quick-trigger{
    width:100%;min-height:48px;padding:7px 8px;
    border:1px solid #D9D5CA;border-radius:11px;background:#fff;text-align:left;
  }
  #demo4 .c-ws-quick-label{display:block;font:650 .55rem 'IBM Plex Mono',monospace;text-transform:uppercase;color:#687581;}
  #demo4 .c-ws-quick-value{display:block;margin-top:2px;font-weight:700;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #demo4 .c-ws-quick-popover{
    position:absolute;left:10px!important;right:10px!important;top:100%;z-index:90;
    display:none;max-height:58vh;overflow:auto;padding:10px;border:1px solid #D7D2C6;
    border-radius:14px;background:#fff;box-shadow:0 20px 52px rgba(20,24,28,.18);
  }
  #demo4 .c-ws-quick-item.is-open .c-ws-quick-popover{display:block;}
  #demo4 .c-ws-quick-popover .opt-group{margin:0!important;padding:0!important;border:0!important;background:transparent!important;min-width:0!important;}
  #demo4 .c-ws-quick-popover .opt-group + .opt-group{margin-top:10px!important;padding-top:10px!important;border-top:1px solid var(--paper-line)!important;}
  #demo4 .c-ws-quick-popover .opt-row{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;}
  #demo4 .c-ws-quick-popover .opt-btn{width:100%;min-height:42px;}
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot{
    position:absolute;left:8px;right:52px;bottom:8px;z-index:12;padding:0!important;
  }
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot .c-ws-selection-card{
    display:block!important;padding:7px 8px!important;background:rgba(255,255,255,.95)!important;
  }
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot #c-ws-selection-body{
    white-space:normal;font-size:.63rem!important;max-width:none!important;
  }
  #demo4 .c-ws-plan #c-canvas-wrap > .c-ws-selection-slot .c-ws-selection-actions{
    display:flex!important;margin-top:5px!important;
  }
}


/* ================================================================
   CONFYRA STEP 50 – Premium Engineering / Report Layer
   ================================================================ */
#demo4 .c-site-field{
  fill:rgba(217,143,63,.055);
  stroke:#D98F3F;
  stroke-width:.065;
  stroke-dasharray:.28 .16;
  vector-effect:non-scaling-stroke;
}
#demo4 .c-site-label{
  fill:#8A571E;
  font-family:'IBM Plex Mono',monospace;
  font-weight:700;
  letter-spacing:.025em;
  pointer-events:none;
}
#demo4 .c-stair-id,#demo4 .c-stair-name{fill:#7A4A17;pointer-events:none;font-family:'IBM Plex Mono',monospace}
#demo4 .c-ws-site-tool{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 10px;
  border:1px solid #D7D2C6;border-radius:10px;background:#fff;color:var(--ink);
  font:650 .66rem 'IBM Plex Sans',sans-serif;cursor:pointer;white-space:nowrap;
}
#demo4 .c-ws-site-tool.is-active{border-color:#D98F3F;background:#FFF8EF;color:#7E4F1C}
#demo4 .c-ws-site-tool .dot{width:7px;height:7px;border-radius:50%;background:#A8ADB1}
#demo4 .c-ws-site-tool.is-active .dot{background:#D98F3F}
#demo4 .c-site-status{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 0;
  padding:7px 8px;border:1px solid #E0DDD2;border-radius:10px;background:#FCFBF7;
  font-size:.65rem;color:#5B6874;
}
#demo4 .c-site-status strong{color:var(--ink)}
#demo4 .c-site-status.is-error{border-color:#E5BDB0;background:#FFF4EF;color:#A0472B}
#demo4 .c-price-delta{
  position:absolute;right:0;top:-20px;display:inline-flex;padding:3px 7px;border-radius:999px;
  background:#FFF0DE;border:1px solid #E7BE8D;color:#84501A;
  font:700 .62rem 'IBM Plex Mono',monospace;opacity:0;transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease;pointer-events:none;
}
#demo4 .c-price-delta.show{opacity:1;transform:translateY(0)}
#demo4 .q-total{position:relative}
#demo4 #c-out-price{position:relative}

/* RAL swatches */
#demo4 [data-group="farbe"] .opt-btn{position:relative;padding-right:62px!important}
#demo4 .c-ral-swatch{
  position:absolute;right:31px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;border-radius:5px;border:1px solid rgba(20,24,28,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);cursor:zoom-in;
}
#demo4 .c-ral-preview-mark{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:.66rem;color:#65717C;
}
#demo4 .c-ral-note{font-size:.62rem;line-height:1.4;color:#75808A;margin:7px 1px 0}

/* generic premium overlays */
.cf-k4-overlay{
  position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(13,17,20,.66);backdrop-filter:blur(7px);
}
.cf-k4-overlay.active{display:flex}
.cf-k4-panel{
  width:min(1120px,96vw);max-height:92vh;overflow:auto;background:#fff;border:1px solid #D9D5CA;
  border-radius:18px;box-shadow:0 34px 90px rgba(0,0,0,.32);
}
.cf-k4-head{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 16px;border-bottom:1px solid #E2DED3;background:rgba(251,250,246,.96);backdrop-filter:blur(9px);
}
.cf-k4-head-copy span{display:block;font:650 .58rem 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase;color:#687581}
.cf-k4-head-copy strong{display:block;margin-top:2px;font-size:1rem;color:var(--ink)}
.cf-k4-close{width:34px;height:34px;border:1px solid #D7D2C6;border-radius:10px;background:#fff;cursor:pointer;font-size:1rem}
.cf-k4-body{padding:16px}

/* site modal */
.c-site-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.c-site-field-input label{display:block;margin-bottom:5px;font-size:.68rem;font-weight:700;color:#52606C}
.c-site-field-input input{width:100%;min-height:45px;border:1px solid #D7D2C6;border-radius:10px;padding:9px 11px;font:700 .86rem 'IBM Plex Mono',monospace}
.c-site-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.c-site-modal-actions button,.cf-report-actions button,.cf-drawing-actions button,.cf-timeline-actions button{
  min-height:38px;padding:8px 12px;border:1px solid #D7D2C6;border-radius:9px;background:#fff;color:var(--ink);font-weight:700;cursor:pointer
}
.c-site-modal-actions .is-primary,.cf-report-actions .is-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.c-site-help{margin:10px 0 0;font-size:.69rem;line-height:1.5;color:#687581}

/* premium drawing */
#cf-k4-drawing .cf-k4-panel{width:min(1240px,98vw);height:min(94vh,900px);overflow:hidden;display:flex;flex-direction:column}
.cf-drawing-toolbar{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid #E2DED3;background:#fff;
}
.cf-drawing-controls{display:flex;gap:12px;align-items:center;min-width:0;flex-wrap:wrap}
.cf-drawing-control{display:flex;align-items:center;gap:6px}
.cf-drawing-control>span{font:650 .56rem 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.07em;color:#6A7680}
.cf-segment{display:flex;padding:3px;border:1px solid #DAD6CB;border-radius:10px;background:#F6F4EE}
.cf-segment button{min-height:31px;padding:5px 9px;border:0;border-radius:7px;background:transparent;color:#52606B;font-size:.67rem;font-weight:700;cursor:pointer}
.cf-segment button.active{background:#fff;color:var(--ink);box-shadow:0 1px 5px rgba(20,24,28,.10)}
.cf-drawing-level{min-height:37px;border:1px solid #DAD6CB;border-radius:9px;background:#fff;padding:6px 28px 6px 9px;font-size:.7rem;font-weight:700;color:var(--ink)}
.cf-drawing-actions{display:flex;gap:6px;justify-content:flex-end}
.cf-drawing-canvas{flex:1;min-height:0;overflow:auto;background:#EAE8E0;padding:16px}
.cf-drawing-paper{width:min(100%,1020px);margin:auto;background:#fff;box-shadow:0 14px 32px rgba(20,24,28,.11)}
.cf-drawing-paper svg{display:block;width:100%;height:auto}
.cf-drawing-status{padding:7px 14px;border-bottom:1px solid #E2DED3;background:#FBFAF6;font-size:.67rem;color:#65717C}

/* timeline modal */
.cf-timeline-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.cf-timeline-step{position:relative;padding:13px;border:1px solid #E1DDD2;border-radius:13px;background:#FCFBF7}
.cf-timeline-step b{display:block;font-size:.78rem}
.cf-timeline-step span{display:block;margin-top:4px;font:650 .62rem 'IBM Plex Mono',monospace;color:#A46220}
.cf-timeline-step p{margin:6px 0 0;font-size:.68rem;line-height:1.45;color:#62707B}
#demo4 .c-timeline-expand{width:100%;margin-top:6px;min-height:34px;border:1px solid #DAD6CB;border-radius:9px;background:#fff;font-size:.66rem;font-weight:700;cursor:pointer}

/* facade visual */
.cf-facade-stage{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.6fr);gap:18px;align-items:center}
.cf-container-visual{position:relative;min-height:330px;border-radius:16px;background:linear-gradient(180deg,#F3F5F5,#E4E7E6);overflow:hidden;perspective:900px}
.cf-container-scene{position:absolute;inset:0;display:grid;place-items:center}
.cf-container-box{position:relative;width:min(68%,520px);height:150px;border:1px solid rgba(20,24,28,.25);box-shadow:18px 22px 40px rgba(20,24,28,.18);transform:skewY(-2deg)}
.cf-container-box::before{content:'';position:absolute;left:8%;right:8%;top:23%;bottom:24%;border:8px solid rgba(255,255,255,.45);background:linear-gradient(135deg,rgba(181,214,232,.85),rgba(92,135,160,.75));box-shadow:inset 0 0 0 2px rgba(20,24,28,.22)}
.cf-container-box::after{content:'';position:absolute;left:0;right:0;bottom:-15px;height:14px;background:#60676A;clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)}
.cf-container-ribs{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(20,24,28,.075) 26px 29px);pointer-events:none}
.cf-facade-meta h3{margin:0;font-size:1.35rem}
.cf-facade-meta p{font-size:.75rem;line-height:1.55;color:#5F6C78}
.cf-facade-swatch-large{width:100%;height:56px;border:1px solid rgba(20,24,28,.24);border-radius:12px;margin:12px 0}
.cf-facade-disclaimer{font-size:.62rem!important;color:#7C858D!important}

/* report */
#cf-k4-report .cf-k4-panel{width:min(1100px,97vw)}
.cf-report-actions{display:flex;gap:6px;flex-wrap:wrap}
.cf-report-document{padding:0;background:#F0EEE8}
.cf-report-page{width:min(900px,100%);margin:18px auto;padding:42px;background:#fff;box-shadow:0 10px 30px rgba(20,24,28,.08)}
.cf-report-hero{display:grid;grid-template-columns:1fr auto;gap:20px;padding-bottom:26px;border-bottom:2px solid #171B1F}
.cf-report-kicker{font:700 .62rem 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:#A46220}
.cf-report-hero h1{font-size:2rem;margin:6px 0}
.cf-report-projectno{text-align:right;font:700 .72rem 'IBM Plex Mono',monospace;color:#586571}
.cf-report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}
.cf-report-stat{padding:10px;border:1px solid #E1DDD2;border-radius:10px;background:#FBFAF6}
.cf-report-stat span{display:block;font-size:.59rem;text-transform:uppercase;letter-spacing:.06em;color:#75808A}
.cf-report-stat b{display:block;margin-top:3px;font-size:.82rem}
.cf-report-section{margin-top:26px}
.cf-report-section h2{font-size:1.05rem;margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid #DDD9CF}
.cf-report-table{width:100%;border-collapse:collapse;font-size:.72rem}
.cf-report-table td,.cf-report-table th{padding:7px 8px;border-bottom:1px solid #E5E1D7;text-align:left;vertical-align:top}
.cf-report-table th{font-size:.61rem;text-transform:uppercase;letter-spacing:.05em;color:#6C7882}
.cf-report-drawing{border:1px solid #DEDAD0;background:#fff}
.cf-report-drawing svg{width:100%;height:auto;display:block}
.cf-report-3d{width:100%;max-height:410px;object-fit:contain;background:#F2F2EE;border:1px solid #DEDAD0}
.cf-report-note{padding:10px 12px;border-left:3px solid #D98F3F;background:#FBF6EE;font-size:.68rem;line-height:1.5;color:#5E6B76}
.cf-report-footer{margin-top:30px;padding-top:10px;border-top:1px solid #DDD9CF;font-size:.62rem;color:#78828A}
.cf-project-file-input{display:none}

@media(max-width:760px){
  .cf-k4-overlay{padding:8px}
  .cf-k4-panel{border-radius:13px}
  .cf-drawing-toolbar{grid-template-columns:1fr}
  .cf-drawing-actions{justify-content:flex-start;overflow-x:auto}
  .cf-drawing-controls{display:grid;gap:7px}
  .cf-drawing-control{display:block}
  .cf-segment{overflow-x:auto}
  .cf-timeline-grid{grid-template-columns:1fr}
  .cf-facade-stage{grid-template-columns:1fr}
  .cf-container-visual{min-height:230px}
  .cf-report-page{padding:20px;margin:0}
  .cf-report-grid{grid-template-columns:1fr 1fr}
}
@media print{
  body.cf-k4-report-printing>*:not(#cf-k4-report){display:none!important}
  body.cf-k4-report-printing #cf-k4-report{
    position:static!important;display:block!important;background:#fff!important;padding:0!important;
  }
  body.cf-k4-report-printing #cf-k4-report .cf-k4-panel{width:100%!important;max-height:none!important;overflow:visible!important;border:0!important;box-shadow:none!important}
  body.cf-k4-report-printing #cf-k4-report .cf-k4-head{display:none!important}
  body.cf-k4-report-printing .cf-report-document{background:#fff!important}
  body.cf-k4-report-printing .cf-report-page{width:100%!important;margin:0!important;padding:12mm!important;box-shadow:none!important}
  body.cf-k4-report-printing .cf-report-section{break-inside:avoid}
  @page{size:A4 portrait;margin:0}
}


/* ================================================================
   STEP 52 – P0 FINAL PREMIUM PASS
   ================================================================ */
#demo4 .c-container-group.is-outside-site .c-container-rect,
#demo4 .c-stair-group.is-outside-site .c-stair-rect{
  stroke:#C4472D!important;stroke-width:.15!important;filter:drop-shadow(0 0 3px rgba(196,71,45,.34));
}
#demo4 .c-container-group.is-outside-site::after{content:''}

.cf-drawing-layers{position:relative}
.cf-drawing-layers>summary{
  list-style:none;min-height:37px;display:flex;align-items:center;padding:6px 10px;border:1px solid #DAD6CB;
  border-radius:9px;background:#fff;color:#25303A;font-size:.68rem;font-weight:700;cursor:pointer
}
.cf-drawing-layers>summary::-webkit-details-marker{display:none}
.cf-layer-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:190px;padding:8px;border:1px solid #D7D2C6;
  border-radius:11px;background:#fff;box-shadow:0 14px 34px rgba(20,24,28,.16)
}
.cf-layer-menu label{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:7px;font-size:.68rem;cursor:pointer}
.cf-layer-menu label:hover{background:#F7F4ED}
.cf-layer-menu input{accent-color:#D98F3F}

.cf-facade-nav{display:flex;gap:7px;margin-top:13px}
.cf-facade-nav button{flex:1;min-height:38px;border:1px solid #D7D2C6;border-radius:9px;background:#fff;font-weight:700;font-size:.67rem;cursor:pointer}
.cf-facade-nav button:hover{background:#F7F4ED}

.cf-report-document{padding:16px;background:#E8E6DF!important}
.cf-report-page{
  position:relative!important;width:min(900px,100%)!important;min-height:1120px!important;
  margin:0 auto 18px!important;padding:42px 42px 58px!important;background:#fff!important;
  box-shadow:0 12px 34px rgba(20,24,28,.09)!important;
}
.cf-report-pagehead{display:flex;justify-content:space-between;gap:20px;padding-bottom:11px;border-bottom:1px solid #171B1F}
.cf-report-pagehead span{display:block;font:700 .56rem 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#A46220}
.cf-report-pagehead h2{font-size:1.25rem;margin:4px 0 2px}
.cf-report-pagehead p{margin:0;font-size:.68rem;color:#67737D}
.cf-report-pagehead>b{font:700 .65rem 'IBM Plex Mono',monospace;color:#4E5A65}
.cf-report-pagefoot{
  position:absolute;left:42px;right:42px;bottom:22px;display:flex;justify-content:space-between;gap:12px;
  border-top:1px solid #DDD9CF;padding-top:7px;font:.56rem 'IBM Plex Mono',monospace;color:#77818A
}
.cf-report-cover-visual{margin:18px 0 12px}
.cf-report-split{display:grid;grid-template-columns:1.12fr .88fr;gap:16px;margin-top:18px}
.cf-report-split h3,.cf-report-section h3{font-size:.86rem;margin:0 0 8px}
.cf-report-ral-image{width:100%;height:250px;object-fit:cover;border:1px solid #DCD8CE;border-radius:10px}
.cf-report-ral-label{display:flex;align-items:center;gap:7px;margin-top:8px}
.cf-report-ral-label i{width:18px;height:18px;border-radius:5px;border:1px solid rgba(20,24,28,.3)}
.cf-report-small{font-size:.62rem;line-height:1.45;color:#6E7982}
.cf-report-floor-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.cf-report-mini-drawing{border:1px solid #DDD9CF;background:#fff;overflow:hidden}
.cf-report-mini-drawing svg{display:block;width:100%;height:auto}
.cf-report-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.cf-report-flow span{padding:9px;border:1px solid #DDD9CF;border-radius:8px;background:#FBFAF6;font-size:.65rem;font-weight:700}

#demo4 .c-ws-site-tool{transition:border-color .15s ease,background .15s ease,transform .15s ease}
#demo4 .c-ws-site-tool:hover{transform:translateY(-1px)}

@media(max-width:1080px){
  #cf-k4-drawing .cf-drawing-toolbar{grid-template-columns:1fr}
  #cf-k4-drawing .cf-drawing-actions{justify-content:flex-start}
}
@media(max-width:700px){
  .cf-report-document{padding:0}
  .cf-report-page{min-height:0!important;margin:0 0 8px!important;padding:18px 14px 28px!important;box-shadow:none!important}
  .cf-report-pagefoot{position:static;left:auto;right:auto;bottom:auto;margin-top:20px;display:block;line-height:1.6}
  .cf-report-split,.cf-report-floor-grid{grid-template-columns:1fr}
  .cf-report-flow{grid-template-columns:1fr 1fr}
  .cf-report-ral-image{height:auto}
  .cf-layer-menu{position:fixed;left:10px;right:10px;top:auto;bottom:10px;min-width:0}
  #cf-k4-drawing .cf-drawing-toolbar{padding:8px}
  #cf-k4-drawing .cf-drawing-control{min-width:0}
  #cf-k4-drawing .cf-segment{display:flex;overflow:auto;white-space:nowrap}
}
@media print{
  body.cf-k4-report-printing .cf-report-page{
    width:210mm!important;min-height:297mm!important;margin:0!important;padding:12mm 12mm 17mm!important;
    box-shadow:none!important;break-after:page;page-break-after:always
  }
  body.cf-k4-report-printing .cf-report-page:last-child{break-after:auto;page-break-after:auto}
  body.cf-k4-report-printing .cf-report-pagefoot{left:12mm;right:12mm;bottom:7mm}
  body.cf-k4-report-printing .cf-report-document{padding:0!important}
}


/* ================================================================
   CONFYRA STEP 53–58 · ENGINEERING SUITE
   Standard = schnell verstehen · Engineering = technisch vertiefen
   ================================================================ */
.cf-eng-btn{
  min-height:38px;padding:8px 11px;border:1px solid #CFCABD;border-radius:9px;background:#fff;
  color:#1B2329;font:700 .68rem 'IBM Plex Sans',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease
}
.cf-eng-btn:hover{transform:translateY(-1px);border-color:#9EA8AD;box-shadow:0 6px 18px rgba(20,24,28,.07)}
.cf-eng-btn.is-dark{background:#172127;color:#F4F4F0;border-color:#172127}
.cf-eng-dot{width:7px;height:7px;border-radius:50%;background:#D98F3F;box-shadow:0 0 0 3px rgba(217,143,63,.13)}
.cf-p0-overlay{position:fixed;inset:0;z-index:10150;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(10,14,17,.68);backdrop-filter:blur(8px)}
.cf-p0-overlay.active{display:flex}
.cf-p0-panel{width:min(1160px,96vw);max-height:92vh;overflow:auto;background:#FBFAF6;border:1px solid #D7D2C6;border-radius:18px;box-shadow:0 34px 90px rgba(0,0,0,.34)}
.cf-p0-head{position:sticky;top:0;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid #DDD8CD;background:rgba(251,250,246,.96);backdrop-filter:blur(10px)}
.cf-p0-head small{display:block;font:700 .56rem 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:#A46220}.cf-p0-head strong{display:block;margin-top:2px;font-size:1rem}.cf-p0-close{width:35px;height:35px;border:1px solid #D7D2C6;border-radius:10px;background:#fff;cursor:pointer}.cf-p0-body{padding:16px}
.cf-p0-tabs{display:flex;gap:5px;flex-wrap:wrap;padding:4px;border:1px solid #D9D5CA;background:#F1EFE8;border-radius:11px}.cf-p0-tabs button{min-height:34px;border:0;border-radius:8px;background:transparent;padding:6px 10px;font-size:.68rem;font-weight:700;color:#64717B;cursor:pointer}.cf-p0-tabs button.active{background:#fff;color:#172127;box-shadow:0 1px 5px rgba(20,24,28,.1)}
.cf-p0-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.cf-p0-card{border:1px solid #DDD8CD;background:#fff;border-radius:13px;padding:13px}.cf-p0-card h4{margin:0 0 8px;font-size:.86rem}.cf-p0-card p{margin:0;color:#66737D;font-size:.69rem;line-height:1.5}
.cf-p0-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.cf-p0-stat{padding:9px;border:1px solid #DDD8CD;border-radius:10px;background:#fff}.cf-p0-stat span{display:block;font:.58rem 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.05em;color:#74808A}.cf-p0-stat b{display:block;margin-top:3px;font-size:.83rem}
.cf-p0-table{width:100%;border-collapse:collapse;font-size:.7rem}.cf-p0-table th,.cf-p0-table td{padding:7px 8px;border-bottom:1px solid #E4E0D6;text-align:left;vertical-align:top}.cf-p0-table th{font:.58rem 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.05em;color:#6D7881}.cf-p0-note{padding:10px 11px;border-left:3px solid #D98F3F;background:#FBF5EC;color:#5D6973;font-size:.66rem;line-height:1.5}.cf-p0-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.cf-p0-actions button{min-height:38px;padding:8px 11px;border:1px solid #D4CFC3;border-radius:9px;background:#fff;font-size:.68rem;font-weight:700;cursor:pointer}.cf-p0-actions button.primary{background:#172127;border-color:#172127;color:#fff}

/* K1 */
#demo .k1-engineering-entry{margin-left:auto}.cf-k1-code-btn{width:100%;margin-top:7px}.cf-k1-eng-visual{min-height:330px;display:grid;place-items:center;background:linear-gradient(180deg,#F8F8F5,#EEECE5);border:1px solid #DDD8CD;border-radius:13px}.cf-k1-eng-visual svg{width:90%;max-height:310px}.cf-k1-layer-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.cf-k1-layer-buttons button{min-height:38px;border:1px solid #D8D3C7;background:#fff;border-radius:9px;font-size:.66rem;font-weight:700;cursor:pointer;text-align:left}.cf-k1-layer-buttons button:hover{border-color:#D98F3F}.cf-k1-sheet{background:#fff}.cf-k1-sheet-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px;align-items:center}.cf-k1-sheet-img{min-height:270px;background:#F0F1EE;border:1px solid #DDD8CD;border-radius:12px;display:grid;place-items:center;overflow:hidden}.cf-k1-sheet-img img{width:100%;height:100%;max-height:330px;object-fit:contain}.cf-k1-sheet-code{font:700 .8rem 'IBM Plex Mono',monospace;padding:8px 10px;background:#172127;color:#fff;border-radius:8px;display:inline-block}

/* K2 */
#demo2 .k2-result-head-actions{display:flex;gap:7px;flex-wrap:wrap}.cf-k2-eng-chart{border:1px solid #DCD7CB;background:#fff;border-radius:12px;padding:8px}.cf-k2-eng-chart svg{display:block;width:100%;height:auto}.cf-k2-op-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cf-k2-op{padding:11px;border:1px solid #DDD8CD;border-radius:10px;background:#fff}.cf-k2-op.ok{border-left:4px solid #3F8F5F}.cf-k2-op.warn{border-left:4px solid #D98F3F}.cf-k2-op.bad{border-left:4px solid #C55A4D}.cf-k2-op small{font:700 .55rem 'IBM Plex Mono',monospace;text-transform:uppercase;color:#74808A}.cf-k2-op b{display:block;margin-top:3px;font-size:.78rem}.cf-k2-op span{display:block;margin-top:4px;font-size:.64rem;color:#68747E}.cf-k2-load-row{display:grid;grid-template-columns:120px 1fr 90px;gap:9px;align-items:center;margin:8px 0}.cf-k2-load-bar{height:9px;background:#E8E5DC;border-radius:999px;overflow:hidden}.cf-k2-load-bar i{display:block;height:100%;background:#4C6B8A}.cf-k2-range{position:relative;height:16px;background:#E5E2D9;border-radius:999px;margin:16px 0 8px}.cf-k2-range .covered{position:absolute;inset:0 auto 0 0;background:#BFD0DE;border-radius:999px}.cf-k2-range .recommended{position:absolute;top:2px;bottom:2px;background:#4C6B8A;border-radius:999px}.cf-k2-range .point{position:absolute;top:-5px;width:3px;height:26px;background:#D98F3F}

/* K3 */
#demo3 .k4-toolbar{align-items:center}.cf-k3-quality{margin:0 0 12px;padding:11px 12px;border:1px solid #D9D5CA;border-radius:11px;background:#FBFAF6;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.cf-k3-quality-ring{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:4px solid #3F8F5F;font:700 .62rem 'IBM Plex Mono',monospace}.cf-k3-quality strong{display:block;font-size:.76rem}.cf-k3-quality span{display:block;margin-top:2px;font-size:.63rem;color:#6C7882}.cf-k3-quality code{font:700 .62rem 'IBM Plex Mono',monospace;color:#56636E}.cf-k3-map-wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.55fr);gap:13px}.cf-k3-map{background:#fff;border:1px solid #DCD7CB;border-radius:13px;padding:8px;overflow:hidden}.cf-k3-map svg{width:100%;height:auto;display:block}.cf-k3-map-side{display:grid;gap:8px;align-content:start}.cf-k3-legend{display:grid;grid-template-columns:1fr 1fr;gap:5px}.cf-k3-legend span{font-size:.62rem;color:#65717B}.cf-k3-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}

@media(max-width:780px){.cf-p0-overlay{padding:7px;align-items:flex-end}.cf-p0-panel{width:100%;max-height:94vh;border-radius:15px 15px 0 0}.cf-p0-grid,.cf-k1-sheet-hero,.cf-k3-map-wrap{grid-template-columns:1fr}.cf-p0-stats{grid-template-columns:1fr 1fr}.cf-k2-op-list{grid-template-columns:1fr}.cf-k2-load-row{grid-template-columns:92px 1fr 70px}.cf-k3-quality{grid-template-columns:auto 1fr}.cf-k3-quality code{grid-column:1/-1}}


/* =====================================================================
   STEP 59 · CONFYRA DIGITAL EXPERIENCE CENTER
   Premium architectural 3D showroom foundation
   ===================================================================== */






.cf-showroom-overline{font:700 .63rem 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:#D98F3F}







body.cf-showroom-open{overflow:hidden!important}
.cf-showroom{position:fixed;inset:0;z-index:12000;display:none;background:#080C0F;color:#F3F1EC}
.cf-showroom.active{display:block}.cf-showroom[aria-hidden="false"]{display:block}
.cf-showroom-stage{position:relative;width:100%;height:100%;overflow:hidden;background:#080C0F}
.cf-showroom-canvas-wrap,.cf-showroom-mount{position:absolute;inset:0}.cf-showroom-mount canvas{display:block;width:100%!important;height:100%!important;touch-action:none;cursor:grab}.cf-showroom-mount canvas:active{cursor:grabbing}
.cf-showroom-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,7,9,.32),transparent 20%,transparent 70%,rgba(4,7,9,.5)),radial-gradient(circle at 50% 45%,transparent 35%,rgba(4,7,9,.23) 100%)}
.cf-showroom-loading{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0A0F12;transition:opacity .5s ease,visibility .5s ease}.cf-showroom-loading.is-done{opacity:0;visibility:hidden}
.cf-showroom-loading span{width:44px;height:44px;border:2px solid #34414A;border-top-color:#D98F3F;border-radius:50%;animation:cfSrSpin 1s linear infinite}.cf-showroom-loading strong{margin-top:18px;font:600 .94rem 'Space Grotesk',sans-serif}.cf-showroom-loading small{margin-top:5px;color:#7F8C95;font:.61rem 'IBM Plex Mono',monospace;letter-spacing:.06em}@keyframes cfSrSpin{to{transform:rotate(360deg)}}

.cf-showroom-bar{position:absolute;top:0;left:0;right:0;z-index:12;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:13px 18px;border-bottom:1px solid rgba(195,205,211,.16);background:rgba(8,12,15,.78);backdrop-filter:blur(18px)}
.cf-showroom-brand{display:flex;align-items:center;gap:10px;min-width:240px}.cf-showroom-monogram{display:grid;place-items:center;width:34px;height:34px;border:1px solid #765128;background:#D98F3F;color:#11161A;font:800 1rem 'Space Grotesk',sans-serif}.cf-showroom-brand strong{display:block;font:700 .76rem 'Space Grotesk',sans-serif;letter-spacing:.14em}.cf-showroom-brand small{display:block;margin-top:1px;color:#86939C;font:.51rem 'IBM Plex Mono',monospace;letter-spacing:.03em}
.cf-showroom-zone-nav{display:flex;justify-content:center;gap:3px;min-width:0}.cf-showroom-zone-nav button,.cf-showroom-mode button,.cf-showroom-tour,.cf-showroom-close{border:0;background:transparent;color:#9AA7AF;font:650 .63rem 'IBM Plex Sans',sans-serif;cursor:pointer;white-space:nowrap}.cf-showroom-zone-nav button{min-height:36px;padding:7px 11px;border-radius:999px}.cf-showroom-zone-nav button:hover,.cf-showroom-zone-nav button.active{background:rgba(255,255,255,.075);color:#F6F3EE}.cf-showroom-zone-nav button.active::before{content:'';display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:#D98F3F;vertical-align:1px;box-shadow:0 0 10px rgba(217,143,63,.7)}
.cf-showroom-actions{display:flex;align-items:center;gap:7px}.cf-showroom-mode{display:flex;padding:3px;border:1px solid rgba(190,201,208,.18);border-radius:999px;background:rgba(255,255,255,.035)}.cf-showroom-mode button{min-height:30px;padding:4px 9px;border-radius:999px}.cf-showroom-mode button.active{background:#F1EEE8;color:#151A1E}.cf-showroom-tour{min-height:36px;padding:7px 11px;border:1px solid rgba(217,143,63,.42);border-radius:999px!important;color:#F0B26B!important;background:rgba(217,143,63,.065)!important}.cf-showroom-tour:hover{background:rgba(217,143,63,.13)!important}.cf-showroom-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.14);border-radius:50%;font-size:1.1rem;color:#EAE7E1}.cf-showroom-close:hover{background:rgba(255,255,255,.08)}

.cf-showroom-context{position:absolute;left:22px;bottom:54px;z-index:10;width:min(370px,calc(100vw - 44px));padding:17px 18px 16px;border:1px solid rgba(190,201,208,.2);background:rgba(9,14,17,.78);backdrop-filter:blur(16px);box-shadow:0 18px 45px rgba(0,0,0,.22)}
.cf-showroom-context-kicker,.cf-showroom-product-kicker,.cf-showroom-reader-kicker{font:700 .54rem 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:#D98F3F}.cf-showroom-context h2{margin:5px 0 7px;font:600 1.18rem 'Space Grotesk',sans-serif}.cf-showroom-context p{margin:0;color:#A5B0B7;font-size:.72rem;line-height:1.5}.cf-showroom-context-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:11px}.cf-showroom-context-meta span{padding:4px 7px;border:1px solid rgba(190,201,208,.16);font:.5rem 'IBM Plex Mono',monospace;color:#B7C0C6;background:rgba(255,255,255,.035)}

.cf-showroom-product{position:absolute;right:20px;top:88px;z-index:13;width:min(350px,calc(100vw - 40px));padding:20px;border:1px solid rgba(190,201,208,.22);background:rgba(9,14,17,.88);backdrop-filter:blur(20px);box-shadow:0 24px 60px rgba(0,0,0,.36)}
.cf-showroom-product[hidden]{display:none}.cf-showroom-product-close,.cf-showroom-reader-close{position:absolute;right:10px;top:10px;width:30px;height:30px;border:1px solid rgba(255,255,255,.13);border-radius:50%;background:transparent;color:#D9DFE3;cursor:pointer}.cf-showroom-product h3{margin:7px 0 2px;font:600 1.65rem 'Space Grotesk',sans-serif;letter-spacing:-.035em}.cf-showroom-product>p:first-of-type{margin:0;color:#C7CED3;font-size:.72rem}.cf-showroom-product-copy{margin:13px 0 0!important;color:#89969F!important;font-size:.69rem!important;line-height:1.5}.cf-showroom-product-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:14px}.cf-showroom-product-metrics span{padding:8px 7px;border:1px solid rgba(190,201,208,.15);background:rgba(255,255,255,.035)}.cf-showroom-product-metrics b{display:block;font:.72rem 'Space Grotesk',sans-serif;color:#F1EEE8}.cf-showroom-product-metrics small{display:block;margin-top:2px;color:#73818B;font:.46rem 'IBM Plex Mono',monospace}.cf-showroom-product-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:15px}.cf-showroom-product-actions button{min-height:39px;border:1px solid rgba(190,201,208,.18);background:#141C21;color:#E8E5DF;font-size:.62rem;font-weight:700;cursor:pointer}.cf-showroom-product-actions button:first-child{grid-column:1/-1;background:#D98F3F;border-color:#D98F3F;color:#101519}.cf-showroom-product-actions button:hover{filter:brightness(1.08)}

.cf-showroom-reader{position:absolute;z-index:16;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:260px minmax(350px,550px);width:min(860px,calc(100vw - 36px));min-height:430px;border:1px solid rgba(197,205,211,.24);background:#F1EEE8;color:#161B1F;box-shadow:0 35px 100px rgba(0,0,0,.55)}.cf-showroom-reader[hidden]{display:none}.cf-showroom-reader-close{z-index:4;color:#222;border-color:#CAC5BB}.cf-showroom-reader-cover{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;background:linear-gradient(145deg,#182127,#0F1418);color:#F2EFE8;overflow:hidden}.cf-showroom-reader-cover::before{content:'';position:absolute;inset:22px;border:1px solid rgba(217,143,63,.44)}.cf-showroom-reader-cover::after{content:'';position:absolute;width:180px;height:180px;right:-65px;top:20px;border:1px solid rgba(217,143,63,.3);border-radius:50%;box-shadow:0 0 0 30px rgba(217,143,63,.03),0 0 0 60px rgba(217,143,63,.02)}.cf-showroom-reader-cover span{position:absolute;left:28px;top:30px;font:700 .61rem 'IBM Plex Mono',monospace;letter-spacing:.13em;color:#D98F3F}.cf-showroom-reader-cover strong{position:relative;font:600 1.45rem/1.05 'Space Grotesk',sans-serif}.cf-showroom-reader-cover small{position:relative;margin-top:6px;color:#9EABB3;font:.55rem 'IBM Plex Mono',monospace}.cf-showroom-reader-body{padding:32px 28px}.cf-showroom-reader-body h3{margin:6px 0 8px;font:600 1.45rem 'Space Grotesk',sans-serif}.cf-showroom-reader-body>p{margin:0;color:#63707A;font-size:.72rem;line-height:1.5}.cf-showroom-reader-pages{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:19px}.cf-showroom-reader-pages span{padding:11px;border:1px solid #D7D2C8;background:#FAF9F5;font-size:.65rem}.cf-showroom-reader-pages b{display:block;margin-bottom:2px}.cf-showroom-reader-jump{margin-top:18px;min-height:42px;padding:8px 13px;border:0;background:#171D21;color:#fff;font-weight:700;cursor:pointer}

.cf-showroom-hint{position:absolute;left:50%;bottom:18px;z-index:9;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:7px 11px;background:rgba(8,12,15,.64);border:1px solid rgba(190,201,208,.13);backdrop-filter:blur(10px);color:#75828B;font:.49rem 'IBM Plex Mono',monospace}.cf-showroom-hint span{color:#D4DADF}.cf-showroom-hint i{width:3px;height:3px;border-radius:50%;background:#D98F3F}
.cf-showroom-tour-progress{position:absolute;left:50%;bottom:18px;z-index:15;transform:translateX(-50%);display:grid;grid-template-columns:86px minmax(240px,440px) auto;gap:12px;align-items:center;padding:9px 11px;border:1px solid rgba(217,143,63,.28);background:rgba(8,12,15,.88);backdrop-filter:blur(18px)}.cf-showroom-tour-progress[hidden]{display:none}.cf-showroom-tour-progress>span{display:block;height:3px;background:linear-gradient(90deg,#D98F3F var(--progress,0%),#303940 var(--progress,0%));transition:background .35s}.cf-showroom-tour-progress strong{display:block;font-size:.65rem}.cf-showroom-tour-progress small{display:block;margin-top:2px;color:#84919A;font-size:.52rem}.cf-showroom-tour-progress button{border:0;background:transparent;color:#D98F3F;font-size:.57rem;font-weight:700;cursor:pointer}
.cf-showroom-engineering-legend{position:absolute;right:20px;bottom:56px;z-index:10;width:280px;padding:12px 13px;border-left:2px solid #D98F3F;background:rgba(8,12,15,.76);backdrop-filter:blur(14px)}.cf-showroom-engineering-legend[hidden]{display:none}.cf-showroom-engineering-legend span{display:block;font:.52rem 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#D98F3F}.cf-showroom-engineering-legend b{display:block;margin-top:4px;font-size:.66rem}.cf-showroom-engineering-legend small{display:block;margin-top:4px;color:#76858F;font-size:.52rem;line-height:1.35}

@media(max-width:1050px){
  .cf-showroom-bar{grid-template-columns:auto 1fr auto}.cf-showroom-zone-nav{position:absolute;left:50%;top:58px;transform:translateX(-50%);padding:4px;background:rgba(8,12,15,.72);border:1px solid rgba(190,201,208,.13);backdrop-filter:blur(14px)}
  .cf-showroom-brand{min-width:0}.cf-showroom-brand small{display:none}.cf-showroom-context{bottom:54px}.cf-showroom-product{top:112px}
}
@media(max-width:760px){
  
  .cf-showroom-bar{padding:9px 10px}.cf-showroom-brand div{display:none}.cf-showroom-zone-nav{left:8px;right:8px;transform:none;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.cf-showroom-zone-nav button{min-height:34px}.cf-showroom-actions{gap:4px}.cf-showroom-mode button{padding:4px 7px}.cf-showroom-tour{display:none}.cf-showroom-close{width:34px;height:34px}
  .cf-showroom-context{left:10px;right:10px;bottom:48px;width:auto;padding:12px}.cf-showroom-context-meta{display:none}.cf-showroom-context h2{font-size:1rem}.cf-showroom-context p{font-size:.65rem}
  .cf-showroom-product{left:10px;right:10px;top:auto;bottom:10px;width:auto;padding:16px}.cf-showroom-product-metrics{grid-template-columns:repeat(3,1fr)}.cf-showroom-product h3{font-size:1.3rem}.cf-showroom-product-copy{display:none}.cf-showroom-hint,.cf-showroom-engineering-legend{display:none!important}
  .cf-showroom-reader{grid-template-columns:1fr;width:calc(100vw - 20px);max-height:88vh;overflow:auto}.cf-showroom-reader-cover{min-height:190px}.cf-showroom-reader-body{padding:22px 18px}.cf-showroom-reader-pages{grid-template-columns:1fr}
  .cf-showroom-tour-progress{left:10px;right:10px;bottom:10px;transform:none;grid-template-columns:60px 1fr}.cf-showroom-tour-progress button{grid-column:1/-1;text-align:right}
}
@media(prefers-reduced-motion:reduce){.cf-showroom-loading{transition:none!important}.cf-showroom-loading span{animation:none}}


/* ================================================================
   STEP 60 — HERO PRODUCT QUALITY / PREMIUM EXHIBITION PASS
   ================================================================ */
.cf-showroom-product-actions button[data-sr-product-action="experience"]{position:relative;overflow:hidden;background:linear-gradient(135deg,#D98F3F,#EAA85F)!important;color:#101519!important}
.cf-showroom-product-actions button[data-sr-product-action="experience"]::after{content:'';position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent)}
.cf-showroom-product-actions button[data-sr-product-action="experience"].is-running::after{animation:cfSrMotionSweep 1.55s linear infinite}
@keyframes cfSrMotionSweep{to{transform:translateX(110%)}}
.cf-showroom-product::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#D98F3F,rgba(217,143,63,.08))}
.cf-showroom-product{border-color:rgba(217,143,63,.25)!important;background:linear-gradient(180deg,rgba(10,15,18,.94),rgba(8,13,16,.88))!important}
.cf-showroom-context{border-color:rgba(217,143,63,.18)!important}


@media(max-width:720px){}


/* ================================================================
   STEP 63 · Energy Worlds + Manual Exterior Doors
   ================================================================ */
#demo4 .c3-door-tools{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px;padding:8px 9px;
  border:1px solid #DDD8CC;border-radius:10px;background:#FAF9F5
}
#demo4 .c3-door-tools button{
  min-height:34px;border:1px solid #CFCABD;border-radius:8px;background:#fff;color:#172127;
  padding:6px 9px;font-size:.66rem;font-weight:750;cursor:pointer
}
#demo4 .c3-door-tools button.active{background:#172127;color:#fff;border-color:#172127}
#demo4 .c3-door-tools p{flex:1 1 280px;margin:0;font-size:.62rem;line-height:1.45;color:#69757E}
#demo4 .c3-door-list{display:flex;gap:5px;flex-wrap:wrap;width:100%}
#demo4 .c3-door-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border:1px solid #DDD8CC;border-radius:999px;background:#fff;font:700 .58rem 'IBM Plex Mono',monospace}
#demo4 .c3-door-chip button{min-height:22px;padding:1px 5px;border:0;background:transparent;color:#A94F36}
#demo4 .c3-door-place-note{color:#8B5720!important;font-weight:700}
@media(max-width:640px){#demo4 .c3-door-tools{align-items:stretch}#demo4 .c3-door-tools button{flex:1}}

confyra-simulations{--cf-step63:1}


/* ================================================================
   STEP 64 · Digital Experience Center Pro
   Knowledge Lounge · Portfolio Wall · Projektmappe · Live Factory
   Presentation / Exhibition modes · Product Families
   ================================================================ */
.cf-showroom-top-extra{display:flex;align-items:center;gap:5px}
.cf-showroom-top-extra button{
  min-height:34px;border:1px solid rgba(193,202,208,.18);border-radius:999px;
  background:rgba(255,255,255,.035);color:#BAC4CA;padding:6px 10px;
  font:700 .58rem 'IBM Plex Sans',sans-serif;cursor:pointer;white-space:nowrap
}
.cf-showroom-top-extra button:hover,.cf-showroom-top-extra button.active{
  background:rgba(217,143,63,.11);border-color:rgba(217,143,63,.45);color:#F0B26B
}
.cf-sr-overlay{
  position:absolute;inset:76px 18px 18px;z-index:28;display:grid;place-items:center;
  background:rgba(6,9,11,.48);backdrop-filter:blur(9px)
}
.cf-sr-overlay[hidden]{display:none}
.cf-sr-modal{
  width:min(980px,96vw);max-height:82vh;overflow:auto;border:1px solid rgba(190,201,208,.23);
  background:#F3F0E9;color:#172127;box-shadow:0 35px 110px rgba(0,0,0,.55)
}
.cf-sr-modal-head{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid #D8D3C8;background:rgba(243,240,233,.97);backdrop-filter:blur(12px)
}
.cf-sr-modal-head small{display:block;font:800 .55rem 'IBM Plex Mono',monospace;letter-spacing:.11em;text-transform:uppercase;color:#A46220}
.cf-sr-modal-head h3{margin:3px 0 0;font:650 1.12rem 'Space Grotesk',sans-serif}
.cf-sr-modal-close{width:34px;height:34px;border:1px solid #CFC9BD;border-radius:50%;background:#fff;color:#172127;font-size:1rem;cursor:pointer}
.cf-sr-modal-body{padding:16px}
.cf-sr-project-grid,.cf-sr-portfolio-grid,.cf-sr-family-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.cf-sr-project-card,.cf-sr-portfolio-card,.cf-sr-family-card{
  min-height:138px;padding:13px;border:1px solid #D8D3C8;background:#FBFAF6;position:relative
}
.cf-sr-project-card small,.cf-sr-portfolio-card small,.cf-sr-family-card small{
  display:block;font:800 .51rem 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:#8A6A47
}
.cf-sr-project-card h4,.cf-sr-portfolio-card h4,.cf-sr-family-card h4{margin:5px 0 5px;font:650 .95rem 'Space Grotesk',sans-serif}
.cf-sr-project-card p,.cf-sr-portfolio-card p,.cf-sr-family-card p{margin:0;color:#68747D;font-size:.65rem;line-height:1.45}
.cf-sr-project-card-actions,.cf-sr-modal-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cf-sr-project-card button,.cf-sr-modal-actions button,.cf-sr-family-card button,.cf-sr-portfolio-card button{
  min-height:34px;border:1px solid #D0CBC0;background:#fff;color:#172127;padding:6px 8px;font-size:.61rem;font-weight:750;cursor:pointer
}
.cf-sr-project-card button.primary,.cf-sr-modal-actions button.primary,.cf-sr-family-card button.primary,.cf-sr-portfolio-card button.primary{background:#172127;color:#fff;border-color:#172127}
.cf-sr-project-empty{padding:28px;border:1px dashed #CBC5B8;text-align:center;color:#6C7881}
.cf-sr-project-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:0 0 12px}
.cf-sr-project-summary span{padding:9px;border:1px solid #D8D3C8;background:#FBFAF6}
.cf-sr-project-summary small{display:block;font:.49rem 'IBM Plex Mono',monospace;text-transform:uppercase;color:#7D898F}
.cf-sr-project-summary b{display:block;margin-top:3px;font-size:.78rem}

.cf-sr-portfolio-card{cursor:pointer;min-height:155px;overflow:hidden}
.cf-sr-portfolio-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:#D98F3F;opacity:.55}
.cf-sr-portfolio-card .metric{display:inline-flex;margin-top:9px;padding:4px 6px;border:1px solid #DED9CF;background:#fff;font:.52rem 'IBM Plex Mono',monospace;color:#5E6B75}

.cf-sr-presentation{
  position:absolute;left:18px;top:82px;z-index:25;width:230px;border:1px solid rgba(190,201,208,.2);
  background:rgba(9,14,17,.88);backdrop-filter:blur(17px);box-shadow:0 24px 60px rgba(0,0,0,.33)
}
.cf-sr-presentation[hidden]{display:none}
.cf-sr-presentation-head{padding:11px 12px;border-bottom:1px solid rgba(190,201,208,.15)}
.cf-sr-presentation-head small{font:800 .5rem 'IBM Plex Mono',monospace;color:#D98F3F;letter-spacing:.09em;text-transform:uppercase}
.cf-sr-presentation-head strong{display:block;margin-top:3px;font-size:.78rem}
.cf-sr-presentation-list{display:grid;padding:5px}
.cf-sr-presentation-list button{
  min-height:38px;border:0;background:transparent;color:#9EABB2;text-align:left;padding:7px 8px;cursor:pointer;font-size:.62rem
}
.cf-sr-presentation-list button:hover,.cf-sr-presentation-list button.active{background:rgba(255,255,255,.06);color:#fff}
.cf-sr-presentation-foot{display:flex;gap:5px;padding:7px;border-top:1px solid rgba(190,201,208,.15)}
.cf-sr-presentation-foot button{flex:1;min-height:34px;border:1px solid rgba(190,201,208,.16);background:#151D22;color:#DDE2E5;font-size:.58rem;font-weight:750;cursor:pointer}

.cf-showroom.cf-sr-presentation-mode .cf-showroom-context{display:none}
.cf-showroom.cf-sr-presentation-mode .cf-showroom-zone-nav{opacity:.32}
.cf-showroom.cf-sr-exhibition-mode .cf-showroom-bar{padding:17px 22px}
.cf-showroom.cf-sr-exhibition-mode .cf-showroom-zone-nav button,
.cf-showroom.cf-sr-exhibition-mode .cf-showroom-actions button,
.cf-showroom.cf-sr-exhibition-mode .cf-showroom-top-extra button{min-height:48px;font-size:.72rem;padding-inline:15px}
.cf-showroom.cf-sr-exhibition-mode .cf-showroom-context{width:430px;padding:22px}
.cf-showroom.cf-sr-exhibition-mode .cf-showroom-hint{display:none}

.cf-sr-reader-tools{display:flex;gap:6px;margin:13px 0 8px}
.cf-sr-reader-tools input{
  flex:1;min-height:36px;border:1px solid #D3CEC2;background:#fff;padding:7px 9px;font-size:.67rem
}
.cf-showroom-reader-pages span.is-hidden{display:none}
.cf-showroom-reader-pages span[data-sr-page-product]{cursor:pointer;transition:background .15s ease,border-color .15s ease}
.cf-showroom-reader-pages span[data-sr-page-product]:hover{background:#FFF5E9;border-color:#D7A66D}

.cf-sr-lounge-badge{
  position:absolute;right:22px;bottom:52px;z-index:9;max-width:290px;padding:10px 11px;
  border:1px solid rgba(217,143,63,.31);background:rgba(10,15,18,.78);backdrop-filter:blur(12px);
  color:#ABB6BD;font-size:.61rem;line-height:1.45
}
.cf-sr-lounge-badge strong{display:block;color:#F2EEE7;margin-bottom:3px}
.cf-sr-lounge-badge[hidden]{display:none}

.cf-sr-factory-status{
  position:absolute;right:20px;bottom:55px;z-index:11;width:min(340px,calc(100vw - 40px));
  padding:12px;border:1px solid rgba(84,182,200,.32);background:rgba(8,14,17,.86);backdrop-filter:blur(13px)
}
.cf-sr-factory-status[hidden]{display:none}
.cf-sr-factory-status small{font:800 .5rem 'IBM Plex Mono',monospace;color:#54B6C8;letter-spacing:.09em;text-transform:uppercase}
.cf-sr-factory-status h4{margin:4px 0;font-size:.86rem}
.cf-sr-factory-status p{margin:0;color:#95A3AC;font-size:.62rem;line-height:1.45}
.cf-sr-factory-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}
.cf-sr-factory-kpis span{padding:6px;border:1px solid rgba(190,201,208,.13);background:rgba(255,255,255,.03)}
.cf-sr-factory-kpis b{display:block;font-size:.69rem}.cf-sr-factory-kpis small{font-size:.43rem;color:#73818B}

@media(max-width:980px){
  .cf-showroom-top-extra{display:none}
  .cf-sr-project-grid,.cf-sr-portfolio-grid,.cf-sr-family-grid{grid-template-columns:1fr 1fr}
  .cf-sr-presentation{top:116px}
}
@media(max-width:650px){
  .cf-sr-overlay{inset:96px 7px 7px}
  .cf-sr-project-grid,.cf-sr-portfolio-grid,.cf-sr-family-grid{grid-template-columns:1fr}
  .cf-sr-project-summary{grid-template-columns:1fr 1fr}
  .cf-sr-modal-body{padding:10px}
  .cf-sr-presentation{left:7px;right:7px;top:102px;width:auto}
  .cf-sr-factory-status{left:8px;right:8px;bottom:44px;width:auto}
}