/* blbubiger.com – Gestaltung. Unverändert aus der Claude-Vorlage übernommen (Stand 6.11.2026).
   Ergänzt sind nur: lokale Schrift (@font-face), .lang a (Sprachlinks statt Knöpfe) und
   Regeln für neue, optionale Inhalte am Ende der Datei. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-400.woff") format("woff"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-500.woff") format("woff"); }
/* Layout: Menü oben, Inhalt links, Seitenleiste rechts mit Linie; auf dem Handy untereinander. Eine helle Fassung, bewusst ohne dunkles Theme. */
:root {
  --bg: #faf8f4; --page: #f2eee8; --box: #fefdfb; --boxline: #e6e0d6; --fg: #33393c; --accent: #3f5e55; --muted: #3d4346; --faint: #4a5054; --sage: #7d9273;
  --line: #c4c7c3; --soft: #e2e3df; --focus: #4f6b60;
  --ui: "Jost", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { background: var(--page); color: var(--fg); font-family: var(--ui); font-size: 16px; line-height: 1.6;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 24px; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site { background: var(--bg); max-width: 1480px; margin: 0 auto; border: 1px solid var(--boxline); border-radius: 10px; overflow: hidden; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 22px 28px 16px; border-bottom: 1px solid var(--line); }
nav.top { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 18px; }
nav.top a[aria-current="page"], .side a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.lang { display: flex; gap: 6px; color: var(--muted); font-size: 14px; }
.lang button { background: none; border: 0; padding: 2px 4px; font: inherit; color: var(--muted); cursor: pointer; }
.lang button[aria-pressed="true"] { color: var(--fg); font-weight: 500; }
.body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; }
main { padding: 26px 28px 32px 28px; min-width: 0; }
aside.side { border-left: 1px solid var(--line); padding: 30px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.side .main-links, .side .meta-links { display: flex; flex-direction: column; gap: 14px; font-size: 17px; }
.side-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: -6px; }
.side .meta-links { gap: 8px; font-size: 14px; color: var(--muted); }
.side .meta-links .contact { font-size: 17px; color: var(--fg); margin-bottom: 4px; }
.hero { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; max-height: 70vh; background: #9aa6a0; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.logo { position: absolute; left: 3%; bottom: 4%; width: 13.5%; max-width: 122px; min-width: 74px; aspect-ratio: 1; border-radius: 50%; background: #fff; display: block; }
.logo svg { width: 100%; height: 100%; display: block; }
.sound { position: absolute; right: 3%; bottom: 6%; width: 46px; height: 46px; border-radius: 50%; background: #c2cdbb; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--fg); padding: 0; }
.hero-credit { font-size: 12px; color: var(--muted); text-align: right; margin: 6px 2px 0; }
.hero-credit a, .pw-by a { color: inherit; text-decoration: none; }
.hero-credit a:hover, .pw-by a:hover { color: var(--sage); }
.sound:hover { background: #b4c1ac; }
.sound[aria-pressed="true"] { background: #b4c1ac; }
.sound svg { width: 22px; height: 22px; }
.sound .on { display: none; }
.sound[aria-pressed="true"] .on { display: inline; }
.sound[aria-pressed="true"] .off { display: none; }
h1 { font-size: 30px; font-weight: 500; line-height: 1.2; margin: 0 0 18px; text-wrap: balance; }
h2 { font-size: 20px; font-weight: 500; margin: 0 0 12px; }
.latest { margin-top: 30px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile { border: 1px solid var(--boxline); background: var(--box); border-radius: 8px; padding: 12px 14px; display: block; min-height: 70px; }
.tile:hover { border-color: var(--line); text-decoration: none; }
.tile small { display: block; font-size: 13px; color: var(--faint); }
.news { display: flex; gap: 10px; margin-top: 18px; }
.news input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--boxline); border-radius: 8px; padding: 0 14px; font: inherit; font-size: 15px; color: var(--fg); background: var(--box); }
.news button, .btn { height: 44px; border: 1px solid var(--boxline); border-radius: 8px; padding: 0 18px; background: var(--box); font: inherit; font-size: 15px; color: var(--fg); cursor: pointer; }
.note { font-size: 14px; color: var(--muted); margin-top: 8px; min-height: 1.4em; }
.prose { max-width: 62ch; }
.prose p { margin: 0 0 14px; }
.ph { color: var(--muted); font-style: italic; }
.legal h2 { font-size: 1.02rem; margin: 26px 0 8px; }
.fill { background: #e8ede4; padding: 0 4px; border-radius: 3px; }
.books { display: grid; gap: 18px; }
.book { border-top: 1px solid var(--soft); padding-top: 16px; }
.book .status { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.book.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.book.split .themes-label { margin-top: 6px; }
.book-themes { align-self: end; }
.teaser { margin: 0 0 14px; max-width: 62ch; }
.rec-cat { margin: 52px 0 6px; padding-top: 22px; border-top: 1px solid var(--soft); max-width: 62ch; }
.rec-group { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 30px 0 10px; max-width: 62ch; }
.rec-cat + .rec-group { margin-top: 14px; }
.rec-cat + .rec { margin-top: 14px; }
.pw-by { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:34px 0 12px; }
.pw-stack { position:relative; max-width:880px; aspect-ratio:var(--ar); }
.pw-stack button { position:absolute; top:0; padding:0; border:0; background:none; cursor:zoom-in; display:block; }
.pw-stack img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; outline:3px solid var(--bg, #f7f5f0); box-shadow:2px 0 10px rgba(0,0,0,.28); }
.pw-stack button:hover img { filter:brightness(1.06); }
.pw-stack button.pw-open { transition:left .35s ease; }
.pw-stack .pw-arr { position:absolute; top:50%; transform:translateY(-50%); z-index:50; width:44px; height:44px; border-radius:50%; border:0; background:rgba(250,248,244,.88); color:#33393c; font-size:28px; line-height:44px; padding:0; cursor:pointer; box-shadow:0 1px 6px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; }
.pw-stack .pw-arr:hover { background:#fff; }
.pw-stack .pw-l { left:10px; } .pw-stack .pw-r { right:10px; }
.pw-count { font-size:13px; color:var(--muted); margin-top:8px; max-width:880px; text-align:center; }
.pw-box { position:fixed; inset:0; background:rgba(20,20,18,.94); display:flex; align-items:center; justify-content:center; z-index:99; padding:16px 56px; }
.pw-box img { max-width:100%; max-height:100%; object-fit:contain; }
.pw-box button { position:absolute; background:none; border:0; color:#eee; font-size:34px; line-height:1; cursor:pointer; padding:10px; }
.pw-box .pw-prev { left:6px; top:50%; transform:translateY(-50%); }
.pw-box .pw-next { right:6px; top:50%; transform:translateY(-50%); }
.pw-box .pw-x { right:8px; top:8px; font-size:28px; }
.pw-box .pw-wm { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:80%; text-align:center; color:rgba(255,255,255,.78); font-size:clamp(20px, 3.6vw, 46px); font-weight:500; letter-spacing:.02em; text-decoration:none; text-shadow:0 2px 10px rgba(0,0,0,.55); z-index:2; word-break:break-word; user-select:none; -webkit-user-select:none; }
.pw-box .pw-wm:hover { color:#fff; }
.pw-box .pw-n { position:absolute; bottom:12px; left:0; right:0; text-align:center; color:#bbb; font-size:13px; }
.rec { max-width: 62ch; margin: 0 0 16px; }
.rec-t { font-size: 17px; }
.rec .status { font-size: 14px; color: var(--muted); margin: 2px 0 4px; }
.rec p { margin: 0; }
.title-link, .title-link:visited { color: inherit; text-decoration: none; }
.title-link:hover, .title-link:active { color: var(--sage); }
.book-themes .chips { flex-direction: column; align-items: flex-start; margin: 0 0 14px; }
@media (max-width: 720px) { .book.split { grid-template-columns: minmax(0, 1fr); gap: 0; } .book.split .themes-label { margin-top: 18px; } }
.book .blurb p { margin: 0 0 12px; }
.themes-label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 18px; }
.book { padding-bottom: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip { font-size: 13px; letter-spacing: .02em; border: 1px solid var(--soft); border-radius: 999px; padding: 3px 12px; color: var(--muted); }
a.chip:hover, a.chip:active, .chip.on { color: var(--sage); border-color: var(--sage); text-decoration: none; }
.chip.tab, a.chip.tab:link, a.chip.tab:visited, a.chip.tab:focus { background: #c2cdbb; border-color: #c2cdbb; color: #33393c; -webkit-tap-highlight-color: transparent; }
a.chip.tab:hover, a.chip.tab:active { background: #b4c1ac; border-color: #b4c1ac; color: #33393c; }
a.chip.tab.on, a.chip.tab.on:link, a.chip.tab.on:visited, a.chip.tab.on:focus, a.chip.tab.on:hover { background: #e8eee4; border-color: #9fb197; color: #33393c; }
.back { font-size: 14px; margin: 0 0 6px; }
.back a { color: var(--muted); }
button.chip { background: none; font-family: inherit; line-height: inherit; cursor: pointer; }
button.chip:hover, button.chip:active { color: var(--sage); border-color: var(--sage); }
.grid-ph { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 18px; }
.grid-ph div { aspect-ratio: 4 / 3; background: var(--page); border-radius: 6px; }
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 18px; }
.mail a.btn { display: inline-flex; align-items: center; text-decoration: none; color: inherit; line-height: 1; }
.mail .btn, .mail a.btn:link, .mail a.btn:visited { background: #c2cdbb; border-color: #c2cdbb; color: #33393c; }
.mail .btn:hover, .mail a.btn:hover, .mail .btn:active { background: #b4c1ac; border-color: #b4c1ac; color: #33393c; text-decoration: none; }
.mail-block { margin: 0 0 22px; }
.mail-label { font-size: 15px; font-weight: 500; margin: 0 0 8px; color: var(--muted); }
.mail code { font-family: var(--ui); user-select: all; }
.theme-groups { display: grid; grid-template-columns: repeat(3, max-content); gap: 8px 40px; margin: 22px 0 0; }
.theme-group { flex-direction: column; align-items: flex-start; margin: 0; }
@media (max-width: 760px) {
  .theme-groups { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  header { padding: 16px 16px 14px; }
  nav.top { font-size: 16px; gap: 6px 18px; }
  .body { grid-template-columns: minmax(0, 1fr); }
  main { padding: 18px 16px; }
  aside.side { border-left: 0; border-top: 1px solid var(--line); padding: 18px 16px; }
  .side .main-links { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; font-size: 16px; }
.side .side-label { flex-basis: 100%; margin-top: 14px !important; margin-bottom: 0; }
  .side .meta-links { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .hero { aspect-ratio: 4 / 3; }
  .logo { width: 18%; min-width: 0; left: 6%; bottom: 10%; }
  .hero img { position: absolute; top: 0; left: 0; width: 122%; height: auto; }
  h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: no-preference) { main { animation: fade .25s ease-out; } }
@keyframes fade { from { opacity: .4; } to { opacity: 1; } }
a:hover, a:active, nav.top a[aria-current="page"], .side a[aria-current="page"] { color: var(--sage); text-decoration-color: var(--sage); }
.tile:hover small, .tile:active small { color: var(--sage); }
.news button { background: #c2cdbb; border-color: #c2cdbb; color: #33393c; }
.news button:hover { background: #b4c1ac; border-color: #b4c1ac; }

/* Sprachumschalter: Links statt Knöpfe, gleiche Gestaltung wie .lang button */
.lang a { background: none; border: 0; padding: 2px 4px; font: inherit; color: var(--muted); cursor: pointer; text-decoration: none; }
.lang a[aria-pressed="true"] { color: var(--fg); font-weight: 500; }
.lang a:hover, .lang a:active { color: var(--muted); text-decoration: none; }
.lang a[aria-pressed="true"]:hover, .lang a[aria-pressed="true"]:active { color: var(--fg); }
/* Optionale Inhalte (erscheinen nur, wenn im Panel ausgefüllt) */
.book-facts { margin-top: 22px; }
.book-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; max-width: 880px; }
.book-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.book-cover { max-width: 220px; margin: 18px 0; }
.book-cover img { width: 100%; display: block; border-radius: 4px; }
.post-body figure { margin: 18px 0; }
.post-body figure img { max-width: 100%; display: block; border-radius: 6px; }
.post-body figcaption { font-size: 14px; color: var(--muted); margin-top: 6px; }
.post-body h2 { margin: 26px 0 12px; }
.post-body blockquote { margin: 0 0 14px; padding-left: 16px; border-left: 2px solid var(--soft); }
.archive { margin-top: 34px; }
@media (max-width: 760px) { .book-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pw-contact a { text-decoration: underline; text-underline-offset: 3px; }

/* Bilder: Speichern erschweren */
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }