/* Gemeinsames Aussehen aller Seiten unter meldungen.app.
   Bewusst eine einzige Datei ohne Framework und ohne fremde Server -
   die Seite soll auch dann laden, wenn irgendwo anders etwas ausfaellt. */

:root {
  color-scheme: light dark;
  /* Pflaume. Bewusst WEG von Rot und Orange: Auf der Anzeige bedeutet
     Orange "meldet sich" und Gruen "spricht gerade". Der alte Ziegelton lag
     mit 1,83 praktisch auf dem Signalorange - ein Akzent, der mit den
     Bedeutungstraegern um dieselbe Farbfamilie konkurriert. Pflaume hat
     2,91 zum Orange und 3,84 zum Gruen und ist damit unverwechselbar.

     DIE NEUTRALTOENE SIND DIE DER ANZEIGE, seit 22.09.2026.
     Vorher hatte die Website ein pflaumenstichiges Grau (#f8f6f8 hell,
     #131114 dunkel), die Anzeige ein warmes (#faf9f7 / #121211). Auf der
     Website ist das nicht irgendein Unterschied: Vier der Bilder ZEIGEN die
     Anzeige, und im Bilderrahmen sprang der Grund dann sichtbar um. Ein
     Farbton, der innerhalb desselben Absatzes wechselt, sieht nach Fehler
     aus, auch wenn niemand sagen kann, woran es liegt.

     Angeglichen wurde die Website und nicht die Anzeige: Deren Toene sind
     fuer einen Saal ausgelegt, in dem jemand eine Stunde lang draufschaut,
     und ihr Dunkelmodus ist auf die Fehlerfarbe hin durchgerechnet.

     Alle Werte gerechnet, nicht geschaetzt - hell: Text 15,6:1,
     Nebentext 5,3:1, Akzent 8,3:1; dunkel: Text 16,9:1, Nebentext 9,1:1,
     Akzent 7,3:1. Jeder Wert liegt ueber AA, die Textwerte ueber AAA. */
  --bg: #faf9f7;
  --fg: #221f1c;
  --muted: #6d675f;
  --line: #e2ddd5;
  --accent: #7b2d63;
  /* Blende der Bildrahmen - in beiden Modi dunkel, weil ein Geraet am
     Pult einen dunklen Rand hat. */
  --blende: #2a2723;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121211;
    --fg: #f2f3f5;
    --muted: #b8b4ae;
    --line: #2e2b27;
    --accent: #d888bd;
    --blende: #2e2b27;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* AUSBRUCHSPALTE. Der Text bleibt schmal und damit lesbar, die Bilder
   duerfen breiter werden.

   Die mittlere Spalte ist der Satzspiegel, die beiden aeusseren nehmen den
   Rest. Alles landet per Vorgabe in der Mitte; ein Kind mit
   "grid-column: 1 / -1" bricht aus, ohne dass irgendwo negative Raender
   stehen - und ohne Sonderfall fuer Sprachen, die von rechts nach links
   laufen. Auf schmalen Geraeten fallen die aeusseren Spalten von selbst
   auf null zusammen. */
main {
  --satz: 34rem;
  --breit: 46rem;
  width: 100%;
  max-width: var(--breit);
  display: grid;
  grid-template-columns: 1fr min(var(--satz), 100%) 1fr;
}

main > * { grid-column: 2; }

/* Auf den spaeteren Textseiten steht viel mehr Inhalt - die sollen oben
   beginnen statt mittig zu schweben. */
body.text { align-items: flex-start; padding-block: 8vh; }

/* Das Zeichen: drei Finger und der Daumen als Knick.

   Als SVG im HTML und nicht als Bilddatei - so nimmt es ueber currentColor
   die Akzentfarbe an und geht in Hell und Dunkel mit, ohne dass irgendwo
   eine zweite Datei zu pflegen waere.

   ANGEGEBEN WIRD DIE HOEHE, nicht die Breite, und der viewBox ist eng um das
   Zeichen gelegt ("5 2 14 20" statt "0 0 24 24"). Der Grund war ein
   Messfehler, der sich als Geschmacksfrage tarnte: Im quadratischen Rahmen
   fuellte das Zeichen nur 55 % der Breite und 79 % der Hoehe. Ein Kaestchen
   von 52px zeigte also ein Zeichen von 29 x 41px - es sah nicht zu klein
   aus, es WAR zu klein, und die Haelfte der Flaeche war Luft. Mit dem engen
   Rahmen ist die angegebene Hoehe auch die sichtbare. */
.marke {
  /* 48px seit 24.10.2026. Mit 30px stand das Zeichen auf den
     Unterseiten neben einer 50px-Ueberschrift und wirkte verloren
     (Micha: "an manchen Stellen etwas klein"). 48 ist die Untergrenze der
     Startseite - kleiner als dort, aber kein Kruemel mehr. */
  height: 48px;
  width: auto;
  color: var(--accent);
  display: block;
  margin-bottom: 1.4rem;
}

/* Auf der Startseite gross: Dort ist das Zeichen das Erste, was man sieht,
   und muss neben einer 2,6rem-Ueberschrift bestehen. Auf den Unterseiten
   bleibt es etwas kleiner - dort ist es Wiedererkennung und nicht
   Auftritt. */
.marke-gross {
  height: clamp(48px, 10vw, 64px);
  margin-bottom: 1.1rem;
}

h1 {
  font-size: clamp(2.1rem, 7vw, 3.1rem);
  margin: 0 0 .6rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.45rem);
  margin: 2.6rem 0 .6rem;
  letter-spacing: -.01em;
}

