/* ───────────────────────────────────────────────────────────── Geteilte Bausteine der Canvas-Tools: Sitzungs-Oberflaeche, Feldkacheln und die Druckansicht im Querformat. Ergaenzt brand.css und wird NACH ihr geladen. Das Raster des jeweiligen Canvas steht im Tool selbst — das ist bei beiden verschieden und liesse sich nur kuenstlich vereinheitlichen. Bei Aenderungen hier das ?v= in beiden Tools hochzaehlen, siehe README. ───────────────────────────────────────────────────────────── */ /* ── SITZUNGSLEISTE ─────────────────────────────────────────── */ .sitzung { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; background: var(--white); border: 1px solid var(--cream-dark); border-radius: 14px; } .sitzung__titel { font-family: var(--fm); font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--graphite-soft); } .sitzung__leute { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Anwesende als Initialenkreis. title tut es hier nicht allein — auf dem Handy gibt es kein Hovern, darum steht der Vorname daneben. */ .wer { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; background: var(--ocean-50); border-radius: 999px; font-size: 14px; color: var(--ocean-dark); } .wer__kreis { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ocean); color: var(--cream-soft); font-family: var(--fm); font-size: 11px; font-weight: 600; } .wer--weg { opacity: .45; } .wer--weg .wer__kreis { background: var(--pearl); color: var(--graphite); } .sitzung__rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Der Einladungslink. readonly statt disabled: disabled schliesst das Feld von der Tastaturbedienung aus, dann kommt man ohne Maus nicht an den Text. */ .einladung { display: flex; align-items: center; gap: 8px; } .einladung input { width: min(340px, 52vw); padding: 9px 12px; font-family: var(--fm); font-size: 12px; color: var(--graphite); background: var(--cream); border: 1px solid var(--cream-dark); border-radius: 9px; } .hinweisstreifen { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--sunset-mist); color: var(--graphite); font-size: 15px; } .hinweisstreifen--zu { background: var(--forest-soft); } /* ── FELDKACHEL ─────────────────────────────────────────────── */ .feld { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--white); border: 1px solid var(--cream-dark); border-radius: 16px; min-height: 0; /* damit die Kachel im Raster schrumpfen darf */ } .feld__kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .feld__titel { font-family: var(--fh); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ocean-dark); } .feld__frage { font-size: 13px; line-height: 1.45; color: var(--graphite-soft); text-wrap: pretty; } /* Wer gerade in diesem Feld steht. Sitzt im Kopf der Kachel, nicht im Textfeld — sonst springt der Text beim Erscheinen. */ .feld__wer { margin-left: auto; font-family: var(--fm); font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--teal-deep); opacity: 0; transition: opacity .15s ease; } .feld--fremd .feld__wer { opacity: 1; } /* 190px statt der urspruenglichen 90: in ein Canvas-Feld gehoeren mehrere Gedanken, nicht eine Zeile. Die Kachel darf dabei ueber den Bildschirm hinauswachsen — lieber scrollen als in einem Guckloch tippen. flex:1 laesst das Feld darueber hinaus die Kachel fuellen, wenn deren Zeile hoeher ausfaellt; resize:vertical bleibt, damit man selbst nachziehen kann. */ .feld textarea { flex: 1; width: 100%; min-height: 190px; resize: vertical; padding: 12px 14px; font-family: var(--fb); font-size: 15px; line-height: 1.55; color: var(--graphite); background: var(--cream); border: 1px solid var(--cream-dark); border-radius: 10px; } .feld textarea:focus-visible { background: var(--white); } /* Kachel, in der gerade jemand anderes schreibt */ .feld--fremd { border-color: var(--teal-deep); } .feld textarea[readonly] { background: var(--cream); color: var(--graphite-soft); cursor: default; } /* ── ANMELDEN / BEITRETEN ───────────────────────────────────── */ /* Traegt das Kartenaussehen selbst: .card ist in jedem Tool anders gepolstert und taugt darum nicht als gemeinsame Grundlage. */ .tor { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; background: var(--white); border: 1px solid var(--cream-dark); border-radius: 16px; padding: 28px 30px; } .tor__warum { padding: 14px 16px; border-radius: 12px; background: var(--ocean-50); color: var(--ocean-dark); font-size: 15px; line-height: 1.55; text-wrap: pretty; } .tor__feld { display: flex; flex-direction: column; gap: 6px; } .tor__feld label { font-family: var(--fm); font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--graphite-soft); } .tor__feld input { padding: 13px 15px; font-family: var(--fb); font-size: 16px; color: var(--graphite); background: var(--white); border: 1px solid var(--cream-dark); border-radius: 11px; } .tor__fehler { padding: 12px 15px; border-radius: 11px; background: var(--rose-mist); color: var(--rose-deep); font-size: 15px; } /* ── DRUCK: QUERFORMAT ────────────────────────────────────────── "Als PDF herunterladen" ruft window.print() auf — kein Fremdpaket, der Browser erzeugt das PDF. Quer, weil beide Canvas breiter als hoch sind; hochkant wuerde das Raster zusammenquetschen. */ @media print { @page { size: A4 landscape; margin: 10mm; } body { background: #fff; font-size: 9pt; } .sitzung__rechts, .einladung, .btn, .actions, .hinweisstreifen, .tor { display: none !important; } .shell { padding: 0; gap: 10pt; max-width: none; } /* Textfelder als Flaeche drucken: ein