/* ============================================================
   APARTHOTEL THÜRINGER HOF · Design-System „Berlin-Kontrast"
   Welten: Archiv 1923 · Samt & Messing · Kiez · Beton & Spray
   ============================================================ */

:root{
  --paper:#FCFAF8;
  --sand:#F4EEE6;
  --sand-deep:#EAE0D2;
  --ink:#2C221E;
  --ink-soft:#5C4F47;
  --brass:#AA8C64;
  --brass-soft:#C9B491;
  --bordeaux:#8C2B2B;
  --velvet:#5E1F23;
  --velvet-deep:#451518;
  --terra:#C4622D;
  --saffron:#D9A441;
  --concrete:#DAD6CF;
  --concrete-deep:#B9B4AB;
  --night:#1A1512;
  --spray:#E64A2E;
  --neon:#FF5FA2;

  --serif:"Playfair Display", Georgia, serif;
  --sans:"Inter", -apple-system, sans-serif;
  --street:"Archivo Black", sans-serif;
  --mono:"Special Elite", "Courier New", monospace;

  --w:min(1200px, 92vw);
  --ease:cubic-bezier(.22,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:16.5px;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--bordeaux);color:var(--paper)}

.wrap{width:var(--w);margin-inline:auto}

/* ---------- Filmkorn über allem ---------- */
body::after{
  content:"";position:fixed;inset:-50%;z-index:2000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}
  30%{transform:translate(3%,-2%)}50%{transform:translate(-3%,2%)}
  70%{transform:translate(2%,3%)}90%{transform:translate(-2%,1%)}
}

/* ============ TYPO ============ */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em}
.overline{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);display:block;margin-bottom:1.1rem;
}
.overline--light{color:var(--brass-soft)}
h2.sec-title{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:1.2rem}
.street-word{
  font-family:var(--street);letter-spacing:.01em;font-weight:400;
  display:inline-block;transform:rotate(-1.5deg);
}
.spray{color:var(--spray)}
.lead{font-size:1.2rem;color:var(--ink-soft);max-width:62ch}
.mono-line{font-family:var(--mono);font-size:.85rem;letter-spacing:.08em;color:var(--ink-soft)}

/* riesige Deko-Zahl */
.giant-num{
  position:absolute;font-family:var(--serif);font-weight:700;
  font-size:clamp(10rem,26vw,22rem);line-height:1;pointer-events:none;user-select:none;
  color:transparent;-webkit-text-stroke:1.5px var(--brass);opacity:.22;z-index:0;
}
.booking-stag{
  position:absolute;top:clamp(1rem,4vw,4rem);right:-6vw;width:clamp(300px,38vw,640px);height:auto;
  opacity:.075;pointer-events:none;user-select:none;z-index:0;
}
.booking-stag.is-fixed{
  position:fixed;
  top:clamp(5rem,8vw,8rem);
  right:-6vw;
  bottom:auto;
}
.booking-stag + .wrap{position:relative;z-index:1}
.request-stag{
  position:absolute;left:28%;bottom:-8rem;width:clamp(440px,48vw,740px);height:auto;
  opacity:.055;pointer-events:none;user-select:none;z-index:0;will-change:transform;
}
.request-stag.is-fixed{
  position:fixed;
  left:28%;
  top:12vh;
  bottom:auto;
  transform:none !important;
}
#anfrage .wrap{position:relative;z-index:1}
#anfrage .rv-l > img{position:relative;z-index:1}
#anfrage-form{scroll-margin-top:8rem}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;flex:none;white-space:nowrap;
  font-family:var(--sans);font-weight:600;font-size:.92rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.95rem 1.9rem;border:1.5px solid var(--ink);
  color:var(--ink);background:transparent;cursor:pointer;
  position:relative;overflow:hidden;transition:color .35s var(--ease);
  isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:scaleX(1)}
