/* Subpages: Über uns, Café mieten, Kontakt, Impressum, Datenschutz. */

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; max-width: none; }

/* Über uns */
/* Über uns hero: Armin behind the bar as the full stage (photo 1691 × 930), the copy in front of the dark left side. */
.about-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 100svh; overflow: hidden; padding: calc(var(--header) + 5rem) 0 clamp(3rem, 6vw, 5rem); }
.about-hero-media { position: absolute; inset: 0; z-index: -1; }
.about-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.about-hero-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(14, 12, 10, .9) 0%, rgba(14, 12, 10, .55) 40%, rgba(14, 12, 10, .08) 72%), linear-gradient(0deg, rgba(14, 12, 10, .92) 0%, transparent 45%), linear-gradient(180deg, rgba(14, 12, 10, .55) 0%, transparent 25%); }
.about-hero-inner { position: relative; z-index: 1; display: grid; justify-items: start; gap: 1.4rem; }
.about-hero-inner .display-xxl { font-size: clamp(4.5rem, 14vw, 15rem); line-height: .82; }
.about-hero-lead { max-width: 26rem; color: var(--on-dark-2); }
.about-years { position: absolute; right: var(--gutter); bottom: -.1em; z-index: 0; color: rgba(243, 236, 223, .08); font: 700 clamp(12rem, 30vw, 30rem)/.8 var(--display); letter-spacing: -.07em; pointer-events: none; user-select: none; }

.about-story { padding: var(--section) 0; background: var(--paper); }
.about-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.about-story-text { display: grid; gap: 1.3rem; font-size: clamp(1.1rem, 1.3vw, 1.25rem); line-height: 1.7; color: var(--ink-2); }
.about-story-text p:first-child::first-letter { float: left; margin: .08em .1em 0 0; color: var(--ink); font: 700 4.1em/.8 var(--display); }

.about-principles { padding: var(--section) 0; background: var(--night); }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.principles li { display: grid; align-content: start; gap: 1rem; padding: 2.4rem clamp(1.4rem, 3vw, 2.8rem) 0 0; }
.principles li + li { padding-left: clamp(1.4rem, 3vw, 2.8rem); border-left: 1px solid var(--line-dark); }
.principle-mark { color: var(--glow); font: italic 400 1.6rem/1 var(--serif); }
.principles p:not(.principle-mark) { max-width: 22rem; color: var(--on-dark-2); font-size: 1.1rem; }

.about-gallery { padding: var(--section) 0; background: var(--paper); }
/* Symmetric: the two 4:3 photos are equal, the portrait cup sits between them (Mike, 25.09.2026). */
.gallery-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1rem, 2vw, 1.8rem); align-items: end; }
.gallery-grid figure { overflow: hidden; }
.gallery-grid img { width: 100%; object-fit: cover; }
.gallery-a img { aspect-ratio: 4 / 3; }
.gallery-b img { aspect-ratio: 4 / 5; }
.gallery-c img { aspect-ratio: 4 / 3; }
.gallery-grid figcaption { margin-top: .8rem; color: var(--ink-2); font-size: .98rem; font-style: italic; }

/* Café mieten */
.events-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 100svh; overflow: hidden; padding: calc(var(--header) + 5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.events-hero-media { position: absolute; inset: 0; z-index: -1; }
.events-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.events-hero-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(14, 12, 10, .92) 0%, rgba(14, 12, 10, .62) 45%, rgba(14, 12, 10, .1) 80%), linear-gradient(0deg, rgba(14, 12, 10, .95) 0%, transparent 50%); }
.events-hero-inner { display: grid; justify-items: start; gap: 1.6rem; }
.events-hero-inner .eyebrow { margin-bottom: -.4rem; }
.events-hero h1 { max-width: 12ch; }
.events-hero .lead { max-width: 36rem; }
.events-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.events-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line-dark); }
.events-facts > div { padding: 1.3rem 1.2rem 0 0; }
.events-facts > div + div { padding-left: 1.2rem; border-left: 1px solid var(--line-dark); }
.events-facts dt { color: var(--oak); font: 400 1.02rem/1.2 var(--serif); font-variant-caps: all-small-caps; letter-spacing: .085em; }
.events-facts dd { margin-top: .35rem; font: 700 clamp(1.2rem, 1.7vw, 1.6rem)/1.15 var(--display); }
.events-facts dd.muted { margin-top: .2rem; font: 400 1rem/1.4 var(--serif); }

