/* ==================================================
   GRUNDLAGEN
   ================================================== */

:root {

    --paper:#f5f1e8;
    --paper-dark:#e6decd;
    --ink:#1f1b16;
    --line:#b9af9d;

}


* {

    box-sizing:border-box;

}


body {

    margin:0;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.35) 0 2px,
            transparent 3px
        ),
        var(--paper);

    color:var(--ink);

    font-family:"Special Elite",monospace;

}


/* ==================================================
   SEITENLAYOUT
   ================================================== */

.page {

    max-width:1100px;

    margin:30px auto;

    display:grid;

    grid-template-columns:250px 1fr;

    gap:26px;

    padding:0 16px;

    align-items:start;

}


.content {

    background:rgba(249,246,238,.72);

    border:1px solid var(--line);

    padding:26px;

    box-shadow:3px 3px 0 rgba(0,0,0,.08);

    position:relative;

    z-index:1;

}


/* ==================================================
   SIDEBAR
   ================================================== */

.sidebar {

    background:rgba(230,222,205,.55);

    border:1px solid var(--line);

    padding:18px;

    height:fit-content;

    position:sticky;

    top:20px;

    z-index:10;

    box-shadow:3px 3px 0 rgba(0,0,0,.08);

}


.logo {

    background:#f9f6ee;

    border:1px solid var(--line);

    padding:22px;

    text-align:center;

    font-size:1.6rem;

    transform:rotate(-1deg);

    box-shadow:2px 2px 0 rgba(0,0,0,.08);

}


.logo img {

    width:34px;

    height:auto;

    vertical-align:middle;

}


.sidebar h3 {

    text-align:center;

    font-size:1rem;

}


.widget {

    background:#f8f4eb;

    border:1px solid var(--line);

    padding:12px;

    text-align:center;

    margin-bottom:15px;

}


.quote {

    background:#f9f6ee;

    border:1px solid var(--line);

    padding:15px;

    text-align:center;

    transform:rotate(1deg);

}


.divider {

    border-top:1px dashed var(--line);

    margin:20px 0;

}


/* --------------------------------------------------
   PIXEL-STICKER
   -------------------------------------------------- */

.pixel {

    text-align:center;

    font-size:1.5rem;

    margin:15px;

}


.pixel img {

    width:48px;

    height:auto;

    display:block;

    margin:auto;

    transition:.2s;

}


.pixel img:hover {

    transform:scale(1.08) rotate(-2deg);

}


/* --------------------------------------------------
   SIDEBAR-STICKER
   -------------------------------------------------- */

.sidebar-sticker {

    text-align:right;

    margin-top:20px;

}


.sidebar-sticker img {

    width:110px;

    height:auto;

    transform:rotate(-30deg);

}


/* ==================================================
   SEITENNAVIGATION
   ================================================== */

.nav {

    list-style:none;

    margin:15px 0 0;

    padding:0;

}


.nav li {

    margin:8px 0;

}


.nav a {

    display:block;

    text-align:center;

    text-decoration:none;

    color:var(--ink);

    background:#f9f6ee;

    border:1px solid var(--line);

    padding:10px;

    box-shadow:2px 2px 0 rgba(0,0,0,.08);

    transition:all .2s ease;

}


.nav a:hover {

    background:var(--paper-dark);

    transform:rotate(-1deg);

}


/* ==================================================
   HEADER & CONTENT
   ================================================== */

/* --------------------------------------------------
   OBERER BEREICH
   -------------------------------------------------- */

.topline {

    border-bottom:1px dashed var(--line);

    padding-bottom:10px;

    margin-bottom:20px;

}


.header {

    display:flex;

    justify-content:space-between;

    align-items:end;

    position:relative;

}


.header h1 {

    font-size:3rem;

    font-weight:normal;

    margin:0;

}

/* --------------------------------------------------
   OPTIONALE TRENNLINIE UNTER DER ÜBERSCHRIFT
   -------------------------------------------------- */

.section-divider {

    border-bottom:1px dashed var(--line);

    padding-bottom:20px;

    margin-bottom:20px;

}

/* --------------------------------------------------
   EINTRAGS-NAVIGATION
   -------------------------------------------------- */

.entry-navigation {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:0;

    padding:0 4px;

    transform:translateY(18px);

}


.entry-navigation button {

    background:none;

    border:none;

    padding:3px 0;

    font-family:"Special Elite", monospace;

    font-size:.7rem;

    color:#45423d;

    cursor:pointer;

    opacity:1;

}


.entry-navigation button:hover {

    opacity:1;

    text-decoration:underline;

}


.entry-navigation button:disabled {

    opacity:.2;

    cursor:default;

    text-decoration:none;

}

/* --------------------------------------------------
   EINTRAG
   -------------------------------------------------- */

/* --------------------------------------------------
   TAGEBUCH-SEITE
   -------------------------------------------------- */

.entry {

    position:relative;

    margin-top:20px;

    padding:32px 25px 40px 35px;

    background-color:#f8f5ec;

    background-image:
        linear-gradient(
            to bottom,
            transparent 31px,
            rgba(105,125,135,.18) 31px,
            rgba(105,125,135,.18) 32px
        );

    background-size:100% 32px;

    border:1px solid #c5bcaa;

    box-shadow:
        4px 5px 0 rgba(0,0,0,.07);

}


/* --------------------------------------------------
   DATUM
   -------------------------------------------------- */

.date {

    font-size:.9rem;

    margin-bottom:0;

    line-height:32px;
	
    transform:translateY(-22px);

}


.weekday {

    margin-left:5px;

    font-size:.9rem;

    color:#45423d;

}

/* --------------------------------------------------
   TAGES-META
   -------------------------------------------------- */