.btn--bordeaux{border-color:var(--bordeaux);color:var(--bordeaux)}
.btn--bordeaux::before{background:var(--bordeaux)}
.btn--bordeaux:hover{color:var(--paper)}
.btn--solid{background:var(--bordeaux);border-color:var(--bordeaux);color:var(--paper)}
.btn--solid::before{background:var(--ink)}
.btn--light{border-color:var(--paper);color:var(--paper)}
.btn--light::before{background:var(--paper)}
.btn--light:hover{color:var(--ink)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ============ HEADER ============ */
.topbar{
  background:var(--night);color:var(--brass-soft);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;
  text-align:center;padding:.42rem 1rem;position:relative;z-index:60;
}
header.site{
  position:fixed;top:33px;left:0;right:0;z-index:50;
  transition:background .4s,box-shadow .4s,transform .4s,top .4s;
  padding:1.1rem 0;
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem}
header.site.scrolled{
  top:0;
  background:rgba(252,250,248,.92);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--brass-soft);padding:.65rem 0;
}
/* Unterseiten: heller Header bleibt beim Scrollen sichtbar, ohne den Inhalt zu überdecken. */
header.site.solid{position:sticky !important;top:0 !important}
.brand{display:flex;align-items:center;gap:.8rem;color:var(--paper);transition:color .4s}
header.site.scrolled .brand,header.site.solid .brand{color:var(--ink)}
.brand svg{width:44px;height:44px;flex:none}
.logo-img{display:block}
header.site:not(.scrolled):not(.solid) .logo-img{
  filter:brightness(1.55) contrast(1.05) drop-shadow(0 1px 8px rgba(0,0,0,.55));
}
.brand-name{
  font-family:"Marcellus",var(--serif);font-size:1.5rem;letter-spacing:.07em;
  color:var(--paper);transition:color .4s;white-space:nowrap;line-height:1;
}
header.site.scrolled .brand-name,header.site.solid .brand-name{color:var(--ink)}

/* Berlin-Bär im Hero */
.berlin-word{white-space:nowrap}
.bear-glyph{
  height:1.1em;width:auto;display:inline-block;vertical-align:-.13em;
  margin-right:.01em;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));
}
.brand .b-name{font-family:var(--serif);font-size:1.25rem;font-weight:700;line-height:1;letter-spacing:.01em}
.brand .b-sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;opacity:.75}
nav.main{display:flex;align-items:center;gap:1.9rem}
nav.main a{
  font-size:.9rem;font-weight:500;letter-spacing:.04em;color:var(--paper);
  position:relative;padding:.2rem 0;transition:color .4s;
}
header.site.scrolled nav.main a,header.site.solid nav.main a{color:var(--ink)}
nav.main a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
nav.main a:hover::after,nav.main a.active::after{transform:scaleX(1)}
.lang{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:inherit;opacity:.85}
.lang b{color:var(--brass)}
nav.main a.nav-cta,
header.site.scrolled nav.main a.nav-cta,
header.site.solid nav.main a.nav-cta{padding:.6rem 1.3rem;font-size:.8rem;color:var(--paper)}
nav.main a.nav-cta::after{display:none}
.burger{display:none}

