:root {
  color-scheme: light;
  font-family: 'Montserrat', sans-serif;

  --bg: #fff8f65a;
  --surface: #ffffff;

  --text: #161515;
  --muted: #58504c;

  --border: #e7e2dd;

  --accent: #ff3164;
  --accent-dark: #ec003b;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background: var(--bg);
  color: var(--text);

  line-height: 1.75;
}

a {
  color: inherit;
  text-decoration: none;
}

/* HEADER */

.site-header {
  position: sticky;
  top: 0;

  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  padding: 1rem 2rem;

  background: #ffffff;

  backdrop-filter: blur(12px);

  border-bottom: 1px solid #ff89a6;
}

.header-image {
  width: 100%;
  height: auto;
  display: block;

  /* Auf sehr breiten/grossen Bildschirmen wuerde das Banner sonst extrem
     hoch werden und den halben Bildschirm fuellen. Deshalb die Hoehe auf
     einen Anteil der Bildschirmhoehe begrenzen. Diese Grenze greift NUR,
     wenn das Bild sonst hoeher waere - auf schmalen Bildschirmen bleibt
     alles wie bisher.
     ZAHL ZUM EINSTELLEN: 55vh = hoechstens 55 % der Bildschirmhoehe.
     Kleiner = flacherer Header (z. B. 45vh), groesser = hoeher (z. B. 65vh). */
  max-height: 55vh;

  /* Fuellt den begrenzten Bereich voll aus und schneidet oben/unten leicht
     ab, statt das Bild zu verzerren. */
  object-fit: cover;
  object-position: center;
}

.brand {
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  font-size: 1.2rem;

  color: var(--accent);
}

/* NAVIGATION */

.site-nav {
  display: flex;
  align-items: center;

  gap: 1rem;

  margin-left: auto;

  flex-wrap: wrap;
}

.site-nav a,
.site-nav summary {
  color: var(--text);

  font-size: 1.2rem;
  font-weight: 600;

  letter-spacing: 0.08em;

  cursor: pointer;
}

.site-nav details {
  position: relative;
}

.site-nav summary {
  list-style: none;
  outline: none;
}

.site-nav summary::-webkit-details-marker {
  display: none;
}

.site-nav details ul {
  position: absolute;

  top: calc(100% + 0.5rem);
  left: 0;

  margin: 0;
  padding: 1rem;

  min-width: max-content;
  white-space: nowrap;

  list-style: none;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 4px;

  box-shadow: 0 18px 40px rgba(255, 255, 255, 0.6);

  display: none;

  z-index: 20;
}

.site-nav details[open] ul {
  display: block;
}

.site-nav details ul li {
  margin: 0;
}

.site-nav details ul li a {
  display: block;

  padding: 0.45rem 0;

  color: var(--text);
}

.site-nav a:hover,
.site-nav summary:hover,
.site-nav details ul li a:hover {
  color: var(--accent-dark);
}

/* LAYOUT */

.page-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(260px, 0.7fr);

  gap: 2rem;

  max-width: 1440px;

  margin: 0 auto;
  padding: 2rem;
}

.page-layout > :only-child {
  grid-column: 1 / -1;
}

.page-layout a {
  color: var(--accent);
}

.page-layout a:hover {
  color: var(--text);
}





/* CONTENT */

.content {
  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 12px;

  padding: 2.5rem;
}

.content h1 {
  margin-top: 0;

  font-size: clamp(2.4rem, 4vw, 3.4rem);

  line-height: 1.05;
}

.content h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: clamp(1.4rem, 3vw, 2.4rem);

  line-height: 1.05;
}

.content p {
  color: var(--text);
}

.content a:hover {
  color: var(--accent-dark);

  font-weight: 900;
}




/* HOMEPAGE UPDATES */

.homepage-updates {
  margin-top: 3rem;
  max-height: 600px;
  overflow-y: auto;
}

.update-item {
  padding: 1.5rem 0;

  border-bottom: 1px solid var(--border);
}

.update-item:last-child {
  border-bottom: none;
}

