/*
 * Gemeinsames Stylesheet der Barber-Website.
 *
 * Enthaelt zwei Dinge, die auf JEDER Seite gleich sein sollen:
 *   1. die selbst gehosteten Schriften
 *   2. die Anpassungen fuers Telefon (Bedienung und fluessiges Scrollen)
 *
 * Bewusst EINE Datei statt zweier: eine Anfrage weniger, und der Browser hat
 * sie nach der ersten Seite im Cache.
 */

/* =========================================================================
   1. Schriften – selbst gehostet
   =========================================================================
   Vorher kamen Space Grotesk und Manrope vom Google-Schriftdienst. Das kostete
   pro Seitenaufruf zwei fremde Verbindungen und ein blockierendes Stylesheet,
   bevor ueberhaupt eine Schriftdatei angefragt wurde. Jetzt liegen die Dateien
   auf dem eigenen Server – und die IP-Adresse der Besucher geht nicht mehr an
   Google, was in Oesterreich und Deutschland ohnehin der sichere Weg ist.

   Beide Familien sind variable Schriften: EINE Datei je Zeichenbereich deckt
   alle Schnitte ab, deshalb steht bei font-weight eine Spanne. Geladen sind nur
   latin und latin-ext; kyrillisch, griechisch und vietnamesisch braucht die
   Seite nicht und spart damit rund 60 KB.

   font-display: swap – der Text ist sofort in der Systemschrift lesbar und
   wird nachtraeglich ersetzt, statt kurz unsichtbar zu bleiben.

   Auf search.html und index.html sind diese Regeln wirkungslos: Die beiden
   Seiten benutzen die Systemschrift, und eine Schrift wird nur geladen, wenn
   sie auch verwendet wird. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/spacegrotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/spacegrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   2. Bedienung auf dem Telefon
   ========================================================================= */

/* Android und iOS legen beim Antippen einen blauen Kasten ueber das Element.
   Der passt zu keiner Stelle dieser Seite – stattdessen unten eine eigene,
   kurze Rueckmeldung. */
html {
  -webkit-tap-highlight-color: transparent;
  /* Ein Tippen soll sofort wirken und nicht 300 ms auf einen Doppeltipp warten.
     Das erledigt zwar schon width=device-width, hier steht es als Absicherung. */
  touch-action: manipulation;
}

/* Nur auf Geraeten OHNE Mauszeiger: sichtbare Reaktion beim Fingerdruck.
   Am Rechner uebernehmen das die vorhandenen :hover-Regeln. */
@media (hover: none) {
  a:active,
  button:active,
  [role="button"]:active,
  .card:active,
  .chip:active,
  .filter-chip:active {
    opacity: .7;
    transition: opacity .05s ease-out;
  }
}

/* Bedienelemente sollen sich beim Halten nicht wie Text markieren lassen. */
button,
.lang-btn,
.chip,
.filter-chip,
.mvm-theme-toggle {
  -webkit-user-select: none;
  user-select: none;
}

/* Der Sprachschalter war nur 25 px hoch. Apple empfiehlt 44 px, Android 48 dp;
   34 px innerhalb der 40 px hohen Pille sind der vertretbare Kompromiss, ohne
   dass die Kopfzeile auf schmalen Telefonen umbricht. */
.lang-btn {
  min-height: 34px;
}

/* Der Schliessen-Knopf des Filterblatts war 34 x 34 px. */
.filter-sheet-close {
  min-width: 44px;
  min-height: 44px;
}

/*
 * Lange deutsche Zusammensetzungen wie "Nutzungsbedingungen" oder
 * "Datenschutzerklaerung" sind als Ueberschrift breiter als ein schmales
 * Telefon. Sie schoben die Seite bisher waagrecht auf – gemessen 23 px auf
 * den Nutzungsbedingungen und 11 px auf der Datenschutzseite.
 *
 * NACHTRAG 05.09.2026: `hyphens: auto` war zu grob. Es trennte auch ganz
 * normale Woerter, die bequem gepasst haetten – auf der Reset-Seite stand
 * "Reset-Link fuer dein beste-hendes Konto." Das sieht nach Fehler aus.
 *
 * `overflow-wrap: break-word` allein reicht: Es greift NUR, wenn ein Wort
 * sonst ueber den Rand ragen wuerde, und laesst alles andere in Ruhe.
 * `hyphens: manual` schaltet die automatische Trennung ausdruecklich ab,
 * damit sie nicht ueber eine andere Regel wieder hereinkommt.
 */
@media (max-width: 640px) {
  h1, h2, h3 {
    -webkit-hyphens: manual;
    hyphens: manual;
    overflow-wrap: break-word;
  }
}

/* Beim Ziehen in einem Blatt oder Dialog soll nicht die Seite dahinter
   mitscrollen. */
.filter-sheet,
.filter-sheet-body,
.mvm-cc-modal,
dialog {
  overscroll-behavior: contain;
}

/* =========================================================================
   3. Fluessiges Scrollen auf dem Telefon
   ========================================================================= */

/*
 * backdrop-filter ist auf Telefonen der teuerste Effekt auf dieser Seite:
 * Jede Flaeche damit bekommt eine eigene Ebene, deren Hintergrund beim
 * Scrollen Bild fuer Bild neu unscharf gerechnet wird. Auf der Suchseite haengt
 * er an JEDER Barberkarte – gemessen 39 Elemente auf einem einzigen
 * Handybildschirm.
 *
 * Sichtbar ist davon fast nichts: Die Flaechen liegen ueber einem nahezu
 * einfarbigen Verlauf, nicht ueber einem Foto. Das Ruckeln beim Scrollen
 * dagegen ist deutlich. Unter 900 px Breite wird der Effekt deshalb
 * abgeschaltet; die halbdurchsichtigen Hintergruende bleiben.
 *
 * Am Rechner bleibt alles wie es war.
 */
@media (max-width: 900px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /*
   * Karten ausserhalb des Bildschirms werden gar nicht erst gerechnet.
   * contain-intrinsic-size gibt die erwartete Hoehe vor, damit die Bildlaufleiste
   * nicht springt; "auto" laesst den Browser den echten Wert merken, sobald
   * eine Karte einmal sichtbar war.
   */
  #barberGrid > .card,
  #salonGrid > .card {
    content-visibility: auto;
    contain-intrinsic-size: auto 215px;
  }
}

/* Wer im System "Bewegung reduzieren" gesetzt hat, bekommt auch hier keine. */
@media (prefers-reduced-motion: reduce) {
  a:active,
  button:active,
  [role="button"]:active,
  .card:active {
    transition: none;
  }
}