:root {
    --pinwand-rahmen: clamp(28px, 4vw, 64px);
    --surface: #f8ecd4;
    --surface-soft: #efe0c2;
    --text: #342719;
    --muted: #705b45;
    --border: #c9a97d;
    --accent: #754820;
    --accent-dark: #4d2d15;
    --shadow: 0 10px 24px rgba(58, 35, 17, 0.18);
    --papier-oberflaeche:
        radial-gradient(circle at 3px 4px, rgba(70, 49, 25, 0.09) 0 0.55px, transparent 0.9px) 0 0 / 13px 17px repeat,
        radial-gradient(circle at 8px 6px, rgba(255, 255, 255, 0.16) 0 0.65px, transparent 1px) 0 0 / 19px 23px repeat,
        repeating-linear-gradient(87deg, transparent 0 8px, rgba(81, 57, 30, 0.018) 8.5px 9px, transparent 9.5px 17px);
}


* {
    box-sizing: border-box;
}

.visuell-versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    margin: 0;
    min-height: 100vh;
    padding-top: var(--pinwand-rahmen);
    padding-bottom: var(--pinwand-rahmen);
    background: #c9965a;
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.55;
}

body.ansicht-notizen {
    overflow: hidden;
}


.pinwand-hintergrund {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: var(--pinwand-rahmen) minmax(0, 1fr) var(--pinwand-rahmen);
    grid-template-rows: var(--pinwand-rahmen) minmax(0, 1fr) var(--pinwand-rahmen);
    overflow: hidden;
    pointer-events: none;
}

.pinwand-hintergrund::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: calc(var(--pinwand-rahmen) - 1px);
    border: 1px solid rgba(78, 45, 20, 0.2);
    box-shadow:
        inset 0 0 7px rgba(59, 32, 13, 0.2),
        inset 0 0 16px rgba(59, 32, 13, 0.1);
}

.pinwand-segment {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    margin: -1px;
    background-repeat: no-repeat;
}

.pinwand-segment-1,
.pinwand-segment-3,
.pinwand-segment-7,
.pinwand-segment-9 {
    z-index: 1;
    background-size: 100% 100%;
}

.pinwand-segment-1 {
    width: calc(var(--pinwand-rahmen) * 3.2534 + 2px);
    height: calc(var(--pinwand-rahmen) * 3.1457 + 2px);
    justify-self: start;
    align-self: start;
    background-image: url("../bilder/pinwand/meinNotizbrett-1.webp");
}

.pinwand-segment-2 {
    background-image: url("../bilder/pinwand/meinNotizbrett-2.webp");
    background-repeat: repeat-x;
    background-size: calc(var(--pinwand-rahmen) * 7.5) var(--pinwand-rahmen);
}

.pinwand-segment-3 {
    width: calc(var(--pinwand-rahmen) * 3.2646 + 2px);
    height: calc(var(--pinwand-rahmen) * 3.1457 + 2px);
    justify-self: end;
    align-self: start;
    background-image: url("../bilder/pinwand/meinNotizbrett-3.webp");
}

.pinwand-segment-4 {
    background-image: url("../bilder/pinwand/meinNotizbrett-4.webp");
    background-repeat: repeat-y;
    background-size: var(--pinwand-rahmen) calc(var(--pinwand-rahmen) * 4.640625);
}

.pinwand-segment-5 {
    background-image: url("../bilder/pinwand/meinNotizbrett-kork.jpg");
    background-position: left top;
    background-repeat: repeat;
    background-size: calc(var(--pinwand-rahmen) * 46.875) auto;
}

.pinwand-segment-6 {
    background-image: url("../bilder/pinwand/meinNotizbrett-6.webp");
    background-position: right top;
    background-repeat: repeat-y;
    background-size: var(--pinwand-rahmen) calc(var(--pinwand-rahmen) * 4.65625);
}

.pinwand-segment-7 {
    width: calc(var(--pinwand-rahmen) * 3.2534 + 2px);
    height: calc(var(--pinwand-rahmen) * 3.3217 + 2px);
    justify-self: start;
    align-self: end;
    background-image: url("../bilder/pinwand/meinNotizbrett-7.webp");
}

.pinwand-segment-8 {
    background-image: url("../bilder/pinwand/meinNotizbrett-8.webp");
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: calc(var(--pinwand-rahmen) * 7.921875) var(--pinwand-rahmen);
}

.pinwand-segment-9 {
    width: calc(var(--pinwand-rahmen) * 3.2646 + 2px);
    height: calc(var(--pinwand-rahmen) * 3.3217 + 2px);
    justify-self: end;
    align-self: end;
    background-image: url("../bilder/pinwand/meinNotizbrett-9.webp");
}


a {
    color: var(--accent-dark);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.app-header,
.app-nav,
.app-main {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100% - (var(--pinwand-rahmen) * 2) - 24px));
    margin-left: auto;
    margin-right: auto;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0 12px;
}

.ansicht-notizen .app-main {
    position: fixed;
    top: var(--pinwand-rahmen);
    right: var(--pinwand-rahmen);
    bottom: var(--pinwand-rahmen);
    left: var(--pinwand-rahmen);
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: clamp(18px, 2.4vw, 34px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ansicht-notizen .app-main::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.frontend-header {
    padding: 0;
}


.rahmen-identitaet {
    position: fixed;
    z-index: 6;
    top: 0;
    left: calc(var(--pinwand-rahmen) + clamp(1px, 1.15vw, 17px));
    display: flex;
    align-items: center;
    gap: clamp(7px, 0.85vw, 13px);
    width: auto;
    max-width: calc(100vw - (var(--pinwand-rahmen) * 2) - 465px);
    height: var(--pinwand-rahmen);
}

.brand {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--accent-dark);
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0.01em;
}

.brand-subtitle {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}


.app-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.app-nav a {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 12px;
    color: var(--text);
}

.app-nav a:hover {
    background: var(--surface-soft);
    text-decoration: none;
}


.rahmen-navigation {
    position: fixed;
    top: 0;
    right: calc(var(--pinwand-rahmen) + clamp(8px, 1.6vw, 24px));
    z-index: 5;
    width: auto;
    max-width: 49vw;
    height: var(--pinwand-rahmen);
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.rahmen-navigation a {
    position: relative;
    padding: 4px clamp(5px, 0.7vw, 10px);
    border-radius: 0;
    color: rgba(73, 38, 13, 0.9);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.66rem, 0.92vw, 0.84rem);
    font-weight: 700;
    letter-spacing: 0.025em;
    text-shadow: 0 1px 0 rgba(255, 221, 165, 0.52), 0 -1px 1px rgba(51, 24, 7, 0.45);
}

.rahmen-navigation a + a::before {
    content: "|";
    position: absolute;
    left: -2px;
    color: rgba(83, 45, 17, 0.62);
}

.rahmen-navigation a:hover,
.rahmen-navigation a:focus-visible {
    background: transparent;
    color: #321705;
    text-shadow: 0 1px 0 rgba(255, 226, 179, 0.7), 0 -1px 1px rgba(48, 21, 5, 0.62);
}

.app-main {
    padding: 18px 0 calc(var(--pinwand-rahmen) + 44px);
}


.app-footer {
    position: fixed;
    z-index: 6;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: var(--pinwand-rahmen);
    margin: 0;
    padding: 0;
    color: rgba(73, 38, 13, 0.9);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.64rem, 0.78vw, 0.8rem);
    font-weight: 700;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255, 224, 173, 0.62), 0 -1px 1px rgba(48, 20, 4, 0.48);
}