.entry-meta {

    position:absolute;

    top:42px;

    left:35px;

    font-family:"Special Elite",monospace;

    font-size:.68rem;

    line-height:20px;

    color:#45423d;

    opacity:.9;

}

.entry-meta a {

    color:#45423d;

    text-decoration:underline;

    text-decoration-style:dotted;

    text-underline-offset:1px;

}


.entry-meta a:hover {

    text-decoration-style:solid;

}



/* --------------------------------------------------
   TEXTBEREICH
   -------------------------------------------------- */

.note {

    background:transparent;

    border:none;

    padding:0;

    box-shadow:none;

    transform:translateY(-8px);

}


.note h2 {

    font-size:1.5rem;

    font-weight:normal;

    margin:0 0 16px;

    line-height:32px;

    transform:translateY(+12px);

}


/* --------------------------------------------------
   TEXT AUF DEM LINIENRASTER
   -------------------------------------------------- */

.note p {

    margin:0;

    font-family:Arial,sans-serif;

    font-size:1rem;

    line-height:32px;

}

/* --------------------------------------------------
   TINTENKLECKS
   -------------------------------------------------- */

.ink-blot {

    position:absolute;

    bottom:18px;

    right:25px;

    width:80px;

    height:auto;

    opacity:.85;

    pointer-events:none;

    z-index:2;

}


/* --------------------------------------------------
   MARKDOWN-LINKS
   -------------------------------------------------- */

.note a {

    color:#6f5b45;

    text-decoration:none;

    border-bottom:1px dotted #6f5b45;

}


.note a:hover {

    border-bottom:1px solid #6f5b45;

}


/* --------------------------------------------------
   TEXTSEITEN
   -------------------------------------------------- */

.text-page {

    padding:20px 0;

}


.text-page .note {

    max-width:700px;

}


.text-page p {

    font-family:Arial,sans-serif;

    font-size:1rem;

    line-height:1.8;

}


/* --------------------------------------------------
   TXT-INHALT
   -------------------------------------------------- */

#text {

    white-space:pre-wrap;

    font-family:Arial,sans-serif;

    line-height:1.8;

}


/* --------------------------------------------------
   HERZ / KLEINE ZUSATZELEMENTE
   -------------------------------------------------- */

.heart {

    margin-top:10px;

}



/* ==================================================
   NOTIZZETTEL (unabhängig voneinander)
   ================================================== */

/* ==================================================
   CURRENTLY – SIDEBAR
   ================================================== */

/* --------------------------------------------------
   GRUNDFORM
   -------------------------------------------------- */

.currently-note {

    position:relative;

    width:190px;

    margin:25px auto 0;

    padding:35px 18px 18px 30px;

    border:1px solid #c5bcaa;

    background-color:#e9eee7;

    background-image:
        linear-gradient(
            to bottom,
            transparent 23px,
            rgba(105,125,135,.16) 23px,
            rgba(105,125,135,.16) 24px
        );

    background-size:100% 24px;

    box-shadow:
        3px 4px 5px rgba(0,0,0,.10);

    /* Zettel leicht schräg */
    transform:rotate(-1.5deg);

    overflow:hidden;

    z-index:20;

}


/* --------------------------------------------------
   ROTE RANDLINIE
   -------------------------------------------------- */

.currently-note::after {

    content:"";

    position:absolute;

    top:0;
    bottom:0;

    left:20px;

    width:1px;

    background:rgba(155,105,100,.30);

}


/* --------------------------------------------------
   LOCHUNGEN OBEN
   -------------------------------------------------- */

.currently-note::before {

    content:"";

    position:absolute;

    top:7px;

    left:30px;

    right:18px;

    height:14px;

    background:
        radial-gradient(
            circle,
            #e6decd 0 5px,
            #b9af9d 5px 6px,
            transparent 6px
        );

    background-size:28px 14px;

    background-repeat:repeat-x;

}


/* --------------------------------------------------
   ÜBERSCHRIFT
   -------------------------------------------------- */

.currently-note h3 {

    position:relative;

    z-index:2;

    margin:0 0 10px;

    font-family:"Special Elite",monospace;

    font-size:.9rem;

    font-weight:normal;

}


/* --------------------------------------------------
   TEXT
   -------------------------------------------------- */

.currently-content {

    position:relative;

    z-index:2;

    font-family:Arial,sans-serif;

    font-size:.8rem;

    line-height:1.45;

}


.currently-content p {

    margin:0 0 8px;

}


.currently-content p:last-child {

    margin-bottom:0;

}


.currently-content strong {

    font-family:"Special Elite",monospace;

    font-weight:normal;

    font-size:.72rem;

    opacity:.6;

}





/* ==================================================
   BRAIN DUMP – MAIN BEREICH
   ================================================== */

/* --------------------------------------------------
   GRUNDFORM
   -------------------------------------------------- */

.brain-note {

    position:relative;

    width:210px;

    margin:-100px 0 20px auto;

    padding:35px 18px 18px 30px;

    border:1px solid #c5bcaa;

    background-color:#f4e7e5;

    background-image:
        linear-gradient(
            to bottom,
            transparent 23px,
            rgba(105,125,135,.16) 23px,
            rgba(105,125,135,.16) 24px
        );

    background-size:100% 24px;

    box-shadow:
        3px 4px 5px rgba(0,0,0,.10);

    transform:rotate(1.5deg);

    overflow:hidden;

    z-index:20;

}


/* --------------------------------------------------
   ROTE RANDLINIE
   -------------------------------------------------- */

.brain-note::after {

    content:"";

    position:absolute;

    top:0;
    bottom:0;

    left:20px;

    width:1px;

    background:rgba(155,105,100,.30);

}


/* --------------------------------------------------
   LOCHUNGEN OBEN
   -------------------------------------------------- */