h3 {
  font-size: 1.125rem;
  margin: 2rem 0 .5rem;
}

/* EINE FARBE FUER DEN FLIESSTEXT, seit 24.10.2026: --fg.
   Vorher waren Absaetze grau (--muted), nummerierte Schritte aber hell,
   weil fuer <ol> niemand eine Farbe gesetzt hatte - und Fettgedrucktes
   war je nach Umgebung mal grau, mal hell. Grau ist jetzt allein das
   Kleine am Rand: Bildunterschriften, Fusszeile, Randnotizen, Hinweise.

   EINE GROESSE FUER DAS KLEINE: .875rem. Vorher standen 13, 14 und 15px
   nebeneinander, ohne dass ein Unterschied etwas bedeutet haette. */
p { margin: 0 0 1rem; }
p.lead { font-size: 1.1rem; }
small { font-size: .875rem; color: var(--muted); }

/* Was der Name heisst, in jeder Anleitung ausser der deutschen. Eine
   Randbemerkung und keine Erklaerung: klein, leise, gleich unter dem
   Vorspann, damit sie mitgelesen und nicht gesucht wird. */
p.namensnotiz { font-size: .875rem; margin-top: -.4rem; color: var(--muted); }

footer {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--muted);
}

a { color: inherit; }

footer nav {
  margin-top: .6rem;
  display: block;
}

/* Der eine Knopf, der zählt.

   Die Schriftfarbe ist bewusst --bg und nicht Weiß. Das stammt noch aus der
   Zeit des Ziegelrots, wo Weiß im Dunkelmodus auf 3,16:1 fiel - mit der
   Pflaume wäre Weiß im Hellen zwar in Ordnung, im Dunkeln aber wieder
   nicht. --bg löst beide Fälle mit einer Regel: 8,14:1 im Hellen,
   7,31:1 im Dunkeln. Nachgerechnet, nicht geschätzt. */
.knopf {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: 6px;
  margin: .4rem 0 .5rem;
}
.knopf:hover { opacity: .9; }
.knopf:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }

/* Der zweite Weg.

   Die Startseite hat genau zwei Ausgaenge: ausprobieren oder nachlesen.
   Zwei gleich laute Knoepfe waeren keine Wahl, sondern eine Gabelung ohne
   Wegweiser - deshalb ist dieser hier nur umrandet. Er ist gleich gross
   und gleich gut zu treffen, aber er draengt nicht. */