.footer-signatur,
.footer-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
}

.footer-signatur {
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%, -50%) rotate(-0.15deg);
}

.footer-navigation {
    right: calc(var(--pinwand-rahmen) + clamp(7px, 1.2vw, 18px));
    display: flex;
    gap: clamp(8px, 1vw, 15px);
    white-space: nowrap;
}

.footer-navigation a {
    color: inherit;
}

.footer-navigation a:hover,
.footer-navigation a:focus-visible {
    color: #321705;
    text-decoration: none;
    transform: translateY(1px);
}


.infoseite {
    width: min(760px, 100%);
    margin-right: auto;
    margin-left: auto;
}

.infoseite h2 {
    margin-top: 24px;
    margin-bottom: 6px;
}

.hinweistext {
    margin-top: 26px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
}

.karte {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.28), transparent 42%),
        repeating-linear-gradient(0deg, transparent 0 25px, rgba(92, 61, 31, 0.022) 26px),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 22px;
    box-shadow: var(--shadow);
}

.hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px;
}

.hero h1,
.kopfzeile h1,
.karte h1,
.karte h2 {
    margin-top: 0;
}

.kopfzeile {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 14px;
}

.kopfzeile p,
.hero p,
.karte p {
    color: var(--muted);
}

.raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 14px;
}


.holz-seitenueberschrift {
    --holzbuchstaben-hoehe: clamp(18px, 2.55vw, 38px);
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.8vw, 12px);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    pointer-events: none;
}

.holz-seitenueberschrift.titel-linksleiste {
    overflow: visible;
}

.holz-seitenueberschrift.titel-linksleiste .holz-wort:first-child {
    position: fixed;
    z-index: 6;
    top: calc(var(--pinwand-rahmen) + 8px);
    bottom: calc(var(--pinwand-rahmen) + 10px);
    left: calc(var(--pinwand-rahmen) * 0.16);
    width: calc(var(--pinwand-rahmen) * 0.72);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
}


.rahmen-home {
    position: relative;
    flex: 0 0 37px;
    width: 37px;
    height: 36px;
    margin-left: -4px;
    color: rgba(66, 31, 8, 0.74);
    transition: color 140ms ease, transform 140ms ease;
}

.rahmen-home::before,
.rahmen-home::after {
    content: "";
    position: absolute;
    left: 50%;
    border-color: currentColor;
    filter:
        drop-shadow(0 -1px 0 rgba(48, 20, 4, 0.58))
        drop-shadow(0 1.5px 0 rgba(255, 224, 173, 0.72));
    transition: filter 140ms ease;
}

.rahmen-home::before {
    top: 15px;
    width: 20px;
    height: 14px;
    border-style: solid;
    border-width: 0 2px 2px;
    transform: translateX(-50%);
}

.rahmen-home::after {
    top: 5px;
    width: 19px;
    height: 19px;
    border-style: solid;
    border-width: 2px 0 0 2px;
    transform: translateX(-50%) rotate(45deg);
}

.rahmen-home:hover,
.rahmen-home:focus-visible {
    color: #351704;
    transform: translateY(1px) rotate(-1.5deg) scale(1.035);
}

.rahmen-home:hover::before,
.rahmen-home:hover::after,
.rahmen-home:focus-visible::before,
.rahmen-home:focus-visible::after {
    filter:
        drop-shadow(0 -1.5px 0 rgba(43, 17, 3, 0.68))
        drop-shadow(0 1px 0 rgba(255, 224, 173, 0.6));
}

.rahmen-home:focus-visible {
    outline: 2px solid rgba(68, 34, 11, 0.72);
    outline-offset: 2px;
}

.rahmen-neue-notiz {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    color: rgba(66, 31, 8, 0.9);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.82rem, 1.02vw, 0.98rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(255, 224, 173, 0.66), 0 -1px 1px rgba(48, 20, 4, 0.48);
    transition: color 140ms ease, transform 140ms ease;
}

.rahmen-neue-notiz:hover,
.rahmen-neue-notiz:focus-visible {
    color: #351704;
    text-decoration: none;
    transform: translateY(1px) rotate(-0.5deg);
}

.rahmen-schreibsymbol {
    position: relative;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    filter:
        drop-shadow(0 -1px 0 rgba(48, 20, 4, 0.58))
        drop-shadow(0 1.5px 0 rgba(255, 224, 173, 0.72));
    transform: rotate(-1deg);
}

.rahmen-schreibsymbol::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 25px;
    border: 2px solid currentColor;
    border-radius: 2px 3px 2px 3px;
    background: rgba(255, 235, 199, 0.08);
}

.rahmen-schreibsymbol::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 15px;
    width: 20px;
    height: 2px;
    background: currentColor;
    clip-path: polygon(0 50%, 4px 0, 100% 0, 100% 100%, 4px 100%);
    transform: rotate(-38deg);
    transform-origin: 1px 50%;
}


.rahmen-filter {
    --rahmen-ansicht-breite: 53px;
    --rahmen-kategorie-breite: 118px;
    position: fixed;
    z-index: 7;
    top: 0;
    right: calc(var(--pinwand-rahmen) + clamp(8px, 1.5vw, 22px));
    display: grid;
    grid-template-columns: 28px minmax(120px, 1fr) var(--rahmen-kategorie-breite) 62px;
    align-items: center;
    gap: 6px;
    width: min(400px, 33vw);
    height: var(--pinwand-rahmen);
}

.rahmen-ansicht {
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    display: flex;
    gap: 3px;
    width: var(--rahmen-ansicht-breite);
    transform: translateY(-50%);
}

.rahmen-ansicht-button {
    position: relative;
    width: 25px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(63, 30, 8, 0.48);
    border-radius: 2px 3px 1px 2px;
    background: rgba(255, 235, 199, 0.08);
    color: rgba(73, 38, 13, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(46, 19, 4, 0.2),
        0 1px 0 rgba(255, 224, 173, 0.46);
    cursor: pointer;
    transition: color 130ms ease, transform 130ms ease, background 130ms ease;
}

.rahmen-ansicht-button:hover,
.rahmen-ansicht-button:focus-visible {
    color: #351704;
    background: rgba(255, 235, 199, 0.2);
    transform: translateY(1px) rotate(-0.5deg);
}

.rahmen-ansicht-button.ist-aktiv {
    color: #351704;
    background: rgba(255, 235, 199, 0.2);
}

.rahmen-ansicht-button:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 1px;
}

