/* ==========================================================================
   Kleider flicken – Bettina Ruf
   Schwarz auf Weiss, ohne Zwischentöne.
   Das einzige Schmuckelement ist die Vorstichlinie: gestrichelte Regeln,
   die von Rand zu Rand durch die Seite laufen.
   ========================================================================== */

/* Die Schriften stehen nicht hier, sondern in css/typo-a.css, typo-b.css
   und typo-c.css. Jede dieser Dateien bringt ihre @font-face-Regeln mit und
   setzt die Variablen, die weiter unten verwendet werden. Gewechselt wird
   durch Austausch der zweiten <link>-Zeile in den drei HTML-Dateien. */

:root {
  --tinte: #000;             /* Schrift */
  --tinte-hell: #8c8c8c;     /* feine Linien */
  --papier: #fff;            /* Hintergrund */
  --faden: #fff;             /* Flächen hinter Bildern, Text auf Dunkel */
  --grau: #666;              /* Nebentext */
  --krapp: #8f3626;          /* Krapprot, nur für den Punkt der Wortmarke */

  --mass: 1.5rem;            /* Grundabstand */
  --spalte: 34rem;           /* Lesebreite */
  --rand: 1.25rem;           /* Seitenrand */
  --breite: 68rem;           /* maximale Satzbreite */
  --fuge: 5px;               /* Abstand zwischen den Bildkacheln */
  --luft: calc(var(--mass) * 0.6);   /* Abstand von der Vorstichlinie */


  --stich-breite: 354.87px;
  --stich: linear-gradient(
    to right,
    var(--krapp) 0.0px 4.37px,
    transparent 4.37px 12.71px,
    var(--krapp) 12.71px 19.22px,
    transparent 19.22px 25.12px,
    var(--krapp) 25.12px 32.57px,
    transparent 32.57px 41.43px,
    var(--krapp) 41.43px 46.18px,
    transparent 46.18px 56.08px,
    var(--krapp) 56.08px 62.06px,
    transparent 62.06px 72.11px,
    var(--krapp) 72.11px 79.79px,
    transparent 79.79px 85.83px,
    var(--krapp) 85.83px 92.03px,
    transparent 92.03px 101.78px,
    var(--krapp) 101.78px 106.28px,
    transparent 106.28px 113.94px,
    var(--krapp) 113.94px 120.31px,
    transparent 120.31px 127.07px,
    var(--krapp) 127.07px 134.84px,
    transparent 134.84px 142.09px,
    var(--krapp) 142.09px 148.23px,
    transparent 148.23px 158.07px,
    var(--krapp) 158.07px 162.39px,
    transparent 162.39px 169.35px,
    var(--krapp) 169.35px 177.04px,
    transparent 177.04px 183.99px,
    var(--krapp) 183.99px 188.59px,
    transparent 188.59px 195.74px,
    var(--krapp) 195.74px 200.87px,
    transparent 200.87px 210.28px,
    var(--krapp) 210.28px 215.02px,
    transparent 215.02px 220.62px,
    var(--krapp) 220.62px 226.58px,
    transparent 226.58px 232.67px,
    var(--krapp) 232.67px 239.61px,
    transparent 239.61px 246.88px,
    var(--krapp) 246.88px 253.93px,
    transparent 253.93px 261.04px,
    var(--krapp) 261.04px 265.87px,
    transparent 265.87px 276.16px,
    var(--krapp) 276.16px 280.87px,
    transparent 280.87px 286.84px,
    var(--krapp) 286.84px 291.14px,
    transparent 291.14px 298.79px,
    var(--krapp) 298.79px 303.28px,
    transparent 303.28px 312.42px,
    var(--krapp) 312.42px 317.98px,
    transparent 317.98px 326.42px,
    var(--krapp) 326.42px 333.65px,
    transparent 333.65px 342.17px,
    var(--krapp) 342.17px 347.65px,
    transparent 347.65px 354.87px
  );
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text);
  font-weight: var(--text-weight, 400);
  font-stretch: var(--text-stretch, 100%);
  font-size: var(--text-size, clamp(1rem, 0.96rem + 0.2vw, 1.09rem));
  line-height: var(--text-lh, 1.65);
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

a:hover {
  text-decoration-line: underline;
}

:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
}

/* --- Gerüst --------------------------------------------------------------- */

.seite {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

/* --- Kopf ----------------------------------------------------------------- */

.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  /* Die Unterkante des Kopfs liegt wegen der Unterlängen tiefer als die
     Schrift. --kopf-korrektur rechnet das je Schriftvariante heraus, damit
     der Weissraum über der Vorstichlinie gleich gross ist wie darunter. */
  padding: calc(var(--mass) * 1.6) 0 calc(var(--luft) - var(--kopf-korrektur, 0px));
}

.wortmarke {
  font-family: var(--titel);
  font-weight: var(--titel-weight, 800);
  font-stretch: var(--titel-stretch, 100%);
  font-size: var(--wortmarke-size, clamp(1.5rem, 1rem + 2vw, 2.5rem));
  font-style: var(--wortmarke-style, normal);
  line-height: 1;
  letter-spacing: var(--wortmarke-spacing, 0);
  text-transform: var(--wortmarke-transform, uppercase);
  text-decoration: none;
  margin: 0;
}