.knopf.leise {
  background: transparent;
  color: var(--fg);
  /* --muted und nicht --line: --line ist die Farbe fuer Trennstriche und
     waere als Umrandung eines Knopfes kaum zu sehen. Ein Knopf, den man
     suchen muss, ist kein zweiter Weg. */
  box-shadow: inset 0 0 0 2px var(--muted);
}

/* Der Anspruch ganz oben: zwei Saetze, die sagen, worum es geht. Groesser
   als der Fliesstext, kleiner als die Marke - er soll gelesen werden, bevor
   jemand weiterscrollt. */
.anspruch {
  color: var(--fg);
  font-size: clamp(1.35rem, 3.9vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: .2rem 0 1.4rem;
  text-wrap: balance;
}

/* Die Schlusszeile des Einstiegs. Steht allein, weil sie allein steht. */
.schluss {
  color: var(--fg);
  font-weight: 600;
  border-left: 3px solid var(--accent);
  padding-left: .9rem;
  margin: 1.4rem 0;
}

/* Der Hinweis auf die andere Sprachfassung. Klein und oben, damit ihn
   findet, wer ihn sucht, und übersieht, wer die Seite schon in seiner
   Sprache liest. */
.sprachwahl { font-size: .875rem; margin: -.4rem 0 1.2rem; color: var(--muted); }

/* Der Knopf gleich unter der Überschrift, mit Luft darum. */
/* DIE SPRACHWAHL. Ein Aufklapper aus <details>, und zwar OHNE SKRIPT.

   Drei Anlaeufe, und der dritte ist der richtige:

   1. Ein <select> - sah aus wie ein Formularfeld, obwohl es nur
      weiterfuehrt, und brauchte ein Skript, das die Inhaltsrichtlinie
      dieser Seiten gar nicht ausfuehrt.
   2. Drei nebeneinanderliegende Verweise - richtig bei drei Sprachen,
      aber bei zehn eine Zeile, die zweimal umbricht und die Seite
      erschlaegt, bevor der erste Satz kommt.
   3. <details>/<summary>: ein Knopf, der eine Liste aufklappt. Der
      Browser kann das von sich aus - mit Tastatur, mit Vorlesehilfe und
      auch dann, wenn kein einziges Skript laedt.

   Die Liste ist ein Raster und keine Spalte: Zehn Sprachen untereinander
   waeren eine Rolltreppe, in zwei bis drei Spalten sind sie ein Blick. */
.sprachen {
  position: relative;
  margin-bottom: .8rem;
  text-align: right;
}
.sprachen > summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: 0 .9rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: .875rem;
  cursor: pointer;
  list-style: none;          /* Firefox */
  user-select: none;
}
/* Das Dreieck, das Safari und Chrome von sich aus davorsetzen. Es
   erscheint sonst VOR dem Sprachzeichen, und dann stehen dort zwei
   Symbole, von denen eines nichts bedeutet. */
.sprachen > summary::-webkit-details-marker { display: none; }
.sprachen > summary:hover { background: var(--line); }
/* Offen: Die Flaeche bleibt stehen, auch wenn der Finger weg ist. Sonst
   sieht man dem Knopf nicht an, dass das Menue darunter gerade auf ist -
   und auf einem Tablet gibt es kein "hover", das es verraten wuerde. */
.sprachen[open] > summary { background: var(--line); }
.sprachen > summary:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
.sprachen > summary svg { flex: none; }
/* Der kleine Pfeil am Ende, der sagt, dass sich hier etwas oeffnet. */
.sprachen > summary::after {
  content: "";
  width: .5em; height: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
}
.sprachen[open] > summary::after { transform: translateY(.1em) rotate(225deg); }

