/* ==================================================
   GRUNDLAGEN
   ================================================== */

:root {
  --color-background: #f7f5f2;
  --color-surface: #fff;
  --color-text: #1b1b1b;
  --color-text-muted: #656565;
  --color-line: #dfdfdf;
  --color-accent: #8e7758;
  --font-heading: "Cormorant Garamond", serif;
  --font-body: "Inter", sans-serif;
  --container-width: 1200px;
  --radius: 6px;
  --shadow: 0 15px 40px rgb(0 0 0 / 8%);
  --transition: 0.35s ease;
  --section-space: clamp(4rem, 10vw, 8rem);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { min-width: 320px; overflow-x: hidden; background: var(--color-background); color: var(--color-text); font: 300 1rem/1.8 var(--font-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.menu-open, body.lightbox-open { overflow: hidden; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
ul { padding: 0; list-style: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 5px; }

/* Wiederverwendbare Layout- und Textelemente */
.container { width: min(92%, var(--container-width)); margin-inline: auto; }
section { padding-block: var(--section-space); }
.eyebrow { display: inline-block; margin-bottom: 1rem; color: var(--color-text-muted); font-size: .75rem; font-weight: 500; letter-spacing: .35em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; line-height: 1.05; letter-spacing: .02em; }
h1 { margin-bottom: 2rem; font-size: clamp(3.2rem, 7vw, 6.2rem); }
h2 { margin-bottom: 1.5rem; font-size: clamp(2.5rem, 5vw, 4rem); }
h3 { margin-bottom: 1rem; font-size: clamp(1.8rem, 3vw, 2.4rem); }
p { max-width: 65ch; color: var(--color-text-muted); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.4rem; padding: .8rem 2rem; border: 1px solid var(--color-text); font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.button:hover { background: var(--color-text); color: #fff; }
.button.secondary { border-color: var(--color-line); }
.button.secondary:hover { border-color: var(--color-text); }

/* ==================================================
   KOPFBEREICH UND NAVIGATION
   ================================================== */

.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; padding-block: 1.35rem; background: rgb(247 245 242 / 78%); backdrop-filter: blur(18px); transition: padding var(--transition), box-shadow var(--transition); }
.site-header.scrolled { padding-block: .8rem; box-shadow: 0 4px 20px rgb(0 0 0 / 6%); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.logo, .footer-brand { display: flex; flex-direction: column; }
.logo { line-height: 1; }
.logo strong { font: 600 2rem var(--font-heading); }
.logo span { margin-top: .35rem; color: var(--color-text-muted); font-size: .68rem; letter-spacing: .42em; text-transform: uppercase; }
.nav-links, .footer-nav ul { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 3rem); }
.nav-links a, .footer-nav a, .contact-card a { position: relative; }
.nav-links a, .footer-nav a { font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-nav ul { gap: clamp(.8rem, 2vw, 2rem); }
.footer-nav a { font-size: .72rem; white-space: nowrap; }
.nav-links a::after, .footer-nav a::after, .contact-card a::after { position: absolute; right: 0; bottom: -6px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.nav-links a:hover::after, .footer-nav a:hover::after, .contact-card:hover a::after { transform: scaleX(1); }
/* Hauptnavigation: Referenz-Akzent für Hover und die aktuelle Seite. */
.nav-links a::after { background: rgb(189 48 46 / 40%); }
.nav-links a[aria-current="page"] { color: #bd302e; }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle { display: none; padding: .5rem; }
.nav-toggle span { display: block; width: 28px; height: 1px; background: var(--color-text); transition: transform var(--transition); }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle.active span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle.active span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ==================================================
   STARTSEITE UND ALLGEMEINE ABSCHNITTE
   ================================================== */

.home-hero { position: relative; min-height: 115svh; padding: 0; overflow: hidden; background: #1b1b1b; isolation: isolate; }
.home-hero > .hero-image { position: absolute; inset: 0; display: block; width: 100%; max-width: none; margin: 0; }
.home-hero > .hero-image img { width: 100%; max-width: none; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; object-fit: cover; }
/* Die übrigen Seiten behalten ihren ursprünglichen, hellen Hero-Aufbau. */
.hero:not(.home-hero) { display: grid; min-height: 100svh; align-items: center; padding-top: 8rem; }
.hero-grid, .about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.hero-image, .about-image { display: flex; justify-content: center; }
.hero-image img, .about-image img { width: 100%; max-width: 520px; aspect-ratio: 4 / 5; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow); }
.hero-content, .about-content { display: flex; flex-direction: column; align-items: flex-start; }
.hero-content > p:not(.eyebrow) { max-width: 38rem; margin-bottom: 2rem; font-size: clamp(1rem, 1.3vw, 1.12rem); }
.hero-content-overlay { position: relative; z-index: 1; min-height: 115svh; justify-content: flex-end; padding-bottom: clamp(9rem, 17vw, 14rem); color: #fff; }
.hero-copy { max-width: min(100%, 43rem); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgb(255 255 255 / 18%); background: rgb(0 0 0 / 48%); }
.hero-copy .eyebrow { color: rgb(255 255 255 / 72%); }
.hero-copy h1 { max-width: 11ch; margin-bottom: 1.25rem; }
.hero-copy > p:not(.eyebrow) { max-width: 34rem; margin-bottom: 0; color: rgb(255 255 255 / 86%); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.image-fallback { background: linear-gradient(135deg, #d2c7b8, #8e7758); color: #fff; object-fit: contain !important; }
.about, .contact { background: var(--color-surface); }
.about-content p { margin-bottom: 1.5rem; }
.about-story { background: var(--color-background); }
.about-story-surface { background: var(--color-surface); }
.about-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(3rem, 8vw, 8rem); }

/* Umgekehrte Story-Abschnitte: Text links, Bild rechts. */
@media (min-width: 961px) {
  /* Das neue Motiv bleibt im Hero bildfüllend und mittig ausgerichtet. */
  .home-hero > .hero-image img { object-fit: cover; object-position: center center; }
  .about-story-reversed .about-content { grid-column: 1; grid-row: 1; }
  .about-story-reversed .about-image { grid-column: 2; grid-row: 1; }
}

/* Zitat unter dem Shibari-Abschnitt. */
.about-testimonial { padding-block: clamp(3rem, 7vw, 6rem); }
.about-testimonial .container { padding-top: clamp(2rem, 5vw, 4rem); border-top: 1px solid rgb(189 48 46 / 40%); }
.about-testimonial-title { margin-bottom: 2.5rem; text-align: center; font-size: clamp(2rem, 3vw, 2.8rem); }
.about-testimonial blockquote { max-width: 980px; margin-inline: auto; text-align: center; }
.about-testimonial p { max-width: none; margin-bottom: 1.25rem; color: var(--color-text); font-family: var(--font-heading); font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.55; opacity: .8; }
.about-testimonial footer { margin-top: 2rem; color: var(--color-text-muted); font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

.section-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 4rem; text-align: center; }
.section-header p { max-width: 42rem; }
.quote { padding-block: var(--section-space); }
.quote blockquote { max-width: 760px; margin-inline: auto; text-align: center; }
.quote p, .closing-text { max-width: none; color: var(--color-text); font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.35; }
.home-explore { background: var(--color-background); }
.home-explore-header { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.home-explore-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.home-explore-card { position: relative; display: flex; min-height: clamp(24rem, 38vw, 32rem); align-items: flex-end; padding: clamp(1.5rem, 4vw, 3rem); overflow: hidden; background: #292522; color: #fff; isolation: isolate; }
.home-explore-card::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 5%) 15%, rgb(0 0 0 / 76%) 100%); content: ""; }
.home-explore-card img { position: absolute; inset: 0; z-index: -2; height: 100%; object-fit: cover; opacity: .82; transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity var(--transition); }
.home-explore-card:hover img { transform: scale(1.045); opacity: 1; }
.home-explore-card .eyebrow { margin-bottom: .75rem; color: rgb(255 255 255 / 72%); }
.home-explore-card h3 { max-width: 13ch; margin-bottom: 1.5rem; font-size: clamp(2rem, 3.4vw, 3.35rem); }
.home-explore-card .text-link { color: #fff; }
.home-explore-number { position: absolute; top: 1.5rem; right: 1.75rem; color: rgb(255 255 255 / 70%); font-size: .72rem; font-weight: 500; letter-spacing: .18em; }

/* ==================================================
   PORTFOLIO-GALERIE
   Die Bilder werden durch script.js eingefügt.
   ================================================== */

.portfolio { padding-bottom: 0; }
.portfolio .container { width: 100%; }
.portfolio .section-header { width: min(92%, var(--container-width)); margin-inline: auto; }
.gallery { display: grid; width: min(92%, calc(1040px + .75rem)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-inline: auto; }
.gallery-item { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; background: #e8e5e0; }
.gallery-item img { aspect-ratio: 4 / 5; object-fit: cover; transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .7s ease; }

/* Große Bildschirme: kompakteres Vierer-Raster für das Portfolio. */
@media (min-width: 961px) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Nur Geräte mit Maus erhalten den Milchglas-Effekt beim Darüberfahren. */
@media (hover: hover) and (pointer: fine) {
  .gallery-item { z-index: 0; transition: transform var(--transition), box-shadow var(--transition); }
  .gallery-item:hover { z-index: 1; box-shadow: var(--shadow); transform: scale(1.025); }
  .gallery-item.is-frosted img { filter: blur(11px) saturate(.72) brightness(1.08); transform: scale(1.045); }
  .gallery-item.is-frosted::after { position: absolute; inset: 0; background: rgb(255 255 255 / 28%); content: ""; pointer-events: none; transition: opacity .7s ease; }
  .gallery-item.is-clear img { filter: none; transform: scale(1); }
  .gallery-item.is-clear::after { opacity: 0; }
}

/* Touch-Geräte haben kein Hover: Die Bilder bleiben dort direkt sichtbar. */
@media (hover: none) {
  .gallery-item img { filter: none; transform: none; }
}

/* ==================================================
   REFERENZEN UND KONTAKT
   ================================================== */

.references, .blog { background: var(--color-background); }
/* Standard: eine Spalte für Mobilgeräte und kleinere Bildschirme. */
.references-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

/* Große Bildschirme: Referenzen erscheinen nebeneinander in zwei Spalten. */
@media (min-width: 961px) {
  .references-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.reference-card, .contact-card { border: 1px solid var(--color-line); background: var(--color-surface); transition: transform var(--transition), box-shadow var(--transition); }
.reference-card { display: flex; min-height: 250px; flex-direction: column; justify-content: space-between; padding: 2rem; }
.reference-card:hover, .contact-card:hover { box-shadow: var(--shadow); transform: translateY(-5px); }
.reference-card blockquote p { color: var(--color-text); font-family: var(--font-heading); font-size: 12px; line-height: 1.25; }
.reference-card footer { display: flex; flex-direction: column; gap: .15rem; margin-top: 2rem; }
.reference-card footer strong { font-size: .85rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.reference-card footer span { color: var(--color-text-muted); font-size: .85rem; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 4rem; }
.contact-card { padding: 2rem; text-align: center; }
.contact-card h3 { font-size: 1.5rem; }
.contact-card a { display: inline-flex; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.contact-page { background: var(--color-background); }
.contact-page-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; gap: clamp(3rem, 9vw, 8rem); }
.contact-page-intro h2 { max-width: 12ch; }
.contact-page-intro > p { margin-bottom: 1.5rem; }
.contact-direct { margin-top: 2.5rem; font-size: .9rem; }
.contact-direct a, .form-consent a { color: var(--color-text); text-decoration: underline; text-decoration-color: rgb(189 48 46 / 40%); text-underline-offset: .25em; }
.contact-form { display: grid; gap: .75rem; padding: clamp(1.5rem, 4vw, 3rem); background: var(--color-surface); }
.contact-form label { font-size: .8rem; font-weight: 500; letter-spacing: .04em; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--color-line); border-radius: 0; background: var(--color-background); color: var(--color-text); font: inherit; }
.contact-form textarea { min-height: 12rem; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-accent); outline: 0; }
.contact-form .button { justify-self: start; margin-top: .75rem; }

/* ==================================================
   REZENSIONEN-UNTERSEITE
   Text und Bild wechseln auf großen Bildschirmen die Seite.
   ================================================== */

.reviews-list { display: grid; gap: clamp(4rem, 9vw, 8rem); }
.review-item { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(2rem, 7vw, 7rem); padding: clamp(1.5rem, 4vw, 3rem); }
.review-item::before, .review-item::after { position: absolute; width: clamp(2rem, 5vw, 3.5rem); height: clamp(2rem, 5vw, 3.5rem); content: ""; pointer-events: none; }
.review-item::before { top: 0; left: 0; border-top: 1px solid rgb(189 48 46 / 40%); border-left: 1px solid rgb(189 48 46 / 40%); border-top-left-radius: var(--radius); }
.review-item::after { right: 0; bottom: 0; border-right: 1px solid rgb(189 48 46 / 40%); border-bottom: 1px solid rgb(189 48 46 / 40%); border-bottom-right-radius: var(--radius); }
.review-content { display: flex; flex-direction: column; align-items: flex-start; }
.review-quote { margin-bottom: 2rem; }
.review-quote p { color: var(--color-text); font-family: var(--font-heading); font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.55; }
.review-quote p + p { margin-top: 1rem; }

/* Diese Klasse wird per JavaScript nur bei sehr langen Rezensionen ergänzt. */
@media (min-width: 961px) {
  .review-quote.has-columns { column-count: 2; column-gap: 2rem; }
}
.review-meta { display: flex; flex-direction: column; gap: .2rem; }
.review-meta strong { font-size: .85rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.review-meta span { color: var(--color-text-muted); font-size: .85rem; }
.review-image { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.review-image img { aspect-ratio: 4 / 5; object-fit: cover; }
.review-item-submitted { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
@media (min-width: 961px) {
  .review-item-submitted.has-review-image { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Referenzformular: Einsendungen werden erst nach manueller Freigabe gezeigt. */
.reference-submission { background: var(--color-surface); }
.reference-submission-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(3rem, 9vw, 8rem); }
.reference-form { display: grid; gap: .75rem; }
.reference-form label { font-size: .8rem; font-weight: 500; letter-spacing: .04em; }
.reference-form label span, .form-notice { color: var(--color-text-muted); font-weight: 300; }
.reference-form input[type="text"], .reference-form input[type="password"], .reference-form textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--color-line); border-radius: 0; background: var(--color-background); color: var(--color-text); font: inherit; }
.reference-form textarea { min-height: 12rem; resize: vertical; }
.reference-form input:focus, .reference-form textarea:focus { border-color: var(--color-accent); outline: 0; }
.form-consent { display: flex; gap: .75rem; align-items: flex-start; margin-top: .5rem; }
.form-consent input { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .3rem; accent-color: var(--color-accent); }
.form-notice { margin-bottom: .5rem; font-size: .78rem; }
.form-message { max-width: none; padding: .8rem 1rem; font-size: .88rem; }
.form-message-success { border-left: 3px solid #3c7a4a; background: #edf6ef; color: #265b31; }
.form-message-error { border-left: 3px solid var(--color-accent); background: #fbefef; color: #7b2524; }
.form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Geschützter Freigabebereich */
.admin-page { min-height: 100svh; padding-block: clamp(6rem, 12vw, 10rem); }
.admin-panel { max-width: 980px; }
.admin-panel > .reference-form { max-width: 32rem; }
.admin-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.admin-reviews { display: grid; gap: 1.5rem; margin-top: 3rem; }
.admin-review { padding: 2rem; border: 1px solid var(--color-line); background: var(--color-surface); }
.admin-review h2 { margin-bottom: .5rem; font-size: clamp(2rem, 3vw, 2.8rem); }
.admin-status, .admin-context { margin-bottom: .8rem; font-size: .8rem; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.admin-actions .admin-image-label { width: 100%; font-size: .8rem; font-weight: 500; }
.admin-actions input[type="file"] { max-width: 100%; font: inherit; font-size: .85rem; }
.admin-review-image { width: min(100%, 260px); margin-top: 1.5rem; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.admin-review-image img { aspect-ratio: 4 / 5; object-fit: cover; }
.button-danger { border-color: var(--color-accent); color: var(--color-accent); }
.button-danger:hover { background: var(--color-accent); color: #fff; }

/* Beim zweiten, vierten usw. Eintrag erscheint das Bild links. */
@media (min-width: 961px) {
  .review-item.is-reversed .review-image { grid-column: 1; grid-row: 1; }
  .review-item.is-reversed .review-content { grid-column: 2; grid-row: 1; }
}

/* ==================================================
   JOURNAL
   ================================================== */

.journal-hero { display: grid; min-height: 52svh; align-items: end; padding-top: 9rem; background: var(--color-surface); }
.journal-hero > .container { padding-bottom: clamp(2rem, 7vw, 5rem); }
.journal-hero p:not(.eyebrow) { font-size: 1.08rem; }
.blog-overview, .blog-detail { padding-block: clamp(4rem, 9vw, 8rem); }
.blog-overview > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); align-items: start; gap: clamp(2rem, 5vw, 5rem); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.blog-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.blog-topic-card { position: relative; display: grid; min-height: clamp(22rem, 33vw, 30rem); overflow: hidden; border: 1px solid var(--color-line); color: #fff; isolation: isolate; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.blog-topic-card::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(255 255 255 / 12%), rgb(0 0 0 / 78%)); content: ""; }
.blog-topic-card img { position: absolute; inset: 0; z-index: -2; height: 100%; object-fit: cover; filter: blur(12px) saturate(.72) brightness(1.05); transform: scale(1.06); transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.blog-topic-card > span { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: flex-start; padding: clamp(1.75rem, 3vw, 2.5rem); }
.blog-topic-card .eyebrow { margin: 0; color: rgb(255 255 255 / 78%); }
.blog-topic-card strong { display: block; max-width: 100%; min-height: 2.25em; margin-top: auto; overflow-wrap: normal; font-family: var(--font-heading); font-size: clamp(1.75rem, 2.25vw, 2.3rem); font-weight: 500; line-height: 1.08; }
.blog-topic-card small { display: block; margin-top: .9rem; color: rgb(255 255 255 / 88%); font-size: .72rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.topic-hero { padding: clamp(9rem, 16vw, 13rem) 0 clamp(3rem, 7vw, 6rem); background: var(--color-surface); }
.topic-hero .text-link { margin-bottom: 2.5rem; }
.topic-hero h1 { max-width: 14ch; margin-bottom: 1.5rem; }
.topic-hero > .container > p:last-child { max-width: 42rem; color: var(--color-text-muted); font-size: 1.08rem; }
.topic-posts { padding-block: clamp(4rem, 9vw, 8rem); }
.topic-post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.topic-post-card { display: grid; grid-template-columns: minmax(9rem, .65fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; padding-bottom: clamp(1.5rem, 4vw, 3rem); border-bottom: 1px solid var(--color-line); }
.topic-post-card img { aspect-ratio: 4 / 5; object-fit: cover; filter: blur(5px) saturate(.8); transition: filter var(--transition), transform var(--transition); }
.topic-post-card:hover img { filter: none; transform: scale(1.015); }
.topic-post-card h2 { margin-bottom: .8rem; font-size: clamp(1.7rem, 2.5vw, 2.4rem); }
.topic-post-card p:not(.post-meta) { margin-bottom: 1.25rem; font-size: .92rem; }
.blog-card { position: relative; display: flex; min-height: 25rem; overflow: hidden; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--color-line); background: var(--color-surface); color: #fff; isolation: isolate; transition: border-color var(--transition), transform var(--transition); }
.blog-card:hover { border-color: rgb(189 48 46 / 40%); transform: translateY(-.3rem); }
.blog-card::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(255 255 255 / 15%), rgb(0 0 0 / 72%)); content: ""; }
.blog-card-image { position: absolute; inset: 0; z-index: -2; height: 100%; object-fit: cover; filter: blur(12px) saturate(.72) brightness(1.05); transform: scale(1.06); transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.blog-card:hover .blog-card-image { transform: scale(1.11); }
.blog-card-content { position: relative; width: 100%; }
.blog-card-featured { grid-column: span 3; min-height: 31rem; padding: clamp(2rem, 4vw, 3.5rem); }
.blog-card-number { display: none; }
.blog-card h2 { max-width: 18ch; margin-bottom: .85rem; font-size: clamp(1.4rem, 1.5vw, 1.7rem); line-height: 1.15; }
.blog-card-featured h2 { max-width: 18ch; font-size: clamp(2.35rem, 4vw, 3.8rem); }
.blog-card p:not(.post-meta) { max-width: 42ch; margin-bottom: 1.5rem; color: rgb(255 255 255 / 94%); font-size: .92rem; font-weight: 400; line-height: 1.65; text-shadow: 0 1px 10px rgb(0 0 0 / 55%); }
.blog-card .post-meta, .blog-card .text-link { color: rgb(255 255 255 / 85%); }
.blog-notes { width: 100%; margin: 0; }
.blog-notes blockquote { margin: 0; }
.blog-notes blockquote p { max-width: none; color: var(--color-text); font-family: var(--font-heading); font-size: clamp(1.15rem, 1.7vw, 1.6rem); line-height: 1.35; }

/* Im Dreier-Raster liegen Titel, Beschreibung und Link in jeder Kachel auf gleicher Höhe. */
@media (min-width: 961px) {
  /* Alle kleinen Kacheln erhalten gleich hohe Textbereiche, ohne Inhalte zu überlagern. */
  .blog-card:not(.blog-card-featured) { min-height: 30rem; }
  .blog-card:not(.blog-card-featured) .blog-card-content { display: flex; width: 100%; min-height: 100%; flex-direction: column; }
  .blog-card:not(.blog-card-featured) .post-meta { min-height: 1.5rem; }
  .blog-card:not(.blog-card-featured) h2 { min-height: 3.5em; }
  .blog-card:not(.blog-card-featured) p:not(.post-meta) { min-height: 6.6em; }
  .blog-card:not(.blog-card-featured) .text-link { margin-top: auto; }
}
@media (hover: hover) and (pointer: fine) {
  .blog-topic-card:hover { border-color: rgb(189 48 46 / 40%); box-shadow: var(--shadow); transform: translateY(-.35rem); }
  .blog-topic-card:hover img { transform: scale(1.11); }
}
.blog-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr); align-items: start; gap: clamp(3rem, 9vw, 9rem); }
/* Einzelne Artikel nutzen die volle verfügbare Lesebreite. */
.blog-layout--single { grid-template-columns: minmax(0, 850px); }
.blog-list { border-top: 1px solid var(--color-line); }
.blog-post { padding-block: clamp(2.5rem, 6vw, 5rem); border-bottom: 1px solid var(--color-line); }
.blog-post-detail { padding-top: 0; }
.blog-post-detail h1 { max-width: 15ch; margin-bottom: 1.5rem; font-size: clamp(2.8rem, 6vw, 5.5rem); }
.blog-post-detail h2 { margin: 3rem 0 1rem; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.blog-back-link { margin-bottom: 2rem; }
.blog-post h2 { max-width: 16ch; margin-bottom: 1.25rem; font-size: clamp(2.2rem, 4vw, 3.8rem); }
.blog-post h3 { margin: 2.5rem 0 1rem; font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
.blog-post p:not(.post-meta) { margin-bottom: 1.6rem; }
.post-meta { margin-bottom: 1rem; font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.post-meta span { margin-inline: .5rem; }
.text-link { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .25rem; font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.text-link::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: currentColor; content: ""; transform-origin: left; transition: transform var(--transition); }
.text-link:hover::after { transform: scaleX(.45); }
.journal-aside { position: sticky; top: 8rem; padding: 2rem; border: 1px solid var(--color-line); background: var(--color-surface); }
.journal-aside h2 { font-size: clamp(2rem, 3vw, 2.8rem); }
.journal-aside p:not(.eyebrow) { margin-bottom: 2rem; }
.blog-comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-line); }
.share-post { margin-top: 3.5rem; padding: 1.5rem 0 2rem; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.share-post .eyebrow { margin-bottom: .85rem; }
.share-post-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.share-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid var(--color-accent); border-radius: 999px; background: var(--color-accent); color: #fff; font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: background var(--transition), color var(--transition), transform var(--transition); }
.share-button:hover { background: transparent; color: var(--color-accent); transform: translateY(-2px); }
.share-button--quiet { border-color: var(--color-line); background: transparent; color: var(--color-text); }
.share-button--quiet:hover { border-color: var(--color-accent); color: var(--color-accent); }
.share-status { min-height: 1.3rem; margin: .75rem 0 0; color: var(--color-text-muted); font-size: .8rem; }
.blog-comments h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.comments-empty { margin-bottom: 1.5rem; }
.comment-list { display: grid; gap: 1rem; margin-bottom: 2rem; }
.comment { padding: 1.25rem; border-left: 2px solid var(--color-accent); background: var(--color-surface); }
.comment p { max-width: none; }
.comment-author { margin-bottom: .5rem; color: var(--color-text); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.comment-reply { margin-left: clamp(1rem, 5vw, 3rem); border-left-color: var(--color-text-muted); }
.comment-form { display: grid; gap: .75rem; }
.comment-form label { font-size: .8rem; font-weight: 500; }
.comment-form input[type="text"], .comment-form textarea, .admin-actions textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--color-line); background: var(--color-background); color: var(--color-text); font: inherit; }

/* ==================================================
   FOOTER UND LIGHTBOX
   ================================================== */

.closing { padding-block: 4rem; text-align: center; }
.site-footer { padding-block: 2.5rem; border-top: 1px solid var(--color-line); }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.footer-brand { gap: .35rem; }
.footer-brand strong { font: 600 1.5rem var(--font-heading); }
.footer-brand span { color: var(--color-text-muted); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }
.footer-social { display: flex; align-items: center; gap: .6rem; }
.footer-social-link { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid rgb(189 48 46 / 40%); border-radius: 50%; color: #bd302e; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.footer-social-link:hover { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.footer-social-link svg { width: 1.05rem; height: 1.05rem; }
.footer-social-link img { width: 1.05rem; height: 1.05rem; object-fit: contain; }
.lightbox { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 2rem; background: rgb(0 0 0 / 94%); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox-overlay { position: absolute; inset: 0; width: 100%; cursor: default; }
.lightbox-content { position: relative; z-index: 1; display: grid; width: min(90vw, 700px); place-items: center; }
.lightbox-figure { width: 100%; }
.lightbox-image { width: 100%; max-height: 84vh; aspect-ratio: 4 / 5; object-fit: contain; }
.lightbox-content > button { position: absolute; z-index: 2; display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; color: #fff; transition: background var(--transition), color var(--transition); }
.lightbox-content > button:hover { background: #fff; color: #000; }
.lightbox-close { top: -4rem; right: 0; font-size: 2rem; }
.lightbox-prev { left: -5rem; }
.lightbox-next { right: -5rem; }

/* ==================================================
   RESPONSIVE ANPASSUNGEN
   ================================================== */

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav-links { position: fixed; top: 73px; right: 0; left: 0; display: flex; flex-direction: column; gap: 2rem; padding: 2rem; background: var(--color-background); box-shadow: 0 10px 20px rgb(0 0 0 / 4%); transform: translateY(-140%); transition: transform var(--transition); }
  .nav-links.active { transform: translateY(0); }
  .hero-grid, .about-grid, .about-story-grid, .contact-grid, .contact-page-grid, .blog-layout, .reference-submission-grid { grid-template-columns: 1fr; }
  .blog-overview > .container { grid-template-columns: 1fr; }
  .home-explore-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-topic-grid, .topic-post-grid { grid-template-columns: 1fr; }
  .topic-post-card { grid-template-columns: minmax(7rem, .45fr) minmax(0, 1fr); }
  .blog-card-featured { grid-column: auto; }
  .blog-notes { width: min(100%, 22rem); margin-top: 2rem; }
  .review-item { grid-template-columns: 1fr; }
  .review-quote.has-columns { column-count: 1; }
  .home-hero { min-height: 108svh; padding: 0; }
  .hero:not(.home-hero) { min-height: auto; padding-top: 9rem; }
  .hero-image { order: 2; }
  .hero-content { align-items: center; text-align: center; }
  .hero-content-overlay { min-height: 108svh; align-items: flex-start; justify-content: flex-end; padding-bottom: clamp(7rem, 24vw, 10rem); text-align: left; }
  .hero-actions { justify-content: center; }
  .journal-aside { position: static; }
  .footer { flex-direction: column; text-align: center; }
  .footer-nav ul { flex-wrap: wrap; justify-content: center; }
  .footer-social { justify-content: center; }
  .lightbox-prev { left: 1rem; }
  .lightbox-next { right: 1rem; }
  .lightbox-close { top: 1rem; right: 1rem; }
}

@media (max-width: 500px) {
  .site-header { padding-block: 1rem; }
  .gallery { grid-template-columns: 1fr; }
  .lightbox { padding: 1rem; }
  .lightbox-content { width: 100%; }
  .lightbox-content > button { width: 44px; height: 44px; }
  .lightbox-prev { left: .25rem; }
  .lightbox-next { right: .25rem; }
}

/* Bewegungen für Personen mit reduzierter Bewegungsempfindlichkeit minimieren. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}