.ansicht-raster-symbol,
.ansicht-liste-symbol,
.ansicht-liste-symbol::before {
    position: absolute;
    display: block;
    content: "";
}

.ansicht-raster-symbol {
    top: 8px;
    left: 7px;
    width: 4px;
    height: 4px;
    background: currentColor;
    box-shadow: 7px 0 currentColor, 0 7px currentColor, 7px 7px currentColor;
}

.ansicht-liste-symbol {
    top: 8px;
    left: 9px;
    width: 10px;
    height: 1px;
    background: currentColor;
    box-shadow: 0 5px currentColor, 0 10px currentColor;
}

.ansicht-liste-symbol::before {
    top: -1px;
    left: -4px;
    width: 2px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 5px currentColor, 0 10px currentColor;
}

.rahmen-filter input[type="search"],
.rahmen-filter select {
    height: 30px;
    min-width: 0;
    padding: 3px 7px;
    border: 1px solid rgba(58, 27, 7, 0.72);
    border-radius: 2px 4px 1px 3px;
    background: rgba(255, 235, 199, 0.2);
    color: rgba(48, 22, 6, 0.94);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.78rem;
    box-shadow:
        inset 0 1px 0 rgba(47, 20, 5, 0.42),
        0 1px 0 rgba(255, 225, 178, 0.68);
}

.rahmen-filter input[type="search"] {
    transform: rotate(-0.15deg);
}

.rahmen-filter select {
    transform: rotate(0.12deg);
}

.rahmen-filter input[type="search"]::placeholder {
    color: rgba(60, 31, 11, 0.78);
    opacity: 1;
}

.rahmen-filter input[type="search"]:focus,
.rahmen-filter select:focus {
    outline: 1px solid rgba(62, 29, 7, 0.58);
    outline-offset: 2px;
}

.rahmen-suche-symbol,
.rahmen-filter-button {
    position: relative;
    width: 28px;
    height: 30px;
    color: rgba(66, 31, 8, 0.76);
    filter:
        drop-shadow(0 -1px 0 rgba(48, 20, 4, 0.54))
        drop-shadow(0 1.5px 0 rgba(255, 224, 173, 0.72));
}

.rahmen-suche-symbol::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 4px;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.rahmen-suche-symbol::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 17px;
    width: 9px;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: left center;
}

.rahmen-filter-button {
    width: auto;
    padding: 2px 8px 3px;
    border: 1px solid currentColor;
    border-radius: 2px 4px 1px 3px;
    background: rgba(255, 235, 199, 0.1);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-shadow: 0 1px 0 rgba(255, 224, 173, 0.65), 0 -1px 1px rgba(48, 20, 4, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(46, 19, 4, 0.28),
        1px 1px 0 rgba(255, 224, 173, 0.52);
    cursor: pointer;
    transition: color 140ms ease, transform 140ms ease, filter 140ms ease;
}

.rahmen-filter-button:hover,
.rahmen-filter-button:focus-visible {
    color: #351704;
    outline: 0;
    transform: translateY(1px) rotate(-0.8deg) scale(1.025);
    filter:
        drop-shadow(0 -1.5px 0 rgba(43, 17, 3, 0.68))
        drop-shadow(0 1px 0 rgba(255, 224, 173, 0.6));
}


.holz-seitenueberschrift.holz-kompakt {
    --holzbuchstaben-hoehe: clamp(15px, 1.9vw, 28px);
}

.holz-seitenueberschrift.holz-sehr-kompakt {
    --holzbuchstaben-hoehe: clamp(12px, 1.45vw, 21px);
}

.holz-wort {
    display: flex;
    align-items: center;
    gap: clamp(0px, 0.12vw, 2px);
    white-space: nowrap;
}

.holzbuchstabe {
    display: block;
    width: auto;
    height: var(--holzbuchstaben-hoehe);
    transform: rotate(var(--holz-drehung, 0deg));
    transform-origin: 50% 60%;
    filter:
        drop-shadow(0 3px 2px rgba(47, 25, 10, 0.62))
        drop-shadow(0 1px 0 rgba(255, 226, 180, 0.48));
}

.holz-zeichen {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    min-width: calc(var(--holzbuchstaben-hoehe) * 0.35);
    height: var(--holzbuchstaben-hoehe);
    color: #b97838;
    font-family: Georgia, "Times New Roman", serif;
    font-size: calc(var(--holzbuchstaben-hoehe) * 0.78);
    font-weight: 900;
    line-height: 0.8;
    text-shadow: 0 3px 2px rgba(47, 25, 10, 0.62), 0 1px 0 rgba(255, 226, 180, 0.48);
    transform: rotate(var(--holz-drehung, 0deg));
    transform-origin: 50% 60%;
}


.note {
    --note-paper: #fff59d;
    --note-rotation: 0deg;
    --note-hover-rotation: 2deg;
    transform: rotate(var(--note-rotation));
    transform-origin: 50% 10px;
}

.note,
.notiz-papier {
    position: relative;
    padding: 42px 20px 20px;
    background:
        var(--papier-oberflaeche),
        radial-gradient(ellipse at var(--papier-licht-x, 12%) var(--papier-licht-y, 8%), rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(ellipse at var(--papier-schatten-x, 88%) var(--papier-schatten-y, 92%), rgba(91, 62, 28, 0.11), transparent 28%),
        repeating-linear-gradient(var(--papier-faser-winkel, 7deg), transparent 0 3px, rgba(76, 55, 29, 0.018) 4px),
        repeating-linear-gradient(calc(var(--papier-faser-winkel, 7deg) + 86deg), transparent 0 5px, rgba(255, 255, 255, 0.055) 6px),
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(92, 71, 35, 0.04) 28px),
        var(--note-paper);
    border: 1px solid rgba(91, 65, 31, 0.08);
    border-radius: 3px 1px 5px 2px;
    box-shadow:
        1px 2px 0 rgba(255, 255, 255, 0.32) inset,
        -2px -1px 0 rgba(82, 55, 25, 0.045) inset,
        3px 10px 18px rgba(43, 30, 18, 0.25);
    isolation: isolate;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.note::before {
    content: "";
    position: absolute;
    z-index: 1;
    right: -1px;
    bottom: -1px;
    width: 42px;
    height: 34px;
    background:
        linear-gradient(135deg, transparent 47%, rgba(88, 59, 26, 0.13) 49%, rgba(255, 255, 255, 0.3) 52%, transparent 67%);
    border-radius: 0 0 5px 0;
    pointer-events: none;
}

.note::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(84deg, transparent 0 47%, rgba(89, 61, 31, 0.05) 48%, rgba(255, 255, 255, 0.1) 49%, transparent 51%),
        linear-gradient(168deg, transparent 0 68%, rgba(85, 55, 25, 0.045) 69%, rgba(255, 255, 255, 0.08) 70%, transparent 72%);
    pointer-events: none;
}

.note > :not(.pin):not(.notiz-verschieben):not(.notiz-groesse) {
    position: relative;
    z-index: 1;
}

.note:hover,
.note:focus-within {
    z-index: 2;
    box-shadow: 0 13px 24px rgba(43, 30, 18, 0.3);
    transform: rotate(var(--note-hover-rotation));
}

.note > .pin,
.notizkarte[data-notiz-id] > .pin {
    position: absolute;
    top: -19px;
    left: 50%;
    z-index: 3;
    width: 58px;
    height: 58px;
    object-fit: contain;
    transform: translateX(-50%) rotate(calc(0deg - var(--note-rotation)));
    transform-origin: 50% 50%;
    filter: drop-shadow(0 4px 3px rgba(42, 25, 13, 0.35));
    transition: transform 160ms ease;
    pointer-events: none;
    user-select: none;
}

.note:hover > .pin,
.note:focus-within > .pin {
    transform: translateX(-50%) rotate(calc(0deg - var(--note-hover-rotation)));
}

.note h2,
.notizkarte h2 {
    margin: 0 0 10px;
    color: #33291f;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 1.08rem;
    line-height: 1.3;
}

.note p,
.notizkarte p {
    margin: 0;
    color: #4c4035;
}

.note-tone-1 {
    --note-paper: #fff59d;
}

.note-tone-3 {
    --note-paper: #cfeaf4;
}

.note-tone-4 {
    --note-paper: #dceebc;
}


.start-notizen {
    gap: clamp(28px, 4vw, 48px);
    margin-top: 34px;
    padding: 12px 8px 18px;
}

.start-notiz {
    min-height: 205px;
}


.statistik .kennzahl span {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-dark);
}