.sprachen-liste {
  position: absolute;
  z-index: 5;
  inset-inline-end: 0;
  margin-top: .3rem;
  padding: .4rem;
  display: grid;
  /* min(9rem, 100%) statt 9rem: Ohne das min() fordert jede Spalte 9rem,
     auch wenn die ganze Liste schmaler ist - und ein Raster, dessen
     Spalten nicht hineinpassen, waechst nach aussen. */
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: .15rem;
  /* BREITE AM ELTERNTEIL GEMESSEN, NICHT AM BILDSCHIRM.

     Hier stand "min-width: min(22rem, 90vw)". Das ist auf einem Telefon
     breiter als der Textbereich: 390px Bildschirm minus zweimal 24px
     Rand ergibt 342px Inhalt, 90vw sind 351px. Da das Feld rechts
     verankert ist, ragte es nach links hinaus - auf einem 375er Geraet
     ueber den Bildschirmrand.

     100% ist hier die Breite von <main>, also genau der Platz, der
     wirklich da ist. Damit kann das Feld nicht mehr herausragen,
     gleichgueltig wie schmal das Geraet ist. */
  width: min(22rem, 100%);
  max-width: 100%;
  box-sizing: border-box;
  text-align: start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .12);
}
.sprachen-liste a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .7rem;
  border-radius: 8px;
  color: var(--fg);
  text-decoration: none;
  font-size: .875rem;
}
.sprachen-liste a:hover { background: var(--line); }
.sprachen-liste a:focus-visible { outline: 3px solid var(--fg); outline-offset: -3px; }
/* Die Sprache, in der die Seite gerade dasteht. Sie bleibt anwaehlbar -
   ein Verweis auf sich selbst schadet nicht und erspart die Ueberlegung,
   ob man gerade richtig ist. */
.sprachen-liste a[aria-current="page"] { background: var(--line); font-weight: 600; }

/* Der Hinweis auf eine Anleitung in der Sprache des Geraets. Er wird nur
   eingeblendet, wenn es etwas zu sagen gibt - deshalb ruhig und schmal
   und nicht als Kasten: Ein Angebot, kein Alarm. */
.sprachhinweis {
  margin: 0 0 1.2rem;
  font-size: .875rem;
  color: var(--muted);
}
.sprachhinweis[hidden] { display: none; }

.tat { margin: 1.4rem 0 .8rem; }

/* Die Zeile unter den Knoepfen der Startseite, die auf den Eintrag im
   Zoom App Marketplace verweist. Klein und leise: ein Beleg, kein dritter
   Ausgang. */
p.beleg { font-size: .875rem; color: var(--muted); margin: -.2rem 0 1.6rem; }

/* Bilder der Anwendung. Es sind echte Aufnahmen, keine Zeichnungen - der
   Rahmen sagt das mit, sonst liest man sie als Teil der Seite.
   width/height stehen im HTML, damit beim Laden nichts springt. */
/* Bilder brechen aus dem Satzspiegel aus - siehe die Ausbruchspalte bei
   main. Das gilt nur fuer Bilder, die direkt in main stehen; eines
   innerhalb einer Aufzaehlung bleibt, wo es ist. */
.bild {
  grid-column: 1 / -1;
  width: min(var(--breit, 46rem), 100%);
  margin: 1.8rem auto 2.2rem;
}

/* Als BILDSCHIRM gerahmt, nicht als Bild eingeklebt: Die Blende ringsum
   ist das Polster des Bildes selbst, der Schatten hebt es von der Seite
   ab. Damit liest sich die Aufnahme als Geraet am Pult - genau das, was
   die Seite verspricht. Kostet keine Bilddatei und kein Markup. */
.bild img {
  display: block;
  width: 100%;
  height: auto;
  padding: .5rem;
  background: var(--blende);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55);
}

.bild figcaption {
  margin-top: .7rem;
  font-size: .875rem;
  color: var(--muted);
  text-align: center;
}

/* Der Durchlauf. Nummerierung außerhalb der Spalte, damit die Bilder
   darunter die volle Breite behalten - eingerückte Screenshots auf einem
   Handy sind schon klein genug. */
