/* PT Serif wie auf der bestehenden Seite. Im Entwurf noch als System-Serife;
     vor dem Livegang wird die Schrift lokal eingebunden (kein Google-Server). */
  :root {
    --tinte: #333333;
    --grau: #6f6f6f;      /* dunkler als im Original: 5,3:1 statt 3,1:1 */
    --linie: #e5e5e5;
    --papier: #ffffff;

    /* Namen, die assets/bf.css erwartet - hier auf die helle Gestaltung
       ihrer Seite uebersetzt, damit das Panel dazu passt. */
    --text: var(--tinte);
    --muted: var(--grau);
    --surface: #ffffff;
    --surface-2: #f7f7f7;
    --bg-2: #fafafa;
    --line: var(--linie);
    --line-strong: #c9c9c9;
    --accent: #7a5a24;
    --accent-soft: #f3efe7;
    --gold: #7a5a24;
  }

  /* bf.css ist fuer die dunkle Innklusiv-Seite geschrieben: Dort setzt hoher
     Kontrast die Schrift auf Weiss. Auf hellem Grund waere das unlesbar -
     deshalb hier eigene Werte. */
  html[data-kontrast="hoch"] {
    --text: #000000;
    --muted: #2b2b2b;
    --line: rgba(0,0,0,0.34);
    --line-strong: rgba(0,0,0,0.52);
    --accent: #5a4218;
  }
  html[data-farbe="warm"] { --text: #3A2B18; --muted: #6B5740; }
  html[data-farbe="gelb"] { --text: #4A3200; --muted: #7A5A16; }
  html[data-farbe="hoch"] { --text: #000000; --muted: #23303F; }

  /* Die Schatten in bf.css sind fuer dunklen Grund gerechnet (bis 60 % Schwarz).
     Auf weissem Grund wirken sie wie ein grauer Fleck - hier abgeschaltet und
     durch einen feinen Rahmen ersetzt (Wunsch 17.09.2026). */
  .bf-knopf { box-shadow: none; border: 1px solid var(--line-strong); }
  .bf-panel { box-shadow: none; border: 1px solid var(--line-strong); }

  /* Sprungmarke fuer Tastatur und Screenreader - sichtbar, sobald sie den
     Fokus bekommt. */
  .sprung {
    position: absolute; left: -9999px; top: 0; z-index: 20;
    background: var(--tinte); color: #fff; padding: 12px 18px; text-decoration: none;
  }
  .sprung:focus { left: 0; }

  /* Sichtbarer Fokusrahmen - ohne ihn ist die Seite mit der Tastatur
     praktisch nicht bedienbar. */
  a:focus-visible, button:focus-visible, video:focus-visible {
    outline: 3px solid var(--accent); outline-offset: 3px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: var(--papier); color: var(--text);
    font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
    /* In rem, nicht in px: Die Schriftgroessen-Einstellung wirkt ueber
       html { font-size: 112.5% }. Eine feste Pixelangabe am body haette
       das ueberschrieben - dann bleibt der Fliesstext gleich gross,
       waehrend die Ueberschriften mitwachsen. 1.0625rem = 17px. */
    font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased;
  }
  /* height:auto ist hier nicht schmueckendes Beiwerk: Ohne diese Angabe
     behaelt ein Bild die feste Hoehe aus seinem HTML-Attribut, waehrend die
     Breite mitwaechst - am Handy wird es dadurch in die Laenge gezogen.
     Gefunden am 05.10.2026 auf den Unterseiten. */
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; }

  .wrap { max-width: 1060px; margin: 0 auto; padding: 0 18px; }

  /* ---------- Kopf ---------- */
  header { padding: 26px 0 0; text-align: center; }
  header .marke {
    font-weight: 400; font-size: clamp(1.9rem, 6vw, 2.9rem);
    letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.15;
  }
  header p.unter { font-size: clamp(1.25rem, 4vw, 1.7rem); margin-top: 2px; letter-spacing: 0.02em; }

  nav { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin-top: 22px; }
  .nav-in { display: flex; align-items: center; justify-content: center; gap: 34px; min-height: 52px; }
  nav a {
    text-decoration: none; color: var(--tinte); font-size: 1.02rem;
    padding: 12px 0; border-bottom: 2px solid transparent;
  }
  nav a:hover, nav a[aria-current="page"] { border-bottom-color: var(--grau); }
  .burger {
    display: none; margin: 10px auto; background: #fff; border: 1px solid var(--linie);
    border-radius: 4px; padding: 8px 12px; cursor: pointer;
  }
  .burger span { display: block; width: 22px; height: 2px; background: var(--grau); margin: 4px 0; }

  /* Abstand oben so gross wie der Abstand zwischen Hinweis und Kacheln (26 px),
     Wunsch vom 17.09.2026. Die Klasse muss mit: main traegt auch .wrap, und
     deren padding-Kurzschreibweise (0 18px) haette den Wert oben sonst
     ueberschrieben - genau deshalb lag der Hinweis vorher direkt an der Leiste. */
  main.wrap { padding: 26px 18px 10px; }

  /* ---------- Kacheln ---------- */
  /* Anordnung wie in Variante 2: alle Kacheln untereinander, alle gleich gross. */
  .kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
  .kachel { grid-column: span 1; border: 1px solid var(--linie); background: #fff; }
  .kachel.breit { grid-column: 1 / -1; }
  .kachel a { display: block; text-decoration: none; }
  .kachel .bild { overflow: hidden; background: #f4f4f4; }
  .kachel.breit .bild { aspect-ratio: 1680 / 525; }
  .kachel .bild { aspect-ratio: 840 / 525; }
  .kachel img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .35s ease, transform .35s ease; }
  .kachel a:hover img, .kachel a:focus-visible img { filter: grayscale(0); transform: scale(1.02); }
  .kachel .fuss {
    border-top: 1px solid var(--line); text-align: center; color: var(--muted);
    padding: 14px 10px; font-size: 1.25rem;
  }
  /* Etikett-Symbol wie auf der bisherigen Seite (dort ein Icon-Font).
     Hier als Zeichnung im Text, damit keine fremde Schrift noetig ist. */
  .kachel .fuss svg { width: 15px; height: 15px; vertical-align: -1px; margin-right: 8px; opacity: .75; }

  .hinweis {
    border: 1px solid var(--linie); padding: 20px 22px; margin: 0 0 26px;
    text-align: center; color: var(--tinte);
  }
  /* Zweiter Satz in eigener Zeile, mit etwas Abstand (Wunsch 17.09.2026) */
  .hinweis p + p { margin-top: 10px; }
  .hinweis b { font-weight: 700; }

  /* ---------- Unterseiten ---------- */
  .seite { display: none; }
  .seite.aktiv { display: block; }
  .seite h1, .seite h2 { font-weight: 400; font-size: clamp(1.6rem, 4.6vw, 2.2rem); margin-bottom: 18px; }
  .seite h3 { font-weight: 400; font-size: 1.25rem; margin: 22px 0 8px; }
  .seite p { margin-bottom: 14px; }
  .seite .foto { margin: 0 0 22px; }
  .seite p { color: var(--text); }
  .seite .foto img { width: 100%; height: auto; }
  /* Schalter fuer die Dauerschleife unter dem Film */
  .schleife { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: -8px 0 22px; }
  .schleife label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
  .schleife input { width: 1.05em; height: 1.05em; accent-color: var(--accent); }
  .hinweis-klein { font-size: 0.86rem; color: var(--muted); }
  /* "Das Geschaeft": Bilderreihen wie auf der alten Seite */
  /* --grau statt eines helleren Tons: #8a8a8a kam auf Weiss nur auf 3,5:1,
     die Norm verlangt 4,5:1. var(--grau) liegt bei 5,3:1. */
  .reihe { display: grid; gap: 22px; margin: 0 0 22px; }
  .reihe.zwei { grid-template-columns: 1fr 1fr; }
  .reihe.drei { grid-template-columns: 1fr 1fr 1fr; }
  .reihe figure { margin: 0; }
  .reihe img { width: 100%; height: auto; display: block; }
  .zurueck {
    display: inline-block; margin-top: 10px; color: var(--grau);
    text-decoration: none; border-bottom: 1px solid var(--linie); padding-bottom: 2px;
  }
  .zurueck:hover { color: var(--tinte); }
  .platzhalter {
    border: 1px dashed #c9c9c9; background: #fafafa; color: var(--grau);
    padding: 48px 20px; text-align: center; margin-bottom: 20px;
  }
  .kontakt-block p { margin-bottom: 6px; }
  .urheber { margin-top: 26px; font-size: 0.86rem; color: var(--muted); }
  .urheber p { margin: 0; color: inherit; }

  /* Videos der Manufakturen. Auf der bisherigen Seite liegen sie unverkleinert
     auf dem Server (bis 281 MB je Film) - hier verkleinert und erst auf Klick
     geladen (preload="none"), damit am Handy nichts unnoetig zieht. */
  .film { margin: 8px 0 22px; }
  .film video { width: 100%; height: auto; background: #000; display: block; }
  .film figcaption { color: var(--grau); font-size: 0.95rem; margin-top: 8px; }

  /* ---------- Fuss ---------- */
  footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 22px 0 40px; text-align: center; color: var(--muted); font-size: 0.95rem; }
  footer a { color: var(--muted); }

  /* ---------- Handy ---------- */
  @media (max-width: 800px) {
    .kacheln { grid-template-columns: 1fr; gap: 20px; }
    .kachel.breit .bild, .kachel .bild { aspect-ratio: 840 / 525; }
    .reihe.zwei, .reihe.drei { grid-template-columns: 1fr; }
    .burger { display: block; }
    .nav-in { display: none; flex-direction: column; gap: 0; padding-bottom: 8px; }
    .nav-in.offen { display: flex; }
    nav a { width: 100%; text-align: center; padding: 14px 0; border-bottom: 1px solid var(--linie); }
    nav a:last-child { border-bottom: 0; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

  /* ---------- Anpassung der Barrierefreiheits-Einstellungen ----------
     assets/bf.css stammt von innklusiv.at, und das ist eine DUNKLE Seite.
     Ohne Kennzeichnung nimmt die Datei an, der Untergrund sei dunkel, und
     setzt bei "hoher Kontrast" weisse Schrift - auf dieser weissen Seite
     verschwindet der Text dann. Mit data-thema="hell" am <html> greifen die
     hellen Fassungen. Was hier steht, korrigiert den Rest. */

  /* Hoher Kontrast heisst hier: schwarz auf weiss, ohne Ausnahme.
     bf.css faerbt Absaetze sonst gedaempft - das ist das Gegenteil davon. */
  html[data-kontrast="hoch"] .seite p,
  html[data-kontrast="hoch"] .seite li,
  html[data-kontrast="hoch"] p { color: var(--text); }
  html[data-kontrast="hoch"] .urheber { color: var(--text); }
  html[data-kontrast="hoch"] .kachel .fuss,
  html[data-kontrast="hoch"] nav a,
  html[data-kontrast="hoch"] footer,
  html[data-kontrast="hoch"] footer p { color: var(--text); }

  /* Der Knopf und das Panel hatten den Schlagschatten einer dunklen Seite -
     auf Weiss wirkt das wie ein Fleck. Stattdessen eine klare Linie. */
  .bf-knopf { box-shadow: none; border-color: var(--line-strong); background: var(--papier); }
  .bf-panel { box-shadow: none; border: 1px solid var(--line-strong); }

  /* "Links unterstreichen" blieb ohne Wirkung: bf.css erfasst nur Verweise in
     main und footer, und die sind hier ohnehin unterstrichen. Sichtbar wird die
     Einstellung erst, wenn auch die Navigation und die Kacheln mitmachen. */
  html[data-links="unterstrichen"] nav a,
  html[data-links="unterstrichen"] .kachel a .fuss,
  html[data-links="unterstrichen"] .zurueck { text-decoration: underline; text-underline-offset: 3px; }

  /* Aus dem Entwurf uebernommen: .seite war dort ein- und ausblendbar.
     Hier ist jede Seite eine eigene Datei, also immer sichtbar. */
  .seite { display: block; }
  .seite h2 { font-weight: 400; }