.update-date {
  color: var(--muted);

  font-size: 0.9rem;
  font-weight: 600;
}

.update-title {
  margin-top: 0.25rem;

  font-size: 1.15rem;
  font-weight: 700;
}

.update-text {
  margin-top: 0.5rem;
  white-space: pre-line;
}

.update-artworks {
  display: flex;
  flex-wrap: wrap;

  gap: 0.75rem;

  margin-top: 1rem;
}

.update-artworks a {
  display: block;
}

.update-thumb {
  display: block;

  width: 100px;
  height: auto;

  border-radius: 6px;

  transition: transform 150ms ease;
}

.update-thumb:hover {
  transform: scale(1.03);
}



/* HOMEPAGE COLUMNS */

.homepage-columns {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.homepage-columns .homepage-updates {
  flex: 3;
}

.homepage-columns .patreon-promo {
  flex: 2;
  min-width: 400px;
}



/* PATREON PROMO INDEX */


.patreon-promo {
  margin-top: 3rem;

  text-align: center;
}

.patreon-banner {
  width: 100%;

  max-width: 1000px;

  border-radius: 12px;

  margin: 1rem 0;
}

.patreon-promo ul {
  display: inline-block;

  text-align: left;

  margin: 1rem auto 2rem;
}

.patreon-button {
  display: inline-block;

  padding: 1rem 2rem;

  background: var(--accent);

  color: white !important;

  border-radius: 8px;

  font-weight: 700;
}

.patreon-button:hover {
  background: var(--accent-dark);

  color: white !important;
}






/* LANDING PAGE */

.start h1 {
  margin: 0;

  font-size: clamp(3rem, 5vw, 5.5rem);

  line-height: 0.95;
}

.highlight {
  font-style: normal;
  font-weight: 800;

  color: var(--accent);
}

/* GALLERY */

.gallery-grid {
  display: grid;

  gap: 1.5rem;

  grid-template-columns:
    repeat(auto-fit, minmax(240px, 1fr));

  margin-top: 2rem;
}

.gallery-grid figure {
  margin: 0;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 4px;

  overflow: hidden;

  cursor: pointer;

  position: relative;
}

.gallery-grid figure img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: cover;

  aspect-ratio: 1;

  transition:
    transform 200ms ease,
    filter 200ms ease;
}

.gallery-grid::after { /* empty filler at end of gallery */
  content: "";

  visibility: hidden;
}

.gallery-filler {
  visibility: hidden;
  pointer-events: none;
}

/* Per-gallery override */

.gallery-grid[data-thumb-ratio="6 / 10"] figure {
  border-radius: 28px;
}

.gallery-grid[data-thumb-ratio="6 / 10"] figure img {
  aspect-ratio: 6 / 10;
}

.gallery-grid figure::before {
  content: '';

  position: absolute;

  inset: 0;

  opacity: 0;

  transition: opacity 200ms ease;

  z-index: 2;

  background: rgba(255, 255, 255, 0.82);
}

.gallery-grid figure figcaption {
  position: absolute;

  /* Fuellt die ganze Kachel und zentriert den Titel darin. So hat der Text
     die volle Breite zum Umbrechen, und alles, was trotzdem nicht passt,
     wird abgeschnitten statt ueber die Kachel hinauszuragen. Das automatische
     Verkleinern langer Titel erledigt fitTitle() in gallery-loader.js. */
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  overflow: hidden;

  color: var(--text);

  font-size: 1.25rem;
  font-weight: 1000;

  text-align: center;

  padding: 1rem;

  z-index: 3;

  opacity: 0;

  transition: opacity 200ms ease;
}

.gallery-grid figure:hover img {
  transform: scale(1.05);
}

.gallery-grid figure:hover::before {
  opacity: 1;
}

.gallery-grid figure:hover figcaption {
  opacity: 1;
}

/* BADGES */

.nsfw-badge {
  position: absolute;

  top: 9px;
  right: 9px;

  background: #ff0040;
  color: white;

  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;

  padding: 0.38rem 0.56rem 0.34rem;

  border-radius: 7px;

  z-index: 4;

  pointer-events: none;
}