.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    padding: 10px 15px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.button:hover {
    background: var(--accent-dark);
    text-decoration: none;
}

.button-secondary {
    background: var(--surface-soft);
    color: var(--accent-dark);
    border: 1px solid var(--border);
}

.button-secondary:hover {
    background: #efe3d3;
}

.aktionsleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.formular-karte {
    max-width: 520px;
}

.formular-karte.breit {
    max-width: 820px;
}

form label {
    display: block;
    margin: 12px 0 6px;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 10px 12px;
    background: #fffaf0;
    color: var(--text);
    font: inherit;
}

textarea {
    resize: vertical;
}

.filterformular {
    display: grid;
    grid-template-columns: 1fr 220px auto;
    gap: 12px;
    align-items: end;
}


.notizen-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    gap: clamp(34px, 4vw, 52px) clamp(24px, 3vw, 40px);
    align-items: start;
    margin-top: 18px;
    padding: 8px;
}

.notizen-liste.notizen-listenansicht {
    display: flex;
    width: min(920px, 100%);
    margin-right: auto;
    margin-left: auto;
    flex-direction: column;
    gap: 15px;
}

.notizen-listenansicht .pinwand-platz {
    min-height: 0;
}

.notizen-listenansicht .pinwand-platz.ist-leer {
    display: none;
}

.notizen-listenansicht .notizkarte[data-notiz-id] {
    width: 100% !important;
    max-width: none !important;
}

.notizen-listenansicht .notiz-papier {
    width: 100% !important;
    max-width: none !important;
    height: 150px !important;
    min-height: 150px;
    padding: 34px 24px 13px;
    gap: 6px;
    resize: none;
}

.notizen-listenansicht .notizkarte[data-notiz-id] > .pin {
    top: -15px;
    left: 50%;
}

.notizen-listenansicht .notizkarte-inhalt p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important;
}

.notizen-listenansicht .notizkarte footer {
    display: flex !important;
    padding-top: 7px;
}

.notizen-listenansicht .notiz-verschieben,
.notizen-listenansicht .notiz-groesse {
    display: none;
}


.pinwand-platz {
    position: relative;
    min-width: 0;
    min-height: 255px;
}

.pinwand-platz > .notizkarte {
    width: var(--note-width, 100%);
}

.pinwand-platz::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px dashed transparent;
    border-radius: 5px 2px 7px 3px;
    pointer-events: none;
}

.pinwand-platz.drag-ziel::after {
    border-color: rgba(72, 42, 20, 0.42);
    background: rgba(255, 239, 200, 0.06);
    box-shadow: inset 0 0 12px rgba(66, 35, 13, 0.08);
}


.kategorie-formular {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 14px;
    align-items: end;
}

.kategorie-farbwahl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.kategorie-farbwahl input[type="color"] {
    width: 56px;
    height: 42px;
    padding: 3px;
    cursor: pointer;
}

.kategorie-name {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.kategorie-farbpunkt {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background: var(--kategorie-farbe);
    border: 1px solid rgba(74, 48, 21, 0.28);
    border-radius: 3px 1px 4px 2px;
    box-shadow: 1px 2px 3px rgba(54, 34, 15, 0.18);
    transform: rotate(-2deg);
}


.notizkarte {
    position: relative;
    isolation: isolate;
    display: block;
    cursor: pointer;
}

.notizkarte[data-notiz-id],
.notiz-drop-vorschau {
    --pin-size: clamp(38px, 2.8vw, 46px);
}

.notizkarte[data-notiz-id]:hover,
.notizkarte[data-notiz-id]:focus-within {
    z-index: 2;
}


.notiz-papier {
    z-index: 1;
    display: flex;
    width: 100%;
    height: var(--note-height, 255px);
    min-width: 180px;
    min-height: 120px;
    max-height: 620px;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
    resize: both;
    transform: rotate(var(--note-rotation));
    transform-origin: 50% 7px;
    backface-visibility: hidden;
    will-change: transform;
}

.notiz-papier::before {
    content: "";
    position: absolute;
    z-index: 1;
    right: -1px;
    bottom: -1px;
    width: var(--eckknick-breite, 42px);
    height: var(--eckknick-hoehe, 34px);
    background: linear-gradient(
        var(--eckknick-winkel, 135deg),
        transparent calc(var(--eckknick-kante, 47%) - 2%),
        rgb(88 59 26 / var(--eckknick-schatten, 0.13)) var(--eckknick-kante, 47%),
        rgb(255 255 255 / var(--eckknick-licht, 0.3)) calc(var(--eckknick-kante, 47%) + 3%),
        transparent calc(var(--eckknick-kante, 47%) + 18%)
    );
    border-radius: 0 0 var(--eckknick-rundung, 5px) 0;
    pointer-events: none;
}

.knick-links .notiz-papier::before {
    right: auto;
    left: -1px;
    transform: scaleX(-1);
}

.notiz-papier::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
        linear-gradient(
            var(--papier-knick-winkel, 84deg),
            transparent 0 calc(var(--knick-linie-eins, 88px) - var(--knick-linienbreite, 1px)),
            rgb(89 61 31 / var(--knick-schatten, 0.05)) var(--knick-linie-eins, 88px),
            rgb(255 255 255 / var(--knick-licht, 0.1)) calc(var(--knick-linie-eins, 88px) + var(--knick-linienbreite, 1px)),
            transparent calc(var(--knick-linie-eins, 88px) + var(--knick-linienbreite, 1px) + 2px)
        ),
        linear-gradient(
            var(--papier-falte-winkel, 168deg),
            transparent 0 calc(var(--knick-linie-zwei, 138px) - var(--knick-linienbreite, 1px)),
            rgb(85 55 25 / var(--knick-schatten, 0.045)) var(--knick-linie-zwei, 138px),
            rgb(255 255 255 / var(--knick-licht, 0.08)) calc(var(--knick-linie-zwei, 138px) + var(--knick-linienbreite, 1px)),
            transparent calc(var(--knick-linie-zwei, 138px) + var(--knick-linienbreite, 1px) + 2px)
        );
    background-position:
        var(--knick-versatz-x, -24px) var(--knick-versatz-y, -18px),
        calc(var(--knick-versatz-x, -24px) + 74px) calc(var(--knick-versatz-y, -18px) + 53px);
    background-repeat: repeat;
    background-size:
        var(--knick-muster-breite, 200px) var(--knick-muster-hoehe, 165px),
        var(--knick-muster-breite-zwei, 255px) var(--knick-muster-hoehe-zwei, 205px);
    pointer-events: none;
}

