.private-surface { display: contents; }
.private-surface[hidden], :root[data-covered="true"] .private-surface { display: none !important; }
.notebook-cover {
    --note-accent: #376b9f;
    --note-selected: #e4edf6;
    display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: 70px minmax(0, 1fr);
    height: 100dvh; width: 100%; background: var(--flaeche); color: var(--tinte); font-family: var(--ui-font);
}
.notebook-cover[hidden] { display: none; }
:root[data-covered="true"] .notebook-cover[hidden] { display: grid !important; }
:root[data-theme="dark"] .notebook-cover { --note-accent: #a9c9eb; --note-selected: #293a4d; }
.notebook-header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px; background: var(--papier); border-bottom: 1px solid var(--linie-zart); }
.notebook-brand, .notebook-actions { display: flex; align-items: center; gap: 12px; }
.notebook-brand img { width: 28px; height: 28px; }
.notebook-brand strong { font-size: 17px; font-weight: 600; }
.notebook-open, .notebook-list-heading button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: var(--tinte-weich); font-size: 21px; cursor: pointer; }
.notebook-sidebar { background: var(--papier); border-right: 1px solid var(--linie-zart); padding: 24px 12px; min-height: 0; overflow: auto; }
.notebook-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 20px; color: var(--tinte-zart); font-size: 10px; font-weight: 650; letter-spacing: 1.2px; }
.notebook-list-heading button { width: 28px; height: 28px; border: 0; background: transparent; }
.notebook-note { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; margin: 0 0 6px; background: transparent; color: var(--tinte); border: 1px solid transparent; border-radius: 9px; text-align: left; cursor: pointer; }
.notebook-note.selected { background: var(--note-selected); color: var(--note-accent); }
.notebook-note > i { font-size: 21px; }
.notebook-note span { font-size: 13px; font-weight: 600; }
.notebook-note small { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: var(--tinte-zart); }
.notebook-local-note { color: var(--tinte-zart); font-size: 11px; line-height: 1.7; margin: 32px 14px; }
.notebook-editor { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 40px clamp(20px, 5vw, 80px) 0; }
.notebook-document-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--linie-zart); }
.notebook-document-heading h1 { font: 600 27px var(--ui-font); margin: 0; }
.notebook-document-heading > span { font-size: 11px; color: var(--tinte-zart); border: 1px solid var(--linie-zart); padding: 5px 9px; border-radius: 6px; }
.notebook-editor textarea { flex: 1; min-height: 120px; width: 100%; resize: none; border: 0; border-radius: 0; box-shadow: none; outline-offset: -3px; background: transparent; color: var(--tinte); font: 14px/1.9 var(--ui-font); padding: 26px 4px; }
.notebook-editor textarea::placeholder { color: var(--tinte-zart); }
.notebook-editor footer { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--linie-zart); font-size: 11px; color: var(--tinte-zart); }
.discreet-back { display: flex; justify-content: flex-end; margin: 0 0 16px; }
.discreet-back button { background: transparent; color: var(--lock-copy); border: 0; font: 500 12px var(--ui-font); cursor: pointer; }
.web-vnext.app-shell .global-actions .quick-hide-button { display: flex; }
.notification-summary { font-size: 12px; line-height: 1.6; color: var(--tinte-weich); padding: 8px 2px; }
.notification-preview { background: var(--flaeche-warm); border: 1px solid var(--linie-zart); border-radius: 12px; padding: 16px; margin: 20px 0; }
.notification-preview b, .notification-preview span { display: block; }
.notification-preview span { margin-top: 5px; color: var(--tinte-weich); font-size: 13px; }
@media (max-width: 720px) {
    .notebook-cover { grid-template-columns: 1fr; grid-template-rows: 64px auto minmax(0, 1fr); }
    .notebook-header { padding: 0 14px; gap: 8px; }
    .notebook-actions { gap: 8px; }
    .notebook-brand { gap: 6px; }
    .notebook-brand strong { font-size: 15px; }
    .notebook-brand img { width: 22px; height: 22px; }
    .notebook-open { width: 34px; }
    .notebook-sidebar { display: flex; gap: 6px; padding: 10px; border-right: 0; border-bottom: 1px solid var(--linie-zart); overflow-x: auto; }
    .notebook-list-heading { padding: 0; }
    .notebook-list-heading > span, .notebook-local-note, .notebook-note small { display: none; }
    .notebook-note { width: auto; flex-shrink: 0; gap: 6px; padding: 9px; margin: 0; }
    .notebook-note > i { font-size: 17px; }
    .notebook-editor { padding: 24px 20px 0; }
    .notebook-document-heading h1 { font-size: 23px; }
    .web-vnext.app-shell .global-actions { gap: 4px; }
    .web-vnext.app-shell .global-brand strong { font-size: 15px; }
    .web-vnext.app-shell .global-brand .ph { display: none; }
}
@media (max-width: 380px) {
    .notebook-header { padding-inline: 10px; }
    .notebook-actions .theme-switcher select { width: 113px; }
    .notebook-brand img { display: none; }
    .web-vnext.app-shell .global-brand strong { font-size: 13px; }
}