.brain-note::before {

    content:"";

    position:absolute;

    top:7px;
    left:30px;
    right:18px;

    height:14px;

    background:
        radial-gradient(
            circle,
            #f8f5ec 0 5px,
            #d8d2c7 5px 6px,
            transparent 6px
        );

    background-size:28px 14px;
    background-repeat:repeat-x;

}


/* --------------------------------------------------
   ÜBERSCHRIFT
   -------------------------------------------------- */

.brain-note h3 {

    position:relative;

    z-index:2;

    margin:0 0 10px;

    font-family:"Special Elite",monospace;

    font-size:.9rem;

    font-weight:normal;

}


/* --------------------------------------------------
   TEXT
   -------------------------------------------------- */

.brain-content {

    position:relative;

    z-index:2;

    font-family:Arial,sans-serif;

    font-size:.72rem;

    line-height:1.45;

}


.brain-content p {

    margin:0 0 8px;

}


.brain-content p:last-child {

    margin-bottom:0;

}


.brain-content strong {

    font-family:"Special Elite",monospace;

    font-weight:normal;

    font-size:.68rem;

    opacity:.6;

}
/* ==================================================
   KALENDER
   ================================================== */

.item {

    padding:7px;

    margin:4px 0;

    cursor:pointer;

}


.item:hover {

    text-decoration:underline;

}


.year {

    font-size:1.1rem;

    font-weight:bold;

}


.month {

    margin-left:15px;

}


.day {

    margin:0;

    padding:0;

    font-size:.9rem;

    line-height:1.8;

    position:relative;

}


.children {

    display:none;

}


.days {

    margin-left:35px;

    width:max-content;

    display:flex;

    gap:8px;

}


.day-column {

    flex:none;

    width:max-content;

}


/* --------------------------------------------------
   PLUS / MINUS BEI JAHR UND MONAT
   -------------------------------------------------- */

.year::before,
.month::before {

    content:"+";

    display:inline-block;

    width:18px;

    font-weight:bold;

}


.year.open::before,
.month.open::before {

    content:"−";

}


/* --------------------------------------------------
   AKTUELLEN TAG HERVORHEBEN
   -------------------------------------------------- */

.day.active {

    position:relative;

    font-weight:bold;

}


.day.active::before {

    content:"[";

    position:absolute;

    right:100%;

}


.day.active::after {

    content:"]";

    position:absolute;

    left:100%;

}


/* --------------------------------------------------
   VIDEO-VORSCHAU BEIM DARÜBERFAHREN
   -------------------------------------------------- */

.video-preview {

    position:absolute;

    left:calc(100% + 8px);

    top:50%;

    transform:
        translateY(-50%)
        rotate(-2deg);

    width:120px;

    height:auto;

    background:#f9f6ee;

    border:1px solid var(--line);

    padding:4px;

    box-shadow:2px 2px 0 rgba(0,0,0,.12);

    z-index:20;

    pointer-events:none;

}

/* ==================================================
   SQUARED NOTE – KARIERT
   ================================================== */