.notiz-papier > :not(.notiz-verschieben):not(.notiz-groesse) {
    position: relative;
    z-index: 1;
}

.notizkarte[data-notiz-id]:hover .notiz-papier,
.notizkarte[data-notiz-id]:focus-within .notiz-papier {
    box-shadow:
        1px 2px 0 rgba(255, 255, 255, 0.32) inset,
        -2px -1px 0 rgba(82, 55, 25, 0.045) inset,
        0 13px 24px rgba(43, 30, 18, 0.3);
    transform: rotate(var(--note-hover-rotation));
}


.notizkarte[data-notiz-id] > .pin,
.notiz-drop-vorschau > .pin {
    top: -15px;
    width: auto;
    height: var(--pin-size);
    max-width: none;
    object-fit: contain;
    transform: translateX(-50%) scale(var(--pin-scale, 0.9));
}

.notizkarte[data-notiz-id].notiz-wird-geoeffnet {
    pointer-events: none;
}

.notizkarte[data-notiz-id].notiz-wird-geoeffnet > .pin {
    animation: pinnadel-anheben 230ms ease-in forwards;
}

.notizkarte[data-notiz-id].notiz-wird-geoeffnet .notiz-papier {
    transform: translateY(3px) rotate(var(--note-rotation));
    box-shadow:
        1px 2px 0 rgba(255, 255, 255, 0.32) inset,
        -2px -1px 0 rgba(82, 55, 25, 0.045) inset,
        1px 5px 10px rgba(43, 30, 18, 0.2);
}

@keyframes pinnadel-anheben {
    to {
        opacity: 0.9;
        filter: drop-shadow(0 9px 5px rgba(42, 25, 13, 0.22));
        transform: translate(-50%, -18px) scale(var(--pin-scale, 0.9));
    }
}


.notizkarte h2 a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.notizkarte h2 a::after {
    content: "";
    position: absolute;
    inset: 0 0 18px;
    z-index: 2;
}

.notizkarte h2 a:focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: 4px;
}

.notizkarte-inhalt {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.notizkarte-inhalt p {
    display: -webkit-box;
    overflow: hidden;
    white-space: pre-line;
    -webkit-box-orient: vertical;
}


.notizkarte footer,
.detail-kopf {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    color: var(--muted);
    font-size: 0.92rem;
}

.notizkarte footer {
    flex: 0 0 auto;
    padding-top: 12px;
    border-top: 1px solid rgba(71, 54, 34, 0.16);
    font-size: 0.78rem;
}

.notizkarte.notiz-klein .notiz-papier {
    gap: 6px;
    padding-bottom: 12px;
}

.notizkarte.notiz-klein .notizkarte-inhalt p,
.notizkarte.notiz-klein footer {
    display: none;
}

.notizkarte-inhalt p[hidden] {
    display: none;
}


.notiz-verschieben {
    position: absolute;
    z-index: 4;
    top: var(--griff-versatz, 9px);
    right: 9px;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 1px solid rgba(73, 49, 24, 0.18);
    border-radius: 5px 3px 6px 4px;
    background: rgba(255, 247, 221, 0.16);
    cursor: grab;
    opacity: 0.72;
    transform: rotate(var(--griff-drehung, 0deg));
}

.notiz-verschieben::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 8px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(73, 49, 24, 0.72);
    box-shadow:
        8px 0 0 rgba(73, 49, 24, 0.68),
        0 6px 0 rgba(73, 49, 24, 0.66),
        8px 6px 0 rgba(73, 49, 24, 0.62),
        0 12px 0 rgba(73, 49, 24, 0.58),
        8px 12px 0 rgba(73, 49, 24, 0.54);
}

.notiz-verschieben:hover,
.notiz-verschieben:focus-visible {
    opacity: 0.95;
    background: rgba(255, 247, 221, 0.32);
    outline: 1px solid rgba(70, 45, 20, 0.44);
    outline-offset: 1px;
}

.notiz-verschieben:active {
    cursor: grabbing;
}

.notizkarte.wird-verschoben {
    opacity: 0.28;
}

.notiz-drop-vorschau {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    margin: 0;
    opacity: 0.46;
    pointer-events: none;
}

.notiz-drop-vorschau .notiz-papier {
    resize: none;
}

.notiz-drop-vorschau .notiz-verschieben,
.notiz-drop-vorschau .notiz-groesse {
    display: none;
}

.notiz-drag-abbild {
    position: fixed;
    z-index: 1000;
    top: -1000px;
    left: -1000px;
    margin: 0;
    opacity: 0.72;
    pointer-events: none;
    transform: none;
}


@media (min-width: 1181px) {
    .frontend-header.mit-rahmenwerkzeugen .rahmen-neue-notiz {
        position: fixed;
        z-index: 8;
        top: 0;
        height: var(--pinwand-rahmen);
    }

    .ansicht-notizen .rahmen-filter {
        right: auto;
        left: 53vw;
        width: min(460px, 30vw);
    }

    .ansicht-notizen .rahmen-navigation {
        right: calc(var(--pinwand-rahmen) + clamp(8px, 1.2vw, 20px));
        z-index: 8;
        max-width: 16vw;
    }
}

@media (min-width: 1181px) and (max-width: 1499px) {
    .frontend-header.mit-rahmenwerkzeugen .rahmen-neue-notiz {
        left: calc(51vw - 54px);
    }

    .frontend-header.mit-rahmenwerkzeugen .rahmen-neue-notiz > span:last-child {
        display: none;
    }

    .ansicht-notizen .rahmen-filter {
        left: calc(80vw - min(410px, 30vw));
        width: min(350px, 31.1vw);
    }
}

@media (min-width: 1500px) and (max-width: 1799px) {
    .ansicht-notizen .rahmen-filter {
        width: min(365px, 24.5vw);
    }
}

