/* ==========================================================================
   (c) 2026 Volker Haigis, Hamburg. Alle Rechte vorbehalten.
   Teil des Entwurfs "Pauli Vibe" fuer Vibe Coding Hamburg e. V. Offen
   einsehbar, nicht frei verwendbar: Vervielfaeltigung, Bearbeitung und
   Weiterverwendung nur mit schriftlicher Zustimmung. happyharry.art/impressum
   ========================================================================== */
/* =============================================================================
   Die zwei Teller oben rechts: Designwechsel und Sprache.

   Vorher stand dort "← Design-Auswahl" als Wortknopf. Der Fuchs ist Carolins
   Marke von ihrer eigenen Seite, sie erkennt ihn sofort, und er sagt in einem
   Bild, wohin es geht. Daneben die Sprache als Flagge, gleiche Groesse, gleiche
   Scheibe. Zwei runde Teller nebeneinander lesen sich als Paar, ein Bild und
   ein Wortknopf nebeneinander nicht.

   Der Fuchs ist eine Haarlinien-Zeichnung in Dunkelrot. Auf dem Beton der Wand
   verschwindet er, auf der Tinte erst recht. Er braucht deshalb eine helle
   Scheibe unter sich, sonst ist er bei 38 Pixeln nur noch ein Kratzer.

   Ein Bild allein sagt nicht, was es tut. Beide Teller tragen deshalb einen
   Vorlesetext und einen Tooltip.
   ========================================================================== */

.schalter{ display:flex; align-items:center; gap:9px; }

.teller{
  width:38px; height:38px; flex:none;
  border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  border:2px solid rgba(23,19,15,.85);
  box-shadow:0 2px 0 rgba(0,0,0,.35), 0 8px 18px -8px rgba(0,0,0,.6);
  transition:transform .16s ease, box-shadow .16s ease;
  text-decoration:none;
}
.teller:hover,
.teller:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 4px 0 rgba(0,0,0,.35), 0 12px 22px -8px rgba(0,0,0,.65);
}

/* Die helle Scheibe fuer Carolins Bildmarke. Kreide, nicht Weiss: die Seite
   hat kein reines Weiss, ein weisser Kreis waere der hellste Punkt im ganzen
   Bild. Heller Grund, damit das neutrale Grau ihres Rasters auf der Betonwand
   Halt hat.

   Hier stand bis heute, dieser Teller sei mit Absicht groesser: die Flagge
   fuelle ihre Scheibe randlos, der Fuchs sei eine duenne Zeichnung mit Luft
   ringsum und wirke bei gleichem Durchmesser kleiner. Das galt fuer den Fuchs.
   Seit dem 29.08. sitzt hier Carolins Bildmarke, ein gefuelltes Raster, das
   seine Scheibe fast genauso ausfuellt wie die Flagge die ihre. Der Ausgleich
   ist damit hinfaellig, und was blieb, war ein Teller, der schlicht groesser
   war als sein Nachbar. Beide stehen jetzt auf 38. */
.teller--caro{ width:38px; height:38px; background:#F7F2E9; }
.teller--caro img{ width:30px; height:30px; display:block; }

/* Die Flaggen fuellen ihre Scheibe randlos, sie bringen ihren Kreis selbst mit */
.teller--flagge img{ width:100%; height:100%; display:block; }

/* Im Kopf der Startseite sitzen die Teller rechts, auf einer Linie mit der
   Wortmarke. Dieselbe Stelle, an der vorher der Wortknopf stand. */
header .schalter{ order:1; margin-left:auto; }

/* Auf den Folgeseiten steht oben die Kopfzeile mit Marke und den drei Fragen.
   Die Teller haengen sich rechts daran, umbrechen duerfen sie nicht. */
.kopfzeile .schalter{ margin-left:0; }

@media (max-width:760px){
  .teller{ width:34px; height:34px; }
  .teller--caro{ width:34px; height:34px; }
  .teller--caro img{ width:27px; height:27px; }

  /* Auf dem Telefon brechen die drei Fragen in eine eigene Zeile um. Der
     Sprachteller steht im Quelltext hinter ihnen und rutschte deshalb mit
     nach unten, in eine dritte Zeile ganz links. Dort sucht ihn niemand.
     Auf breiten Schirmen passt alles in eine Zeile, da stimmt er.
     Reihenfolge deshalb nur hier gesetzt: Wortmarke, Teller, dann die
     Fragen. Der Teller steht damit oben rechts neben der Marke, und die
     Fragen brechen wie bisher in ihre eigene Zeile. */
  .kopfzeile .marke-heim{ order:1; }
  .kopfzeile .schalter{ order:2; margin-left:auto; }
  .kopfzeile .fragen{ order:3; }
}