/* ============ HERO COLLAGE ============ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--night);overflow:hidden;color:var(--paper);
}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 60%;
  animation:kenburns 20s var(--ease) infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1) translate(0,0)}
  to{transform:scale(1.09) translate(-1.5%,1.5%)}
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(10deg,rgba(20,12,10,.88) 0%,rgba(20,12,10,.45) 38%,rgba(20,12,10,.05) 70%),
    linear-gradient(90deg,rgba(20,12,10,.55),transparent 45%);
}
/* Collage-Schnipsel */
.snip{position:absolute;z-index:3;box-shadow:0 18px 50px rgba(0,0,0,.45);will-change:transform}
.snip img{width:100%;height:100%;object-fit:cover}
.snip--archive{
  top:16vh;right:-3%;width:clamp(180px,22vw,330px);aspect-ratio:3/4;
  transform:rotate(3deg);filter:sepia(.85) contrast(1.05);
  clip-path:polygon(2% 0,97% 1%,100% 30%,98% 68%,100% 97%,55% 100%,3% 98%,0 60%,2% 28%);
  border:10px solid #f6efdf;border-bottom-width:34px;background:#f6efdf;
}
.snip--street{
  bottom:-4vh;right:14%;width:clamp(150px,17vw,260px);aspect-ratio:4/5;
  transform:rotate(-4deg);
  clip-path:polygon(0 4%,30% 0,100% 2%,98% 55%,100% 96%,60% 100%,0 97%,3% 40%);
}
.snip .tape{
  position:absolute;top:-14px;left:50%;width:92px;height:28px;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(233,222,193,.85);box-shadow:0 2px 6px rgba(0,0,0,.15);z-index:4;
}
.snip .cap{
  position:absolute;bottom:-30px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.72rem;color:#7a6a52;letter-spacing:.05em;
}
.hero-inner{position:relative;z-index:5;width:var(--w);margin-inline:auto;padding:9rem 0 max(19vh,12.5rem)}
.hero .overline{color:var(--brass-soft)}
.hero h1{
  font-size:clamp(2.9rem,7.4vw,7rem);font-weight:700;color:var(--paper);
  max-width:12ch;margin-bottom:1.4rem;
}
.hero h1 .street-word{font-size:.88em;color:var(--paper)}
.hero-sub{font-size:clamp(1.02rem,1.5vw,1.3rem);color:rgba(252,250,248,.85);max-width:52ch;margin-bottom:2.2rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}
/* Wort-Masken-Animation */
.mask-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mask-line>span{display:inline-block;transform:translateY(110%);animation:riseUp 1s var(--ease) forwards}
@keyframes riseUp{to{transform:translateY(0)}}
.hero .scroll-hint{
  position:absolute;bottom:5.4rem;left:50%;transform:translateX(-50%);z-index:6;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;color:rgba(252,250,248,.6);
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
.mouse{
  width:22px;height:34px;border:1.5px solid rgba(252,250,248,.7);border-radius:12px;
  position:relative;display:block;
}
.mouse::after{
  content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;border-radius:2px;
  background:var(--brass);transform:translateX(-50%);
  animation:wheel 1.8s var(--ease) infinite;
}
@keyframes wheel{0%{opacity:1;top:6px}70%{opacity:0;top:16px}100%{opacity:0;top:6px}}

/* Anfrage-Leiste überlappend */
.quickbar{
  position:relative;z-index:8;margin-top:-4.4rem;margin-bottom:0;
}
.quickbar-in{
  background:var(--paper);border:1px solid var(--brass-soft);
  box-shadow:0 24px 60px rgba(30,20,15,.18);
  display:grid;grid-template-columns:repeat(3,1fr) auto;gap:0;
}
.quickbar .qf{
  padding:.7rem 1.4rem;border-right:1px solid var(--sand-deep);
  display:flex;flex-direction:column;gap:.15rem;
}
.quickbar label{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.quickbar input,.quickbar select{
  border:none;background:none;font-family:var(--sans);font-size:1rem;color:var(--ink);outline:none;
}
.quickbar .btn{border:none;background:var(--bordeaux);color:var(--paper);height:100%;padding:.85rem 2.4rem}
.quickbar .btn::before{background:var(--ink)}

/* ============ MARQUEE ============ */
.marquee{
  background:var(--night);color:var(--paper);overflow:hidden;
  padding:1.05rem 0;position:relative;z-index:4;
}
.quickbar + .marquee{border-top:5px solid var(--paper)}
.marquee--paper{background:var(--sand);color:var(--ink);border-block:1px solid var(--sand-deep)}
.marquee-track{display:flex;width:max-content;animation:mq 55s linear infinite;gap:0}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track.rev{animation-direction:reverse}
.mq-set{display:flex;align-items:center;white-space:nowrap}
.mq-set span{
  font-family:var(--serif);font-size:1.25rem;font-style:italic;padding:0 1.4rem;
}
.mq-set span.st{font-family:var(--street);font-style:normal;font-size:1.05rem;letter-spacing:.05em}
.mq-set span.sp{color:var(--spray)}
.mq-set i{color:var(--brass);font-style:normal}
/* Zitate-Variante */
.mq-set .q{font-family:var(--serif);font-style:italic;font-size:1.15rem;padding:0 1rem 0 2rem}
.mq-set .att{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);padding-right:2rem;white-space:nowrap;align-self:center;
}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ SEKTIONEN / WELTEN ============ */
section{position:relative}
.sec{padding:7rem 0}
.sec--sand{background:var(--sand)}
.sec--night{background:var(--night);color:var(--paper)}
.sec--velvet{
  background:
    radial-gradient(120% 90% at 20% 10%,rgba(255,255,255,.06),transparent 60%),
    linear-gradient(160deg,var(--velvet) 0%,var(--velvet-deep) 100%);
  color:var(--paper);
}
.sec--concrete{
  background:
    linear-gradient(180deg,var(--concrete) 0%,#CFCAC1 100%);
}
/* Sektionsübergänge: ruhig & editorial (Abriss-Kanten entfernt nach Feedback) */
.torn-top,.torn-bottom{position:relative}

/* Split-Layouts */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.split--narrow{gap:3rem}
.contact-directions{grid-template-columns:1fr 1fr}
.contact-map-placeholder{display:none}
.contact-awning-bottom{display:none}
.contact-awning-image{display:block;width:100%;height:clamp(520px,46vw,760px);object-fit:cover;object-position:68% center}
.contact-form-section{margin-top:1.75rem !important}
@media(min-width:761px){
  .contact-directions{position:relative}
  .contact-awning-top{
    position:absolute;
    top:0;
    right:0;
    width:calc((100% - 4.5rem) / 2);
  }
}

/* ============ HIRSCH & SIEGEL ============ */
.deer-mark{stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.poly-deer path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.poly-deer path.f{fill:currentColor;stroke:none}
.stag-asset{pointer-events:none}
.stag-asset--paper{filter:brightness(0) invert(1)}
.stag-asset--mist{filter:brightness(0) invert(.72)}
.stag-asset--brass{filter:invert(59%) sepia(15%) saturate(1052%) hue-rotate(351deg) brightness(91%) contrast(85%)}
.stag-asset--bordeaux{filter:brightness(0) saturate(100%) invert(20%) sepia(36%) saturate(2785%) hue-rotate(334deg) brightness(93%) contrast(91%)}
.watermark{
  position:absolute;right:-6%;top:8%;width:min(46vw,560px);opacity:.055;z-index:0;
  pointer-events:none;color:var(--ink);
}
.sec--intro .watermark{opacity:.085}
/* Willkommen: Hirsch steht fest im Fenster, die Seite gleitet darueber.
   clip-path begrenzt das fixierte Element auf die Sektion. */
.sec--intro{
  clip-path:inset(0);
  min-height:78vh;display:flex;align-items:center;padding:9rem 0;
}
.sec--intro .watermark{
  position:fixed;top:50%;right:4vw;left:auto;
  width:min(40vw,62vh);transform:translateY(-50%);
  opacity:.09;
}
@media (max-width:720px){
  .sec--intro{min-height:auto;padding:6rem 0}
  .sec--intro .watermark{width:min(78vw,56vh);right:-14vw;opacity:.07}
}
.sec--velvet .watermark,.sec--night .watermark{color:var(--paper);opacity:.06}
.sec--velvet .watermark{opacity:.1}
.sec--velvet > .watermark{display:none}
.velvet-stag{
  position:absolute;
  left:-8%;
  bottom:-10%;
  width:min(52vw,650px);
  height:auto;
  opacity:.085;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.sec--velvet .wrap{position:relative;z-index:1}
.seal{
  width:128px;height:128px;position:relative;flex:none;
  animation:spin 60s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.seal text{
  font-family:var(--mono);font-size:10.5px;letter-spacing:3.2px;fill:currentColor;
}
.seal-wrap{color:var(--bordeaux)}
.seal-wrap--brass{color:var(--brass)}
.seal-abs{position:absolute;z-index:9}
.seal-stag{
  position:absolute;left:50%;top:50%;width:36%;height:48%;object-fit:contain;
  transform:translate(-50%,-50%);pointer-events:none;z-index:1;
}
.divider{
  display:flex;align-items:center;gap:1.2rem;justify-content:center;
  margin:0 auto 2.6rem;color:var(--brass);max-width:420px;
}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--brass);opacity:.5}
.divider svg,.divider-stag{width:38px;height:46px;flex:none;object-fit:contain;display:block}

/* ============ ARCHIV-WELT ============ */
.sec--archive{
  background:
    radial-gradient(90% 70% at 80% 15%,rgba(170,140,100,.12),transparent 60%),
    var(--paper);
}
.polaroid{
  background:#F8F2E4;padding:14px 14px 48px;box-shadow:0 20px 45px rgba(44,34,30,.22);
  position:relative;transform:rotate(-2.5deg);max-width:440px;
}
.polaroid img{filter:sepia(.7) contrast(1.02)}
.polaroid .p-cap{
  position:absolute;bottom:12px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.8rem;color:#7a6a52;
}
.polaroid .tape{
  position:absolute;width:96px;height:30px;background:rgba(224,209,176,.85);
  box-shadow:0 2px 6px rgba(0,0,0,.12);top:-14px;left:50%;transform:translateX(-50%) rotate(-4deg);
}
.polaroid.rot2{transform:rotate(2deg)}
/* Heritage-Reveal (JS toggelt .revealed) */
.h-reveal{transition:filter 1.4s var(--ease),transform 1.4s var(--ease)}
.h-reveal .polaroid img{transition:filter 1.6s var(--ease)}
.h-reveal.revealed .polaroid img{filter:sepia(.12) contrast(1.02)}
.h-reveal .seal-abs{transform:scale(0);transition:transform .7s .8s cubic-bezier(.34,1.56,.64,1)}
.h-reveal.revealed .seal-abs{transform:scale(1)}
.counter-line{
  font-family:var(--serif);font-size:clamp(3rem,7vw,5.2rem);font-weight:700;line-height:1;
  display:flex;align-items:baseline;gap:1.2rem;margin:1.6rem 0;
}
.counter-line .to{font-size:.5em;color:var(--brass);font-style:italic}
.stamp{
  display:inline-block;font-family:var(--mono);font-size:.85rem;letter-spacing:.2em;
  color:var(--bordeaux);border:2px solid var(--bordeaux);padding:.35rem .9rem;
  transform:rotate(-3deg);text-transform:uppercase;opacity:.85;border-radius:3px;
}

/* ============ APARTMENTS ============ */
.ap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3.5rem}
.ap-card{
  background:var(--paper);position:relative;display:block;
  border:1px solid var(--sand-deep);transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
.ap-card:hover{box-shadow:0 26px 60px rgba(44,34,30,.16);transform:translateY(-6px)}
.ap-card .ap-img{overflow:hidden;aspect-ratio:4/3;position:relative}
.ap-card .ap-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ap-card:hover .ap-img img{transform:scale(1.07)}
.ap-card .ap-tag{
  position:absolute;top:1rem;left:1rem;z-index:2;background:rgba(26,21,18,.82);color:var(--brass-soft);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.32rem .7rem;backdrop-filter:blur(4px);
}
.ap-card .ap-body{padding:1.6rem 1.6rem 1.8rem;position:relative}
.ap-card .ap-body::before{
  content:"";position:absolute;top:0;left:1.6rem;right:1.6rem;height:1.5px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.ap-card:hover .ap-body::before{transform:scaleX(1)}
.ap-card h3{font-size:1.5rem;margin-bottom:.4rem}
.ap-card .ap-meta{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);letter-spacing:.06em;margin-bottom:.7rem}
.ap-card p{font-size:.95rem;color:var(--ink-soft)}
.ap-card .ap-link{
  margin-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bordeaux);
}
.ap-card .ap-link .arr{transition:transform .3s}
.ap-card:hover .ap-link .arr{transform:translateX(5px)}

/* Apartments-Übersicht: editoriale Splits */
.ap-row{display:grid;grid-template-columns:1.15fr 1fr;gap:4rem;align-items:center;padding:4.5rem 0;border-bottom:1px solid var(--sand-deep)}
.ap-row:nth-child(even){grid-template-columns:1fr 1.15fr}
.ap-row:nth-child(even) .ap-row-img{order:2}
.ap-row-img{overflow:hidden;position:relative}
.ap-row-img img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .9s var(--ease)}
.ap-row:hover .ap-row-img img{transform:scale(1.05)}
.ap-row h3{font-size:clamp(1.8rem,3vw,2.5rem)}
.ap-row .num{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:1.1rem}

/* ============ KIEZ (editorialer Index) ============ */
.sec--kiez{
  background:linear-gradient(180deg,#F7EFE3 0%,#F2E6D4 100%);
}
.sec--kiez .nk{font-style:italic;color:var(--terra);font-weight:600}
.kiez-index ol{list-style:none;counter-reset:none;border-top:1px solid var(--sand-deep)}
.kiez-index ol li{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:baseline;
  padding:1.5rem 0;border-bottom:1px solid var(--sand-deep);
}
.kiez-index .ki-num{
  font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--brass);line-height:1;
}
.kiez-index h3{font-size:1.3rem;margin-bottom:.3rem}
.kiez-index p{font-size:.93rem;color:var(--ink-soft)}
.kiez-index .ki-min{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--ink-soft);white-space:nowrap;
}
.dist-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 0;border-bottom:1px dashed var(--concrete-deep);
  font-size:.98rem;
}
.dist-list li b{font-weight:600}
.dist-list li span{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);white-space:nowrap}

