/* ============================================================ MinuteStudio — the whole visible surface. The design has a name so that decisions can be argued against it: **Plakat**. A shelf of posters, not a sheet of paper. Flat grounds in four tints, shapes on them, one heavy condensed voice that shouts and one light voice beside it, ink on tint, and a card that turns over in your hand. It grew out of the catalogue: the course card was designed first, it was better than the pages around it, and the pages followed the card. Six rules hold it together: 1. Ink borders, never shadows. A raised surface is drawn, not lit. `--strich` (2px) marks anything you touch, a hairline anything you only read. 2. One accent, four grounds. `--roetel` is the only colour that *acts*: it means "now" — today, the beat, the milestone, an error. The four tints never act and never carry text; they are grounds, and since the posters they are shapes too. Anything you press is still ink. 3. Grotesk shouts, sans reads, mono counts. Three voices. Every title is set in two of them at once — the first word in the poster cut, the rest in the sans at its lightest, or the other way round for a course, which decides that from its id. Prose is the sans. 4. Radius says what a thing is: pills are pressed, cards are held, rules are neither. 5. The window says how much room there is, the content says how much of it to take. A course text keeps the measure however wide the screen gets; a catalogue takes the width. See "Width and room" below. 6. A course is a poster, and it is the same poster everywhere: its tint, its cover printed across it or its composition, its name in two voices, its theme in the corner. In the catalogue and the planner it turns over; at the head of its page it is grown to the width of the page. Tokens come in one set with two fillings. The scheme hangs off data-theme on ; without it the operating system decides. */ /* ---------------------------------------------------------- Typefaces Self-hosted, because the content policy in src/core/schutz.js says font-src 'self' and a webfont from a CDN would have to loosen it. The subsets are gated by unicode-range: a German or English page fetches latin only and never sees the latin-ext files. Three faces. Figtree is the variable weight build and does most of the work: prose at 400, the quiet half of a title at 300, labels at 600. Bricolage Grotesque is one static cut, condensed and heavy, for the loud half of a title and for section headings. Plex Mono at 400 for anything that is counted. No italic anywhere: emphasis is weight. */ @font-face{font-family:Figtree;font-style:normal;font-weight:300 900;font-display:swap; src:url(/marke/schrift/figtree-latin-wght-normal.woff2) format('woff2-variations'); 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:Figtree;font-style:normal;font-weight:300 900;font-display:swap; src:url(/marke/schrift/figtree-latin-ext-wght-normal.woff2) format('woff2-variations'); 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} /* The poster cut, for the loud half of every title. One static instance — weight 800, width 75 % — rather than the three-axis variable file, which is six times the size for axes a title never moves. Preloaded, since the first word of the first heading is set in it. */ @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-stretch:75%;font-display:swap; src:url(/marke/schrift/bricolage-grotesque-latin-800-condensed.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:'Bricolage Grotesque';font-style:normal;font-weight:800;font-stretch:75%;font-display:swap; src:url(/marke/schrift/bricolage-grotesque-latin-ext-800-condensed.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:'Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url(/marke/schrift/ibm-plex-mono-latin-400-normal.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:'Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url(/marke/schrift/ibm-plex-mono-latin-ext-400-normal.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} /* ------------------------------------------------------------ Tokens The text colours are measured against their ground, not guessed. --grau carries .hinweis (12px) and .marke (10px) and therefore stands at body-text size: it needs 4.5:1 under WCAG AA, and so do --graphit, --payne, --roetel and --gold, on all three paper tones. The check is in tests/oberflaeche.test.mjs and it reads the values out of this file. Whoever changes them measures again. --nacht is the one colour that does not flip with the scheme. The landing page alternates cream and ink bands, and an ink band that turns cream in dark mode is not a band any more. */ :root{ --papier:#FAFAF8; --papier-hell:#FFFFFF; --papier-tief:#F0EFEB; --tinte:#161616; --graphit:#454440; --grau:#4C4A46; --linie:rgba(22,22,22,.16); --linie-zart:rgba(22,22,22,.08); --payne:#1746A2; --roetel:#C7200F; --gold:#806012; /* The metal has two values, the way the tints do: --gold is brass as ink, dark enough to carry 4.5:1 as text on paper, and --gold-hell is brass as a *surface* — the face of a struck medal, with the figure knocked out of it in --nacht. The ink value cannot be a surface (white on it fails) and the surface value cannot be ink (1.86:1 on paper, 1.03 on a washed amethyst), so neither is a brightened or darkened version of the other to be folded back in. It is declared **once**, here, and deliberately not overridden below: paper and ink swap with the scheme because the page turns over, and brass does not — a medal is the same metal under a lamp as in daylight. tests/oberflaeche.test.mjs fails if a second declaration of it ever appears. */ --gold-hell:#E0B44A; --salbei:#00916A; --lavendel:#8B4FD8; --apricot:#F5A300; --himmel:#0E8FB8; --wasch:44%; --wasch-stark:64%; --druck:44%; --geometrie:100%; --schleier:56%; --nacht:#161616; --nacht-text:#FAFAF8; --nacht-grau:#A9A69F; --nacht-linie:rgba(250,250,248,.20); --sans:Figtree,ui-sans-serif,-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif; --mono:'Plex Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace; --plakat:'Bricolage Grotesque','Arial Narrow','Helvetica Neue',Helvetica,Arial,sans-serif; /* One drawn line for everything you can touch, a hairline for everything you only read. */ --strich:2px; /* And a third thing, which is not a line at all: the mat a finished course's card is mounted in. A border this wide has stopped being a stroke and become a surface, so it is named rather than left as a --strich somebody kept increasing — the two weights above are about what you may *do* with a thing, and this one is about what a thing *is*. It is the only one. */ --passepartout:7px; --rund:5px; --rund-gross:18px; --rund-voll:999px; --sp:1.5rem; /* --------------------------------------------------- Width and room One column was never a design decision, it was the phone showing through. A reading measure is right for prose and wrong for a catalogue, and the page has to be able to say which it is. Four widths, and each of them means something: --spalte 35rem the measure. Prose, forms, a course text. About 70 characters, which is where a line stops being comfortable to come back from. --mittel 58rem a measure with a companion beside it — a column of text at 35rem and a rail of 20rem. A course page: the text is the point, and the rail only carries what belongs next to it. --weit 76rem something you scan rather than read: the catalogue's cards, the notebook, the account's three subscriptions beside each other, the editor, a table in the administration. --schiene how much room the navigation takes at the left. Zero on a phone, where it is a bar at the bottom. The steps are named after what fits, not after a device, and they are in rem so that someone who enlarges their text gets the narrow layout rather than a squeezed wide one: under 48rem compact one column, tabs at the bottom from 48rem medium a rail of icons at the left from 64rem weit side columns appear inside the views from 72rem gross the rail writes its labels out from 90rem sehr nothing grows any further; the page stops and the paper widens around it The rail widens *after* the side columns appear, and deliberately: the other way round the room left for the content would shrink at 72rem and a two-column view would fall back to one just as the window got bigger. --rand is the gutter, and it grows with the window: 1.35rem against the edge of a phone, 2.6rem on a desk, so a wide page does not look as though it were bleeding off the screen. */ --spalte:35rem; --mittel:58rem; --weit:76rem; --rand:clamp(1.35rem,.7rem + 1.8vw,2.6rem); --schiene:0px; --schwung:cubic-bezier(.22,.9,.28,1); color-scheme:light; } :root[data-theme="dark"]{ --papier:#111111; --papier-hell:#1B1B1B; --papier-tief:#0A0A0A; --tinte:#F3F2EE; --graphit:#B9B6AF; --grau:#A8A59E; --linie:rgba(243,242,238,.20); --linie-zart:rgba(243,242,238,.10); --payne:#6FA8FF; --roetel:#FF5A45; --gold:#E0B44A; --salbei:#006A4E; --lavendel:#5A2E96; --apricot:#A87000; --himmel:#0A6A88; --wasch:26%; --wasch-stark:38%; --druck:24%; --geometrie:90%; --schleier:70%; --nacht:#0A0A0A; --nacht-text:#F3F2EE; --nacht-grau:#9A978F; --nacht-linie:rgba(243,242,238,.18); color-scheme:dark; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --papier:#111111; --papier-hell:#1B1B1B; --papier-tief:#0A0A0A; --tinte:#F3F2EE; --graphit:#B9B6AF; --grau:#A8A59E; --linie:rgba(243,242,238,.20); --linie-zart:rgba(243,242,238,.10); --payne:#6FA8FF; --roetel:#FF5A45; --gold:#E0B44A; --salbei:#006A4E; --lavendel:#5A2E96; --apricot:#A87000; --himmel:#0A6A88; --wasch:26%; --wasch-stark:38%; --druck:24%; --geometrie:90%; --schleier:70%; --nacht:#0A0A0A; --nacht-text:#F3F2EE; --nacht-grau:#9A978F; --nacht-linie:rgba(243,242,238,.18); color-scheme:dark; } } /* -------------------------------------------------------------- Base */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} [hidden]{display:none!important} html,body{margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:16.5px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:none; /* The bands on the launch page reach past the reading column with a negative margin. Without this a phone can scroll sideways by the width of a scrollbar. */ overflow-x:clip} button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer} button:disabled{cursor:default} input,textarea,select{font:inherit;color:inherit} a{color:inherit} ::selection{background:var(--salbei);color:var(--tinte)} :focus-visible{outline:2px solid var(--payne);outline-offset:3px;border-radius:2px} /* ------------------------------------------------------------ The sheet The page is a padded field with one column standing in the middle of it, and the column's width is the view's decision. The width is published on rather than kept here, because the header and the signpost have to line up with it and they are not inside the sheet. The grid is what does the centring: one track, as wide as --breite allows, placed in the middle of whatever room is left once the rail at the left and the gutters have taken theirs. A view puts exactly one node in here, so one track is all that is ever needed. */ body{--breite:var(--spalte)} body:has(.blatt.weit){--breite:var(--weit)} body:has(.blatt.mittel){--breite:var(--mittel)} /* The launch page lays out its own bands at 72rem; the header follows them. */ body:has(.blatt.voll){--breite:72rem} .blatt{display:grid;grid-template-columns:minmax(0,var(--breite));justify-content:center; padding:calc(env(safe-area-inset-top) + 1.8rem) var(--rand) 7.5rem; padding-left:calc(var(--schiene) + var(--rand))} /* The launch page runs edge to edge and lays out its own bands. It also has no tab bar under it — nobody is signed in — so the column's landing strip at the bottom would only be a cream stripe under the last dark band. */ .blatt.voll{display:block;padding:0} /* Prose inside a wide view keeps the measure: a catalogue may be 76rem, the sentence that introduces it may not. */ .mass{max-width:var(--spalte)} /* `backwards` rather than `both`: after the run no transform declaration is left standing. One — even the identity matrix — makes every descendant `position:sticky` do nothing. */ .ansicht{animation:auf .45s var(--schwung) backwards} @keyframes auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ------------------------------------------------------- Typography Grotesk shouts, sans reads, mono counts. The poster cut: the loud half of every title, and section headings on their own. The sans: prose, the quiet half of a title, anything in small caps, every button, every hint. The mono: clocks, day numbers, durations, prices — the things you compare down a column, which is why they are tabular. */ .marke{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--grau);display:block;margin-bottom:.6rem} .titel{font-family:var(--plakat);font-weight:800;font-stretch:75%;font-size:1.7rem;line-height:1; letter-spacing:-.01em;margin:0 0 .7rem;text-wrap:balance} .titel.gross{font-size:clamp(2.5rem,7vw,3.7rem)} /* Two voices, stacked: the first word on its own line, the rest below it — stimmen() in ui.js writes them. Loud is the poster cut, quiet the label face at its lightest, the same size, so the contrast is weight and width rather than size and one measurement fits both on a card. Every title in the application has this shape; it is what makes a card in the catalogue and the head of a page the same design. */ .laut{display:block;font-family:var(--plakat);font-weight:800;font-stretch:75%;letter-spacing:-.01em;line-height:.9} .leise{display:block;font-family:var(--sans);font-weight:300;letter-spacing:-.015em;line-height:1} .laut+.leise{margin-top:.08em} .leise+.laut{margin-top:.04em} .unter{font-weight:300;font-size:1.18rem;color:var(--graphit);margin:0 0 1.7rem;line-height:1.45;text-wrap:pretty} p{margin:0 0 1rem;text-wrap:pretty} .zart{color:var(--graphit)} .regel{height:1px;background:var(--linie);border:0;margin:2.4rem 0} .hinweis{font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:.01em;color:var(--grau);line-height:1.6} /* A hint that is a button gets a surface to hit — 12 pixels of text with no padding cannot be caught on a phone. */ button.hinweis{padding:.5rem .4rem;margin:-.5rem -.4rem;min-height:2.2rem;border-radius:var(--rund)} button.hinweis:hover{color:var(--tinte)} .formblock-knoepfe button.hinweis{min-width:2.2rem} .mini{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)} .fehler{border-left:var(--strich) solid var(--roetel);padding:.6rem .9rem;margin:1rem 0;color:var(--roetel); font-family:var(--sans);font-size:.9rem;line-height:1.5} /* ----------------------------------------------------------- Surfaces A card is drawn, not lit. The old rule was a shadow; a shadow needs a light source, and paper on a table has none that the screen agrees with. The border does the same work and survives the dark scheme without a second set of values. */ .karte{background:var(--papier-hell);border:1px solid var(--linie);border-radius:var(--rund-gross); padding:1.5rem 1.4rem} .karte.stark{border-width:var(--strich);border-color:var(--tinte)} /* --------------------------------------------------------- Buttons Pressed, not drawn on: a filled pill for the one thing to do next, an outlined pill for everything beside it. The 2px border is the signature — it is what makes an outlined button read as a button and not as a box of text. */ .knopf{display:block;width:100%;text-align:center;background:var(--tinte);color:var(--papier); border:var(--strich) solid var(--tinte);padding:.85rem 1.4rem;border-radius:var(--rund-voll); font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; transition:transform .18s var(--schwung),background .2s,color .2s,border-color .2s} @media (hover:hover){ .knopf:hover{transform:translateY(-1px)} .knopf.leise:hover{border-color:var(--tinte);color:var(--tinte);background:var(--papier-hell)} } .knopf:active{transform:translateY(0) scale(.985)} a.knopf{text-decoration:none} .knopf.leise{background:none;color:var(--graphit);border-color:var(--linie)} .knopf.roetel{background:var(--roetel);border-color:var(--roetel);color:#FFFFFF} .knopf[disabled]{opacity:.4;transform:none} .knopf.schmal{display:inline-block;width:auto;padding:.5rem 1rem;font-size:11px;letter-spacing:.1em} .werkzeug{display:flex;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap} .werkzeug .knopf{flex:1;min-width:10rem} .werkzeug.senkrecht{flex-direction:column;gap:.5rem} .werkzeug.senkrecht .knopf{flex:none} .werkzeug .knopf.schmal{flex:0 0 auto;min-width:0} /* Room above a block, in five steps. Views used to carry the value inline (`style="margin-top:.7rem"`, thirteen different values across the pages); a step is a decision the stylesheet makes once. */ .oben-0{margin-top:0} .oben-1{margin-top:.4rem} .oben-2{margin-top:.7rem} .oben-3{margin-top:1rem} .oben-4{margin-top:1.5rem} /* ------------------------------------------------------------ Figures */ .zitat{font-weight:300;color:var(--graphit);font-size:1.12rem;line-height:1.5; border-left:1px solid var(--linie);padding-left:1.1rem;margin:0 0 1.4rem} /* The tally. It draws the whole course now, so most of it is usually still ahead: a unit not done yet is the same stroke in --linie and filling it in is what finishing does. `--gb` is the width of one group — full size up to ten groups, smaller past that, so a hundred and fifty units stay a couple of rows inside a card instead of four. The gap follows it, or a shrunken group would sit in a hole the size of a full one. */ .strichliste{display:flex;flex-wrap:wrap;align-items:flex-start; gap:calc(var(--gb, 24px) * .23);color:var(--tinte)} .strichliste svg{width:var(--gb, 24px);height:auto} .strichliste .leer{stroke:var(--linie)} /* The day strip across the top of the start page: twenty-eight strokes, one a day, as wide as whatever holds it. Twenty-eight of them whatever the history is, which is the whole reason it exists — the tally of every session ever that stood here wrapped into a column of loose marks down the side of a phone, and repeated a number that was already written beside it. */ .streifenband{width:100%;min-width:0} .streifen{display:block;width:100%;height:18px;color:var(--tinte);max-width:24rem} .streifen .leer{stroke:var(--linie)} /* The stroke that is still being earned. --roetel means now, and today is the only thing in the drawing that can still change. */ .streifen .jetzt{stroke:var(--roetel)} .streifen .jetzt.leer{stroke:var(--roetel);opacity:.5} .streifenband>span{display:block;margin-top:.45rem;font-family:var(--sans);font-size:10px; font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grau)} .zahlen{display:flex;gap:2.4rem;margin:1.6rem 0 0;flex-wrap:wrap} .zahl b{display:block;font-family:var(--mono);font-size:1.7rem;font-weight:400;line-height:1.1; font-variant-numeric:tabular-nums} .zahl span{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grau)} /* The streak is the only one of the three figures that can still change today, and --roetel is the colour kept for exactly that. */ .zahl.jetzt b{color:var(--roetel)} /* The three figures and the tally across the top of the start page. Under each other on a phone, side by side with a rule between them once there is room — the tally is a drawing of the first number, so they belong on one line. */ .zahlenband{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.4rem; border-top:1px solid var(--linie);border-bottom:1px solid var(--linie); padding:1.3rem 0;margin:1.6rem 0 2rem} /* On a phone the strip is its own row under the figures, full width, because it is a drawing of twenty-eight days and squeezing it into whatever the three numbers leave over is what broke the tally that stood here. Once there is room it takes the rest of the line beside them. */ .zahlenband .streifenband{flex:1 1 100%} @media(min-width:48rem){ .zahlenband .streifenband{flex:1 1 16rem} } /* Rules that separate sections in the one-column layout and would be a line through the middle of nothing once the sections stand beside each other. */ @media(min-width:64rem){ .nur-schmal{display:none} } /* The courses under way. Three at most, so the row never wraps into a second. */ .weiter-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.9rem;margin-top:.4rem} .weiterkarte{display:flex;flex-direction:column} /* The button sits at the bottom edge whatever the title above it did, so a row of cards has one line of buttons rather than three. */ .weiterkarte .knopf{margin-top:auto} /* ------------------------------------------------- The loading rule A thin line under the header for as long as a view is loading. It appears only after roughly two hundred milliseconds — a fast answer should not flicker. */ .ladebalken{position:fixed;left:0;right:0;top:0;height:2px;z-index:45;overflow:hidden;background:var(--linie-zart)} .ladebalken::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:40%;background:var(--roetel); animation:laden 1s ease-in-out infinite} @keyframes laden{to{left:100%}} /* ============================================================ The shell: header, signpost, tabs ============================================================ */ .kopfleiste{position:sticky;top:0;z-index:35;background:color-mix(in srgb,var(--papier) 88%,transparent); -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--linie-zart);padding-top:env(safe-area-inset-top)} /* The header lines up with whatever the view below it is: a reading column by default, the band width on the launch page, the editor's width in the editor. Without this the signpost sat in the middle of a page whose content started two hundred pixels to its left. Both read --breite off , which is where the sheet publishes the width the current view asked for. */ .kopf-innen{max-width:var(--breite);margin:0 auto;padding:.7rem var(--rand);display:flex;align-items:center; justify-content:space-between;gap:1rem} /* The word mark: the drawn mark, then the name. `Studio` in italic is the same distinction the logo makes — the minute is set, the studio is written. */ .wortmarke{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--plakat);font-weight:800; font-stretch:75%;font-size:1.3rem;letter-spacing:-.01em;line-height:1;padding:.2rem;margin:-.2rem; border-radius:var(--rund);transition:opacity .2s} .wortmarke:hover{opacity:.7} .wortmarke em{font-style:normal;font-family:var(--sans);font-weight:300;font-stretch:100%;letter-spacing:-.02em} .wortmarke .zeichen{width:22px;height:22px;flex:none;display:block} .wortmarke .zeichen svg{width:100%;height:100%;display:block;stroke:var(--tinte);fill:none; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .kopf-rechts{display:flex;align-items:center;gap:.4rem} .kopfknopf{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--grau);border:1px solid var(--linie);border-radius:var(--rund-voll);padding:.35rem .7rem; background:none;transition:border-color .18s,color .18s} .kopfknopf:hover{border-color:var(--tinte);color:var(--tinte)} select.sprachwahl{appearance:none;padding-right:.7rem;font-family:var(--mono);letter-spacing:.06em; text-transform:none;font-size:11px;font-weight:400} /* On a narrow phone the two header controls together were as wide as the name they sit beside. The words stay — an icon for "colour scheme" would have to be learnt — but the setting they are given loses its air. */ @media(max-width:30rem){ .kopf-innen{gap:.6rem} .kopfknopf{font-size:9.5px;letter-spacing:.08em;padding:.3rem .5rem} .wortmarke{font-size:1.02rem;gap:.45rem} .wortmarke .zeichen{width:19px;height:19px} } /* The signpost is centred exactly the way the sheet is — one track of --breite in the middle of whatever is left once the rail and the gutters have taken theirs — so the path and the title under it start at the same pixel. The row itself is the inner node, because a grid would otherwise stack the crumbs. */ .wegweiser{display:grid;grid-template-columns:minmax(0,var(--breite));justify-content:center; padding:0 var(--rand) .6rem;padding-left:calc(var(--schiene) + var(--rand))} .weg-innen{display:flex;align-items:center;gap:.45rem;font-family:var(--sans);font-size:11.5px; letter-spacing:.03em;color:var(--grau);min-height:1.4rem} .wegweiser a,.wegweiser button{color:var(--grau);border:none;background:none;padding:0;font:inherit} .wegweiser button:hover{color:var(--tinte)} .wegweiser .hier{color:var(--tinte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wegweiser .pfeil{opacity:.45} .zurueck{display:inline-flex;align-items:center;gap:.35rem;margin-right:.2rem;color:var(--graphit)} /* The tabs. The active one is a filled pill rather than an underline: on a blurred bar a one-pixel dash disappears, and the pill also gives the tap target a visible shape. */ .reiter{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:space-around; background:color-mix(in srgb,var(--papier) 90%,transparent); -webkit-backdrop-filter:saturate(150%) blur(16px);backdrop-filter:saturate(150%) blur(16px); border-top:1px solid var(--linie-zart);padding:.5rem .4rem calc(env(safe-area-inset-bottom) + .45rem)} .reiter button{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--grau);padding:.4rem .7rem;position:relative;display:flex;flex-direction:column;align-items:center; gap:.3rem;border-radius:var(--rund-gross);transition:color .18s,background .18s} .reiter button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round} .reiter button.aktiv{color:var(--tinte); background:color-mix(in srgb,var(--salbei) var(--wasch),var(--papier-tief))} /* An admin who also writes has six tabs, and a phone is as wide as it was: the same type, less air around it. Only in the bar; the rail has room. */ @media(max-width:47.99rem){ .reiter:has(> :nth-child(6)) button{padding:.4rem .3rem;letter-spacing:.08em} } /* ------------------------------------------------- The same tabs, standing up One set of destinations, three shapes, and the window picks. Under 48rem the bar sits at the bottom edge, where a thumb is. From 48rem there is no thumb to plan for and the bar becomes a rail down the left, which is also the only way the page beside it gets to be wider than a phone. From 72rem the rail is wide enough to write the labels out beside the icons instead of under them. The rail is the same