.squared-note {

    position:relative;

    width:210px;

    margin:30px 0 20px auto;

    padding:28px 18px 18px 30px;

    border:1px solid #c5bcaa;

    background-color:#f4e7e5;

    background-image:
        linear-gradient(
            to right,
            rgba(105,125,135,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(105,125,135,.12) 1px,
            transparent 1px
        );

    background-size:18px 18px;

    box-shadow:
        3px 4px 5px rgba(0,0,0,.10);

    transform:rotate(-1deg);

    overflow:hidden;

    z-index:5;

}


/* --------------------------------------------------
   ROTE RANDLINIE
   -------------------------------------------------- */

.squared-note::after {

    content:"";

    position:absolute;

    top:0;
    bottom:0;

    left:20px;

    width:1px;

    background:rgba(155,105,100,.30);

}


/* --------------------------------------------------
   LOCHUNGEN OBEN
   -------------------------------------------------- */

.squared-note::before {

    content:"";

    position:absolute;

    top:7px;

    left:30px;

    right:18px;

    height:14px;

    background:
        radial-gradient(
            circle,
            #e6decd 0 5px,
            #b9af9d 5px 6px,
            transparent 6px
        );

    background-size:28px 14px;

    background-repeat:repeat-x;

}


/* --------------------------------------------------
   ÜBERSCHRIFT
   -------------------------------------------------- */

.squared-note h3 {

    position:relative;

    z-index:2;

    margin:0 0 10px;

    font-family:"Special Elite",monospace;

    font-size:.9rem;

    font-weight:normal;

}


/* --------------------------------------------------
   TEXT
   -------------------------------------------------- */

.squared-note-content {

    position:relative;

    z-index:2;

    font-family:Arial,sans-serif;

    font-size:.8rem;

    line-height:1.45;

}


.squared-note-content p {

    margin:0 0 8px;

}


.squared-note-content p:last-child {

    margin-bottom:0;

}

/* ==================================================
   TITLE NOTE
   ================================================== */

.title-note {

    position:relative;

    width:100%;

    box-sizing:border-box;

    margin-bottom:25px;

    padding:30px 18px 16px 30px;

    border:1px solid #c5bcaa;

    background-color:#f9f6ee;

    background-image:
        linear-gradient(
            to bottom,
            transparent 23px,
            rgba(105,125,135,.14) 23px,
            rgba(105,125,135,.14) 24px
        );

    background-size:100% 24px;

    box-shadow:
        3px 4px 5px rgba(0,0,0,.10);

    transform:rotate(-1deg);

    overflow:visible;

}


/* --------------------------------------------------
   LOCHUNGEN LINKS
   -------------------------------------------------- */

.title-note::before {

    content:"";

    position:absolute;

    top:18px;
    bottom:18px;

    left:9px;

    width:11px;

    background:
        radial-gradient(
            circle,
            #e6decd 0 5px,
            #b9af9d 5px 6px,
            transparent 6px
        );

    background-size:11px 32px;

    background-repeat:repeat-y;

}


/* --------------------------------------------------
   TITEL "VIDEO DIARY" – PAPIER-AUSSCHNITT
   -------------------------------------------------- */

.title-note-logo {

    position:relative;

    display:block;

    width:82%;

    box-sizing:border-box;

    margin:0 auto 24px;

    padding:10px 18px 12px;

    font-family:"Special Elite",monospace;

    font-size:1.55rem;

    line-height:1.05;

    color:#38352f;

    background:#fffdf6;

    box-shadow:
        2px 3px 4px rgba(0,0,0,.10);

    transform:rotate(1.5deg);

    z-index:2;

}


/* --------------------------------------------------
   GERISSENER RAND
   -------------------------------------------------- */

.title-note-logo::before {

    content:"";

    position:absolute;

    top:-3px;
    bottom:-3px;

    left:-5px;
    right:-5px;

    background:#fffdf6;

    clip-path:polygon(
        0% 3%,
        5% 0%,
        11% 3%,
        17% 1%,
        23% 4%,
        29% 1%,
        35% 3%,
        42% 0%,
        49% 3%,
        56% 1%,
        63% 4%,
        70% 1%,
        77% 3%,
        84% 0%,
        91% 3%,
        100% 1%,

        99% 96%,
        93% 99%,
        87% 96%,
        81% 100%,
        75% 97%,
        68% 100%,
        61% 96%,
        54% 99%,
        47% 97%,
        40% 100%,
        33% 96%,
        26% 99%,
        19% 97%,
        12% 100%,
        6% 96%,
        0% 98%
    );

    z-index:-1;

}


/* --------------------------------------------------
   WORT VIDEO
   -------------------------------------------------- */

.title-word-video {

    display:block;

    text-align:left;

    margin-left:4px;

}


/* --------------------------------------------------
   WORT DIARY
   -------------------------------------------------- */

.title-word-diary {

    display:block;

    text-align:right;

    margin-right:5px;

}


/* --------------------------------------------------
   AUFGEKLEBTER STERN
   -------------------------------------------------- */

.title-note-logo img {

    position:absolute;

    width:36px;

    height:auto;

    right:-25px;

    top:-20px;

    transform:rotate(11deg);

    filter:
        drop-shadow(1px 2px 1px rgba(0,0,0,.15));

    z-index:3;

}


/* --------------------------------------------------
   HOW TO
   -------------------------------------------------- */

.title-note-howto {

    position:relative;

    z-index:2;

    font-family:Arial,sans-serif;

    font-size:.75rem;

    line-height:1.45;

    padding-top:3px;
	
	transform:translateY(-7px);

}


.title-note-howto h3 {

    margin:0 0 8px;

    font-family:"Special Elite",monospace;

    font-size:.9rem;

    font-weight:normal;

}


.title-note-howto p {

    margin:0 0 7px;
	
	padding-left:15px;

}


.title-note-howto p:last-child {

    margin-bottom:0;

}


/* ==================================================
   ARCHIV & SUCHE
   ================================================== */

/* --------------------------------------------------
   ANZAHL DER GESAMTEN EINTRÄGE
   -------------------------------------------------- */

#entry-count {

    margin-top:15px;

    padding-top:10px;

    border-top:1px dashed var(--line);

    text-align:center;

    font-size:.8rem;

}


/* --------------------------------------------------
   SURPRISE-ME-BUTTON
   -------------------------------------------------- */

#random-entry {

    display:block;

    width:100%;

    margin-top:12px;

    padding:9px;

    border:1px solid var(--line);

    background:#f9f6ee;

    color:var(--ink);

    font-family:"Special Elite",monospace;

    font-size:.85rem;

    cursor:pointer;

    box-shadow:2px 2px 0 rgba(0,0,0,.08);

    transform:rotate(-1deg);

}


#random-entry:hover {

    background:var(--paper-dark);

    transform:rotate(1deg);

}


/* --------------------------------------------------
   ARCHIVSUCHE
   -------------------------------------------------- */

#archive-search {

    width:100%;

    margin-top:12px;

    padding:8px 10px;

    background:#ffffff;

    border:1px solid var(--line);

    color:var(--ink);

    font-family:"Special Elite",monospace;

    outline:none;

}


#archive-search:focus {

    border-color:#8b7f6c;

}


/* --------------------------------------------------
   SUCHERGEBNISSE
   -------------------------------------------------- */

#search-results {

    margin-top:8px;

}


.search-result {

    position:relative;

    padding:5px 0;

    cursor:pointer;

    font-size:.85rem;

    overflow-wrap:anywhere;

    word-break:break-word;

}


.search-result > div {

    max-width:100%;

    overflow-wrap:anywhere;

    word-break:break-word;

}


.search-result:hover {

    text-decoration:underline;

}


.search-result-date {

    font-size:.75rem;

    opacity:.7;

}


.search-result-tags {

    margin-top:3px;

    font-size:.7rem;

    opacity:.65;

    overflow-wrap:anywhere;

    word-break:break-word;

}


/* --------------------------------------------------
   VIDEO-VORSCHAU BEI SUCHERGEBNISSEN
   -------------------------------------------------- */

.search-video-preview {

    position:absolute;

    left:calc(100% + 10px);

    top:50%;

    transform:
        translateY(-50%)
        rotate(2deg);

    width:120px;

    height:auto;

    background:#f9f6ee;

    border:1px solid var(--line);

    padding:4px;

    box-shadow:2px 2px 0 rgba(0,0,0,.12);

    z-index:30;

    pointer-events:none;

}


