/* =====================================================================
   ALBRECHT KLINK · DIE VIER ANSICHTEN
   Panorama und Aktuelle Arbeiten, Werkschau, Vita, Kontakt, dazu die
   Lupe und die Fußzeile. Farben und Maße kommen aus grundlage.css.
   ===================================================================== */

/* ======================= Panorama =======================
   Ruhiger Auftakt über den aktuellen Arbeiten. Keine Punkte, keine
   Pfeile, keine Bewegung im Bild. Nur ein langsames Überblenden.
   Fehlt der Abschnitt [panorama] in inhalt.txt oder ist er leer,
   erscheint das Band gar nicht.

   Das Band steht außerhalb des Satzspiegels und läuft dadurch über die
   volle Fensterbreite. Es ist ein gewöhnliches Blockelement, es nimmt
   also die Breite seines Elternelements ein. Bewusst kein 100vw: das
   rechnet die Breite des Rollbalkens mit und erzeugt einen waagerechten
   Rollbalken.

   Auf dem Telefon zählt die Höhe, weil die Breite ohnehin klein ist.
   Ab 900 Pixel zählt das Seitenverhältnis, sonst wirkt das Band über
   die volle Breite wie ein Streifen. Nach oben begrenzt --panoramahoch. */
.panorama{
  position:relative; overflow:hidden;
  height:var(--panoramahoehe);
  background:var(--leinen);
  /* Bündig unter der Kopfleiste. Über die volle Breite wirkt ein Abstand
     dazwischen wie ein Versehen, bündig wirkt es gewollt. */
  margin-top:0;
}
@media (min-width:900px){
  /* Die Höhe folgt der Fensterbreite, nach oben begrenzt. Bewusst über die
     Höhe gerechnet und nicht über aspect-ratio: aspect-ratio zusammen mit
     max-height lässt den Browser auch die BREITE mitschrumpfen, das Band
     wäre auf großen Bildschirmen dann nicht mehr randlos. */
  .panorama{ height:min(var(--panoramaanteil), var(--panoramahoch)); }
}
.panorama img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transition:opacity 1.8s ease;
}
.panorama img.zeigt{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .panorama img{ transition:none; }
}

/* ======================= Der Auftakt =======================
   Formatfüllend über allem, drei bis vier Bilder, langsam ineinander.
   Er liegt außerhalb des Satzspiegels und außerhalb von main, damit er
   nichts verschiebt. Solange er läuft, steht die Seite still.

   Das Feld ist im Dokument hidden. Ohne JavaScript bleibt es das, es
   gibt also nichts zu überspringen und nichts zu warten.
   ========================================================== */
/* Die beiden Zeiten des Auftakts stehen hier und NUR hier. js/auftakt.js
   liest sie von hier. In Fassung 2.0 standen sie doppelt, im Code und in
   der Gestaltung, und konnten auseinanderlaufen.
   Fassung 2.2: 3,2 statt 3,9 Sekunden Standzeit, 1,0 statt 1,2 Sekunden
   Überblendung. Fünf Bilder ergeben damit 16 Sekunden vom Aufruf bis zu
   den Arbeiten, vorher waren es bei sieben Bildern 28. Die Überblendung
   bleibt bewusst knapp unter einem Drittel der Standzeit, sonst ist ein
   Bild länger im Wechsel als im Stand. */
:root{
  --auftakt-stand:  3200ms;
  --auftakt-blende: 1000ms;
}
.auftakt{
  position:fixed; inset:0; z-index:200;
  background:var(--leinen);
  opacity:0; transition:opacity .9s ease;
}
.auftakt[data-da="true"]{ opacity:1; }
.auftakt[data-geht="true"]{ opacity:0; pointer-events:none; }
html.auftakt-laeuft, html.auftakt-laeuft body{ overflow:hidden; }

.auftakt__bilder{ position:absolute; inset:0; }
.auftakt__bilder img{
  position:absolute; inset:0; width:100%; height:100%;
  object-position:center;
  opacity:0; transition:opacity var(--auftakt-blende) ease;
}
.auftakt__bilder img.zeigt{ opacity:1; }