/* The room from four angles (Mike, 20.10.2026): two rows, wide left then wide right; the narrow photo fills its row height. */
.events-room { padding: var(--section) 0; background: var(--night); }
.room-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.8rem, 3.4vw, 3rem) clamp(1rem, 2vw, 1.8rem); }
.room { display: flex; flex-direction: column; grid-column: span 2; }
.room--wide { grid-column: span 3; }
.room-media { position: relative; flex: 1; overflow: hidden; background: var(--night-3); }
.room--wide .room-media { flex: none; aspect-ratio: 4 / 3; }
.room-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room figcaption { margin-top: .8rem; color: var(--on-dark-2); font-size: .98rem; font-style: italic; }
.events-occasions { padding: var(--section) 0; background: var(--paper); }
.occasion-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 4rem); }
.occasion-list li { display: grid; align-content: start; gap: .8rem; padding: 2rem 0 2.6rem; border-top: 1px solid var(--line-light); }
.occasion-list p { max-width: 24rem; color: var(--ink-2); font-size: 1.08rem; }

.events-packages { padding: var(--section) 0; background: radial-gradient(50% 50% at 50% 30%, rgba(244, 176, 96, .1), transparent 70%), var(--night); }
/* Three equal cards, each opened by its own photo (Mike, 25.09.2026: no lone picture in the middle). */
.package { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.6rem, 3vw, 2.6rem); background: var(--night-2); border: 1px solid var(--line-dark); }
.package figure { margin: calc(-1 * clamp(1.6rem, 3vw, 2.6rem)) calc(-1 * clamp(1.6rem, 3vw, 2.6rem)) .6rem; overflow: hidden; }
.package figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 50%; }
/* One evening offer since rental is Mo–Sa 18.00–24.00 only (Armin, 20.10.2026): photo beside the text. */
.package--wide { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding: 0; }
.package--wide figure { margin: 0; }
.package--wide figure img { height: 100%; aspect-ratio: 1 / 1; object-position: center 30%; }
.package-body { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.6rem, 3vw, 2.6rem); }
.package-time { color: var(--oak); font: 400 1.05rem/1 var(--serif); font-variant-caps: all-small-caps; letter-spacing: .085em; }
.package ul { display: grid; gap: .55rem; margin-bottom: auto; padding-top: .4rem; }
.package li { position: relative; padding-left: 1.2rem; color: var(--on-dark-2); line-height: 1.5; }
.package li::before { position: absolute; left: 0; top: .72em; width: .5rem; height: 1px; content: ""; background: var(--glow); }
.package-price { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line-dark); font: 600 .92rem/1 var(--sans); font-stretch: 108%; }

.events-process { padding: var(--section) 0 0; background: var(--paper); }
.process-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); }
.steps { counter-reset: step; display: grid; }
.steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem 1.6rem; padding: 1.8rem 0; border-top: 1px solid var(--line-light); }
.step-no { grid-row: span 2; color: var(--spritz-deep); font: 700 clamp(2.6rem, 4vw, 3.6rem)/.9 var(--display); font-variant-numeric: lining-nums; }
.steps p { max-width: 30rem; color: var(--ink-2); font-size: 1.08rem; }