ol.ablauf { list-style: none; counter-reset: schritt; margin: 0; padding: 0; }
ol.ablauf > li {
  counter-increment: schritt;
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
  margin-bottom: 2rem;
}
ol.ablauf > li h3 {
  font-size: 1.02rem;
  margin: 0 0 .4rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
ol.ablauf > li h3::before {
  content: counter(schritt);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
ol.ablauf > li p { margin-bottom: 0; }

/* Aufzählungen, die etwas aufzählen - kürzer als Fließtext und leichter
   zu überfliegen. Genau dafür sind sie da. */
ul.punkte { margin: 0 0 1rem; padding-left: 1.3rem; }
ul.punkte li { margin-bottom: .4rem; }

/* "Was du brauchst" auf der Startseite: drei Dinge, gleich gebaut -
   Ziffer, Stichwort, eine Zeile. Sie sollen sagen, wie wenig es ist.

   KEIN KASTEN. Ein erster Versuch hatte jede Zeile in einen Rahmen mit
   runden Ecken gesetzt - und genau diese Form hat .knopf.leise im selben
   Stylesheet. Rueckmeldung: "etwas unscheinbar, und man hat den Eindruck,
   man koennte sie anklicken." Es gliedert eine Linie OBEN - die Form, die
   auf dieser Seite Text ordnet und nirgends etwas Anklickbares meint.

   DREI SPALTEN ODER EINE, NIE ZWEI. Bis zum 24.10.2026 stand hier
   auto-fit; das ergab auf dem Desktop zwei Spalten, also zwei Punkte oben
   und einen allein darunter. Jetzt untereinander bis 40rem, darueber
   genau drei nebeneinander. In der Textspalte und nicht so breit wie die
   Bilder: Sonst steht die Ueberschrift darueber eingerueckt. Deshalb
   muessen die Stichwoerter kurz bleiben. */
ol.drei {
  margin: 1.4rem 0 2rem;
  padding: 0;
  list-style: none;
  counter-reset: ding;
  display: grid;
  gap: 1.2rem;
}

@media (min-width: 40rem) {
  ol.drei { grid-template-columns: repeat(3, 1fr); }
}

ol.drei > li {
  counter-increment: ding;
  padding-top: .8rem;
  border-top: 2px solid var(--line);
  line-height: 1.5;
}

/* Die Ziffer in der Akzentfarbe, wie die Schrittnummern der Anleitung. */
ol.drei > li::before {
  content: counter(ding);
  display: block;
  color: var(--accent);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: .35rem;
  font-variant-numeric: tabular-nums;
}

ol.drei strong { display: block; font-size: 1.1rem; }

/* Häufige Fragen. details/summary statt eigenem Aufklapp-Code: Das kann der
   Browser selbst, es funktioniert ohne JavaScript, und die Suchfunktion des
   Browsers findet auch Text in zugeklappten Abschnitten. */
.fragen { margin-top: 1rem; border-top: 1px solid var(--line); }
.fragen details { border-bottom: 1px solid var(--line); }
/* Die letzte Frage bekommt keine eigene Linie: Die Fusszeile zieht direkt
   darunter schon eine, und zwei Striche mit einer Luecke dazwischen sehen
   aus wie ein Fehler. */
.fragen details:last-child { border-bottom: none; }
.fragen summary {
  cursor: pointer;
  padding: .85rem 0;
  font-weight: 600;
  /* Der Marker bleibt: Er zeigt auf-/zugeklappt an, ohne dass es jemand
     erklären muss. */
}
.fragen summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fragen details > *:not(summary) { margin-left: 1.2rem; }
.fragen details > p:last-child { margin-bottom: 1rem; }
.fragen ol, .fragen ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.fragen li { margin-bottom: .3rem; }

/* Platzhalter, die vor der Veröffentlichung ersetzt werden müssen.
   Bewusst auffällig: So etwas soll man nicht übersehen können.
   Schriftfarbe wie beim Knopf und aus demselben Grund. */
.ph {
  background: var(--accent);
  color: var(--bg);
  padding: .05em .3em;
  border-radius: 3px;
  font-weight: 600;
}

p.ph {
  display: block;
  padding: .8rem 1rem;
  border-radius: 6px;
  font-weight: 400;
}

/* Der Hinweis oben auf den uebersetzten Rechtstexten.

   Er steht bewusst VOR dem ersten Absatz und nicht klein am Fuss: Wer
   sich auf einen Rechtstext beruft, soll vorher wissen, dass er eine
   Uebersetzung liest und welche Fassung im Zweifel gilt. */
.hinweis-uebersetzung {
  margin: 0 0 1.6rem;
  padding: .7rem .9rem;
  border-inline-start: 3px solid var(--line);
  color: var(--muted);
  font-size: .875rem;
}

/* Die Hilfeliste in der Anleitung: was auf dem Bildschirm steht, und
   darunter, was zu tun ist.
   WARUM KEINE TABELLE: Zwei Spalten werden auf einem Telefon eng, und
   genau dort steht man, wenn etwas klemmt. Untereinander bleibt es auf
   jeder Breite lesbar.
   WARUM KEIN KASTEN: Ein Rahmen mit runden Ecken sieht auf diesen Seiten
   nach Knopf aus - dieselbe Ruecksprache gab es schon zur Startseite. Die
   Trennung machen eine Linie und der Fettdruck. */
dl.hilfe { margin: 0 0 1.5rem; }
dl.hilfe dt {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-weight: 600;
}
dl.hilfe dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
dl.hilfe dd {
  margin: .35rem 0 0;
}
dl.hilfe dd ol { margin: .4rem 0 .4rem; padding-left: 1.3rem; }
dl.hilfe dd ol li { margin-bottom: .2rem; }

/* Verweise im Fliesstext sind als Verweise zu erkennen.
   WARUM DAS NICHT SCHON SO WAR: "a { color: inherit }" oben gilt fuer
   alles - gedacht war es fuer die Fusszeile, die Sprachwahl und die
   Knoepfe, die ebenfalls Verweise sind. Im Fliesstext war die Folge, dass
   "marketplace.zoom.us" in der Anleitung zwar ein Verweis war, aber nicht
   danach aussah. Wer ihn nicht als solchen erkennt, tippt die Adresse ab.
   Ausgenommen bleibt .knopf: Der traegt seine Farbe selbst und stuende
   sonst unterstrichen in einer Flaeche. */
main p a:not(.knopf),
main li a:not(.knopf),
main dd a:not(.knopf) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* ===================================================================
   Das Formular auf /connect und /verbinden.

   Die einzige Stelle der Website, an der jemand etwas eingibt. Deshalb
   steht hier auch das Einzige an Formular-Gestaltung, das es gibt -
   alles andere auf diesen Seiten ist Text.

   Die Trefferflaeche ist bewusst grosszuegig: Diese Seite bedient
   jemand einmal, oft auf einem Telefon, oft nebenbei, und ein
   danebengetippter Knopf heisst hier nicht "nochmal", sondern
   "Formular neu ausfuellen".
   =================================================================== */
.verbinden {
  margin: 1.4rem 0 2rem;
}

.verbinden label {
  display: block;
  font-weight: 600;
  margin-bottom: .35rem;
}

/* Die Breite richtet sich nach dem Inhalt, nicht nach der Spalte: Eine
   Meetingnummer ist zwoelf Ziffern lang, ein Feld ueber die ganze
   Textbreite sieht aus, als gehoere ein Satz hinein. */
.verbinden input {
  display: block;
  width: 100%;
  max-width: 16rem;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 .8rem;
  font: inherit;
  font-size: 1.1rem;
  /* Ziffern in gleicher Breite - beim Tippen springt die Nummer sonst. */
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--fg);
  background: var(--bg);
  border: 2px solid var(--muted);
  border-radius: 6px;
}

.verbinden input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.verbinden input::placeholder {
  color: var(--muted);
  letter-spacing: .1em;
}

/* Der Hinweis unter dem Feld gehoert zum Feld und nicht zum Knopf -
   deshalb enger darueber als darunter. */
.verbinden .zweit {
  color: var(--muted);
  font-size: .875rem;
  margin: .5rem 0 1.1rem;
  max-width: 34rem;
}

/* .knopf ist fuer <a> gemacht; als <button> braucht es die Angaben, die
   ein Browser sonst von sich aus setzt. */
.verbinden button.knopf {
  border: 0;
  font: inherit;
  font-weight: 600;
  min-height: 48px;
  cursor: pointer;
}