/* ============ AUSSTATTUNG ICONS ============ */
.amen-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem;margin-top:3rem}
.amen{
  text-align:center;padding:1.6rem .8rem;border:1px solid var(--sand-deep);
  transition:border-color .3s,transform .3s;background:var(--paper);
}
.amen:hover{border-color:var(--brass);transform:translateY(-4px)}
.amen svg{width:38px;height:38px;margin:0 auto .8rem;color:var(--brass);stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.amen span{font-size:.82rem;font-weight:500;display:block;line-height:1.35}

/* ============ GALERIE ============ */
.mosaic{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:5px;
}
.mosaic a{overflow:hidden;position:relative;display:block}
.mosaic a img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .8s}
.mosaic a:hover img{transform:scale(1.06)}
.mosaic .tall{grid-row:span 2}
.mosaic .wide{grid-column:span 2}
.mosaic .big{grid-column:span 2;grid-row:span 2}

/* ============ FORMULARE ============ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.8rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1/-1}
.field label{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
.field label b{color:var(--bordeaux)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  padding:.85rem 1rem;border:1px solid var(--sand-deep);background:var(--paper);
  outline:none;transition:border-color .3s,box-shadow .3s;border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brass);box-shadow:0 0 0 3px rgba(170,140,100,.18);
}
.field textarea{min-height:120px;resize:vertical}
.form-note{font-size:.85rem;color:var(--ink-soft)}

/* ============ FOOTER ============ */
footer.site{
  background:var(--night);color:rgba(252,250,248,.78);padding:5rem 0 2.5rem;position:relative;overflow:hidden;
}
footer.site .f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;position:relative;z-index:2}
footer.site h4{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);margin-bottom:1.2rem;font-weight:400;
}
footer.site a:hover{color:var(--paper)}
footer.site li{margin-bottom:.55rem;font-size:.94rem}
footer .f-brand{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  grid-template-areas:
    "stag title"
    "sub sub";
  column-gap:1rem;
  row-gap:.55rem;
  align-items:center;
}
footer .f-brand .footer-stag{
  grid-area:stag;
  display:block;
  width:78px;
  height:94px;
  object-fit:contain;
  color:var(--brass);
  margin:0;
}
footer .f-brand .serif{grid-area:title;font-size:1.4rem;color:var(--paper)}
footer .f-brand .mono-line{grid-area:sub;margin:0 !important}
footer .f-legal{
  margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid rgba(170,140,100,.25);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:rgba(252,250,248,.5);
}
footer .watermark{right:-10%;bottom:-20%;top:auto;opacity:.05}