.events-faq { padding: clamp(4rem, 8vw, 7rem) 0 var(--section); background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); }
.faq { border-top: 1px solid var(--line-light); }
.faq details { border-bottom: 1px solid var(--line-light); }
.faq summary { position: relative; padding: 1.3rem 2.5rem 1.3rem 0; cursor: pointer; font: 400 clamp(1.2rem, 1.6vw, 1.45rem)/1.3 var(--serif); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { position: absolute; right: .2rem; top: 50%; content: "+"; color: var(--spritz-deep); font: 400 1.6rem/1 var(--sans); transform: translateY(-50%); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { max-width: 38rem; padding: 0 0 1.5rem; color: var(--ink-2); font-size: 1.08rem; }

.events-inquiry { padding: var(--section) 0; background: var(--night); border-top: 1px solid var(--line-dark); }
.inquiry-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.inquiry-intro .lead { margin-top: 1.4rem; }
.inquiry-direct { display: grid; gap: .3rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line-dark); font-size: 1.12rem; }
.inquiry-direct .eyebrow { margin-bottom: .4rem; }
.inquiry-direct a { overflow-wrap: anywhere; }
.inquiry-direct a:hover { color: var(--glow); }
.optional { color: var(--on-dark-3); font-style: italic; font-variant-caps: normal; letter-spacing: 0; }

/* Kontakt */
.contact-hero { padding: calc(var(--header) + clamp(3.5rem, 8vw, 7rem)) 0 clamp(3.5rem, 7vw, 6rem); background: radial-gradient(45% 60% at 80% 30%, rgba(244, 176, 96, .1), transparent 70%), var(--night); }
.contact-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: end; }
.contact-hero h1 { max-width: 11ch; }
.contact-hero-links { display: grid; justify-items: start; gap: .6rem; }
/* Shown only when api/anfrage.js redirects a form posted without JavaScript here (…#nicht-gesendet). */
.not-sent { display: none; }
.not-sent:target { display: block; scroll-margin-top: calc(var(--header) + 1.5rem); max-width: 30rem; margin-bottom: .8rem; padding: .9rem 1.1rem; border-left: 3px solid var(--spritz); background: var(--night-3); color: var(--cream); font: 500 1rem/1.5 var(--sans); }
.contact-big { font: 400 clamp(1.3rem, 2vw, 1.9rem)/1.3 var(--serif); overflow-wrap: anywhere; }
a.contact-big { border-bottom: 1px solid var(--line-dark); transition: color .25s ease, border-color .25s ease; }
a.contact-big:hover { color: var(--glow); border-color: var(--glow); }
.contact-hero-links .open-status { margin-top: 1rem; }