/* Zwei Zuschnitte, umgeschaltet über eine Zeile in daten/inhalt.txt.

   ganz      Das ganze Bild ist zu sehen, ringsum der helle Grund. Nichts
             wird abgeschnitten. Sichere Vorgabe: bei hohen oder
             quadratischen Aufnahmen bliebe sonst von der Figur wenig.
   fuellend  Das Bild füllt den Schirm und wird beschnitten. Nur sinnvoll
             bei Aufnahmen im Querformat, deren Motiv in der Mitte liegt. */
.auftakt[data-zuschnitt="ganz"] .auftakt__bilder img{ object-fit:contain; padding:clamp(2.6rem,7vh,5rem) var(--bund); box-sizing:border-box; }
.auftakt[data-zuschnitt="fuellend"] .auftakt__bilder img{ object-fit:cover; }

/* Der Namenszug, sonst kein Text. Bei ganzem Bild steht er auf dem
   hellen Grund und ist einfach Tinte. Bei füllendem Bild steht er auf
   dem Foto und braucht einen sehr weichen Verlauf darunter. */
.auftakt__marke{
  position:absolute; left:0; right:0; top:0;
  padding:calc(.5rem + 2px) var(--bund);
  min-height:var(--kopfhoehe); display:flex; align-items:center;
  font-family:var(--display); font-size:var(--schrift-marke); font-weight:400;
  letter-spacing:.155em; text-transform:uppercase; white-space:nowrap;
  color:var(--tinte); pointer-events:none;
}
/* Auf dem Foto: kein Verlauf mehr, denn der sah aus wie eine Kopfzeile,
   und genau die soll im Auftakt nicht zu sehen sein.

   Damit der Namenszug trotzdem auf jedem Bild lesbar bleibt, misst
   js/auftakt.js die Helligkeit der linken oberen Ecke und setzt am Feld
   data-marke="hell" oder "dunkel". Dazu ein sehr weicher Schatten in der
   Gegenfarbe. Ohne Messung, etwa ohne JavaScript, gilt der helle Zug.

   Entschieden in Fassung 2.2: der Namenszug bleibt ohne Verlauf. Die
   Vergleichsregel data-marke="verlauf", mit der sich die Fassung aus 2.0
   zurückholen ließ, ist deshalb entfernt. */
