/* Source Serif 4 - SIL Open Font License, Text in fonts/SourceSerif4-OFL.txt. Eine ruhige Werkschrift: wenig Strichkontrast, für den Bildschirm gezeichnet, ohne Eigenheiten, die bei langem Text stören. Feste Schnitte, keine variable Fassung: die variable Datei trägt die ganze Achse mit und wiegt 122 kB, ein fester Schnitt 20 kB. Drei Schnitte - regular, halbfett, kursiv - je in latin und latin-ext. Über die unicode-range holt der Browser nur, was eine Seite wirklich braucht; für deutschen Text ist das allein latin. */ @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/SourceSerif4-Regular-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/SourceSerif4-Regular-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/SourceSerif4-SemiBold-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/SourceSerif4-SemiBold-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/SourceSerif4-Bold-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/SourceSerif4-Bold-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/SourceSerif4-Italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/SourceSerif4-Italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ /* kaum hintergrund: die fläche ist fast weiß, farbe tragen nur die kategorie-punkte und der akzent. flächen werden über linien getrennt, nicht über füllungen. */ --paper:#fdfdfc; --surface:transparent; --ink:#0f0f0d; --muted:#5e5b55; --hairline:#d5d2ca; --accent:#ff2d78; --shadow:none; --serif:"Source Serif 4", Georgia, "Times New Roman", serif; --sans:"Source Serif 4", Georgia, "Times New Roman", serif; } /* die fläche, auf der alles liegt: das papier mit einem hauch der kategoriefarbe. app.js setzt --accent beim wechsel des impulses am - --flaeche rechnet sich daraus von selbst neu, es braucht dafür keine zeile javascript. im dunkeln liegt der anteil höher: auf schwarz verschluckt sich eine tönung sonst. */ /* neon trägt viel weiter als ein gedeckter ton - bei gleichem anteil kippt die fläche ins schlammige. deshalb deutlich weniger als vorher. */ html{--flaeche:color-mix(in srgb, var(--accent) 6%, var(--paper))} html[data-theme="dark"]{--flaeche:color-mix(in srgb, var(--accent) 8%, var(--paper))} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} html[data-theme="dark"]{ --paper:#131312; --surface:transparent; --ink:#f4f2ec; --muted:#a19d94; --hairline:#3a3833; --shadow:none; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--sans);color:var(--ink);background:var(--flaeche); line-height:1.6;-webkit-font-smoothing:antialiased;position:relative; /* keine ligaturen: im deutschen darf eine ligatur nicht über eine wortfuge laufen - "auf|legen", "schilf|licht", "kauf|leute". genau dort verbindet die schrift aber f und l, weil sie die fuge nicht kennt, und bei 74px auf der startseite sieht man das sofort. dass innerhalb eines wortes ("offen", "hoffnung") dabei auch die richtigen ligaturen wegfallen, ist der preis - per CSS lässt sich eine wortfuge nicht erkennen. die laufweite bleibt davon übrigens unberührt: nachgemessen sind ligatur und einzelbuchstaben in dieser schrift gleich breit. kerning bleibt an, das ist etwas anderes und hier erwünscht. */ font-variant-ligatures:none; font-kerning:normal; /* KEIN übergang auf background. --flaeche kommt aus einer verschachtelten custom property (color-mix über --accent), und ein laufender übergang friert so einen wert ein: die farbe wechselt dann genau einmal und danach nie wieder. nachgemessen, nicht vermutet. der weiche wechsel läuft stattdessen über .wash, siehe unten. */ transition:color .4s ease; } /* reines neon ist als textfarbe zu hell (unter 4,5:1 auf der fläche). für flächen und punkte bleibt es pur, für text wird es mit tinte abgedunkelt - der ton bleibt, der kontrast stimmt wieder. */ a{color:color-mix(in srgb, var(--accent) 72%, var(--ink))} /* Der weiche Übergang beim Kategoriewechsel. Die Fläche selbst springt sofort auf die neue Tönung (siehe oben, warum sie das muss). Darüber legt .wash einen Hauch derselben Farbe, der aus dem Nichts aufblendet - app.js setzt dafür bei jedem neuen Impuls die Klasse .draw neu. Animiert wird nur die Deckkraft, und die hängt an keiner verschachtelten Eigenschaft. */ .wash{ position:fixed;inset:0;z-index:0;pointer-events:none; background:var(--accent);opacity:0; } .wash.draw{animation:bloom 1.1s ease both} @keyframes bloom{ 0% {opacity:var(--wash-deckung)} 100% {opacity:0} } html{--wash-deckung:.07} html[data-theme="dark"]{--wash-deckung:.14} @media (prefers-reduced-motion:reduce){.wash.draw{animation:none}} .screen{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100svh} /* topbar */ header{ display:flex;align-items:center;justify-content:space-between; padding:1.1rem clamp(1rem,4vw,2.5rem);position:relative; } .wordmark{font-family:var(--serif);font-size:clamp(1.45rem,2.6vw,1.9rem);font-weight:700;letter-spacing:-.035em;color:var(--ink);text-decoration:none;line-height:1} /* rechte seite: nav-links + hamburger nebeneinander */ .header-right{display:flex;align-items:center;gap:.5rem} .nav-primary{display:flex;align-items:center;gap:.35rem} .navlink{font-size:1rem;font-weight:600;color:var(--muted);text-decoration:none;padding:.38rem .7rem;border-radius:999px;transition:.2s} .navlink:hover{color:var(--ink)} .navlink.active{color:var(--ink)} /* hamburger-button */ .nav-toggle{ display:inline-flex;align-items:center;gap:.45rem; height:36px;padding:0 .85rem; border:2px solid var(--ink);border-radius:999px; background:transparent;color:var(--ink); cursor:pointer;font-family:var(--sans);font-size:1rem;font-weight:600; transition:.2s;white-space:nowrap; } .nav-toggle:hover{color:var(--ink);border-color:color-mix(in srgb, var(--ink) 30%, transparent)} .nav-toggle.open{color:var(--ink);border-color:color-mix(in srgb, var(--ink) 30%, transparent)} /* die beschriftung wechselt zwischen "menü" und "schließen" - die breite springt dabei, deshalb wird von der mitte aus überblendet */ .nav-toggle-label{display:block;transition:opacity .18s ease} .nav-toggle.wechselt .nav-toggle-label{opacity:0} main{flex:1;display:flex;flex-direction:column;align-items:center;width:100%} /* kategorie-chips */ .cats-wrap{position:relative;--fade-l:0;--fade-r:1;width:100%} .cats-wrap::before,.cats-wrap::after{ content:'';position:absolute;top:0;bottom:0;width:2.5rem;pointer-events:none;z-index:2; transition:opacity .25s; } .cats-wrap::before{left:0;background:linear-gradient(to right, var(--flaeche), transparent);opacity:var(--fade-l)} .cats-wrap::after{right:0;background:linear-gradient(to left, var(--flaeche), transparent);opacity:var(--fade-r)} .cats{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;padding:0 clamp(1rem,4vw,2rem);margin-bottom:clamp(1rem,3vw,1.5rem)} @media(max-width:640px){ .cats-wrap{overflow:hidden} .cats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.25rem clamp(1rem,4vw,2rem);justify-content:flex-start;touch-action:pan-x} .cats::-webkit-scrollbar{display:none} .cats-wrap::before,.cats-wrap::after{width:clamp(1rem,4vw,2rem)} } .chip{ --c:var(--accent);font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--muted);white-space:nowrap; background:transparent;cursor:pointer;border:2px solid var(--hairline);border-radius:999px; padding:.36rem .8rem;display:inline-flex;align-items:center;gap:.45rem;transition:.22s; } .chip::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);transition:.22s} .chip:hover{color:var(--ink);border-color:var(--c)} /* gewählt heißt gefüllt - das ist der lauteste ton auf der seite, und er soll es sein */ /* dunkle schrift auf der neonfläche - hell auf lime oder amber wäre nicht mehr zu lesen */ .chip[aria-pressed="true"]{color:#131312;background:var(--c);border-color:var(--c)} .chip[aria-pressed="true"]::before{background:rgba(19,19,18,.55)} .chip.all::before{background:conic-gradient(#c97b5c,#b3788e,#8a6fb0,#3e8e84,#7a9a52,#d9a13a,#c97b5c)} /* „heute" - ohne farbe, der punkt bleibt grau */ .chip.today::before{background:#b9b6ae} .chip.today[aria-pressed="true"]{color:var(--paper);background:var(--ink);border-color:var(--ink)} .chip.today[aria-pressed="true"]::before{background:color-mix(in srgb, var(--paper) 80%, transparent)} /* impuls */ .hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;padding:1rem clamp(1.2rem,5vw,2rem) 7rem} .kicker{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb, var(--accent) 62%, var(--ink) 38%);margin-bottom:1.8rem;font-weight:600;transition:color .5s ease} /* der impuls selbst ist das einzige, was hier leise spricht. die oberfläche darf kräftig sein - der satz, der zum malen einlädt, darf es nicht: fett und eng gesetzt klingt er wie eine anweisung. also regular, offener zeilenabstand, normale laufweite und genug maß, damit die zeilen von selbst atmen. */ .text{ font-family:var(--serif);font-weight:400; font-size:clamp(1.8rem,4.2vw,2.9rem); line-height:1.38;letter-spacing:-.005em; color:var(--ink);max-width:26ch;text-wrap:balance; } .hero.leaving .kicker,.hero.leaving .text{opacity:0;transform:translateY(-10px);transition:opacity .46s ease,transform .46s ease} .hero.draw .kicker,.hero.draw .text{animation:rise .42s ease both} @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* werkzeuge unter dem impuls */ .impuls-tools{margin-top:1.6rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;min-height:2.5rem} .tool-actions{display:inline-flex;align-items:center;justify-content:center;max-width:100%} .tool-buttons{display:inline-flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center} .tools-state{text-align:center;margin-top:.1rem} .done-badge{ display:inline-flex;align-items:center;gap:.4rem;line-height:1.6;white-space:nowrap;overflow:hidden; font-family:var(--sans);font-size:.92rem;font-weight:600;color:color-mix(in srgb, var(--accent) 55%, var(--ink) 45%);text-decoration:none; padding:.36rem .8rem;border-radius:999px;margin-right:.5rem;max-width:240px; background:color-mix(in srgb, var(--ink) 7%, transparent); border:none; transition:opacity .35s ease, max-width .35s ease, margin-right .35s ease, padding .35s ease, background .2s ease; } .done-badge:hover{background:color-mix(in srgb, var(--ink) 13%, transparent)} .done-badge.is-out{opacity:0;max-width:0;margin-right:0;padding-left:0;padding-right:0;border-left-width:0;border-right-width:0} html[data-theme="dark"] .done-badge{color:color-mix(in srgb, var(--accent) 60%, #fff)} .done-badge-ic{width:15px;height:15px;flex:none} .btn-ic{width:15px;height:15px;flex:none} /* wie die kategorie-chips: gleiche maße, gleiche rundung - nur ohne rand und dafür mit einer leichten fläche. der rand konkurrierte mit den chips darüber, ohne etwas zu unterscheiden. */ .ghost-btn{ display:inline-flex;align-items:center;gap:.45rem;line-height:1.6; font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent); border:none;border-radius:999px;padding:.36rem .8rem; cursor:pointer;text-decoration:none;transition:.2s; } .ghost-btn:hover{background:color-mix(in srgb, var(--ink) 13%, transparent)} .ghost-btn:disabled{opacity:.5;cursor:default} .cta-save{color:color-mix(in srgb, var(--accent) 60%, var(--ink) 40%)} .cta-save:hover{border-color:color-mix(in srgb, var(--accent) 60%, var(--ink) 40%)} .upload-state{font-size:.82rem;color:var(--muted)} .upload-state.ok{color:var(--accent)} .upload-state.err{color:#b5524e} /* angepinnter button */ .draw-btn{ position:fixed;left:50%;bottom:clamp(1.4rem,4vh,2.4rem);transform:translateX(-50%);z-index:6; font-family:var(--sans);font-size:1.05rem;font-weight:600;color:var(--paper);background:var(--ink); border:2px solid var(--ink);cursor:pointer;padding:.8rem 2rem;border-radius:999px;transition:.22s; } .draw-btn:hover{transform:translateX(-50%) translateY(-2px)} .draw-btn:active{transform:translateX(-50%)} /* beim ziehen eines neuen impulses gibt der knopf kurz nach und die umrandung nimmt für einen moment die neue kategoriefarbe an. das translateX(-50%) muss in jedem schritt mitgeschrieben werden - transform kennt kein "nur das eine ändern". */ .draw-btn.zieht{animation:knopf-zieht .55s cubic-bezier(.22,.7,.3,1)} @keyframes knopf-zieht{ 0% {transform:translateX(-50%) scale(1); border-color:var(--ink)} 30% {transform:translateX(-50%) scale(.955);border-color:var(--accent)} 100% {transform:translateX(-50%) scale(1); border-color:var(--ink)} } @media (prefers-reduced-motion:reduce){.draw-btn.zieht{animation:none}} /* methode */ .methode{position:relative;z-index:1;width:100%;max-width:720px;margin:0 auto;padding:clamp(2rem,7vw,4rem) clamp(1.2rem,5vw,2rem) 8rem} .methode h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,3.5vw,2.2rem);margin-bottom:1rem;letter-spacing:-.03em} .methode p{color:var(--muted);font-size:1.12rem;line-height:1.65;max-width:56ch} .methode p+p{margin-top:.8rem} /* ---- schmale seiten (login / auth) ---- */ .narrow{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem clamp(1.2rem,5vw,2rem) 4rem} .narrow--top{align-items:flex-start} .card{ width:100%;max-width:420px;background:transparent;border:none; padding:clamp(1rem,4vw,1.6rem);text-align:center; } /* fließtext-seiten (impressum, datenschutz) */ .prose{max-width:660px;text-align:left;margin-inline:auto} .prose h2{font-family:var(--serif);font-size:1.45rem;font-weight:700;letter-spacing:-.02em;margin:2.4rem 0 .7rem;color:var(--ink)} .prose h2:first-of-type{margin-top:1.2rem} .prose p{color:var(--muted);font-size:1.08rem;line-height:1.7;margin-bottom:.7rem} .prose ul{color:var(--muted);font-size:1.08rem;line-height:1.7;padding-left:1.2rem;margin-bottom:.7rem} .prose li{margin-bottom:.3rem} .prose a{color:color-mix(in srgb, var(--accent) 72%, var(--ink));text-decoration:underline;text-underline-offset:2px} .prose strong{color:var(--ink);font-weight:700} .card-title{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,5vw,2.9rem);line-height:1.08;margin-bottom:1rem;letter-spacing:-.035em} .muted{color:var(--muted)} .small{font-size:.85rem} .login-note{margin-top:.8rem} .error{color:#b5524e;margin:.6rem 0 0;font-size:.9rem} .form{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.8rem;align-items:stretch} /* der knopf ist jetzt eine umrandung - über die volle breite wirkt das schwerer als die gefüllte fassung vorher, also mittig und nur so breit wie sein text */ .form .btn-primary{align-self:center} .field{ font-family:var(--sans);font-size:1.25rem;color:var(--ink);background:transparent; border:none;border-bottom:2px solid var(--ink);border-radius:0; padding:.7rem .2rem;width:100%;text-align:center; } .field:focus{outline:none;border-bottom-color:var(--accent)} .btn-primary{ display:inline-block;font-family:var(--sans);font-size:1.05rem;font-weight:600;color:var(--paper); background:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:.75rem 1.7rem; cursor:pointer;text-decoration:none;transition:.2s; } .btn-primary:hover{background:var(--accent);border-color:var(--accent)} /* ---- feed ---- */ .feed-main{display:block;width:100%;max-width:720px;margin:0 auto;padding:clamp(2rem,6vw,4rem) clamp(1rem,4vw,2rem) 7rem} .share-main{display:block;width:100%;max-width:640px;margin:0 auto;padding:clamp(1rem,4vw,2rem) clamp(1rem,4vw,2rem) 5rem} .share-cta{text-align:center;margin-top:2.2rem;display:flex;flex-direction:column;align-items:center;gap:1rem} .share-cta .muted{max-width:34ch} .share-logo{font-family:var(--serif);font-size:clamp(2rem,5vw,2.8rem);font-weight:700;letter-spacing:-.04em;color:var(--ink);text-decoration:none} .feed-head{text-align:center;margin-bottom:clamp(2.4rem,7vw,4rem)} .feed-title{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.05;letter-spacing:-.04em} /* die zahl darunter als kapitälchen-zeile, nicht als satz */ .feed-head .muted{margin-top:.8rem;font-size:.8rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase} .feed-head::after{content:"";display:block;width:64px;height:3px;background:var(--ink);margin:1.8rem auto 0} .empty{text-align:center;color:var(--muted);padding:5rem 1rem;display:flex;flex-direction:column;gap:1.6rem;align-items:center} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.1rem} .tile{position:relative;background:transparent;border:1px solid var(--hairline);border-radius:2px;overflow:hidden} .tile img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:transparent} .tile figcaption{padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.4rem} .tag{align-self:flex-start;font-size:.72rem;color:var(--muted);display:inline-flex;align-items:center;gap:.4rem} .tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c, var(--accent))} .cap{font-family:var(--serif);font-size:.98rem;line-height:1.3;color:var(--ink)} .meta{font-size:.76rem;color:var(--muted)} .del{position:absolute;top:.55rem;right:.55rem} .del button{width:32px;height:32px;border-radius:999px;border:1px solid var(--hairline);cursor:pointer;display:grid;place-items:center;background:var(--flaeche);color:var(--muted);opacity:0;transition:.2s} .del button svg{width:15px;height:15px} .tile:hover .del button,.del button:focus-visible{opacity:1} .del button:hover{background:#b5524e} *:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} } /* ---- mehr laden ---- */ .mehr-wrap{display:flex;justify-content:center;margin-top:clamp(2.5rem,6vw,4rem)} .mehr-btn{ display:inline-flex;align-items:center;line-height:1.6; font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent); border:none;border-radius:999px;padding:.36rem 1.1rem; cursor:pointer;text-decoration:none;transition:.2s; } .mehr-btn:hover{background:color-mix(in srgb, var(--ink) 13%, transparent)} /* ---- QR-modal (desktop) ---- */ .modal{position:fixed;inset:0;z-index:20;background:color-mix(in srgb, var(--flaeche) 92%, transparent);display:flex;align-items:center;justify-content:center;padding:1.2rem} .modal[hidden]{display:none} .modal-card{position:relative;background:var(--flaeche);border:1px solid var(--hairline);border-radius:2px;padding:1.8rem;max-width:340px;width:100%;text-align:center} .modal-close{position:absolute;top:.5rem;right:.7rem;background:none;border:none;font-size:1.7rem;line-height:1;color:var(--muted);cursor:pointer} .modal-title{font-family:var(--serif);font-weight:600;font-size:1.2rem;margin-bottom:.4rem} .qr{display:flex;justify-content:center;align-items:center;margin:1.1rem 0;min-height:200px} .qr img,.qr canvas{border-radius:8px} .qr-thumb{width:160px;height:160px;object-fit:cover} /* ---- mobile aufnahme-seite ---- */ .m-wrap{max-width:420px;margin:0 auto;padding:1.5rem 1.2rem 4rem;text-align:center} .m-wrap .kicker{margin-bottom:.6rem} .m-impuls{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.38;margin:0 0 1.8rem;color:var(--ink);text-wrap:balance} .crop-stage{margin:1.4rem auto 1rem;width:100%;max-width:340px} .crop-stage canvas{width:100%;height:auto;border-radius:2px;border:1px solid var(--hairline);touch-action:none;background:#fff;cursor:grab} .zoom{width:100%;margin:.8rem 0 .2rem;accent-color:var(--accent)} #save{margin-top:.6rem} /* hidden-attribut soll immer gewinnen (auch über .btn-primary display) */ [hidden]{display:none !important} /* mobile aufnahme: aktionen + erfolg */ .m-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem} .m-done{margin-top:1.6rem;display:flex;flex-direction:column;align-items:center;gap:1rem} .m-check{width:54px;height:54px;border-radius:999px;background:transparent;border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-size:1.5rem} .m-preview{width:160px;height:160px;object-fit:cover;border-radius:2px;border:1px solid var(--hairline)} /* ---- admin ---- */ .admin-wrap{width:100%;max-width:820px;margin:0 auto;padding:clamp(1rem,4vw,2rem) clamp(1rem,4vw,2rem) 6rem} .admin-wrap h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,4vw,2.1rem);margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem} .admin-wrap > .muted{margin-bottom:1.2rem} .swatch{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid var(--hairline)} .admin-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;background:transparent;border:none;border-bottom:1px solid var(--hairline);border-radius:0;padding:.55rem .2rem;margin-bottom:0} .admin-row.is-off{opacity:.5} .admin-row .edit{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0} .admin-row .mini{display:inline-flex;margin:0} .in{font-family:var(--sans);font-size:.95rem;color:var(--ink);background:transparent;border:1px solid var(--hairline);border-radius:2px;padding:.42rem .65rem;min-width:0} .in:focus{outline:none;border-color:var(--accent)} .in-name{flex:1;min-width:120px} .in-color{width:46px;height:38px;padding:2px;cursor:pointer} .color-field{display:inline-flex;align-items:center} .color-chip{width:38px;height:38px;border-radius:8px;border:1px solid var(--hairline);cursor:pointer;padding:0} .color-chip:hover{border-color:var(--accent)} .palette-pop{position:absolute;z-index:60;background:var(--flaeche);border:1px solid var(--hairline);border-radius:2px;padding:.5rem} .palette-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:.3rem} .palette-grid .sw{width:26px;height:26px;border-radius:6px;border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0;transition:transform .1s} .palette-grid .sw:hover{transform:scale(1.12)} .palette-grid .sw.sel{outline:2px solid var(--ink);outline-offset:1px} .btn-sm{font-family:var(--sans);font-size:.85rem;border:1px solid var(--hairline);background:transparent;color:var(--ink);border-radius:2px;padding:.45rem .65rem;cursor:pointer;transition:.18s;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:.3rem} .btn-sm svg{width:15px;height:15px;display:block} .btn-sm:hover{border-color:var(--accent)} .btn-sm.danger:hover{border-color:#b5524e;color:#b5524e} .drag-handle{display:inline-flex;align-items:center;color:var(--muted);cursor:grab;padding:0 .1rem;border-radius:6px;flex:none} .drag-handle:hover{color:var(--ink)} .admin-row[draggable="true"]:active .drag-handle,.drag-handle:active{cursor:grabbing} .admin-row.placeholder{opacity:.32} .drag-clone{position:fixed;z-index:1000;margin:0;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.28);opacity:.97;transform:scale(1.015)} .sort-note{display:inline-block;margin-left:.5rem;font-size:.8rem;color:var(--muted);opacity:0;transition:opacity .2s} .sort-note.show{opacity:1} /* feste breite, damit die spalten aller zeilen fluchten - auch wenn in einer das "zu prüfen"-schildchen steht und in der nächsten nicht */ .count-col{flex:0 0 210px;display:inline-flex;align-items:center;justify-content:flex-end;gap:.5rem;white-space:nowrap} .count-link{flex:0 0 auto;margin-left:auto;text-align:right;font-size:.88rem;font-weight:600; color:var(--muted);text-decoration:none;transition:color .2s ease} .count-link:hover{color:var(--ink)} .pending-badge{flex:0 0 auto;text-align:center;font-size:.72rem;color:var(--muted);background:transparent;border:1px solid var(--hairline);border-radius:999px;padding:.1rem .55rem;text-decoration:none;line-height:1.4;box-sizing:border-box} .pending-badge.is-empty{visibility:hidden} .pending-badge:hover{color:var(--ink)} .flash{background:transparent;border:none;border-left:2px solid var(--accent);border-radius:0;padding:.4rem .8rem;margin-bottom:1rem;font-size:.92rem} .add-row{display:flex;align-items:center;gap:.5rem;margin:1.4rem 0;padding:.55rem .2rem;background:transparent;border:none;border-bottom:1px dashed var(--hairline);border-radius:0} .add-row .in-name{flex:1} .add-row .btn-primary{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;font-size:.95rem;white-space:nowrap} .add-row .btn-primary svg{width:16px;height:16px} /* review-workflow (team-vorschläge) */ .review{margin-bottom:1.4rem} .review h2{font-family:var(--serif);font-weight:600;font-size:1.05rem;margin:.2rem 0 .7rem} .admin-row.is-pending{border-style:dashed;border-color:color-mix(in srgb, var(--accent) 45%, var(--hairline))} .tag-review{flex:none;align-self:center;font-size:.7rem;color:var(--muted);background:transparent;border:1px solid var(--hairline);border-radius:999px;padding:.1rem .55rem} .btn-sm.ok:hover{border-color:#5a948b;color:#3e8e84} .io-box{margin-top:1.8rem;border-top:1px solid var(--hairline);padding-top:1.1rem} .io-box summary{cursor:pointer;color:var(--accent);font-size:.92rem} .io-ta{width:100%;font-family:var(--sans);font-size:.9rem;line-height:1.5;color:var(--ink);background:transparent;border:1px solid var(--hairline);border-radius:2px;padding:.6rem .7rem;margin:.35rem 0 .9rem;resize:vertical;box-sizing:border-box} .io-ta:focus{outline:none;border-color:var(--accent)} .io-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;font-size:.95rem} .io-btn svg{width:16px;height:16px} .prompt-wrap{position:relative} .prompt-ta{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;line-height:1.5} .copy-btn{position:absolute;top:.5rem;right:.5rem;background:var(--flaeche)} .copy-btn.is-ok{border-color:#5a948b;color:#3e8e84} /* jeder eintrag ist eine tafel: kategorie, impuls, bild, gedanke, datum - in dieser reihenfolge, mittig, mit luft drumherum. getrennt wird nicht durch einen kasten, sondern durch abstand und einen kurzen strich. */ .timeline{display:flex;flex-direction:column;gap:0} .t-card{position:relative;border:none;background:transparent;border-radius:0; padding:clamp(2.6rem,7vw,4.4rem) 0;scroll-margin-top:2rem} .t-card + .t-card::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:64px;height:3px;background:var(--ink); } .t-card:target{animation:t-card-flash 1.4s ease} @keyframes t-card-flash{ 0% {box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent)} 20% {box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent)} 100% {box-shadow:0 0 0 0 transparent} } .t-bg{display:none} .t-content{position:relative;z-index:1;padding:0;display:flex;flex-direction:column;align-items:center;text-align:center} .t-meta{display:flex;align-items:center;justify-content:center;gap:1.1rem;flex-wrap:wrap;margin-bottom:1.1rem} /* kategorie als kapitälchen in ihrer eigenen farbe, gedämpft mit tinte gemischt - sonst leuchtet sie über dem fast weißen grund */ .t-meta .tag{ align-self:auto;font-size:.82rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:color-mix(in srgb, var(--c, var(--accent)) 62%, var(--ink) 38%); gap:.55rem;line-height:1.4; } .t-meta .tag::before{width:9px;height:9px} .t-date{ margin-top:1.7rem;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:var(--muted); } /* kein schildchen mehr - dieselbe kapitälchen-zeile, nur leiser */ .day-badge{ display:inline-flex;align-items:center; font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase; line-height:1.4;color:var(--muted);background:transparent;border:none;padding:0; } /* wie auf der startseite: der impuls bleibt ruhig, auch wenn der feed drumherum kräftig gesetzt ist */ .t-impuls{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,3.2vw,2.05rem);line-height:1.38; letter-spacing:-.005em;max-width:24ch;margin:0 auto clamp(2rem,4.5vw,3rem);text-wrap:balance} .t-link{display:block;width:100%} .t-img{max-width:100%;max-height:min(72vh,560px);width:auto;height:auto;object-fit:contain;border-radius:5px} /* der gedanke zum bild - kursiv, schmal gesetzt, wie eine bildunterschrift */ .t-note{margin:1.9rem auto 0;max-width:44ch;font-family:var(--serif);font-style:italic; font-size:1.18rem;line-height:1.6;text-align:center;color:var(--muted)} /* aktionsleiste am unteren rand – immer sichtbar */ /* die knöpfe halten sich zurück und treten erst hervor, wenn man den eintrag berührt - auf touch-geräten sind sie dauerhaft da, dort gibt es kein hover, unter dem sie sonst unauffindbar wären */ .t-bar{position:relative;z-index:1;display:flex;justify-content:center;gap:.4rem; margin-top:1.6rem;opacity:.4;transition:opacity .3s ease} @media (hover:hover){ .t-card:hover .t-bar,.t-card:focus-within .t-bar{opacity:1} } @media (hover:none){ .t-bar{opacity:1} } .t-bar .t-del{margin:0;display:inline-flex} .t-bar-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.35rem; padding:.35rem .5rem;border:none;background:transparent;cursor:pointer;border-radius:8px; font-family:var(--sans);font-size:.82rem;color:var(--muted);transition:.15s; } .t-bar-btn svg{width:15px;height:15px;flex:none} /* nur die zeichen, kein wort - die beschriftung steht in aria-label und title */ .t-bar-label{display:none} .t-bar-btn:hover{color:var(--ink)} .t-del-btn:hover{color:#b5524e} .t-card.editing .t-edit-btn{color:var(--accent)} /* bearbeiten-modus */ .t-edit{display:none;margin-top:1.6rem;width:100%;text-align:left} .t-card.editing .t-edit{display:block} .t-card.editing .t-note{display:none} .t-note-edit{display:block;width:100%;padding:.6rem .75rem;font-family:var(--sans);font-size:.92rem;line-height:1.5;color:var(--ink);background:transparent;border:1px solid var(--hairline);border-radius:2px;resize:vertical;min-height:3rem;box-sizing:border-box} .t-note-edit:focus{outline:none;border-color:var(--accent)} .t-note-edit::placeholder{color:var(--muted)} .t-edit-actions{display:flex;align-items:center;gap:.6rem;margin-top:.7rem;flex-wrap:wrap} .t-edit-right{margin-left:auto;display:flex;gap:.6rem} .t-edit-actions .btn-primary{padding:.5rem 1.1rem;font-size:.9rem;border-radius:999px} .t-edit-state{display:none;margin-top:.6rem} .t-edit-state.show{display:block} /* teilen-toast */ .ml-toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,1rem);background:var(--ink);color:var(--paper);padding:.6rem 1.05rem;border-radius:999px;font-family:var(--sans);font-size:.88rem;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw;text-align:center} .ml-toast.show{opacity:1;transform:translate(-50%,0)} /* ---- geteiltes crop-modal ---- */ .crop-overlay{position:fixed;inset:0;z-index:50;background:rgba(22,21,15,.7);display:flex;align-items:center;justify-content:center;padding:1.2rem} .crop-modal{background:var(--flaeche);border:1px solid var(--hairline);border-radius:2px;padding:1.2rem;width:100%;max-width:420px;text-align:center} .crop-stage{position:relative;display:inline-block;max-width:100%;line-height:0;margin:0 auto;border-radius:8px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff} .crop-img{display:block;max-width:100%;max-height:min(58vh,440px);width:auto;height:auto;pointer-events:none;-webkit-user-drag:none} .crop-box{position:absolute;box-sizing:border-box;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 9999px rgba(22,21,15,.5);cursor:move;touch-action:none} .crop-h{position:absolute;width:20px;height:20px;background:#fff;border:1px solid rgba(0,0,0,.25);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.3);touch-action:none} .crop-h[data-h="nw"]{left:0;top:0;cursor:nwse-resize} .crop-h[data-h="ne"]{right:0;top:0;cursor:nesw-resize} .crop-h[data-h="se"]{right:0;bottom:0;cursor:nwse-resize} .crop-h[data-h="sw"]{left:0;bottom:0;cursor:nesw-resize} .crop-h[data-h="n"]{left:50%;top:0;transform:translateX(-50%);cursor:ns-resize} .crop-h[data-h="s"]{left:50%;bottom:0;transform:translateX(-50%);cursor:ns-resize} .crop-h[data-h="w"]{left:0;top:50%;transform:translateY(-50%);cursor:ew-resize} .crop-h[data-h="e"]{right:0;top:50%;transform:translateY(-50%);cursor:ew-resize} .crop-hint{font-size:.82rem;color:var(--muted);margin:.7rem 0 .2rem} .crop-note{display:block;width:100%;margin:.7rem 0 0;padding:.6rem .75rem;font-family:var(--sans);font-size:.92rem;line-height:1.4;color:var(--ink);background:transparent;border:1px solid var(--hairline);border-radius:2px;resize:vertical;min-height:2.6rem;box-sizing:border-box} .crop-note:focus{outline:none;border-color:var(--accent)} .crop-note::placeholder{color:var(--muted)} .crop-state{margin-top:.6rem} .crop-actions{display:flex;gap:.6rem;justify-content:center;margin-top:1rem} /* auf touch-geräten ist der QR-handoff sinnlos (man ist ja schon am handy) */ @media (hover:none) and (pointer:coarse){ #phoneBtn{display:none} } /* ---- menü (hamburger – immer sichtbar) ---- */ .nav-primary{display:flex;align-items:center;gap:.35rem;margin-left:.5rem} /* ---- menü dropdown/overlay ---- */ /* ---- menü: overlay über die volle fläche ---- */ header{position:relative} /* kein [hidden]: die sichtbarkeit läuft über visibility, sonst wäre keine überblendung möglich (display:none kennt keinen zwischenschritt). visibility:hidden nimmt das menü trotzdem aus tab-reihenfolge und vorlesereihenfolge heraus - es ist also wirklich weg, nicht nur unsichtbar. */ .nav-menu{ position:fixed;inset:0;z-index:40; display:flex;align-items:center;justify-content:center; background:var(--flaeche); opacity:0;visibility:hidden; transition:opacity .3s ease, visibility .3s ease; } .nav-menu.offen{opacity:1;visibility:visible} .nav-menu-inner{ position:relative;z-index:1; display:flex;flex-direction:column;align-items:center;gap:.1rem; width:100%;max-width:340px;padding:0 1.5rem; } .nav-menu-item{ display:flex;align-items:center;justify-content:center;width:100%; font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,7vw,3.4rem); line-height:1.12;letter-spacing:-.04em; color:var(--ink);text-decoration:none; padding:.3rem 1rem;border:none;background:transparent; cursor:pointer;white-space:nowrap; /* jeder eintrag steigt einzeln auf, leicht versetzt */ opacity:0;transform:translateY(12px); transition:opacity .4s ease, transform .4s cubic-bezier(.22,.7,.3,1), color .2s ease; } .nav-menu-item:hover,.nav-menu-item:focus-visible{color:var(--accent)} .nav-menu-item.active{color:var(--accent)} /* impressum, datenschutz, abmelden - da, aber nicht laut */ .nav-menu-item.leise{font-family:var(--sans);font-size:1.05rem;font-weight:600;color:var(--muted);padding:.3rem 1rem} .nav-menu-item.leise:hover{color:var(--ink)} .nav-menu-sep{ border:none;border-top:3px solid var(--ink); width:64px;margin:1.4rem 0 1.1rem; opacity:0;transition:opacity .4s ease; } .nav-menu.offen .nav-menu-item{opacity:1;transform:none} .nav-menu.offen .nav-menu-sep{opacity:1} /* der versatz: die einträge kommen nacheinander, nicht als block */ .nav-menu-inner > *:nth-child(1){transition-delay:.05s} .nav-menu-inner > *:nth-child(2){transition-delay:.09s} .nav-menu-inner > *:nth-child(3){transition-delay:.13s} .nav-menu-inner > *:nth-child(4){transition-delay:.17s} .nav-menu-inner > *:nth-child(5){transition-delay:.21s} .nav-menu-inner > *:nth-child(6){transition-delay:.25s} .nav-menu-inner > *:nth-child(7){transition-delay:.29s} /* beim schließen gehen alle zugleich - warten fühlt sich hier zäh an */ .nav-menu:not(.offen) .nav-menu-inner > *{transition-delay:0s} /* die kopfleiste bleibt über dem overlay: die wortmarke ist der anker, sie soll nicht mitverschwinden, und der knopf muss bedienbar bleiben. das menü ist ein kind des header - ein positioniertes kind mit z-index läge sonst über allem, was im header im normalen fluss steht. wortmarke und knopf brauchen deshalb selbst einen rang oberhalb davon. */ header{z-index:50} .wordmark{position:relative;z-index:60} .nav-toggle{position:relative;z-index:60} /* was darunter liegt und trotzdem oben schwebt, tritt ab, solange das menü offen ist - sonst steht "neuer impuls" mitten im menü */ html.menue-offen .nav-primary, html.menue-offen .draw-btn{ opacity:0;pointer-events:none; transition:opacity .2s ease; } @media(prefers-reduced-motion:reduce){ .nav-menu,.nav-menu-item,.nav-menu-sep{transition-duration:.01ms} .nav-menu-item{transform:none} .nav-menu-inner > *{transition-delay:0s !important} } @media(max-width:640px){ .nav-primary{display:none} } /* visually-hidden für screenreader + SEO */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}