.multi-badge {
  position: absolute;

  top: 9px;
  left: 9px;

  display: flex;
  align-items: center;
  gap: 0.18rem;

  padding: 0.38rem 0.56rem 0.34rem;

  border-radius: 7px;

  background-color: #1f2937;

  color: white;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;

  z-index: 4;

  pointer-events: none;
}

.multi-badge::after {
  content: "";

  width: 17px;
  height: 17px;

  flex-shrink: 0;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h10v10H7z' opacity='.55'/%3E%3Cpath d='M4 4h10v10H4z'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  transform: translate(1px, 1px);
}

/* GALLERY LEGEND */

.gallery-legend {
  display: flex;
  flex-direction: column;

  gap: 0.75rem;

  margin-top: 1rem;
  margin-bottom: 2rem;
}

.legend-item {
  display: flex;
  align-items: center;

  gap: 0.75rem;

  color: var(--muted);

  font-size: 0.95rem;
}

.legend-badge {
  position: static !important;

  flex-shrink: 0;
}

/* Legende: Abzeichen in eine feste Spalte, damit alle Texte
   an derselben senkrechten Linie beginnen. */
.gallery-legend {
  display: grid;
  grid-template-columns: max-content 1fr;

  column-gap: 0.75rem;
  row-gap: 0.75rem;

  align-items: center;
  justify-items: start;
}

.legend-item {
  display: contents;
}

/* WIP-Abzeichen in der Legende: nur Beispiel, nicht klickbar wirken lassen */
.legend-badge.wip-badge {
  cursor: default;
}

.legend-badge.wip-badge:hover {
  background: #3b82f6;
}

/* =================================================================
   TAG-FILTER (NSFW / WIP) - die Leiste wird von gallery-loader.js
   automatisch ueber jedem Raster erzeugt.
   ================================================================= */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;

  margin: 1.25rem 0 1.5rem;
}

.tag-filter-label {
  color: var(--muted);
  font-weight: 600;
}

