/* ═══════════════════════════════════════════════════
   WEATHERHUNTERS — Registrierung (Seiten-spezifische Ergänzungen)
   Basis-Styles kommen aus style.css + auth.css
   ═══════════════════════════════════════════════════ */


/* ═══ TELEFONNUMMER: Vorwahl + Rest ═══
   Zwei Felder, eine Zeile. Bewusst kein .row-Raster (1fr 1fr): Die
   Vorwahl ist kurz und soll auch kurz aussehen, die Nummer bekommt
   den Platz, den sie braucht. */
.phone-row{
  display:flex;
  gap:.6rem;
  align-items:stretch;
}

/* Die Auswahl wächst nicht mit. In ihr steht nur Flagge und Vorwahl
   ("🇩🇪 +49", auf Windows "DE +49"), das längste ist "+420" — 7rem
   fassen das mitsamt Pfeilchen; der Rest der Zeile gehört der
   Nummer. */
.phone-row .phone-cc{
  flex:0 0 7rem;
  width:7rem;
  /* Eigenes Pfeilchen: Ein <select> erbt sonst die Systemfarben und
     stände als weißer Kasten in einem dunklen Formular. */
  appearance:none;
  -webkit-appearance:none;
  padding-right:2rem;
  /* Die Farbe steht hier ausgeschrieben (--txt-m), weil eine
     CSS-Variable in einer Data-URI nicht ersetzt wird. */
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238A8880' d='M1 1l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:10px 7px;
  cursor:pointer;
}

/* Die aufgeklappte Liste zeichnet das Betriebssystem, nicht diese
   Seite — dort muss die Schrift auf dunklem Grund lesbar bleiben. */
.phone-row .phone-cc option{
  background:var(--bg-mid);
  color:var(--txt);
}

.phone-row .phone-rest{
  flex:1 1 auto;
  min-width:0;
}

/* Auf dem Telefon untereinander: Nebeneinander bliebe für die Nummer
   kaum Platz, und getippt wird ohnehin nur unten. */
@media(max-width:600px){
  .phone-row{flex-direction:column}
  .phone-row .phone-cc{flex:0 0 auto;width:100%}
}