/* ============ SUBPAGE HERO ============ */
.page-hero{
  position:relative;min-height:56vh;display:flex;align-items:flex-end;
  background:var(--night);color:var(--paper);overflow:hidden;padding-bottom:4rem;
}
.page-hero.tall{min-height:70vh}
.page-hero .hero-media img{animation:none;transform:scale(1.02)}
.page-hero h1{font-size:clamp(2.6rem,5.5vw,4.6rem);max-width:16ch}
.page-hero .hero-inner{padding:9rem 0 0}
.crumbs{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(252,250,248,.65);margin-bottom:1rem;display:flex;gap:.6rem;
}
.crumbs a:hover{color:var(--brass-soft)}

/* ============ ZEITSTRAHL ============ */
.timeline{position:relative;max-width:860px;margin:0 auto;padding:2rem 0}
.timeline::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1.5px;
  background:linear-gradient(var(--brass) 80%,transparent);transform:translateX(-50%);
}
.tl-item{
  position:relative;width:calc(50% - 3rem);padding:0 0 4.5rem;
}
.tl-item:nth-child(odd){margin-left:auto;text-align:left;padding-left:0}
.tl-item:nth-child(even){text-align:right}
.tl-item .tl-dot{
  position:absolute;top:.45rem;width:13px;height:13px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--brass);
}
.tl-item:nth-child(odd) .tl-dot{left:-3rem;transform:translateX(-50%)}
.tl-item:nth-child(even) .tl-dot{right:-3rem;transform:translateX(50%)}
.tl-item .tl-year{
  font-family:var(--serif);font-size:2.4rem;font-weight:700;color:var(--bordeaux);line-height:1;
}
.tl-item h3{font-size:1.25rem;margin:.5rem 0 .4rem}
.tl-item p{font-size:.95rem;color:var(--ink-soft)}
.tl-item .polaroid{margin-top:1.4rem;max-width:320px}
.tl-item:nth-child(even) .polaroid{margin-left:auto}