@media (min-width: 1500px) and (max-width: 1549px) {
    .ansicht-notizen .rahmen-filter {
        width: min(350px, 23.4vw);
    }
}

@media (min-width: 1500px) {
    .ansicht-notizen .rahmen-identitaet {
        max-width: 43vw;
    }

    .frontend-header.mit-rahmenwerkzeugen .rahmen-neue-notiz {
        left: calc(44vw - 58px);
    }
}


.notiz-groesse {
    position: absolute;
    z-index: 4;
    right: 4px;
    bottom: 4px;
    width: 14px;
    height: 14px;
    opacity: 0.48;
    pointer-events: none;
    background:
        linear-gradient(135deg, transparent 43%, rgba(69, 44, 20, 0.55) 45% 51%, transparent 53%),
        linear-gradient(135deg, transparent 67%, rgba(69, 44, 20, 0.55) 69% 75%, transparent 77%);
}

.notiz-kategorie {
    font-weight: 700;
}

.notizkarte.leerzustand {
    grid-column: 1 / -1;
    width: min(420px, 100%);
    min-height: 190px;
    margin: 0 auto;
    justify-content: center;
    cursor: default;
    resize: none;
}


.notiz-detail-zettel {
    position: relative;
    isolation: isolate;
    width: min(980px, 100%);
    margin: 20px auto calc(var(--pinwand-rahmen) + 48px);
    padding: clamp(32px, 4vw, 52px) clamp(24px, 5vw, 58px) clamp(30px, 4vw, 48px);
    overflow: hidden;
    background:
        var(--papier-oberflaeche),
        radial-gradient(ellipse at 9% 7%, rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(ellipse at 90% 92%, rgba(91, 62, 28, 0.11), transparent 28%),
        repeating-linear-gradient(8deg, transparent 0 3px, rgba(76, 55, 29, 0.018) 4px),
        repeating-linear-gradient(94deg, transparent 0 5px, rgba(255, 255, 255, 0.055) 6px),
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(92, 71, 35, 0.04) 28px),
        var(--note-paper, #fff59d);
    border: 1px solid rgba(91, 65, 31, 0.12);
    border-radius: 3px 1px 5px 2px;
    box-shadow:
        1px 2px 0 rgba(255, 255, 255, 0.32) inset,
        -2px -1px 0 rgba(82, 55, 25, 0.045) inset,
        5px 13px 25px rgba(43, 30, 18, 0.27);
    transform: rotate(-0.12deg);
}

.notiz-detail-zettel::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
        linear-gradient(86deg, transparent 0 115px, rgba(89, 61, 31, 0.025) 117px, rgba(255, 255, 255, 0.05) 119px, transparent 122px),
        linear-gradient(169deg, transparent 0 173px, rgba(85, 55, 25, 0.025) 175px, rgba(255, 255, 255, 0.045) 177px, transparent 180px);
    background-position:
        13px 8px,
        91px 63px;
    background-repeat: repeat;
    background-size:
        380px 300px,
        520px 400px;
    pointer-events: none;
}

.notiz-detail-zettel::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -1px;
    bottom: -1px;
    width: 58px;
    height: 46px;
    background: linear-gradient(136deg, transparent 46%, rgba(88, 59, 26, 0.12) 48%, rgba(255, 255, 255, 0.28) 52%, transparent 68%);
    pointer-events: none;
}

.notiz-detail-zettel > * {
    position: relative;
    z-index: 1;
}

.notiz-formular-zettel.formular-karte {
    position: relative;
    isolation: isolate;
    width: min(900px, 100%);
    margin: 20px auto 34px;
    padding: clamp(30px, 4vw, 48px) clamp(24px, 5vw, 56px) clamp(28px, 4vw, 44px);
    overflow: hidden;
    background:
        var(--papier-oberflaeche),
        radial-gradient(ellipse at 9% 7%, rgba(255, 255, 255, 0.46), transparent 25%),
        radial-gradient(ellipse at 90% 92%, rgba(91, 62, 28, 0.1), transparent 28%),
        repeating-linear-gradient(8deg, transparent 0 3px, rgba(76, 55, 29, 0.016) 4px),
        repeating-linear-gradient(94deg, transparent 0 5px, rgba(255, 255, 255, 0.06) 6px),
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(92, 71, 35, 0.035) 28px),
        var(--note-paper, #fffdf4);
    border: 1px solid rgba(91, 65, 31, 0.12);
    border-radius: 3px 1px 5px 2px;
    box-shadow:
        1px 2px 0 rgba(255, 255, 255, 0.32) inset,
        -2px -1px 0 rgba(82, 55, 25, 0.045) inset,
        5px 13px 25px rgba(43, 30, 18, 0.24);
    transform: rotate(-0.1deg);
    transition: background-color 160ms ease;
}

.notiz-formular-zettel::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
        linear-gradient(86deg, transparent 0 115px, rgba(89, 61, 31, 0.023) 117px, rgba(255, 255, 255, 0.05) 119px, transparent 122px),
        linear-gradient(169deg, transparent 0 173px, rgba(85, 55, 25, 0.023) 175px, rgba(255, 255, 255, 0.045) 177px, transparent 180px);
    background-position:
        13px 8px,
        91px 63px;
    background-repeat: repeat;
    background-size:
        380px 300px,
        520px 400px;
    pointer-events: none;
}

.notiz-formular-zettel::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -1px;
    bottom: -1px;
    width: 58px;
    height: 46px;
    background: linear-gradient(136deg, transparent 46%, rgba(88, 59, 26, 0.12) 48%, rgba(255, 255, 255, 0.28) 52%, transparent 68%);
    pointer-events: none;
}

.notiz-formular-zettel > * {
    position: relative;
    z-index: 1;
}

.notiz-formular-zettel h1 {
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(71, 54, 34, 0.17);
    color: #33291f;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: clamp(1.55rem, 3vw, 2.3rem);
    line-height: 1.22;
}

.notiz-formular-zettel form {
    display: grid;
    gap: 13px;
}

.notiz-formular-zettel label {
    margin: 0;
    color: rgba(66, 49, 34, 0.92);
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 0.86rem;
    font-weight: 700;
}

.notiz-formular-zettel input,
.notiz-formular-zettel select,
.notiz-formular-zettel textarea {
    border: 1px solid rgba(79, 49, 23, 0.34);
    border-radius: 3px 2px 4px 1px;
    background: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.24) inset,
        0 1px 0 rgba(78, 50, 24, 0.05);
}

.notiz-formular-zettel textarea {
    min-height: 285px;
    line-height: 1.7;
}

.notiz-formular-zettel .aktionsleiste {
    margin-top: 8px;
}

.notiz-formular-zettel .button {
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid rgba(79, 49, 23, 0.44);
    border-radius: 3px 2px 4px 1px;
    background: rgba(255, 249, 226, 0.26);
    color: rgba(66, 31, 8, 0.9);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 0.8rem;
    font-weight: 700;
    transform: rotate(-0.25deg);
}