.tag-filter-btn {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;

  padding: 0.4rem 0.85rem;

  border: 1px solid var(--border);
  border-radius: 999px;

  background: var(--surface);
  color: var(--muted);

  cursor: pointer;

  transition:
    background 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

.tag-filter-btn:hover {
  border-color: var(--accent);
}

/* Zustand "Only": gefuellt, hebt hervor */
.tag-filter-btn[data-state="only"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* Zustand "Hide": ausgegraut, durchgestrichen */
.tag-filter-btn[data-state="none"] {
  background: #f0ebe7;
  border-color: #d9d2cc;
  color: #9a918b;
  text-decoration: line-through;
}

/* Vom Filter ausgeblendete Kacheln */
.gallery-grid figure.tag-hidden {
  display: none;
}

/* Hinweis, wenn der Filter nichts uebrig laesst */
.tag-empty {
  color: var(--muted);
  font-style: italic;

  margin: 0 0 1.5rem;
}

/* LIGHTBOX */

.lightbox {
  display: none;

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.9);

  z-index: 1000;

  align-items: center;
  justify-content: center;

  overflow: auto;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  position: relative;

  max-width: 75vw;
  max-height: 75vh;

  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  width: auto;
  height: auto;
  
  max-width: min(1100px, 90vw);
  max-height: 90vh;

  object-fit: contain;

  cursor: zoom-in;

  transition:
    opacity 120ms,
    transform 200ms ease;
}

.lightbox-image.zoomed {
  max-width: none;
  max-height: none;

  width: auto;
  height: auto;

  cursor: zoom-out;
}

.lightbox-content:has(.zoomed) {
  max-width: none;
  max-height: none;

  margin: auto;
}

.lightbox-close {
  position: fixed;

  top: 10px;
  right: 30px;

  color: #b6b6b6;

  font-size: 40px;
  font-weight: bold;

  cursor: pointer;

  z-index: 1001;

  transition: color 200ms ease;

  text-shadow: 0 0 4px rgba(87, 87, 87, 0.55);
}

.lightbox-close:hover {
  color: #b16b4e;
}

.lightbox-nav {
  position: fixed;

  top: 50%;
  left: 0;

  width: 100%;

  display: flex;
  justify-content: space-between;

  padding: 0 10px;

  transform: translateY(-50%);

  pointer-events: none;

  z-index: 1002;
}

.lightbox-arrow {
  position: absolute;

  background: rgba(185, 185, 185, 0.55);
  color: #fff;

  border: none;

  font-size: 36px;

  padding: 10px 20px;

  cursor: pointer;

  border-radius: 8px;

  pointer-events: all;

  transition: background 200ms ease;
}

.lightbox-arrow:first-child {
  left: 15px;
}

.lightbox-arrow:last-child {
  right: 15px;
}

.lightbox-arrow:hover {
  background: rgba(70, 70, 70, 0.6);
}

.lightbox-arrow:disabled {
  opacity: 0.1;
  cursor: not-allowed;
}

.lightbox-counter {
  position: fixed;

  bottom: 15px;
  left: 50%;

  transform: translateX(-50%);

  color: #7c7c7c;

  font-size: 14px;
}

/* ABOUT */

.about {
  display: grid;

  gap: 7rem;

  grid-template-columns: 1fr auto;

  margin-top: 2rem;
  margin-left: 5rem;
  margin-right: 5rem;

  align-items: start;
}

.about figure {
  margin: 0;

  background: var(--surface);

  border: 1px solid var(--border);
  border-radius: 4px;

  overflow: hidden;

  width: 400px;
}

.about img {
  display: block;

  width: 400px;
  max-width: 100%;

  height: auto;

  object-fit: cover;
}

.about figcaption {
  padding: 1rem;

  color: var(--muted);

  font-size: 0.95rem;
}

/* OTHER */

.row {
  display: grid;
  gap: 1rem;
}

iframe.guestbook {
  width: 100%;

  min-height: 650px;

  border: none;
  border-radius: 22px;

  background: #faf1e6;
}

.site-footer {
  padding: 3rem 2rem;

  text-align: center;

  color: var(--muted);
}

/* SPLASH / AGE GATE */

#splash {
  display: none;

  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.96);

  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;

  padding: 2rem;

  z-index: 9999;

  color: white;
}

#splash.visible {
  display: flex;
}

#splash h1 {
  margin-top: 0;

  font-size: clamp(2rem, 5vw, 4rem);
}

#splash p {
  max-width: 600px;

  color: #d6d6d6;
}

/* BUTTON WRAPPER */

.age-buttons {
  display: flex;
  flex-direction: column;

  gap: 1rem;

  margin-top: 1rem;
}

/* BOTH BUTTONS */

.enter_link,
.exit_link {
  display: inline-block;

  padding: 1rem 2rem;

  font-size: 1rem;
  font-weight: 700;

  border-radius: 8px;

  box-sizing: border-box;

  cursor: pointer;

  text-align: center;

  transition:
    background 200ms ease,
    color 200ms ease;
}

/* ENTER BUTTON */

.enter_link {
  background: var(--accent);
  color: white;

  border: none;
}

.enter_link:hover {
  background: var(--accent-dark);
}

/* EXIT BUTTON */

.exit_link {
  background: #1a1a1a;
  color: white;

  border: none;
}

.exit_link:hover {
  background: #2a2a2a;
}

/* FOOTNOTES */

.cookie-notice,
.noscript-warning {
  margin-top: 1.5rem;

  font-size: 0.9rem;
}

.noscript-warning {
  color: #ff9a9a;
}

/* MOBILE */



/* =================================================================
   DEV-Schalter fuer den Patron-Status — NUR LOKALE ENTWICKLUNG.
   Wird per JavaScript ausschliesslich auf localhost / 127.0.0.1 /
   file: eingefuegt und erscheint daher NIE auf der echten Website.
   ================================================================= */

