/* =====================================================================
   ALBRECHT KLINK · GRUNDLAGE
   Farben, Maße, Typografie, Wasserzeichen, Grundraster.
   Alles, was für die ganze Seite gilt. Was nur eine einzelne Ansicht
   betrifft, steht in seiten.css.

   Die Schriftdateien selbst liegen in schriften.css. Sie ändern sich nie
   und werden deshalb vom Browser dauerhaft aufbewahrt.
   ===================================================================== */

:root{
  /* ---- Farbe ----
     Ein einziger heller, warmer Grund über die ganze Seite. Kein Verlauf,
     kein zweiter Farbton, keine dunklen Blöcke. Das Bild soll die Seite
     tragen, nicht die Fläche. --kalk ist nur noch für abgesetzte Flächen
     da, etwa die Bildbühne, damit ein Foto eine Kante bekommt. */
  --leinen:     #FAF8F4;               /* der Grund der ganzen Seite */
  --kalk:       #F2EDE5;               /* abgesetzte Flächen, Bildbühne  */
  --stein:      #D8D1C5;               /* Linien und Rollbalken          */
  --rinde:      #3A2F24;               /* Text, warmes Dunkelbraun       */
  --holz:       #8C6A45;
  --holz-tief:  #6A5236;
  --blattgold:  #B0862F;               /* der einzige Akzent, sparsam    */

  --tinte:      var(--rinde);
  --tinte-70:   rgba(58,47,36,.76);
  --tinte-leise:rgba(58,47,36,.70);

  /* Der Rahmen, den die Tastatur hinterlässt. Bis Fassung 2.1 war er in
     Blattgold, und weil der Auftakt am Ende den Namenszug anspringt,
     erschien ohne Zutun ein goldener Kasten um den Namen. Seit 2.2 hat
     er die Farbe des Textes und fällt nicht mehr auf wie ein Fehler.
     Weg kann er nicht: ohne ihn ist nicht mehr zu sehen, wo man mit der
     Tabulatortaste gerade steht.
     --fokus-hell ist die Gegenfarbe für die wenigen Stellen auf dunklem
     Grund, also für die Sprungmarke und den dunklen Fuß. */
  --fokus:      var(--rinde);
  --fokus-hell: #FAF8F4;

  /* Wasserzeichen: eine kaum abgesetzte Tönung des Untergrunds. */
  --wz-oben:    #EDE7DC;
  --wz-unten:   #F1EBE1;

  /* ---- Schrift ----
     Der Namenszug Albrecht Klink ist die größte Schrift der Seite.
     --schrift-marke ist damit die Obergrenze für alles andere. */
  --sans: "Plex", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  --mono: "PlexMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display: "Display", "Engravers Gothic", "Copperplate", var(--sans);

  --schrift-marke:  1.14rem;                            /* Namenszug, Obergrenze */
  --schrift-titel:  clamp(.95rem, .89rem + .28vw, 1.08rem);  /* Seitenüberschriften */
  --schrift-abt:    clamp(.86rem, .82rem + .2vw, .96rem);    /* Abteilungen der Werkschau */
  --schrift-text:   1rem;                               /* Fließtext und Vorspann */
  --schrift-klein:  .92rem;                             /* Werkangaben, Bildunterschriften */
  --schrift-winzig: .78rem;                             /* Fußzeile, Randangaben */

  /* ---- Maß ---- */
  --bund: clamp(1.15rem, 4vw, 3.5rem);
  --breite: 1240px;
  --luft: clamp(3.5rem, 9vh, 7rem);
  --kopfhoehe: 46px;

  /* Bildfläche aller Arbeiten auf Aktuelle Arbeiten. Eine einzige Stelle.
     Wird hier 4/5 oder 3/2 eingetragen, ändern sich alle Bühnen zugleich.
     Die Fotos werden nie beschnitten, sie stehen mittig im Feld.
     --werkhoehe bestimmt in Weg A zugleich die Breite, weil das Bild
     quadratisch ist und mittig steht. */
  --werkformat: 1 / 1;
  --werkhoehe: clamp(340px, 80vh, 860px);
  --werkhoehe: clamp(340px, 80svh, 860px);
  --werkabstand: clamp(1.4rem, 3.2vh, 2.6rem);

  /* Das Panoramaband über den aktuellen Arbeiten.
     Auf dem Telefon zählt --panoramahoehe, ab 900 Pixel Fensterbreite
     zählt --panoramaformat, nach oben begrenzt durch --panoramahoch. */
  --panoramahoehe: clamp(180px, 26vh, 340px);
  --panoramahoehe: clamp(180px, 26svh, 340px);
  --panoramaanteil: 31.25vw;           /* entspricht dem Verhältnis 16 zu 5 */
  --panoramahoch: clamp(300px, 46vh, 520px);
  --panoramahoch: clamp(300px, 46svh, 520px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

/* Ein Grund, überall derselbe. Kein Verlauf mehr: er machte die Seite oben
   dunkler als nötig und setzte die Kopfleiste farblich ab. */
body{
  margin:0; color:var(--tinte);
  background:var(--leinen);
  font-family:var(--sans); font-weight:400;
  font-size:var(--schrift-text); line-height:1.66;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
p{ margin:0 0 1.1em; max-width:64ch; }
p:last-child{ margin-bottom:0; }

/* ======================= Typografie =======================
   Nur zwei Formen im Gebrauch: die Auszeichnungsschrift für den Namenszug,
   das Menü und die Überschriften, dazu die Grotesk für alles andere.
   Die schmale Festbreitenschrift erscheint nur noch im Bildzähler. */

.titel{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; letter-spacing:.17em;
  font-size:var(--schrift-titel);
  line-height:1.3; margin:0;
}
.titel--klein{ font-size:var(--schrift-abt); letter-spacing:.16em; }

/* Der Satz unter jeder Überschrift. Gleiche Größe wie der Fließtext. */
.lead{ font-size:var(--schrift-text); line-height:1.6; font-weight:400; }
.klein{ font-size:var(--schrift-klein); line-height:1.6; color:var(--tinte-70); }

:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px; border-radius:1px; }
h1[tabindex="-1"]:focus{ outline:none; }
h1[tabindex="-1"]:focus-visible{ outline:2px solid var(--fokus); outline-offset:6px; }
/* Fassung 3.1: Fokus, den das Programm selbst gesetzt hat, bleibt ohne
   Rahmen. Betroffen sind genau zwei Stellen, der Namenszug nach dem
   Auftakt und die Überschrift nach dem Wechsel der Ansicht. Auf dem
   Telefon stand dort ein Kasten um "Albrecht Klink" und um "Vita", den
   niemand angefordert hatte. Gesetzt wird die Klasse in AK.stillFokus,
   js/sprache.js, und sie fällt beim ersten Tastendruck wieder weg. */
.still-fokus:focus, .still-fokus:focus-visible{ outline:none !important; box-shadow:none !important; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--rinde); color:var(--leinen); padding:.8rem 1.2rem; font-size:.82rem; letter-spacing:.08em; }
.skip:focus{ left:0; }
/* Die Sprungmarke ist die einzige Fläche der Seite, die dunkelbraun ist.
   Ein dunkler Rahmen wäre darauf unsichtbar, deshalb hier die Gegenfarbe.
   Und der Rahmen läuft nach innen statt nach außen: außen liegt der helle
   Seitengrund, dort wäre ein heller Rahmen ebenso unsichtbar. Innen liegt
   er auf dem dunklen Braun und steht mit 12,3 zu 1 darauf. */
.skip:focus-visible{ outline-color:var(--fokus-hell); outline-offset:-5px; }
.nur-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ======================= Hinweise und Verweise =======================
   Keine Rahmen, keine dunklen Flächen, keine Schatten. Ein Zeichen,
   ein Wort, sonst nichts. */
.hinweis{
  display:inline-flex; align-items:center; gap:.5rem;
  background:none; border:0; padding:0; margin:0;
  font:inherit; font-size:var(--schrift-klein);
  color:var(--tinte); text-decoration:none; cursor:pointer;
  transition:color .25s ease;
}
.hinweis:hover{ color:var(--holz-tief); }
.hinweis svg{ width:15px; height:15px; flex:0 0 auto; }
.hinweisreihe{ display:flex; flex-wrap:wrap; gap:.5rem 1.9rem; margin-top:1.5rem; }

/* Symbol ohne Wort, für Instagram und die Karte. Beide exakt gleich groß. */
.zeichen{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border:0; background:none;
  color:var(--tinte); opacity:.6; text-decoration:none;
  transition:opacity .25s ease;
}
.zeichen:hover,.zeichen:focus-visible{ opacity:1; }
.zeichen svg{ width:20px; height:20px; display:block; }
.zeichenreihe{ display:flex; align-items:center; gap:.3rem; margin:1.4rem 0 0 -10px; }

/* ======================= Wasserzeichen =======================
   Monogramm von Albrecht Klink, mit dem Stechbeitel in Holz geschnitten.
   Zurückgenommen auf 60 Prozent der früheren Größe, in einer Tönung des
   Untergrunds statt in Dunkel.

   Seit Fassung 2.2 steht es nur noch an zwei Stellen: groß am Fuß der
   Ansichten Vita und Kontakt, klein in der Fußzeile. Neben Überschriften
   steht es nicht mehr, die Variante wz--kopf ist ersatzlos entfallen. */
.wz{ display:block; pointer-events:none; user-select:none; }
.wz svg{ width:100%; height:auto; display:block; fill:currentColor; }
.wz--seite{ width:clamp(72px, 12vw, 144px); color:var(--wz-unten);
  margin:clamp(2.5rem,7vh,5rem) 0 0 auto; }
.wz--fuss{ width:34px; opacity:.3; color:var(--fuss-stark); margin-bottom:1.2rem; }

/* ======================= Kopf =======================
   Kein eigener Farbton, kein Trennstrich, kein Schatten. Beim Scrollen
   trübt sie leicht ein, damit Text darunter nicht durchschlägt. Sonst
   nichts. Sichtbar sind nur zwei Dinge: der Namenszug und der Schalter. */
.kopf{ position:sticky; top:0; z-index:90; background:transparent; border:0; transition:background-color .3s ease; }
.kopf[data-getruebt="true"]{ background:rgba(250,248,244,.88); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.kopf[data-deckend="true"]{ background:var(--leinen); backdrop-filter:none; -webkit-backdrop-filter:none; }
/* position und z-index sind hier kein Schmuck, sondern die Reparatur eines
   Fehlers aus Fassung 2.0: das geöffnete Menü ist ein Kind der Kopfleiste
   und war mit z-index:88 gesetzt, die Zeile mit Namenszug und Schalter war
   dagegen gar nicht positioniert. Sobald die Kopfleiste höher wurde als
   --kopfhoehe, etwa bei größerer Systemschrift, legte sich das Menü über
   den Schalter und ließ sich nicht mehr schließen. Jetzt liegt die Zeile
   immer oben. */
.kopf__innen{ position:relative; z-index:2;
  max-width:calc(var(--breite) + 2*var(--bund)); margin:0 auto; padding:.5rem var(--bund); display:flex; align-items:center; gap:1.2rem; min-height:46px; }
.marke{ display:flex; align-items:baseline; text-decoration:none; margin-right:auto; }
.marke__name{ font-family:var(--display); font-size:var(--schrift-marke); font-weight:400; letter-spacing:.155em; text-transform:uppercase; white-space:nowrap; }

/* Der Menüschalter. Drei Striche. Er ist auf jeder Fensterbreite der
   einzige Weg ins Menü. Beim Öffnen werden aus den drei Strichen zwei
   gekreuzte, damit erkennbar ist, dass derselbe Schalter wieder
   schließt. Die Fläche zum Antippen ist 44 mal 44 Pixel groß, auch
   wenn die Striche kleiner sind. */
.schalter{
  background:none; border:0; padding:0; cursor:pointer;
  width:44px; height:44px;
  /* Die Fläche zum Antippen bleibt 44 mal 44 Pixel. Die negativen
     Außenabstände sorgen dafür, dass sie über den Innenabstand der
     Kopfleiste hinausragt, statt die Leiste höher zu machen. */
  margin:-9px -10px -9px 0;
  display:inline-flex; align-items:center; justify-content:flex-end;
  color:var(--tinte-70); transition:color .25s ease;
}
.schalter:hover{ color:var(--tinte); }
.schalter[aria-expanded="true"]{ color:var(--tinte); }
.schalter__striche{ position:relative; display:block; width:22px; height:12px; }
.schalter__striche i{
  position:absolute; left:0; width:100%; height:1.5px;
  background:currentColor; border-radius:1px;
  transition:transform .28s ease, opacity .18s ease;
}
.schalter__striche i:nth-child(1){ top:0; }
.schalter__striche i:nth-child(2){ top:5.25px; }
.schalter__striche i:nth-child(3){ top:10.5px; }
.schalter[aria-expanded="true"] .schalter__striche i:nth-child(1){ transform:translateY(5.25px) rotate(45deg); }
.schalter[aria-expanded="true"] .schalter__striche i:nth-child(2){ opacity:0; }
.schalter[aria-expanded="true"] .schalter__striche i:nth-child(3){ transform:translateY(-5.25px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){ .schalter__striche i{ transition:none; } }

/* Text, der nur für Vorlesegeräte da ist. Er steht im Dokument, nimmt
   aber keine Fläche ein. Nicht display:none, das würde ihn auch für
   Vorlesegeräte entfernen. */
.nurvorlesen{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Das Menü. Es öffnet sich erst auf Klick, auf jeder Breite gleich.
   Es legt sich als ruhige helle Fläche unter die Kopfleiste. */
.nav{
  position:fixed; inset:var(--kopfhoehe) 0 auto 0; z-index:1;
  /* Deckend, nicht durchscheinend. Über einem Bild wirkt eine halbklare
     Fläche unruhig, und das Menü soll das Ruhigste auf der Seite sein. */
  background:var(--leinen); border-bottom:1px solid var(--stein);
  max-height:calc(100dvh - var(--kopfhoehe)); overflow-y:auto;
  transform:translateY(-10px); opacity:0; visibility:hidden;
  transition:opacity .26s ease, transform .26s ease, visibility .26s;
}
.nav[data-offen="true"]{ transform:none; opacity:1; visibility:visible; }
.nav__innen{
  max-width:calc(var(--breite) + 2*var(--bund)); margin:0 auto;
  padding:clamp(1.4rem,4vh,2.6rem) var(--bund) clamp(1.8rem,5vh,3rem);
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
}
.nav__link{
  position:relative; background:none; border:0; cursor:pointer;
  font-family:var(--display); font-size:var(--schrift-titel); font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; color:var(--tinte-70);
  padding:.62rem 0; text-decoration:none; white-space:nowrap;
  transition:color .25s ease;
}
.nav__link:hover{ color:var(--tinte); }
.nav__link[aria-current="page"]{ color:var(--tinte); }
.nav__link[aria-current="page"]::before{
  content:""; position:absolute; left:-1.1rem; top:50%; width:5px; height:5px;
  margin-top:-2.5px; border-radius:50%; background:var(--blattgold);
}

/* Der Sprachumschalter sitzt im geöffneten Menü, damit oben wirklich nur
   zwei Dinge stehen. */
.sprache{ display:inline-flex; align-items:center; margin-top:clamp(1.2rem,3vh,2rem); font-family:var(--display); font-size:.7rem; letter-spacing:.12em; }
.sprache button{ background:none; border:0; cursor:pointer; padding:.35rem .3rem; color:var(--tinte-leise); font:inherit; text-transform:uppercase; transition:color .25s ease; }
.sprache button:hover{ color:var(--tinte); }
.sprache button[aria-current="true"]{ color:var(--tinte); border-bottom:1.5px solid var(--blattgold); }
.sprache i{ font-style:normal; color:var(--tinte-leise); padding:0 .1rem; }

@media (max-width:430px){
  .kopf__innen{ gap:.6rem; padding-left:1rem; padding-right:1rem; }
  .marke__name{ font-size:1rem; letter-spacing:.1em; }
}
@media (max-width:340px){ .marke__name{ font-size:.9rem; letter-spacing:.06em; } }

/* ======================= Grundraster ======================= */
.bund{ max-width:calc(var(--breite) + 2*var(--bund)); margin:0 auto; padding:0 var(--bund); }
.sektion{ padding-top:var(--luft); padding-bottom:var(--luft); }
.ansicht{ display:none; }
.ansicht.aktiv{ display:block; animation:auf .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes auf{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* Steht in der Kopfzeile nur noch die Überschrift, braucht sie unten
   weniger Luft, sonst wirkt die Seite kahl. :has prüft, ob ein Vorspann
   da ist; wo einer steht, bleibt der Abstand wie bisher. */
.kopfzeile{ padding:clamp(2.2rem,5vh,3.6rem) 0 clamp(1.1rem,2.6vh,1.8rem); }
.kopfzeile:has(.lead){ padding-bottom:clamp(1.6rem,4vh,2.6rem); }
.kopfzeile .lead{ max-width:56ch; margin-top:.9rem; }

/* Erscheinen beim Scrollen */
.auf{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.auf.da{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .auf{ opacity:1; transform:none; }
}
@media print{
  .kopf,.lupe,.leiste,.panorama,.buehne__pfeil,.buehne__zaehler{ display:none !important; }
  .ansicht{ display:block !important; }
  .mehr__inhalt{ display:block !important; }
}