/* --------------------------------------------------
   TAGS AM BEITRAG
   -------------------------------------------------- */

#entry-tags {

    margin-top:0px;

    min-height:18px;

    opacity:0;

    transition:opacity .2s ease;

    pointer-events:none;

}


.note:hover #entry-tags {

    opacity:1;

    pointer-events:auto;

}


.entry-tag {

    display:inline-block;

    margin-right:8px;

    font-size:.75rem;

    color:#6f5b45;

    cursor:pointer;

}


.entry-tag::before {

    content:"· ";

}


.entry-tag:hover {

    text-decoration:underline;

}


/* ==================================================
   VIDEO & MEDIA
   ================================================== */

/* --------------------------------------------------
   VIDEO-BEREICH
   -------------------------------------------------- */

.media-row {

    display:grid;

    grid-template-columns:400px 1fr;

    gap:25px;

    align-items:start;

}


video {

    width:100%;

    background:black;

    border:1px solid #8b7f6c;

    box-shadow:2px 2px 0 rgba(0,0,0,.12);

}


/* --------------------------------------------------
   VIDEOS AUF TEXTSEITEN
   -------------------------------------------------- */

.text-page video {

    width:100%;

    max-width:800px;

    display:block;

    margin:20px auto;

    border:1px solid #8b7f6c;

    box-shadow:2px 2px 0 rgba(0,0,0,.12);

}

/* --------------------------------------------------
   VIDEO – FOTOECKEN
   -------------------------------------------------- */

.video-photo {

    position:relative;

    display:inline-block;

}


.video-photo video {

    display:block;

}


/* --------------------------------------------------
   KLEBE-ECKEN UM VIDEO
   -------------------------------------------------- */

.photo-corner {

    position:absolute;

    width:22px;

    height:22px;

    background:#e0d4bd;

    opacity:.9;

    z-index:5;

    pointer-events:none;

    box-shadow:
        1px 1px 2px rgba(0,0,0,.08);

}


/* OBEN LINKS */

.corner-tl {

    top:-4px;

    left:-4px;

    clip-path:polygon(
        0 0,
        100% 0,
        0 100%
    );

}


/* OBEN RECHTS */

.corner-tr {

    top:-4px;

    right:-4px;

    clip-path:polygon(
        0 0,
        100% 0,
        100% 100%
    );

}


/* UNTEN LINKS */

.corner-bl {

    bottom:-4px;

    left:-4px;

    clip-path:polygon(
        0 0,
        0 100%,
        100% 100%
    );

}


/* UNTEN RECHTS */

.corner-br {

    bottom:-4px;

    right:-4px;

    clip-path:polygon(
        100% 0,
        100% 100%,
        0 100%
    );

}


/* ==================================================
   STICKER & SPRECHBLASE
   ================================================== */

/* --------------------------------------------------
   ALLGEMEINE STICKER
   -------------------------------------------------- */

.sticker {

    position:absolute;

    z-index:5;

}


.sticker img {

    width:180px;

    height:auto;

}


/* --------------------------------------------------
   POSITION UNTEN RECHTS
   -------------------------------------------------- */

.bottom-right {

    right:15px;

    bottom:15px;

}


/* --------------------------------------------------
   SPRECHBLASE
   -------------------------------------------------- */

.speech-bubble {

    display:inline-block;

    position:relative;

    background:#ffffff;

    border:1px solid var(--line);

    padding:7px 12px;

    font-family:"Special Elite",monospace;

    font-size:.8rem;

    transform:rotate(8deg);

    margin-bottom:10px;

    margin-left:40px;

}


/* --------------------------------------------------
   SPRECHBLASEN-ZIPFEL
   -------------------------------------------------- */

.speech-bubble::after {

    content:"";

    position:absolute;

    bottom:-8px;

    left:20px;

    width:14px;

    height:14px;

    background:#ffffff;

    border-right:1px solid var(--line);

    border-bottom:1px solid var(--line);

    transform:rotate(45deg);

}


/* ==================================================
   KONTAKTFORMULAR
   ================================================== */

/* --------------------------------------------------
   TEXTFELD
   -------------------------------------------------- */

textarea {

    width:100%;

    max-width:300px;

    height:100px;

    padding:10px;

    background:#ffffff;

    border:1px solid var(--line);

    color:var(--ink);

    font-family:Arial,sans-serif;

    resize:vertical;

}


/* --------------------------------------------------
   STATUSMELDUNG
   -------------------------------------------------- */

#form-status {

    margin-top:15px;

    display:inline-block;

    padding:10px 16px;

    background:#f9f6ee;

    border:1px solid var(--line);

    box-shadow:2px 2px 0 rgba(0,0,0,.08);

    font-family:"Special Elite",monospace;

    font-size:.9rem;

    transform:rotate(-1deg);

}


/* --------------------------------------------------
   SENDEN-BUTTON
   -------------------------------------------------- */

#send-button {

    margin-top:0;

    padding:10px 16px;

    border:1px solid var(--line);

    background:#f9f6ee;

    color:var(--ink);

    font-family:"Special Elite",monospace;

    cursor:pointer;

    box-shadow:2px 2px 0 rgba(0,0,0,.08);

    transform:rotate(-1deg);

}


#send-button:hover {

    background:var(--paper-dark);

}


/* ==================================================
   THOUGHTS / COLLEGEBLOCK
   ================================================== */

/* --------------------------------------------------
   GEDANKEN-BEREICH
   -------------------------------------------------- */

.thoughts-page {

    padding:35px 10px 20px;

}


/* --------------------------------------------------
   PAPIER
   -------------------------------------------------- */