.notebook-error { padding: 12px 16px; color: var(--tinte); background: var(--flaeche-warm); border: 1px solid var(--linie); border-radius: 8px; font-size: 13px; line-height: 1.6; }

.notification-display-setting select { max-width: 100%; min-height: 42px; border: 1px solid var(--linie); border-radius: 9px; padding: 8px 12px; background: var(--flaeche); color: var(--tinte); font: 500 13px var(--ui-font); }
.settings-notification-preview { margin: 12px 0 20px; }

.push-background-choice { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0; color: var(--tinte-weich); font-size: 13px; line-height: 1.6; }
.push-background-choice input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ui-accent); }

/* Derselbe Editor in der privaten Arbeitsfläche und in der getrennten Tarnansicht. */
.notebook-cover-body { grid-column: 1 / -1; display: flex; flex-direction: column; min-height: 0; }
.notebook-cover-body > .notebook-error { margin: 10px 20px; }
.notebook-pages { --note-accent: #376b9f; --note-selected: #e4edf6; display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 0; flex: 1; overflow: hidden; }
:root[data-theme="dark"] .notebook-pages { --note-accent: #a9c9eb; --note-selected: #293a4d; }
.notebook-pages .notebook-note > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notebook-pages .notebook-note > i { flex-shrink: 0; }
.notebook-pages button:disabled { cursor: default; opacity: .5; }
.notebook-pages .notebook-title { min-width: 0; width: 100%; padding: 6px 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--tinte); font: 600 27px/1.3 var(--ui-font); }
.notebook-pages .notebook-title:focus-visible { outline: 2px solid var(--note-accent); outline-offset: 4px; }
.notebook-pages .notebook-delete { display: grid; place-items: center; flex: 0 0 36px; height: 36px; color: var(--tinte-weich); border: 1px solid var(--linie-zart); border-radius: 8px; background: var(--flaeche); cursor: pointer; font-size: 18px; }
.notebook-delete-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 0; color: var(--tinte-weich); font-size: 13px; }
.notebook-delete-confirm button, .notebook-error button { padding: 6px 10px; border: 1px solid var(--linie); border-radius: 7px; background: var(--flaeche); color: var(--tinte); cursor: pointer; }
.notebook-pages .notebook-error { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.notebook-pages .notebook-error span { flex: 1 1 250px; }
.notebook-pages footer { flex-shrink: 0; flex-wrap: wrap; }
.notebook-empty { margin: auto; padding: 32px 0; text-align: center; max-width: 420px; }
.notebook-empty > i { color: var(--note-accent); font-size: 42px; }
.notebook-empty h2 { font: 600 25px var(--ui-font); margin: 20px 0 12px; }
.notebook-empty p { color: var(--tinte-weich); font: 14px/1.7 var(--ui-font); }
.notebook-empty button { margin-top: 15px; padding: 12px 20px; border: 0; border-radius: 10px; color: white; background: #376b9f; font: 600 13px var(--ui-font); cursor: pointer; }
.notes-workspace { grid-column: 1 / -1; grid-row: 2; min-height: 0; display: flex; flex-direction: column; color: var(--tinte); background: var(--flaeche); overflow: hidden; }
.notes-workspace-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 32px; background: var(--papier); border-bottom: 1px solid var(--linie-zart); }
.notes-workspace-heading h1 { margin: 5px 0; font: 600 28px var(--ui-font); }
.notes-workspace-heading p { margin: 0; color: var(--tinte-weich); font-size: 13px; }
.notes-encryption { display: flex; align-items: center; gap: 8px; color: var(--tinte-weich); font-size: 12px; }
.notes-encryption i { font-size: 18px; }
@media (min-width: 721px) and (max-width: 940px) {
    .web-vnext.app-shell .global-nav button { min-width: 65px; padding-inline: 8px; }
    .web-vnext.app-shell .global-actions .avatar-button, .web-vnext.app-shell .global-brand { display: none; }
}
@media (max-width: 720px) {
    .notebook-cover { grid-template-rows: 64px minmax(0, 1fr); }
    .notebook-pages { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .notebook-pages .notebook-title { font-size: 23px; }
    .notebook-pages .notebook-sidebar { max-height: 72px; }
    .notebook-pages .notebook-note { max-width: 220px; }
    .notebook-pages .notebook-editor { padding-top: 18px; }
    .notebook-pages .notebook-document-heading { padding-bottom: 14px; }
    .notes-workspace-heading { padding: 20px; align-items: flex-start; flex-direction: column; gap: 10px; }
    .notes-workspace-heading h1 { font-size: 24px; }
    .notes-workspace-heading .eyebrow { display: none; }
    .web-vnext.app-shell .global-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.notebook-pages textarea:focus-visible { outline: 2px solid var(--note-accent); outline-offset: -2px; }