.contact-main { padding: var(--section) 0; background: var(--paper); }
.contact-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.25fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.contact-where address { margin-bottom: 2rem; }
.lageplan { margin-bottom: 1.4rem; }
.lageplan svg { width: 100%; max-width: 420px; }
.lageplan figcaption { margin-top: .6rem; color: var(--ink-2); font-size: .92rem; font-style: italic; }
.lp-mountains { fill: none; stroke: var(--oak-deep); stroke-width: 1.5; stroke-linejoin: round; }
.lp-caps, .lp-label, .lp-street-label, .lp-cafe-label { font-family: var(--serif); fill: var(--ink); }
.lp-caps { font-size: 15px; font-variant-caps: all-small-caps; letter-spacing: .08em; fill: var(--oak-deep); }
.lp-label { font-size: 15px; fill: var(--ink-2); }
.lp-street { fill: rgba(23, 18, 14, .07); stroke: rgba(23, 18, 14, .25); }
.lp-street-label { font-size: 13px; font-variant-caps: all-small-caps; letter-spacing: .12em; fill: var(--ink-2); }
.lp-landmark { fill: none; stroke: var(--ink); stroke-width: 1.5; }
/* Goldenes Dachl: the gilded roof as the landmark of the old town, drawn in gold. */
.lp-dachl-roof { fill: #d4a84b; }
.lp-dachl-shingles { fill: none; stroke: #8a6a22; stroke-width: 1; stroke-linejoin: round; }
.lp-dachl-front { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.lp-landmark-arch { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.lp-cafe { fill: var(--spritz); }
.lp-pulse { fill: var(--spritz); opacity: .25; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
.lp-cafe-label { font-family: var(--display); font-size: 20px; font-weight: 700; }
@keyframes pulse { from { transform: scale(.6); opacity: .45; } to { transform: scale(1.6); opacity: 0; } }
.contact-when .hours { font-size: 1.14rem; }
.contact-when-note { margin-top: 1.4rem; color: var(--ink-2); font-size: 1.02rem; }
.contact-when-note a { text-decoration: underline; text-underline-offset: .2em; }
.contact-photo { margin-top: 2.4rem; }
.contact-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.contact-photo figcaption { margin-top: .6rem; color: var(--ink-2); font-size: .92rem; font-style: italic; }
.contact-main .form-card { padding: clamp(1.6rem, 3vw, 2.6rem); background: #f8f3ea; box-shadow: 0 30px 70px -40px rgba(23, 18, 14, .4); }
.contact-form .eyebrow { margin-bottom: 0; }

/* Impressum, Datenschutz */
.legal-hero { padding: calc(var(--header) + clamp(3.5rem, 7vw, 6rem)) 0 clamp(3rem, 6vw, 5rem); background: var(--night); }
.legal-hero .lead { max-width: 40rem; margin-top: 1.4rem; }
/* 404 only: the two-button row under the lead (Mike, 26.09.2026). */
.legal-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.legal { padding: clamp(4rem, 8vw, 7rem) 0 var(--section); background: var(--paper); }
.legal-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.legal-list > div { display: grid; grid-template-columns: minmax(9rem, .7fr) minmax(0, 1fr); gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line-light); }
.legal-list dt { hyphens: auto; overflow-wrap: break-word; color: var(--oak-deep); font: 400 1.02rem/1.4 var(--serif); font-variant-caps: all-small-caps; letter-spacing: .085em; }
.legal-list dd { font-size: 1.08rem; }
.legal-list a { text-decoration: underline; text-underline-offset: .2em; }
.legal-text { display: grid; gap: 1rem; max-width: 42rem; }
.legal-text h2 { margin-top: 1.4rem; font-size: clamp(1.5rem, 2vw, 1.9rem); scroll-margin-top: calc(var(--header) + 2rem); }
.legal-text h2:first-child { margin-top: 0; }
.legal-text p { color: var(--ink-2); font-size: 1.08rem; }
.legal-toc { position: sticky; top: calc(var(--header) + 2rem); display: grid; gap: .5rem; font-size: 1.1rem; }
.legal-toc a:hover { color: var(--spritz-deep); }
.legal-draft { margin-top: 1.4rem; font-style: italic; }

@media (max-width: 1080px) {
  .contact-main-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contact-main .form-card { grid-column: 1 / -1; }
  .events-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .events-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 860px) {
  .about-story-grid, .process-grid, .faq-grid, .inquiry-grid, .contact-hero-grid, .legal-grid, .section-head--split { grid-template-columns: minmax(0, 1fr); }
  .about-hero-media img { object-position: 53% 40%; }  /* Armin stays in frame on portrait phones */
  .about-hero { min-height: 92svh; padding-bottom: 2.4rem; }
  .about-hero-inner { gap: .9rem; }
  .about-hero-inner .display-xxl { font-size: clamp(3rem, 15vw, 4.2rem); }
  .about-hero-lead { max-width: 22rem; font-size: 1rem; line-height: 1.5; }
  .about-years { font-size: 10rem; opacity: .7; }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .principles li, .principles li + li { padding: 2rem 0; border-left: 0; }
  .principles li + li { border-top: 1px solid var(--line-dark); }
  /* Phones: one column, all three photos in the same 4:3 frame (Mike, 25.09.2026). */
  .gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .gallery-grid img { aspect-ratio: 4 / 3; }
  .gallery-b img { object-position: center 60%; }
  .contact-main-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; }
  .package--wide { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .events-hero-media img { object-position: 92% 50%; }  /* the lit lettering sits mid-image; on phones it would run behind the lead text */
  /* Phones: the text spans the full width, so the desktop's left-to-right shade left the lead on the lit bottles
     (3.7:1 at 393 px, Mike's iPhone, 20 October 2026). A bottom-up shade keeps the bulbs at the top visible. */
  .events-hero-media::after { background: linear-gradient(0deg, rgba(14, 12, 10, .96) 0%, rgba(14, 12, 10, .86) 50%, rgba(14, 12, 10, .6) 78%, rgba(14, 12, 10, .3) 100%); }
  .events-hero .lead, .events-hero h1 { text-shadow: 0 1px 3px rgba(14, 12, 10, .6); }
  .room-grid { grid-template-columns: minmax(0, 1fr); }
  .room, .room--wide { grid-column: auto; }
  .room-media, .room--wide .room-media { flex: none; aspect-ratio: 4 / 3; }
  .package--wide figure img { height: auto; aspect-ratio: 4 / 3; object-position: center 8%; }  /* keeps the whole glass with its orange slice */
}

@media (max-width: 560px) {
  .occasion-list { grid-template-columns: minmax(0, 1fr); }
  .events-facts { grid-template-columns: minmax(0, 1fr); }
  .events-facts > div, .events-facts > div + div { padding-left: 0; border-left: 0; }
  .legal-list > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-pulse { animation: none; }
}