/* ============ JOURNAL / BLOG ============ */
.feature-art{
  display:grid;grid-template-columns:1.3fr 1fr;gap:0;background:var(--night);color:var(--paper);
  overflow:hidden;
}
.feature-art .fa-img{overflow:hidden;min-height:420px}
.feature-art .fa-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.feature-art:hover .fa-img img{transform:scale(1.04)}
.feature-art .fa-body{padding:3.2rem;display:flex;flex-direction:column;justify-content:center}
.feature-art h3{font-size:clamp(1.7rem,3vw,2.5rem);margin:.8rem 0 1rem}
.cat-pill{
  display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;padding:.3rem .8rem;border:1px solid var(--brass);color:var(--brass);
  width:max-content;
}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem}
.art-card{background:var(--paper);border:1px solid var(--sand-deep);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .4s,transform .4s}
.art-card:hover{box-shadow:0 22px 50px rgba(44,34,30,.14);transform:translateY(-5px)}
.art-card .ac-img{aspect-ratio:16/10;overflow:hidden}
.art-card .ac-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.art-card:hover .ac-img img{transform:scale(1.06)}
.art-card .ac-body{padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.art-card h3{font-size:1.3rem;line-height:1.25}
.art-card .ac-meta{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);letter-spacing:.08em;margin-top:auto;padding-top:.8rem}
/* Artikel-Seite */
.article-body{max-width:68ch;margin:0 auto}
.article-body p{margin-bottom:1.5rem;font-size:1.08rem}
.article-body h2{font-size:1.9rem;margin:2.8rem 0 1rem}
.article-body h3{font-size:1.35rem;margin:2.2rem 0 .8rem}
.article-body figure{margin:2.5rem -8%;position:relative}
.article-body figcaption{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);margin-top:.6rem;text-align:center}
.info-box{
  background:var(--sand);border-left:4px solid var(--brass);padding:1.5rem 1.8rem;margin:2rem 0;
}
.info-box .mono-line{color:var(--brass);display:block;margin-bottom:.5rem}
.faq-item{border-bottom:1px solid var(--sand-deep);padding:1.3rem 0}
.faq-item summary{
  font-family:var(--serif);font-size:1.15rem;font-weight:600;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq-item summary::after{content:"+";font-family:var(--sans);color:var(--brass);font-size:1.5rem;transition:transform .3s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding-top:.8rem;color:var(--ink-soft)}

/* ============ DETAIL: STICKY BOX ============ */
.detail-layout{display:grid;grid-template-columns:1fr 380px;gap:4rem;align-items:start}
.sticky-box{
  position:sticky;top:110px;background:var(--paper);border:1px solid var(--brass-soft);
  box-shadow:0 24px 60px rgba(44,34,30,.14);padding:2rem;
}
.sticky-box .price-line{font-family:var(--serif);font-size:1.7rem;margin-bottom:.2rem}
.sticky-box .price-line small{font-size:.9rem;font-family:var(--sans);color:var(--ink-soft)}
.fact-row{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0}
.fact-pill{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;padding:.4rem .85rem;
  border:1px solid var(--sand-deep);background:var(--sand);
}
.check-list li{
  padding:.55rem 0 .55rem 1.9rem;position:relative;border-bottom:1px dashed var(--sand-deep);font-size:.97rem;
}
.check-list li::before{
  content:"";position:absolute;left:0;top:1rem;width:11px;height:6px;
  border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(-45deg);
}

/* ============ REVEALS ============ */
.rv{opacity:0;transform:translateY(42px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-48px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-r{opacity:0;transform:translateX(48px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-l.in,.rv-r.in{opacity:1;transform:none}
.rv-rot{opacity:0;transform:rotate(-7deg) translateY(40px) scale(.94);transition:all 1s var(--ease)}
.rv-rot.in{opacity:1;transform:rotate(-2.5deg) translateY(0) scale(1)}
.rv-rot.rot2.in{transform:rotate(2deg)}
[data-stagger]>*{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  nav.main .lang{display:none}
  .ap-grid{grid-template-columns:repeat(2,1fr)}
  .amen-grid{grid-template-columns:repeat(3,1fr)}
  .art-grid{grid-template-columns:repeat(2,1fr)}
  .mosaic{grid-template-columns:repeat(3,1fr)}
  .detail-layout{grid-template-columns:1fr}
  .sticky-box{position:static}
  .feature-art{grid-template-columns:1fr}
  nav.main a:not(.nav-cta){display:none}
  .burger{display:block;background:none;border:none;color:inherit;cursor:pointer}
}
@media(max-width:760px){
  .topbar{font-size:.68rem;padding:.35rem .8rem}
  header.site{top:44px;padding:.7rem 0}
  header.site .wrap{gap:.8rem}
  .brand svg{width:34px;height:34px}
  .brand .b-name{font-size:1.02rem}
  .brand .b-sub{font-size:.52rem}
  nav.main a.nav-cta{padding:.5rem .9rem;font-size:.72rem}
  .sec{padding:4.5rem 0}
  .split,.ap-row,.ap-row:nth-child(even){grid-template-columns:1fr;gap:2.2rem}
  .ap-row:nth-child(even) .ap-row-img{order:0}
  .ap-grid,.art-grid,.form-grid{grid-template-columns:1fr}
  .amen-grid{grid-template-columns:repeat(2,1fr)}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .quickbar-in{grid-template-columns:1fr 1fr}
  .quickbar .btn{grid-column:1/-1;justify-content:center}
  .snip--street{display:none}
  .snip--archive{width:150px;top:12vh}
  footer.site .f-grid{grid-template-columns:1fr 1fr}
  .timeline::before{left:8px}
  .tl-item{width:auto;margin-left:2.6rem !important;text-align:left !important;padding-bottom:3rem}
  .tl-item .tl-dot{left:-2.6rem !important;right:auto !important;transform:translateX(-50%) !important}
  .tl-item:nth-child(even) .polaroid{margin-left:0}
  .hero-inner{padding-bottom:calc(20vh + 2rem)}
  .article-body figure{margin:2rem 0}
}


/* ============ MOBILE-FIX 2026-11-08: kein horizontales Scrollen ============ */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
.quickbar .qf{min-width:0}
.quickbar input,.quickbar select{width:100%;min-width:0;max-width:100%}
@media(max-width:480px){
  .quickbar-in{grid-template-columns:1fr}
  .quickbar .qf{border-right:none;border-bottom:1px solid var(--sand-deep)}
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.2s !important}
  .hero-media img{animation:none}
  .marquee-track{animation:none;flex-wrap:wrap}
  .rv,.rv-l,.rv-r,.rv-rot,[data-stagger]>*{opacity:1;transform:none}
}

/* ===== Journal: Tabellen und Checklisten (Claude, 15.10.2026) ===== */
.jr-table-wrap{margin:2rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.jr-table{width:100%;border-collapse:collapse;font-size:.95rem}
.jr-table th,.jr-table td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--sand-deep);vertical-align:top}
.jr-table thead th{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--ink-soft)}
.jr-table tbody tr:last-child td{border-bottom:none}
.jr-table td b{font-weight:600;color:var(--ink)}
.jr-table .nw{white-space:nowrap;font-family:var(--mono);font-size:.84rem;color:var(--ink-soft)}
.jr-check{list-style:none;padding:0;margin:1.6rem 0}
.jr-check li{position:relative;padding:.5rem 0 .5rem 1.6rem;color:var(--ink-soft);border-bottom:1px solid var(--sand-deep)}
.jr-check li:last-child{border-bottom:none}
.jr-check li::before{content:"";position:absolute;left:.3rem;top:1.05rem;width:6px;height:6px;border-radius:50%;background:var(--brass)}
@media(max-width:700px){.jr-table{font-size:.88rem}.jr-table th,.jr-table td{padding:.6rem .5rem}}

/* ===== Journal: Bleistiftskizzen (Claude, 16.10.2026) ===== */
.sketch-fig{margin:3rem -4% 2.5rem;text-align:center}
.sketch-fig svg{width:100%;height:auto;max-width:720px;display:block;margin:0 auto}
.sketch-fig .sk{fill:none;stroke:var(--ink-soft);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.78}
.sketch-fig .sk-l{stroke-width:1.1;opacity:.5}
.sketch-fig .sk-d{stroke-dasharray:14 11;opacity:.55}
.sketch-fig .sk-f{stroke-width:2.1;opacity:.9}
.sketch-fig figcaption{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);
  margin-top:.9rem;opacity:.85}
@media(max-width:700px){.sketch-fig{margin:2.2rem 0 2rem}}

/* Formular-Pause (siehe main.js FORM_PAUSE) */
.form-pause{border:1px solid var(--brass);background:var(--paper);padding:2.2rem 2rem;max-width:640px}
.form-pause p{margin:0 0 1.1rem}
.form-pause p:last-child{margin-bottom:0}
.form-pause-lead{font-size:1.05rem;line-height:1.6}
.form-pause{min-width:0;box-sizing:border-box;width:100%}
.form-pause .btn{white-space:normal;overflow-wrap:anywhere;max-width:100%;text-align:center;justify-content:center}
@media (max-width:600px){.form-pause{padding:1.6rem 1.25rem}}
.form-pause-tel{font-family:var(--mono);letter-spacing:.04em;color:var(--bordeaux)}