.auftakt[data-zuschnitt="fuellend"] .auftakt__marke{
  color:#FFFDFA;
  text-shadow:0 1px 3px rgba(20,15,10,.6), 0 2px 20px rgba(20,15,10,.75);
  transition:color .5s ease, text-shadow .5s ease;
}
.auftakt[data-zuschnitt="fuellend"][data-marke="dunkel"] .auftakt__marke{
  color:#2A211A;
  text-shadow:0 1px 3px rgba(255,253,250,.75), 0 2px 20px rgba(255,253,250,.9);
}
.auftakt[data-zuschnitt="fuellend"][data-marke="dunkel"] .auftakt__weiter{
  color:rgba(42,33,26,.85); text-shadow:0 1px 3px rgba(255,253,250,.8), 0 2px 16px rgba(255,253,250,.9);
}
.auftakt[data-zuschnitt="fuellend"][data-marke="dunkel"] .auftakt__weiter:hover{ color:#2A211A; }
@media (prefers-reduced-motion:reduce){ .auftakt__marke{ transition:none; } }

/* Überspringen. Seit Fassung 2.1 nur noch zwei Winkel, kein Rahmen, keine
   Fläche, kein Wort. Das Wort steht trotzdem im Dokument, unsichtbar, für
   Vorlesegeräte. Die Fläche zum Antippen bleibt 48 Pixel groß, auch wenn
   das Zeichen klein ist. */
.auftakt__weiter{
  position:absolute; right:calc(var(--bund) - .5rem); bottom:clamp(1rem,3.4vh,2.2rem);
  background:none; border:0; padding:0; cursor:pointer;
  width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--tinte-70); transition:color .25s ease, transform .25s ease;
}
.auftakt__weiter::before{
  content:"››"; font-family:var(--sans); font-size:1.5rem; line-height:1;
  letter-spacing:-.04em;
}
.auftakt__weiter:hover{ color:var(--tinte); transform:translateX(2px); }
/* Auf dem Foto hell mit weichem Schatten, damit es auf jedem Bild steht. */
.auftakt[data-zuschnitt="fuellend"] .auftakt__weiter{
  color:rgba(255,253,250,.9); text-shadow:0 1px 3px rgba(20,15,10,.6), 0 2px 16px rgba(20,15,10,.7);
}
.auftakt[data-zuschnitt="fuellend"] .auftakt__weiter:hover{ color:#FFFDFA; }
/* Der Fokusrahmen dieses Knopfes steht auf einem wechselnden Foto. Die
   Helligkeitsmessung hilft hier nicht: sie misst die linke obere Ecke für
   den Namenszug, der Knopf sitzt unten rechts. Deshalb zwei Ringe
   ineinander, ein heller innen und ein dunkler außen. Welches Foto auch
   läuft, einer der beiden hebt sich immer ab. */
.auftakt__weiter:focus-visible{
  outline-color:var(--fokus);
  box-shadow:0 0 0 3px var(--fokus-hell);
}
@media (prefers-reduced-motion:reduce){ .auftakt__weiter{ transition:color .25s ease; } .auftakt__weiter:hover{ transform:none; } }

@media (prefers-reduced-motion:reduce){
  .auftakt, .auftakt__bilder img{ transition:none; }
}

/* ======================= Aktuelle Arbeiten =======================
   Seit Fassung 3.0 nur noch Bilder, aneinandergereiht in einem
   gleichmäßigen Raster aus quadratischen Kacheln. Kein Werkname, keine
   Angabenzeile, kein mehr… auf der Seite. Ein Klick öffnet die Lupe, und
   dort steht unter dem Bild alles Weitere.

   Die Bilder werden ganz gezeigt, object-fit:contain. Eine hochkant
   stehende Figur behält ihr Format und steht mittig in der quadratischen
   Kachel, der freie Rand ist der Seitengrund und fällt nicht auf.
   ================================================================== */
.kacheln{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  /* Fassung 3.1: der Abstand ist halbiert, von 1,0 bis 2,2 rem auf 0,5
     bis 1,1 rem. Die Fläche wirkt dadurch als ein zusammenhängendes
     Raster und nicht als neun einzelne Bilder. */
  gap:clamp(.5rem, 1.2vw, 1.1rem);
}
.kachel{ margin:0; position:relative; }
.kachel__knopf{
  display:block; width:100%; padding:0; border:0; background:var(--kalk);
  cursor:zoom-in; overflow:hidden;
}
/* Fassung 3.1: object-fit:cover statt contain. Bis Fassung 3.0 stand
   jedes Bild ganz in seiner quadratischen Kachel. Bei den acht
   liegenden Aufnahmen der Arbeit seventies blieb dadurch oben und unten
   ein breiter leerer Streifen, und das Raster wirkte uneinheitlich.
   Jetzt füllt jedes Bild sein Feld, alle neun Kacheln sind gleich.
   Beschnitten wird nur die Übersicht. In der Lupe ist die Aufnahme
   weiterhin vollständig zu sehen, dort gilt weiter contain. */
.kachel__knopf img{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:opacity .3s ease, transform .4s ease;
}

/* Der Statuspunkt auf der Kachel, seit Fassung 3.1.
   Rot verkauft, gelb reserviert, grün verfügbar. Er lenkt den Blick auf
   die Verfügbarkeit, ohne dass ein Wort auf dem Bild steht; das Wort
   selbst steht weiterhin in der Lupe.

   Seit Fassung 3.2 sitzt er UNTEN rechts und ist eine reine Farbfläche.
   Der helle Ring und der Schatten aus Fassung 3.1 sind entfallen, so
   entschieden am 11. August. Er ist damit ruhiger, hebt sich aber auf
   einem sehr hellen Foto weniger ab, vor allem der gelbe.

   Für Vorlesegeräte ist er stumm. Die Beschriftung des Knopfes nennt
   den Zustand ohnehin im Wortlaut, etwa "Foto vergrößern: Hans Krone,
   verfügbar". Zweimal dasselbe wäre nur lästig. */
.kachel__punkt{
  position:absolute; bottom:.55rem; right:.55rem; z-index:2;
  width:11px; height:11px; border-radius:50%;
  background:var(--punkt, var(--tinte-leise));
  pointer-events:none;
}
.kachel__punkt[data-stand="frei"]{        --punkt:#3F7A3E; }
.kachel__punkt[data-stand="reserviert"]{  --punkt:#D6A419; }
.kachel__punkt[data-stand="verkauft"]{    --punkt:#B23A2B; }
@media (max-width:600px){
  .kachel__punkt{ width:9px; height:9px; bottom:.4rem; right:.4rem; }
}
/* Das Vergrößern beim Darüberfahren ist eine Zugabe für Geräte mit
   Mauszeiger. Auf einem Berührbildschirm gibt es kein Darüberfahren,
   dort passiert nichts, und erreichbar ist das Bild trotzdem: ein Tippen
   oder die Eingabetaste öffnen dieselbe Lupe. */
@media (hover:hover){
  .kachel__knopf:hover img{ transform:scale(1.035); opacity:.92; }
}
.kachel__knopf:focus-visible img{ opacity:.9; }

/* Verfügbarkeit. Steht in der Lupe, nicht mehr auf der Seite. */
.stand{ display:inline-flex; align-items:center; gap:.42rem; margin:.2rem 0 1rem !important;
  font-size:var(--schrift-klein); letter-spacing:.02em; color:var(--tinte-leise); }
.stand::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.stand[data-stand="frei"]{ color:var(--holz-tief); }
.stand[data-stand="reserviert"]{ color:#8A6A2F; }
.stand[data-stand="verkauft"]{ color:var(--tinte-leise); }
.stand[data-stand="verkauft"]::before{ background:none; box-shadow:inset 0 0 0 1px currentColor; }

/* ======================= Werkschau ======================= */
.abteilung{ padding:clamp(3.4rem,9vh,6.5rem) 0 0; scroll-margin-top:calc(var(--kopfhoehe) + 1.2rem); }
.abteilung:first-of-type{ padding-top:0; }
/* Seit Fassung 3.2.1 steht hier nur noch die Überschrift, die Zeile
   darunter ist unter die Bildstrecke gewandert. */
.abteilung__kopf{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.8rem 2rem; margin-bottom:1.2rem; }
.abteilung__kopf h2::before{ content:""; display:block; width:2.2rem; height:2px; background:var(--blattgold); margin-bottom:.9rem; }
/* Die eine Zeile zum Thema. Bis Fassung 3.2 stand sie unter der
   Überschrift, seit 3.2.1 unter dem Anriss, unmittelbar vor den
   Werkmappen und mehr… Deshalb nur noch ein kleiner Abstand nach oben:
   sie schließt an den Anriss an und gehört zu ihm. */
.abteilung__zeile{ max-width:52ch; margin:.55rem 0 0; color:var(--tinte-70); font-size:var(--schrift-klein); }
/* Zwei Sätze aus "Texte zur Werkschau". Seit Fassung 3.1 stehen sie
   UNTER der Bildstrecke, nicht mehr darüber, und führen unmittelbar zu
   mehr… mit dem langen Text. Deshalb oben mehr Abstand zu den Bildern
   und unten keiner: mehr… schließt dicht an. */
.abteilung__anriss{ max-width:62ch; margin:1.6rem 0 0; font-size:var(--schrift-text); line-height:1.6; }
/* Steht über dem Anriss der Knopf "Weitere Bilder zeigen", genügt der
   Abstand, den dieser schon mitbringt. */
.strecke__mehr + .abteilung__anriss{ margin-top:1.1rem; }
/* Die Werkmappen einer Abteilung, seit Fassung 3.1. Sie schließen an den
   Anriss an, mehr… folgt darunter mit eigenem Abstand. */
.abteilung__mappen{ margin-top:1.1rem; }

/* Alle Fotos aller Abteilungen erscheinen gleich groß, unabhängig davon,
   wie viele Bilder eine Abteilung enthält. Das leistet auto-fill: Es legt
   immer dieselbe Zahl gleich breiter Spuren an und lässt die überzähligen
   einfach leer, statt die vorhandenen Bilder aufzublähen.

   Seit Fassung 2.0 sind die Fotos deutlich größer: Untergrenze 300 statt
   180 Pixel. Bei 1440 Pixeln stehen damit vier statt sechs Bilder
   nebeneinander, bei 1920 fünf. Dieselbe Richtung wie bei den aktuellen
   Arbeiten, größer und weniger.

   Die Bilder werden nicht mehr beschnitten. Sie stehen in einem
   quadratischen Feld auf dem Seitengrund, ganz zu sehen. Vorher schnitt
   object-fit:cover Hochformate oben und unten ab, und Aufnahmen mit
   weißem Hintergrund erschienen als helle Kacheln im Raster. */
/* Das Raster der Bilder. Überwiegend gleich große quadratische Kacheln,
   jede fünfte reicht über zwei Spalten und zwei Zeilen. Damit wirkt die
   Fläche wie ein Mosaik und nicht wie eine Tabelle, und es bleibt reines
   CSS Grid, ohne Programmbibliothek und ohne Layout-Skript.

   Warum eine feste Spaltenzahl je Breite und nicht auto-fill: Eine
   Kachel, die zwei Spalten und zwei Zeilen einnimmt, ist nur dann genau
   so hoch wie zwei normale Kacheln samt Zwischenraum, wenn Zeilenhöhe
   und Spaltenbreite übereinstimmen. Das ist mit einer bekannten
   Spaltenzahl sicher, mit einer fließenden nicht.

   dense füllt Lücken, die durch die großen Kacheln entstehen könnten. */
.strecke{
  display:grid; grid-auto-flow:dense;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(.6rem, 1.6vw, 1.4rem);
}
@media (min-width:700px){  .strecke{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1100px){ .strecke{ grid-template-columns:repeat(4, 1fr); } }
@media (min-width:1600px){ .strecke{ grid-template-columns:repeat(5, 1fr); } }

.strecke > figure{ margin:0; }
/* Unter 700 Pixeln stehen nur zwei Spalten. Eine große Kachel wäre dort
   die ganze Breite und die Seite würde sehr lang. Deshalb dort alle
   Kacheln gleich groß. */
@media (min-width:700px){
  .strecke .kachel--gross{ grid-column:span 2; grid-row:span 2; }
}
.strecke .kachel__knopf{ cursor:zoom-in; }
.strecke img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:contain; }

/* Der Knopf unter der Strecke, der den Rest einer Abteilung einblendet.
   Dieselbe leise Machart wie mehr… */
.strecke__mehr{ margin:1.4rem 0 0; }
.strecke__knopf{
  background:none; border:0; padding:.2rem 0; cursor:pointer;
  font:inherit; font-size:var(--schrift-klein); color:var(--tinte-70);
  transition:color .25s ease;
}
.strecke__knopf:hover{ color:var(--tinte); }

/* Aufklapper: nur das Wort, kein Rahmen, keine Unterstreichung, keine Pfeile. */
.mehr{ margin-top:1.4rem; }
.mehr__schalter{
  background:none; border:0; padding:.2rem 0; cursor:pointer;
  font:inherit; font-size:var(--schrift-klein);
  color:var(--tinte-70); text-decoration:none;
  transition:color .25s ease;
}
.mehr__schalter:hover{ color:var(--tinte); }
.mehr__inhalt{ display:none; padding-top:.4rem; margin-top:1.5rem; }
.mehr[data-offen="true"] .mehr__inhalt{ display:block; animation:auf .4s ease both; }
.mehr__spalten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr)); gap:clamp(1.2rem,3vw,3rem); }
.zitat{ border-left:2px solid var(--blattgold); padding-left:1.3rem; font-size:var(--schrift-text); line-height:1.55; max-width:52ch; margin:1.6rem 0 0; }
.zitat cite{ display:block; margin-top:.7rem; font-size:var(--schrift-winzig); letter-spacing:.04em; color:var(--tinte-leise); font-style:normal; }
/* Der Textabschnitt über die ganze Werkschau. Bis Fassung 3.0 stand er
   oben in der Kopfzeile, seit 3.1 steht er unten hinter der letzten
   Abteilung. Er gilt allen sechs Themen, deshalb mehr Luft nach oben als
   bei den Zitaten innerhalb einer Abteilung und mehr Breite. */
.zitat--schluss{ margin-top:clamp(3rem,8vh,5.5rem); max-width:64ch; }
.zitat--schluss[hidden]{ display:none; }

/* ======================= Vita =======================
   Seit Fassung 3.2 steht der Seitentitel oben in einer eigenen
   Kopfzeile, wie bei Aktuelle Arbeiten und Werkschau. Die Textspalte
   beginnt deshalb unmittelbar mit dem Vorspann. */
.vita{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr); gap:clamp(1.8rem,5vw,4.5rem); align-items:start; }
.vita > *{ min-width:0; }
@media (max-width:860px){ .vita{ grid-template-columns:minmax(0,1fr); } }
.vita__text p{ max-width:60ch; }
.vita__streifen{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem; margin-top:clamp(2.2rem,6vh,3.5rem); }
.vita__streifen figure{ margin:0; }
.vita__streifen button{ display:block; width:100%; padding:0; border:0; background:var(--leinen); cursor:zoom-in; }
.vita__streifen img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.vita__streifen figcaption{ font-size:var(--schrift-winzig); line-height:1.4; color:var(--tinte-leise); padding-top:.4rem; }
/* Fassung 3.3: Führt ein Bild der Vita auf eine eigene Textseite weiter,
   steht hinter der Bildunterschrift ein kleines mehr…. Es ist so leise
   gesetzt wie die Unterschrift selbst und ändert die Reihe nicht. Das Bild
   ist dann zugleich der Weg dorthin, deshalb der Zeiger. */
.vita__streifen figcaption a{ color:var(--tinte-70); text-decoration:none; border-bottom:1px solid var(--stein); white-space:nowrap; }
.vita__streifen figcaption a:hover{ color:var(--tinte); border-bottom-color:var(--holz-tief); }
.vita__weiter{ display:block; cursor:pointer; }
.vita__weiter img{ transition:opacity .25s ease; }
.vita__weiter:hover img{ opacity:.88; }

/* ======================= Kontakt =======================
   Keine Beschriftungen, kein Trennstrich. Eine Telefonnummer und eine
   E-Mail-Adresse erklären sich selbst. */
/* Seit Fassung 3.2 stehen beide Spalten oben bündig. Bis 3.1 waren sie
   senkrecht mittig ausgerichtet; damals stand die Überschrift Kontakt
   noch in der linken Spalte und trug sie. Jetzt steht die Überschrift in
   der Kopfzeile, und die kürzere Textspalte wäre mittig gesetzt weit
   unter die Überschrift gerutscht. */
.kontakt{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(1.8rem,5vw,4.5rem); align-items:start; }
.kontakt > *{ min-width:0; }
@media (max-width:800px){ .kontakt{ grid-template-columns:minmax(0,1fr); } }
.kontakt__daten{ list-style:none; margin:1.5rem 0 0; padding:0; }
.kontakt__daten li{ padding:0 0 .45rem; }
.kontakt__daten li:last-child{ padding-bottom:0; }
.kontakt__daten a{ font-size:var(--schrift-text); text-decoration:none; border-bottom:1px solid rgba(194,155,72,.6); transition:border-color .25s ease; }
.kontakt__daten a:hover{ border-color:var(--rinde); }
/* Bis Fassung 3.1 stand über diesem Absatz die Überschrift Kontakt, er
   brauchte deshalb etwas Luft nach oben. Seit 3.2 steht die Überschrift
   in der Kopfzeile, der Absatz beginnt die Spalte und braucht keinen
   eigenen Abstand mehr. */
#kontakt-inhalt > p:first-child{ margin-top:0; }
.showroom{ margin-top:1.5rem; max-width:46ch; }
.showroom p{ margin:0 0 .45rem; }

/* ======================= Fuß mit Impressum =======================
   Der Fuß ist die größte zusammenhängende Fläche der Seite. Deshalb hängen
   alle seine Farben an eigenen Reglern, und es gibt zwei Fassungen:

     data-fuss="dunkel"   wie bisher, dunkelbraun mit heller Schrift
     data-fuss="hell"     Kalk, dieselbe Familie wie der Seitengrund

   Der Regler steht am <html>. Umgeschaltet wird beim Bauen, sonst nirgends.
   ================================================================== */
:root{
  --fuss-grund: var(--rinde);
  --fuss-text:  rgba(247,245,240,.78);
  --fuss-stark: rgba(247,245,240,.94);
  --fuss-link:  rgba(247,245,240,.92);
  --fuss-leise: rgba(247,245,240,.66);
  --fuss-titel: #C9A45C;               /* helles Gold, nur auf dunklem Grund */
  --fuss-linie: rgba(201,164,92,.5);
  --fuss-saum:  none;
}
[data-fuss="hell"]{
  --fuss-grund: var(--kalk);
  --fuss-text:  var(--tinte-70);
  --fuss-stark: var(--tinte);
  --fuss-link:  var(--tinte);
  --fuss-leise: var(--tinte-leise);
  --fuss-titel: var(--holz-tief);
  --fuss-linie: var(--stein);
  --fuss-saum:  1px solid var(--stein);
}
.fuss{ background:var(--fuss-grund); color:var(--fuss-text); border-top:var(--fuss-saum);
  padding:clamp(2.6rem,6vh,4rem) 0 2.2rem; font-size:var(--schrift-klein); margin-top:var(--luft); }
/* Der Fokusrahmen folgt dem Fuß. --fuss-stark ist im dunklen Fuß hell und
   im hellen Fuß dunkel. Eine Regel genügt damit für beide Fassungen.
   Der Abstand ist hier kleiner als sonst: die Verweise stehen dicht
   untereinander, mit den üblichen drei Punkten lief der Rahmen über die
   Nachbarzeile. Gemessen an drei Stellen, vorher bis herunter auf 1,0. */
.fuss :focus-visible{ outline-color:var(--fuss-stark); outline-offset:1px; }
.fuss a{ color:var(--fuss-link); text-decoration:none; border-bottom:1px solid var(--fuss-linie); }
.fuss a:hover{ color:var(--fuss-titel); }
.fuss h2{ font-family:var(--display); font-size:.78rem; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--fuss-titel); margin:0 0 .9rem; }
.fuss h3{ font-size:var(--schrift-klein); font-weight:600; margin:1.4rem 0 .35rem; color:var(--fuss-stark); }
.fuss p{ margin:0 0 .7rem; max-width:70ch; }
.fuss__raster{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:2rem clamp(1.5rem,4vw,3.5rem); }
.fuss__insta{ display:inline-flex; align-items:center; gap:.55rem; border:0 !important; }
.fuss__insta svg{ width:16px; height:16px; }
.fuss details{ margin-top:1.4rem; }
.fuss summary{ cursor:pointer; font-size:var(--schrift-winzig); letter-spacing:.08em; text-transform:uppercase; color:var(--fuss-text); padding:.5rem 0; }
.fuss summary:hover{ color:var(--fuss-titel); }
.fuss__unten{ margin-top:3rem; padding-top:0; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between; font-size:var(--schrift-winzig); color:var(--fuss-leise); }
.fuss__hinweis{ margin-top:2rem; color:var(--fuss-leise); }

