/* Blende — Craft-CMS-Theme fuer Fotografie
   Craft CMS 5 Theme. Kein Build-Step: diese Datei wird direkt ausgeliefert.
   Schriften liegen als subsettete woff2 unter ../fonts/. */
@font-face{font-family:"BL Display";src:url(../fonts/cormorant.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"BL Display";src:url(../fonts/cormorant-med.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"BL Text";src:url(../fonts/nimbussans-reg.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"BL Text";src:url(../fonts/nimbussans-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"BL Mono";src:url(../fonts/adwaitamono.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Dunkelkammer: warmes Fast-Schwarz, Graustufen, und ein einziges Rot —
     Fettstift auf dem Kontaktbogen. Es markiert, es fuellt nie. */
  --ground:#0e0d0c;
  --panel:#171614;
  --sheet:#1c1a18;
  --ink:#e9e6e1;
  --ink-2:#8b8781;
  --line:#2a2825;
  --mark:#d33a2c;
  --accent:var(--ink);
}
@media (prefers-color-scheme:light){
  :root{
    --ground:#f1efec;--panel:#ffffff;--sheet:#e6e3de;
    --ink:#141312;--ink-2:#6c6862;--line:#dcd9d4;
    --mark:#be3526;--accent:var(--ink);
  }
}
:root[data-theme="light"]{
  --ground:#f1efec;--panel:#ffffff;--sheet:#e6e3de;
  --ink:#141312;--ink-2:#6c6862;--line:#dcd9d4;
  --mark:#be3526;--accent:var(--ink);
}
:root[data-theme="dark"]{
  --ground:#0e0d0c;--panel:#171614;--sheet:#1c1a18;
  --ink:#e9e6e1;--ink-2:#8b8781;--line:#2a2825;
  --mark:#d33a2c;--accent:var(--ink);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"BL Text",Helvetica,Arial,sans-serif;font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px}

.wrap{width:min(1240px,100% - 3rem);margin-inline:auto}
.band{padding-block:clamp(3rem,7vw,5.5rem)}
.band--tight{padding-block:clamp(2rem,4vw,3rem)}
.stack{display:flex;flex-direction:column}

h1,h2,h3{font-family:"BL Display",Georgia,serif;font-weight:400;margin:0;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(3rem,8vw,6.5rem);letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.6vw,3.2rem)}
h3{font-size:1.3rem}
p{margin:0}
.lede{font-size:clamp(1rem,1.7vw,1.14rem);color:var(--ink-2);max-width:56ch}

/* Mono traegt alles Technische: Bildnummern, Blende, Zeit, ISO. */
.mono{
  font-family:"BL Mono",ui-monospace,monospace;font-size:.74rem;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
.eyebrow{
  font-family:"BL Mono",monospace;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-2);
}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:"BL Mono",monospace;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.8rem 1.4rem;text-decoration:none;cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--line);
  transition:border-color .2s,color .2s;
}
.btn:hover{border-color:var(--ink);}
.btn--mark{border-color:var(--mark);color:var(--mark)}
.btn--mark:hover{background:var(--mark);color:var(--ground);border-color:var(--mark)}

/* ---------- Bildplatten: Verlauf plus Korn statt echter Fotos ---------- */
/* display:block ist Pflicht — die Platten sitzen teils auf <span>, und
   Inline-Elemente ignorieren aspect-ratio. */
.plate{display:block;position:relative;overflow:hidden;background:#222;isolation:isolate}
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>");
  mix-blend-mode:overlay;opacity:.55;
}
.plate--a{background:
  radial-gradient(70% 90% at 22% 18%,#6d768a 0%,transparent 55%),
  radial-gradient(60% 70% at 80% 30%,#c9a06a 0%,transparent 60%),
  linear-gradient(178deg,#2a3140 0%,#161a22 60%,#0c0e12 100%)}
.plate--b{background:
  linear-gradient(102deg,#d8d4cd 0 38%,#a49e94 38% 41%,#c6c1b8 41% 100%),
  #b8b3a9}
.plate--c{background:
  radial-gradient(45% 55% at 44% 34%,#e5cdb6 0%,#a8836a 45%,transparent 70%),
  linear-gradient(190deg,#3b2f28 0%,#191310 100%)}
.plate--d{background:
  linear-gradient(184deg,#9fb6c4 0 42%,#5d7a8c 42% 58%,#2f4453 58% 100%)}
.plate--e{background:
  radial-gradient(80% 60% at 30% 80%,#3f5a3a 0%,transparent 60%),
  linear-gradient(170deg,#1d2a1c 0%,#0e150e 100%)}
.plate--f{background:
  linear-gradient(96deg,#1a1a1c 0 30%,#3a3a3e 30% 34%,#141416 34% 100%),
  radial-gradient(50% 40% at 70% 20%,#8a8378 0%,transparent 60%),#121213}

/* ---------- Kopf ---------- */
.masthead{border-bottom:1px solid var(--line)}
/* padding statt nur min-height: bei align-items:baseline richtet sich alles an
   der Grundlinie des hoechsten Elements aus, und der Schriftzug klebte dann
   oben am Rand. Der Innenabstand gibt ihm Luft und haelt sie beim Umbruch. */
.masthead__row{display:flex;align-items:baseline;gap:2rem;min-height:74px;flex-wrap:wrap;padding-block:1.15rem}
.mark{text-decoration:none;display:flex;align-items:baseline;gap:.7rem}
.mark strong{font-family:"BL Display",serif;font-weight:400;font-size:1.5rem;letter-spacing:.01em}
.mark span{font-family:"BL Mono",monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.nav{margin-left:auto;display:flex;gap:1.6rem;align-items:center}
.nav a:not(.btn){
  font-family:"BL Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);transition:color .2s;
}
.nav a:not(.btn):hover{color:var(--ink)}
@media (max-width:860px){.nav a:not(.btn){display:none}}

/* ---------- Aufschlagseite ---------- */
.opening{position:relative}
.opening__plate{aspect-ratio:16/9;width:100%}
@media (max-width:700px){.opening__plate{aspect-ratio:4/5}}
.opening__caption{
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-block:.9rem;border-bottom:1px solid var(--line);color:var(--ink-2);
}
.opening__title{padding-block:clamp(2rem,5vw,3.5rem)}
.opening__title h1{max-width:14ch}
.opening__title .lede{margin-top:1.4rem}

/* Der Hero der Startseite. Zu diesen beiden Klassen gab es bisher gar keine
   Regel: die Lede sass direkt an der Ueberschrift, und bei line-height 1.06
   ragt die Unterlaenge eines "g" dann mitten in die erste Textzeile. Der
   Abstand kommt als gap, damit er auch fuer weitere Kinder gilt. */
.hero__inner{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(1.4rem,2.4vw,2.1rem);
}
.hero__inner h1{max-width:16ch}

/* ---------- Kontaktbogen: das Signature-Element ---------- */
.viewer{display:grid;grid-template-columns:1fr minmax(0,300px);gap:2rem;align-items:start}
@media (max-width:900px){.viewer{grid-template-columns:1fr}}
.viewer__plate{aspect-ratio:3/2;width:100%}
.viewer__meta{display:flex;flex-direction:column;gap:1rem;padding-top:.2rem}
.viewer__meta h3{font-size:1.5rem;line-height:1.15}
.viewer__meta p{color:var(--ink-2);font-size:.95rem}
.exif{border-top:1px solid var(--line);width:100%;border-collapse:collapse}
.exif th,.exif td{
  text-align:left;padding:.5rem 0;border-bottom:1px solid var(--line);
  font-family:"BL Mono",monospace;font-size:.72rem;letter-spacing:.04em;
}
.exif th{color:var(--ink-2);font-weight:400;width:46%;text-transform:uppercase}
.exif td{font-variant-numeric:tabular-nums}

.sheet{background:var(--sheet);border:1px solid var(--line);padding:clamp(1rem,2.5vw,1.6rem)}
.sheet__head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}

/* Filmstreifen: Perforation oben und unten, Bildnummern im Steg. */
.strip{position:relative;padding-block:14px;border-block:1px solid var(--line)}
.strip + .strip{margin-top:1.1rem}
.strip::before,.strip::after{
  content:"";position:absolute;left:0;right:0;height:14px;
  background-image:radial-gradient(circle at 7px 50%,var(--ground) 0 3.2px,transparent 3.4px);
  background-size:18px 14px;opacity:.85;
}
.strip::before{top:0}
.strip::after{bottom:0}
.strip__row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
@media (max-width:820px){.strip__row{grid-template-columns:repeat(3,1fr)}}

.frame{
  position:relative;padding:0;border:0;background:none;cursor:pointer;
  display:block;width:100%;
}
.frame__img{aspect-ratio:3/2;width:100%;transition:opacity .2s}
.frame:hover .frame__img{opacity:.82}
.frame__no{
  display:block;margin-top:.3rem;text-align:left;
  font-family:"BL Mono",monospace;font-size:.62rem;letter-spacing:.08em;color:var(--ink-2);
}
/* Der Fettstift-Ring — nur hier taucht das Rot auf.
   z-index ist Pflicht: ::before steht im DOM vor .frame__img, beide sind
   positioniert und ohne z-index entscheidet allein die Reihenfolge. Das Bild
   malte also ueber den Ring, sichtbar blieb nur der seitliche Ueberstand —
   ein abgerissener roter Bogen statt eines Kringels. */
.frame[aria-pressed="true"]::before{
  content:"";position:absolute;left:-5px;right:-5px;top:-5px;z-index:1;
  height:calc(100% - 1.1rem + 10px);
  border:2.5px solid var(--mark);border-radius:52% 48% 50% 50% / 48% 52% 48% 52%;
  transform:rotate(-1.5deg);pointer-events:none;opacity:.95;
}
.frame[aria-pressed="true"] .frame__no{color:var(--mark)}

/* ---------- Galerien ---------- */
.galleries{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem}
.gallery{display:flex;flex-direction:column;gap:.8rem;text-decoration:none}
.gallery__plate{aspect-ratio:4/5}
.gallery__row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.gallery h3{font-size:1.22rem}
.gallery__meta{color:var(--ink-2)}
.gallery__count{color:var(--ink-2)}

/* ---------- Text ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.prose p + p{margin-top:1em}

/* ---------- Zitat ---------- */
.quote{border-block:1px solid var(--line)}
.quote blockquote{
  margin:0;font-family:"BL Display",serif;font-size:clamp(1.5rem,3.6vw,2.4rem);
  line-height:1.28;max-width:30ch;
}
.quote cite{
  display:block;margin-top:1.3rem;font-style:normal;
  font-family:"BL Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);
}

/* ---------- Kontakt ---------- */
.cta__inner{display:flex;flex-direction:column;gap:1.3rem;align-items:flex-start}

/* ---------- Fuss ---------- */
.foot{border-top:1px solid var(--line)}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem}
@media (max-width:820px){.foot__grid{grid-template-columns:1fr 1fr}}
.foot h4{
  font-family:"BL Mono",monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 .9rem;font-weight:400;
}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.92rem}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
.foot__legal{
  border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.2rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:"BL Mono",monospace;font-size:.68rem;letter-spacing:.06em;color:var(--ink-2);
}

/* ---------- Steckbrief ---------- */
.spec{background:var(--panel);border-top:3px solid var(--mark)}
.spec__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem 2.5rem}
.spec dt{font-family:"BL Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.5rem}
.spec dd{margin:0;font-size:.92rem}
.swatches{display:flex;border:1px solid var(--line);width:fit-content}
.swatches span{width:44px;height:30px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{font-family:"BL Mono",monospace;font-size:.66rem;padding:.3rem .55rem;border:1px solid var(--line);color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   Content-Builder-Bausteine
   Eigene, stabile Klassen — sie leihen sich nichts aus dem Demo-Markup und
   bedienen sich ausschliesslich der Farb- und Schrift-Tokens dieses Themes.
   ========================================================================== */

img{max-width:100%;height:auto;display:block}

/* ---------- Fliesstext aus dem CMS ---------- */
.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}
.prose p{margin:0 0 1em}
.prose h2,.prose h3{margin:1.6em 0 .5em}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.4em}
.prose li{margin-bottom:.35em}
.prose a{color:var(--accent)}
.split--first{order:-1}

/* ---------- Angebots-Grid ---------- */
.cb-offers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.4rem;margin-top:2rem;
}
.cb-offer{
  display:flex;flex-direction:column;gap:.7rem;
  padding:1.6rem 1.5rem;
  border:1px solid var(--line);
  background:var(--panel);
}
.cb-offer__title{margin:0}
.cb-offer__desc{font-size:.95rem;color:var(--ink-2)}
.cb-offer__price{
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);
  color:var(--accent);font-size:1.05rem;font-variant-numeric:tabular-nums;
}

/* ---------- Kennzahlen ---------- */
.cb-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.cb-stat{
  background:var(--ground);padding:1.6rem 1.4rem;
  display:flex;flex-direction:column;gap:.3rem;
}
.cb-stat__val{
  font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.05;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.cb-stat__lbl{font-size:.8rem;line-height:1.4;color:var(--ink-2)}

/* ---------- Zitat ---------- */
.cb-quote{background:var(--panel);border-block:1px solid var(--line)}
.cb-quote blockquote{
  margin:0;max-width:30ch;
  font-size:clamp(1.35rem,3.2vw,2.1rem);line-height:1.3;
}
.cb-quote cite{
  display:block;margin-top:1.3rem;font-style:normal;
  font-size:.8rem;letter-spacing:.1em;color:var(--ink-2);
}

/* ---------- Call-to-Action ---------- */
.cb-cta{background:var(--accent);color:var(--ground)}
.cb-cta h2{max-width:18ch}
.cb-cta .prose{max-width:52ch;opacity:.85}
.cb-cta .prose a{color:inherit}
.cb-cta__inner{display:flex;flex-direction:column;gap:1.3rem;align-items:flex-start}
.cb-cta .btn{background:var(--ground);color:var(--accent);border-color:var(--ground)}
.cb-cta .btn:hover{background:transparent;color:var(--ground);border-color:var(--ground)}

/* ---------- Ablauf ---------- */
.cb-steps{display:grid;gap:0;border-top:1px solid var(--line);margin-top:2rem}
.cb-step{
  display:grid;grid-template-columns:9rem 1fr;gap:1.5rem;align-items:baseline;
  padding-block:1.5rem;border-bottom:1px solid var(--line);
}
.cb-step__when{font-size:.82rem;letter-spacing:.06em;color:var(--accent)}
.cb-step__body{display:flex;flex-direction:column;gap:.4rem}
.cb-step__body .prose{color:var(--ink-2);font-size:.95rem;max-width:62ch}
@media (max-width:640px){
  .cb-step{grid-template-columns:1fr;gap:.4rem}
}

/* ---------- Signature-Baustein ---------- */
/* Bilder in den Platten */
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.viewer__plate,.frame__img,.gallery__plate,.opening__plate{background:var(--panel)}

/* Fallback fuer <gh-gallery>: ohne das Web Component ist das Element unbekannt
   und die Bilder wuerden untereinander stehen.
   :not(:defined) ist dabei nicht schmueckend, sondern der ganze Punkt. Ein
   Shadow DOM hebt Regeln auf dem Host nicht auf — ohne die Einschraenkung
   legte dieses Raster sich nach dem Laden ueber das der Komponente, und man
   saehe ein Raster im Raster. Sobald customElements.define laeuft, gilt das
   Element als defined und diese Regeln fallen weg. */
gh-gallery:not(:defined){
  display:grid;
  grid-template-columns:repeat(var(--gh-columns,3),1fr);
  gap:8px;
}
gh-gallery:not(:defined) > img,
gh-gallery:not(:defined) > video{
  width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;
}
@media (max-width:700px){
  gh-gallery:not(:defined){grid-template-columns:repeat(2,1fr)}
}