/* ERZEUGTE DATEI - nicht hier editieren.
   Quelle: site/assets/css/css/tablet.css
   Neu erzeugen: python tools/sync_theme.py */
/* ==========================================================================
   Sozan Coskun - Portfolio, Tablet-Band (768 bis 1199 px)

   WICHTIG: Diese Datei wird mit
   media="(min-width: 768px) and (max-width: 1199px)" eingebunden und enthaelt
   deshalb selbst keine Media Query. Sie laedt NACH mobile.css und aendert nur
   die Kopfzeile.

   Warum es sie gibt
   -----------------
   Es gibt zwei gezeichnete Vorlagen, 1440 und 360 px breit. Dazwischen liegt
   eine Luecke, die sich nicht wegrechnen laesst:

     - Das Desktop-Layout skaliert mit der Fensterbreite. Bei 1200 px ist sein
       Fliesstext bei 12 px angekommen, bei 1024 px bei 10 px. Darunter wird er
       unlesbar - es kann also nicht weiter nach unten reichen.
     - Das mobile Layout ist ein 360er Entwurf. Waechst seine Spalte ueber
       etwa 630 px, waechst die Schrift mit: bei 1024 px Spaltenbreite stuende
       der Fliesstext bei 34 px. Es kann also nicht weiter nach oben reichen.

   Eine dritte Vorlage gibt es nicht. Das Tablet erbt deshalb das mobile
   Layout mitsamt seiner 630-px-Spalte - was dort aber nicht hingehoerte, war
   der Burger: fuer acht Menuepunkte ist in dieser Breite reichlich Platz, und
   ein Klappmenue auf einem Geraet, das eine ganze Zeile Navigation traegt,
   wirkt wie ein Versehen.

   Geaendert wird deshalb nur die Kopfzeile: aus dem Burger wird wieder eine
   Reihe, der Sprachumschalter kommt zurueck. Alles darunter bleibt, wie es
   ist - kein halbgares drittes Layout, nur die eine Stelle, an der das
   Handy-Muster auf dem Tablet falsch war.

   Die Kopfzeile bleibt dabei INNERHALB der Spalte. Sie ueber die volle
   Fensterbreite zu ziehen, waere die uebliche Loesung, scheitert hier aber an
   .page { overflow-x: clip }: ohne diesen Beschnitt liefe das Logoband der
   Marquee quer durch das ganze Fenster. Gemessen bei 1024 px - es ragt 2979 px
   nach rechts hinaus.
   ========================================================================== */

/* --- Die Spalte fuellt das Fenster -------------------------------------- */
/* mobile.css deckelt --u bei 1.75 px. Die Spalte bleibt dadurch ab 630 px
   Fensterbreite stehen und steht zentriert, links und rechts mit Rand. Auf
   einem Tablet war das der sichtbare graue Streifen.

   Hier faellt der Deckel: die 360er Vorlage waechst auf die volle Breite.
   Das hat einen Preis, und zwar einen ehrlichen - es gibt nur diese eine
   Stellschraube. Alles in dieser Vorlage haengt an --u, auch die Schrift.
   Bei 1108 px Fensterbreite waechst der Fliesstext damit von 21 auf 36 px.
   Wer das anders will, braucht eine zweite Groessenachse fuer Typografie -
   und damit ein eigenes Tablet-Design, keine Regel mehr.

   Die 17 px sind die angenommene Breite der Scrollleiste, dieselbe Annahme
   wie im Desktop-Layout. Auf Geraeten mit ueberlagerter Scrollleiste (iPad)
   bleiben dadurch 8.5 px je Seite stehen; das ist der Preis dafuer, dass auf
   dem Desktop nichts unter der Leiste verschwindet. */
:root { --u: calc((100vw - 17px) / 360); }

/* --- Kopfzeile: eine Zeile statt eines Klappmenues ------------------------ */
.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: calc(12 * var(--u));
}

/* flex: none bei Logo und Flagge ist kein Schmuck. Ohne das staucht die
   Flexbox beide, sobald die Zeile zu voll wird - und weil die deutsche
   Navigation 40 px breiter ist als die englische, war das Logo auf der
   deutschen Seite gemessene 56 px breit und auf der englischen 74. */
.brand {
  position: static;
  flex: none;
  width: calc(40 * var(--u));
  margin-right: auto;
}

.nav-toggle { display: none; }

/* Das mobile Klappmenue zuruecknehmen. Auch der geoeffnete Zustand wird
   ueberschrieben: wer das Menue auf dem Handy aufklappt und dann das Fenster
   breiter zieht, behaelt sonst die Klasse is-open und saehe hier ein Raster
   statt einer Zeile. */
.nav,
.site-header.is-open .nav {
  display: flex;
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  gap: 0;
  background: none;
  box-shadow: none;
}

/* Die Masse sind an der laengeren der beiden Navigationen ausgerichtet:
   deutsch mit "Referenzen" und "Ueber mich" braucht 468 px, englisch 430.
   Zusammen mit Logo, Flagge und Rand bleiben in der 630er Spalte gut 15 px
   Luft - genug, dass auch ein etwas laengerer Menuepunkt nicht umbricht. */
.nav a {
  padding-inline: calc(2 * var(--u));
  line-height: calc(60 * var(--u));
  font-size: calc(7.1 * var(--u));
  letter-spacing: calc(0.15 * var(--u));
}
/* Die rote Marke des aktiven Punktes sitzt knapp unter der Schrift. */
.nav a::after {
  top: calc(38 * var(--u));
  height: calc(3.4 * var(--u));
}

/* Auf dem Handy steht der Sprachumschalter nur in der Fusszeile, weil oben
   neben Logo und Burger kein Platz ist. Hier ist er. */
.site-header .lang {
  display: block;
  flex: none;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  margin-left: calc(7 * var(--u));
}