.thought-paper {

    position:relative;

    max-width:760px;

    margin:30px auto 60px;

    padding:58px 65px 65px 75px;

    background-color:#f8f5ec;

    background-image:
        linear-gradient(
            to bottom,
            transparent 31px,
            rgba(105,125,135,.18) 31px,
            rgba(105,125,135,.18) 32px
        );

    background-size:100% 32px;

    background-position:0 0;

    border:1px solid #c5bcaa;

    box-shadow:
        4px 5px 0 rgba(0,0,0,.07);

    transform:rotate(-.5deg);

}


/* --------------------------------------------------
   OBERER RAND
   -------------------------------------------------- */

.thought-paper::before {

    content:"";

    position:absolute;

    top:-1px;
    left:0;
    right:0;

    height:12px;

    background:#f8f5ec;

    border-top:1px solid #c5bcaa;

    z-index:2;

}


/* --------------------------------------------------
   PAPER-CONTENT
   -------------------------------------------------- */

.paper-content {

    position:relative;

    z-index:4;

}


.paper-content::before {

    content:"";

    position:absolute;

    top:-58px;
    bottom:-65px;

    left:-23px;

    width:1px;

    background:rgba(155,105,100,.27);

}


/* --------------------------------------------------
   SPIRAL-LÖCHER
   -------------------------------------------------- */

.spiral-holes {

    position:absolute;

    top:7px;

    left:70px;
    right:70px;

    height:22px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:5;

}


.spiral-holes span {

    position:relative;

    display:block;

    width:16px;
    height:16px;

    min-width:16px;
    min-height:16px;

    border-radius:50%;

    background:#e6decd;

    border:1px solid #b9af9d;

    box-shadow:
        inset 2px 2px 2px rgba(0,0,0,.14);

}


/* --------------------------------------------------
   RISS-SPUREN
   -------------------------------------------------- */

.spiral-holes span::before {

    content:"";

    position:absolute;

    left:50%;

    bottom:100%;

    width:3px;

    height:14px;

    background:#b9af9d;

    clip-path:polygon(

        35% 0,
        85% 0,

        70% 20%,
        100% 38%,

        55% 55%,
        80% 72%,

        40% 100%,
        0 100%,

        25% 75%,
        0 55%,

        30% 35%,
        10% 18%

    );

    transform:
        translateX(-50%)
        rotate(-4deg);

    transform-origin:bottom;

}


.spiral-holes span::after {

    content:"";

    position:absolute;

    left:50%;

    bottom:100%;

    width:2px;

    height:9px;

    background:#c2b7a5;

    clip-path:polygon(

        30% 0,
        100% 0,

        65% 30%,
        100% 58%,

        55% 100%,
        0 100%,

        30% 62%,
        5% 35%

    );

    transform:
        translateX(-50%)
        rotate(8deg);

    transform-origin:bottom;

}


/* --------------------------------------------------
   INDIVIDUELLE RISS-LÄNGEN
   -------------------------------------------------- */

.spiral-holes span:nth-child(1)::before {

    height:11px;

    transform:
        translateX(-50%)
        rotate(-4deg);

}


.spiral-holes span:nth-child(2)::before {

    height:11px;

    transform:
        translateX(-50%)
        rotate(5deg);

}


.spiral-holes span:nth-child(3)::before {

    height:11px;

    transform:
        translateX(-50%)
        rotate(-5deg);

}


.spiral-holes span:nth-child(4)::before {

    height:12px;

    transform:
        translateX(-50%)
        rotate(3deg);

}


.spiral-holes span:nth-child(5)::before {

    height:11px;

    transform:
        translateX(-50%)
        rotate(-4deg);

}


.spiral-holes span:nth-child(6)::before {

    height:13px;

    transform:
        translateX(-50%)
        rotate(6deg);

}


/* --------------------------------------------------
   DATUM
   -------------------------------------------------- */

.thought-date {

    margin-bottom:12px;

    font-family:"Special Elite",monospace;

    font-size:.8rem;

    line-height:32px;

    opacity:.65;

}


/* --------------------------------------------------
   ÜBERSCHRIFT
   -------------------------------------------------- */

.paper-content h2 {

    margin:0 0 25px;

    font-family:"Special Elite",monospace;

    font-size:1.7rem;

    font-weight:normal;

    line-height:32px;

}


/* --------------------------------------------------
   TEXT
   -------------------------------------------------- */

.lined-text {

    position:relative;

}


.lined-text p {

    position:relative;

    margin:0 0 32px;

    font-family:Arial,sans-serif;

    font-size:1rem;

    line-height:32px;

}


.lined-text p:last-child {

    margin-bottom:0;

}


/* --------------------------------------------------
   SIGNATUR
   -------------------------------------------------- */

.thought-signature {

    margin-top:30px;

    font-family:"Special Elite",monospace;

    font-size:.85rem;

    line-height:32px;

    text-align:right;

    opacity:.65;

}


/* --------------------------------------------------
   HERZ
   -------------------------------------------------- */

.thought-paper .heart {

    margin-top:15px;

    opacity:.7;

}


/* --------------------------------------------------
   ZWEITES BLATT
   -------------------------------------------------- */

.thought-paper-alt {

    transform:rotate(.7deg);

    margin-top:-15px;

}


/* --------------------------------------------------
   LINKS IN THOUGHTS
   -------------------------------------------------- */

.thought-paper a {

    color:#6f5b45;

    text-decoration:none;

    border-bottom:1px dotted #6f5b45;

}


.thought-paper a:hover {

    border-bottom:1px solid #6f5b45;

}


/* --------------------------------------------------
   BILDER IN THOUGHTS
   -------------------------------------------------- */

.thought-paper img {

    display:block;

    max-width:100%;

    height:auto;

    background:#f9f6ee;

    border:1px solid var(--line);

    padding:4px;

    box-shadow:2px 2px 0 rgba(0,0,0,.12);

}

