/* Fainoa-Referenz: neutrale Materialleisten, flache Browser-Tabs, blaue Auswahl. */
:root{--bg:#eff0f4;--surface:#fcfcfe;--ink:#242831;--muted:#727780;--line:#24283118;--accent:#3278ce;--wash:#e7edf8;--chrome:rgba(240,241,248,.78);--chrome-border:rgba(255,255,255,.84);--side:rgba(232,234,243,.62)}
body{padding:32px;background:radial-gradient(ellipse at 8% 8%,#4464b777,transparent 52%),radial-gradient(ellipse at 90% 20%,#75bdb954,transparent 50%),radial-gradient(ellipse at 70% 100%,#e6cca778,transparent 65%),#dfe4ee;background-attachment:fixed}
.browser-shell{max-width:1360px;margin:0 auto;border:1px solid var(--chrome-border);border-radius:22px;overflow:clip;background:rgba(248,249,253,.7);box-shadow:0 32px 75px #1c294438,0 5px 14px #18213b18,inset 0 1px #fff;backdrop-filter:blur(32px) saturate(125%);-webkit-backdrop-filter:blur(32px) saturate(125%);min-height:calc(100dvh - 64px)}
.site-header{max-width:none;display:grid;grid-template-columns:230px minmax(0,1fr) auto;height:76px;padding:0 22px;gap:20px;background:var(--chrome);border-bottom:1px solid #24283116;box-shadow:0 1px 0 #ffffff64;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}.brand{font-weight:650;font-size:1.06rem}.brand img{width:30px;height:30px;border-radius:8px}.file-location{display:flex;align-items:center;gap:9px;max-width:580px;width:100%;justify-self:center;min-height:36px;padding:7px 14px;background:#ffffff68;border:1px solid #777c8a24;border-radius:9px;box-shadow:inset 0 1px 3px #24314b07;color:var(--muted);font-size:.8rem;min-width:0}.file-location span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-location span:first-child{font-size:1.2rem;color:#8b909c}.site-header .quiet{border:0;box-shadow:none;background:transparent;padding:7px 9px;font-size:.75rem}.site-header .quiet:hover{background:#888d9b14}
main{max-width:none;min-height:calc(100dvh - 204px);padding:0}.landing{grid-template-columns:250px minmax(0,1fr);gap:0;align-items:stretch;margin:0}.landing-intro{background:var(--side);border-right:1px solid var(--line);padding:32px 24px;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}.landing-intro>.eyebrow{font-size:.62rem;color:var(--muted)}.landing-intro>h2{font-size:1.15rem;line-height:1.35;letter-spacing:-.03em}.landing-intro .lead{font-size:.78rem;line-height:1.85;margin-top:14px}.landing-features{gap:8px;margin:32px -12px 0}.feature{border-radius:9px;padding:12px;gap:12px}.feature:first-child{background:#6682b614;box-shadow:inset 3px 0 var(--accent)}.feature-number{font-size:1.28rem;padding:0;border:0;letter-spacing:0;min-width:20px;color:#7488a8}.feature h3{font-size:.83rem;font-weight:600}.feature p{font-size:.68rem;margin-top:3px}.start-panel{border:0;border-radius:0;padding:42px clamp(28px,6vw,85px) 34px;box-shadow:none;background:radial-gradient(ellipse at 50% 0,#ffffffb8,transparent 60%);text-align:center}.welcome-logo{height:72px;width:72px;border-radius:18px;box-shadow:0 10px 20px #202a4530,0 1px 2px #fff9;margin-bottom:22px}.start-panel h1{font-size:clamp(1.8rem,3.2vw,2.9rem);font-weight:620;letter-spacing:-.055em}.welcome-subtitle{color:var(--muted);font-size:.84rem;margin-top:16px;line-height:1.7}.dropzone{max-width:540px;margin:28px auto 20px;border:1px solid #ffffffba;border-radius:17px;background:#ffffff64;box-shadow:0 10px 30px #2637540c,inset 0 1px #fff9;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);padding:22px}.upload-symbol{display:none}.dropzone h3{font-weight:580;font-size:.9rem}.dropzone p{font-size:.72rem}.picker{margin:15px 0 10px}.picker .button{min-width:185px;border-radius:11px;padding:12px 25px;background:linear-gradient(#4b91e7,#2b6cc3);border:1px solid #2762b4;box-shadow:0 5px 12px #2268be33,inset 0 1px #ffffff50;font-weight:580;color:#fff}.picker .button:hover{box-shadow:0 7px 16px #2268be40}
.create-options{max-width:540px;margin:auto;gap:16px}.create-option{position:relative;border:1px solid #ffffff9c;background:linear-gradient(135deg,#ffffff91,#f9faff52);border-radius:14px;padding:20px 18px;text-align:left;box-shadow:0 6px 16px #21334e10,inset 0 1px #fff9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);gap:6px;transition:box-shadow .2s,transform .2s,border-color .2s}.create-option:hover{transform:translateY(-2px);background:#ffffffb8;border-color:#aab9d6;box-shadow:0 12px 22px #23324f1c}.create-option strong{font-size:.85rem;font-weight:600}.create-option .muted{font-size:.68rem}.create-plus{position:absolute;right:16px;top:17px;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;border:1px solid #7c899b25;color:#6a768a;font-size:1rem;background:#ffffff60}.tab-stack{height:30px;width:40px;position:relative;margin-bottom:10px}.tab-stack span{position:absolute;left:0;top:9px;display:block;height:22px;width:33px;border:1px solid #8d9bb345;border-radius:5px;background:linear-gradient(#fff,#e5e9f1);box-shadow:0 3px 6px #27334d1a}.tab-stack span:nth-child(2){left:4px;top:5px}.tab-stack span:nth-child(3){left:8px;top:1px;border-top:3px solid #668bbb}.list-symbol{height:30px;width:32px;display:flex;flex-direction:column;gap:5px;padding:5px;border:1px solid #8d9bb345;border-radius:5px;background:linear-gradient(#fff,#e5e9f1);box-shadow:0 3px 6px #27334d1a;margin-bottom:10px}.list-symbol span{height:3px;background:linear-gradient(to right,#6589b4 4px,transparent 4px,transparent 7px,#9aa5b8 7px);border-radius:1px}.divider-label{font-size:.59rem;color:#8a8f9b}.local-note{color:#868b96;font-size:.67rem;margin-top:24px}.example-strip{margin:0;padding:22px 28px 24px 278px;background:#eef0f657;border-top:1px solid #2428310c;gap:24px}.example-copy h2{font-size:.8rem;font-weight:580}.example-copy p{font-size:.7rem}.demo-buttons .quiet{border:0;border-bottom:1px solid #a0a8b344;border-radius:0;padding:8px 0;min-height:36px;box-shadow:none;color:#607797;font-size:.74rem}.demo-buttons .quiet:hover{color:var(--accent);background:transparent}.demo-buttons{gap:22px}
/* Der Inhalt bekommt eine echte Browser-Tabkante, nicht den Stil eines Kaufbuttons. */
main[data-view=workspace]{padding:24px 24px 36px}.document-header{background:var(--chrome);margin:-24px -24px 24px;padding:22px 26px;border-bottom:1px solid #24283114;gap:8px 22px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.document-heading h1{font-size:1.6rem;letter-spacing:-.035em;font-weight:630}.document-heading .eyebrow{color:var(--muted);font-size:.59rem;margin-bottom:7px}.reader-actions,.editor-toolbar{padding:4px;background:#949bac0c;border:1px solid #858c9a18;border-radius:10px;gap:4px}.reader-actions .quiet,.editor-toolbar .quiet{border:0;background:transparent;padding:8px 12px;font-size:.75rem;min-height:34px;border-radius:6px;color:var(--muted)}.reader-actions .quiet:hover,.editor-toolbar .quiet:hover{background:#ffffff68;color:var(--ink)}.reader-actions .button,.editor-toolbar .button{border:1px solid #8790a038;background:linear-gradient(#ffffffd4,#eef0f68c);color:var(--ink);padding:8px 14px;min-height:34px;border-radius:7px;font-size:.75rem;box-shadow:0 2px 5px #25304b14,inset 0 1px #fff}.reader-actions .button:hover,.editor-toolbar .button:hover{background:#fff;box-shadow:0 3px 8px #25304b22}.editor-status,.document-header>.muted{font-size:.69rem;color:var(--muted)}
.workspace-grid{grid-template-columns:205px minmax(0,1fr);gap:24px}.workspace-sidebar{background:var(--side);border:1px solid #ffffff8a;border-radius:12px;padding:17px 10px;box-shadow:0 4px 14px #20283e08;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}.workspace-sidebar .eyebrow{font-size:.59rem;margin-bottom:12px}.tabs{gap:7px}.tab{min-height:40px;font-size:.77rem;border:1px solid #757e9220;border-radius:7px;background:#ffffff24;color:var(--muted);box-shadow:inset 0 1px #fff2;position:relative;padding:10px 13px}.tab:hover{background:#ffffff77;border-color:#8997b138}.tab[aria-current=page]{border-color:#8ba0be44;background:linear-gradient(#ffffffba,#e3e9f488);box-shadow:0 3px 7px #27345115,inset 0 1px #fff9;color:var(--ink);font-weight:630}.tab[aria-current=page]::before{content:'';position:absolute;left:4px;top:9px;bottom:9px;width:3px;background:#4a87d2;border-radius:3px}.sidebar-note{font-size:.68rem;color:var(--muted);padding:16px 9px 2px;margin-top:20px}.document-body,.editor-form{border:1px solid #ffffffab;border-radius:13px;background:#ffffff50;padding:20px;box-shadow:0 6px 22px #21304a0d}.card{background:var(--surface);border:1px solid #8e98a61c;box-shadow:0 3px 9px #222d4310;border-radius:10px;padding:22px}.link-title{color:#3b648e;font-size:.95rem;font-weight:590}.domain{font-size:.7rem}.note{font-size:.84rem}.report{box-shadow:0 8px 22px #222d4310;padding:28px}.report>.eyebrow{color:var(--muted)}.report>h2{font-size:1.45rem;font-weight:630}.panel-heading h2{font-size:1.14rem;font-weight:600}.panel-heading .muted{font-size:.76rem}.sheet{color:var(--ink);font-size:.91rem}.field input,.field textarea{background:#f5f6fa;border-color:#8894a32b;box-shadow:inset 0 1px 3px #25324d06;border-radius:7px;font-size:.85rem}.field{font-size:.71rem}.edit-entry{padding:0 17px}.entry-summary{min-height:70px}.entry-summary-copy strong{font-size:.84rem;font-weight:580}.entry-summary-copy .muted{font-size:.66rem}.entry-number{font-size:.66rem;color:#8792a4}.entry-actions .small-button{border:0;background:transparent;color:#8a94a3;min-width:32px;min-height:32px;padding:6px 10px;box-shadow:none;border-radius:6px}.entry-actions .small-button:hover{background:#e7ebf3;color:var(--ink)}.entry-actions .danger{color:#a26969}.editor-add .quiet{border-style:dashed;border-color:#8d99ad50;background:transparent;font-size:.75rem;box-shadow:none;min-height:38px}.editor-add .quiet:hover{background:#edf0f6}.rich-editor{background:#fbfbfd;border:1px solid #8794a12b;box-shadow:inset 0 2px 5px #22304a05;border-radius:8px}.editor-sheet .danger{border:0;border-radius:0;box-shadow:none;text-decoration:underline;padding:8px 0;min-height:30px;color:#a26969;font-size:.7rem}.project-toggle{font-size:.78rem}footer{background:var(--chrome);max-width:none;padding:18px 24px;border-top:1px solid #272e3c12;font-size:.66rem;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
@media(prefers-color-scheme:dark){:root{--bg:#252832;--surface:#30333e;--ink:#edf0f5;--muted:#a5aab8;--line:#ffffff15;--wash:#333e54;--accent:#71a4ed;--chrome:rgba(35,38,48,.8);--chrome-border:#ffffff24;--side:rgba(43,46,59,.7)}body{background:radial-gradient(ellipse at 10% 0,#344c8e,transparent 60%),radial-gradient(ellipse at 90% 90%,#3b6264,transparent 60%),#202936}.browser-shell{background:#252832c7;box-shadow:0 32px 80px #0006,inset 0 1px #ffffff18}.file-location{background:#24273288;border-color:#ffffff15;box-shadow:inset 0 1px 3px #0002}.start-panel{background:radial-gradient(ellipse at 50% 0,#575e7420,transparent 60%)}.dropzone{background:#34394965;border-color:#ffffff16;box-shadow:0 10px 24px #0002,inset 0 1px #ffffff10}.create-option{background:linear-gradient(135deg,#474c6155,#2b304450);border-color:#ffffff17;box-shadow:0 7px 17px #0002,inset 0 1px #ffffff14}.create-option:hover{background:#48506c66;border-color:#9aaed340}.create-plus{color:#c5cfdf;background:#ffffff0a;border-color:#ffffff18}.tab-stack span,.list-symbol{background:linear-gradient(#5b6479,#424a60);border-color:#b9c8dd40}.example-strip{background:#20242f35}.reader-actions .button,.editor-toolbar .button{background:linear-gradient(#505663a0,#3b404e90);color:var(--ink);border-color:#ffffff22;box-shadow:0 2px 5px #0003,inset 0 1px #ffffff15}.reader-actions .button:hover,.editor-toolbar .button:hover{background:#555c6b}.reader-actions .quiet:hover,.editor-toolbar .quiet:hover{background:#ffffff0c}.workspace-sidebar{border-color:#ffffff15}.tab{background:#ffffff02;border-color:#ffffff12;box-shadow:inset 0 1px #ffffff04}.tab[aria-current=page]{background:linear-gradient(#4b556b90,#3a455c85);border-color:#8492ae38;box-shadow:0 3px 8px #0003,inset 0 1px #ffffff0d}.tab:hover{background:#ffffff08}.document-body,.editor-form{background:#24283350;border-color:#ffffff13}.card{border-color:#ffffff0e;box-shadow:0 4px 12px #0002}.link-title{color:#9fbce6}.field input,.field textarea{background:#272a35;border-color:#ffffff1c}.rich-editor{background:#292c37;border-color:#ffffff20}.editor-add .quiet:hover{background:#ffffff08}}
@media(max-width:900px){body{padding:18px}.browser-shell{min-height:calc(100dvh - 36px)}.site-header{grid-template-columns:190px minmax(0,1fr) auto;gap:12px}.landing{grid-template-columns:210px minmax(0,1fr)}.landing-intro{padding:28px 18px}.start-panel{padding:36px 28px}.example-strip{padding-left:238px;flex-direction:column;align-items:start;gap:14px}}
@media(max-width:680px){body{padding:0;background:var(--bg)}.browser-shell{border:0;border-radius:0;min-height:100dvh;box-shadow:none}.site-header{height:66px;grid-template-columns:auto minmax(0,1fr) auto;padding:0 16px;gap:14px}.brand{font-size:.92rem;gap:8px}.brand img{width:27px;height:27px}.file-location{min-height:31px;padding:6px 9px;font-size:.66rem}.file-location span:first-child{display:none}.site-header .quiet{font-size:.66rem;padding:5px}.landing{display:block}.landing-intro{display:none}.start-panel{padding:34px 20px 28px}.welcome-logo{width:62px;height:62px;border-radius:16px;margin-bottom:20px}.start-panel h1{font-size:2.2rem}.welcome-subtitle{font-size:.78rem}.dropzone{margin:25px 0 20px;padding:21px 16px}.create-option{padding:18px 14px}.create-options{gap:12px}.example-strip{padding:22px 20px;gap:14px}.demo-buttons{display:flex;flex-wrap:wrap;gap:20px}.demo-buttons .quiet{font-size:.73rem}main[data-view=workspace]{padding:18px 16px 28px}.document-header{margin:-18px -16px 18px;padding:20px 16px;gap:14px}.document-heading h1{font-size:1.45rem}.reader-actions,.editor-toolbar{width:fit-content;padding:3px;gap:2px}.reader-actions .button,.editor-toolbar .button{margin-left:0;min-height:38px;padding:8px 13px}.reader-actions .quiet,.editor-toolbar .quiet{min-height:38px;padding:8px 11px}.workspace-grid{grid-template-columns:1fr;gap:16px}.workspace-sidebar{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 16px;margin:0 -16px;background:var(--chrome);box-shadow:none;top:0}.workspace-sidebar .eyebrow{display:none}.tabs{gap:7px;padding:2px 0}.tab{min-height:38px;padding:9px 14px;font-size:.73rem;box-shadow:inset 0 1px #fff2}.tab[aria-current=page]::before{display:none}.document-body,.editor-form{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}.report{padding:24px 20px}.editor-form>.card{padding:22px 18px}.edit-entry{padding:0 16px}.rich-editor{padding:15px}.sidebar-note{display:none}footer{padding:18px 16px;font-size:.65rem}}
/* Die Dokumentbereiche sind echte Tabs über der Inhaltsfläche. */
.feature:first-child{background:transparent;box-shadow:none}.sidebar-file-icon{display:block;font-size:1.8rem;color:#8398b8;padding:5px 10px 14px}.sidebar-file-title{font-size:.92rem;padding:0 10px;overflow-wrap:anywhere;line-height:1.55;font-weight:600}.sidebar-file-meta{font-size:.7rem;color:var(--muted);padding:9px 10px 0}.document-body,.editor-form{padding:0 20px 20px;gap:0}.document-body>.tabs,.editor-form>.tabs{display:flex;flex-direction:row;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -20px 22px;padding:12px 12px 10px;background:var(--chrome);border-bottom:1px solid var(--line);border-radius:13px 13px 0 0;min-width:0;position:sticky;top:0;z-index:3;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.tabs .tab{flex:none;white-space:nowrap;min-height:35px;padding:8px 18px;font-size:.74rem;border-radius:7px;background:#ffffff1a;border-color:#8892a222}.tabs .tab[aria-current=page]{background:linear-gradient(#ffffffed,#f5f7fbd9);color:var(--ink);border-color:#828ea33b;box-shadow:0 3px 8px #27345121,inset 0 1px #fff9}.tabs .tab[aria-current=page]::before{display:none}.tabs .tab[aria-current=page]::after{content:'';position:absolute;left:15px;right:15px;bottom:0;height:2px;background:#5687c8;border-radius:2px}.editor-form>.card{margin-bottom:0}.editor-form>.entries-panel{min-width:0}
@media(prefers-color-scheme:dark){.tabs .tab{background:#ffffff02;border-color:#ffffff12}.tabs .tab[aria-current=page]{background:linear-gradient(#4e5567b8,#3b4356bb);border-color:#ffffff20;box-shadow:0 3px 9px #0003,inset 0 1px #ffffff12}}
@media(max-width:680px){.workspace-sidebar{display:none}.document-body,.editor-form{padding:0;background:transparent;border:0}.document-body>.tabs,.editor-form>.tabs{margin:0 -16px 18px;padding:10px 16px;background:var(--chrome);border-radius:0}.tabs .tab{min-height:38px;padding:9px 15px}.editor-form>.card{padding:22px 18px}.document-body>.card{margin:0}.workspace-grid{gap:0}}