/* Flipoa 0.9.8 – tactile paper, restrained illustrations */
:root{--ink:#352443;--muted:#776a80;--purple:#8765b4;--paper:#faf7f0}
body{background-color:var(--paper);background-image:linear-gradient(#faf8f34d,#faf8f34d),url('paper.png');background-size:auto,640px}
.brand{letter-spacing:0}.brand img{display:block;width:180px!important;height:auto!important;max-height:70px;object-fit:contain}.workspace-mode .brand img{width:142px!important;max-height:55px}.brand-tagline{font-family:'Segoe Print','Bradley Hand',cursive;font-size:.82rem;color:#887393;margin:.3rem 0;letter-spacing:.02em}
#trainer .toolbar{justify-content:center}#trainer .toolbar>.tabs{background:transparent;justify-content:center;border-radius:0;gap:2rem;padding:0}#trainer .toolbar>.tabs button{position:relative;flex:0 1 190px;background:transparent;color:var(--muted);border-radius:0;font-size:1rem;font-weight:500}#trainer .toolbar>.tabs button.active{background:transparent;color:var(--ink);font-weight:700}#trainer .toolbar>.tabs button.active:after{content:'';position:absolute;bottom:0;left:24%;right:24%;height:3px;background:#9976c4;border-radius:90% 30% 80% 20%;transform:rotate(-1deg)}
#trainer .toolbar>label{flex-basis:170px}.stats{text-align:center;font-size:.75rem;border-bottom:1px solid #bcaac42b;color:var(--muted)}
.study-card{isolation:isolate;border:1px solid #e5dfd5;border-radius:19px 15px 21px 14px;background:#fffdf8;box-shadow:0 9px 18px #59452b17,0 2px 3px #59452b12;min-height:430px;margin:2.8rem 0 1rem;padding:1.8rem 2.4rem}.study-card:before,.study-card:after{content:'';position:absolute;inset:-7px -4px -6px;z-index:-2;border-radius:16px;pointer-events:none;background:#dfd0eb;box-shadow:0 2px 5px #46315112;transform:rotate(-2.2deg)}.study-card:after{z-index:-1;inset:0;transform:none;background:linear-gradient(#fffdf8bb,#fffdf8bb),url('paper.png');background-size:auto,580px;border-radius:inherit}.study-card .card-friends{position:absolute;right:1rem;top:-47px;width:86px;height:70px;z-index:-1;pointer-events:none}.study-card>.topic{font-size:.72rem;color:#86768d}.study-card>h2{font-weight:750;letter-spacing:-.035em}.study-card.revealed{background:#fffdf8}.study-card.revealed>h2{font-size:1rem;margin:1.4rem 0 .7rem;color:#685574}.study-card>.answer{background:transparent;padding:1rem .5rem 1.4rem;border-radius:0;margin:0 0 1rem}.study-card .answer small{font-weight:400;color:#85738d}.study-card .answer p{background:url('marker.svg') center/100% 100% no-repeat;padding:.65rem .7rem;display:table;margin:.7rem auto 0;font-size:clamp(1.8rem,3.3vw,2.8rem);line-height:1.4}.study-card.long-answer .answer p{background:none;font-size:clamp(1.15rem,2.2vw,1.5rem);padding:.3rem 0;text-align:left;font-weight:500}.study-card>.row-actions{border-top:1px solid #bbaa9829;padding-top:.4rem}.study-card>.ratings{gap:.6rem}.study-card>.ratings button{border-radius:45% 48% 42% 43% / 18px;box-shadow:0 2px 2px #4c394012;border:1px solid #a28aab14;padding:.5rem 1.1rem;transition:transform .15s}.study-card>.ratings button:hover{transform:translateY(-2px)}.button{background:linear-gradient(165deg,#a07bc5,#7e5aac);border-radius:20px;box-shadow:0 3px 5px #5e457127}.swipe-pad{color:#827389;font-size:.72rem}.paper-motto{text-align:center;font-family:'Segoe Print','Bradley Hand',cursive;color:#887393;font-size:.95rem;margin:1.5rem 0 .5rem}.paper-motto:after{content:' ●  ●  ●';display:block;font-family:system-ui;font-size:.8rem;letter-spacing:.4rem;color:#bba6cf;margin-top:.5rem}.row{background:linear-gradient(#fffdf8cc,#fffdf8cc),url('paper.png');background-size:auto,580px;border-color:#e5ddd2;box-shadow:0 3px 6px #49342308}.access{background:linear-gradient(#fffdf8cc,#fffdf8cc),url('paper.png');background-size:auto,580px;border-color:#e5ddd2;box-shadow:0 7px 18px #49342308}.guide{background:#eae1ef88}.file-actions button{background:transparent;border-color:#c6b8cc7a;box-shadow:none}.hero .demo-card .front{background:linear-gradient(#eee3f1bb,#eee3f1bb),url('paper.png');background-size:auto,580px}.hero .demo-card .back{background:linear-gradient(#dfecdfbb,#dfecdfbb),url('paper.png');background-size:auto,580px}
@media(min-width:1150px){#learn-view{position:relative;max-width:760px}.learning-mode #trainer{max-width:1080px}#learn-view:before{content:'Jeden Tag ein bisschen schlauer.';position:absolute;left:-150px;top:170px;width:125px;color:#9985a1;font:1rem/1.65 'Segoe Print','Bradley Hand',cursive;transform:rotate(-7deg);pointer-events:none}}
@media(max-width:780px){.brand img{width:145px!important;height:auto!important;max-height:57px}.workspace-mode .brand img{width:126px!important;max-height:49px}.brand-tagline{display:none}#trainer .toolbar>.tabs{gap:1.3rem}#trainer .toolbar>.tabs button{flex:1}.study-card{padding:1.25rem 1.1rem;min-height:350px;margin-top:2.1rem}.study-card .card-friends{width:62px;height:54px;top:-34px;right:.6rem}.study-card:before{inset:-4px -1px -4px;transform:rotate(-1.8deg)}.study-card.revealed>h2{font-size:.88rem}.study-card .answer p{font-size:1.7rem;padding:.55rem .35rem}.study-card.long-answer .answer p{font-size:1.15rem}.study-card>.ratings button{font-size:.75rem;padding:.45rem .7rem}.paper-motto{font-size:.8rem;margin:1rem 0}.study-card>.answer{padding:.7rem .1rem 1rem}}
@media(prefers-reduced-motion:reduce){.study-card>.ratings button{transition:none}.study-card>.ratings button:hover{transform:none}}

.study-card:before{box-shadow:8px 10px 0 -2px #c6dfd0,0 2px 5px #46315112}

/* 0.4.1 – identical navigation geometry in both views */
html{scrollbar-gutter:stable}
#trainer{position:relative}
#trainer .workspace-head,#trainer.is-learning .workspace-head{display:flex;align-items:center;justify-content:space-between;min-height:54px;margin:.5rem 0 .8rem;gap:.6rem}
#trainer #stats,#trainer.is-learning #stats{padding:.4rem 0;margin:.5rem 0;font-size:.75rem}
#trainer .toolbar{margin:0}
#trainer .background-notes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
#trainer .background-notes span{position:absolute;font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-size:1rem;line-height:1.6;color:#887496;opacity:.72}
.background-notes .note-curiosity{left:5px;top:285px;transform:rotate(-8deg)}
.background-notes .note-small{right:5px;top:385px;transform:rotate(7deg)}
.background-notes .note-future{right:8px;top:690px;transform:rotate(-5deg)}
#trainer .background-notes~*{position:relative}
#trainer #learn-view:before{content:none}
@media(min-width:1150px){#trainer #learn-view{max-width:740px}.background-notes span{max-width:125px}}
@media(max-width:1149px){#trainer .background-notes{display:none}}
@media(max-width:780px){#trainer .workspace-head,#trainer.is-learning .workspace-head{min-height:48px;flex-wrap:nowrap}#trainer .workspace-head h1{font-size:1.25rem}#trainer .workspace-head .button{font-size:.8rem;padding:.6rem .75rem;white-space:nowrap}.paper-motto:before{content:'Kleine Schritte. Großer Fortschritt.';display:block;font-size:.75rem;margin-bottom:.35rem}}

#trainer,.learning-mode #trainer{max-width:1080px}

/* 0.4.2: slightly stronger primary navigation and card favorite */
#trainer .toolbar>.tabs button{font-size:1.12rem;min-height:50px}
.study-card>.row-actions .favorite{font-size:.95rem;padding:.4rem .65rem;min-height:44px}
@media(max-width:780px){#trainer .toolbar>.tabs button{font-size:1.05rem}.study-card>.row-actions .favorite{font-size:.88rem}}

/* 0.4.3 – paper cards, quiet decoration, clearly separated actions */
body{background-image:linear-gradient(#faf8f3bb,#faf8f3bb),url('paper.png')}
.row,.access{background-image:linear-gradient(#fffdf873,#fffdf873),url('paper.png');background-size:auto,440px}
.study-card:after{background-image:linear-gradient(#fffdf873,#fffdf873),url('paper.png');background-size:auto,440px}
.hero .demo-card .front{background-image:linear-gradient(#eee3f180,#eee3f180),url('paper.png');background-size:auto,440px}
.hero .demo-card .back{background-image:linear-gradient(#dfecdf80,#dfecdf80),url('paper.png');background-size:auto,440px}
.row{border-radius:14px 19px 16px 12px;border-left:4px solid #c9b2de;box-shadow:0 5px 12px #4934230d;margin-bottom:1rem;padding:1.2rem;gap:1rem;align-items:center}
.row:nth-child(even){border-left-color:#b1cdbb}
.row>div{min-width:0}.row h3{overflow-wrap:anywhere;line-height:1.4}
.row .row-actions,.study-card>.row-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.row .row-actions>button{font-size:.8rem;background:transparent}
.row .row-actions>.favorite,.study-card>.row-actions>.favorite{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-height:44px;padding:0;font-size:1.65rem;line-height:1;border:0;border-radius:50%;background:transparent;color:#806294}
.favorite[aria-pressed="true"]{color:#977020!important;background:#f5e7b64d!important}
.favorite:focus-visible{outline:2px solid #806294;outline-offset:3px}
.workspace-note,.landing-note{font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;color:#887393;font-size:.9rem;line-height:1.6;margin:.45rem 0 0}
.landing-note{margin:0 0 1.3rem;font-size:1rem}
#trainer .workspace-head,#trainer.is-learning .workspace-head{padding:.8rem 0 1rem;min-height:96px;margin:0 0 .5rem}
#trainer .workspace-head h1{font-size:clamp(1.35rem,2.8vw,2rem);margin:0}
#trainer .workspace-head .eyebrow{display:none}
.hero{gap:3.5rem}.access{border-radius:22px 16px 20px 15px;box-shadow:5px 7px 0 #dfd0eb66,0 12px 28px #4934230d}
@media(max-width:780px){.row{grid-template-columns:22px minmax(0,1fr);padding:1rem;gap:.6rem}.row .row-actions{grid-column:2;justify-content:flex-start;gap:.6rem}.workspace-note{font-size:.72rem}#trainer .workspace-head h1{font-size:1.25rem}#trainer .workspace-head,#trainer.is-learning .workspace-head{min-height:96px}.hero{gap:2rem}.landing-note{font-size:.85rem}.access{padding:1.3rem}.row .row-actions>.favorite,.study-card>.row-actions>.favorite{font-size:1.6rem}}
@media print{.row,.access,.study-card:after,.hero .demo-card .front,.hero .demo-card .back{background-image:none;box-shadow:none}}

/* 0.4.4: visible paper illustration and tactile card surfaces */
#trainer .workspace-head,#trainer.is-learning .workspace-head{display:grid;grid-template-columns:minmax(0,1fr) 230px auto;gap:1rem;min-height:185px;padding:.5rem 0;margin:0}
.paper-illustration{position:relative;width:230px;height:175px;pointer-events:none}
.illustration-card{position:absolute;width:145px;height:104px;left:35px;top:48px;border:1px solid #a99abb;border-radius:5px;box-shadow:3px 7px 8px #35244322;background-image:url('paper.png');background-size:300px}
.illustration-card.rear{background-color:#b9d9c5;background-blend-mode:multiply;transform:rotate(14deg);left:63px;top:58px}
.illustration-card.front{background-color:#dcc8ed;background-blend-mode:multiply;transform:rotate(-9deg);padding:18px 20px;color:#523c67;font:1.4rem/1.2 'Segoe Print','Bradley Hand','Comic Sans MS',cursive}
.illustration-card.front>span{position:absolute;right:12px;bottom:10px;font-size:1.6rem}
.illustration-note{position:absolute;left:13px;top:0;font:1.25rem/1.5 'Segoe Print','Bradley Hand','Comic Sans MS',cursive;color:#806393;transform:rotate(-6deg)}
.illustration-arrow{position:absolute;left:0;top:50px;font-size:2.5rem;color:#ad87be;transform:rotate(60deg)}
.workspace-note,.landing-note{font-size:1.15rem;color:#806393}
.row{background-image:url('paper.png');background-size:380px;background-color:#fff9e9;background-blend-mode:multiply;box-shadow:2px 5px 0 #d7c6b04a,0 10px 20px #58412a12;border:1px solid #d2c3b0;border-left:5px solid #c0a3d8;border-radius:5px 9px 7px 5px;padding:1.3rem}
.study-card:after{background-image:url('paper.png');background-size:380px;background-color:#fff9e9;background-blend-mode:multiply}
.access{background-image:url('paper.png');background-size:380px;background-color:#fff9ed;background-blend-mode:multiply}
.hero .demo-card .front,.hero .demo-card .back{background-image:url('paper.png');background-size:380px;background-blend-mode:multiply}
.hero .demo-card .front{background-color:#e5d4f1}.hero .demo-card .back{background-color:#cde3d3}
.card-tools{margin:.5rem 0}.card-tools .file-actions{gap:.7rem}.card-tools .file-actions button{font-size:.75rem;padding:.3rem .5rem;border:0;text-decoration:underline;text-underline-offset:4px;min-height:44px}.card-tools .selection{font-size:.75rem;margin:.25rem 0}.card-tools .selection label{font-size:.75rem}
#trainer #stats{margin:.25rem 0;padding:.3rem 0}#trainer .toolbar>.tabs{margin-bottom:0}
@media(max-width:780px){#trainer .workspace-head,#trainer.is-learning .workspace-head{grid-template-columns:minmax(0,1fr) 140px;min-height:175px;gap:.2rem .4rem}.paper-illustration{width:140px;height:140px;grid-column:2;grid-row:1 / span 2;transform:scale(.7);transform-origin:left center}#new-card{justify-self:start;grid-column:1;grid-row:2}.workspace-note{font-size:.85rem}.row{display:grid;grid-template-columns:22px minmax(0,1fr)}.row .row-actions{grid-column:2;margin-left:0}.landing-note{font-size:1rem}}

#email-confirmation{max-width:480px;width:calc(100% - 2rem);max-height:calc(100dvh - 2rem);overflow:auto;text-align:center;padding:2.5rem 2rem;border:1px solid #d2c3dc;border-radius:20px;background:#fffaf1 url('paper.png') center/440px;box-shadow:0 20px 80px #30204044}#email-confirmation::backdrop{background:#30204099}#email-confirmation .confirmation-close{position:absolute;top:.5rem;right:.5rem;border:0;background:transparent;font-size:1.5rem}#email-confirmation h2{font-size:clamp(1.8rem,5vw,2.4rem);margin:.5rem 0 1rem}#email-confirmation .confirmation-icon{font-size:3rem;color:#805da9}#confirmation-email{font-weight:650;overflow-wrap:anywhere;background:#ece3f2;padding:.65rem;border-radius:8px}#email-confirmation .confirmation-help{font-size:.85rem;color:#756780}#email-confirmation>.button{width:100%;min-height:48px}#confirmation-status{font-size:.85rem}#confirmation-status:empty{display:none}

.row .question-preview{display:block;text-align:left;padding:0;border:0;border-radius:3px;background:transparent;font:inherit;color:inherit;line-height:inherit;min-height:44px;width:100%;overflow-wrap:anywhere}.question-preview:hover{color:#805da9;text-decoration:underline;text-underline-offset:4px}.question-preview:focus-visible{outline:2px solid #805da9;outline-offset:4px}
#card-preview{width:calc(100% - 2rem);max-width:660px;max-height:calc(100dvh - 2rem);overflow:auto;padding:1.5rem;border:1px solid #d2c3b0;border-radius:12px;background:#fff9e9 url('paper.png') center/380px;box-shadow:0 20px 70px #30204044}#card-preview::backdrop{background:#30204099}#card-preview .dialog-head{font-size:.8rem;color:#776a80}#card-preview-content{text-align:center}#card-preview h2{font-size:clamp(1.6rem,4vw,2.3rem);white-space:pre-wrap;overflow-wrap:anywhere;margin:1.5rem 0;line-height:1.3}#card-preview.revealed h2{font-size:1rem;font-weight:450;color:#776a80}#card-preview .preview-answer>p{font-size:clamp(1.4rem,3vw,1.9rem);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;font-weight:600}#card-preview .preview-answer>.preview-background{font-size:1rem;font-weight:400}#card-preview .preview-answer small{font-size:.7rem;letter-spacing:.1em;color:#776a80}#card-preview details{text-align:left;white-space:pre-wrap}#card-preview .card-picture{max-width:100%;max-height:220px;object-fit:contain}

/* 0.5: the friendly learning notebook */
body{background:#faf9f5}
.hero h1{font-size:clamp(2.5rem,4.5vw,4rem);font-weight:720;letter-spacing:-.035em;line-height:1.09}.hero h1 em{text-decoration:none}.hero h1 em:after{content:'';display:block;width:66%;height:5px;background:#b4cebc;border-radius:70% 20%;margin-top:.4rem;transform:rotate(-1deg)}
.hero{align-items:start;gap:3.5rem;padding-top:1.2rem}.hero .access{margin-top:4rem;background:#fffefd;box-shadow:5px 6px 0 #e8e0ee,0 10px 25px #46344e09;border-color:#e4deea}.hero .landing-note{font-size:1rem;margin-bottom:1.2rem}
#trainer .workspace-head,#trainer.is-learning .workspace-head{min-height:132px;grid-template-columns:minmax(0,1fr) 170px auto;padding:0;margin-bottom:.3rem}#trainer .workspace-head h1{font-weight:650;letter-spacing:-.025em;font-size:clamp(1.4rem,2.6vw,1.85rem)}.paper-illustration{width:170px;height:130px;transform:scale(.75);transform-origin:center center}.illustration-card{top:17px}.illustration-card.rear{top:27px}.illustration-arrow{top:15px}
#trainer .toolbar>.tabs{gap:1rem}#trainer .toolbar>.tabs button{font-weight:550}#trainer .toolbar>.tabs button.active{font-weight:700}
#trainer #stats{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:.2rem 1rem;margin:.2rem 0 .6rem;padding:.3rem 0 .6rem}#stats strong{font-size:.85rem;font-weight:550;color:#635170}#stats small{font-size:.72rem;color:#897e90}
.card-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.2rem 1rem;margin:.4rem 0 .8rem}.card-tools .file-actions,.card-tools .selection{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem}.card-tools .selection label{margin:0;min-height:44px;display:flex;align-items:center}.card-tools .selection .link{font-size:.72rem}.card-tools .file-actions button{color:#776a80;text-decoration:none}.card-tools .file-actions button:hover{text-decoration:underline}
.row,#card-preview{background-color:#fffefb;background-image:linear-gradient(#ffffff6b,#ffffff6b),url('paper.png');background-size:auto,460px;background-blend-mode:normal;border-color:#e2ddd3;box-shadow:1px 3px 0 #e2ddd3,0 8px 15px #463b2f0c}.row{padding:1rem 1.15rem;border-left-width:3px}.row:nth-child(odd){border-left-color:#c2acd7}.row:nth-child(even){border-left-color:#accbb7}.row h3{font-size:1.08rem;font-weight:650;line-height:1.45}.row .row-actions>button:not(.favorite){font-size:.75rem;border:0;color:#82738c;background:transparent}.row .row-actions>button:not(.favorite):hover{color:#493157;text-decoration:underline}.row .row-actions{gap:.6rem}
.study-card{background:#fffefb}.study-card:after{background:linear-gradient(#ffffff6b,#ffffff6b),url('paper.png');background-size:auto,460px}.hero .demo-card .front{background:linear-gradient(#e9dcf0aa,#e9dcf0aa),url('paper.png');background-size:auto,460px}.hero .demo-card .back{background:linear-gradient(#d9e9dcaa,#d9e9dcaa),url('paper.png');background-size:auto,460px}
.round-finish{text-align:center;padding:2rem 1rem}.round-finish img{width:100px;height:90px;animation:friends-arrive .4s ease-out}.round-finish h2{font-size:1.8rem;margin:.5rem 0}.round-finish p{max-width:460px;margin:auto;color:#776a80}
.answer-arriving{animation:paper-reveal .28s ease-out;transform-origin:50% 0}.favorite.star-celebrate{position:relative;animation:star-pop .35s ease-out}.favorite.star-celebrate:after{content:'✧';position:absolute;top:-7px;right:0;color:#b49b4d;animation:spark-fade .6s ease-out forwards;pointer-events:none}
@keyframes paper-reveal{from{opacity:.25;transform:perspective(700px) rotateX(-14deg) translateY(5px)}to{opacity:1;transform:none}}@keyframes star-pop{50%{transform:scale(1.2) rotate(-9deg)}}@keyframes spark-fade{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}@keyframes friends-arrive{from{opacity:0;transform:translateY(7px) rotate(-5deg)}to{opacity:1;transform:none}}
@media(max-width:780px){.hero{padding-top:.5rem;gap:2rem}.hero .access{margin-top:0}.hero h1{font-size:clamp(2.3rem,8vw,3.4rem)}#trainer .workspace-head,#trainer.is-learning .workspace-head{grid-template-columns:minmax(0,1fr) 125px;min-height:140px;gap:0 .3rem}.paper-illustration{width:125px;height:115px;transform:scale(.6);transform-origin:left center}#trainer .workspace-head h1{font-size:1.3rem}.card-tools{align-items:flex-start;gap:.2rem}.card-tools .selection{gap:.2rem .7rem}.row{padding:.9rem}.row h3{font-size:1rem}#trainer #stats{gap:.2rem .5rem}}
@media(prefers-reduced-motion:reduce){.answer-arriving,.favorite.star-celebrate,.favorite.star-celebrate:after,.round-finish img{animation:none}.favorite.star-celebrate:after{display:none}.demo-inner{transition:none}}

/* 0.6 – real editorial landing page, responsive independent artwork */
#landing{max-width:1500px;padding:1.5rem 2rem 2rem;background:transparent}body:has(#landing:not([hidden])){background:#faf8f3;background-image:linear-gradient(#faf8f3c9,#faf8f3c9),url('paper.png');background-size:auto,700px}
#landing .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.05fr) minmax(300px,1fr);gap:1.4rem;align-items:center;padding:1rem 0 2rem}.hero-copy{min-width:0;position:relative;z-index:1}#landing .hero h1{font-size:clamp(2.5rem,3.8vw,3.6rem);font-weight:730;line-height:1.08;letter-spacing:-.045em;margin:0 0 1.3rem}#landing .hero h1 em:after{width:80%}#landing .hero .lead{font-size:1rem;line-height:1.6;margin-bottom:1.5rem}#landing .landing-note{font-size:.9rem;margin-bottom:1.5rem}.hero-copy>.link{display:block;margin-top:.75rem;font-size:.8rem}
.hero-art{position:relative;min-width:0;margin:0;align-self:center;padding-top:1.8rem}.hero-art img{width:100%;height:auto;display:block;filter:drop-shadow(0 9px 8px #4935300d)}.art-note{display:block;text-align:center;color:#806393;font:1.25rem/1.6 'Segoe Print','Bradley Hand','Comic Sans MS',cursive;transform:rotate(-7deg);margin-bottom:-.5rem}
#landing .hero .access{min-width:0;margin:0;padding:1.7rem 1.5rem;background:#fffefd;border:1px solid #e5dcec;border-radius:19px;box-shadow:5px 7px 0 #e8e0ee88,0 12px 32px #47334c0a}#landing .access h2{font-size:1.4rem}#landing .access .tabs button{font-size:.8rem}#landing .access .small-links{gap:.2rem}#landing .access input{min-width:0}#zugang{scroll-margin-top:1.5rem}
.learning-benefits{border-top:1px solid #ded5e3;border-bottom:1px solid #ded5e3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:1.4rem 0;gap:1rem;text-align:center}.learning-benefits>div>span{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:44% 56% 48% 52%;background:#e9e0f0;font-size:2rem;color:#644a7a}.learning-benefits>div:nth-child(2)>span{background:#dfebe2}.learning-benefits h2{font-size:1.05rem;margin:.6rem 0 .1rem}.learning-benefits p{font-size:.85rem;color:#776a80;margin:0}.landing-demo{text-align:center;padding:2rem 0 0}.landing-demo>h2{font-size:1.2rem;font-weight:600}.landing-demo .gesture-demo{max-width:360px;margin:auto}.landing-demo>.caption{margin:.5rem auto;max-width:420px}
@media(min-width:701px) and (max-width:1100px){#landing .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 2rem}#landing .hero .access{grid-column:1/-1;width:100%;max-width:520px;justify-self:center}#landing .hero h1{font-size:clamp(2.6rem,5vw,3.5rem)}.hero-art{max-width:400px;justify-self:center}}
@media(max-width:700px){#landing{padding:.7rem 1rem 1.5rem}#landing .hero{grid-template-columns:minmax(0,1fr);gap:1.25rem;padding-top:.5rem}.hero-copy{text-align:center}#landing .hero h1{font-size:clamp(2.35rem,9vw,3.5rem);margin-bottom:1rem}#landing .hero h1 em:after{margin:.4rem auto 0}#landing .hero .lead{margin:0 auto 1.2rem}#landing .landing-note{margin-bottom:1rem}.hero-copy>.link{margin:.5rem auto 0}.hero-art{width:100%;max-width:370px;justify-self:center;padding-top:0}.hero-art .art-note{font-size:1rem}#landing .hero .access{padding:1.4rem 1.15rem;width:100%;max-width:470px;justify-self:center}.learning-benefits{gap:.4rem;padding:1.2rem 0}.learning-benefits h2{font-size:.85rem}.learning-benefits p{font-size:.73rem}.learning-benefits>div>span{width:38px;height:38px;font-size:1.6rem}}

/* 0.6.1 – photographic paper environment and downward ambient shadows */
body:has(#landing:not([hidden])){background-color:#f7f2e8;background-image:url('desk-landscape.webp');background-size:100% auto;background-position:center top;background-repeat:no-repeat}
body:has(#landing:not([hidden]))>header{max-width:1280px;padding-left:3rem;padding-right:3rem}
#landing .hero{padding-top:0;padding-bottom:2rem}
#landing .hero .access{box-shadow:0 6px 9px #493b4520,0 25px 34px -12px #493b453b;background:#fffefcf5}
.hero-art img{filter:drop-shadow(0 16px 12px #493b4524)}
#landing .learning-benefits{position:relative;background:linear-gradient(180deg,#fffdf52b,#e8e2d56b);box-shadow:0 24px 30px -22px #463c4657;border-color:#bcb1b533;border-radius:0 0 24px 24px;margin-bottom:1.5rem}
@media(max-width:1100px){body:has(#landing:not([hidden])){background-image:url('desk-portrait.webp');background-size:100% auto}}
@media(max-width:700px){body:has(#landing:not([hidden]))>header{padding:1rem 1.25rem;background:#fffdf48c}#landing .hero{padding-top:1.5rem}#landing .hero .access{box-shadow:0 5px 8px #493b451c,0 19px 25px -12px #493b4540}#landing .learning-benefits{box-shadow:0 18px 24px -18px #463c4657}}

/* 0.6.4 – shared photographic learning environment */
body:has(#trainer:not([hidden])){background:#f7f2e8 url('desk-landscape.webp') center top / 100% auto no-repeat}
body:has(#trainer:not([hidden]))>header{background:#fffdf478;border-radius:0 0 18px 18px}
#trainer .workspace-head,#trainer.is-learning .workspace-head{grid-template-columns:minmax(0,1fr) 150px auto;min-height:175px}
#trainer .workspace-art{width:150px;height:170px;transform:none;position:relative;display:flex;align-items:center;justify-content:center;grid-column:auto;grid-row:auto;pointer-events:none}
.workspace-art img{display:block;width:125px;height:auto;filter:drop-shadow(0 9px 8px #493b452a)}
.workspace-art>span{position:absolute;bottom:0;right:0;font:1rem 'Segoe Print','Bradley Hand',cursive;color:#806393;transform:rotate(-6deg);white-space:nowrap}
#trainer .row{background:linear-gradient(#fffefb88,#fffefb88),url('paper.png');background-size:auto,460px;box-shadow:0 4px 4px #493b4510,0 14px 20px -12px #493b4540}
#trainer .study-card{box-shadow:0 8px 10px #493b4519,0 25px 35px -14px #493b4540}
#demo-banner{font-size:.85rem;line-height:1.5;background:#f0e9f5e8}
#demo-save{display:block;width:fit-content;margin-top:.65rem;font-size:.85rem;padding:.7rem 1rem}
@media(max-width:1100px){body:has(#trainer:not([hidden])){background-image:url('desk-portrait.webp')}}
@media(max-width:780px){#trainer .workspace-head,#trainer.is-learning .workspace-head{grid-template-columns:minmax(0,1fr) 115px;min-height:175px}#trainer .workspace-art{grid-column:2;grid-row:1 / span 2;width:115px;height:165px}#trainer .workspace-art img{width:110px}.workspace-art>span{font-size:.78rem}#trainer .workspace-head h1{font-size:1.3rem}#trainer .workspace-head #new-card{grid-column:1;grid-row:2}}
@media print{#trainer .workspace-art{display:none}body:has(#trainer:not([hidden])){background:white}}

/* 0.6.5 – compact overview; prominent main navigation */
#trainer #cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:stretch}
#trainer #cards>.row{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-rows:1fr auto;align-items:start;gap:.3rem .65rem;padding:.85rem 1rem;margin:0;min-width:0;border-radius:12px}
#cards>.row>input{margin: .35rem 0 0}
#cards>.row h3{font-size:.95rem;line-height:1.35;margin:.25rem 0 .35rem}
#cards .question-preview{font-size:inherit;line-height:inherit;padding:0;min-height:0;overflow-wrap:anywhere}
#cards>.row .topic{font-size:.7rem;line-height:1.3}
#cards>.row small:not(.topic){font-size:.68rem;line-height:1.3}
#trainer #cards>.row>.row-actions{grid-column:2;display:flex;align-items:center;justify-content:flex-end;gap:.4rem;margin:0;padding-top:.1rem;flex-wrap:wrap}
#cards>.row .row-actions button{font-size:.72rem;min-height:40px;padding:.35rem .45rem}
#cards>.row .row-actions>.favorite{font-size:1.5rem;width:40px;flex-basis:40px;padding:0}
#cards>.empty{grid-column:1/-1}
#trainer .toolbar>.tabs button{font-size:1.4rem;min-height:58px;flex-basis:230px;padding:.7rem 1rem}
#trainer .toolbar>.tabs button.active{font-weight:750}
@media(max-width:700px){#trainer #cards{grid-template-columns:minmax(0,1fr);gap:.7rem}#trainer .toolbar>.tabs{gap:.3rem}#trainer .toolbar>.tabs button{font-size:1.2rem;min-height:54px;padding:.65rem .5rem}#trainer #cards>.row{padding:.75rem .85rem}}

/* 0.6.7 – expandable topics and continuous paper surface */
body:has(#landing:not([hidden])),body:has(#trainer:not([hidden])){position:relative;isolation:isolate;background:#f7f2e8 url('paper.png') repeat;background-size:480px}
body:has(#landing:not([hidden])):before,body:has(#trainer:not([hidden])):before{content:'';position:absolute;inset:0 0 auto;height:66.67vw;z-index:-1;pointer-events:none;background:url('desk-landscape.webp') center top / 100% auto no-repeat;-webkit-mask-image:linear-gradient(#000 55%,transparent 100%);mask-image:linear-gradient(#000 55%,transparent 100%)}
.card-search-label{font-size:.8rem;max-width:440px;margin:.7rem 0 1rem;color:var(--muted)}.card-search-label input{padding:.6rem .8rem;background:#fffdf7c9}
#cards>.topic-group{grid-column:1/-1;border:1px solid #adc8b6;border-radius:12px;background:#fffdf7bf;box-shadow:0 8px 14px -10px #493b4540;overflow:hidden}
.topic-group>summary{cursor:pointer;padding:1rem 1.1rem;background:#dceadbdc;color:#334c40;list-style:inside;line-height:1.5}.topic-group>summary strong{font-size:1.02rem}.topic-group>summary small{display:inline-block;margin-left:.8rem;color:#647367;font-size:.75rem}.topic-content{padding:.4rem 1rem .8rem}.topic-tools{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}.topic-tools label{display:flex;align-items:center;font-size:.75rem}.topic-tools button{font-size:.8rem}
.topic-questions{display:grid;gap:0}.topic-questions>.row{display:grid!important;grid-template-columns:20px minmax(0,1fr) auto!important;align-items:center;gap:.65rem!important;border:0!important;border-bottom:1px solid #d8d0c8!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:.55rem 0!important;margin:0!important}
.topic-questions .row .topic{display:none}.topic-questions .row h3{margin:.1rem 0;font-size:.9rem;line-height:1.4}.topic-questions .question-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;min-height:40px}.topic-questions .row .row-actions{grid-column:3!important;margin:0!important;gap:.15rem!important}.topic-questions .row-actions button{font-size:.7rem;padding:.3rem;min-height:40px}.topic-questions .row-actions>.favorite{font-size:1.35rem;width:40px;flex-basis:40px}
@media(max-width:1100px){body:has(#landing:not([hidden])):before,body:has(#trainer:not([hidden])):before{height:150vw;background-image:url('desk-portrait.webp')}}
@media(max-width:700px){.topic-group>summary small{display:block;margin-left:1rem}.topic-content{padding:.25rem .7rem .7rem}.topic-questions>.row{grid-template-columns:20px minmax(0,1fr)!important}.topic-questions .row .row-actions{grid-column:2!important;justify-content:flex-end!important}.topic-tools{gap:0}}

.topic-group>summary .rename-topic{margin-left:.6rem;font-size:1.1rem;min-width:40px;min-height:40px;color:#4a6757;text-decoration:none;vertical-align:middle}

#study>.skip-question{display:block;margin:.25rem auto .5rem;font-size:.85rem;min-height:44px;text-decoration:none;color:#806393;padding:.5rem .9rem}#study>.skip-question:hover{background:#ece3f3;border-radius:20px}#study>.skip-question:focus-visible{outline:2px solid #806393;outline-offset:2px}

/* 0.7 – consistent topic colors in app and print */
#cards>.topic-group{border-color:var(--topic-accent)}.topic-group>summary{background:var(--topic-light);color:var(--topic-ink)}.topic-group>summary small,.topic-group>summary .rename-topic{color:var(--topic-ink)}
#trainer #cards .row{border-left-color:var(--topic-accent)}.study-card:before{background:var(--topic-light)}

.topic-color-button{color:var(--topic-accent);background:transparent;border:0;box-shadow:none;padding:.3rem;min-width:36px;min-height:36px;font-size:1.2rem;vertical-align:middle}.row .topic-color-button{float:right}.topic-color-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}.topic-swatch{background:var(--swatch);color:#30243e;border:2px solid transparent;box-shadow:none;border-radius:12px;padding:.8rem .3rem;min-height:48px;font-size:.8rem}.topic-swatch[aria-pressed=true]{border-color:#493253}.topic-swatch:focus-visible{outline:3px solid #493253;outline-offset:2px}#topic-color-dialog{width:min(92vw,520px)}@media(max-width:480px){.topic-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Optional support, quietly below the learning content. */
footer{flex-wrap:wrap}.support-project{flex:0 0 100%;display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.35rem 0;margin-bottom:.2rem;color:#817782;font-size:.76rem}.support-button{display:inline-flex;align-items:center;justify-content:center;background:#eee7f1b8;color:#6f5d7c!important;text-decoration:none!important;border:1px solid #cfc2d6;border-radius:999px;padding:.48rem .8rem;font-size:.76rem;font-weight:650;min-height:38px;box-shadow:0 2px 5px #4f3e5515}.support-button:hover{background:#e6dcec;color:#4f3d5d!important}.support-button:focus-visible{outline:2px solid #796687;outline-offset:3px}@media(max-width:600px){.support-project{justify-content:center;gap:.35rem;font-size:.7rem}.support-button{font-size:.7rem;padding:.42rem .65rem;min-height:36px}}@media print{.support-project{display:none}}

.topic-group>summary .topic-select{display:inline-block;width:20px;height:20px;margin:0 .65rem 0 0;vertical-align:middle;accent-color:#7955a2;cursor:pointer}.topic-group>summary:has(.topic-select:checked){box-shadow:inset 0 0 0 2px var(--topic-accent)}

.workspace-head .workspace-title em{display:inline-block;font-size:.8em;font-weight:500;font-style:italic;color:#88709e;letter-spacing:-.015em}.workspace-head .workspace-title span{display:inline-block}

#trainer .toolbar>.tabs button{font-size:1.55rem;font-weight:700;min-height:62px;flex:1 1 250px;color:#776981}#trainer .toolbar>.tabs button.active{font-weight:700;color:#30243e}#trainer .toolbar>.tabs button.active:after{height:4px;left:18%;right:18%;background:#8a62b5}#trainer .toolbar>.tabs button:focus-visible{outline:2px solid #8a62b5;outline-offset:3px}@media(max-width:700px){#trainer .toolbar>.tabs button{font-size:1.3rem;min-height:58px;padding:.65rem .4rem}}

/* Keep the create button stationary for mouse, touch and keyboard. */
#new-card{transform:none!important;transition:background-color .15s ease;box-shadow:0 3px 5px #5e457127}#new-card:hover{background:#7955a2}#new-card:focus-visible{outline:3px solid #5d3e7d;outline-offset:4px}

/* Compact primary navigation, independent of the full toolbar width. */
#trainer .toolbar>.tabs{width:min(100%,540px);max-width:540px;flex:0 1 540px;margin:.4rem auto .7rem;gap:.6rem;justify-content:center}#trainer .toolbar>.tabs button{flex:1 1 0;min-width:0;font-size:1.65rem;padding:.8rem .7rem;min-height:66px;border-radius:14px;color:#776981}#trainer .toolbar>.tabs button.active{background:#e9ddf080;color:#30243e}#trainer .toolbar>.tabs button.active:after{left:22%;right:22%;bottom:3px;height:4px}#trainer .toolbar>.tabs button:hover{color:#493253}@media(max-width:700px){#trainer .toolbar>.tabs{width:min(100%,440px);gap:.35rem}#trainer .toolbar>.tabs button{font-size:clamp(1.12rem,4.8vw,1.4rem);min-height:60px;padding:.7rem .35rem}}

#new-card{font-size:1.08rem;padding:.9rem 1.45rem;min-height:54px;line-height:1.25;max-width:100%}@media(max-width:700px){#new-card{font-size:1.02rem;padding:.85rem 1.2rem;min-height:52px}}

#trainer .workspace-head,#trainer.is-learning .workspace-head{grid-template-columns:minmax(0,1fr) 205px auto;min-height:255px}#trainer .workspace-art{width:205px;height:250px;padding-bottom:22px}#trainer .workspace-art img{width:185px;max-width:100%;height:auto}.workspace-art>span{font-size:.9rem;right:4px;bottom:0}@media(max-width:780px){#trainer .workspace-head,#trainer.is-learning .workspace-head{grid-template-columns:minmax(0,1fr) 145px;min-height:205px}#trainer .workspace-art{width:145px;height:200px;grid-column:2;grid-row:1 / span 2;padding-bottom:20px}#trainer .workspace-art img{width:140px}.workspace-art>span{font-size:.72rem;right:0}#trainer .workspace-head #new-card{grid-column:1;grid-row:2;white-space:normal}}

/* 0.9.12 – German handwritten encouragements and softly blended hero artwork. */
.hand-note,.landing-note,.workspace-art>span{font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;color:#806393;font-weight:500;letter-spacing:.01em}
.hero-art{padding-top:2.6rem}.hero-art .art-note{position:absolute;z-index:2;top:-.15rem;left:8%;right:4%;margin:0;text-align:center;font-size:clamp(.95rem,1.55vw,1.25rem);line-height:1.35;transform:rotate(-5deg)}
.hero-art img{-webkit-mask-image:radial-gradient(ellipse 74% 78% at 50% 52%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 74% 78% at 50% 52%,#000 72%,transparent 100%)}
#landing .access{position:relative}.access-note{position:absolute;right:-1.2rem;top:-2.15rem;font-size:.86rem;transform:rotate(4deg);white-space:nowrap}
#landing .learning-benefits{margin-top:2.4rem}.benefits-note{position:absolute;left:2rem;top:-2rem;font-size:.9rem;transform:rotate(-3deg)}
#list-view,#learn-view{position:relative}.list-note{display:block;width:max-content;margin:.1rem 1.2rem .7rem auto;font-size:.9rem;transform:rotate(2deg)}.learn-note{display:block;width:max-content;max-width:100%;margin:.3rem auto .8rem;font-size:.92rem;transform:rotate(-2deg)}
@media(max-width:1100px){.access-note{right:.5rem}.hero-art .art-note{font-size:1rem}}
@media(max-width:700px){.hero-art{padding-top:2.2rem}.hero-art .art-note{top:.1rem;left:0;right:0;font-size:.9rem}.access-note{position:static;display:block;text-align:right;margin:-.35rem 0 .6rem;font-size:.72rem;transform:rotate(2deg)}#landing .learning-benefits{margin-top:2rem}.benefits-note{left:1rem;top:-1.55rem;font-size:.72rem}.list-note{font-size:.74rem;margin-right:.4rem}.learn-note{font-size:.78rem}.landing-note{font-size:.78rem}}
@media print{.hand-note,.landing-note,.workspace-art>span{display:none!important}}