/* Einheitliche Bausteine nach dem Design-System-Plan, Kapitel 7 (24.10.2026).
   Wird nach allen anderen Stildateien geladen. Hier stehen nur Aussehen und Zustände
   (Farbe, Rahmen, Rundung, Schatten, Fokus, deaktiviert). Größen, Abstände und
   Schriftgrößen bleiben bei den Bildschirmen, damit kein Layout verrutscht. */
:root{
 --color-ground:#f5f6f8;--color-surface:#fff;--color-line:#e3e6ea;--color-line-strong:#d5dae0;
 --color-ink:#1f2933;--color-muted:#5b6672;
 --color-primary:#47627f;--color-primary-hover:#344b64;--color-primary-active:#2b3f55;--color-primary-text:#344b64;--color-soft:#e8edf3;
 --color-danger:#a8423f;--color-danger-soft:#f8e9e8;--color-danger-line:#e8c9c7;
 --color-disabled-bg:#eceef0;--color-disabled-fg:#6b7580;
 --radius-sm:7px;--radius-md:10px;--radius-lg:12px;--radius-xl:16px;
 --shadow-md:0 4px 12px rgb(31 41 51 / .08);--shadow-lg:0 12px 32px rgb(31 41 51 / .12);
 --focus-ring:0 0 0 2px #fff,0 0 0 4px var(--color-primary);
}

/* Knöpfe: fünf Varianten. Zweit (Standard), Haupt, Kontur, Leise, Gefahr. Flach, ohne Schatten. */
.btn{border-radius:var(--radius-md)!important;box-shadow:none!important;font-weight:600}
.btn:not(:is([role=group],[role=toolbar],[role=tablist],.menu-list,.tabs)>.btn):not(.primary):not(.danger):not(.active-filter):not(.active):not(.is-visible17):not(:disabled){background:var(--color-surface)!important;border-color:var(--color-line-strong)!important;color:var(--color-ink)!important}
.btn.primary:not(:disabled),
.compact-project .project-work-actions17>.btn.project-work-profile17:not(:disabled),
.compact-project .project-work-actions17>.btn.project-work-area17:not(:disabled){background:var(--color-primary)!important;border-color:var(--color-primary)!important;color:#fff!important}
/* Kontur: wichtige Nebenaktion wie der Vorrichtmodus */
.btn.project-work-mode17:not(:disabled){background:var(--color-surface)!important;border-color:var(--color-primary)!important;color:var(--color-primary-text)!important}
.btn.danger:not(:disabled){background:var(--color-surface)!important;border-color:var(--color-danger-line)!important;color:var(--color-danger)!important}
/* Knöpfe in Gruppen, Werkzeugleisten und Menüs behalten ihr eigenes Aussehen (Segment-Auswahl, Menüzeilen). */
/* Ausgewählter Umschalter (z. B. Filter, Ansicht) */
.btn:not(:is([role=group],[role=toolbar],[role=tablist],.menu-list,.tabs)>.btn):is(.active-filter,.active,.is-visible17):not(:disabled){background:var(--color-soft)!important;border-color:#b8c5d3!important;color:var(--color-primary-text)!important}
@media (hover:hover){
 .btn:not(:is([role=group],[role=toolbar],[role=tablist],.menu-list,.tabs)>.btn):not(.primary):not(.danger):not(.project-work-mode17):not(.active-filter):not(.active):not(.is-visible17):not(:disabled):hover{background:var(--color-ground)!important}
 .btn.primary:not(:disabled):hover,
 .compact-project .project-work-actions17>.btn:is(.project-work-profile17,.project-work-area17):not(:disabled):hover{background:var(--color-primary-hover)!important;border-color:var(--color-primary-hover)!important}
 .btn.project-work-mode17:not(:disabled):hover{background:var(--color-soft)!important}
 .btn.danger:not(:disabled):hover{background:var(--color-danger-soft)!important}
}
.btn.primary:not(:disabled):active{background:var(--color-primary-active)!important;border-color:var(--color-primary-active)!important}
.btn:not(:is([role=group],[role=toolbar],[role=tablist],.menu-list,.tabs)>.btn):not(.primary):not(.danger):not(:disabled):active{background:var(--color-soft)!important}
.btn:disabled,.btn[aria-disabled=true]{background:var(--color-disabled-bg)!important;border-color:var(--color-disabled-bg)!important;color:var(--color-disabled-fg)!important;opacity:1!important;cursor:default}
.btn:focus-visible,.icon-btn:focus-visible{outline:none!important;box-shadow:var(--focus-ring)!important}

/* Eingabefelder und Auswahllisten: weiß, Rahmen, Radius 10 px, Fokus mit Schieferblau */
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea,.app-select28){border-radius:var(--radius-md)!important;box-shadow:none!important}
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea,.app-select28):not(:disabled):not([readonly]):not([type=search]){background-color:var(--color-surface)!important;border-color:var(--color-line-strong)!important}
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea,.app-select28):focus-visible{outline:none!important;border-color:var(--color-primary)!important;box-shadow:0 0 0 3px var(--color-soft)!important}
:is(input,select,textarea):disabled{background-color:var(--color-disabled-bg)!important;color:var(--color-disabled-fg)!important}

