/* Die elf Bausteine (Ziellinie „bausteine“, Vorlage nachweis-bausteine/vorlage, von Julius abgenommen 29.10.).
   Das Aussehen hier ist verbindlich: Formen, Größen, Abstände, Farben, Schrift. Jede Seite liefert nur Inhalt an die
   Funktionen b…() in app.js; eine Änderung hier ändert alle Seiten mit. Maße in rem (px der Vorlage / 16), damit die
   Schriftgröße des Systems gilt; Linien und Ringe in px. Farben nur über die Zeichen in app.css (:root), hell und dunkel. */

/* gemeinsam: alles, was antippbar ist, sieht aus wie sein Baustein, nicht wie ein Knopf des Systems */
.b-tipp { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit;
          color: inherit; text-align: inherit; text-decoration: none; cursor: pointer; }
.b-koepfe, .b-zeilen, .b-fristen, .b-fragen, .b-paar, .b-anhang, .b-post, .b-mails, .b-hinweise, .b-erkannt,
.b-ring-karte, .b-zahl-karte { line-height: normal; }
.b-karte { background: var(--flaeche); border-radius: .875rem; box-shadow: 0 0 0 1px var(--linie); }
.b-stapel { display: flex; flex-direction: column; gap: .5rem; }
.b-ellipse { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* symbole in den größen der vorlage: 14 und 16 und 20 mit strich 2, 20 fein mit 1.8, gefüllt (play) */
.symbol.s14 { width: .875rem; height: .875rem; stroke-width: 2; }
.symbol.s16 { width: 1rem; height: 1rem; stroke-width: 2; }
.symbol.s20 { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.symbol.s20.fein { stroke-width: 1.8; }
.symbol.voll { fill: currentColor; stroke: none; }

/* kreis (mensch) und quadrat (firma) in den größen der vorlage; die farbe kommt je name aus app.css (.t1–.t6) */
.initiale.b52 { width: 3.25rem; height: 3.25rem; font-size: 1.25rem; }
.initiale.b38 { width: 2.375rem; height: 2.375rem; font-size: .9375rem; }
.initiale.b34 { width: 2.125rem; height: 2.125rem; font-size: .8125rem; }
.initiale.b32 { width: 2rem; height: 2rem; font-size: .75rem; }
.initiale.b24 { width: 1.5rem; height: 1.5rem; font-size: .6875rem; }
.initiale.b52.firma, .initiale.b38.firma { border-radius: .75rem; }
.initiale.b34.firma { border-radius: .6875rem; }
.initiale.b32.firma { border-radius: .625rem; }
.initiale.b24.firma { border-radius: .5rem; }
.initiale.logo { overflow: hidden; }
.initiale.logo > svg { width: 100%; height: 100%; display: block; }

/* knöpfe: 40 hoch, rund; die trefferfläche bleibt 44 */
.b-knopf { -webkit-appearance: none; appearance: none; margin: 0; border: 0; font: inherit; cursor: pointer; text-decoration: none;
           position: relative; flex: none; height: 2.5rem; display: inline-flex; align-items: center; gap: .375rem;
           padding: 0 .875rem; border-radius: 1.25rem; background: var(--akzent); color: var(--akzent-text);
           font-size: .875rem; font-weight: 600; line-height: normal; white-space: nowrap; }
.b-knopf.nein { flex: initial; padding: 0 1.125rem; background: var(--druck); color: var(--text); font-weight: 400; }
.b-knopf.leise { background: var(--druck); color: var(--text); }
.b-knopf.warnrand { background: none; color: var(--warn); box-shadow: inset 0 0 0 1.5px var(--warn); }
.b-knopf::after, .b-haken::after, .b-play::after, .b-mehr::after, .b-ruhig-feld::after { content: ""; position: absolute;
           left: 0; right: 0; top: 50%; height: 100%; min-height: var(--treffer); transform: translateY(-50%); }
.b-knopf:active:not(:disabled) { opacity: var(--gedaempft); }
.b-knopf:disabled, .b-haken:disabled { opacity: var(--blass); }
.b-knopf[aria-busy="true"] { animation: daempfen var(--dauer) linear var(--warte) both; }

/* 1 kopf: kreis oder quadrat, name, rolle in der pille, zusatz, genau eine hauptaktion */
.b-koepfe { display: flex; flex-direction: column; gap: .75rem; }
.b-kopf { display: flex; align-items: center; gap: .75rem; }
.b-kopf-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1875rem; }
.b-kopf-name { font-size: 1.1875rem; font-weight: 600; overflow-wrap: anywhere; }
.b-kopf-unter { display: flex; gap: .375rem; align-items: center; flex-wrap: wrap; }
.b-pille { height: 1.375rem; padding: 0 .5rem; border-radius: .6875rem; background: var(--druck); font-size: .78125rem;
           display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.b-kopf-mitte > .b-pille { align-self: flex-start; }
.b-zusatz { font-size: .78125rem; color: var(--leise); }

/* 2 zeile mit handlung: die überschrift ist die handlung, eine zeile darunter, rechts die handlung, ganz rechts der haken */
.b-zeilen { display: flex; flex-direction: column; }
.b-zeile { display: flex; align-items: center; gap: .625rem; padding: .5625rem .25rem .5625rem .625rem; }
.b-zeile + .b-zeile { border-top: 1px solid var(--linie); }
.b-zeile-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1875rem; }
.b-zeile-titel { font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.b-zeile-unter { display: flex; gap: .375rem; align-items: center; min-width: 0; }
.b-satz { font-size: .8125rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-satz.folge { color: var(--warn); font-weight: 500; }
.b-wer { position: relative; flex: none; display: grid; place-items: center; }
.b-wer::after { content: ""; position: absolute; inset: -.1875rem; }
.b-haken { position: relative; flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--text); }
.b-haken:active:not(:disabled) { color: var(--ok); }

/* 3 fristmarke: gefüllt (heute oder verpasst), umrandet (bald), grau (ab dann); nie farbe allein */
.b-fristen { display: flex; gap: .625rem; align-items: center; flex-wrap: wrap; }
.b-frist { flex: none; height: 1.25rem; padding: 0 .4375rem; box-sizing: border-box; border-radius: .625rem;
           background: var(--druck); color: var(--text); font-size: .75rem; font-weight: 600; display: inline-flex;
           align-items: center; white-space: nowrap; }
.b-frist.voll { background: var(--text); color: var(--grund); }
.b-frist.rand { background: none; box-shadow: inset 0 0 0 1.5px var(--text); }

/* 4 frage: knöpfe mit zeichen und wort; „war ich nicht“ ist nicht zu verwechseln */
.b-fragen { display: flex; flex-direction: column; gap: .5rem; }
.b-frage { padding: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.b-frage-kopf { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.b-frage-text { font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.b-knoepfe { display: flex; gap: .375rem; flex-wrap: wrap; }

/* 5 zwischen euch offen (und 7): zwei gleiche hälften */
.b-paar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.b-offen { padding: .625rem .75rem; display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.b-offen-wer { font-size: .75rem; font-weight: 600; color: var(--leise); }
.b-offen-was { font-size: .90625rem; font-weight: 600; overflow-wrap: anywhere; }
.b-offen-wenn { font-size: .78125rem; color: var(--leise); overflow-wrap: anywhere; }

/* 6 anhang: blätter als kachel, töne als zeile mit play, unter einer überschrift */
.b-anhang { display: flex; flex-direction: column; gap: .5rem; }
.b-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.b-kachel { overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.b-kachel-bild { height: 4.125rem; display: grid; place-items: center; background: var(--druck); }
.b-kachel-name { padding: .375rem .5rem; font-size: .78125rem; line-height: 1.25; overflow-wrap: anywhere; }
.b-blatt { width: 2.75rem; height: 3.375rem; display: block; }
.b-blatt .papier { fill: var(--blatt); stroke: var(--blatt-rand); }
.b-blatt .kopf { fill: var(--blatt-kopf); }
.b-blatt .linien { fill: none; stroke: var(--blatt-linie); stroke-width: .9; }
.b-toene { overflow: hidden; }
.b-toene-kopf { padding: .4375rem .625rem; font-size: .75rem; font-weight: 600; color: var(--leise); }
.b-ton { display: flex; align-items: center; gap: .625rem; padding: .4375rem .625rem .4375rem .5rem;
         border-top: 1px solid var(--linie); }
.b-play { position: relative; flex: none; width: 2rem; height: 2rem; border-radius: 1rem; background: var(--akzent);
          color: var(--akzent-text); display: grid; place-items: center; }
.b-ton-name { flex: 1; min-width: 0; font-size: .875rem; overflow-wrap: anywhere; }
.b-ton-groesse { font-size: .75rem; color: var(--leise); white-space: nowrap; }

/* 7 ring und große zahl: tage plus worte; zahl mit wort; ein tipp führt zur liste */
.b-ring-karte { padding: .75rem; display: flex; flex-direction: column; align-items: center; gap: .375rem; min-width: 0; }
.b-ring { position: relative; width: 4rem; height: 4rem; display: grid; place-items: center; }
.b-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-ring .spur { fill: none; stroke: var(--druck); stroke-width: 6; }
.b-ring .bogen { fill: none; stroke: var(--bald); stroke-width: 6; stroke-linecap: round; }
.b-ring-mitte { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.b-ring-zahl { font-size: 1.1875rem; font-weight: 700; }
.b-ring-wort { font-size: .65625rem; color: var(--leise); }
.b-ring-text, .b-zahl-text { font-size: .8125rem; text-align: center; overflow-wrap: anywhere; }
.b-ring-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.b-zahl-karte { padding: .75rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
                gap: .125rem; min-width: 0; }
.b-zahl { font-size: 2.5rem; font-weight: 700; line-height: 1; }

/* 8 post-karte: bekannte zuerst, „N weitere“ mit kreisen */
.b-post { padding: .625rem .75rem .125rem .75rem; display: flex; flex-direction: column; }
.b-post-kopf { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; }
.b-post-symbol { width: 1.625rem; height: 1.625rem; border-radius: .5rem; background: var(--druck); color: var(--akzent);
                 display: grid; place-items: center; flex: none; }
.b-post-rechts { margin-left: auto; font-size: .78125rem; font-weight: 400; color: var(--leise); }
.b-post-zeile { display: flex; align-items: center; gap: .625rem; min-height: 3.125rem; width: 100%; }
.b-post-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.b-post-name { font-size: .875rem; font-weight: 600; }
.b-post-was { font-size: .78125rem; color: var(--leise); }
.b-post-zeile.weitere { min-height: 2.75rem; border-top: 1px solid var(--linie); }
.b-post-weitere { flex: 1; font-size: .84375rem; }
.b-kreise { display: flex; flex: none; }
.b-kreise > .initiale { box-shadow: 0 0 0 2px var(--flaeche); }
.b-kreise > .initiale + .initiale { margin-left: -.375rem; }
.b-pfeil { color: var(--leise); display: grid; place-items: center; flex: none; }

/* 9 mail-zeile: ungelesen fett, werbung blass; auf der seite eines menschen ohne name und kreis */
.b-mails { overflow: hidden; display: flex; flex-direction: column; margin-top: -1px; }
.b-mail { display: flex; gap: .625rem; padding: .5625rem .75rem; border-top: 1px solid var(--linie); width: 100%; }
.b-mail-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.b-mail-kopf { display: flex; gap: .5rem; min-width: 0; }
.b-mail-name { font-size: .875rem; font-weight: 400; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden;
               text-overflow: ellipsis; }
.b-mail-zeit { margin-left: auto; flex: none; font-size: .75rem; color: var(--leise); }
.b-mail-betreff { font-size: .84375rem; font-weight: 400; color: var(--text); min-width: 0; white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; }
.b-mail-vorschau { font-size: .78125rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-mail.neu .b-mail-name, .b-mail.neu .b-mail-betreff { font-weight: 600; }
.b-mail.werbung .b-mail-name, .b-mail.werbung .b-mail-betreff { font-weight: 400; color: var(--werbung); }
.b-mail.werbung .initiale { background: var(--werbung-kreis); }

/* 10 hinweis (gelb nur bei echten störungen) und ruhig (symbol plus wort) */
.b-hinweise { display: flex; flex-direction: column; gap: .5rem; }
.b-hinweis { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border-radius: .875rem;
             background: var(--stoerung); box-shadow: 0 0 0 1px var(--stoerung-rand); width: 100%; }
.b-hinweis-zeichen { color: var(--bald); display: grid; place-items: center; flex: none; }
.b-hinweis-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.b-hinweis-satz { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.b-hinweis-unter { font-size: .78125rem; color: var(--leise); overflow-wrap: anywhere; }
.b-ruhig { padding: .5rem .375rem; display: grid; grid-template-columns: repeat(5, 1fr); line-height: normal; }
.b-ruhig-feld { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1875rem;
                color: var(--leise); font-size: .75rem; text-align: center; min-width: 0; overflow-wrap: anywhere; }

/* 11 erkannt: ein satz ohne art-wort; „mehr“ nur, wenn etwas dahinter steht */
.b-erkannt { display: flex; flex-direction: column; gap: .375rem; padding: .625rem .75rem; border-radius: .75rem;
             background: var(--druck); }
.b-erkannt-kopf { display: flex; gap: .5rem; align-items: center; }
.b-erkannt-zeichen { color: var(--akzent); display: grid; place-items: center; flex: none; }
.b-erkannt-satz { flex: 1; min-width: 0; font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.b-mehr { position: relative; flex: none; font-size: .8125rem; color: var(--akzent); font-weight: 600; }
.b-erkannt-text { font-size: .8125rem; color: var(--leise); line-height: 1.4; overflow-wrap: anywhere; }
.b-erkannt-text[hidden] { display: none; }

/* antippbar: ein kurzer druck wie überall in der app */
.b-tipp:active { opacity: var(--gedaempft); }