.notiz-formular-zettel .button:hover,
.notiz-formular-zettel .button:focus-visible {
    background: rgba(255, 249, 226, 0.44);
    color: #321705;
}

.kategorien-zettel .kategorien-hinweis {
    margin: -12px 0 22px;
    color: rgba(76, 64, 53, 0.86);
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 0.9rem;
}

.kategorien-zettel h2 {
    margin: 28px 0 14px;
    padding-top: 18px;
    border-top: 1px solid rgba(71, 54, 34, 0.17);
    color: #33291f;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.25;
}

.kategorien-zettel .liste {
    display: grid;
    gap: 10px;
}

.kategorien-zettel .liste li {
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(79, 49, 23, 0.2);
    border-radius: 3px 2px 4px 1px;
    background: rgba(255, 255, 255, 0.22);
}

.kategorien-zettel .liste form {
    display: block;
    margin: 0;
}

.kategorien-zettel .kategorien-leer {
    margin: 0;
    color: rgba(76, 64, 53, 0.86);
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 0.9rem;
}

.kategorien-zettel .linkbutton {
    color: rgba(126, 39, 30, 0.88);
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 0.78rem;
    font-weight: 700;
}


.notiz-zurueck {
    position: absolute;
    top: 14px;
    left: 17px;
    z-index: 3;
    width: 34px;
    height: 28px;
    color: rgba(66, 31, 8, 0.74);
    filter:
        drop-shadow(0 -1px 0 rgba(48, 20, 4, 0.5))
        drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.38));
    transition: color 140ms ease, transform 140ms ease;
}

.notiz-zurueck::before,
.notiz-zurueck::after {
    content: "";
    position: absolute;
    top: 50%;
    background: currentColor;
}

.notiz-zurueck::before {
    left: 7px;
    width: 23px;
    height: 2px;
    transform: translateY(-50%) rotate(-0.8deg);
}

.notiz-zurueck::after {
    left: 7px;
    width: 11px;
    height: 11px;
    border: solid currentColor;
    border-width: 0 0 2px 2px;
    background: transparent;
    transform: translateY(-50%) rotate(45deg);
}

.notiz-zurueck:hover,
.notiz-zurueck:focus-visible {
    color: #351704;
    transform: translateX(-2px) rotate(-1deg);
}

.notiz-zurueck:focus-visible {
    outline: 1px dashed currentColor;
    outline-offset: 1px;
}


.notiz-detail-zettel .detail-kopf {
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(71, 54, 34, 0.17);
}

.notiz-detail-zettel .detail-kopf h1 {
    margin: 0 0 8px;
    color: #33291f;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.22;
}

.notiz-detail-zettel .detail-kopf p {
    margin: 0;
    color: rgba(76, 64, 53, 0.86);
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 0.84rem;
}

.detail-aktionen {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.detail-aktionen form {
    margin: 0;
}

.notiz-werkzeug {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border: 1px solid rgba(79, 49, 23, 0.44);
    border-radius: 3px 2px 4px 1px;
    background: rgba(255, 249, 226, 0.22);
    color: rgba(66, 31, 8, 0.9);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transform: rotate(-0.3deg);
    transition: color 130ms ease, background 130ms ease, transform 130ms ease;
}

.notiz-werkzeug:hover,
.notiz-werkzeug:focus-visible {
    background: rgba(255, 249, 226, 0.42);
    color: #321705;
    text-decoration: none;
    transform: translateY(1px) rotate(0.25deg);
}

.notiz-werkzeug-warnung {
    color: rgba(126, 39, 30, 0.88);
}


.notiz-detail-inhalt {
    min-height: 130px;
    padding: clamp(24px, 4vw, 42px) 1px;
    color: #40362d;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: clamp(1rem, 1.5vw, 1.14rem);
    line-height: 1.75;
    white-space: normal;
}

.notiz-freigabe {
    padding-top: 22px;
    border-top: 1px dashed rgba(71, 54, 34, 0.31);
}

.notiz-freigabe-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
}

.notiz-freigabe h2 {
    margin: 0;
    color: #33291f;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 1.08rem;
}

.notiz-freigabe p {
    margin: 0;
    color: rgba(76, 64, 53, 0.82);
    font-size: 0.83rem;
}

.freigabe-form {
    display: grid;
    grid-template-columns: auto minmax(130px, 190px) auto;
    gap: 10px;
    align-items: center;
    margin-top: 17px;
}

.freigabe-form label,
.freigabe-link label {
    margin: 0;
    color: rgba(66, 49, 34, 0.9);
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 0.78rem;
}

.freigabe-form select,
.freigabe-link input {
    border-color: rgba(79, 49, 23, 0.36);
    border-radius: 3px 1px 4px 2px;
    background: rgba(255, 250, 232, 0.36);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
    direction: ltr;
    text-align: left;
    font-family: Consolas, "Courier New", monospace;
}

.freigabe-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    margin: 14px 0;
}

.freigabe-link span {
    grid-column: 2;
    color: rgba(76, 64, 53, 0.72);
    font-size: 0.74rem;
}

.freigabe-liste {
    display: grid;
    gap: 0;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(71, 54, 34, 0.16);
}

.freigabe-liste li {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 0.65fr auto;
    gap: 14px;
    align-items: end;
    padding: 11px 2px;
    border-bottom: 1px solid rgba(71, 54, 34, 0.14);
    color: rgba(64, 54, 45, 0.9);
    font-size: 0.8rem;
}

.freigabe-liste span {
    min-width: 0;
}

.freigabe-liste small {
    display: block;
    margin-bottom: 2px;
    color: rgba(92, 72, 52, 0.74);
    font-size: 0.68rem;
    font-weight: 700;
}

.freigabe-status {
    font-weight: 700;
}

.freigabe-aktion {
    justify-self: end;
}

.notiz-detail-oeffentlich {
    margin-top: clamp(34px, 7vh, 76px);
}


.meldung {
    position: relative;
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.3), transparent 48%),
        var(--surface);
    border: 1px solid var(--border);
    border-left-width: 6px;
    box-shadow: 0 7px 16px rgba(57, 34, 16, 0.16);
    max-height: 120px;
    overflow: hidden;
    transition:
        opacity 280ms ease,
        transform 280ms ease,
        max-height 320ms ease,
        margin 320ms ease,
        padding 320ms ease,
        border-width 320ms ease;
}

.meldung.meldung-ausblenden {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    transform: translateY(-5px);
}

.meldung-erfolg {
    border-color: #7da26d;
}

.meldung-fehler {
    border-color: #c56b6b;
}

.meldung-hinweis {
    border-color: #c8ad75;
}


.linkbutton {
    border: 0;
    background: transparent;
    color: var(--accent-dark);
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-decoration: underline;
}

.liste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.liste li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 0.92rem;
}

.leerzustand {
    text-align: center;
}

.admin-header {
    padding-top: 18px;
}