/* ======================= Lupe ======================= */
.lupe{ position:fixed; inset:0; z-index:150; background:rgba(20,15,10,.95); display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
  padding:clamp(.8rem,4vw,3rem); overflow:auto; }
.lupe[data-offen="true"]{ display:flex; }
/* Die Lupe liegt auf fast schwarzem Grund. Der Fokusrahmen der Seite ist
   die Farbe des Textes und wäre hier unsichtbar, deshalb überall in der
   Lupe die Gegenfarbe. Gemessen 15,9 zu 1 gegen den Grund. */
.lupe :focus-visible{ outline-color:var(--fokus-hell); }

/* Die Tafel unter dem Bild, nur bei den aktuellen Arbeiten. Sie trägt
   Werkname, Angaben, Verfügbarkeit und hinter mehr… den Text, die
   Werkmappe und den Weg zur Anfrage. Steht sie da, wird das Bild
   kleiner, damit beides zusammen ins Fenster passt. */
.lupe[data-tafel="true"] img{ max-height:min(52vh, 620px); }
.lupe__tafel{
  width:min(70ch, 100%); color:rgba(247,245,240,.86);
  font-size:var(--schrift-klein); line-height:1.6;
  max-height:30vh; overflow:auto; padding:0 .4rem 1.6rem 0;
  scrollbar-width:thin;
  /* Die letzten Millimeter laufen weich aus. Das zeigt, dass der Text
     weitergeht, ohne dass ein Rollbalken zu sehen sein muss. Am Ende des
     Textes liegt der Auslauf auf dem freien Rand darunter. */
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 1.4rem), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 1.4rem), transparent);
}
/* Auf dem Telefon ist die Höhe knapp. Dort wird das Bild kleiner und die
   Tafel bekommt mehr Platz, damit man nicht nach zwei Zeilen rollen muss. */