.dev-patron-switch {
  position: fixed;

  bottom: 16px;
  left: 16px;

  z-index: 10000;

  display: flex;
  flex-direction: column;
  gap: 0.45rem;

  padding: 0.6rem 0.7rem;

  background: #1f2937;
  color: #ffffff;

  border: 2px solid var(--accent);
  border-radius: 10px;

  font-family: inherit;
  font-size: 0.78rem;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);

  opacity: 0.95;
}

.dev-patron-switch__label {
  font-weight: 700;

  letter-spacing: 0.02em;
}

.dev-patron-switch__button {
  cursor: pointer;

  padding: 0.4rem 0.6rem;

  border: none;
  border-radius: 6px;

  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;

  color: #ffffff;
  background: #6b7280;
}

.dev-patron-switch[data-state="patron"] .dev-patron-switch__button {
  background: var(--accent);
}


/* =================================================================
   Gesperrte (early-access) Kacheln in der Public-Ansicht.
   Thumbnail wird unkenntlich gemacht (unscharf), darueber liegt ein
   Schloss-Overlay mit Hinweis "Patreon Early Access". Die NSFW-/Multi-
   Abzeichen bleiben unter dem Schleier sichtbar.
   REIN KOSMETISCH — das Originalbild liegt weiter im Quelltext.
   ================================================================= */

.gallery-grid figure.locked img {
  /**filter: blur(5px);**/

  /* Leicht vergroessern, damit die unscharfen Raender die Kachel fuellen. */
  transform: scale(1.1);
}

/* Hover-Zoom wie bei den uebrigen Kacheln (relativ zur Grund-Vergroesserung). */
.gallery-grid figure.locked:hover img {
  transform: scale(1.15);
}

.lock-overlay {
  position: absolute;

  inset: 0;

  z-index: 5;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  background: rgba(0, 0, 0, 0.45);

  color: #ffffff;

  /* Klicks gehen durch zur Kachel (Klick-Verhalten folgt in der naechsten Phase). */
  pointer-events: none;
}