.wortmarke a {
  text-decoration: none;
}

/* Der Schlusspunkt — in der Wortmarke wie in den Zwischentiteln. */
.punkt {
  color: var(--krapp);
}

.navigation {
  display: flex;
  gap: 1.6rem;
  line-height: 1;
  font-family: var(--titel);
  font-weight: var(--nav-weight, 600);
  font-stretch: var(--titel-stretch, 100%);
  font-size: var(--nav-size, 0.86rem);
  font-style: var(--nav-style, normal);
  letter-spacing: var(--nav-spacing, 0.06em);
  text-transform: var(--nav-transform, uppercase);
}

.navigation a {
  text-decoration: none;
}

/* Aktuelle Seite und überfahrener Link stehen beide in Krapprot. Keine
   Unterstreichung, keine Naht — die Farbe allein markiert. */
.navigation a[aria-current],
.navigation a:hover {
  color: var(--krapp);
  text-decoration: none;
}

/* --- Stichlinie -----------------------------------------------------------
   Läuft von Rand zu Rand durch die ganze Seite. */

.stich {
  border: 0;
  height: 1.5px;
  width: auto;
  margin: 0;
  background-image: var(--stich);
  background-size: var(--stich-breite) 1.5px;
  background-repeat: repeat-x;
  opacity: 1;
}

/* --- Raster ---------------------------------------------------------------
   Drei Bilder pro Zeile, jedes quer (3:2) oder hoch (2:3). Die Zeilenhöhe
   richtet sich nach der Mischung, die Zeile füllt immer die volle Breite —
   daraus entsteht das Patchwork. Die Masse rechnet js/raster.js; ohne
   JavaScript greift der Umbruch mit drei gleichen Spalten darunter. */

.raster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fuge);
  padding: var(--luft) 0;   /* gleicher Abstand zur Linie wie beim Menü */
}

.raster a {
  display: block;
  flex: 0 0 calc((100% - 2 * var(--fuge)) / 3);
  background: var(--faden);
  cursor: zoom-in;
  overflow: hidden;
}

.raster img {
  width: 100%;
  height: auto;
  transition: opacity 180ms ease;
}

/* Sobald das Skript gerechnet hat, geben a-Element und Bild das Format vor
   und der Ausschnitt wird mittig beschnitten. */
.raster.justiert a {
  flex: 0 0 auto;
}

.raster.justiert img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.raster a:hover img {
  opacity: 0.88;
}

/* --- Textseiten ----------------------------------------------------------- */

.text {
  max-width: var(--spalte);
  padding: calc(var(--mass) * 2.2) 0 calc(var(--mass) * 3);
}

.text p {
  margin: 0 0 1.4em;
}

.text .auftakt {
  font-weight: var(--auftakt-weight, 500);
  font-size: var(--auftakt-size, clamp(1.18rem, 1.05rem + 0.7vw, 1.45rem));
  line-height: 1.5;
  margin-bottom: 2.4em;
}

.text h2 {
  font-family: var(--titel);
  font-weight: var(--h2-weight, var(--titel-weight, 800));
  font-stretch: var(--titel-stretch, 100%);
  font-style: var(--h2-style, normal);
  font-size: var(--h2-size, 1.1rem);
  line-height: 1.25;
  letter-spacing: var(--h2-spacing, 0);
  text-transform: var(--h2-transform, none);
  margin: 2.8em 0 0.7em;
}

.text h2:first-child {
  margin-top: 0;
}

.text a {
  text-decoration-color: var(--tinte-hell);
}

.adresse {
  font-style: normal;
  margin-bottom: 1.4em;
}

.linkliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.linkliste li {
  margin-bottom: 1.2em;
}

.linkliste .beschrieb {
  display: block;
  color: var(--grau);
  font-size: 0.95rem;
}

/* --- Fuss ----------------------------------------------------------------- */

.fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  justify-content: space-between;
  padding: calc(var(--mass) * 1.2) 0 calc(var(--mass) * 2.5);
  font-size: 0.92rem;
  color: var(--grau);
}

.fuss a {
  color: var(--grau);
}

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 2.6rem 1rem;
  /* Unterbindet den Doppeltipp-Zoom auf dem Handy, der die Seite aufzieht
     und die Ränder wegschneidet. Zwei-Finger-Zoom bleibt möglich. */
  touch-action: manipulation;
  /* wie auf der alten Seite: Weiss, leicht durchscheinend */
  background: rgba(255, 255, 255, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
}

.lightbox[data-offen] {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 5.2rem);
  width: auto;
  object-fit: contain;
}

.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: var(--tinte);
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
}

.lightbox button:hover {
  color: var(--krapp);
}

.lb-zu { top: 0.4rem; right: 0.6rem; }
.lb-vorheriges { left: 0.2rem; top: 50%; transform: translateY(-50%); }
.lb-naechstes { right: 0.2rem; top: 50%; transform: translateY(-50%); }


@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}