@media (max-width:700px){
  .lupe[data-tafel="true"] img{ max-height:38vh; }
  .lupe__tafel{ max-height:44vh; }
}
.lupe__tafel h2{ font-family:var(--sans); font-size:1.06rem; font-weight:400; letter-spacing:.01em;
  color:#FFFDFA; margin:0; text-transform:none; }
.lupe__tafel .tafel__angaben{ margin:.2rem 0 0; color:rgba(247,245,240,.68); font-size:var(--schrift-klein); }
.lupe__tafel p{ max-width:none; }
.lupe__tafel .mehr{ margin-top:.9rem; }
.lupe__tafel .mehr__schalter{ color:rgba(247,245,240,.78); }
.lupe__tafel .mehr__schalter:hover{ color:#FFFDFA; }
.lupe__tafel .mehr__inhalt p{ margin:0 0 .8rem; }
/* Seit Fassung 3.2.1 hat die Verfügbarkeit in der Lupe dieselbe Farbe
   wie der übrige Text, gleich welcher Stand. Bis 3.2 waren verfügbar
   und reserviert in Gold gesetzt und verkauft in einem stumpferen Ton;
   das trug mehr Aufmerksamkeit, als die Angabe braucht. Der farbige
   Punkt auf der Kachel leistet das ohnehin schon.
   Der kleine Ring vor dem Wort bleibt und nimmt die Textfarbe an. */
.lupe__tafel .stand{ color:inherit; }
.lupe__tafel .hinweis{ color:rgba(247,245,240,.9); }
.lupe__tafel .hinweis:hover{ color:#FFFDFA; }

.lupe figure{ position:relative; margin:0; width:min(1200px,100%); display:flex; flex-direction:column; gap:.8rem; }
.lupe img{ max-height:80vh; width:auto; margin:0 auto; object-fit:contain; }
.lupe figcaption{ color:rgba(247,245,240,.78); font-size:var(--schrift-winzig); letter-spacing:.04em; text-align:center; }
/* Nur die drei Bedienknöpfe schweben, nicht jeder Knopf in der Lupe.
   Sonst legte sich die Regel auch über mehr… in der Tafel. */
.lupe > [data-zu], .lupe figure > [data-schritt]{
  position:absolute; background:none; border:0; color:rgba(247,245,240,.75);
  cursor:pointer; font:inherit; font-size:var(--schrift-winzig); letter-spacing:.06em; padding:1rem;
}
.lupe > [data-zu]:hover, .lupe figure > [data-schritt]:hover{ color:var(--blattgold); }
.lupe > [data-zu]{ top:.4rem; right:.6rem; }
.lupe figure > [data-schritt="-1"]{ left:.2rem; top:50%; transform:translateY(-50%); font-size:1.7rem; }
.lupe figure > [data-schritt="1"]{ right:.2rem; top:50%; transform:translateY(-50%); font-size:1.7rem; }