/* Journal, Werkstatt und Kenala erklärt · Richtung B „Zwei Tische“ (Romans Wahl 06.10.2026).
   Doppelseite: links Sand „Werkstatt“ (Roman erzählt), rechts Papier „Kenala erklärt“, Bundsteg 96 px
   mit dem Emblem. Zwölfspalter je Tisch gedacht als 6 von 12, Skalenfaktor 1,333.
   Farben und Schriften nur aus 17_KENALA/markenrichtlinie/brand.yaml. */
@font-face{font-family:"N27";src:url(/fonts/n27-medium-sub.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Aaux Pro";src:url(/fonts/aaux-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aaux Pro";src:url(/fonts/aaux-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/Inter-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --papier:#faf9f6;--nebel:#f1efe9;--schiefer:#343a40;--nebenton:#5e5e5c;--taupe:#767263;
  --safran:#e2581d;--safran-tief:#a8441a;--sand:#e2ccbe;--linie:rgba(52,58,64,.16);
  --schrift:"Aaux Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"N27",system-ui,sans-serif;--label:"Inter",system-ui,sans-serif;
  --rand:clamp(16px,4.4vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--schiefer);font:400 17px/1.6 var(--schrift)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible{outline:2px solid var(--safran);outline-offset:3px;border-radius:2px}
.label{font:600 11.5px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase}
/* Unterzeile immer im leuchtenden Safran (Roman, 18.09.2026) */
.unterzeile{color:var(--safran);text-decoration:none}

/* Leiste */
.leiste{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px var(--rand);border-bottom:1px solid var(--linie);background:var(--papier)}
.leiste .marke{display:block;line-height:0}
.leiste .marke img{height:26px;width:auto;margin:4px}
.leiste{flex-wrap:wrap}
.leiste nav{display:flex;flex-wrap:wrap;column-gap:20px;align-items:center}
@media (max-width:899px){.leiste nav{width:100%;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linie)}.leiste nav a{padding:12px 0}}
@media (min-width:900px){.leiste nav{gap:28px}}
.leiste nav a{text-decoration:none;color:var(--nebenton);display:inline-block;padding:15px 0}
.leiste nav a[aria-current="page"]{color:var(--schiefer);box-shadow:inset 0 -2px 0 var(--safran);padding-bottom:13px;margin-top:2px}
.leiste .unterzeile{display:none}
.leiste nav a.unterzeile{color:var(--safran)}
@media (min-width:900px){.leiste .marke img{height:30px}.leiste .unterzeile{display:inline}}

/* Die zwei Tische */
.sprung{display:grid;grid-template-columns:1fr 1fr;position:sticky;top:0;z-index:2}
.sprung a{display:block;text-align:center;padding:14px 8px;text-decoration:none}
.sprung a:first-child{background:var(--sand)}
.sprung a:last-child{background:var(--papier);border-bottom:1px solid var(--linie)}
.doppel{display:grid;grid-template-columns:1fr}
.tisch{padding:48px var(--rand) 72px}
.tisch--werkstatt{background:var(--sand)}
.tisch--erklaert{background:var(--papier)}
/* Bundsteg zweifarbig ohne Verlauf: Papier mit flacher Sand-Hälfte (Farbregel „keine Verläufe“) */
.bund{display:flex;justify-content:center;background:var(--papier);box-shadow:inset 0 22px 0 var(--sand);line-height:0}
.bund img{width:44px;height:44px}
@media (min-width:900px){
  .sprung{display:none}
  .doppel{grid-template-columns:1fr 96px 1fr}
  .tisch{padding:80px clamp(32px,4.4vw,64px) 120px}
  .bund{display:block;box-shadow:inset 48px 0 0 var(--sand)}
  .bund img{position:sticky;top:42vh;margin:84px auto 0;width:56px;height:56px}
}
.rubrik{font:500 clamp(44px,6.2vw,72px)/.98 var(--display);letter-spacing:-.015em;margin:0}
.rubrik + .einleitung{margin:16px 0 0;max-width:38ch}
.tisch--werkstatt .einleitung{color:var(--schiefer)}
/* Auf Sand trägt kleine Schrift nur Schiefer (7,4:1); Safran tief und Nebenton liegen dort unter 4,5:1 (Messung 06.10.2026). */
.tisch--werkstatt .stimme,.kopfband--werkstatt .stimme,.kopfband--werkstatt .zurueck,.kopfband.kopfband--werkstatt .meta,.tisch--werkstatt .karte .meta{color:var(--schiefer)}
.tisch--erklaert .einleitung{color:var(--nebenton)}
.stimme{margin:12px 0 0;color:var(--safran-tief)}

/* Werkstatt: ein großer Eintrag, darunter Paare */
.liste{margin-top:48px;display:grid;gap:40px}
.karte{text-decoration:none;display:block}
.karte img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.karte h2,.karte h3{font:600 15px/1.35 var(--label);letter-spacing:.06em;text-transform:uppercase;margin:16px 0 0}
.karte .meta{font-size:13px;color:var(--nebenton);margin-top:3px}
.karte p{margin:10px 0 0;max-width:46ch}
.karte:hover h2,.karte:hover h3{text-decoration:underline;text-decoration-color:var(--safran-tief);text-underline-offset:.2em}
.paare{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px}
.paare h3{font-size:13px}
@media (max-width:420px){.paare{grid-template-columns:1fr}}

/* Kenala erklärt: nummerierte Fragen */
.fragen{margin-top:48px;border-top:2px solid var(--schiefer)}
.frage{display:grid;grid-template-columns:1fr;gap:16px;text-decoration:none;padding:22px 0;border-bottom:1px solid var(--linie)}
.frage-bild{width:132px;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
@media (min-width:480px){.frage{grid-template-columns:132px 1fr;gap:22px;align-items:start}}
.frage .nr{font:500 15px/1 var(--display);color:var(--safran-tief)}
.frage h2,.frage h3{font:500 clamp(24px,2.6vw,30px)/1.12 var(--display);margin:6px 0 0}
.frage p{margin:8px 0 0;color:var(--nebenton);max-width:42ch}
.frage:hover h2,.frage:hover h3{text-decoration:underline;text-decoration-color:var(--safran-tief);text-decoration-thickness:1px;text-underline-offset:.15em}
.bildzeile{margin:48px 0 0}
.bildzeile img{border-radius:2px}
.bildzeile figcaption{font-size:13px;color:var(--nebenton);margin-top:8px}

/* Artikel (Notiz, Werkstattgeschichte, Erklärstück) */
.kopfband{padding:56px var(--rand) 40px}
.kopfband--werkstatt{background:var(--sand)}
.kopfband--erklaert{background:var(--papier);border-bottom:1px solid var(--linie)}
.kopfband .innen,.artikel{max-width:700px;margin:0 auto}
.zurueck{display:inline-block;color:var(--nebenton);text-decoration:none;margin:-14px 0 14px;padding:14px 0}
.zurueck:hover{color:var(--schiefer)}
.kopfband .stimme{margin:0 0 12px}
.kopfband h1{font:500 clamp(36px,5.4vw,58px)/1.04 var(--display);letter-spacing:-.015em;margin:0}
.kopfband .lead{font:500 clamp(19px,2.2vw,23px)/1.35 var(--display);margin:20px 0 0;color:var(--schiefer)}
.kopfband--erklaert .lead{color:var(--nebenton)}
.kopfband .meta{margin-top:20px;color:var(--nebenton)}
.titelbild{padding:0 var(--rand)}
.titelbild img{width:100%;max-width:900px;margin:-1px auto 0;border-radius:2px}
.titelbild{position:relative}
.titelbild img{position:relative}
.kopfband--werkstatt + .titelbild::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:var(--sand)}
.titelbild.titelbild--hoch{max-width:700px;margin:0 auto;padding:0 var(--rand);box-sizing:content-box}
.titelbild--hoch img{max-width:420px;margin:32px 0 0}
.artikel{padding:48px var(--rand) 24px;box-sizing:content-box}
.artikel p,.artikel li{max-width:64ch}
.artikel h2{font:500 clamp(22px,2.4vw,27px)/1.2 var(--display);margin:44px 0 12px}
.artikel h3{font:600 13px/1.3 var(--label);letter-spacing:.1em;text-transform:uppercase;margin:32px 0 8px}
.artikel a{text-decoration-color:var(--safran-tief);text-decoration-thickness:1px;text-underline-offset:.2em}
.artikel a:hover{text-decoration-color:var(--safran);text-decoration-thickness:2px}
.artikel blockquote{margin:28px 0;padding-left:20px;border-left:3px solid var(--safran);font:500 21px/1.35 var(--display)}
.artikel figure{margin:36px 0}
.artikel figure img{width:100%;border-radius:2px}
.artikel figcaption{font-size:14px;color:var(--nebenton);margin-top:8px}
.artikel figcaption em{font-style:normal}
@media (min-width:1000px){.artikel .figure-large{margin-left:-80px;margin-right:-80px}}
.artikel .figure-margin{max-width:360px}
.initiale::first-letter{font:500 3.4em/.8 var(--display);float:left;margin:.08em .08em 0 0;color:var(--safran-tief)}
.zitat{font:500 clamp(22px,2.6vw,28px)/1.25 var(--display);margin:36px 0;padding:0 0 0 20px;border-left:3px solid var(--safran)}
.galerie{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:36px 0}
.galerie figure{margin:0}
.galerie figure:nth-child(even){margin-top:48px}
@media (max-width:560px){.galerie{grid-template-columns:1fr}.galerie figure:nth-child(even){margin-top:0}}
.weiter{max-width:700px;margin:24px auto 0;padding:28px var(--rand) 72px;box-sizing:content-box}
.weiter h2{margin:0 0 12px;color:var(--taupe)}
.weiter ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.weiter li{border-bottom:1px solid var(--linie)}
.weiter a{display:block;padding:12px 0;text-decoration:none;font-weight:700}
.weiter a::after{content:" →";color:var(--safran-tief)}
.ki{font-size:13px;color:var(--nebenton);margin-top:32px}

/* Startseite: Was ist Kenala */
.held{display:grid;grid-template-columns:1fr;gap:32px;padding:48px var(--rand) 56px;max-width:1440px;margin:0 auto}
.held-text .unterzeile{margin:0 0 18px}
.held h1{font:500 clamp(30px,4.2vw,52px)/1.08 var(--display);letter-spacing:-.015em;margin:0;max-width:20ch}
.held-lead{font-size:clamp(17px,1.5vw,19px);margin:22px 0 0;max-width:46ch;color:var(--schiefer)}
.held-links{display:flex;gap:28px;margin:28px 0 0}
.held-links a{display:inline-block;padding:13px 0;text-decoration:none;box-shadow:inset 0 -2px 0 var(--safran)}
.held-bild{margin:0}
.held-bild img{width:100%;border-radius:2px}
@media (min-width:900px){.held{grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:88px clamp(32px,4.4vw,64px) 96px}}
/* So funktioniert’s */
.abschnitt{font:500 clamp(28px,3.4vw,40px)/1.1 var(--display);letter-spacing:-.01em;margin:0 0 32px}
.schritte{background:var(--nebel);padding:64px var(--rand) 72px}
.schritte > *{max-width:1312px;margin-left:auto;margin-right:auto}
.schritte ol{list-style:none;padding:0;display:grid;grid-template-columns:1fr;gap:28px 24px}
@media (max-width:559px){.schritte li{display:grid;grid-template-columns:112px 1fr;column-gap:18px;align-items:start}.schritte li img{grid-row:1/4}.schritte .nr{margin-top:2px}.schritte h3{font-size:20px}.schritte li p{font-size:15px}}
@media (min-width:560px){.schritte ol{grid-template-columns:1fr 1fr;gap:40px 24px}}
@media (min-width:1000px){.schritte ol{grid-template-columns:repeat(4,1fr)}}
.schritte img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.schritte .nr{display:block;margin-top:16px;font:500 15px/1 var(--display);color:var(--safran-tief)}
.schritte h3{font:500 24px/1.15 var(--display);margin:6px 0 0}
.schritte li p{margin:8px 0 0;color:var(--nebenton);max-width:36ch}
.schritte .ausblick{margin-top:40px;color:var(--nebenton);font-size:15px}
/* Hinter Kenala und Kontakt */
.hinter{padding:72px var(--rand) 80px;border-top:1px solid var(--linie)}
.hinter-text{max-width:1312px;margin:0 auto}
@media (min-width:900px){.hinter{padding-left:clamp(32px,4.4vw,64px);padding-right:clamp(32px,4.4vw,64px)}}
.hinter-text p{max-width:60ch}
.kontakt-zeile a{color:var(--schiefer);text-decoration-color:var(--safran-tief);text-underline-offset:.2em}
.weiterlink a{display:inline-block;padding:12px 0;font-weight:700;text-decoration:none}
.weiterlink a::after{content:"\00a0→";color:var(--safran-tief)}

/* Fuß wie auf der Startseite */
.fuss{border-top:1px solid var(--linie);padding:24px var(--rand) 40px;color:var(--nebenton);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center}
.fuss p{margin:0}
.fuss nav{display:flex;gap:20px}
.fuss nav a{display:inline-block;padding:11px 0}
.fuss a{color:var(--nebenton)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Werkstatt-Bilder (06.10.2026, Romans Wunsch): Ihre Illustrationen stehen auf einem etwas dunkleren Sand #d4c0b3
   (Sand #e2ccbe um 6 % abgedunkelt, abgeleiteter Ton nach Romans ausdrücklicher Vorgabe), damit sie sich ohne Rahmen
   von der Sandfläche der Werkstatt-Spalte und des Kopfbands abheben. Die Haarlinie entfällt. */

/* Kenala erklärt: Bild und Nachfrage unter den Fragen (06.10.2026), füllen die Spalte neben der längeren Werkstatt */
.bildzeile.mitte{margin-top:56px}
.nachfrage{margin-top:48px;padding:28px 0 0;border-top:2px solid var(--schiefer)}
.nachfrage .stimme{margin:0 0 10px}
.nachfrage p{margin:0;max-width:42ch}
.nachfrage .weiterlink{margin-top:8px}

/* Kontaktseite (06.10.2026), Aufbau wie roman-thomas.de/kontakt: Text und Karte links, Bild rechts */
.kontakt{display:grid;grid-template-columns:1fr;gap:40px;padding:56px var(--rand) 80px;max-width:1440px;margin:0 auto}
.kontakt h1{font:500 clamp(44px,6.2vw,72px)/.98 var(--display);letter-spacing:-.015em;margin:12px 0 0}
.kontakt .stimme{margin:0}
.kontakt .lead{font:500 clamp(19px,2.2vw,23px)/1.35 var(--display);margin:24px 0 0;max-width:30ch}
.kontakt-text > p{max-width:52ch}
.kontakt-karte{margin:36px 0 0;border-top:2px solid var(--schiefer)}
.kontakt-karte div{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--linie)}
@media (min-width:560px){.kontakt-karte div{grid-template-columns:120px 1fr;align-items:baseline}}
.kontakt-karte dt{color:var(--nebenton)}
.kontakt-karte dd{margin:0;font:500 clamp(19px,2vw,22px)/1.35 var(--display)}
.kontakt-karte a{text-decoration-color:var(--safran-tief);text-decoration-thickness:1px;text-underline-offset:.2em;display:inline-block;padding:4px 0}
.kontakt-karte a:hover{text-decoration-color:var(--safran);text-decoration-thickness:2px}
.kontakt .weiterlink{margin-top:24px}
.kontakt-bild{margin:0}
.kontakt-bild img{width:100%;max-width:560px;border-radius:2px}
@media (min-width:900px){.kontakt{grid-template-columns:7fr 5fr;gap:64px;align-items:start;padding:88px clamp(32px,4.4vw,64px) 120px}}

/* Rechtsseiten (06.10.2026), Aufbau wie roman-thomas.de: nummerierte Abschnitte, links Marke, rechts Inhalt */
.recht-seite{max-width:1100px;margin:0 auto;padding:56px var(--rand) 96px}
.recht-kopf{padding-bottom:40px;border-bottom:2px solid var(--schiefer)}
.recht-kopf .stimme{margin:0}
.recht-kopf h1{font:500 clamp(44px,6.2vw,72px)/.98 var(--display);letter-spacing:-.015em;margin:12px 0 0}
.recht-kopf .lead{font:500 clamp(18px,2vw,21px)/1.4 var(--display);color:var(--nebenton);margin:20px 0 0;max-width:48ch}
.recht-abschnitt{display:grid;grid-template-columns:1fr;gap:12px;padding:32px 0;border-bottom:1px solid var(--linie)}
@media (min-width:760px){.recht-abschnitt{grid-template-columns:280px 1fr;gap:48px}}
.recht-marke .nr{font:500 15px/1 var(--display);color:var(--safran-tief)}
.recht-marke h2{font:500 clamp(22px,2.4vw,27px)/1.2 var(--display);margin:6px 0 0}
.recht-marke .unter{margin:6px 0 0;color:var(--nebenton);font-size:15px}
.recht-inhalt p{margin:0 0 12px;max-width:64ch}
.recht-inhalt p:last-child{margin-bottom:0}
.recht-inhalt .angabe{display:grid;grid-template-columns:1fr;gap:2px;margin:0 0 14px}
@media (min-width:560px){.recht-inhalt .angabe{grid-template-columns:150px 1fr;gap:16px;align-items:baseline}}
.recht-inhalt .angabe .label{color:var(--nebenton)}
.recht-inhalt .angabe p{margin:0}
.recht-inhalt a{text-decoration-color:var(--safran-tief);text-decoration-thickness:1px;text-underline-offset:.2em}