/* --------------------------------------------------
   ANKLICKBARE BILDER IN THOUGHTS
   -------------------------------------------------- */

.thought-paper img {

    cursor:zoom-in;

}


/* --------------------------------------------------
   BILD-OVERLAY
   -------------------------------------------------- */

.thought-image-overlay {

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:rgba(0,0,0,.78);

    cursor:zoom-out;

}


/* --------------------------------------------------
   VERGRÖSSERTES BILD
   -------------------------------------------------- */

.thought-image-overlay img {

    display:block;

    max-width:95vw;

    max-height:95vh;

    width:auto;

    height:auto;

    object-fit:contain;

    background:none;

    border:0;

    padding:0;

    box-shadow:
        0 8px 30px rgba(0,0,0,.35);

}


/* --------------------------------------------------
   THOUGHTS MOBILE
   -------------------------------------------------- */

@media(max-width:600px) {

    .thoughts-page {

        padding:25px 5px;

    }


    .thought-paper {

        padding:
            55px
            28px
            55px
            45px;

        margin-bottom:45px;

    }


    .spiral-holes {

        left:55px;

        right:35px;

    }


    .spiral-holes span {

        width:14px;
        height:14px;

        min-width:14px;
        min-height:14px;

    }


    .paper-content h2 {

        font-size:1.4rem;

    }


    .lined-text p {

        font-size:.95rem;

        line-height:32px;

    }

}


/* ==================================================
   UPDATES / PINNWAND
   ================================================== */

/* --------------------------------------------------
   OBERZEILE
   -------------------------------------------------- */

.updates-content .topline {

    border-bottom:1px dashed var(--line);

    padding-bottom:10px;

    margin-bottom:20px;

}


/* --------------------------------------------------
   PINNWAND
   -------------------------------------------------- */

.updates-board {

    position:relative;

    width:100%;

    min-height:900px;

    padding:55px 40px 90px;

    overflow:hidden;

    background-image:url("images/corkboard.png");

    background-size:100% 100%;

    background-position:center;

    background-repeat:no-repeat;

    box-shadow:
        inset 0 0 35px rgba(60,35,20,.13);

}


/* --------------------------------------------------
   UPDATE-ZETTEL
   -------------------------------------------------- */

.update-note {

    position:relative;

    display:inline-block;

    vertical-align:top;

    width:180px;

    margin:12px 15px 30px 5px;

}


/* --------------------------------------------------
   ZETTELFORMATE
   -------------------------------------------------- */

/*
   Die verschiedenen Größen sind absichtlich
   unterschiedlich, damit die Pinnwand wie eine
   echte Sammlung verschiedener Zettel wirkt.
*/

.update-size-long {

    width:180px;

}


.update-size-long .update-paper {

    min-height:145px;

}


.update-size-square {

    width:195px;

}


.update-size-square .update-paper {

    min-height:195px;

}


.update-size-medium {

    width:210px;

}


.update-size-medium .update-paper {

    min-height:155px;

}


.update-size-wide {

    width:245px;

}


.update-size-wide .update-paper {

    min-height:145px;

}


/* --------------------------------------------------
   PAPIER
   -------------------------------------------------- */

.update-paper {

    position:relative;

    width:100%;

    min-height:145px;

    padding:27px 16px 16px;

    background:#f5f0df;

    border:1px solid rgba(110,95,70,.35);

    box-shadow:
        2px 3px 5px rgba(0,0,0,.22);

    transform:
        rotate(var(--note-rotation));

    transform-origin:50% 0%;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    z-index:1;

}


/* --------------------------------------------------
   PAPIER-HOVER
   -------------------------------------------------- */

.update-note:hover .update-paper {

    transform:
        rotate(
            calc(
                var(--note-rotation) * -0.12
            )
        );

    box-shadow:
        3px 5px 8px rgba(0,0,0,.25);

}


/* --------------------------------------------------
   UPDATE-INHALT
   -------------------------------------------------- */

.update-date {

    margin-bottom:6px;

    font-size:.55rem;

    opacity:.55;

}


.update-note h2 {

    margin:0 0 8px;

    font-size:.82rem;

    line-height:1.15;

    font-weight:normal;

}


.update-text {

    font-family:Arial,sans-serif;

    font-size:.65rem;

    line-height:1.4;

}


.update-text p {

    margin:0 0 7px;

}


.update-text p:last-child {

    margin-bottom:0;

}


/* --------------------------------------------------
   BILDER IN UPDATES
   -------------------------------------------------- */

.update-text img {

    display:block;

    width:auto;

    max-width:100%;

    max-height:105px;

    height:auto;

    margin:10px auto;

    padding:3px;

    background:#fff;

    border:1px solid rgba(0,0,0,.15);

    box-shadow:
        1px 2px 4px rgba(0,0,0,.16);

    cursor:pointer;

    transition:transform .2s ease;

}


.update-text img:hover {

    transform:scale(1.03);

}


/* --------------------------------------------------
   HEFTZWECKE
   -------------------------------------------------- */

.update-pin {

    position:absolute;

    top:8px;

    left:50%;

    width:23px;

    height:23px;

    transform:translateX(-50%);

    z-index:30;

    pointer-events:none;

}


.pin-head {

    position:absolute;

    top:0;

    left:0;

    width:21px;

    height:21px;

    border-radius:50%;

    background:#888;

    border:1px solid #6f6f6f;

    box-shadow:
        1px 2px 3px rgba(0,0,0,.3);

}


.pin-shine {

    position:absolute;

    top:3px;

    left:4px;

    width:3px;

    height:2px;

    border-radius:50%;

    background:rgba(255,255,255,.28);

}


/* --------------------------------------------------
   NEUESTES UPDATE
   -------------------------------------------------- */

.update-note-new {

    z-index:5;

}