@media (max-width: 760px) {
    .kopfzeile,
    .notizkarte footer,
    .detail-kopf {
        flex-direction: column;
    }

    .filterformular,
    .kategorie-formular {
        grid-template-columns: 1fr;
    }

    .karte {
        padding: 18px;
    }

    .notiz-detail-zettel {
        margin-top: 12px;
        padding: 28px 22px 30px;
        transform: none;
    }

    .detail-aktionen,
    .notiz-freigabe-kopf {
        justify-content: flex-start;
    }

    .notiz-freigabe-kopf {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .freigabe-form,
    .freigabe-link {
        grid-template-columns: 1fr;
    }

    .freigabe-link span {
        grid-column: 1;
    }

    .freigabe-liste li {
        grid-template-columns: 1fr 1fr;
    }

    .freigabe-aktion {
        justify-self: start;
    }

    .notizen-liste {
        grid-template-columns: 1fr;
        padding-right: 4px;
        padding-left: 4px;
    }

    .pinwand-platz {
        min-height: 220px;
    }

    .start-notizen {
        grid-template-columns: 1fr;
        padding-right: 4px;
        padding-left: 4px;
    }

}


@media (max-width: 640px) {
    .app-footer {
        font-size: 0.58rem;
    }

    .footer-signatur {
        left: calc(var(--pinwand-rahmen) + 6px);
        transform: translateY(-50%);
    }

    .footer-navigation {
        right: calc(var(--pinwand-rahmen) + 6px);
        gap: 7px;
    }
}


@media (max-width: 1180px) {
    .frontend-header.mit-rahmenwerkzeugen {
        padding-top: 14px;
    }

    .ansicht-notizen .app-main {
        top: calc(var(--pinwand-rahmen) + 116px);
    }

    .rahmen-identitaet {
        right: var(--pinwand-rahmen);
        left: var(--pinwand-rahmen);
        justify-content: center;
        max-width: none;
    }

    .holz-seitenueberschrift {
        max-width: calc(100vw - (var(--pinwand-rahmen) * 2) - 92px);
    }

    .rahmen-home {
        position: absolute;
        left: 0;
        margin-left: 0;
    }

    .rahmen-neue-notiz {
        position: absolute;
        right: 0;
    }

    .rahmen-neue-notiz > span:last-child {
        display: none;
    }

    .rahmen-filter {
        position: relative;
        right: auto;
        width: 100%;
        height: auto;
        padding: 8px 10px;
        background: rgba(248, 236, 212, 0.94);
        border: 1px solid rgba(104, 65, 29, 0.38);
        border-radius: 4px;
        box-shadow: var(--shadow);
    }

    .rahmen-ansicht {
        position: fixed;
        top: 0;
        right: calc(var(--pinwand-rahmen) + 38px);
        left: auto;
        height: var(--pinwand-rahmen);
        align-items: center;
        transform: none;
    }

    .rahmen-navigation {
        position: relative;
        right: auto;
        width: min(1120px, calc(100% - (var(--pinwand-rahmen) * 2) - 24px));
        max-width: none;
        height: auto;
        margin: 0 auto;
        padding: 8px 10px;
        background: rgba(248, 236, 212, 0.94);
        border: 1px solid rgba(104, 65, 29, 0.38);
        border-radius: 4px;
        box-shadow: var(--shadow);
        flex-wrap: wrap;
    }

    .rahmen-navigation a {
        color: var(--accent-dark);
        font-size: 0.82rem;
        text-shadow: none;
    }

    .rahmen-navigation a:hover,
    .rahmen-navigation a:focus-visible {
        text-shadow: none;
    }
}


@media (max-width: 560px) {
    .rahmen-ansicht {
        display: none;
    }

    .ansicht-notizen .app-main {
        top: calc(var(--pinwand-rahmen) + 154px);
    }

    .rahmen-filter {
        grid-template-columns: 28px minmax(0, 1fr) 62px;
    }

    .rahmen-filter select {
        grid-column: 2 / 4;
    }

    .notiz-papier {
        max-height: 520px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .note,
    .notiz-papier,
    .note > .pin,
    .notizkarte[data-notiz-id] > .pin,
    .rahmen-home,
    .rahmen-home::before,
    .rahmen-home::after,
    .rahmen-neue-notiz,
    .rahmen-filter-button,
    .meldung {
        transition: none;
    }

    .notizkarte[data-notiz-id].notiz-wird-geoeffnet > .pin {
        animation: none;
    }
}


.rahmen-filter-zuruecksetzen {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 9px;
    border-left: 1px solid rgba(79, 45, 16, 0.26);
    color: rgba(73, 38, 13, 0.88);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.66rem, 0.82vw, 0.78rem);
    font-weight: 700;
    white-space: nowrap;
}

.rahmen-filter-zuruecksetzen:hover,
.rahmen-filter-zuruecksetzen:focus-visible {
    color: #321705;
    text-decoration: none;
}

.formularbereich,
.formular-karte,
.notiz-freigabe,
.kategorien-layout,
.admin-inhalt {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.38), transparent 44%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow);
}

.formularbereich.klein {
    width: min(620px, 100%);
    margin: 26px auto;
}

.formularbereich h1,
.formular-karte h1,
.notiz-freigabe h2 {
    margin-top: 0;
}

.ansicht-admin .app-main {
    width: min(1120px, calc(100% - (var(--pinwand-rahmen) * 2) - 24px));
    max-width: 1120px;
}

.ansicht-admin .formularbereich,
.ansicht-admin .karte,
.ansicht-admin table {
    background-color: rgba(255, 248, 232, 0.96);
}

.ansicht-admin table {
    width: 100%;
    border-collapse: collapse;
}

.ansicht-admin th,
.ansicht-admin td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(118, 78, 37, 0.2);
    text-align: left;
}

.kennzahl span {
    display: block;
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--accent-dark);
}

.kennzahl p {
    margin-bottom: 0;
}

/* Lange Einzelansichten scrollen innerhalb der Pinwand.
   Der Scrollbereich umfasst die ganze Korkfläche zwischen den Holzrahmen.
   Dadurch laufen lange Notizen nicht mehr unter den oberen oder unteren Rahmen. */
body.ansicht-notiz_anzeigen,
body.ansicht-notiz_formular,
body.ansicht-kategorien,
body.ansicht-kontakt,
body.ansicht-impressum,
body.ansicht-agb,
body.ansicht-freigabe_oeffentlich,
body.ansicht-fehler {
    overflow: hidden;
}

.ansicht-notiz_anzeigen .app-main,
.ansicht-notiz_formular .app-main,
.ansicht-kategorien .app-main,
.ansicht-kontakt .app-main,
.ansicht-impressum .app-main,
.ansicht-agb .app-main,
.ansicht-freigabe_oeffentlich .app-main,
.ansicht-fehler .app-main {
    position: fixed;
    top: var(--pinwand-rahmen);
    right: var(--pinwand-rahmen);
    bottom: var(--pinwand-rahmen);
    left: var(--pinwand-rahmen);
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: clamp(18px, 2.4vw, 34px) clamp(16px, 2.6vw, 38px) calc(var(--pinwand-rahmen) + 44px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}