.lock-overlay__icon {
  width: 32px;
  height: 32px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm3 8H9V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* Titel der Kachel - auch fuer oeffentliche Nutzer sichtbar. */
.lock-overlay__title {
  padding: 0 0.75rem;

  font-size: 1.05rem;
  font-weight: 800;

  text-align: center;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Bei gesperrten Kacheln den weissen Hover-Schleier unterdruecken,
   damit das Schloss-Overlay sauber sichtbar bleibt. */
.gallery-grid figure.locked:hover::before {
  opacity: 0;
}


/* =================================================================
   Early-Access-Hinweis (Popup beim Klick auf eine gesperrte Kachel).
   ================================================================= */

.patron-notice {
  position: fixed;

  inset: 0;

  z-index: 10001;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 1.5rem;

  background: rgba(0, 0, 0, 0.6);
}

.patron-notice.active {
  display: flex;
}

.patron-notice__box {
  position: relative;

  width: 100%;
  max-width: 380px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;

  padding: 2rem 1.75rem;

  background: var(--surface);
  color: var(--text);

  border: 1px solid var(--border);
  border-radius: 4px;

  text-align: center;

  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.patron-notice__close {
  position: absolute;

  top: 0.5rem;
  right: 0.65rem;

  background: none;
  border: none;

  font-size: 1.6rem;
  line-height: 1;

  color: var(--muted);
  cursor: pointer;
}

.patron-notice__close:hover {
  color: var(--text);
}

.patron-notice__icon {
  width: 44px;
  height: 44px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff3164' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm3 8H9V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.patron-notice__title {
  margin: 0;

  font-size: 1.4rem;
  font-weight: 800;
}

.patron-notice__text {
  margin: 0;

  color: var(--muted);

  font-size: 0.95rem;
  line-height: 1.6;
}

.patron-notice__button {
  display: inline-block;

  margin-top: 0.4rem;

  padding: 0.7rem 1.5rem;

  background: var(--accent);
  color: #ffffff !important;

  border-radius: 8px;

  font-weight: 700;
}

.patron-notice__button:hover {
  background: var(--accent-dark);
}


/* =================================================================
   WIP-Abzeichen (Bonus-Hinweis auf der Kachel). Anders als NSFW/Multi
   ist dieses Abzeichen KLICKBAR.
   ================================================================= */

.wip-badge {
  position: absolute;

  bottom: 9px;
  right: 9px;

  background: #3b82f6;
  color: #ffffff;

  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;

  padding: 0.38rem 0.56rem 0.34rem;

  border-radius: 7px;

  z-index: 4;

  cursor: pointer;
}

.wip-badge:hover {
  background: #2563eb;
}


/* =================================================================
   WIP in der Lightbox: Umschalt-Knopf (Final <-> WIP) und Bonus-Label.
   ================================================================= */

.lightbox-wip-toggle {
  position: fixed;

  top: 20px;
  left: 50%;
  transform: translateX(-50%);

  z-index: 10;

  padding: 0.6rem 1.1rem;

  background: #3b82f6;
  color: #ffffff;

  border: none;
  border-radius: 999px;

  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.03em;

  cursor: pointer;
}

.lightbox-wip-toggle:hover {
  background: #2563eb;
}

/* Deaktiviert: Eintrag ohne fertiges Bild ("No final artwork yet").
   Ausgegraut, kein Hover-Effekt, normaler Mauszeiger. */
.lightbox-wip-toggle:disabled {
  background: #6b7280;
  cursor: default;
}

.lightbox-wip-toggle:disabled:hover {
  background: #6b7280;
}


/* =================================================================
   Alle @media-Regeln (responsive Anpassungen) gesammelt am Dateiende.
   Reihenfolge bewusst beibehalten: 768px vor 860px.
   ================================================================= */

@media (max-width: 768px) {
  .homepage-columns {
    flex-direction: column;
  }

.homepage-columns .patreon-promo {
  flex: 2;
  min-width: 0;
}

}

@media (max-width: 860px) {

  .page-layout {
    grid-template-columns: 1fr;

    padding: 1rem;

    gap: 1rem;
  }

  .content {
    padding: 1rem;
  }

  .content h1,
  .start h1 {
    font-size: clamp(2rem, 7vw, 3rem);

    line-height: 1.1;
  }

  .content h2 {
    font-size: clamp(1rem, 6vw, 2rem);

    line-height: 1.1;
  }
  .site-header {
    flex-wrap: wrap;
    align-items: center;

    padding: 1rem;
  }

  .brand {
    font-size: 1rem;

    letter-spacing: 0.12em;
  }



  .site-nav {
    width: 100%;

    gap: 0.75rem;

    order: 3;
    margin-top: 0.5rem;
  }

  .site-nav a,
  .site-nav summary {
    font-size: 1rem;
  }

  .site-nav details ul {
    position: absolute;

    left: 0;
    right: 0;
    top: 100%;

    width: auto;

    z-index: 1000;

    box-shadow: none;

    border: 1px solid var(--border);
  }

  /* Gallery */

  .gallery-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 0.75rem;
  }

  .gallery-grid figure figcaption {
    font-size: 0.95rem;

    padding: 0.5rem;
  }


  
  .lightbox-wip-toggle {
  top: 12px;

  font-size: 0.85rem;

  padding: 0.5rem 0.9rem;
}


  /* About page */

  .about {
    grid-template-columns: 1fr;

    gap: 2rem;

    margin-left: 0;
    margin-right: 0;
  }

  .about figure {
    width: 100%;
  }

  .about img {
    width: 100%;
  }

  /* Lightbox */

  .lightbox-nav {
    padding: 0 6px;
  }

  .lightbox-arrow {
    font-size: 24px;

    padding: 8px 14px;
  }

}

/* Schloss-Overlay gesperrter Kacheln auf kleinen Bildschirmen verkleinern. */
@media (max-width: 860px) {

  .lock-overlay {
    gap: 0.3rem;
  }

  .lock-overlay__icon {
    width: 26px;
    height: 26px;
  }

  .lock-overlay__title {
    font-size: 0.9rem;
  }
}