.update-note-new .update-paper::after {

    content:"NEW";

    position:absolute;

    top:9px;

    right:10px;

    font-family:"Special Elite",monospace;

    font-size:.65rem;

    font-weight:bold;

    letter-spacing:.04em;

    color:#8f4b4b;

    opacity:.85;

}


/* --------------------------------------------------
   ROTE NADEL
   -------------------------------------------------- */

.update-note-new .pin-head,
.update-note-new .pin-shine {

    display:none;

}


.update-note-new .update-pin {

    width:38px;

    height:38px;

    top:-14px;

    left:calc(50% - 7px);

    background-image:url("images/red-pin.png");

    background-size:contain;

    background-position:center;

    background-repeat:no-repeat;

}


/* --------------------------------------------------
   LEER / LADEN
   -------------------------------------------------- */

.updates-empty,
.updates-loading {

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

}


.updates-empty {

    color:#f5f0df;

    padding:30px;

}


.updates-loading {

    color:#f5f0df;

    opacity:.75;

}


/* --------------------------------------------------
   BILD-LIGHTBOX
   -------------------------------------------------- */

.image-lightbox {

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:rgba(20,15,12,.72);

    opacity:0;

    visibility:hidden;

    cursor:pointer;

    transition:
        opacity .2s ease,
        visibility .2s ease;

    z-index:9999;

}


.image-lightbox.active {

    opacity:1;

    visibility:visible;

}


.image-lightbox img {

    display:block;

    max-width:90vw;

    max-height:90vh;

    width:auto;

    height:auto;

    object-fit:contain;

    box-shadow:
        0 8px 30px rgba(0,0,0,.4);

    cursor:default;

}


/* --------------------------------------------------
   UPDATES-FOOTER
   -------------------------------------------------- */

.updates-content .footer {

    margin-top:35px;

}


/* --------------------------------------------------
   UPDATES MOBILE
   -------------------------------------------------- */

@media(max-width:900px) {

    .updates-board {

        min-height:600px;

        padding:35px 15px 60px;

    }


    .update-note,
    .update-note.update-size-long,
    .update-note.update-size-square,
    .update-note.update-size-medium,
    .update-note.update-size-wide {

        display:block;

        width:calc(100% - 20px);

        max-width:260px;

        margin:30px auto 45px;

    }


    .update-note.update-size-square .update-paper {

        min-height:190px;

    }


    .update-note.update-size-long .update-paper {

        min-height:150px;

    }


    .update-note.update-size-medium .update-paper {

        min-height:160px;

    }


    .update-note.update-size-wide .update-paper {

        min-height:145px;

    }

}


/* ==================================================
   NEUESTES UPDATE AUF DER INDEX-SEITE
   ================================================== */

/* --------------------------------------------------
   UPDATE-POST-IT
   -------------------------------------------------- */

.latest-update {

    display:block;

    position:absolute;

    top:-65px;

    right:0;

    width:190px;

    min-height:125px;

    padding:18px 17px 15px;

    background:#ebe0c4;

    border:1px solid rgba(100,90,55,.10);

    box-shadow:
        2px 3px 7px rgba(0,0,0,.14);

    transform:rotate(3.5deg);

    cursor:pointer;

    z-index:10;

    transition:box-shadow .2s ease;

}


.latest-update:hover {

    transform:rotate(3.5deg);

    box-shadow:
        3px 4px 9px rgba(0,0,0,.17);

}


/* --------------------------------------------------
   NEW
   -------------------------------------------------- */

.latest-update::after {

    content:"NEW";

    position:absolute;

    top:9px;

    right:10px;

    font-family:"Special Elite",monospace;

    font-size:.65rem;

    font-weight:bold;

    letter-spacing:.04em;

    color:#8f4b4b;

    opacity:.85;

}


/* --------------------------------------------------
   ROTE STECKNADEL
   -------------------------------------------------- */

.latest-update-pin {

    position:absolute;

    width:38px;

    height:38px;

    top:-14px;

    left:calc(50% - 7px);

    background-image:url("images/red-pin.png");

    background-size:contain;

    background-position:center;

    background-repeat:no-repeat;

    z-index:10;

}


/* --------------------------------------------------
   DATUM
   -------------------------------------------------- */

.latest-update-date {

    margin-bottom:6px;

    font-size:.58rem;

    opacity:.5;

}


/* --------------------------------------------------
   TITEL
   -------------------------------------------------- */

.latest-update-title {

    margin-bottom:7px;

    font-size:.85rem;

    line-height:1.2;

}


/* --------------------------------------------------
   TEXT
   -------------------------------------------------- */

.latest-update-text {

    font-family:Arial,sans-serif;

    font-size:.68rem;

    line-height:1.4;

    opacity:.78;

}


/* --------------------------------------------------
   LINK
   -------------------------------------------------- */

.latest-update-link {

    margin-top:9px;

    font-size:.62rem;

    text-align:right;

}


/* --------------------------------------------------
   LADEN
   -------------------------------------------------- */

.latest-update-loading {

    font-size:.7rem;

    opacity:.5;

}


/* ==================================================
   FOOTER
   ================================================== */

.footer {

    margin-top:30px;

    border-top:1px dashed var(--line);

    padding-top:20px;

    text-align:center;

}


/* ==================================================
   MOBILE / RESPONSIVE
   ================================================== */

@media(max-width:900px) {

    .page {

        grid-template-columns:1fr;

    }


    .sidebar {

        position:static;

    }


    .entry {

        grid-template-columns:1fr;

    }


    .header {

        flex-direction:column;

        align-items:start;

    }


    .media-row {

        grid-template-columns:1fr;

    }


    .latest-update {

        position:relative;

        top:auto;

        right:auto;

        width:180px;

        margin:20px auto;

    }

}