/* Karten und Listen-Gruppen: weiß, Rahmen, Radius 12 px, flach. Schatten nur für Schwebendes. */
:is(.panel,.library-card,.dashboard-work-card,.project-card,.prepare-item,.abo-costs80,.abo-team80,.abo-person80,.library-manage-tools45,.collection-empty){border-radius:var(--radius-lg)!important;box-shadow:none!important;border-color:var(--color-line)!important}
.calendar-popover17,.template-profile-help-content17{border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-md)!important;border-color:var(--color-line)!important}

/* Maß- und Winkelkästchen in Flächenzeichnungen: gleiche Optik und Bedienung wie beim Kantteil.
   Weiß = Länge, grau = Winkel. Antippbar nur, wenn es ein Eingabefeld dazu gibt. */
.measure-chip141 text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
.measure-chip141.is-editable141{cursor:pointer;outline:none}
#area-drawing .measure-chip141.is-editable141,.front-drawing .measure-chip141.is-editable141{-webkit-tap-highlight-color:transparent}
@media (hover:hover){
 #area-drawing .measure-chip141.is-editable141:hover>rect,.front-drawing .measure-chip141.is-editable141:hover>rect{fill:#eaeef2;stroke:#546d88}
}
.measure-chip141.is-editable141:focus-visible>rect{stroke:#39516b;stroke-width:1.6}
.measure-chip141.measure-chip-active141>rect{fill:#f6f7f9;stroke:#70859d;stroke-width:1.05}
.measure-chip141.measure-chip-active141 text{font-weight:550}
.measure-editor-host141{position:relative}
.dimension-editor.area-dimension-editor141{position:absolute;top:12px;right:12px;left:auto;z-index:10;width:max-content;min-width:min(228px,calc(100% - 24px));max-width:calc(100% - 24px)}

/* Zeichenflächen: Knöpfe wie beim Kantteil-Querschnitt, appweit gleich.
   Alles liegt im Feld: Vollbild oben links, alle anderen Knöpfe oben rechts, Zoom unten links. */
.canvas-tools{position:absolute;left:8px;right:8px;top:8px;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none}
.canvas-tools>.actions-inline{display:flex;gap:8px;margin-inline-start:auto}
.canvas-tools .icon-btn{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #e1e4e8;border-radius:var(--radius-lg);background:var(--color-surface);color:#505b67;box-shadow:0 1px 2px #2b353f08;pointer-events:auto}
.canvas-tools .icon-btn>.icon{width:17px;height:17px;max-height:none;margin:0}
.canvas-tools .icon-btn:disabled{opacity:.35;cursor:default;box-shadow:none}
@media (hover:hover){.canvas-tools .icon-btn:hover:not(:disabled){background:#f3f4f6;border-color:#b5bbc2}}
.canvas-zoom{position:absolute;left:8px;bottom:8px;z-index:10;display:flex;align-items:center;gap:2px;padding:1px 4px;max-width:calc(100% - 16px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:#fbfcfdf2;box-shadow:0 1px 3px #242e3808}
.canvas-zoom>.icon-btn{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:var(--radius-md);box-shadow:none;background:transparent;color:var(--color-ink);font-size:20px}
.canvas-zoom>:not(.icon-btn){min-width:38px;min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--color-ink);font-size:12px;font-weight:400;text-align:center}